@barefootjs/jsx 0.4.0 → 0.5.1

package/src/__tests__/__snapshots__/doc-examples.test.ts.snap

@@ -1,7 +1,7 @@
 // Bun Snapshot v1, https://bun.sh/docs/test/snapshots
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L15 — Ternary 1`] = `
-"import { $, $t, __bfSlot, createComponent, createDisposableEffect, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, $t, __bfSlot, __bfText, createComponent, createDisposableEffect, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -9,9 +9,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -24,9 +25,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -56,10 +58,10 @@ export function initExample(__scope, _p = {}) {
     template: () => { const __slots = []; return { html: \`<p bf-c="s0" bf="s2"><!--bf:s1-->\${__bfSlot(count(), __slots)}<!--/--> items</p>\`, slots: __slots } },
     bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {
       const __disposers = []
-      const [__el_s1] = $t(__branchScope, 's1')
+      let __anchor_s1 = $t(__branchScope, 's1')[0]
       __disposers.push(createDisposableEffect(() => {
         const __val = count()
-        if (__el_s1 && !__val?.__isSlot) __el_s1.nodeValue = String(__val ?? '')
+        __anchor_s1 = __bfText(__anchor_s1, __val)
       }))
       return () => __disposers.forEach(d => d())
     }
@@ -76,7 +78,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L18 — Logical AND 1`] = `
-"import { $, $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, insert, renderChild } from '@barefootjs/client/runtime'
+"import { $, $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, insert, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -84,9 +86,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -99,9 +102,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -150,7 +154,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L31 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -158,9 +162,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -173,9 +178,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -213,7 +219,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L40 — ✅ Simple predicate 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -221,9 +227,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -236,9 +243,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -276,7 +284,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L45 — ✅ Block body with simple statements — also works 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -284,9 +292,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -299,9 +308,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -349,7 +359,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L59 — ✅ Sort then render 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -357,9 +367,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -372,9 +383,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -412,7 +424,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L64 — ✅ Filter, sort, then render 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -420,9 +432,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -435,9 +448,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -474,8 +488,8 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L75 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L69 — ✅ Multi-key: sort by price, break ties by name 1`] = `
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -483,9 +497,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -498,9 +513,140 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
+  })
+
+}
+
+hydrate('Item__b3c36eee', { init: initItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.item)}<!--/--></li>\` })
+export function Item(_p, __bfKey) { return createComponent('Item__b3c36eee', _p, __bfKey) }
+function initDashboard() {}
+
+hydrate('Dashboard__b3c36eee', { init: initDashboard, template: (_p) => \`<div>D</div>\` })
+export function Dashboard(_p, __bfKey) { return createComponent('Dashboard__b3c36eee', _p, __bfKey) }
+export function initExample(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const children = _p.children
+  const [count, setCount] = createSignal(0)
+  const [isLoggedIn] = createSignal(false)
+  const [todos] = createSignal([])
+  const [items] = createSignal([])
+  const [filter] = createSignal('all')
+  const [accepted] = createSignal(false)
+  const [text, setText] = createSignal('')
+
+  const [_s1] = $(__scope, 's1')
+
+  mapArray(() => items().toSorted((a, b) => a.price - b.price || a.name.localeCompare(b.name)), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+    if (__existing) { initChild('Item__b3c36eee', __existing, { get item() { return item() } }); return __existing }
+    return createComponent('Item__b3c36eee', { get item() { return item() } }, item().id)
+  }, 'l0')
+
+}
+
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).toSorted((a, b) => a.price - b.price || a.name.localeCompare(b.name)).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
+export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
+`;
+
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L74 — ✅ Relational ternary 1`] = `
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+
+export function initTodoItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  let __anchor_s0 = _s0
+  createEffect(() => {
+    const __val = String(_p.todo)
+    __anchor_s0 = __bfText(__anchor_s0, __val)
+  })
+
+}
+
+hydrate('TodoItem__b3c36eee', { init: initTodoItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.todo)}<!--/--></li>\` })
+export function TodoItem(_p, __bfKey) { return createComponent('TodoItem__b3c36eee', _p, __bfKey) }
+export function initItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  let __anchor_s0 = _s0
+  createEffect(() => {
+    const __val = String(_p.item)
+    __anchor_s0 = __bfText(__anchor_s0, __val)
+  })
+
+}
+
+hydrate('Item__b3c36eee', { init: initItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.item)}<!--/--></li>\` })
+export function Item(_p, __bfKey) { return createComponent('Item__b3c36eee', _p, __bfKey) }
+function initDashboard() {}
+
+hydrate('Dashboard__b3c36eee', { init: initDashboard, template: (_p) => \`<div>D</div>\` })
+export function Dashboard(_p, __bfKey) { return createComponent('Dashboard__b3c36eee', _p, __bfKey) }
+export function initExample(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const children = _p.children
+  const [count, setCount] = createSignal(0)
+  const [isLoggedIn] = createSignal(false)
+  const [todos] = createSignal([])
+  const [items] = createSignal([])
+  const [filter] = createSignal('all')
+  const [accepted] = createSignal(false)
+  const [text, setText] = createSignal('')
+
+  const [_s1] = $(__scope, 's1')
+
+  mapArray(() => items().toSorted((a, b) => a.price > b.price ? 1 : -1), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+    if (__existing) { initChild('Item__b3c36eee', __existing, { get item() { return item() } }); return __existing }
+    return createComponent('Item__b3c36eee', { get item() { return item() } }, item().id)
+  }, 'l0')
+
+}
+
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).toSorted((a, b) => a.price > b.price ? 1 : -1).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
+export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
+`;
+
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L85 — (no label) 1`] = `
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+
+export function initTodoItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  let __anchor_s0 = _s0
+  createEffect(() => {
+    const __val = String(_p.todo)
+    __anchor_s0 = __bfText(__anchor_s0, __val)
+  })
+
+}
+
+hydrate('TodoItem__b3c36eee', { init: initTodoItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.todo)}<!--/--></li>\` })
+export function TodoItem(_p, __bfKey) { return createComponent('TodoItem__b3c36eee', _p, __bfKey) }
+export function initItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  let __anchor_s0 = _s0
+  createEffect(() => {
+    const __val = String(_p.item)
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -536,8 +682,8 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div><button bf="s0"
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L121 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L131 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -545,9 +691,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -560,9 +707,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -588,9 +736,10 @@ export function initExample(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = items().reduce((sum, x) => sum + x.price, 0)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -599,8 +748,8 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L124 — ✅ Use /* @client */ 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L134 — ✅ Use /* @client */ 1`] = `
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -608,9 +757,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -623,9 +773,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -660,8 +811,8 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L141 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L151 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -669,9 +820,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -684,9 +836,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -712,9 +865,10 @@ export function initExample(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = items().filter(function(x) { return x.done })
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -723,8 +877,8 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L144 — ✅ Use arrow functions for adapter portability 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L154 — ✅ Use arrow functions for adapter portability 1`] = `
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -732,9 +886,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -747,9 +902,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -775,9 +931,10 @@ export function initExample(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = items().filter(x => x.done)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -786,8 +943,8 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L158 — ✅ Use /* @client */ 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L168 — ✅ Use /* @client */ 1`] = `
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -795,9 +952,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -810,9 +968,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -838,19 +997,19 @@ export function initExample(__scope, _p = {}) {
 
   const [_s1] = $(__scope, 's1')
 
-  mapArray(() => items().sort((a, b) => a.name > b.name ? 1 : -1), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+  mapArray(() => items().sort((a, b) => { const an = a.name; return an > b.name ? 1 : -1 }), _s1, (item) => String(item.id), (item, __idx, __existing) => {
     if (__existing) { initChild('Item__b3c36eee', __existing, { get item() { return item() } }); return __existing }
     return createComponent('Item__b3c36eee', { get item() { return item() } }, item().id)
   }, 'l0')
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).sort((a, b) => a.name > b.name ? 1 : -1).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).sort((a, b) => { const an = a.name; return an > b.name ? 1 : -1 }).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
 exports[`docs/core/rendering/client-directive.md doc-examples L59 — Nested higher-order methods 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -858,9 +1017,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -873,9 +1033,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -911,7 +1072,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/client-directive.md doc-examples L62 — Unsupported array methods 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -919,9 +1080,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -934,9 +1096,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -972,7 +1135,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/client-directive.md doc-examples L74 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -980,9 +1143,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -995,9 +1159,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1033,7 +1198,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/fragment.md doc-examples L11 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -1041,9 +1206,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1056,9 +1222,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1089,7 +1256,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/fragment.md doc-examples L23 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -1097,9 +1264,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1112,9 +1280,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1302,7 +1471,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/reactivity/create-signal.md doc-examples L95 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -1314,9 +1483,10 @@ export function initCounter(__scope, _p = {}) {
   const [_s2] = $(__scope, 's2')
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = count()
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
   if (_s2) _s2.addEventListener('click', () => { setCount(n => n + 1) })
@@ -1490,7 +1660,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/reactivity/create-effect.md doc-examples L115 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -1498,9 +1668,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1513,9 +1684,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1622,7 +1794,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/reactivity/create-memo.md doc-examples L60 — No memo needed 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -1630,9 +1802,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1645,9 +1818,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1673,9 +1847,10 @@ export function initExample(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = count() * 2
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1926,7 +2101,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/reactivity/props-reactivity.md doc-examples L82 — Parent 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Child */'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -1935,9 +2110,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -1950,9 +2126,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2005,7 +2182,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/reactivity/props-reactivity.md doc-examples L85 — Compiled props object 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -2013,9 +2190,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2028,9 +2206,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2061,7 +2240,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/component-authoring.mdx doc-examples L16 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initGreeting(__scope, _p = {}) {
@@ -2072,9 +2251,10 @@ export function initGreeting(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = name
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2084,7 +2264,7 @@ export function Greeting(_p, __bfKey) { return createComponent('Greeting', _p, _
 `;
 
 exports[`docs/core/components/component-authoring.mdx doc-examples L29 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -2096,9 +2276,10 @@ export function initCounter(__scope, _p = {}) {
   const [_s1] = $(__scope, 's1')
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = count()
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
   if (_s1) _s1.addEventListener('click', () => { setCount(n => n + 1) })
@@ -2190,7 +2371,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L14 — (no label) 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Card */'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -2199,9 +2380,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2214,9 +2396,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2270,7 +2453,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L68 — Input 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Slot */'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -2279,9 +2462,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2294,9 +2478,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2332,7 +2517,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L73 — Output 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -2340,9 +2525,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2355,9 +2541,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2391,7 +2578,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L86 — (no label) 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Button */'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -2400,9 +2587,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2415,9 +2603,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2453,7 +2642,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L93 — (no label) 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Button */'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -2462,9 +2651,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2477,9 +2667,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2515,7 +2706,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L109 — Dialog trigger as a custom element 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:DialogTrigger */'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -2524,9 +2715,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2539,9 +2731,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2577,7 +2770,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L118 — (no label) 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Dialog */'
 import '/* @bf-child:DialogTrigger */'
 import '/* @bf-child:DialogOverlay */'
@@ -2595,9 +2788,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2610,9 +2804,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2665,7 +2860,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/children-slots.md doc-examples L140 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -2673,9 +2868,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2688,9 +2884,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2737,7 +2934,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/context-api.md doc-examples L40 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate, provideContext } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate, provideContext } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -2745,9 +2942,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2760,9 +2958,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2848,7 +3047,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/context-api.md doc-examples L94 — Usage 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:ThemeProvider */'
 import '/* @bf-child:ThemedButton */'
 
@@ -2858,9 +3057,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2873,9 +3073,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -2999,7 +3200,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/context-api.md doc-examples L170 — (no label) 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Accordion */'
 import '/* @bf-child:AccordionTrigger */'
 import '/* @bf-child:AccordionContent */'
@@ -3010,9 +3211,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3025,9 +3227,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3067,7 +3270,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/components/context-api.md doc-examples L190 — Provider passes signal getter 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate, provideContext } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate, provideContext } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -3075,9 +3278,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3090,9 +3294,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3182,7 +3387,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/portals.md doc-examples L53 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createPortal, createSignal, hydrate, isSSRPortal } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createPortal, createSignal, hydrate, isSSRPortal } from '@barefootjs/client/runtime'
 
 
 export function initTooltip(__scope, _p = {}) {
@@ -3205,9 +3410,10 @@ export function initTooltip(__scope, _p = {}) {
   const [_s0, _s2] = $(__scope, 's0', 's2')
   const [_s1] = $t(__scope, 's1')
 
+  let __anchor_s1 = _s1
   createEffect(() => {
     const __val = _p.text
-    if (_s1 && !__val?.__isSlot) _s1.nodeValue = String(__val ?? '')
+    __anchor_s1 = __bfText(__anchor_s1, __val)
   })
 
   if (_s0) _s0.addEventListener('mouseenter', () => { setVisible(true) })
@@ -3286,7 +3492,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/props-type-safety.md doc-examples L16 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initGreeting(__scope, _p = {}) {
@@ -3295,14 +3501,16 @@ export function initGreeting(__scope, _p = {}) {
 
   const [_s0, _s1] = $t(__scope, 's0', 's1')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = _p.greeting ?? 'Hello'
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
+  let __anchor_s1 = _s1
   createEffect(() => {
     const __val = _p.name
-    if (_s1 && !__val?.__isSlot) _s1.nodeValue = String(__val ?? '')
+    __anchor_s1 = __bfText(__anchor_s1, __val)
   })
 
 }
@@ -3348,7 +3556,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/components/props-type-safety.md doc-examples L89 — (no label) 1`] = `
-"import { $c, $t, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $c, $t, __bfText, createComponent, createEffect, createSignal, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:Card */'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -3357,9 +3565,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3372,9 +3581,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3428,7 +3638,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/core-concepts/how-it-works.mdx doc-examples L33 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -3440,9 +3650,10 @@ export function initCounter(__scope, _p = {}) {
   const [_s1] = $(__scope, 's1')
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = count()
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
   if (_s1) _s1.addEventListener('click', () => { setCount(n => n + 1) })
@@ -3475,7 +3686,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/core-concepts/mpa-style.md doc-examples L23 — (no label) 1`] = `
-"import { $, $c, $t, createComponent, createEffect, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
+"import { $, $c, $t, __bfText, createComponent, createEffect, hydrate, initChild, renderChild } from '@barefootjs/client/runtime'
 import '/* @bf-child:ReviewStars */'
 import '/* @bf-child:AddToCart */'
 
@@ -3490,14 +3701,16 @@ export function initProductPage(__scope, _p = {}) {
   const [_s0, _s2] = $t(__scope, 's0', 's2')
   const [_s5, _s6] = $c(__scope, 's5', 's6')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = product.name
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
+  let __anchor_s2 = _s2
   createEffect(() => {
     const __val = product.description
-    if (_s2 && !__val?.__isSlot) _s2.nodeValue = String(__val ?? '')
+    __anchor_s2 = __bfText(__anchor_s2, __val)
   })
 
   createEffect(() => {
@@ -3529,7 +3742,7 @@ export function ProductPage(_p, __bfKey) { return createComponent('ProductPage',
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L55 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initGreeting(__scope, _p = {}) {
@@ -3538,9 +3751,10 @@ export function initGreeting(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = _p.name
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3550,7 +3764,7 @@ export function Greeting(_p, __bfKey) { return createComponent('Greeting', _p, _
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L82 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -3566,9 +3780,10 @@ export function initCounter(__scope, _p = {}) {
   const [_s2] = $(__scope, 's2')
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = count()
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
   if (_s2) _s2.addEventListener('click', () => { setCount(n => n + 1) })
@@ -3601,7 +3816,7 @@ export function Layout(_p, __bfKey) { return createComponent('Layout', _p, __bfK
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L167 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -3609,9 +3824,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3624,9 +3840,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3669,7 +3886,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L171 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -3677,9 +3894,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3692,9 +3910,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3737,7 +3956,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L177 — (no label) 1`] = `
-"import { $, $t, __bfSlot, createComponent, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, $t, __bfSlot, __bfText, createComponent, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -3745,9 +3964,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3760,9 +3980,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3805,7 +4026,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/hono-adapter.md doc-examples L190 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -3813,9 +4034,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3828,9 +4050,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3870,7 +4093,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L50 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initGreeting(__scope, _p = {}) {
@@ -3879,9 +4102,10 @@ export function initGreeting(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = _p.name
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3891,7 +4115,7 @@ export function Greeting(_p, __bfKey) { return createComponent('Greeting', _p, _
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L74 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -3907,9 +4131,10 @@ export function initCounter(__scope, _p = {}) {
   const [_s2] = $(__scope, 's2')
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = count()
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
   if (_s2) _s2.addEventListener('click', () => { setCount(n => n + 1) })
@@ -3920,7 +4145,7 @@ export function Counter(_p, __bfKey) { return createComponent('Counter', _p, __b
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L147 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -3928,9 +4153,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3943,9 +4169,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -3985,7 +4212,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L159 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -3993,9 +4220,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4008,9 +4236,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4050,7 +4279,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L173 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4058,9 +4287,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4073,9 +4303,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4143,7 +4374,7 @@ export function TodoList(_p, __bfKey) { return createComponent('TodoList', _p, _
 `;
 
 exports[`docs/core/adapters/go-template-adapter.md doc-examples L231 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, insert } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4151,9 +4382,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4166,9 +4398,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4211,7 +4444,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/custom-adapter.md doc-examples L169 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4219,9 +4452,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4234,9 +4468,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4267,7 +4502,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/custom-adapter.md doc-examples L174 — (no label) 1`] = `
-"import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4275,9 +4510,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4290,9 +4526,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4323,7 +4560,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/custom-adapter.md doc-examples L195 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4331,9 +4568,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4346,9 +4584,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4392,7 +4631,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/adapters/custom-adapter.md doc-examples L200 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4400,9 +4639,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4415,9 +4655,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4470,7 +4711,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/advanced/compiler-internals.md doc-examples L126 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4478,9 +4719,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4493,9 +4735,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4597,7 +4840,7 @@ export function StatementExample(_p, __bfKey) { return createComponent('Statemen
 `;
 
 exports[`docs/core/advanced/performance.md doc-examples L67 — ✅ Stable key — DOM nodes reused when list changes 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4605,9 +4848,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4620,9 +4864,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4662,7 +4907,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/advanced/performance.md doc-examples L70 — ❌ Index key — DOM nodes recreated on reorder 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate, mapArray } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
   if (!__scope) return
@@ -4670,9 +4915,10 @@ export function initTodoItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.todo)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4685,9 +4931,10 @@ export function initItem(__scope, _p = {}) {
 
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = String(_p.item)
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
 }
@@ -4934,7 +5181,7 @@ export function TimelineBar(_p, __bfKey) { return createComponent('TimelineBar',
 `;
 
 exports[`docs/core/introduction.mdx doc-examples L15 — (no label) 1`] = `
-"import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 
 export function initCounter(__scope, _p = {}) {
@@ -4946,9 +5193,10 @@ export function initCounter(__scope, _p = {}) {
   const [_s1] = $(__scope, 's1')
   const [_s0] = $t(__scope, 's0')
 
+  let __anchor_s0 = _s0
   createEffect(() => {
     const __val = count()
-    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+    __anchor_s0 = __bfText(__anchor_s0, __val)
   })
 
   if (_s1) _s1.addEventListener('click', () => { setCount(n => n + 1) })