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

package/e2e/cypress/e2e/error-boundary.cy.ts

@@ -1,88 +0,0 @@
-/**
- * Tests for the error boundary.
- *
- * SSR: when a page loader throws, the server renders `page-error` (from app/error.ts)
- * instead of crashing, and returns the correct HTTP status code.
- *
- * Client-side: when navigating to a page whose loader throws, currentError is set
- * and the error boundary component is displayed.
- */
-
-const mode = Cypress.env('mode') as 'spa' | 'ssr' | 'ssg'
-
-// Client-side loader error boundary — works in all modes via client-side navigation
-describe('Client-side error boundary — loader throws during navigation', () => {
-  it('shows the error boundary after navigating to a page whose loader throws', () => {
-    cy.visit('/')
-    // Navigate via the router so the client-side loader runs (not a hard page load)
-    cy.window().then((win) => {
-      // @ts-expect-error cerRouter is a private global
-      win.__cerRouter?.push('/loader-error-test')
-    })
-    cy.get('[data-cy=error-boundary]', { timeout: 5000 }).should('exist')
-  })
-
-  it('error message contains the loader error text after client-side navigation', () => {
-    cy.visit('/')
-    cy.window().then((win) => {
-      // @ts-expect-error cerRouter is a private global
-      win.__cerRouter?.push('/loader-error-test')
-    })
-    cy.get('[data-cy=error-message]', { timeout: 5000 }).should('contain', 'Loader intentionally failed')
-  })
-})
-
-// SSR loader error boundary — only meaningful when a server render happens
-if (mode === 'ssr') {
-  describe('SSR error boundary — loader throws', () => {
-    it('returns the status code from the thrown error (503)', () => {
-      cy.request({ url: '/loader-error-test', failOnStatusCode: false }).then((response) => {
-        expect(response.status).to.eq(503)
-      })
-    })
-
-    it('renders page-error element in the server response', () => {
-      cy.request({ url: '/loader-error-test', failOnStatusCode: false }).then((response) => {
-        expect(response.body).to.include('page-error')
-      })
-    })
-
-    it('does not render the normal page heading when loader throws', () => {
-      cy.request({ url: '/loader-error-test', failOnStatusCode: false }).then((response) => {
-        expect(response.body).not.to.include('loader-error-heading')
-      })
-    })
-
-    it('shows the error boundary UI in the browser', () => {
-      cy.visit('/loader-error-test', { failOnStatusCode: false })
-      cy.get('[data-cy=error-boundary]').should('exist')
-      cy.get('[data-cy=error-heading]').should('contain', '503')
-      cy.get('[data-cy=error-message]').should('contain', 'Loader intentionally failed')
-    })
-
-    it('exposes a retry button that calls resetError()', () => {
-      cy.visit('/loader-error-test', { failOnStatusCode: false })
-      cy.get('[data-cy=error-retry]').should('exist')
-    })
-  })
-
-  describe('SSR error boundary — loader throws a Response object', () => {
-    it('reads the numeric .status from the thrown Response (405)', () => {
-      cy.request({ url: '/loader-response-error-test', failOnStatusCode: false }).then((response) => {
-        expect(response.status).to.eq(405)
-      })
-    })
-
-    it('renders page-error element in the server response for a thrown Response', () => {
-      cy.request({ url: '/loader-response-error-test', failOnStatusCode: false }).then((response) => {
-        expect(response.body).to.include('page-error')
-      })
-    })
-
-    it('does not render the normal page heading when a Response is thrown', () => {
-      cy.request({ url: '/loader-response-error-test', failOnStatusCode: false }).then((response) => {
-        expect(response.body).not.to.include('loader-response-error-heading')
-      })
-    })
-  })
-}

package/e2e/cypress/e2e/fouc.cy.ts

