@barefootjs/client 0.1.3 → 0.3.0

package/dist/runtime/standalone.js

@@ -314,6 +314,156 @@ var BF_KEY = "data-key";
 var BF_ASYNC = "bf-async";
 var BF_ASYNC_RESOLVE = "bf-async-resolve";
 var BF_PARENT_SCOPE_PLACEHOLDER = "__BF_PARENT_SCOPE__";
+// ../shared/src/dom-prop.ts
+var BOOLEAN_ATTRS = new Set([
+  "checked",
+  "disabled",
+  "readonly",
+  "selected",
+  "required",
+  "hidden",
+  "autofocus",
+  "autoplay",
+  "controls",
+  "loop",
+  "muted",
+  "open",
+  "multiple",
+  "novalidate",
+  "formnovalidate"
+]);
+var SVG_CAMEL_TO_KEBAB = {
+  strokeWidth: "stroke-width",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeMiterlimit: "stroke-miterlimit",
+  strokeOpacity: "stroke-opacity",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  textAnchor: "text-anchor",
+  dominantBaseline: "dominant-baseline",
+  alignmentBaseline: "alignment-baseline",
+  fontFamily: "font-family",
+  fontSize: "font-size",
+  fontWeight: "font-weight",
+  fontStyle: "font-style",
+  letterSpacing: "letter-spacing",
+  wordSpacing: "word-spacing",
+  pointerEvents: "pointer-events",
+  vectorEffect: "vector-effect",
+  colorInterpolation: "color-interpolation",
+  clipPath: "clip-path",
+  clipRule: "clip-rule",
+  markerStart: "marker-start",
+  markerMid: "marker-mid",
+  markerEnd: "marker-end"
+};
+var SVG_XML_CAMEL_ATTRS = 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"
+]);
+function isEventProp(key) {
+  return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z";
+}
+function classifyDOMProp(key) {
+  if (key === "children")
+    return { kind: "skip", attrName: key };
+  if (key === "ref")
+    return { kind: "ref", attrName: key };
+  if (isEventProp(key))
+    return { kind: "event", attrName: key };
+  const attrName = toHTMLAttrNameRuntime(key);
+  if (attrName === "style")
+    return { kind: "style", attrName };
+  if (attrName === "value")
+    return { kind: "property", attrName };
+  if (attrName === "checked")
+    return { kind: "property", attrName };
+  if (BOOLEAN_ATTRS.has(attrName.toLowerCase()))
+    return { kind: "boolean", attrName };
+  return { kind: "attr", attrName };
+}
+function toHTMLAttrNameRuntime(key) {
+  if (key === "className")
+    return "class";
+  if (key === "htmlFor")
+    return "for";
+  const svgKebab = SVG_CAMEL_TO_KEBAB[key];
+  if (svgKebab !== undefined)
+    return svgKebab;
+  if (SVG_XML_CAMEL_ATTRS.has(key))
+    return key;
+  if (key.startsWith("data") || key.startsWith("aria")) {
+    return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+  }
+  return key;
+}
 // src/context.ts
 function createContext(defaultValue) {
   return {
@@ -957,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] ?? {};
@@ -1010,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 {
@@ -1025,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)
@@ -1672,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;
       }
     }
@@ -1766,13 +1932,6 @@ function styleToCss(value) {
 }
 
 // src/runtime/apply-rest-attrs.ts
