@barefootjs/jsx 0.33.1 → 0.33.3

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

@@ -210,7 +210,11 @@ const ALLOWLIST: Record<string, Partial<Record<Pattern, number>>> = {
   // FLOOR (shape 1, already guarded): both `expandDynamicPropValue` and
   // `expandConstantForReactivity` precede their `.find(` with
   // `scope?.isBound(trimmedValue)` — see this file's own header comment
-  // (added Stage 1b) for the full SHADOW GUARD reasoning.
+  // (added Stage 1b) for the full SHADOW GUARD reasoning. #2723's
+  // `resolveRestSpreadOrigin` deliberately does NOT add a third: it walks
+  // an alias chain hop by hop, so it indexes `ctx.localConstants` into a
+  // memoized `Map` (`localConstantValues`) instead — keeping this floor
+  // intact and avoiding a linear scan per hop.
   'packages/jsx/src/ir-to-client-js/prop-handling.ts': { 'localConstants.find(': 2 },
   // FLOOR (shape 3): `wrapExprWithLoopParams` / `LoopParamSpec` — the
   // canonical definition of the accessor-rewrite payload every other

package/src/__tests__/child-component-ref-not-mirrored.test.ts

@@ -0,0 +1,90 @@
+/**
+ * Regression tests for #2749: a `ref` on a CHILD-COMPONENT call site must not
+ * be mirrored onto the child's root element as a DOM attribute.
+ *
+ * Measured before the fix: `collectReactiveChildProps` (collect-elements.ts)
+ * hand-rolled an `on[A-Z]` event check and had no `ref` case, so a reactive
+ * `ref` prop fell through to the generic dynamic-prop mirror and emitted
+ *
+ *   if (__v != null) __scope.setAttribute('ref', String(__v))
+ *
+ * i.e. the callback's SOURCE TEXT as an attribute value. SSR never emits a
+ * `ref` attribute, so only the hydrate leg grew it and the SSR-vs-hydrated
+ * snapshot diverged. The same prop was — and still is — passed correctly to
+ * `initChild` as `get ref() { … }`; the runtime child then routes it through
+ * `applyRestAttrs`, whose `classifyDOMProp` read already returns `kind: 'ref'`
+ * and invokes the callback instead of setting an attribute.
+ *
+ * The fix makes the compile-time mirror read the same classifier. These tests
+ * pin BOTH directions: `ref` (and `on*`) must not reach the mirror, and an
+ * ordinary reactive attribute prop must still reach it.
+ */
+
+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
+}
+
+const REF_ON_CHILD = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  import { Row } from './Row'
+
+  export function Case() {
+    const [val, setVal] = createSignal(0)
+    const handleMount = (el: Element) => {
+      el.setAttribute('data-mounted', String(val()))
+    }
+    return <Row ref={handleMount} data-x="1"><span>{val()}</span></Row>
+  }
+`
+
+describe('ref on a child-component call site (#2749)', () => {
+  test('is never mirrored into a setAttribute(\'ref\', …) update', () => {
+    const js = getClientJs(REF_ON_CHILD, 'Case.tsx')
+    expect(js).not.toContain(`setAttribute('ref'`)
+    expect(js).not.toContain(`removeAttribute('ref'`)
+  })
+
+  test('still reaches the child through initChild as a getter', () => {
+    const js = getClientJs(REF_ON_CHILD, 'Case.tsx')
+    expect(js).toContain('initChild(')
+    expect(js).toContain('get ref()')
+  })
+
+  test('does not appear as an attribute in the CSR template either', () => {
+    const js = getClientJs(REF_ON_CHILD, 'Case.tsx')
+    const template = js.slice(js.indexOf('template:'))
+    expect(template).not.toContain('ref=')
+  })
+
+  test('an ordinary reactive attribute prop on the same call site is still mirrored', () => {
+    // Reverse direction: the fix must not silence the generic mirror. `title`
+    // classifies as `attr`, so it keeps its setAttribute update.
+    const js = getClientJs(
+      `
+        'use client'
+        import { createSignal } from '@barefootjs/client'
+        import { Row } from './Row'
+
+        export function Case() {
+          const [val, setVal] = createSignal(0)
+          const onMount = (el: Element) => { el.setAttribute('data-mounted', '1') }
+          return <Row ref={onMount} title={String(val())}>x</Row>
+        }
+      `,
+      'Case.tsx',
+    )
+    expect(js).toContain(`setAttribute('title'`)
+    expect(js).not.toContain(`setAttribute('ref'`)
+  })
+})

package/src/__tests__/client-js-generation.test.ts

@@ -1338,6 +1338,12 @@ describe('Client JS generation', () => {
       // hydrate() should include comment: true for fragment roots
       expect(content).toMatch(/hydrate\('FragComp',/)
       expect(content).toContain('comment: true')
+      // #2722 regression pin: a genuine fragment root ALSO needs
+      // `fragmentRoot: true` — distinct from the `comment: true` a
+      // root-is-a-child-call component gets (see the "component roots"
+      // describe block below) — so `materializeComponent` (component.ts)
+      // generates its own CSR scope id instead of leaving it null.
+      expect(content).toContain('fragmentRoot: true')
     })
 
     test('single-root component generates mount without comment flag', () => {
@@ -1390,6 +1396,11 @@ describe('Client JS generation', () => {
       // hydrate() should include comment: true for component roots
       expect(content).toMatch(/hydrate\('Wrapper',/)
       expect(content).toContain('comment: true')
+      // #2722 regression pin: the root-is-a-child-call shape must NOT get
+      // `fragmentRoot: true` — the child's OWN markup already carries its
+      // own scope id (#2649), so `materializeComponent` must keep leaving
+      // this wrapper's `scopeId` null, not generate a fresh one.
+      expect(content).not.toContain('fragmentRoot: true')
     })
 
     test('element-root client component does NOT generate comment: true', () => {

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

@@ -71,6 +71,29 @@ function makeSideEffectImport(source: string): ImportInfo {
   }
 }
 
+/** `import <localName> from 'source'`, optionally alongside named specifiers. */
+function makeDefaultImport(source: string, localName: string, namedSpecifiers: string[] = []): ImportInfo {
+  return {
+    source,
+    specifiers: [
+      { name: localName, alias: null, isDefault: true, isNamespace: false },
+      ...namedSpecifiers.map(name => ({ name, alias: null, isDefault: false, isNamespace: false })),
+    ],
+    isTypeOnly: false,
+    loc: dummyLoc,
+  }
+}
+
+/** `import * as localName from 'source'`. */
+function makeNamespaceImport(source: string, localName: string): ImportInfo {
+  return {
+    source,
+    specifiers: [{ name: localName, alias: null, isDefault: false, isNamespace: true }],
+    isTypeOnly: false,
+    loc: dummyLoc,
+  }
+}
+
 describe('collectExternalImports', () => {
   test('preserves third-party library imports used in generated code', () => {
     const ir = makeIR([makeImport('zod', ['z'])])
@@ -79,6 +102,90 @@ describe('collectExternalImports', () => {
     expect(result).toEqual(["import { z } from 'zod'"])
   })
 
+  // #2767 follow-up: a default-imported binding (e.g. a JSON module's
+  // `import lock from '...json' with { type: 'json' }`) was previously
+  // always re-emitted as a NAMED import (`import { lock } from '...'`),
+  // which is a real, silently-wrong ESM import — the module has no such
+  // named export — that only failed once a bundler actually resolved it.
+  test('preserves a default import with correct default-import syntax, not named braces', () => {
+    const ir = makeIR([makeDefaultImport('../data.json', 'lock')])
+    const code = 'lock.adapters'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import lock from '../data.json'"])
+  })
+
+  test('preserves a namespace import with correct namespace-import syntax', () => {
+    const ir = makeIR([makeNamespaceImport('./ns-module', 'NS')])
+    const code = 'NS.helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import * as NS from './ns-module'"])
+  })
+
+  test('combines a used default specifier with used named specifiers on one declaration', () => {
+    const ir = makeIR([makeDefaultImport('./mixed', 'Default', ['helper', 'other'])])
+    const code = 'Default(); helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import Default, { helper } from './mixed'"])
+  })
+
+  test('drops an unused default specifier but keeps a used named sibling', () => {
+    const ir = makeIR([makeDefaultImport('./mixed', 'Default', ['helper'])])
+    const code = 'helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { helper } from './mixed'"])
+  })
+
+  // `import Foo, * as NS from 'x'` is legal JS, but never emitted as one
+  // line — a namespace specifier always gets its own declaration (see
+  // `renderUsedImportLines`'s docstring). Pin the two-line output so a
+  // future refactor can't silently collapse or drop one of them.
+  test('a used default specifier and a used namespace specifier from the same source emit two separate lines', () => {
+    const ir = makeIR([
+      {
+        source: './both',
+        specifiers: [
+          { name: 'Foo', alias: null, isDefault: true, isNamespace: false },
+          { name: 'NS', alias: null, isDefault: false, isNamespace: true },
+        ],
+        isTypeOnly: false,
+        loc: dummyLoc,
+      },
+    ])
+    const code = 'Foo(); NS.helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import Foo from './both'", "import * as NS from './both'"])
+  })
+
+  test('a default-imported COMPONENT is skipped, same as a named-imported one', () => {
+    const ir = makeIR([makeDefaultImport('./button', 'Button')], ['Button'])
+    const code = '<Button/>'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
+  test('rewrites a default import to the .client.js sibling when its source is a client-signal import', () => {
+    const ir = makeIR([makeDefaultImport('./state', 'store')])
+    ir.metadata.clientSignalImportSources = new Set(['./state'])
+    const code = 'store.count'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import store from './state.client.js'"])
+  })
+
+  test('rewrites a namespace import to the .client.js sibling when its source is a client-signal import', () => {
+    const ir = makeIR([makeNamespaceImport('./state', 'NS')])
+    ir.metadata.clientSignalImportSources = new Set(['./state'])
+    const code = 'NS.count'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import * as NS from './state.client.js'"])
+  })
+
+  test('drops an unused namespace specifier entirely', () => {
+    const ir = makeIR([makeNamespaceImport('./ns-module', 'NS')])
+    const code = 'somethingElse()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
   test('skips @barefootjs/client imports', () => {
     const ir = makeIR([makeImport('@barefootjs/client', ['createSignal'])])
     const code = 'createSignal(0)'

package/src/__tests__/ir-to-client-js/merge-compiled-client-js-imports.test.ts

@@ -0,0 +1,138 @@
+/**
+ * `mergeCompiledClientJsImports` merges sibling components' compiled
+ * client-JS blobs (`compileMultipleComponents`'s two call sites) via a
+ * real `ts.createSourceFile` AST walk — never a text/regex line scan — so
+ * a string or template-literal VALUE that merely contains a line starting
+ * with `import ` can never be torn out of its literal and hoisted into the
+ * imports block. Mirrors `combine-client-js.test.ts`'s `#1702` regression
+ * test for `parseAndMerge`, the established precedent this function
+ * follows (see its own docstring).
+ */
+import { describe, test, expect } from 'bun:test'
+import { mergeCompiledClientJsImports } from '../../ir-to-client-js/imports'
+
+describe('mergeCompiledClientJsImports', () => {
+  test('does not treat an import-shaped line inside a string/template literal as a real import (#1702-class)', () => {
+    // A docs component embeds a code sample whose CONTENTS contain a
+    // line that starts with `import `. A line-based scan would tear that
+    // fake import out of the literal and hoist it into the imports
+    // block, leaving `hydrate` undefined and corrupting the literal.
+    const sample = [
+      '`Example usage:',
+      '',
+      "import { createSignal } from '@barefootjs/client'",
+      '',
+      'export function Counter() {}`',
+    ].join('\n')
+
+    const componentA = [
+      "import { hydrate, createSignal } from '@barefootjs/client/runtime'",
+      `const SAMPLE = ${sample}`,
+      "hydrate('DocsExample', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA])
+
+    // The real runtime import survives as its own top-level declaration,
+    // exactly once — not duplicated by the fake import line inside the
+    // string literal.
+    const realImportOccurrences = (merged.match(/^import \{ hydrate, createSignal \} from '@barefootjs\/client\/runtime'$/gm) ?? []).length
+    expect(realImportOccurrences).toBe(1)
+    // The sample string is untouched — the fake import line inside it is
+    // still there, still nested inside the backtick literal, not hoisted
+    // out as a separate top-level statement.
+    expect(merged).toContain('const SAMPLE = `Example usage:')
+    expect(merged).toContain("import { createSignal } from '@barefootjs/client'\n\nexport function Counter() {}`")
+  })
+
+  // #2767 follow-up: the same duplicate-binding SyntaxError F1 pinned for
+  // the old regex-based merge, now exercised through the AST-based path.
+  test('folds a default import shared across sibling components instead of redeclaring the binding', () => {
+    const componentA = [
+      "import cfg from './config'",
+      "hydrate('CompA', (el) => {})",
+    ].join('\n')
+    const componentB = [
+      "import cfg, { helper } from './config'",
+      "hydrate('CompB', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA, componentB])
+
+    expect(merged).toContain("import cfg, { helper } from './config'")
+    // Exactly one declaration — not one per sibling component.
+    expect((merged.match(/\bcfg\b/g) ?? []).length).toBe(1)
+  })
+
+  test('keeps an unresolved @bf-child: placeholder import (does not drop it, unlike parent-child inlining)', () => {
+    const componentA = [
+      "import { hydrate, initChild } from '@barefootjs/client/runtime'",
+      "import '/* @bf-child:Child */'",
+      "hydrate('Parent', (el) => { initChild('Child', el, {}) })",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA])
+
+    expect(merged).toContain("import '/* @bf-child:Child */'")
+  })
+
+  test('dedupes an identical @bf-child: placeholder shared by two sibling components', () => {
+    const componentA = [
+      "import '/* @bf-child:Shared */'",
+      "hydrate('A', (el) => {})",
+    ].join('\n')
+    const componentB = [
+      "import '/* @bf-child:Shared */'",
+      "hydrate('B', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA, componentB])
+
+    expect((merged.match(/@bf-child:Shared/g) ?? []).length).toBe(1)
+  })
+
+  // pullfrog[bot] review of #2769: a combined `import Default, * as NS
+  // from '…'` line has a default clause AND a namespace binding — a
+  // naive "has a default clause" check would route it into the fold
+  // branch and silently drop the namespace half, since only named
+  // bindings are read there. No current producer emits this combined
+  // shape (`renderUsedImportLines` always splits a used default+namespace
+  // pair into two lines), but the classification must stay correct
+  // independent of that invariant.
+  test('keeps a combined default+namespace import verbatim, not silently dropping the namespace half', () => {
+    const componentA = [
+      "import Default, * as NS from './combined'",
+      "hydrate('A', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA])
+
+    expect(merged).toContain("import Default, * as NS from './combined'")
+  })
+
+  test('preserves a namespace import on its own line, deduped by exact source+name across components', () => {
+    const componentA = [
+      "import * as util from './util'",
+      "hydrate('A', (el) => {})",
+    ].join('\n')
+    const componentB = [
+      "import * as util from './util'",
+      "hydrate('B', (el) => {})",
+    ].join('\n')
+
+    const merged = mergeCompiledClientJsImports([componentA, componentB])
+
+    expect((merged.match(/import \* as util from '\.\/util'/g) ?? []).length).toBe(1)
+  })
+
+  test('preserves both components\' code sections after import extraction', () => {
+    const componentA = "import { hydrate } from '@barefootjs/client/runtime'\nhydrate('A', (el) => {})"
+    const componentB = "import { hydrate } from '@barefootjs/client/runtime'\nhydrate('B', (el) => {})"
+
+    const merged = mergeCompiledClientJsImports([componentA, componentB])
+
+    expect(merged).toContain("hydrate('A', (el) => {})")
+    expect(merged).toContain("hydrate('B', (el) => {})")
+    expect((merged.match(/^import \{ hydrate \}/gm) ?? []).length).toBe(1)
+  })
+})

package/src/__tests__/issue-2723-prop-alias-reactivity.test.ts

@@ -0,0 +1,124 @@
+/**
+ * Regression pin for #2723.
+ *
+ * A semantically-inert `const x__alias = x` hop between a destructured
+ * prop and its use site (exactly what the `alias-props` mutation sweep
+ * inserts, #2481) silently dropped the attribute's `createEffect` and, in
+ * the rest-spread case, its `applyRestAttrs` call too — collapsing `init`
+ * to `function initL() {}` whenever the effect was its only content.
+ *
+ * Five variants isolate the two independent defects the fix addresses:
+ *   - A: no alias at all (control — everything present).
+ *   - B: every destructured binding aliased, INCLUDING the rest
+ *     parameter (`const rest__alias = rest`) — the shape the real
+ *     `alias-props` mutation produces.
+ *   - C: only the prop feeding the reactive attribute is aliased; the
+ *     rest parameter is spread un-aliased.
+ *   - D: aliased, but with NO rest spread at all — proves the defect is
+ *     not spread-handling-specific.
+ *   - E: aliased (rest included) AND an event handler is present, so
+ *     `init` is non-empty regardless of the effect. This is the case a
+ *     fix aimed only at "don't emit an empty init" would still leave
+ *     broken: the `createEffect` silently disappears WITHOUT collapsing
+ *     the function, so an empty-init check alone can't catch it.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function compileInit(source: string): string {
+  const result = compileJSX(source, 'L.tsx', { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')!.content
+  return clientJs
+}
+
+describe('#2723 — prop alias hop must not drop attribute reactivity', () => {
+  test('A: no alias — createEffect and applyRestAttrs both present (control)', () => {
+    const clientJs = compileInit(`
+      "use client";
+      const BASE = 'flex'
+      type LProps = { className?: string; children?: any }
+      export function L({ className = '', children, ...rest }: LProps) {
+        return <label className={\`\${BASE} \${className}\`} {...rest}>{children}</label>
+      }
+    `)
+    expect(clientJs).toContain('createEffect(')
+    expect(clientJs).toContain('applyRestAttrs(')
+    expect(clientJs).not.toContain('function initL() {}')
+  })
+
+  test('B: every binding aliased, rest included — createEffect and applyRestAttrs survive', () => {
+    const clientJs = compileInit(`
+      "use client";
+      const BASE = 'flex'
+      type LProps = { className?: string; children?: any }
+      export function L({ className = '', children, ...rest }: LProps) {
+        const className__alias = className
+        const children__alias = children
+        const rest__alias = rest
+        return <label className={\`\${BASE} \${className__alias}\`} {...rest__alias}>{children__alias}</label>
+      }
+    `)
+    expect(clientJs).toContain('createEffect(')
+    expect(clientJs).toContain('applyRestAttrs(')
+    expect(clientJs).not.toContain('function initL() {}')
+    // The rest-parameter alias must resolve to the runtime props object,
+    // not to the never-declared source-level rest binding.
+    expect(clientJs).toContain('const rest__alias = _p')
+    expect(clientJs).not.toMatch(/const rest__alias = rest\b/)
+  })
+
+  test('C: only the reactive prop is aliased, rest is spread un-aliased', () => {
+    const clientJs = compileInit(`
+      "use client";
+      const BASE = 'flex'
+      type LProps = { className?: string; children?: any }
+      export function L({ className = '', children, ...rest }: LProps) {
+        const className__alias = className
+        return <label className={\`\${BASE} \${className__alias}\`} {...rest}>{children}</label>
+      }
+    `)
+    expect(clientJs).toContain('createEffect(')
+    expect(clientJs).toContain('applyRestAttrs(')
+    expect(clientJs).not.toContain('function initL() {}')
+  })
+
+  test('D: aliased with NO rest spread — not a spread-handling bug', () => {
+    const clientJs = compileInit(`
+      "use client";
+      const BASE = 'flex'
+      type LProps = { className?: string; children?: any }
+      export function L({ className = '', children }: LProps) {
+        const className__alias = className
+        return <label className={\`\${BASE} \${className__alias}\`}>{children}</label>
+      }
+    `)
+    expect(clientJs).toContain('createEffect(')
+    expect(clientJs).not.toContain('applyRestAttrs(')
+    expect(clientJs).not.toContain('function initL() {}')
+  })
+
+  test('E: aliased + event handler — createEffect must survive even though init is already non-empty', () => {
+    const clientJs = compileInit(`
+      "use client";
+      const BASE = 'flex'
+      type LProps = { className?: string; children?: any; onClick?: () => void }
+      export function L({ className = '', children, onClick, ...rest }: LProps) {
+        const className__alias = className
+        const rest__alias = rest
+        return <label className={\`\${BASE} \${className__alias}\`} onClick={onClick} {...rest__alias}>{children}</label>
+      }
+    `)
+    // A fix aimed only at "init must not be empty" would pass this
+    // assertion for free (the handler alone keeps init non-empty) while
+    // leaving the class binding frozen at its initial value — the
+    // `createEffect` assertion is the one that actually pins the fix.
+    expect(clientJs).not.toContain('function initL() {}')
+    expect(clientJs).toContain('createEffect(')
+    expect(clientJs).toContain('applyRestAttrs(')
+    expect(clientJs).toContain("addEventListener('click'")
+  })
+})

package/src/__tests__/issue-2754-rest-spread-needs-slot.test.ts

@@ -0,0 +1,85 @@
+/**
+ * #2754 — a `{...props}` / `{...rest}` forward is the one attribute source
+ * no template can carry (its keys are unknown at compile time), so the
+ * runtime's `applyRestAttrs` is the only thing that can apply it. That
+ * call is addressed by slot id and lives in `init`, and BOTH gates used to
+ * miss the stateless case:
+ *
+ *   - Phase 1 gave the host element no slot id, because a spread trips
+ *     none of the reactivity heuristics; and
+ *   - `needsClientJs` did not count `restAttrElements`, so even with a
+ *     slot the component fell to the template-only mount with `init` empty.
+ *
+ * SSR and hydration hid both: the SSR markup already carries the caller's
+ * attributes. Only a pure `createComponent` mount showed the drop.
+ */
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function compile(source: string) {
+  const result = compileJSX(source, 'Repro.tsx', { adapter })
+  expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  return {
+    clientJs: result.files.find(f => f.type === 'clientJs')!.content,
+    template: result.files.find(f => f.type === 'markedTemplate')!.content,
+  }
+}
+
+describe('#2754 — a caller-props forward earns a slot and an init', () => {
+  test('a stateless `{ children, ...props }` forwarder emits applyRestAttrs against a slot', () => {
+    const { clientJs, template } = compile(`
+      "use client";
+      export function Plain({ children, ...props }: { children?: unknown; [k: string]: unknown }) {
+        return <span className="plain" {...props}>{children}</span>
+      }
+    `)
+    expect(clientJs).toContain('applyRestAttrs')
+    // The slot the call addresses must exist in the SSR markup too, or
+    // hydration's `$(__scope, 's0')` finds nothing.
+    expect(clientJs).toMatch(/const \[_s\d\] = \$\(__scope, 's\d'\)/)
+    expect(template).toMatch(/bf="s\d"/)
+    // `children` and the statically-set `class` stay excluded so the
+    // forward neither double-renders children nor re-emits `class`.
+    expect(clientJs).toMatch(/applyRestAttrs\(_s\d, _p, \["children","class"\]\)/)
+  })
+
+  test('a whole undestructured props object spread gets the same treatment', () => {
+    const { clientJs } = compile(`
+      "use client";
+      export function Whole(props: { [k: string]: unknown }) {
+        return <span className="plain" {...props} />
+      }
+    `)
+    expect(clientJs).toContain('applyRestAttrs')
+  })
+
+  test('an alias hop onto the rest binding resolves the same way (#2723 shape)', () => {
+    const { clientJs } = compile(`
+      "use client";
+      export function Aliased({ children, ...props }: { children?: unknown; [k: string]: unknown }) {
+        const props__alias = props
+        return <span className="plain" {...props__alias}>{children}</span>
+      }
+    `)
+    expect(clientJs).toContain('applyRestAttrs')
+  })
+
+  test('a spread of an ordinary object still inlines into the template and earns no slot', () => {
+    // Reverse direction: only the caller-props forward is unknowable at
+    // compile time. An ordinary object spread is fully emitted by both
+    // templates and must not start allocating slot ids.
+    const { clientJs, template } = compile(`
+      "use client";
+      const extra = { title: 'x' }
+      export function Ordinary() {
+        return <span className="plain" {...extra} />
+      }
+    `)
+    expect(clientJs).toContain('spreadAttrs')
+    expect(clientJs).not.toContain('applyRestAttrs')
+    expect(template).not.toMatch(/bf="s\d"/)
+  })
+})