expo-desktop 0.1.0

package/LICENCE.txt

@@ -0,0 +1,18 @@
+Copyright 2026 Jamie Birch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "expo-desktop",
+  "version": "0.1.0",
+  "description": "Best-effort desktop support for Expo",
+  "keywords": [
+    "android",
+    "expo",
+    "ios",
+    "macos",
+    "react native",
+    "react native desktop",
+    "windows"
+  ],
+  "homepage": "https://github.com/shirakaba/expo-desktop/tree/main/packages/expo-desktop",
+  "bugs": {
+    "url": "https://github.com/shirakaba/expo-desktop/issues"
+  },
+  "license": "MIT",
+  "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"
+  },
+  "bin": {
+    "expo-desktop": "src/cli.ts"
+  },
+  "files": [
+    "src",
+    "!src/fixtures",
+    "!src/**/*.test.ts"
+  ],
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "generate-config": "node scripts/generate-config.ts",
+    "schema": "node scripts/update-schema.ts",
+    "start": "node src/cli.ts",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.2.0",
+    "arktype": "^2.2.0",
+    "citty": "^0.2.2",
+    "kleur": "^4.1.5",
+    "toml": "^4.1.1"
+  },
+  "devDependencies": {
+    "@tsconfig/node24": "catalog:base",
+    "@types/bun": "^1.3.13",
+    "@types/node": "catalog:base",
+    "@typescript/native-preview": "catalog:base"
+  },
+  "lint-staged": {
+    "scripts/update-schema.ts": [
+      "node --run schema",
+      "oxfmt"
+    ],
+    "src/app-config.ts": [
+      "node --run schema",
+      "oxfmt"
+    ]
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  }
+}

package/src/app-config.ts

