@barefootjs/client 0.14.0 → 0.15.1

package/dist/runtime/standalone.js

@@ -1,3 +1,188 @@
+// ../shared/src/markers.ts
+var BF_SCOPE = "bf-s";
+var BF_SLOT = "bf";
+var BF_HOST = "bf-h";
+var BF_AT = "bf-m";
+var BF_PROPS = "bf-p";
+var BF_COND = "bf-c";
+var BF_PORTAL_OWNER = "bf-po";
+var BF_PORTAL_ID = "bf-pi";
+var BF_PORTAL_PLACEHOLDER = "bf-pp";
+var BF_PARENT_OWNED_PREFIX = "^";
+var BF_SCOPE_COMMENT_PREFIX = "bf-scope:";
+var BF_LOOP_START = "bf-loop";
+var BF_LOOP_END = "bf-/loop";
+var BF_LOOP_ITEM = "bf-loop-i";
+function loopItemMarker(key) {
+  return `${BF_LOOP_ITEM}:${key}`;
+}
+function loopStartMarker(markerId) {
+  return `${BF_LOOP_START}:${markerId}`;
+}
+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__";
+var BF_SEAM_HYDRATE = "__bf_hydrate";
+var BF_SEAM_HYDRATE_WITHIN = "__bf_hydrate_within";
+var BF_SEAM_DISPOSE_WITHIN = "__bf_dispose_within";
+var BF_SEAM_PUSH_SEARCH = "__bf_pushSearch";
+// ../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 (key === "dangerouslySetInnerHTML")
+    return { kind: "innerHTML", 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/reactive.ts
 var profilerSink = null;
 var signalSeq = 0;
@@ -275,6 +460,40 @@ function createMemo(fn, __bfId) {
   }, id, "memo");
   return value;
 }
+var serverEnvReader = null;
+function __bfSetServerEnvReader(reader) {
+  serverEnvReader = reader;
+}
+function resolveServerEnv(key) {
+  if (serverEnvReader) {
+    const v = serverEnvReader(key);
+    if (v !== undefined)
+      return v;
+  }
+  const seam = globalThis.__bf_serverEnvReader;
+  return typeof seam === "function" ? seam(key) : undefined;
+}
+function createEnvSignal(key, readClient, parse, pushSeam) {
+  let getRaw = null;
+  function ensureClientSignal() {
+    if (!getRaw) {
+      const [get, set] = createSignal(readClient());
+      getRaw = get;
+      const w = window;
+      w[pushSeam] = (next) => {
+        set(next);
+      };
+    }
+    return getRaw();
+  }
+  return () => {
+    if (typeof window === "undefined") {
+      return parse(resolveServerEnv(key) ?? "");
+    }
+    return parse(ensureClientSignal());
+  };
+}
+var searchParams = createEnvSignal("search", () => window.location.search, (raw) => new URLSearchParams(raw), BF_SEAM_PUSH_SEARCH);
 // src/profiler-events.ts
 function createRecordingSink() {
   const events = [];
@@ -404,187 +623,6 @@ function forwardProps(source, overrides, excludeKeys) {
 function unwrap(prop) {
   return typeof prop === "function" ? prop() : prop;
 }
-// ../shared/src/markers.ts
-var BF_SCOPE = "bf-s";
-var BF_SLOT = "bf";
-var BF_HOST = "bf-h";
-var BF_AT = "bf-m";
-var BF_PROPS = "bf-p";
-var BF_COND = "bf-c";
-var BF_PORTAL_OWNER = "bf-po";
-var BF_PORTAL_ID = "bf-pi";
-var BF_PORTAL_PLACEHOLDER = "bf-pp";
-var BF_PARENT_OWNED_PREFIX = "^";
-var BF_SCOPE_COMMENT_PREFIX = "bf-scope:";
-var BF_LOOP_START = "bf-loop";
-var BF_LOOP_END = "bf-/loop";
-var BF_LOOP_ITEM = "bf-loop-i";
-function loopItemMarker(key) {
-  return `${BF_LOOP_ITEM}:${key}`;
-}
-function loopStartMarker(markerId) {
-  return `${BF_LOOP_START}:${markerId}`;
-}
-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__";
-// ../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 (key === "dangerouslySetInnerHTML")
-    return { kind: "innerHTML", 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 {
@@ -1159,6 +1197,55 @@ function flushHydration() {
   rafScheduled = false;
   walkAllInDocumentOrder();
 }
+function rehydrateScope(root) {
+  if (typeof document === "undefined")
+    return;
+  hydrateElementScope(root);
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      hydrateElementScope(node);
+    } else if (node.nodeType === Node.COMMENT_NODE) {
+      hydrateCommentScope(node);
+    }
+  }
+}
+function disposeScope(root) {
+  if (typeof document === "undefined")
+    return;
+  disposeOneScope(root);
+  clearChildScopeMark(root);
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      disposeOneScope(node);
+      clearChildScopeMark(node);
+    } else if (node.nodeType === Node.COMMENT_NODE) {
+      clearCommentScopeFlag(node);
+    }
+  }
+}
+function disposeOneScope(el) {
+  const dispose = scopeDisposers.get(el);
+  if (dispose) {
+    scopeDisposers.delete(el);
+    hydratedScopes.delete(el);
+    dispose();
+  }
+}
+function clearChildScopeMark(el) {
+  if (el.hasAttribute(BF_HOST))
+    hydratedScopes.delete(el);
+}
+function clearCommentScopeFlag(comment) {
+  if (!comment.nodeValue?.startsWith(BF_SCOPE_COMMENT_PREFIX))
+    return;
+  const flagged = comment;
+  if (flagged.__bfInitialized)
+    flagged.__bfInitialized = false;
+}
 function walkAllInDocumentOrder() {
   if (typeof document === "undefined")
     return;
@@ -1186,10 +1273,14 @@ function parseProps(json, where) {
     return {};
   }
 }
