@inglorious/ssx 0.2.0 → 0.2.2

package/bin/ssx.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+import { readFile } from "node:fs/promises"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { Command } from "commander"
+import { Window } from "happy-dom"
+
+import { patchRandom } from "../src/random.js"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// Read package.json for version
+const packageJson = JSON.parse(
+  await readFile(path.join(__dirname, "../package.json"), "utf-8"),
+)
+
+const program = new Command()
+
+program
+  .name("ssx")
+  .description("Static Site Xecution for @inglorious/web")
+  .version(packageJson.version)
+
+program
+  .command("build")
+  .description("Build static site from pages directory")
+  .option("-r, --root <dir>", "source root directory", "src")
+  .option("-o, --out <dir>", "output directory", "dist")
+  .option("-s, --seed <seed>", "seed for random number generator", 42)
+  .option("-t, --title <title>", "default page title", "My Site")
+  .option("--styles <styles...>", "CSS files to include")
+  .option("--scripts <scripts...>", "JS files to include")
+  .action(async (options) => {
+    const cwd = process.cwd()
+    const seed = Number(options.seed)
+
+    try {
+      // 1️⃣ Install DOM *before anything else*
+      const window = new Window()
+
+      globalThis.window = window
+      globalThis.document = window.document
+      globalThis.HTMLElement = window.HTMLElement
+      globalThis.Node = window.Node
+      globalThis.Comment = window.Comment
+
+      // Optional but sometimes needed
+      globalThis.customElements = window.customElements
+
+      // 3️⃣ Patch with the parsed seed
+      const restore = patchRandom(seed)
+      await import("@inglorious/web")
+      restore()
+
+      // 4️⃣ NOW import and run build
+      const { build } = await import("../src/build.js")
+
+      await build({
+        rootDir: path.resolve(cwd, options.root),
+        outDir: path.resolve(cwd, options.out),
+        renderOptions: {
+          seed,
+          title: options.title,
+          meta: {},
+          styles: options.styles || [],
+          scripts: options.scripts || [],
+        },
+      })
+    } catch (error) {
+      console.error("Build failed:", error)
+      process.exit(1)
+    }
+  })
+
+program.parse()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ssx",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Server-Side-X. Xecution? Xperience? Who knows.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -22,29 +22,33 @@
     "framework"
   ],
   "type": "module",
+  "bin": {
+    "ssx": "./bin/ssx.js"
+  },
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./src/store.js"
-    },
-    "./*": {
-      "types": "./types/*.d.ts",
-      "import": "./src/*"
-    }
+    "./build": "./src/build.js",
+    "./router": "./src/router.js",
+    "./render": "./src/render.js",
+    "./html": "./src/html.js"
   },
   "files": [
-    "src"
+    "bin",
+    "src",
+    "!src/__fixtures__",
+    "!src/__snapshots__"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "commander": "^14.0.2",
     "glob": "^13.0.0",
     "happy-dom": "^20.0.11",
-    "@inglorious/web": "2.6.1"
+    "@inglorious/web": "3.0.0"
   },
   "devDependencies": {
     "prettier": "^3.6.2",
+    "rollup-plugin-minify-template-literals": "^1.1.7",
     "vite": "^7.1.3",
     "vitest": "^1.6.1",
     "@inglorious/eslint-config": "1.1.1"
@@ -56,6 +60,8 @@
     "format": "prettier --write '**/*.{js,jsx}'",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "test:watch": "vitest",
-    "test": "vitest run"
+    "test": "vitest run",
+    "dev": "node ./bin/ssx.js build -r ./src/__fixtures__",
+    "preview": "pnpm dlx serve -s dist"
   }
 }

package/src/build.js

