@weft-js/start 0.1.1 → 0.1.3

package/src/mux.ts

@@ -11,11 +11,19 @@ import { attach, type Attached, type Peer } from './socket'
 const LINES = 64
 const HIGH = 64 * 1024
 
-interface Physical { send(text: string): void; close(code: number, reason?: string): void; backlog(): number }
+interface Physical {
+  send(text: string): void
+  close(code: number, reason?: string): void
+  backlog(): number
+}
 type Open = { kind: 'c'; a: Promise<Attached> } | { kind: 'r'; c: Promise<Conn | undefined> }
 
 const parsed = (text: string): unknown => {
-  try { return JSON.parse(text) } catch { return undefined }
+  try {
+    return JSON.parse(text)
+  } catch {
+    return undefined
+  }
 }
 
 const counts = new WeakMap<Hub, Map<string, number>>()
@@ -25,27 +33,154 @@ const byUser = (h: Hub) => {
   return m
 }
 
-export interface Muxed { message(text: string): void; close(): void }
+interface Socket {
+  peer: Physical
+  request: Request
+  scope: Scope
+  h: Hub
+  lines: Map<string, Open>
+}
+
+function openLines(
+  { peer, request, scope, h, lines }: Socket,
+  end: (id: string, code: number, reason?: string) => void,
+) {
+  function openC(id: string) {
+    const p: Peer = {
+      send: (t) => {
+        if (lines.has(id)) peer.send(`f:${id}:${t}`)
+      },
+      close: (code, reason) => end(id, code, reason),
+      backlog: () => peer.backlog(),
+    }
+    lines.set(id, {
+      kind: 'c',
+      a: attach(p, request, scope, h, true).catch(() => {
+        end(id, 1011)
+        return { message() {}, close() {} } as unknown as Attached
+      }),
+    })
+  }
+
+  function openR(id: string, hello: string) {
+    const body = parsed(hello)
+    if (!validBody(body) || body.k)
+      return peer.send(
+        `x:${id}:4000:${JSON.stringify({ code: 'Q002', message: 'a realtime line opened with a body of the wrong shape' })}`,
+      )
+    const sink: Sink = {
+      write: (event, data) => {
+        if (lines.has(id)) peer.send(`r:${id}:${event}:${data}`)
+      },
+      ping: () => {
+        if (lines.has(id)) peer.send(`r:${id}:ping:`)
+      },
+      backlog: () => peer.backlog(),
+      close: () => end(id, 1000),
+    }
+    const c = h.connect(request, scope, body, sink, true).catch((e) => {
+      const out =
+        e instanceof StartError
+          ? { code: e.code, message: e.message }
+          : { message: 'Realtime failed.' }
+      end(id, 4000, JSON.stringify(out))
+      return undefined
+    })
+    lines.set(id, { kind: 'r', c })
+  }
+
+  return { openC, openR }
+}
+
+function messages(
+  { peer, request, scope, h, lines }: Socket,
+  {
+    allowed,
+    end,
+    shut,
+    openC,
+    openR,
+  }: {
+    allowed: () => boolean
+    end: (id: string, code: number, reason?: string) => void
+    shut: (id: string, line: Open) => void
+    openC: (id: string) => void
+    openR: (id: string, hello: string) => void
+  },
+) {
+  return (text: string) => {
+    if (text === 'p') return peer.send('p')
+    if (text.length > h.limits.body + 64) return peer.close(1009, 'too big')
+    if (!allowed()) {
+      scope.options.onDiagnostic?.({
+        code: 'R008',
+        severity: 'error',
+        message: `R008: one browser sent over ${h.limits.perSecond * 8} messages a second`,
+      })
+      return peer.close(1008, 'rate limit')
+    }
+    const at = text.indexOf(':', 2)
+    const id = text.slice(2, at),
+      rest = text.slice(at + 1)
+    const line = lines.get(id)
+    if (text[0] === 'f') {
+      if (line?.kind === 'c') void line.a.then((a) => a.message(rest))
+      else if (line) {
+        let body: Body | undefined
+        try {
+          body = JSON.parse(rest)
+        } catch {}
+        if (validBody(body))
+          void line.c
+            .then((c) => c && h.change(c, request, scope.options, body))
+            .catch(() => end(id, 1011))
+      }
+    } else if (text[0] === 'x') {
+      if (line) shut(id, line)
+    } else if (text[0] === 'o') {
+      if (line) return
+      if (lines.size >= LINES) return peer.send(`x:${id}:1008:too many lines`)
+      if (rest[0] === 'c') openC(id)
+      else if (rest[0] === 'r') openR(id, rest.slice(2))
+    }
+  }
+}
+
+export interface Muxed {
+  message(text: string): void
+  close(): void
+}
 
