@barefootjs/jsx 0.31.1 → 0.31.3

package/src/__tests__/binding-scope.test.ts

@@ -0,0 +1,200 @@
+/**
+ * Unit tests for `BindingScope` (#2482 Stage 0). See
+ * `packages/jsx/src/scope/binding-scope.ts` for the service itself — this
+ * file pins its observable behavior, especially the destructure semantics
+ * mirrored from `jsx-to-ir.ts`'s `ctx.loopParams` add site and the
+ * immutability win over that Set-based design's nested-same-name hazard.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { BindingScope } from '../scope/binding-scope.ts'
+
+describe('BindingScope', () => {
+  test('EMPTY: nothing bound, lookup null, empty boundNames, shadow predicate false', () => {
+    const scope = BindingScope.EMPTY
+    expect(scope.isBound('x')).toBe(false)
+    expect(scope.lookup('x')).toBeNull()
+    expect(scope.boundNames().size).toBe(0)
+    expect(scope.asShadowPredicate()('x')).toBe(false)
+  })
+
+  test('simple loop row: param and index bound with sources item/index', () => {
+    const scope = BindingScope.EMPTY.enterLoopRow({ param: 'item', index: 'i' })
+    expect(scope.isBound('item')).toBe(true)
+    expect(scope.isBound('i')).toBe(true)
+    expect(scope.lookup('item')).toEqual({
+      depth: 0,
+      frame: scope.lookup('item')!.frame,
+      binding: { source: 'item' },
+    })
+    expect(scope.lookup('i')?.binding).toEqual({ source: 'index' })
+    expect(scope.lookup('item')?.frame.kind).toBe('loop-row')
+  })
+
+  test('loop row with no index: index name not bound', () => {
+    const scope = BindingScope.EMPTY.enterLoopRow({ param: 'item', index: null })
+    expect(scope.isBound('item')).toBe(true)
+    expect(scope.isBound('i')).toBe(false)
+  })
+
+  test('destructured row: paramBindings names bound as destructure; raw param NOT bound', () => {
+    // Mirrors jsx-to-ir.ts:4330-4335 exactly: when paramBindings is
+    // non-empty, ONLY the destructured binding names are added to
+    // ctx.loopParams — the else branch that adds the raw `param` text is
+    // skipped entirely. For a destructured callback `param` holds the
+    // original pattern source text (e.g. "{ id, name }"), which is not a
+    // usable identifier anyway, so not binding it is correct, not just
+    // an accident of mirroring.
+    const scope = BindingScope.EMPTY.enterLoopRow({
+      param: '{ id, name }',
+      index: null,
+      paramBindings: [{ name: 'id' }, { name: 'name' }],
+    })
+    expect(scope.isBound('id')).toBe(true)
+    expect(scope.isBound('name')).toBe(true)
+    expect(scope.lookup('id')?.binding).toEqual({ source: 'destructure' })
+    expect(scope.lookup('name')?.binding).toEqual({ source: 'destructure' })
+    // The raw pattern text is not a bound name.
+    expect(scope.isBound('{ id, name }')).toBe(false)
+  })
+
+  test('preamble locals: declaredNames bound as preamble', () => {
+    const scope = BindingScope.EMPTY.enterLoopRow({
+      param: 'row',
+      index: null,
+      preamble: { declaredNames: ['out', 'label'] },
+    })
+    expect(scope.isBound('row')).toBe(true)
+    expect(scope.lookup('out')?.binding).toEqual({ source: 'preamble' })
+    expect(scope.lookup('label')?.binding).toEqual({ source: 'preamble' })
+  })
+
+  test('nested loops with the SAME param name: inner lookup is depth 0; discarding the inner scope still leaves the parent bound', () => {
+    // Pins the immutability win over the old `ctx.loopParams` Set design:
+    // that mechanism `.add`s a nested loop's param and `.delete`s it on
+    // the way back out, so a caller that captured "the current set"
+    // reference before entering the nested loop observes the SAME
+    // mutable object both inside and after — there is no way to ask "what
+    // was bound one loop level up" once the same name has been added
+    // twice and deleted once. BindingScope's immutable child scopes make
+    // that question well-formed: `outer` below is never touched by
+    // `enterLoopRow` on `inner`, so it still resolves `item` after we
+    // stop using (conceptually "pop") the inner scope by simply going
+    // back to holding the `outer` reference.
+    const outer = BindingScope.EMPTY.enterLoopRow({ param: 'item', index: null })
+    const inner = outer.enterLoopRow({ param: 'item', index: null })
+
+    expect(inner.lookup('item')?.depth).toBe(0)
+    expect(outer.lookup('item')?.depth).toBe(0)
+    // "Discarding" the inner scope is just no longer holding its
+    // reference — `outer` was never mutated and still has `item` bound.
+    expect(outer.isBound('item')).toBe(true)
+  })
+
+  test('callback frame: enterCallback binds params as source param, frame kind callback; row bindings still visible beneath', () => {
+    const row = BindingScope.EMPTY.enterLoopRow({ param: 'item', index: null })
+    const withCallback = row.enterCallback(['a', 'b'])
+
+    expect(withCallback.lookup('a')).toEqual({
+      depth: 0,
+      frame: withCallback.lookup('a')!.frame,
+      binding: { source: 'param' },
+    })
+    expect(withCallback.lookup('a')?.frame.kind).toBe('callback')
+    expect(withCallback.lookup('b')?.binding).toEqual({ source: 'param' })
+
+    // The row binding is still visible, one frame further out.
+    const itemLookup = withCallback.lookup('item')
+    expect(itemLookup?.depth).toBe(1)
+    expect(itemLookup?.frame.kind).toBe('loop-row')
+    expect(itemLookup?.binding).toEqual({ source: 'item' })
+  })
+
+  test('shadowing: inner binding wins lookup (depth 0) over a same-named outer binding', () => {
+    const outer = BindingScope.EMPTY.enterLoopRow({ param: 'x', index: null })
+    const inner = outer.enterCallback(['x'])
+
+    const found = inner.lookup('x')
+    expect(found?.depth).toBe(0)
+    expect(found?.binding).toEqual({ source: 'param' })
+    expect(found?.frame.kind).toBe('callback')
+  })
+
+  test('boundNames unions across frames; asShadowPredicate matches isBound', () => {
+    const scope = BindingScope.EMPTY
+      .enterLoopRow({ param: 'item', index: 'i', preamble: { declaredNames: ['out'] } })
+      .enterCallback(['a'])
+
+    const names = scope.boundNames()
+    expect(names.has('item')).toBe(true)
+    expect(names.has('i')).toBe(true)
+    expect(names.has('out')).toBe(true)
+    expect(names.has('a')).toBe(true)
+    expect(names.size).toBe(4)
+
+    const shadowed = scope.asShadowPredicate()
+    for (const n of ['item', 'i', 'out', 'a', 'not-bound']) {
+      expect(shadowed(n)).toBe(scope.isBound(n))
+    }
+  })
+
+  describe('valueBoundNames (#2482 Stage 1a Commit 2)', () => {
+    test('excludes preamble names that boundNames() includes', () => {
+      const scope = BindingScope.EMPTY.enterLoopRow({
+        param: 'item',
+        index: 'i',
+        preamble: { declaredNames: ['label', 'out'] },
+      })
+
+      // Shadow-guard query: sees everything, including preamble locals.
+      const all = scope.boundNames()
+      expect(all.has('item')).toBe(true)
+      expect(all.has('i')).toBe(true)
+      expect(all.has('label')).toBe(true)
+      expect(all.has('out')).toBe(true)
+      expect(all.size).toBe(4)
+
+      // Reactivity/slotId query: item/index/destructure only.
+      const values = scope.valueBoundNames()
+      expect(values.has('item')).toBe(true)
+      expect(values.has('i')).toBe(true)
+      expect(values.has('label')).toBe(false)
+      expect(values.has('out')).toBe(false)
+      expect(values.size).toBe(2)
+    })
+
+    test('destructured bindings count as value bindings', () => {
+      const scope = BindingScope.EMPTY.enterLoopRow({
+        param: '{ id, name }',
+        index: null,
+        paramBindings: [{ name: 'id' }, { name: 'name' }],
+        preamble: { declaredNames: ['formatted'] },
+      })
+
+      const values = scope.valueBoundNames()
+      expect(values.has('id')).toBe(true)
+      expect(values.has('name')).toBe(true)
+      expect(values.has('formatted')).toBe(false)
+      expect(values.size).toBe(2)
+    })
+
+    test('excludes enterCallback param-sourced names too', () => {
+      // A filter/sort/nested-arrow frame's own parameters are a distinct
+      // binding shape from a loop row's item/index/destructure names
+      // (see the class doc comment) — valueBoundNames() must not surface
+      // them either, only boundNames() does.
+      const scope = BindingScope.EMPTY
+        .enterLoopRow({ param: 'item', index: null })
+        .enterCallback(['a', 'b'])
+
+      expect(scope.boundNames().has('a')).toBe(true)
+      expect(scope.valueBoundNames().has('a')).toBe(false)
+      expect(scope.valueBoundNames().has('item')).toBe(true)
+    })
+
+    test('EMPTY scope: both queries return an empty set', () => {
+      expect(BindingScope.EMPTY.boundNames().size).toBe(0)
+      expect(BindingScope.EMPTY.valueBoundNames().size).toBe(0)
+    })
+  })
+})

package/src/__tests__/css-layer-prefixer.test.ts

@@ -11,6 +11,9 @@ import {
   extractIdentifiers,
 } from '../css-layer-prefixer'
 import type { ComponentIR, IRElement, IRMetadata, IRTemplatePart, ConstantInfo, TemplateAttr, LiteralAttr } from '../types'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { HonoAdapter } from '../../../../packages/adapter-hono/src/adapter/hono-adapter'
 
 describe('prefixClass', () => {
   test('prefixes a simple class', () => {
@@ -452,4 +455,73 @@ describe('applyCssLayerPrefix', () => {
     const base = ir.metadata.localConstants.find(c => c.name === 'baseClasses')
     expect(base?.value).toBe("'layer-components:bg-primary'")
   })
+
+  test('multi-component file prefixes a shared const identically in every component IR (#2570)', () => {
+    // `sharedClasses` is used in CLASS position only by CompA; CompB reads it
+    // in a non-class expression. Per-IR application prefixed only CompA's
+    // copy, which — now that module-scope constants are hoisted to ONE
+    // module declaration — emitted the constant twice with different values
+    // ("tabsClasses has already been declared" in the site/ui build). The
+    // file-wide union must leave every IR's copy byte-identical.
+    const source = `
+      const sharedClasses = 'flex flex-col gap-2'
+
+      export function CompA() {
+        return <div className={sharedClasses + ' extra'}>a</div>
+      }
+
+      export function CompB() {
+        return <div data-cls={sharedClasses}>b</div>
+      }
+    `
+    const result = compileJSX(source, '/virtual/Tabs.tsx', {
+      adapter: new TestAdapter(),
+      cssLayerPrefix: 'components',
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')!.content
+
+    const declarations = template.match(/^const sharedClasses = .*$/gm) ?? []
+    expect(declarations).toHaveLength(1)
+    expect(declarations[0]).toContain('layer-components:flex')
+  })
+
+  test('prefixes a `Record`-shaped `as const` class map constant\'s typedValue (#2575)', () => {
+    // `preserveTypes` emitters (Hono) prefer `typedValue ?? value` when
+    // emitting a module-scope constant so `.tsx` output stays type-checked
+    // — see `generateModuleScopeDeclarations` in
+    // `packages/adapter-hono/src/adapter/hono-adapter.ts`'s base class.
+    // `applyCssLayerPrefixToFile` used to rewrite only `value`, leaving
+    // `typedValue` — the string Hono actually emits — unprefixed for any
+    // constant whose initializer carries type syntax (`as const`, a
+    // `satisfies`/`Record<...>` annotation, …). Regression for the fix:
+    // both strings must be prefixed together, and the `as const` assertion
+    // must survive the round trip verbatim.
+    const source = `
+      const toneClasses: Record<'info' | 'warn', string> = {
+        info: 'text-blue-500',
+        warn: 'text-amber-500',
+      } as const
+
+      export function Banner() {
+        return <div className={toneClasses.info}>hi</div>
+      }
+    `
+    const result = compileJSX(source, '/virtual/Banner.tsx', {
+      adapter: new HonoAdapter(),
+      cssLayerPrefix: 'components',
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')!.content
+
+    const declarations = [...template.matchAll(/^const toneClasses = [\s\S]*?\} as const$/gm)]
+    expect(declarations).toHaveLength(1)
+    const declaration = declarations[0][0]
+
+    // Classes are prefixed...
+    expect(declaration).toContain("info: 'layer-components:text-blue-500'")
+    expect(declaration).toContain("warn: 'layer-components:text-amber-500'")
+    // ...and the `as const` assertion survives the rewrite.
+    expect(declaration.trim().endsWith('} as const')).toBe(true)
+  })
 })

package/src/__tests__/form-control-value-ssr.test.ts

@@ -1,5 +1,5 @@
 /**
- * SSR projection of controlled form-control `value` (#2464 / #2465).
+ * SSR projection of controlled form-control `value` (#2464 / #2465 / #2466).
  *
  * `value` is not an attribute on `<textarea>` or `<select>` — emitting it
  * verbatim ships invalid HTML that browsers ignore, so no-JS and
@@ -9,6 +9,15 @@
  * and projects the value into element content (textarea) or per-option
  * `selected` comparisons (select — the shape `select-option-selected`
  * already proves across every adapter).
+ *
+ * `<option>`s rendered by a `.map()` loop get the same `selected`
+ * distribution, compared against the option's own value EXPRESSION rather
+ * than a literal (#2466). That makes `selected` an ordinary per-row
+ * reactive attribute, so it rides the loop's existing `applyItem` /
+ * `applyOuter` (or eager `mapArray` per-row effect) machinery — fixing the
+ * bug where an INDEX-KEYED reorder left `selected` attached to whichever
+ * physical `<option>` happened to have its `value` rewritten in place,
+ * instead of following the controlled signal's value.
  */
 
 import { describe, test, expect } from 'bun:test'
