@barefootjs/jsx 0.16.0 → 0.17.0

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

@@ -943,7 +943,7 @@ 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 L168 — ✅ Use /* @client */ 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L167 — ✅ Value-producing block bodies normalize (let-inline) and lower everywhere 1`] = `
 "import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -997,14 +997,79 @@ export function initExample(__scope, _p = {}) {
 
   const [_s1] = $(__scope, 's1')
 
-  mapArray(() => items().sort((a, b) => { const an = a.name; return an > b.name ? 1 : -1 }), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+  mapArray(() => items().toSorted((a, b) => a.name > 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) => { const an = a.name; return an > 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-->\${([]).toSorted((a, b) => a.name > 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/jsx-compatibility.md doc-examples L182 — ✅ Use /* @client */ 1`] = `
+"import { $, $t, __bfText, createComponent, createEffect, createSignal, escapeText, 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-->\${escapeText(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-->\${escapeText(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().sort((a, b) => { let r = 0; r = a.name > b.name ? 1 : -1; return r }), _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) => { let r = 0; r = a.name > b.name ? 1 : -1; return r }).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 

package/src/__tests__/analyzer.test.ts

@@ -495,3 +495,56 @@ describe('analyzeComponent', () => {
     })
   })
 })
+
+// #2040: complete, value-producing block-bodied memos are folded to a single
+// `parsed` expression so adapters lower them through the expression path
+// (retiring the per-idiom block recognizers). Idempotent reactive getter reads
+// count as pure, so a guard read on several branches still folds.
+describe('block-bodied memo → parsed fold (#2040)', () => {
+  test('guard-and-return-const memo folds to a conditional `parsed`', () => {
+    const source = `
+      'use client'
+      import { createSignal, createMemo } from '@barefootjs/client'
+      const ALL = ['a', 'b']
+      export function Tags() {
+        const [sel, setSel] = createSignal<string | null>(null)
+        const visible = createMemo(() => {
+          const k = sel()
+          if (!k) return ALL
+          return ALL.filter(t => t === k)
+        })
+        return <ul>{visible().map(t => (<li key={t}>{t}</li>))}</ul>
+      }
+    `
+    const ctx = analyzeComponent(source, 'Tags.tsx')
+    const memo = ctx.memos.find(m => m.name === 'visible')
+    expect(memo?.parsedBlockComplete).toBe(true)
+    // `const k = sel(); if (!k) return ALL; return ALL.filter(...)` →
+    // `!sel() ? ALL : ALL.filter(...)`. `sel()` (a signal read) inlined twice.
+    expect(memo?.parsed?.kind).toBe('conditional')
+    const cond = memo?.parsed as { kind: 'conditional'; test: any; consequent: any }
+    expect(cond.test).toEqual({ kind: 'unary', op: '!', argument: { kind: 'call', callee: { kind: 'identifier', name: 'sel' }, args: [] } })
+    expect(cond.consequent).toEqual({ kind: 'identifier', name: 'ALL' })
+  })
+
+  test('imperative block-bodied memo leaves `parsed` unset', () => {
+    const source = `
+      'use client'
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function C() {
+        const [n, setN] = createSignal(0)
+        const total = createMemo(() => {
+          let s = 0
+          for (const x of [1, 2, 3]) s += x
+          return s + n()
+        })
+        return <div>{total()}</div>
+      }
+    `
+    const ctx = analyzeComponent(source, 'C.tsx')
+    const memo = ctx.memos.find(m => m.name === 'total')
+    // The `for` loop can't be represented → tolerant parser drops it →
+    // parsedBlockComplete is false → no fold → parsed stays undefined.
+    expect(memo?.parsed).toBeUndefined()
+  })
+})