Use webpack for building => hot loading + imports

[wmertens]

I'm thinking that it would be possible to build the react component(s) with webpack, and have webpack include all the dependencies.

This way, the dependencies for React are tree-shaken and work like normally in the React ecosystem, and any shared dependencies can be marked as external globals in the webpack configuration. Furthermore, it can use the hot reload capabilities of webpack and react-hot-loader.

Disadvantage would be having to run 2 processes to develop.

Does that sound reasonable or am I missing something?

[pswai]

@wmertens That's actually an interesting idea. If we can do that it will be awesome and highly valuable :)

There are two major potential issues that we need to solve:

• Making Ember resolver to know where to find the modules
• Extracting usage of React components in HBS so that they won't be tree-shaken incorrectly

I'll try to experiment with the idea. If you have already started some research, please feel free to share your findings. PR is very welcomed!

[wmertens]

I got things working like this, but I'm not at liberty to release the code yet:

• Create an entry point script that puts all react components on a global object
• adjust react-component to look for the components on that object; react is not imported by ember at all
• webpack builds the entry point as a separate js file
• Webpack-hot-middleware added as express middleware in the server file generated by ember g server
• the global components can be wrapped with react-imported-component so their JS loads on first use

end result: ember dev also starts a webpack compiler that serves the react components and handles hot reloading.

It works very well, hot reload is pretty instant and doesn't cause Ember to reload. If there are overlapping dependencies between react and ember, they can be grabbed by telling webpack to get the dependency from its global (injected by Ember).

Still to figure out:

• hook into the deploy pipeline to build webpack and copy the result
• make some ember plugin that adds the middleware without having to do ember g server

I'll ask about releasing the code again.