@barefootjs/mojolicious 0.6.0 → 0.7.0

package/lib/Mojolicious/Plugin/BarefootJS.pm

@@ -1,4 +1,5 @@
 package Mojolicious::Plugin::BarefootJS;
+our $VERSION = "0.01";
 use Mojo::Base 'Mojolicious::Plugin', -signatures;
 
 use Mojo::File qw(path);
@@ -102,3 +103,58 @@ sub _load_manifest ($app, $config) {
 }
 
 1;
+__END__
+
+=encoding utf8
+
+=head1 NAME
+
+Mojolicious::Plugin::BarefootJS - Mojolicious integration for BarefootJS
+
+=head1 SYNOPSIS
+
+    # Mojolicious application
+    $self->plugin('BarefootJS');
+
+    # In a controller / template, the `bf` helper exposes a per-request
+    # BarefootJS runtime backed by BarefootJS::Backend::Mojo.
+
+=head1 DESCRIPTION
+
+Wires the L<BarefootJS> server runtime into L<Mojolicious>. It registers a
+C<bf> controller helper that lazily instantiates one BarefootJS object per
+request (rendering via L<BarefootJS::Backend::Mojo>), and supports rendering
+compiled marked templates as Mojolicious templates.
+
+For non-Mojolicious / PSGI hosts, see L<BarefootJS::Backend::Xslate>, which
+drives the same runtime with Text::Xslate and no web framework.
+
+=head1 METHODS
+
+L<Mojolicious::Plugin::BarefootJS> inherits all methods from
+L<Mojolicious::Plugin> and implements the following new one.
+
+=head2 register
+
+    $plugin->register(Mojolicious->new, \%conf);
+
+Registers the plugin (the C<bf> helper and supporting hooks) in a Mojolicious
+application.
+
+=head1 SEE ALSO
+
+L<BarefootJS>, L<BarefootJS::Backend::Mojo>, L<BarefootJS::Backend::Xslate>,
+L<Mojolicious>, L<https://github.com/piconic-ai/barefootjs>
+
+=head1 AUTHOR
+
+kobaken E<lt>kentafly88@gmail.comE<gt>
+
+=head1 LICENSE
+
+Copyright (c) 2025-present BarefootJS Contributors.
+
+This library is free software; you can redistribute it and/or modify it under
+the MIT License. See the F<LICENSE> file in the distribution for the full text.
+
+=cut

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/mojolicious",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Mojolicious EP template adapter for BarefootJS - generates .html.ep files from IR",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,7 +29,7 @@
   ],
   "scripts": {
     "build": "bun run build:js && bun run build:types",
-    "build:js": "bun build ./src/index.ts ./src/adapter/index.ts ./src/build.ts --root ./src --outdir ./dist --format esm --external @barefootjs/jsx --external @barefootjs/shared",
+    "build:js": "bun build ./src/index.ts ./src/adapter/index.ts ./src/build.ts --root ./src --outdir ./dist --format esm --external @barefootjs/jsx --external @barefootjs/shared --external typescript",
     "build:types": "tsgo --emitDeclarationOnly --outDir ./dist",
     "test": "bun test",
     "clean": "rm -rf dist",
@@ -52,14 +52,15 @@
     "directory": "packages/adapter-mojolicious"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.6.0"
+    "@barefootjs/perl": "0.7.0",
+    "@barefootjs/shared": "0.7.0"
   },
   "peerDependencies": {
-    "@barefootjs/jsx": ">=0.2.0"
+    "@barefootjs/jsx": ">=0.2.0",
+    "typescript": "^5.0.0"
   },
   "devDependencies": {
     "@barefootjs/adapter-tests": "0.1.0",
-    "@barefootjs/jsx": "0.6.0",
-    "typescript": "^5.0.0"
+    "@barefootjs/jsx": "0.7.0"
   }
 }

package/src/__tests__/mojo-adapter.test.ts