@@ -0,0 +1,114 @@
+import { type } from "arktype";
+
+export const SemverMajorMinorOnly = type("/^(\\d+)\\.(\\d+)$/");
+export const Dns = type("/^[a-zA-Z][a-zA-Z0-9]*(?:\\.[a-zA-Z][a-zA-Z0-9]*)*$/");
+export const UnderscoredDns = type("/^[a-zA-Z]\\w*(?:\\.[a-zA-Z]\\w*)*$/");
+export const HyphenatedDns = type("/^[a-zA-Z][a-zA-Z0-9\\-]*(?:\\.[a-zA-Z][a-zA-Z0-9\\-]*)*$/");
+export const UnderscoredOrHyphenatedDns = type("/^[a-zA-Z][\\w\\-]*(?:\\.[a-zA-Z][\\w\\-]*)*$/");
+
+function defineAppConfig({ includeDescriptions }: { includeDescriptions: boolean }) {
+  const description = (text: string) => (includeDescriptions ? { description: text } : {});
+
+  return type({
+    ["react_native_version?"]: SemverMajorMinorOnly.configure(
+      description(
+        "The `{major}.{minor}` version of `react-native` to align to, e.g. '0.82'. Defaults to the highest mutually supported across both `react-native-macos` and `react-native-windows`.",
+      ),
+    ),
+    name: type({
+      alphanumeric: type("string.alphanumeric").configure(
+        description(
+          "A **filesafe name** for the app consisting only of alphanumeric characters (A-z, and 0-9), e.g. 'MyApp123'. Will be used mainly for file names, e.g. 'MyApp123.xcodeproj'.",
+        ),
+      ),
+      display_name: type("string").configure(
+        description(
+          "The **display name** of your app, e.g. 'My App 123' or '俺のアプリ'. Accepts any string. Will be used as the app name on the iOS/Android home screen, in macOS Finder, and in Windows Explorer.",
+        ),
+      ),
+      reverse_dns: UnderscoredOrHyphenatedDns.configure(
+        description(
+          "The **reverse-Domain Name Specifier** for your app, e.g. 'com.example.my-app-123'. Accepts alphanumeric characters (A-z and 0-9), hyphens, and underscores. Will be used to fill in `android.package_namespace`, `android.application_id`, `windows.namespace`, `ios.bundle_identifier`, and `macos.bundle_identifier`. Hyphens and underscores will be sanitised as appropriate for these destinations, so don't worry which you use here.",
+        ),
+      ),
+    }).configure(description("Different formats of the app name for use in different contexts.")),
+    ["android?"]: type({
+      ["application_id?"]: UnderscoredDns.configure(
+        description(
+          "The **application ID** used on the Play Store, e.g. 'com.example.my_app_123'. Accepts only alphanumeric characters (A-z and 0-9), and underscores. Corresponds to `android.defaultConfig.applicationId` in `app/build.gradle`. Recommended to match `android.package_namespace`.",
+        ),
+      ),
+      ["package_namespace?"]: UnderscoredDns.configure(
+        description(
+          "The **package namespace**, e.g. 'com.example.my_app_123'. Accepts only alphanumeric characters (A-z and 0-9), and underscores. Corresponds to `android.namespace` in `app/build.gradle`. Recommended to match `android.application_id`.",
+        ),
+      ),
+      ["root_project_name?"]: type("string").configure(
+        description(
+          "The **display name** of your app, e.g. 'My App 123' or '俺のアプリ'. Accepts any string. Corresponds to `rootProject.name` in `settings.gradle`. Will be used as the app name on the Android home screen.",
+        ),
+      ),
+    }).configure(
+      description("Android-specific overrides for the default values (which are based on `name`)."),
+    ),
+    ["ios?"]: type({
+      ["bundle_display_name?"]: type("string").configure(
+        description(
+          "The **display name** of your app, e.g. 'My App 123' or '俺のアプリ'. Accepts any string. Corresponds to the `CFBundleDisplayName` key in the `Info.plist` file. Will be used as the app name on the iOS home screen.",
+        ),
+      ),
+      ["bundle_identifier?"]: HyphenatedDns.configure(
+        description(
+          "The **bundle identifier** of your app, e.g. 'com.example.my-app-123'. Accepts only alphanumeric characters (A-z and 0-9), and hyphens. Corresponds to the `PRODUCT_BUNDLE_IDENTIFIER` Xcode build variable, used to fill in the `CFBundleIdentifier` key in the `Info.plist` file.",
+        ),
+      ),
+    }).configure(
+      description("iOS-specific overrides for the default values (which are based on `name`)."),
+    ),
+    ["macos?"]: type({
+      ["bundle_display_name?"]: type("string").configure(
+        description(
+          "The **display name** of your app, e.g. 'My App 123' or '俺のアプリ'. Accepts any string. Corresponds to the `PRODUCT_BUNDLE_IDENTIFIER` Xcode build variable, used to fill in the `CFBundleDisplayName` key in the `Info.plist` file. Will be used as the app name in macOS Finder.",
+        ),
+      ),
+      ["bundle_identifier?"]: HyphenatedDns.configure(
+        description(
+          "The **bundle identifier** of your app, e.g. 'com.example.my-app-123'. Accepts only alphanumeric characters (A-z and 0-9), and hyphens. Corresponds to the `PRODUCT_BUNDLE_IDENTIFIER` Xcode build variable, used to fill in the `CFBundleIdentifier` key in the `Info.plist` file.",
+        ),
+      ),
+    }).configure(
+      description("macOS-specific overrides for the default values (which are based on `name`)."),
+    ),
+    ["windows?"]: type({
+      ["display_name?"]: type("string").configure(
+        description(
+          "The **display name** of your app, e.g. 'My App 123' or '俺のアプリ'. Accepts any string. Corresponds to the `ProjectName` value in the `.vcxproj` file. Will be used as the app name in Windows Explorer.",
+        ),
+      ),
+      ["namespace?"]: Dns.configure(
+        description(
+          "The WinRT and C++ **namespace**, e.g. 'com.example.myapp123'. Accepts only alphanumeric characters (A-z and 0-9). When used in C++, `.` characters are converted to `::`, e.g. 'com::example::myapp123'.",
+        ),
+      ),
+      ["project_name?"]: type("string.alphanumeric").configure(
+        description(
+          "A **filesafe name** for the app consisting only of alphanumeric characters (A-z, and 0-9), e.g. 'MyApp123'. Will be used mainly for file names, e.g. 'MyApp123.vcxproj'.",
+        ),
+      ),
+    }).configure(
+      description("Windows-specific overrides for the default values (which are based on `name`)."),
+    ),
+  });
+}
+
+export const PartialAppConfig = defineAppConfig({ includeDescriptions: false });
+
+export const PartialAppConfigForJsonSchema = defineAppConfig({ includeDescriptions: true });
+
+const RequiredTopLevelAppConfig = type.keywords.Required(PartialAppConfig);
+export const AppConfig = type.merge(RequiredTopLevelAppConfig, {
+  android: RequiredTopLevelAppConfig.get("android").required(),
+  ios: RequiredTopLevelAppConfig.get("ios").required(),
+  macos: RequiredTopLevelAppConfig.get("macos").required(),
+  windows: RequiredTopLevelAppConfig.get("windows").required(),
+});

package/src/cli.ts

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+
+import { defineCommand, runMain } from "citty";
+import { default as kleur } from "kleur";
+import { grey } from "kleur/colors";
+
+import packageJson from "../package.json" with { type: "json" };
+
+const main = defineCommand({
+  meta: {
+    name: "expo-desktop",
+    version: packageJson.version,
+    description: "Best-effort desktop support for Expo",
+  },
+  subCommands: {
+    "create-app": defineCommand({
+      meta: { name: "create-app", description: "Create a new Expo Desktop project" },
+      args: {
+        alphanumeric: {
+          type: "string",
+          description: `The ${kleur.bold("filesafe name")} for the app in alphanumeric format ${grey("(Example: 'MyApp123')")}`,
+          valueHint: "name",
+        },
+        "display-name": {
+          type: "string",
+          description: `The ${kleur.bold("display name")} for the app ${grey("(Examples: 'My App 123', '俺のアプリ')")}`,
+          valueHint: "name",
+        },
+        rdns: {
+          type: "string",
+          description: `The ${kleur.bold("reverse DNS")} for the app ${grey("(Example: 'com.example.my-app-123')")}`,
+          valueHint: "name",
+        },
+      },
+      async run({ args }) {
+        (await import("./commands/new-expo-desktop-project.ts")).newExpoDesktopProject(args);
+      },
+    }),
+  },
+});
+
+await runMain(main);

