vxrn 0.1.28 → 0.1.30

package/dist/esm/create.mjs

@@ -0,0 +1,622 @@
+import wsAdapter from "crossws/adapters/node";
+import { readFile } from "node: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 "node:readline";
+import viteInspectPlugin from "vite-plugin-inspect";
+import { WebSocket } from "ws";
+import { readPackageJSON } from "pkg-types";
+import findNodeModules from "find-node-modules";
+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";
+import createViteFlow from "@vxrn/vite-flow";
+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"];
+async function readState(cacheDir) {
+  const statePath = join(cacheDir, "state.json");
+  return (await FSExtra.pathExists(statePath)) ? await FSExtra.readJSON(statePath) : {};
+}
+async function getOptionsFilled(options) {
+  const {
+      host = "127.0.0.1",
+      root = process.cwd(),
+      port = 8081
+    } = options,
+    packageRootDir = join(import.meta.url ?? __filename, "..", "..", "..").replace("file:", ""),
+    cacheDir = join(root, "node_modules", ".cache", "vxrn"),
+    internalPatchesDir = join(packageRootDir, "patches"),
+    userPatchesDir = join(root, "patches"),
+    [state, packageJSON] = await Promise.all([
+    //
+    readState(cacheDir), readPackageJSON()]);
+  return {
+    ...options,
+    packageJSON,
+    state,
+    packageRootDir,
+    cacheDir,
+    userPatchesDir,
+    internalPatchesDir,
+    host,
+    root,
+    port
+  };
+}
+const {
+    ensureDir,
+    pathExists,
+    pathExistsSync
+  } = FSExtra,
+  patches = [{
+    module: "react-native-screens",
+    patchFile: "react-native-screens+3.22.1.patch"
+  }];
+async function checkPatches(options) {
+  if (options.state.applyPatches === !1) return;
+  const nodeModulesDirs = findNodeModules({
+      cwd: options.root
+    }).map(relativePath => join(options.root, relativePath)),
+    patchesToCopy = /* @__PURE__ */new Set();
+  await Promise.all(patches.flatMap(patch => nodeModulesDirs.flatMap(async dir => {
+    (await FSExtra.pathExists(join(dir, patch.module))) && patchesToCopy.add(patch);
+  })));
+  let didCopy = !1;
+  for (const patch of [...patchesToCopy]) {
+    const dest = join(options.userPatchesDir, patch.patchFile);
+    if (!(await pathExists(dest))) {
+      didCopy = !0, console.info(`Copying patch ${patch.module}`);
+      const src = join(options.internalPatchesDir, patch.patchFile);
+      await FSExtra.copy(src, dest);
+    }
+  }
+  didCopy && (console.info(`
+Please restart after applying the patch by running "npx patch-package".
+  Ideally add it to your devDependencies and as a postinstall script.
+`), process.exit(0));
+}
+const create = async optionsIn => {
+  const options = await getOptionsFilled(optionsIn),
+    {
+      host,
+      port,
+      root,
+      cacheDir
+    } = options;
+  bindKeypressInput();
+  let entryRoot = "";
+  checkPatches(options).catch(err => {
+    console.error(`
+ \u{1F97A} couldn't patch`, err);
+  }), 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 viteFlow = options.flow ? createViteFlow(options.flow) : null,
+    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,
+    viteFlow, 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: [viteFlow, 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;
+        }
+      }],
+      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 };