@@ -69,16 +69,17 @@ runAdapterConformanceTests({
     'toggle-shared',
     'reactive-props',
     'props-reactivity-comparison',
-    // #1467 Phase 2a: first `site/ui` source-root fixture. Button
-    // compiles cleanly on the Mojo adapter (no diagnostic), but its
-    // variant/size class composition (`Record<…>[key]` indexed object
-    // literals) and `applyRestAttrs` spread haven't been validated for
-    // byte-parity against the Hono reference under Mojo's template
-    // semantics. Cross-adapter parity for the `site/ui` corpus is
-    // explicitly Phase 3 ("cross-adapter parity (Mojo/Go templates)"),
-    // so Button participates only in Hono SSR conformance + the
-    // fixture-hydrate runtime layer for now.
-    'button',
+    // #1467 Phase 2b: basic interactive `site/ui` primitives. Cross-adapter
+    // parity for the `site/ui` corpus is Phase 3, so these participate only
+    // in Hono SSR conformance + the fixture-hydrate runtime layer for now.
+    // (`label` and `kbd` are static helpers; `toggle` / `switch` /
+    // `checkbox` carry uncontrolled state; `input` / `textarea` are
+    // pass-through native controls.)
+    'toggle',
+    'switch',
+    'checkbox',
+    'textarea',
+    'kbd',
   ],
   // Per-fixture build-time contracts for shapes the Mojo adapter
   // intentionally refuses to lower. Owned by this adapter test file
@@ -256,6 +257,42 @@ export function Hello() {
     expect(adapter.extension).toBe('.html.ep')
   })
 
