@invisibleloop/pulse 0.7.1 → 0.7.2

package/docs/public/menu.js

@@ -52,8 +52,10 @@
     }
   }
 
-  // After client-side navigation — sidebar DOM is replaced, so re-query and re-centre
+  // After client-side navigation — #pulse-root is replaced, so the original
+  // navSidebar reference is detached. Re-query for the fresh sidebar element.
   document.addEventListener('pulse:navigate', function () {
+    navSidebar = document.querySelector('.docs-sidebar')
     var newActive = navSidebar && navSidebar.querySelector('.nav-link.active')
     centerNavLink(newActive)
   })

package/docs/src/lib/layout.js

@@ -14,7 +14,7 @@ let _manifest = {}
 export function initLayoutManifest(m) { _manifest = m }
 const asset = href => _manifest[href] || href
 
-const { version } = pkg
+const version = typeof pkg !== 'undefined' ? (pkg?.version ?? '') : ''
 
 function esc(s) {
   return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.7.1
+0.7.2

package/scripts/build.js

@@ -476,7 +476,9 @@ const result = await esbuild.build({
 const manifest = {}
 
 for (const [outFile, meta] of Object.entries(result.metafile.outputs)) {
-  const bundlePath = '/' + path.relative(path.join(ROOT, 'public'), path.join(ROOT, outFile))
+  // outFile is relative to process.cwd(), not ROOT — use path.resolve to get the
+  // true absolute path before computing the URL-relative bundle path.
+  const bundlePath = '/' + path.relative(path.join(ROOT, 'public'), path.resolve(outFile))
 
   // Shared runtime chunk — esbuild generates this via splitting, no entryPoint
   if (!meta.entryPoint && path.basename(outFile).startsWith('runtime-')) {

package/src/cli/dev.js

@@ -187,11 +187,14 @@ const { updateSpecs } = createServer(specs, {
 
     const serveFile = (filePath) => {
       if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile()) return false
-      // Strip node:* imports — they don't resolve in the browser. Server-only imports
-      // are only used inside spec.server functions which the client runtime never calls.
+      // Strip server-only imports that can't resolve in the browser:
+      //   - node:* built-ins (fs, path, etc.)
+      //   - JSON files imported with `with { type: 'json' }` (e.g. package.json for version)
+      // These are only used inside spec.server functions or module-level server init;
+      // the client runtime never calls those code paths.
       let content = fs.readFileSync(filePath, 'utf-8')
       content = content.replace(
-        /^[ \t]*import\s+(?:\{[^}]*\}|[\w*]+(?:\s+as\s+\w+)?)\s+from\s+['"]node:[^'"]+['"]\s*;?[ \t]*\n?/gm,
+        /^[ \t]*import\s+(?:\{[^}]*\}|[\w*]+(?:\s+as\s+\w+)?)\s+from\s+['"](?:node:[^'"]+|[^'"]*\.json)['"]\s*(?:with\s*\{[^}]*\})?\s*;?[ \t]*\n?/gm,
         ''
       )
       res.writeHead(200, {

package/src/runtime/ssr.js

@@ -258,9 +258,48 @@ export function renderToNavStream(spec, ctx = {}, resolvedMeta = {}) {
 }
 
 // ---------------------------------------------------------------------------
-// Page HTML wrapper
+// Page HTML wrapper — shared script builders
 // ---------------------------------------------------------------------------
 
+/**
+ * Build the inline script that exposes window.__PULSE_NONCE__ and (optionally)
+ * window.__PULSE_STORE__ to the client runtime.
+ *
+ * Only emitted for hydrated pages. Purely server-rendered pages have no JS to
+ * read these globals, and omitting the inline script keeps cached HTML nonce-free
+ * so it can be served with a nonce-free CSP without a CSP violation.
+ */
+export function buildStoreScript(spec, storeState, nonce) {
+  if (!spec.hydrate) return ''
+  if (storeState && Object.keys(storeState).length > 0) {
+    return `<script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';window.__PULSE_STORE__=${JSON.stringify(storeState)};window.__updatePulseStore__=function(s){window.__PULSE_STORE__=Object.assign(window.__PULSE_STORE__||{},s);};</script>`
+  }
+  return `<script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';</script>`
+}
+
+/**
+ * Build the hydration <script> tag that mounts the spec client-side.
+ *
+ * Bundle paths (/dist/) → a single external <script type="module" src="..."> tag.
+ * Dev source paths       → an inline module block with explicit imports (nonce required).
+ */
+export function buildHydrateScript(spec, storeDef, nonce) {
+  if (!spec.hydrate) return ''
+  if (isBundle(spec.hydrate)) {
+    return `<script type="module" src="${esc(spec.hydrate)}"></script>`
+  }
+  const storeImport = storeDef?.hydrate ? `\n  import store from '${esc(storeDef.hydrate)}'` : ''
+  const storeArg    = storeDef?.hydrate ? ', { ssr: true, store }' : ', { ssr: true }'
+  return `<script type="module" nonce="${nonce}">
+  import spec from '${esc(spec.hydrate)}'
+  import { mount } from '/@pulse/runtime/index.js'
+  import { initNavigation } from '/@pulse/runtime/navigate.js'${storeImport}
+  const root = document.getElementById('pulse-root')
+  mount(spec, root, window.__PULSE_SERVER__ || {}${storeArg})
+  initNavigation(root, mount)
+</script>`
+}
+
 /**
  * Wrap rendered content in a full HTML document.
  *
@@ -320,40 +359,8 @@ export function wrapDocument({ content, spec = {}, serverState = {}, storeState
     ? `<script nonce="${nonce}">window.__PULSE_SERVER__ = ${JSON.stringify(serverState)};</script>`
     : ''
 
-  // Serialise store state so the client store singleton can be initialised.
-  // Also exposes window.__updatePulseStore__ so navigate.js can refresh the
-  // singleton with fresh server data on client-side navigations.
-  // window.__PULSE_NONCE__ lets the toast runtime inject a nonce'd <style> tag
-  // to satisfy the style-src CSP directive.
-  const storeStateScript = storeState && Object.keys(storeState).length > 0
-    ? `<script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';window.__PULSE_STORE__=${JSON.stringify(storeState)};window.__updatePulseStore__=function(s){window.__PULSE_STORE__=Object.assign(window.__PULSE_STORE__||{},s);};</script>`
-    : spec.hydrate
-      ? `<script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';</script>`
-      : ''
-
-  // Hydration bootstrap — makes the server-rendered HTML interactive.
-  // When hydrate points to a self-executing bundle (/dist/…) a single <script>
-  // tag is enough; the bundle imports spec + runtime and calls mount() itself.
-  // In dev mode (source file path) we emit the explicit inline import block.
-  const storeImport  = spec.hydrate && !isBundle(spec.hydrate) && storeDef?.hydrate
-    ? `\n  import store from '${esc(storeDef.hydrate)}'`
-    : ''
-  const storeArg     = spec.hydrate && !isBundle(spec.hydrate) && storeDef?.hydrate
-    ? ', { ssr: true, store }'
-    : ', { ssr: true }'
-
-  const hydrateScript = spec.hydrate
-    ? isBundle(spec.hydrate)
-      ? `<script type="module" src="${esc(spec.hydrate)}"></script>`
-      : `<script type="module" nonce="${nonce}">
-  import spec from '${esc(spec.hydrate)}'
-  import { mount } from '/@pulse/runtime/index.js'
-  import { initNavigation } from '/@pulse/runtime/navigate.js'${storeImport}
-  const root = document.getElementById('pulse-root')
-  mount(spec, root, window.__PULSE_SERVER__ || {}${storeArg})
-  initNavigation(root, mount)
-</script>`
-    : ''
+  const storeStateScript = buildStoreScript(spec, storeState, nonce)
+  const hydrateScript    = buildHydrateScript(spec, storeDef, nonce)
 
   // Server-Timing header value (caller is responsible for setting the header)
   const serverTimingValue = timing.total !== undefined

package/src/server/index.js

@@ -21,7 +21,7 @@ import { createRequire } from 'module'
 
 const _require = createRequire(import.meta.url)
 export const version = _require('../../package.json').version
-import { renderToString, renderToStream, renderToNavStream, wrapDocument, resolveServerState } from '../runtime/ssr.js'
+import { renderToString, renderToStream, renderToNavStream, wrapDocument, resolveServerState, buildStoreScript, buildHydrateScript } from '../runtime/ssr.js'
 import { validateSpec } from '../spec/schema.js'
 import { validateStore, resolveStoreState } from '../store/index.js'
 
@@ -92,8 +92,8 @@ function buildCsp(nonce, ext = {}) {
 
 /**
  * Build the nonce-free CSP for cached responses.
- * Safe because cached pages (no spec.server, no spec.store) are only cached
- * when they have no spec.hydrate — so no inline nonce scripts are present.
+ * Safe because isCacheablePage() only returns true when spec.server, spec.store,
+ * and spec.hydrate are all absent — guaranteeing no inline nonce scripts in the HTML.
  * @param {Record<string,string[]>} [ext]  Extra sources to merge in per directive.
  */
 function buildCachedCsp(ext = {}) {
@@ -305,6 +305,26 @@ function pageCacheTtl(spec, dev, defaultCache) {
   return cfg?.maxAge || 0
 }
 
+/** Build the in-process page cache key scoped to route + request parameters. */
+function buildCacheKey(spec, ctx) {
+  return spec.route + '\0' + JSON.stringify(ctx.params) + '\0' + JSON.stringify(ctx.query)
+}
+
+/**
+ * True when a page's rendered HTML is safe to cache in-process.
+ *
+ * A page is NOT cacheable if it has any of:
+ *   - spec.server  — embeds a nonce'd __PULSE_SERVER__ inline script
+ *   - spec.store   — same
+ *   - spec.hydrate — embeds a nonce'd __PULSE_NONCE__ inline script (for toasts)
+ *
+ * In all three cases the cached HTML would contain a nonce that doesn't match
+ * the nonce-free CSP used for cached responses, causing a CSP violation.
+ */
+function isCacheablePage(spec) {
+  return !spec.server && !spec.store?.length && !spec.hydrate
+}
+
 // ---------------------------------------------------------------------------
 // Dev import map — lets browser resolve @invisibleloop/pulse/* bare specifiers
 // ---------------------------------------------------------------------------
@@ -350,8 +370,7 @@ async function cachedRenderToString(spec, ctx, dev) {
     return renderToString(spec, ctx)
   }
 
-  // Build a cache key scoped to this route + request parameters
-  const key = spec.route + '\0' + JSON.stringify(ctx.params) + '\0' + JSON.stringify(ctx.query)
+  const key = buildCacheKey(spec, ctx)
 
   const cached = serverDataCache.get(key)
   if (cached) return cached
@@ -841,9 +860,8 @@ async function handleNavStreamResponse(spec, ctx, req, res) {
  * Checks the in-process page cache before rendering; stores result after.
  */
 async function handleStringResponse(spec, ctx, req, res, extraBody = '', dev = false, canonicalBase = '', nonce = '', runtimeBundle = '', defaultCache = null, store = null, csp = {}, faviconPath = null) {
-  const cacheKey = spec.route + '\0' + JSON.stringify(ctx.params) + '\0' + JSON.stringify(ctx.query)
-  // Pages with server data or store data embed a nonce'd __PULSE_SERVER__ script — don't cache them
-  const ttl      = (!spec.server && !spec.store?.length) ? pageCacheTtl(spec, dev, defaultCache) : 0
+  const cacheKey = buildCacheKey(spec, ctx)
+  const ttl      = isCacheablePage(spec) ? pageCacheTtl(spec, dev, defaultCache) : 0
 
   let html, serverTimingValue, fromCache = false
 
@@ -892,9 +910,8 @@ async function handleStringResponse(spec, ctx, req, res, extraBody = '', dev = f
  */
 async function handleStreamResponse(spec, ctx, req, res, extraBody = '', dev = false, canonicalBase = '', nonce = '', runtimeBundle = '', defaultCache = null, store = null, csp = {}, faviconPath = null) {
   // Serve from in-process page cache when available — skip streaming overhead.
-  // Pages with spec.server or spec.store embed a nonce'd __PULSE_SERVER__ script so are never cached.
-  const cacheKey = spec.route + '\0' + JSON.stringify(ctx.params) + '\0' + JSON.stringify(ctx.query)
-  const ttl      = (!spec.server && !spec.store?.length) ? pageCacheTtl(spec, dev, defaultCache) : 0
+  const cacheKey = buildCacheKey(spec, ctx)
+  const ttl      = isCacheablePage(spec) ? pageCacheTtl(spec, dev, defaultCache) : 0
   const cached   = ttl > 0 ? pageHtmlCache.get(cacheKey) : null
 
   if (cached) {
@@ -973,45 +990,19 @@ ${stylePreloads ? stylePreloads + '\n' : ''}${runtimePreload ? runtimePreload +
 <body${bodyAttr}>
   <div id="pulse-root">`
 
-  const storeImport  = !spec.hydrate?.startsWith('/dist/') && store?.hydrate
-    ? `\n  import store from '${escHtml(store.hydrate)}'`
-    : ''
-  const storeArg     = !spec.hydrate?.startsWith('/dist/') && store?.hydrate
-    ? ', { ssr: true, store }'
-    : ', { ssr: true }'
-
-  const hydrateScript = spec.hydrate
-    ? spec.hydrate.startsWith('/dist/')
-      ? `\n  <script type="module" src="${escHtml(spec.hydrate)}"></script>`
-      : `\n  <script type="module" nonce="${nonce}">
-  import spec from '${escHtml(spec.hydrate)}'
-  import { mount } from '/@pulse/runtime/index.js'
-  import { initNavigation } from '/@pulse/runtime/navigate.js'${storeImport}
-  const root = document.getElementById('pulse-root')
-  mount(spec, root, window.__PULSE_SERVER__ || {}${storeArg})
-  initNavigation(root, mount)
-</script>`
-    : ''
-
-  const scriptTags = (meta.scripts || [])
+  const scriptTags    = (meta.scripts || [])
     .map(src => `  <script src="${escHtml(src)}" defer></script>`)
     .join('\n')
+  const storeScript   = buildStoreScript(spec, ctx.store || null, nonce)
+  const hydrateScript = buildHydrateScript(spec, store, nonce)
 
   const resolvedExtraBody = typeof extraBody === 'function' ? extraBody(nonce) : extraBody
 
-  // Emit window.__PULSE_STORE__ so the client store singleton can be initialised.
-  // Also exposes __updatePulseStore__ for navigate.js to refresh store on navigation.
-  // window.__PULSE_NONCE__ lets the toast runtime inject a nonce'd <style> tag to
-  // satisfy the style-src CSP directive (which disallows uninonce'd inline styles).
-  const storeScript = ctx.store && Object.keys(ctx.store).length > 0
-    ? `\n  <script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';window.__PULSE_STORE__=${JSON.stringify(ctx.store)};window.__updatePulseStore__=function(s){window.__PULSE_STORE__=Object.assign(window.__PULSE_STORE__||{},s);};</script>`
-    : spec.hydrate
-      ? `\n  <script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';</script>`
-      : ''
-
   const docClose = `
   </div>
-  ${scriptTags}${storeScript}${hydrateScript}
+  ${scriptTags}
+  ${storeScript}
+  ${hydrateScript}
   ${resolvedExtraBody}
 </body>
 </html>`