Skip to content
Permalink
Browse files

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

  • Loading branch information...
markdalgleish committed Mar 28, 2019
1 parent 4ec8974 commit 49ea2585f110d828e85e9498ee81851288318dc0
Showing with 59 additions and 23 deletions.
  1. +8 −2 lib/index.js
  2. +15 −3 lib/makeWebpackConfig.js
  3. +2 −1 lib/start.js
  4. +26 −8 src/Playroom/Playroom.js
  5. +2 −0 src/Playroom/components.js
  6. +4 −0 src/Playroom/frameComponent.js
  7. +2 −0 src/Playroom/themes.js
  8. +0 −9 src/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)
};
};
@@ -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'
};
@@ -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;
@@ -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,
@@ -0,0 +1,2 @@
/* eslint-disable-next-line import/no-unresolved */
module.exports = require('__PLAYROOM_ALIAS__COMPONENTS__');
@@ -0,0 +1,4 @@
/* eslint-disable-next-line import/no-unresolved */
const frameComponent = require('__PLAYROOM_ALIAS__FRAME_COMPONENT__');

module.exports = frameComponent.default || frameComponent;
@@ -0,0 +1,2 @@
/* eslint-disable-next-line import/no-unresolved */
module.exports = require('__PLAYROOM_ALIAS__THEMES__');
@@ -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}
/>,

0 comments on commit 49ea258

Please sign in to comment.
You can’t perform that action at this time.