@barefootjs/client 0.2.0 → 0.4.0

package/dist/runtime/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/runtime/component.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAS3C,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAExD;AAWD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH;;;GAGG;AACH;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,GAAG,YAAY,EAChC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,IAAI,CAAC,EAAE,uBAAuB,GAC7B,WAAW,CAyHb;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAE3F;AAuBD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAE7G;AAGD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,CAiDR;AA+DD;;;;;GAKG;AACH;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjD;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,gBAAgB,CAcjF"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/runtime/component.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAS3C,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAExD;AAWD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH;;;GAGG;AACH;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,GAAG,YAAY,EAChC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,IAAI,CAAC,EAAE,uBAAuB,GAC7B,WAAW,CAoIb;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAE3F;AAuBD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAE7G;AAGD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,CAiDR;AA+DD;;;;;GAKG;AACH;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjD;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,gBAAgB,CAcjF"}

package/dist/runtime/index.js

@@ -916,6 +916,8 @@ function hydrateCommentScope(comment) {
   const proxyEl = nextElementSibling2(comment) ?? comment.parentElement;
   if (!proxyEl)
     return;
+  if (hydratedScopes.has(proxyEl))
+    return;
   commentScopeRegistry.set(proxyEl, { commentNode: comment, scopeId });
   const parsed = parseProps(propsJson || null, `comment scope ${scopeId}`);
   const props = parsed[name] ?? {};
@@ -970,9 +972,14 @@ function createComponent(nameOrDef, props, key, slot) {
     }
     return result;
   });