+  test('module pure-string const referenced in className inlines the literal (#1467 Phase 2b)', () => {
+    // A module-scope `const X = 'literal'` used inside a className template
+    // literal must inline its value, NOT emit `$X` against a stash variable
+    // that is never bound (the value would render empty). Hono inlines it at
+    // runtime; this restores byte-parity.
+    const result = compileAndGenerate(`
+"use client"
+const labelClasses = 'flex items-center group-data-[disabled=true]:opacity-50'
+export function Label({ className = '' }: { className?: string }) {
+  return <label className={\`\${labelClasses} \${className}\`} />
+}
+`)
+    // Inlined as a Perl single-quoted literal, escaped tokens intact.
+    expect(result.template).toContain(
+      "'flex items-center group-data-[disabled=true]:opacity-50'",
+    )
+    // No stash-variable reference to the const.
+    expect(result.template).not.toContain('$labelClasses')
+  })
+
+  test('module pure-string const is NOT inlined when shadowed by a loop variable (#1749 review)', () => {
+    // A loop param whose name matches a module const must keep its loop
+    // binding (`$label`) inside the body — the const literal must not leak
+    // in. `renderLoop` guards module-const inlining for the loop body.
+    const result = compileAndGenerate(`
+"use client"
+const label = 'MODULE_CONST'
+export function List({ items }: { items: string[] }) {
+  return <ul>{items.map(label => <li>{label}</li>)}</ul>
+}
+`)
+    // Inside the loop the param wins — emit the loop variable, not the const.
+    expect(result.template).toContain('$label')
+    expect(result.template).not.toContain('MODULE_CONST')
+  })
+
   test('generates conditional with Perl if/else', () => {
     const result = compileAndGenerate(`
 "use client"
@@ -395,9 +432,16 @@ export function C() {
     // The nested-higher-order-in-filter-predicate shape also lowers
     // now (#1443 PR4) — moved to a positive-output test below.
     const cases: { name: string; body: string; needle: string }[] = [
-      { name: 'reduce',            body: `<div>{items().reduce((s, x) => s + x, 0)}</div>`,                                                          needle: '.reduce(' },
+      // The arithmetic-fold `.reduce(fn, init)` catalogue now lowers
+      // (positive-output tests below + the reduce-* conformance
+      // fixtures); the no-init form stays refused — JS throws on an
+      // empty array there, which a template can't mirror.
+      { name: 'reduce (no init)',  body: `<div>{items().reduce((s, x) => s + x)}</div>`,                                                             needle: '.reduce(' },
       { name: 'forEach',           body: `<ul>{items().forEach(x => x)}</ul>`,                                                                       needle: '.forEach(' },
-      { name: 'flatMap',           body: `<ul>{items().flatMap(x => x.tags).map(t => <li key={t}>{t}</li>)}</ul>`,                                  needle: '.flatMap(' },
+      // Self / field / field-tuple `.flatMap` now lowers (#1448 Tier C) —
+      // even as a loop base — so those moved to positive tests below. A
+      // tuple with a non-leaf element (a string literal) stays refused.
+      { name: 'flatMap (literal element)', body: `<div>{items().flatMap(x => [x.tag, "x"])}</div>`,                                                needle: '.flatMap(' },
     ]
 
     for (const { name, body, needle } of cases) {
@@ -960,6 +1004,12 @@ import { fixture as arrayToSortedFixture } from '../../../adapter-tests/fixtures
 import { fixture as arrayEntriesFixture } from '../../../adapter-tests/fixtures/methods/array-entries'
 import { fixture as arrayKeysFixture } from '../../../adapter-tests/fixtures/methods/array-keys'
 import { fixture as arrayValuesFixture } from '../../../adapter-tests/fixtures/methods/array-values'
+// #1448 Tier C — .reduce(fn, init) arithmetic-fold catalogue.
+import { fixture as reduceSumFieldFixture } from '../../../adapter-tests/fixtures/methods/reduce-sum-field'
+import { fixture as reduceSumSelfFixture } from '../../../adapter-tests/fixtures/methods/reduce-sum-self'
+import { fixture as reduceConcatFixture } from '../../../adapter-tests/fixtures/methods/reduce-concat'
+import { fixture as reduceProductFixture } from '../../../adapter-tests/fixtures/methods/reduce-product'
+import { fixture as reduceRightConcatFixture } from '../../../adapter-tests/fixtures/methods/reduce-right-concat'
 
 describe('MojoAdapter - #1448 Tier A/B fixture-driven lowering pins', () => {
   const cases = [
@@ -1020,6 +1070,17 @@ describe('MojoAdapter - #1448 Tier A/B fixture-driven lowering pins', () => {
     { fixture: arrayKeysFixture,          expect: '% for my $k (0..$#{$items})' },
     // .values() → standard for loop (same as plain .map())
     { fixture: arrayValuesFixture,        expect: '% my $v = $items->[$_i];' },
+    // #1448 Tier C — .reduce(fn, init) arithmetic fold. The structured
+    // ReduceOp lowers to a single `bf->reduce(...)` call with op /
+    // key / type / init / direction in the options hash. Each shape
+    // exercises one arm: field-numeric sum, self-numeric sum,
+    // string-concat fold, the product (`*`) operator, and the
+    // right-to-left `direction` of reduceRight.
+    { fixture: reduceSumFieldFixture,     expect: `bf->reduce($items, { op => '+', key_kind => 'field', key => 'duration', type => 'numeric', init => 0, direction => 'left' })` },
+    { fixture: reduceSumSelfFixture,      expect: `bf->reduce($nums, { op => '+', key_kind => 'self', type => 'numeric', init => 0, direction => 'left' })` },
+    { fixture: reduceConcatFixture,       expect: `bf->reduce($items, { op => '+', key_kind => 'field', key => 'label', type => 'string', init => '', direction => 'left' })` },
+    { fixture: reduceProductFixture,      expect: `bf->reduce($items, { op => '*', key_kind => 'field', key => 'qty', type => 'numeric', init => 1, direction => 'left' })` },
+    { fixture: reduceRightConcatFixture,  expect: `bf->reduce($items, { op => '+', key_kind => 'field', key => 'label', type => 'string', init => '', direction => 'right' })` },
   ]
 
   for (const { fixture, expect: expectedHelper } of cases) {
@@ -1041,6 +1102,73 @@ describe('MojoAdapter - #1448 Tier A/B fixture-driven lowering pins', () => {
   }
 })
 
+describe('MojoAdapter - #1448 Tier C .flat(depth?)', () => {
+  function emitFlat(expr: string): string {
+    const a = new MojoAdapter()
+    const ir = compileToIR(`
+function C({ rows }: { rows: number[][] }) {
+  return <div>{${expr}}</div>
+}
+export { C }
+`, a)
+    return a.generate(ir).template ?? ''
+  }
+
+  test('.flat() emits bf->flat with default depth 1', () => {
+    expect(emitFlat('rows.flat()')).toContain('bf->flat($rows, 1)')
+  })
+
+  test('.flat(2) emits the explicit depth', () => {
+    expect(emitFlat('rows.flat(2)')).toContain('bf->flat($rows, 2)')
+  })
+
+  test('.flat(Infinity) emits the -1 full-depth sentinel', () => {
+    expect(emitFlat('rows.flat(Infinity)')).toContain('bf->flat($rows, -1)')
+  })
+})
+
+describe('MojoAdapter - #1448 Tier C .flatMap(field projection)', () => {
+  function emitFlatMap(expr: string): string {
+    const a = new MojoAdapter()
+    const ir = compileToIR(`
+function C({ rows }: { rows: { a: string; b: string; tags: string[] }[] }) {
+  return <div>{${expr}}</div>
+}
+export { C }
+`, a)
+    return a.generate(ir).template ?? ''
+  }
+
+  test('.flatMap(i => i.field) emits bf->flat_map with the raw field key', () => {
+    expect(emitFlatMap('rows.flatMap(i => i.tags).join(" ")')).toContain(`bf->flat_map($rows, 'field', 'tags')`)
+  })
+
+  test('.flatMap(i => i) emits the self projection', () => {
+    expect(emitFlatMap('rows.flatMap(i => i).join(" ")')).toContain(`bf->flat_map($rows, 'self', '')`)
+  })
+
+  test('.flatMap(i => [i.a, i.b]) emits bf->flat_map_tuple with leaf specs', () => {
+    expect(emitFlatMap('rows.flatMap(i => [i.a, i.b]).join(" ")')).toContain(`bf->flat_map_tuple($rows, ['field', 'a'], ['field', 'b'])`)
+  })
+
+  test('tuple self + field leaves', () => {
+    expect(emitFlatMap('rows.flatMap(i => [i, i.a]).join(" ")')).toContain(`bf->flat_map_tuple($rows, ['self', ''], ['field', 'a'])`)
+  })
+
+  test('field-projection flatMap as a loop base lowers (no BF101)', () => {
+    const a = new MojoAdapter()
+    const ir = compileToIR(`'use client'
+import { createSignal } from '@barefootjs/client'
+export function C() {
+  const [items] = createSignal<{ tags: string[] }[]>([])
+  return <ul>{items().flatMap(x => x.tags).map(t => <li key={t}>{t}</li>)}</ul>
+}`, a)
+    const template = a.generate(ir).template ?? ''
+    expect((a.errors ?? []).filter(e => e.code === 'BF101')).toEqual([])
+    expect(template).toContain(`bf->flat_map($items, 'field', 'tags')`)
+  })
+})
+
 // =============================================================================
 // #1448 — `/* @client */` escape hatch for STILL-UNSUPPORTED methods
 // =============================================================================
@@ -1099,10 +1227,14 @@ export function C() {
   // Perl fragment that must NOT survive into the template (the pre-fix
   // silent-footgun output for the string rows).
   const unsupported: Array<{ name: string; expr: string; badEmit: string }> = [
-    // Tier C array methods.
-    { name: 'reduce', expr: `items().reduce((a, b) => a + b.n, 0)`, badEmit: '->{reduce}' },
-    { name: 'flatMap', expr: `items().flatMap(i => i.tags)`, badEmit: '->{flatMap}' },
-    { name: 'flat', expr: `items().flat()`, badEmit: '->{flat}' },
+    // Tier C array methods. The arithmetic-fold `.reduce(fn, init)`
+    // catalogue now lowers (pinned in the positive reduce-* fixtures);
+    // the no-initial-value form stays refused — JS throws on an empty
+    // array there, which a template can't mirror.
+    { name: 'reduce (no init)', expr: `items().reduce((a, b) => a + b.n)`, badEmit: '->{reduce}' },
+    // Self / field / field-tuple `.flatMap` now lowers (#1448 Tier C); a
+    // tuple with a non-leaf element (here a string literal) stays refused.
+    { name: 'flatMap (literal element)', expr: `items().flatMap(i => [i.name, "x"])`, badEmit: '->{flatMap}' },
     // Lowered methods whose MEANINGFUL extra argument isn't lowered yet
     // (#1448): the `fromIndex` of `.includes`/`.indexOf`/`.lastIndexOf`
     // and the variadic `.concat`. The parser refuses these (silently

package/src/adapter/mojo-adapter.ts

@@ -4,8 +4,10 @@
  * Generates Mojolicious EP template files (.html.ep) from BarefootJS IR.
  */
 
+import ts from 'typescript'
 import type {
   ComponentIR,
+  IRMetadata,
   IRNode,
   IRElement,
   IRText,
@@ -56,7 +58,7 @@ import { isAriaBooleanAttr, isBooleanResultExpr } from './boolean-result'
  * the `IRNodeEmitter` interface.
  */
 type MojoRenderCtx = Record<string, never>
-import type { ParsedExpr, ParsedStatement, SortComparator, TemplatePart } from '@barefootjs/jsx'
+import type { ParsedExpr, ParsedStatement, SortComparator, ReduceOp, FlatDepth, FlatMapOp, TemplatePart } from '@barefootjs/jsx'
 import { BF_SLOT, BF_COND } from '@barefootjs/shared'
 
 interface PrimitiveSpec {
@@ -117,6 +119,32 @@ export interface MojoAdapterOptions {
   barefootJsPath?: string
 }
 
+/**
+ * Parse a const initializer's source text. Returns the unescaped string
+ * value when the whole initializer is a single string literal (or a
+ * no-substitution template literal), else `null`. Uses the TS parser so
+ * escapes/quotes resolve exactly as JS would, matching the value the Hono
+ * reference inlines at runtime.
+ */
+function parsePureStringLiteral(source: string): string | null {
+  const sf = ts.createSourceFile(
+    '__const.ts',
+    `const __x = (${source});`,
+    ts.ScriptTarget.Latest,
+    /*setParentNodes*/ false,
+  )
+  const stmt = sf.statements[0]
+  if (!stmt || !ts.isVariableStatement(stmt)) return null
+  const decl = stmt.declarationList.declarations[0]
+  let init = decl?.initializer
+  while (init && ts.isParenthesizedExpression(init)) init = init.expression
+  if (!init) return null
+  if (ts.isStringLiteral(init) || ts.isNoSubstitutionTemplateLiteral(init)) {
+    return init.text
+  }
+  return null
+}
+
 export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRenderCtx> {
   name = 'mojolicious'
   extension = '.html.ep'
@@ -159,6 +187,26 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
    * true — selecting the string operator from the operand's type avoids that.
    */
   private stringValueNames: Set<string> = new Set()
+  /**
+   * Module-scope pure string-literal constants (`const X = 'literal'` at
+   * file top-level), keyed by name → resolved literal value. Populated at
+   * `generate()` entry from `ir.metadata.localConstants`. When an identifier
+   * in an expression resolves to one of these, the adapter inlines the
+   * literal instead of emitting `$X` against a stash variable that is never
+   * bound (a module const isn't a prop, signal, or local — the value would
+   * render empty). Hono inlines it for free; this restores parity. Only
+   * module-scope pure string literals qualify (see `collectModuleStringConsts`).
+   */
+  private moduleStringConsts: Map<string, string> = new Map()
+  /**
+   * Names currently bound by an enclosing loop body — the `my $<param>` and
+   * `my $<index>` bindings `renderLoop` introduces — ref-counted so nested
+   * loops compose. `resolveModuleStringConst` consults this so a loop
+   * variable whose name happens to match a module string const is NOT
+   * inlined as the const literal (mirrors the Go adapter's loop-param /
+   * loop-var shadowing guards). (#1749 review)
+   */
+  private loopBoundNames: Map<string, number> = new Map()
 
   constructor(options: MojoAdapterOptions = {}) {
     super()
@@ -186,6 +234,8 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
     for (const p of ir.metadata.propsParams) {
       if (isStringTypeInfo(p.type)) this.stringValueNames.add(p.name)
     }
+    this.moduleStringConsts = this.collectModuleStringConsts(ir.metadata.localConstants)
+    this.loopBoundNames.clear()
     this.errors = []
     this.childrenCaptureCounter = 0
 
@@ -238,6 +288,41 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
     }
   }
 
+  /**
+   * Build the module pure-string-const map from the IR's localConstants.
+   * A const qualifies only when it is module-scope (`isModule`) and its
+   * initializer parses to a single string literal (`ts.StringLiteral` or
+   * `ts.NoSubstitutionTemplateLiteral`). Template literals with `${}`,
+   * numeric/object initializers, `Record<T,string>` maps, memos, and
+   * signals are all excluded — only a pure compile-time string can be
+   * inlined byte-for-byte.
+   */
+  private collectModuleStringConsts(constants: IRMetadata['localConstants']): Map<string, string> {
+    const map = new Map<string, string>()
+    for (const c of constants ?? []) {
+      if (!c.isModule) continue
+      if (c.value === undefined) continue
+      const literal = parsePureStringLiteral(c.value)
+      if (literal !== null) map.set(c.name, literal)
+    }
+    return map
+  }
+
+  /**
+   * Resolve an identifier to its inlined Perl single-quoted string literal
+   * when it names a module pure-string const, else `null` (the caller then
+   * falls back to its normal `$name` stash lowering). Returns the Perl
+   * literal form `'<escaped>'` ready to drop into an expression.
+   */
+  resolveModuleStringConst(name: string): string | null {
+    // A loop body introduces `my $<param>` / `my $<index>` bindings that
+    // shadow a module const of the same name — never inline inside one.
+    if (this.loopBoundNames.has(name)) return null
+    const value = this.moduleStringConsts.get(name)
+    if (value === undefined) return null
+    return `'${value.replace(/[\\']/g, m => `\\${m}`)}'`
+  }
+
   // ===========================================================================
   // Script Registration
   // ===========================================================================