-export async function muxed(peer: Physical, request: Request, scope: Scope, h: Hub = hub()): Promise<Muxed> {
+export async function muxed(
+  peer: Physical,
+  request: Request,
+  scope: Scope,
+  h: Hub = hub(),
+): Promise<Muxed> {
   const ctx = await scope.ctx()
   const user = (ctx as { user?: { id?: string } }).user?.id
   const users = byUser(h)
   if (user !== undefined) {
     if ((users.get(user) ?? 0) >= h.limits.connections) {
       peer.close(1008, 'too many sockets')
-      scope.options.onDiagnostic?.({ code: 'R009', severity: 'error', message: `R009: user \`${user}\` already has ${h.limits.connections} sockets` })
+      scope.options.onDiagnostic?.({
+        code: 'R009',
+        severity: 'error',
+        message: `R009: user \`${user}\` already has ${h.limits.connections} sockets`,
+      })
       return { message() {}, close() {} }
     }
     users.set(user, (users.get(user) ?? 0) + 1)
   }
   const lines = new Map<string, Open>()
+  const socket = { peer, request, scope, h, lines }
   const bucket = { tokens: h.limits.burst * 8, at: Date.now() }
   let closed = false
 
   /** Every tab has the per-socket bucket; this is what stops them adding up without end. */
   const allowed = () => {
-    const now = Date.now(), rate = h.limits.perSecond * 8
+    const now = Date.now(),
+      rate = h.limits.perSecond * 8
     bucket.tokens = Math.min(h.limits.burst * 8, bucket.tokens + ((now - bucket.at) * rate) / 1000)
     bucket.at = now
     return bucket.tokens-- >= 1
@@ -55,81 +190,43 @@ export async function muxed(peer: Physical, request: Request, scope: Scope, h: H
     peer.send(`x:${id}:${code}:${reason}`)
   }
 
-  function openC(id: string) {
-    const p: Peer = { send: t => { if (lines.has(id)) peer.send(`f:${id}:${t}`) }, close: (code, reason) => end(id, code, reason), backlog: () => peer.backlog() }
-    lines.set(id, { kind: 'c', a: attach(p, request, scope, h, true).catch(() => {
-      end(id, 1011)
-      return { message() {}, close() {} } as unknown as Attached
-    }) })
-  }
-
-  function openR(id: string, hello: string) {
-    const body = parsed(hello)
-    if (!validBody(body) || body.k) return peer.send(`x:${id}:4000:${JSON.stringify({ code: 'Q002', message: 'a realtime line opened with a body of the wrong shape' })}`)
-    const sink: Sink = {
-      write: (event, data) => { if (lines.has(id)) peer.send(`r:${id}:${event}:${data}`) },
-      ping: () => { if (lines.has(id)) peer.send(`r:${id}:ping:`) },
-      backlog: () => peer.backlog(),
-      close: () => end(id, 1000),
-    }
-    const c = h.connect(request, scope, body, sink, true).catch(e => {
-      const out = e instanceof StartError ? { code: e.code, message: e.message } : { message: 'Realtime failed.' }
-      end(id, 4000, JSON.stringify(out))
-      return undefined
-    })
-    lines.set(id, { kind: 'r', c })
-  }
+  const { openC, openR } = openLines(socket, end)
 
   function shut(id: string, line: Open) {
     lines.delete(id)
-    if (line.kind === 'c') void line.a.then(a => a.close())
-    else void line.c.then(c => c && h.close(c))
+    if (line.kind === 'c') void line.a.then((a) => a.close())
+    else void line.c.then((c) => c && h.close(c))
   }
 
   const drain = setInterval(() => {
     if (peer.backlog() >= HIGH) return
-    for (const l of lines.values()) if (l.kind === 'r') void l.c.then(c => c && h.drain(c))
+    for (const l of lines.values()) if (l.kind === 'r') void l.c.then((c) => c && h.drain(c))
   }, 100)
   ;(drain as { unref?(): void }).unref?.()
 
-  peer.send(`h:${await sessionOf(ctx)}`)
+  const release = () => {
+    clearInterval(drain)
+    if (user === undefined) return
+    const n = (users.get(user) ?? 1) - 1
+    if (n) users.set(user, n)
+    else users.delete(user)
+  }
+  try {
+    peer.send(`h:${await sessionOf(ctx)}`)
+  } catch (e) {
+    release() // the caller never gets a close() for a socket that failed to open
+    throw e
+  }
+  const message = messages(socket, { allowed, end, shut, openC, openR })
   return {
     message(text) {
-      if (text === 'p') return peer.send('p')
-      if (text.length > h.limits.body + 64) return peer.close(1009, 'too big')
-      if (!allowed()) {
-        scope.options.onDiagnostic?.({ code: 'R008', severity: 'error', message: `R008: one browser sent over ${h.limits.perSecond * 8} messages a second` })
-        return peer.close(1008, 'rate limit')
-      }
-      const at = text.indexOf(':', 2)
-      const id = text.slice(2, at), rest = text.slice(at + 1)
-      const line = lines.get(id)
-      if (text[0] === 'f') {
-        if (line?.kind === 'c') void line.a.then(a => a.message(rest))
-        else if (line) {
-          let body: Body | undefined
-          try { body = JSON.parse(rest) } catch {}
-          if (validBody(body)) void line.c.then(c => c && h.change(c, request, scope.options, body)).catch(() => end(id, 1011))
-        }
-      } else if (text[0] === 'x') {
-        if (line) shut(id, line)
-      } else if (text[0] === 'o') {
-        if (line) return
-        if (lines.size >= LINES) return  peer.send(`x:${id}:1008:too many lines`)
-        if (rest[0] === 'c') openC(id)
-        else if (rest[0] === 'r') openR(id, rest.slice(2))
-      }
+      return message(text)
     },
     close() {
       if (closed) return
       closed = true
-      clearInterval(drain)
       for (const [id, line] of Array.from(lines)) shut(id, line)
-      if (user !== undefined) {
-        const n = (users.get(user) ?? 1) - 1
-        if (n) users.set(user, n)
-        else users.delete(user)
-      }
+      release()
     },
   }
 }

package/src/og/DefaultCard.tsx

@@ -24,7 +24,11 @@ const family = (name: string | undefined) => (name ? `'${name}',Inter` : 'Inter'
 /** The title without the template the site wraps around it: the card shows the site's name on its own. */
 function heading(title: string, template: string | undefined) {
   const [before = '', after = ''] = template?.split('%s') ?? []
-  return title.startsWith(before) && title.endsWith(after) && title.length > before.length + after.length ? title.slice(before.length, title.length - after.length) : title
+  return title.startsWith(before) &&
+    title.endsWith(after) &&
+    title.length > before.length + after.length
+    ? title.slice(before.length, title.length - after.length)
+    : title
 }
 
 /** Everything the card draws, worked out once: a card renders one time, to a string. */
@@ -36,8 +40,13 @@ function look({ title, description, site, path }: DefaultProps) {
   const host = site.url?.replace(/^https?:\/\//, '').replace(/\/+$/, '')
   const shown = heading(title, site.title)
   return {
-    c, description, title: shown, name: site.name ?? '', size: cardTitleSize(shown),
-    display: family(card.fonts?.display?.family), body: family(card.fonts?.body?.family),
+    c,
+    description,
+    title: shown,
+    name: site.name ?? '',
+    size: cardTitleSize(shown),
+    display: family(card.fonts?.display?.family),
+    body: family(card.fonts?.body?.family),
     address: host && host + (path && path !== '/' ? path.replace(/[?#].*/, '') : ''),
   }
 }
@@ -45,16 +54,38 @@ function look({ title, description, site, path }: DefaultProps) {
 export function DefaultCard(props: DefaultProps) {
   const { c, title, description, name, size, display, body, address } = untrack(() => look(props))
   return (
-    <div style={`display:flex;flex-direction:column;width:100%;height:100%;padding:68px 76px 60px;background-color:${c.background};color:${c.text};font-family:${body}`}>
-      <div style={`display:flex;align-items:center;font-family:${display};font-size:32px;font-weight:600;letter-spacing:-0.3px`}>
-        <div style={`width:22px;height:22px;border-radius:5px;background-color:${c.accent};margin-right:16px`} />
+    <div
+      style={`display:flex;flex-direction:column;width:100%;height:100%;padding:68px 76px 60px;background-color:${c.background};color:${c.text};font-family:${body}`}
+    >
+      <div
+        style={`display:flex;align-items:center;font-family:${display};font-size:32px;font-weight:600;letter-spacing:-0.3px`}
+      >
+        <div
+          style={`width:22px;height:22px;border-radius:5px;background-color:${c.accent};margin-right:16px`}
+        />
         <span>{name}</span>
       </div>
       <div style="display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;padding:24px 0">
-        <div style={`display:block;font-family:${display};font-size:${size}px;font-weight:700;line-height:1.08;letter-spacing:-1.5px;overflow-wrap:anywhere;line-clamp:3`}>{title}</div>
-        {description ? <div style={`display:block;margin-top:26px;font-size:30px;line-height:1.38;color:${c.subtle};line-clamp:3`}>{description}</div> : null}
+        <div
+          style={`display:block;font-family:${display};font-size:${size}px;font-weight:700;line-height:1.08;letter-spacing:-1.5px;overflow-wrap:anywhere;line-clamp:3`}
+        >
+          {title}
+        </div>
+        {description ? (
+          <div
+            style={`display:block;margin-top:26px;font-size:30px;line-height:1.38;color:${c.subtle};line-clamp:3`}
+          >
+            {description}
+          </div>
+        ) : null}
       </div>
-      {address ? <div style={`display:flex;align-items:center;font-size:24px;color:${c.subtle};border-top:1px solid ${c.subtle}44;padding-top:22px`}>{address}</div> : null}
+      {address ? (
+        <div
+          style={`display:flex;align-items:center;font-size:24px;color:${c.subtle};border-top:1px solid ${c.subtle}44;padding-top:22px`}
+        >
+          {address}
+        </div>
+      ) : null}
     </div>
   )
 }

package/src/og/fonts.mjs

@@ -26,9 +26,15 @@ export async function woffToSfnt(woff) {
   const tables = []
   for (let i = 0; i < numTables; i++) {
     const at = 44 + i * 20
-    const offset = v.getUint32(at + 4), compLength = v.getUint32(at + 8), origLength = v.getUint32(at + 12)
+    const offset = v.getUint32(at + 4),
+      compLength = v.getUint32(at + 8),
+      origLength = v.getUint32(at + 12)
     const raw = woff.subarray(offset, offset + compLength)
-    tables.push({ tag: v.getUint32(at), checksum: v.getUint32(at + 16), data: compLength < origLength ? await inflate(raw) : raw })
+    tables.push({
+      tag: v.getUint32(at),
+      checksum: v.getUint32(at + 16),
+      data: compLength < origLength ? await inflate(raw) : raw,
+    })
   }
   let size = 12 + 16 * numTables
   for (const t of tables) size += (t.data.length + 3) & ~3
@@ -55,10 +61,12 @@ export async function woffToSfnt(woff) {
 
 /** `{ name, data, weight?, style? }[]` in any format → the same with bytes every Takumi build reads. */
 export async function normalizeFonts(fonts) {
-  return Promise.all(fonts.map(async f => {
-    const data = f.data instanceof Uint8Array ? f.data : new Uint8Array(f.data)
-    const format = fontFormat(data)
-    if (!format) throw new Error(`weft/og: font "${f.name}" isn't TTF, OTF, WOFF or WOFF2`)
-    return { ...f, data: format === 'woff' ? await woffToSfnt(data) : data }
-  }))
+  return Promise.all(
+    fonts.map(async (f) => {
+      const data = f.data instanceof Uint8Array ? f.data : new Uint8Array(f.data)
+      const format = fontFormat(data)
+      if (!format) throw new Error(`weft/og: font "${f.name}" isn't TTF, OTF, WOFF or WOFF2`)
+      return { ...f, data: format === 'woff' ? await woffToSfnt(data) : data }
+    }),
+  )
 }

package/src/og/images.mjs

@@ -8,7 +8,10 @@ export function imageCache(maxBytes = 32 << 20) {
   return {
     get(src) {
       const hit = map.get(src)
-      if (hit) { map.delete(src); map.set(src, hit) }
+      if (hit) {
+        map.delete(src)
+        map.set(src, hit)
+      }
       return hit
     },
     set(src, data) {
@@ -29,26 +32,44 @@ export function imageCache(maxBytes = 32 << 20) {
  * renders data from `load`, so this is the SSRF guard); the default allows any https URL.
  * Returns the images Takumi needs, and the srcs that failed.
  */
-export async function loadImages(srcs, { cache, timeoutMs = 1500, maxBytes = 4 << 20, allow = u => u.protocol === 'https:', fetch = globalThis.fetch } = {}) {
-  const images = [], failed = []
-  await Promise.all([...new Set(srcs)].map(async src => {
-    if (src.startsWith('data:')) return // Takumi decodes data URIs itself
-    const hit = cache?.get(src)
-    if (hit) return void images.push({ src, data: hit })
-    try {
-      const url = new URL(src)
-      if (!allow(url)) throw new Error('not allowed')
-      const res = await fetch(url, { signal: AbortSignal.timeout(timeoutMs), redirect: 'error' })
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      if (!res.headers.get('content-type')?.startsWith('image/')) throw new Error('not an image')
-      if (Number(res.headers.get('content-length') ?? 0) > maxBytes) throw new Error('too large')
-      const data = new Uint8Array(await res.arrayBuffer())
-      if (data.length > maxBytes) throw new Error('too large')
-      cache?.set(src, data)
-      images.push({ src, data })
-    } catch (e) {
-      failed.push({ src, reason: e?.name === 'TimeoutError' ? `timed out after ${timeoutMs} ms` : String(e?.message ?? e) })
-    }
-  }))
+export async function loadImages(
+  srcs,
+  {
+    cache,
+    timeoutMs = 1500,
+    maxBytes = 4 << 20,
+    allow = (u) => u.protocol === 'https:',
+    fetch = globalThis.fetch,
+  } = {},
+) {
+  const images = [],
+    failed = []
+  await Promise.all(
+    [...new Set(srcs)].map(async (src) => {
+      if (src.startsWith('data:')) return // Takumi decodes data URIs itself
+      const hit = cache?.get(src)
+      if (hit) return void images.push({ src, data: hit })
+      try {
+        const url = new URL(src)
+        if (!allow(url)) throw new Error('not allowed')
+        const res = await fetch(url, { signal: AbortSignal.timeout(timeoutMs), redirect: 'error' })
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        if (!res.headers.get('content-type')?.startsWith('image/')) throw new Error('not an image')
+        if (Number(res.headers.get('content-length') ?? 0) > maxBytes) throw new Error('too large')
+        const data = new Uint8Array(await res.arrayBuffer())
+        if (data.length > maxBytes) throw new Error('too large')
+        cache?.set(src, data)
+        images.push({ src, data })
+      } catch (e) {
+        failed.push({
+          src,
+          reason:
+            e?.name === 'TimeoutError'
+              ? `timed out after ${timeoutMs} ms`
+              : String(e?.message ?? e),
+        })
+      }
+    }),
+  )
   return { images, failed }
 }