@@ -1,254 +0,0 @@
-/**
- * Declarative Shadow DOM (DSD) correctness tests.
- *
- * For SSR and SSG modes, validates that the server-rendered HTML:
- * 1. Contains <template shadowrootmode="open"> elements (value must be "open")
- * 2. Each shadow template has its own embedded <style> (JIT CSS not stripped to <head>)
- * 3. Shadow DOM styles are NOT hoisted to <head> (which would break encapsulation)
- * 4. Shadow templates contain the actual rendered component content
- * 5. More complex routes produce more shadow templates than simple routes
- * 6. The loading indicator is NOT present in the initial HTML
- * 7. The DSD polyfill is present and positioned after </cer-layout-view>
- * 8. After JS hydration, custom elements have live, accessible shadow roots
- * 9. Hydration does not duplicate or destroy the pre-rendered shadow content
- */
-
-const mode = Cypress.env('mode') as 'spa' | 'ssr' | 'ssg'
-
-// All pre-renderable routes
-const ALL_ROUTES = [
-  '/',
-  '/about',
-  '/counter',
-  '/head',
-  '/blog',
-  '/blog/first-post',
-  '/blog/second-post',
-  '/items/1',
-  '/items/2',
-  '/login',
-  '/plugin-dsd-test',
-]
-
-if (mode === 'spa') {
-  describe('DSD (skipped in SPA mode)', () => {
-    it('SPA mode has no server-side rendering — DSD tests are SSR/SSG only', () => {
-      cy.log('DSD tests are skipped in SPA mode')
-    })
-  })
-} else {
-  // ─── Structure: every route has well-formed DSD ───────────────────────────
-
-  describe('DSD structure — all routes', () => {
-    ALL_ROUTES.forEach((path) => {
-      it(`${path} has valid DSD structure`, () => {
-        cy.assertDSDStructure(path)
-      })
-    })
-  })
-
-  // ─── Content: shadow templates contain the actual rendered content ─────────
-
-  describe('DSD content — shadow templates contain rendered output', () => {
-    it('home (/): layout nav and page heading are inside shadow templates', () => {
-      // layout-default renders site-nav; page-index renders the home heading
-      cy.assertDSDContains('/', 'data-cy="site-nav"')
-      cy.assertDSDContains('/', 'data-cy="home-heading"')
-      cy.assertDSDContains('/', 'Kitchen Sink')
-    })
-
-    it('home (/): ks-badge content is inside a shadow template', () => {
-      cy.assertDSDContains('/', 'data-cy="ks-badge"')
-    })
-
-    it('about (/about): page heading is inside a shadow template', () => {
-      cy.assertDSDContains('/about', 'data-cy="about-heading"')
-      cy.assertDSDContains('/about', 'About')
-    })
-
-    it('counter (/counter): heading and initial count 0 are inside shadow templates', () => {
-      cy.assertDSDContains('/counter', 'data-cy="counter-heading"')
-      cy.assertDSDContains('/counter', 'Counter')
-      cy.assertDSDContains('/counter', 'data-cy="count"')
-    })
-
-    it('blog (/blog): blog heading is inside a shadow template', () => {
-      cy.assertDSDContains('/blog', 'data-cy="blog-heading"')
-    })
-
-    it('blog detail (/blog/first-post): post title is inside a shadow template', () => {
-      cy.assertDSDContains('/blog/first-post', 'First Post')
-    })
-  })
-
-  // ─── Template depth: complex routes have more templates than simple ones ───
-
-  describe('DSD template count — complexity reflects component tree', () => {
-    it('home (/) has more shadow templates than about (/about)', () => {
-      cy.request('/').then((homeResp) => {
-        cy.request('/about').then((aboutResp) => {
-          const homeTemplates = [
-            ...homeResp.body.matchAll(/<template shadowrootmode="open"/g),
-          ].length
-          const aboutTemplates = [
-            ...aboutResp.body.matchAll(/<template shadowrootmode="open"/g),
-          ].length
-
-          expect(
-            homeTemplates,
-            'home page (default layout + page-index + ks-badge) should have more templates than about',
-          ).to.be.greaterThan(aboutTemplates)
-        })
-      })
-    })
-
-    it('each route has at least 2 shadow templates (layout + page)', () => {
-      ALL_ROUTES.forEach((path) => {
-        cy.request(path).then((resp) => {
-          const count = [...resp.body.matchAll(/<template shadowrootmode="open"/g)].length
-          expect(count, `${path}: should have at least 2 shadow templates`).to.be.at.least(2)
-        })
-      })
-    })
-  })
-
-  // ─── Plugin-registered components get DSD ────────────────────────────────
-  //
-  // Regression test for the "dual-instance registry" bug:
-  // When @jasonshimmy/custom-elements-runtime was in ssr.noExternal, the bundler
-  // inlined a separate copy of the runtime's component Map. Plugin files (treated
-  // as external) resolved the CER runtime from node_modules at runtime — a
-  // different Map instance. Components registered by plugins never appeared in
-  // the SSR renderer's registry, so renderToStreamWithJITCSSDSD emitted bare
-  // <custom-element> stubs with no DSD → FOUC when the browser upgraded them.
-  // The fix: keep @jasonshimmy/custom-elements-runtime external so all code
-  // (server bundle + plugin packages) shares one node_modules instance.
-
-  describe('Plugin-registered components — DSD in SSR/SSG', () => {
-    it('ks-plugin-card (registered via plugin, not auto-scanned) has a shadow template', () => {
-      cy.request('/plugin-dsd-test').then((resp) => {
-        const html: string = resp.body
-        expect(html, 'ks-plugin-card must appear in rendered HTML').to.include('ks-plugin-card')
-        // The component must have a shadow root template — not a bare stub
-        const pluginCardIdx = html.indexOf('ks-plugin-card')
-        const templateAfterCard = html.indexOf('<template shadowrootmode="open"', pluginCardIdx)
-        const nextTagClose = html.indexOf('</ks-plugin-card>', pluginCardIdx)
-        expect(templateAfterCard, 'ks-plugin-card must contain a <template shadowrootmode> (DSD)').to.be.greaterThan(-1)
-        expect(templateAfterCard, 'shadow template must appear before </ks-plugin-card>').to.be.lessThan(nextTagClose)
-      })
-    })
-
-    it('ks-plugin-card DSD contains the card CSS style', () => {
-      cy.request('/plugin-dsd-test').then((resp) => {
-        cy.assertDSDContains('/plugin-dsd-test', '.card')
-      })
-    })
-
-    it('ks-plugin-card has a live shadow root after hydration', () => {
-      // ks-plugin-card lives inside page-plugin-dsd-test's shadow root.
-      // page-plugin-dsd-test is light DOM of layout-default (slotted), so
-      // document.querySelector() can find it directly.
-      cy.visit('/plugin-dsd-test')
-      cy.get('[data-cy="plugin-dsd-test-page"]').should('exist')
-      cy.window().then((win) => {
-        const page = win.document.querySelector('page-plugin-dsd-test')
-        expect(page, 'page-plugin-dsd-test must exist').to.not.be.null
-        const card = page?.shadowRoot?.querySelector('ks-plugin-card')
-        expect(card, 'ks-plugin-card must exist inside page-plugin-dsd-test shadow root').to.not.be.null
-        expect((card as Element & { shadowRoot: ShadowRoot | null }).shadowRoot,
-          'ks-plugin-card must have a live shadow root after hydration').to.not.be.null
-      })
-    })
-
-    it('ks-plugin-card slot content is accessible after hydration', () => {
-      cy.visit('/plugin-dsd-test')
-      cy.get('[data-cy="plugin-card-content"]').should('have.text', 'Card content from plugin component')
-    })
-  })
-
-  // ─── DSD polyfill ─────────────────────────────────────────────────────────
-
-  describe('DSD polyfill', () => {
-    it('polyfill script is present in the home page HTML', () => {
-      cy.request('/').then((resp) => {
-        // The polyfill inlines a function that calls attachShadow on existing templates
-        expect(resp.body, 'DSD polyfill should be present in server HTML').to.include(
-          'attachShadow',
-        )
-      })
-    })
-
-    it('polyfill is placed after </cer-layout-view> so it runs outside shadow light DOM', () => {
-      cy.request('/').then((resp) => {
-        const html: string = resp.body
-        const clvEnd = html.lastIndexOf('</cer-layout-view>')
-        const polyfillIdx = html.indexOf('attachShadow')
-        expect(clvEnd, 'cer-layout-view closing tag must exist').to.be.greaterThan(-1)
-        expect(polyfillIdx, 'DSD polyfill must exist').to.be.greaterThan(-1)
-        expect(polyfillIdx, 'DSD polyfill must come AFTER </cer-layout-view>').to.be.greaterThan(
-          clvEnd,
-        )
-      })
-    })
-  })
-
-  // ─── Loading indicator ────────────────────────────────────────────────────
-
-  describe('loading indicator absent from initial HTML', () => {
-    it('home page: loading indicator is not in the server-rendered HTML', () => {
-      cy.request('/').then((resp) => {
-        expect(resp.body).not.to.include('page-loading')
-        expect(resp.body).not.to.include('data-cy="loading-indicator"')
-      })
-    })
-  })
-
-  // ─── Hydration: shadow roots are live after JS boots ──────────────────────
-
-  describe('DSD hydration — shadow roots live after JS', () => {
-    it('layout-default has a live shadow root after hydration on home (/)', () => {
-      cy.visit('/')
-      cy.get('layout-default').should('exist')
-      cy.assertShadowRootLive('layout-default')
-    })
-
-    it('page-index has a live shadow root after hydration on home (/)', () => {
-      cy.visit('/')
-      cy.get('page-index', { includeShadowDom: true }).should('exist')
-      cy.assertShadowRootLive('page-index')
-    })
-
-    it('layout-minimal has a live shadow root after hydration on about (/about)', () => {
-      cy.visit('/about')
-      cy.get('layout-minimal').should('exist')
-      cy.assertShadowRootLive('layout-minimal')
-    })
-
-    it('page-about has a live shadow root after hydration on about (/about)', () => {
-      cy.visit('/about')
-      cy.assertShadowRootLive('page-about')
-    })
-
-    it('page-counter has a live shadow root after hydration on counter (/counter)', () => {
-      cy.visit('/counter')
-      cy.assertShadowRootLive('page-counter')
-    })
-
-    it('shadow root content survives hydration — home heading still readable', () => {
-      cy.visit('/')
-      // Content set by DSD pre-render should still be accessible in the live shadow root
-      cy.get('[data-cy="home-heading"]').should('have.text', 'Kitchen Sink')
-    })
-
-    it('shadow root content survives hydration — site-nav still rendered', () => {
-      cy.visit('/')
-      cy.get('[data-cy="site-nav"]').should('exist')
-      cy.get('[data-cy="nav-home"]').should('exist')
-    })
-
-    it('shadow root content survives hydration — counter shows initial count 0', () => {
-      cy.visit('/counter')
-      cy.get('[data-cy="count"]').should('have.text', '0')
-    })
-  })
-}

