@uniweb/runtime 1.2.8 → 1.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/runtime",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "Minimal runtime for loading Uniweb foundations",
   "type": "module",
   "exports": {
@@ -36,15 +36,15 @@
     "node": ">=22.12"
   },
   "dependencies": {
-    "@uniweb/core": "~1.4.10",
-    "@uniweb/theming": "~1.2.1"
+    "@uniweb/theming": "~1.2.1",
+    "@uniweb/core": "~1.4.11"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.5.2",
     "esbuild": "^0.21.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.27.0 || ^0.28.0",
     "vite": "^7.3.1",
     "vitest": "^4.1.7",
-    "@uniweb/build": "1.10.8"
+    "@uniweb/build": "1.10.10"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/font-links.js

@@ -0,0 +1,23 @@
+import { FONT_LINKS_MARKER } from '@uniweb/theming'
+
+/**
+ * Give a page the theme's font links when it arrived without them.
+ *
+ * A built page carries them in its `<head>` (`@uniweb/build`), and so does a prerendered
+ * one (`injectPageContent` in `ssr-renderer.js`). A host that serves the shell alone and
+ * leaves every page to the browser carries neither. `ensureThemeCss` computes the links
+ * onto the graph for such a lane, but nothing put them on the page: the browser added the
+ * theme's CSS (`ThemeProvider`) and never its fonts, so every family the theme imports
+ * fell back to a system face. This is the browser's half of the prerender's font block,
+ * deduped on the same marker, so a page that already has them is left alone.
+ *
+ * @param {object} themeData - `website.themeData`, with the `links` block `@uniweb/theming` generated
+ * @param {Document|null} [doc]
+ * @returns {boolean} whether it added them
+ */
+export function injectFontLinks(themeData, doc = typeof document === 'undefined' ? null : document) {
+  const head = doc?.head
+  if (!head || !themeData?.links || head.innerHTML.includes(FONT_LINKS_MARKER)) return false
+  head.insertAdjacentHTML('beforeend', `${FONT_LINKS_MARKER}\n${themeData.links}`)
+  return true
+}

package/src/hooks/useLinkInterceptor.js

@@ -15,7 +15,7 @@
 import { useEffect, useCallback } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { localeOfPath } from '@uniweb/core/resolve-route'
-import { navigateInApp } from '../navigation.js'
+import { navigateInApp, readsData } from '../navigation.js'
 
 /**
  * Check if a URL is internal (same origin, no external protocol)
@@ -108,8 +108,12 @@ export function inAppLink(anchor) {
   return { anchor, href, routeHref, website }
 }
 
-/** Whether a page of `website` has content not fetched yet: a site whose content is split. */
+/**
+ * Whether a page of `website` can have something to fetch before it is shown: content not here
+ * yet, on a site whose content is split, or data, which a site declaring queries reads.
+ */
 function hasPagesToFetch(website) {
+  if (readsData(website)) return true
   return !!website?.pages?.some((page) => page.hasContent() && !page.isContentLoaded())
 }
 

package/src/link-intent.js

@@ -1,26 +1,28 @@
 /**
  * Prefetch on intent: a link's page is fetched while the reader is about to follow it.
  *
- * Only a site whose content is split loads this module (`useLinkInterceptor`). A site whose
- * pages all arrived with it never downloads it, so the runtime every site carries pays only for
+ * Only a site with something to fetch before a page is shown loads this module
+ * (`useLinkInterceptor`): split content not here yet, or data, which a site declaring queries
+ * reads. A site with neither never downloads it, so the runtime every site carries pays only for
  * the decision.
  *
- * A pointer resting on a link, or focus staying on one, for INTENT_DELAY fetches the split
- * content of the page the link goes to. A press fetches it at once, since a touch has no hover.
- * The click that follows then usually finds the content here, and the page changes without
- * waiting (`navigation.js`). A pointer sweeping across a rail of links fetches nothing, and
- * nothing is fetched for a connection that asks to save data.
+ * A pointer resting on a link, or focus staying on one, for INTENT_DELAY fetches what the page
+ * the link goes to will read: its split content, then its sections' data, whatever is not held
+ * already. A press fetches it at once, since a touch has no hover. The click that follows then
+ * usually finds it all here, and the page changes without waiting (`navigation.js`). A pointer
+ * sweeping across a rail of links fetches nothing, and nothing is fetched for a connection that
+ * asks to save data.
  */
 
-import { prefetchContent } from './navigation.js'
+import { prefetchPage } from './navigation.js'
 import { findAnchorElement, inAppLink, localeSwitchOf } from './hooks/useLinkInterceptor.js'
 
 /** How long a pointer rests on a link, or focus stays on it, before its page is fetched. */
 const INTENT_DELAY = 65
 
 /**
- * Fetch the split content of the page a link goes to, when a click on it would navigate in the
- * app: not a fragment on this page, a `<Link reload>`, or a page in another locale.
+ * Fetch what the page a link goes to will read, when a click on it would navigate in the app: not
+ * a fragment on this page, a `<Link reload>`, or a page in another locale.
  *
  * @param {HTMLAnchorElement} anchor
  */
@@ -28,7 +30,7 @@ function prefetchFor(anchor) {
   const link = inAppLink(anchor)
   if (!link || link.href.startsWith('#') || anchor.hasAttribute('data-reload')) return
   if (localeSwitchOf(link.routeHref, link.website)) return
-  prefetchContent(link.routeHref)
+  prefetchPage(link.routeHref)
 }
 
 /**

package/src/load-page-data.js

@@ -27,26 +27,7 @@ import { resolveRequestedPage } from './resolve-page.js'
 import { getComponentMeta } from './prepare-props.js'
 import { createDefaultFetcher } from './default-fetcher.js'
 import { requireTransport } from './require-transport.js'
-
-/**
- * Every block the page's render can reach: its body and the layout areas it uses (the runtime's own
- * layout choice — the page's `layout:`, else the foundation's default, else the site's default set,
- * minus any area the page hides), plus what those blocks hold.
- */
-function blocksOf(page) {
-  const out = []
-  const walk = (list) => {
-    for (const block of list || []) {
-      if (!block) continue
-      out.push(block)
-      walk(block.childBlocks)
-      walk(block.insets)
-    }
-  }
-  walk(page.getBodyBlocks?.() ?? page.bodyBlocks)
-  for (const area of Object.values(page.getLayoutAreas?.() ?? {})) walk(area)
-  return out
-}
+import { blocksOf } from './page-blocks.js'
 
 /**
  * Fetch what one route's render will read.
@@ -136,7 +117,11 @@ export async function loadPageData({ website, route, fetch, dev = false, locale
   const answered = new DataStore()
 
   const recording = {
-    peek: (request, ctx) => dispatcher.peek(request, ctx),
+    // ⭐ What the plan uses without asking (`keyProgram`'s held steps) is what THIS call's own
+    // requests answered, as `peekRecord` is: the page carries every answer its render reads, so
+    // it may use nothing it did not ask for itself — not another page's answer in a cache the
+    // static build shares.
+    peek: (request) => answered.get(deriveCacheKey(request)),
     peekRecord: (id) => answered.getRecord(id),
     dispatch: async (request, ctx) => {
       if (prerender === 'author' && request?.prerender === false) {

package/src/navigation.js

@@ -5,20 +5,26 @@
  * `useNavigate()` (the routing components `setup.js` registers) and a link in prose
  * (`useLinkInterceptor`). It is one function so the two paths cannot decide differently again.
  *
- * ⭐ **The current page is held until the next one can be shown.** On a site whose content is
- * split, a page not visited yet has no sections until its content file arrives, and
- * `PageRenderer` renders nothing for its body until then. So the content is fetched first, while
- * the current page stays on screen and usable. The router is told once the content has arrived,
- * or after `CONTENT_PREFETCH_TIMEOUT`. That holds for every visitor: it depends on neither the
- * View Transitions API nor a motion preference.
+ * ⭐ **The current page is held until the next one can be shown, content and data.** On a site
+ * whose content is split, a page not visited yet has no sections until its content file arrives,
+ * and `PageRenderer` renders nothing for its body until then. A section that reads data asks for it
+ * only once it has rendered (`BlockRenderer`), and shows its loading state until the answer arrives.
+ * So both are asked first, while the current page stays on screen and usable:
+ * - the content;
+ * - then, its sections known, what they will read, by the plan their render runs (`EntityStore`).
+ *
+ * Only what is not held is asked. A block the cache answers already is passed over, and within a
+ * block the dispatcher answers what it holds and joins what is in flight. The router is told once
+ * the content and data are here, or after `HOLD_TIMEOUT`. That holds for every visitor: it depends
+ * on neither the View Transitions API nor a motion preference.
  *
  * ⭐ **The animation is a layer on the swap.** The swap runs inside
  * `document.startViewTransition` when four things hold: view transitions are on
  * (`website.viewTransitions`, on unless the foundation says `false`), the browser has the API,
- * the visitor has no reduced-motion preference, and the next page is ready. The update callback
- * resolves once the router has committed the new page (`nextPageCommit`). React Router commits a
- * navigation inside `React.startTransition`, after `navigate()` has returned. A callback that
- * resolved when `navigate()` did had the browser capture the old page as the new one.
+ * the visitor has no reduced-motion preference, and the next page's content is here. The update
+ * callback resolves once the router has committed the new page (`nextPageCommit`). React Router
+ * commits a navigation inside `React.startTransition`, after `navigate()` has returned. A callback
+ * that resolved when `navigate()` did had the browser capture the old page as the new one.
  *
  * ⛔ **Until 2026-10-27 the two paths decided differently**, and neither held the page right:
  * - `setup.js` read `foundationConfig.viewTransitions` as an opt-in, which
@@ -30,10 +36,18 @@
  * - A route carrying a query or a fragment found no page to wait for (`Website#getPage` takes a
  *   path).
  * - A reduced-motion preference skipped the wait along with the animation.
+ *
+ * Later that day the hold took in the page's data. Until then the page was held for its content
+ * alone, and a section reading data showed its loading state after the swap. Measured on a site's
+ * blog: its content was in at 331 ms, its data was asked only after the render, and the list
+ * showed at 582 ms.
  */
 
-/** How long a navigation waits for the next page's content before it goes anyway. */
-const CONTENT_PREFETCH_TIMEOUT = 1000
+import { getComponentMeta } from './prepare-props.js'
+import { blocksOf } from './page-blocks.js'
+
+/** How long a navigation holds the current page for the next one's content and data. */
+const HOLD_TIMEOUT = 1000
 
 /**
  * How long a view transition waits for the router to commit. A navigation that commits nothing
@@ -60,39 +74,94 @@ function pageAt(to) {
   return website.getPage(route.split(/[?#]/)[0]) || null
 }
 
-/** Whether `page` can be shown now: `PageRenderer`'s own test. */
+/** Whether `page`'s content can be shown now: `PageRenderer`'s own test. */
 function isReady(page) {
   return !page || !page.hasContent() || page.isContentLoaded()
 }
 
-/** The wait for `page`'s split content, bounded by CONTENT_PREFETCH_TIMEOUT; undefined when there is none. */
-function contentOf(page) {
-  if (isReady(page)) return
-  return Promise.race([
-    page.loadContent(),
-    new Promise((resolve) => setTimeout(resolve, CONTENT_PREFETCH_TIMEOUT)),
-  ])
+/**
+ * Whether the site declares a query. Data comes from a named query (`config.queries`), so a site
+ * that declares none reads none, and its pages are not walked for it.
+ *
+ * @param {Object|null|undefined} website
+ * @returns {boolean}
+ */
+export function readsData(website) {
+  const queries = website?.config?.queries
+  return !!queries && typeof queries === 'object' && Object.keys(queries).length > 0
 }
 
 /**
- * Fetch the split content of the page `route` names, giving up after CONTENT_PREFETCH_TIMEOUT.
- * Undefined when there is nothing to fetch: no such page, a page with no content, or one already
- * loaded.
+ * Ask what `page`'s render will read and the cache does not hold: off a parametric page, the
+ * page's own record, which names it; and each block's data, by the same call the renderer makes
+ * after mount (`EntityStore.fetch`).
+ *
+ * @param {Object} page - its content here
+ * @returns {Promise|undefined} undefined when nothing was asked
+ */
+function dataOf(page) {
+  const website = page.website
+  const store = website?.entityStore
+  if (!store || !readsData(website)) return
+  const asks = []
+  if (page.dynamicContext) asks.push(store.fetchPageRecord(page))
+  for (const block of blocksOf(page)) {
+    const meta = getComponentMeta(block.type)
+    if (store.resolve(block, meta).status === 'pending') asks.push(store.fetch(block, meta))
+  }
+  return asks.length ? Promise.all(asks) : undefined
+}
+
+/**
+ * The wait for what `page`'s render reads and is not here yet: its split content, then, its
+ * sections known, their data.
+ *
+ * @param {Object|null} page
+ * @returns {Promise|undefined} undefined when it is all here
+ */
+function loadPage(page) {
+  if (!page) return
+  if (!isReady(page)) return page.loadContent().then(() => dataOf(page))
+  return dataOf(page)
+}
+
+/** `wait`, or the end of HOLD_TIMEOUT, whichever comes first. */
+function bounded(wait) {
+  return Promise.race([wait, new Promise((resolve) => setTimeout(resolve, HOLD_TIMEOUT))])
+}
+
+/**
+ * Fetch the split content of the page `route` names, giving up after HOLD_TIMEOUT. Undefined when
+ * there is nothing to fetch: no such page, a page with no content, or one already loaded.
  *
  * @param {string} route - a router path; a query or fragment is ignored
  * @returns {Promise|undefined}
  */
 export function prefetchContent(route) {
-  return contentOf(pageAt(route))
+  const page = pageAt(route)
+  if (isReady(page)) return
+  return bounded(page.loadContent())
+}
+
+/**
+ * Fetch what the page `route` names will read when it is shown, its split content and then its
+ * data, ahead of a navigation to it (`link-intent.js`). Nothing waits on it: what arrives is held
+ * for the render, and a request that fails is the navigation's to make again.
+ *
+ * @param {string} route - a router path; a query or fragment is ignored
+ * @returns {Promise|undefined} undefined when it is all here
+ */
+export function prefetchPage(route) {
+  return loadPage(pageAt(route))?.catch(() => {})
 }
 
 // The navigation the next swap belongs to. A later navigation supersedes one still waiting for
-// its content, so a slow page reached by an earlier click cannot replace the page clicked last.
+// its page, so a slow page reached by an earlier click cannot replace the page clicked last.
 let latest = 0
 
 /**
- * Navigate in the app. The current page is held until the next one's content is here, then the
- * pages are swapped, animated when view transitions apply.
+ * Navigate in the app. The current page is held until the next one's content and data are here,
+ * then the pages are swapped, animated when view transitions apply.
  *
  * @param {Function} navigate - React Router's `navigate`
  * @param {string|Object|number} to - where to, as `navigate` takes it
@@ -105,8 +174,8 @@ export function navigateInApp(navigate, to, options) {
   const swap = () => {
     if (ticket !== latest) return
     const website = globalThis.uniweb?.activeWebsite
-    // A page still not here after the wait goes without the animation: a crossfade to an empty
-    // body would only draw out the wait.
+    // A page whose content is still not here after the wait goes without the animation: a
+    // crossfade to an empty body would only draw out the wait.
     const animate = isReady(page) && website?.viewTransitions
       && typeof document !== 'undefined' && document.startViewTransition && !prefersReducedMotion
     if (!animate) {
@@ -125,9 +194,9 @@ export function navigateInApp(navigate, to, options) {
     transition.ready.catch(() => {})
   }
 
-  const pending = contentOf(page)
-  // A fetch that fails still navigates: the page then shows what its content answered.
-  if (pending) pending.then(swap, swap)
+  const pending = loadPage(page)
+  // A request that fails still navigates: the page then shows what it has, as it renders it.
+  if (pending) bounded(pending).then(swap, swap)
   else swap()
 }
 

package/src/page-blocks.js

@@ -0,0 +1,26 @@
+/**
+ * Every block a page's render can reach: its body and the layout areas it uses (the runtime's own
+ * layout choice — the page's `layout:`, else the foundation's default, else the site's default set,
+ * minus any area the page hides), plus what those blocks hold.
+ *
+ * ⭐ One walk for the two that ask for a page's data before its render: a host's data step
+ * (`load-page-data.js`) and the browser before it shows a page it navigates to (`navigation.js`).
+ * So the two cannot disagree about which blocks a page reaches.
+ *
+ * @param {Object} page - a Page
+ * @returns {Object[]} its blocks, each one once
+ */
+export function blocksOf(page) {
+  const out = []
+  const walk = (list) => {
+    for (const block of list || []) {
+      if (!block) continue
+      out.push(block)
+      walk(block.childBlocks)
+      walk(block.insets)
+    }
+  }
+  walk(page.getBodyBlocks?.() ?? page.bodyBlocks)
+  for (const area of Object.values(page.getLayoutAreas?.() ?? {})) walk(area)
+  return out
+}

package/src/setup.js

@@ -31,6 +31,7 @@ import {
 import { ChildBlocks } from './components/PageRenderer.jsx'
 import Background from './components/Background.jsx'
 import { wireFoundationCapabilities, hydrateDataStore, ensureThemeCss } from './wire-foundation.js'
+import { injectFontLinks } from './font-links.js'
 import { navigateInApp } from './navigation.js'
 
 // Re-export so existing consumers importing hydrateDataStore from
@@ -274,6 +275,9 @@ export function initUniweb({ content, foundation, extensions = [], routingCompon
   if (typeof document === 'undefined' || !document.getElementById('uniweb-theme')) {
     ensureThemeCss(uniweb, foundation)
   }
+  // And the theme's font links, which the CSS alone does not bring: a page that came
+  // with neither would otherwise set every imported family in a system face.
+  injectFontLinks(uniweb.activeWebsite?.themeData)
 
   uniweb.routingComponents = routingComponents
   uniweb.localeSwitch = localeSwitch