dewdrop-sdk 0.3.1 → 0.4.0

package/README.md

@@ -1,7 +1,7 @@
 # dewdrop-sdk
 
 The package that builds a three.js game for Dewdrop and runs it locally: the
-Vite plugin, model calls and multiplayer.
+Vite plugin, model calls, multiplayer and saves.
 
 ## Set up
 
@@ -19,11 +19,27 @@ export default { plugins: [dew()] };
 ```
 
 `npx dewctl init` sets up a new game this way, with the Dewdrop CLI beside it.
+To update a project, run `npm install -D dewdrop-sdk@latest`; saves need 0.4.0
+or later.
+
+## Saves locally
+
+On Dewdrop, `localStorage` and IndexedDB aren't local: nothing your game
+writes to them is stored in the player's browser or on their device, and they
+start empty each time a player opens your game. `saves.save()` keeps what they
+hold in Dewdrop's storage for that player, and `saves.load()` puts it back;
+each upload of your game starts with none.
+`npm run dev` does the same in your browser: every page load starts with
+`localStorage` and IndexedDB empty, and saves are kept in the browser, in a
+database named `dewdrop-saves` your game doesn't see, for the game
+`dewdrop.json` names and the player `?player=` names, across your edits. Tabs
+of one dev server share the browser's storage, so loading one empties the
+others'.
 
 ## Docs
 
-How to build your game, from the look to model calls, multiplayer and what
-works on Dewdrop, is in the docs: https://alpha.dewdrop.world/docs
+How to build your game, from the look to model calls, multiplayer, saves and
+what works on Dewdrop, is in the docs: https://alpha.dewdrop.world/docs
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dewdrop-sdk",
-  "version": "0.3.1",
-  "description": "Build a three.js game for Dewdrop: the Vite plugin, model calls and multiplayer.",
+  "version": "0.4.0",
+  "description": "Build a three.js game for Dewdrop: the Vite plugin, model calls, multiplayer and saves.",
   "license": "MIT",
   "type": "module",
   "exports": {

package/src/fresh.js

@@ -0,0 +1,103 @@
+// A page the dev server serves starts with its storage empty, as a game
+// does on Dewdrop. The plugin puts `freshScript` in the page's head, where
+// it runs before any of the game's code: it empties `localStorage` there
+// and then, and deletes every IndexedDB database but the one the dev
+// server keeps saves in. Listing the databases takes a moment, so until
+// their deletes are asked for, the first open of each name asks for the
+// name's delete first, and the browser, which serves a name's opens and
+// deletes in the order they are asked for, hands the game an empty
+// database all the same. The script is `freshStorage`'s own text, so the
+// function imports nothing and is written without a `<`: the script
+// escapes every `<` it carries, since a `</script>` would end it early.
+
+// The database the dev server keeps saves in, out of the game's sight, and
+// the name of the global symbol the page's script leaves what `saves`
+// needs under.
+export const SAVES_DATABASE = 'dewdrop-saves';
+export const SAVES_STATE = 'dewdrop.saves';
+
+// Empties the storage of `scope`, the page's window, but `database`, and
+// leaves under `Symbol.for(state)`: `game`, `database`, `ready`, which
+// resolves once every other database is gone and rejects when one cannot
+// go, and `connected`, whether the page holds a database open or is
+// opening one.
+export function freshStorage(scope, { game, database, state }) {
+  scope.localStorage.clear();
+  const factory = scope.indexedDB;
+  const open = factory.open;
+  const list = factory.databases;
+  // The page's connections and the opens not yet answered.
+  const held = new Set();
+  // The names that are empty, or will be once the opens asked for so far
+  // are answered: the saves' own, which is never emptied, and each name
+  // whose delete has been asked for.
+  const cleared = new Set([database]);
+  const deletes = [];
+  let listed = false;
+  let refuse;
+  const refused = new Promise((resolve, reject) => { refuse = reject; });
+
+  function clear(name) {
+    cleared.add(name);
+    const request = factory.deleteDatabase(name);
+    deletes.push(new Promise((resolve, reject) => {
+      request.addEventListener('success', () => resolve());
+      request.addEventListener('error', () => reject(request.error));
+      // Another tab of the dev server holds the database: the browser
+      // deletes it once that tab lets go, and until then this page is not
+      // empty and its saves are refused.
+      request.addEventListener('blocked', () => {
+        const what = `another tab holds the IndexedDB database ${JSON.stringify(name)} open, so this page did not start empty`;
+        scope.console.warn(`[dewdrop] ${what}: close that tab, then reload this one`);
+        refuse(new DOMException(`${what}: close that tab, then reload this one`, 'InvalidStateError'));
+      });
+    }));
+  }
+
+  factory.open = function (name) {
+    if (!listed && !cleared.has(String(name))) clear(String(name));
+    const request = Reflect.apply(open, this, arguments);
+    held.add(request);
+    request.addEventListener('error', () => held.delete(request));
+    request.addEventListener('success', () => {
+      held.delete(request);
+      const db = request.result;
+      held.add(db);
+      db.addEventListener('close', () => held.delete(db));
+      const close = db.close;
+      db.close = function () {
+        held.delete(db);
+        return Reflect.apply(close, this, arguments);
+      };
+    });
+    return request;
+  };
+
+  const reset = Promise.resolve()
+    .then(() => Reflect.apply(list, factory, []))
+    .then((found) => {
+      for (const { name } of found) if (!cleared.has(name)) clear(name);
+      listed = true;
+      return Promise.allSettled(deletes);
+    });
+  const ready = Promise.race([refused, reset.then(() => Promise.all(deletes)).then(() => undefined)]);
+  ready.catch(() => {});
+
+  // The game lists its databases as they are once the deletes are done,
+  // without the saves' own.
+  factory.databases = function () {
+    return reset
+      .then(() => Reflect.apply(list, this, arguments))
+      .then((found) => found.filter((each) => each.name !== database));
+  };
+
+  Object.defineProperty(scope, Symbol.for(state), {
+    value: Object.freeze({ game, database, ready, connected: () => held.size !== 0 }),
+  });
+}
+
+// The script the plugin puts in a page the dev server serves, for `game`.
+export function freshScript(game) {
+  const options = { game, database: SAVES_DATABASE, state: SAVES_STATE };
+  return `(${freshStorage})(window, ${JSON.stringify(options)});`.replace(/</g, '\\u003c');
+}

package/src/index.js

@@ -2,11 +2,16 @@
 // `dewdrop-sdk` itself, so a game written against this runs unchanged there;
 // here each export carries its call through the Vite dev server: `llm`
 // over its route, `backend` over its socket to the backend the plugin
-// runs, and `clients`, in that backend, over its port back.
+// runs, `clients`, in that backend, over its port back, and `saves` into
+// the browser's own storage, which the plugin's script empties as each
+// page loads.
 export { llm } from './llm.js';
 export { backend } from './backend.js';
 export { clients } from './clients.js';
 import { attachBackend, joining } from './backend.js';
+import { load, save } from './saves.js';
+
+export const saves = Object.freeze({ load, save });
 
 // Where the page's URL joins this tab: `player` is the label it names —
 // on Dewdrop, the player's username — the empty string when it names none

package/src/route.js

@@ -1,6 +1,7 @@
 // The contract between the package's two halves: the dev server route
 // `llm` calls, how its answers are told apart from a page served without
-// it, and where a backend finds the dev server from its thread.
+// it, where a backend finds the dev server from its thread, and what a
+// page served without the plugin says when it calls `backend` or `saves`.
 
 // The dev server route the local `llm.fetch` posts to, and the header
 // every answer from it carries, so a page served without the route — a
@@ -28,3 +29,8 @@ export function routeUrl() {
 // The message a client sends without a channel to its backend: a page
 // served without the plugin, or a build served by a static host.
 export const NO_CHANNEL = 'no backend channel: add the dew() plugin to vite.config.js, or run the game on Dewdrop';
+
+// The message `saves` gives in a page without the plugin's script, which
+// starts the page's storage empty: a page served without the plugin, or a
+// build served by a static host.
+export const NO_SAVES = 'no saves here: add the dew() plugin to vite.config.js, or run the game on Dewdrop';

package/src/saves.js

@@ -0,0 +1,253 @@
+// `saves` on a developer's machine: the browser stands in for Dewdrop's
+// storage. The plugin's script empties `localStorage` and IndexedDB as
+// each page the dev server serves loads, as Dewdrop does each time a
+// player opens a game; `save` keeps what they hold in a database of the
+// browser's own that the game does not see, under the game dewdrop.json
+// names and the player the page's URL names, and `load` puts it back.
+// Calls run in the order they are made, and the checks and their messages
+// are Dewdrop's, so a call that fails here fails there the same way.
+import { joining } from './backend.js';
+import { SAVES_STATE } from './fresh.js';
+import { side } from './net.js';
+import { NO_SAVES } from './route.js';
+
+// The store of the saves' database, which holds one snapshot per game and
+// player.
+const SNAPSHOTS = 'snapshots';
+
+// The player the page's URL names, as the page joins its backend under.
+const player = joining(typeof location === 'undefined' ? '' : location.search).player;
+
+// The end of the calls made so far, which the next call runs after, and
+// the loads among them not yet done.
+let last = Promise.resolve();
+let loads = 0;
+
+// Runs `run` once every call made before has settled and the page's
+// storage has started empty; refused at once in a backend, and in a page
+// without the plugin's script.
+function inOrder(op, run) {
+  if (side.backend) return Promise.reject(new DOMException('saves is unavailable in a backend', 'NotSupportedError'));
+  const state = globalThis[Symbol.for(SAVES_STATE)];
+  if (state === undefined) return Promise.reject(new TypeError(`${op}: ${NO_SAVES}`));
+  const call = last.then(() => state.ready).then(() => run(state));
+  last = call.catch(() => {});
+  return call;
+}
+
+// What `localStorage` holds, as a save keeps it.
+function readLocal() {
+  const local = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    local.push([key, localStorage.getItem(key)]);
+  }
+  return local;
+}
+
+// Keeps what `localStorage` holds and what IndexedDB has committed for
+// this game and player, and resolves once it is stored. `localStorage` is
+// read at the call, as Dewdrop snapshots it, unless a load is under way,
+// whose result it then keeps.
+export function save() {
+  const early = loads === 0 && globalThis.localStorage !== undefined ? readLocal() : null;
+  return inOrder('saves.save', async ({ game, database }) => {
+    const local = early ?? readLocal();
+    const kept = await Promise.all((await indexedDB.databases()).map(({ name }) => read(name)));
+    const snapshot = { localStorage: local, databases: kept.filter((each) => each !== null) };
+    const db = await openSaves(database);
+    try {
+      await new Promise((resolve, reject) => {
+        const transaction = db.transaction(SNAPSHOTS, 'readwrite', { durability: 'strict' });
+        transaction.addEventListener('complete', () => resolve());
+        transaction.addEventListener('abort', () => reject(transaction.error ?? new DOMException('saves.save: the save was not stored', 'AbortError')));
+        transaction.objectStore(SNAPSHOTS).put(snapshot, [game, player]);
+      });
+    } finally {
+      db.close();
+    }
+  });
+}
+
+// Replaces `localStorage` and every IndexedDB database with what was saved
+// for this game and player and resolves true, or empties them and resolves
+// false when nothing was.
+export function load() {
+  loads += 1;
+  const done = () => { loads -= 1; };
+  return inOrder('saves.load', async ({ game, database, connected }) => {
+    const db = await openSaves(database);
+    let snapshot;
+    try {
+      snapshot = await answer(db.transaction(SNAPSHOTS, 'readonly').objectStore(SNAPSHOTS).get([game, player]));
+    } finally {
+      db.close();
+    }
+    const names = (await indexedDB.databases()).map(({ name }) => name);
+    // The check and the deletes in one go, so no open of the page's comes
+    // between them.
+    if (connected()) {
+      throw new DOMException('saves.load: an IndexedDB database is open: call saves.load() before opening IndexedDB', 'InvalidStateError');
+    }
+    await Promise.all(names.map((name) => remove(name)));
+    const saved = snapshot ?? { localStorage: [], databases: [] };
+    await Promise.all(saved.databases.map((each) => recreate(each)));
+    localStorage.clear();
+    for (const [key, value] of saved.localStorage) localStorage.setItem(key, value);
+    return snapshot !== undefined;
+  }).finally(done);
+}
+
+// What a request answers, once it does.
+function answer(request) {
+  return new Promise((resolve, reject) => {
+    request.addEventListener('success', () => resolve(request.result));
+    request.addEventListener('error', () => reject(request.error));
+  });
+}
+
+// The saves' database, made on its first open.
+function openSaves(database) {
+  const request = indexedDB.open(database, 1);
+  request.addEventListener('upgradeneeded', () => request.result.createObjectStore(SNAPSHOTS));
+  return answer(request).then((db) => {
+    db.addEventListener('versionchange', () => db.close());
+    return db;
+  });
+}
+
+// One database as it is committed: its version, each store's key path,
+// key generator and indexes, and its records, read in one transaction; or
+// null when it was deleted since it was listed. A delete or an upgrade
+// asked for meanwhile waits only for the read.
+function read(name) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(name);
+    let gone = false;
+    request.addEventListener('upgradeneeded', () => {
+      gone = true;
+      request.transaction.abort();
+    });
+    request.addEventListener('error', () => (gone ? resolve(null) : reject(request.error)));
+    request.addEventListener('success', () => {
+      const db = request.result;
+      db.addEventListener('versionchange', () => db.close());
+      const kept = { name, version: db.version, stores: [] };
+      const names = [...db.objectStoreNames];
+      if (names.length === 0) {
+        db.close();
+        resolve(kept);
+        return;
+      }
+      const transaction = db.transaction(names, 'readonly');
+      for (const storeName of names) {
+        const store = transaction.objectStore(storeName);
+        const indexes = [...store.indexNames].map((indexName) => {
+          const index = store.index(indexName);
+          return { name: indexName, keyPath: index.keyPath, unique: index.unique, multiEntry: index.multiEntry };
+        });
+        const entry = { name: storeName, keyPath: store.keyPath, autoIncrement: store.autoIncrement, indexes, keys: [], values: [] };
+        kept.stores.push(entry);
+        answer(store.getAllKeys()).then((keys) => { entry.keys = keys; }, () => {});
+        answer(store.getAll()).then((values) => { entry.values = values; }, () => {});
+      }
+      transaction.addEventListener('complete', () => {
+        // Each key generator's next key, which no read shows, kept beside
+        // the records, as Dewdrop keeps it.
+        const generators = kept.stores.filter((entry) => entry.autoIncrement);
+        Promise.all(generators.map(async (entry) => { entry.next = await nextKey(db, entry.name); }))
+          .then(() => {
+            db.close();
+            resolve(kept);
+          }, (error) => {
+            db.close();
+            reject(error);
+          });
+      });
+      transaction.addEventListener('abort', () => {
+        db.close();
+        reject(transaction.error);
+      });
+    });
+  });
+}
+
+// The next key the key generator of `storeName` hands out. A browser shows
+// it to no read, so a record is added and the transaction aborted, which
+// takes back the record and the generator's step; null when the add fails.
+// The record is an empty object, which no index can take a key from but
+// one on the generator's own key path.
+function nextKey(db, storeName) {
+  return new Promise((resolve) => {
+    const transaction = db.transaction(storeName, 'readwrite');
+    let next = null;
+    const added = transaction.objectStore(storeName).add({});
+    added.addEventListener('success', () => {
+      next = added.result;
+      transaction.abort();
+    });
+    added.addEventListener('error', (event) => event.preventDefault());
+    transaction.addEventListener('abort', () => resolve(typeof next === 'number' ? next : null));
+    transaction.addEventListener('complete', () => resolve(null));
+  });
+}
+
+// A value holding `key` where `keyPath`, a key generator's, reads it, and
+// nothing an index could take another key from.
+function placeholder(keyPath, key) {
+  const value = {};
+  const names = keyPath.split('.');
+  let at = value;
+  for (const name of names.slice(0, -1)) at = at[name] = {};
+  at[names[names.length - 1]] = key;
+  return value;
+}
+
+// Deletes a database, refused while another tab of the dev server holds it
+// open: the browser deletes it once that tab lets go.
+function remove(name) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.deleteDatabase(name);
+    request.addEventListener('success', () => resolve());
+    request.addEventListener('error', () => reject(request.error));
+    request.addEventListener('blocked', () => reject(heldElsewhere(name)));
+  });
+}
+
+// Makes a saved database again, at its version, with its stores, indexes
+// and records.
+function recreate({ name, version, stores }) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(name, version);
+    request.addEventListener('upgradeneeded', () => {
+      const db = request.result;
+      for (const { name: storeName, keyPath, autoIncrement, indexes, keys, values, next } of stores) {
+        const store = db.createObjectStore(storeName, { keyPath, autoIncrement });
+        for (const index of indexes) {
+          store.createIndex(index.name, index.keyPath, { unique: index.unique, multiEntry: index.multiEntry });
+        }
+        for (let i = 0; i < keys.length; i++) {
+          if (keyPath === null) store.put(values[i], keys[i]);
+          else store.put(values[i]);
+        }
+        // The generator back where it was, past keys deleted since they
+        // were handed out: a key just below its next, put and deleted,
+        // moves it there.
+        if (typeof next === 'number' && next > 1 && !keys.includes(next - 1)) {
+          const put = keyPath === null ? store.put({}, next - 1) : store.put(placeholder(keyPath, next - 1));
+          put.addEventListener('error', (event) => event.preventDefault());
+          store.delete(next - 1);
+        }
+      }
+    });
+    request.addEventListener('blocked', () => reject(heldElsewhere(name)));
+    answer(request).then((db) => {
+      db.close();
+      resolve();
+    }, reject);
+  });
+}
+
+function heldElsewhere(name) {
+  return new DOMException(`saves.load: another tab holds the IndexedDB database ${JSON.stringify(name)} open`, 'InvalidStateError');
+}

package/src/serve.js

@@ -1,7 +1,9 @@
 // The dev server's backend host, its stand-in for Dewdrop. A thread runs
 // the project's backend.js for each room the tabs join, from the room's
-// first tab's join to its last tab's leave, the tabs numbered from one per
-// room; each tab's frame of sends reaches its room's thread over the port
+// first tab's join until five minutes after its last tab's leave, as on
+// Dewdrop, so a tab that comes back in that time rejoins it; the tabs are
+// numbered from one per room, never twice while its thread runs; each
+// tab's frame of sends reaches its room's thread over the port
 // with the tab's number, and each of the thread's sends reaches the tab it
 // names, or every tab of the room, over the socket. An edit to the backend
 // restarts every room and reloads the tabs, which join afresh. A backend
@@ -14,6 +16,10 @@ import { dirname, resolve } from 'node:path';
 import { Worker } from 'node:worker_threads';
 import { label } from './net.js';
 
+// How long a room's backend runs on after its last tab's leave, as on
+// Dewdrop.
+export const EMPTY_ROOM_MS = 5 * 60 * 1000;
+
 // The files an edit to which restarts the backend: the entry and what it
 // reaches through static relative imports.
 export function backendFiles(entry) {
@@ -41,14 +47,17 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
   const rooms = new Map();
   const tabs = new Map();
 
-  // One room's backend: its thread from the room's first tab's join to
-  // its last tab's leave, its tabs by number from one.
+  // One room's backend: its thread from the room's first tab's join until
+  // EMPTY_ROOM_MS after its last tab's leave with none joining since, its
+  // tabs by number from one.
   function createRoom(key) {
     const name = key === '' ? 'the backend' : `the backend of room ${JSON.stringify(key)}`;
     const members = new Map();
     let worker = null;
     let next = 1;
     let broken = false;
+    // While the room is empty, the timer that ends it.
+    let idle = null;
 
     function deliver(sends) {
       for (const [client, number] of members) {
@@ -76,6 +85,8 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
     function stop() {
       const ended = worker;
       worker = null;
+      clearTimeout(idle);
+      idle = null;
       for (const client of members.keys()) tabs.delete(client);
       members.clear();
       next = 1;
@@ -93,6 +104,8 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
     const room = {
       join(client, player) {
         if (broken) return;
+        clearTimeout(idle);
+        idle = null;
         const number = next++;
         members.set(client, number);
         tabs.set(client, room);
@@ -105,12 +118,13 @@ export function createBackendHost({ entry, ws, watcher, origin = () => '', log =
         if (number === undefined) return;
         members.delete(client);
         tabs.delete(client);
+        worker.postMessage([{ kind: 'leave', client: number }]);
         if (members.size === 0) {
-          stop();
-          rooms.delete(key);
-          return;
+          idle = setTimeout(() => {
+            stop();
+            rooms.delete(key);
+          }, EMPTY_ROOM_MS);
         }
-        worker.postMessage([{ kind: 'leave', client: number }]);
       },
       receive(client, items) {
         const number = members.get(client);

package/src/vite.js

@@ -5,15 +5,17 @@
 // `ui/`, and the built page opened in the document by the entry; a game
 // with a backend gets a second chunk beside it, `backend.js`. In dev: the
 // route that carries a model call to its provider with the key from the
-// developer's environment, and the host that runs the game's backend for
-// the tabs that join it. Every other build is untouched. The plugin
+// developer's environment, the host that runs the game's backend for the
+// tabs that join it, and the script that starts each page's storage empty
+// for the game's saves. Every other build is untouched. The plugin
 // imports nothing from Vite itself, so it works linked from a checkout as
 // well as installed, on Vite 3 through 8.
-import { existsSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { ASSETS_DIR, BACKEND_FILE, ENTRY_FILE, PAGE_FILE, detectViteMajor, openPage, outputOptions } from './build.js';
 import { createLlmMiddleware } from './dev.js';
 import { loadKeys } from './env.js';
+import { freshScript } from './fresh.js';
 import { DEV_ROUTE } from './route.js';
 import { createBackendHost } from './serve.js';
 
@@ -36,10 +38,40 @@ export function backendEntry(root) {
   return null;
 }
 
+// `html` with `script` run before anything of the page's own: first in
+// the page, right after its prologue, which comes before every element
+// and runs nothing, so never in a template, a comment or a script of the
+// page's. A prologue is read as a browser reads it: a byte order mark,
+// whitespace, comments — ended by `-->` or `--!>`, or at once as `<!-->`
+// or `<!--->` — and the doctype and any other `<!` or `<?`, ended by the
+// first `>`. A `<meta charset>` of UTF-8, the encoding Vite serves every
+// page in, leads the script: a browser looks for one in a page's first
+// bytes, which the script fills.
+const PROLOGUE = /^\uFEFF?(?:[\t\n\f\r ]+|<!--(?:-?>|[\s\S]*?(?:--!?>|$))|<[!?][^>]*(?:>|$))*/;
+export function withFirstScript(html, script) {
+  const at = PROLOGUE.exec(html)[0].length;
+  return `${html.slice(0, at)}<meta charset="utf-8"><script>${script}</script>${html.slice(at)}`;
+}
+
+// The game a project's dewdrop.json names, which the dev server keeps its
+// saves under: a name as Dewdrop takes one, else none.
+const GAME_NAME = /^[a-z][a-z0-9-]{0,47}$/;
+export function projectGame(root) {
+  try {
+    const { game } = JSON.parse(readFileSync(resolve(root, 'dewdrop.json'), 'utf8'));
+    return typeof game === 'string' && GAME_NAME.test(game) ? game : '';
+  } catch {
+    return '';
+  }
+}
+
 export default function dew() {
   let dewBuild = false;
   let serving = false;
   let entry = null;
+  let game = '';
+  // The dev server's backend host, from the server's start to its close.
+  let host = null;
   return {
     name: 'dew',
     config(userConfig, env) {
@@ -47,6 +79,7 @@ export default function dew() {
       entry = backendEntry(root);
       dewBuild = env.mode === DEW_MODE;
       serving = env.command === 'serve';
+      game = serving ? projectGame(root) : '';
       if (!dewBuild) {
         // Served as source, so the hot context the client's `backend`
         // joins over is injected as in the game's own modules.
@@ -107,11 +140,16 @@ export default function dew() {
       },
     },
     // The page the dev server serves is told whether the game has a
-    // backend, which the client's `backend` reads before it joins; a
-    // build's page, which no dev server serves, is left alone.
-    transformIndexHtml() {
+    // backend, which the client's `backend` reads before it joins, and
+    // starts with its storage empty, as on Dewdrop, from a script first
+    // in the page, before anything of its own.
+    // A build's page, which no dev server serves, is left alone.
+    transformIndexHtml(html) {
       if (!serving) return undefined;
-      return [{ tag: 'meta', attrs: { name: 'dew-backend', content: entry === null ? 'no' : 'yes' }, injectTo: 'head' }];
+      return {
+        html: withFirstScript(html, freshScript(game)),
+        tags: [{ tag: 'meta', attrs: { name: 'dew-backend', content: entry === null ? 'no' : 'yes' }, injectTo: 'head' }],
+      };
     },
     configureServer(server) {
       // The keys come from the project's own .env files and the
@@ -120,12 +158,20 @@ export default function dew() {
       const env = loadKeys(server.config.envDir ?? server.config.root, server.config.mode);
       server.middlewares.use(DEV_ROUTE, createLlmMiddleware({ env }));
       if (entry === null) return;
-      createBackendHost({
+      host = createBackendHost({
         entry,
         ws: server.ws,
         watcher: server.watcher,
         origin: () => server.resolvedUrls?.local?.[0]?.replace(/\/$/, '') ?? server.config.server?.origin ?? '',
       });
     },
+    // The dev server closing — in middleware mode too, which has no HTTP
+    // server of its own — ends every room: a backend left running for an
+    // empty room would hold the process open past the server it served.
+    // A build's close has no host to end.
+    closeBundle() {
+      host?.close();
+      host = null;
+    },
   };
 }