@symbo.ls/brender 3.14.661 → 3.14.663

package/shell.js

@@ -0,0 +1,187 @@
+/**
+ * Compose a server render INTO an already-built app document (the "shell").
+ *
+ * `smbls build` with `"brender": true` pre-renders every static route after
+ * the bundler has written `dist/index.html`. That file is the only thing that
+ * boots the app — it carries the bundle's <script>/<link> tags (parcel, vite)
+ * or the inlined runtime and project (symbols-runner). Writing brender's
+ * standalone document over it (renderPage without `shell`) shipped pages with
+ * no app code at all: static markup that never became interactive. So the
+ * build path renders each route and puts the result into a copy of the shell
+ * instead:
+ *
+ *   <head>  route metadata first (each <title>/<meta>/canonical/icon the
+ *           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.
+ *
+ * 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
+ * to `docs/intro.html` or `about/index.html` still loads the bundle.
+ *
+ * Pure string work on purpose: the shell's inline scripts (symbols-runner
+ * inlines the whole runtime) must reach the output byte-for-byte, which a
+ * DOM parse + serialize round-trip does not guarantee.
+ */
+
+const HEAD_OPEN = /<head(\s[^>]*)?>/i
+const BODY_OPEN = /<body(\s[^>]*)?>/i
+
+const attr = (tag, name) => {
+  const m = new RegExp(`\\s${name}\\s*=\\s*("([^"]*)"|'([^']*)'|([^\\s>]+))`, 'i').exec(tag)
+  return m ? (m[2] ?? m[3] ?? m[4] ?? '') : null
+}
+
+// The identity a head tag is deduplicated by — or null when the tag is not
+// one the route's metadata owns (scripts, styles, stylesheets, preloads…).
+export const headTagKey = (tag) => {
+  const lower = tag.slice(0, 12).toLowerCase()
+  if (lower.startsWith('<title')) return 'title'
+  if (lower.startsWith('<meta')) {
+    if (attr(tag, 'charset') !== null) return 'charset'
+    for (const a of ['name', 'property', 'http-equiv', 'itemprop']) {
+      const v = attr(tag, a)
+      if (v !== null) return `${a}:${v.toLowerCase()}`
+    }
+    return null
+  }
+  if (lower.startsWith('<link')) {
+    const rel = (attr(tag, 'rel') || '').toLowerCase()
+    if (rel === 'canonical') return 'link:canonical'
+    if (rel === 'icon' || rel === 'shortcut icon') return `link:${rel}:${attr(tag, 'href') || ''}`
+    if (rel === 'alternate' && attr(tag, 'hreflang') !== null) return `link:alternate:${(attr(tag, 'hreflang') || '').toLowerCase()}`
+    return null
+  }
+  return null
+}
+
+const HEAD_TAG = /<title[^>]*>[\s\S]*?<\/title\s*>|<meta\b[^>]*>|<link\b[^>]*>/gi
+
+// Raw-text blocks: their content is never markup, so nothing below may match
+// inside one. symbols-runner inlines the whole runtime, whose string literals
+// contain `<link rel="icon" href="${href}"`, `<title>`, `<body>`…
+const RAW_BLOCK = /<(script|style|noscript|template|textarea)\b[\s\S]*?<\/\1\s*>/gi
+
+const rawRanges = (html) => [...html.matchAll(RAW_BLOCK)].map(m => [m.index, m.index + m[0].length, m[0]])
+
+// Apply `fn` to the markup between raw blocks; `onRaw` (optional) to each
+// raw block's text.
+const mapOutsideRawBlocks = (html, fn, onRaw = (raw) => raw) => {
+  let out = ''
+  let last = 0
+  for (const [start, end, raw] of rawRanges(html)) {
+    out += fn(html.slice(last, start)) + onRaw(raw)
+    last = end
+  }
+  return out + fn(html.slice(last))
+}
+
+// First match of `re` at or after `from` that does not start inside a raw block.
+const findOutside = (html, re, from = 0) => {
+  const ranges = rawRanges(html)
+  const g = new RegExp(re.source, re.flags.includes('g') ? re.flags : re.flags + 'g')
+  g.lastIndex = from
+  let m
+  while ((m = g.exec(html))) {
+    const at = m.index
+    const inside = ranges.find(([s, e]) => at > s && at < e)
+    if (!inside) return m
+    g.lastIndex = inside[1]
+  }
+  return null
+}
+
+const isRelativeUrl = (url) => !!url &&
+  !/^(?:[a-z][a-z0-9+.-]*:|\/|#|\?)/i.test(url)
+
+// Quoted or unquoted (minifiers drop the quotes: `src=index.js`).
+const rebaseTag = (tag, prefix) =>
+  tag.replace(/(\s(?:src|href)\s*=\s*)(?:(["'])([^"']*)\2|([^\s"'>]+))/gi, (whole, lead, q, quoted, bare) => {
+    const url = q ? quoted : bare
+    if (!isRelativeUrl(url)) return whole
+    const quote = q || ''
+    return `${lead}${quote}${prefix}${url.replace(/^\.\//, '')}${quote}`
+  })
+
+// Rebase relative src/href on <script>/<link> tags by `depth` directories —
+// the tags only: an inline script's TEXT is never touched.
+const rebaseAssets = (html, depth) => {
+  if (!depth) return html
+  const prefix = '../'.repeat(depth)
+  return mapOutsideRawBlocks(
+    html,
+    (markup) => markup.replace(/<link\b[^>]*>/gi, (tag) => rebaseTag(tag, prefix)),
+    (raw) => /^<script\b/i.test(raw)
+      ? raw.replace(/^<script\b[^>]*>/i, (tag) => rebaseTag(tag, prefix))
+      : raw
+  )
+}
+
+/**
+ * @param {string} shell - the built app document (e.g. dist/index.html)
+ * @param {object} parts
+ * @param {string} [parts.headTags] - route metadata tags (generateHeadHtml)
+ * @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`)
+ * @returns {string}
+ */
+export const composeIntoShell = (shell, { headTags = '', headEnd = '', body = '', depth = 0, bootScripts = '' } = {}) => {
+  if (typeof shell !== 'string' || !shell.trim()) {
+    throw new Error('brender: the shell document is empty')
+  }
+  let html = rebaseAssets(shell, depth)
+
+  const owned = new Set()
+  for (const m of headTags.matchAll(HEAD_TAG)) {
+    const key = headTagKey(m[0])
+    if (key) owned.add(key)
+  }
+  const dropOwned = (markup) => mapOutsideRawBlocks(markup, (segment) =>
+    segment.replace(HEAD_TAG, (tag) => owned.has(headTagKey(tag)) ? '' : tag)
+  )
+  const headIn = (headTags ? `\n${headTags}` : '')
+  const headOut = (headEnd ? `\n${headEnd}\n` : '')
+
+  const headOpen = findOutside(html, HEAD_OPEN)
+  const headClose = headOpen && findOutside(html, /<\/head\s*>/i, headOpen.index)
+  if (headOpen && headClose) {
+    const start = headOpen.index + headOpen[0].length
+    const end = headClose.index
+    html = html.slice(0, start) + headIn + dropOwned(html.slice(start, end)) + headOut + html.slice(end)
+  } else {
+    // Optional <head>/<body> tags omitted — parcel's minifier (htmlnano)
+    // emits `<html lang=en><script type=importmap>…<meta charset=utf-8>
+    // <title>…<script type=module src=…>` with neither. Metadata and styles
+    // go right after <html> (or the doctype), where the parser opens the
+    // implied head; the shell's own metadata tags of the same identity are
+    // dropped wherever they sit.
+    html = dropOwned(html)
+    const htmlOpen = findOutside(html, /<html(\s[^>]*)?>/i) || findOutside(html, /<!doctype[^>]*>/i)
+    const at = htmlOpen ? htmlOpen.index + htmlOpen[0].length : 0
+    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 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.
+    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.
+  const htmlClose = findOutside(html, /<\/(?:body|html)\s*>/i)
+  const at = htmlClose ? htmlClose.index : html.length
+  return html.slice(0, at) + flagged + html.slice(at)
+}