expo-desktop 0.1.18 → 0.1.20

package/build/cli.js

@@ -23,6 +23,11 @@ const main = defineCommand({
                     description: `The ${kleur.bold("display name")} for the app ${grey("(Examples: 'My App 123', '俺のアプリ')")}`,
                     valueHint: "name",
                 },
+                "local-dev": {
+                    type: "boolean",
+                    description: "An undocumented switch for use during development to skip the questionnaire.",
+                    hidden: true,
+                },
                 rdns: {
                     type: "string",
                     description: `The ${kleur.bold("reverse DNS")} for the app ${grey("(Example: 'com.example.my-app-123')")}`,

package/build/common/preserve-file.js

@@ -0,0 +1,13 @@
+import fs from "node:fs/promises";
+/**
+ * Read the state of a file on first call of the generator, then run the
+ * generator again to restore it back to that value that was read.
+ */
+export async function* preserveFile({ filePath, enable, }) {
+    if (!enable) {
+        return;
+    }
+    const fileBefore = await fs.readFile(filePath, "utf-8");
+    yield;
+    await fs.writeFile(filePath, fileBefore, "utf-8");
+}

package/build/create-app/command.js

@@ -3,20 +3,21 @@ import { default as kleur } from "kleur";
 import { green, grey } from "kleur/colors";
 import { platform } from "node:process";
 import { title } from "../common/clack.js";
-import { createExpoDesktopApp, localDev } from "./create-expo-desktop-app.js";
+import { createExpoDesktopApp } from "./create-expo-desktop-app.js";
 import { previewFileTree } from "./preview-file-tree.js";
 import { promptForVersion } from "./prompt-for-version.js";
 export async function newExpoDesktopProject(args) {
-    // A dev-time switch for skipping the questions
-    const skip = localDev;
-    if (skip) {
+    // A switch for skipping the questions
+    const localDev = args["local-dev"];
+    if (localDev) {
         await createExpoDesktopApp({
+            localDev,
             name: {
                 displayName: "Your App Display Name",
                 filesafeName: "YourApp456",
                 rdns: "uk.co.birchlabs.your-app-456",
             },
-            packageManager: "bun",
+            packageManager: "pnpm",
             templates: {
                 template: args.template,
                 "template-ios": args["template-ios"],
@@ -57,6 +58,7 @@ export async function newExpoDesktopProject(args) {
         process.exit(0);
     }
     await createExpoDesktopApp({
+        localDev,
         name,
         packageManager,
         versions,

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

@@ -11,18 +11,10 @@ import { makePrettySummary } from "../common/arktype.js";
 import { promisifiedSpawnTask, SPAWN_DEBUG_LOG_GLOB } from "../common/child-process.js";
 import { title } from "../common/clack.js";
 import { packageManagerExec } from "../common/npm.js";
+import { preserveFile } from "../common/preserve-file.js";
 import { applySelectedTemplatesAsync } from "../common/template.js";
-/**
- * A crude switch to use to help with local development.
- *
- * - Skips the questionnaire at the start.
- * - Installs the local copy of expo-desktop-config-plugins rather than pinning
- *   to a published release.
- * - Adds the apply-config-plugins.mjs script.
- */
-export const localDev = false;
-export async function createExpoDesktopApp({ name, packageManager, templates, versions, }) {
-    const { projectPath } = await createExpoApp({ name, packageManager, versions });
+export async function createExpoDesktopApp({ localDev, name, packageManager, templates, versions, }) {
+    const { projectPath } = await createExpoApp({ localDev, name, packageManager, versions });
     await appendRootGitignoreSpawnDebugLogs(projectPath);
     const templateSelection = {
         // https://github.com/expo/expo/blob/sdk-54/templates/expo-template-blank-typescript
@@ -54,13 +46,14 @@ export async function createExpoDesktopApp({ name, packageManager, templates, ve
     await updateAppJson({ name, projectPath });
     title("Altering package.json…", { spacing: 1 });
     const { name: packageJsonName } = await updatePackageJson({
+        localDev,
         name,
         projectPath,
         versions,
         task: { type: "create" },
     });
     title("Installing dependencies…", { spacing: 1 });
-    await npmInstall({ cwd: projectPath, packageManager });
+    await npmInstall({ asNewWorkspace: true, cwd: projectPath, packageManager });
     await updatePackageJson({
         name,
         projectPath,
@@ -94,13 +87,37 @@ export async function createExpoDesktopApp({ name, packageManager, templates, ve
         title("Installing Cocoapods for the macOS app…", { spacing: 1 });
         await podInstall({ projectPath, type: "macos" });
     }
+    // react-native config seems to return `windows: null` on non-Windows
+    // platforms (while returning a populated object for Windows). If you force it
+    // to non-null for development on macOS, macOS runs the autolinking command
+    // successfully but writes out erroneous output, so
+    // there's no point.
+    if (platform === "win32") {
+        title("Autolinking the Windows app…", { spacing: 1 });
+        await autolinkWindows({ projectPath });
+    }
     title("Adding Expo support to the Metro config…", { spacing: 1 });
     await improveMetroConfig({ projectPath });
+    await addWindowsExpoPolyfill({ projectPath });
     title("Adding Expo support to the Babel config…", { spacing: 1 });
     await writeBabelConfig({ projectPath });
-    // TODO: Set up Windows app.cpp entrypoint
 }
-async function createExpoApp({ name, packageManager, versions, }) {
+async function createExpoApp({ localDev, name, packageManager, versions, }) {
+    // `create-expo-app` aggravatingly reconfigures your workspace to use
+    // `nodeLinker: hoisted`, which sucks when creating sample projects inside
+    // this monorepo during local dev (even with `--no-install`). So we fight
+    // back.
+    //
+    // For non-local dev, it sounds like we can use `nodeLinker: isolated` as of
+    // Expo SDK 54, so I'm tempted to enforce that in created templates, too. But
+    // one thing at a time.
+    // - https://docs.expo.dev/more/create-expo/#pnpm
+    // - https://github.com/expo/expo/blob/222b3b12610d69784bab6c5a188a46ea388f866a/packages/create-expo/src/resolvePackageManager.ts#L109
+    const gen = preserveFile({
+        enable: localDev,
+        filePath: localDev ? path.resolve(import.meta.dirname, "../../../../pnpm-workspace.yaml") : "",
+    });
+    await gen.next();
     // `npm create` drops flags meant for create-expo-app unless you add `--`; use
     // `npx --yes` instead to forward args correctly and skip prompts.
     const command = packageManager === "npm" ? "npx" : packageManager;
@@ -133,6 +150,9 @@ async function createExpoApp({ name, packageManager, versions, }) {
         log.error(`Error running ${yellow("create expo-app")}${error instanceof Error ? `: ${error.message}` : "."}`);
         process.exit(1);
     }
+    finally {
+        await gen.next();
+    }
     return { projectPath };
 }
 async function appendRootGitignoreSpawnDebugLogs(projectPath) {
@@ -209,7 +229,7 @@ async function updateAppJson({ name, projectPath, }) {
     }
     console.log(`${green("◆")}  Altered app.json.\n`);
 }
-async function updatePackageJson({ name, projectPath, task, versions, }) {
+async function updatePackageJson({ localDev, name, projectPath, task, versions, }) {
     const packageJsonPath = path.resolve(projectPath, "package.json");
     let packageJson;
     try {
@@ -238,19 +258,21 @@ async function updatePackageJson({ name, projectPath, task, versions, }) {
         }
         packageJson.scripts.macos = "rnc-cli run-macos";
         packageJson.scripts.windows = "rnc-cli run-windows";
+        packageJson.scripts["autolink-windows"] = "react-native autolink-windows";
     }
     else {
         if (!packageJson.dependencies) {
             packageJson.dependencies = {};
         }
-        // expo-desktop-prebuild-config itself depends on
-        // expo-desktop-config-plugins.
-        if (localDev) {
-            packageJson.dependencies["expo-desktop-prebuild-config"] =
-                "file:../../expo-desktop-prebuild-config";
-        }
-        else {
-            packageJson.dependencies["expo-desktop-prebuild-config"] = "^1.0.0";
+        const monorepoDeps = {
+            // expo-desktop-prebuild-config itself depends on
+            // expo-desktop-config-plugins.
+            ["expo-desktop-prebuild-config"]: "^1.0.0",
+            ["expo-desktop-modules-core"]: `^${versions.expoMajor}.0.0`,
+            ["expo-desktop-stubs"]: `^${versions.expoMajor}.0.0`,
+        };
+        for (const [key, value] of Object.entries(monorepoDeps)) {
+            packageJson.dependencies[key] = localDev ? `file:../../${key}` : value;
         }
         packageJson.dependencies["react-native-macos"] = versions.macos;
         packageJson.dependencies["react-native-windows"] = versions.windows;
@@ -281,10 +303,41 @@ async function updatePackageJson({ name, projectPath, task, versions, }) {
     console.log(`${green("◆")}  Altered package.json.\n`);
     return { name: nameBefore };
 }
-async function npmInstall({ cwd, packageManager, }) {
+async function npmInstall({ asNewWorkspace, cwd, packageManager, }) {
     const command = packageManager;
     const args = ["install"];
     console.log(`${cyan("◆")}  Running: ${yellow(`${command} ${args.join(" ")}`)}\n`);
+    // Unlike npm and bun, pnpm climbs up to install dependencies in the closest
+    // ancestor directory if there is one. This is particularly inconvenient
+    // during local dev when we're creating samples inside the monorepo.
+    if (asNewWorkspace && packageManager === "pnpm") {
+        // (1) Ensure a file name pnpm-workspace.yaml exists.
+        //
+        // (2) Also ensure that it uses nodeLinker: hoisted, as otherwise
+        // `:path => "#{config[:reactNativePath]}-macos"` predicts that there will
+        // be a react-native-macos directory right beside the react-native
+        // directory by just optimistically appending "-macos" on the end, like so:
+        // "../node_modules/.pnpm/react-native@0.81.5_@babel+core@7.29.0_@react-native-community+cli@20.1.3_typescript@5._941d99d35895d1a3626e14fd9f3b3666/node_modules/react-native" + "-macos"
+        //
+        //     As this is not true with pnpm's default `nodeLinker: isolated`, we
+        //     need to stick to `nodeLinker: hoisted` until we can rewrite the
+        //     Podfile script to resolve it properly.
+        //
+        //     This is consistent with what the Expo team do for pnpm and yarn:
+        //     - https://docs.expo.dev/more/create-expo/#pnpm
+        //     - https://github.com/expo/expo/blob/222b3b12610d69784bab6c5a188a46ea388f866a/packages/create-expo/src/resolvePackageManager.ts#L109
+        try {
+            await fs.writeFile(path.resolve(cwd, "pnpm-workspace.yaml"), "nodeLinker: hoisted\n", {
+                flag: "wx",
+                encoding: "utf-8",
+            });
+        }
+        catch (error) {
+            if (!(error instanceof Error) || !("code" in error) || error.code !== "EEXIST") {
+                throw error;
+            }
+        }
+    }
     try {
         await tasks([
             promisifiedSpawnTask({
@@ -386,6 +439,27 @@ async function podInstall({ projectPath, type }) {
     }
     console.log(`\n${green("◆")}  Installed Cocoapods for the ${type === "ios" ? "iOS" : "macOS"} app.\n`);
 }
+async function autolinkWindows({ projectPath }) {
+    const command = "node";
+    const args = ["--run", "autolink-windows"];
+    const printedCommand = `${command} ${args.join(" ")}`;
+    console.log(`${cyan("◆")}  Running: ${yellow(printedCommand)}\n`);
+    try {
+        await tasks([
+            promisifiedSpawnTask({
+                title: "react-native autolink-windows",
+                command,
+                args,
+                options: { cwd: projectPath, stdio: "inherit" },
+            }),
+        ]);
+    }
+    catch (error) {
+        log.error(`Error running ${yellow(printedCommand)}${error instanceof Error ? `: ${error.message}` : "."}`);
+        process.exit(1);
+    }
+    console.log(`\n${green("◆")}  Autolinked the Windows app.\n`);
+}
 async function improveMetroConfig({ projectPath }) {
     const metroConfigPath = path.resolve(projectPath, "metro.config.js");
     console.log(`${cyan("◆")}  Overwriting metro.config.js…\n`);
@@ -395,6 +469,17 @@ const { getDefaultConfig } = require("@expo/metro-config");
 const { makeMetroConfig } = require("@rnx-kit/metro-config");
 
 const config = makeMetroConfig(getDefaultConfig(__dirname));
+
+const getPolyfills = config.serializer.getPolyfills;
+const windowsExpoPolyfill = require.resolve("./expo-polyfill.windows.js");
+config.serializer.getPolyfills = (platform) => {
+  const polyfills = getPolyfills(platform);
+  if (platform === "windows") {
+    polyfills.push(windowsExpoPolyfill);
+  }
+  return polyfills;
+};
+
 module.exports = config;
     `.trim() + "\n", "utf-8");
     }
@@ -404,6 +489,69 @@ module.exports = config;
     }
     console.log(`\n${green("◆")}  Overwrote metro.config.js.\n`);
 }
+/**
+ */
+async function addWindowsExpoPolyfill({ projectPath }) {
+    await fs.writeFile(path.resolve(projectPath, "expo-polyfill.windows.js"), `
+try {
+  // Until we can configure TurboModules for eager initialisation (which is
+  // waiting on https://github.com/microsoft/react-native-windows/pull/16093), we
+  // need to trigger the lazy-init of our TurboModule by accessing it for the
+  // first time, which causes the TurboModuleManager to call its REACT_INIT
+  // method.
+  //
+  // We can't do any imports inside getPolyfills(), but can use the global proxy:
+  globalThis.nativeModuleProxy.ExpoMainRuntimeInstaller;
+
+  // TODO: Implement Expo's NativeModulesProxy and make all of this
+  //       lazy-initialised (and actually populate \`exportedMethods\`, etc.).
+
+  // Below are temporary stubs to suppress these warnings:
+  //  WARN  The "EXNativeModulesProxy" native module is not exported through NativeModules; verify that expo-modules-core's native code is linked properly
+  //  WARN  No native ExponentConstants module found, are you sure the expo-constants's module is linked properly?
+  //  WARN  No native ExponentConstants module found, are you sure the expo-constants's module is linked properly?
+
+  // Funnily enough, although expo-modules-core prefers to access
+  // global.expo?.modules?.NativeModulesProxy over the deprecated
+  // NativeModules?.NativeUnimoduleProxy, we still need the latter to exist in
+  // order for it to check the former. And it's only
+  globalThis.nativeModuleProxy.NativeUnimoduleProxy;
+  const { ExpoAsset } = globalThis.nativeModuleProxy;
+
+  const ExponentConstants = {};
+
+  globalThis.expo.modules = {
+    ExpoAsset,
+    ExponentConstants,
+    // - JS: apps/demo/node_modules/expo-modules-core/src/NativeModulesProxy.native.ts
+    // - iOS:
+    //   - NativeUnimoduleProxy: apps/demo/node_modules/expo-modules-core/ios/Legacy/NativeModulesProxy/NativeModulesProxyModule.swift
+    //   - NativeModulesProxy: apps/demo/node_modules/expo-modules-core/ios/Legacy/NativeModulesProxy/EXNativeModulesProxy.mm
+    // - Android:
+    //   - NativeUnimoduleProxy: apps/demo/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java
+    //   - NativeModulesProxy: apps/demo/node_modules/expo-modules-core/android/src/main/java/expo/modules/kotlin/defaultmodules/NativeModulesProxyModule.kt
+    NativeModulesProxy: {
+      exportedMethods: {
+        ExpoAsset: [],
+        ExponentConstants: [],
+      },
+      modulesConstants: {
+        ExpoAsset: [],
+        ExponentConstants: [],
+      },
+    },
+  };
+
+  // Now expo-modules-core can populate its fileprivate
+  // \`const NativeModulesProxy: Record<string, ProxyNativeModule = {}\` from our
+  // global.expo?.modules?.NativeModulesProxy. This avoids the warning about
+  // EXNativeModulesProxy being missing.
+} catch (error) {
+  console.error("Polyfill failed", error);
+  throw error;
+}
+    `.trim() + "\n", "utf-8");
+}
 async function updatePodfile({ projectPath }) {
     const appJsonPath = path.resolve(projectPath, "macos/Podfile");
     let contents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-desktop",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Best-effort desktop support for Expo",
   "keywords": [
     "android",
@@ -41,8 +41,8 @@
     "kleur": "^4.1.5",
     "mustache": "^4.2.0",
     "toml": "^4.1.1",
-    "expo-desktop-config-plugins": "1.1.18",
-    "expo-desktop-prebuild-config": "1.0.7"
+    "expo-desktop-config-plugins": "1.1.20",
+    "expo-desktop-prebuild-config": "1.0.9"
   },
   "devDependencies": {
     "@expo/config": "^12.0.13",