package/e2e/cypress/e2e/group-meta.cy.ts

@@ -1,36 +0,0 @@
-/**
- * P2-1: _layout.ts group meta inheritance.
- *
- * Verifies that middleware and layout declared in a directory's _layout.ts
- * are inherited by all pages in that directory, with page-level declarations
- * taking precedence.
- */
-
-describe('Group meta from _layout.ts (P2-1)', () => {
-  context('middleware inheritance', () => {
-    it('applies group middleware from _layout.ts to pages in the directory', () => {
-      // The group-meta-test/protected.ts page is in a directory with auth middleware
-      // declared in _layout.ts — visiting without auth should trigger the middleware
-      cy.visit('/group-meta-test/protected', { failOnStatusCode: false })
-      // The auth middleware redirects or renders a guard indicator
-      cy.get('[data-cy=group-auth-guard]', { timeout: 5000 }).should('exist')
-    })
-
-    it('page-level middleware overrides group middleware', () => {
-      // The group-meta-test/custom-mw.ts overrides group middleware with its own
-      cy.visit('/group-meta-test/custom-mw', { failOnStatusCode: false })
-      cy.get('[data-cy=custom-mw-marker]', { timeout: 5000 }).should('exist')
-    })
-  })
-
-  context('layout inheritance', () => {
-    it('pages in a group directory use the layout declared in _layout.ts', () => {
-      // Use the page that overrides the blocking group middleware so this
-      // assertion isolates layout inheritance from the redirect behavior.
-      cy.visit('/group-meta-test/custom-mw')
-      cy.get('[data-cy=custom-mw-marker]', { timeout: 5000 }).should('exist')
-      // The group layout still wraps the page.
-      cy.get('[data-cy=group-layout]', { timeout: 5000 }).should('exist')
-    })
-  })
-})

