@barefootjs/jsx 0.5.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)
   })
 
 }
@@ -475,7 +489,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L69 — ✅ Multi-key: sort by price, break ties by name 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
@@ -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,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)
   })
 
 }
@@ -538,7 +554,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L74 — ✅ Relational ternary 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
@@ -546,9 +562,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)
   })
 
 }
@@ -561,9 +578,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)
   })
 
 }
@@ -601,7 +619,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L85 — (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
@@ -609,9 +627,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)
   })
 
 }
@@ -624,9 +643,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)
   })
 
 }
@@ -663,7 +683,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L131 — ❌ BF101 on Go/Mojo; works on Hono 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
@@ -671,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)
   })
 
 }
@@ -686,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)
   })
 
 }
@@ -714,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)
   })
 
 }
@@ -726,7 +749,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L134 — ✅ Use /* @client */ 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
@@ -734,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)
   })
 
 }
@@ -749,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)
   })
 
 }
@@ -787,7 +812,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L151 — ❌ BF101 on Go/Mojo; works on Hono 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
@@ -795,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)
   })
 
 }
@@ -810,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)
   })
 
 }
@@ -838,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)
   })
 
 }
@@ -850,7 +878,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L154 — ✅ Use arrow functions for adapter portability 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
@@ -858,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)
   })
 
 }
@@ -873,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)
   })
 
 }
@@ -901,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)
   })
 
 }
@@ -913,7 +944,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 exports[`docs/core/rendering/jsx-compatibility.md doc-examples L168 — ✅ Use /* @client */ 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
@@ -921,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)
   })
 
 }
@@ -936,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)
   })
 
 }
@@ -976,7 +1009,7 @@ export function Example(_p, __bfKey) { return createComponent('Example', _p, __b
 `;
 
 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
@@ -984,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)
   })
 
 }
@@ -999,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)
   })
 
 }
@@ -1037,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
@@ -1045,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)
   })
 
 }
@@ -1060,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)
   })
 
 }
@@ -1098,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
@@ -1106,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)
   })
 
 }
@@ -1121,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)
   })
 
 }
@@ -1159,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
@@ -1167,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)
   })
 
 }
@@ -1182,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)
   })
 
 }
@@ -1215,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
@@ -1223,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)
   })
 
 }
@@ -1238,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)
   })
 
 }
@@ -1428,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 = {}) {
@@ -1440,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) })
@@ -1616,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
@@ -1624,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)
   })
 
 }
@@ -1639,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)
   })
 
 }
@@ -1748,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
@@ -1756,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)
   })
 
 }
@@ -1771,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)
   })
 
 }
@@ -1799,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)
   })
 
 }
@@ -2052,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 = {}) {
@@ -2061,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)
   })
 
 }
@@ -2076,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)
   })
 
 }
@@ -2131,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
@@ -2139,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)
   })
 
 }
@@ -2154,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)
   })
 
 }
@@ -2187,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 = {}) {
@@ -2198,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)
   })
 
 }
@@ -2210,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 = {}) {
@@ -2222,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) })
@@ -2316,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 = {}) {
@@ -2325,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)
   })
 
 }
@@ -2340,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)
   })
 
 }
@@ -2396,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 = {}) {
@@ -2405,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)
   })
 
 }
@@ -2420,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)
   })
 
 }
@@ -2458,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
@@ -2466,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)
   })
 
 }
@@ -2481,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)
   })
 
 }
@@ -2517,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 = {}) {
@@ -2526,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)
   })
 
 }
@@ -2541,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)
   })
 
 }
@@ -2579,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 = {}) {
@@ -2588,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)
   })
 
 }
@@ -2603,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)
   })
 
 }
@@ -2641,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 = {}) {
@@ -2650,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)
   })
 
 }
@@ -2665,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)
   })
 
 }
@@ -2703,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 */'
@@ -2721,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)
   })
 
 }
@@ -2736,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)
   })
 
 }
@@ -2791,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
@@ -2799,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)
   })
 
 }
@@ -2814,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)
   })
 
 }
@@ -2863,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
@@ -2871,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)
   })
 
 }
@@ -2886,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)
   })
 
 }
@@ -2974,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 */'
 
@@ -2984,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)
   })
 
 }
@@ -2999,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)
   })
 
 }
@@ -3125,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 */'
@@ -3136,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)
   })
 
 }
@@ -3151,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)
   })
 
 }
@@ -3193,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
@@ -3201,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)
   })
 
 }
@@ -3216,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)
   })
 
 }
@@ -3308,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 = {}) {
@@ -3331,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) })
@@ -3412,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 = {}) {
@@ -3421,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)
   })
 
 }
@@ -3474,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 = {}) {
@@ -3483,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)
   })
 
 }
@@ -3498,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)
   })
 
 }
@@ -3554,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 = {}) {
@@ -3566,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) })
@@ -3601,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 */'
 
@@ -3616,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(() => {
@@ -3655,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 = {}) {
@@ -3664,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)
   })
 
 }
@@ -3676,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 = {}) {
@@ -3692,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) })
@@ -3727,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
@@ -3735,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)
   })
 
 }
@@ -3750,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)
   })
 
 }
@@ -3795,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
@@ -3803,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)
   })
 
 }
@@ -3818,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)
   })
 
 }
@@ -3863,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
@@ -3871,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)
   })
 
 }
@@ -3886,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)
   })
 
 }
@@ -3931,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
@@ -3939,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)
   })
 
 }
@@ -3954,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)
   })
 
 }
@@ -3996,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 = {}) {
@@ -4005,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)
   })
 
 }
@@ -4017,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 = {}) {
@@ -4033,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) })
@@ -4046,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
@@ -4054,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)
   })
 
 }
@@ -4069,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)
   })
 
 }
@@ -4111,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
@@ -4119,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)
   })
 
 }
@@ -4134,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)
   })
 
 }
@@ -4176,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
@@ -4184,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)
   })
 
 }
@@ -4199,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)
   })
 
 }
@@ -4269,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
@@ -4277,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)
   })
 
 }
@@ -4292,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)
   })
 
 }
@@ -4337,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
@@ -4345,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)
   })
 
 }
@@ -4360,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)
   })
 
 }
@@ -4393,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
@@ -4401,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)
   })
 
 }
@@ -4416,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)
   })
 
 }
@@ -4449,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
@@ -4457,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)
   })
 
 }
@@ -4472,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)
   })
 
 }
@@ -4518,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
@@ -4526,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)
   })
 
 }
@@ -4541,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)
   })
 
 }
@@ -4596,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
@@ -4604,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)
   })
 
 }
@@ -4619,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)
   })
 
 }
@@ -4723,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
@@ -4731,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)
   })
 
 }
@@ -4746,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)
   })
 
 }
@@ -4788,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
@@ -4796,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)
   })
 
 }
@@ -4811,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)
   })
 
 }
@@ -5060,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 = {}) {
@@ -5072,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) })