create-backtick-app 0.2.0 → 0.2.2

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,17 +52,14 @@ 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 the `@backtickjs/expo` plugin in `app.json` 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
 npm run ios      # or android, or web: a simulator, an emulator or a browser
 ```
 
-Each starts your Backtick server alongside Expo, in one terminal. Edit `server/Home.tsx` and save: the server restarts, and `scripts/reload-expo.mjs`, which nodemon runs each time it starts the server, reloads the app once the server listens. The app fetches the new screen without rebuilding.
+Each starts your Backtick server alongside Expo, in one terminal. Edit `server/Home.tsx` and save: the server restarts, and once it listens, `reloadExpo()` in `server/index.tsx` reloads the app. The app fetches the new screen without rebuilding.
 
 `npm test` draws `server/Home.tsx` as the app would, in `server/Home.test.tsx`; [Testing screens](https://backtickjs.com/docs/testing/) explains the test.
 

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());
     }
@@ -155,9 +155,12 @@ rewriteJson(path.join(target, "package.json"), (json) => {
         for (const [name, command] of Object.entries(json.scripts)) {
             json.scripts[name] = bun(command);
         }
-        const events = json.nodemonConfig.events ?? {};
-        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());
         }
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-backtick-app",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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.2",
+    "@backtickjs/core": "^0.2.2",
+    "@backtickjs/node-plugin": "^0.2.2",
+    "@backtickjs/jsx-react": "^0.2.2",
     "@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.2",
+    "@backtickjs/tsc": "^0.2.2",
     "@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.json

@@ -5,6 +5,6 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "userInterfaceStyle": "light",
-    "plugins": ["@backtickjs/builds/expo"]
+    "plugins": ["@backtickjs/expo"]
   }
 }

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

@@ -1,10 +1,10 @@
-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 { getBacktickExtra } from "@backtickjs/expo";
 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 +16,15 @@ 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, at the versions app.json's plugin records.
+const { installedPackages } = getBacktickExtra(Constants.expoConfig);
+const modules = JSON.stringify(modulesOf(moduleMap, installedPackages));
 
 // 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,15 @@
     "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.2",
+    "@backtickjs/core": "^0.2.2",
+    "@backtickjs/expo": "^0.2.2",
+    "@backtickjs/node-plugin": "^0.2.2",
+    "@backtickjs/jsx-react": "^0.2.2",
     "@hono/node-server": "^2.1.4",
     "expo": "~57.0.26",
     "expo-constants": "~57.0.20",
@@ -36,8 +34,8 @@
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "^0.2.0",
-    "@backtickjs/tsc": "^0.2.0",
+    "@backtickjs/prettier-plugin": "^0.2.2",
+    "@backtickjs/tsc": "^0.2.2",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
     "@types/node": "^25.9.1",
@@ -53,13 +51,9 @@
     "watch": [
       "server"
     ],
-    "ext": "ts,tsx",
-    "events": {
-      "start": "node scripts/reload-expo.mjs"
-    }
+    "ext": "ts,tsx"
   },
   "backtick": {
-    "clientRoot": "client",
     "plugins": [
       "@backtickjs/jsx-react/plugin"
     ]

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

@@ -1,3 +1,4 @@
+import { reloadExpo } from "@backtickjs/expo/server";
 import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import { cors } from "hono/cors";
@@ -7,7 +8,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")`.
@@ -19,6 +20,8 @@ app.onError((error, context) => {
   return context.text(String(error), 500);
 });
 
+// Once it listens, the app Expo serves reloads to show this server's screens.
 serve({ fetch: app.fetch, port: 3000 }, () => {
   console.log("Backtick server on http://localhost:3000");
+  reloadExpo();
 });

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/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.2",
+    "@backtickjs/core": "^0.2.2",
+    "@backtickjs/node-plugin": "^0.2.2",
+    "@backtickjs/jsx-solid": "^0.2.2",
     "@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.2",
+    "@backtickjs/tsc": "^0.2.2",
     "@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>

package/templates/react-native/scripts/reload-expo.mjs

@@ -1,37 +0,0 @@
-// Run by nodemon each time it starts your server: once the server listens,
-// the apps Expo serves reload, as pressing `r` in Expo's terminal does: a
-// `reload` on its message socket, which it accepts from this computer.
-// Nothing happens without Expo running.
-import { connect } from "node:net";
-import { setTimeout as sleep } from "node:timers/promises";
-
-// Your server's port, and Expo's: React Native's variable for it.
-const port = 3000;
-const metro = `ws://127.0.0.1:${process.env.RCT_METRO_PORT ?? 8081}/message`;
-
-// A connection, not a request, so the server has nothing to answer or log.
-const listening = () =>
-  new Promise((resolve) => {
-    const socket = connect(port, "localhost");
-    socket.on("connect", () => {
-      socket.end();
-      resolve(true);
-    });
-    socket.on("error", () => resolve(false));
-  });
-
-// Waited for, so the app doesn't fetch from a server still starting; given up
-// on when it crashed instead.
-for (let tries = 0; tries < 120; tries++) {
-  if (await listening()) {
-    const socket = new WebSocket(metro);
-    socket.onopen = () => {
-      socket.send(JSON.stringify({ version: 2, method: "reload" }));
-      socket.close();
-    };
-    // Expo isn't running: there's no app to reload.
-    socket.onerror = () => {};
-    break;
-  }
-  await sleep(250);
-}