package/e2e/cypress/e2e/head.cy.ts

@@ -1,89 +0,0 @@
-/**
- * useHead() tests — verifies document title and meta tags are set correctly.
- *
- * In SSR/SSG: tags should be in the initial HTML (server-side injection).
- * In all modes: tags should be set after client-side hydration.
- */
-
-const mode = Cypress.env('mode') as 'spa' | 'ssr' | 'ssg'
-
-describe('useHead() — document title', () => {
-  it('sets title to "Home — Kitchen Sink" on home page', () => {
-    cy.visit('/')
-    cy.title().should('eq', 'Home — Kitchen Sink')
-  })
-
-  it('sets title to "About — Kitchen Sink" on about page', () => {
-    cy.visit('/about')
-    cy.title().should('eq', 'About — Kitchen Sink')
-  })
-
-  it('sets title to "Head Test — Kitchen Sink" on head page', () => {
-    cy.visit('/head')
-    cy.title().should('eq', 'Head Test — Kitchen Sink')
-  })
-
-  it('sets title to "Blog — Kitchen Sink" on blog list page', () => {
-    cy.visit('/blog')
-    cy.title().should('eq', 'Blog — Kitchen Sink')
-  })
-
-  it('updates title when navigating between pages', () => {
-    cy.visit('/')
-    cy.title().should('eq', 'Home — Kitchen Sink')
-    cy.get('[data-cy=nav-about]').first().click({ force: true })
-    cy.title().should('eq', 'About — Kitchen Sink')
-    cy.get('[data-cy=about-back]').first().click({ force: true })
-    cy.title().should('eq', 'Home — Kitchen Sink')
-  })
-})
-
-describe('useHead() — meta tags', () => {
-  it('sets meta description on home page', () => {
-    cy.visit('/')
-    cy.get('meta[name="description"]').should('have.attr', 'content', 'Kitchen sink test app.')
-  })
-
-  it('sets meta description on about page', () => {
-    cy.visit('/about')
-    cy.get('meta[name="description"]').should('have.attr', 'content', 'About the kitchen sink test app.')
-  })
-
-  it('sets meta description on head test page', () => {
-    cy.visit('/head')
-    cy.get('meta[name="description"]').should('have.attr', 'content', 'A test page for useHead().')
-  })
-
-  it('sets og:title meta on head test page', () => {
-    cy.visit('/head')
-    cy.get('meta[property="og:title"]').should('have.attr', 'content', 'Head Test')
-  })
-})
-
-if (mode !== 'spa') {
-  describe('useHead() — server-side injection (SSR/SSG)', () => {
-    it('home page title is in the initial HTML', () => {
-      cy.request('/').then((response) => {
-        expect(response.body).to.include('<title>Home — Kitchen Sink</title>')
-      })
-    })
-
-    it('about page title is in the initial HTML', () => {
-      cy.request('/about').then((response) => {
-        expect(response.body).to.include('<title>About — Kitchen Sink</title>')
-      })
-    })
-
-    it('head test page title is in the initial HTML', () => {
-      cy.request('/head').then((response) => {
-        expect(response.body).to.include('<title>Head Test — Kitchen Sink</title>')
-      })
-    })
-
-    it('meta description is in the initial HTML for home', () => {
-      cy.request('/').then((response) => {
-        expect(response.body).to.include('Kitchen sink test app.')
-      })
-    })
-  })
-}

