@whop/react-native 0.1.14 → 0.2.0

package/dist/cli/index.js

@@ -24,8 +24,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 
 // src/cli/index.ts
-var import_node_fs3 = require("fs");
-var import_node_path5 = __toESM(require("path"));
+var import_node_fs4 = require("fs");
+var import_node_path6 = __toESM(require("path"));
 var import_node_util = require("util");
 var import_find_up2 = require("find-up");
 var import_qrcode_terminal = __toESM(require("qrcode-terminal"));
@@ -316,79 +316,498 @@ var CustomReporter = class {
   }
 };
 
-// src/cli/web.ts
+// src/cli/mobile-rspack.ts
+var import_node_fs3 = require("fs");
 var import_promises3 = require("fs/promises");
 var import_node_path4 = __toESM(require("path"));
+var flowLoaderPath = import_node_path4.default.join(__dirname, "rspack-flow-loader.js");
+var reanimatedLoaderPath = import_node_path4.default.join(__dirname, "rspack-reanimated-loader.js");
+async function loadRspack(root) {
+  try {
+    const rspackPath = require.resolve("@rspack/core", { paths: [root] });
+    return require(rspackPath);
+  } catch {
+    return require("@rspack/core");
+  }
+}
+async function loadRepack(root) {
+  try {
+    const repackPath = require.resolve("@callstack/repack", { paths: [root] });
+    return require(repackPath);
+  } catch {
+    return require("@callstack/repack");
+  }
+}
+function isFlowPreTransformed(root) {
+  const markerFile = import_node_path4.default.join(root, "node_modules/.flow-pretransformed");
+  return (0, import_node_fs3.existsSync)(markerFile);
+}
+function getReactNativeInitModules(root) {
+  const reactNativePath = import_node_path4.default.dirname(
+    require.resolve("react-native/package.json", { paths: [root] })
+  );
+  const getPolyfills = require(import_node_path4.default.join(reactNativePath, "rn-get-polyfills.js"));
+  const polyfills = getPolyfills();
+  const initializeCore = import_node_path4.default.join(reactNativePath, "Libraries/Core/InitializeCore.js");
+  return [...polyfills, initializeCore];
+}
+async function createHermesPolyfills(root, platform) {
+  const polyfillDir = import_node_path4.default.join(root, "build", "entrypoints", platform);
+  await (0, import_promises3.mkdir)(polyfillDir, { recursive: true });
+  const polyfillPath = import_node_path4.default.join(polyfillDir, "hermes-polyfills.js");
+  const polyfillCode = `
+// Polyfills for Web APIs not available in Hermes
+// This runs after React Native's InitializeCore, so 'global' is available
+
+(function(g) {
+  // TextDecoder/TextEncoder (needed by jose/JWT libraries)
+  if (typeof g.TextDecoder === 'undefined') {
+    g.TextDecoder = function TextDecoder(encoding) {
+      if (encoding && encoding !== 'utf-8' && encoding !== 'utf8') {
+        throw new Error('TextDecoder polyfill only supports UTF-8');
+      }
+    };
+    g.TextDecoder.prototype.decode = function(input) {
+      if (!input) return '';
+      var bytes = new Uint8Array(input.buffer || input);
+      var result = '';
+      for (var i = 0; i < bytes.length; i++) {
+        result += String.fromCharCode(bytes[i]);
+      }
+      try {
+        return decodeURIComponent(escape(result));
+      } catch (e) {
+        return result;
+      }
+    };
+  }
+  
+  if (typeof g.TextEncoder === 'undefined') {
+    g.TextEncoder = function TextEncoder() {};
+    g.TextEncoder.prototype.encode = function(str) {
+      var utf8 = unescape(encodeURIComponent(str || ''));
+      var result = new Uint8Array(utf8.length);
+      for (var i = 0; i < utf8.length; i++) {
+        result[i] = utf8.charCodeAt(i);
+      }
+      return result;
+    };
+  }
+  
+  // URL polyfill (minimal, for libraries that need it before RN's kicks in)
+  if (typeof g.URL === 'undefined') {
+    g.URL = function URL(url, base) {
+      if (base && typeof base === 'string' && !/^[a-z][a-z0-9+.-]*:/i.test(url)) {
+        url = base.replace(/\\/[^\\/]*$/, '/') + url;
+      }
+      this.href = url || '';
+      var match = this.href.match(/^([a-z][a-z0-9+.-]*:)?\\/\\/([^\\/:]*)(:[0-9]+)?(\\/[^?#]*)?(\\?[^#]*)?(#.*)?$/i);
+      if (match) {
+        this.protocol = match[1] || '';
+        this.hostname = match[2] || '';
+        this.port = (match[3] || '').slice(1);
+        this.pathname = match[4] || '/';
+        this.search = match[5] || '';
+        this.hash = match[6] || '';
+        this.host = this.hostname + (this.port ? ':' + this.port : '');
+        this.origin = this.protocol + '//' + this.host;
+      } else {
+        this.protocol = ''; this.hostname = ''; this.port = '';
+        this.pathname = this.href; this.search = ''; this.hash = '';
+        this.host = ''; this.origin = '';
+      }
+    };
+    g.URL.prototype.toString = function() { return this.href; };
+  }
+  
+  // URLSearchParams polyfill (minimal)
+  if (typeof g.URLSearchParams === 'undefined') {
+    g.URLSearchParams = function URLSearchParams(init) {
+      this._params = [];
+      if (typeof init === 'string') {
+        init = init.replace(/^\\?/, '');
+        var pairs = init.split('&');
+        for (var i = 0; i < pairs.length; i++) {
+          var pair = pairs[i].split('=');
+          if (pair[0]) {
+            this._params.push([decodeURIComponent(pair[0]), decodeURIComponent(pair[1] || '')]);
+          }
+        }
+      }
+    };
+    g.URLSearchParams.prototype.get = function(name) {
+      for (var i = 0; i < this._params.length; i++) {
+        if (this._params[i][0] === name) return this._params[i][1];
+      }
+      return null;
+    };
+    g.URLSearchParams.prototype.toString = function() {
+      return this._params.map(function(p) {
+        return encodeURIComponent(p[0]) + '=' + encodeURIComponent(p[1]);
+      }).join('&');
+    };
+  }
+})(typeof globalThis !== 'undefined' ? globalThis : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);
+`;
+  await (0, import_promises3.writeFile)(polyfillPath, polyfillCode);
+  return polyfillPath;
+}
+async function bundleWithRspack(root, platform) {
+  const rspackModule = await loadRspack(root);
+  const { rspack } = rspackModule;
+  const Repack = await loadRepack(root);
+  const entryFile = await makeEntrypoint2(root, platform);
+  const rnInitModules = getReactNativeInitModules(root);
+  const hermesPolyfills = await createHermesPolyfills(root, platform);
+  const outputDir = import_node_path4.default.join(root, "build", "output", platform);
+  await (0, import_promises3.mkdir)(outputDir, { recursive: true });
+  const outputFile = import_node_path4.default.join(outputDir, "main_js_bundle.js");
+  const flowPreTransformed = isFlowPreTransformed(root);
+  if (flowPreTransformed) {
+    console.log(` \u2139\uFE0E [${platform}] using pre-transformed Flow files (fast path)`);
+  }
+  const moduleRules = [
+    // Allow extensionless imports in ESM modules (e.g., @rn-primitives)
+    {
+      test: /\.m?js$/,
+      resolve: {
+        fullySpecified: false
+      }
+    }
+  ];
+  if (flowPreTransformed) {
+    moduleRules.push({
+      test: /\.[cm]?[jt]sx?$/,
+      use: {
+        loader: "builtin:swc-loader",
+        options: {
+          jsc: {
+            parser: {
+              syntax: "typescript",
+              tsx: true
+            },
+            transform: {
+              react: {
+                runtime: "automatic"
+              }
+            }
+          }
+        }
+      },
+      type: "javascript/auto"
+    });
+  } else {
+    moduleRules.push(
+      // Strip Flow types from react-native core files FIRST
+      {
+        test: /\.jsx?$/,
+        include: [
+          /node_modules[/\\]react-native[/\\]/,
+          /node_modules[/\\]@react-native[/\\]/
+        ],
+        use: [
+          // Then process with SWC
+          {
+            loader: "builtin:swc-loader",
+            options: {
+              jsc: {
+                parser: {
+                  syntax: "ecmascript",
+                  jsx: true
+                },
+                transform: {
+                  react: {
+                    runtime: "automatic"
+                  }
+                }
+              }
+            }
+          },
+          // First strip Flow types with Babel
+          {
+            loader: flowLoaderPath
+          }
+        ],
+        type: "javascript/auto"
+      },
+      // App code and other node_modules: JS/TS/JSX/TSX via SWC
+      {
+        test: /\.[cm]?[jt]sx?$/,
+        exclude: [
+          /node_modules[/\\]react-native[/\\]/,
+          /node_modules[/\\]@react-native[/\\]/
+        ],
+        use: {
+          loader: "builtin:swc-loader",
+          options: {
+            jsc: {
+              parser: {
+                syntax: "typescript",
+                tsx: true
+              },
+              transform: {
+                react: {
+                  runtime: "automatic"
+                }
+              }
+            }
+          }
+        },
+        type: "javascript/auto"
+      }
+    );
+  }
+  moduleRules.unshift({
+    test: /\.[jt]sx?$/,
+    include: [
+      /node_modules[/\\]react-native-reanimated[/\\]/,
+      // Also include app code that might have worklets
+      import_node_path4.default.join(root, "src")
+    ],
+    use: {
+      loader: reanimatedLoaderPath
+    },
+    enforce: "pre"
+    // Run before other loaders
+  });
+  moduleRules.push({
+    test: /\.(png|jpg|jpeg|gif|webp|svg)$/,
+    type: "asset/inline"
+  });
+  const cacheDir = import_node_path4.default.join(root, "node_modules/.cache/rspack");
+  const hasCacheDir = (0, import_node_fs3.existsSync)(cacheDir);
+  if (hasCacheDir) {
+    console.log(` \u2139\uFE0E [${platform}] using pre-warmed Rspack cache`);
+  }
+  const config2 = {
+    mode: "production",
+    context: root,
+    // Disable default target - we're targeting React Native's Hermes runtime
+    target: false,
+    // Entry order: RN init -> Hermes polyfills -> app code
+    entry: [...rnInitModules, hermesPolyfills, entryFile],
+    output: {
+      path: outputDir,
+      filename: "main_js_bundle.js",
+      publicPath: "/",
+      clean: false,
+      // Use 'self' as global object (initialized by our banner)
+      globalObject: "self",
+      // Disable async chunk loading - RN needs single bundle
+      chunkLoading: false,
+      chunkFormat: false
+    },
+    // Enable caching (required for experiments.cache)
+    cache: true,
+    // Persistent filesystem cache (Rspack 1.3+ format)
+    experiments: {
+      cache: {
+        type: "persistent",
+        version: "rspack-rn-v2",
+        storage: {
+          type: "filesystem",
+          directory: cacheDir
+        }
+      }
+    },
+    resolve: {
+      // Get Re.Pack's resolve options for React Native
+      ...Repack.getResolveOptions({ platform }),
+      // Ensure we can resolve from the app's node_modules
+      modules: [
+        import_node_path4.default.join(root, "node_modules"),
+        "node_modules"
+      ],
+      // Use react-native field first in package.json
+      mainFields: ["react-native", "browser", "module", "main"],
+      // Re-enable exports field resolution (Re.Pack disables it)
+      conditionNames: ["react-native", "import", "require", "default"],
+      exportsFields: ["exports"],
+      // Platform-specific extensions - order matters! Most specific first
+      // Re.Pack's extensions have literal [platform] which doesn't work
+      extensions: [
+        `.${platform}.ts`,
+        `.${platform}.tsx`,
+        `.${platform}.js`,
+        `.${platform}.jsx`,
+        ".native.ts",
+        ".native.tsx",
+        ".native.js",
+        ".native.jsx",
+        ".ts",
+        ".tsx",
+        ".js",
+        ".jsx",
+        ".json"
+      ],
+      // Alias react-native-reanimated to lib/module to avoid TypeScript source
+      alias: {
+        ...Repack.getResolveOptions({ platform }).alias,
+        "react-native-reanimated": import_node_path4.default.join(root, "node_modules/react-native-reanimated/lib/module")
+      }
+    },
+    resolveLoader: {
+      // Allow resolving loaders from the CLI package's node_modules
+      modules: [
+        import_node_path4.default.join(__dirname, ".."),
+        // dist/ folder
+        import_node_path4.default.dirname(__dirname),
+        // package root
+        "node_modules"
+      ]
+    },
+    module: {
+      rules: moduleRules
+    },
+    plugins: [
+      // NOTE: We intentionally do NOT use RepackTargetPlugin because it sets
+      // chunkLoading: 'jsonp' which creates separate chunk files that can't be
+      // loaded in React Native. Instead, we manually set up what we need.
+      // Initialize 'self' global (normally done by RepackTargetPlugin)
+      new rspack.BannerPlugin({
+        raw: true,
+        entryOnly: true,
+        banner: `var self = self || this || new Function("return this")() || {};`
+      }),
+      // Define globals for React Native
+      new rspack.DefinePlugin({
+        __DEV__: JSON.stringify(false),
+        "process.env.NODE_ENV": JSON.stringify("production")
+      })
+    ],
+    optimization: {
+      minimize: false,
+      // Keep readable for debugging
+      // Disable code splitting - React Native needs a single bundle
+      splitChunks: false,
+      runtimeChunk: false
+    },
+    devtool: false,
+    stats: "errors-warnings"
+  };
+  await new Promise((resolve, reject) => {
+    rspack(config2, (err, stats) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      if (stats?.hasErrors()) {
+        const info = stats.toJson();
+        console.error(info.errors);
+        reject(new Error("Rspack build failed"));
+        return;
+      }
+      resolve();
+    });
+  });
+  const finalFile = import_node_path4.default.join(outputDir, "main_js_bundle.hbc");
+  if (!(0, import_node_fs3.existsSync)(outputFile)) {
+    throw new Error(
+      `[${platform}] Rspack completed but bundle file was not created at ${outputFile}. Check the build output for warnings or errors.`
+    );
+  }
+  await (0, import_promises3.rename)(outputFile, finalFile);
+  const outputFiles = (0, import_node_fs3.readdirSync)(outputDir);
+  console.log(` \u2139\uFE0E [${platform}] files created:`, outputFiles.join(", "));
+  for (const file of outputFiles) {
+    if (file !== "main_js_bundle.hbc" && file !== "assets") {
+      await (0, import_promises3.unlink)(import_node_path4.default.join(outputDir, file));
+    }
+  }
+  console.log(` \u2714\uFE0E [${platform}] bundle created (rspack)`);
+}
+async function makeEntrypoint2(root, platform) {
+  const entrypoint = import_node_path4.default.join(
+    root,
+    "build",
+    "entrypoints",
+    platform,
+    "index.js"
+  );
+  const files = await getSupportedAppViewTypes(root);
+  const pascalCase = (str) => str.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+  const imports = files.map(
+    (file) => `import { ${pascalCase(file)} } from "../../../src/views/${file}";`
+  );
+  const registry = files.map(
+    (file) => `AppRegistry.registerComponent("${pascalCase(file)}", () => ${pascalCase(
+      file
+    )});`
+  );
+  const entrypointContent = `import { AppRegistry } from "react-native";
+${imports.join("\n")}
+
+${registry.join("\n")}
+`;
+  const entrypointDir = import_node_path4.default.dirname(entrypoint);
+  await (0, import_promises3.mkdir)(entrypointDir, { recursive: true });
+  await (0, import_promises3.writeFile)(entrypoint, entrypointContent, "utf-8");
+  console.log(` \u2714\uFE0E [${platform}] entrypoint created`);
+  return entrypoint;
+}
+
+// src/cli/web.ts
+var import_promises4 = require("fs/promises");
+var import_node_path5 = __toESM(require("path"));
 var import_esbuild = require("esbuild");
 
 // src/cli/reanimated-bable.ts
