fix(slots): keep caller signals reactive inside slot content

Slot content belongs to the caller, so {{ }} inside it names the CALLER's
reactive state, which the component's own script knows nothing about. Judged
by that script alone the expressions looked unresolvable and not signal-backed,
so they were evaluated server-side against a context that never had them and
rendered as empty.

The symptom was a styled, empty box: <Alert>{{ error }}</Alert> produced the
alert with no message inside, and the only clue anything was wrong was that the
box appeared at all.

Reuses the gate the @include path already needed for the same reason: a
component invoked with expression-bearing slot content is treated as
signal-bearing, so the existing "unresolvable here, preserve for the client"
rule applies.

Author: chrisbbreuer

packages/stx/src/expressions.ts

@@ -683,7 +683,17 @@ export function processExpressions(template: string, context: Record<string, any
   // own state()/derived(). The caller computes the gate on the partial's FULL
   // content and passes it here, so {{ }} over the partial's own signals are
   // preserved for the runtime — exactly like a top-level page. See stacksjs/stx#1758.
-  const hasSignals = options?.forceSignals === true || usesSignalsInScript(template)
+  //
+  // `__stx_force_signals` is the same gate for SLOT CONTENT. A component
+  // rendering `<slot />` receives markup authored by its caller, and any
+  // {{ }} in it refers to the CALLER's scope - which the component's own
+  // script knows nothing about. Judging by the component's script alone,
+  // those expressions looked unresolvable-and-not-signal-backed, so they were
+  // evaluated server-side against a context that never had them and rendered
+  // as empty. `<Alert>{{ error }}</Alert>` produced a styled, empty box.
+  const hasSignals = options?.forceSignals === true
+    || context?.__stx_force_signals === true
+    || usesSignalsInScript(template)
 
   // Replace triple curly braces with unescaped expressions {{{ expr }}} - similar to {!! expr !!}
   output = output.replace(/\{\{\{([\s\S]*?)\}\}\}/g, (match, expr, offset) => {

packages/stx/src/utils.ts

@@ -526,6 +526,29 @@ export function isHydrateTrigger(trigger: string): boolean {
     || trigger.startsWith('media:')
 }
 
+/**
+ * Does this slot content carry template expressions?
+ *
+ * Slot content belongs to the caller, so `{{ ... }}` inside it names the
+ * caller's variables. When any are present the component has to be treated as
+ * signal-bearing, or the expression pipeline resolves them against the
+ * component's context (where they do not exist) and renders them as empty.
+ *
+ * `<script>` and `<style>` regions are ignored: a regex or a CSS rule can
+ * contain brace pairs that are not template expressions, and matching them
+ * would flag components that have no slot expressions at all.
+ */
+export function slotContentHasExpressions(slotContent: string): boolean {
+  if (!slotContent)
+    return false
+
+  const withoutScripts = slotContent
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/<style[\s\S]*?<\/style>/gi, '')
+
+  return /\{\{[\s\S]*?\}\}|\{!![\s\S]*?!!\}/.test(withoutScripts)
+}
+
 export async function renderComponentWithSlot(
   componentPath: string,
   props: Record<string, unknown>,
@@ -821,6 +844,16 @@ export async function renderComponentWithSlot(
       // expression (using the `slot` variable above) rather than being replaced by
       // the parent page's @section('content') content
       __sections: {},
+      // Slot content is authored by the CALLER, so any {{ }} in it refers to
+      // the caller's scope - reactive state the component's own script has
+      // never heard of. Without this flag the expression pipeline judged them
+      // by the component's script alone, found no signals, and evaluated them
+      // server-side against a context that never had them: they rendered as
+      // empty. `<Alert>{{ error }}</Alert>` produced a styled, empty box, and
+      // the only clue was that the box appeared at all. Flagging the component
+      // as signal-bearing lets the existing "unresolvable here, preserve for
+      // the client" rule do its job.
+      ...(slotContentHasExpressions(slotContent) && { __stx_force_signals: true }),
     }
 
     // Fill in `defineProps` destructuring defaults for any prop the caller

packages/stx/test/slot-signal-reactivity.test.ts

@@ -0,0 +1,97 @@
+import { afterAll, beforeAll, describe, expect, it } from 'bun:test'
+import { mkdtemp, rm } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import { slotContentHasExpressions } from '../src/utils'
+
+/**
+ * Slot content belongs to the caller, so `{{ ... }}` inside it names the
+ * CALLER's reactive state - which the component's own script knows nothing
+ * about. Judged by that script alone the expressions looked unresolvable and
+ * not signal-backed, so they were evaluated server-side against a context that
+ * never had them and rendered as empty.
+ *
+ * The visible symptom was a styled, empty box: `<Alert>{{ error }}</Alert>`
+ * produced the alert with no message in it, and the only clue that anything
+ * was wrong was that the box appeared at all.
+ */
+
+let dir: string
+
+beforeAll(async () => {
+  dir = await mkdtemp(path.join(tmpdir(), 'stx-slot-signals-'))
+
+  await Bun.write(path.join(dir, 'components', 'Callout.stx'), `<template>
+  <div class="callout"><slot /></div>
+</template>
+`)
+
+  // A page whose message lives in a signal, handed to the component as slot
+  // content. This is the shape that silently rendered nothing.
+  await Bun.write(path.join(dir, 'page.stx'), `<script>
+const message = state('')
+</script>
+<Callout>{{ message }}</Callout>
+`)
+
+  // The same page, but the component resolves the expression itself.
+  await Bun.write(path.join(dir, 'resolved.stx'), `<script>
+const message = state('')
+</script>
+<Callout>{{ slotOwnedByComponent }}</Callout>
+`)
+})
+
+afterAll(async () => {
+  if (dir)
+    await rm(dir, { recursive: true, force: true })
+})
+
+async function render(file: string): Promise<string> {
+  const { processDirectives } = await import('../src/index')
+  const source = await Bun.file(path.join(dir, file)).text()
+  return await processDirectives(
+    source,
+    {},
+    path.join(dir, file),
+    { componentsDir: path.join(dir, 'components') } as any,
+    new Set(),
+  )
+}
+
+describe('slot content over caller signals', () => {
+  it('preserves the expression for the client instead of rendering an empty box', async () => {
+    const html = await render('page.stx')
+
+    // The component rendered, and the caller's expression survived to the
+    // client runtime rather than being resolved to nothing server-side.
+    expect(html).toContain('callout')
+    expect(html).toContain('{{ message }}')
+  })
+
+  it('leaves an expression the component cannot resolve intact rather than blanking it', async () => {
+    const html = await render('resolved.stx')
+
+    expect(html).toContain('{{ slotOwnedByComponent }}')
+  })
+})
+
+describe('slotContentHasExpressions', () => {
+  it('detects the expression forms slot content can carry', () => {
+    expect(slotContentHasExpressions('{{ error }}')).toBe(true)
+    expect(slotContentHasExpressions('<span>{{ error }}</span>')).toBe(true)
+    expect(slotContentHasExpressions('{!! rawHtml !!}')).toBe(true)
+  })
+
+  it('is false for plain content, so unrelated components are unaffected', () => {
+    expect(slotContentHasExpressions('Save changes')).toBe(false)
+    expect(slotContentHasExpressions('<strong>Save</strong>')).toBe(false)
+    expect(slotContentHasExpressions('')).toBe(false)
+  })
+
+  it('ignores braces inside script and style, which are not template expressions', () => {
+    // A regex in a script and a CSS rule both contain brace pairs.
+    expect(slotContentHasExpressions('<script>const re = /\\{\\{x\\}\\}/g</script>')).toBe(false)
+    expect(slotContentHasExpressions('<style>.a { color: red }</style>')).toBe(false)
+  })
+})