@uniweb/runtime 0.8.15 → 0.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/runtime",
-  "version": "0.8.15",
+  "version": "0.8.17",
   "description": "Minimal runtime for loading Uniweb foundations",
   "type": "module",
   "exports": {
@@ -35,14 +35,15 @@
     "node": ">=20.19"
   },
   "dependencies": {
-    "@uniweb/core": "0.7.12",
-    "@uniweb/theming": "0.1.3"
+    "@uniweb/theming": "0.1.3",
+    "@uniweb/core": "0.7.12"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.5.2",
+    "esbuild": "^0.21.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.27.0",
     "vite": "^7.3.1",
     "vitest": "^4.1.7",
-    "@uniweb/build": "0.14.5"
+    "@uniweb/build": "0.14.11"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -53,6 +54,7 @@
     "build:ssr": "vite build --config vite.config.ssr.js",
     "build:app": "vite build --config vite.config.app.js",
     "build": "npm run build:ssr && npm run build:app",
+    "build:worker": "node build-worker.js",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/src/components/Layout.jsx

@@ -32,6 +32,7 @@
  */
 
 import Blocks from './Blocks.jsx'
+import { resolveLayoutTransitions } from '../view-transitions.js'
 
 /**
  * Default layout - renders header, body, footer in sequence
@@ -91,9 +92,13 @@ export default function Layout({ page, website }) {
   initializeAllBlocks(...allBlockGroups)
 
   // Pre-render each area as React elements.
-  // When the foundation enables view transitions, wrap areas in thin divs
-  // with view-transition-name so the browser can animate them independently.
-  const transitions = website.viewTransitions ? layoutMeta?.transitions : null
+  // When the foundation enables view transitions, wrap areas in thin divs with
+  // view-transition-name so the browser can animate them independently. Names
+  // default to one per area + body (see resolveLayoutTransitions); the layout's
+  // `transitions` meta overrides or opts out.
+  const transitions = website.viewTransitions
+    ? resolveLayoutTransitions(Object.keys(areas), layoutMeta?.transitions)
+    : null
 
   const bodyElement = bodyBlocks ? (
     transitions?.body

package/src/setup.js

@@ -217,9 +217,13 @@ function createIconResolver(iconConfig = {}) {
 // ─── Runtime default fetcher ────────────────────────────────────────────────
 
 function buildDefaultFetcher(content) {
-  // BASE_URL is injected by Vite at build. For subpath deployments the default
-  // fetcher prepends it to local absolute paths (remote URLs are never touched).
-  const basePath = import.meta.env?.BASE_URL || ''
+  // Base for resolving local absolute paths (e.g. /data/*.json). Prefer the base
+  // the PAYLOAD carries (`content.config.base`) — a backend-hosted SPA is served
+  // under a subpath the payload declares (e.g. /gateway/site/<uuid>/) that the
+  // gateway-delivered runtime bundle can't know via Vite's build-time BASE_URL.
+  // This is the SAME base routing uses; without it local fetches hit the origin
+  // root and 404. Falls back to Vite's BASE_URL for a statically built site.
+  const basePath = content?.config?.base || import.meta.env?.BASE_URL || ''
   // Per-site transport config from `site.yml fetcher:`. The default fetcher
   // recognizes `baseUrl` and `envelope`; foundations with their own fetchers
   // may read additional keys from the same block via ctx.website.config.fetcher.

package/src/ssr-renderer.js

@@ -25,6 +25,7 @@ import {
   sliceContentForLocale,
   hydrateDataStore,
 } from './wire-foundation.js'
+import { resolveLayoutTransitions } from './view-transitions.js'
 
 // Re-export L2 helpers so the public `@uniweb/runtime/ssr` surface
 // carries everything an SSR consumer needs from one entry point.
@@ -343,10 +344,23 @@ export function renderLayout(page, website) {
   const bodyBlocks = page.getBodyBlocks()
   const areas = page.getLayoutAreas()
 
-  const bodyElement = bodyBlocks ? renderBlocks(bodyBlocks) : null
+  // Mirror Layout.jsx: wrap body + each area in a thin div carrying its
+  // view-transition-name, so the prerendered HTML matches what the SPA hydrates
+  // and the browser can animate regions independently on client navigation.
+  const transitions = website.viewTransitions
+    ? resolveLayoutTransitions(Object.keys(areas), layoutMeta?.transitions)
+    : null
+  const wrapTransition = (name, element) => {
+    const vtName = transitions?.[name]
+    return vtName
+      ? React.createElement('div', { style: { viewTransitionName: vtName } }, element)
+      : element
+  }
+
+  const bodyElement = bodyBlocks ? wrapTransition('body', renderBlocks(bodyBlocks)) : null
   const areaElements = {}
   for (const [name, blocks] of Object.entries(areas)) {
-    areaElements[name] = renderBlocks(blocks)
+    areaElements[name] = wrapTransition(name, renderBlocks(blocks))
   }
 
   if (RemoteLayout) {

package/src/view-transitions.js

@@ -0,0 +1,47 @@
+/**
+ * View-transition name resolution for layout areas.
+ *
+ * When a foundation enables view transitions (the default), the runtime gives
+ * each layout region a `view-transition-name` so the browser animates them
+ * independently — persistent chrome (header, sidebar, footer) morphs in place
+ * while the body crossfades. Without per-region names the browser falls back to
+ * a single full-page crossfade, which makes the whole layout (chrome included)
+ * flicker on every navigation.
+ *
+ * This module is pure (no React/DOM) so both the SPA renderer
+ * (`components/Layout.jsx`) and the SSR renderer (`ssr-renderer.js`) derive the
+ * exact same names — keeping the prerendered HTML and the hydrated SPA aligned.
+ */
+
+// Namespace so generated names can't collide with `view-transition-name`s a
+// foundation sets inside its own component CSS. The prefix also guarantees a
+// valid CSS <custom-ident> (starts with a letter).
+const NS = 'uw-'
+
+const toIdent = (name) => NS + String(name).replace(/[^a-zA-Z0-9_-]/g, '-')
+
+/**
+ * Build the effective view-transition-name map for a layout.
+ *
+ * Default: every rendered area plus the implicit `body` gets a stable,
+ * namespaced name (`uw-<area>`, `uw-body`). Same-named areas across layouts
+ * therefore share a name and morph between layouts automatically.
+ *
+ * The layout's `meta.js` `transitions` value overrides this:
+ *   - an object overrides per region (`{ left: 'sidebar' }` to group across
+ *     layouts, or `{ left: null }` to opt one region out);
+ *   - `false` opts the whole layout out (back to the full-page crossfade).
+ *
+ * @param {string[]} areaNames - Names of the areas rendered for this page (excludes `body`).
+ * @param {Object|false|null|undefined} explicit - `layoutMeta.transitions`.
+ * @returns {Object|null} region → view-transition-name; `null` when opted out.
+ *   A region whose value is null/empty in the returned map gets no name.
+ */
+export function resolveLayoutTransitions(areaNames, explicit) {
+  if (explicit === false) return null
+
+  const transitions = { body: toIdent('body') }
+  for (const name of areaNames) transitions[name] = toIdent(name)
+
+  return explicit ? { ...transitions, ...explicit } : transitions
+}