@weft-js/start 0.1.0 → 0.1.2

package/src/server/preview.tsx

@@ -0,0 +1,67 @@
+import type { AsyncLocalStorage } from 'node:async_hooks'
+import { renderToStream, type Merged } from '@weft-js/core/ssr'
+import type { createRouteState, RoutePayload } from '../router'
+import * as exec from '../exec'
+import type { Scope } from '../exec'
+import { App } from '../view'
+import { leftToPage } from './head'
+import { payloadOf } from './payload'
+import { cookieJar } from './request'
+import type { Resolved } from './types'
+
+/** Finish page metadata and inspect a route in its request scope. */
+export function makePreview({
+  als,
+  scopeOptions,
+  resolve,
+  stateOf,
+  timing,
+  complete,
+  PASSES,
+}: {
+  als: AsyncLocalStorage<Scope>
+  scopeOptions: Parameters<typeof exec.createScope>[1]
+  resolve: (path: string, request: Request) => Promise<Resolved>
+  stateOf: (r: Resolved, payload: RoutePayload) => ReturnType<typeof createRouteState>
+  timing: { timeout?: number }
+  complete: (r: Resolved, html?: string) => Merged
+  PASSES: number
+}) {
+  /** What `page` shows a reader, without the streaming: the same pass, so a page, its navigation and its card agree. */
+  async function shell(r: Resolved, request: Request) {
+    const route = stateOf(r, payloadOf(r, false))
+    const s = renderToStream(() => <App route={route} />, {
+      ...timing,
+      passes: PASSES,
+      app: { cookies: cookieJar(request) },
+    })
+    await s.settle()
+    return s.shell
+  }
+
+  /**
+   * The finished head of a request that doesn't otherwise render: it renders only when a level left words to the page.
+   * A render that fails here (a build with no database) leaves the words to the config; the page still shows its own.
+   */
+  const finished = async (r: Resolved, request: Request) => {
+    if (
+      !r.metas ||
+      r.status !== 200 ||
+      !(leftToPage(r.source!.title) || leftToPage(r.source!.description))
+    )
+      return complete(r)
+    return complete(r, await shell(r, request).catch(() => undefined))
+  }
+
+  /** `weft routes --meta`: one page's finished head, its HTML and where its words came from, in a request scope. */
+  const inspect = (path: string, request: Request) =>
+    als.run(exec.createScope(request, scopeOptions), async () => {
+      const r = await resolve(path, request)
+      if (r.redirect) return { ...r, html: '' }
+      const html = await shell(r, request).catch(() => '')
+      complete(r, html)
+      return { ...r, html }
+    })
+
+  return { finished, inspect }
+}

package/src/server/render.ts

