create-backtick-app 0.2.0 → 0.2.1

package/README.md

@@ -17,7 +17,7 @@ yarn create backtick-app
 bun create backtick-app
 ```
 
-It asks for a name, and nothing else: it copies the React Native template into that directory, installs with the package manager you ran it with (npm, pnpm, Yarn or Bun), and prints the commands to start. The server runs on Node, or on Bun when you ran it with Bun (`bun create`). Given the name on the command line, it asks nothing. Requires Node 22.15 or later.
+It asks for a name, and nothing else: it copies the React Native template into that directory, installs with the package manager you ran it with (npm, pnpm, Yarn or Bun), and prints the commands to start. The server runs on Node, or on Bun when you ran it with Bun (`bun create`) or passed `--runtime bun`; tests run on Node either way. Given the name on the command line, it asks nothing. Requires Node 22.15 or later.
 
 ## Options
 
@@ -52,10 +52,7 @@ Every template has:
 
 An Expo app (SDK 57) with the Backtick server beside it in `server/`. `client/App.tsx` fetches the screen at `/` and runs it with `execRoot` from [`@backtickjs/core/cjs`](https://github.com/backtickjs/backtick/tree/main/packages/core), offering screens what `client/moduleMap.ts` lists.
 
-Each build of the app sends an id that names the modules it carries, which the `@backtickjs/builds/expo` plugin in `app.json` works out from `client/moduleMap.ts`. The server bundles each screen for that build's modules, with [`@backtickjs/builds`](https://github.com/backtickjs/backtick/tree/main/packages/builds), so a build in users' hands keeps working as the app moves on:
-
-- The server draws only registered builds, one file each in `builds/`. `npm start` registers this code's builds as Expo starts; `npm run register-build` does it without Expo, as before a build for the stores. Commit what they write.
-- On EAS, `eas-build-post-install` fails a preview or production build that isn't registered.
+Each build of the app sends the modules it carries: those `client/moduleMap.ts` offers, at the versions `app.config.ts` records. The server bundles each screen for those modules ([more](https://github.com/backtickjs/backtick/tree/main/packages/core#every-build-in-users-hands)), so a build in users' hands keeps working as the app moves on, with nothing to record before it ships.
 
 ```sh
 npm start        # then scan the QR code with your phone, in Expo Go

package/dist/index.js