@@ -1,13 +1,125 @@
-// import { renderPage } from "./render.js"
-// import { getPages } from "./router.js"
-
-export async function build() {
-  // const pages = await getPages()
-  // for (const page of pages) {
-  // const module = await import(page.filePath)
-  // const { html, storeConfig, renderFn } = await renderPage(module, page)
-  // TODO: implement this
-  // Inject client script and write to dist/
-  // await writePageToDisk(page.path, html, { storeConfig, renderFn })
-  // }
+import fs from "node:fs/promises"
+import path from "node:path"
+import { pathToFileURL } from "node:url"
+
+import { createStore } from "@inglorious/web"
+import { build as viteBuild } from "vite"
+
+import { getModuleName } from "./module.js"
+import { renderPage } from "./render.js"
+import { getPages } from "./router.js"
+import { generateApp } from "./scripts/app.js"
+import { generateLitLoader } from "./scripts/lit-loader.js"
+import { generateMain } from "./scripts/main.js"
+import { createViteConfig } from "./vite-config.js"
+
+export async function build(options = {}) {
+  const { rootDir = "src", outDir = "dist", renderOptions = {} } = options
+
+  console.log("🔨 Starting build...\n")
+
+  // Clean output directory
+  await fs.rm(outDir, { recursive: true, force: true })
+  await fs.mkdir(outDir, { recursive: true })
+
+  // Get all pages to build
+  const pages = await getPages(path.join(rootDir, "pages"))
+  console.log(`📄 Found ${pages.length} pages to build\n`)
+
+  // Render all pages
+  const renderedPages = await generatePages(pages, options)
+
+  // Write all pages to disk
+  console.log("\n💾 Writing files...\n")
+
+  // Generate store config once for all pages
+  const store = await generateStore(pages, options)
+
+  // Generate lit-loader.js
+  const litLoader = generateLitLoader(renderOptions)
+  await fs.writeFile(path.join(outDir, "lit-loader.js"), litLoader, "utf-8")
+
+  const app = generateApp(store, renderedPages)
+  await fs.writeFile(path.join(outDir, "app.js"), app, "utf-8")
+
+  const main = generateMain()
+  await fs.writeFile(path.join(outDir, "main.js"), main, "utf-8")
+
+  for (const { page, html } of renderedPages) {
+    const filePath = await writePageToDisk(page.path, html, outDir)
+    console.log(`  ✓ ${filePath}`)
+  }
+
+  // Bundle with Vite
+  console.log("\n📦 Bundling with Vite...\n")
+  const viteConfig = createViteConfig({ rootDir, outDir })
+  await viteBuild(viteConfig)
+
+  // Remove bundled files
+  console.log("\n🧹 Cleaning up...\n")
+  await fs.rm(path.join(outDir, "lit-loader.js"))
+  await fs.rm(path.join(outDir, "app.js"))
+
+  console.log("\n✨ Build complete!\n")
+
+  return { pages: renderedPages.length, outDir }
+}
+
+async function generateStore(pages = [], options = {}) {
+  const { rootDir = "src" } = options
+
+  const types = {}
+  for (const page of pages) {
+    const pageModule = await import(pathToFileURL(page.filePath))
+    const name = getModuleName(pageModule)
+    types[name] = pageModule[name]
+  }
+
+  const { entities } = await import(
+    pathToFileURL(path.join(rootDir, "entities.js"))
+  )
+
+  return createStore({ types, entities, updateMode: "manual" })
+}
+
+async function generatePages(pages, options = {}) {
+  const { renderOptions } = options
+
+  const renderedPages = []
+
+  for (const page of pages) {
+    console.log(`  Rendering ${page.path}...`)
+
+    const store = await generateStore([page], options)
+    const module = await import(pathToFileURL(page.filePath))
+    const html = await renderPage(store, module, {
+      ...renderOptions,
+      wrap: true,
+    })
+    renderedPages.push({ page, module, html })
+  }
+
+  return renderedPages
+}
+
+/**
+ * Write a page to disk with proper directory structure.
+ */
+async function writePageToDisk(pagePath, html, outDir = "dist") {
+  // Convert URL path to file path
+  // / -> dist/index.html
+  // /about -> dist/about/index.html
+  // /blog/post-1 -> dist/blog/post-1/index.html
+
+  // Remove leading slash
+  const cleanPath = pagePath.replace(/^\//, "")
+  const filePath = path.join(outDir, cleanPath, "index.html")
+
+  // Ensure directory exists
+  await fs.mkdir(path.dirname(filePath), { recursive: true })
+
+  // Write file
+  await fs.writeFile(filePath, html, "utf-8")
+
+  return filePath
 }

package/src/build.test.js

@@ -0,0 +1,11 @@
+import path from "node:path"
+
+import { it } from "vitest"
+
+import { build } from "./build"
+
+const FIXTURES_DIR = path.join(__dirname, "__fixtures__")
+
+it.skip("should build full static pages", async () => {
+  await build({ rootDir: FIXTURES_DIR })
+})

package/src/html.js

@@ -1,15 +1,19 @@
 import { mount } from "@inglorious/web"
-import { Window } from "happy-dom"
 
 export function toHTML(store, renderFn, options = {}) {
-  const window = new Window()
+  const window = globalThis.window
   const document = window.document
-  document.body.innerHTML = '<div id="root"></div>'
 
+  document.body.innerHTML = '<div id="root"></div>'
   const root = document.getElementById("root")
+
   mount(store, renderFn, root)
+  store.update()
+
+  const html = options.stripLitMarkers
+    ? stripLitMarkers(root.innerHTML)
+    : root.innerHTML
 
-  const html = stripLitMarkers(root.innerHTML)
   window.close()
 
   return options.wrap ? wrapHTML(html, options) : html
@@ -22,17 +26,22 @@ function stripLitMarkers(html) {
 }
 
 function wrapHTML(body, options) {
-  const { title = "", metas = [], styles = [], scripts = [] } = options
+  const { title = "", meta = {}, styles = [], scripts = [] } = options
+
   return `<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>${title}</title>
-  ${metas.map((meta) => `<meta name="${meta.name}" content="${meta.content}">`).join("\n")}
+  ${Object.entries(meta)
+    .map(([name, content]) => `<meta name="${name}" content="${content}">`)
+    .join("\n")}
   ${styles.map((href) => `<link rel="stylesheet" href="${href}">`).join("\n")}
 </head>
 <body>
   <div id="root">${body}</div>
+
+  <script type="module" src="/main.js"></script>
   ${scripts.map((src) => `<script type="module" src="${src}"></script>`).join("\n")}
 </body>
 </html>`

package/src/html.test.js

@@ -3,13 +3,15 @@ import { describe, expect, it } from "vitest"
 
 import { toHTML } from "./html.js"
 
+const DEFAULT_OPTIONS = { stripLitMarkers: true }
+
 describe("toHTML", () => {
   describe("basic rendering", () => {
     it("should render simple HTML without wrapping", () => {
       const store = createStore()
       const renderFn = () => html`<h1>Hello World</h1>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -18,7 +20,7 @@ describe("toHTML", () => {
       const store = createStore()
       const renderFn = () => html``
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -31,7 +33,7 @@ describe("toHTML", () => {
           <p>Content</p>
         </div>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -41,7 +43,7 @@ describe("toHTML", () => {
       const renderFn = () =>
         html`<div style="color: red; font-size: 16px;">Styled</div>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -62,7 +64,7 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("greeting")}</div>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -86,7 +88,7 @@ describe("toHTML", () => {
           ${api.render("item1")} ${api.render("item2")} ${api.render("item3")}
         </ul>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -108,7 +110,7 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("content")}</div>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -119,7 +121,11 @@ describe("toHTML", () => {
       const store = createStore()
       const renderFn = () => html`<h1>Page Title</h1>`
 
-      const result = toHTML(store, renderFn, { wrap: true, title: "My Page" })
+      const result = toHTML(store, renderFn, {
+        ...DEFAULT_OPTIONS,
+        wrap: true,
+        title: "My Page",
+      })
 
       expect(result).toMatchSnapshot()
     })
@@ -129,12 +135,13 @@ describe("toHTML", () => {
       const renderFn = () => html`<p>Content</p>`
 
       const result = toHTML(store, renderFn, {
+        ...DEFAULT_OPTIONS,
         wrap: true,
         title: "Test Page",
-        metas: [
-          { name: "description", content: "Test description" },
-          { name: "viewport", content: "width=device-width, initial-scale=1" },
-        ],
+        meta: {
+          description: "Test description",
+          viewport: "width=device-width, initial-scale=1",
+        },
       })
 
       expect(result).toMatchSnapshot()
@@ -145,6 +152,7 @@ describe("toHTML", () => {
       const renderFn = () => html`<p>Content</p>`
 
       const result = toHTML(store, renderFn, {
+        ...DEFAULT_OPTIONS,
         wrap: true,
         styles: ["/css/style.css", "/css/theme.css"],
       })
@@ -157,6 +165,7 @@ describe("toHTML", () => {
       const renderFn = () => html`<p>Content</p>`
 
       const result = toHTML(store, renderFn, {
+        ...DEFAULT_OPTIONS,
         wrap: true,
         scripts: ["/js/app.js", "/js/analytics.js"],
       })
@@ -169,9 +178,10 @@ describe("toHTML", () => {
       const renderFn = () => html`<main>Main content</main>`
 
       const result = toHTML(store, renderFn, {
+        ...DEFAULT_OPTIONS,
         wrap: true,
         title: "Complete Page",
-        metas: [{ name: "author", content: "Test Author" }],
+        meta: { author: "Test Author" },
         styles: ["/style.css"],
         scripts: ["/app.js"],
       })
@@ -183,18 +193,19 @@ describe("toHTML", () => {
       const store = createStore()
       const renderFn = () => html`<p>Content</p>`
 
-      const result = toHTML(store, renderFn, { wrap: true })
+      const result = toHTML(store, renderFn, { ...DEFAULT_OPTIONS, wrap: true })
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should handle empty arrays for metas, styles, and scripts", () => {
+    it("should handle empty arrays for meta, styles, and scripts", () => {
       const store = createStore()
       const renderFn = () => html`<p>Content</p>`
 
       const result = toHTML(store, renderFn, {
+        ...DEFAULT_OPTIONS,
         wrap: true,
-        metas: [],
+        meta: {},
         styles: [],
         scripts: [],
       })
@@ -220,7 +231,7 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("myWrapper")}</div>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -248,7 +259,7 @@ describe("toHTML", () => {
           <footer>© 2024</footer>
         </div>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -268,12 +279,13 @@ describe("toHTML", () => {
         </div>`
 
       const result = toHTML(store, renderFn, {
+        ...DEFAULT_OPTIONS,
         wrap: true,
         title: "My Website",
-        metas: [
-          { name: "description", content: "Welcome to my site" },
-          { name: "viewport", content: "width=device-width" },
-        ],
+        meta: {
+          description: "Welcome to my website",
+          viewport: "width=device-width",
+        },
         styles: ["/style.css"],
         scripts: ["/script.js"],
       })
@@ -300,7 +312,7 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("myButton")}</div>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -328,7 +340,7 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("counter1")}</div>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -339,7 +351,7 @@ describe("toHTML", () => {
       const store = createStore()
       const renderFn = () => html`<p>&lt;script&gt; &amp; "quotes"</p>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
@@ -357,7 +369,10 @@ describe("toHTML", () => {
       const store = createStore()
       const renderFn = () => html`<p>Inner</p>`
 
-      const result = toHTML(store, renderFn, { wrap: false })
+      const result = toHTML(store, renderFn, {
+        ...DEFAULT_OPTIONS,
+        wrap: false,
+      })
 
       expect(result).toMatchSnapshot()
     })
@@ -366,7 +381,7 @@ describe("toHTML", () => {
       const store = createStore()
       const renderFn = () => html`<p>Test</p>`
 
-      const result = toHTML(store, renderFn)
+      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toBeDefined()
       expect(result).not.toBeNull()

package/src/module.js

@@ -0,0 +1,20 @@
+const RESERVED = ["title", "meta", "scripts", "styles", "load"]
+
+export function getModuleName(pageModule) {
+  const name = Object.keys(pageModule).find((key) => {
+    if (RESERVED.includes(key)) return false
+    const value = pageModule[key]
+    return (
+      value && typeof value === "object" && typeof value.render === "function"
+    )
+  })
+
+  if (!name) {
+    throw new Error(
+      "Page module must export an entity with a render() method. " +
+        `Found exports: ${Object.keys(pageModule).join(", ")}`,
+    )
+  }
+
+  return name
+}

package/src/random.js

@@ -0,0 +1,30 @@
+let mode = "normal"
+let seed = 0
+
+export function patchRandom(seed) {
+  const original = Math.random
+  const restore = setSeed(seed)
+
+  Math.random = random
+
+  return () => {
+    restore()
+    Math.random = original
+  }
+}
+
+function random() {
+  if (mode === "seeded") {
+    seed = (seed * 1664525 + 1013904223) % 4294967296
+    return seed / 4294967296
+  }
+  return Math.random()
+}
+
+function setSeed(newSeed) {
+  seed = newSeed
+  mode = "seeded"
+  return () => {
+    mode = "normal"
+  }
+}

package/src/render.js

@@ -1,17 +1,31 @@
-import { createStore } from "@inglorious/web"
+import { toHTML } from "./html.js"
+import { getModuleName } from "./module.js"
 
-import { toHTML } from "./html"
+export async function renderPage(store, pageModule, options) {
+  const name = getModuleName(pageModule)
+  const api = store._api
+  const entity = api.getEntity(name)
 
-export async function renderPage(pageModule, context) {
-  const data = (await pageModule.getData?.(context)) ?? {}
-  const storeConfig = pageModule.getStore(data)
-  const store = createStore(storeConfig)
+  if (pageModule.load) {
+    await pageModule.load(entity, store._api)
+  }
 
-  const html = toHTML(pageModule.render, store)
+  const title =
+    typeof pageModule.title === "function"
+      ? pageModule.title(entity, api)
+      : pageModule.title
+  const meta =
+    typeof options.meta === "function"
+      ? options.meta(entity, api)
+      : options.meta
+  const scripts = pageModule.scripts
+  const styles = pageModule.styles
 
-  return {
-    html,
-    storeConfig,
-    renderFn: pageModule.render,
-  }
+  return toHTML(store, (api) => api.render(name, { allowType: true }), {
+    ...options,
+    title,
+    meta,
+    scripts,
+    styles,
+  })
 }

package/src/render.test.js

@@ -0,0 +1,67 @@
+import path from "node:path"
+
+import { createStore } from "@inglorious/web"
+import { expect, it } from "vitest"
+
+import { renderPage } from "./render"
+
+const PAGES_DIR = path.join(__dirname, "__fixtures__", "pages")
+
+const DEFAULT_OPTIONS = { stripLitMarkers: true }
+
+it("should render a static page fragment", async () => {
+  const module = await import(path.resolve(path.join(PAGES_DIR, "about.js")))
+
+  const store = createStore({
+    types: { about: module.about },
+    updateMode: "manual",
+  })
+
+  const html = await renderPage(store, module, DEFAULT_OPTIONS)
+
+  expect(html).toMatchSnapshot()
+})
+
+it("should render a whole static page", async () => {
+  const module = await import(path.resolve(path.join(PAGES_DIR, "about.js")))
+
+  const store = createStore({
+    types: { about: module.about },
+    updateMode: "manual",
+  })
+
+  const html = await renderPage(store, module, {
+    ...DEFAULT_OPTIONS,
+    wrap: true,
+  })
+
+  expect(html).toMatchSnapshot()
+})
+
+it("should render a page with entity", async () => {
+  const module = await import(path.resolve(path.join(PAGES_DIR, "about.js")))
+
+  const store = createStore({
+    types: { about: module.about },
+    entities: { about: { type: "about", name: "Us" } },
+    updateMode: "manual",
+  })
+
+  const html = await renderPage(store, module, DEFAULT_OPTIONS)
+
+  expect(html).toMatchSnapshot()
+})
+
+it("should render a page with pre-fetched data", async () => {
+  const module = await import(path.resolve(path.join(PAGES_DIR, "posts.js")))
+
+  const store = createStore({
+    types: { posts: module.posts },
+    entities: { posts: { type: "posts", name: "Antony", posts: [] } },
+    updateMode: "manual",
+  })
+
+  const html = await renderPage(store, module, DEFAULT_OPTIONS)
+
+  expect(html).toMatchSnapshot()
+})

package/src/router.js

@@ -1,4 +1,5 @@
 import path from "node:path"
+import { pathToFileURL } from "node:url"
 
 import { glob } from "glob"
 
@@ -20,7 +21,7 @@ export async function getPages(pagesDir = "pages") {
     if (isDynamic(route.pattern)) {
       // Dynamic route - call getStaticPaths if it exists
       try {
-        const module = await import(path.resolve(route.filePath))
+        const module = await import(pathToFileURL(path.resolve(route.filePath)))
 
         if (typeof module.getStaticPaths === "function") {
           const paths = await module.getStaticPaths()
@@ -35,6 +36,7 @@ export async function getPages(pagesDir = "pages") {
 
             pages.push({
               path: urlPath,
+              modulePath: route.modulePath,
               filePath: route.filePath,
               params,
             })
@@ -52,6 +54,7 @@ export async function getPages(pagesDir = "pages") {
       // Static route - add directly
       pages.push({
         path: route.pattern === "" ? "/" : route.pattern,
+        modulePath: route.modulePath,
         filePath: route.filePath,
         params: {},
       })
@@ -99,7 +102,8 @@ export async function getRoutes(pagesDir = "pages") {
   // Find all .js and .ts files in pages directory
   const files = await glob("**/*.{js,ts}", {
     cwd: pagesDir,
-    ignore: ["**/_*.{js,ts}", "**/*.test.{js,ts}", "**/*.spec.{js,ts}"],
+    ignore: ["**/*.test.{js,ts}", "**/*.spec.{js,ts}"],
+    posix: true,
   })
 
   const routes = files.map((file) => {
@@ -109,6 +113,7 @@ export async function getRoutes(pagesDir = "pages") {
 
     return {
       pattern,
+      modulePath: file,
       filePath,
       regex,
       params,
@@ -138,8 +143,8 @@ function filePathToPattern(file) {
     .replace(/\.(js|ts)$/, "") // Remove extension
     .replace(/\/index$/, "") // index becomes root of directory
     .replace(/^index$/, "") // Handle root index
-    .replace(/\[\.\.\.(\w+)\]/g, "*") // [...path] becomes *
-    .replace(/\[(\w+)\]/g, ":$1") // [id] becomes :id
+    .replace(/__(\w+)/g, "*") // __path becomes *
+    .replace(/_(\w+)/g, ":$1") // _id becomes :id
 
   // Normalize to start with /
   return "/" + pattern.replace(/^\//, "")

package/src/router.test.js

@@ -38,7 +38,7 @@ describe("router", () => {
       // Root usually comes after specific paths but before catch-all if it was a catch-all root,
       // but here / is static.
       // Let's just check that we found them.
-      expect(routes).toHaveLength(5)
+      expect(routes).toHaveLength(6)
     })
   })
 
@@ -90,21 +90,7 @@ describe("router", () => {
       const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
       const pages = await getPages(FIXTURES_DIR)
 
-      // Static routes
-      expect(pages).toContainEqual(
-        expect.objectContaining({ path: "/", params: {} }),
-      )
-      expect(pages).toContainEqual(
-        expect.objectContaining({ path: "/about", params: {} }),
-      )
-
-      // Dynamic routes with getStaticPaths
-      expect(pages).toContainEqual(
-        expect.objectContaining({ path: "/posts/1", params: { id: "1" } }),
-      )
-      expect(pages).toContainEqual(
-        expect.objectContaining({ path: "/posts/2", params: { id: "2" } }),
-      )
+      expect(pages).toMatchSnapshot()
 
       // Dynamic route without getStaticPaths should be skipped (and warn)
       const blogPage = pages.find((p) => p.path.includes("/blog/"))

package/src/scripts/app.js

@@ -0,0 +1,70 @@
+import { getModuleName } from "../module.js"
+
+/**
+ * Generate the code that goes inside the <!-- SSX --> marker.
+ * This creates the types and entities objects for the client-side store.
+ */
+export function generateApp(store, renderedPages) {
+  // Collect all unique page modules and their exports
+  const pageImports = new Map()
+  const routeEntries = []
+
+  for (const { page, module } of renderedPages) {
+    const importPath = "@/pages/" + page.modulePath
+
+    const exportName = getModuleName(module)
+
+    pageImports.set(importPath, exportName)
+
+    routeEntries.push(`      '${page.path}': '${exportName}'`)
+  }
+
+  // Generate import statements
+  const imports = Array.from(pageImports.entries())
+    .map(
+      ([importPath, exportName]) =>
+        `import { ${exportName} } from '${importPath}'`,
+    )
+    .join("\n")
+
+  // Generate routes object
+  const routes = routeEntries.join(",\n")
+
+  // Generate type registrations
+  const typeEntries = Array.from(pageImports.values())
+    .map((name) => `  ${name}`)
+    .join(",\n")
+
+  return `import { createDevtools, createStore, mount, router } from "@inglorious/web"
+${imports}
+
+const types = {
+  router,
+${typeEntries}
+}
+
+const entities = {
+  router: {
+    type: 'router',
+    routes: {
+${routes}
+    }
+  },
+${JSON.stringify(store.getState(), null, 2).slice(1, -1)}
+}
+
+const middlewares = []
+if (import.meta.env.DEV) {
+  middlewares.push(createDevtools().middleware)
+}
+
+const store = createStore({ types, entities, middlewares })
+
+const root = document.getElementById("root")
+root.innerHTML = ""
+
+mount(store, (api) => {
+  const { route } = api.getEntity("router")
+  return api.render(route, { allowType: true })
+}, root)`
+}

package/src/scripts/lit-loader.js

@@ -0,0 +1,23 @@
+export function generateLitLoader(options = {}) {
+  return `let seed = ${options.seed}
+let mode = "seeded"
+
+const originalRandom = Math.random
+Math.random = random
+
+await import("@inglorious/web")
+
+queueMicrotask(() => {
+  Math.random = originalRandom
+  mode = "normal"
+})
+
+function random() {
+  if (mode === "seeded") {
+    seed = (seed * 1664525 + 1013904223) % 4294967296
+    return seed / 4294967296
+  }
+  return originalRandom()
+}
+`
+}

package/src/scripts/main.js

@@ -0,0 +1,5 @@
+export function generateMain() {
+  return `import "./lit-loader.js"
+await import("./app.js")
+`
+}

package/src/vite-config.js

@@ -0,0 +1,38 @@
+import path from "node:path"
+
+import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
+
+/**
+ * Generate Vite config for building the client bundle
+ */
+export function createViteConfig(options = {}) {
+  const { rootDir = "src", outDir = "dist" } = options
+
+  return {
+    root: process.cwd(),
+    plugins: [minifyTemplateLiterals()],
+    build: {
+      outDir,
+      emptyOutDir: false, // Don't delete HTML files we already generated
+      rollupOptions: {
+        input: {
+          main: path.resolve(outDir, "main.js"),
+        },
+        output: {
+          entryFileNames: "[name].js",
+          chunkFileNames: "[name].[hash].js",
+          assetFileNames: "[name].[ext]",
+          manualChunks(id) {
+            // if (id.includes("node_modules/@inglorious")) return "inglorious"
+            if (id.includes("node_modules")) return "vendor"
+          },
+        },
+      },
+    },
+    resolve: {
+      alias: {
+        "@": path.resolve(process.cwd(), rootDir),
+      },
+    },
+  }
+}

package/src/__fixtures__/pages/about.js

@@ -1,7 +0,0 @@
-import { html } from "@inglorious/web"
-
-export const about = {
-  render() {
-    return html`<h1>About</h1>`
-  },
-}

package/src/__fixtures__/pages/api/[...path].js

@@ -1,7 +0,0 @@
-import { html } from "@inglorious/web"
-
-export const api = {
-  render() {
-    return html`<h1>API</h1>`
-  },
-}

package/src/__fixtures__/pages/blog/[slug].js

@@ -1,7 +0,0 @@
-import { html } from "@inglorious/web"
-
-export const blog = {
-  render() {
-    return html`<h1>Blog</h1>`
-  },
-}

package/src/__fixtures__/pages/index.js

@@ -1,7 +0,0 @@
-import { html } from "@inglorious/web"
-
-export const index = {
-  render() {
-    return html`<h1>Index</h1>`
-  },
-}

package/src/__fixtures__/pages/posts/[id].js

@@ -1,11 +0,0 @@
-import { html } from "@inglorious/web"
-
-export const posts = {
-  render() {
-    return html`<h1>Posts</h1>`
-  },
-}
-
-export async function getStaticPaths() {
-  return [{ path: "/posts/1", params: { id: "1" } }, "/posts/2"]
-}

package/src/__snapshots__/html.test.js.snap

@@ -1,193 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`toHTML > API rendering within components > should support api.render() method in component render function 1`] = `"<div><div><span>Test Item</span></div></div>"`;
-
-exports[`toHTML > HTML wrapping > should default to empty title when not provided 1`] = `
-"<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title></title>
-  
-  
-</head>
-<body>
-  <div id="root"><p>Content</p></div>
-  
-</body>
-</html>"
-`;
-
-exports[`toHTML > HTML wrapping > should handle empty arrays for metas, styles, and scripts 1`] = `
-"<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title></title>
-  
-  
-</head>
-<body>
-  <div id="root"><p>Content</p></div>
-  
-</body>
-</html>"
-`;
-
-exports[`toHTML > HTML wrapping > should include all options in wrapped HTML 1`] = `
-"<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>Complete Page</title>
-  <meta name="author" content="Test Author">
-  <link rel="stylesheet" href="/style.css">
-</head>
-<body>
-  <div id="root"><main>Main content</main></div>
-  <script type="module" src="/app.js"></script>
-</body>
-</html>"
-`;
-
-exports[`toHTML > HTML wrapping > should include meta tags in wrapped HTML 1`] = `
-"<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>Test Page</title>
-  <meta name="description" content="Test description">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-  
-</head>
-<body>
-  <div id="root"><p>Content</p></div>
-  
-</body>
-</html>"
-`;
-
-exports[`toHTML > HTML wrapping > should include scripts in wrapped HTML 1`] = `
-"<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title></title>
-  
-  
-</head>
-<body>
-  <div id="root"><p>Content</p></div>
-  <script type="module" src="/js/app.js"></script>
-<script type="module" src="/js/analytics.js"></script>
-</body>
-</html>"
-`;
-
-exports[`toHTML > HTML wrapping > should include stylesheets in wrapped HTML 1`] = `
-"<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title></title>
-  
-  <link rel="stylesheet" href="/css/style.css">
-<link rel="stylesheet" href="/css/theme.css">
-</head>
-<body>
-  <div id="root"><p>Content</p></div>
-  
-</body>
-</html>"
-`;
-
-exports[`toHTML > HTML wrapping > should wrap HTML with basic DOCTYPE and structure 1`] = `
-"<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>My Page</title>
-  
-  
-</head>
-<body>
-  <div id="root"><h1>Page Title</h1></div>
-  
-</body>
-</html>"
-`;
-
-exports[`toHTML > basic rendering > should render empty content 1`] = `""`;
-
-exports[`toHTML > basic rendering > should render nested elements 1`] = `
-"<div class="container">
-          <h1>Title</h1>
-          <p>Content</p>
-        </div>"
-`;
-
-exports[`toHTML > basic rendering > should render simple HTML without wrapping 1`] = `"<h1>Hello World</h1>"`;
-
-exports[`toHTML > basic rendering > should render with inline styles 1`] = `"<div style="color: red; font-size: 16px;">Styled</div>"`;
-
-exports[`toHTML > complex scenarios > should render a complete page structure with message list 1`] = `
-"<div class="app">
-          <header><h1>Messages</h1></header>
-          <main><div class="message"><p>First message</p></div> <div class="message"><p>Second message</p></div></main>
-          <footer>© 2024</footer>
-        </div>"
-`;
-
-exports[`toHTML > complex scenarios > should render wrapped complex page with all assets 1`] = `
-"<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>My Website</title>
-  <meta name="description" content="Welcome to my site">
-<meta name="viewport" content="width=device-width">
-  <link rel="stylesheet" href="/style.css">
-</head>
-<body>
-  <div id="root"><div>
-          <header><h1>My Website</h1></header>
-          <p>Welcome!</p>
-        </div></div>
-  <script type="module" src="/script.js"></script>
-</body>
-</html>"
-`;
-
-exports[`toHTML > edge cases > should handle special characters in content 1`] = `"<p>&lt;script&gt; &amp; "quotes"</p>"`;
-
-exports[`toHTML > edge cases > should not include wrap by default 1`] = `"<p>Content</p>"`;
-
-exports[`toHTML > edge cases > should return only inner HTML when wrap is false 1`] = `"<p>Inner</p>"`;
-
-exports[`toHTML > event handling > should render event handlers in templates 1`] = `
-"<div><div>
-                Click me
-              </div></div>"
-`;
-
-exports[`toHTML > event handling > should render multiple event handlers 1`] = `
-"<div><div>
-                <button>
-                  +
-                </button>
-                <span>5</span>
-                <button>
-                  -
-                </button>
-              </div></div>"
-`;
-
-exports[`toHTML > rendering with state > should evaluate conditional rendering based on state 1`] = `"<div><p>Visible content</p></div>"`;
-
-exports[`toHTML > rendering with state > should render entities from store 1`] = `"<div><span>Hello from store</span></div>"`;
-
-exports[`toHTML > rendering with state > should render multiple entities 1`] = `
-"<ul>
-          <li>First</li> <li>Second</li> <li>Third</li>
-        </ul>"
-`;