@weft-js/start 0.1.0 → 0.1.2

package/src/bus.ts

@@ -19,9 +19,9 @@ export function slotBus(plugin: string, load: () => Promise<Bus>): Bus {
   const get = () => (bus ??= load())
   return {
     name: plugin.replace(/^.*realtime-/, ''),
-    publish: (channel, message) => get().then(b => b.publish(channel, message)),
-    subscribe: (channel, on, gap) => get().then(b => b.subscribe(channel, on, gap)),
-    close: () => (bus ? bus.then(b => b.close?.()) : Promise.resolve()),
+    publish: (channel, message) => get().then((b) => b.publish(channel, message)),
+    subscribe: (channel, on, gap) => get().then((b) => b.subscribe(channel, on, gap)),
+    close: () => (bus ? bus.then((b) => b.close?.()) : Promise.resolve()),
   }
 }
 
@@ -32,7 +32,10 @@ export function memoryBus(): Bus {
     name: 'memory',
     publish(channel, message) {
       const list = channels.get(channel)
-      if (list) queueMicrotask(() => { for (const on of list) on(message) })
+      if (list)
+        queueMicrotask(() => {
+          for (const on of list) on(message)
+        })
       return Promise.resolve()
     },
     subscribe(channel, on) {

package/src/{capture.mjs → capture.ts}

@@ -12,4 +12,37 @@
 const CODE = `(n=>{var d=document,c=navigator.connection,q=window.__wq={q:[],n:n,w(){},d:matchMedia("(prefers-reduced-data: reduce)").matches||!!(c&&c.saveData),p(e){var t=e.target,r=q.r,s=e.submitter;if(t.isConnected){q.r=1;try{e.type=="submit"?t.requestSubmit(s&&s.isConnected?s:void 0):e.type=="reset"?t.reset():t.dispatchEvent(new e.constructor(e.type,e))}finally{q.r=r}}}},o=t=>t.closest&&t.closest("[wk]"),h=e=>{var k=!q.r&&o(e.target);if(k&&(!k.$k||q.q.length)&&!((e.metaKey||e.ctrlKey||e.shiftKey)&&e.type=="click"&&e.target.closest("a"))){q.q.push(e);/^(click|submit|reset)$/.test(e.type)&&e.preventDefault();q.w(k)}},l=e=>{var k=o(e.target);k&&!k.$k&&!q.d&&q.w(k,1)};"click dblclick pointerdown pointerup mousedown mouseup keydown keyup input change submit reset focus blur focusin focusout".split(" ").forEach(t=>d.addEventListener(t,h,!0));"pointerover touchstart".split(" ").forEach(t=>d.addEventListener(t,l,{capture:!0,passive:!0}))})`
 
 /** The script's text. `now`: the page has work that can't wait, so its code loads straight away. */
-export const capture = now => `${CODE}(${now ? 1 : 0})`
+export const capture = (now: boolean) => `${CODE}(${now ? 1 : 0})`
+
+/**
+ * A page that runs no client until it's needed follows its links with full loads, so the browser prefetches the one the
+ * pointer rests on (`moderate`). Not a prerender, which would run the next page's code unseen. An island's links go
+ * through the router once its code comes, so they're left out, as is `/_weft/` and anything under `data-preload="off"`;
+ * `start()` takes the rules down when the router takes over, so nothing is fetched twice.
+ */
+const RULES = JSON.stringify({
+  prefetch: [
+    {
+      source: 'document',
+      where: {
+        and: [
+          { href_matches: '/*' },
+          { not: { href_matches: '/_weft/*' } },
+          {
+            not: {
+              selector_matches:
+                '[wk] a, a[wk], [data-preload="off"] a, a[data-preload="off"], a[download]',
+            },
+          },
+        ],
+      },
+      eagerness: 'moderate',
+    },
+  ],
+})
+
+/** The rules, for a page whose code waits (`now` false, nothing streaming). */
+export const speculate = (shape: { now: boolean; streaming?: boolean }) =>
+  shape.now || shape.streaming
+    ? ''
+    : `<script type="speculationrules" id="weft-speculate">${RULES}</script>\n`

package/src/changes-sql.d.mts

@@ -9,6 +9,12 @@ export const LOG_ROWS: number
 /** Between statements of generated SQL, as Drizzle splits them. */
 export const BREAK: string
 /** The trigger statements for these tables, one by one. */
-export function changeStatements(dialect: string, tables: readonly { name: string; pk?: string[] }[]): string[]
+export function changeStatements(
+  dialect: string,
+  tables: readonly { name: string; pk?: string[] }[],
+): string[]
 /** The same statements as one migration. */
-export function changeSql(dialect: string, tables: readonly { name: string; pk?: string[] }[]): string
+export function changeSql(
+  dialect: string,
+  tables: readonly { name: string; pk?: string[] }[],
+): string

package/src/changes-sql.mjs

@@ -14,10 +14,10 @@ export const MAX_IDS = 32
 export const LOG_ROWS = 4096
 export const BREAK = '\n--> statement-breakpoint\n'
 
-const pgName = n => `"${n.replaceAll('"', '""')}"`
-const myName = n => `\`${n.replaceAll('`', '``')}\``
-const literal = s => `'${s.replaceAll("'", "''")}'`
-const safe = t => t.replace(/\W/g, '_')
+const pgName = (n) => `"${n.replaceAll('"', '""')}"`
+const myName = (n) => `\`${n.replaceAll('`', '``')}\``
+const literal = (s) => `'${s.replaceAll("'", "''")}'`
+const safe = (t) => t.replace(/\W/g, '_')
 
 function postgres(tables) {
   const fn = `CREATE OR REPLACE FUNCTION weft_changes_notify() RETURNS trigger AS $weft$
@@ -48,7 +48,12 @@ $weft$ LANGUAGE plpgsql`
       `DROP TRIGGER IF EXISTS weft_changes_${suffix} ON ${on}`,
       `CREATE TRIGGER weft_changes_${suffix} AFTER ${event} ON ${on} ${rows ? `REFERENCING ${rows} TABLE AS weft_rows ` : ''}FOR EACH STATEMENT EXECUTE FUNCTION weft_changes_notify(${args})`,
     ]
-    return [...trigger('ins', 'INSERT', 'NEW'), ...trigger('upd', 'UPDATE', 'NEW'), ...trigger('del', 'DELETE', 'OLD'), ...trigger('trn', 'TRUNCATE')]
+    return [
+      ...trigger('ins', 'INSERT', 'NEW'),
+      ...trigger('upd', 'UPDATE', 'NEW'),
+      ...trigger('del', 'DELETE', 'OLD'),
+      ...trigger('trn', 'TRUNCATE'),
+    ]
   })
   return [fn, ...list]
 }
