@whop/react-native 0.0.10 → 0.0.12

package/dist/cli/index.js

@@ -25,15 +25,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 // src/cli/index.ts
 var import_node_fs2 = require("fs");
-var import_node_path2 = __toESM(require("path"));
+var import_node_path4 = __toESM(require("path"));
 var import_node_util = require("util");
 var import_find_up2 = require("find-up");
+var import_qrcode_terminal = __toESM(require("qrcode-terminal"));
 var import_rimraf = require("rimraf");
 
 // src/cli/mobile.ts
 var import_node_fs = require("fs");
-var import_promises = require("fs/promises");
-var import_node_path = __toESM(require("path"));
+var import_promises2 = require("fs/promises");
+var import_node_path2 = __toESM(require("path"));
 var import_metro_config = require("@react-native/metro-config");
 var import_find_up = require("find-up");
 var import_jszip = __toESM(require("jszip"));
@@ -84,7 +85,25 @@ async function getChecksum(data) {
 }
 
 // src/cli/valid-view-type.ts
+var import_promises = require("fs/promises");
+var import_node_path = __toESM(require("path"));
 var VALID_VIEW_TYPES = ["experience-view", "discover-view"];
+async function getSupportedAppViewTypes(root) {
+  const views = await (0, import_promises.readdir)(import_node_path.default.join(root, "src", "views"), {
+    withFileTypes: true,
+    recursive: false
+  });
+  const files = views.filter((file) => file.isFile()).map((file) => file.name.split(".")[0]).filter((file) => !!file);
+  const validViews = files.filter(
+    (file) => VALID_VIEW_TYPES.includes(file)
+  );
+  if (validViews.length === 0) {
+    throw new Error(
+      `No valid views found, please create a view in the src/views folder and name it with a valid view type: ${VALID_VIEW_TYPES.join(", ")}`
+    );
+  }
+  return validViews;
+}
 
 // src/cli/mobile.ts
 async function buildAndPublish(root, platform, {
@@ -103,14 +122,14 @@ async function buildAndPublish(root, platform, {
 }
 async function bundle(root, platform) {
   await makeEntrypoint(root, platform);
-  const outputFile = import_node_path.default.join(
+  const outputFile = import_node_path2.default.join(
     root,
     "build",
     "output",
     platform,
     "main_js_bundle"
   );
-  await (0, import_promises.mkdir)(import_node_path.default.dirname(outputFile), { recursive: true });
+  await (0, import_promises2.mkdir)(import_node_path2.default.dirname(outputFile), { recursive: true });
   const defaultConfig = (0, import_metro_config.getDefaultConfig)(root);
   const babelLocation = require.resolve("@babel/runtime/package");
   const bableNodeModules = await (0, import_find_up.findUp)("node_modules", {
@@ -130,7 +149,7 @@ async function bundle(root, platform) {
       },
       watchFolders: [
         root,
-        import_node_path.default.resolve(root, "node_modules"),
+        import_node_path2.default.resolve(root, "node_modules"),
         bableNodeModules
       ],
       reporter: new CustomReporter(),
@@ -151,30 +170,14 @@ async function bundle(root, platform) {
       out: outputFile
     }
   );
-  await (0, import_promises.rename)(
+  await (0, import_promises2.rename)(
     `${outputFile}.js`,
-    import_node_path.default.join(root, "build", "output", platform, "main_js_bundle.hbc")
+    import_node_path2.default.join(root, "build", "output", platform, "main_js_bundle.hbc")
   );
   console.log(` \u2714\uFE0E [${platform}] bundle created`);
 }
-async function getSupportedAppViewTypes(root) {
-  const views = await (0, import_promises.readdir)(import_node_path.default.join(root, "src", "views"), {
-    withFileTypes: true,
-    recursive: false
-  });
-  const files = views.filter((file) => file.isFile()).map((file) => file.name.split(".")[0]).filter((file) => !!file);
-  const validViews = files.filter(
-    (file) => VALID_VIEW_TYPES.includes(file)
-  );
-  if (validViews.length === 0) {
-    throw new Error(
-      `No valid views found, please create a view in the src/views folder and name it with a valid view type: ${VALID_VIEW_TYPES.join(", ")}`
-    );
-  }
-  return validViews;
-}
 async function makeEntrypoint(root, platform) {
-  const entrypoint = import_node_path.default.join(
+  const entrypoint = import_node_path2.default.join(
     root,
     "build",
     "entrypoints",
@@ -194,16 +197,16 @@ ${imports.join("\n")}
 
 ${registry.join("\n")}
 `;
-  const entrypointDir = import_node_path.default.dirname(entrypoint);
-  await (0, import_promises.mkdir)(entrypointDir, { recursive: true });
-  await (0, import_promises.writeFile)(entrypoint, entrypointContent, "utf-8");
+  const entrypointDir = import_node_path2.default.dirname(entrypoint);
+  await (0, import_promises2.mkdir)(entrypointDir, { recursive: true });
+  await (0, import_promises2.writeFile)(entrypoint, entrypointContent, "utf-8");
   console.log(` \u2714\uFE0E [${platform}] entrypoint created`);
   return entrypoint;
 }
 async function createMobileBuild(root, platform) {
   const viewTypes = await getSupportedAppViewTypes(root);
-  const fullDirectory = import_node_path.default.join(root, "build", "output", platform);
-  const mainJsBundle = import_node_path.default.join(fullDirectory, "main_js_bundle.hbc");
+  const fullDirectory = import_node_path2.default.join(root, "build", "output", platform);
+  const mainJsBundle = import_node_path2.default.join(fullDirectory, "main_js_bundle.hbc");
   if (!(0, import_node_fs.existsSync)(mainJsBundle)) {
     throw new Error(`main_js_bundle.hbc not found in ${fullDirectory}`);
   }
@@ -226,7 +229,7 @@ async function createMobileBuild(root, platform) {
   console.log(
     ` \u2714\uFE0E [${platform}] uploaded build: ${fileName} (${(zipData.length / 1024).toFixed(0)} KB)`
   );
-  const build = await whopSdk.apps.createAppBuild({
+  const build2 = await whopSdk.apps.createAppBuild({
     attachment: { directUploadId: uploadedFile.directUploadId },
     checksum,
     platform,
@@ -237,25 +240,25 @@ async function createMobileBuild(root, platform) {
       })[view]
     )
   });
-  if (!build) {
+  if (!build2) {
     throw new Error("Failed to create app build");
   }
-  const dashboardUrl = `https://whop.com/dashboard/${COMPANY_ID}/developer/apps/${APP_ID}/builds/`;
+  const dashboardUrl = `https://whop.com/dashboard/${COMPANY_ID}/developer/apps/${APP_ID}/builds/?platform=${platform}`;
   console.log(`
  \u2714\uFE0E [${platform}] deployed as development build \u2714\uFE0E
-   - build id: ${build.id}
+   - build id: ${build2.id}
    - view types: ${viewTypes.join(", ")}
    - promote to production here: ${dashboardUrl}
 `);
-  return build;
+  return build2;
 }
 async function zipDirectory(directory) {
   const zip = new import_jszip.default();
   function addFilesToZip(currentPath, relativePath = "") {
     const items = (0, import_node_fs.readdirSync)(currentPath);
     for (const item of items) {
-      const fullPath = import_node_path.default.join(currentPath, item);
-      const zipPath = relativePath ? import_node_path.default.join(relativePath, item) : item;
+      const fullPath = import_node_path2.default.join(currentPath, item);
+      const zipPath = relativePath ? import_node_path2.default.join(relativePath, item) : item;
       const stats = (0, import_node_fs.statSync)(fullPath);
       if (stats.isDirectory()) {
         addFilesToZip(fullPath, zipPath);
@@ -274,6 +277,317 @@ var CustomReporter = class {
   }
 };
 
+// src/cli/web.ts
+var import_promises3 = require("fs/promises");
+var import_node_path3 = __toESM(require("path"));
+var import_esbuild = require("esbuild");
+
+// src/cli/reanimated-bable.ts
+var fs = __toESM(require("fs/promises"));
+var path3 = __toESM(require("path"));
+var babel = __toESM(require("@babel/core"));
+var JS_RE = /\.(m|c)?(t|j)sx?$/;
+function reanimatedBabelPlugin() {
+  const shouldTransform = (p) => {
+    if (!JS_RE.test(p)) return false;
+    if (p.includes(`${path3.sep}react-native-reanimated${path3.sep}`))
+      return true;
+    if (p.includes(`${path3.sep}node_modules${path3.sep}`)) return false;
+    return p.includes(`${path3.sep}src${path3.sep}`);
+  };
+  return {
+    name: "reanimated-babel",
+    setup(b) {
+      b.onLoad({ filter: JS_RE }, async (args) => {
+        if (!shouldTransform(args.path)) {
+          return null;
+        }
+        const code = await fs.readFile(args.path, "utf8");
+        const result = await babel.transformAsync(code, {
+          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 }
+            ]
+          ],
+          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 }
+        });
+        return {
+          // biome-ignore lint/style/noNonNullAssertion: <explanation>
+          contents: result.code,
+          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+          loader: pickLoader(args.path)
+        };
+      });
+    }
+  };
+}
+function pickLoader(file) {
+  const ext = path3.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 fs2 = __toESM(require("fs/promises"));
+var babel2 = __toESM(require("@babel/core"));
+function stripFlowWithBabel() {
+  const filter = /\.(m|c)?jsx?$/;
+  return {
+    name: "strip-flow-with-babel",
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    setup(b) {
+      b.onLoad({ filter }, async (args) => {
+        const code = await fs2.readFile(args.path, "utf8");
+        const out = await babel2.transformAsync(code, {
+          filename: args.path,
+          babelrc: false,
+          configFile: false,
+          plugins: [
+            [
+              "@babel/plugin-transform-flow-strip-types",
+              { allowDeclareFields: true }
+            ]
+          ],
+          parserOpts: { plugins: ["jsx", "flow"] },
+          sourceMaps: false
+        });
+        return { contents: out.code, loader: "jsx" };
+      });
+    }
+  };
+}
+
+// src/cli/web.ts
+function aliasReactNativePlugin() {
+  return {
+    name: "alias-react-native",
+    setup(b) {
+      b.onResolve({ filter: /^react-native$/ }, () => ({
+        path: require.resolve("react-native-web")
+      }));
+    }
+  };
+}
+function forceSingleReact() {
+  const map = /* @__PURE__ */ new Map([
+    ["react", require.resolve("react")],
+    ["react/jsx-runtime", require.resolve("react/jsx-runtime")],
+    ["react/jsx-dev-runtime", require.resolve("react/jsx-dev-runtime")],
+    ["react-dom", require.resolve("react-dom")],
+    ["react-dom/client", require.resolve("react-dom/client")]
+  ]);
+  const rx = /^(react(?:\/jsx-(?:dev-)?runtime)?|react-dom(?:\/client)?)$/;
+  return {
+    name: "force-single-react",
+    setup(b) {
+      b.onResolve({ filter: rx }, (args) => ({ path: map.get(args.path) }));
+    }
+  };
+}
+function toPascalCase(str) {
+  return str.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+async function makeWebEntrypoint(root) {
+  const files = await getSupportedAppViewTypes(root);
+  const packageJsonPath = import_node_path3.default.join(root, "package.json");
+  const packageJson = JSON.parse(await (0, import_promises3.readFile)(packageJsonPath, "utf-8"));
+  const hasReactNativeReanimated = packageJson.dependencies?.["react-native-reanimated"];
+  const imports = files.map(
+    (file) => `import { ${toPascalCase(file)} } from "../../../src/views/${file}";`
+  );
+  const registry = files.map(
+    (file) => `AppRegistry.registerComponent("${toPascalCase(file)}", () => WhopNavigationWrapper(React, "${toPascalCase(file)}", ${toPascalCase(file)}));`
+  );
+  const defaultKey = toPascalCase(files[0] ?? "experience-view");
+  const reanimatedImport = hasReactNativeReanimated ? `import "react-native-reanimated";` : "";
+  const entry = `import { AppRegistry } from "react-native";
+import * as React from "react";
+import { WhopNavigationWrapper } from "@whop/react-native/web";
+${reanimatedImport}
+
+${imports.join("\n")} 
+
+${registry.join("\n")} 
+
+const root = document.getElementById("root") || (() => {
+	const d = document.createElement("div");
+	d.id = "root";
+	document.body.appendChild(d);
+	return d;
+})();
+AppRegistry.runApplication("${defaultKey}", { rootTag: root });
+`;
+  const entryFile = import_node_path3.default.join(root, "build", "entrypoints", "web", "index.tsx");
+  await (0, import_promises3.mkdir)(import_node_path3.default.dirname(entryFile), { recursive: true });
+  await (0, import_promises3.writeFile)(entryFile, entry, "utf-8");
+  return entryFile;
+}
+async function bundleWeb(root) {
+  const entry = await makeWebEntrypoint(root);
+  const outDir = import_node_path3.default.join(root, "build", "output", "web");
+  await (0, import_promises3.mkdir)(outDir, { recursive: true });
+  await (0, import_esbuild.build)({
+    entryPoints: [entry],
+    outfile: import_node_path3.default.join(outDir, "main.js"),
+    bundle: true,
+    minify: false,
+    format: "esm",
+    platform: "browser",
+    sourcemap: false,
+    jsx: "automatic",
+    mainFields: ["browser", "module", "main"],
+    conditions: ["browser", "import", "default"],
+    define: {
+      process: "{}",
+      "process.env": "{}",
+      "process.env.NODE_ENV": '"production"',
+      __DEV__: "false",
+      "process.env.NEXT_PUBLIC_WHOP_APP_ID": `"${APP_ID}"`,
+      // Some RN libraries (e.g., RNGH) expect a Node-like global in the browser
+      global: "globalThis"
+    },
+    resolveExtensions: [
+      ".web.tsx",
+      ".web.ts",
+      ".web.js",
+      ".tsx",
+      ".ts",
+      ".jsx",
+      ".js"
+    ],
+    loader: {
+      ".png": "dataurl",
+      ".jpg": "dataurl",
+      ".jpeg": "dataurl",
+      ".svg": "dataurl",
+      ".ttf": "dataurl",
+      ".woff": "dataurl",
+      ".woff2": "dataurl",
+      ".js": "jsx",
+      ".jsx": "jsx"
+    },
+    plugins: [
+      forceSingleReact(),
+      aliasReactNativePlugin(),
+      reanimatedBabelPlugin(),
+      stripFlowWithBabel(),
+      {
+        name: "force-native-web-stub",
+        setup(b) {
+          b.onResolve({ filter: /^\.\/native-whop-core$/ }, (args) => {
+            return {
+              path: import_node_path3.default.join(args.resolveDir, "native-whop-core"),
+              namespace: "file"
+            };
+          });
+        }
+      }
+    ]
+  });
+  const html = `<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Whop App (Web)</title>
+		<style>
+			#root {
+				width: 100vw;
+				height: 100vh;
+				margin: 0;
+				padding: 0;
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+				align-items: stretch;
+				justify-content: start;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="./main.js"></script>
+	</body>
+</html>`;
+  await (0, import_promises3.writeFile)(import_node_path3.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, {
+  shouldBuild = true,
+  shouldUpload = true
+} = {
+  shouldBuild: true,
+  shouldUpload: true
+}) {
+  if (shouldBuild) {
+    await bundleWeb(root);
+  }
+  if (shouldUpload) {
+    await createWebBuild(root);
+  }
+}
+async function createWebBuild(root) {
+  const fullDirectory = import_node_path3.default.join(root, "build", "output", "web");
+  const mainJsFile = import_node_path3.default.join(fullDirectory, "main.js");
+  try {
+    await (0, import_promises3.readFile)(mainJsFile);
+  } catch {
+    throw new Error(`main.js not found in ${fullDirectory}`);
+  }
+  const buf = await (0, import_promises3.readFile)(mainJsFile);
+  const checksum = await getChecksum(buf);
+  console.log(` \u2714\uFE0E [web] build checksummed: ${checksum}`);
+  const fileName = `rnweb_${checksum}.js`;
+  const uploadedFile = await uploadFile(
+    buf,
+    fileName,
+    "application/javascript"
+  );
+  console.log(
+    ` \u2714\uFE0E [web] uploaded build: ${fileName} (${(buf.length / 1024).toFixed(0)} KB)`
+  );
+  const build2 = await whopSdk.apps.createAppBuild({
+    attachment: { directUploadId: uploadedFile.directUploadId },
+    checksum,
+    platform: "web",
+    supportedAppViewTypes: ["hub"]
+  });
+  if (!build2) {
+    throw new Error("Failed to create app build");
+  }
+  const dashboardUrl = `https://whop.com/dashboard/${COMPANY_ID}/developer/apps/${APP_ID}/builds/?platform=web`;
+  console.log(
+    `
+ \u2714\uFE0E [web] deployed as development build \u2714\uFE0E
+   - build id: ${build2.id}
+   - view types: hub
+   - promote to production here: ${dashboardUrl}
+`
+  );
+  return build2;
+}
+
 // src/cli/index.ts
 async function main() {
   const args = (0, import_node_util.parseArgs)({
@@ -293,6 +607,10 @@ async function main() {
     args: process.argv.slice(2)
   });
   const [command] = args.positionals;
+  if (command === "install") {
+    await handleInstall();
+    return;
+  }
   let shouldBuild = true;
   let shouldUpload = true;
   let shouldClean = true;
@@ -331,12 +649,12 @@ async function main() {
     promises.push(buildAndPublish(root, "android", opts));
   }
   if (args.values.web || !didProvidePlatform) {
-    console.warn(" - [web] builds for web are not supported yet - coming soon");
+    promises.push(buildAndPublish2(root, opts));
   }
   await Promise.all(promises);
 }
 async function cleanBuildDirectory(root) {
-  const buildDirectory = import_node_path2.default.join(root, "build");
+  const buildDirectory = import_node_path4.default.join(root, "build");
   if ((0, import_node_fs2.existsSync)(buildDirectory)) {
     await (0, import_rimraf.rimraf)(buildDirectory);
   }
@@ -349,9 +667,20 @@ async function getRootProjectDirectory() {
       "please run this command inside a whop react native project"
     );
   }
-  const root = import_node_path2.default.dirname(file);
+  const root = import_node_path4.default.dirname(file);
   return root;
 }
+async function handleInstall() {
+  const appId = env("NEXT_PUBLIC_WHOP_APP_ID");
+  const installLink = `https://whop.com/apps/${appId}/install`;
+  console.log(`
+Open this link in your browser to install the app into your whop.
+${installLink}
+
+Or scan the QR code with your iPhone:
+	`);
+  import_qrcode_terminal.default.generate(installLink, { small: true });
+}
 main().catch((err) => {
   console.error(err);
   process.exit(1);