create-backtick-app 0.2.1 → 0.2.2

package/README.md

@@ -52,14 +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 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.
+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

@@ -155,10 +155,6 @@ 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({

package/package.json

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

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

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

@@ -1,5 +1,6 @@
 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";
@@ -15,11 +16,9 @@ import { moduleMap } from "./moduleMap";
 const host = Constants.expoConfig?.hostUri?.split(":")[0] ?? "localhost";
 const server = `http://${host}:3000`;
 
-// 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 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.

package/templates/react-native/package.json

@@ -16,10 +16,11 @@
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
-    "@backtickjs/bundler": "^0.2.1",
-    "@backtickjs/core": "^0.2.1",
-    "@backtickjs/node-plugin": "^0.2.1",
-    "@backtickjs/jsx-react": "^0.2.1",
+    "@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",
@@ -33,8 +34,8 @@
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "^0.2.1",
-    "@backtickjs/tsc": "^0.2.1",
+    "@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",
@@ -50,10 +51,7 @@
     "watch": [
       "server"
     ],
-    "ext": "ts,tsx",
-    "events": {
-      "start": "node scripts/reload-expo.mjs"
-    }
+    "ext": "ts,tsx"
   },
   "backtick": {
     "plugins": [

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";
@@ -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/tsconfig.json

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

package/templates/solid-js/package.json

@@ -11,18 +11,18 @@
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
-    "@backtickjs/bundler": "^0.2.1",
-    "@backtickjs/core": "^0.2.1",
-    "@backtickjs/node-plugin": "^0.2.1",
-    "@backtickjs/jsx-solid": "^0.2.1",
+    "@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.17",
     "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "^0.2.1",
-    "@backtickjs/tsc": "^0.2.1",
+    "@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/react-native/app.config.ts

@@ -1,12 +0,0 @@
-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/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);
-}