@@ -56,7 +61,8 @@ $weft$ LANGUAGE plpgsql`
 function sqlite(tables) {
   const log = `CREATE TABLE IF NOT EXISTS ${LOG} (seq INTEGER PRIMARY KEY AUTOINCREMENT, tbl TEXT NOT NULL, pk TEXT)`
   const list = tables.flatMap(({ name, pk }) => {
-    const id = row => (pk.length ? pk.map(c => `${row}.${pgName(c)}`).join(` || ':' || `) : 'NULL')
+    const id = (row) =>
+      pk.length ? pk.map((c) => `${row}.${pgName(c)}`).join(` || ':' || `) : 'NULL'
     const trigger = (suffix, event, row) => [
       `DROP TRIGGER IF EXISTS weft_changes_${safe(name)}_${suffix}`,
       `CREATE TRIGGER weft_changes_${safe(name)}_${suffix} AFTER ${event} ON ${pgName(name)} BEGIN
@@ -64,7 +70,11 @@ function sqlite(tables) {
   DELETE FROM ${LOG} WHERE seq <= last_insert_rowid() - ${LOG_ROWS};
 END`,
     ]
-    return [...trigger('ins', 'INSERT', 'NEW'), ...trigger('upd', 'UPDATE', 'NEW'), ...trigger('del', 'DELETE', 'OLD')]
+    return [
+      ...trigger('ins', 'INSERT', 'NEW'),
+      ...trigger('upd', 'UPDATE', 'NEW'),
+      ...trigger('del', 'DELETE', 'OLD'),
+    ]
   })
   return [log, ...list]
 }
@@ -72,12 +82,17 @@ END`,
 function mysql(tables) {
   const log = `CREATE TABLE IF NOT EXISTS ${LOG} (seq BIGINT AUTO_INCREMENT PRIMARY KEY, tbl VARCHAR(64) NOT NULL, pk VARCHAR(255), at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, KEY at_idx (at))`
   const list = tables.flatMap(({ name, pk }) => {
-    const id = row => (pk.length ? `CONCAT_WS(':', ${pk.map(c => `${row}.${myName(c)}`).join(', ')})` : 'NULL')
+    const id = (row) =>
+      pk.length ? `CONCAT_WS(':', ${pk.map((c) => `${row}.${myName(c)}`).join(', ')})` : 'NULL'
     const trigger = (suffix, event, row) => [
       `DROP TRIGGER IF EXISTS weft_changes_${safe(name)}_${suffix}`,
       `CREATE TRIGGER weft_changes_${safe(name)}_${suffix} AFTER ${event} ON ${myName(name)} FOR EACH ROW INSERT INTO ${LOG} (tbl, pk) VALUES (${literal(name)}, ${id(row)})`,
     ]
-    return [...trigger('ins', 'INSERT', 'NEW'), ...trigger('upd', 'UPDATE', 'NEW'), ...trigger('del', 'DELETE', 'OLD')]
+    return [
+      ...trigger('ins', 'INSERT', 'NEW'),
+      ...trigger('upd', 'UPDATE', 'NEW'),
+      ...trigger('del', 'DELETE', 'OLD'),
+    ]
   })
   return [log, ...list]
 }
@@ -96,4 +111,5 @@ export function changeStatements(dialect, tables) {
 }
 
 /** A migration file, in drizzle-kit's format. */
-export const changeSql = (dialect, tables) => `-- weft: report changes to ${tables.map(t => t.name).join(', ')} (\`weft db live\`). Ids only, never a row.\n${changeStatements(dialect, tables).join(`;${BREAK}`)};\n`
+export const changeSql = (dialect, tables) =>
+  `-- weft: report changes to ${tables.map((t) => t.name).join(', ')} (\`weft db live\`). Ids only, never a row.\n${changeStatements(dialect, tables).join(`;${BREAK}`)};\n`

package/src/changes.ts

@@ -20,7 +20,10 @@ import type { DbHandle } from './db/core'
 export type { LiveMode } from './data'
 
 /** What changed: never what it changed to. No `id`: the whole table. */
-export interface Change { table: string; id?: string }
+export interface Change {
+  table: string
+  id?: string
+}
 
 /** What a source learned about this database, by trying it. `feed` sees every change; `poll` only estimates. */
 export interface Probe {
@@ -64,7 +67,10 @@ export interface Source {
 }
 
 /** A table as `Source.defs` reports it. */
-export interface TableDef { name: string; pk: string[] }
+export interface TableDef {
+  name: string
+  pk: string[]
+}
 
 /** `dbChanges`: how to listen, and how a change turns into tags. */
 export interface ChangeOptions {
@@ -79,12 +85,25 @@ export interface ChangeOptions {
 }
 
 const NAME = Symbol.for('drizzle:Name')
-const nameOf = (t: unknown): string => (typeof t === 'string' ? t : (t as Record<symbol, string> | null)?.[NAME] ?? (() => { throw new StartError('R017', `\`dbChanges\` got something that isn't a table: ${String(t)}`, 'pass Drizzle tables, or their names') })())
+const nameOf = (t: unknown): string =>
+  typeof t === 'string'
+    ? t
+    : ((t as Record<symbol, string> | null)?.[NAME] ??
+      (() => {
+        throw new StartError(
+          'R017',
+          `\`dbChanges\` got something that isn't a table: ${String(t)}`,
+          'pass Drizzle tables, or their names',
+        )
+      })())
 
 const CORE = { sqlite: 'sqlite-core', postgresql: 'pg-core', mysql: 'mysql-core' }
 
 /** A table's primary key columns, from its Drizzle definition. */
-interface Key { name: string; primary?: boolean }
+interface Key {
+  name: string
+  primary?: boolean
+}
 
 async function pkOf(table: unknown, dialect: DbHandle['dialect']): Promise<string[]> {
   const { getTableConfig } = await import(/* @vite-ignore */ `drizzle-orm/${CORE[dialect]}`)
@@ -94,9 +113,18 @@ async function pkOf(table: unknown, dialect: DbHandle['dialect']): Promise<strin
 }
 
 /** `realtime({ changes: dbChanges(db, [todos, notes]) })`: these tables' writes reach `.live`, whoever made them. */
-export function dbChanges(db: { $weft?: DbHandle }, tables: unknown[], options: ChangeOptions = {}): Source {
+export function dbChanges(
+  db: { $weft?: DbHandle },
+  tables: unknown[],
+  options: ChangeOptions = {},
+): Source {
   const handle = db?.$weft
-  if (!handle?.changes) throw new StartError('R017', '`dbChanges` needs a client from `@weft-js/start/db/sqlite`, `/postgres` or `/mysql`', 'for MongoDB use `mongoChanges` from `@weft-js/db/mongo`; for another client, write a `Source`')
+  if (!handle?.changes)
+    throw new StartError(
+      'R017',
+      '`dbChanges` needs a client from `@weft-js/start/db/sqlite`, `/postgres` or `/mysql`',
+      'for MongoDB use `mongoChanges` from `@weft-js/db/mongo`; for another client, write a `Source`',
+    )
   const names = tables.map(nameOf)
   let source: Promise<Omit<Source, 'name' | 'tables'>> | undefined
   const load = () => (source ??= handle.changes!(names, options))
@@ -106,15 +134,25 @@ export function dbChanges(db: { $weft?: DbHandle }, tables: unknown[], options:
     tables: names,
     external: options.listener === 'external',
     tagged: options.tagged,
-    defs: () => Promise.all(tables.map(async t => ({ name: nameOf(t), pk: typeof t === 'string' ? [] : await pkOf(t, handle.dialect) }))),
-    probe: () => load().then(s => s.probe()),
-    start: (sink, probe) => load().then(s => s.start(sink, probe)),
-    settle: tags => load().then(s => s.settle?.(tags)),
+    defs: () =>
+      Promise.all(
+        tables.map(async (t) => ({
+          name: nameOf(t),
+          pk: typeof t === 'string' ? [] : await pkOf(t, handle.dialect),
+        })),
+      ),
+    probe: () => load().then((s) => s.probe()),
+    start: (sink, probe) => load().then((s) => s.start(sink, probe)),
+    settle: (tags) => load().then((s) => s.settle?.(tags)),
   }
 }
 
 /** Set by a platform, read at run time: this process lives for one request. */
-export function functionHost(env: Record<string, string | undefined> = (globalThis as unknown as { process?: { env: Record<string, string | undefined> } }).process?.env ?? {}): string | undefined {
+export function functionHost(
+  env: Record<string, string | undefined> = (
+    globalThis as unknown as { process?: { env: Record<string, string | undefined> } }
+  ).process?.env ?? {},
+): string | undefined {
   if (env.VERCEL) return 'Vercel'
   if (env.NETLIFY || env.NETLIFY_LOCAL) return 'Netlify'
   if (env.AWS_LAMBDA_FUNCTION_NAME) return 'AWS Lambda'
@@ -125,7 +163,11 @@ export function functionHost(env: Record<string, string | undefined> = (globalTh
 }
 
 /** What a change sends to live queries, as tags to refetch. */
-export interface Poke { t: string[]; /** Tag prefixes: `todos:` for every row of a table-level change. */ p?: string[]; /** Tags a barrier covered: a subscription with one of them is poked already. */ k?: string[] }
+export interface Poke {
+  t: string[]
+  /** Tag prefixes: `todos:` for every row of a table-level change. */ p?: string[]
+  /** Tags a barrier covered: a subscription with one of them is poked already. */ k?: string[]
+}
 
 /** Where a feed's pokes go: this instance, and the rest through the bus. */
 export interface FeedOut {
@@ -145,23 +187,116 @@ export interface Feed {
   readonly running: boolean
 }
 
-const unref = <T,>(t: T) => ((t as { unref?(): void } | null | undefined)?.unref?.(), t)
+const unref = <T>(t: T) => ((t as { unref?(): void } | null | undefined)?.unref?.(), t)
+
+function feedHandle(
+  source: Source,
+  known: Set<string>,
+  sink: Sink,
+  cancel: () => void,
+  barrier: number,
+): Feed {
+  // stopped → starting → running → stopped. A start that resolves after stop() (its turn has passed) is stopped at
+  // once, so a listener can't outlive the feed.
+  let phase: 'stopped' | 'starting' | 'running' = 'stopped'
+  let turn = 0
+  let stopping: (() => unknown) | undefined
+  return {
+    get running() {
+      return phase !== 'stopped'
+    },
+    covers(tag) {
+      const at = tag.indexOf(':')
+      return known.has(at < 0 ? tag : tag.slice(0, at))
+    },
+    async start(probe) {
+      if (phase !== 'stopped') return
+      phase = 'starting'
+      const mine = ++turn
+      let stop: (() => unknown) | undefined
+      try {
+        stop = await source.start(sink, probe)
+      } catch (e) {
+        if (turn === mine) phase = 'stopped'
+        throw e
+      }
+      if (turn !== mine) return void (await stop?.())
+      stopping = stop
+      phase = 'running'
+    },
+    async stop() {
+      cancel()
+      turn++
+      phase = 'stopped'
+      const stop = stopping
+      stopping = undefined
+      await stop?.()
+    },
+    async settle(tags) {
+      const ours = tags.filter((t) => this.covers(t))
+      if (!ours.length || !source.settle) return
+      let late: ReturnType<typeof setTimeout> | undefined
+      await Promise.race([
+        source.settle(ours),
+        new Promise<void>((ok) => {
+          late = unref(setTimeout(ok, barrier))
+        }),
+      ]).catch(() => {})
+      clearTimeout(late)
+    },
+  }
+}
+
+function addChanges(
+  list: Change[],
+  o: {
+    known: Set<string>
+    source: Source
+    pending: Set<string>
+    covered: Set<string>
+    prefixes: Set<string>
+    out: FeedOut
+    arm: () => void
+  },
+) {
+  const { known, source, pending, covered, prefixes, out, arm } = o
+  const seen: string[] = []
+  for (const c of list) {
+    if (!known.has(c.table)) continue
+    for (const t of source.tagged?.(c) ??
+      (c.id === undefined ? [c.table] : [c.table, `${c.table}:${c.id}`])) {
+      pending.add(t)
+      covered.delete(t) // a change after the barrier: no poke covers it
+      seen.push(t)
+    }
+    if (c.id === undefined) prefixes.add(`${c.table}:`)
+  }
+  if (!seen.length) return
+  out.bump?.(seen)
+  arm()
+}
 
 /** Batches a source's changes into pokes, held and throttled so a burst of writes is one refetch. */
-export function createFeed(source: Source, out: FeedOut, { hold = source.hold ?? 25, throttle = 250, barrier = 1000 } = {}): Feed {
+export function createFeed(
+  source: Source,
+  out: FeedOut,
+  { hold = source.hold ?? 25, throttle = 250, barrier = 1000 } = {},
+): Feed {
   const known = new Set(source.tables)
-  let pending = new Set<string>(), prefixes = new Set<string>(), covered = new Set<string>()
+  let pending = new Set<string>(),
+    prefixes = new Set<string>(),
+    covered = new Set<string>()
   let timer: ReturnType<typeof setTimeout> | undefined
   let last = 0
   let first: number | undefined
-  let stopping: (() => unknown) | undefined
-  let running = false
   let isDown = false
 
   const flush = () => {
     timer = first = undefined
     last = Date.now()
-    const t = [...pending], p = [...prefixes], k = [...covered]
+    const t = [...pending],
+      p = [...prefixes],
+      k = [...covered]
     pending = new Set()
     prefixes = new Set()
     covered = new Set()
@@ -172,27 +307,13 @@ export function createFeed(source: Source, out: FeedOut, { hold = source.hold ??
     const now = Date.now()
     first ??= now
     clearTimeout(timer)
-    timer = unref(setTimeout(flush, Math.max(Math.min(hold, first + throttle - now), last + throttle - now)))
+    timer = unref(
+      setTimeout(flush, Math.max(Math.min(hold, first + throttle - now), last + throttle - now)),
+    )
   }
 
-  const tagsOf = (change: Change) => source.tagged?.(change) ?? (change.id === undefined ? [change.table] : [change.table, `${change.table}:${change.id}`])
-
   const sink: Sink = {
-    changes(list) {
-      const seen: string[] = []
-      for (const c of list) {
-        if (!known.has(c.table)) continue
-        for (const t of tagsOf(c)) {
-          pending.add(t)
-          covered.delete(t) // a change after the barrier: no poke covers it
-          seen.push(t)
-        }
-        if (c.id === undefined) prefixes.add(`${c.table}:`)
-      }
-      if (!seen.length) return
-      out.bump?.(seen)
-      arm()
-    },
+    changes: (list) => addChanges(list, { known, source, pending, covered, prefixes, out, arm }),
     settled(tags) {
       for (const t of tags) {
         if (pending.delete(t)) covered.add(t)
@@ -204,7 +325,7 @@ export function createFeed(source: Source, out: FeedOut, { hold = source.hold ??
       covered = new Set()
     },
     lost() {
-      sink.changes(source.tables.map(table => ({ table })))
+      sink.changes(source.tables.map((table) => ({ table })))
     },
     down(why) {
       if (isDown) return
@@ -218,36 +339,14 @@ export function createFeed(source: Source, out: FeedOut, { hold = source.hold ??
     },
   }
 
-  return {
-    get running() { return running },
-    covers(tag) {
-      const at = tag.indexOf(':')
-      return known.has(at < 0 ? tag : tag.slice(0, at))
-    },
-    async start(probe) {
-      if (running) return
-      running = true
-      try {
-        stopping = await source.start(sink, probe)
-      } catch (e) {
-        running = false
-        throw e
-      }
-    },
-    async stop() {
+  return feedHandle(
+    source,
+    known,
+    sink,
+    () => {
       clearTimeout(timer)
       timer = undefined
-      running = false
-      const stop = stopping
-      stopping = undefined
-      await stop?.()
     },
-    async settle(tags) {
-      const ours = tags.filter(t => this.covers(t))
-      if (!ours.length || !source.settle) return
-      let late: ReturnType<typeof setTimeout> | undefined
-      await Promise.race([source.settle(ours), new Promise<void>(ok => { late = unref(setTimeout(ok, barrier)) })]).catch(() => {})
-      clearTimeout(late)
-    },
-  }
+    barrier,
+  )
 }