@barefootjs/client 0.5.2 → 0.6.0

package/dist/runtime/apply-rest-attrs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-rest-attrs.d.ts","sourceRoot":"","sources":["../../src/runtime/apply-rest-attrs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAiBH;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,EAAE,EAAE,OAAO,EACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,WAAW,EAAE,MAAM,EAAE,GACpB,IAAI,CA4DN"}
+{"version":3,"file":"apply-rest-attrs.d.ts","sourceRoot":"","sources":["../../src/runtime/apply-rest-attrs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAiBH;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,EAAE,EAAE,OAAO,EACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,WAAW,EAAE,MAAM,EAAE,GACpB,IAAI,CAkEN"}

package/dist/runtime/branch-slot.d.ts

@@ -1,22 +1,2 @@
-/**
- * Branch-template slot helper (#1213).
- *
- * Conditional `template()` arrows interpolate Child-position expressions
- * via `${expr}`. When `expr` evaluates to a live `Node` (e.g. the result
- * of `_p.renderNode(node())` returning an `HTMLElement` from
- * `createComponent`), the surrounding template literal coerces it via
- * `Object.prototype.toString`, producing `"[object HTMLDivElement]"` and
- * destroying the live node identity on hydration.
- *
- * `__bfSlot` intercepts the value before stringification: if it's a
- * `Node`, it stashes the node into the closure-scoped `slots` array and
- * returns a unique marker comment. The `insert()` runtime then walks the
- * parsed fragment for those markers and splices the original node back
- * in by identity (no `cloneNode`), preserving event listeners and signal
- * bindings.
- *
- * Non-node values fall through to `String(value)` for the existing
- * inline-string path.
- */
 export declare function __bfSlot(value: unknown, slots: Node[]): string;
 //# sourceMappingURL=branch-slot.d.ts.map

package/dist/runtime/branch-slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"branch-slot.d.ts","sourceRoot":"","sources":["../../src/runtime/branch-slot.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,MAAM,CAW9D"}
+{"version":3,"file":"branch-slot.d.ts","sourceRoot":"","sources":["../../src/runtime/branch-slot.ts"],"names":[],"mappings":"AA2BA,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,MAAM,CAW9D"}

package/dist/runtime/component.d.ts

@@ -81,6 +81,28 @@ export declare function renderChild(name: string, props: Record<string, unknown>
  * back to ">" in the DOM attribute value, preserving CSS matching.
  */
 export declare function escapeAttrGt(html: string): string;
+/**
+ * HTML-escape a single attribute *value* before it is concatenated into a
+ * client-rendered template string. Matches the SSR adapters' attribute
+ * escaping (Hono's `escapeToBuffer`: `& " ' < >`) so client-rendered DOM
+ * is byte-identical to the server-rendered form and metacharacter-bearing
+ * values (UnoCSS `[class*="size-"]`, `has-[>svg]`, …) don't corrupt
+ * attribute parsing when the template is inserted via `innerHTML`. `&` is
+ * replaced first so the emitted entities aren't themselves re-escaped.
+ */
+export declare function escapeAttr(value: unknown): string;
+/**
+ * HTML-escape interpolated **text content** before it is concatenated into
+ * a client-rendered template string (the `<!--bf:sN-->…<!--/-->` text
+ * slots). The HTML spec only requires `& < >` in text, but the SSR
+ * adapters (Hono) escape text with the same set as attribute values
+ * (`& " ' < >`), and the fixture-hydrate / CSR-conformance layer requires
+ * byte-parity with the server-rendered output — so this delegates to
+ * `escapeAttr`. Kept as a distinct export so generated code reads
+ * `escapeText(...)` at text sites (self-documenting) and so the two
+ * contexts can diverge later without touching call sites.
+ */
+export declare function escapeText(value: unknown): string;
 /**
  * Parse an HTML string into a DocumentFragment, safely escaping ">" in
  * attribute values. All code that sets innerHTML on dynamic HTML should

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,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACnC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,IAAI,CAAC,EAAE,uBAAuB,GAC7B,WAAW,CAyIb;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,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACnC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,IAAI,CAAC,EAAE,uBAAuB,GAC7B,WAAW,CAgLb;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;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAOjD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,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.d.ts

@@ -10,7 +10,7 @@ export { reconcileElements, getLoopChildren, getLoopNodes } from './reconcile-el
 export { qsaItem, upsertChildItem } from './qsa-item';
 export { mapArray, mapArrayAnchored } from './map-array';
 export { registerTemplate, getTemplate, hasTemplate, type TemplateFn } from './template';
-export { createComponent, renderChild, getPropsUpdateFn, getComponentProps, parseHTML, } from './component';
+export { createComponent, renderChild, getPropsUpdateFn, getComponentProps, parseHTML, escapeAttr, escapeText, } from './component';
 export { applyRestAttrs } from './apply-rest-attrs';
 export { spreadAttrs } from './spread-attrs';
 export { styleToCss } from './style';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,UAAU,EACV,UAAU,EACV,SAAS,EACT,OAAO,EACP,OAAO,EACP,KAAK,EACL,KAAK,QAAQ,EACb,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,QAAQ,GACd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAIlC,OAAO,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,eAAe,EACf,KAAK,OAAO,GACb,MAAM,WAAW,CAAA;AAGlB,OAAO,EACL,YAAY,EACZ,WAAW,EACX,eAAe,EACf,wBAAwB,EACxB,KAAK,MAAM,EACX,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACvF,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAGxD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAGxF,OAAO,EACL,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,GACV,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGpC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnG,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACnF,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxF,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAGvD,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,UAAU,EACV,UAAU,EACV,SAAS,EACT,OAAO,EACP,OAAO,EACP,KAAK,EACL,KAAK,QAAQ,EACb,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,QAAQ,GACd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAIlC,OAAO,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,eAAe,EACf,KAAK,OAAO,GACb,MAAM,WAAW,CAAA;AAGlB,OAAO,EACL,YAAY,EACZ,WAAW,EACX,eAAe,EACf,wBAAwB,EACxB,KAAK,MAAM,EACX,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACvF,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAGxD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAGxF,OAAO,EACL,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,UAAU,GACX,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGpC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnG,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACnF,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxF,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAGvD,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA"}

package/dist/runtime/index.js

@@ -123,6 +123,7 @@ function loopEndMarker(markerId) {
   return `${BF_LOOP_END}:${markerId}`;
 }
 var BF_KEY = "data-key";
+var BF_PLACEHOLDER = "data-bf-ph";
 var BF_ASYNC = "bf-async";
 var BF_ASYNC_RESOLVE = "bf-async-resolve";
 var BF_PARENT_SCOPE_PLACEHOLDER = "__BF_PARENT_SCOPE__";
@@ -248,6 +249,8 @@ function classifyDOMProp(key) {
     return { kind: "skip", attrName: key };
   if (key === "ref")
     return { kind: "ref", attrName: key };
+  if (key === "dangerouslySetInnerHTML")
+    return { kind: "innerHTML", attrName: key };
   if (isEventProp(key))
     return { kind: "event", attrName: key };
   const attrName = toHTMLAttrNameRuntime(key);
@@ -791,7 +794,7 @@ function upsertChild(parent, name, slotId, props, key, anchorScope) {
     return ssr;
   }
   const phId = slotId ?? name;
-  const ph = parent.querySelector(`[data-bf-ph="${phId}"]`);
+  const ph = parent.getAttribute(BF_PLACEHOLDER) === phId ? parent : parent.querySelector(`[${BF_PLACEHOLDER}="${phId}"]`);
   if (ph) {
     const slot = slotId ? buildSlotInfo(parent, slotId, anchorScope) : undefined;
     const comp = createComponent(name, props, key, slot);
@@ -1017,10 +1020,24 @@ function createComponent(nameOrDef, props = {}, key, slot) {
     element.setAttribute(BF_KEY, String(key));
   }
   const prevScope = setCurrentScope(element);
+  const rootIsDeferredPlaceholder = element.hasAttribute(BF_PLACEHOLDER);
+  let placeholderWrapper = null;
+  if (rootIsDeferredPlaceholder) {
+    placeholderWrapper = parseHTML("<div></div>").firstChild;
+    placeholderWrapper.appendChild(element);
+  }
   const initFn = getComponentInit(name);
   if (initFn) {
     initFn(element, props);
   }
+  if (rootIsDeferredPlaceholder && placeholderWrapper) {
+    const materialised = placeholderWrapper.firstElementChild;
+    if (materialised && !materialised.hasAttribute(BF_PLACEHOLDER)) {
+      setCurrentScope(prevScope);
+      return materialised;
+    }
+    placeholderWrapper.removeChild(element);
+  }
   if (childrenIsGetter) {
     const children = untrack(() => childrenDescriptor.get());
     if (children != null) {
@@ -1104,6 +1121,12 @@ function unwrapPropsForTemplate(props) {
 function escapeAttrGt(html) {
   return html.replace(/"[^"]*"/g, (match) => match.replace(/>/g, "&gt;"));
 }
+function escapeAttr(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeText(value) {
+  return escapeAttr(value);
+}
 var SVG_NS = "http://www.w3.org/2000/svg";
 function parseHTML(html, parent) {
   const tpl = document.createElement("template");
@@ -1932,7 +1955,10 @@ function applyRestAttrs(el, source, excludeKeys) {
   createEffect2(() => {
     for (const { key, c } of attrEntries) {
       const value = source[key];
-      if (value != null && value !== false) {
+      if (c.kind === "innerHTML") {
+        const html = value;
+        el.innerHTML = html != null && html.__html != null ? String(html.__html) : "";
+      } else if (value != null && value !== false) {
         if (c.kind === "property" && c.attrName === "value" && "value" in el) {
           const strVal = String(value);
           if (el.value !== strVal)
@@ -1975,6 +2001,8 @@ function spreadAttrs(obj) {
     const c = classifyDOMProp(key);
     if (c.kind === "event" || c.kind === "skip" || c.kind === "ref")
       continue;
+    if (c.kind === "innerHTML")
+      continue;
     if (c.kind === "style") {
       const css = styleToCss(value);
       if (css != null)
@@ -2251,7 +2279,7 @@ function __bfSlot(value, slots) {
   if (Array.isArray(value)) {
     return value.map((v) => __bfSlot(v, slots)).join("");
   }
-  return String(value);
+  return escapeText(value);
 }
 // src/runtime/dynamic-text.ts
 var END_MARKER = "/";
@@ -2445,6 +2473,8 @@ export {
   findSiblingSlot,
   findScope,
   find,
+  escapeText,
+  escapeAttr,
   cssEscape,
   createSignal2 as createSignal,
   createRoot2 as createRoot,

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

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/runtime/registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAarC;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAclE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEjE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,OAAO,GAAG,IAAI,EAC1B,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GAClC,IAAI,CAoCN;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,WAAW,GAAG,IAAI,CAwBpB"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/runtime/registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAarC;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAclE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEjE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,OAAO,GAAG,IAAI,EAC1B,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GAClC,IAAI,CAoCN;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,GAC3B,WAAW,GAAG,IAAI,CA8BpB"}

package/dist/runtime/spread-attrs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spread-attrs.d.ts","sourceRoot":"","sources":["../../src/runtime/spread-attrs.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAmBhE"}
+{"version":3,"file":"spread-attrs.d.ts","sourceRoot":"","sources":["../../src/runtime/spread-attrs.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAyBhE"}

package/dist/runtime/standalone.js

@@ -314,6 +314,7 @@ function loopEndMarker(markerId) {
   return `${BF_LOOP_END}:${markerId}`;
 }
 var BF_KEY = "data-key";
+var BF_PLACEHOLDER = "data-bf-ph";
 var BF_ASYNC = "bf-async";
 var BF_ASYNC_RESOLVE = "bf-async-resolve";
 var BF_PARENT_SCOPE_PLACEHOLDER = "__BF_PARENT_SCOPE__";
@@ -439,6 +440,8 @@ function classifyDOMProp(key) {
     return { kind: "skip", attrName: key };
   if (key === "ref")
     return { kind: "ref", attrName: key };
+  if (key === "dangerouslySetInnerHTML")
+    return { kind: "innerHTML", attrName: key };
   if (isEventProp(key))
     return { kind: "event", attrName: key };
   const attrName = toHTMLAttrNameRuntime(key);
@@ -982,7 +985,7 @@ function upsertChild(parent, name, slotId, props, key, anchorScope) {
     return ssr;
   }
   const phId = slotId ?? name;
-  const ph = parent.querySelector(`[data-bf-ph="${phId}"]`);
+  const ph = parent.getAttribute(BF_PLACEHOLDER) === phId ? parent : parent.querySelector(`[${BF_PLACEHOLDER}="${phId}"]`);
   if (ph) {
     const slot = slotId ? buildSlotInfo(parent, slotId, anchorScope) : undefined;
     const comp = createComponent(name, props, key, slot);
@@ -1207,10 +1210,24 @@ function createComponent(nameOrDef, props = {}, key, slot) {
     element.setAttribute(BF_KEY, String(key));
   }
   const prevScope = setCurrentScope(element);
+  const rootIsDeferredPlaceholder = element.hasAttribute(BF_PLACEHOLDER);
+  let placeholderWrapper = null;
+  if (rootIsDeferredPlaceholder) {
+    placeholderWrapper = parseHTML("<div></div>").firstChild;
+    placeholderWrapper.appendChild(element);
+  }
   const initFn = getComponentInit(name);
   if (initFn) {
     initFn(element, props);
   }
+  if (rootIsDeferredPlaceholder && placeholderWrapper) {
+    const materialised = placeholderWrapper.firstElementChild;
+    if (materialised && !materialised.hasAttribute(BF_PLACEHOLDER)) {
+      setCurrentScope(prevScope);
+      return materialised;
+    }
+    placeholderWrapper.removeChild(element);
+  }
   if (childrenIsGetter) {
     const children = untrack(() => childrenDescriptor.get());
     if (children != null) {
@@ -1294,6 +1311,12 @@ function unwrapPropsForTemplate(props) {
 function escapeAttrGt(html) {
   return html.replace(/"[^"]*"/g, (match) => match.replace(/>/g, "&gt;"));
 }
+function escapeAttr(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeText(value) {
+  return escapeAttr(value);
+}
 var SVG_NS = "http://www.w3.org/2000/svg";
 function parseHTML(html, parent) {
   const tpl = document.createElement("template");
@@ -2118,7 +2141,10 @@ function applyRestAttrs(el, source, excludeKeys) {
   createEffect(() => {
     for (const { key, c } of attrEntries) {
       const value = source[key];
-      if (value != null && value !== false) {
+      if (c.kind === "innerHTML") {
+        const html = value;
+        el.innerHTML = html != null && html.__html != null ? String(html.__html) : "";
+      } else if (value != null && value !== false) {
         if (c.kind === "property" && c.attrName === "value" && "value" in el) {
           const strVal = String(value);
           if (el.value !== strVal)
@@ -2161,6 +2187,8 @@ function spreadAttrs(obj) {
     const c = classifyDOMProp(key);
     if (c.kind === "event" || c.kind === "skip" || c.kind === "ref")
       continue;
+    if (c.kind === "innerHTML")
+      continue;
     if (c.kind === "style") {
       const css = styleToCss(value);
       if (css != null)
@@ -2436,7 +2464,7 @@ function __bfSlot(value, slots) {
   if (Array.isArray(value)) {
     return value.map((v) => __bfSlot(v, slots)).join("");
   }
-  return String(value);
+  return escapeText(value);
 }
 // src/runtime/dynamic-text.ts
 var END_MARKER = "/";
@@ -2630,6 +2658,8 @@ export {
   findSiblingSlot,
   findScope,
   find,
+  escapeText,
+  escapeAttr,
   cssEscape,
   createSignal,
   createRoot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.5.2",
+  "version": "0.6.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,7 +55,7 @@
     "directory": "packages/client"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.5.2"
+    "@barefootjs/shared": "0.6.0"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0"

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

@@ -64,7 +64,13 @@ export function applyRestAttrs(
     for (const { key, c } of attrEntries) {
       const value = source[key]
 
-      if (value != null && value !== false) {
+      if (c.kind === 'innerHTML') {
+        // `dangerouslySetInnerHTML={{ __html }}` arriving via a rest object —
+        // set the element's raw innerHTML (the escape hatch), never an
+        // attribute. Reactive: re-runs when `source` changes.
+        const html = value as { __html?: unknown } | null | undefined
+        el.innerHTML = html != null && html.__html != null ? String(html.__html) : ''
+      } else if (value != null && value !== false) {
         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

package/src/runtime/branch-slot.ts

@@ -15,9 +15,16 @@
  * in by identity (no `cloneNode`), preserving event listeners and signal
  * bindings.
  *
- * Non-node values fall through to `String(value)` for the existing
- * inline-string path.
+ * Non-node values fall through to the inline-string path, HTML-escaped
+ * (#1694 follow-up) so a branch-template text value containing `< / &`
+ * surfaces as text — not markup — and matches the SSR-rendered bytes.
+ * Escaping happens here, on the string path only, so the `<!--bf-slot:N-->`
+ * markers returned for live `Node` values are left intact for `insert()`
+ * to splice. (Doing it here rather than wrapping the whole `__bfSlot(...)`
+ * call in `escapeText` is what lets the marker path stay raw.)
  */
+import { escapeText } from './component'
+
 export function __bfSlot(value: unknown, slots: Node[]): string {
   if (value == null || value === false || value === true) return ''
   if (typeof Node !== 'undefined' && value instanceof Node) {
@@ -28,5 +35,5 @@ export function __bfSlot(value: unknown, slots: Node[]): string {
   if (Array.isArray(value)) {
     return value.map((v) => __bfSlot(v, slots)).join('')
   }
-  return String(value)
+  return escapeText(value)
 }

package/src/runtime/component.ts

@@ -11,7 +11,7 @@ import { getRegisteredDef } from './hydrate'
 import { hydratedScopes } from './hydration-state'
 import { untrack } from '@barefootjs/client/reactive'
 import { setCurrentScope } from './context'
-import { BF_SCOPE, BF_KEY, BF_HOST, BF_AT, BF_PARENT_SCOPE_PLACEHOLDER } from '@barefootjs/shared'
+import { BF_SCOPE, BF_KEY, BF_HOST, BF_AT, BF_PARENT_SCOPE_PLACEHOLDER, BF_PLACEHOLDER } from '@barefootjs/shared'
 import type { ComponentDef } from './types'
 
 // Parent scope ID context for renderChild() inside insert() branch templates.
@@ -186,13 +186,52 @@ export function createComponent(
   // This allows context providers in initFn to store context on this element.
   const prevScope = setCurrentScope(element)
 
+  // 8b. Root-level deferred child (dropped-prop fix): a comment-wrapper
+  // parent whose entire render is a single deferred child renders as a
+  // bare `data-bf-ph` placeholder. The parent's init calls
+  // `upsertChild(__scope, ...)` which replaces the placeholder via
+  // `replaceWith` — but a detached root node can't replace itself in
+  // place. Park it in a throwaway wrapper so the replacement lands
+  // somewhere we can recover, then return the materialised child.
+  const rootIsDeferredPlaceholder = element.hasAttribute(BF_PLACEHOLDER)
+  let placeholderWrapper: HTMLElement | null = null
+  if (rootIsDeferredPlaceholder) {
+    placeholderWrapper = parseHTML('<div></div>').firstChild as HTMLElement
+    placeholderWrapper.appendChild(element)
+  }
+
   // 9. Initialize the component (context providers set up here).
   const initFn = getComponentInit(name)
   if (initFn) {
-    // Pass original props (with getters) for reactivity
+    // Pass original props (with getters) for reactivity. For a root
+    // deferred placeholder, init's `upsertChild(element, ...)` matches the
+    // placeholder element itself and replaces it inside the wrapper.
     initFn(element, props)
   }
 
+  if (rootIsDeferredPlaceholder && placeholderWrapper) {
+    const materialised = placeholderWrapper.firstElementChild as HTMLElement | null
+    if (materialised && !materialised.hasAttribute(BF_PLACEHOLDER)) {
+      // The deferred child was created in place of the placeholder.
+      // `materialised` is the child's OWN element, created via
+      // upsertChild -> createComponent, which already registered itself
+      // (hydratedScopes / propsMap / registerPropsUpdate) keyed to the
+      // child with the child's own props. We must NOT re-register it here:
+      // overwriting propsMap/registerPropsUpdate with the *parent's* props
+      // would mis-key the child (e.g. a later getComponentProps would read
+      // the parent's props), and re-running the parent's init on an element
+      // whose placeholder is already gone could not re-materialise. So just
+      // restore the scope and return the already-registered child.
+      // (Parent-scope effects are unaffected: createEffect ownership lives
+      // in the EffectContext tree, not the discarded placeholder element.)
+      setCurrentScope(prevScope)
+      return materialised
+    }
+    // Placeholder was not replaced (no init / no matching child): fall
+    // through with the original placeholder element detached from wrapper.
+    placeholderWrapper.removeChild(element)
+  }
+
   // 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().
@@ -400,6 +439,39 @@ export function escapeAttrGt(html: string): string {
   return html.replace(/"[^"]*"/g, match => match.replace(/>/g, '&gt;'))
 }
 
+/**
+ * HTML-escape a single attribute *value* before it is concatenated into a
+ * client-rendered template string. Matches the SSR adapters' attribute
+ * escaping (Hono's `escapeToBuffer`: `& " ' < >`) so client-rendered DOM
+ * is byte-identical to the server-rendered form and metacharacter-bearing
+ * values (UnoCSS `[class*="size-"]`, `has-[>svg]`, …) don't corrupt
+ * attribute parsing when the template is inserted via `innerHTML`. `&` is
+ * replaced first so the emitted entities aren't themselves re-escaped.
+ */
+export function escapeAttr(value: unknown): string {
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
+/**
+ * HTML-escape interpolated **text content** before it is concatenated into
+ * a client-rendered template string (the `<!--bf:sN-->…<!--/-->` text
+ * slots). The HTML spec only requires `& < >` in text, but the SSR
+ * adapters (Hono) escape text with the same set as attribute values
+ * (`& " ' < >`), and the fixture-hydrate / CSR-conformance layer requires
+ * byte-parity with the server-rendered output — so this delegates to
+ * `escapeAttr`. Kept as a distinct export so generated code reads
+ * `escapeText(...)` at text sites (self-documenting) and so the two
+ * contexts can diverge later without touching call sites.
+ */
+export function escapeText(value: unknown): string {
+  return escapeAttr(value)
+}
+
 const SVG_NS = 'http://www.w3.org/2000/svg'
 
 /**

package/src/runtime/index.ts

@@ -68,6 +68,8 @@ export {
   getPropsUpdateFn,
   getComponentProps,
   parseHTML,
+  escapeAttr,
+  escapeText,
 } from './component'
 
 // Spread props helpers

package/src/runtime/registry.ts

@@ -5,7 +5,7 @@
  * Each component registers its init function so parents can initialize children with props.
  */
 
-import { BF_SCOPE, BF_HOST } from '@barefootjs/shared'
+import { BF_SCOPE, BF_HOST, BF_PLACEHOLDER } from '@barefootjs/shared'
 import { hydratedScopes } from './hydration-state'
 import { setCurrentScope } from './context'
 import { createComponent } from './component'
@@ -148,8 +148,14 @@ export function upsertChild(
     return ssr
   }
   // CSR: replace placeholder with a freshly-created component.
+  // The placeholder is normally a descendant of `parent`; but a
+  // comment-scope parent whose root IS the deferred child renders the
+  // placeholder as `parent` itself (no wrapper element), so match the
+  // parent element directly before falling back to a subtree query.
   const phId = slotId ?? name
-  const ph = parent.querySelector(`[data-bf-ph="${phId}"]`) as HTMLElement | null
+  const ph = (parent.getAttribute(BF_PLACEHOLDER) === phId
+    ? (parent as HTMLElement)
+    : parent.querySelector(`[${BF_PLACEHOLDER}="${phId}"]`)) as HTMLElement | null
   if (ph) {
     const slot = slotId ? buildSlotInfo(parent, slotId, anchorScope) : undefined
     const comp = createComponent(name, props, key, slot)

package/src/runtime/spread-attrs.ts

@@ -23,6 +23,12 @@ export function spreadAttrs(obj: Record<string, unknown>): string {
     if (value == null || value === false) continue
     const c = classifyDOMProp(key)
     if (c.kind === 'event' || c.kind === 'skip' || c.kind === 'ref') continue
+    // `dangerouslySetInnerHTML` is not an attribute — its `{ __html }` is the
+    // element's content, which this attribute-string builder can't emit. Skip
+    // it so a spread carrying it never serialises a bogus
+    // `dangerouslySetInnerHTML="[object Object]"`. (Content is set by the
+    // template for an explicit attr, or by `applyRestAttrs` for a rest object.)
+    if (c.kind === 'innerHTML') continue
     if (c.kind === 'style') {
       const css = styleToCss(value)
       if (css != null) parts.push(`style="${css}"`)