package/src/commands/add-expo-desktop-to-existing-expo-app.ts

@@ -0,0 +1,6 @@
+import { exit } from "node:process";
+
+export function addExpoDesktopToExistingExpoApp() {
+  console.log("Not yet implemented.");
+  return exit(1);
+}

package/src/commands/new-expo-desktop-project.ts

@@ -0,0 +1,69 @@
+import { isCancel, text, log } from "@clack/prompts";
+import { default as kleur } from "kleur";
+import { grey } from "kleur/colors";
+
+export async function newExpoDesktopProject(args: {
+  alphanumeric: string | undefined;
+  "display-name": string | undefined;
+  rdns: string | undefined;
+}) {
+  log.info(
+    `🏎️  Running ${kleur.yellow("expo-desktop create-app")}. Let's create a new Expo Desktop app in a subfolder!`,
+    { withGuide: false },
+  );
+
+  log.info(kleur.bold(kleur.inverse("  Configuring app name  ")), { withGuide: false });
+
+  let alphanumeric: Arg = args.alphanumeric;
+  if (!alphanumeric) {
+    alphanumeric = await text({
+      message: `Please provide the ${kleur.bold("filesafe name")} for the app in ${kleur.bold("alphanumeric")} format. ${grey("(Example: 'MyApp123')")}`,
+      placeholder: "MyApp",
+      initialValue: "MyApp",
+      validate(value) {
+        if (!value?.length) {
+          return "Must be at least one character long.";
+        }
+      },
+    });
+  }
+  if (isCancel(alphanumeric)) {
+    process.exit(0);
+  }
+
+  let displayName: Arg = args["display-name"];
+  if (!displayName) {
+    displayName = await text({
+      message: `Please provide the ${kleur.bold("display name")} for the app. ${grey("(Examples: 'My App 123', '俺のアプリ')")}`,
+      placeholder: "My App",
+      initialValue: "My App",
+      validate(value) {
+        if (!value?.length) {
+          return "Must be at least one character long.";
+        }
+      },
+    });
+  }
+  if (isCancel(displayName)) {
+    process.exit(0);
+  }
+
+  let rdns: Arg = args.rdns;
+  if (!rdns) {
+    rdns = await text({
+      message: `Please provide the ${kleur.bold("reverse DNS")} for the app. ${grey("(Example: 'com.example.my-app-123')")}`,
+      placeholder: "com.example.my-app",
+      initialValue: "com.example.my-app",
+      validate(value) {
+        if (!value?.length) {
+          return "Must be at least one character long.";
+        }
+      },
+    });
+  }
+  if (isCancel(rdns)) {
+    process.exit(0);
+  }
+}
+
+type Arg = string | symbol | undefined;

package/src/define-config.ts

@@ -0,0 +1,67 @@
+import { ArkErrors, type } from "arktype";
+import { green, grey, yellow } from "kleur/colors";
+
+import { AppConfig, PartialAppConfig } from "./app-config.ts";
+
+export function defineAppConfig(config: typeof PartialAppConfig.infer) {
+  const partial = PartialAppConfig(config);
+
+  if (partial instanceof type.errors) {
+    // console.log(`Invalid config:\n${makePrettySummary(partial).join("\n")}`);
+    throw new Error(`Invalid config:\n${makePrettySummary(partial).join("\n")}`);
+  }
+
+  const {
+    name: { alphanumeric, display_name, reverse_dns },
+  } = partial;
+
+  const full = AppConfig({
+    ...partial,
+    // TODO: Dynamically grab latest minor version
+    react_native_version: "0.82",
+    android: {
+      application_id: reverse_dns.replaceAll("-", "_"),
+      package_namespace: reverse_dns.replaceAll("-", "_"),
+      root_project_name: display_name,
+      ...partial.android,
+    },
+    ios: {
+      bundle_display_name: display_name,
+      bundle_identifier: reverse_dns.replaceAll("_", "-"),
+      ...partial.ios,
+    },
+    macos: {
+      bundle_display_name: display_name,
+      bundle_identifier: reverse_dns.replaceAll("_", "-"),
+      ...partial.macos,
+    },
+    windows: {
+      display_name: display_name,
+      namespace: reverse_dns.replaceAll(/[\-_]/g, ""),
+      project_name: alphanumeric,
+      ...partial.windows,
+    },
+  } satisfies typeof PartialAppConfig.infer);
+
+  if (full instanceof type.errors) {
+    throw new Error(`Invalid config:\n${makePrettySummary(full).join("\n")}`);
+  }
+
+  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;
+}