@barefootjs/jsx 0.5.2 → 0.6.0

package/src/__tests__/expression-parser.test.ts

@@ -398,25 +398,104 @@ describe('expression-parser', () => {
       const result = parseExpression("items().filter(({name = 'anon'}) => name.startsWith('a'))")
       expect(result.kind).toBe('higher-order')
       if (result.kind === 'higher-order') {
-        // Predicate: `(_t.name ?? 'anon').startsWith('a')`.
-        expect(result.predicate.kind).toBe('call')
-        if (result.predicate.kind === 'call') {
-          expect(result.predicate.callee.kind).toBe('member')
-          if (result.predicate.callee.kind === 'member') {
-            expect(result.predicate.callee.property).toBe('startsWith')
-            expect(result.predicate.callee.object.kind).toBe('logical')
-            if (result.predicate.callee.object.kind === 'logical') {
-              expect(result.predicate.callee.object.op).toBe('??')
-              expect(result.predicate.callee.object.right.kind).toBe('literal')
-              if (result.predicate.callee.object.right.kind === 'literal') {
-                expect(result.predicate.callee.object.right.value).toBe('anon')
-              }
+        // Predicate: `(_t.name ?? 'anon').startsWith('a')`. Since #1448
+        // Tier B, `.startsWith` lowers to an `array-method` node (it was
+        // a generic `call` before), so the receiver is on `.object`.
+        expect(result.predicate.kind).toBe('array-method')
+        if (result.predicate.kind === 'array-method') {
+          expect(result.predicate.method).toBe('startsWith')
+          expect(result.predicate.object.kind).toBe('logical')
+          if (result.predicate.object.kind === 'logical') {
+            expect(result.predicate.object.op).toBe('??')
+            expect(result.predicate.object.right.kind).toBe('literal')
+            if (result.predicate.object.right.kind === 'literal') {
+              expect(result.predicate.object.right.value).toBe('anon')
             }
           }
         }
       }
     })
 
+    test('lowers .startsWith(search, position) — full arity (#1448 Tier B)', () => {
+      const result = parseExpression(`name().startsWith("world", 6)`)
+      expect(result.kind).toBe('array-method')
+      if (result.kind === 'array-method') {
+        expect(result.method).toBe('startsWith')
+        // Both the search string and the position survive as args so the
+        // adapter can emit the re-anchored test.
+        expect(result.args.length).toBe(2)
+      }
+    })
+
+    test('refuses .startsWith() with no search string (#1448 Tier B)', () => {
+      // JS coerces the missing argument to the string "undefined" — a
+      // degenerate result not worth lowering (mirrors `.includes()`).
+      const result = parseExpression(`name().startsWith()`)
+      expect(result.kind).toBe('unsupported')
+    })
+
+    test('lowers .replace(pattern, replacement, extra) — ignores 3rd+ arg (#1448 Tier B)', () => {
+      const result = parseExpression(`name().replace("o", "0", "extra")`)
+      expect(result.kind).toBe('array-method')
+      if (result.kind === 'array-method') {
+        expect(result.method).toBe('replace')
+      }
+    })
+
+    test('refuses .replace(pattern) with no replacement (#1448 Tier B)', () => {
+      // JS coerces the missing replacement to the string "undefined".
+      const result = parseExpression(`name().replace("o")`)
+      expect(result.kind).toBe('unsupported')
+    })
+
+    test('refuses .replace() with no arguments (#1448 Tier B)', () => {
+      // The zero-arg form is degenerate too (both pattern and
+      // replacement coerce to "undefined") — pin it alongside the
+      // one-arg case so neither regresses.
+      const result = parseExpression(`name().replace()`)
+      expect(result.kind).toBe('unsupported')
+    })
+
+    test('.replace with a non-regex unsupported arg surfaces its own reason (#1448 Tier B)', () => {
+      // An object-literal replacement must NOT be mislabelled as the
+      // deferred regex form — the guard only special-cases a
+      // regex-literal pattern.
+      const result = parseExpression(`name().replace("a", {x: 1})`)
+      expect(result.kind).toBe('unsupported')
+      if (result.kind === 'unsupported') {
+        expect(result.reason).not.toContain('regex form is deferred')
+      }
+    })
+
+    test('.replace(/re/, repl) refuses the regex form with the deferred reason (#1448 Tier B)', () => {
+      const result = parseExpression(`name().replace(/a/g, "b")`)
+      expect(result.kind).toBe('unsupported')
+      if (result.kind === 'unsupported') {
+        expect(result.reason).toContain('regex form is deferred')
+      }
+    })
+
+    test('lowers .repeat() and .repeat(n, extra) — full arity (#1448 Tier B)', () => {
+      // `.repeat()` is `repeat(0)` → "" in JS (not a RangeError); a
+      // second+ argument is ignored. Both stay on the lowering path.
+      for (const expr of [`name().repeat()`, `name().repeat(3, 4)`]) {
+        const result = parseExpression(expr)
+        expect(result.kind).toBe('array-method')
+        if (result.kind === 'array-method') {
+          expect(result.method).toBe('repeat')
+        }
+      }
+    })
+
+    test('lowers .padStart() / .padEnd(t, p, extra) — full arity (#1448 Tier B)', () => {
+      // `.padStart()` is `padStart(0)` → the receiver unchanged; a
+      // third+ argument is ignored. Both stay on the lowering path.
+      for (const expr of [`name().padStart()`, `name().padEnd(5, "0", "x")`]) {
+        const result = parseExpression(expr)
+        expect(result.kind).toBe('array-method')
+      }
+    })
+
     test('lowers .filter(({label = `untitled-${suffix}`}) => label) — template-literal default (#1531)', () => {
       const result = parseExpression('items().filter(({label = `untitled-${suffix}`}) => label)')
       expect(result.kind).toBe('higher-order')
@@ -1358,3 +1437,78 @@ describe('expression-parser', () => {
     })
   })
 })
+
+// =============================================================================
+// Full-arity lowering for the array / string methods (#1448)
+// =============================================================================
+//
+// These methods lower at their full JS arity: zero-arg defaults
+// (`.join()` → `,`, `.slice()` → full copy) and JS-ignored trailing
+// arguments (`.trim(1)`, `.at(i, extra)`, `.slice(s, e, extra)`) are all
+// accepted. The only forms still refused are the ones whose EXTRA
+// argument changes the result and isn't lowered yet — the `fromIndex` of
+// `.includes`/`.indexOf`/`.lastIndexOf` and the variadic `.concat(a, b)`
+// — because silently dropping those would make SSR differ from the
+// client (worse than a build error).
+describe('expression-parser — array-method full-arity lowering (#1448)', () => {
+  const supported: Array<[string, string]> = [
+    // base forms
+    ['join(sep)', 'arr.join("-")'],
+    ['includes(x)', 'arr.includes(x)'],
+    ['indexOf(x)', 'arr.indexOf(x)'],
+    ['at(i)', 'arr.at(1)'],
+    ['concat(other)', 'arr.concat(b)'],
+    ['slice(start)', 'arr.slice(1)'],
+    ['slice(start, end)', 'arr.slice(1, 2)'],
+    ['trim()', 's.trim()'],
+    // zero-arg defaults (every one of these escaping both its arm AND
+    // the guard is the footgun the relaxation must NOT reintroduce)
+    ['join() → default ","', 'arr.join()'],
+    ['slice() → full copy', 'arr.slice()'],
+    ['at() → at(0)', 'arr.at()'],
+    ['concat() → shallow copy', 'arr.concat()'],
+    ['reverse() base', 'arr.reverse()'],
+    ['toReversed() base', 'arr.toReversed()'],
+    ['toLowerCase() base', 's.toLowerCase()'],
+    ['toUpperCase() base', 's.toUpperCase()'],
+    ['lastIndexOf(x) base', 'arr.lastIndexOf(x)'],
+    // JS-ignored trailing arguments
+    ['slice(s, e, extra)', 'arr.slice(1, 2, 3)'],
+    ['at(i, extra)', 'arr.at(1, 2)'],
+    ['reverse(extra)', 'arr.reverse(1)'],
+    ['toReversed(extra)', 'arr.toReversed(1)'],
+    ['toLowerCase(extra)', 's.toLowerCase("x")'],
+    ['toUpperCase(extra)', 's.toUpperCase("x")'],
+    ['trim(extra)', 's.trim(1)'],
+  ]
+  for (const [label, expr] of supported) {
+    test(`${label} — lowers to array-method`, () => {
+      expect(parseExpression(expr).kind).toBe('array-method')
+    })
+  }
+
+  // Still refused (the extra argument is meaningful and not yet
+  // lowered), plus the degenerate zero-arg search forms (`includes()`
+  // searches for `undefined` — refused rather than guessed).
+  const refused: Array<[string, string]> = [
+    ['includes(x, fromIndex)', 'arr.includes(x, 1)'],
+    ['indexOf(x, fromIndex)', 'arr.indexOf(x, 1)'],
+    ['lastIndexOf(x, fromIndex)', 'arr.lastIndexOf(x, 1)'],
+    ['concat(a, b) variadic', 'arr.concat(a, b)'],
+    ['includes() zero-arg', 'arr.includes()'],
+    ['indexOf() zero-arg', 'arr.indexOf()'],
+  ]
+  for (const [label, expr] of refused) {
+    test(`${label} — refuses (meaningful extra arg, not yet lowered)`, () => {
+      const result = parseExpression(expr)
+      expect(result.kind).toBe('unsupported')
+      if (result.kind === 'unsupported') {
+        // Must NOT push `@client` (wrong remedy; doesn't work in
+        // attribute / condition position), and must explain it's a
+        // not-yet-lowered argument.
+        expect(result.reason).not.toContain('@client')
+        expect(result.reason).toContain('not yet lowered')
+      }
+    })
+  }
+})

package/src/__tests__/ir-to-client-js/reactivity.test.ts

@@ -23,6 +23,7 @@ function makeContext(overrides: Partial<ClientJsContext> = {}): ClientJsContext
     loopElements: [],
     refElements: [],
     childInits: [],
+    deferredChildSlots: new Set(),
     reactiveProps: [],
     reactiveChildProps: [],
     reactiveAttrs: [],

package/src/__tests__/staged-ir/06-multi-stage-soak.test.ts

@@ -80,9 +80,24 @@ describe('Multi-stage soak (DeskCanvas-shape)', () => {
     expect(clientJs).toMatch(/import\s+\{[^}]*useYjs[^}]*\}\s+from\s+['"]\.\/useYjs['"]/)
   })
 
-  test('Module → Template: nodeTypes import IS visible to template', () => {
-    const { templateBody } = compile(DESK_CANVAS_SHAPE, 'DeskCanvas.tsx')
-    expect(templateBody).toMatch(/nodeTypes/)
+  test('Module → Init: nodeTypes is forwarded to the deferred child via init', () => {
+    // The `<Flow>` render carries init-scope-only props (`data-yjs={yjs.id}`
+    // where `yjs` is an init-local; `nodes={items()}`). The module-scope
+    // template lambda can't supply those, so the child render is DEFERRED
+    // to a `data-bf-ph` placeholder and `upsertChild` (→ createComponent)
+    // creates `Flow` with the COMPLETE getter props. The inlinable
+    // `nodeTypes` is therefore forwarded through the init `upsertChild`
+    // getter — never dropped — rather than baked into the template lambda.
+    // (Pre-fix this child was rendered eagerly via `renderChild('Flow', {
+    // nodeTypes })` with the init-scope props silently dropped — the
+    // dropped-prop bug.)
+    const { templateBody, initBody } = compile(DESK_CANVAS_SHAPE, 'DeskCanvas.tsx')
+    // Template defers the child render with a placeholder, not renderChild.
+    expect(templateBody).toMatch(/data-bf-ph="s0"/)
+    expect(templateBody).not.toMatch(/renderChild/)
+    // Init forwards nodeTypes (and every other prop) with complete values.
+    expect(initBody).toMatch(/upsertChild\(__scope,\s*'Flow',\s*'s0'/)
+    expect(initBody).toMatch(/get nodeTypes\(\)\s*\{\s*return nodeTypes\s*\}/)
   })
 
   // TODO(#1138 P3 5/N): `useYjs(...)` (init-local initializer) leaks into

package/src/__tests__/static-loop-csr-materialize.test.ts

@@ -203,8 +203,9 @@ describe('#1247 — static-loop CSR self-heal', () => {
     // the inner `it` param).
     expect(clientJs).toMatch(/items\.map\(\(it, i\) =>/)
     // The inner per-item HTML references the inner destructured param
-    // directly (`${it}` in the template), not via a `__bfItem` accessor.
-    expect(clientJs).toMatch(/\$\{it\}/)
+    // directly (`${escapeText(it)}` in the template — text slots are
+    // HTML-escaped, #1694), not via a `__bfItem` accessor.
+    expect(clientJs).toMatch(/\$\{escapeText\(it\)\}/)
     expect(clientJs).not.toMatch(/__bfItem\(\)/)
   })
 
@@ -335,7 +336,8 @@ describe('#1247 — static-loop CSR self-heal', () => {
     // Preamble is NOT duplicated inside the materialize branch.
     expect(materializeBlock).not.toMatch(/const count = users\.length/)
     // The cloned template still references `count` — now resolved by the
-    // forEach-scope `const` introduced just above.
-    expect(materializeBlock).toMatch(/\$\{String\(count\)\}/)
+    // forEach-scope `const` introduced just above. Text slots are
+    // HTML-escaped (#1694), so it appears as `${escapeText(String(count))}`.
+    expect(materializeBlock).toMatch(/\$\{escapeText\(String\(count\)\)\}/)
   })
 })

package/src/__tests__/text-slot-escaping.test.ts

@@ -0,0 +1,56 @@
+/**
+ * Text-slot HTML-escaping emit shape (#1694 + follow-up).
+ *
+ * Pins which interpolations the client template wraps in `escapeText`:
+ *   - a plain text slot (`{stringValue}`) IS escaped — it becomes the
+ *     slot's text content under `innerHTML`;
+ *   - a branch-slot expression (Child-position value inside a conditional
+ *     `template()` arrow) is routed through `__bfSlot` and must NOT be
+ *     wrapped in `escapeText`. `__bfSlot` returns raw `<!--bf-slot:N-->`
+ *     markers for live nodes; escaping the whole call corrupts them and
+ *     drops slotted content (the regression that broke `e2e-site-ui`).
+ *     `__bfSlot` escapes its own plain-string path internally instead.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function getClientJs(source: string, filename: string): string {
+  const result = compileJSX(source, filename, { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')
+  expect(clientJs).toBeDefined()
+  return clientJs!.content
+}
+
+describe('text-slot escaping', () => {
+  test('a plain text slot is wrapped in escapeText', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       export function Label({ text }: { text: string }) {
+         return <span>{text}</span>
+       }`,
+      'Label.tsx',
+    )
+    expect(clientJs).toMatch(/<!--bf:\w+-->\$\{escapeText\(_p\.text\)\}<!--\/-->/)
+  })
+
+  test('a branch-slot expression is NOT wrapped in escapeText', () => {
+    const clientJs = getClientJs(
+      `'use client'
+       import { createSignal } from '@barefootjs/client'
+       export function Branch({ show }: { show: boolean }) {
+         const [t] = createSignal('hi')
+         return <div>{show ? <span>{t()}</span> : null}</div>
+       }`,
+      'Branch.tsx',
+    )
+    // The branch value goes through __bfSlot (raw markers preserved)…
+    expect(clientJs).toMatch(/\$\{__bfSlot\(/)
+    // …and must never be double-wrapped by the text escape.
+    expect(clientJs).not.toMatch(/escapeText\(\s*__bfSlot/)
+  })
+})

package/src/adapters/parsed-expr-emitter.ts

@@ -66,6 +66,13 @@ export type ArrayMethod =
   | 'toLowerCase'
   | 'toUpperCase'
   | 'trim'
+  | 'split'
+  | 'startsWith'
+  | 'endsWith'
+  | 'replace'
+  | 'repeat'
+  | 'padStart'
+  | 'padEnd'
 
 /**
  * Method names handled by the dedicated `sortMethod()` dispatcher

package/src/combine-client-js.ts

@@ -8,6 +8,8 @@
  * into the parent's file, eliminating the need for separate HTTP requests.
  */
 
+import ts from 'typescript'
+
 const CHILD_PLACEHOLDER_RE = /import '\/\* @bf-child:(\w+) \*\/'/g
 
 /**
@@ -101,33 +103,75 @@ function parseAndMerge(
   otherImports: string[],
   codeSections: string[]
 ): void {
-  const codeLines: string[] = []
-
-  for (const line of content.split('\n')) {
-    if (line.startsWith('import ')) {
-      if (line.includes('@bf-child:')) continue
-
-      const match = line.match(/^import \{ ([^}]+) \} from ['"]([^'"]+)['"]/)
-      if (match) {
-        const names = match[1].split(',').map(n => n.trim())
-        const source = match[2]
-        if (!importsBySource.has(source)) {
-          importsBySource.set(source, new Set())
-        }
-        for (const name of names) {
-          importsBySource.get(source)!.add(name)
-        }
-      } else {
-        if (!otherImports.includes(line)) {
-          otherImports.push(line)
-        }
+  // Parse the client JS so we only ever treat *real* top-level
+  // `ImportDeclaration` statements as imports. The predecessor matched
+  // raw lines beginning with `import `, which also caught `import …`
+  // lines that merely live *inside a string / template literal value*
+  // (e.g. a data module exporting a code snippet). Tearing such a line
+  // out of its string relocated the component's real runtime import into
+  // the literal and left `hydrate` undefined at call time. See
+  // piconic-ai/barefootjs#1702.
+  // Parent pointers aren't needed here — we only read `statements` and each
+  // import's `getStart`/`getEnd` — so skip building them to keep the per-chunk
+  // parse cheap when combining many files.
+  const sourceFile = ts.createSourceFile(
+    'combine.js',
+    content,
+    ts.ScriptTarget.Latest,
+    /*setParentNodes*/ false,
+    ts.ScriptKind.JS,
+  )
+
+  // Character spans of the top-level imports to strip from the emitted
+  // code, so everything that isn't an import (including literals whose
+  // contents look like imports) is preserved verbatim.
+  const importSpans: Array<[number, number]> = []
+
+  for (const stmt of sourceFile.statements) {
+    if (!ts.isImportDeclaration(stmt)) continue
+    const start = stmt.getStart(sourceFile)
+    const end = stmt.getEnd()
+    importSpans.push([start, end])
+
+    const stmtText = content.slice(start, end)
+    // `@bf-child:` placeholders are resolved by inlining elsewhere; drop
+    // them entirely (neither merged nor kept as code).
+    if (stmtText.includes('@bf-child:')) continue
+
+    const clause = stmt.importClause
+    const bindings = clause?.namedBindings
+    const specifier = ts.isStringLiteral(stmt.moduleSpecifier)
+      ? stmt.moduleSpecifier.text
+      : ''
+    if (clause && !clause.name && bindings && ts.isNamedImports(bindings)) {
+      // Pure named import (`import { a, b as c } from '…'`) — merge by source.
+      if (!importsBySource.has(specifier)) {
+        importsBySource.set(specifier, new Set())
+      }
+      const set = importsBySource.get(specifier)!
+      for (const el of bindings.elements) {
+        const name = el.propertyName
+          ? `${el.propertyName.text} as ${el.name.text}`
+          : el.name.text
+        set.add(name)
       }
     } else {
-      codeLines.push(line)
+      // default / namespace / side-effect import — keep verbatim.
+      if (!otherImports.includes(stmtText)) {
+        otherImports.push(stmtText)
+      }
     }
   }
 
-  const code = codeLines.join('\n').trim()
+  // Reconstruct the code with the import spans removed.
+  let code = ''
+  let cursor = 0
+  for (const [start, end] of importSpans) {
+    code += content.slice(cursor, start)
+    cursor = end
+  }
+  code += content.slice(cursor)
+  code = code.trim()
   if (code) {
     codeSections.push(code)
   }