@calo-design/cli 0.1.0

package/bin/mirror-federate.js

@@ -0,0 +1,427 @@
+"use strict";
+
+/**
+ * `calo-design push` (Module Federation model).
+ *
+ * Compiles an author's plain Expo Router prototype into a self-contained
+ * Module Federation REMOTE container and uploads it to the Fly Tigris registry.
+ * The Calo Mirror shell loads each container at runtime, in its own error
+ * boundary, so one prototype crashing can't take down the app.
+ *
+ * The author never touches Re.Pack: this command generates the federation entry
+ * (renders the Expo Router app via ExpoRoot + require.context), the rspack
+ * config, and the babel/CLI config, stages them against the shared runtime, and
+ * builds. No git, no EAS — just build + upload + upsert the registry index.
+ */
+
+const { spawnSync } = require("node:child_process");
+const fs = require("node:fs");
+const os = require("node:os");
+const path = require("node:path");
+
+const { _s3Put } = require("./mirror-push.js"); // proven SigV4 PUT (Tigris, S3 API)
+
+const PUBLIC_BASE = process.env.CALO_MIRROR_PUBLIC_BASE || "https://calo-design-mirror.fly.storage.tigris.dev";
+
+const c = {
+  dim: (s) => `\x1b[2m${s}\x1b[0m`, b: (s) => `\x1b[1m${s}\x1b[0m`,
+  g: (s) => `\x1b[32m${s}\x1b[0m`, y: (s) => `\x1b[33m${s}\x1b[0m`,
+};
+const log = (s = "") => console.log(s);
+const ok = (s) => log(`${c.g("✓")} ${s}`);
+const warn = (s) => log(`${c.y("!")} ${s}`);
+
+const flag = (args, name, def) => { const i = args.indexOf(name); return i >= 0 && args[i + 1] ? args[i + 1] : def; };
+const has = (args, name) => args.includes(name);
+
+function run(bin, argv, opts = {}) {
+  const r = spawnSync(bin, argv, { stdio: "inherit", ...opts });
+  if (r.error) throw r.error;
+  if (typeof r.status === "number" && r.status !== 0) throw new Error(`${bin} ${argv.join(" ")} exited ${r.status}`);
+  return r;
+}
+
+function runtimeDir() {
+  const home = process.env.DESIGNCHEF_HOME || path.join(os.homedir(), ".designchef");
+  return path.join(home, "runtime");
+}
+
+// The complete set of shared-runtime packages the host provides and the prototype
+// consumes (one instance each → no duplicate native-view registration, one
+// expo-router store). react/react-native are shared separately; web-only and
+// expo-updates (native, not in the host) are excluded.
+const EXCLUDE_SHARED = new Set(["react", "react-native", "react-native-web", "react-dom", "expo", "expo-updates", "@expo/ui"]);
+// Navigation modules carry React contexts + the expo-router store. Module
+// Federation evaluates a SHARED module twice (once in the host bundle, once when
+// the host's container is loaded by a remote) → two router stores / two nav
+// contexts → the navigator renders blank. Keep the whole navigation stack OUT of
+// the shared set so each prototype bundles its OWN single instance (single eval →
+// one store → it paints). Native libs (screens, safe-area, reanimated, svg) stay
+// shared — they MUST be single instances or their native views register twice.
+const PROTOTYPE_OWNED_NAV = new Set([
+  "expo-router",
+  "@react-navigation/native",
+  "@react-navigation/native-stack",
+  "@react-navigation/core",
+  "@react-navigation/elements",
+  "@react-navigation/routers",
+  "@react-navigation/bottom-tabs",
+  "@react-navigation/stack",
+]);
+function runtimeSharedDeps() {
+  const rt = JSON.parse(fs.readFileSync(path.join(runtimeDir(), "package.json"), "utf8")).dependencies || {};
+  return [...new Set([...Object.keys(rt).filter((d) => !EXCLUDE_SHARED.has(d) && !PROTOTYPE_OWNED_NAV.has(d)), "expo-modules-core"])];
+}
+const slugify = (s) => String(s).toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "") || "prototype";
+const titleize = (s) => String(s).replace(/[-_]+/g, " ").replace(/\b\w/g, (m) => m.toUpperCase());
+// MF scope must be a valid JS identifier (no hyphens, no leading digit).
+const scopeOf = (slug) => "proto_" + slug.replace(/[^a-z0-9]+/gi, "_");
+
+function appDir(root) {
+  for (const d of [path.join(root, "src", "app"), path.join(root, "app")]) if (fs.existsSync(d)) return d;
+  return null;
+}
+function gitName() {
+  const r = spawnSync("git", ["config", "user.name"], { encoding: "utf8" });
+  return r.status === 0 ? (r.stdout || "").trim() : "";
+}
+function findScreenshot(root, explicit) {
+  if (explicit) return explicit;
+  for (const p of ["screenshot.png", path.join("assets", "screenshot.png"), path.join("assets", "preview.png")]) {
+    if (fs.existsSync(path.join(root, p))) return path.join(root, p);
+  }
+  return undefined;
+}
+
+// ---- generated files (the federation machinery the author never sees) -------
+
+// Renders the author's Expo Router app as a single federated component. ExpoRoot
+// brings its own SafeAreaProvider + NavigationContainer; require.context feeds it
+// the route files (same mechanism Metro uses, made explicit for rspack).
+const MIRROR_ENTRY = `import 'react-native-gesture-handler';
+import React from 'react';
+import { Platform, View, Text } from 'react-native';
+import PlatformDeep from 'react-native/Libraries/Utilities/Platform';
+import { ExpoRoot } from 'expo-router';
+
+// MF gives this container a react-native whose top-level Platform.OS is null
+// (the deep Platform.ios.js is 'ios'). expo-router reads \`import { Platform }
+// from 'react-native'\` → null → blank navigator. Force the consumed Platform
+// object's OS to 'ios' before expo-router evaluates.
+if (typeof globalThis !== 'undefined') { (globalThis as any).__MAEVAL = (((globalThis as any).__MAEVAL) || 0) + 1; }
+const __pfix: any = {};
+{
+  __pfix.evals = String((globalThis as any).__MAEVAL);
+  const Good: any = (PlatformDeep as any) && (PlatformDeep as any).OS ? PlatformDeep : (PlatformDeep as any) && (PlatformDeep as any).default;
+  __pfix.deep = String(Good && Good.OS);
+  __pfix.top0 = String((Platform as any).OS);
+  const d = (Platform as any) && Object.getOwnPropertyDescriptor(Platform, 'OS');
+  __pfix.cfg = String(d && d.configurable);
+  __pfix.get = String(!!(d && d.get));
+  if ((Platform as any).OS !== 'ios') {
+    try { Object.defineProperty(Platform, 'OS', { value: 'ios', configurable: true, writable: true, enumerable: true }); __pfix.r = 'def'; }
+    catch (e) { try { (Platform as any).OS = 'ios'; __pfix.r = 'set'; } catch (e2) { __pfix.r = 'fail'; } }
+  } else { __pfix.r = 'already'; }
+  __pfix.after = String((Platform as any).OS);
+}
+
+// Expo Router builds its navigation tree from the route files; require.context
+// enumerates them (the mechanism Metro uses, made explicit for rspack).
+const ctx = (require as any).context('./app', true, /^\\.\\/.*\\.(tsx|ts|jsx|js)$/);
+
+export default function MirrorPrototype() {
+  // The react-native instance bound at RENDER differs from eval-time (MF swaps it);
+  // this one has Platform.OS=null. Force it here, in the render path expo-router uses.
+  if ((Platform as any).OS !== 'ios') {
+    try { Object.defineProperty(Platform, 'OS', { value: 'ios', configurable: true, writable: true, enumerable: true }); }
+    catch (e) { try { (Platform as any).OS = 'ios'; } catch (e2) {} }
+  }
+  let keys = [];
+  try { keys = ctx.keys(); } catch (e) { keys = ['ERR:' + String(e)]; }
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ position: 'absolute', top: 90, left: 8, right: 8, zIndex: 99999, backgroundColor: '#ffecec', padding: 6 }}>
+        <Text style={{ fontSize: 12, color: '#a00', fontWeight: '700' }}>
+          PROTO · top={String(Platform.OS)} · deepNow={String((PlatformDeep as any) && (PlatformDeep as any).OS)} · routes={keys.length}
+        </Text>
+        <Text style={{ fontSize: 8, color: '#a00' }}>{JSON.stringify(__pfix)}</Text>
+        <Text style={{ fontSize: 9, color: '#a00' }}>{keys.slice(0, 8).join('  ')}</Text>
+      </View>
+      <ExpoRoot context={ctx} />
+    </View>
+  );
+}
+`;
+
+const buildEntry = (scope) => `import { AppRegistry } from 'react-native';
+import App from './mirror-app';
+AppRegistry.registerComponent(${JSON.stringify(scope)}, () => App);
+`;
+
+const RN_PLATFORM_LOADER_PATH = path.join(__dirname, "rn-platform-loader.js");
+const rspackConfig = (scope) => `import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+import * as Repack from '@callstack/repack';
+import { ExpoModulesPlugin } from '@callstack/repack-plugin-expo-modules';
+import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
+import { DefinePlugin, NormalModuleReplacementPlugin } from '@rspack/core';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const PUBLIC_PATH = process.env.PUBLIC_PATH || 'http://localhost:9000/';
+// RN 0.85 "exports" route .../Platform to a compat shim that self-resolves
+// circularly → Platform.OS is null. Alias it straight to Platform.ios.js.
+const RN_DIR = path.dirname(require.resolve('react-native/package.json'));
+const PLATFORM_IOS = path.join(RN_DIR, 'Libraries/Utilities/Platform.ios.js');
+// Native libs (+ their deep-import path) must be single instances consumed from
+// the host, or their native views register twice (RCTFatal). singleton, non-eager.
+// The prototype consumes ONE instance of every shared-runtime lib from the host.
+const RUNTIME_DEPS = ${JSON.stringify(runtimeSharedDeps())};
+const nativeShared = (eager) => Object.fromEntries(RUNTIME_DEPS.flatMap((n) => [[n, { singleton: true, eager }], [n + '/', { singleton: true, eager }]]));
+
+// Module Federation REMOTE: one prototype, one container exposing ./App.
+// react/react-native are shared singletons provided by the Mirror host.
+export default Repack.defineRspackConfig({
+  context: __dirname,
+  entry: './index.js',
+  output: { path: path.join(__dirname, 'dist'), publicPath: PUBLIC_PATH },
+  resolve: {
+    ...Repack.getResolveOptions('ios'),
+    alias: {
+      'react-native/Libraries/Utilities/Platform$': PLATFORM_IOS,
+      [path.join(RN_DIR, 'Libraries/Utilities/Platform.js')]: PLATFORM_IOS,
+      'react-native-platform-fixed': path.join(__dirname, '__platform-fixed.js'),
+    },
+  },
+  module: {
+    rules: [
+      // PRE-loader: rewrite \`import { Platform } from 'react-native'\` → deep import
+      // (Platform.ios.js) before swc, so the MF-null top-level Platform is bypassed.
+      { test: /\\.[cm]?[jt]sx?$/, enforce: 'pre', use: [{ loader: ${JSON.stringify(RN_PLATFORM_LOADER_PATH)} }] },
+      { test: /\\.[cm]?[jt]sx?$/, type: 'javascript/auto', use: { loader: '@callstack/repack/babel-swc-loader', parallel: true, options: {} } },
+      ...Repack.getAssetTransformRules(),
+    ],
+  },
+  plugins: [
+    new Repack.RepackPlugin(),
+    // RN 0.85's Platform compat-shim self-resolves circularly under rspack → OS is
+    // null → expo-router/React Navigation render blank. An \`alias\` can't reach the
+    // INTERNAL relative require react-native/index.js does (\`./Libraries/Utilities/
+    // Platform\`), so redirect those requests straight to Platform.ios.js (OS:'ios'
+    // is a static literal there, so it survives MF double-evaluation). Mirrors the
+    // host's fix exactly — the container needs it too since it builds its own copy.
+    new NormalModuleReplacementPlugin(/^\\.\\/Libraries\\/Utilities\\/Platform$/, PLATFORM_IOS),
+    new NormalModuleReplacementPlugin(/^\\.\\/Platform$/, (r) => {
+      const ctx = (r.context || '').split(path.sep).join('/');
+      if (ctx.endsWith('/react-native/Libraries/Utilities')) r.request = PLATFORM_IOS;
+    }),
+    // Inject the env the expo-router babel plugin normally sets (our swc build
+    // skips it). EXPO_ROUTER_APP_ROOT makes expo-router's internal _ctx resolve
+    // to the same routes; without it the store sees no routes and renders blank.
+    new DefinePlugin({
+      'process.env.EXPO_ROUTER_APP_ROOT': JSON.stringify(path.join(__dirname, 'app')),
+      'process.env.EXPO_ROUTER_IMPORT_MODE': JSON.stringify('sync'),
+      'process.env.EXPO_OS': JSON.stringify('ios'),
+    }),
+    new ExpoModulesPlugin(),
+    new ReanimatedPlugin(),
+    // reactNativeDeepImports OFF: when ON, MF routes react-native/Libraries/*
+    // (incl. Platform) through the shared scope, which lands on the circular shim
+    // (OS=null). OFF lets the NormalModuleReplacement above resolve Platform to
+    // Platform.ios.js locally. react-native TOP-LEVEL stays a shared singleton.
+    new Repack.plugins.ModuleFederationPluginV2({
+      name: ${JSON.stringify(scope)},
+      reactNativeDeepImports: false,
+      filename: ${JSON.stringify(scope + ".container.js.bundle")},
+      exposes: { './App': './mirror-app.tsx' },
+      shared: {
+        react: Repack.Federated.SHARED_REACT,
+        'react-native': Repack.Federated.SHARED_REACT_NATIVE,
+        // Explicit SINGLETON share of the deep Platform module → collapses the
+        // multiple instances (the proven paradox: two identical imports give
+        // different OS) to ONE, pinned via resolve.alias to Platform.ios.js (OS:'ios').
+        'react-native/Libraries/Utilities/Platform': { singleton: true, eager: false, requiredVersion: false },
+        ...nativeShared(false),
+      },
+    }),
+  ],
+});
+`;
+
+// The local module the Platform pre-loader rewrites imports to. It imports the deep
+// Platform (which MF may hand a null-OS instance) and FORCES OS:'ios' on a copy.
+// Being a plain local module (not react-native), it dedupes to ONE instance — so
+// every consumer (app + expo-router + @react-navigation) gets a single, stable
+// Platform with OS:'ios'. select() is preserved/recreated (React Navigation needs it).
+const PLATFORM_FIXED = `import P from 'react-native/Libraries/Utilities/Platform';
+var Platform = P;
+if (!P || P.OS !== 'ios') {
+  Platform = {};
+  if (P) { for (var k in P) { try { Platform[k] = P[k]; } catch (e) {} } }
+  Platform.OS = 'ios';
+  if (typeof Platform.select !== 'function') {
+    Platform.select = function (o) { return o && (o.ios !== undefined ? o.ios : (o.native !== undefined ? o.native : o.default)); };
+  }
+}
+export default Platform;
+`;
+const BABEL_CONFIG = `module.exports = { presets: ['babel-preset-expo'] };\n`;
+const RN_CONFIG = `module.exports = { commands: require('@callstack/repack/commands/rspack') };\n`;
+
+function stageFederation({ root, stage, scope, ad }) {
+  // 1. author's routes → stage/app  (normalize src/app | app → app)
+  fs.cpSync(ad, path.join(stage, "app"), { recursive: true });
+  const assets = path.join(root, "assets");
+  if (fs.existsSync(assets)) fs.cpSync(assets, path.join(stage, "assets"), { recursive: true });
+
+  // 2. generated federation machinery
+  fs.writeFileSync(path.join(stage, "mirror-app.tsx"), MIRROR_ENTRY);
+  fs.writeFileSync(path.join(stage, "index.js"), buildEntry(scope));
+  fs.writeFileSync(path.join(stage, "rspack.config.mjs"), rspackConfig(scope));
+  fs.writeFileSync(path.join(stage, "babel.config.js"), BABEL_CONFIG);
+  fs.writeFileSync(path.join(stage, "__platform-fixed.js"), PLATFORM_FIXED);
+  fs.writeFileSync(path.join(stage, "react-native.config.js"), RN_CONFIG);
+
+  // 3. package.json from the shared runtime (versions match the symlinked modules)
+  const runtimePkg = JSON.parse(fs.readFileSync(path.join(runtimeDir(), "package.json"), "utf8"));
+  runtimePkg.name = scope;
+  runtimePkg.private = true;
+  fs.writeFileSync(path.join(stage, "package.json"), JSON.stringify(runtimePkg, null, 2) + "\n");
+  for (const f of ["tsconfig.json", "app.json", "expo-env.d.ts"]) {
+    const src = path.join(root, f);
+    if (fs.existsSync(src)) fs.cpSync(src, path.join(stage, f));
+  }
+
+  // 4. node_modules → shared runtime (app deps + Re.Pack toolchain live there)
+  const target = fs.realpathSync(path.join(runtimeDir(), "node_modules"));
+  const link = path.join(stage, "node_modules");
+  try { fs.unlinkSync(link); } catch {}
+  fs.symlinkSync(target, link, process.platform === "win32" ? "junction" : "dir");
+}
+
+function buildContainer({ stage, slug }) {
+  const publicPath = `${PUBLIC_BASE}/p/${slug}/`;
+  run("npx", ["react-native", "bundle", "--platform", "ios", "--entry-file", "index.js",
+    "--bundle-output", "dist/index.bundle", "--assets-dest", "dist", "--dev", "false"],
+    { cwd: stage, env: { ...process.env, PUBLIC_PATH: publicPath } });
+  return path.join(stage, "dist");
+}
+
+// ---- upload + registry ------------------------------------------------------
+
+const contentType = (f) =>
+  f.endsWith(".json") ? "application/json"
+    : f.endsWith(".bundle") || f.endsWith(".js") ? "application/javascript"
+    : f.endsWith(".png") ? "image/png"
+    : f.endsWith(".jpg") || f.endsWith(".jpeg") ? "image/jpeg"
+    : f.endsWith(".ttf") ? "font/ttf"
+    : f.endsWith(".otf") ? "font/otf"
+    : "application/octet-stream";
+
+// Upload the whole dist tree under p/<slug>/, skipping dev-only artifacts.
+async function uploadDist(distDir, slug) {
+  const skip = (rel) => rel.endsWith(".map") || rel === "index.bundle" || rel.endsWith("mf-stats.json");
+  const files = [];
+  (function walk(dir, rel) {
+    for (const name of fs.readdirSync(dir)) {
+      const abs = path.join(dir, name);
+      const r = rel ? `${rel}/${name}` : name;
+      if (fs.statSync(abs).isDirectory()) walk(abs, r);
+      else if (!skip(r)) files.push(r);
+    }
+  })(distDir, "");
+  for (const rel of files) {
+    await _s3Put(`p/${slug}/${rel}`, fs.readFileSync(path.join(distDir, rel)), contentType(rel));
+    log(c.dim(`    ↑ p/${slug}/${rel}`));
+  }
+  return files.length;
+}
+
+async function readIndex() {
+  try {
+    const res = await fetch(`${PUBLIC_BASE}/index.json?t=${Date.now()}`);
+    if (!res.ok) return { schema: "mirror-mf-1", prototypes: [] };
+    const data = await res.json();
+    if (Array.isArray(data)) return { schema: "mirror-mf-1", prototypes: data };
+    return { schema: data.schema || "mirror-mf-1", prototypes: Array.isArray(data.prototypes) ? data.prototypes : [] };
+  } catch {
+    return { schema: "mirror-mf-1", prototypes: [] };
+  }
+}
+
+async function upsertIndex(entry) {
+  const index = await readIndex();
+  index.prototypes = index.prototypes.filter((e) => e.id !== entry.id);
+  index.prototypes.unshift(entry); // newest first
+  await _s3Put("index.json", JSON.stringify(index, null, 2), "application/json");
+}
+
+// ---- command ----------------------------------------------------------------
+
+async function cmdPush(args) {
+  const root = process.cwd();
+  const dry = has(args, "--dry-run");
+  const buildOnly = has(args, "--build-only"); // build + keep stage, no upload (for local testing)
+
+  const pkgPath = path.join(root, "package.json");
+  if (!fs.existsSync(pkgPath)) throw new Error("no package.json here — run `calo-design push` from inside a prototype folder.");
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+  if (!(pkg.dependencies && pkg.dependencies.expo)) throw new Error("this folder isn't an Expo project.");
+  const ad = appDir(root);
+  if (!ad) throw new Error("no routes found (expected src/app or app).");
+
+  const slug = slugify(flag(args, "--slug", path.basename(root)));
+  const scope = scopeOf(slug);
+  const title = flag(args, "--title", titleize(pkg.name || slug));
+  const owner = flag(args, "--owner", gitName() || os.userInfo().username || "");
+  const note = flag(args, "--note", "");
+  const screenshot = findScreenshot(root, flag(args, "--screenshot", ""));
+
+  log(c.b(`\n[push] ${title}`) + c.dim(`  (slug: ${slug}, scope: ${scope})`));
+
+  const stage = fs.mkdtempSync(path.join(os.tmpdir(), `calo-fed-${slug}-`));
+  let keepStage = buildOnly;
+  try {
+    stageFederation({ root, stage, scope, ad });
+    log(c.dim(`  staged → ${stage}`));
+
+    if (dry) {
+      keepStage = true;
+      ok(`dry-run — staged a federation build at:\n    ${stage}`);
+      log(c.dim(`  would build container ${scope}.container.js.bundle and upload to ${PUBLIC_BASE}/p/${slug}/`));
+      return;
+    }
+
+    log(c.dim("  building Module Federation container…"));
+    const distDir = buildContainer({ stage, slug });
+    const container = `${scope}.container.js.bundle`;
+    if (!fs.existsSync(path.join(distDir, container))) throw new Error(`build did not emit ${container}`);
+    ok(`built ${container}`);
+
+    if (buildOnly) {
+      ok(`build-only — container + chunks in:\n    ${distDir}`);
+      return;
+    }
+
+    const n = await uploadDist(distDir, slug);
+    ok(`uploaded ${n} files → ${PUBLIC_BASE}/p/${slug}/`);
+
+    const screenshotUrl = screenshot
+      ? (await _s3Put(`screenshots/${slug}.png`, fs.readFileSync(screenshot), "image/png"), `${PUBLIC_BASE}/screenshots/${slug}.png`)
+      : undefined;
+
+    await upsertIndex({
+      id: slug, name: title, owner, note: note || undefined,
+      scope, entry: `${PUBLIC_BASE}/p/${slug}/${container}`,
+      screenshotUrl, updatedAt: new Date().toISOString(),
+    });
+    ok("registry updated");
+    log(c.b("\n✨ Live in the Mirror.") + " Open Calo Mirror and pull to refresh.");
+  } finally {
+    if (!keepStage) fs.rmSync(stage, { recursive: true, force: true });
+    else log(c.dim(`  (kept stage: ${stage})`));
+  }
+}
+
+module.exports = { cmdPush, _scopeOf: scopeOf, _stageFederation: stageFederation };