@symbo.ls/brender 3.14.664 → 3.14.665

package/env.js

@@ -82,8 +82,14 @@ export const createEnv = (html = '<!DOCTYPE html><html><head></head><body></body
       key: (i) => Object.keys(store)[i] ?? null
     }
   }
-  if (!window.localStorage) window.localStorage = createStorage()
-  if (!window.sessionStorage) window.sessionStorage = createStorage()
+  // Every environment gets its own, empty storage. linkedom's window reads an
+  // unknown property through to globalThis, so `window.localStorage` found the
+  // FIRST environment's store (published on globalThis below) and every later
+  // render shared it: polyglot keeps the language a page switched to and the
+  // labels it loaded there, and the next page of a build booted with them
+  // (xma.info report, brender build item 7 — reset state between renders).
+  window.localStorage = createStorage()
+  window.sessionStorage = createStorage()
   if (!globalThis.localStorage) globalThis.localStorage = window.localStorage
   if (!globalThis.sessionStorage) globalThis.sessionStorage = window.sessionStorage
 

package/index.js

@@ -1,7 +1,7 @@
 import { createEnv } from './env.js'
 import { resetKeys, assignKeys, mapKeysToElements } from './keys.js'
 import { loadProject, loadAndRenderAll } from './load.js'
-import { render, renderElement, renderRoute, renderPage, resetGlobalCSSCache, getAccumulatedEmotionCSS, replaceEmotionCSS, adoptionScripts } from './render.js'
+import { render, renderElement, renderRoute, renderPage, resetGlobalCSSCache, getAccumulatedEmotionCSS, replaceEmotionCSS, adoptionScripts, prerenderParts } from './render.js'
 import { extractMetadata, generateHeadHtml } from './metadata.js'
 import { collectBrNodes, hydrate } from './hydrate.js'
 import { generateSitemap } from './sitemap.js'
