@barefootjs/hono 0.1.0

package/src/__tests__/dev.test.tsx

@@ -0,0 +1,123 @@
+/** @jsxImportSource hono/jsx */
+/**
+ * BfDevReload / createDevReloader tests
+ *
+ * Verifies the dev-gate (no leak into production) and the basic SSE wire
+ * format so a regression in the build-id watcher is caught before E2E.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'bun:test'
+import { Hono } from 'hono'
+import { mkdtempSync, rmSync, mkdirSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { renderToString } from 'hono/jsx/dom/server'
+// `BfDevReload` lives in `app.ts` (runtime-agnostic, html-tagged-template
+// based); `createDevReloader` lives in `dev.tsx` (Node fs-watch based).
+import { BfDevReload } from '../app'
+import { createDevReloader } from '../dev'
+
+describe('BfDevReload', () => {
+  // The runtime gate lives in `barefootDevReload` (middleware). When
+  // it's mounted with `enabled: false` it never publishes the endpoint
+  // to the request context, so <BfDevReload /> falls back to `null`.
+  // Tests below exercise the component directly, which means the
+  // "endpoint provided" branch is the snippet branch and the
+  // "no endpoint, no context" branch is the null branch.
+
+  it('renders the EventSource snippet when an endpoint is provided', () => {
+    const html = renderToString(<BfDevReload endpoint="/_bf/reload" />)
+    expect(html).toContain('<script>')
+    expect(html).toContain('new EventSource(\"/_bf/reload\")')
+    expect(html).toContain("addEventListener('reload'")
+  })
+
+  it('renders nothing when no endpoint is available (no context, no prop)', () => {
+    const html = renderToString(<BfDevReload />)
+    expect(html).toBe('')
+  })
+
+  it('respects a custom endpoint passed as a prop', () => {
+    const html = renderToString(<BfDevReload endpoint="/__reload" />)
+    expect(html).toContain('new EventSource(\"/__reload\")')
+  })
+})
+
+describe('createDevReloader', () => {
+  let dir: string
+
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'bf-dev-reloader-'))
+    mkdirSync(join(dir, '.dev'), { recursive: true })
+    writeFileSync(join(dir, '.dev', 'build-id'), '1000')
+  })
+
+  afterEach(() => {
+    rmSync(dir, { recursive: true, force: true })
+  })
+
+  it('returns 404 when disabled', async () => {
+    const app = new Hono()
+    app.get('/_bf/reload', createDevReloader({ distDir: dir, enabled: false }))
+
+    const res = await app.request('/_bf/reload')
+    expect(res.status).toBe(404)
+  })
+
+  it('streams initial hello with current build-id', async () => {
+    const app = new Hono()
+    app.get('/_bf/reload', createDevReloader({ distDir: dir, enabled: true }))
+
+    const ctrl = new AbortController()
+    const res = await app.request(new Request('http://localhost/_bf/reload', { signal: ctrl.signal }))
+    expect(res.status).toBe(200)
+    expect(res.headers.get('Content-Type')).toBe('text/event-stream')
+
+    const reader = res.body!.getReader()
+    const decoder = new TextDecoder()
+    let received = ''
+    // Accumulate until the hello event lands (first two chunks should suffice).
+    for (let i = 0; i < 4 && !received.includes('event: hello'); i++) {
+      const { value, done } = await reader.read()
+      if (done) break
+      received += decoder.decode(value)
+    }
+
+    expect(received).toContain('retry: 1000')
+    expect(received).toContain('event: hello')
+    expect(received).toContain('data: 1000')
+
+    ctrl.abort()
+    try { await reader.cancel() } catch { /* already closed */ }
+  })
+
+  // Regression: when a client reconnects after a build happened during its
+  // disconnected window, it must see `reload` (not `hello`), otherwise the
+  // missed rebuild silently stays unpainted until the next change.
+  it('emits reload on reconnect when Last-Event-ID is stale', async () => {
+    const app = new Hono()
+    app.get('/_bf/reload', createDevReloader({ distDir: dir, enabled: true }))
+
+    const ctrl = new AbortController()
+    const req = new Request('http://localhost/_bf/reload', {
+      headers: { 'Last-Event-ID': '999' },
+      signal: ctrl.signal,
+    })
+    const res = await app.request(req)
+
+    const reader = res.body!.getReader()
+    const decoder = new TextDecoder()
+    let received = ''
+    for (let i = 0; i < 4 && !received.includes('event: '); i++) {
+      const { value, done } = await reader.read()
+      if (done) break
+      received += decoder.decode(value)
+    }
+
+    expect(received).toContain('event: reload')
+    expect(received).not.toContain('event: hello')
+    expect(received).toContain('data: 1000')
+
+    ctrl.abort()
+    try { await reader.cancel() } catch { /* already closed */ }
+  })
+})

