feat: Add hot module reloading for components and themes (#53)

lib/index.js

@@ -1,9 +1,15 @@
 const start = require('./start');
 const build = require('./build');
 
+const provideDefaults = config => ({
+  port: 9000,
+  openBrowser: true,
+  ...config
+});
+
 module.exports = config => {
   return {
-    start: callback => start(config, callback),
-    build: callback => build(config, callback)
+    start: callback => start(provideDefaults(config), callback),
+    build: callback => build(provideDefaults(config), callback)
   };
 };

lib/makeWebpackConfig.js

@@ -20,7 +20,15 @@ module.exports = async (playroomConfig, options) => {
 
   const ourConfig = {
     mode: options.production ? 'production' : 'development',
-    entry: require.resolve('../src/index.js'),
+    entry: [
+      ...(options.production
+        ? []
+        : [
+            `webpack-dev-server/client?http://localhost:${playroomConfig.port}`,
+            'webpack/hot/dev-server'
+          ]),
+      require.resolve('../src/index.js')
+    ],
     output: {
       path: path.resolve(playroomConfig.cwd, playroomConfig.outputPath),
       publicPath: ''
@@ -42,7 +50,6 @@ module.exports = async (playroomConfig, options) => {
       // This option fixes https://github.com/prettier/prettier/issues/4959
       // Once this issue is fixed, we can remove this line:
       exprContextCritical: false,
-
       rules: [
         {
           test: /\.js$/,
@@ -106,7 +113,12 @@ module.exports = async (playroomConfig, options) => {
           : 'Playroom',
         chunksSortMode: 'none'
       }),
-      ...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()])
+      ...(options.production
+        ? []
+        : [
+            new webpack.HotModuleReplacementPlugin(),
+            new FriendlyErrorsWebpackPlugin()
+          ])
     ],
     devtool: options.production ? 'none' : 'eval-source-map'
   };

lib/start.js

@@ -6,6 +6,7 @@ const makeWebpackConfig = require('./makeWebpackConfig');
 module.exports = async (config, callback) => {
   const webpackConfig = await makeWebpackConfig(config, { production: false });
   const webpackDevServerConfig = {
+    hot: true,
     stats: {},
     noInfo: true,
     quiet: true,
@@ -17,7 +18,7 @@ module.exports = async (config, callback) => {
 
   const compiler = webpack(webpackConfig);
   const devServer = new WebpackDevServer(compiler, webpackDevServerConfig);
-  const { port = 9000, openBrowser = true } = config;
+  const { port, openBrowser } = config;
 
   devServer.listen(port, '0.0.0.0', (...args) => {
     const [err] = args;

src/Playroom/Playroom.js

@@ -23,6 +23,10 @@ import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/hint/xml-hint';
 
+const themesImport = require('./themes');
+const componentsImport = require('./components');
+const frameComponentImport = require('./frameComponent');
+
 const resizableConfig = {
   top: true,
   right: false,
@@ -79,6 +83,9 @@ export default class Playroom extends Component {
     super(props);
 
     this.state = {
+      themes: themesImport,
+      components: componentsImport,
+      frameComponent: frameComponentImport,
       codeReady: false,
       code: null,
       renderCode: null,
@@ -88,7 +95,21 @@ export default class Playroom extends Component {
     };
   }
 
-  componentDidMount() {
+  componentDidMount = () => {
+    if (module.hot) {
+      module.hot.accept('./themes', () => {
+        this.setState({ themes: require('./themes') });
+      });
+
+      module.hot.accept('./components', () => {
+        this.setState({ components: require('./components') });
+      });
+
+      module.hot.accept('./frameComponent', () => {
+        this.setState({ frameComponent: require('./frameComponent') });
+      });
+    }
+
     Promise.all([this.props.getCode(), store.getItem('editorSize')]).then(
       ([code, height]) => {
         if (height) {
@@ -101,7 +122,7 @@ export default class Playroom extends Component {
       }
     );
     window.addEventListener('keydown', this.handleKeyPress);
-  }
+  };
 
   componentWillUnmount() {
     window.removeEventListener('keydown', this.handleKeyPress);
@@ -212,14 +233,11 @@ export default class Playroom extends Component {
   };
 
   render() {
+    const { staticTypes, widths } = this.props;
     const {
-      components,
-      staticTypes,
       themes,
-      widths,
-      frameComponent
-    } = this.props;
-    const {
+      components,
+      frameComponent,
       codeReady,
       code,
       renderCode,

src/Playroom/components.js

@@ -0,0 +1,2 @@
+/* eslint-disable-next-line import/no-unresolved */
+module.exports = require('__PLAYROOM_ALIAS__COMPONENTS__');

src/Playroom/frameComponent.js

@@ -0,0 +1,4 @@
+/* eslint-disable-next-line import/no-unresolved */
+const frameComponent = require('__PLAYROOM_ALIAS__FRAME_COMPONENT__');
+
+module.exports = frameComponent.default || frameComponent;

src/Playroom/themes.js

@@ -0,0 +1,2 @@
+/* eslint-disable-next-line import/no-unresolved */
+module.exports = require('__PLAYROOM_ALIAS__THEMES__');

src/index.js

@@ -8,12 +8,6 @@ import Playroom from './Playroom/Playroom';
 
 const playroomConfig = __PLAYROOM_GLOBAL__CONFIG__;
 const staticTypes = __PLAYROOM_GLOBAL__STATIC_TYPES__;
-/* eslint-disable import/no-unresolved */
-const themes = require('__PLAYROOM_ALIAS__THEMES__');
-const components = require('__PLAYROOM_ALIAS__COMPONENTS__');
-let frameComponent = require('__PLAYROOM_ALIAS__FRAME_COMPONENT__');
-/* eslint-enable import/no-unresolved */
-frameComponent = frameComponent.default || frameComponent;
 
 const widths = playroomConfig.widths || [320, 375, 768, 1024];
 
@@ -46,12 +40,9 @@ const updateCode = code => {
 
 render(
   <Playroom
-    themes={themes}
-    components={components}
     staticTypes={staticTypes}
     widths={widths}
     defaultFrames={playroomConfig.defaultFrames}
-    frameComponent={frameComponent}
     getCode={getCode}
     updateCode={updateCode}
   />,