@@ -65,7 +74,7 @@ export function Pick() {
     expect(template).toContain(`((v()) === "b")`)
   })
 
-  test('an authored selected wins; dynamic option loops are left to hydrate', () => {
+  test('an authored selected wins; a `.map()` loop option gets a distributed selected binding (#2466)', () => {
     const { template } = compiled(`
 "use client"
 import { createSignal } from '@barefootjs/client'
@@ -89,7 +98,43 @@ export function Pick() {
     expect(template).toContain('selected={(false) || undefined}')
     expect(template).not.toContain('(v()) === "a"')
     expect(template).not.toMatch(/<select[^>]*value=/)
-  })
+    // The loop-rendered option compares against its own value EXPRESSION
+    // (the loop param `o`), not a literal — this is the #2466 half.
+    expect(template).toContain('((v()) === (o))')
+  }, 20000)
+
+  test('index-keyed .map() loop option: selected rides applyItem AND applyOuter (#2466)', () => {
+    const { clientJs } = compiled(`
+"use client"
+import { createSignal } from '@barefootjs/client'
+export function ReorderSelect() {
+  const [opts, setOpts] = createSignal([{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }])
+  const [val, setVal] = createSignal('b')
+  return (
+    <div>
+      <select value={val()} onChange={(e) => setVal(e.target.value)}>
+        {opts().map((o, i) => <option key={i} value={o.id}>{o.label}</option>)}
+      </select>
+      <button onClick={() => setOpts([...opts()].reverse())}>Reverse</button>
+    </div>
+  )
+}
+`)
+    // `key={i}` is index-keyed: nothing MOVES on reorder, so `value`/text are
+    // rewritten in place by applyItem — `selected` must be recomputed there
+    // too (item changed under a stationary row), not just at row creation.
+    expect(clientJs).toContain('mapArrayLazy(')
+    expect(clientJs).toContain('applyItem:')
+    expect(clientJs).toContain('applyOuter:')
+    // Every apply body (createRow, applyItem, applyOuter) recomputes
+    // `selected` from the item AND the outer controlled signal…
+    const computed = clientJs.match(/const __x = \(val\(\)\) === \(o\(\)\.id\)/g) ?? []
+    expect(computed.length).toBe(3)
+    // …and writes it as a DOM PROPERTY (not just an HTML attribute
+    // presence, which would not affect a live, already-rendered <option>).
+    const writes = clientJs.match(/\.selected = !!\(__x\)/g) ?? []
+    expect(writes.length).toBe(3)
+  }, 20000)
 
   test('textarea with explicit children is left untouched', () => {
     const { template } = compiled(`

package/src/__tests__/let-type-annotation.test.ts

@@ -0,0 +1,208 @@
+/**
+ * Regression test for #2589: a `let` declaration's explicit type
+ * annotation was dropped in emitted `.tsx` SSR templates —
+ * `let x: HTMLTextAreaElement | null = null` emitted as `let x = null`,
+ * which TypeScript then infers as `null`/`never`, producing
+ * TS7034/TS7005 (and TS2339 via `never` narrowing) under strict mode.
+ * Runtime output (client JS) was always correct — this is a type-level
+ * emission defect in the SSR template only.
+ *
+ * `ConstantInfo.typeAnnotation` (verbatim `node.type.getText()`, only
+ * present when the author wrote an explicit annotation) is now threaded
+ * through and printed by the `HonoAdapter` (`JsxAdapter` base) for `let`
+ * declarations, both function-scope and module-scope, initialized and
+ * uninitialized. `const` declarations are deliberately left unchanged:
+ * their type always infers correctly from the (immutable) initializer,
+ * so emitting an annotation there would only churn output for no
+ * typecheck gain (see the design note in the class docstring / #2589).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { HonoAdapter } from '../../../../packages/adapter-hono/src/adapter/hono-adapter'
+
+describe('let type annotation preservation in emitted templates (#2589)', () => {
+  test('function-scope initialized let keeps its explicit type annotation', () => {
+    const honoAdapter = new HonoAdapter()
+    // `status()` is called directly from the returned JSX (unlike an
+    // `onXxx` event-handler prop, which the SSR template stubs to a
+    // no-op), so its body — and transitively `textareaEl`, which the
+    // effect-guard shape (`syncScroll`, mirroring the issue) also reads —
+    // stays reachable and survives into the emitted template.
+    const source = `
+      'use client'
+      import { createSignal, createEffect } from '@barefootjs/client'
+
+      export function Textarea() {
+        let textareaEl: HTMLTextAreaElement | null = null
+        const [value, setValue] = createSignal('')
+
+        const syncScroll = () => {
+          if (textareaEl) {
+            textareaEl.scrollTop = textareaEl.scrollHeight
+          }
+        }
+
+        const status = () => (textareaEl ? 'ready' : 'idle')
+
+        createEffect(() => {
+          value()
+          syncScroll()
+        })
+
+        return <div>{status()}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'Textarea.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    expect(template.content).toContain('let textareaEl: HTMLTextAreaElement | null = null')
+  })
+
+  test('module-scope initialized let keeps its explicit type annotation', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      let exportModulePromise: Promise<{ x: number }> | null = null
+
+      export function Loader() {
+        const [status, setStatus] = createSignal('idle')
+
+        const load = () => {
+          exportModulePromise = Promise.resolve({ x: 1 })
+          setStatus('loaded')
+        }
+
+        return <button onClick={load}>{status()}</button>
+      }
+    `
+
+    const result = compileJSX(source, 'Loader.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    expect(template.content).toContain(
+      'let exportModulePromise: Promise<{ x: number }> | null = null',
+    )
+  })
+
+  test('module-scope uninitialized let keeps its explicit type annotation', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      let pending: number
+
+      export function Counter() {
+        const [count, setCount] = createSignal(0)
+
+        const bump = () => {
+          pending = count() + 1
+          setCount(pending)
+        }
+
+        return <button onClick={bump}>{count()}</button>
+      }
+    `
+
+    const result = compileJSX(source, 'Counter.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    expect(template.content).toContain('let pending: number')
+  })
+
+  test('unannotated let does NOT gain an inferred type annotation', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function Toggle() {
+        let y = null
+        const [open, setOpen] = createSignal(false)
+
+        const flip = () => {
+          y = open() ? 1 : null
+          setOpen(!open())
+        }
+
+        return <button onClick={flip}>{open() ? 'on' : 'off'}{String(y)}</button>
+      }
+    `
+
+    const result = compileJSX(source, 'Toggle.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    // No annotation must be synthesized from inference — only an
+    // explicit source annotation is ever printed (`typeAnnotation`,
+    // never `type` for an initialized declaration).
+    expect(template.content).toContain('let y = null')
+    expect(template.content).not.toMatch(/let y\s*:/)
+  })
+
+  test('const with an explicit annotation is unchanged (no annotation added at emit)', () => {
+    const honoAdapter = new HonoAdapter()
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      export function Labelled() {
+        const label: string = 'hello'
+        const [count, setCount] = createSignal(0)
+        return <button onClick={() => setCount(count() + 1)}>{label}{count()}</button>
+      }
+    `
+
+    const result = compileJSX(source, 'Labelled.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    // By design (#2589 scoping decision) only `let` gets its annotation
+    // re-emitted — `const` infers correctly from its initializer already,
+    // so this stays `const label = 'hello'` with no annotation added.
+    expect(template.content).toContain("const label = 'hello'")
+    expect(template.content).not.toContain('const label: string')
+  })
+
+  test('ambient `declare let` is not re-emitted as a runtime binding', () => {
+    const honoAdapter = new HonoAdapter()
+    // `declare let` is a type-only contract: it has no initializer and
+    // carries NodeFlags.Let, so after the uninitialized-`let` collection
+    // fix it would match the module-scope collector unless ambient
+    // statements are excluded. Re-emitting it as a runtime `let` would
+    // shadow the real global with `undefined` in the SSR module.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+
+      declare let __BF_AMBIENT__: string
+
+      export function Widget() {
+        const [n, setN] = createSignal(0)
+        const status = () => (__BF_AMBIENT__ ? 'set' : 'unset')
+        return <button onClick={() => setN(n() + 1)}>{status()}{n()}</button>
+      }
+    `
+
+    const result = compileJSX(source, 'Widget.tsx', { adapter: honoAdapter })
+    expect(result.errors).toHaveLength(0)
+
+    const template = result.files.find((f) => f.type === 'markedTemplate')!
+    expect(template).toBeDefined()
+    // The reference inside `status` may survive, but no runtime `let`
+    // declaration for the ambient name may be emitted.
+    expect(template.content).not.toMatch(/^\s*let __BF_AMBIENT__/m)
+  })
+})

package/src/__tests__/memo-deps-comments.test.ts

@@ -0,0 +1,99 @@
+/**
+ * Memo/effect dependency extraction must read the token stream, not the raw
+ * body text: a doc comment (or string literal) mentioning `otherSignal()`
+ * inside a computation body is not a read and must not become a dependency.
+ *
+ * Regression pin for the phantom deps surfaced in #2581's review: slider's
+ * `percentage` memo gained `internalValue`/`controlledValue` deps in the
+ * regenerated `ui/meta/slider.json` purely because an explanatory comment
+ * inside the memo body named those getters in call syntax.
+ */
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+
+describe('dependency extraction ignores comments and strings', () => {
+  test('a comment naming another getter in call syntax is not a dep', () => {
+    const source = `
+      "use client"
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function Slider() {
+        const [internalValue, setInternalValue] = createSignal(0)
+        const [controlledValue, setControlledValue] = createSignal<number | undefined>(undefined)
+        const [min, setMin] = createSignal(0)
+        const [max, setMax] = createSignal(100)
+        const currentValue = createMemo(() => controlledValue() ?? internalValue())
+        const percentage = createMemo(() => {
+          if (max() <= min()) return 0
+          // \`currentValue()\` mirrors \`controlledValue()\` and \`internalValue()\`
+          // in its type, so assert what's runtime-guaranteed.
+          return Math.max(0, Math.min(100, ((currentValue()! - min()) / (max() - min())) * 100))
+        })
+        return <div style={\`width: \${percentage()}%\`}>{currentValue()}</div>
+      }
+    `
+    const ctx = analyzeComponent(source, 'Slider.tsx')
+    const percentage = ctx.memos.find(m => m.name === 'percentage')
+    expect(percentage).toBeDefined()
+    expect(percentage!.deps.sort()).toEqual(['currentValue', 'max', 'min'])
+  })
+
+  test('a string literal naming a getter in call syntax is not a dep', () => {
+    const source = `
+      "use client"
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function Label() {
+        const [count, setCount] = createSignal(0)
+        const [label, setLabel] = createSignal('x')
+        const hint = createMemo(() => label() + ' (see count() for the number)')
+        return <span>{hint()}</span>
+      }
+    `
+    const ctx = analyzeComponent(source, 'Label.tsx')
+    const hint = ctx.memos.find(m => m.name === 'hint')
+    expect(hint).toBeDefined()
+    expect(hint!.deps).toEqual(['label'])
+  })
+
+  test('a read AFTER a template-literal substitution still registers', () => {
+    // Trap for token-scan implementations: without a parser driving
+    // `reScanTemplateToken`, the template tail after `\${...}` is mis-lexed
+    // as a new template opener and swallows the following statement —
+    // xyflow's `visibleClass` shape, where `animated()` follows a
+    // substitution line and silently lost its dep.
+    const source = `
+      "use client"
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function Edge() {
+        const [selected, setSelected] = createSignal(false)
+        const [animated, setAnimated] = createSignal(false)
+        const visibleClass = createMemo(() => {
+          let cls = 'edge'
+          if (selected()) cls += \` \${'edge-selected'}\`
+          if (animated()) cls += \` \${'edge-animated'}\`
+          return cls
+        })
+        return <div class={visibleClass()}>x</div>
+      }
+    `
+    const ctx = analyzeComponent(source, 'Edge.tsx')
+    const visibleClass = ctx.memos.find(m => m.name === 'visibleClass')
+    expect(visibleClass).toBeDefined()
+    expect(visibleClass!.deps.sort()).toEqual(['animated', 'selected'])
+  })
+
+  test('genuine reads inside template-literal substitutions still register', () => {
+    const source = `
+      "use client"
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function Badge() {
+        const [tone, setTone] = createSignal('info')
+        const cls = createMemo(() => \`badge badge-\${tone()}\`)
+        return <span class={cls()}>x</span>
+      }
+    `
+    const ctx = analyzeComponent(source, 'Badge.tsx')
+    const cls = ctx.memos.find(m => m.name === 'cls')
+    expect(cls).toBeDefined()
+    expect(cls!.deps).toEqual(['tone'])
+  })
+})