React Hotloading in native Meteor is ready (i.e. no webpack)

gadicc · April 1, 2016, 6:35am

New release: gadicc:ecmascript-hot@1.3.0_4

Crucial fix for the infinite loop affecting majority of deployments.
My sincere apologies for this slipping through.
Now that Meteor 1.3 is out, we’re using proper versioning. You no longer
need to specify the exact version to use, just put gadicc:ecmascript-hot
in your packages file and updates will arrive with meteor update.
Fix Uncaught TypeError: Cannot read property 'c' of undefined from
first load (since last release).
Disable (broken) sourcemap for modules-runtime.js (since last release).
~~Transform stateless components in .js files now too.~~ As this was
a critical update, this potentially unstable feature has been delayed
until the next release.

efrancis · April 1, 2016, 4:29pm

hey @gadicc, awesome work on this is this 100% react-specific, or is there a possibility for it to support HMR of other projects (Angular, Vue) later on?

jchavez · April 1, 2016, 6:28pm

does this work with meteor 1.2?

gadicc · April 1, 2016, 7:09pm

Thanks :> It’s currently react-specific, but only because I’m lazy and got to cut some corners knowing it was (initially) only going to be used for react. I thought about doing a full HMR implementation like webpack does, but it’s probably too much work; however, I do plan to offer the most used part of the API, which will probably cover 90% of the cases. You can subscribe to #8 and I’ll post any updates about this there.

No, unfortunately not… it’s completely dependant on the new module system.

gadicc · April 2, 2016, 2:26pm

Today’s update survives server reloads and works better with files that aren’t client-only, e.g. for SSR. A reminder that you no longer need to specify the version number and can just meteor update now.

New release: gadicc:ecmascript-hot@1.3.0_5

