Babel 6

[aruberto]

Babel 6 was just released and has a new plugin API. Assuming this plugin will need to be updated to support it (otherwise can just close this issue).

[leecade]

👍 want this

[theneva]

👍

[anselmo]

+1

[gaearon]

Please, don't +1 the issue, it doesn't help at all.

I'm aware Babel 6 is out and I'll support it in the next release.
If you feel like making a PR or temporarily maintaining a Babel 6-compatible fork, please do.
I will get back to this (and React 0.14 full support) in a week or two, in the meantime please be patient.

[theneva]

I'm trying to make a PR, but can't for the life of me figure out where babel-plugin has gone.

It's used by the build npm script, but is no longer part of babel. It doesn't seem to be part of babel-core, babel-cli, or even babel-runtime, and there's no package called just babel-plugin. Am I missing something obvious?

As you can probably tell, this is my first attempt at babel plugins, so I'm not familiar with the ecosystem...

[gaearon]

It's not really important, from what I remember. I just copied it because that's what other plugins were using, but I think it can be replaced by simple babel CLI call. You can take inspiration from any Babel plugin here: https://github.com/babel/babel/tree/development/packages.

[theneva]

Thanks, will look into it and report back if/when I have something.

[chicoxyzzy]

I've made some progress on this
branch: https://github.com/chicoxyzzy/babel-plugin-react-transform/tree/babel-6
commit: 292e5ad
If you npm link my babel-6 branch you can see that visitor's exit method still returns result of t.program. I can't find any docs on how to fix this method to work proper. I think the rest should work fine.
Also tests are still on Babel 5 so they won't work either.
@theneva do you have any progress on this?

[chicoxyzzy]

options should be passed like so

          presets: ['es2015', 'react'],
          plugins: [
            ['transform-object-rest-spread'],
            ['transform-class-properties'],
            ['react-transform', {
              transforms: [
                {
                  transform: 'react-transform-hmr',
                  imports: ['react'],
                  locals: ['module'],
                }, {
                  transform: 'react-transform-catch-errors',
                  imports: ['react', 'redbox-react'],
                },
              ],
            }],
          ],

[leecade]

@chicoxyzzy thanks , I didn't know how to add extra before

[theneva]

Nice, @chicoxyzzy. I haven't been able to get very far, no – and I unfortunately can't get around to look any more into it before tomorrow. Please keep up your good work 😃 :

[gaearon]

We should make a Babel 6 preset for HMR + error catching.

[ghost]

Just threw it together and haven't tested yet but: https://github.com/danmartinez101/babel-preset-react-hmre

Is this on the right track, @gaearon ?

[chicoxyzzy]

Yep @danmartinez101 it looks ok.

But first of all we need to:

• migrate build step to Babel 6
• update tests
• fix Program.exit

I'll try my best to fix it but I'll be very busy next two weeks. Anyway feel free to ping me if you think I can help.

[buildmaster]

I've created a pull request on chicoxyzzy#1 which updates the tests to use babel 6. All but the Vanilla test on that branch now throw an error

Unexpected return value from visitor method function (path) {
        return fn.call(state, path, state);
      }

[chicoxyzzy]

@buildmaster I just checked your PR. If you will rm -rf node_modules and then npm install you'll see error

> babel-plugin build

sh: babel-plugin: command not found

that's because there is no babel-plugin in node_modules/.bin directory anymore. So we should fix build script in package.json somehow

[buildmaster]

ok I've copied the command from the old babel-plugin bin, but means a dev requirement on babel-cli as well.

[buildmaster]

ok made a couple of updates, but I think I'm at the limit of my knowledge, so might have to wait for someone who knows how the plugin actually works to pick up the fix

[theneva]

@buildmaster @chicoxyzzy I think this is the easiest way to do it, yeah – that's how I did it in my (still unpushed) branch too. Not sure you need the --copy-files option, though?

At any rate, this will be quite a bit bigger than simply changing the plugin export… especially due to fixing the tests, which I don't have any experience with.

Is anyone close to having a complete PR on this?

[chicoxyzzy]

Good work @TaopaiC and @buildmaster! I've merged your commits! Now we should fix Program.exit and failing test for modern classes

[chicoxyzzy]

@gaearon should I create WIP PR so everyone will be able to help and track progress more comfortably?

[geminiyellow]

is any news in here?

[gaearon]

Please feel free to create a PR.
I will be able to review in a couple of weeks and no sooner due to my current workload.

[chicoxyzzy]

Please feel free to create a PR.

here it is #48

[ghost]

I have no idea how babel or this plugin work so I'm going to start hacking away in a different fork for now.
You can find it here: https://github.com/danmartinez101/babel-plugin-react-transform/tree/unit-tests

This is the approach I'm planning on taking:

1. Write granular unit tests for the existing plugin (with Babel 5)
2. Upgrade to Babel 6
3. Fix the granular unit tests
4. Update the fixtures
5. Hope that the fixture-based tests pass because the unit tests covered all the logic (but probably will need to tweak them due to Babel potentially outputting things differently)

Once I get through all or most of this, I can either apply what I've learned to the branch created above, or we can just go with this one ( assuming that it actually works, of course... and that is a big assumption :P )

Edit: I'm also using jasmine so I can focus on writing tests instead of figuring out how to configure mocha but these can be converted to mocha easily later

[gaearon]

Just throwing in this amazing new reference: https://github.com/thejameskyle/babel-plugin-handbook
We did some things in a wrong way because I didn't know any better.
While we're at it, we can learn to use scope correctly, etc.

[ghost]

I started reading that last night; it has helped a lot already :D :D I was planning on seeing if parts of the plugin could be improved, but want to get through tests and upgrade first to make sure I really understand it. I'm hoping to get it wrapped up tonight.

[ghost]

I'm also thinking that https://github.com/babel/babel/tree/master/packages/babel-template is going to be useful here.

[justingreenberg]

@danmartinez101 for sure—babel-template is being used to create the core HOCs (as a workaround for decorators) in #48 and there are definitely some other areas i think templating could simplify things

@gaearon what do you think is incorrect with respect to scope?

[vagusX]

how's it going?

[mmahalwy]

any luck with this?

[gaearon]

Please track #50 instead. I will soon have time to release it & related packages.