Giter VIP home page Giter VIP logo

Comments (33)

chicoxyzzy avatar chicoxyzzy commented on April 30, 2024 4

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'],
                },
              ],
            }],
          ],

from babel-plugin-react-transform.

leecade avatar leecade commented on April 30, 2024

πŸ‘ want this

from babel-plugin-react-transform.

theneva avatar theneva commented on April 30, 2024

πŸ‘

from babel-plugin-react-transform.

anselmo avatar anselmo commented on April 30, 2024

+1

from babel-plugin-react-transform.

gaearon avatar gaearon commented on April 30, 2024

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.

from babel-plugin-react-transform.

theneva avatar theneva commented on April 30, 2024

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...

from babel-plugin-react-transform.

gaearon avatar gaearon commented on April 30, 2024

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.

from babel-plugin-react-transform.

theneva avatar theneva commented on April 30, 2024

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

from babel-plugin-react-transform.

chicoxyzzy avatar chicoxyzzy commented on April 30, 2024

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?

from babel-plugin-react-transform.

leecade avatar leecade commented on April 30, 2024

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

from babel-plugin-react-transform.

theneva avatar theneva commented on April 30, 2024

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 πŸ˜ƒ :

from babel-plugin-react-transform.

gaearon avatar gaearon commented on April 30, 2024

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

from babel-plugin-react-transform.

 avatar commented on April 30, 2024

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 ?

from babel-plugin-react-transform.

chicoxyzzy avatar chicoxyzzy commented on April 30, 2024

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.

from babel-plugin-react-transform.

buildmaster avatar buildmaster commented on April 30, 2024

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);
      }

from babel-plugin-react-transform.

chicoxyzzy avatar chicoxyzzy commented on April 30, 2024

@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

from babel-plugin-react-transform.

buildmaster avatar buildmaster commented on April 30, 2024

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

from babel-plugin-react-transform.

buildmaster avatar buildmaster commented on April 30, 2024

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

from babel-plugin-react-transform.

theneva avatar theneva commented on April 30, 2024

@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?

from babel-plugin-react-transform.

TaopaiC avatar TaopaiC commented on April 30, 2024

Hi I updated some files based on @chicoxyzzy 's and @buildmaster 's work. PR is at chicoxyzzy#2 .

since the generated sources changed, need experts to review.
three of four test cases look fine, but test/fixtures/modern is still failed. If enabling decorator in babel, the error message is same as babel/babel#2645 and babel/babel#2801 .

from babel-plugin-react-transform.

chicoxyzzy avatar chicoxyzzy commented on April 30, 2024

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

from babel-plugin-react-transform.

chicoxyzzy avatar chicoxyzzy commented on April 30, 2024

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

from babel-plugin-react-transform.

geminiyellow avatar geminiyellow commented on April 30, 2024

is any news in here?

from babel-plugin-react-transform.

gaearon avatar gaearon commented on April 30, 2024

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.

from babel-plugin-react-transform.

chicoxyzzy avatar chicoxyzzy commented on April 30, 2024

Please feel free to create a PR.

here it is #48

from babel-plugin-react-transform.

 avatar commented on April 30, 2024

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

from babel-plugin-react-transform.

gaearon avatar gaearon commented on April 30, 2024

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.

from babel-plugin-react-transform.

 avatar commented on April 30, 2024

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.

from babel-plugin-react-transform.

 avatar commented on April 30, 2024

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

from babel-plugin-react-transform.

justingreenberg avatar justingreenberg commented on April 30, 2024

@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?

from babel-plugin-react-transform.

vagusX avatar vagusX commented on April 30, 2024

how's it going?

from babel-plugin-react-transform.

mmahalwy avatar mmahalwy commented on April 30, 2024

any luck with this?

from babel-plugin-react-transform.

gaearon avatar gaearon commented on April 30, 2024

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

from babel-plugin-react-transform.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.