Blaze <==> React Refactor Paths?

I wish Meteor had a middleware-only version. That’s all my boss and I wanted to use it for; we didn’t want the whole jungle.

Okay, I figured out a far simpler solution to using Webpack for the frontend. Instead of having it output a bundle.js somewhere where Meteor will pick it up, you have webpack-dev-server serve up the bundle on a different port, say localhost:9000, and then in your root html file you put <script type="text/javascript" src="http://localhost:9000/assets/bundle.js"></script> That way you get the source maps, you can use the react-hot-loader, and you can view and debug on all the original ES6/jsx source files. With this you also get the benefit of being able to easily npm install whatever 3rd party React components or other tools you want to use, and then simply require/import them in your frontend code. I think I may still have to do a bit of fiddling to give the webpack bundle access to various Meteor package variables, but that shouldn’t be too hard.

@awatson1978 Hey, I set up an example repo of using webpack-dev-server and react-hot-loader together with Meteor: https://github.com/jedwards1211/meteor-webpack-react

1 Like

@awatson1978 I know this thread is almost 2 years old, but my mini-project maybe can be useful to someone:

Following two npm packages can convert Blaze source code to React source code:

https://www.npmjs.com/package/blaze2gasoline
https://www.npmjs.com/package/gasoline-turbo

Usage:

blaze2gasoline -i path_to_blaze_file.html -o ./gas.json
gasoline-turbo -i ./gas.json -o output_directory/ -f react

…and result is native .jsx file.

Don’t expect miracles, but it can save some (boring) manual work.

Note 1: it’s very fresh, so expect bugs!
Note 2: I am doing this for some other reason (my target is not converting Blaze to React or Angular)

2 Likes

Online Blaze to React converter: https://blaze2react.meteorcluster.com/

Still far from perfect but getting closer :slight_smile:

3 Likes

very cool. I

is it correct to say that this integrates helpers and events only? or is there a way to patch blaze lifecyle to react lifecycle like rendered to didMount, destroyed to willUnmount etc? (is that correct anyway?)

very useful for apps with many templates.

Thank you very much for building this!

@vectorselector thanks.

Not entire cycle is covered at the moment, but I’m using this package in my hobby project https://www.meteorkitchen.com so I am improving blaze2react occasionally when I find some free time, and one of missing features is “cover entire lifecycle” (at least onRendered as most frequently used). You can expect improvements in that direction, but I cannot promise when because it’s really just a hobby.

No worries, most of my .onCreated .onRendered .onDestroyed blaze lifecycle stuff is just setting-up state, which React will handle anyway differently, with this.state in the constructor and .setState …

I’m pleased to see all events and handlers nicely tucked-in as functions, and called from the jsx appropriately.

Great job, and useful tools!

I was looking at hours and hours of what looked like a manual job, but you managed to script it very nicely