@barefootjs/client 0.1.3 → 0.3.0

package/src/runtime/hydrate.ts

@@ -294,6 +294,12 @@ function hydrateCommentScope(comment: Comment): void {
   const proxyEl = nextElementSibling(comment) ?? comment.parentElement
   if (!proxyEl) return
 
+  // A synchronous CSR render() may have already initialized this fragment
+  // scope and claimed its proxy before this async walk runs. Honour the same
+  // `hydratedScopes` signal the element-scope path uses (hydrateElementScope),
+  // so a comment-rooted scope is never re-initialized once claimed.
+  if (hydratedScopes.has(proxyEl)) return
+
   commentScopeRegistry.set(proxyEl, { commentNode: comment, scopeId })
 
   const parsed = parseProps(propsJson || null, `comment scope ${scopeId}`)

package/src/runtime/map-array.ts

@@ -277,6 +277,17 @@ export function mapArray<T>(
           scopes.set(key, scope)
           insertScope(scope, container, anchor)
         }
+
+        // If client has fewer items than SSR rendered, remove orphaned nodes
+        for (let i = items.length; i < existingRanges.length; i++) {
+          const range = existingRanges[i]
+          if (range.startMarker?.parentNode) range.startMarker.remove()
+          if (range.primaryEl.parentNode) range.primaryEl.remove()
+          for (const ex of range.extras) {
+            if (ex.parentNode) ex.remove()
+          }
+        }
+
         return  // Hydration complete — effects handle future updates
       }
     }

package/src/runtime/render.ts

@@ -6,10 +6,11 @@
  * never import this module.
  */
 
-import { BF_SCOPE } from '@barefootjs/shared'
+import { BF_SCOPE, BF_SCOPE_COMMENT_PREFIX } from '@barefootjs/shared'
 import { setParentScopeId } from './component'
 import { hydratedScopes } from './hydration-state'
 import { getComponentInit } from './registry'
+import { commentScopeRegistry } from './scope'
 import { getTemplate, type TemplateFn } from './template'
 import type { ComponentDef, InitFn } from './types'
 
