vxrn 1.26.1 → 1.27.0

package/dist/utils/createNativeDevEngine.mjs

@@ -1,10 +1,11 @@
 import { createHash } from "node:crypto";
 import { basename, dirname, extname, join, relative, resolve } from "node:path";
-import { copyFileSync, mkdirSync, readFileSync, readdirSync, realpathSync, statSync } from "node:fs";
+import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync, realpathSync, statSync, watch, writeFileSync } from "node:fs";
 import { pathToFileURL } from "node:url";
 import micromatch from "micromatch";
 import { loadEnv, normalizePath } from "vite";
 import { shouldStripFlow, transformHermesAsync } from "@vxrn/compiler";
+import { resolvePath } from "@vxrn/resolve";
 import { DEFAULT_ASSET_EXTS } from "../constants/defaults.mjs";
 import { getNativePrelude } from "../runtime/native-prelude.mjs";
 import { rnCodegenPlugin } from "../plugins/rnCodegenPlugin.mjs";
@@ -116,7 +117,7 @@ function getNativePlugins(root, platform, viteImportGlobPlugin, dev, assetsDest,
     platform,
     dev
   };
-  return [...(globalThis.__vxrnAddNativePlugins || []), serverFileExclusionPlugin(), environmentGuardPlugin(), hmrClientNoopPlugin(), cssStubPlugin(), viteImportGlobPlugin({
+  return [...(globalThis.__vxrnAddNativePlugins || []), serverFileExclusionPlugin(), environmentGuardPlugin(), hmrClientNoopPlugin(), ...(dev ? [reactNativeDedupePlugin(root)] : []), cssStubPlugin(), viteImportGlobPlugin({
     root
   }), vxrnCompilerPlugin(platform, dev, root, sourceMaps), rnCodegenPlugin({
     projectRoot: root
@@ -252,7 +253,9 @@ async function createNativeDevEngine(options) {
   let bundlePromise = null;
   const resolvedHost = host === "0.0.0.0" ? "localhost" : host;
   const virtualEntry = nativeVirtualEntryPlugin(root, {
-    dev: true
+    dev: true,
+    platform,
+    dynamicRoutes: true
   });
   let engineWork = Promise.resolve();
   const queueEngineWork = work => {
@@ -298,30 +301,18 @@ try {
   };
   let outputProcessed = Promise.resolve();
   let engine;
-  const rebuildIfNewRoute = async files => {
+  let routeWatcher;
+  const rebuildIfRouteGraphChanged = () => queueEngineWork(async () => {
     const {
-      routeRoot,
       files: knownRoutes,
-      isRouteFile
+      scanFiles,
+      updateFiles
     } = virtualEntry.routes;
-    const routeRootPrefix = `${normalizePath(routeRoot)}/`;
-    if (!files.some(file => {
-      const normalized = normalizePath(file);
-      if (isRouteFile(normalized)) return !knownRoutes.has(normalized);
-      return normalized.startsWith(routeRootPrefix) && statSync(file, {
-        throwIfNoEntry: false
-      })?.isDirectory() === true;
-    })) return false;
-    await queueEngineWork(async () => {
-      engine.triggerFullBuild();
-      await engine.ensureLatestBuildOutput();
-      await outputProcessed;
-    });
-    onHmrUpdate?.({
-      type: "hmr:reload"
-    });
+    const currentRoutes = scanFiles();
+    if (!(currentRoutes.size !== knownRoutes.size || [...currentRoutes].some(route => !knownRoutes.has(route)))) return false;
+    updateFiles(currentRoutes);
     return true;
-  };
+  });
   engine = await dev(inputOptions, outputOptions, {
     onOutput: async result => {
       let finishOutput = () => {};
@@ -342,7 +333,7 @@ try {
         });
         return;
       }
-      if (await rebuildIfNewRoute(result.changedFiles)) return;
+      if (await rebuildIfRouteGraphChanged()) return;
       for (const {
         clientId,
         update
@@ -398,6 +389,29 @@ try {
     }
   }
   await engine.run();
+  let routeWatchTarget = virtualEntry.routes.routeRoot;
+  while (!statSync(routeWatchTarget, {
+    throwIfNoEntry: false
+  })?.isDirectory()) {
+    const parent = dirname(routeWatchTarget);
+    if (parent === routeWatchTarget) break;
+    routeWatchTarget = parent;
+  }
+  const normalizedRouteRoot = normalizePath(virtualEntry.routes.routeRoot);
+  routeWatcher = watch(routeWatchTarget, {
+    recursive: true
+  }, (_eventType, file) => {
+    if (file === null) return;
+    const changed = normalizePath(resolve(routeWatchTarget, file.toString()));
+    if (changed !== normalizedRouteRoot && !changed.startsWith(`${normalizedRouteRoot}/`)) return;
+    rebuildIfRouteGraphChanged().catch(error => {
+      console.error(`[vxrn] rebuilding the native route map failed`, error);
+    });
+  });
+  routeWatcher.on("error", error => {
+    console.error(`[vxrn] watching the native route map failed`, error);
+  });
+  await rebuildIfRouteGraphChanged();
   return {
     engine,
     async getBundle() {
@@ -432,10 +446,8 @@ try {
       return assetRegistry.resolve(pathname, hash);
     },
     async close() {
+      routeWatcher?.close();
       await engine.close();
-    },
-    async handleAddedFile(file) {
-      await rebuildIfNewRoute([file]);
     }
   };
 }
@@ -477,7 +489,8 @@ async function buildNativeBundle(options) {
       ".js": "jsx"
     },
     plugins: [...(entryFile ? [] : [nativeVirtualEntryPlugin(root, {
-      dev
+      dev,
+      platform
     }).plugin]), ...getNativePlugins(root, platform, viteImportGlobPlugin, dev, assetsDest, void 0, sourcemap, userPlugins), nativeBundlePostProcessPlugin()],
     output: getNativeOutputOptions(prelude, sourcemap, minify)
   })).output.find(o => o.type === "chunk" && o.isEntry);
@@ -491,6 +504,7 @@ async function buildNativeBundle(options) {
 const VIRTUAL_NATIVE_ENTRY = "virtual:native-entry";
 function nativeVirtualEntryPlugin(root, opts) {
   const isDev = opts?.dev !== false;
+  const useDynamicRouteRegistry = opts.dynamicRoutes === true;
   const resolvedId = normalizePath(resolve(root, "__virtual-native-entry.tsx"));
   const entryConfig = globalThis.__vxrnNativeEntryConfig || {};
   const routerRoot = entryConfig.routerRoot || "app";
@@ -505,8 +519,7 @@ function nativeVirtualEntryPlugin(root, opts) {
     return `import ${JSON.stringify(resolved)};`;
   })();
   const routeGlobs = [`./${routerRoot}/**/*.tsx`, `./${routerRoot}/**/*.ts`, `!./${routerRoot}/**/*+api.*`, `!./${routerRoot}/**/*.test.*`, `!./${routerRoot}/**/*.d.ts`, `!./${routerRoot}/**/*.server.*`, `!./${routerRoot}/**/_middleware.*`, `!./${routerRoot}/**/*.web.*`, ...(entryConfig.ignoredRouteFiles || []).map(pattern => `!./${routerRoot}/${pattern}`)];
-  const entryCode = `
-${isDev ? `
+  const refreshSetup = isDev ? `
 // react-refresh/runtime MUST initialize before React loads
 import RefreshRuntime from 'react-refresh/runtime';
 RefreshRuntime.injectIntoGlobalHook(globalThis);
@@ -515,22 +528,25 @@ globalThis.$RefreshReg$ = function(type, id) {
   RefreshRuntime.register(type, id);
 };
 globalThis.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
-` : ""}
+` : "";
+  const entryCode = () => `
+${refreshSetup}
 import * as ReactNativeInitializeCore from 'react-native/Libraries/Core/InitializeCore';
 import NativeWebSocket from 'react-native/Libraries/WebSocket/WebSocket';
+import DevSettings from 'react-native/Libraries/Utilities/DevSettings';
 ${setupFileImport}
+${routeImports}
 import { createApp } from 'one';
 
 void ReactNativeInitializeCore;
 globalThis.WebSocket = NativeWebSocket;
+globalThis.__VXRN_RELOAD_NATIVE_DEV_BUNDLE__ = function(reason) {
+  DevSettings.reload(reason);
+};
 
-var _routes = import.meta.glob(${JSON.stringify(routeGlobs)}, { exhaustive: true });
-// fix route keys: One expects '/${routerRoot}/...' prefix but import.meta.glob returns './${routerRoot}/...'
-var routes = {};
-Object.keys(_routes).forEach(function(key) {
-  var normalizedKey = key.replace(/^\\.\\//, '');
-  routes['/' + normalizedKey] = _routes[key];
-});
+// React Native reloads a dev bundle in the existing JS runtime. Advance One's
+// route-cache version so a full reload cannot reuse the previous context.
+globalThis.__vxrnVersion = (globalThis.__vxrnVersion || 0) + 1;
 
 createApp({
   routes: routes,
@@ -538,6 +554,8 @@ createApp({
   flags: ${JSON.stringify(flags)},
   linking: ${JSON.stringify(linking)},
 });
+
+${routeHmr}
 `;
   const routeRoot = resolve(root, routerRoot);
   const stripDot = pattern => pattern.replace(/^\.\//, "");
@@ -547,11 +565,61 @@ createApp({
     const relativeToRoot = normalizePath(relative(root, file));
     return micromatch.isMatch(relativeToRoot, includeGlobs) && !micromatch.isMatch(relativeToRoot, excludeGlobs);
   };
+  const scanFiles = () => {
+    const files = /* @__PURE__ */new Set();
+    const walkRouteRoot = dir => {
+      for (const entry of readdirSync(dir, {
+        withFileTypes: true
+      })) {
+        const child = resolve(dir, entry.name);
+        if (entry.isDirectory()) walkRouteRoot(child);else if (isRouteFile(child)) files.add(normalizePath(child));
+      }
+    };
+    if (statSync(routeRoot, {
+      throwIfNoEntry: false
+    })?.isDirectory()) walkRouteRoot(routeRoot);
+    return files;
+  };
+  const registrySpecifier = `./node_modules/.vxrn/native-routes-${opts.platform}.mjs`;
+  const registryPath = resolve(root, registrySpecifier);
   const routes = {
     routeRoot,
     files: /* @__PURE__ */new Set(),
-    isRouteFile
+    isRouteFile,
+    scanFiles,
+    updateFiles(files) {
+      routes.files = files;
+      if (!useDynamicRouteRegistry) return;
+      const source = `export const routes = {
+${[...files].sort().map(file => {
+        const routeKey = `/${normalizePath(relative(root, file))}`;
+        let importPath = normalizePath(relative(dirname(registryPath), file));
+        if (!importPath.startsWith(".")) importPath = `./${importPath}`;
+        return `  ${JSON.stringify(routeKey)}: () => import(${JSON.stringify(importPath)})`;
+      }).join(",\n")}
+}
+`;
+      mkdirSync(dirname(registryPath), {
+        recursive: true
+      });
+      if (!existsSync(registryPath) || readFileSync(registryPath, "utf8") !== source) writeFileSync(registryPath, source);
+    }
   };
+  routes.updateFiles(routes.scanFiles());
+  const routeImports = useDynamicRouteRegistry ? `import { routes } from ${JSON.stringify(registrySpecifier)};` : `var _routes = import.meta.glob(${JSON.stringify(routeGlobs)}, { exhaustive: true });
+// fix route keys: One expects '/${routerRoot}/...' prefix but import.meta.glob returns './${routerRoot}/...'
+var routes = {};
+Object.keys(_routes).forEach(function(key) {
+  var normalizedKey = key.replace(/^\\.\\//, '');
+  routes['/' + normalizedKey] = _routes[key];
+});`;
+  const routeHmr = useDynamicRouteRegistry ? `if (import.meta.hot) {
+  import.meta.hot.accept(${JSON.stringify(registrySpecifier)}, function(next) {
+    if (globalThis.__VXRN_UPDATE_NATIVE_ROUTES__) {
+      globalThis.__VXRN_UPDATE_NATIVE_ROUTES__(next.routes);
+    }
+  });
+}` : "";
   return {
     routes,
     plugin: {
@@ -561,20 +629,7 @@ createApp({
       },
       load(id) {
         if (id !== resolvedId) return;
-        routes.files.clear();
-        const walkRouteRoot = dir => {
-          this.addWatchFile(dir);
-          for (const entry of readdirSync(dir, {
-            withFileTypes: true
-          })) {
-            const child = resolve(dir, entry.name);
-            if (entry.isDirectory()) walkRouteRoot(child);else if (isRouteFile(child)) routes.files.add(normalizePath(child));
-          }
-        };
-        if (statSync(routeRoot, {
-          throwIfNoEntry: false
-        })?.isDirectory()) walkRouteRoot(routeRoot);else this.addWatchFile(dirname(routeRoot));
-        return entryCode;
+        return entryCode();
       }
     }
   };
@@ -660,6 +715,20 @@ export default HMRClient`,
     }
   };
 }
+function reactNativeDedupePlugin(root) {
+  let reactNativeRoot;
+  return {
+    name: "vxrn:react-native-dedupe",
+    async resolveId(source, importer) {
+      if (source !== "react-native" && !source.startsWith("react-native/")) return;
+      reactNativeRoot ||= realpathSync(dirname(resolvePath("react-native/package.json", root)));
+      const subpath = source === "react-native" ? "index.js" : source.slice(13);
+      return this.resolve(normalizePath(resolve(reactNativeRoot, subpath)), importer, {
+        skipSelf: true
+      });
+    }
+  };
+}
 function cssStubPlugin() {
   return {
     name: "vxrn:css-stub",
@@ -714,14 +783,16 @@ function vxrnCompilerPlugin(platform, dev, projectRoot = process.cwd(), sourceMa
             if (prepared.map) intermediateMaps.push(prepared.map);
           }
         }
-        const compilerTarget = babelOptions.plugins[compilerPluginIndex][1]?.target ?? "19";
-        const compilerOut = await compiler.transformOxcReactCompiler(id, curCode, compilerTarget, sourceMaps);
-        if (compilerOut?.code) {
-          curCode = compilerOut.code;
-          if (sourceMaps && compilerOut.map) intermediateMaps.push(compilerOut.map);
+        const compilerPluginOptions = babelOptions.plugins[compilerPluginIndex][1] || {};
+        if (!(compilerPluginOptions.compiler === "babel" || process.env.ONE_REACT_COMPILER === "babel" || process.env.VXRN_REACT_COMPILER === "babel")) {
+          const compilerOut = await compiler.transformOxcReactCompiler(id, curCode, compilerPluginOptions, sourceMaps);
+          if (compilerOut?.code) {
+            curCode = compilerOut.code;
+            if (sourceMaps && compilerOut.map) intermediateMaps.push(compilerOut.map);
+          }
+          babelOptions.plugins.splice(compilerPluginIndex, 1);
+          if (babelOptions.plugins.length === 0 && !babelOptions.configFile && !babelOptions.babelrc) babelOptions = null;
         }
-        babelOptions.plugins.splice(compilerPluginIndex, 1);
-        if (babelOptions.plugins.length === 0) babelOptions = null;
       }
       if (useWorklets) {
         const workletOut = await compiler.transformWorklets(id, curCode, sourceMaps, {
@@ -734,7 +805,7 @@ function vxrnCompilerPlugin(platform, dev, projectRoot = process.cwd(), sourceMa
         }
         if (babelOptions?.plugins) {
           babelOptions.plugins = babelOptions.plugins.filter(entry => !isWorkletPlugin(entry));
-          if (babelOptions.plugins.length === 0) babelOptions = null;
+          if (babelOptions.plugins.length === 0 && !babelOptions.configFile && !babelOptions.babelrc) babelOptions = null;
         }
       }
       if (!babelOptions && !needsRefresh) {
@@ -1256,11 +1327,13 @@ class ReactNativeDevRuntime extends BaseDevRuntime {
     }
   }
 
-  reload() {
-    var proxy = globalThis.__turboModuleProxy
-      ? globalThis.__turboModuleProxy('DevSettings')
-      : globalThis.nativeModuleProxy && globalThis.nativeModuleProxy.DevSettings;
-    if (proxy && proxy.reload) proxy.reload();
+  reload(reason) {
+    var reloadNativeBundle = globalThis.__VXRN_RELOAD_NATIVE_DEV_BUNDLE__;
+    if (typeof reloadNativeBundle === 'function') {
+      reloadNativeBundle(reason);
+      return;
+    }
+    console.error('[vxrn HMR]: DevSettings.reload is unavailable');
   }
 
   setup(socket) {
@@ -1282,10 +1355,10 @@ class ReactNativeDevRuntime extends BaseDevRuntime {
         if (message.type === 'hmr:update') {
           // a patch that cannot be applied in place is the reload signal
           if (!runtime.applyHmrUpdate(message.code, message.changedIds, message.seq)) {
-            runtime.reload();
+            runtime.reload('native HMR update could not be applied');
           }
         } else if (message.type === 'hmr:reload') {
-          runtime.reload();
+          runtime.reload('native route map changed');
         }
       } catch (error) {
         console.error('[vxrn HMR]: failed to apply update', error);