@@ -0,0 +1,167 @@
+import type { RoutePayload } from '../router'
+import { firstPaint } from '../first-paint'
+import { pick } from '../sheets.mjs'
+import type { HandlerOptions } from './types'
+import { esc, hash } from './text'
+
+/**
+ * A page's styles from the build's first-paint table (`firstPaint`): the rules its HTML reaches, inline, and its sheets as
+ * links past the shell, where they hold nothing above it. `late` gives a streamed chunk the rules it adds, and a link for
+ * a sheet none of the page's has: an island in a Boundary the shell didn't show.
+ */
+export function tableStyles(
+  pieces: NonNullable<NonNullable<HandlerOptions['assets']>['pieces']>,
+  css: { href: string }[],
+  siteHead: string | undefined,
+  lang: string,
+) {
+  const hrefs = css.map((c) => c.href)
+  const late = pick(pieces, hrefs)
+  const paint = firstPaint(pieces, hrefs, siteHead)
+  const held: string[] = late.sheets.flatMap((c: { has: string[] }) => c.has)
+  const carried = new Set([...hrefs, ...held])
+  const link = (href: string) => `<link rel="stylesheet" href="${esc(href)}">\n`
+  return {
+    rules: (shell: string) => paint(`<html${lang}><body><div id="app">${shell}`),
+    // A combined sheet's parts as disabled links: Vite's preload helper finds them there and doesn't fetch them again.
+    links:
+      [...late.sheets.map((c: { href: string }) => c.href), ...late.rest].map(link).join('') +
+      held.map((href) => `<link rel="stylesheet" href="${esc(href)}" disabled>\n`).join(''),
+    late(sheets: { href: string }[] = [], chunk = '') {
+      const more = sheets.map((c) => c.href).filter((h) => !carried.has(h))
+      for (const h of more) carried.add(h)
+      const rules = paint(chunk)
+      return more.map(link).join('') + (rules ? `<style>${rules}</style>\n` : '')
+    },
+  }
+}
+
+/**
+ * The payload with its static levels marked: their hash, without their data (the HTML holds it), and with `html` their
+ * HTML, each level's next one cut down to its markers. The `aria-current` a navigation moves doesn't count as a change.
+ */
+/**
+ * The chunks `payload`'s page will want: its non-static levels and the islands that load with it, and `fold`, the lazy
+ * ones in the first view. Those stay preloaded, fetched but not run, so a first click on them doesn't wait; the rest
+ * load when they're needed. `$client`: the router and runtime, whenever any of that will run.
+ */
+export const pageChunks = (
+  payload: RoutePayload,
+  chunks: HandlerOptions['chunks'] = {},
+  fold: string[] = [],
+  now = true,
+) => {
+  const ids = [...payload.m.filter((m) => !m.s).map((m) => m.id), ...(payload.i ?? []), ...fold]
+  return [...(now || ids.length ? ['$client'] : []), ...ids].flatMap((id) => chunks[id]?.js ?? [])
+}
+
+/**
+ * The route's stylesheets and those of every island on the page. An island is a dynamic import, so its CSS is not in the
+ * route's chunk graph; without this the server's HTML paints bare and the sheets arrive with the script.
+ */
+export const pageSheets = (
+  css: { href: string }[] = [],
+  parts: { now: string[]; lazy: string[]; fold: string[] },
+  chunks: HandlerOptions['chunks'] = {},
+) => {
+  const found = [...parts.now, ...parts.lazy, ...parts.fold].flatMap((id) => chunks[id]?.css ?? [])
+  return [...new Map([...css, ...found].map((c) => [c.href, c])).values()]
+}
+
+export const saveData = (request: Request) =>
+  request.headers.get('save-data') === 'on' ||
+  request.headers.get('sec-ch-prefers-reduced-data') === 'reduce'
+
+/** Where the first view ends, in px: past most laptops' and phones' first screen. */
+const FOLD = 900
+
+/**
+ * About how far down the page `html` runs out, in px. The server has no layout, so this counts what makes a page tall:
+ * blocks, and lines of their text. A wrong guess costs one chunk's fetch, either way: it's a preload, not a decision.
+ */
+function depth(html: string) {
+  const plain = html.replace(/<(svg|style|template)\b[\s\S]*?<\/\1>|<!--[\s\S]*?-->/g, '')
+  const blocks =
+    plain.match(
+      /<(?:section|article|header|footer|h[1-6]|p|li|tr|img|form|pre|blockquote|video|figure)\b/g,
+    )?.length ?? 0
+  return blocks * 32 + (plain.replace(/<[^>]*>/g, '').length / 60) * 24
+}
+
+/** What a page's HTML says about its islands: those that load with it, those that wait, and the waiting ones in view. */
+export function islandsOf(html: string) {
+  const known = renderedOf(html)
+  if (known.p) return known.p
+  const parts = { now: [] as string[], lazy: [] as string[], fold: [] as string[] }
+  let past = false
+  for (const m of html.matchAll(/<!--wi:(\[.*?\])-->/g)) {
+    const [id, , , when] = JSON.parse(m[1]!) as [string, string, unknown[], string?]
+    const list = when ? parts.lazy : parts.now
+    if (!list.includes(id)) list.push(id)
+    past ||= depth(html.slice(0, m.index)) >= FOLD
+    if (when && !past && !parts.fold.includes(id)) parts.fold.push(id)
+  }
+  return (known.p = parts)
+}
+
+export function modulepreloads(
+  chunks: { href: string }[],
+  assets: NonNullable<HandlerOptions['assets']>,
+) {
+  const hrefs = new Set(chunks.map((c) => c.href))
+  hrefs.delete(assets.entry!)
+  return [...hrefs].map((href) => `<link rel="modulepreload" href="${esc(href)}">`).join('')
+}
+
+/** What a render's HTML says about its levels, worked out as asked and kept by the exact text. */
+interface Rendered {
+  h: Record<number, string>
+  x: Record<number, string>
+  p?: { now: string[]; lazy: string[]; fold: string[] }
+}
+const RENDERED_MAX = 64
+const rendered = new Map<string, Rendered>()
+
+function renderedOf(html: string) {
+  let r = rendered.get(html)
+  if (!r) {
+    if (rendered.size >= RENDERED_MAX) rendered.clear()
+    rendered.set(html, (r = { h: {}, x: {} }))
+  }
+  return r
+}
+
+export function withLevels(
+  payload: RoutePayload,
+  html: string,
+  statics: Set<string>,
+  sendHtml: boolean,
+): RoutePayload {
+  if (!payload.m.some((m) => statics.has(m.id))) return payload
+  const known = renderedOf(html)
+  const slice = (d: number) => {
+    const open = html.indexOf(`<!--wl:${d}:`)
+    const end = `<!--/wl:${d}-->`
+    const close = html.indexOf(end)
+    if (open < 0 || close < 0) return ''
+    const body = html.slice(html.indexOf('-->', open) + 3, close)
+    const kid = body.indexOf(`<!--wl:${d + 1}:`)
+    const tail = body.indexOf(`<!--/wl:${d + 1}-->`)
+    return kid < 0 || tail < 0
+      ? body
+      : body.slice(0, body.indexOf('-->', kid) + 3) + body.slice(tail)
+  }
+  const m = payload.m.map((lv, d) => {
+    if (!statics.has(lv.id)) return lv
+    const { data: _, ...rest } = lv
+    const h = (known.h[d] ??= slice(d))
+    return {
+      ...rest,
+      s: 1 as const,
+      x: (known.x[d] ??= hash(h.replaceAll(' aria-current="page"', ''))),
+      ...(sendHtml && { h }),
+    }
+  })
+  const i = islandsOf(html).now
+  return { ...payload, m, ...(i.length && { i }) }
+}

