@barefootjs/xslate 0.18.5 → 0.19.0

package/src/adapter/xslate-adapter.ts

@@ -73,6 +73,12 @@ import {
   isValidHelperId,
   sortComparatorFromArrow,
   isLowerableLoopDestructure,
+  isDangerousInnerHtmlAttr,
+  resolveDangerousInnerHtml,
+  dangerousInnerHtmlMetacharViolation,
+  dangerousInnerHtmlDiagnostic,
+  resolveStaticLoopSource,
+  collectLoopBoundNames,
 } from '@barefootjs/jsx'
 import { isAriaBooleanAttr, isBooleanResultExpr } from './boolean-result.ts'
 import ts from 'typescript'
@@ -87,6 +93,7 @@ import {
   collectRootScopeNodes,
 } from './lib/ir-scope.ts'
 import { renderSortMethod, renderSortEval } from './expr/array-method.ts'
+import { staticValueToKolon } from './lib/static-value.ts'
 import { XslateFilterEmitter, XslateTopLevelEmitter } from './expr/emitters.ts'
 import type { XslateEmitContext, XslateSpreadContext, XslateMemoContext } from './emit-context.ts'
 import {
@@ -240,6 +247,17 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
    */
   private localConstants: IRMetadata['localConstants'] = []
 
+  /**
+   * Every name a `.map()`/`.filter()` loop callback binds as its item/index
+   * parameter anywhere in the component (#2208 fable review). A static
+   * loop-SOURCE name (e.g. a function-scope `const items = [...]`) must
+   * never resolve through `resolveStaticLoopSource` at a use site where a
+   * DIFFERENT, enclosing loop's own callback param shadows it — same
+   * shadowing hazard, and same coarse-but-safe mitigation, as #2212's
+   * `collectLoopBoundNames` use in `collectStringValueNames`.
+   */
+  private staticLoopSourceBoundNames: Set<string> = new Set()
+
   /**
    * Optional, no-default props that are `undef` when the caller omits them.
    * Their bare-reference attribute emission is guarded with Kolon `defined` so
@@ -272,6 +290,7 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
     // Per-compile prop classifications (see `props/prop-classes.ts`).
     this.booleanTypedProps = collectBooleanTypedProps(ir)
     this.localConstants = ir.metadata.localConstants ?? []
+    this.staticLoopSourceBoundNames = collectLoopBoundNames(ir)
     this.nullableOptionalProps = collectNullableOptionalProps(ir)
     this.stringValueNames = collectStringValueNames(ir)
     this.moduleStringConsts = collectModuleStringConsts(ir.metadata.localConstants)
@@ -494,7 +513,8 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
   renderElement(element: IRElement): string {
     const tag = element.tag
     const attrs = this.renderAttributes(element)
-    const children = this.renderChildren(element.children)
+    const dangerousHtml = this.renderDangerousInnerHtml(element)
+    const children = dangerousHtml !== null ? dangerousHtml : this.renderChildren(element.children)
 
     let hydrationAttrs = ''
     if (element.needsScope) {
@@ -529,6 +549,28 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
     return `<${tag}${attrs}${hydrationAttrs}>${children}</${tag}>`
   }
 
+  /**
+   * `dangerouslySetInnerHTML={{ __html: '...' }}` (#2207) — see the Blade
+   * adapter's identical helper for the full rationale. `null` means the
+   * attribute is absent (caller falls through to normal `renderChildren`);
+   * a non-`null` string (possibly `''`) replaces the children outright.
+   */
+  private renderDangerousInnerHtml(element: IRElement): string | null {
+    const resolution = resolveDangerousInnerHtml(element)
+    if (!resolution) return null
+    if (resolution.kind === 'dynamic') {
+      this.errors.push(dangerousInnerHtmlDiagnostic(resolution.expr, resolution.loc))
+      return ''
+    }
+    const violation = dangerousInnerHtmlMetacharViolation(resolution.html, this.name)
+    if (violation) {
+      const attr = element.attrs.find(isDangerousInnerHtmlAttr)!
+      this.errors.push(dangerousInnerHtmlDiagnostic(`{ __html: ${JSON.stringify(resolution.html)} }`, attr.loc, violation))
+      return ''
+    }
+    return resolution.html
+  }
+
   // ===========================================================================
   // Expression Rendering
   // ===========================================================================
@@ -541,7 +583,12 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
       return ''
     }
 