package/src/__tests__/hydration-props-type.test.ts

@@ -0,0 +1,141 @@
+// Hydration-only synthetic props (`__bfParent`, `__bfMount`,
+// `__bfParentProps`, `data-key`) are destructured into every generated
+// SSR template, so the function parameter's type annotation has to
+// declare them — otherwise tsc reports TS2339 ("Property '__bfParent'
+// does not exist on type {…}") across the emitted SSR templates the
+// moment a user runs `tsc --noEmit` or opens the project in an IDE.
+//
+// Pins the codegen contract that:
+//
+//   - The annotation always carries the full hydration-props set,
+//     regardless of whether the user declared a Props type, used
+//     destructured-props, or wrote `function X()` with no parameters.
+//
+// Round 5 / PR #1450: before this fix the destructured-no-Props branch
+// declared only `{ __instanceId?; __bfScope?; __bfChild? }`, and any
+// scaffolded `function Counter()`-style component produced ~6 tsc
+// errors per emitted file.
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '@barefootjs/jsx'
+import { HonoAdapter } from '../adapter'
+
+const adapter = new HonoAdapter()
+
+// The four hydration fields the generated body destructures BEYOND the
+// pre-existing `__instanceId / __bfScope / __bfChild`.
+const HYDRATION_FIELDS = [
+  '__bfParentProps?: string',
+  '__bfParent?: string',
+  '__bfMount?: string',
+  '"data-key"?: string | number',
+] as const
+
+function compileMarkedTemplate(source: string, file = 'Demo.tsx'): string {
+  const result = compileJSX(source, file, { adapter })
+  const errors = result.errors.filter((e) => e.severity === 'error')
+  expect(errors).toEqual([])
+  const tmpl = result.files.find((f) => f.type === 'markedTemplate')
+  expect(tmpl).toBeDefined()
+  return tmpl!.content
+}
+
+describe('Hono adapter — type alias preservation (#1453)', () => {
+  test('seeds reachability from `propsTypeName` so the destructured-props alias carries it', () => {
+    // `${Name}PropsWithHydration = ${propsTypeName} & {…}` is emitted
+    // AFTER the component body is scanned for typedef references, so a
+    // body that only mentions `ButtonPropsWithHydration` would not pull
+    // in `ButtonProps`. Without the alias-aware seed, every emitted
+    // Button-shape (the scaffold's onboarding component) raises TS2304
+    // for the very type it documents.
+    const source = `'use client'
+interface ButtonProps { variant?: 'a' | 'b' }
+export function Button({ variant }: ButtonProps) {
+  return <button>{variant}</button>
+}`
+    const tmpl = compileMarkedTemplate(source, 'Button.tsx')
+    expect(tmpl).toContain('interface ButtonProps')
+    expect(tmpl).toContain('type ButtonPropsWithHydration = ButtonProps &')
+  })
+
+  test('pulls in types reached transitively from the seed', () => {
+    // `ButtonProps` references `ButtonVariant`; once `ButtonProps` is
+    // seeded by `propsTypeName`, the transitive closure must include
+    // `ButtonVariant` too — otherwise `[variant]` lookups raise TS7053
+    // because `variant` widens to `any`.
+    const source = `'use client'
+type ButtonVariant = 'default' | 'destructive'
+interface ButtonProps { variant?: ButtonVariant }
+export function Button({ variant = 'default' }: ButtonProps) {
+  return <button>{variant}</button>
+}`
+    const tmpl = compileMarkedTemplate(source, 'Button.tsx')
+    expect(tmpl).toContain("type ButtonVariant = 'default' | 'destructive'")
+    expect(tmpl).toContain('interface ButtonProps')
+  })
+
+  test('carries forward declarations referenced by named re-exports', () => {
+    // `export type { ButtonVariant }` requires `ButtonVariant` to be
+    // declared locally. Even if the component body never mentions
+    // `ButtonVariant`, the re-export ties it to the public surface.
+    const source = `'use client'
+type ButtonVariant = 'default' | 'destructive'
+export function Button() {
+  return <button />
+}
+export type { ButtonVariant }`
+    const tmpl = compileMarkedTemplate(source, 'Button.tsx')
+    expect(tmpl).toContain("type ButtonVariant = 'default' | 'destructive'")
+    expect(tmpl).toContain('export type { ButtonVariant }')
+  })
+})
+
+describe('Hono adapter — hydration-props type annotation', () => {
+  test('parameterless client component declares the full hydration-props type', () => {
+    // The scaffolded TodoList / "no props" shape — most common case for
+    // a brand-new user. This is the path that used to slip through the
+    // narrow `{ __instanceId; __bfScope; __bfChild }` fallback.
+    const source = `'use client'
+import { createSignal } from '@barefootjs/client'
+export function NoProps() {
+  const [v, setV] = createSignal(0)
+  return <button onClick={() => setV(v() + 1)}>{v()}</button>
+}`
+    const tmpl = compileMarkedTemplate(source, 'NoProps.tsx')
+    for (const field of HYDRATION_FIELDS) {
+      expect(tmpl).toContain(field)
+    }
+  })
+
+  test('destructured-props pattern with a Props type uses the `<Name>PropsWithHydration` alias', () => {
+    // The alias is declared at the top of the file with every hydration
+    // field. Pin its presence so a regression in `generateTypeDeclarations`
+    // doesn't silently strip the synth fields.
+    const source = `'use client'
+import { createSignal } from '@barefootjs/client'
+interface Props { initial: number }
+export function Counter({ initial }: Props) {
+  const [v, setV] = createSignal(initial)
+  return <button onClick={() => setV(v() + 1)}>{v()}</button>
+}`
+    const tmpl = compileMarkedTemplate(source, 'Counter.tsx')
+    expect(tmpl).toContain('type CounterPropsWithHydration = Props & {')
+    for (const field of HYDRATION_FIELDS) {
+      expect(tmpl).toContain(field)
+    }
+  })
+
+  test('SolidJS-style props=Props pattern carries hydration fields inline', () => {
+    const source = `'use client'
+import { createSignal } from '@barefootjs/client'
+interface Props { initial: number }
+export function Counter(props: Props) {
+  const [v, setV] = createSignal(props.initial)
+  return <button onClick={() => setV(v() + 1)}>{v()}</button>
+}`
+    const tmpl = compileMarkedTemplate(source, 'Counter.tsx')
+    for (const field of HYDRATION_FIELDS) {
+      expect(tmpl).toContain(field)
+    }
+  })
+})