package/src/server/request.ts

@@ -0,0 +1,98 @@
+import { CLIENT_IP, decodeForm } from '../data'
+import type { Scope } from '../exec'
+
+/** The request with the socket's address in CLIENT_IP, replacing any the client sent. Nitro's server sets `.ip`. */
+export function stamped(request: Request): Request {
+  const headers = new Headers(request.headers)
+  const { ip } = request as Request & { ip?: string }
+  headers.delete(CLIENT_IP)
+  if (ip) headers.set(CLIENT_IP, ip)
+  // `new Request(request, …)` refuses the server's request wrapper; the parts are enough.
+  return new Request(request.url, {
+    method: request.method,
+    headers,
+    ...(request.body && { body: request.body, duplex: 'half' }),
+  })
+}
+
+/** The request's cookies for `persist: 'cookie'`, parsed on first read: a page with none pays nothing. */
+export function cookieJar(request: Request) {
+  let jar: Map<string, string> | undefined
+  return {
+    get(name: string) {
+      jar ??= new Map(
+        (request.headers.get('cookie') ?? '')
+          .split(/;\s*/)
+          .map((c) => [c.slice(0, c.indexOf('=')), c.slice(c.indexOf('=') + 1)]),
+      )
+      return jar.get(name)
+    },
+  }
+}
+
+const refresh = (v: FormDataEntryValue | null) => (typeof v === 'string' ? v : '[]')
+
+/** The multipart body `<Form>` sends when a form holds a file: the fields, and the refresh list in `$r`. */
+export async function multipartBody(request: Request) {
+  const data = await request.formData()
+  return {
+    i: decodeForm(data),
+    f: JSON.parse(refresh(data.get('$r'))) as [string, unknown][],
+    c: 1 as const,
+  }
+}
+
+/** What a failed form's page gives back: no secrets (the HTML outlives the request) and no files. */
+export function echoed(input: Record<string, unknown>): Record<string, unknown> {
+  const keep = (v: unknown): unknown =>
+    typeof v === 'string'
+      ? v
+      : Array.isArray(v)
+        ? v.filter((x) => typeof x === 'string')
+        : v && typeof v === 'object' && !(v instanceof Blob)
+          ? echoed(v as Record<string, unknown>)
+          : undefined
+  return Object.fromEntries(
+    Object.entries(input)
+      .filter(([k]) => !/pass|secret|token|card|cvv|cvc/i.test(k))
+      .map(([k, v]) => [k, keep(v)]),
+  )
+}
+
+/** The cookies and headers server functions set (`ctx.response.headers`), on the response. */
+export function withHeaders(res: Response, scope: Scope): Response {
+  for (const [k, v] of scope.headers) res.headers.append(k, v)
+  return res
+}
+
+/** Merge scope headers, then replace metadata for the redirect's new response body. */
+export function redirectBody(
+  res: Response,
+  scope: Scope,
+  type: string,
+  location?: string,
+): Response {
+  withHeaders(res, scope)
+  for (const name of [
+    'content-length',
+    'content-encoding',
+    'content-range',
+    'content-location',
+    'content-language',
+    'content-disposition',
+    'transfer-encoding',
+    'trailer',
+    'accept-ranges',
+    'etag',
+    'last-modified',
+    'digest',
+    'content-digest',
+    'repr-digest',
+    'content-md5',
+  ])
+    res.headers.delete(name)
+  res.headers.set('content-type', type)
+  if (location === undefined) res.headers.delete('location')
+  else res.headers.set('location', location)
+  return res
+}