-    const perlExpr = this.convertExpressionToKolon(expr.expr)
+    // Thread the IR-carried `.parsed` tree through (mirrors go-template's
+    // `convertExpressionToGo(expr.expr, classify, expr.parsed)`) so a
+    // resolved bare-identifier `.map`/`.filter`/… callback
+    // (`resolveCallbackMethodFunctionReferences`, #2206) isn't lost to a
+    // fresh, unresolved re-parse of the raw string.
+    const perlExpr = this.convertExpressionToKolon(expr.expr, expr.parsed)
 
     if (expr.slotId) {
       return `<: $bf.text_start("${expr.slotId}") | mark_raw :><: ${perlExpr} :><: $bf.text_end() | mark_raw :>`
@@ -687,8 +734,27 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
     // this adapter's test corpus only because the widened destructure gate
     // (#2087 Phase A/B) no longer refuses this fixture's `([emoji, users])
     // => ...` param first.
+    // #2208: a loop source that is a fully-static array literal — either
+    // inline (`[{ label: 'Alpha' }, ...].map(...)`) or a bare identifier
+    // bound to a FUNCTION-scope local const whose initializer has no
+    // prop/signal/function-call dependency — inlines as a native Kolon
+    // array/hash literal below, the same way a module-scope const's value
+    // is already seeded. A runtime-computed local (#2069, e.g.
+    // `Object.entries(props.tags).filter(...)`) still refuses below.
+    // `isNameShadowed` guards a DIFFERENT, enclosing loop's own callback
+    // param shadowing this identifier (fable review) — never resolve the
+    // static const in that case. `rawArray` then falls through to the
+    // bare identifier expression below, same as before #2208 — which
+    // still trips the pre-existing BF101 gate for an unresolvable local
+    // const reference (a loud, conservative refusal, not a silent wrong
+    // value).
+    const staticItems = resolveStaticLoopSource(loop.arrayParsed, this.localConstants, {
+      isNameShadowed: name => this.staticLoopSourceBoundNames.has(name),
+    })
+    const staticArray = staticItems !== null ? staticValueToKolon(staticItems) : null
+
     const arrayName = loop.array.trim()
-    if (/^[A-Za-z_$][\w$]*$/.test(arrayName)) {
+    if (staticArray === null && /^[A-Za-z_$][\w$]*$/.test(arrayName)) {
       const arrayConst = (this.localConstants ?? []).find(c => c.name === arrayName)
       if (arrayConst && !arrayConst.isModule && this._resolveLiteralConst(arrayName) === null) {
         this.errors.push({
@@ -704,7 +770,7 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
       }
     }
 
-    const rawArray = this.convertExpressionToKolon(loop.array)
+    const rawArray = staticArray ?? this.convertExpressionToKolon(loop.array)
     // Apply sort if present: wrap the loop array in the shared `$bf.sort`
     // helper, binding the sorted result to a per-iteration local so the
     // helper runs once.
@@ -1344,6 +1410,12 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
       // the unsupported-expression lowering is never reached for a deferred
       // predicate (no BF101 / BF102). #1966
       if (attr.clientOnly) continue
+      // `dangerouslySetInnerHTML` never renders as an HTML attribute — it's
+      // handled by `renderDangerousInnerHtml` instead, which replaces the
+      // element's children. Skip it here so its `{ __html: ... }` object
+      // literal never reaches the generic object-literal BF101 refusal
+      // (which would double-report alongside the purpose-built one).
+      if (isDangerousInnerHtmlAttr(attr)) continue
       // Rewrite JSX special-prop names to their HTML-attribute counterparts.
       let attrName: string
       if (attr.name === 'className') attrName = 'class'
@@ -1672,8 +1744,19 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
    * single-quoted string literal (`const totalPages = 5`, #1897
    * pagination) — function-scope consts never reach the per-render
    * stash, so a bare `$totalPages` renders empty.
+   *
+   * The lookup is a flat name match with no notion of AST scope, so a
+   * name that any loop callback binds as its item/index param never
+   * inlines (#2221) — the occurrence may be the loop's own (shadowing)
+   * binding, and substituting the outer const's value there renders every
+   * iteration with the same hard-coded literal. Coarse (a genuinely
+   * non-shadowed same-named const elsewhere in the component also stops
+   * inlining, falling back to the bare identifier) but safe — the same
+   * trade-off as #2212's `collectLoopBoundNames` use in
+   * `collectStringValueNames`.
    */
   private _resolveLiteralConst(name: string): string | null {
+    if (this.staticLoopSourceBoundNames.has(name)) return null
     const c = (this.localConstants ?? []).find(lc => lc.name === name)
     if (c?.value === undefined) return null
     const v = c.value.trim()
@@ -1683,7 +1766,22 @@ export class XslateAdapter extends BaseAdapter implements IRNodeEmitter<XslateRe
     return null
   }
 
+  /**
+   * Resolve `IDENT.key` where `IDENT` is a module-scope object-literal const
+   * (`variantClasses.ghost`, #1896/#1897) to the looked-up scalar.
+   *
+   * The lookup is a flat name match on `objectName` with no notion of AST
+   * scope, so an enclosing loop callback's own param of the same name
+   * (`.map((cfg) => <li>{cfg.x}</li>)` shadowing a module `const cfg = {…}`)
+   * still resolved to the OUTER const's member value at every iteration
+   * (#2237) — the sibling hazard to #2221's `_resolveLiteralConst`. Same
+   * coarse-but-safe `staticLoopSourceBoundNames` guard: any name a loop
+   * binds anywhere in the component never inlines, falling back to the bare
+   * `$cfg.x` member expression (which an Xslate `: for` loop binds
+   * correctly at the shadowed occurrences).
+   */
   private _resolveStaticRecordLiteral(objectName: string, key: string): string | null {
+    if (this.staticLoopSourceBoundNames.has(objectName)) return null
     const hit = lookupStaticRecordLiteral(objectName, key, this.localConstants)
     if (!hit) return null
     return hit.kind === 'number'

package/src/conformance-pins.ts

@@ -9,17 +9,17 @@
 import type { ConformancePins } from '@barefootjs/jsx'
 
 export const conformancePins: ConformancePins = {
-  // Sibling-imported child component in a loop body: emits a
-  // cross-template call needing separate registration. BF103 makes
-  // the requirement loud (same as mojo).
-  'static-array-children': [{ code: 'BF103', severity: 'error' }],
-  // TodoApp / TodoAppSSR import `TodoItem` from a sibling file and
-  // call it inside a keyed `.map`. With the standalone-filter fix in
-  // place these reach the SAME BF103 (imported child in `.map`) as
-  // mojo — NOT BF101 — confirming the `.filter(...)` chain itself now
-  // lowers and the only remaining gate is the imported-child one.
-  'todo-app': [{ code: 'BF103', severity: 'error' }],
-  'todo-app-ssr': [{ code: 'BF103', severity: 'error' }],
+  // `todo-app` / `todo-app-ssr` no longer pinned (#2205) — the conformance
+  // harness now passes `siblingTemplatesRegistered: true` for fixtures with
+  // sibling `components`, matching `bf build`'s real semantics, so the
+  // BF103 loop-body cross-template check no longer fires spuriously. (Both
+  // fixtures are still skipped on this adapter via `render-divergences.ts`
+  // — #2209 — for an unrelated signal-seeding gap.)
+  // `static-array-children` no longer pinned (#2208) — `items`'s
+  // array-literal initializer is now recognized as fully-static
+  // (`resolveStaticLoopSource`) and inlined as a native Kolon array/hash
+  // literal in the `for EXPR -> $item` header, the same way a module-scope
+  // const's value is already seeded.
   // `([emoji, users]) => ...` / `([id, t]) => ...` are plain array-index
   // (tuple) destructures, no rest — #2087 Phase B's `segments`-walking
   // accessor lowers both to `$__bf_item[0]` / `$__bf_item[1]` `: my` locals
@@ -32,12 +32,11 @@ export const conformancePins: ConformancePins = {
   // simply unreachable before because BF104 refused the destructure shape
   // first.
   'static-array-from-props': [{ code: 'BF101', severity: 'error' }],
-  // Both BF103 (sibling-imported `<Tag>` child component) and the BF101
-  // above fire; BF104 no longer does (see above).
-  'static-array-from-props-with-component': [
-    { code: 'BF103', severity: 'error' },
-    { code: 'BF101', severity: 'error' },
-  ],
+  // The BF101 above fires; BF104 no longer does (see above), and BF103
+  // (sibling-imported `<Tag>` child component in the loop body) no longer
+  // does either now that the conformance harness passes
+  // `siblingTemplatesRegistered: true` (#2205).
+  'static-array-from-props-with-component': [{ code: 'BF101', severity: 'error' }],
   // #1310 / #2087: rest destructure in .map() callback. All four shapes now
   // lower via #2087 Phase B's `segments`-walking accessor:
   //   - object-rest read via member access (`rest-destructure-object-in-map`):
@@ -104,15 +103,14 @@ export const conformancePins: ConformancePins = {
   // `find_last_index` via the same Kolon-lambda mechanism as `.filter` /
   // `.every` / `.some`, so they render. Only the NESTED-in-a-predicate form
   // above is refused (#2038).
-  // #2073 follow-up: a function-reference `.map(format)` callback has no
-  // arrow body to serialize — not a CALLBACK_METHODS shape — so the
-  // UNSUPPORTED_METHODS gate refuses it with BF101 rather than emitting
-  // a broken template.
-  'array-map-function-reference': [{ code: 'BF101', severity: 'error' }],
-  // Edge-case sweep (Priority 12): `dangerouslySetInnerHTML` requires a
-  // deliberate raw-HTML (unescaped) output affordance in the target
-  // template language. No lowering exists yet, so the compiler refuses
-  // the shape loudly instead of emitting entity-escaped markup that
-  // silently renders tags as text.
-  'dangerous-inner-html': [{ code: 'BF101', severity: 'error' }],
+  // `array-map-function-reference` no longer pinned — a bare-identifier
+  // `.map(format)` callback now resolves one hop to its declaration
+  // (`resolveCallbackMethodFunctionReferences`, #2206), the same mechanism
+  // #2090 established for `.sort(fnref)`.
+  // `dangerous-inner-html` no longer pinned — a compile-time string-literal
+  // `dangerouslySetInnerHTML={{ __html: '...' }}` is spliced directly into
+  // the template as trusted raw text (`resolveDangerousInnerHtml`, #2207).
+  // A dynamic/signal-derived value still refuses with BF101 — see the
+  // `dangerous-inner-html-dynamic` fixture/pin below (tracked: #2215).
+  'dangerous-inner-html-dynamic': [{ code: 'BF101', severity: 'error', issue: 'https://github.com/piconic-ai/barefootjs/issues/2215' }],
 }

package/src/render-divergences.ts

@@ -14,4 +14,9 @@
 
 import type { RenderDivergences } from '@barefootjs/jsx'
 
-export const renderDivergences: RenderDivergences = {}
+export const renderDivergences: RenderDivergences = {
+  // `todo-app` / `todo-app-ssr` no longer diverge (#2209) — the shared
+  // `evaluateSignalInit` (`@barefootjs/jsx`, sandboxed real-JS evaluation
+  // instead of a fixed regex-shape catalogue) now correctly seeds `todos`
+  // from `(props.initialTodos ?? []).map(t => ({ ...t, editing: false }))`.
+}

package/src/test-render.ts

@@ -17,7 +17,7 @@
  * than the Mojo harness's literal `test_<sN>`.
  */
 
-import { compileJSX, extractSsrDefaults, importsSearchParams } from '@barefootjs/jsx'
+import { compileJSX, extractSsrDefaults, importsSearchParams, evaluateSignalInit, tryEvaluateSignalInit } from '@barefootjs/jsx'
 import type { ComponentIR } from '@barefootjs/jsx'
 import { mkdir, rm } from 'node:fs/promises'
 import { resolve } from 'node:path'
@@ -135,8 +135,15 @@ export async function renderXslateComponent(options: RenderOptions): Promise<str
     }
   }
 
-  // Compile parent source.
-  const result = compileJSX(source, 'component.tsx', { adapter, outputIR: true })
+  // Compile parent source. `siblingTemplatesRegistered: Boolean(components)`
+  // matches this harness's real behavior — every sibling child template is registered
+  // alongside the parent before rendering, so a loop-body cross-template
+  // call resolves at render time (#2205).
+  const result = compileJSX(source, 'component.tsx', {
+    adapter,
+    outputIR: true,
+    siblingTemplatesRegistered: Boolean(components),
+  })
 
   const errors = result.errors.filter(e => e.severity === 'error')
   if (errors.length > 0) {
@@ -467,9 +474,9 @@ function buildPerlProps(
   for (const param of ir.metadata.propsParams) {
     if (props && param.name in props) continue
     if (param.defaultValue) {
-      const perlValue = jsToPerlValue(param.defaultValue)
-      if (perlValue !== null) {
-        entries.push(`${param.name} => ${perlValue}`)
+      const result = tryEvaluateSignalInit(param.defaultValue.trim(), props)
+      if (result.ok) {
+        entries.push(`${param.name} => ${toPerlLiteral(result.value)}`)
         continue
       }
     }
@@ -547,119 +554,6 @@ function buildPerlProps(
   return `{${entries.join(', ')}}`
 }
 
-/**
- * Evaluate a signal initializer expression using provided props.
- * Handles: props.initial ?? 0, props.value, literal values.
- */
-export function evaluateSignalInit(
-  expr: string,
-  props?: Record<string, unknown>,
-): unknown {
-  const nullishMatch = expr.match(/^props\.(\w+)\s*\?\?\s*(.+)$/)
-  if (nullishMatch) {
-    const propName = nullishMatch[1]
-    const defaultExpr = nullishMatch[2].trim()
-    if (props && propName in props) return props[propName]
-    return parseLiteral(defaultExpr)
-  }
-
-  const propsMatch = expr.match(/^props\.(\w+)$/)
-  if (propsMatch) {
-    if (props && propsMatch[1] in props) return props[propsMatch[1]]
-    return null
-  }
-
-  return parseLiteral(expr)
-}
-
-function parseLiteral(expr: string): unknown {
-  if (/^-?\d+(\.\d+)?$/.test(expr)) return Number(expr)
-  if (expr === 'true') return true
-  if (expr === 'false') return false
-  if (expr === '[]') return []
-
-  {
-    const t = expr.trim()
-    if (t.startsWith('[') && t.endsWith(']')) {
-      const inner = t.slice(1, -1).trim()
-      if (!inner) return []
-      const out: unknown[] = []
-      for (const seg of splitTopLevelCommas(inner)) {
-        if (!seg.trim()) continue
-        const parsed = parseLiteral(seg.trim())
-        if (parsed === null && seg.trim() !== 'null') return null
-        out.push(parsed)
-      }
-      return out
-    }
-  }
-
-  const stringMatch = expr.match(/^(['"])(.*)\1$/s)
-  if (stringMatch) return unescapeJsString(stringMatch[2])
-
-  const trimmed = expr.trim()
-  if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
-    const inner = trimmed.slice(1, -1).trim()
-    if (!inner) return {}
-    const obj: Record<string, unknown> = {}
-    for (const pair of splitTopLevelCommas(inner)) {
-      if (!pair.trim()) continue
-      const colonIdx = pair.indexOf(':')
-      if (colonIdx < 0) return null
-      let key = pair.slice(0, colonIdx).trim()
-      const val = pair.slice(colonIdx + 1).trim()
-      const keyMatch = key.match(/^(['"])(.*)\1$/s)
-      if (keyMatch) key = unescapeJsString(keyMatch[2])
-      const parsedVal = parseLiteral(val)
-      if (parsedVal === null && val !== 'null') return null
-      obj[key] = parsedVal
-    }
-    return obj
-  }
-  return null
-}
-
-function splitTopLevelCommas(inner: string): string[] {
-  const segments: string[] = []
-  let depth = 0
-  let start = 0
-  let quote: string | null = null
-  for (let i = 0; i < inner.length; i++) {
-    const c = inner[i]
-    if (quote) {
-      if (c === quote) {
-        let backslashes = 0
-        for (let j = i - 1; j >= 0 && inner[j] === '\\'; j--) backslashes++
-        if (backslashes % 2 === 0) quote = null
-      }
-      continue
-    }
-    if (c === '"' || c === "'") {
-      quote = c
-      continue
-    }
-    if (c === '{' || c === '[') depth++
-    else if (c === '}' || c === ']') depth--
-    else if (c === ',' && depth === 0) {
-      segments.push(inner.slice(start, i))
-      start = i + 1
-    }
-  }
-  segments.push(inner.slice(start))
-  return segments
-}
-
-function unescapeJsString(s: string): string {
-  return s.replace(/\\(.)/g, (_, c) => {
-    switch (c) {
-      case 'n': return '\n'
-      case 'r': return '\r'
-      case 't': return '\t'
-      case '0': return '\0'
-      default: return c
-    }
-  })
-}
 
 /** Perl single-quoted string escape: `'` AND `\` need escaping. */
 function perlSingleQuote(s: string): string {
@@ -685,23 +579,3 @@ function toPerlLiteral(value: unknown): string {
   return 'undef'
 }
 
-/**
- * Convert a JS literal value to a Perl literal.
- * Handles: numbers, strings, booleans, empty arrays, props.xxx ?? default.
- */
-function jsToPerlValue(jsValue: string): string | null {
-  const v = jsValue.trim()
-
-  if (/^-?\d+(\.\d+)?$/.test(v)) return v
-  if (/^['"].*['"]$/.test(v)) return v
-  if (v === 'true') return '1'
-  if (v === 'false') return '0'
-  if (v === '[]') return '[]'
-
-  const nullishMatch = v.match(/\?\?\s*(.+)$/)
-  if (nullishMatch) return jsToPerlValue(nullishMatch[1])
-
-  if (v.startsWith('props.')) return 'undef'
-
-  return null
-}