browser-metro 1.0.7 → 1.0.8

package/dist/transforms/react-refresh.js

@@ -3,6 +3,29 @@ import { typescriptTransformer } from "./typescript.js";
 function isJsxFile(filename) {
     return filename.endsWith(".tsx") || filename.endsWith(".jsx");
 }
+/**
+ * Extract a hook signature string from source.
+ *
+ * Returns the full ordered sequence of hook calls (with duplicates), joined by
+ * newline. This is passed to $RefreshSig$ so React Refresh can detect ANY change
+ * that affects the hook fiber chain — including adding a second call to an
+ * already-present hook (e.g. a second useMutation).
+ *
+ * Why NOT deduplicate: if we used a Set, adding a second `useMutation` would
+ * leave the signature unchanged → React Refresh would attempt an in-place update
+ * → "Rendered more hooks than during the previous render" crash. The full
+ * ordered sequence changes whenever hook count or order changes, so React
+ * Refresh always forces a clean remount instead.
+ */
+function extractHookSignature(src) {
+    const hooks = [];
+    const re = /\buse[A-Z][a-zA-Z0-9]*/g;
+    let m;
+    while ((m = re.exec(src)) !== null) {
+        hooks.push(m[0]);
+    }
+    return hooks.join('\n');
+}
 /**
  * Detect React component names from source code.
  * Heuristic: any function or const/let with an uppercase first letter.
@@ -46,8 +69,12 @@ export function createReactRefreshTransformer(base) {
             if (components.length === 0) {
                 return result;
             }
-            // Preamble: set up refresh hooks scoped to this module
-            const preamble = 'var _prevRefreshReg = window.$RefreshReg$;\n' +
+            // Compute hook signature for this module — changes when hooks are added/removed
+            const hookSig = extractHookSignature(params.src + result.code);
+            // Check if module uses createContext (needs HMR identity preservation)
+            const usesCreateContext = params.src.includes('createContext') || result.code.includes('createContext');
+            // Preamble: set up refresh hooks scoped to this module + signature vars per component
+            let preamble = 'var _prevRefreshReg = window.$RefreshReg$;\n' +
                 'var _prevRefreshSig = window.$RefreshSig$;\n' +
                 'var _refreshModuleId = ' + JSON.stringify(params.filename) + ';\n' +
                 'window.$RefreshReg$ = function(type, id) {\n' +
@@ -61,14 +88,49 @@ export function createReactRefreshTransformer(base) {
                 '  }\n' +
                 '  return function(type) { return type; };\n' +
                 '};\n';
+            // One signature function per component — enables hooks-change detection
+            for (const name of components) {
+                preamble += 'var _s_' + name + ' = $RefreshSig$();\n';
+            }
+            // Context identity preservation: patch React.createContext so that on HMR
+            // re-executions the same context object is returned instead of a new one.
+            // Without this, Provider uses a new context reference while consumers still
+            // hold the old one → useContext() returns null → "must be used within Provider".
+            // Contexts are keyed by moduleId + call-order index and stored in
+            // window.__HMR_CONTEXTS__ which persists across re-executions.
+            if (usesCreateContext) {
+                preamble +=
+                    'var _hmrCtxIdx = 0;\n' +
+                        'var _hmrOrigCC;\n' +
+                        'try {\n' +
+                        '  var _hmrReact = require("react");\n' +
+                        '  _hmrOrigCC = _hmrReact.createContext;\n' +
+                        '  if (!window.__HMR_CONTEXTS__) window.__HMR_CONTEXTS__ = {};\n' +
+                        '  _hmrReact.createContext = function(defaultValue) {\n' +
+                        '    var key = _refreshModuleId + ":ctx:" + (_hmrCtxIdx++);\n' +
+                        '    if (window.__HMR_CONTEXTS__[key]) return window.__HMR_CONTEXTS__[key];\n' +
+                        '    var ctx = _hmrOrigCC(defaultValue);\n' +
+                        '    window.__HMR_CONTEXTS__[key] = ctx;\n' +
+                        '    return ctx;\n' +
+                        '  };\n' +
+                        '} catch(_e) {}\n';
+            }
             // Postamble: register each component and accept HMR
             let postamble = '\n';
             for (const name of components) {
                 postamble +=
                     'if (typeof ' + name + ' === "function") {\n' +
+                        '  _s_' + name + '(' + name + ', ' + JSON.stringify(hookSig) + ');\n' +
                         '  $RefreshReg$(' + name + ', ' + JSON.stringify(name) + ');\n' +
                         '}\n';
             }
+            // Restore original React.createContext after module body runs
+            if (usesCreateContext) {
+                postamble +=
+                    'if (_hmrOrigCC) {\n' +
+                        '  try { require("react").createContext = _hmrOrigCC; } catch(_e) {}\n' +
+                        '}\n';
+            }
             postamble +=
                 'window.$RefreshReg$ = _prevRefreshReg;\n' +
                     'window.$RefreshSig$ = _prevRefreshSig;\n' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-metro",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A browser-based JavaScript/TypeScript bundler with HMR support, inspired by Metro. Runs entirely client-side.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "sucrase": "^3.35.0"
+    "sucrase": "^3.35.1"
   },
   "devDependencies": {
     "typescript": "^5.7.0"