jq79 0.3.24 → 0.3.26

package/src/jq79.ts

@@ -24,12 +24,18 @@ type TagBlock = {
 const elementAttrs = (el: Element): Record<string, string> =>
   Object.fromEntries(Array.from(el.attributes).map(attr => [attr.name, attr.value]))
 
+// text is kept verbatim - not trimmed, not dropped when it's only whitespace.
+// A template is HTML, so the space in `<span>a</span>\n<span>b</span>` is the
+// same space the browser would collapse-and-render between them, and CSS gets
+// to decide what it's worth (nothing in a block or flex container, one space
+// between inline elements). Trimming it here, as this used to, silently glued
+// siblings together and ate the spaces in `hola <b>mundo</b> adios`
 const elementToAST = (el: Element): TemplateNode => ({
   tag: el.tagName.toLowerCase(),
   attrs: elementAttrs(el),
   children: Array.from(el.childNodes).flatMap((node): (TemplateNode | string)[] => {
     if (node.nodeType === Node.TEXT_NODE) {
-      const text = node.textContent?.trim() ?? ""
+      const text = node.textContent ?? ""
       return text ? [text] : []
     }
     if (node.nodeType === Node.ELEMENT_NODE) {
@@ -113,8 +119,13 @@ const findComponentKey = (scope: Record<string, any>, tag: string): string | nul
 // become camelCase. Props stay live: a parent effect re-evaluates each
 // expression and writes it into the child's store. The component variable is
 // reactive too - while it's undefined (e.g. an `await import(...)` still in
-// flight) nothing renders, and the child appears when it resolves
-const renderNestedComponent = (key: string, node: TemplateNode, scope: Record<string, any>, fx: EffectScope): Node => {
+// flight) nothing renders, and the child appears when it resolves.
+// `shadow` is the parent's style mode, carried down the whole render: a child
+// of a shadow-rendered component renders inside that shadow root, so its
+// <style> has to go in there with it - document.head can't reach into a shadow
+// tree, and a style that never applies to its own component would still be
+// restyling the page around it
+const renderNestedComponent = (key: string, node: TemplateNode, scope: Record<string, any>, fx: EffectScope, shadow: boolean): Node => {
   const anchor = document.createComment(key)
   const wrapper = document.createDocumentFragment()
   wrapper.appendChild(anchor)
@@ -160,8 +171,11 @@ const renderNestedComponent = (key: string, node: TemplateNode, scope: Record<st
     const seed = untracked(() =>
       Object.fromEntries(Object.entries(props).map(([name, expr]) => [name, evalExpr(expr, scope)]))
     )
+    // mounting into a fragment attaches no shadow root of its own: a
+    // shadow-rendered child keeps its <style> elements inline, next to the DOM
+    // they style, and the parent's shadow root is what scopes both
     const holder = document.createDocumentFragment()
-    instance.render(seed).mount(holder)
+    ;(shadow ? instance.renderShadow(seed) : instance.render(seed)).mount(holder)
     anchor.parentNode!.insertBefore(holder, anchor.nextSibling)
 
     const syncFx = createEffectScope(scope)
@@ -222,7 +236,7 @@ const createWithScope = (expr: string, scope: Record<string, any>): Record<strin
 // normally. :if/:elseif/:else/:each are handled by renderNodes, which decides
 // *whether*/*how many times* a node is rendered before calling this. Tags
 // matching a PascalCase scope variable render as nested components instead
-const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: EffectScope): Node => {
+const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: EffectScope, shadow: boolean): Node => {
   // :with applies to the element's own bindings (@events, :attrs) and its
   // whole subtree. On a :each element the item scope is already in place, so
   // :with="item" works
@@ -230,7 +244,7 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
   const scope = withExpr !== undefined ? createWithScope(withExpr, outerScope) : outerScope
 
   const componentKey = findComponentKey(scope, node.tag)
-  if (componentKey) return renderNestedComponent(componentKey, node, scope, fx)
+  if (componentKey) return renderNestedComponent(componentKey, node, scope, fx, shadow)
 
   const el = document.createElement(node.tag)
 
@@ -246,7 +260,7 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
       const key = findComponentKey(scope, node.tag)
       if (!key) return
       upgraded = true
-      el.replaceWith(renderNestedComponent(key, node, scope, fx))
+      el.replaceWith(renderNestedComponent(key, node, scope, fx, shadow))
     })
   }
 
@@ -281,7 +295,7 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
   } else if (htmlExpr !== undefined) {
     fx.effect(() => { el.innerHTML = sanitizeHTML(String(evalExpr(htmlExpr, scope) ?? "")) })
   } else {
-    el.appendChild(renderNodes(node.children, scope, fx))
+    el.appendChild(renderNodes(node.children, scope, fx, shadow))
   }
 
   return el
@@ -291,7 +305,7 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
 // can be swapped in place without disturbing sibling positions. Only depends
 // on whatever the branch expressions read (e.g. "score"), and skips
 // rebuilding entirely when the active branch hasn't actually changed
-const renderConditional = (branches: ConditionalBranch[], scope: Record<string, any>, fx: EffectScope): Node => {
+const renderConditional = (branches: ConditionalBranch[], scope: Record<string, any>, fx: EffectScope, shadow: boolean): Node => {
   const anchor = document.createComment("if")
   const wrapper = document.createDocumentFragment()
   wrapper.appendChild(anchor)
@@ -311,7 +325,7 @@ const renderConditional = (branches: ConditionalBranch[], scope: Record<string,
     if (!next) return
 
     branchFx = createEffectScope(scope)
-    current = renderNode(next.node, scope, branchFx)
+    current = renderNode(next.node, scope, branchFx, shadow)
     anchor.parentNode!.insertBefore(current, anchor.nextSibling)
   })
 
@@ -340,7 +354,7 @@ type EachEntry = { key: any; item: any; scope: Record<string, any>; node: Node;
 // the first change - add :key for anything that gets reordered or filtered.
 // Each item gets its own scope via Object.create(scope), so `item`/`$index`
 // shadow same-named outer bindings without copying the parent scope's keys
-const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectScope): Node => {
+const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectScope, shadow: boolean): Node => {
   const match = node.attrs[":each"].match(EACH_PATTERN)
   if (!match) return document.createComment(`invalid :each expression "${node.attrs[":each"]}"`)
 
@@ -376,7 +390,7 @@ const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectSc
       existing?.node.parentNode?.removeChild(existing.node)
 
       const itemFx = createEffectScope(scope)
-      return { key, item, scope: itemScope, fx: itemFx, node: renderNode(itemNode, itemScope, itemFx) }
+      return { key, item, scope: itemScope, fx: itemFx, node: renderNode(itemNode, itemScope, itemFx, shadow) }
     })
 
     const nextKeys = new Set(nextEntries.map(entry => entry.key))
@@ -401,7 +415,7 @@ const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectSc
 
 // renders a list of sibling template nodes (text + elements), grouping
 // consecutive :if/:elseif/:else nodes into a single conditional block
-const renderNodes = (nodes: (TemplateNode | string)[], scope: Record<string, any>, fx: EffectScope): DocumentFragment => {
+const renderNodes = (nodes: (TemplateNode | string)[], scope: Record<string, any>, fx: EffectScope, shadow = false): DocumentFragment => {
   const fragment = document.createDocumentFragment()
   let i = 0
 
@@ -409,15 +423,17 @@ const renderNodes = (nodes: (TemplateNode | string)[], scope: Record<string, any
     const node = nodes[i]
 
     if (typeof node === "string") {
-      const textNode = document.createTextNode("")
-      fx.effect(() => { textNode.textContent = interpolate(node, scope) })
+      const textNode = document.createTextNode(node)
+      // static text is most of a template (all of its indentation, for a start):
+      // only text with a {{ expression }} in it needs an effect to stay in sync
+      if (node.includes("{{")) fx.effect(() => { textNode.textContent = interpolate(node, scope) })
       fragment.appendChild(textNode)
       i++
       continue
     }
 
     if (":each" in node.attrs) {
-      fragment.appendChild(renderEach(node, scope, fx))
+      fragment.appendChild(renderEach(node, scope, fx, shadow))
       i++
       continue
     }
@@ -425,29 +441,41 @@ const renderNodes = (nodes: (TemplateNode | string)[], scope: Record<string, any
     if (":if" in node.attrs) {
       const branches: ConditionalBranch[] = [{ expr: node.attrs[":if"], node }]
       i++
-      while (i < nodes.length && typeof nodes[i] !== "string" && ":elseif" in (nodes[i] as TemplateNode).attrs) {
-        const elseifNode = nodes[i] as TemplateNode
-        branches.push({ expr: elseifNode.attrs[":elseif"], node: elseifNode })
-        i++
+
+      // the branches of a chain are siblings in the AST, but the template writes
+      // them on their own lines - so the whitespace between them is indentation
+      // and nothing else, and it's dropped rather than rendered: only one branch
+      // is ever in the DOM, so there is nothing for it to be a space *between*
+      const nextBranch = (attr: string): TemplateNode | undefined => {
+        let next = i
+        while (next < nodes.length && typeof nodes[next] === "string" && !(nodes[next] as string).trim()) next++
+        const candidate = nodes[next]
+        if (typeof candidate === "object" && attr in candidate.attrs) {
+          i = next + 1
+          return candidate
+        }
+        return undefined
       }
-      if (i < nodes.length && typeof nodes[i] !== "string" && ":else" in (nodes[i] as TemplateNode).attrs) {
-        branches.push({ node: nodes[i] as TemplateNode })
-        i++
+
+      for (let elseif = nextBranch(":elseif"); elseif; elseif = nextBranch(":elseif")) {
+        branches.push({ expr: elseif.attrs[":elseif"], node: elseif })
       }
+      const elseNode = nextBranch(":else")
+      if (elseNode) branches.push({ node: elseNode })
 
-      fragment.appendChild(renderConditional(branches, scope, fx))
+      fragment.appendChild(renderConditional(branches, scope, fx, shadow))
       continue
     }
 
-    fragment.appendChild(renderNode(node, scope, fx))
+    fragment.appendChild(renderNode(node, scope, fx, shadow))
     i++
   }
 
   return fragment
 }
 
-export const renderComponent = (component: Component79, data: ReactiveDeepData<Record<string, any>>): Node =>
-  renderNodes(component.template, data, createEffectScope(data))
+export const renderComponent = (component: Component79, data: ReactiveDeepData<Record<string, any>>, shadow = false): Node =>
+  renderNodes(component.template, data, createEffectScope(data), shadow)
 
 type ComponentParts = {
   template: TemplateNode[]
@@ -930,7 +958,7 @@ export class Component79 {
     })
 
     const content = document.createDocumentFragment()
-    content.append(this.startMarker, renderNodes(this.template, store, fx), this.endMarker)
+    content.append(this.startMarker, renderNodes(this.template, store, fx, shadow), this.endMarker)
     this.content = content
 
     if (shadow) {