speed symlinks hot reload

webpack/webpack#15100
#70

packages/reshow-app/package.build.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.17.80",
+  "version": "0.17.86",
   "name": "reshow-app",
   "repository": {
     "type": "git",
@@ -15,6 +15,7 @@
     "@swc/core": "1.2.189",
     "ansi-html-community": "0.0.8",
     "array.polyfill": "*",
+    "call-func": "*",
     "chalk": "^2.x",
     "core-js": "^3.1.4",
     "error-stack-parser": "2.0.6",
@@ -56,7 +57,10 @@
     "workbox-webpack-plugin": "*"
   },
   "exports": {
-    "./client": "./client.js",
+    "./client": {
+      "require": "./client.js",
+      "import": "./client.mjs"
+    },
     "./server": "./server.js",
     "./webpack.client": "./webpack.client.js",
     "./webpack.server": "./webpack.server.js"
@@ -71,6 +75,7 @@
   "files": [
     "README.md",
     "client.js",
+    "client.mjs",
     "package.json",
     "server.js",
     "webpack",

packages/reshow-app/package.json

@@ -16,7 +16,7 @@
     "copy": "cp package.build.json ./build/package.json && cp yarn.build.lock ./build/yarn.lock && cp README.md ./build",
     "clean": "find ./build/* \\( ! -path \"*node_modules*\" \\) | xargs rm -rf",
     "build:src": "BABEL_ENV=cjs babel src -d build --root-mode upward",
-    "build:client": "BABEL_ENV=es babel src/client.js -d build --root-mode upward",
+    "build:client": "BABEL_ENV=es babel src/client.js -d build --out-file-extension .mjs --root-mode upward",
     "build:babel": "npm run build:src && npm run build:client",
     "build:dev": "npm run build:babel && npm run copy && cd build && yarn && npm run syncpkg",
     "build": "npm run clean && npm run build:dev",

packages/reshow-app/src/client.js

@@ -1,5 +1,4 @@
 import "array.polyfill";
-import "es6-promise/auto"; // for webpack promise fixed
 import ReactDOM from "react-dom/client";
 import initWorker from "reshow-worker";
 import { ajaxDispatch } from "organism-react-ajax";

packages/reshow-app/src/webpack.client.js

@@ -49,9 +49,8 @@ const myWebpack = (root, main, lazyConfs) => {
   };
   if (HOT_UPDATE) {
     result.devServer = getHotServer({ confs, path });
-    result.cache = false;
   }
   return result;
 };
 
-module.exports = myWebpack;
+export default myWebpack;

packages/reshow-app/src/webpack.server.js

@@ -34,4 +34,4 @@ const myWebpack = (root, main, lazyConfs) => {
   return result;
 };
 
-module.exports = myWebpack;
+export default myWebpack;

packages/reshow-app/src/webpack/getHotServer.js

@@ -3,7 +3,7 @@ const getHotServer = ({ confs, path }) => ({
   allowedHosts: "all",
   port: confs.hotPort ?? 8080,
   liveReload: false,
-  hot: true,
+  hot: 'only',
   devMiddleware: {
     publicPath: confs.assetsRoot || "",
     writeToDisk: true,

packages/reshow-app/src/webpack/getResolve.js

@@ -1,6 +1,7 @@
 import reshowRuntimeAlias from "./reshowRuntimeAlias";
+import { resolve } from "path";
 
-const getNRoot = (root) => root + "/node_modules";
+const getNRoot = (root) => resolve(root, "node_modules");
 
 const getResolve = ({ confs, root }) => {
   const nroot = getNRoot(root);
@@ -27,11 +28,11 @@ const getResolve = ({ confs, root }) => {
 
   const results = {
     // symlinks for reslove react hook complain.
-    symlinks: false,
+    symlinks: true,
     extensions: [".mjs", ".js", ".jsx"],
     fallback,
+    alias,
   };
-  results.alias = alias;
   return results;
 };
 

packages/reshow-app/src/webpack/refresh/overlay/components/CompileErrorTrace.js

@@ -1,7 +1,8 @@
-const ansiHTML = require("ansi-html-community");
-const { Html5Entities } = require("html-entities");
-const theme = require("../theme");
-const formatFilename = require("../utils/formatFilename");
+import ansiHTML from "ansi-html-community";
+import { Html5Entities } from "html-entities";
+import theme from "../theme";
+import formatFilename from "../utils/formatFilename";
+
 
 ansiHTML.setColors(theme);
 
@@ -49,4 +50,4 @@ function CompileErrorTrace(document, root, props) {
   root.appendChild(stackContainer);
 }
 
-module.exports = CompileErrorTrace;
+export default CompileErrorTrace;

packages/reshow-app/src/webpack/refresh/overlay/components/PageHeader.js

@@ -1,5 +1,5 @@
-const theme = require("../theme");
-const Spacer = require("./Spacer");
+import theme from "../theme";
+import Spacer from "./Spacer";
 
 /**
  * @typedef {Object} PageHeaderProps
@@ -53,4 +53,4 @@ function PageHeader(document, root, props) {
   });
 }
 
-module.exports = PageHeader;
+export default PageHeader;

packages/reshow-app/src/webpack/refresh/overlay/components/RuntimeErrorFooter.js

@@ -1,5 +1,5 @@
-const theme = require("../theme");
-const Spacer = require("./Spacer");
+import theme from "../theme";
+import Spacer from "./Spacer";
 
 /**
  * @typedef {Object} RuntimeErrorFooterProps
@@ -88,4 +88,4 @@ function RuntimeErrorFooter(document, root, props) {
   }
 }
 
-module.exports = RuntimeErrorFooter;
+export default RuntimeErrorFooter;

packages/reshow-app/src/webpack/refresh/overlay/components/RuntimeErrorHeader.js

@@ -1,5 +1,5 @@
-const theme = require("../theme");
-const Spacer = require("./Spacer");
+import theme from "../theme";
+import Spacer from "./Spacer";
 
 /**
  * @typedef {Object} RuntimeErrorHeaderProps
@@ -35,4 +35,4 @@ function RuntimeErrorHeader(document, root, props) {
   Spacer(document, root, { space: "2.5rem" });
 }
 
-module.exports = RuntimeErrorHeader;
+export default RuntimeErrorHeader;

packages/reshow-app/src/webpack/refresh/overlay/components/RuntimeErrorStack.js

@@ -1,6 +1,6 @@
-const ErrorStackParser = require("error-stack-parser");
-const theme = require("../theme");
-const formatFilename = require("../utils/formatFilename");
+import ErrorStackParser from "error-stack-parser";
+import theme from "../theme";
+import formatFilename from "../utils/formatFilename";
 
 /**
  * @typedef {Object} RuntimeErrorStackProps
@@ -70,4 +70,4 @@ function RuntimeErrorStack(document, root, props) {
   root.appendChild(stackContainer);
 }
 
-module.exports = RuntimeErrorStack;
+export default RuntimeErrorStack;

packages/reshow-app/src/webpack/refresh/overlay/components/Spacer.js

@@ -16,4 +16,4 @@ function Spacer(document, root, props) {
   root.appendChild(spacer);
 }
 
-module.exports = Spacer;
+export default Spacer;

packages/reshow-app/src/webpack/refresh/overlay/containers/CompileErrorContainer.js

@@ -1,6 +1,6 @@
-const CompileErrorTrace = require("../components/CompileErrorTrace");
-const PageHeader = require("../components/PageHeader");
-const Spacer = require("../components/Spacer");
+import CompileErrorTrace from "../components/CompileErrorTrace";
+import PageHeader from "../components/PageHeader";
+import Spacer from "../components/Spacer";
 
 /**
  * @typedef {Object} CompileErrorContainerProps
@@ -22,4 +22,4 @@ function CompileErrorContainer(document, root, props) {
   Spacer(document, root, { space: "1rem" });
 }
 
-module.exports = CompileErrorContainer;
+export default CompileErrorContainer;

packages/reshow-app/src/webpack/refresh/overlay/containers/RuntimeErrorContainer.js

@@ -1,6 +1,6 @@
-const PageHeader = require("../components/PageHeader");
-const RuntimeErrorStack = require("../components/RuntimeErrorStack");
-const Spacer = require("../components/Spacer");
+import PageHeader from "../components/PageHeader";
+import RuntimeErrorStack from "../components/RuntimeErrorStack";
+import Spacer from "../components/Spacer";
 
 /**
  * @typedef {Object} RuntimeErrorContainerProps
@@ -26,4 +26,4 @@ function RuntimeErrorContainer(document, root, props) {
   Spacer(document, root, { space: "1rem" });
 }
 
-module.exports = RuntimeErrorContainer;
+export default RuntimeErrorContainer;

packages/reshow-app/src/webpack/refresh/overlay/index.js

@@ -1,10 +1,10 @@
 import memoize from "memoize-one";
-const RuntimeErrorFooter = require("./components/RuntimeErrorFooter");
-const RuntimeErrorHeader = require("./components/RuntimeErrorHeader");
-const CompileErrorContainer = require("./containers/CompileErrorContainer");
-const RuntimeErrorContainer = require("./containers/RuntimeErrorContainer");
-const theme = require("./theme");
-const removeAllChildren = require("./utils/removeAllChildren");
+import RuntimeErrorFooter from "./components/RuntimeErrorFooter";
+import RuntimeErrorHeader from "./components/RuntimeErrorHeader";
+import CompileErrorContainer from "./containers/CompileErrorContainer";
+import RuntimeErrorContainer from "./containers/RuntimeErrorContainer";
+import theme from "./theme";
+import removeAllChildren from "./utils/removeAllChildren";
 
 /**
  * @callback RenderFn
@@ -329,7 +329,7 @@ function handleRuntimeError(error) {
   debouncedShowRuntimeErrors(currentRuntimeErrors);
 }
 
-module.exports = Object.freeze({
+export default Object.freeze({
   clearCompileError,
   clearRuntimeErrors,
   handleRuntimeError,

packages/reshow-app/src/webpack/refresh/overlay/theme.js

@@ -36,4 +36,4 @@ const theme = {
   dimgrey: "343434",
 };
 
-module.exports = theme;
+export default theme;

packages/reshow-app/src/webpack/refresh/overlay/utils/formatFilename.js

@@ -20,4 +20,4 @@ function formatFilename(filename) {
   return filename;
 }
 
-module.exports = formatFilename;
+export default formatFilename;

packages/reshow-app/src/webpack/refresh/overlay/utils/removeAllChildren.js

@@ -16,4 +16,4 @@ function removeAllChildren(element, skip) {
   }
 }
 
-module.exports = removeAllChildren;
+export default removeAllChildren;

packages/reshow-app/src/webpack/refresh/runtime/ReactRefreshEntry.js

@@ -1,6 +1,6 @@
-if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
-  const Refresh = require("react-refresh/runtime");
+import Refresh from "react-refresh/runtime";
 
+if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
   // Inject refresh runtime into global
   Refresh.injectIntoGlobalHook(window);
 

packages/reshow-app/src/webpack/refresh/runtime/RefreshModuleRuntime.js

@@ -10,7 +10,7 @@
  * [Reference for Runtime Injection](https://github.com/webpack/webpack/blob/b07d3b67d2252f08e4bb65d354a11c9b69f8b434/lib/HotModuleReplacementPlugin.js#L419)
  * [Reference for HMR Error Recovery](https://github.com/webpack/webpack/issues/418#issuecomment-490296365)
  */
-module.exports = (isUseEsm) => {
+export default (isUseEsm) => {
   const constDeclaration = "const";
   const letDeclaration = "let";
   const webpackHot = isUseEsm ? "import.meta.webpackHot" : "module.hot";

packages/reshow-app/src/webpack/refresh/runtime/utils.js

@@ -1,5 +1,5 @@
-const Refresh = require("react-refresh/runtime");
-const ErrorOverlay = require("../overlay/index");
+import Refresh from "react-refresh/runtime";
+import { debounce } from "call-func";
 
 /**
  * Extracts exports from a webpack module object.
@@ -62,34 +62,6 @@ function getReactRefreshBoundarySignature(moduleExports) {
   return signature;
 }
 
-/**
- * Creates a helper that performs a delayed React refresh.
- * @returns {enqueueUpdate} A debounced React refresh function.
- */
-function createDebounceUpdate() {
-  /**
-   * A cached setTimeout handler.
-   * @type {number | void}
-   */
-  let refreshTimeout = undefined;
-
-  /**
-   * Performs react refresh on a delay and clears the error overlay.
-   * @returns {void}
-   */
-  function enqueueUpdate() {
-    if (refreshTimeout === undefined) {
-      refreshTimeout = setTimeout(function () {
-        refreshTimeout = undefined;
-        Refresh.performReactRefresh();
-        ErrorOverlay.clearRuntimeErrors();
-      }, 30);
-    }
-  }
-
-  return enqueueUpdate;
-}
-
 /**
  * Checks if all exports are likely a React component.
  *
@@ -191,7 +163,11 @@ function shouldInvalidateReactRefreshBoundary(prevExports, nextExports) {
   return false;
 }
 
-const enqueueUpdate = createDebounceUpdate();
+const enqueueUpdate = debounce((callback) => {
+  Refresh.performReactRefresh();
+  callback();
+}, 0);
+
 function executeRuntime(
   moduleExports,
   moduleId,
@@ -246,22 +222,19 @@ function executeRuntime(
           /*Need force update*/
           webpackHot.invalidate();
         } else {
-          enqueueUpdate(function updateCallback() {
-            if (typeof refreshOverlay !== "undefined" && refreshOverlay) {
-              refreshOverlay.clearRuntimeErrors();
-            }
+          enqueueUpdate({
+            args: [
+              () => {
+                if (typeof refreshOverlay !== "undefined" && refreshOverlay) {
+                  refreshOverlay.clearRuntimeErrors();
+                }
+              },
+            ],
           });
         }
       }
     }
   }
 }
 
-export default Object.freeze({
-  enqueueUpdate,
-  executeRuntime,
-  getModuleExports,
-  isReactRefreshBoundary,
-  shouldInvalidateReactRefreshBoundary,
-  registerExportsForReactRefresh,
-});
+export default Object.freeze({ executeRuntime, getModuleExports });

packages/reshow-app/src/webpack/refresh/utils/__tests__/isUseEsmTest.js

@@ -9,8 +9,11 @@ try {
   NOT_DEFINED;
 } catch (e) {
   const initiator = e.stack.split("\n").slice(1)[0];
+  const folder = /(?<path>[^\(\s]+):[0-9]+:[0-9]+/
+    .exec(initiator)
+    .groups.path.replace("file://", "");
   dir = resolve(
-    dirname(/(?<path>[^\(\s]+):[0-9]+:[0-9]+/.exec(initiator).groups.path),
+    dirname(folder),
     "../../../../../src/webpack/refresh/utils/__tests__/"
   );
 }

packages/reshow-app/src/webpack/refresh/utils/injectRefreshLoader.js

@@ -1,8 +1,8 @@
 import path from "path";
-const resolvedLoader = require.resolve("../loader");
 
 const injectRefreshLoader = (moduleData, injectOptions) => {
   const { match, options } = injectOptions;
+  const resolvedLoader = require.resolve("../loader");
 
   if (
     // Include and exclude user-specified files

packages/reshow-app/src/webpack/util/support/isBuffer.js

@@ -1,3 +1,3 @@
-module.exports = function isBuffer(arg) {
+export default function isBuffer(arg) {
   return arg instanceof Buffer;
-};
+}