@backtickjs/expo 0.0.0-stage → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jean-François Bisson
+
+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/README.md

@@ -1,3 +1,58 @@
-# Temporary Holding Version
+# @backtickjs/expo
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[Backtick](https://backtickjs.com) for Expo apps: a config plugin that records the versions your app is built with, so it can tell your server which modules it carries, and a call that reloads the app when your server restarts in development.
+
+## Install
+
+```sh
+npm install @backtickjs/expo
+```
+
+## Usage
+
+**The config plugin** puts the installed version of each of your app's dependencies in the app config, which Expo embeds in the app:
+
+```json
+// app.json
+{ "expo": { "plugins": ["@backtickjs/expo"] } }
+```
+
+**The app reads them back** with `getBacktickExtra`, and sends the modules its module map offers, at those versions, with each request. Your server bundles each screen for exactly those modules:
+
+```ts
+import { modulesOf } from "@backtickjs/core";
+import { getBacktickExtra } from "@backtickjs/expo";
+import Constants from "expo-constants";
+import { moduleMap } from "./moduleMap";
+
+const { installedPackages } = getBacktickExtra(Constants.expoConfig);
+const modules = JSON.stringify(modulesOf(moduleMap, installedPackages));
+fetch(url, { headers: { "x-backtick-modules": modules } });
+```
+
+A reload keeps the config the app was opened with: after upgrading a package, close the app and open it again.
+
+**Your server reloads the app** once it listens, so saving a server file shows its screens without pressing `r` in Expo's terminal:
+
+```ts
+import { reloadExpo } from "@backtickjs/expo/server";
+
+serve({ fetch: app.fetch, port: 3000 }, () => reloadExpo());
+```
+
+Without Expo running, as on a deployed server, it does nothing.
+
+## API
+
+- `@backtickjs/expo` in `app.json`'s `plugins`: the config plugin, which sets `extra.backtick.installedPackages` to `installedPackages(projectRoot)` from `@backtickjs/core/node`.
+- `getBacktickExtra(expoConfig)`: what the plugin recorded, `{ installedPackages }`, from `Constants.expoConfig`. Throws as the app starts if the plugin isn't in `app.json`.
+- `reloadExpo(port?)`, from `@backtickjs/expo/server`: reloads the apps Expo serves, as pressing `r` in its terminal does. `port` is Expo's, 8081 or `RCT_METRO_PORT` by default.
+
+## Related
+
+- [`@backtickjs/core`](https://github.com/backtickjs/backtick/tree/main/packages/core#every-build-in-users-hands): `modulesOf`, and how every build in users' hands keeps being drawn for
+- [`@backtickjs/bundler`](https://github.com/backtickjs/backtick/tree/main/packages/bundler): bundles a screen for the modules a build sends
+
+## License
+
+MIT

package/app.plugin.js

@@ -0,0 +1,3 @@
+// Where Expo looks for a package's config plugin, as
+// `"plugins": ["@backtickjs/expo"]` names it.
+export { default } from "./dist/plugin.js";

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/** What the config plugin puts in the app config's `extra.backtick`. */
+export type BacktickExtra = {
+    installedPackages: Readonly<Record<string, string>>;
+};
+/**
+ * What the config plugin recorded, from the app config Expo embeds: throws as
+ * the app starts if the plugin isn't in app.json, or what's there isn't its.
+ *
+ *     const { installedPackages } = getBacktickExtra(Constants.expoConfig);
+ *     const modules = JSON.stringify(modulesOf(moduleMap, installedPackages));
+ */
+export declare function getBacktickExtra(expoConfig: {
+    extra?: Record<string, unknown>;
+} | null | undefined): BacktickExtra;

package/dist/index.js

@@ -0,0 +1,23 @@
+// What the app imports: nothing of Node, so Metro can take it.
+/**
+ * What the config plugin recorded, from the app config Expo embeds: throws as
+ * the app starts if the plugin isn't in app.json, or what's there isn't its.
+ *
+ *     const { installedPackages } = getBacktickExtra(Constants.expoConfig);
+ *     const modules = JSON.stringify(modulesOf(moduleMap, installedPackages));
+ */
+export function getBacktickExtra(expoConfig) {
+    const backtick = expoConfig?.extra?.backtick;
+    if (backtick === undefined) {
+        throw new Error("No extra.backtick in the app config: is @backtickjs/expo in app.json's plugins?");
+    }
+    const { installedPackages } = backtick;
+    if (typeof installedPackages !== "object" ||
+        installedPackages === null ||
+        Array.isArray(installedPackages) ||
+        !Object.values(installedPackages).every((version) => typeof version === "string")) {
+        throw new Error("extra.backtick.installedPackages isn't { package: version }: is it written by @backtickjs/expo?");
+    }
+    return { installedPackages: installedPackages };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAQ/D;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAC9B,UAAkE;IAElE,MAAM,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,QAEvB,CAAC;IACd,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CACb,iFAAiF,CAClF,CAAC;IACJ,CAAC;IACD,MAAM,EAAE,iBAAiB,EAAE,GAAG,QAAQ,CAAC;IACvC,IACE,OAAO,iBAAiB,KAAK,QAAQ;QACrC,iBAAiB,KAAK,IAAI;QAC1B,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC;QAChC,CAAC,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CACrC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,OAAO,KAAK,QAAQ,CACzC,EACD,CAAC;QACD,MAAM,IAAI,KAAK,CACb,iGAAiG,CAClG,CAAC;IACJ,CAAC;IACD,OAAO,EAAE,iBAAiB,EAAE,iBAA2C,EAAE,CAAC;AAC5E,CAAC"}

package/dist/plugin.d.ts

@@ -0,0 +1,15 @@
+type ExpoConfig = {
+    extra?: Record<string, unknown>;
+    _internal?: {
+        projectRoot?: string;
+    };
+};
+/**
+ * The config plugin, as `"plugins": ["@backtickjs/expo"]` in app.json: puts
+ * the installed version of each of the app's dependencies in the config,
+ * `extra.backtick.installedPackages`, which `getBacktickExtra` reads.
+ */
+export default function withBacktickExtra<Config extends ExpoConfig>(config: Config): Config & {
+    extra: Record<string, unknown>;
+};
+export {};

package/dist/plugin.js

@@ -0,0 +1,24 @@
+import { installedPackages } from "@backtickjs/core/node";
+/**
+ * The config plugin, as `"plugins": ["@backtickjs/expo"]` in app.json: puts
+ * the installed version of each of the app's dependencies in the config,
+ * `extra.backtick.installedPackages`, which `getBacktickExtra` reads.
+ */
+export default function withBacktickExtra(config) {
+    const projectRoot = config._internal?.projectRoot;
+    if (projectRoot === undefined) {
+        throw new Error("@backtickjs/expo: Expo gave the config no projectRoot.");
+    }
+    const backtick = config.extra?.backtick;
+    return {
+        ...config,
+        extra: {
+            ...config.extra,
+            backtick: {
+                ...backtick,
+                installedPackages: installedPackages(projectRoot),
+            },
+        },
+    };
+}
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAS1D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,MAAc;IAEd,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC;IAClD,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC9B,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC5E,CAAC;IACD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,EAAE,QAElB,CAAC;IACd,OAAO;QACL,GAAG,MAAM;QACT,KAAK,EAAE;YACL,GAAG,MAAM,CAAC,KAAK;YACf,QAAQ,EAAE;gBACR,GAAG,QAAQ;gBACX,iBAAiB,EAAE,iBAAiB,CAAC,WAAW,CAAC;aAClD;SACF;KACF,CAAC;AACJ,CAAC"}

package/dist/server.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Reloads the apps Expo serves, as pressing `r` in its terminal does: a
+ * `reload` on its message socket, which it accepts from this computer. Call
+ * it once the server listens, so a restart after a save shows its screens.
+ * Without Expo running, it does nothing.
+ *
+ *     serve({ fetch: app.fetch, port: 3000 }, () => reloadExpo());
+ */
+export declare function reloadExpo(port?: number): void;

package/dist/server.js

@@ -0,0 +1,18 @@
+/**
+ * Reloads the apps Expo serves, as pressing `r` in its terminal does: a
+ * `reload` on its message socket, which it accepts from this computer. Call
+ * it once the server listens, so a restart after a save shows its screens.
+ * Without Expo running, it does nothing.
+ *
+ *     serve({ fetch: app.fetch, port: 3000 }, () => reloadExpo());
+ */
+export function reloadExpo(port = Number(process.env.RCT_METRO_PORT ?? 8081)) {
+    const socket = new WebSocket(`ws://127.0.0.1:${port}/message`);
+    socket.onopen = () => {
+        socket.send(JSON.stringify({ version: 2, method: "reload" }));
+        socket.close();
+    };
+    // Expo isn't running: there's no app to reload.
+    socket.onerror = () => { };
+}
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CACxB,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,IAAI,IAAI,CAAC;IAEjD,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC,kBAAkB,IAAI,UAAU,CAAC,CAAC;IAC/D,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;QACnB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC9D,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,CAAC;IACF,gDAAgD;IAChD,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AAC5B,CAAC"}

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@backtickjs/expo",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.1",
+  "description": "Backtick for Expo apps: the config plugin that records the app's installed packages, and reloading apps when the server restarts",
+  "keywords": [
+    "backtick",
+    "expo",
+    "react-native",
+    "server-driven-ui"
+  ],
+  "homepage": "https://backtickjs.com",
+  "bugs": {
+    "url": "https://github.com/backtickjs/backtick/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/backtickjs/backtick.git",
+    "directory": "packages/expo"
+  },
+  "license": "MIT",
+  "author": "Jean-François Bisson <jf@backtickjs.com>",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "default": "./dist/server.js"
+    },
+    "./app.plugin.js": "./app.plugin.js"
+  },
+  "files": [
+    "app.plugin.js",
+    "dist",
+    "!dist/._cache",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@backtickjs/core": "^0.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^25.9.1",
+    "@types/ws": "^8.18.2",
+    "prettier": "^3.6.2",
+    "typescript": "^6.0.3",
+    "ws": "^8.22.0"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "tsc -b --watch",
+    "format": "prettier --write --ignore-unknown .",
+    "format:check": "prettier --check --ignore-unknown .",
+    "test": "node --test \"test/**/*.test.ts\"",
+    "clean": "rm -rf node_modules dist .turbo"
+  }
 }

package/src/index.ts

@@ -0,0 +1,41 @@
+// What the app imports: nothing of Node, so Metro can take it.
+
+/** What the config plugin puts in the app config's `extra.backtick`. */
+export type BacktickExtra = {
+  // the installed version of each of the app's dependencies, by package
+  installedPackages: Readonly<Record<string, string>>;
+};
+
+/**
+ * What the config plugin recorded, from the app config Expo embeds: throws as
+ * the app starts if the plugin isn't in app.json, or what's there isn't its.
+ *
+ *     const { installedPackages } = getBacktickExtra(Constants.expoConfig);
+ *     const modules = JSON.stringify(modulesOf(moduleMap, installedPackages));
+ */
+export function getBacktickExtra(
+  expoConfig: { extra?: Record<string, unknown> } | null | undefined,
+): BacktickExtra {
+  const backtick = expoConfig?.extra?.backtick as
+    | { installedPackages?: unknown }
+    | undefined;
+  if (backtick === undefined) {
+    throw new Error(
+      "No extra.backtick in the app config: is @backtickjs/expo in app.json's plugins?",
+    );
+  }
+  const { installedPackages } = backtick;
+  if (
+    typeof installedPackages !== "object" ||
+    installedPackages === null ||
+    Array.isArray(installedPackages) ||
+    !Object.values(installedPackages).every(
+      (version) => typeof version === "string",
+    )
+  ) {
+    throw new Error(
+      "extra.backtick.installedPackages isn't { package: version }: is it written by @backtickjs/expo?",
+    );
+  }
+  return { installedPackages: installedPackages as Record<string, string> };
+}

package/src/plugin.ts

@@ -0,0 +1,35 @@
+import { installedPackages } from "@backtickjs/core/node";
+
+// The part of an Expo config this plugin reads and writes: `projectRoot` is
+// set by Expo as it reads the config.
+type ExpoConfig = {
+  extra?: Record<string, unknown>;
+  _internal?: { projectRoot?: string };
+};
+
+/**
+ * The config plugin, as `"plugins": ["@backtickjs/expo"]` in app.json: puts
+ * the installed version of each of the app's dependencies in the config,
+ * `extra.backtick.installedPackages`, which `getBacktickExtra` reads.
+ */
+export default function withBacktickExtra<Config extends ExpoConfig>(
+  config: Config,
+): Config & { extra: Record<string, unknown> } {
+  const projectRoot = config._internal?.projectRoot;
+  if (projectRoot === undefined) {
+    throw new Error("@backtickjs/expo: Expo gave the config no projectRoot.");
+  }
+  const backtick = config.extra?.backtick as
+    | Record<string, unknown>
+    | undefined;
+  return {
+    ...config,
+    extra: {
+      ...config.extra,
+      backtick: {
+        ...backtick,
+        installedPackages: installedPackages(projectRoot),
+      },
+    },
+  };
+}

package/src/server.ts

@@ -0,0 +1,19 @@
+/**
+ * Reloads the apps Expo serves, as pressing `r` in its terminal does: a
+ * `reload` on its message socket, which it accepts from this computer. Call
+ * it once the server listens, so a restart after a save shows its screens.
+ * Without Expo running, it does nothing.
+ *
+ *     serve({ fetch: app.fetch, port: 3000 }, () => reloadExpo());
+ */
+export function reloadExpo(
+  port = Number(process.env.RCT_METRO_PORT ?? 8081),
+): void {
+  const socket = new WebSocket(`ws://127.0.0.1:${port}/message`);
+  socket.onopen = () => {
+    socket.send(JSON.stringify({ version: 2, method: "reload" }));
+    socket.close();
+  };
+  // Expo isn't running: there's no app to reload.
+  socket.onerror = () => {};
+}