expo-desktop 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-desktop",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Best-effort desktop support for Expo",
   "keywords": [
     "android",
@@ -19,7 +19,8 @@
   "author": "Jamie Birch <14055146+shirakaba@users.noreply.github.com> (https://github.com/shirakaba)",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/shirakaba/expo-desktop.git"
+    "url": "https://github.com/shirakaba/expo-desktop.git",
+    "directory": "packages/expo-desktop"
   },
   "bin": {
     "expo-desktop": "src/cli.ts"
@@ -43,15 +44,22 @@
     "@clack/prompts": "^1.2.0",
     "arktype": "^2.2.0",
     "citty": "^0.2.2",
+    "expo-desktop-prebuild-config": "workspace:",
     "kleur": "^4.1.5",
     "toml": "^4.1.1"
   },
   "devDependencies": {
+    "@expo/config": "catalog:react-native-81",
+    "@expo/config-plugins": "catalog:react-native-81",
     "@tsconfig/node24": "catalog:base",
     "@types/bun": "^1.3.13",
     "@types/node": "catalog:base",
     "@typescript/native-preview": "catalog:base"
   },
+  "peerDependencies": {
+    "@expo/config": ">=12.0.0",
+    "@expo/config-plugins": ">=54.0.0"
+  },
   "lint-staged": {
     "scripts/update-schema.ts": [
       "node --run schema",

package/src/cli.ts

@@ -2,9 +2,10 @@
 
 import { defineCommand, runMain } from "citty";
 import { default as kleur } from "kleur";
-import { grey } from "kleur/colors";
+import { dim, grey } from "kleur/colors";
 
 import packageJson from "../package.json" with { type: "json" };
+import { prebuild } from "./prebuild/command.ts";
 
 const main = defineCommand({
   meta: {
@@ -16,7 +17,7 @@ const main = defineCommand({
     "create-app": defineCommand({
       meta: { name: "create-app", description: "Create a new Expo Desktop project" },
       args: {
-        alphanumeric: {
+        "filesafe-name": {
           type: "string",
           description: `The ${kleur.bold("filesafe name")} for the app in alphanumeric format ${grey("(Example: 'MyApp123')")}`,
           valueHint: "name",
@@ -31,9 +32,58 @@ const main = defineCommand({
           description: `The ${kleur.bold("reverse DNS")} for the app ${grey("(Example: 'com.example.my-app-123')")}`,
           valueHint: "name",
         },
+        version: {
+          type: "string",
+          description: `The ${kleur.bold("minor version")} of React Native to align on ${grey("(Examples: '0.80', 'latest')")}`,
+          valueHint: "version",
+        },
+      },
+      async run({ args }) {
+        (await import("./create-app/command.ts")).newExpoDesktopProject(args);
+      },
+    }),
+    prebuild: defineCommand({
+      meta: { name: "prebuild", description: "Prebuild an Expo Desktop project" },
+      args: {
+        clean: {
+          type: "boolean",
+          description: "Delete the native folders and regenerate them before applying changes",
+        },
+        "no-install": {
+          type: "boolean",
+          description: "Skip installing npm packages and CocoaPods",
+        },
+        npm: {
+          type: "boolean",
+          description: `Use npm to install dependencies. ${dim("(Default when package-lock.json exists)")}`,
+        },
+        yarn: {
+          type: "boolean",
+          description: `Use yarn to install dependencies. ${dim("(Default when yarn.lock exists)")}`,
+        },
+        bun: {
+          type: "boolean",
+          description: `Use bun to install dependencies. ${dim("(Default when bun.lock exists)")}`,
+        },
+        pnpm: {
+          type: "boolean",
+          description: `Use pnpm to install dependencies. ${dim("(Default when pnpm-lock.yaml exists)")}`,
+        },
+        template: {
+          type: "string",
+          description:
+            "Project template to clone from. File path pointing to a local tar file, npm package or a github repo",
+          valueHint: "template",
+        },
+        platform: {
+          type: "string",
+          description: `Platforms to sync: macos, windows, desktop ${dim("(Default: desktop)")}`,
+          valueHint: "desktop|macos|windows",
+          alias: "p",
+        },
       },
       async run({ args }) {
-        (await import("./commands/new-expo-desktop-project.ts")).newExpoDesktopProject(args);
+        (await import("./prebuild/command.ts")).prebuild(args);
       },
     }),
   },

package/src/common/app-json.ts

@@ -0,0 +1,35 @@
+import { type } from "arktype";
+
+export const ExpoConfig = type({
+  "name?": "string",
+  "slug?": "string",
+  "platforms?": type('"android" | "ios" | "web" | "macos" | "windows"').array(),
+  "version?": "string",
+  "ios?": type({
+    "bundleIdentifier?": "string",
+  }),
+  "macos?": type({
+    "bundleIdentifier?": "string",
+  }),
+  // "windows?": type({
+  //   "projectName?": "string",
+  //   "displayName?": "string",
+  //   "namespace?": "string",
+  // }),
+  "android?": type({
+    "package?": "string",
+  }),
+  "plugins?": type(type(["string", "...", "unknown[]"]).or("string")).array(),
+});
+
+export const AppJson = type({
+  "expo?": ExpoConfig,
+});
+
+export const PackageJson = type({
+  "name?": "string",
+  "scripts?": "Record<string, string>",
+  "dependencies?": "Record<string, string>",
+  "devDependencies?": "Record<string, string>",
+  "peerDependencies?": "Record<string, string>",
+});

package/src/common/apply-config-plugins.ts

@@ -0,0 +1,76 @@
+import { createRequire } from "node:module";
+import * as path from "node:path";
+
+import { withInternal } from "./with-internal.ts";
+
+const require = createRequire(import.meta.url);
+const { getPrebuildConfigAsync } =
+  require("expo-desktop-prebuild-config") as typeof import("expo-desktop-prebuild-config");
+const { compileModsAsync } =
+  require("expo-desktop-config-plugins") as typeof import("expo-desktop-config-plugins");
+
+/**
+ * Applies config plugins.
+ * @see https://github.com/microsoft/react-native-test-app/blob/trunk/packages/app/scripts/config-plugins/apply.mjs
+ */
+export async function applyConfigPlugins(
+  options: PrebuildOptions,
+): Promise<Awaited<ReturnType<typeof compileModsAsync>> | undefined> {
+  const { projectRoot } = options;
+
+  // To avoid making expo-desktop depend on Expo SDK 54 when we might be running
+  // on an Expo 55 project, we import Expo deps from the project itself.
+  let expoConfigModule: typeof import("@expo/config");
+  try {
+    expoConfigModule = require(
+      path.dirname(require.resolve("@expo/config/package.json", { paths: [projectRoot] })),
+    );
+  } catch (cause) {
+    throw new Error(
+      `Error importing "@expo/config" relative to projectRoot "${projectRoot}". Make sure to install node modules before running any prebuilds, and make sure that the project depends on the package named "expo".`,
+      { cause },
+    );
+  }
+  const { getConfig } = expoConfigModule;
+
+  let expoConfigPluginsModule: typeof import("@expo/config-plugins");
+  try {
+    expoConfigPluginsModule = require(
+      path.dirname(require.resolve("@expo/config-plugins/package.json", { paths: [projectRoot] })),
+    );
+  } catch (cause) {
+    throw new Error(
+      `Error importing "@expo/config-plugins" relative to projectRoot "${projectRoot}". Make sure to install node modules before running any prebuilds, and make sure that the project depends on the package named "expo".`,
+      { cause },
+    );
+  }
+  const { withPlugins } = expoConfigPluginsModule;
+
+  // (1) Filter out platforms that aren't in the app.json.
+  // https://github.com/expo/expo/blob/8dd645080f52927e2a8bf406167da7241a1d46d8/packages/%40expo/cli/src/prebuild/prebuildAsync.ts#L74
+  let { exp: expoConfig } = getConfig(projectRoot);
+  const { platforms, plugins } = expoConfig;
+  if (platforms?.length) {
+    const finalPlatforms = options.platforms.filter((platform) => platforms.includes(platform));
+    if (finalPlatforms.length > 0) {
+      options.platforms = finalPlatforms;
+    } else {
+      const requestedPlatforms = options.platforms.join(", ");
+      console.warn(
+        `⚠️  Requested prebuild for "${requestedPlatforms}", but only "${platforms.join(", ")}" is present in app config ("expo.platforms" entry). Continuing with "${requestedPlatforms}".`,
+      );
+    }
+  }
+
+  const prebuildConfig = await getPrebuildConfigAsync(projectRoot, options);
+  expoConfig = prebuildConfig.exp;
+
+  return compileModsAsync(
+    withPlugins(withInternal(expoConfig, options), plugins as Array<string>),
+    options,
+  );
+}
+
+export type PrebuildOptions = {
+  projectRoot: string;
+} & Parameters<typeof getPrebuildConfigAsync>[1];

package/src/common/arktype.ts

@@ -0,0 +1,19 @@
+import type { ArkErrors } from "arktype";
+
+import { green, grey, yellow } from "kleur/colors";
+
+export function makePrettySummary({ byPath }: ArkErrors) {
+  const summary = new Array<string>();
+
+  for (const [path, error] of Object.entries(byPath)) {
+    const actualIndex = error.problem.lastIndexOf(" (was ");
+    const problem =
+      actualIndex === -1
+        ? error.problem
+        : `${error.problem.startsWith("must be matched by ") ? `must be matched by ${green(error.problem.slice("must be matched by ".length, actualIndex))}` : error.problem.slice(0, actualIndex)}${grey(error.problem.slice(actualIndex))}`;
+
+    summary.push(`${yellow(path)} ${problem}`);
+  }
+
+  return summary;
+}

package/src/common/child-process.ts

@@ -0,0 +1,55 @@
+import { log } from "@clack/prompts";
+import { spawn, type SpawnOptions } from "node:child_process";
+import { env } from "node:process";
+import readline from "node:readline";
+
+export async function promisifiedSpawn({
+  command,
+  args,
+  options = {},
+}: {
+  command: string;
+  args: Array<string>;
+  options?: SpawnOptions;
+}) {
+  const cp = spawn(command, args, { env, ...options });
+
+  const { stdout, stderr } = cp;
+  if (
+    stdout &&
+    (Array.isArray(options?.stdio) ? options?.stdio.at(1) : options?.stdio) !== "inherit"
+  ) {
+    readline
+      .createInterface({ input: stdout })
+      .on("line", (line) => log.message(line, { spacing: 0 }));
+  }
+  if (
+    stderr &&
+    (Array.isArray(options?.stdio) ? options?.stdio.at(2) : options?.stdio) !== "inherit"
+  ) {
+    readline
+      .createInterface({ input: stderr })
+      .on("line", (line) => log.message(line, { spacing: 0 }));
+  }
+
+  let cpError: Error | null = null;
+  cp.on("error", (error) => {
+    if (!cpError) {
+      cpError = error;
+    }
+  });
+
+  const { promise, resolve, reject } = Promise.withResolvers<void>();
+  cp.on("close", (code, signal) => {
+    if (cpError || code !== 0) {
+      reject(
+        new Error(`Exited with code ${code} (signal ${signal})`, cpError ? { cause: cpError } : {}),
+      );
+      return;
+    }
+
+    resolve();
+  });
+
+  return promise;
+}

package/src/common/clack.ts

@@ -0,0 +1,11 @@
+import { log, type LogMessageOptions } from "@clack/prompts";
+import kleur from "kleur";
+
+export function title(text: string, opts?: LogMessageOptions) {
+  const { spacing, ...rest } = opts ?? {};
+
+  log.info(kleur.bold(kleur.inverse(`  ${text}  `)), { withGuide: false, ...rest });
+  if (opts?.spacing) {
+    log.message("", { withGuide: false, spacing: Math.max(0, opts.spacing - 1) });
+  }
+}

package/src/{define-config.ts → common/define-config.ts}

@@ -1,7 +1,7 @@
-import { ArkErrors, type } from "arktype";
-import { green, grey, yellow } from "kleur/colors";
+import { type } from "arktype";
 
 import { AppConfig, PartialAppConfig } from "./app-config.ts";
+import { makePrettySummary } from "./arktype.ts";
 
 export function defineAppConfig(config: typeof PartialAppConfig.infer) {
   const partial = PartialAppConfig(config);
@@ -49,19 +49,3 @@ export function defineAppConfig(config: typeof PartialAppConfig.infer) {
 
   return full;
 }
-
-function makePrettySummary({ byPath }: ArkErrors) {
-  const summary = new Array<string>();
-
-  for (const [path, error] of Object.entries(byPath)) {
-    const actualIndex = error.problem.lastIndexOf(" (was ");
-    const problem =
-      actualIndex === -1
-        ? error.problem
-        : `${error.problem.startsWith("must be matched by ") ? `must be matched by ${green(error.problem.slice("must be matched by ".length, actualIndex))}` : error.problem.slice(0, actualIndex)}${grey(error.problem.slice(actualIndex))}`;
-
-    summary.push(`${yellow(path)} ${problem}`);
-  }
-
-  return summary;
-}

package/src/common/npm.ts

@@ -0,0 +1,199 @@
+import { type } from "arktype";
+
+import { makePrettySummary } from "./arktype.ts";
+
+export async function getPackageInfo(packageName: string) {
+  const res = await fetch(`https://registry.npmjs.org/${packageName}`);
+  const data = await res.json();
+
+  const response = NpmResponse(data);
+  if (response instanceof type.errors) {
+    // console.log(`Invalid config:\n${makePrettySummary(partial).join("\n")}`);
+    throw new Error(`Invalid config:\n${makePrettySummary(response).join("\n")}`);
+  }
+
+  return response;
+}
+
+export function filterVersions({
+  npmInfo,
+  distTag,
+  fromMajor,
+  fromMinor,
+  fromPatch,
+  includePrereleases,
+}: {
+  npmInfo: NpmResponseType;
+  distTag?: string;
+  fromMajor?: number;
+  fromMinor?: number;
+  fromPatch?: number;
+  includePrereleases?: boolean;
+}) {
+  const map: VersionsMap = {};
+  const { "dist-tags": distTags, versions } = npmInfo;
+
+  if (distTag) {
+    const version = distTags[distTag];
+
+    const match = semverMatcher.exec(version);
+    if (match) {
+      const [fullMatch, major, minor, patch, prerelease, _buildmetadata] = match;
+      const majorInt = parseInt(major);
+      const minorInt = parseInt(minor);
+      const patchInt = parseInt(patch);
+
+      if (!map[majorInt][minorInt][patchInt]) {
+        map[majorInt][minorInt][patchInt] = {
+          prereleases: [],
+        };
+      }
+
+      if (!!prerelease) {
+        map[majorInt][minorInt][patchInt].prereleases.push(fullMatch);
+      } else {
+        map[majorInt][minorInt][patchInt].release = fullMatch;
+      }
+    }
+
+    return { filtered: [version], map };
+  }
+
+  const filtered = new Array<string>();
+  for (const version of versions) {
+    const match = semverMatcher.exec(version);
+    if (!match) {
+      continue;
+    }
+    const [fullMatch, major, minor, patch, prerelease, _buildmetadata] = match;
+    const majorInt = parseInt(major);
+    const minorInt = parseInt(minor);
+    const patchInt = parseInt(patch);
+
+    if (typeof fromMajor === "number" && majorInt < fromMajor) {
+      continue;
+    }
+    if (typeof fromMinor === "number" && minorInt < fromMinor) {
+      continue;
+    }
+    if (typeof fromPatch === "number" && patchInt < fromPatch) {
+      continue;
+    }
+    if (!includePrereleases && !!prerelease) {
+      continue;
+    }
+    filtered.push(fullMatch);
+
+    if (!map[majorInt]) {
+      map[majorInt] = {};
+    }
+    if (!map[majorInt][minorInt]) {
+      map[majorInt][minorInt] = {};
+    }
+    if (!map[majorInt][minorInt][patchInt]) {
+      map[majorInt][minorInt][patchInt] = {
+        prereleases: [],
+      };
+    }
+
+    if (!!prerelease) {
+      map[majorInt][minorInt][patchInt].prereleases.push(fullMatch);
+    } else {
+      map[majorInt][minorInt][patchInt].release = fullMatch;
+    }
+  }
+
+  return { filtered, map };
+}
+
+type VersionsMap = {
+  [major: number]: {
+    [minor: number]: { [patch: number]: { release?: string; prereleases: Array<string> } };
+  };
+};
+type HighestStableMinorMap = {
+  [major: number]: {
+    [minor: number]: string;
+  };
+};
+
+export function getHighestStableMinors(map: VersionsMap) {
+  const minorMap: HighestStableMinorMap = {};
+
+  for (const major in map) {
+    const majorInt = parseInt(major);
+    if (!minorMap[majorInt]) {
+      minorMap[majorInt] = {};
+    }
+
+    for (const minor in map[major]) {
+      const minorInt = parseInt(minor);
+
+      for (const patch in map[major][minor]) {
+        const patchInt = parseInt(patch);
+        if (!map[major][minor][patch].release) {
+          continue;
+        }
+
+        const current = minorMap[majorInt][minorInt];
+        if (!current) {
+          minorMap[majorInt][minorInt] = map[major][minor][patch].release;
+          continue;
+        }
+
+        const currentMatch = semverMatcher.exec(current);
+        if (!currentMatch) {
+          continue;
+        }
+        const [, , , currentPatch] = currentMatch;
+
+        if (patchInt <= parseInt(currentPatch)) {
+          continue;
+        }
+
+        minorMap[majorInt][minorInt] = `${major}.${minor}.${patch}`;
+      }
+    }
+  }
+
+  return minorMap;
+}
+
+const NpmResponse = type({
+  name: "string",
+  "dist-tags": "Record<string, string.semver>",
+
+  versions: type("Record<string, Record<string, unknown>>").pipe((record) => Object.keys(record)),
+
+  // Other potentially useful fields that we'll avoid needlessly validating for
+  // now:
+  // time: "Record<string, string.date.iso>",
+});
+
+export type NpmResponseType = typeof NpmResponse.inferOut;
+
+/**
+ * Exposing the underlying pattern used by string.semver.
+ * @see https://semver.org/
+ */
+export const semverMatcher =
+  /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[A-Za-z-][\dA-Za-z-]*)(?:\.(?:0|[1-9]\d*|\d*[A-Za-z-][\dA-Za-z-]*))*))?(?:\+([\dA-Za-z-]+(?:\.[\dA-Za-z-]+)*))?$/;
+
+export function packageManagerExec(packageManager: "npm" | "bun" | "pnpm") {
+  const args = new Array<string>();
+  let command: string;
+  switch (packageManager) {
+    case "bun":
+      command = "bunx";
+      break;
+    case "npm":
+      command = "npm";
+      args.push("dlx");
+      break;
+    case "pnpm":
+      command = "pnpm";
+      args.push("dlx");
+  }
+
+  return { args, command };
+}

package/src/common/with-internal.ts

@@ -0,0 +1,19 @@
+import type { ConfigPlugin } from "@expo/config-plugins";
+
+import type { PrebuildOptions } from "./apply-config-plugins.ts";
+
+type Internals = Omit<PrebuildOptions, "appJsonPath">;
+
+/**
+ * @see https://github.com/microsoft/react-native-test-app/blob/0951cf5a3727c01d2ef25540eb796eb56b14ae04/packages/app/scripts/config-plugins/plugins/withInternal.mjs#L9
+ */
+export const withInternal: ConfigPlugin<Internals> = (config, internals) => {
+  // @ts-ignore TODO
+  config._internal = {
+    isDebug: false,
+    // @ts-ignore TODO
+    ...config._internal,
+    ...internals,
+  };
+  return config;
+};