expo-desktop 0.1.33 → 0.1.35

package/build/common/app-json.js

@@ -26,6 +26,7 @@ export const AppJson = type({
 export const PackageJson = type({
     "name?": "string",
     "scripts?": "Record<string, string>",
+    "expo?": "Record<string, unknown.any>",
     "dependencies?": "Record<string, string>",
     "devDependencies?": "Record<string, string>",
     "peerDependencies?": "Record<string, string>",

package/build/common/git.js

@@ -0,0 +1,43 @@
+import { spawn } from "node:child_process";
+import fs from "node:fs/promises";
+import path from "node:path";
+/** True when the project root has its own `.git` (from create-expo-app's init). */
+export async function hasProjectGitRepositoryAsync(projectPath) {
+    try {
+        await fs.lstat(path.join(projectPath, ".git"));
+        return true;
+    }
+    catch (error) {
+        if (error instanceof Error && "code" in error && error.code === "ENOENT") {
+            return false;
+        }
+        throw error;
+    }
+}
+/** `git diff --cached --quiet` exits 1 when there are staged changes. */
+export async function hasGitStagedChangesAsync(projectPath) {
+    try {
+        await runGitAsync(projectPath, ["diff", "--cached", "--quiet"]);
+        return false;
+    }
+    catch {
+        return true;
+    }
+}
+function runGitAsync(projectPath, args) {
+    return new Promise((resolve, reject) => {
+        const cp = spawn(`git ${args.join(" ")}`, {
+            cwd: projectPath,
+            shell: true,
+            stdio: "ignore",
+        });
+        cp.on("error", reject);
+        cp.on("close", (code) => {
+            if (code === 0) {
+                resolve();
+                return;
+            }
+            reject(new Error(`git ${args.join(" ")} exited with code ${code ?? "null"}`));
+        });
+    });
+}

package/build/common/npm.js

@@ -135,6 +135,9 @@ export function packageManagerExec(packageManager) {
             command = "npx";
             args.push("--yes");
             break;
+        case "yarn":
+            command = "yarn";
+            break;
         case "pnpm":
             command = "pnpm";
             args.push("exec");

package/build/create-app/command.js

@@ -51,6 +51,7 @@ export async function newExpoDesktopProject(args) {
             },
             { value: "bun", label: `Bun${platform === "darwin" ? " (recommended)" : ""}` },
             { value: "pnpm", label: `pnpm${platform === "win32" ? " (recommended)" : ""}` },
+            { value: "yarn", label: "yarn" },
         ],
         initialValue: platform === "darwin" ? "bun" : platform === "win32" ? "pnpm" : "npm",
     });

package/build/create-app/create-expo-desktop-app.js

@@ -11,6 +11,7 @@ import { applyConfigPlugins } from "../common/apply-config-plugins.js";
 import { makePrettySummary } from "../common/arktype.js";
 import { promisifiedSpawnTask, SPAWN_DEBUG_LOG_GLOB } from "../common/child-process.js";
 import { title } from "../common/clack.js";
+import { hasGitStagedChangesAsync, hasProjectGitRepositoryAsync } from "../common/git.js";
 import { packageManagerExec } from "../common/npm.js";
 import { preserveFile } from "../common/preserve-file.js";
 import { applySelectedTemplatesAsync } from "../common/template.js";
@@ -103,6 +104,11 @@ export async function createExpoDesktopApp({ localDev, name, packageManager, tem
     await improveMetroConfig({ projectPath });
     title("Adding Expo support to the Babel config…", { spacing: 1 });
     await writeBabelConfig({ projectPath });
+    title("Improving App.tsx…", { spacing: 1 });
+    await improveAppTsx({ projectPath });
+    title("Committing changes…", { spacing: 1 });
+    await commitChanges({ projectPath });
+    logProjectReady({ cdPath: name.filesafeName, packageManager });
 }
 async function getBundleEntryFileCandidates({ projectPath }) {
     try {
@@ -148,8 +154,13 @@ async function createExpoApp({ localDev, name, packageManager, versions, }) {
     // create-expo-app for non-interactive template selection; set `CI=true` in the
     // child env so git-init inside an existing repo is skipped too.
     const command = packageManager === "npm" ? "npx" : packageManager;
+    let packageManagerArgs = ["create", "expo-app@latest"];
+    if (packageManager === "npm")
+        packageManagerArgs = ["--yes", "create-expo-app@latest"];
+    if (packageManager === "yarn")
+        packageManagerArgs = ["create", "expo-app"];
     const args = [
-        ...(packageManager === "npm" ? ["--yes", "create-expo-app"] : ["create", "expo-app"]),
+        ...packageManagerArgs,
         name.filesafeName,
         "--yes",
         "--template",
@@ -322,13 +333,58 @@ async function updatePackageJson({ localDev, name, projectPath, task, versions,
         if (!packageJson.overrides) {
             packageJson.overrides = {};
         }
-        // react-native-macos and react-native-windows may declare conflicting peer
-        // dependency ranges to what the Expo template provides.
-        if (packageJson.dependencies.react) {
-            packageJson.overrides.react = packageJson.dependencies.react;
+        // The "react" version in expo-template-blank-typescript for SDK 54 is
+        // 19.1.0, but it needs to be 19.1.4 to satisfy react-native-macos and
+        // react-native-windows. We find that the React Native HelloWorld template
+        // is more reliable as a source of truth for the best "react" and
+        // "react-native" versions to satisfy them, but it's still a best of a bad
+        // job.
+        let facebookDeps;
+        try {
+            const packageJson = (await getReactNativePackageJson(versions.minor));
+            facebookDeps = {
+                react: packageJson.dependencies.react,
+                "react-native": packageJson.dependencies["react-native"],
+            };
+        }
+        catch (error) {
+            // It's totally possible to get rate-limited by the GitHub API, so we'll
+            // avoid failing the entire command just for a bad fetch here.
+            console.warn(`Unable to get the ideal dependency versions for "react" and "react-native" from the official React Native HelloWorld template, so will use the ones from the Expo template as-is.`, error);
+        }
+        if (facebookDeps) {
+            packageJson.dependencies.react = facebookDeps.react;
+            packageJson.overrides.react = facebookDeps.react;
+            packageJson.dependencies["react-native"] = facebookDeps["react-native"];
+            packageJson.overrides["react-native"] = facebookDeps["react-native"];
+        }
+        else {
+            // react-native-macos and react-native-windows may declare conflicting
+            // peer dependency ranges to what the Expo template provides.
+            if (packageJson.dependencies.react) {
+                packageJson.overrides.react = packageJson.dependencies.react;
+            }
+            if (packageJson.dependencies["react-native"]) {
+                packageJson.overrides["react-native"] = packageJson.dependencies["react-native"];
+            }
+        }
+        if (!packageJson.expo) {
+            packageJson.expo = {};
+        }
+        if (!packageJson.expo.install) {
+            packageJson.expo.install = {};
+        }
+        if (!packageJson.expo.install.exclude) {
+            packageJson.expo.install.exclude = [];
         }
-        if (packageJson.dependencies["react-native"]) {
-            packageJson.overrides["react-native"] = packageJson.dependencies["react-native"];
+        // Stop `expo start` erroneously warning about our overrides.
+        // - https://github.com/shirakaba/expo-desktop/issues/15
+        // - https://docs.expo.dev/versions/latest/config/package-json/#installexclude
+        if (!packageJson.expo.install.exclude.includes("react")) {
+            packageJson.expo.install.exclude.push("react");
+        }
+        if (!packageJson.expo.install.exclude.includes("react-native")) {
+            packageJson.expo.install.exclude.push("react-native");
         }
     }
     try {
@@ -340,6 +396,10 @@ async function updatePackageJson({ localDev, name, projectPath, task, versions,
     console.log(`${green("◆")}  Altered package.json.\n`);
     return { name: nameBefore };
 }
+async function getReactNativePackageJson(minor) {
+    const response = await fetch(`https://raw.githubusercontent.com/facebook/react-native/refs/heads/0.${minor}-stable/private/helloworld/package.json`);
+    return await response.json();
+}
 async function npmInstall({ asNewWorkspace, cwd, packageManager, }) {
     const command = packageManager;
     const args = ["install"];
@@ -585,6 +645,93 @@ module.exports = function (api) {
     }
     console.log(`\n${green("◆")}  Wrote babel.config.js.\n`);
 }
+/**
+ * Improve the App.tsx so that it's not white-on-white on macOS in dark mode.
+ * Here, we simply ensure that it's black-on-white in both light and dark modes.
+ *
+ * @see https://github.com/shirakaba/expo-desktop/pull/14#issuecomment-4614018796
+ * @see https://github.com/expo/expo/blob/sdk-54/templates/expo-template-blank-typescript/App.tsx
+ */
+async function improveAppTsx({ projectPath }) {
+    const metroConfigPath = path.resolve(projectPath, "App.tsx");
+    console.log(`${cyan("◆")}  Overwriting App.tsx…\n`);
+    try {
+        await fs.writeFile(metroConfigPath, `
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Open up App.tsx to start working on your app!</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '#000',
+  },
+});
+    `.trim() + "\n", "utf-8");
+    }
+    catch (error) {
+        log.error(`Error improving ${yellow("App.tsx")} file${error instanceof Error ? `: ${error.message}` : "."}`);
+        process.exit(1);
+    }
+    console.log(`\n${green("◆")}  Overwrote App.tsx.\n`);
+}
+/**
+ * Stage and commit all changes.
+ *
+ * @see https://github.com/expo/expo/blob/main/packages/create-expo/src/utils/git.ts
+ */
+async function commitChanges({ projectPath }) {
+    if (!(await hasProjectGitRepositoryAsync(projectPath))) {
+        console.warn(`\n${yellow("⚠")}  Skipping git commit: create-expo-app did not initialize a Git repository in this project (this happens when creating inside an existing repo, e.g. in a monorepo).\n`);
+        return;
+    }
+    try {
+        await tasks([
+            promisifiedSpawnTask({
+                title: "git add",
+                command: "git",
+                args: ["add", "-A"],
+                options: { cwd: projectPath, stdio: "ignore" },
+            }),
+        ]);
+    }
+    catch (error) {
+        log.error(`Error running ${yellow("git add -A")}${error instanceof Error ? `: ${error.message}` : "."}`);
+        process.exit(1);
+    }
+    if (!(await hasGitStagedChangesAsync(projectPath))) {
+        console.log(`\n${green("◆")}  Nothing to commit.\n`);
+        return;
+    }
+    try {
+        await tasks([
+            promisifiedSpawnTask({
+                title: "git commit",
+                command: "git",
+                args: ["commit", "-m", "Set up with expo-desktop"],
+                options: { cwd: projectPath, stdio: "ignore" },
+            }),
+        ]);
+    }
+    catch (error) {
+        log.error(`Error running ${yellow("git commit")}${error instanceof Error ? `: ${error.message}` : "."}`);
+        process.exit(1);
+    }
+    console.log(`\n${green("◆")}  Committed changes.\n`);
+}
 /**
  * For now, this is just a convenience script to allow me to run the config
  * plugins again after creating the app, to help with development. But it is
@@ -696,3 +843,36 @@ async function applyConfigPlugins(options) {
 await applyConfigPlugins(info);
     `.trim() + "\n", "utf-8");
 }
+function logProjectReady({ cdPath, packageManager, }) {
+    const lines = [
+        "✅ Your project is ready!",
+        "",
+        "To run your project, first navigate to the directory and start up the packager:",
+        "",
+        `- cd ${cdPath}`,
+        `- ${formatRunCommand(packageManager, "start")}`,
+        "",
+        "… and then run the target platform of your choice:",
+        "",
+        `- ${formatRunCommand(packageManager, "android")}`,
+        `- ${formatRunCommand(packageManager, "ios")}`,
+        `- ${formatRunCommand(packageManager, "web")}`,
+        `- ${formatRunCommand(packageManager, "macos")}`,
+        `- ${formatRunCommand(packageManager, "windows")}`,
+        "",
+    ];
+    log.success(lines.join("\n"), { withGuide: false });
+}
+export function formatRunCommand(packageManager, cmd) {
+    switch (packageManager) {
+        case "pnpm":
+            return `pnpm run ${cmd}`;
+        case "yarn":
+            return `yarn ${cmd}`;
+        case "bun":
+            return `bun run ${cmd}`;
+        case "npm":
+        default:
+            return `npm run ${cmd}`;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-desktop",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "description": "Best-effort desktop support for Expo",
   "keywords": [
     "android",
@@ -37,8 +37,8 @@
     "@clack/prompts": "^1.2.0",
     "arktype": "^2.2.0",
     "citty": "^0.2.2",
-    "expo-desktop-config-plugins": "^1.1.30",
-    "expo-desktop-prebuild-config": "^1.0.16",
+    "expo-desktop-config-plugins": "^1.1.32",
+    "expo-desktop-prebuild-config": "^1.0.18",
     "glob": "^10.5.0",
     "kleur": "^4.1.5",
     "mustache": "^4.2.0",