+var scopeDisposers = new WeakMap;
 function runInit(scope, def, props) {
   const prevScope = setCurrentScope(scope);
   try {
-    def.init(scope, props);
+    createRoot((dispose) => {
+      scopeDisposers.set(scope, dispose);
+      def.init(scope, props);
+    });
   } finally {
     setCurrentScope(prevScope);
   }
@@ -2733,7 +2824,9 @@ function setupStreaming() {
     return;
   const w = window;
   w.__bf_swap = __bf_swap;
-  w.__bf_hydrate = rehydrateAll;
+  w[BF_SEAM_HYDRATE] = rehydrateAll;
+  w[BF_SEAM_HYDRATE_WITHIN] = rehydrateScope;
+  w[BF_SEAM_DISPOSE_WITHIN] = disposeScope;
 }
 export {
   useContext,
@@ -2748,8 +2841,10 @@ export {
   setupStreaming,
   setProfilerSink,
   setCurrentScope,
+  searchParams,
   renderChild,
   render,
+  rehydrateScope,
   rehydrateAll,
   registerTemplate,
   registerComponent,
@@ -2786,6 +2881,7 @@ export {
   escapeText,
   escapeAttr,
   endTurn,
+  disposeScope,
   cssEscape,
   createSignal,
   createRoot,
@@ -2804,6 +2900,7 @@ export {
   __bf_swap,
   __bfText,
   __bfSlot,
+  __bfSetServerEnvReader,
   __bfReportOutput,
   $t,
   $c,

package/dist/runtime/streaming.d.ts

@@ -28,7 +28,11 @@ export declare function __bf_swap(id: string): void;
  * Makes `__bf_swap` available as `window.__bf_swap` so that inline
  * `<script>__bf_swap("a0")</script>` tags in streaming chunks can call it.
  *
- * Also exposes `window.__bf_hydrate` for manual re-hydration triggers.
+ * Also exposes re-hydration / disposal seams for an out-of-tree client
+ * router (`@barefootjs/router`):
+ *   - `window.__bf_hydrate`        — re-hydrate the whole document
+ *   - `window.__bf_hydrate_within` — re-hydrate only a swapped subtree
+ *   - `window.__bf_dispose_within` — dispose the islands in a subtree
  *
  * Call this once, early in the page (before any streaming chunks arrive).
  */

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

@@ -1 +1 @@
-{"version":3,"file":"streaming.d.ts","sourceRoot":"","sources":["../../src/runtime/streaming.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAmB1C;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAMrC"}
+{"version":3,"file":"streaming.d.ts","sourceRoot":"","sources":["../../src/runtime/streaming.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAWH;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAmB1C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAUrC"}

package/package.json

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

package/src/builtins.ts

@@ -0,0 +1,63 @@
+/**
+ * Compiler built-in JSX tags: `<Async>` and `<Region>`.
+ *
+ * These are recognised by the BarefootJS compiler **structurally** — by
+ * their import from `@barefootjs/client` (`ir.metadata.imports`), never by
+ * a bare capitalized tag-name match — and are compiled away: `<Async>`
+ * lowers to a streaming boundary (e.g. Hono `<Suspense>`) and `<Region>`
+ * lowers to a `bf-region` page-lifecycle boundary (spec/router.md). No
+ * runtime value survives in the emitted output; the compiler also elides
+ * the import on emit so it never lingers as a phantom runtime import.
+ *
+ * The real exports here exist so authors can `import { Async, Region }`
+ * with full prop-checking and completion, the same way Solid imports
+ * `<Show>` / `<Suspense>` from `solid-js`. Importing them is what tells the
+ * compiler the tag is the built-in (and keeps a user's own `<Async>` /
+ * `<Region>` component from colliding with it).
+ *
+ * If one of these ever executes, the JSX was rendered outside the
+ * BarefootJS compiler pipeline — that's a bug. See
+ * piconic-ai/barefootjs#1915.
+ */
+
+function compiledAway(name: string): never {
+  throw new Error(
+    `[barefootjs] <${name}> is a compiler built-in and is compiled away. ` +
+      `If you are seeing this at runtime, the JSX was rendered without going ` +
+      `through the BarefootJS compiler — please report a bug.`,
+  )
+}
+
+export interface AsyncProps {
+  /** UI rendered while the streamed children resolve. */
+  fallback: unknown
+  /** Content streamed in once resolved. */
+  children?: unknown
+}
+
+export interface RegionProps {
+  /** The page-lifecycle subtree the router disposes / re-hydrates on navigation. */
+  children?: unknown
+}
+
+/**
+ * Streaming async boundary. Lowered by the compiler to the adapter's
+ * streaming primitive (Hono `<Suspense>`); `fallback` is shown until the
+ * children resolve. Compiled away — never executes at runtime.
+ */
+// Return type is `any` so the built-in satisfies every adapter's
+// `JSX.Element` regardless of the active `jsxImportSource`.
+export function Async(_props: AsyncProps): any {
+  return compiledAway('Async')
+}
+
+/**
+ * Page-lifecycle boundary (spec/router.md). Lowered by the compiler to a
+ * wrapper element carrying a deterministic `bf-region` marker the client
+ * router matches on. Compiled away — never executes at runtime.
+ */
+// Return type is `any` so the built-in satisfies every adapter's
+// `JSX.Element` regardless of the active `jsxImportSource`.
+export function Region(_props: RegionProps): any {
+  return compiledAway('Region')
+}

package/src/index.ts

@@ -15,6 +15,12 @@ export {
   beginTurn,
   endTurn,
   __bfReportOutput,
+  // Request-scoped reactive environment signals (spec/router.md "The wedge").
+  // `searchParams` lives in the shared reactive module too, so this entry and
+  // the `/runtime` entry resolve to ONE signal instance. `createEnvSignal` stays
+  // internal; `__bfSetServerEnvReader` is the keyed adapter/host hook for SSR.
+  searchParams,
+  __bfSetServerEnvReader,
   type Reactive,
   type Signal,
   type Memo,
@@ -53,3 +59,13 @@ export {
   type PortalOptions,
   type Renderable,
 } from './shims.ts'
+
+// Compiler built-ins (`<Async>` / `<Region>`) — recognised by their import
+// here and compiled away. Importing them is what scopes the recognition; the
+// compiler elides the import on emit. See ./builtins.ts and #1915.
+export {
+  Async,
+  Region,
+  type AsyncProps,
+  type RegionProps,
+} from './builtins.ts'