@@ -587,6 +672,16 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
     const indexVar = loop.iterationShape === 'keys'
       ? `$${param}`
       : loop.index ? `$${loop.index}` : '$_i'
+    // Names this loop binds in body scope. Guard module-const inlining for
+    // the whole body (children + key + filter) so a same-named loop variable
+    // isn't replaced by the const literal (#1749 review). Ref-counted for
+    // nested loops; released after the body lines are assembled below.
+    const loopBound = loop.iterationShape === 'keys'
+      ? [param]
+      : [param, loop.index ?? '_i']
+    for (const n of loopBound) {
+      this.loopBoundNames.set(n, (this.loopBoundNames.get(n) ?? 0) + 1)
+    }
     const prevInLoop = this.inLoop
     this.inLoop = true
     const renderedChildren = this.renderChildren(loop.children)
@@ -644,6 +739,13 @@ export class MojoAdapter extends BaseAdapter implements IRNodeEmitter<MojoRender
       lines.push(children)
     }
 
+    // Body fully rendered — release the loop-bound names.
+    for (const n of loopBound) {
+      const c = (this.loopBoundNames.get(n) ?? 1) - 1
+      if (c <= 0) this.loopBoundNames.delete(n)
+      else this.loopBoundNames.set(n, c)
+    }
+
     lines.push(`% }`)
     lines.push(`<%== bf->comment("/loop:${loop.markerId}") %>`)
 