package/src/__tests__/manifest-scripts.test.ts

@@ -0,0 +1,87 @@
+import { describe, test, expect } from 'bun:test'
+import { manifestToScriptUrls } from '../app'
+
+describe('manifestToScriptUrls', () => {
+  test('empty manifest returns empty array', () => {
+    expect(manifestToScriptUrls({}, '/static/components')).toEqual([])
+  })
+
+  test('runtime entry is emitted first', () => {
+    const out = manifestToScriptUrls(
+      {
+        Counter: { clientJs: 'components/Counter.client.js' },
+        __barefoot__: { clientJs: 'components/barefoot.js' },
+      },
+      '/static/components',
+    )
+    expect(out[0]).toBe('/static/components/barefoot.js')
+    expect(out).toContain('/static/components/Counter.client.js')
+  })
+
+  test('drops "components/" prefix from manifest paths', () => {
+    expect(
+      manifestToScriptUrls(
+        { Counter: { clientJs: 'components/Counter.client.js' } },
+        '/static/components',
+      ),
+    ).toEqual(['/static/components/Counter.client.js'])
+  })
+
+  test('preserves nested subdirs from manifest', () => {
+    expect(
+      manifestToScriptUrls(
+        { 'ui/button/index': { clientJs: 'components/ui/button/index.client.js' } },
+        '/static/components',
+      ),
+    ).toEqual(['/static/components/ui/button/index.client.js'])
+  })
+
+  test('honors custom base URL', () => {
+    expect(
+      manifestToScriptUrls(
+        {
+          __barefoot__: { clientJs: 'components/barefoot.js' },
+          Counter: { clientJs: 'components/Counter.client.js' },
+        },
+        '/assets/bf',
+      ),
+    ).toEqual([
+      '/assets/bf/barefoot.js',
+      '/assets/bf/Counter.client.js',
+    ])
+  })
+
+  test('strips trailing slash from base URL', () => {
+    expect(
+      manifestToScriptUrls(
+        { Counter: { clientJs: 'components/Counter.client.js' } },
+        '/static/components/',
+      ),
+    ).toEqual(['/static/components/Counter.client.js'])
+  })
+
+  test('skips entries without clientJs', () => {
+    expect(
+      manifestToScriptUrls(
+        {
+          __barefoot__: { clientJs: 'components/barefoot.js' },
+          ServerOnly: {},
+          Counter: { clientJs: 'components/Counter.client.js' },
+        },
+        '/static/components',
+      ),
+    ).toEqual([
+      '/static/components/barefoot.js',
+      '/static/components/Counter.client.js',
+    ])
+  })
+
+  test('passthrough for clientJs paths not under "components/"', () => {
+    expect(
+      manifestToScriptUrls(
+        { Counter: { clientJs: 'Counter.client.js' } },
+        '/static/components',
+      ),
+    ).toEqual(['/static/components/Counter.client.js'])
+  })
+})