@@ -30,7 +30,8 @@ export {
   prefetchPageData,
   injectPrefetchedState,
   composeIntoShell,
-  adoptionScripts
+  adoptionScripts,
+  prerenderParts
 }
 
 export default {
@@ -55,5 +56,6 @@ export default {
   prefetchPageData,
   injectPrefetchedState,
   composeIntoShell,
-  adoptionScripts
+  adoptionScripts,
+  prerenderParts
 }

package/load.js

@@ -1,15 +1,51 @@
-import { resolve, join } from 'path'
-import { existsSync, mkdirSync, writeFileSync, unlinkSync } from 'fs'
+import { resolve, join, extname, sep } from 'path'
+import { existsSync, readFileSync, unlinkSync } from 'fs'
 import { tmpdir } from 'os'
 import { randomBytes } from 'crypto'
+import { pathToFileURL } from 'url'
+
+// ── import.meta.url in project code ─────────────────────────────────────────
+// `new URL('../../assets/fonts/x.woff2', import.meta.url)` is how a project
+// names a file next to its source; the bundler turns it into the built
+// asset's address. Bundled into ONE temp module here, every project file's
+// `import.meta.url` became that temp file's, so the URL pointed into the
+// build machine's temp folder — every pre-rendered @font-face read
+// `file:///var/folders/…`, the page drew a fallback font, then shifted (CLS
+// 0.40; xma.info report, brender build item 6). Each project file (anything
+// outside node_modules) gets its OWN source address instead: the URL then
+// names the real source file, which a build maps to its output (the CLI's
+// brenderAssets) and refuses to ship as a file: URL.
+const IMPORT_META_URL = /\bimport\.meta\.url\b/g
+const HAS_IMPORT_META_URL = /\bimport\.meta\.url\b/
+const LOADERS = { '.js': 'js', '.mjs': 'js', '.cjs': 'js', '.jsx': 'jsx', '.ts': 'ts', '.mts': 'ts', '.tsx': 'tsx' }
+
+export const sourceUrlPlugin = {
+  name: 'brender-source-import-meta-url',
+  setup (build) {
+    build.onLoad({ filter: /\.[cm]?[jt]sx?$/ }, (args) => {
+      if (args.path.includes(`${sep}node_modules${sep}`)) return
+      const contents = readFileSync(args.path, 'utf8')
+      if (!HAS_IMPORT_META_URL.test(contents)) return
+      const url = JSON.stringify(pathToFileURL(args.path).href)
+      return {
+        contents: `const __brenderImportMetaUrl = ${url};\n` + contents.replace(IMPORT_META_URL, '__brenderImportMetaUrl'),
+        loader: LOADERS[extname(args.path)] || 'js'
+      }
+    })
+  }
+}
 
 /**
  * Bundles a module entry point with esbuild so that extensionless imports,
  * bare specifiers, and other bundler conventions resolve correctly.
- * Returns the default + named exports of the bundled module, or null on failure.
+ * Returns the default + named exports of the bundled module, or null on failure
+ * (or, with `strict`, throws what went wrong).
  */
-const bundleAndImport = async (entryPath) => {
-  if (!existsSync(entryPath)) return null
+const bundleAndImport = async (entryPath, { strict = false } = {}) => {
+  if (!existsSync(entryPath)) {
+    if (strict) throw new Error(`${entryPath} does not exist`)
+    return null
+  }
 
   let esbuild
   try {
@@ -30,20 +66,69 @@ const bundleAndImport = async (entryPath) => {
       outfile: outFile,
       write: true,
       logLevel: 'silent',
+      plugins: [sourceUrlPlugin],
       // Mark node builtins as external
       external: ['fs', 'path', 'os', 'crypto', 'url', 'http', 'https', 'stream', 'util', 'events', 'buffer', 'child_process', 'worker_threads', 'net', 'tls', 'dns', 'dgram', 'zlib', 'assert', 'querystring', 'string_decoder', 'readline', 'perf_hooks', 'async_hooks', 'v8', 'vm', 'cluster', 'inspector', 'module', 'process', 'tty'],
     })
 
     const mod = await import(`file://${outFile}`)
     return mod
-  } catch {
+  } catch (err) {
     // Fallback: try raw import
-    try { return await import(entryPath) } catch { return null } // fallback: module not found via this resolver, trying next
+    try { return await import(entryPath) } catch (rawErr) { // fallback: module not found via this resolver, trying next
+      if (strict) throw err
+      return null
+    }
   } finally {
     try { unlinkSync(outFile) } catch {} // cleanup: ignore if temp file already removed
   }
 }
 
+// A project's own context module (`context`): the object its entry hands to
+// `create(app, context)` — `{ state, components, pages, functions,
+// designSystem, files, sharedLibraries, ...config }`. The build's entry is
+// what decides which pages a site has; a project whose public entry boots a
+// smaller context than symbols/pages/index.js (xma.info: `siteContext.js`,
+// no admin pages) got every page pre-rendered, admin ones included (xma.info
+// report, brender build item 10). Its keys are spread into plain objects (a
+// module namespace is not extensible); config keys stay at the top level,
+// where render() reads them, as in a frank payload.
+const CONTEXT_OBJECT_KEYS = ['state', 'dependencies', 'components', 'snippets', 'pages', 'functions', 'methods', 'designSystem', 'files', 'assets']
+
+const loadContextModule = async (projectPath, contextPath) => {
+  const entry = resolve(projectPath, contextPath)
+  let mod
+  try {
+    mod = await bundleAndImport(entry, { strict: true })
+  } catch (err) {
+    throw new Error(`brender: cannot load the context module ${contextPath} (${err.message})`)
+  }
+  const context = mod && (mod.default || mod)
+  if (!context || typeof context !== 'object') {
+    throw new Error(`brender: the context module ${contextPath} has no default export object`)
+  }
+  const out = { ...context }
+  for (const key of CONTEXT_OBJECT_KEYS) {
+    if (context[key] && typeof context[key] === 'object') out[key] = { ...context[key] }
+  }
+  out.sharedLibraries = Array.isArray(context.sharedLibraries) ? context.sharedLibraries : []
+  return out
+}
+
+const mergeLibraries = async (result) => {
+  // Pre-resolve string library references and merge into context
+  // so production builds have zero runtime overhead
+  if (result.sharedLibraries.length) {
+    const { resolveSharedLibraries, mergeSharedLibraries } = await import('@symbo.ls/utils')
+    const hasStrings = result.sharedLibraries.some(lib => typeof lib === 'string')
+    if (hasStrings) {
+      result.sharedLibraries = await resolveSharedLibraries(result.sharedLibraries)
+    }
+    mergeSharedLibraries(result, result.sharedLibraries)
+  }
+  return result
+}
+
 /**
  * Loads a Symbols project from a filesystem path.
  * Expects the standard symbols/ directory structure.
@@ -52,13 +137,28 @@ const bundleAndImport = async (entryPath) => {
  * and other bundler conventions work in Node.js.
  *
  * Used for prebuild scenarios where brender runs locally
- * against a project directory (e.g. `smbls build --prerender`).
+ * against a project directory (e.g. `smbls build`).
  *
  * For server runtime rendering, pass the project data
  * directly to render() instead.
+ *
+ * @param {string} projectPath
+ * @param {object} [options]
+ * @param {string} [options.dir='symbols'] - the symbols directory (symbols.json `dir`)
+ * @param {string} [options.context] - a module, relative to `projectPath`,
+ *   whose default export is the context the build's entry boots with
+ *   (symbols.json `brender.context`). Everything but `app` comes from it.
  */
-export const loadProject = async (projectPath) => {
-  const symbolsDir = resolve(projectPath, 'symbols')
+export const loadProject = async (projectPath, options = {}) => {
+  const symbolsDir = resolve(projectPath, options.dir || 'symbols')
+
+  if (options.context) {
+    const [appModule, context] = await Promise.all([
+      bundleAndImport(join(symbolsDir, 'app.js')),
+      loadContextModule(projectPath, options.context)
+    ])
+    return mergeLibraries({ app: { ...(appModule?.default || {}) }, ...context })
+  }
 
   const [
     appModule,
@@ -108,18 +208,7 @@ export const loadProject = async (projectPath) => {
     sharedLibraries: sharedLibsModule?.default || []
   }
 
-  // Pre-resolve string library references and merge into context
-  // so production builds have zero runtime overhead
-  if (result.sharedLibraries.length) {
-    const { resolveSharedLibraries, mergeSharedLibraries } = await import('@symbo.ls/utils')
-    const hasStrings = result.sharedLibraries.some(lib => typeof lib === 'string')
-    if (hasStrings) {
-      result.sharedLibraries = await resolveSharedLibraries(result.sharedLibraries)
-    }
-    mergeSharedLibraries(result, result.sharedLibraries)
-  }
-
-  return result
+  return mergeLibraries(result)
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.14.664",
+  "version": "3.14.665",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -46,18 +46,18 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@symbo.ls/css": "^3.14.777",
-    "@symbo.ls/default-config": "^3.14.785",
-    "@symbo.ls/element": "^3.14.803",
-    "@symbo.ls/fetch": "^3.14.664",
+    "@symbo.ls/css": "^3.14.779",
+    "@symbo.ls/default-config": "^3.14.787",
+    "@symbo.ls/element": "^3.14.805",
+    "@symbo.ls/fetch": "^3.14.665",
     "@symbo.ls/helmet": "^3.14.670",
-    "@symbo.ls/scratch": "^3.14.788",
-    "@symbo.ls/utils": "^3.14.786",
+    "@symbo.ls/scratch": "^3.14.789",
+    "@symbo.ls/utils": "^3.14.787",
     "esbuild": "^0.28.1",
     "linkedom": "^0.16.8"
   },
   "peerDependencies": {
-    "smbls": "^3.14.833"
+    "smbls": "^3.14.838"
   },
   "optionalDependencies": {
     "@symbo.ls/funcql": "^3.14.0"

package/prefetch.js

@@ -1,12 +1,13 @@
 /**
  * SSR data prefetching for brender.
  *
- * Walks a page definition tree, collects `fetch` declarations,
- * executes them against the configured DB adapter,
- * and returns the fetched data keyed by element path + `as` field.
+ * `fetchSSRTranslations` loads a project's table/RPC labels before a render.
  *
- * This allows brender to inject fetched data into element state
- * before rendering, so the SSR output matches the client-side SPA.
+ * `prefetchPageData` walks a page definition tree, collects `fetch`
+ * declarations, executes them against the configured DB adapter, and returns
+ * the fetched data keyed by element path + `as` field. render() does NOT use
+ * it: the fetch plugin loads a page's data during the render, with the real
+ * element (a `transform` here gets no element). Kept for direct callers.
  */
 
 const isFunction = (v) => typeof v === 'function'
@@ -192,6 +193,10 @@ const executeSingle = async (adapter, config) => {
 /**
  * Prefetch all data for a page route.
  *
+ * @deprecated render() and renderPage() no longer use it: the fetch plugin
+ * loads a page's data during the render, with the real element (a `transform`
+ * here gets none). The `prefetch` render option does not call it. Kept for
+ * direct callers; to be removed.
  * @param {object} data - Full project data (from loadProject)
  * @param {string} route - Route to prefetch for (e.g. '/', '/blog')
  * @param {object} [options]
@@ -235,13 +240,6 @@ export const prefetchPageData = async (data, route = '/', options = {}) => {
   return stateUpdates
 }
 
-/**
- * Inject prefetched data into a page definition's state objects.
- * Mutates the definition in place (caller should deep-clone first).
- *
- * @param {object} pageDef - Page definition (will be mutated)
- * @param {Map<string, object>} stateUpdates - Map from prefetchPageData
- */
 /**
  * Fetch polyglot translations from the DB for SSR use.
  * Returns a map of { [lang]: { key: text, ... } } for all configured languages.
@@ -254,6 +252,14 @@ export const fetchSSRTranslations = async (data) => {
   const config = data.config || {}
   const polyglot = config.polyglot || data.polyglot
   if (!polyglot?.fetch) return null
+  // A FUNCTION is the project's own loader — `(lang, version, el) => …`,
+  // called by the polyglot plugin. It runs inside the render, with the real
+  // root element (its el.call / el.getDB), and render() reads its labels back
+  // from the root state. This used to fall through to the RPC branch below
+  // with brender's default name, `get_translations_if_changed`: one request
+  // per language per route that the project never serves — 44 answered 404
+  // in one build (xma.info report, brender build item 11).
+  if (typeof polyglot.fetch === 'function') return null
 
   const dbConfig = config.fetch || data.fetch || config.db || data.db
   if (!dbConfig) return null
@@ -291,53 +297,19 @@ export const fetchSSRTranslations = async (data) => {
 }
 
 /**
- * Pre-evaluate children functions and replace them with static results.
- * During SSR, DOMQL's runtime state cascading and async re-render cycle
- * may not work correctly (trackSourcemapDeep stack overflows, etc.).
- * By pre-evaluating the children functions, we produce static element
- * definitions that DOMQL can render directly.
+ * Merge prefetched data into a page definition's element states. Mutates the
+ * definition in place (the caller deep-clones first).
+ *
+ * @deprecated render() no longer uses it (the fetch plugin loads a page's data
+ * during the render); kept for callers of prefetchPageData, to be removed.
+ *
+ * It used to go on and evaluate every `children` FUNCTION under the target
+ * with a stand-in element — whose call() answered 'ka' for any language and
+ * returned the enclosing arrow function's `arguments[1]` for a label — and
+ * freeze the result into a static array the real data could never replace
+ * (xma.info report, brender build items 5 and 13). A children function stays
+ * a function now: the render runs it with the real element.
  */
-const preEvaluateChildren = (def, inheritedState) => {
-  if (!def || typeof def !== 'object') return
-  for (const key in def) {
-    if (key === 'state' || key === 'fetch' || key === 'props' ||
-        key === 'attr' || key === 'on' || key === 'define' ||
-        key === 'childExtends' || key === 'childProps' || key === 'childrenAs') continue
-    if (key.charAt(0) >= 'A' && key.charAt(0) <= 'Z' && isObject(def[key])) {
-      const child = def[key]
-      // Determine effective state for this element (own state or inherited)
-      const effectiveState = child.state && typeof child.state === 'object'
-        ? { ...inheritedState, ...child.state }
-        : inheritedState
-
-      // Pre-evaluate children function
-      if (isFunction(child.children)) {
-        try {
-          const mockEl = {
-            state: effectiveState,
-                call: (fn) => {
-              if (fn === 'getActiveLang' || fn === 'getLang') return effectiveState?.lang || 'ka'
-              if (fn === 'polyglot') return arguments[1] || ''
-              return undefined
-            },
-            __ref: {}
-          }
-          const result = child.children(mockEl, effectiveState)
-          if (isArray(result) && result.length > 0) {
-            // Replace children function with static array
-            child.children = result
-          }
-        } catch {
-          // If evaluation fails, leave the function as-is
-        }
-      }
-
-      // Recurse deeper
-      preEvaluateChildren(child, effectiveState)
-    }
-  }
-}
-
 export const injectPrefetchedState = (pageDef, stateUpdates) => {
   if (!stateUpdates || !stateUpdates.size) return
 
@@ -358,10 +330,6 @@ export const injectPrefetchedState = (pageDef, stateUpdates) => {
         target.state = {}
       }
       Object.assign(target.state, data)
-
-      // Pre-evaluate children functions with the injected state
-      // so DOMQL gets static element definitions instead of functions
-      preEvaluateChildren(target, target.state)
     }
   }
 }