@@ -1307,7 +1409,7 @@ function renderArrayMethod(
       // runtime's `bf->includes($recv, $elem)` inspects `ref($recv)`
       // and dispatches: ARRAY ref scans the list with `eq`, scalar
       // falls back to `index(..., ...) != -1`. Helper lives in
-      // packages/adapter-mojolicious/lib/BarefootJS.pm.
+      // packages/adapter-perl/lib/BarefootJS.pm.
       //
       // The `bf->` (no `$`) form matches every other helper emit —
       // in real Mojolicious `bf` is a controller helper; the
@@ -1533,6 +1635,64 @@ function renderSortMethod(recv: string, c: SortComparator): string {
   return `bf->sort(${recv}, { keys => [${keyHashes.join(', ')}] })`
 }
 
+/**
+ * Render a `.reduce(fn, init)` arithmetic fold (#1448 Tier C) as a
+ * `bf->reduce(...)` call. The structured `ReduceOp` maps to the Perl
+ * helper's options hash:
+ *
+ *   bf->reduce($recv, { op => '+', key_kind => 'field', key => 'duration',
+ *                       type => 'numeric', init => 0 })
+ *
+ * A numeric init passes through as a bare Perl number (`0`, `-1`); a
+ * string init (concat fold) is re-quoted from its literal contents.
+ */
+function renderReduceMethod(recv: string, op: ReduceOp, direction: 'left' | 'right'): string {
+  const keyEntry =
+    op.key.kind === 'self'
+      ? `key_kind => 'self'`
+      : `key_kind => 'field', key => '${op.key.field}'`
+  // `op.init` is the decoded seed value. A numeric seed is already a
+  // canonical decimal literal Perl reads directly; a concat seed is the
+  // string contents, embedded in a single-quoted Perl literal. The `'`
+  // escape is REQUIRED: a seed decoded from a double-quoted JS literal
+  // (e.g. `"a'b"`) is escape-free yet contains an apostrophe. A literal
+  // backslash can't occur (it would need a `\\` escape, which the parser
+  // refuses), but escaping it too keeps this self-contained.
+  const init =
+    op.type === 'string'
+      ? `'${op.init.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`
+      : op.init
+  // `direction` is "left" (reduce) or "right" (reduceRight); the Perl
+  // helper reverses the list for "right". Only observable for concat.
+  return `bf->reduce(${recv}, { op => '${op.op}', ${keyEntry}, type => '${op.type}', init => ${init}, direction => '${direction}' })`
+}
+
+// `.flat(depth?)` → `bf->flat($recv, $depth)`. The `Infinity` form lowers
+// to the `-1` sentinel (flatten fully); a finite depth flattens that many
+// levels (`0` = shallow copy). See `sub flat` in BarefootJS.pm. (#1448)
+function renderFlatMethod(recv: string, depth: FlatDepth): string {
+  const d = depth === 'infinity' ? -1 : depth
+  return `bf->flat(${recv}, ${d})`
+}
+
+// `.flatMap(i => i)` / `.flatMap(i => i.field)` → `bf->flat_map($recv,
+// 'self'|'field', 'field')`, and the array-literal tuple form
+// `i => [i.a, i.b]` → `bf->flat_map_tuple($recv, ['field','a'], ...)`
+// (one arrayref per leaf). The field key is the raw JS prop name (Perl
+// hashes are keyed by it), mirroring `bf->reduce`. See `sub flat_map` /
+// `sub flat_map_tuple` in BarefootJS.pm.
+function renderFlatMapMethod(recv: string, op: FlatMapOp): string {
+  const proj = op.projection
+  if (proj.kind === 'tuple') {
+    const specs = proj.elements
+      .map(l => (l.kind === 'self' ? `['self', '']` : `['field', '${l.field}']`))
+      .join(', ')
+    return `bf->flat_map_tuple(${recv}, ${specs})`
+  }
+  if (proj.kind === 'self') return `bf->flat_map(${recv}, 'self', '')`
+  return `bf->flat_map(${recv}, 'field', '${proj.field}')`
+}
+
 /** True when `type` is the `string` primitive. */
 function isStringTypeInfo(type: TypeInfo | undefined): boolean {
   return type?.kind === 'primitive' && type.primitive === 'string'
@@ -1715,6 +1875,18 @@ class MojoFilterEmitter implements ParsedExprEmitter {
     return renderSortMethod(emit(object), comparator)
   }
 
+  reduceMethod(method: 'reduce' | 'reduceRight', object: ParsedExpr, reduceOp: ReduceOp, emit: (e: ParsedExpr) => string): string {
+    return renderReduceMethod(emit(object), reduceOp, method === 'reduceRight' ? 'right' : 'left')
+  }
+
+  flatMethod(object: ParsedExpr, depth: FlatDepth, emit: (e: ParsedExpr) => string): string {
+    return renderFlatMethod(emit(object), depth)
+  }
+
+  flatMapMethod(object: ParsedExpr, op: FlatMapOp, emit: (e: ParsedExpr) => string): string {
+    return renderFlatMapMethod(emit(object), op)
+  }
+
   conditional(_test: ParsedExpr, _consequent: ParsedExpr, _alternate: ParsedExpr): string {
     return '1'
   }
@@ -1747,6 +1919,11 @@ class MojoTopLevelEmitter implements ParsedExprEmitter {
   constructor(private readonly adapter: MojoAdapter) {}
 
   identifier(name: string): string {
+    // Module pure-string const (e.g. `const baseClasses = '...'` used in a
+    // className template literal): inline the literal value rather than emit
+    // `$baseClasses` against a stash variable that is never bound.
+    const inlined = this.adapter.resolveModuleStringConst(name)
+    if (inlined !== null) return inlined
     return `$${name}`
   }
 
@@ -1896,6 +2073,18 @@ class MojoTopLevelEmitter implements ParsedExprEmitter {
     return renderSortMethod(emit(object), comparator)
   }
 
+  reduceMethod(method: 'reduce' | 'reduceRight', object: ParsedExpr, reduceOp: ReduceOp, emit: (e: ParsedExpr) => string): string {
+    return renderReduceMethod(emit(object), reduceOp, method === 'reduceRight' ? 'right' : 'left')
+  }
+
+  flatMethod(object: ParsedExpr, depth: FlatDepth, emit: (e: ParsedExpr) => string): string {
+    return renderFlatMethod(emit(object), depth)
+  }
+
+  flatMapMethod(object: ParsedExpr, op: FlatMapOp, emit: (e: ParsedExpr) => string): string {
+    return renderFlatMapMethod(emit(object), op)
+  }
+
   conditional(
     test: ParsedExpr,
     consequent: ParsedExpr,

package/src/test-render.ts

@@ -11,7 +11,12 @@ import { mkdir, rm } from 'node:fs/promises'
 import { resolve } from 'node:path'
 
 const RENDER_TEMP_DIR = resolve(import.meta.dir, '../.render-temp')
+// Mojo-specific lib (BarefootJS::Backend::Mojo + the plugin) lives in this
+// package; the engine-agnostic core (BarefootJS.pm) moved to @barefootjs/perl.
+// Both dirs must be on the render script's @INC so `use BarefootJS` and
+// `use BarefootJS::Backend::Mojo` resolve.
 const LIB_DIR = resolve(import.meta.dir, '../lib')
+const PERL_CORE_LIB_DIR = resolve(import.meta.dir, '../../adapter-perl/lib')
 
 export class PerlNotAvailableError extends Error {
   constructor(message: string) {
@@ -216,7 +221,7 @@ use strict;
 use warnings;
 use utf8;
 
-use lib '${LIB_DIR}';
+use lib '${LIB_DIR}', '${PERL_CORE_LIB_DIR}';
 use Mojolicious;
 use Mojo::Template;
 # Boolean values in spread bags arrive as Mojo::JSON::true /
@@ -428,6 +433,25 @@ function buildPerlProps(
     entries.push(`${param.name} => undef`)
   }
 
+  // A `{...props}` rest spread means props that aren't declared named
+  // params flow through the rest bag (`bf->spread_attrs($<restPropsName>)`),
+  // not their own top-level template var. Route them into the bag hashref so
+  // a fixture passing e.g. `placeholder` to `Input` (whose declared params
+  // are `className` / `type`) renders `placeholder="..."` via the spread
+  // rather than silently dropping it into an unused `my $placeholder`. (#1467
+  // Phase 2b — mirrors the Go harness fix in the sibling `test-render.ts`.)
+  const restPropsName = ir.metadata.restPropsName
+  const declaredParams = new Set(ir.metadata.propsParams.map(p => p.name))
+  const restBagEntries: Array<[string, unknown]> = []
+  if (restPropsName && props) {
+    for (const [key, value] of Object.entries(props)) {
+      if (key.startsWith('__')) continue
+      if (key === restPropsName || declaredParams.has(key)) continue
+      restBagEntries.push([key, value])
+    }
+  }
+  const routedKeys = new Set(restBagEntries.map(([k]) => k))
+
   // (#1407 follow-up) Default the rest-binding identifier to an
   // empty hashref so `bf->spread_attrs($extras)` in the generated
   // Mojo template doesn't trip Perl's strict-mode "Global symbol
@@ -436,13 +460,16 @@ function buildPerlProps(
   // the COMPILE path on Go, where the bag plumbing matters; the
   // runtime is a no-op when the caller leaves the bag unset, which
   // mirrors the empty-spread case on every adapter).
-  if (ir.metadata.restPropsName && !(props && ir.metadata.restPropsName in props)) {
-    entries.push(`${ir.metadata.restPropsName} => {}`)
+  // When the fixture supplied undeclared props, seed the bag with those
+  // routed entries instead of an empty hashref.
+  if (restPropsName && !(props && restPropsName in props)) {
+    entries.push(`${restPropsName} => ${toPerlLiteral(Object.fromEntries(restBagEntries))}`)
   }
 
   // Add user props
   if (props) {
     for (const [key, value] of Object.entries(props)) {
+      if (routedKeys.has(key)) continue
       if (typeof value === 'string') {
         entries.push(`${key} => '${value.replace(/'/g, "\\'")}'`)
       } else if (typeof value === 'number') {