+  const def = getRegisteredDef(name);
+  const isCommentWrapper = def?.comment === true;
+  const scopeId = isCommentWrapper ? null : `${name}_${generateId()}`;
   const prevParentScopeId = _parentScopeId;
   if (slot?.parent) {
     _parentScopeId = slot.parent;
+  } else if (scopeId) {
+    _parentScopeId = scopeId;
   }
   let html;
   try {
@@ -985,10 +992,8 @@ function createComponent(nameOrDef, props, key, slot) {
     console.warn(`[BarefootJS] Template returned empty HTML for component: ${name}`);
     return createPlaceholder(name, key);
   }
-  const def = getRegisteredDef(name);
-  const isCommentWrapper = def?.comment === true;
-  if (!isCommentWrapper) {
-    element.setAttribute(BF_SCOPE, `${name}_${generateId()}`);
+  if (scopeId) {
+    element.setAttribute(BF_SCOPE, scopeId);
   }
   if (slot) {
     if (slot.parent)
@@ -1633,6 +1638,17 @@ function mapArray(accessor, container, getKey, renderItem, markerId) {
           scopes.set(key, scope);
           insertScope(scope, container, anchor);
         }
+        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;
       }
     }
@@ -2075,17 +2091,30 @@ function render(container, nameOrDef, props = {}) {
   }
   const tpl = document.createElement("template");
   tpl.innerHTML = html;
-  const element = tpl.content.firstChild;
-  if (!element) {
+  const rootElements = Array.from(tpl.content.childNodes).filter((n) => n.nodeType === Node.ELEMENT_NODE);
+  if (rootElements.length === 0) {
     throw new Error("[BarefootJS] render(): template returned empty HTML");
   }
-  if (!element.getAttribute(BF_SCOPE)) {
-    element.setAttribute(BF_SCOPE, scopeId);
-  }
   container.innerHTML = "";
-  container.appendChild(element);
-  init(element, props);
-  hydratedScopes.add(element);
+  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;
+  }
+  const commentNode = document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${scopeId}`);
+  container.appendChild(commentNode);
+  for (const node of Array.from(tpl.content.childNodes)) {
+    container.appendChild(node);
+  }
+  const proxyEl = rootElements[0];
+  commentScopeRegistry.set(proxyEl, { commentNode, scopeId });
+  init(proxyEl, props);
+  hydratedScopes.add(proxyEl);
 }
 // src/runtime/streaming.ts
 function __bf_swap(id) {

package/dist/runtime/map-array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"map-array.d.ts","sourceRoot":"","sources":["../../src/runtime/map-array.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AA4LH;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,EACnD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,KAAK,WAAW,EACjF,QAAQ,CAAC,EAAE,MAAM,GAChB,IAAI,CA6JN"}
+{"version":3,"file":"map-array.d.ts","sourceRoot":"","sources":["../../src/runtime/map-array.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AA4LH;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,EACnD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,KAAK,WAAW,EACjF,QAAQ,CAAC,EAAE,MAAM,GAChB,IAAI,CAwKN"}

package/dist/runtime/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/runtime/render.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAOH,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,SAAS,CAAA;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,MAAM,CACpB,SAAS,EAAE,WAAW,EACtB,SAAS,EAAE,MAAM,GAAG,YAAY,EAChC,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GAClC,IAAI,CA4DN"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/runtime/render.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,SAAS,CAAA;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,MAAM,CACpB,SAAS,EAAE,WAAW,EACtB,SAAS,EAAE,MAAM,GAAG,YAAY,EAChC,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GAClC,IAAI,CAiFN"}

package/dist/runtime/standalone.js

@@ -1107,6 +1107,8 @@ function hydrateCommentScope(comment) {
   const proxyEl = nextElementSibling2(comment) ?? comment.parentElement;
   if (!proxyEl)
     return;
+  if (hydratedScopes.has(proxyEl))
+    return;
   commentScopeRegistry.set(proxyEl, { commentNode: comment, scopeId });
   const parsed = parseProps(propsJson || null, `comment scope ${scopeId}`);
   const props = parsed[name] ?? {};
@@ -1160,9 +1162,14 @@ function createComponent(nameOrDef, props, key, slot) {
     }
     return result;
   });
+  const def = getRegisteredDef(name);
+  const isCommentWrapper = def?.comment === true;
+  const scopeId = isCommentWrapper ? null : `${name}_${generateId()}`;
   const prevParentScopeId = _parentScopeId;
   if (slot?.parent) {
     _parentScopeId = slot.parent;
+  } else if (scopeId) {
+    _parentScopeId = scopeId;
   }
   let html;
   try {
@@ -1175,10 +1182,8 @@ function createComponent(nameOrDef, props, key, slot) {
     console.warn(`[BarefootJS] Template returned empty HTML for component: ${name}`);
     return createPlaceholder(name, key);
   }
-  const def = getRegisteredDef(name);
-  const isCommentWrapper = def?.comment === true;
-  if (!isCommentWrapper) {
-    element.setAttribute(BF_SCOPE, `${name}_${generateId()}`);
+  if (scopeId) {
+    element.setAttribute(BF_SCOPE, scopeId);
   }
   if (slot) {
     if (slot.parent)
@@ -1822,6 +1827,17 @@ function mapArray(accessor, container, getKey, renderItem, markerId) {
           scopes.set(key, scope);
           insertScope(scope, container, anchor);
         }
+        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;
       }
     }
@@ -2260,17 +2276,30 @@ function render(container, nameOrDef, props = {}) {
   }
   const tpl = document.createElement("template");
   tpl.innerHTML = html;
-  const element = tpl.content.firstChild;
-  if (!element) {
+  const rootElements = Array.from(tpl.content.childNodes).filter((n) => n.nodeType === Node.ELEMENT_NODE);
+  if (rootElements.length === 0) {
     throw new Error("[BarefootJS] render(): template returned empty HTML");
   }
-  if (!element.getAttribute(BF_SCOPE)) {
-    element.setAttribute(BF_SCOPE, scopeId);
-  }
   container.innerHTML = "";
-  container.appendChild(element);
-  init(element, props);
-  hydratedScopes.add(element);
+  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;
+  }
+  const commentNode = document.createComment(`${BF_SCOPE_COMMENT_PREFIX}${scopeId}`);
+  container.appendChild(commentNode);
+  for (const node of Array.from(tpl.content.childNodes)) {
+    container.appendChild(node);
+  }
+  const proxyEl = rootElements[0];
+  commentScopeRegistry.set(proxyEl, { commentNode, scopeId });
+  init(proxyEl, props);
+  hydratedScopes.add(proxyEl);
 }
 // src/runtime/streaming.ts
 function __bf_swap(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "BarefootJS client package: reactive primitives (SSR-safe) plus browser runtime under the `/runtime` subpath (compiler target)",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,10 +55,10 @@
     "directory": "packages/client"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.2.0"
+    "@barefootjs/shared": "0.4.0"
   },
   "peerDependencies": {
-    "@barefootjs/jsx": "0.2.0"
+    "@barefootjs/jsx": ">=0.2.0"
   },
   "peerDependenciesMeta": {
     "@barefootjs/jsx": {
@@ -66,7 +66,6 @@
     }
   },
   "devDependencies": {
-    "@barefootjs/jsx": "0.2.0",
     "@happy-dom/global-registrator": "^20.0.11",
     "typescript": "^5.0.0"
   }

package/src/runtime/component.ts

@@ -124,13 +124,31 @@ export function createComponent(
     return result
   })
 
-  // 4. Generate HTML from props.
+  // 4. Pre-generate the component's scope ID.
   //
-  // Thread `slot.parent` into `_parentScopeId` so any hoisted-children
-  // placeholder (#1320) resolves to the calling site's scope.
+  // `comment: true` components (synthesized inline-JSX-callback wrappers
+  // from #1211) render as transparent shells — the parsed `firstChild` is
+  // already the inner component's root with its own bf-s. Don't overwrite
+  // it (scopeId stays null), or `$c(__scope, 's0')` from the wrapper's
+  // init resolves to null.
+  const def = getRegisteredDef(name)
+  const isCommentWrapper = def?.comment === true
+  const scopeId = isCommentWrapper ? null : `${name}_${generateId()}`
+
+  // 5. Generate HTML from props.
+  //
+  // Thread the component's own scope ID into `_parentScopeId` for the
+  // template eval so renderChild() stamps parent-prefixed bf-s / bf-h /
+  // bf-m on child components — matching the SSR convention so a later
+  // `$c(scope, 'sN')` lookup resolves them. Without this, CSR-created
+  // children carry a random prefix and their event handlers never wire
+  // up (#1627). `slot.parent` takes precedence so hoisted-children
+  // placeholders (#1320) still resolve to the calling site's scope.
   const prevParentScopeId = _parentScopeId
   if (slot?.parent) {
     _parentScopeId = slot.parent
+  } else if (scopeId) {
+    _parentScopeId = scopeId
   }
   let html: string
   try {
@@ -139,7 +157,7 @@ export function createComponent(
     _parentScopeId = prevParentScopeId
   }
 
-  // 5. Create DOM element
+  // 6. Create DOM element
   const element = parseHTML(html.trim()).firstChild as HTMLElement
 
   if (!element) {
@@ -147,16 +165,9 @@ export function createComponent(
     return createPlaceholder(name, key)
   }
 
-  // 6. Set scope ID and key attributes.
-  //
-  // `comment: true` components (synthesized inline-JSX-callback wrappers
-  // from #1211) render as transparent shells — the parsed `firstChild` is
-  // already the inner component's root with its own bf-s. Don't overwrite
-  // it, or `$c(__scope, 's0')` from the wrapper's init resolves to null.
-  const def = getRegisteredDef(name)
-  const isCommentWrapper = def?.comment === true
-  if (!isCommentWrapper) {
-    element.setAttribute(BF_SCOPE, `${name}_${generateId()}`)
+  // 7. Set scope ID and key attributes.
+  if (scopeId) {
+    element.setAttribute(BF_SCOPE, scopeId)
   }
   if (slot) {
     if (slot.parent) element.setAttribute(BF_HOST, slot.parent)
@@ -166,18 +177,18 @@ export function createComponent(
     element.setAttribute(BF_KEY, String(key))
   }
 
-  // 7. Set currentScope so provideContext/useContext are element-scoped.
+  // 8. Set currentScope so provideContext/useContext are element-scoped.
   // This allows context providers in initFn to store context on this element.
   const prevScope = setCurrentScope(element)
 
-  // 8. Initialize the component (context providers set up here).
+  // 9. Initialize the component (context providers set up here).
   const initFn = getComponentInit(name)
   if (initFn) {
     // Pass original props (with getters) for reactivity
     initFn(element, props)
   }
 
-  // 9. Evaluate getter children and insert them.
+  // 10. Evaluate getter children and insert them.
   // Children are evaluated NOW (after initFn) so that context provided by
   // the parent is in the global store when children call useContext().
   if (childrenIsGetter) {
@@ -187,13 +198,13 @@ export function createComponent(
     }
   }
 
-  // 10. Restore previous scope
+  // 11. Restore previous scope
   setCurrentScope(prevScope)
 
-  // 11. Mark element as initialized
+  // 12. Mark element as initialized
   hydratedScopes.add(element)
 
-  // 12. Store props and register update function for element reuse in reconcileList
+  // 13. Store props and register update function for element reuse in reconcileList
   propsMap.set(element, props)
   registerPropsUpdate(element, name, props)
 

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)
 }