@barefootjs/client 0.5.3 → 0.6.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,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;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"}
+{"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.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__";
@@ -793,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);
@@ -1019,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) {

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/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__";
@@ -984,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);
@@ -1209,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.5.3",
+  "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.3"
+    "@barefootjs/shared": "0.6.0"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0"

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().

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)