vxrn 0.0.6 → 0.1.0

package/dist/esm/create.mjs

@@ -0,0 +1,565 @@
+import wsAdapter from "crossws/adapters/node";
+import { readFile } from "fs/promises";
+import { createApp, createRouter, defineEventHandler, defineWebSocketHandler, eventHandler, getQuery, toNodeListener } from "h3";
+import { createProxyEventHandler } from "h3-proxy";
+import { createServer as nodeCreateServer } from "node:http";
+import { dirname, join, relative, resolve } from "node:path";
+import readline from "readline";
+import viteInspectPlugin from "vite-plugin-inspect";
+import { WebSocket } from "ws";
+import * as babel from "@babel/core";
+import react from "@vitejs/plugin-react-swc";
+import { buildReact, buildReactJSX, buildReactNative } from "@vxrn/react-native-prebuilt";
+import viteReactPlugin, { swcTransform, transformForBuild } from "@vxrn/vite-native-swc";
+import { parse } from "es-module-lexer";
+import FSExtra from "fs-extra";
+import { build, createServer, mergeConfig, resolveConfig, transformWithEsbuild } from "vite";
+import { resolve as importMetaResolve } from "import-meta-resolve";
+import { clientInjectionsPlugin } from "./dev/clientInjectPlugin.mjs";
+import { getVitePath } from "./getVitePath.mjs";
+import { nativePlugin } from "./nativePlugin.mjs";
+const resolveFile = path => {
+    try {
+      return importMetaResolve(path, import.meta.url).replace("file://", "");
+    } catch {
+      return require.resolve(path);
+    }
+  },
+  nativeExtensions = [".native.tsx", ".native.jsx", ".native.js", ".tsx", ".ts", ".js", ".css", ".json"],
+  extensions = [".web.tsx", ".tsx", ".web.ts", ".ts", ".web.jsx", ".jsx", ".web.js", ".js", ".css", ".json"],
+  {
+    ensureDir,
+    pathExists,
+    pathExistsSync
+  } = FSExtra,
+  create = async options => {
+    const {
+      host = "127.0.0.1",
+      root = process.cwd(),
+      port = 8081
+    } = options;
+    bindKeypressInput();
+    let entryRoot = "";
+    const packageRootDir = join(import.meta.url ?? __filename, ".."),
+      cacheDir = join(root, "node_modules", ".cache", "vxrn");
+    await ensureDir(cacheDir);
+    const prebuilds = {
+      reactJSX: join(cacheDir, "react-jsx-runtime.js"),
+      react: join(cacheDir, "react.js"),
+      reactNative: join(cacheDir, "react-native.js")
+    };
+    (await pathExists(prebuilds.reactNative)) || (console.info("Pre-building react, react-native react/jsx-runtime (one time cost)..."), await Promise.all([buildReactNative({
+      entryPoints: [resolveFile("react-native")],
+      outfile: prebuilds.reactNative
+    }), buildReact({
+      entryPoints: [resolveFile("react")],
+      outfile: prebuilds.react
+    }), buildReactJSX({
+      entryPoints: [resolveFile("react/jsx-dev-runtime")],
+      outfile: prebuilds.reactJSX
+    })]));
+    const templateFile = resolveFile("vxrn/react-native-template.js"),
+      hmrListeners = [],
+      hotUpdatedCJSFiles = /* @__PURE__ */new Map(),
+      jsxRuntime = {
+        // alias: 'virtual:react-jsx',
+        alias: prebuilds.reactJSX,
+        contents: await readFile(prebuilds.reactJSX, "utf-8")
+      },
+      virtualModules = {
+        "react-native": {
+          // alias: 'virtual:react-native',
+          alias: prebuilds.reactNative,
+          contents: await readFile(prebuilds.reactNative, "utf-8")
+        },
+        react: {
+          // alias: 'virtual:react',
+          alias: prebuilds.react,
+          contents: await readFile(prebuilds.react, "utf-8")
+        },
+        "react/jsx-runtime": jsxRuntime,
+        "react/jsx-dev-runtime": jsxRuntime
+      },
+      swapRnPlugin = {
+        name: "swap-react-native",
+        enforce: "pre",
+        resolveId(id, importer = "") {
+          if (id.startsWith("react-native/Libraries")) return `virtual:rn-internals:${id}`;
+          if (id === "react-native-web") return prebuilds.reactNative;
+          for (const targetId in virtualModules) if (id === targetId || id.includes(`node_modules/${targetId}/`)) return virtualModules[targetId].alias;
+          if (id[0] === ".") {
+            const absolutePath = resolve(dirname(importer), id),
+              nativePath = absolutePath.replace(/(.m?js)/, ".native.js");
+            if (nativePath === id) return;
+            try {
+              const directoryPath = absolutePath + "/index.native.js",
+                directoryNonNativePath = absolutePath + "/index.js";
+              if (pathExistsSync(directoryPath)) return directoryPath;
+              if (pathExistsSync(directoryNonNativePath)) return directoryNonNativePath;
+              if (pathExistsSync(nativePath)) return nativePath;
+            } catch (err) {
+              console.warn("error probably fine", err);
+            }
+          }
+        },
+        load(id) {
+          if (id.startsWith("virtual:rn-internals")) return `const val = __cachedModules["${id.replace("virtual:rn-internals:", "")}"]
+          export const PressabilityDebugView = val.PressabilityDebugView
+          export default val ? val.default || val : val`;
+          for (const targetId in virtualModules) {
+            const info = virtualModules[targetId];
+            if (id === info.alias) return info.contents;
+          }
+        }
+      },
+      depsToOptimize = ["react", "react-dom", "@react-native/normalize-color"];
+    let serverConfig = {
+      root,
+      mode: "development",
+      clearScreen: !1,
+      define: {
+        __DEV__: "true",
+        "process.env.NODE_ENV": '"development"'
+      },
+      resolve: {
+        // dedupe: ['react', 'react-dom'],
+        alias: {
+          // ...Object.fromEntries(Object.entries(virtualModules).map(([k, v]) => [k, v.alias])),
+          "react-native": resolveFile("react-native-web-lite")
+        }
+      },
+      optimizeDeps: {
+        include: depsToOptimize,
+        exclude: Object.values(virtualModules).map(v => v.alias),
+        force: !0,
+        esbuildOptions: {
+          resolveExtensions: extensions
+        }
+      },
+      build: {
+        commonjsOptions: {
+          transformMixedEsModules: !0
+        }
+      },
+      plugins: [
+      // this breaks web, but for native maybe we need to manually run in the native handleHotUpdate below
+      // swapRnPlugin,
+      react(),
+      // viteReactPlugin({
+      //   tsDecorators: true,
+      //   mode: 'serve',
+      // }),
+      {
+        name: "client-transform",
+        async handleHotUpdate({
+          read,
+          modules,
+          file
+        }) {
+          try {
+            if (!isWithin(root, file)) return;
+            const [module] = modules;
+            if (!module) return;
+            const id = module?.url || file.replace(root, ""),
+              code = await read();
+            if (code.startsWith("'use strict';") || !code) return;
+            let source = code;
+            source = (await transformForBuild(id, source))?.code || "";
+            const importsMap = {},
+              [imports] = parse(source);
+            let accumulatedSliceOffset = 0;
+            for (const specifier of imports) {
+              const {
+                n: importName,
+                s: start
+              } = specifier;
+              if (importName) {
+                const id2 = await getVitePath(entryRoot, file, importName);
+                if (!id2) {
+                  console.warn("???");
+                  continue;
+                }
+                importsMap[id2] = id2.replace(/^(\.\.\/)+/, "");
+                const len = importName.length,
+                  extraLen = id2.length - len;
+                source = source.slice(0, start + accumulatedSliceOffset) + id2 + source.slice(start + accumulatedSliceOffset + len), accumulatedSliceOffset += extraLen;
+              }
+            }
+            if (source = (await swcTransform(id, source, {
+              mode: "serve-cjs"
+            }))?.code || "", !source) throw "\u274C no source";
+            const hotUpdateSource = `exports = ((exports) => {
+              const require = createRequire(${JSON.stringify(importsMap, null, 2)})
+              ${source.replace("import.meta.hot.accept(() => {})", "").replaceAll(/import.meta.glob\(.*\)/gi, "globalThis['__importMetaGlobbed'] || {}")};
+              return exports })({})`;
+            process.env.DEBUG && console.info("Sending hot update", hotUpdateSource), hotUpdatedCJSFiles.set(id, hotUpdateSource);
+          } catch (err) {
+            console.error("Error processing hmr update:", err);
+          }
+        }
+      }],
+      server: {
+        hmr: {
+          path: "/__vxrnhmr"
+        },
+        cors: !0,
+        host
+      }
+    };
+    options.webConfig && (serverConfig = mergeConfig(serverConfig, options.webConfig));
+    const resolvedConfig = await resolveConfig(serverConfig, "serve"),
+      viteRNClientPlugin = clientInjectionsPlugin(resolvedConfig);
+    serverConfig = {
+      ...serverConfig,
+      plugins: [...serverConfig.plugins]
+    };
+    const viteServer = await createServer(serverConfig);
+    viteServer.watcher.addListener("change", async path => {
+      const id = path.replace(process.cwd(), "");
+      if (!(!id.endsWith("tsx") && !id.endsWith("jsx"))) try {
+        viteServer.transformRequest(id);
+      } catch (err) {
+        console.info("err", err);
+      }
+    });
+    let isBuilding = null;
+    await viteServer.listen();
+    const vitePort = viteServer.config.server.port;
+    console.info("vite running on", vitePort);
+    const router = createRouter(),
+      app = createApp({
+        onError: error => {
+          console.error(error);
+        },
+        onRequest: event => {
+          console.info(" \u2192", event.path);
+        }
+      });
+    router.get("/file", defineEventHandler(e => {
+      const query = getQuery(e);
+      if (typeof query.file == "string") {
+        const source = hotUpdatedCJSFiles.get(query.file);
+        return new Response(source, {
+          headers: {
+            "content-type": "text/javascript"
+          }
+        });
+      }
+    })), router.get("/index.bundle", defineEventHandler(async e => new Response(await getBundleCode(), {
+      headers: {
+        "content-type": "text/javascript"
+      }
+    }))), router.get("/status", defineEventHandler(() => "packager-status:running")), app.use(router), app.use(defineEventHandler(async ({
+      node: {
+        req
+      }
+    }) => {
+      if (req.headers["user-agent"]?.match(/Expo|React/) && (req.url === "/" || req.url?.startsWith("/?platform="))) return getIndexJsonResponse({
+        port,
+        root
+      });
+    }));
+    const {
+      handleUpgrade
+    } = wsAdapter(app.websocket);
+    if (vitePort) {
+      const clients = /* @__PURE__ */new Set(),
+        socket = new WebSocket(`ws://localhost:${vitePort}/__vxrnhmr`, "vite-hmr");
+      console.info("connecting to vite..."), socket.on("open", () => {
+        console.info("...connected to vite!");
+      }), socket.on("message", msg => {
+        const message = msg.toString();
+        console.info(clients.size, "message", message);
+        for (const listener of [...clients]) listener.send(message);
+      }), socket.on("error", err => {
+        console.info("err", err);
+      }), app.use("/__vxrnhmr", defineWebSocketHandler({
+        open(peer) {
+          console.debug("[hmr:web] open", peer), clients.add(peer);
+        },
+        message(peer, message) {
+          socket.send(message.rawData);
+        },
+        close(peer, event) {
+          console.info("[hmr:web] close", peer, event), clients.delete(peer);
+        },
+        error(peer, error) {
+          console.error("[hmr:web] error", peer, error);
+        }
+      }));
+    }
+    app.use("/__hmr", defineWebSocketHandler({
+      open(peer) {
+        console.debug("[hmr] open", peer);
+      },
+      message(peer, message) {
+        console.info("[hmr] message", peer, message), message.text().includes("ping") && peer.send("pong");
+      },
+      close(peer, event) {
+        console.info("[hmr] close", peer, event);
+      },
+      error(peer, error) {
+        console.error("[hmr] error", peer, error);
+      }
+    })), app.use("/__client", defineWebSocketHandler({
+      open(peer) {
+        console.info("[client] open", peer);
+      },
+      message(peer, messageRaw) {
+        const message = JSON.parse(messageRaw.text());
+        switch (message.type) {
+          case "client-log":
+            {
+              console.info(`\u{1FAB5} [${message.level}]`, ...message.data);
+              return;
+            }
+          default:
+            console.warn("[client] Unknown message type", message);
+        }
+      },
+      close(peer, event) {
+        console.info("[client] close", peer, event);
+      },
+      error(peer, error) {
+        console.error("[client] error", peer, error);
+      }
+    }));
+    const proxyEventHandler = createProxyEventHandler({
+      target: `http://127.0.0.1:${vitePort}`,
+      enableLogger: !!process.env.DEBUG
+    });
+    app.use(eventHandler(proxyEventHandler));
+    const server = nodeCreateServer(toNodeListener(app));
+    return server.on("upgrade", handleUpgrade), {
+      nativeServer: server,
+      viteServer,
+      async start() {
+        return server.listen(port), console.info(`Server running on http://localhost:${port}`), {
+          closePromise: new Promise(res => viteServer.httpServer?.on("close", res))
+        };
+      },
+      stop: async () => {
+        await Promise.all([server.close(), viteServer.close()]);
+      }
+    };
+    async function getBundleCode() {
+      if (process.env.LOAD_TMP_BUNDLE) {
+        const tmpBundle = join(process.cwd(), "bundle.tmp.js");
+        if (await pathExists(tmpBundle)) return console.info("\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F returning temp bundle \u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F\u26A0\uFE0F", tmpBundle), await readFile(tmpBundle, "utf-8");
+      }
+      if (isBuilding) return await isBuilding;
+      let done;
+      isBuilding = new Promise(res => {
+        done = res;
+      });
+      async function babelReanimated(input, filename) {
+        return await new Promise((res, rej) => {
+          babel.transform(input, {
+            plugins: ["react-native-reanimated/plugin"],
+            filename
+          }, (err, result) => {
+            (!result || err) && rej(err || "no res"), res(result.code);
+          });
+        });
+      }
+      let buildConfig = {
+        plugins: [swapRnPlugin, {
+          name: "reanimated",
+          async transform(code, id) {
+            if (code.includes("worklet")) return await babelReanimated(code, id);
+          }
+        }, viteRNClientPlugin, nativePlugin({
+          root,
+          port,
+          mode: "build"
+        }), viteReactPlugin({
+          tsDecorators: !0,
+          mode: "build"
+        }), viteInspectPlugin({
+          build: !0,
+          outputDir: ".vite-inspect"
+        }), {
+          name: "treat-js-files-as-jsx",
+          async transform(code, id) {
+            return id.match(/expo-status-bar/) ? transformWithEsbuild(code, id, {
+              loader: "jsx",
+              jsx: "automatic"
+            }) : null;
+          }
+        }, {
+          name: "native-extensions"
+          // async config(config) {
+          //   config.resolve!.extensions = nativeExtensions
+          //   config.optimizeDeps!.esbuildOptions!.resolveExtensions = nativeExtensions
+          //   return config
+          // },
+        }],
+        appType: "custom",
+        root,
+        clearScreen: !1,
+        optimizeDeps: {
+          include: depsToOptimize,
+          esbuildOptions: {
+            jsx: "automatic"
+          }
+        },
+        build: {
+          ssr: !1,
+          minify: !1,
+          commonjsOptions: {
+            transformMixedEsModules: !0
+          },
+          rollupOptions: {
+            treeshake: !1,
+            preserveEntrySignatures: "strict",
+            output: {
+              preserveModules: !0,
+              format: "cjs"
+            }
+          }
+        },
+        resolve: {
+          extensions: nativeExtensions
+        },
+        mode: "development",
+        define: {
+          "process.env.NODE_ENV": '"development"'
+        }
+      };
+      options.buildConfig && (buildConfig = mergeConfig(buildConfig, options.buildConfig)), await resolveConfig(buildConfig, "build");
+      const buildOutput = await build(buildConfig);
+      if (!("output" in buildOutput)) throw "\u274C";
+      let appCode = buildOutput.output.sort((a, b) => a.isEntry ? 1 : -1).map(outputModule => {
+        if (outputModule.type == "chunk") {
+          const importsMap = {};
+          for (const imp of outputModule.imports) {
+            const relativePath = relative(dirname(outputModule.fileName), imp);
+            importsMap[relativePath[0] === "." ? relativePath : "./" + relativePath] = imp;
+          }
+          return outputModule.isEntry && (entryRoot = dirname(outputModule.fileName)), `
+___modules___["${outputModule.fileName}"] = ((exports, module) => {
+  const require = createRequire(${JSON.stringify(importsMap, null, 2)})
+
+  ${outputModule.code}
+})
+
+${outputModule.isEntry ? `
+// run entry
+const __require = createRequire({})
+__require("react-native")
+__require("${outputModule.fileName}")
+` : ""}
+`;
+        }
+      }).join(`
+`);
+      if (!appCode) throw "\u274C";
+      appCode = appCode.replaceAll("undefined.accept(() => {})", "").replaceAll("undefined.accept(function() {});", "").replaceAll("(void 0).accept(() => {})", "").replaceAll("(void 0).accept(function() {});", "");
+      const appRootParent = join(root, "..", ".."),
+        out = (await readFile(templateFile, "utf-8")).replace("_virtual/virtual_react-native.js", relative(appRootParent, prebuilds.reactNative)).replace("_virtual/virtual_react.js", relative(appRootParent, prebuilds.react)).replaceAll("_virtual/virtual_react-jsx.js", relative(appRootParent, prebuilds.reactJSX)) + appCode;
+      return done(out), isBuilding = null, out;
+    }
+  };
+function getIndexJsonResponse({
+  port,
+  root
+}) {
+  return {
+    name: "myapp",
+    slug: "myapp",
+    scheme: "myapp",
+    version: "1.0.0",
+    jsEngine: "jsc",
+    orientation: "portrait",
+    icon: "./assets/icon.png",
+    userInterfaceStyle: "light",
+    splash: {
+      image: "./assets/splash.png",
+      resizeMode: "contain",
+      backgroundColor: "#ffffff",
+      imageUrl: "http://127.0.0.1:8081/assets/./assets/splash.png"
+    },
+    updates: {
+      fallbackToCacheTimeout: 0
+    },
+    assetBundlePatterns: ["**/*"],
+    ios: {
+      supportsTablet: !0,
+      bundleIdentifier: "com.natew.myapp"
+    },
+    android: {
+      package: "com.tamagui.myapp",
+      adaptiveIcon: {
+        foregroundImage: "./assets/adaptive-icon.png",
+        backgroundColor: "#FFFFFF",
+        foregroundImageUrl: "http://127.0.0.1:8081/assets/./assets/adaptive-icon.png"
+      }
+    },
+    web: {
+      favicon: "./assets/favicon.png"
+    },
+    extra: {
+      eas: {
+        projectId: "061b4470-78c7-4d6a-b850-8167fb0a3434"
+      }
+    },
+    _internal: {
+      isDebug: !1,
+      projectRoot: root,
+      dynamicConfigPath: null,
+      staticConfigPath: join(root, "app.json"),
+      packageJsonPath: join(root, "package.json")
+    },
+    sdkVersion: "47.0.0",
+    platforms: ["ios", "android", "web"],
+    iconUrl: `http://127.0.0.1:${port}/assets/./assets/icon.png`,
+    debuggerHost: `127.0.0.1:${port}`,
+    logUrl: `http://127.0.0.1:${port}/logs`,
+    developer: {
+      tool: "expo-cli",
+      projectRoot: root
+    },
+    packagerOpts: {
+      dev: !0
+    },
+    mainModuleName: "index",
+    __flipperHack: "React Native packager is running",
+    hostUri: `127.0.0.1:${port}`,
+    bundleUrl: `http://127.0.0.1:${port}/index.bundle?platform=ios&dev=true&hot=false&lazy=true`,
+    id: "@anonymous/myapp-473c4543-3c36-4786-9db1-c66a62ac9b78"
+  };
+}
+function bindKeypressInput() {
+  if (!process.stdin.setRawMode) {
+    console.warn({
+      msg: "Interactive mode is not supported in this environment"
+    });
+    return;
+  }
+  readline.emitKeypressEvents(process.stdin), process.stdin.setRawMode(!0), process.stdin.on("keypress", (_key, data) => {
+    const {
+      ctrl,
+      name
+    } = data;
+    if (ctrl === !0) switch (name) {
+      case "c":
+        process.exit();
+      case "z":
+        process.emit("SIGTSTP", "SIGTSTP");
+        break;
+    } else switch (name) {
+      case "r":
+        break;
+      case "d":
+        break;
+      case "c":
+        process.stdout.write("\x1B[2J\x1B[0;0H");
+        break;
+    }
+  });
+}
+function isWithin(outer, inner) {
+  const rel = relative(outer, inner);
+  return !rel.startsWith("../") && rel !== "..";
+}
+export { bindKeypressInput, create };