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

package/src/runtime/app-template.ts

@@ -4,23 +4,18 @@
  * Always written to `.cer/app.ts` on every dev/build so consumers
  * automatically receive the latest bootstrap code on plugin update.
  * This file is gitignored and should never be edited directly.
- *
- * @param customColors - Project-specific color families to register in the JIT
- *   CSS engine at runtime. Serialized as a JSON literal in the generated source.
  */
-export function generateAppEntryTemplate(
-  customColors?: Record<string, Record<string, string>>,
-): string {
-  const enableJITCSSCall =
-    customColors && Object.keys(customColors).length > 0
-      ? `enableJITCSS({ customColors: ${JSON.stringify(customColors)} })`
-      : `enableJITCSS()`
-
+export function generateAppEntryTemplate(): string {
   return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app — do not edit.
 // Regenerated automatically on every dev server start and build.
 
 import '@jasonshimmy/custom-elements-runtime/css'
 import 'virtual:cer-jit-css'
+// virtual:cer-jit-init must run before virtual:cer-layouts and virtual:cer-plugins
+// so JIT CSS is enabled before those modules upgrade custom elements via
+// customElements.define(). Static imports execute depth-first in module order,
+// so placing this import here guarantees enableJITCSS() fires first.
+import 'virtual:cer-jit-init'
 import 'virtual:cer-content-components'
 import routes from 'virtual:cer-routes'
 import layouts from 'virtual:cer-layouts'
@@ -38,7 +33,6 @@ import {
   registerBuiltinComponents,
 } from '@jasonshimmy/custom-elements-runtime'
 import { initRouter } from '@jasonshimmy/custom-elements-runtime/router'
-import { enableJITCSS } from '@jasonshimmy/custom-elements-runtime/jit-css'
 import { initRuntimeConfig } from '@jasonshimmy/vite-plugin-cer-app/composables'
 
 const _cerProcess = (globalThis).process
@@ -57,7 +51,6 @@ const _cerRuntimeDev =
 
 registerBuiltinComponents()
 setDevMode(_cerRuntimeDev)
-${enableJITCSSCall}
 initRuntimeConfig(runtimeConfig)
 
 const router = initRouter({ routes })
@@ -217,9 +210,13 @@ component('cer-layout-view', () => {
     // store.subscribe() synchronously pushes the current route once on
     // subscription. That initial callback is not a real navigation and must not
     // tear down the SSR slot before _doHydrate has pre-loaded the page.
-    // Subsequent callbacks are real navigations (including the initial _replace
-    // in _doHydrate), so if they arrive during the hydration gap we drop the
-    // slot immediately and let the live render take over.
+    // Subsequent callbacks may be real navigations, but initRouter() also fires
+    // a queueMicrotask(() => navigate(...)) to run guards on the entry URL.
+    // That startup microtask resolves during the await route.load() gap —
+    // before _currentPageTag is set — so we must not drop the slot until the
+    // page module has actually been loaded (_currentPageTag !== null).
+    // The explicit _cerHydrating.value = false in _doHydrate() fires after
+    // _loadPageForPath completes and is the authoritative hydration trigger.
     unsub = router.subscribe((s) => {
       const _isInitialSubscribePush = !_sawInitialRouteState
       _sawInitialRouteState = true
@@ -227,7 +224,7 @@ component('cer-layout-view', () => {
         current.value = s
         return
       }
-      if (_cerHydrating.value) _cerHydrating.value = false
+      if (_cerHydrating.value && _currentPageTag !== null) _cerHydrating.value = false
       current.value = s
     })
   })

package/src/runtime/composables/use-head.ts

@@ -152,7 +152,14 @@ export function useHead(input: HeadInput): void {
         const rel = link.rel
         const href = link.href
         if (rel && href) {
-          let el = document.querySelector(`link[rel="${rel}"][href="${href}"]`)
+          // Canonical and icon links are singletons — find by rel alone so that
+          // updating the URL overwrites the existing tag rather than adding a
+          // duplicate. All other link types are matched by rel+href (e.g.
+          // stylesheets, where multiple hrefs are valid).
+          const isSingleton = rel === 'canonical' || rel === 'icon' || rel === 'shortcut icon'
+          let el = isSingleton
+            ? document.querySelector(`link[rel="${rel}"]`)
+            : document.querySelector(`link[rel="${rel}"][href="${href}"]`)
           if (!el) {
             el = document.createElement('link')
             document.head.appendChild(el)
@@ -176,12 +183,27 @@ export function useHead(input: HeadInput): void {
           }
           document.head.appendChild(el)
         } else if (innerHTML && !src) {
-          const el = document.createElement('script')
-          el.textContent = innerHTML
-          for (const [k, v] of Object.entries(rest)) {
-            el.setAttribute(k, v)
+          const type = rest.type ?? ''
+          if (type === 'application/ld+json') {
+            // JSON-LD is a singleton — update existing content rather than
+            // appending a duplicate on re-render or SPA navigation.
+            let el = document.querySelector('script[type="application/ld+json"]')
+            if (!el) {
+              el = document.createElement('script')
+              document.head.appendChild(el)
+              for (const [k, v] of Object.entries(rest)) {
+                el.setAttribute(k, v)
+              }
+            }
+            ;(el as HTMLScriptElement).textContent = innerHTML
+          } else {
+            const el = document.createElement('script')
+            el.textContent = innerHTML
+            for (const [k, v] of Object.entries(rest)) {
+              el.setAttribute(k, v)
+            }
+            document.head.appendChild(el)
           }
-          document.head.appendChild(el)
         }
       }
     }

package/src/types/config.ts

@@ -241,6 +241,14 @@ export interface RuntimeConfig {
 export interface CerAppConfig {
   mode?: 'spa' | 'ssr' | 'ssg'
   srcDir?: string // defaults to 'app'
+  /**
+   * The canonical origin of the site (e.g. `'https://example.com'`).
+   * No trailing slash. When set, the SSG build automatically:
+   * - Injects `<link rel="canonical" href="${siteUrl}${path}">` into every page.
+   * - Writes a `robots.txt` to `dist/` (skipped when a `public/robots.txt` already exists).
+   * Also available at runtime via `useRuntimeConfig().public.siteUrl`.
+   */
+  siteUrl?: string
   /** File-based content layer configuration. Reads from `content/` at the project root by default. */
   content?: import('./content.js').CerContentConfig
   /**