package/src/server/resolver.ts

@@ -0,0 +1,228 @@
+import type { AsyncLocalStorage } from 'node:async_hooks'
+import {
+  RouterCore,
+  createNonReactiveMutableStore,
+  createNonReactiveReadonlyStore,
+  isNotFound,
+} from '@tanstack/router-core'
+import { createMemoryHistory } from '@tanstack/history'
+import { mergeMeta, type Merged, type Meta as MetaObject } from '@weft-js/core/ssr'
+import type { Component } from '../router'
+import { StartError } from '../data'
+import * as exec from '../exec'
+import type { Scope } from '../exec'
+import { cleanParams, type routeTree, type LoadContext } from './routes'
+import { split, settledView } from './payload'
+import type {
+  HandlerOptions,
+  LayoutEntry,
+  Level,
+  MetaSource,
+  Resolved,
+  RouteEntry,
+  RouteModule,
+} from './types'
+
+type RouterOptions = ConstructorParameters<typeof RouterCore>[0]
+export interface ResolverDeps {
+  als: AsyncLocalStorage<Scope>
+  scopeOptions: Parameters<typeof exec.createScope>[1]
+  tree: ReturnType<typeof routeTree>
+  site: NonNullable<HandlerOptions['site']>
+  manifest: HandlerOptions['manifest']
+  byId: Map<string, RouteEntry>
+  mod: (file?: string) => RouteModule | undefined
+  comps: Record<string, Component>
+  options: HandlerOptions
+  originOf: (request: Request) => string | undefined
+}
+const stores = () => ({
+  createMutableStore: createNonReactiveMutableStore,
+  createReadonlyStore: createNonReactiveReadonlyStore,
+  batch: (f: () => void) => f(),
+})
+/** The origin a head's URLs are built on, or none. */
+export function pointAt(head: Merged, origin: string | undefined) {
+  if (origin) head.url = origin
+  else delete head.url
+}
+
+export async function resolveRoute(
+  deps: ResolverDeps,
+  path: string,
+  request: Request,
+): Promise<Resolved> {
+  const { als, scopeOptions, tree } = deps
+  const scope = als.getStore() ?? exec.createScope(request, scopeOptions)
+  const hold: LoadContext = { request, scope, tags: new Map(), out: {} }
+  const router = new RouterCore(
+    {
+      routeTree: tree,
+      history: createMemoryHistory({ initialEntries: [path] }),
+      isServer: true,
+      context: hold,
+    } as RouterOptions,
+    stores,
+  )
+  // The page's `[...name]`, so its layouts see the catch-all under that name too (the loaders copy `hold` as they start).
+  hold.splat = (
+    router.getMatchedRoutes(router.latestLocation.pathname)[2] as
+      | { options: { weft?: RouteEntry } }
+      | undefined
+  )?.options.weft?.splat
+  await router.load()
+  return resolvedMatches(deps, router, hold, path, request)
+}
+
+function redirectOf(
+  deps: ResolverDeps,
+  router: InstanceType<typeof RouterCore>,
+  hold: LoadContext,
+  path: string,
+): Resolved | undefined {
+  const native =
+    router._serverResult?.type === 'redirect' ? router._serverResult.redirect : undefined
+  const href = native?.headers.get('location')
+  const goes =
+    hold.out.redirect ??
+    (native && href ? { isRedirect: true as const, href, status: native.status } : undefined)
+  if (!goes) return undefined
+  return {
+    status: goes.status,
+    path,
+    levels: [],
+    head: mergeMeta(deps.site),
+    redirect: goes,
+    ...(!hold.out.redirect && native ? { redirectHeaders: native.headers } : {}),
+  }
+}
+
+async function resolvedMatches(
+  deps: ResolverDeps,
+  router: InstanceType<typeof RouterCore>,
+  hold: LoadContext,
+  path: string,
+  request: Request,
+): Promise<Resolved> {
+  const { manifest, byId, mod, comps, options } = deps
+  const redirected = redirectOf(deps, router, hold, path)
+  if (redirected) return redirected
+  const matches = router.state.matches.map((m) => ({
+    m,
+    weft: (router.routesById as Record<string, { options: { weft?: RouteEntry | LayoutEntry } }>)[
+      m.routeId
+    ]?.options.weft,
+  }))
+  const params = (m: { params: Record<string, unknown> }, splat?: string) =>
+    cleanParams(m.params, splat)
+  const leaf = matches.at(-1)?.weft
+  const route = leaf && 'kind' in leaf ? leaf : undefined
+  const failed = matches.find((x) => x.m.status === 'error')
+  const missing = !route || matches.some((x) => x.m.status === 'notFound' || isNotFound(x.m.error))
+  const rootLayout = manifest.layouts.find((l) => l.dir === '')
+  const rootOk =
+    rootLayout && matches[0]?.weft === rootLayout && matches[0].m.status === 'success'
+      ? matches[0]
+      : undefined
+  const levelOf = (x: (typeof matches)[number]): Level => {
+    const raw = x.m.loaderData
+    const t = hold.tags.get(x.weft!.file)
+    return {
+      id: x.weft!.id,
+      params: params(x.m, hold.splat),
+      mod: mod(x.weft!.file),
+      raw,
+      ...split(raw),
+      ...(t?.size && { t: [...t] }),
+    }
+  }
+  const special = (id: '404' | 'error', status: number, error?: unknown): Promise<Resolved> => {
+    const entry = byId.get(id)
+    if (error instanceof StartError && error.code)
+      options.onDiagnostic?.({ code: error.code, severity: 'error', message: error.message })
+    const shown =
+      id === 'error'
+        ? {
+            status,
+            message:
+              options.dev && error instanceof Error ? error.message : 'Something went wrong.',
+          }
+        : { path }
+    const levels: Level[] = [
+      ...(rootOk && !(failed && failed === rootOk) ? [levelOf(rootOk)] : []),
+      { id, params: {}, data: shown, raw: shown, mod: mod(entry?.file) },
+    ]
+    if (entry && mod(entry.file)?.default) comps[id] = mod(entry.file)!.default!
+    return finish(levels, status, undefined, error)
+  }
+  const finish = (shown: Level[], status: number, matched?: RouteEntry, error?: unknown) =>
+    finishResolution(deps, { path, request }, { shown, status, matched, error })
+
+  if (failed) {
+    const e = exec.dbError(failed.m.error)
+    return special('error', (e as { code?: string } | null)?.code === 'Q016' ? 503 : 500, e)
+  }
+  if (missing) return special('404', 404)
+  const levels = matches.filter((x) => x.weft).map(levelOf)
+  try {
+    return await finish(levels, 200, route)
+  } catch (e) {
+    if (isNotFound(e)) return special('404', 404)
+    return special('error', 500, e)
+  }
+}
+
+export async function finishResolution(
+  deps: ResolverDeps,
+  { path, request }: { path: string; request: Request },
+  {
+    shown,
+    status,
+    matched,
+    error,
+  }: {
+    shown: Level[]
+    status: number
+    matched?: RouteEntry | undefined
+    error?: unknown
+  },
+): Promise<Resolved> {
+  const { site, options, originOf } = deps
+  const metas: MetaObject[] = []
+  const source: MetaSource = {
+    title: site.name ? 'config' : 'none',
+    description: site.description ? 'config' : 'none',
+    image: 'none',
+  }
+  for (const lv of shown) {
+    const m =
+      lv.mod?.meta ??
+      (lv.id === '404'
+        ? { title: 'Not found' }
+        : lv.id === 'error'
+          ? { title: 'Error' }
+          : undefined)
+    if (!m) continue
+    const value =
+      typeof m === 'function'
+        ? await m({ params: lv.params, data: settledView(lv.raw, lv.d, lv.id, options) })
+        : m
+    metas.push(value)
+    const who = lv === shown.at(-1) ? 'route' : 'layout'
+    if (value?.title != null) source.title = who
+    if (value?.description != null) source.description = who
+  }
+  const resolved: Resolved = {
+    status,
+    path,
+    levels: shown,
+    head: mergeMeta(site, ...metas),
+    route: matched,
+    error,
+    metas,
+    source,
+    origin: originOf(request),
+  }
+  pointAt(resolved.head, resolved.origin)
+  return resolved
+}