@jasonshimmy/vite-plugin-cer-app 0.23.1 → 0.24.0

package/e2e/kitchen-sink/app/pages/navigate-test.ts

@@ -1,16 +0,0 @@
-// Tests programmatic navigation via navigateTo().
-component('page-navigate-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="navigate-test-heading">Navigate Test</h1>
-      <button data-cy="navigate-to-about" @click="${() => navigateTo('/about')}">
-        Go to About
-      </button>
-      <button data-cy="navigate-to-route-info" @click="${() => navigateTo('/route-info')}">
-        Go to Route Info
-      </button>
-    </div>
-  `
-})
-
-export const meta = { layout: 'minimal' }

package/e2e/kitchen-sink/app/pages/observability-test.ts

@@ -1,25 +0,0 @@
-component('page-observability-test', () => {
-  const { public: pub } = useRuntimeConfig()
-
-  // Verify that accessing .private in a browser context throws the Proxy error.
-  // The component render function runs client-side (inside the custom element upgrade),
-  // so typeof window !== 'undefined' is true here and the Proxy fires.
-  let privateError = ''
-  if (typeof window !== 'undefined') {
-    try {
-      const cfg = useRuntimeConfig()
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      void (cfg as any).private
-    } catch (e) {
-      privateError = (e as Error).message
-    }
-  }
-
-  return html`
-    <div>
-      <h1 data-cy="observability-heading">Observability Test</h1>
-      <div data-cy="public-app-name">${pub.appName as string}</div>
-      <div data-cy="private-proxy-error">${privateError}</div>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/per-route-error-test.error.ts

@@ -1,13 +0,0 @@
-// P2-2: Co-located per-route error component for per-route-error-test.ts.
-// Rendered instead of the global error component when this page's loader throws.
-component('page-per-route-error-test-error', () => {
-  const props = useProps({ error: '', status: '' })
-
-  return html`
-    <div data-cy="per-route-error">
-      <h1>Per-Route Error</h1>
-      <p data-cy="per-route-error-message">${props.error || 'unknown error'}</p>
-      <p data-cy="per-route-error-status">${props.status || '500'}</p>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/per-route-error-test.ts

@@ -1,15 +0,0 @@
-// P2-2: Page with a co-located error component.
-// The loader throws, so the co-located per-route-error-test.error.ts is rendered.
-component('page-per-route-error-test', () => {
-  return html`
-    <div>
-      <h1>Per-Route Error Test</h1>
-    </div>
-  `
-})
-
-export async function loader() {
-  const err = new Error('per-route-error intentional') as Error & { status?: number }
-  err.status = 422
-  throw err
-}

package/e2e/kitchen-sink/app/pages/plugin-dsd-test.ts

@@ -1,10 +0,0 @@
-export default component('page-plugin-dsd-test', () => {
-  return html`
-    <div data-cy="plugin-dsd-test-page">
-      <h1 data-cy="plugin-dsd-heading">Plugin DSD Test</h1>
-      <ks-plugin-card>
-        <span data-cy="plugin-card-content">Card content from plugin component</span>
-      </ks-plugin-card>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/render-error-test.ts

@@ -1,12 +0,0 @@
-/**
- * Kitchen-sink page for P0-1: SSR render error handling.
- *
- * This page's component throws during render to simulate an unexpected error
- * in the rendering pipeline. In SSR mode the server must respond with a 500
- * page rather than crashing or hanging indefinitely.
- */
-component('page-render-error-test', () => {
-  throw new Error('Intentional render error for P0-1 testing')
-  // unreachable
-  return html`<div></div>`
-})

package/e2e/kitchen-sink/app/pages/render-server-test.ts

@@ -1,12 +0,0 @@
-component('page-render-server-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="render-server-heading">Render Server Test</h1>
-      <p>This page always renders server-side.</p>
-    </div>
-  `
-})
-
-export const meta = {
-  render: 'server',
-}

package/e2e/kitchen-sink/app/pages/render-spa-test.ts

@@ -1,12 +0,0 @@
-component('page-render-spa-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="render-spa-heading">Render SPA Test</h1>
-      <p>This page is client-only.</p>
-    </div>
-  `
-})
-
-export const meta = {
-  render: 'spa',
-}

package/e2e/kitchen-sink/app/pages/route-info.ts

@@ -1,14 +0,0 @@
-// Tests that useRoute() returns the correct path, params, query, and meta.
-component('page-route-info', () => {
-  const route = useRoute()
-
-  return html`
-    <div>
-      <h1 data-cy="route-info-heading">Route Info</h1>
-      <p data-cy="route-path">Path: <code>${route.path}</code></p>
-      <p data-cy="route-meta-title">Meta title: <code>${route.meta?.title ?? 'none'}</code></p>
-    </div>
-  `
-})
-
-export const meta = { layout: 'minimal', title: 'Route Info Page' }

package/e2e/kitchen-sink/app/pages/seo-test.ts

@@ -1,23 +0,0 @@
-component('page-seo-test', () => {
-  useSeoMeta({
-    title: 'SEO Test — Kitchen Sink',
-    description: 'A test page for useSeoMeta().',
-    ogTitle: 'SEO Test OG Title',
-    ogDescription: 'SEO Test OG description.',
-    ogImage: 'https://example.com/og/seo-test.png',
-    ogUrl: 'https://example.com/seo-test',
-    ogType: 'website',
-    ogSiteName: 'Kitchen Sink',
-    twitterCard: 'summary_large_image',
-    twitterTitle: 'SEO Test Twitter Title',
-    twitterSite: '@ks',
-    canonical: 'https://example.com/seo-test',
-  })
-
-  return html`
-    <div>
-      <h1 data-cy="seo-test-heading">SEO Test</h1>
-      <p data-cy="seo-test-description">This page sets SEO tags via <code>useSeoMeta()</code>.</p>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/session-rotation-test.ts

@@ -1,25 +0,0 @@
-// P1-3: Session secret rotation test page.
-// The loader runs server-side where runtimeConfig.private (sessionSecret) is
-// available. It signs a session with the configured secret(s) and sets the
-// httpOnly cookie. The value returned by the loader is displayed by the
-// component, confirming the loader ran successfully.
-// (set → response cookie is verified by the companion e2e cookie assertion;
-//  the signed token itself is what proves the secret is configured correctly.)
-export const loader = async () => {
-  const session = useSession<{ user: string }>()
-  await session.set({ user: 'rotation-user' })
-  return { user: 'rotation-user' }
-}
-
-component('page-session-rotation-test', () => {
-  const ssrData = usePageData<{ user: string }>()
-
-  return html`
-    <div>
-      <h1 data-cy="session-rotation-heading">Session Rotation Test</h1>
-      <p data-cy="session-read">${ssrData?.user ?? 'loading…'}</p>
-    </div>
-  `
-})
-
-export const meta = { layout: 'default' }

package/e2e/kitchen-sink/app/pages/use-state-test.ts

@@ -1,37 +0,0 @@
-// Tests useState() — globally-keyed reactive state shared between layout and page.
-// The loader sets pageTitle before rendering so the layout sees it on SSR.
-// The page also exposes a button to change the title client-side to verify
-// that the layout re-renders reactively when useState is mutated.
-
-export const loader = async () => {
-  useState<string>('pageTitle').value = 'useState Page Title'
-  return {}
-}
-
-component('page-use-state-test', () => {
-  const pageTitle = useState<string>('pageTitle')
-
-  function changeTitle() {
-    pageTitle.value = 'Title Updated!'
-  }
-
-  function resetTitle() {
-    pageTitle.value = 'useState Page Title'
-  }
-
-  return html`
-    <div>
-      <h1 data-cy="use-state-heading">${pageTitle.value}</h1>
-      <p data-cy="use-state-description">
-        Tests <code>useState()</code> — globally-keyed reactive state shared
-        between this page and the layout.
-      </p>
-      <p>
-        Current title:
-        <strong data-cy="page-title-display">${pageTitle.value}</strong>
-      </p>
-      <button data-cy="change-title" @click="${changeTitle}">Change Title</button>
-      <button data-cy="reset-title" @click="${resetTitle}">Reset Title</button>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/plugins/01.setup.ts

@@ -1,7 +0,0 @@
-// Plugin 01: provides a greeting string via app.provide()
-export default {
-  name: 'ks-setup',
-  setup(app: any) {
-    app.provide('ks-greeting', 'Hello from ks-setup plugin!')
-  },
-}

package/e2e/kitchen-sink/app/plugins/02.ks-plugin-components.ts

@@ -1,27 +0,0 @@
-// Simulates a third-party component library imported as a plugin side-effect.
-// This component is NOT in app/components/ (auto-scanned), so it can only be
-// registered by this plugin import — exactly like @jasonshimmy/cer-material or
-// any other npm CER component package.
-//
-// In SSR/SSG the server bundle must share one CER runtime registry with this
-// plugin so that renderToStreamWithJITCSSDSD can emit DSD for ks-plugin-card.
-import { component, html, css, useStyle } from '@jasonshimmy/custom-elements-runtime'
-
-component('ks-plugin-card', () => {
-  useStyle(() => css`
-    :host { display: block; }
-    .card {
-      background: #f0fdf4;
-      border: 1px solid #bbf7d0;
-      border-radius: 8px;
-      padding: 16px;
-    }
-  `)
-  return html`
-    <div class="card" data-cy="ks-plugin-card">
-      <slot></slot>
-    </div>
-  `
-})
-
-export default { name: 'ks-plugin-components' }

package/e2e/kitchen-sink/cer-auto-imports.d.ts

@@ -1,51 +0,0 @@
-// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app
-// Do not edit — regenerated automatically on dev server start and build.
-
-export {}
-
-declare global {
-  const component: typeof import('@jasonshimmy/custom-elements-runtime')['component']
-  const html: typeof import('@jasonshimmy/custom-elements-runtime')['html']
-  const css: typeof import('@jasonshimmy/custom-elements-runtime')['css']
-  const ref: typeof import('@jasonshimmy/custom-elements-runtime')['ref']
-  const computed: typeof import('@jasonshimmy/custom-elements-runtime')['computed']
-  const watch: typeof import('@jasonshimmy/custom-elements-runtime')['watch']
-  const watchEffect: typeof import('@jasonshimmy/custom-elements-runtime')['watchEffect']
-  const useProps: typeof import('@jasonshimmy/custom-elements-runtime')['useProps']
-  const useEmit: typeof import('@jasonshimmy/custom-elements-runtime')['useEmit']
-  const useOnConnected: typeof import('@jasonshimmy/custom-elements-runtime')['useOnConnected']
-  const useOnDisconnected: typeof import('@jasonshimmy/custom-elements-runtime')['useOnDisconnected']
-  const useOnAttributeChanged: typeof import('@jasonshimmy/custom-elements-runtime')['useOnAttributeChanged']
-  const useOnError: typeof import('@jasonshimmy/custom-elements-runtime')['useOnError']
-  const useStyle: typeof import('@jasonshimmy/custom-elements-runtime')['useStyle']
-  const useDesignTokens: typeof import('@jasonshimmy/custom-elements-runtime')['useDesignTokens']
-  const useGlobalStyle: typeof import('@jasonshimmy/custom-elements-runtime')['useGlobalStyle']
-  const useExpose: typeof import('@jasonshimmy/custom-elements-runtime')['useExpose']
-  const useSlots: typeof import('@jasonshimmy/custom-elements-runtime')['useSlots']
-  const provide: typeof import('@jasonshimmy/custom-elements-runtime')['provide']
-  const inject: typeof import('@jasonshimmy/custom-elements-runtime')['inject']
-  const createComposable: typeof import('@jasonshimmy/custom-elements-runtime')['createComposable']
-  const nextTick: typeof import('@jasonshimmy/custom-elements-runtime')['nextTick']
-  const defineModel: typeof import('@jasonshimmy/custom-elements-runtime')['defineModel']
-  const getCurrentComponentContext: typeof import('@jasonshimmy/custom-elements-runtime')['getCurrentComponentContext']
-  const isReactiveState: typeof import('@jasonshimmy/custom-elements-runtime')['isReactiveState']
-  const unsafeHTML: typeof import('@jasonshimmy/custom-elements-runtime')['unsafeHTML']
-  const decodeEntities: typeof import('@jasonshimmy/custom-elements-runtime')['decodeEntities']
-  const useTeleport: typeof import('@jasonshimmy/custom-elements-runtime')['useTeleport']
-
-  const when: typeof import('@jasonshimmy/custom-elements-runtime/directives')['when']
-  const each: typeof import('@jasonshimmy/custom-elements-runtime/directives')['each']
-  const match: typeof import('@jasonshimmy/custom-elements-runtime/directives')['match']
-  const anchorBlock: typeof import('@jasonshimmy/custom-elements-runtime/directives')['anchorBlock']
-
-  const useHead: typeof import('@jasonshimmy/vite-plugin-cer-app/composables')['useHead']
-  const usePageData: typeof import('@jasonshimmy/vite-plugin-cer-app/composables')['usePageData']
-  const useInject: typeof import('@jasonshimmy/vite-plugin-cer-app/composables')['useInject']
-
-  const useKsCounter: typeof import('./app/composables/useKsCounter')['useKsCounter']
-
-  // SSR loader data injected as window.__CER_DATA__ by the server.
-  // Consumed once by usePageData() during client hydration.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var __CER_DATA__: any
-}

package/e2e/kitchen-sink/cer-env.d.ts

@@ -1,35 +0,0 @@
-// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app
-// Do not edit — regenerated automatically on dev server start and build.
-
-declare module 'virtual:cer-routes' {
-  import type { Route } from '@jasonshimmy/custom-elements-runtime/router'
-  const routes: Route[]
-  export default routes
-}
-
-declare module 'virtual:cer-layouts' {}
-
-declare module 'virtual:cer-plugins' {
-  import type { AppPlugin } from '@jasonshimmy/vite-plugin-cer-app/types'
-  const plugins: AppPlugin[]
-  export default plugins
-}
-
-declare module 'virtual:cer-composables' {
-  export { useKsCounter } from './app/composables/useKsCounter'
-}
-
-declare module 'virtual:cer-middleware' {
-  const middleware: Record<string, Function>
-  export { middleware }
-}
-
-declare module 'virtual:cer-loading' {
-  export const hasLoading: boolean
-  export const loadingTag: string | null
-}
-
-declare module 'virtual:cer-error' {
-  export const hasError: boolean
-  export const errorTag: string | null
-}

package/e2e/kitchen-sink/cer-tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "~/*": [
-        "./app/*"
-      ],
-      "~/pages/*": [
-        "./app/pages/*"
-      ],
-      "~/layouts/*": [
-        "./app/layouts/*"
-      ],
-      "~/components/*": [
-        "./app/components/*"
-      ],
-      "~/composables/*": [
-        "./app/composables/*"
-      ],
-      "~/plugins/*": [
-        "./app/plugins/*"
-      ],
-      "~/middleware/*": [
-        "./app/middleware/*"
-      ],
-      "~/assets/*": [
-        "./app/assets/*"
-      ]
-    }
-  }
-}

package/e2e/kitchen-sink/cer.config.ts

@@ -1,43 +0,0 @@
-import { appendFileSync } from 'node:fs'
-import type { RequestHookContext, ResponseHookContext, ErrorHookContext } from '@jasonshimmy/vite-plugin-cer-app/types'
-
-const LOG_FILE = '/tmp/cer-hooks-test.log'
-
-// Kitchen sink configuration — mode is overridden by --mode CLI flag
-export default {
-  content: {},
-  jitCss: {
-    customColors: {
-      // A distinctive purple used to verify customColors reaches the runtime.
-      brand: { '500': '#7c3aed', '100': '#ede9fe', '900': '#4c1d95' },
-    },
-  },
-  ssg: { routes: 'auto', concurrency: 2 },
-  autoImports: { runtime: true, components: true, composables: true },
-  runtimeConfig: {
-    public: {
-      appName: 'Kitchen Sink',
-    },
-    private: {
-      // Resolved from SESSION_SECRET env var at server startup.
-      // A hardcoded fallback is used here so e2e tests work without env setup.
-      sessionSecret: 'kitchen-sink-e2e-test-secret-at-least-32-chars!',
-    },
-  },
-  // i18n: prefix_except_default keeps default-locale (en) URLs unchanged so all
-  // existing e2e tests continue to pass.  Only /fr-prefixed variants are new.
-  i18n: {
-    locales: ['en', 'fr'],
-    defaultLocale: 'en',
-    strategy: 'prefix_except_default',
-  },
-  onRequest(ctx: RequestHookContext) {
-    try { appendFileSync(LOG_FILE, `REQUEST ${ctx.method} ${ctx.path}\n`) } catch { /* ignore */ }
-  },
-  onResponse(ctx: ResponseHookContext) {
-    try { appendFileSync(LOG_FILE, `RESPONSE ${ctx.statusCode} ${ctx.method} ${ctx.path} ${ctx.duration}ms\n`) } catch { /* ignore */ }
-  },
-  onError(_err: unknown, ctx: ErrorHookContext) {
-    try { appendFileSync(LOG_FILE, `ERROR ${ctx.type} ${ctx.path}\n`) } catch { /* ignore */ }
-  },
-}

package/e2e/kitchen-sink/content/01.guides/01.index.md

@@ -1,8 +0,0 @@
----
-title: Guides Home
-description: Landing page for the guides section.
----
-
-# Guides Home
-
-Welcome to the ordered guides section.

package/e2e/kitchen-sink/content/01.guides/02.intro.md

@@ -1,8 +0,0 @@
----
-title: Intro Guide
-description: The first ordered guide.
----
-
-# Intro Guide
-
-This guide should appear before the advanced guide.

package/e2e/kitchen-sink/content/01.guides/10.advanced.md

@@ -1,8 +0,0 @@
----
-title: Advanced Guide
-description: The later ordered guide.
----
-
-# Advanced Guide
-
-This guide should appear after the intro guide.

package/e2e/kitchen-sink/content/blog/2026-04-01-hello.md

@@ -1,26 +0,0 @@
----
-title: Hello World
-description: The first content blog post — tests excerpt and TOC extraction.
-date: 2026-04-01
-draft: false
----
-
-# Hello World
-
-Welcome to the content layer.
-
-<!-- more -->
-
-## Introduction
-
-This post exercises the `<!-- more -->` excerpt boundary.
-
-## Features
-
-- Parsed frontmatter
-- TOC extraction
-- Excerpt support
-
-## Conclusion
-
-That's all for now.

package/e2e/kitchen-sink/content/blog/2026-04-02-draft.md

@@ -1,10 +0,0 @@
----
-title: Draft Post
-description: This post is a draft and should be excluded from production builds.
-date: 2026-04-02
-draft: true
----
-
-# Draft Post
-
-This post should never appear in production because `draft: true`.

package/e2e/kitchen-sink/content/blog/index.md

@@ -1,8 +0,0 @@
----
-title: Blog
-description: All blog posts — used as a listing page in content tests.
----
-
-# Blog
-
-Browse all posts below.

package/e2e/kitchen-sink/content/blog/no-frontmatter.md

@@ -1,7 +0,0 @@
-# Derived From Body
-
-This description is derived from the first paragraph because no frontmatter is present.
-
-## More Content
-
-Additional body content below the first paragraph.

package/e2e/kitchen-sink/content/docs/getting-started.md

@@ -1,48 +0,0 @@
----
-title: Getting Started
-description: How to install and configure the content layer — tests TOC depth and heading ids.
----
-
-# Getting Started
-
-This guide walks you through installation and basic usage.
-
-<ks-badge>Docs Badge</ks-badge>
-
-## Installation
-
-Run the following command:
-
-```sh
-npm install @jasonshimmy/vite-plugin-cer-app
-```
-
-## Configuration
-
-Add the `content` option to `cer.config.ts`:
-
-```ts
-export default defineConfig({
-  content: {},
-})
-```
-
-### Options
-
-| Option | Default | Description |
-|---|---|---|
-| `dir` | `'content'` | Content directory relative to `app/`. |
-| `drafts` | `false` | Include draft items in production builds. |
-
-## Usage
-
-Use `queryContent()` in any page or loader:
-
-```ts
-const posts = await queryContent('/blog').find()
-```
-
-## Next Steps
-
-- Read the [full docs](https://example.com)
-- Join the community

package/e2e/kitchen-sink/content/index.md

@@ -1,16 +0,0 @@
----
-title: Welcome
-description: Kitchen sink home content page — verifies root content query.
----
-
-# Welcome
-
-This is the **root content** item (`_path: '/'`).
-
-<!-- more -->
-
-Below the excerpt boundary.
-
-- Item A
-- Item B
-- Item C

package/e2e/kitchen-sink/server/api/echo.ts

@@ -1,12 +0,0 @@
-// Echo endpoint — used by e2e tests to verify req.body and req.query parsing.
-//
-//   POST /api/echo        { ...any }  → echoes the JSON body back
-//   GET  /api/echo?k=v              → echoes the query string back
-
-export const GET = (req: any, res: any) => {
-  res.json({ query: req.query })
-}
-
-export const POST = (req: any, res: any) => {
-  res.json({ echo: req.body })
-}

package/e2e/kitchen-sink/server/api/health.ts

@@ -1,3 +0,0 @@
-export const GET = (_req: any, res: any) => {
-  res.json({ status: 'ok', service: 'kitchen-sink' })
-}

package/e2e/kitchen-sink/server/api/posts/[slug].ts

@@ -1,11 +0,0 @@
-import { posts } from '../../data/posts'
-
-export const GET = (req: any, res: any) => {
-  const { slug } = req.params
-  const post = posts.find((p) => p.slug === slug)
-  if (!post) {
-    res.statusCode = 404
-    return res.json({ error: 'Not found' })
-  }
-  res.json(post)
-}

package/e2e/kitchen-sink/server/api/posts/index.ts

@@ -1,5 +0,0 @@
-import { posts } from '../../data/posts'
-
-export const GET = (_req: any, res: any) => {
-  res.json(posts)
-}

package/e2e/kitchen-sink/server/api/session.ts

@@ -1,23 +0,0 @@
-// Session API endpoints — used by e2e tests to verify useSession() round-trips.
-//
-//   GET    /api/session  → { userId: string | null }
-//   POST   /api/session  → creates a session with userId = 'test-user'
-//   DELETE /api/session  → clears the session
-import { useSession } from '@jasonshimmy/vite-plugin-cer-app/composables'
-
-export const GET = async (_req: any, res: any) => {
-  const session = useSession<{ userId: string }>()
-  const data = await session.get()
-  res.json({ userId: data?.userId ?? null })
-}
-
-export const POST = async (_req: any, res: any) => {
-  const session = useSession<{ userId: string }>()
-  await session.set({ userId: 'test-user' })
-  res.json({ ok: true })
-}
-
-export const DELETE = async (_req: any, res: any) => {
-  await useSession().clear()
-  res.json({ ok: true })
-}