-function toAttrName(key) {
-  if (key === "className")
-    return "class";
-  if (key === "htmlFor")
-    return "for";
-  return key.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
 var jsxToDomEventMap = { doubleclick: "dblclick" };
 function toEventName(jsxPropName) {
   const raw = (jsxPropName[2].toLowerCase() + jsxPropName.slice(3)).toLowerCase();
@@ -1780,127 +1939,61 @@ function toEventName(jsxPropName) {
 }
 function applyRestAttrs(el, source, excludeKeys) {
   const exclude = new Set(excludeKeys);
+  const classified = [];
   for (const key of Object.keys(source)) {
     if (exclude.has(key))
       continue;
-    if (key === "ref") {
+    classified.push({ key, c: classifyDOMProp(key) });
+  }
+  for (const { key, c } of classified) {
+    if (c.kind === "ref") {
       const ref = source[key];
       if (typeof ref === "function")
         ref(el);
-      continue;
-    }
-    if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase()) {
+    } else if (c.kind === "event") {
       const handler = source[key];
       if (typeof handler === "function") {
         el.addEventListener(toEventName(key), handler);
       }
     }
   }
+  const attrEntries = classified.filter(({ c }) => c.kind !== "ref" && c.kind !== "event" && c.kind !== "skip");
   createEffect(() => {
-    for (const key of Object.keys(source)) {
-      if (exclude.has(key))
-        continue;
-      if (key === "ref")
-        continue;
-      if (key === "children")
-        continue;
-      if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())
-        continue;
+    for (const { key, c } of attrEntries) {
       const value = source[key];
-      const attr = toAttrName(key);
       if (value != null && value !== false) {
-        if (attr === "value" && "value" in el) {
+        if (c.kind === "property" && c.attrName === "value" && "value" in el) {
           const strVal = String(value);
           if (el.value !== strVal)
             el.value = strVal;
-        } else if (attr === "checked" && "checked" in el) {
+        } else if (c.kind === "property" && c.attrName === "checked" && "checked" in el) {
           el.checked = !!value;
-        } else if (attr === "style") {
+        } else if (c.kind === "boolean") {
+          el.setAttribute(c.attrName, "");
+        } else if (c.kind === "style") {
           const css = styleToCss(value);
           if (css == null)
             el.removeAttribute("style");
           else
             el.setAttribute("style", css);
         } else {
-          el.setAttribute(attr, String(value));
+          el.setAttribute(c.attrName, String(value));
         }
       } else {
-        if (attr === "checked" && "checked" in el) {
+        if (c.kind === "property" && c.attrName === "value" && "value" in el) {
+          el.value = "";
+        } else if (c.kind === "property" && c.attrName === "checked" && "checked" in el) {
           el.checked = false;
+        } else if (c.kind === "boolean") {
+          el.removeAttribute(c.attrName);
         } else {
-          el.removeAttribute(attr);
+          el.removeAttribute(c.attrName);
         }
       }
     }
   });
 }
 // src/runtime/spread-attrs.ts
-var SVG_CAMEL_CASE_ATTRS = 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"
-]);
 function spreadAttrs(obj) {
   if (!obj || typeof obj !== "object")
     return "";
@@ -1908,18 +2001,20 @@ function spreadAttrs(obj) {
   for (const [key, value] of Object.entries(obj)) {
     if (value == null || value === false)
       continue;
-    if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())
-      continue;
-    if (key === "children")
+    const c = classifyDOMProp(key);
+    if (c.kind === "event" || c.kind === "skip" || c.kind === "ref")
       continue;
-    if (key === "style") {
+    if (c.kind === "style") {
       const css = styleToCss(value);
       if (css != null)
         parts.push(`style="${css}"`);
       continue;
     }
-    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(" ");
 }
@@ -2181,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.1.3",
+  "version": "0.3.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.1.3"
+    "@barefootjs/shared": "0.3.0"
   },
   "peerDependencies": {
-    "@barefootjs/jsx": "0.1.3"
+    "@barefootjs/jsx": ">=0.2.0"
   },
   "peerDependenciesMeta": {
     "@barefootjs/jsx": {
@@ -66,7 +66,6 @@
     }
   },
   "devDependencies": {
-    "@barefootjs/jsx": "0.1.3",
     "@happy-dom/global-registrator": "^20.0.11",
     "typescript": "^5.0.0"
   }

package/src/runtime/apply-rest-attrs.ts

@@ -6,16 +6,9 @@
  */
 
 import { createEffect } from '@barefootjs/client/reactive'
+import { classifyDOMProp, type DOMPropClassification } from '@barefootjs/shared'
 import { styleToCss } from './style'
 
-/** Map of JSX prop names to HTML attribute names */
-function toAttrName(key: string): string {
-  if (key === 'className') return 'class'
-  if (key === 'htmlFor') return 'for'
-  // Convert camelCase to kebab-case for data-* and aria-* style attributes
-  return key.replace(/([A-Z])/g, '-$1').toLowerCase()
-}
-
 /**
  * Convert a JSX event prop name to a DOM event name for addEventListener.
  * Handles: camelCase → lowercase, plus special mappings (doubleclick → dblclick).
@@ -23,7 +16,6 @@ function toAttrName(key: string): string {
  */
 const jsxToDomEventMap: Record<string, string> = { doubleclick: 'dblclick' }
 function toEventName(jsxPropName: string): string {
-  // onKeyDown → 'k' + 'eyDown' → 'keydown'
   const raw = (jsxPropName[2].toLowerCase() + jsxPropName.slice(3)).toLowerCase()
   return jsxToDomEventMap[raw] ?? raw
 }
@@ -43,15 +35,19 @@ export function applyRestAttrs(
 ): void {
   const exclude = new Set(excludeKeys)
 
-  // Wire up event handlers and ref callbacks once (not reactively)
+  // Precompute classifications once — keys are stable for rest props.
+  const classified: Array<{ key: string; c: DOMPropClassification }> = []
   for (const key of Object.keys(source)) {
     if (exclude.has(key)) continue
-    if (key === 'ref') {
+    classified.push({ key, c: classifyDOMProp(key) })
+  }
+
+  // Wire up event handlers and ref callbacks once (not reactively)
+  for (const { key, c } of classified) {
+    if (c.kind === 'ref') {
       const ref = source[key]
       if (typeof ref === 'function') (ref as (el: Element) => void)(el)
-      continue
-    }
-    if (key.startsWith('on') && key.length > 2 && key[2] === key[2].toUpperCase()) {
+    } else if (c.kind === 'event') {
       const handler = source[key]
       if (typeof handler === 'function') {
         el.addEventListener(toEventName(key), handler as EventListener)
@@ -59,49 +55,39 @@ export function applyRestAttrs(
     }
   }
 
-  createEffect(() => {
-    for (const key of Object.keys(source)) {
-      if (exclude.has(key)) continue
-
-      // Event handlers and ref are wired up above, not as attributes
-      if (key === 'ref') continue
-      // `children` is a JSX construct rendered inside the element, never
-      // a DOM attribute. Without this exclusion, parent components that
-      // pass `children` through `{...props}` end up with
-      // `children="<p ...>...</p>"` written as a literal attribute on
-      // the wrapper div. The matching `spreadAttrs` (SSR-string) path
-      // already skips `children` for the same reason.
-      if (key === 'children') continue
-      if (key.startsWith('on') && key.length > 2 && key[2] === key[2].toUpperCase()) continue
+  // Filter to only attr-like entries for the reactive loop
+  const attrEntries = classified.filter(
+    ({ c }) => c.kind !== 'ref' && c.kind !== 'event' && c.kind !== 'skip',
+  )
 
+  createEffect(() => {
+    for (const { key, c } of attrEntries) {
       const value = source[key]
-      const attr = toAttrName(key)
 
       if (value != null && value !== false) {
-        // Use DOM property for value/checked (setAttribute sets the default, not current)
-        if (attr === 'value' && 'value' in el) {
+        if (c.kind === 'property' && c.attrName === 'value' && 'value' in el) {
           const strVal = String(value)
           if ((el as HTMLInputElement).value !== strVal) (el as HTMLInputElement).value = strVal
-        } else if (attr === 'checked' && 'checked' in el) {
+        } else if (c.kind === 'property' && c.attrName === 'checked' && 'checked' in el) {
           (el as HTMLInputElement).checked = !!value
-        } else if (attr === 'style') {
-          // Route the `style` prop through `styleToCss` so object literals
-          // (`{'--err': errorHue()}`) and inline strings (`'color:red'`)
-          // both reach the DOM as a real CSS string instead of
-          // `[object Object]`. Mirrors the compiler's
-          // `setAttribute('style', styleToCss(...))` path used when the
-          // attribute is bound directly on a JSX element.
+        } else if (c.kind === 'boolean') {
+          el.setAttribute(c.attrName, '')
+        } else if (c.kind === 'style') {
           const css = styleToCss(value)
           if (css == null) el.removeAttribute('style')
           else el.setAttribute('style', css)
         } else {
-          el.setAttribute(attr, String(value))
+          el.setAttribute(c.attrName, String(value))
         }
       } else {
-        if (attr === 'checked' && 'checked' in el) {
+        if (c.kind === 'property' && c.attrName === 'value' && 'value' in el) {
+          (el as HTMLInputElement).value = ''
+        } else if (c.kind === 'property' && c.attrName === 'checked' && 'checked' in el) {
           (el as HTMLInputElement).checked = false
+        } else if (c.kind === 'boolean') {
+          el.removeAttribute(c.attrName)
         } else {
-          el.removeAttribute(attr)
+          el.removeAttribute(c.attrName)
         }
       }
     }

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)