├── .babelrc ├── .gitignore ├── README.md ├── devServer.js ├── package.json ├── public └── index.html ├── src ├── App.js └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["es2015", { "modules": false }], "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | /node_modules 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # preact-compat-hmr 2 | 3 | This is a very simple example demonstrating the usage of the native Hot Module Replacement (HMR) feature of `webpack` 2 with `preact` and `preact-compat`. 4 | 5 | - `npm install` 6 | - `npm run dev` 7 | - Browse to localhost:8001 8 | - Go to src/App.js and edit it. 🔥 9 | -------------------------------------------------------------------------------- /devServer.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const webpack = require('webpack'); 3 | const webpackConfig = require('./webpack.config.js')(); 4 | const createWebpackMiddleware = require('webpack-dev-middleware'); 5 | const createWebpackHotMiddleware = require('webpack-hot-middleware'); 6 | const path = require('path'); 7 | 8 | const compiler = webpack(webpackConfig); 9 | const app = express(); 10 | app.use('/', express.static(path.resolve(__dirname, './public'))); 11 | const webpackDevMiddleware = createWebpackMiddleware(compiler, { 12 | quiet: true, 13 | noInfo: true, 14 | headers: { 15 | 'Access-Control-Allow-Origin': '*', 16 | }, 17 | publicPath: '/app', 18 | }); 19 | app.use(webpackDevMiddleware); 20 | app.use(createWebpackHotMiddleware(compiler)); 21 | app.listen(8001, () => console.log('App listening on http://localhost:8001')); 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "preact-compat-hmr", 3 | "version": "1.0.0", 4 | "description": "Debugging HMR with preact and preact-compat.", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "node ./devServer.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/ctrlplusb/preact-compat-hmr.git" 12 | }, 13 | "author": "Sean Matheson ", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/ctrlplusb/preact-compat-hmr/issues" 17 | }, 18 | "homepage": "https://github.com/ctrlplusb/preact-compat-hmr#readme", 19 | "devDependencies": { 20 | "babel-core": "6.13.2", 21 | "babel-loader": "6.2.5", 22 | "babel-preset-es2015": "6.13.2", 23 | "babel-preset-react": "6.11.1", 24 | "express": "4.14.0", 25 | "path": "0.12.7", 26 | "webpack": "2.1.0-beta.19", 27 | "webpack-dev-middleware": "1.6.1", 28 | "webpack-hot-middleware": "2.12.2" 29 | }, 30 | "dependencies": { 31 | "preact": "5.7.0", 32 | "preact-compat": "2.3.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Preact HMR Debugging 6 | 7 | 8 |

9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function App() { 4 | return ( 5 |

6 |

Hello World!

7 |

I 💖 preact

8 |

9 | ) 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import App from './App.js'; 4 | 5 | const container = document.querySelector('#app'); 6 | 7 | function renderApp() { 8 | const app = (); 9 | render(app, container); 10 | } 11 | 12 | // Set up HMR re-rendering. 13 | if (module.hot) { 14 | module.hot.accept(); 15 | module.hot.accept('./App.js', renderApp); 16 | } 17 | 18 | // Initial render. 19 | renderApp(); 20 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | 4 | function configFactory() { 5 | return { 6 | devtool: 'inline-source-map', 7 | entry: { 8 | main: [ 9 | 'webpack-hot-middleware/client', 10 | path.resolve(__dirname, './src/index.js') 11 | ], 12 | }, 13 | output: { 14 | path: path.resolve(__dirname, './build'), 15 | filename: '[name].js', 16 | chunkFilename: '[name]-[chunkhash].js', 17 | publicPath: '/app', 18 | }, 19 | resolve: { 20 | extensions: ['.js'], 21 | alias: { 22 | 'react': 'preact-compat', 23 | 'react-dom': 'preact-compat', 24 | }, 25 | }, 26 | module: { 27 | loaders: [ 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader', 31 | exclude: [/node_modules/] 32 | }, 33 | ], 34 | }, 35 | plugins: [ 36 | new webpack.optimize.OccurrenceOrderPlugin(), 37 | new webpack.HotModuleReplacementPlugin(), 38 | new webpack.NoErrorsPlugin() 39 | ] 40 | } 41 | } 42 | 43 | module.exports = configFactory; 44 | --------------------------------------------------------------------------------