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

package/e2e/kitchen-sink/app/pages/async-component-test.ts

@@ -1,18 +0,0 @@
-// P2-4: Page that uses defineAsyncComponent to lazy-load a component.
-defineAsyncComponent(
-  'ks-async-loaded',
-  () => Promise.resolve(() => html`<p data-cy="async-component-content">Async component loaded!</p>`),
-  {
-    loading: () => html`<p data-cy="async-loading">Loading async component…</p>`,
-    error: () => html`<p data-cy="async-load-error">Failed to load</p>`,
-  },
-)
-
-component('page-async-component-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="async-page-heading">Async Component Test</h1>
-      <ks-async-loaded></ks-async-loaded>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/blog/[slug].ts

@@ -1,59 +0,0 @@
-interface Post {
-  slug: string
-  title: string
-  body: string
-}
-
-component('page-blog-slug', () => {
-  const props = useProps<{ slug: string }>({ slug: '' })
-  const ssrData = usePageData<Post>()
-  // Captured once at element-creation time (during the hydration re-render).
-  // 'ssr' proves usePageData() was non-null — the queueMicrotask timing fix works.
-  const dataSource = ssrData ? 'ssr' : 'client'
-
-  const title = ref(ssrData?.title ?? '')
-  const body = ref(ssrData?.body ?? '')
-
-  useOnConnected(async () => {
-    if (ssrData) return  // already hydrated
-    if (!props.slug) return
-    try {
-      const r = await fetch(`/api/posts/${props.slug}`)
-      if (r.ok) {
-        const post: Post | null = await r.json()
-        if (post) { title.value = post.title; body.value = post.body; return }
-      }
-    } catch { /* no API server (SPA mode) */ }
-    // SPA fallback: import post data directly from the source module
-    const { posts } = await import('../../../server/data/posts')
-    const post = posts.find((p) => p.slug === props.slug)
-    if (post) { title.value = post.title; body.value = post.body }
-  })
-
-  return html`
-    <div>
-      <span data-cy="blog-detail-data-source" hidden>${dataSource}</span>
-      <h1 data-cy="post-title">${title.value || props.slug}</h1>
-      <p data-cy="post-slug"><em>slug: <code>${props.slug}</code></em></p>
-      <div data-cy="post-body">${body.value}</div>
-      <p><a href="/blog" data-cy="post-back">← Back to blog</a></p>
-    </div>
-  `
-})
-
-export const loader = async ({ params }: { params: { slug: string } }) => {
-  const { posts } = await import('../../../server/data/posts')
-  const post = posts.find((p) => p.slug === params.slug)
-  if (!post) throw new Error('Post not found')
-  return { slug: post.slug, title: post.title, body: post.body }
-}
-
-export const meta = {
-  ssg: {
-    revalidate: 60,
-    paths: async () => [
-      { params: { slug: 'first-post' } },
-      { params: { slug: 'second-post' } },
-    ],
-  },
-}

package/e2e/kitchen-sink/app/pages/blog/index.ts

@@ -1,51 +0,0 @@
-interface Post {
-  slug: string
-  title: string
-  excerpt: string
-}
-
-component('page-blog', () => {
-  useHead({ title: 'Blog — Kitchen Sink' })
-
-  const ssrData = usePageData<{ posts: Post[] }>()
-  const posts = ref<Post[]>(ssrData?.posts ?? [])
-  // Captured once at element-creation time (during the hydration re-render).
-  // 'ssr' proves usePageData() was non-null — the queueMicrotask timing fix works.
-  // 'client' means __CER_DATA__ was deleted before setup ran (regression).
-  const dataSource = ssrData ? 'ssr' : 'client'
-
-  useOnConnected(async () => {
-    if (ssrData) return  // already hydrated — skip client fetch
-    try {
-      const r = await fetch('/api/posts')
-      if (r.ok) {
-        const data: Post[] = await r.json()
-        if (Array.isArray(data)) { posts.value = data; return }
-      }
-    } catch { /* no API server (SPA mode) */ }
-    // SPA fallback: import post data directly from the source module
-    const { posts: staticPosts } = await import('../../../server/data/posts')
-    posts.value = staticPosts
-  })
-
-  return html`
-    <div>
-      <h1 data-cy="blog-heading">Blog</h1>
-      <p>Posts are loaded via a page <strong>loader</strong> (SSR/SSG) or client-side fetch (SPA).</p>
-      <span data-cy="blog-data-source" hidden>${dataSource}</span>
-      <ul data-cy="blog-list">
-        ${posts.value.map(post => html`
-          <li data-cy="blog-item">
-            <a href="/blog/${post.slug}" data-cy="blog-link-${post.slug}"><strong>${post.title}</strong></a>
-            <p>${post.excerpt}</p>
-          </li>
-        `)}
-      </ul>
-    </div>
-  `
-})
-
-export const loader = async () => {
-  const { posts } = await import('../../../server/data/posts')
-  return { posts }
-}

package/e2e/kitchen-sink/app/pages/content-blog.ts

@@ -1,37 +0,0 @@
-/**
- * Content blog listing page — exercises `queryContent('/blog').find()`.
- * Filters to blog prefix, verifies draft exclusion, and renders titles.
- * Route: /content-blog
- */
-
-component('page-content-blog', () => {
-  useHead({ title: 'Content Blog — Kitchen Sink' })
-
-  const ssrData = usePageData<{ posts: ContentMeta[] }>()
-  const posts = ref<ContentMeta[]>(ssrData?.posts ?? [])
-
-  useOnConnected(async () => {
-    if (ssrData) return // already hydrated
-    posts.value = await queryContent('/blog').find()
-  })
-
-  return html`
-    <div>
-      <h1 data-cy="content-blog-heading">Blog Posts</h1>
-      <ul data-cy="content-blog-list">
-        ${posts.value.map(post => html`
-          <li data-cy="content-blog-item" data-path="${post._path}">
-            <strong data-cy="content-blog-title">${post.title ?? post._path}</strong>
-            ${post.description ? html`<p data-cy="content-blog-desc">${post.description}</p>` : ''}
-          </li>
-        `)}
-      </ul>
-      ${posts.value.length === 0 ? html`<p data-cy="content-blog-empty">No posts found.</p>` : ''}
-    </div>
-  `
-})
-
-export const loader = async () => {
-  const posts = await queryContent('/blog').find()
-  return { posts }
-}

package/e2e/kitchen-sink/app/pages/content-doc.ts

@@ -1,42 +0,0 @@
-/**
- * Content doc page — exercises `queryContent('/docs/getting-started').first()`.
- * Verifies full body, TOC headings with id attributes, and excerpt.
- * Route: /content-doc
- */
-
-component('page-content-doc', () => {
-  useHead({ title: 'Content Doc — Kitchen Sink' })
-
-  const ssrData = usePageData<{ doc: ContentItem | null }>()
-  const doc = ref<ContentItem | null>(ssrData?.doc ?? null)
-
-  useOnConnected(async () => {
-    if (ssrData) return // already hydrated
-    doc.value = await queryContent('/docs/getting-started').first()
-  })
-
-  return html`
-    <div>
-      <h1 data-cy="content-doc-heading">Doc Viewer</h1>
-      ${doc.value ? html`
-        <h2 data-cy="content-doc-title">${doc.value.title}</h2>
-        <p data-cy="content-doc-desc">${doc.value.description}</p>
-        <nav data-cy="content-doc-toc">
-          <ul>
-            ${(doc.value.toc ?? []).map(h => html`
-              <li data-cy="content-doc-toc-item" data-depth="${h.depth}">
-                <a href="#${h.id}" data-cy="content-doc-toc-link">${h.text}</a>
-              </li>
-            `)}
-          </ul>
-        </nav>
-        <div data-cy="content-doc-body">${unsafeHTML(doc.value.body)}</div>
-      ` : html`<p data-cy="content-doc-missing">Document not found.</p>`}
-    </div>
-  `
-})
-
-export const loader = async () => {
-  const doc = await queryContent('/docs/getting-started').first()
-  return { doc }
-}

package/e2e/kitchen-sink/app/pages/content-fallback.ts

@@ -1,36 +0,0 @@
-/**
- * Content fallback page — exercises title/description derivation from body
- * when frontmatter does not supply them.
- *
- * Fetches /blog/no-frontmatter (no frontmatter at all) and renders its
- * derived title and description so Cypress can assert both in all modes.
- *
- * Route: /content-fallback
- */
-
-component('page-content-fallback', () => {
-  useHead({ title: 'Content Fallback — Kitchen Sink' })
-
-  const ssrData = usePageData<{ doc: ContentItem | null }>()
-  const doc = ref<ContentItem | null>(ssrData?.doc ?? null)
-
-  useOnConnected(async () => {
-    if (ssrData) return // already hydrated
-    doc.value = await queryContent('/blog/no-frontmatter').first()
-  })
-
-  return html`
-    <div>
-      <h1 data-cy="content-fallback-heading">Content Fallback</h1>
-      ${doc.value ? html`
-        <p data-cy="content-fallback-title">${doc.value.title}</p>
-        <p data-cy="content-fallback-desc">${doc.value.description}</p>
-      ` : html`<p data-cy="content-fallback-missing">Document not found.</p>`}
-    </div>
-  `
-})
-
-export const loader = async () => {
-  const doc = await queryContent('/blog/no-frontmatter').first()
-  return { doc }
-}

package/e2e/kitchen-sink/app/pages/content-guides.ts

@@ -1,35 +0,0 @@
-/**
- * Content guides listing page — exercises numeric directory/file prefixes in
- * the content layer using `queryContent('/guides').find()`.
- * Route: /content-guides
- */
-
-component('page-content-guides', () => {
-  useHead({ title: 'Content Guides — Kitchen Sink' })
-
-  const ssrData = usePageData<{ guides: ContentMeta[] }>()
-  const guides = ref<ContentMeta[]>(ssrData?.guides ?? [])
-
-  useOnConnected(async () => {
-    if (ssrData) return
-    guides.value = await queryContent('/guides').find()
-  })
-
-  return html`
-    <div>
-      <h1 data-cy="content-guides-heading">Guides</h1>
-      <ul data-cy="content-guides-list">
-        ${guides.value.map((guide, index) => html`
-          <li data-cy="content-guides-item" data-path="${guide._path}" data-index="${index}">
-            <strong data-cy="content-guides-title">${guide.title ?? guide._path}</strong>
-          </li>
-        `)}
-      </ul>
-    </div>
-  `
-})
-
-export const loader = async () => {
-  const guides = await queryContent('/guides').find()
-  return { guides }
-}

package/e2e/kitchen-sink/app/pages/content-index.ts

@@ -1,39 +0,0 @@
-/**
- * Content index page — exercises `queryContent().find()` with a page loader.
- * Route: /content-index
- */
-
-component('page-content-index', () => {
-  useHead({ title: 'Content Index — Kitchen Sink' })
-
-  const ssrData = usePageData<{ items: ContentMeta[]; total: number }>()
-  const items = ref<ContentMeta[]>(ssrData?.items ?? [])
-  const total = ref<number>(ssrData?.total ?? 0)
-
-  useOnConnected(async () => {
-    if (ssrData) return // already hydrated — skip client fetch
-    const all = await queryContent().find()
-    items.value = all
-    total.value = all.length
-  })
-
-  return html`
-    <div>
-      <h1 data-cy="content-index-heading">All Content</h1>
-      <p data-cy="content-total">Total items: <strong>${total.value}</strong></p>
-      <ul data-cy="content-list">
-        ${items.value.map(item => html`
-          <li data-cy="content-item" data-path="${item._path}">
-            <strong data-cy="content-item-title">${item.title ?? item._path}</strong>
-            ${item.description ? html`<span data-cy="content-item-desc"> — ${item.description}</span>` : ''}
-          </li>
-        `)}
-      </ul>
-    </div>
-  `
-})
-
-export const loader = async () => {
-  const all = await queryContent().find()
-  return { items: all, total: all.length }
-}

package/e2e/kitchen-sink/app/pages/content-search.ts

@@ -1,36 +0,0 @@
-/**
- * Content search page — exercises `useContentSearch()`.
- * Typing into the search box triggers MiniSearch results (debounced).
- * Route: /content-search
- */
-
-component('page-content-search', () => {
-  useHead({ title: 'Content Search — Kitchen Sink' })
-
-  const { query, results, loading } = useContentSearch()
-
-  return html`
-    <div>
-      <h1 data-cy="content-search-heading">Content Search</h1>
-      <input
-        type="search"
-        placeholder="Search content…"
-        data-cy="content-search-input"
-        .value="${query.value}"
-        @input="${(e: Event) => { query.value = (e.target as HTMLInputElement).value }}"
-      />
-      ${loading.value ? html`<p data-cy="content-search-loading">Searching…</p>` : ''}
-      <ul data-cy="content-search-results">
-        ${results.value.map(r => html`
-          <li data-cy="content-search-result" data-path="${r._path}">
-            <a href="${r._path}" data-cy="content-search-link">${r.title ?? r._path}</a>
-            ${r.description ? html`<p data-cy="content-search-desc">${r.description}</p>` : ''}
-          </li>
-        `)}
-      </ul>
-      ${results.value.length === 0 && query.value.length > 0 && !loading.value ? html`
-        <p data-cy="content-search-empty">No results for "${query.value}".</p>
-      ` : ''}
-    </div>
-  `
-})

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

@@ -1,22 +0,0 @@
-component('page-cookie-test', () => {
-  const testCookie = useCookie('ks-test-cookie')
-
-  function setCookie() {
-    testCookie.set('hello-from-cer-app')
-    window.location.reload()
-  }
-
-  function removeCookie() {
-    testCookie.remove()
-    window.location.reload()
-  }
-
-  return html`
-    <div>
-      <h1 data-cy="cookie-test-heading">Cookie Test</h1>
-      <p data-cy="cookie-value">Value: ${testCookie.value ?? 'not set'}</p>
-      <button data-cy="set-cookie" @click="${setCookie}">Set cookie</button>
-      <button data-cy="remove-cookie" @click="${removeCookie}">Remove cookie</button>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/counter.ts

@@ -1,17 +0,0 @@
-// Tests auto-imported composable (useKsCounter) + reactive state
-component('page-counter', () => {
-  const { count, increment, decrement, reset } = useKsCounter()
-
-  return html`
-    <div>
-      <h1 data-cy="counter-heading">Counter</h1>
-      <p>Tests auto-imported <code>useKsCounter</code> composable and reactive state.</p>
-      <div data-cy="counter-widget">
-        <p>Count: <strong data-cy="count">${count.value}</strong></p>
-        <button data-cy="decrement" @click="${decrement}">−</button>
-        <button data-cy="reset" @click="${reset}">Reset</button>
-        <button data-cy="increment" @click="${increment}">+</button>
-      </div>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/group-auth-blocked.ts

@@ -1,9 +0,0 @@
-// P2-1: Landing page when group-auth middleware redirects an unauthenticated user.
-component('page-group-auth-blocked', () => {
-  return html`
-    <div data-cy="group-auth-guard">
-      <h1>Access Blocked by Group Middleware</h1>
-      <p>The group-auth middleware redirected you here.</p>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/group-meta-test/_layout.ts

@@ -1,6 +0,0 @@
-// P2-1: Group meta — applies to all pages in this directory.
-// Middleware declared here is inherited by all pages unless overridden.
-export const meta = {
-  middleware: ['group-auth'],
-  layout: 'group',
-}

package/e2e/kitchen-sink/app/pages/group-meta-test/custom-mw.ts

@@ -1,14 +0,0 @@
-// P2-1: Page-level middleware overrides the group middleware from _layout.ts.
-component('page-group-meta-test-custom-mw', () => {
-  return html`
-    <div>
-      <h1 data-cy="custom-mw-marker">Custom Middleware Page</h1>
-      <p>This page uses its own middleware, overriding the group default.</p>
-    </div>
-  `
-})
-
-export const meta = {
-  // Overrides the group-auth middleware from _layout.ts
-  middleware: ['custom-log'],
-}

package/e2e/kitchen-sink/app/pages/group-meta-test/page.ts

@@ -1,9 +0,0 @@
-// P2-1: A page inside a group directory — inherits group middleware and layout.
-component('page-group-meta-test-page', () => {
-  return html`
-    <div>
-      <h1 data-cy="group-page-heading">Group Meta Page</h1>
-      <p>This page inherits group middleware and layout from _layout.ts.</p>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/group-meta-test/protected.ts

@@ -1,8 +0,0 @@
-// P2-1: Protected page — group middleware (group-auth) blocks unauthenticated access.
-component('page-group-meta-test-protected', () => {
-  return html`
-    <div>
-      <h1 data-cy="protected-page-heading">Protected Page</h1>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/head.ts

@@ -1,20 +0,0 @@
-component('page-head', () => {
-  useHead({
-    title: 'Head Test — Kitchen Sink',
-    meta: [
-      { name: 'description', content: 'A test page for useHead().' },
-      { property: 'og:title', content: 'Head Test' },
-    ],
-    link: [
-      { rel: 'canonical', href: 'http://localhost/head' },
-    ],
-  })
-
-  return html`
-    <div>
-      <h1 data-cy="head-heading">Head Test</h1>
-      <p data-cy="head-description">This page sets document title and meta tags via <code>useHead()</code>.</p>
-      <p>Check the page <code>&lt;title&gt;</code> and <code>&lt;meta name="description"&gt;</code> tags.</p>
-    </div>
-  `
-})

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

@@ -1,14 +0,0 @@
-component('page-i18n-test', () => {
-  const { locale, locales, defaultLocale, switchLocalePath } = useLocale()
-
-  return html`
-    <div>
-      <h1 data-cy="i18n-heading">i18n Test Page</h1>
-      <p data-cy="current-locale">${locale}</p>
-      <p data-cy="default-locale">${defaultLocale}</p>
-      <p data-cy="locales">${locales.join(',')}</p>
-      <a data-cy="switch-to-fr" href="${switchLocalePath('fr')}">Switch to FR</a>
-      <a data-cy="switch-to-en" href="${switchLocalePath('en')}">Switch to EN</a>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/index.ts

@@ -1,27 +0,0 @@
-component('page-index', () => {
-  useHead({
-    title: 'Home — Kitchen Sink',
-    meta: [{ name: 'description', content: 'Kitchen sink test app.' }],
-  })
-
-  return html`
-    <div>
-      <ks-badge>v1</ks-badge>
-      <h1 data-cy="home-heading">Kitchen Sink</h1>
-      <p data-cy="home-description">A comprehensive test app for vite-plugin-cer-app.</p>
-      <nav data-cy="page-nav">
-        <ul>
-          <li><a href="/about">About (minimal layout)</a></li>
-          <li><a href="/counter">Counter (reactive state + composable)</a></li>
-          <li><a href="/head">Head management (useHead)</a></li>
-          <li><a href="/blog">Blog (data loader)</a></li>
-          <li><a href="/blog/first-post">Blog post (dynamic route)</a></li>
-          <li><a href="/items/1">Item detail (route params)</a></li>
-          <li><a href="/protected">Protected (middleware)</a></li>
-          <li><a href="/login">Login</a></li>
-          <li><a href="/not-a-real-page">404 catch-all</a></li>
-        </ul>
-      </nav>
-    </div>
-  `
-})

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

@@ -1,17 +0,0 @@
-component('page-isr-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="isr-test-heading">ISR Test</h1>
-      <p data-cy="isr-test-description">
-        This page uses <code>revalidate: 0</code> so every post-first request
-        is immediately stale.
-      </p>
-    </div>
-  `
-})
-
-export const meta = {
-  ssg: {
-    revalidate: 0,
-  },
-}

package/e2e/kitchen-sink/app/pages/items/[id].ts

@@ -1,20 +0,0 @@
-component('page-items-id', () => {
-  const props = useProps<{ id: string }>({ id: '' })
-
-  return html`
-    <div>
-      <h1 data-cy="item-heading">Item Detail</h1>
-      <p data-cy="item-id-display">Item ID: <strong data-cy="item-id">${props.id}</strong></p>
-      <p><a href="/" data-cy="item-back">← Home</a></p>
-    </div>
-  `
-})
-
-export const meta = {
-  ssg: {
-    paths: async () => [
-      { params: { id: '1' } },
-      { params: { id: '2' } },
-    ],
-  },
-}

package/e2e/kitchen-sink/app/pages/jit-css-custom-colors-test.ts

@@ -1,14 +0,0 @@
-// Tests that jitCss.customColors registered in cer.config.ts are available
-// as utility classes inside shadow DOM components.
-component('page-jit-css-custom-colors-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="heading">Custom Colors</h1>
-      <div data-cy="brand-bg" class="bg-brand-500 p-4">Brand background</div>
-      <p data-cy="brand-text" class="text-brand-500">Brand text</p>
-      <div data-cy="brand-light-bg" class="bg-brand-100 p-4">Brand light background</div>
-    </div>
-  `
-})
-
-export const meta = { layout: 'minimal' }

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

@@ -1,13 +0,0 @@
-component('page-loader-error-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="loader-error-heading">Loader Error Test</h1>
-    </div>
-  `
-})
-
-export async function loader() {
-  const err = new Error('Loader intentionally failed') as Error & { status?: number }
-  err.status = 503
-  throw err
-}

package/e2e/kitchen-sink/app/pages/loader-props-test.ts

@@ -1,19 +0,0 @@
-// Tests that page loader return values are passed as element attributes so
-// useProps() can read them alongside URL params.
-component('page-loader-props-test', () => {
-  const props = useProps<{ label: string; count: string }>({ label: '', count: '0' })
-
-  return html`
-    <div>
-      <h1 data-cy="loader-props-heading">Loader Props Test</h1>
-      <p data-cy="loader-label">Label: <strong>${props.label}</strong></p>
-      <p data-cy="loader-count">Count: <strong>${props.count}</strong></p>
-    </div>
-  `
-})
-
-export const loader = async () => {
-  return { label: 'Hello from loader', count: '42' }
-}
-
-export const meta = { layout: 'minimal' }

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

@@ -1,13 +0,0 @@
-component('page-loader-response-error-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="loader-response-error-heading">Response Error Test</h1>
-    </div>
-  `
-})
-
-export async function loader() {
-  // Verify that throwing a Response-like object (which has a numeric .status property)
-  // causes the framework to use that status code for the HTTP response.
-  throw new Response('Method Not Allowed', { status: 405 })
-}

package/e2e/kitchen-sink/app/pages/middleware-chain-test.ts

@@ -1,12 +0,0 @@
-component('page-middleware-chain-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="chain-heading">Middleware Chain Test</h1>
-      <p data-cy="chain-note">
-        This page uses both the <code>logger</code> (wrapper) and <code>auth</code> (guard) middleware.
-      </p>
-    </div>
-  `
-})
-
-export const meta = { middleware: ['logger', 'auth'] }

package/e2e/kitchen-sink/app/pages/middleware-status-test.ts

@@ -1,9 +0,0 @@
-// P1-2: This page is blocked by server middleware that throws { status: 401 }.
-// The server should respond with 401, not 500.
-component('page-middleware-status-test', () => {
-  return html`
-    <div>
-      <h1>This page is blocked by server middleware</h1>
-    </div>
-  `
-})