├── .gitignore
├── package.json
├── src
├── app.js
├── component.js
├── index.html
├── index.js
└── update.js
├── webpack.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "refresh",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "scripts": {
7 | "start": "webpack-dev-server --hot --mode development --open",
8 | "build": "webpack --mode production"
9 | },
10 | "devDependencies": {
11 | "@babel/core": "^7.6.0",
12 | "@babel/preset-env": "^7.6.0",
13 | "@babel/preset-react": "^7.0.0",
14 | "babel-loader": "^8.0.6",
15 | "html-webpack-plugin": "^3.2.0",
16 | "react-refresh": "^0.4.1",
17 | "webpack": "^4.39.3",
18 | "webpack-cli": "^3.3.8",
19 | "webpack-dev-server": "^3.8.0",
20 | "lodash.debounce": "^4.0.8"
21 | },
22 | "dependencies": {
23 | "react": "^16.9.0",
24 | "react-dom": "^16.9.0"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | const React = require("react");
2 | const ReactDOM = require("react-dom");
3 | const Index = require("./component");
4 | const Something = ({ children }) => {
5 | return Change here reloads the page {children}
;
6 | };
7 |
8 | ReactDOM.render(
9 |
10 |
11 | ,
12 | document.getElementById("app")
13 | );
14 |
--------------------------------------------------------------------------------
/src/component.js:
--------------------------------------------------------------------------------
1 | const prevRefreshReg = window.$RefreshReg$;
2 | const prevRefreshSig = window.$RefreshSig$;
3 | const RefreshRuntime = require("react-refresh/runtime");
4 | const enqueueUpdate = require("./update");
5 |
6 | window.$RefreshReg$ = (type, id) => {
7 | const fullId = module.id + " " + id;
8 | RefreshRuntime.register(type, fullId);
9 | };
10 | window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
11 |
12 | try {
13 | /// Actual component code
14 | const React = require("react");
15 |
16 | const Index = () => {
17 | const [counter, setCounter] = React.useState(0);
18 | return (
19 | setCounter(counter + 1)}>
20 | Change here does not! {counter}
21 |
22 | );
23 | };
24 |
25 | module.exports = Index;
26 | ///
27 |
28 | $RefreshReg$(Index, "Index");
29 | module.hot.accept();
30 | enqueueUpdate();
31 | } finally {
32 | window.$RefreshReg$ = prevRefreshReg;
33 | window.$RefreshSig$ = prevRefreshSig;
34 | }
35 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | React and Webpack4
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
2 | const runtime = require("react-refresh/runtime");
3 | runtime.injectIntoGlobalHook(window);
4 | window.$RefreshReg$ = (type, id) => {};
5 | window.$RefreshSig$ = () => type => type;
6 | require("./app");
7 | }
8 |
--------------------------------------------------------------------------------
/src/update.js:
--------------------------------------------------------------------------------
1 | const runtime = require("react-refresh/runtime");
2 | const debounce = require("lodash.debounce");
3 | let enqueueUpdate = debounce(runtime.performReactRefresh, 30);
4 | module.exports = enqueueUpdate;
5 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebPackPlugin = require("html-webpack-plugin");
2 |
3 | module.exports = {
4 | module: {
5 | rules: [
6 | {
7 | test: /\.js$/,
8 | exclude: /(node_modules)/,
9 | use: {
10 | loader: "babel-loader",
11 | options: {
12 | presets: ["@babel/preset-env", "@babel/preset-react"],
13 | plugins: [require("react-refresh/babel")]
14 | }
15 | }
16 | }
17 | ]
18 | },
19 | plugins: [
20 | new HtmlWebPackPlugin({
21 | template: "./src/index.html",
22 | filename: "./index.html"
23 | })
24 | ]
25 | };
26 |
--------------------------------------------------------------------------------