package/src/__tests__/scaffold.test.ts

@@ -0,0 +1,209 @@
+// Specification-as-test for `bun create barefootjs@latest <project-name>`
+// with the default Hono (Cloudflare Workers) adapter.
+//
+// This file verifies that the Hono scaffold satisfies both the
+// cross-adapter contract defined in `create-barefootjs` and the
+// Hono-specific wiring (wrangler.jsonc, CF Workers deploy, script shapes).
+//
+// The happy-path tests are gated by the same network flag as the
+// companion mojo scaffold test, because `barefoot init` probes the live
+// UI registry over the network:
+//
+//   BAREFOOT_CREATE_INTEGRATION=1 bun test src/__tests__/scaffold.test.ts
+
+import { describe, test, expect, beforeAll } from 'bun:test'
+import { existsSync, readFileSync } from 'node:fs'
+import path from 'node:path'
+import { spawnSync } from 'node:child_process'
+import { mkdtempSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { fileURLToPath } from 'node:url'
+import {
+  assertScaffoldContract,
+  ensureCreateCli,
+  type ScaffoldFacts,
+} from '@barefootjs/adapter-tests'
+
+// ---------------------------------------------------------------------------
+// Helpers (thin wrappers around the compiled create-barefootjs CLI)
+// ---------------------------------------------------------------------------
+
+const CREATE_PKG_DIR = path.join(
+  fileURLToPath(new URL('.', import.meta.url)),
+  '../../../create-barefootjs',
+)
+const CREATE_CLI = path.join(CREATE_PKG_DIR, 'dist', 'index.js')
+
+function mktmp(): string {
+  return mkdtempSync(path.join(tmpdir(), 'bf-hono-scaffold-test-'))
+}
+
+interface RunResult {
+  exitCode: number | null
+  stdout: string
+  stderr: string
+}
+
+function runCreate(
+  args: string[],
+  opts: { cwd: string; env?: Record<string, string> },
+): RunResult {
+  ensureCreateCli(CREATE_PKG_DIR)
+  const result = spawnSync('node', [CREATE_CLI, ...args], {
+    cwd: opts.cwd,
+    env: {
+      ...process.env,
+      ...opts.env,
+      // Remove PM detection signal so commands are deterministic.
+      npm_config_user_agent: undefined,
+    },
+    encoding: 'utf-8',
+  })
+  return {
+    exitCode: result.status,
+    stdout: result.stdout ?? '',
+    stderr: result.stderr ?? '',
+  }
+}
+
+const INTEGRATION = process.env.BAREFOOT_CREATE_INTEGRATION === '1'
+
+// ---------------------------------------------------------------------------
+// Happy-path scenario — `bun create barefootjs@latest demo-app` (Hono default)
+// ---------------------------------------------------------------------------
+
+describe.skipIf(!INTEGRATION)(
+  'Scenario: bun create barefootjs@latest <project-name> (Hono adapter)',
+  () => {
+    let result: RunResult
+    let projectDir: string
+
+    beforeAll(() => {
+      const cwd = mktmp()
+      result = runCreate(['demo-app'], { cwd })
+      projectDir = path.join(cwd, 'demo-app')
+    })
+
+    test('satisfies the cross-adapter scaffold contract', () => {
+      assertScaffoldContract({
+        exitCode: result.exitCode,
+        stdout: result.stdout,
+        projectDir,
+        adapterPackageName: '@barefootjs/hono',
+        devReload: {
+          // Hono CF uses `wrangler dev --live-reload`; wrangler injects
+          // its own reload client, so no scaffold-side snippet is needed.
+          subscribesBrowserInDev: true,
+          gatedToDev: true,
+          // No shared SSE protocol — wrangler manages the reload channel.
+          sentinelSseEndpoint: null,
+        },
+      } satisfies ScaffoldFacts)
+    })
+
+    // -------------------------------------------------------------------------
+    // Hono-specific wiring
+    // -------------------------------------------------------------------------
+
+    test('hono runtime dep is present alongside the adapter', () => {
+      const pkg = JSON.parse(
+        readFileSync(path.join(projectDir, 'package.json'), 'utf-8'),
+      ) as { dependencies?: Record<string, string> }
+      expect(pkg.dependencies?.['hono']).toBeDefined()
+    })
+
+    test('wrangler.jsonc is present (CF Workers target)', () => {
+      expect(existsSync(path.join(projectDir, 'wrangler.jsonc'))).toBe(true)
+    })
+
+    test('wrangler.jsonc name matches the target directory', () => {
+      // Without this, every scaffold would deploy as the generic
+      // "my-app" Worker and overwrite each other on shared CF accounts.
+      const raw = readFileSync(path.join(projectDir, 'wrangler.jsonc'), 'utf-8')
+      const wrangler = JSON.parse(raw.replace(/^\s*\/\/.*$/gm, ''))
+      expect(wrangler.name).toBe('demo-app')
+    })
+
+    test('dev script wires bf build --watch + unocss + wrangler dev --live-reload', () => {
+      const pkg = JSON.parse(
+        readFileSync(path.join(projectDir, 'package.json'), 'utf-8'),
+      ) as { scripts?: Record<string, string> }
+      expect(pkg.scripts?.dev).toContain('bf build --watch')
+      expect(pkg.scripts?.dev).toContain('unocss --watch')
+      expect(pkg.scripts?.dev).toContain('wrangler dev --live-reload')
+    })
+
+    test('deploy script targets Cloudflare Workers', () => {
+      expect(result.stdout).toContain('Deploy:')
+      expect(result.stdout).toMatch(/npm run deploy\s+# deploy to Cloudflare Workers/)
+    })
+
+    test('multi-segment positional path sanitizes name + cd uses full path', () => {
+      const sandbox = mktmp()
+      const r = runCreate(['foo/bar/bazz'], { cwd: sandbox })
+      expect(r.exitCode).toBe(0)
+      const nested = path.join(sandbox, 'foo', 'bar', 'bazz')
+      const nestedPkg = JSON.parse(
+        readFileSync(path.join(nested, 'package.json'), 'utf-8'),
+      ) as { name: string }
+      expect(nestedPkg.name).toBe('bazz')
+      const nestedRaw = readFileSync(path.join(nested, 'wrangler.jsonc'), 'utf-8')
+      const nestedWrangler = JSON.parse(nestedRaw.replace(/^\s*\/\/.*$/gm, ''))
+      expect(nestedWrangler.name).toBe('bazz')
+      expect(r.stdout).toMatch(/cd foo\/bar\/bazz/)
+    })
+  },
+)
+
+// ---------------------------------------------------------------------------
+// Package-manager scenario — the detected PM dictates the post-scaffold guide
+// ---------------------------------------------------------------------------
+
+describe.skipIf(!INTEGRATION)(
+  'Scenario: the invoking package manager dictates the next-step commands',
+  () => {
+    interface PmCase {
+      pm: 'npm' | 'bun' | 'pnpm' | 'yarn'
+      env: Record<string, string>
+      install: string
+      run: string
+    }
+    const cases: PmCase[] = [
+      {
+        pm: 'npm',
+        env: { npm_config_user_agent: 'npm/10.0.0 node/v22.0.0 darwin arm64' },
+        install: 'npm install',
+        run: 'npm run dev',
+      },
+      {
+        pm: 'bun',
+        env: { npm_config_user_agent: 'bun/1.3.0' },
+        install: 'bun install',
+        run: 'bun run dev',
+      },
+      {
+        pm: 'pnpm',
+        env: { npm_config_user_agent: 'pnpm/9.0.0' },
+        install: 'pnpm install',
+        run: 'pnpm dev',
+      },
+      {
+        pm: 'yarn',
+        env: { npm_config_user_agent: 'yarn/4.0.0' },
+        install: 'yarn',
+        run: 'yarn dev',
+      },
+    ]
+
+    test.each(cases)(
+      'when invoked via $pm, the post-scaffold guide uses $pm commands',
+      ({ env, install, run }) => {
+        const cwd = mktmp()
+        const r = runCreate(['demo-app'], { cwd, env })
+        expect(r.exitCode).toBe(0)
+        expect(r.stdout).toContain(install)
+        expect(r.stdout).toContain(run)
+      },
+    )
+  },
+)

package/src/__tests__/ssr-context-bridge.test.ts

@@ -0,0 +1,110 @@
+/**
+ * SSR context-bridge end-to-end (#1084).
+ *
+ * Verifies that BarefootJS components using `<Context.Provider>` plus
+ * `useContext` actually flow values through Hono's per-render context stack
+ * at SSR time. This is the bonus path of Option B: not only does the SSR
+ * template no longer crash with `ReferenceError: useContext is not defined`,
+ * the rendered HTML reflects the provided value rather than the context
+ * default.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { renderHonoComponent } from '../test-render'
+import { HonoAdapter } from '../adapter/hono-adapter'
+
+describe('SSR context bridge (#1084 / Option B)', () => {
+  test('useContext returns the value provided by an enclosing Context.Provider at SSR', async () => {
+    const html = await renderHonoComponent({
+      adapter: new HonoAdapter(),
+      source: `
+        'use client'
+        import { createContext, useContext } from '@barefootjs/client'
+
+        const ThemeContext = createContext('light')
+
+        function ThemeLabel() {
+          const theme = useContext(ThemeContext)
+          return <span class="theme">{theme}</span>
+        }
+
+        export function ThemeRoot() {
+          return (
+            <div class="root">
+              <ThemeContext.Provider value="dark">
+                <ThemeLabel />
+              </ThemeContext.Provider>
+            </div>
+          )
+        }
+      `,
+    })
+
+    expect(html).toContain('class="theme"')
+    // The provided value flows through to the consumer at SSR.
+    expect(html).toContain('>dark<')
+    expect(html).not.toContain('>light<')
+  })
+
+  test('useContext falls back to defaultValue when no provider is in scope', async () => {
+    const html = await renderHonoComponent({
+      adapter: new HonoAdapter(),
+      source: `
+        'use client'
+        import { createContext, useContext } from '@barefootjs/client'
+
+        const LocaleContext = createContext('en')
+
+        export function LocaleLabel() {
+          const locale = useContext(LocaleContext)
+          return <span>{locale}</span>
+        }
+      `,
+    })
+    expect(html).toContain('>en<')
+  })
+
+  test('reads a memo body that depends on a context value at SSR', async () => {
+    // Mirrors the pattern blocking step 2 of #1080: a primitive consumes the
+    // chart container's scales via useContext and computes geometry inside a
+    // createMemo. The memo body runs at SSR and used to throw because
+    // useContext was undefined; now it produces real markup.
+    const html = await renderHonoComponent({
+      adapter: new HonoAdapter(),
+      source: `
+        'use client'
+        import { createContext, createMemo, useContext } from '@barefootjs/client'
+
+        const GridContext = createContext({ ticks: [] })
+
+        function GridLines() {
+          const ctx = useContext(GridContext)
+          const lines = createMemo(() => ctx.ticks.map((y) => ({ y })))
+          return (
+            <g class="grid">
+              {lines().map((l) => <line key={l.y} y1={l.y} y2={l.y} />)}
+            </g>
+          )
+        }
+
+        export function Chart() {
+          return (
+            <svg>
+              <GridContext.Provider value={{ ticks: [10, 20, 30] }}>
+                <GridLines />
+              </GridContext.Provider>
+            </svg>
+          )
+        }
+      `,
+    })
+
+    // Three <line> elements emitted at SSR — proving the memo body executed
+    // with a populated context (vs. the empty default).
+    const lineMatches = html.match(/<line\b/g) ?? []
+    expect(lineMatches.length).toBe(3)
+    expect(html).toMatch(/y1="10"/)
+    expect(html).toMatch(/y1="20"/)
+    expect(html).toMatch(/y1="30"/)
+  })
+})