We now survive server code changes, so this now works for both
imports that aren’t beneath a client subdirectory and
SSR code from mixed / “both” directories with shared code. (#17)
We no longer rely on Mongo for communications, so we now require an
extra port. By default this is Meteor’s port + 2 (i.e., right after
mongo), but you can override it with the HOT_PORT environment variable.
Fixes the “non-stop reload” bug where changes to files in public
(and I guess, other shared directories with lots of files) could cause
a lot of restarts. (#22)

gadicc · April 5, 2016, 4:18pm

TL;DR;

If you’re a speed freak, check out the new experimental release and report back in that issue.

Full story:

I was working on a project today, when I caught myself not hitting ctrl-S because I’d rather make one more change first than waste the extra 500 ms. I felt that if I’m still save-averse, the project is failing, so I decided to do something about it. Time is money after all, and every ms counts. So check out the experimental release and see how it affects your hot reload times.

manuel · April 5, 2016, 4:40pm

I changed packages to use gadicc:ecmascript-hot@=1.3.1-fast.3 And now I’m getting:

$ meteor update

This project is already at Meteor 1.3, the latest release.
=> Errors while upgrading packages:

While selecting package versions:
error: Conflict: Constraint gadicc:babel-compiler-hot@=6.6.2-beta.1 is not satisfied by gadicc:babel-compiler-hot 6.5.2_6.
Constraints on package "gadicc:babel-compiler-hot":
* gadicc:babel-compiler-hot@=6.6.2-beta.1 <- gadicc:ecmascript-hot 1.3.1-fast.3

Conflict: Constraint modules@0.5.2 is not satisfied by modules 0.5.1.
Constraints on package "modules":
* modules@=0.5.1 <- top level
* modules@0.5.1 <- ecmascript 0.4.1 <- allow-deny 1.0.2 <- mongo 1.1.5
* modules@0.5.1 <- ecmascript 0.4.1 <- mongo 1.1.5
* modules@0.5.1 <- jquery 1.11.6
* modules@0.5.1 <- ecmascript-runtime 0.2.8 <- ecmascript 0.4.1 <- allow-deny 1.0.2 <- mongo 1.1.5
* modules@0.5.1 <- ecmascript-runtime 0.2.8 <- ecmascript 0.4.1 <- mongo 1.1.5
* modules@0.5.1 <- ecmascript-runtime 0.2.8 <- gadicc:ecmascript-hot 1.3.1-fast.3
* modules@0.5.1 <- promise 0.6.5 <- babel-runtime 0.1.6 <- ecmascript 0.4.1 <- allow-deny 1.0.2 <- mongo 1.1.5
* modules@0.5.1 <- promise 0.6.5 <- babel-runtime 0.1.6 <- ecmascript 0.4.1 <- mongo 1.1.5
* modules@0.5.1 <- promise 0.6.5 <- babel-runtime 0.1.6 <- gadicc:ecmascript-hot 1.3.1-fast.3
* modules@0.5.1 <- promise 0.6.5 <- gadicc:ecmascript-hot 1.3.1-fast.3
* modules@0.5.1 <- babel-runtime 0.1.6 <- ecmascript 0.4.1 <- allow-deny 1.0.2 <- mongo 1.1.5
* modules@0.5.1 <- babel-runtime 0.1.6 <- ecmascript 0.4.1 <- mongo 1.1.5
* modules@0.5.1 <- babel-runtime 0.1.6 <- gadicc:ecmascript-hot 1.3.1-fast.3
* modules@0.5.1 <- geojson-utils 1.0.6 <- minimongo 1.0.12 <- allow-deny 1.0.2 <- mongo 1.1.5
* modules@0.5.1 <- geojson-utils 1.0.6 <- minimongo 1.0.12 <- mongo 1.1.5
* modules@0.5.1 <- es5-shim 4.5.8
* modules@0.5.2 <- gadicc:ecmascript-hot 1.3.1-fast.3
* modules@0.5.1-rc.4 <- gadicc:hot 0.0.15 <- gadicc:ecmascript-hot 1.3.1-fast.3

Conflict: Constraint ecmascript-runtime@0.2.9 is not satisfied by ecmascript-runtime 0.2.8.
Constraints on package "ecmascript-runtime":
* ecmascript-runtime@=0.2.8 <- top level
* ecmascript-runtime@0.2.8 <- ecmascript 0.4.1 <- allow-deny 1.0.2 <- mongo 1.1.5
* ecmascript-runtime@0.2.8 <- ecmascript 0.4.1 <- mongo 1.1.5
* ecmascript-runtime@0.2.9 <- gadicc:ecmascript-hot 1.3.1-fast.3

Conflict: Constraint babel-runtime@0.1.7 is not satisfied by babel-runtime 0.1.6.
Constraints on package "babel-runtime":
* babel-runtime@=0.1.6 <- top level
* babel-runtime@0.1.6 <- ecmascript 0.4.1 <- allow-deny 1.0.2 <- mongo 1.1.5
* babel-runtime@0.1.6 <- ecmascript 0.4.1 <- mongo 1.1.5
* babel-runtime@0.1.7 <- gadicc:ecmascript-hot 1.3.1-fast.3

Conflict: Constraint promise@0.6.6 is not satisfied by promise 0.6.5.
Constraints on package "promise":
* promise@=0.6.5 <- top level
* promise@0.6.5 <- ecmascript 0.4.1 <- allow-deny 1.0.2 <- mongo 1.1.5
* promise@0.6.5 <- ecmascript 0.4.1 <- mongo 1.1.5
* promise@0.6.5 <- ecmascript-runtime 0.2.8 <- ecmascript 0.4.1 <- allow-deny 1.0.2 <- mongo 1.1.5
* promise@0.6.5 <- ecmascript-runtime 0.2.8 <- ecmascript 0.4.1 <- mongo 1.1.5
* promise@0.6.5 <- ecmascript-runtime 0.2.8 <- gadicc:ecmascript-hot 1.3.1-fast.3
* promise@0.6.5 <- babel-runtime 0.1.6 <- ecmascript 0.4.1 <- allow-deny 1.0.2 <- mongo 1.1.5
* promise@0.6.5 <- babel-runtime 0.1.6 <- ecmascript 0.4.1 <- mongo 1.1.5
* promise@0.6.5 <- babel-runtime 0.1.6 <- gadicc:ecmascript-hot 1.3.1-fast.3
* promise@0.6.6 <- gadicc:ecmascript-hot 1.3.1-fast.3

gadicc · April 5, 2016, 4:59pm

@manuel, sory, I should have mentioned, this release is for Meteor 1.3.1. That’s not a “recommended” release by MDG yet, so you need to specify by hand: meteor update --release 1.3.1. Then this version will work. Thanks for diving in so quick :>

tastemeru · April 7, 2016, 4:12pm

Could anybody help to figure out with JS decorators or whatever it is? I’m trying to use this inside a react component:

dragulaDecorator = (componentBackingInstance) => {
};

then my babel config, inside the client folder, looks as:

  "extends": "../.babelrc",
  "presets": [
    "stage-0"
  ],

  "plugins": [
    "transform-decorators-legacy"
  ],
...

And it seems that decorators work, but anything else doesn’t. All buttons are ignoring any actions, and new props do not come. It seems as stage-0 not a real good choice for meteor right now. Okay then if I change in presets stage-0 to decorators-legacy I get the error: Missing class properties transform.

Any suggestions?

Edit: okay, I found that it has no clue with decorators, and it’s something from stage-1. What have I to do with this to start working?

Edit2: solved, it was this http://babeljs.io/docs/plugins/transform-class-properties/

gadicc · April 7, 2016, 5:05pm

Yeah the decorators one is a pain because it’s not included in any of the presets and load order is very important. Glad you figured it out. I got stage-0 and decorators working with:

{
  "presets": [
    "meteor",
    "es2015",
    "stage-0",
    "react",
  ],
  "plugins": [
    "transform-decorators-legacy",
  ]
}

The meteor preset here duplicates a few things but seems to be ok for now. I can’t remember why I have react here, since Meteor adds it, I think it was for compatibility with some non-Meteor tools.

Edit: that’s obviously my project root’s .babelrc, and I add the hotloading stuff in client/.babelrc.

billyvg · April 7, 2016, 8:30pm

I seem to have problems on the client side and with my local packages. I’m getting hot-client.js:88 Uncaught TypeError: Cannot read property 'deprecate' of undefined

Any ideas? I can’t really test without the package because I need class properties, not sure how to debug this

Edit: Seems to be related to the iron:core package.

gadicc · April 8, 2016, 5:37am

I’ll mention that the hotloading inside of packages is pretty new although I am using it every day. There’s an open issue on github about packages importing each other, haven’t had a chance to check that out thoroughly yet. Obviously this only affects packages which replace ecmascript with ecamscript-hot.

The undefined there is usually a module we couldn’t find (I’ll try make the error more helpful in a future release) - although generally, this only happens once on certain changes and then you should never see it again after a reload. I’ll admit I’ve never seen If you’re seeing it all the time it’s breaking the hotloading, please open an issue on github, with, if possible, a link to your code and instructions to reproduce - possibly in #29.

vikti · April 15, 2016, 6:12pm

Hi @gadicc
I have a hard time to figure out how to get this work. I am completely lost between the two .babelrc the npm packages to install and the version of ecmascript-hot to use.

I have a lot of error at compile time:
/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:179:17: Unknown plugin "transform-decorators-legacy" specified in "/Users/vikti/dev/wizar-guide/.babelrc" at 0, attempted to resolve relative to "/Users/vikti/dev/wizar-guide" at /Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:179:17 at Array.map (native) at Function.normalisePlugins (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:155:20) at OptionManager.mergeOptions (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:277:36) at OptionManager.addConfig (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:207:10) at OptionManager.mergeOptions (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:284:14) at OptionManager.init (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:465:10) at File.initOptions (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/file/index.js:194:75) at new File (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/file/index.js:123:22) at Pipeline.transformFromAst (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/node_modules/babel-core/lib/transformation/pipeline.js:67:16) at /Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/index.js:53:34 at Cache.Cp.get (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/cache.js:94:19) at Object.compile (/Users/vikti/.meteor/packages/gadicc_ecmascript-hot/.1.3.1_1.17g1xzl++os+web.browser+web.cordova/plugin.compile-ecmascript-hot.os/npm/node_modules/meteor/gadicc_babel-compiler-hot/node_modules/meteor-babel/index.js:43:23) at Object.Babel.compile (packages/gadicc_babel-compiler-hot.js:447:24) at packages/gadicc_babel-compiler-hot.js:543:24 at Function.time (/tools/tool-env/profile.js:305:10) at profile (packages/gadicc_babel-compiler-hot.js:604:20) at packages/gadicc_babel-compiler-hot.js:542:22 at Array.forEach (native) at BabelCompiler.BCp.processFilesForTarget (packages/gadicc_babel-compiler-hot.js:491:14)

My package.json is:

{ "private": "true", "version": "0.0.01", "scripts": { "start": "meteor run" }, "dependencies": { "meteor-node-stubs": "~0.2.0", "mobx": "^2.1.3", "react": "^15.0.1" }, "devDependencies": { "babel-plugin-react-transform": "^2.0.2", "babel-plugin-transform-class-properties": "^6.6.0", "babel-plugin-transform-decorators": "^6.6.5", "babel-preset-meteor": "^6.6.7", "babel-preset-stage-0": "^6.5.0", "babel-preset-stage-1": "^6.5.0", "react-transform-catch-errors": "^1.0.2", "react-transform-hmr": "^1.0.4", "redbox-react": "^1.2.3" } }
I want to use:

class properties in .js
class properties in .jsx
decorators (for mobx.js)

If I understand this is stage-1 on babel ?

So:

what babel npm packages I have to install in addition of this readme part?
which version to use when I do meteor add gadicc:ecmascript-hot@xxx?
what to put in the /.babelrc?
what to put in the /client/.babelrc?
I will also use Typescript. Is this compatible?

I know I ask a lot and I am sorry for that but I am struggled for hours.

Thx you very much for your time.

vikti · April 15, 2016, 8:42pm

just changed my package.json to "babel-plugin-transform-decorators-legacy": "^1.3.4", and it works.

gadicc · April 16, 2016, 11:51am

Hey @vitki, glad you managed to sort this out. I’ve added clearer instructions and troubleshooting steps about plugins & presets to the README to help others too. Re your other questions (which might help others):

What version to use when I do meteor add gadicc:ecmascript-hot@xxx?

You can leave out the @xxx part now. This was only needed in the past before Meteor 1.3 was released. So just leave this out and it will add our current stable release, and updates will come in via meteor update.

The exception is experimental releases and pre-releases. For that you should use whatever we tell you to put there for that specific release

What to put in the various .babelrc files, and what to npm install?

There are samples at the bottom of the README for a basic setup (and as you saw, the first long npm install in the “how to use” instructions). From that initial step, you can add any extra plugins/presets you need, to the .babelrc, and via npm install. There are clearer instructions for this now at the bottom of the README.

I will also use Typescript. Is this compatible?

Unfortunately I have no experience with typescript, I hope someone else can help out here. If all typescript needs are babel plugins, it should work fine.

P.S. Instead of adding packages directly to your package.json by hand, it’s easier to do it via npm install --save (or --save-dev for babel plugins). This will download the latest version and add it to your package.json in a single step.

gadicc · April 16, 2016, 12:01pm

New experimental release: gadicc:ecmascript-hot@=1.3.2-fast.13

Following up my post 11 days ago, there has been a lot of progress on the fast and faster branches of the project. As usual, I’m using the code every day in my own work and it’s become pretty stable; additionally, with a lot of help from community reports on github, various edge cases have been fixed too. I’d especially like to thank @clayne for the many hours he’s spent this week hunting down bugs and submitting the first two PRs to the project.

Please try this release and report back. Although it’s still marked as “experimental”, and a few issues are still open on github, barring any new major bug discoveries, this code will hopefully be released as stable next weekend. You can do this by specifying the exact version with @=, i.e.

meteor add gadicc:ecmascript-hot@=1.3.2-fast.13

Changes

Works with Meteor 1.3.2 and 1.3.2.1.
Major speed improvements, especially when you have a lot of non-client-only files in your project.
Now works with meteor test and meteor test-packages.
Various other fixes, resiliency and improved help when debugging, as detailed in the History.md.

rhywden · April 16, 2016, 12:42pm

Would be nice if there was an explanation somewhere how we’re supposed to update to this.

gadicc · April 16, 2016, 12:43pm

Good point Updated the post, thanks.

rhywden · April 16, 2016, 12:53pm

Thanks for the edit, though I fear this particular release is not for me:

fs.js:1063 throw errnoException(process._errno, 'watch'); ^ Error: watch ENOENT at errnoException (fs.js:1031:11) at FSWatcher.start (fs.js:1063:11) at Object.fs.watch (fs.js:1088:11) at Object.handlers.fileData (C:\Users\johan\AppData\Local\.meteor\packages\gadicc_ecmascript-hot\1.3.2-fast.11\plugin.compile-ecmascript-hot.os\npm\node_modules\meteor\gadicc_babel-compiler-hot\node_modules\meteor-hotload-accelerator\lib\accelerator.js:118:8) at process.handlers.close.process.send.type (C:\Users\johan\AppData\Local\.meteor\packages\gadicc_ecmascript-hot\1.3.2-fast.11\plugin.compile-ecmascript-hot.os\npm\node_modules\meteor\gadicc_babel-compiler-hot\node_modules\meteor-hotload-accelerator\lib\accelerator.js:60:52) at process.emit (events.js:98:17) at handleMessage (child_process.js:322:10) at Pipe.channel.onread (child_process.js:349:11)

gadicc · April 16, 2016, 1:28pm

Oh dear Looks like an issue on Windows. Will see what we can do about this. Thanks for reporting.