@@ -142,8 +142,8 @@ rewriteJson(path.join(target, "package.json"), (json) => {
     json.name = slug;
     // The templates ship Node's loader and scripts; another runtime gets its own.
     const loader = RUNTIMES[runtimeName].loader;
+    const version = json.dependencies["@backtickjs/node-plugin"];
     if (!(loader in json.dependencies)) {
-        const version = json.dependencies["@backtickjs/node-plugin"];
         delete json.dependencies["@backtickjs/node-plugin"];
         json.dependencies = Object.fromEntries(Object.entries({ ...json.dependencies, [loader]: version }).sort());
     }
@@ -159,6 +159,13 @@ rewriteJson(path.join(target, "package.json"), (json) => {
         for (const [name, command] of Object.entries(events)) {
             events[name] = bun(command);
         }
+        // What still runs on Node, as the tests do, keeps Node's loader.
+        if (Object.values(json.scripts).some((command) => command.includes("@backtickjs/node-plugin"))) {
+            json.devDependencies = Object.fromEntries(Object.entries({
+                ...json.devDependencies,
+                "@backtickjs/node-plugin": version,
+            }).sort());
+        }
     }
 });
 if (existsSync(path.join(target, "app.json"))) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-backtick-app",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Creates a Backtick app: React Native, React or Solid, with screens from your server on Node or Bun",
   "keywords": [
     "backtick",

package/templates/react/package.json

@@ -11,10 +11,10 @@
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
-    "@backtickjs/bundler": "^0.2.0",
-    "@backtickjs/core": "^0.2.0",
-    "@backtickjs/node-plugin": "^0.2.0",
-    "@backtickjs/jsx-react": "^0.2.0",
+    "@backtickjs/bundler": "^0.2.1",
+    "@backtickjs/core": "^0.2.1",
+    "@backtickjs/node-plugin": "^0.2.1",
+    "@backtickjs/jsx-react": "^0.2.1",
     "@hono/node-server": "^2.1.4",
     "hono": "^4.13.13",
     "react": "19.2.3",
@@ -22,8 +22,8 @@
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "^0.2.0",
-    "@backtickjs/tsc": "^0.2.0",
+    "@backtickjs/prettier-plugin": "^0.2.1",
+    "@backtickjs/tsc": "^0.2.1",
     "@types/node": "^25.9.1",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.7",

package/templates/react-native/AGENTS.md

@@ -6,4 +6,4 @@ The server's output is in the terminal `npm start` runs in.
 
 Saving a file under `server/` restarts the server, and Expo reloads the app once it's back: what the server keeps in memory starts over.
 
-A change to `client/moduleMap.ts` or the packages makes a new build: the app has to be closed and opened again. Until then, the server answers the open app with `UnknownBuild`.
+An upgraded package reaches the server once the app is closed and opened again: a reload keeps the versions it was opened with.

package/templates/react-native/app.config.ts

@@ -0,0 +1,12 @@
+import { installedPackages } from "@backtickjs/core/node";
+import type { ConfigContext, ExpoConfig } from "expo/config";
+
+// app.json, with the installed version of each of the app's dependencies,
+// which the app reads to tell its server the modules it carries.
+export default ({ config, projectRoot }: ConfigContext): ExpoConfig => ({
+  ...(config as ExpoConfig),
+  extra: {
+    ...config.extra,
+    backtick: { packages: installedPackages(projectRoot) },
+  },
+});

package/templates/react-native/app.json

@@ -4,7 +4,6 @@
     "slug": "backtick-app",
     "version": "1.0.0",
     "orientation": "portrait",
-    "userInterfaceStyle": "light",
-    "plugins": ["@backtickjs/builds/expo"]
+    "userInterfaceStyle": "light"
   }
 }

package/templates/react-native/client/App.tsx

@@ -1,10 +1,9 @@
-import { buildIdFrom } from "@backtickjs/builds/client";
-import type { Bundle } from "@backtickjs/core";
+import { type Bundle, modulesOf } from "@backtickjs/core";
 import { execRoot } from "@backtickjs/core/cjs";
 import Constants from "expo-constants";
 import { StatusBar } from "expo-status-bar";
 import { type ReactNode, Suspense, use, useState } from "react";
