Updated to babel 7 and added React Fragment support

[ijjk]

Ran into issue #458 and worked out a fix for it and updated to babel 7 which required updating to the latest version of ava. I wasn't sure which branch you want this to be requested against since I saw mention of wanting to do the babel 7 update on v4 so let me know if I need to change it. Awesome project by the way!

[giuseppeg]

@ijjk great work. This is an amazing PR, thank you!

I would like to publish this change as a minor release (rather than a breaking change) and keep supporting Babel 6. In order to do so we should keep the old tests in a subfolder say test/babel6 and run them using Babel 6, move the Babel configuration to a file (right now it is in package.json) and change ava's require to point to a local module (say test/_require) that conditionally returns babel-register or @babel/register.

Finally before releasing we should probably fix this #486 - we can do it in a follow up PR.

Let me know if you have time to do this. thank you again!

[ijjk]

I updated my branch to prevent a breaking change and added the babel6 tests so it should work with both v6 and v7 now just that fragments won't work with v6 as it doesn't support the JSXFragment visitor from what I found.

I didn't find that ava's require needed to be mapped to both @babel/register and babel-register conditionally to get the tests to run with babel v6 and just edited the _transform module to use babel-core for the babel6 tests. Let me know if this isn't what you were wanting.

I can try to tackle #486 after this PR so we can get this fix out.

[giuseppeg]

@ijjk thank you! If you don't mind I'll wait a few days and test this branch on two real world apps to see if everything is fine.

[giuseppeg]

why is this check needed? I am talking about el &&

[ijjk]

openingElement is undefined for fragment paths from what I'm seeing so I added a check to make sure the el is defined to prevent an error.

[ijjk]

Ok sounds good, thanks for taking a look at this!

[giuseppeg]

this won't work here when on the same file you have a fragment. Can you add this test to fixtures/fragment.js?

function Component1() {
  return (
     <>
         <div>test</div>
     </>
  )
}

function Component2() {
  return (
    <div>
      <style jsx>{`div { color: red }`}</style>
    </div>
  ) 
}

The good news is that we can register a JSXOpeningFragment:

  // only apply JSXFragment visitor if supported
  if (t.isJSXFragment) {
    visitors.visitor.JSXFragment = visitors.visitor.JSXElement
    visitors.visitor.JSXOpeningFragment = {
      enter(path, state) {
        if (!state.hasJSXStyle) {
          return
        }

        if (state.ignoreClosing === null) {
          // We keep a counter of elements inside so that we
          // can keep track of when we exit the parent to reset state
          // note: if we wished to add an option to turn off
          // selectors to reach parent elements, it would suffice to
          // set this to `1` and do an early return instead
          state.ignoreClosing = 0
        }

        state.ignoreClosing++
      }
    }
}

[ijjk]

Good catch, I updated the test for that case too.

[giuseppeg]

@ijjk thanks for the awesome work! I have one last request can you add a test to babel6 with a simple component that uses the fragment shorthand and assert that it throws? (just to make sure that it is running the tests with babel6).

Also can I get your twitter handle? I would like to give you credit for this :)

[ijjk]

Yup, I added the babel 6 fragment shorthand test. Thanks for the awesome project!

I'm still working on setting up a twitter so it's still empty, but it's @_ijjk

[giuseppeg]

awesome, merged thanks again <3