package/e2e/cypress/e2e/i18n.cy.ts

@@ -1,79 +0,0 @@
-/**
- * E2E tests for i18n routing and useLocale() composable.
- *
- * The kitchen-sink is configured with:
- *   locales: ['en', 'fr'], defaultLocale: 'en', strategy: 'prefix_except_default'
- *
- * This means:
- *   /i18n-test      → renders in default locale (en)
- *   /fr/i18n-test   → renders in locale (fr)
- */
-
-describe('i18n routing — useLocale()', () => {
-  context('default locale (unprefixed path)', () => {
-    it('renders the i18n-test page at /i18n-test', () => {
-      cy.visit('/i18n-test')
-      cy.get('[data-cy=i18n-heading]').should('contain', 'i18n Test Page')
-    })
-
-    it('reports "en" as the current locale on /i18n-test', () => {
-      cy.visit('/i18n-test')
-      cy.get('[data-cy=current-locale]').should('have.text', 'en')
-    })
-
-    it('reports "en" as the defaultLocale', () => {
-      cy.visit('/i18n-test')
-      cy.get('[data-cy=default-locale]').should('have.text', 'en')
-    })
-
-    it('reports all configured locales', () => {
-      cy.visit('/i18n-test')
-      cy.get('[data-cy=locales]').should('have.text', 'en,fr')
-    })
-
-    it('switchLocalePath("fr") produces /fr/i18n-test', () => {
-      cy.visit('/i18n-test')
-      cy.get('[data-cy=switch-to-fr]').should('have.attr', 'href', '/fr/i18n-test')
-    })
-
-    it('switchLocalePath("en") on the default locale keeps the unprefixed path', () => {
-      cy.visit('/i18n-test')
-      cy.get('[data-cy=switch-to-en]').should('have.attr', 'href', '/i18n-test')
-    })
-  })
-
-  context('non-default locale (fr-prefixed path)', () => {
-    it('renders the i18n-test page at /fr/i18n-test', () => {
-      cy.visit('/fr/i18n-test')
-      cy.get('[data-cy=i18n-heading]').should('contain', 'i18n Test Page')
-    })
-
-    it('reports "fr" as the current locale on /fr/i18n-test', () => {
-      cy.visit('/fr/i18n-test')
-      cy.get('[data-cy=current-locale]').should('have.text', 'fr')
-    })
-
-    it('switchLocalePath("en") from /fr/i18n-test produces /i18n-test', () => {
-      cy.visit('/fr/i18n-test')
-      cy.get('[data-cy=switch-to-en]').should('have.attr', 'href', '/i18n-test')
-    })
-
-    it('switchLocalePath("fr") on the fr-locale keeps the fr prefix', () => {
-      cy.visit('/fr/i18n-test')
-      cy.get('[data-cy=switch-to-fr]').should('have.attr', 'href', '/fr/i18n-test')
-    })
-
-    it('clicking the switch-to-en link navigates to the default-locale path', () => {
-      cy.visit('/fr/i18n-test')
-      cy.get('[data-cy=switch-to-en]').click({ force: true })
-      cy.url().should('include', '/i18n-test')
-      cy.url().should('not.include', '/fr/')
-    })
-
-    it('clicking the switch-to-fr link from /i18n-test navigates to /fr/i18n-test', () => {
-      cy.visit('/i18n-test')
-      cy.get('[data-cy=switch-to-fr]').click({ force: true })
-      cy.url().should('include', '/fr/i18n-test')
-    })
-  })
-})