-import { ActivityIndicator, Platform, Text } from "react-native";
+import { ActivityIndicator, Text } from "react-native";
 import {
   ErrorBoundary,
   type FallbackProps,
@@ -16,15 +15,17 @@ import { moduleMap } from "./moduleMap";
 const host = Constants.expoConfig?.hostUri?.split(":")[0] ?? "localhost";
 const server = `http://${host}:3000`;
 
-// This build's id, which names the modules it carries, for the server to
-// bundle screens it can run: `@backtickjs/builds/expo`, in app.json, adds it.
-const buildId = buildIdFrom(Constants.expoConfig?.extra, Platform.OS);
+// The modules this build carries, for the server to bundle screens it can
+// run: app.config.ts adds its packages' versions.
+const modules = JSON.stringify(
+  modulesOf(moduleMap, Constants.expoConfig?.extra?.backtick?.packages),
+);
 
 // The screen at `path` on your server: its bundle, fetched and run with the
 // app's modules. Your fetch to shape: headers, auth, caching.
 async function fetchScreen(path: string): Promise<ReactNode> {
   const response = await fetch(`${server}${path}`, {
-    headers: { "x-build-id": buildId },
+    headers: { "x-backtick-modules": modules },
   });
   if (!response.ok) {
     throw new Error(`${path} answered ${response.status}.`);

package/templates/react-native/client/moduleMap.ts

@@ -3,9 +3,9 @@ import * as JSXRuntime from "react/jsx-runtime";
 import * as ReactNative from "react-native";
 
 // What a screen may require, as your app imports it: the packages it's built
-// with. Add one when a screen uses another package. Imports and a table,
-// nothing else: the server reads it, without running it, to know what each
-// build of your app carries. A platform that differs gets its own file, as
+// with. Add one when a screen uses another package, from package.json's
+// dependencies: the app sends your server what it offers, at the versions
+// it's built with. A platform that differs gets its own file, as
 // Metro picks files: moduleMap.web.ts, moduleMap.ios.ts.
 export const moduleMap = {
   react: React,

package/templates/react-native/package.json

@@ -12,17 +12,14 @@
     "typecheck": "tsc --noEmit && backtick-tsc -p server --noEmit",
     "test": "node --import ./server/test/setup.mjs --import @backtickjs/node-plugin --test \"server/**/*.test.tsx\"",
     "reset-project": "node scripts/reset-project.mjs",
-    "register-build": "backtick-builds register",
-    "eas-build-post-install": "backtick-builds check",
     "format": "prettier --write --ignore-unknown .",
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
-    "@backtickjs/builds": "^0.2.0",
-    "@backtickjs/bundler": "^0.2.0",
-    "@backtickjs/core": "^0.2.0",
-    "@backtickjs/node-plugin": "^0.2.0",
-    "@backtickjs/jsx-react": "^0.2.0",
+    "@backtickjs/bundler": "^0.2.1",
+    "@backtickjs/core": "^0.2.1",
+    "@backtickjs/node-plugin": "^0.2.1",
+    "@backtickjs/jsx-react": "^0.2.1",
     "@hono/node-server": "^2.1.4",
     "expo": "~57.0.26",
     "expo-constants": "~57.0.20",
@@ -36,8 +33,8 @@
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "^0.2.0",
-    "@backtickjs/tsc": "^0.2.0",
+    "@backtickjs/prettier-plugin": "^0.2.1",
+    "@backtickjs/tsc": "^0.2.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
     "@types/node": "^25.9.1",
@@ -59,7 +56,6 @@
     }
   },
   "backtick": {
-    "clientRoot": "client",
     "plugins": [
       "@backtickjs/jsx-react/plugin"
     ]

package/templates/react-native/server/index.tsx

@@ -7,7 +7,7 @@ import { screen } from "./screen.js";
 const app = new Hono();
 
 // `npm run web` serves the app from another origin.
-app.use(cors({ origin: "*", allowHeaders: ["x-build-id"] }));
+app.use(cors({ origin: "*", allowHeaders: ["x-backtick-modules"] }));
 
 // Your app's screens: add a route, and the app can fetch it. A path can
 // take parameters, `/stories/:id`, read with `context.req.param("id")`.

package/templates/react-native/server/screen.tsx

@@ -1,22 +1,14 @@
-import { fileURLToPath } from "node:url";
-import { createBuilds } from "@backtickjs/builds";
 import { bundler } from "@backtickjs/bundler";
 import type { JSX } from "@backtickjs/jsx-react/jsx-runtime";
 import type { Context } from "hono";
 
-// Your app's builds: each sends its id, and a screen is bundled for the
-// modules that build carries, from client/moduleMap.ts. A build in users' hands
-// keeps working as your app moves on, once registered: see builds/.
-const builds = createBuilds({
-  projectRoot: fileURLToPath(new URL("..", import.meta.url)),
-});
-
 /**
  * `element` as the response to a request from your app, bundled for the
- * modules the requesting build carries.
+ * modules the requesting build carries, as client/moduleMap.ts offers them
+ * at its packages' versions.
  */
 export async function screen(context: Context, element: JSX.Element) {
-  const modules = builds.modulesOf(context.req.header("x-build-id") ?? null);
+  const modules = JSON.parse(context.req.header("x-backtick-modules") ?? "{}");
   const bundle = await bundler.build({ input: element, modules });
   const { code } = bundle.generate({ format: "cjs" });
   return context.body(code, 200, { "content-type": "text/javascript" });

package/templates/react-native/server/test/drawScreen.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath } from "node:url";
-import { createBuilds } from "@backtickjs/builds";
 import { bundler } from "@backtickjs/bundler";
-import type { Spliceable } from "@backtickjs/core";
+import { modulesOf, type Spliceable } from "@backtickjs/core";
+import { installedPackages } from "@backtickjs/core/node";
 import { execRoot } from "@backtickjs/core/cjs";
 import * as React from "react";
 import * as JSXRuntime from "react/jsx-runtime";
@@ -10,14 +10,16 @@ import * as ReactNativeWeb from "react-native-web";
 // What the app's web build provides, as client/moduleMap.ts says, with React
 // Native's web build standing in for React Native. Add a stand-in here when
 // your module map offers another package.
-const modules = createBuilds({
-  projectRoot: fileURLToPath(new URL("../..", import.meta.url)),
-}).installed("web");
 const moduleMap = {
   react: React,
   "react/jsx-runtime": JSXRuntime,
   "react-native": ReactNativeWeb,
 };
+// at the versions the app installs, as its build sends them
+const modules = modulesOf(
+  moduleMap,
+  installedPackages(fileURLToPath(new URL("../..", import.meta.url))),
+);
 
 // A screen, bundled as your server bundles it and run as your app runs it,
 // for Testing Library to draw.

package/templates/react-native/tsconfig.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "strict": true
   },
-  // The app; the server, in server/, has its own.
-  "include": ["client"]
+  // The app and its config; the server, in server/, has its own.
+  "include": ["client", "app.config.ts"]
 }

package/templates/solid-js/package.json

@@ -11,18 +11,18 @@
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
-    "@backtickjs/bundler": "^0.2.0",
-    "@backtickjs/core": "^0.2.0",
-    "@backtickjs/node-plugin": "^0.2.0",
-    "@backtickjs/jsx-solid": "^0.2.0",
+    "@backtickjs/bundler": "^0.2.1",
+    "@backtickjs/core": "^0.2.1",
+    "@backtickjs/node-plugin": "^0.2.1",
+    "@backtickjs/jsx-solid": "^0.2.1",
     "@hono/node-server": "^2.1.4",
     "hono": "^4.13.13",
-    "solid-js": "1.9.14",
+    "solid-js": "1.9.17",
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "^0.2.0",
-    "@backtickjs/tsc": "^0.2.0",
+    "@backtickjs/prettier-plugin": "^0.2.1",
+    "@backtickjs/tsc": "^0.2.1",
     "@types/node": "^25.9.1",
     "agent-device": "^0.21.27",
     "nodemon": "^3.1.14",

package/templates/solid-js/server/html.ts

@@ -5,9 +5,9 @@ import type { JSX } from "@backtickjs/jsx-solid/jsx-runtime";
 
 // The version of Solid the page loads, below: what each page is bundled for.
 const modules = {
-  "solid-js": "1.9.14",
-  "solid-js/store": "1.9.14",
-  "solid-js/web": "1.9.14",
+  "solid-js": "1.9.17",
+  "solid-js/store": "1.9.17",
+  "solid-js/web": "1.9.17",
 };
 
 // Development unless NODE_ENV says production, as hosts set it for a deploy.
@@ -35,9 +35,9 @@ export async function toHtml(element: JSX.Element): Promise<string> {
     <script type="importmap">
       {
         "imports": {
-          "solid-js": "https://cdn.jsdelivr.net/npm/solid-js@1.9.14/dist/solid.js",
-          "solid-js/web": "https://cdn.jsdelivr.net/npm/solid-js@1.9.14/web/dist/web.js",
-          "solid-js/store": "https://cdn.jsdelivr.net/npm/solid-js@1.9.14/store/dist/store.js"
+          "solid-js": "https://cdn.jsdelivr.net/npm/solid-js@1.9.17/dist/solid.js",
+          "solid-js/web": "https://cdn.jsdelivr.net/npm/solid-js@1.9.17/web/dist/web.js",
+          "solid-js/store": "https://cdn.jsdelivr.net/npm/solid-js@1.9.17/store/dist/store.js"
         }
       }
     </script>