@symbo.ls/brender 3.14.663 → 3.14.665

package/shell.js

@@ -14,11 +14,14 @@
  *           render produced replaces the shell's tag with the same identity —
  *           never a second <title>), then the shell's own head, then the
  *           render's font links and <style> blocks just before </head>.
- *   <body>  `window.__BRENDER__=true` and the rendered markup right after
- *           <body>, BEFORE the shell's scripts. The client's createDomqlElement
- *           sees the flag, removes the server markup and its <style> blocks,
- *           and renders the app over the same body (packages/smbls
- *           createDomql.js fallbackRender) — no duplicated tree.
+ *   <body>  the rendered markup right after <body>, then the page's data
+ *           blocks (the element-path registry, the recorded answers), BEFORE
+ *           the shell's scripts. No inline script: the page's mark is a
+ *           `<meta name="brender">` the caller puts in `headTags`, so a strict
+ *           Content-Security-Policy cannot hide the pre-render from the
+ *           client (XMA report, brender item 1). The client's
+ *           createDomqlElement adopts the markup, or replaces it with a fresh
+ *           render (packages/smbls src/prerender.js) — never a second tree.
  *
  * Relative asset URLs (`src="./index.js"`, `href="style.css"`) on the shell's
  * <script>/<link> tags are rebased by `depth` directories, so a route written
@@ -122,6 +125,59 @@ const rebaseAssets = (html, depth) => {
   )
 }
 
+// ── The app's own scripts, fetched first ───────────────────────────────────
+// The shell's scripts sit after the pre-rendered markup (parcel keeps them at
+// the end of <body>), so every image in that markup was discovered and
+// requested first, and on a slow connection they shared the bandwidth: the
+// app's 214 KB script finished at 2.65 s instead of 1.75 s on a throttled
+// phone (xma.info report, brender build item 14). Each external script the
+// app boots from gets a high-priority preload in <head> — `modulepreload` for
+// a module, `preload as=script` for a classic one — with the same URL and
+// CORS/integrity attributes, so the browser reuses the response. An `async`
+// script (a helper the app does not wait for) or a `nomodule` one is left
+// alone, as is anything that is not JavaScript (importmap, JSON data).
+const SCRIPT_TYPES = new Set(['', 'module', 'text/javascript', 'application/javascript'])
+
+const hasAttr = (tag, name) => new RegExp(`\\s${name}(?:\\s*=|\\s|>|/)`, 'i').test(tag)
+
+export const scriptPreloads = (html) => {
+  const links = []
+  const seen = new Set()
+  for (const [, , raw] of rawRanges(html)) {
+    if (!/^<script\b/i.test(raw)) continue
+    const open = raw.slice(0, raw.indexOf('>') + 1)
+    const src = attr(open, 'src')
+    if (!src || seen.has(src)) continue
+    const type = (attr(open, 'type') || '').trim().toLowerCase()
+    if (!SCRIPT_TYPES.has(type) || hasAttr(open, 'async') || hasAttr(open, 'nomodule')) continue
+    seen.add(src)
+    const extra = ['crossorigin', 'integrity', 'referrerpolicy']
+      .map((name) => {
+        const value = attr(open, name)
+        if (value === null) return hasAttr(open, name) ? ` ${name}` : ''
+        return ` ${name}="${value.replace(/"/g, '&quot;')}"`
+      })
+      .join('')
+    const href = src.replace(/"/g, '&quot;')
+    links.push(type === 'module'
+      ? `<link rel="modulepreload" href="${href}" fetchpriority="high"${extra}>`
+      : `<link rel="preload" as="script" href="${href}" fetchpriority="high"${extra}>`)
+  }
+  return links.join('\n')
+}
+
+// `<html lang>` set to the page's language (kept when it already says so).
+const setHtmlLang = (html, lang) => {
+  const htmlOpen = findOutside(html, /<html(\s[^>]*)?>/i)
+  if (!htmlOpen) return html
+  const tag = htmlOpen[0]
+  const value = String(lang).replace(/"/g, '&quot;')
+  const next = attr(tag, 'lang') !== null
+    ? tag.replace(/(\slang\s*=\s*)(?:"[^"]*"|'[^']*'|[^\s>]+)/i, `$1"${value}"`)
+    : tag.replace(/^<html/i, `<html lang="${value}"`)
+  return html.slice(0, htmlOpen.index) + next + html.slice(htmlOpen.index + tag.length)
+}
+
 /**
  * @param {string} shell - the built app document (e.g. dist/index.html)
  * @param {object} parts
@@ -129,16 +185,22 @@ const rebaseAssets = (html, depth) => {
  * @param {string} [parts.headEnd] - font links + <style> blocks for </head>
  * @param {string} [parts.body] - rendered body markup
  * @param {number} [parts.depth=0] - directory depth of the output file
- * @param {string} [parts.bootScripts] - inline scripts placed right after the
- *   `__BRENDER__` flag, before the markup (the opt-in hydration registry and
- *   fetch seed — renderPage `adoptDom`)
+ * @param {string} [parts.bootScripts] - data blocks placed right after the
+ *   markup (the hydration registry and the fetch seed — renderPage
+ *   prerenderParts)
+ * @param {string} [parts.lang] - the page's language, written to `<html lang>`
+ * @param {boolean} [parts.preloadScripts=false] - preload the shell's own
+ *   scripts with high priority (see scriptPreloads)
  * @returns {string}
  */
-export const composeIntoShell = (shell, { headTags = '', headEnd = '', body = '', depth = 0, bootScripts = '' } = {}) => {
+export const composeIntoShell = (shell, { headTags = '', headEnd = '', body = '', depth = 0, bootScripts = '', lang, preloadScripts = false } = {}) => {
   if (typeof shell !== 'string' || !shell.trim()) {
     throw new Error('brender: the shell document is empty')
   }
   let html = rebaseAssets(shell, depth)
+  if (lang) html = setHtmlLang(html, lang)
+  const preloads = preloadScripts ? scriptPreloads(html) : ''
+  if (preloads) headEnd = headEnd ? `${preloads}\n${headEnd}` : preloads
 
   const owned = new Set()
   for (const m of headTags.matchAll(HEAD_TAG)) {
@@ -170,17 +232,17 @@ export const composeIntoShell = (shell, { headTags = '', headEnd = '', body = ''
     html = html.slice(0, at) + headIn + headOut + html.slice(at)
   }
 
-  const flagged = `\n<script>window.__BRENDER__=true</script>\n${bootScripts ? bootScripts + '\n' : ''}${body}\n`
+  const flagged = `\n${body}\n${bootScripts ? bootScripts + '\n' : ''}`
   const bodyOpen = findOutside(html, BODY_OPEN)
   if (bodyOpen) {
     // Right after <body>: before every shell script, so a classic inline
-    // boot script (symbols-runner) already finds the flag and the markup.
+    // boot script (symbols-runner) already finds the markup and its data.
     const at = bodyOpen.index + bodyOpen[0].length
     return html.slice(0, at) + flagged + html.slice(at)
   }
   // No <body> tag: the markup opens the implied body at the end of the
   // document. Such shells load the app with module scripts (parcel, vite),
-  // which run after parsing — the flag and the markup are in place by then.
+  // which run after parsing — the markup and its data are in place by then.
   const htmlClose = findOutside(html, /<\/(?:body|html)\s*>/i)
   const at = htmlClose ? htmlClose.index : html.length
   return html.slice(0, at) + flagged + html.slice(at)