-var fs2 = __toESM(require("fs/promises"));
-var path4 = __toESM(require("path"));
 var babel = __toESM(require("@babel/core"));
-var JS_RE = /\.(m|c)?(t|j)sx?$/;
+var WORKLET_DIRECTIVE_RX = /['"]worklet['"]/;
 function reanimatedBabelPlugin() {
-  const shouldTransform = (p) => {
-    if (!JS_RE.test(p)) return false;
-    if (p.includes(`${path4.sep}react-native-reanimated${path4.sep}`))
-      return true;
-    if (p.includes(`${path4.sep}node_modules${path4.sep}`)) return false;
-    return p.includes(`${path4.sep}src${path4.sep}`);
-  };
   return {
     name: "reanimated-babel",
     setup(b) {
-      b.onLoad({ filter: JS_RE }, async (args) => {
-        if (!shouldTransform(args.path)) {
-          return null;
+      b.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
+        const fs3 = await import("fs/promises");
+        const source = await fs3.readFile(args.path, "utf8");
+        if (!WORKLET_DIRECTIVE_RX.test(source)) {
+          return void 0;
         }
-        const code = await fs2.readFile(args.path, "utf8");
-        const result = await babel.transformAsync(code, {
+        const isTS = args.path.endsWith(".ts") || args.path.endsWith(".tsx");
+        const hasJSX = args.path.endsWith("x") || args.path.endsWith(".js");
+        const syntaxPlugins = [];
+        if (isTS) {
+          syntaxPlugins.push(["@babel/plugin-syntax-typescript", { isTSX: args.path.endsWith("x") }]);
+        } else if (hasJSX) {
+          syntaxPlugins.push("@babel/plugin-syntax-jsx");
+        }
+        const result = await babel.transformAsync(source, {
           filename: args.path,
-          sourceMaps: false,
           babelrc: false,
           configFile: false,
-          // ORDER MATTERS: Reanimated plugin MUST BE LAST
           plugins: [
-            // Needed by Reanimated on web per docs
-            "@babel/plugin-transform-export-namespace-from",
-            // Handle Flow types present in some RN libs
-            [
-              "@babel/plugin-transform-flow-strip-types",
-              { allowDeclareFields: true }
-            ],
-            // MUST be last
-            [
-              "react-native-reanimated/plugin",
-              { relativeSourceLocation: true }
-            ]
+            ...syntaxPlugins,
+            // Transform worklets
+            "react-native-reanimated/plugin"
           ],
           presets: [],
           // esbuild handles TS/JSX syntax; no preset-env/preset-react
           caller: { name: "esbuild" },
-          // Let Babel parse TS/JSX/Flow; keep it broad
-          parserOpts: { plugins: ["jsx", "typescript"] },
-          generatorOpts: { decoratorsBeforeExport: true }
+          sourceMaps: "inline"
         });
+        if (!result?.code) {
+          return void 0;
+        }
+        const ext = args.path.split(".").pop() ?? "ts";
+        const loaderMap = {
+          tsx: "tsx",
+          jsx: "jsx",
+          ts: "ts",
+          js: "jsx"
+          // .js files in RN often contain JSX
+        };
         return {
-          // biome-ignore lint/style/noNonNullAssertion: <explanation>
           contents: result.code,
-          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-          loader: pickLoader(args.path)
+          loader: loaderMap[ext] ?? "ts"
         };
       });
     }
   };
 }
-function pickLoader(file) {
-  const ext = path4.extname(file).toLowerCase();
-  if (ext === ".tsx") return "tsx";
-  if (ext === ".ts") return "ts";
-  if (ext === ".jsx") return "jsx";
-  return "jsx";
-}
 
 // src/cli/strip-flow.ts
-var fs3 = __toESM(require("fs/promises"));
+var fs2 = __toESM(require("fs/promises"));
 var path5 = __toESM(require("path"));
 var babel2 = __toESM(require("@babel/core"));
 function stripFlowWithBabel() {
@@ -398,10 +817,11 @@ function stripFlowWithBabel() {
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     setup(b) {
       b.onLoad({ filter }, async (args) => {
-        if (!args.path.includes(`${path5.sep}react-native${path5.sep}`)) {
+        const isReactNative = args.path.includes(`${path5.sep}react-native${path5.sep}`) || args.path.includes(`${path5.sep}@react-native${path5.sep}`);
+        if (!isReactNative) {
           return null;
         }
-        const code = await fs3.readFile(args.path, "utf8");
+        const code = await fs2.readFile(args.path, "utf8");
         const out = await babel2.transformAsync(code, {
           filename: args.path,
           babelrc: false,
@@ -454,8 +874,8 @@ function toPascalCase(str) {
 }
 async function makeWebEntrypoint(root) {
   const files = await getSupportedAppViewTypes(root);
-  const packageJsonPath = import_node_path4.default.join(root, "package.json");
-  const packageJson = JSON.parse(await (0, import_promises3.readFile)(packageJsonPath, "utf-8"));
+  const packageJsonPath = import_node_path5.default.join(root, "package.json");
+  const packageJson = JSON.parse(await (0, import_promises4.readFile)(packageJsonPath, "utf-8"));
   const hasReactNativeReanimated = packageJson.dependencies?.["react-native-reanimated"];
   const imports = files.map(
     (file) => `import { ${toPascalCase(file)} } from "../../../src/views/${file}";`
@@ -488,18 +908,18 @@ const root = document.getElementById("root") || (() => {
 })();
 AppRegistry.runApplication(viewType, { rootTag: root });
 `;
-  const entryFile = import_node_path4.default.join(root, "build", "entrypoints", "web", "index.tsx");
-  await (0, import_promises3.mkdir)(import_node_path4.default.dirname(entryFile), { recursive: true });
-  await (0, import_promises3.writeFile)(entryFile, entry, "utf-8");
+  const entryFile = import_node_path5.default.join(root, "build", "entrypoints", "web", "index.tsx");
+  await (0, import_promises4.mkdir)(import_node_path5.default.dirname(entryFile), { recursive: true });
+  await (0, import_promises4.writeFile)(entryFile, entry, "utf-8");
   return entryFile;
 }
 async function bundleWeb(root) {
   const entry = await makeWebEntrypoint(root);
-  const outDir = import_node_path4.default.join(root, "build", "output", "web");
-  await (0, import_promises3.mkdir)(outDir, { recursive: true });
+  const outDir = import_node_path5.default.join(root, "build", "output", "web");
+  await (0, import_promises4.mkdir)(outDir, { recursive: true });
   await (0, import_esbuild.build)({
     entryPoints: [entry],
-    outfile: import_node_path4.default.join(outDir, "main.js"),
+    outfile: import_node_path5.default.join(outDir, "main.js"),
     bundle: true,
     minify: false,
     format: "esm",
@@ -549,7 +969,7 @@ async function bundleWeb(root) {
         setup(b) {
           b.onResolve({ filter: /^\.\/native-whop-core$/ }, (args) => {
             return {
-              path: import_node_path4.default.join(args.resolveDir, "native-whop-core"),
+              path: import_node_path5.default.join(args.resolveDir, "native-whop-core"),
               namespace: "file"
             };
           });
@@ -582,7 +1002,7 @@ async function bundleWeb(root) {
 		<script type="module" src="./main.js"></script>
 	</body>
 </html>`;
-  await (0, import_promises3.writeFile)(import_node_path4.default.join(outDir, "index.html"), html, "utf-8");
+  await (0, import_promises4.writeFile)(import_node_path5.default.join(outDir, "index.html"), html, "utf-8");
   console.log(" \u2714\uFE0E [web] bundle created at build/output/web/main.js");
 }
 async function buildAndPublish2(root, {
@@ -601,14 +1021,14 @@ async function buildAndPublish2(root, {
 }
 async function createWebBuild(root) {
   const viewTypes = await getSupportedAppViewTypes(root);
-  const fullDirectory = import_node_path4.default.join(root, "build", "output", "web");
-  const mainJsFile = import_node_path4.default.join(fullDirectory, "main.js");
+  const fullDirectory = import_node_path5.default.join(root, "build", "output", "web");
+  const mainJsFile = import_node_path5.default.join(fullDirectory, "main.js");
   try {
-    await (0, import_promises3.readFile)(mainJsFile);
+    await (0, import_promises4.readFile)(mainJsFile);
   } catch {
     throw new Error(`main.js not found in ${fullDirectory}`);
   }
-  const buf = await (0, import_promises3.readFile)(mainJsFile);
+  const buf = await (0, import_promises4.readFile)(mainJsFile);
   const checksum = await getChecksum(buf);
   console.log(` \u2714\uFE0E [web] build checksummed: ${checksum}`);
   const fileName = `rnweb_${checksum}.js`;
@@ -666,6 +1086,9 @@ async function main() {
       },
       web: {
         type: "boolean"
+      },
+      metro: {
+        type: "boolean"
       }
     },
     strict: true,
@@ -694,10 +1117,13 @@ async function main() {
   } else {
     console.error(
       `Usage:
-	whop-react-native ship   [--ios] [--android] [--web]   # runs build and then publishes it as a dev build to whop.
-	whop-react-native build  [--ios] [--android] [--web]   # builds your app into a distributable bundle in the build/ directory.
-	whop-react-native upload [--ios] [--android] [--web]   # uploads the existing build directory to whop.
-	whop-react-native clean                                # cleans the build directory.`
+	whop-react-native ship   [--ios] [--android] [--web] [--metro]   # runs build and then publishes it as a dev build to whop.
+	whop-react-native build  [--ios] [--android] [--web] [--metro]   # builds your app into a distributable bundle in the build/ directory.
+	whop-react-native upload [--ios] [--android] [--web]             # uploads the existing build directory to whop.
+	whop-react-native clean                                          # cleans the build directory.
+
+Options:
+	--metro    Use Metro instead of Rspack for mobile builds (slower, for compatibility)`
     );
     process.exit(1);
   }
@@ -710,29 +1136,53 @@ async function main() {
     }
   }
   const didProvidePlatform = args.values.ios || args.values.android || args.values.web;
+  const useMetro = args.values.metro || envBool("WRN_USE_METRO");
   const opts = { shouldBuild, shouldUpload };
   const promises = [];
+  const bundler = useMetro ? "metro" : "rspack";
+  if (shouldBuild) {
+    console.log(` \u2139\uFE0E using ${bundler} for mobile builds`);
+  }
   if (args.values.ios || !didProvidePlatform) {
-    promises.push(buildAndPublish(root, "ios", opts));
+    if (useMetro) {
+      promises.push(buildAndPublish(root, "ios", opts));
+    } else {
+      promises.push(buildAndPublishWithRspack(root, "ios", opts));
+    }
   }
   if (args.values.android || !didProvidePlatform) {
-    promises.push(buildAndPublish(root, "android", opts));
+    if (useMetro) {
+      promises.push(buildAndPublish(root, "android", opts));
+    } else {
+      promises.push(buildAndPublishWithRspack(root, "android", opts));
+    }
   }
   if (args.values.web || !didProvidePlatform) {
     promises.push(buildAndPublish2(root, opts));
   }
   await Promise.all(promises);
 }
+async function buildAndPublishWithRspack(root, platform, {
+  shouldBuild = true,
+  shouldUpload = true
+}) {
+  if (shouldBuild) {
+    await bundleWithRspack(root, platform);
+  }
+  if (shouldUpload) {
+    await createMobileBuild(root, platform);
+  }
+}
 async function cleanBuildDirectory(root) {
-  const buildDirectory = import_node_path5.default.join(root, "build");
-  if ((0, import_node_fs3.existsSync)(buildDirectory)) {
+  const buildDirectory = import_node_path6.default.join(root, "build");
+  if ((0, import_node_fs4.existsSync)(buildDirectory)) {
     await (0, import_rimraf.rimraf)(buildDirectory);
   }
   console.log(" \u2714\uFE0E cleaned build directory");
 }
 async function cleanEntrypointsDirectory(root) {
-  const buildDirectory = import_node_path5.default.join(root, "build", "entrypoints");
-  if ((0, import_node_fs3.existsSync)(buildDirectory)) {
+  const buildDirectory = import_node_path6.default.join(root, "build", "entrypoints");
+  if ((0, import_node_fs4.existsSync)(buildDirectory)) {
     await (0, import_rimraf.rimraf)(buildDirectory);
   }
   console.log(" \u2714\uFE0E cleaned build entrypoints directory");
@@ -744,7 +1194,7 @@ async function getRootProjectDirectory() {
       "please run this command inside a whop react native project"
     );
   }
-  const root = import_node_path5.default.dirname(file);
+  const root = import_node_path6.default.dirname(file);
   return root;
 }
 async function handleInstall() {