@@ -86,20 +87,41 @@ export function render(
 
   const tpl = document.createElement('template')
   tpl.innerHTML = html
-  const element = tpl.content.firstChild as HTMLElement
 
-  if (!element) {
-    throw new Error('[BarefootJS] render(): template returned empty HTML')
-  }
+  const rootElements = Array.from(tpl.content.childNodes).filter(
+    (n): n is HTMLElement => n.nodeType === Node.ELEMENT_NODE
+  )
 
-  if (!element.getAttribute(BF_SCOPE)) {
-    element.setAttribute(BF_SCOPE, scopeId)
+  if (rootElements.length === 0) {
+    throw new Error('[BarefootJS] render(): template returned empty HTML')
   }
 
   container.innerHTML = ''
-  container.appendChild(element)
 
-  init(element, props)
+  if (rootElements.length === 1) {
+    const element = rootElements[0]
+    if (!element.getAttribute(BF_SCOPE)) {
+      element.setAttribute(BF_SCOPE, scopeId)
+    }
+    container.appendChild(element)
+    init(element, props)
+    hydratedScopes.add(element)
+    return
+  }
+
+  // Multi-root (fragment) template: the child scopes are siblings, not
+  // descendants of one root, so $c() can't resolve them by subtree walk.
+  // Recreate the SSR fragment layout — a `bf-scope:` comment marker followed
+  // by the sibling roots — and register it so candidatesInScope() walks the
+  // comment range. Without this only the first root would hydrate.
+  const commentNode = document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${scopeId}`)
+  container.appendChild(commentNode)
+  for (const node of Array.from(tpl.content.childNodes)) {
+    container.appendChild(node)
+  }
 
-  hydratedScopes.add(element)
+  const proxyEl = rootElements[0]
+  commentScopeRegistry.set(proxyEl, { commentNode, scopeId })
+  init(proxyEl, props)
+  hydratedScopes.add(proxyEl)
 }

package/src/runtime/spread-attrs.ts

@@ -6,83 +6,33 @@
  * a static string for server/template rendering of computed local spreads.
  */
 
+import { classifyDOMProp } from '@barefootjs/shared'
 import { styleToCss } from './style'
 
-/**
- * SVG attributes that are case-sensitive and MUST stay in camelCase.
- *
- * The default JSX-prop → HTML-attribute rewrite lower-cases camelCase
- * (`fooBar` → `foo-bar`), which is correct for HTML attrs and for the
- * CSS-style SVG presentation attrs (`strokeWidth` → `stroke-width`).
- * The XML-namespaced SVG attrs below, though, are case-sensitive in
- * the spec: `viewBox` lower-cased to `view-box` makes the browser
- * treat it as an unknown user attribute and the SVG no longer renders
- * (pointer events stop hitting the inner geometry — surfaced as the
- * Form Builder e2e regression in #1244's merge-emit follow-up).
- *
- * Coordinates with the compile-time `SVG_CAMEL_TO_KEBAB` table in
- * `packages/jsx/src/ir-to-client-js/utils.ts`: presentation attrs
- * (`clipPath`, `strokeWidth`, …) live there and must NOT appear here,
- * or the same JSX prop would lower to `clip-path` via the explicit-
- * attr path and stay `clipPath` via the spread path — a silent
- * divergence. The list below is XML attribute names that have no
- * kebab-case mirror (`viewBox`, `clipPathUnits`, …).
- *
- * The list mirrors React DOM's `DOMProperty` case-preserving entries
- * (only the attributes that appear on actual SVG elements; ARIA and
- * XLink namespaces are unrelated and handled by their `aria-*` /
- * `xlink:*` literal prefix).
- */
-const SVG_CAMEL_CASE_ATTRS: ReadonlySet<string> = new Set([
-  'allowReorder', 'attributeName', 'attributeType', 'autoReverse',
-  'baseFrequency', 'baseProfile', 'calcMode', 'clipPathUnits',
-  'contentScriptType', 'contentStyleType', 'diffuseConstant', 'edgeMode',
-  'externalResourcesRequired', 'filterRes', 'filterUnits', 'glyphRef',
-  'gradientTransform', 'gradientUnits', 'kernelMatrix', 'kernelUnitLength',
-  'keyPoints', 'keySplines', 'keyTimes', 'lengthAdjust', 'limitingConeAngle',
-  'markerHeight', 'markerUnits', 'markerWidth', 'maskContentUnits',
-  'maskUnits', 'numOctaves', 'pathLength', 'patternContentUnits',
-  'patternTransform', 'patternUnits', 'pointsAtX', 'pointsAtY', 'pointsAtZ',
-  'preserveAlpha', 'preserveAspectRatio', 'primitiveUnits', 'refX', 'refY',
-  'repeatCount', 'repeatDur', 'requiredExtensions', 'requiredFeatures',
-  'specularConstant', 'specularExponent', 'spreadMethod', 'startOffset',
-  'stdDeviation', 'stitchTiles', 'surfaceScale', 'systemLanguage',
-  'tableValues', 'targetX', 'targetY', 'textLength', 'viewBox', 'viewTarget',
-  'xChannelSelector', 'yChannelSelector', 'zoomAndPan',
-])
-
 /**
  * Convert an object to an HTML attribute string.
- * Aligned with applyRestAttrs conventions: skips null/undefined/false,
- * event handlers, maps className→class and htmlFor→for. The `style`
- * prop is routed through `styleToCss` so object literals serialize to
- * a real CSS string (matching the reactive `applyRestAttrs` path).
- *
- * SVG attributes listed in `SVG_CAMEL_CASE_ATTRS` are preserved
- * verbatim — the SVG XML spec is case-sensitive for those names.
+ * Uses the shared classifyDOMProp classifier to determine how each prop
+ * maps to the DOM. Skips null/undefined/false, event handlers, ref, and
+ * children. The `style` prop is routed through `styleToCss` so object
+ * literals serialize to a real CSS string.
  */
 export function spreadAttrs(obj: Record<string, unknown>): string {
   if (!obj || typeof obj !== 'object') return ''
   const parts: string[] = []
   for (const [key, value] of Object.entries(obj)) {
     if (value == null || value === false) continue
-    // Skip event handlers
-    if (key.startsWith('on') && key.length > 2 && key[2] === key[2].toUpperCase()) continue
-    // Skip children prop
-    if (key === 'children') continue
-    if (key === 'style') {
+    const c = classifyDOMProp(key)
+    if (c.kind === 'event' || c.kind === 'skip' || c.kind === 'ref') continue
+    if (c.kind === 'style') {
       const css = styleToCss(value)
       if (css != null) parts.push(`style="${css}"`)
       continue
     }
-    // Map JSX prop names to HTML attribute names. Case-sensitive SVG
-    // attrs keep their camelCase per the spec; HTML / CSS-style SVG
-    // presentation attrs lower-case to kebab-case.
-    const attr = key === 'className' ? 'class'
-      : key === 'htmlFor' ? 'for'
-      : SVG_CAMEL_CASE_ATTRS.has(key) ? key
-      : key.replace(/([A-Z])/g, '-$1').toLowerCase()
-    parts.push(value === true ? attr : `${attr}="${value}"`)
+    if (c.kind === 'boolean' && value === true) {
+      parts.push(c.attrName)
+    } else {
+      parts.push(`${c.attrName}="${value}"`)
+    }
   }
   return parts.join(' ')
 }