@inglorious/ssx 0.3.0 → 0.4.1

package/README.md

@@ -30,7 +30,7 @@ Game engines solved state complexity years ago — Inglorious Store brings those
 - ✅ Entity-based state (manage multiple instances effortlessly)
 - ✅ No action creators, thunks, or slices
 - ✅ Predictable, testable, purely functional code
-- ✅ Built-in lifecycle events (`add`, `remove`, `morph`)
+- ✅ Built-in lifecycle events (`add`, `remove`)
 - ✅ 10x faster immutability than Redux Toolkit (Mutative vs Immer)
 
 ---
@@ -363,7 +363,6 @@ Inglorious Store has a few built-in events that you can use:
 
 - `add`: adds a new entity to the state. Triggers a `create` lifecycle event.
 - `remove`: removes an entity from the state. Triggers a `destroy` lifecycle event.
-- `morph`: changes the behavior of a type (advanced, used by middlewares/rendering systems)
 
 The lifecycle events can be used to define event handlers similar to constructor and destructor methods in OOP:
 
@@ -720,12 +719,12 @@ Each handler receives three arguments:
   - `dispatch(action)` - optional, if you prefer Redux-style dispatching
   - `getTypes()` - type definitions (for middleware)
   - `getType(typeName)` - type definition (for overriding)
+  - `setType(typeName, type)` - change the behavior of a type
 
 ### Built-in Events
 
 - **`create(entity)`** - triggered when entity added via `add` event, visible only to that entity
 - **`destroy(entity)`** - triggered when entity removed via `remove` event, visible only to that entity
-- **`morph(typeName, newType)`** - used to change the behavior of a type on the fly
 
 ### Notify vs Dispatch
 

package/bin/ssx.js

@@ -4,9 +4,9 @@ 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"
+import { build } from "../src/build.js"
+import { dev } from "../src/dev.js"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -28,40 +28,17 @@ program
   .description("Start development server with hot reload")
   .option("-r, --root <dir>", "source root directory", "src")
   .option("-p, --port <port>", "dev server port", 3000)
-  .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 dev
-      const { dev } = await import("../src/dev.js")
-
       await dev({
         rootDir: path.resolve(cwd, options.root),
         port: Number(options.port),
         renderOptions: {
-          seed: Number(options.seed),
           title: options.title,
           meta: {},
           styles: options.styles || [],
@@ -79,40 +56,17 @@ program
   .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 || [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ssx",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Server-Side-X. Xecution? Xperience? Who knows.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -41,13 +41,13 @@
     "access": "public"
   },
   "dependencies": {
+    "@lit-labs/ssr": "^4.0.0",
     "commander": "^14.0.2",
     "connect": "^3.7.0",
     "glob": "^13.0.0",
-    "happy-dom": "^20.0.11",
     "rollup-plugin-minify-template-literals": "^1.1.7",
     "vite": "^7.1.3",
-    "@inglorious/web": "3.0.1"
+    "@inglorious/web": "4.0.1"
   },
   "devDependencies": {
     "prettier": "^3.6.2",

package/src/build.js

@@ -7,13 +7,11 @@ import { build as viteBuild } from "vite"
 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 { generateStore } from "./store.js"
 import { createViteConfig } from "./vite-config.js"
 
 export async function build(options = {}) {
-  const { rootDir = "src", outDir = "dist", renderOptions = {} } = options
+  const { rootDir = "src", outDir = "dist" } = options
 
   console.log("🔨 Starting build...\n")
 
@@ -25,29 +23,23 @@ export async function build(options = {}) {
   const pages = await getPages(path.join(rootDir, "pages"))
   console.log(`📄 Found ${pages.length} pages to build\n`)
 
+  // Generate store config once for all pages
+  const store = await generateStore(pages, options)
+
   // Render all pages
-  const renderedPages = await generatePages(pages, options)
+  const htmls = await renderPages(store, 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, pages)
-  await fs.writeFile(path.join(outDir, "app.js"), app, "utf-8")
+  await fs.writeFile(path.join(outDir, "main.js"), app, "utf-8")
 
-  const main = generateMain()
-  await fs.writeFile(path.join(outDir, "main.js"), main, "utf-8")
-
-  for (const { page, html } of renderedPages) {
+  pages.forEach(async (page, index) => {
+    const html = htmls[index]
     const filePath = await writePageToDisk(page.path, html, outDir)
     console.log(`  ✓ ${filePath}`)
-  }
+  })
 
   // Bundle with Vite
   console.log("\n📦 Bundling with Vite...\n")
@@ -55,16 +47,14 @@ export async function build(options = {}) {
   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🧹 Cleaning up...\n")
 
   console.log("\n✨ Build complete!\n")
 
-  return { pages: renderedPages.length, outDir }
+  return { pages: htmls.length, outDir }
 }
 
-async function generatePages(pages, options = {}) {
+async function renderPages(store, pages, options = {}) {
   const { renderOptions } = options
 
   const renderedPages = []
@@ -72,13 +62,12 @@ async function generatePages(pages, options = {}) {
   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, {
+    const html = await renderPage(store, page, module, {
       ...renderOptions,
       wrap: true,
     })
-    renderedPages.push({ page, module, html })
+    renderedPages.push(html)
   }
 
   return renderedPages

package/src/dev.js

@@ -6,8 +6,6 @@ import { createServer } from "vite"
 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 { generateStore } from "./store.js"
 
 export async function dev(options = {}) {
@@ -22,15 +20,6 @@ export async function dev(options = {}) {
   // Generate store config once for all pages
   const store = await generateStore(pages, options)
 
-  const litLoader = generateLitLoader(renderOptions)
-  virtualFiles.set("/lit-loader.js", litLoader)
-
-  const app = generateApp(store, pages)
-  virtualFiles.set("/app.js", app)
-
-  const main = generateMain()
-  virtualFiles.set("/main.js", main)
-
   // Create Vite dev server
   const viteServer = await createServer({
     root: process.cwd(),
@@ -58,14 +47,15 @@ export async function dev(options = {}) {
       const page = pages.find((p) => matchRoute(p.path, url))
       if (!page) return next()
 
-      const store = await generateStore([page], options)
       const module = await viteServer.ssrLoadModule(page.filePath)
-      const html = await renderPage(store, module, {
+      const html = await renderPage(store, page, module, {
         ...renderOptions,
         wrap: true,
-        dev: true,
       })
 
+      const app = generateApp(store, pages)
+      virtualFiles.set("/main.js", app)
+
       res.setHeader("Content-Type", "text/html")
       res.end(html)
     } catch (error) {

package/src/html.js

@@ -1,22 +1,23 @@
-import { mount } from "@inglorious/web"
+import { html } from "@inglorious/web"
+import { render as ssrRender } from "@lit-labs/ssr"
+import { collectResult } from "@lit-labs/ssr/lib/render-result.js"
 
-export function toHTML(store, renderFn, options = {}) {
-  const window = globalThis.window
-  const document = window.document
+export async function toHTML(store, renderFn, options = {}) {
+  const api = { ...store._api }
+  api.render = createRender(api)
 
-  document.body.innerHTML = '<div id="root"></div>'
-  const root = document.getElementById("root")
+  // Generate the template
+  const template = renderFn(api)
 
-  mount(store, renderFn, root)
-  store.update()
+  // SSR render → HTML with hydration markers
+  const result = ssrRender(template)
+  const resultString = await collectResult(result)
 
-  const html = options.stripLitMarkers
-    ? stripLitMarkers(root.innerHTML)
-    : root.innerHTML
+  const finalHTML = options.stripLitMarkers
+    ? stripLitMarkers(resultString)
+    : resultString
 
-  window.close()
-
-  return options.wrap ? wrapHTML(html, options) : html
+  return options.wrap ? wrapHTML(finalHTML, options) : finalHTML
 }
 
 function stripLitMarkers(html) {
@@ -46,3 +47,29 @@ function wrapHTML(body, options) {
 </body>
 </html>`
 }
+
+function createRender(api) {
+  return function (id, options = {}) {
+    const entity = api.getEntity(id)
+
+    if (!entity) {
+      const { allowType } = options
+      if (!allowType) return ""
+
+      const type = api.getType(id)
+      if (!type?.render) {
+        console.warn(`No entity or type found: ${id}`)
+        return html`<div>Not found: ${id}</div>`
+      }
+      return type.render(api)
+    }
+
+    const type = api.getType(entity.type)
+    if (!type?.render) {
+      console.warn(`No render function for type: ${entity.type}`)
+      return html`<div>No renderer for ${entity.type}</div>`
+    }
+
+    return type.render(entity, api)
+  }
+}

package/src/html.test.js

@@ -5,27 +5,27 @@ import { toHTML } from "./html.js"
 
 const DEFAULT_OPTIONS = { stripLitMarkers: true }
 
-describe("toHTML", () => {
+describe("await toHTML", () => {
   describe("basic rendering", () => {
-    it("should render simple HTML without wrapping", () => {
+    it("should render simple HTML without wrapping", async () => {
       const store = createStore()
       const renderFn = () => html`<h1>Hello World</h1>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should render empty content", () => {
+    it("should render empty content", async () => {
       const store = createStore()
       const renderFn = () => html``
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should render nested elements", () => {
+    it("should render nested elements", async () => {
       const store = createStore()
       const renderFn = () =>
         html`<div class="container">
@@ -33,24 +33,24 @@ describe("toHTML", () => {
           <p>Content</p>
         </div>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should render with inline styles", () => {
+    it("should render with inline styles", async () => {
       const store = createStore()
       const renderFn = () =>
         html`<div style="color: red; font-size: 16px;">Styled</div>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
   })
 
   describe("rendering with state", () => {
-    it("should render entities from store", () => {
+    it("should render entities from store", async () => {
       const store = createStore({
         types: {
           message: {
@@ -64,12 +64,12 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("greeting")}</div>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should render multiple entities", () => {
+    it("should render multiple entities", async () => {
       const store = createStore({
         types: {
           item: {
@@ -88,12 +88,12 @@ describe("toHTML", () => {
           ${api.render("item1")} ${api.render("item2")} ${api.render("item3")}
         </ul>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should evaluate conditional rendering based on state", () => {
+    it("should evaluate conditional rendering based on state", async () => {
       const store = createStore({
         types: {
           content: {
@@ -110,18 +110,18 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("content")}</div>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
   })
 
   describe("HTML wrapping", () => {
-    it("should wrap HTML with basic DOCTYPE and structure", () => {
+    it("should wrap HTML with basic DOCTYPE and structure", async () => {
       const store = createStore()
       const renderFn = () => html`<h1>Page Title</h1>`
 
-      const result = toHTML(store, renderFn, {
+      const result = await toHTML(store, renderFn, {
         ...DEFAULT_OPTIONS,
         wrap: true,
         title: "My Page",
@@ -130,11 +130,11 @@ describe("toHTML", () => {
       expect(result).toMatchSnapshot()
     })
 
-    it("should include meta tags in wrapped HTML", () => {
+    it("should include meta tags in wrapped HTML", async () => {
       const store = createStore()
       const renderFn = () => html`<p>Content</p>`
 
-      const result = toHTML(store, renderFn, {
+      const result = await toHTML(store, renderFn, {
         ...DEFAULT_OPTIONS,
         wrap: true,
         title: "Test Page",
@@ -147,11 +147,11 @@ describe("toHTML", () => {
       expect(result).toMatchSnapshot()
     })
 
-    it("should include stylesheets in wrapped HTML", () => {
+    it("should include stylesheets in wrapped HTML", async () => {
       const store = createStore()
       const renderFn = () => html`<p>Content</p>`
 
-      const result = toHTML(store, renderFn, {
+      const result = await toHTML(store, renderFn, {
         ...DEFAULT_OPTIONS,
         wrap: true,
         styles: ["/css/style.css", "/css/theme.css"],
@@ -160,11 +160,11 @@ describe("toHTML", () => {
       expect(result).toMatchSnapshot()
     })
 
-    it("should include scripts in wrapped HTML", () => {
+    it("should include scripts in wrapped HTML", async () => {
       const store = createStore()
       const renderFn = () => html`<p>Content</p>`
 
-      const result = toHTML(store, renderFn, {
+      const result = await toHTML(store, renderFn, {
         ...DEFAULT_OPTIONS,
         wrap: true,
         scripts: ["/js/app.js", "/js/analytics.js"],
@@ -173,11 +173,11 @@ describe("toHTML", () => {
       expect(result).toMatchSnapshot()
     })
 
-    it("should include all options in wrapped HTML", () => {
+    it("should include all options in wrapped HTML", async () => {
       const store = createStore()
       const renderFn = () => html`<main>Main content</main>`
 
-      const result = toHTML(store, renderFn, {
+      const result = await toHTML(store, renderFn, {
         ...DEFAULT_OPTIONS,
         wrap: true,
         title: "Complete Page",
@@ -189,20 +189,23 @@ describe("toHTML", () => {
       expect(result).toMatchSnapshot()
     })
 
-    it("should default to empty title when not provided", () => {
+    it("should default to empty title when not provided", async () => {
       const store = createStore()
       const renderFn = () => html`<p>Content</p>`
 
-      const result = toHTML(store, renderFn, { ...DEFAULT_OPTIONS, wrap: true })
+      const result = await toHTML(store, renderFn, {
+        ...DEFAULT_OPTIONS,
+        wrap: true,
+      })
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should handle empty arrays for meta, styles, and scripts", () => {
+    it("should handle empty arrays for meta, styles, and scripts", async () => {
       const store = createStore()
       const renderFn = () => html`<p>Content</p>`
 
-      const result = toHTML(store, renderFn, {
+      const result = await toHTML(store, renderFn, {
         ...DEFAULT_OPTIONS,
         wrap: true,
         meta: {},
@@ -215,7 +218,7 @@ describe("toHTML", () => {
   })
 
   describe("API rendering within components", () => {
-    it("should support api.render() method in component render function", () => {
+    it("should support api.render() method in component render function", async () => {
       const store = createStore({
         types: {
           wrapper: {
@@ -231,14 +234,14 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("myWrapper")}</div>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
   })
 
   describe("complex scenarios", () => {
-    it("should render a complete page structure with message list", () => {
+    it("should render a complete page structure with message list", async () => {
       const store = createStore({
         types: {
           message: {
@@ -259,12 +262,12 @@ describe("toHTML", () => {
           <footer>© 2024</footer>
         </div>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should render wrapped complex page with all assets", () => {
+    it("should render wrapped complex page with all assets", async () => {
       const store = createStore({
         types: {
           header: { render: () => html`<header><h1>My Website</h1></header>` },
@@ -278,7 +281,7 @@ describe("toHTML", () => {
           <p>Welcome!</p>
         </div>`
 
-      const result = toHTML(store, renderFn, {
+      const result = await toHTML(store, renderFn, {
         ...DEFAULT_OPTIONS,
         wrap: true,
         title: "My Website",
@@ -295,7 +298,7 @@ describe("toHTML", () => {
   })
 
   describe("event handling", () => {
-    it("should render event handlers in templates", () => {
+    it("should render event handlers in templates", async () => {
       const store = createStore({
         types: {
           button: {
@@ -312,12 +315,12 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("myButton")}</div>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should render multiple event handlers", () => {
+    it("should render multiple event handlers", async () => {
       const store = createStore({
         types: {
           counter: {
@@ -340,36 +343,36 @@ describe("toHTML", () => {
 
       const renderFn = (api) => html`<div>${api.render("counter1")}</div>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
   })
 
   describe("edge cases", () => {
-    it("should handle special characters in content", () => {
+    it("should handle special characters in content", async () => {
       const store = createStore()
       const renderFn = () => html`<p>&lt;script&gt; &amp; "quotes"</p>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should not include wrap by default", () => {
+    it("should not include wrap by default", async () => {
       const store = createStore()
       const renderFn = () => html`<p>Content</p>`
 
-      const result = toHTML(store, renderFn, {})
+      const result = await toHTML(store, renderFn, {})
 
       expect(result).toMatchSnapshot()
     })
 
-    it("should return only inner HTML when wrap is false", () => {
+    it("should return only inner HTML when wrap is false", async () => {
       const store = createStore()
       const renderFn = () => html`<p>Inner</p>`
 
-      const result = toHTML(store, renderFn, {
+      const result = await toHTML(store, renderFn, {
         ...DEFAULT_OPTIONS,
         wrap: false,
       })
@@ -377,11 +380,11 @@ describe("toHTML", () => {
       expect(result).toMatchSnapshot()
     })
 
-    it("should close DOM window properly", () => {
+    it("should close DOM window properly", async () => {
       const store = createStore()
       const renderFn = () => html`<p>Test</p>`
 
-      const result = toHTML(store, renderFn, DEFAULT_OPTIONS)
+      const result = await toHTML(store, renderFn, DEFAULT_OPTIONS)
 
       expect(result).toBeDefined()
       expect(result).not.toBeNull()

package/src/render.js

@@ -1,31 +1,48 @@
 import { toHTML } from "./html.js"
 import { getModuleName } from "./module.js"
 
-export async function renderPage(store, pageModule, options) {
-  const name = getModuleName(pageModule)
+export async function renderPage(store, page, module, options = {}) {
+  const { title = "", meta = {}, scripts = [], styles = [] } = options
+
+  const name = getModuleName(module)
   const api = store._api
   const entity = api.getEntity(name)
 
-  if (pageModule.load) {
-    await pageModule.load(entity, store._api)
+  if (module.load) {
+    await module.load(entity, page, store._api)
+  }
+
+  const pageTitle = module.title
+    ? typeof module.title === "function"
+      ? module.title(entity, api)
+      : module.title
+    : title
+
+  const pageMeta = {
+    ...meta,
+    ...(typeof module.meta === "function"
+      ? module.meta(entity, api)
+      : (module.meta ?? {})),
   }
 
-  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
+  const pageScripts = [
+    ...scripts,
+    ...(typeof module.scripts === "function"
+      ? module.scripts(entity, api)
+      : (module.scripts ?? [])),
+  ]
+  const pageStyles = [
+    ...styles,
+    ...(typeof module.styles === "function"
+      ? module.styles(entity, api)
+      : (module.styles ?? [])),
+  ]
 
   return toHTML(store, (api) => api.render(name, { allowType: true }), {
     ...options,
-    title,
-    meta,
-    scripts,
-    styles,
+    title: pageTitle,
+    meta: pageMeta,
+    scripts: pageScripts,
+    styles: pageStyles,
   })
 }

package/src/render.test.js

@@ -11,6 +11,7 @@ const PAGES_DIR = path.join(ROOT_DIR, "pages")
 const DEFAULT_OPTIONS = { stripLitMarkers: true }
 
 it("should render a static page fragment", async () => {
+  const page = { path: "/" }
   const module = await import(path.resolve(path.join(PAGES_DIR, "about.js")))
 
   const store = createStore({
@@ -18,42 +19,45 @@ it("should render a static page fragment", async () => {
     updateMode: "manual",
   })
 
-  const html = await renderPage(store, module, DEFAULT_OPTIONS)
+  const html = await renderPage(store, page, module, DEFAULT_OPTIONS)
 
   expect(html).toMatchSnapshot()
 })
 
-it("should render a whole static page", async () => {
+it("should render a page with entity", async () => {
+  const page = { path: "/about" }
   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,
-    wrap: true,
-  })
+  const html = await renderPage(store, page, module, DEFAULT_OPTIONS)
 
   expect(html).toMatchSnapshot()
 })
 
-it("should render a page with entity", async () => {
+it("should render a page with metadata", async () => {
+  const page = { path: "/about" }
   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)
+  const html = await renderPage(store, page, module, {
+    ...DEFAULT_OPTIONS,
+    wrap: true,
+  })
 
   expect(html).toMatchSnapshot()
 })
 
 it("should render a page with pre-fetched data", async () => {
+  const page = { path: "/posts" }
   const module = await import(path.resolve(path.join(PAGES_DIR, "posts.js")))
 
   const store = createStore({
@@ -62,7 +66,7 @@ it("should render a page with pre-fetched data", async () => {
     updateMode: "manual",
   })
 
-  const html = await renderPage(store, module, DEFAULT_OPTIONS)
+  const html = await renderPage(store, page, module, DEFAULT_OPTIONS)
 
   expect(html).toMatchSnapshot()
 })

package/src/router.js

@@ -3,6 +3,8 @@ import { pathToFileURL } from "node:url"
 
 import { glob } from "glob"
 
+import { getModuleName } from "./module.js"
+
 const NEXT_MATCH = 1
 
 const STATIC_SEGMENT_WEIGHT = 3
@@ -18,44 +20,43 @@ export async function getPages(pagesDir = "pages") {
   const pages = []
 
   for (const route of routes) {
+    const module = await import(pathToFileURL(path.resolve(route.filePath)))
+    const moduleName = getModuleName(module)
+
     if (isDynamic(route.pattern)) {
       // Dynamic route - call getStaticPaths if it exists
-      try {
-        const module = await import(pathToFileURL(path.resolve(route.filePath)))
-
-        if (typeof module.getStaticPaths === "function") {
-          const paths = await module.getStaticPaths()
-
-          for (const pathOrObject of paths) {
-            const urlPath =
-              typeof pathOrObject === "string"
-                ? pathOrObject
-                : pathOrObject.path
-
-            const params = extractParams(route, urlPath)
-
-            pages.push({
-              path: urlPath,
-              modulePath: route.modulePath,
-              filePath: route.filePath,
-              params,
-            })
-          }
-        } else {
-          console.warn(
-            `Dynamic route ${route.filePath} has no getStaticPaths export. ` +
-              `It will be skipped during SSG.`,
-          )
+      if (typeof module.getStaticPaths === "function") {
+        const paths = await module.getStaticPaths()
+
+        for (const pathOrObject of paths) {
+          const urlPath =
+            typeof pathOrObject === "string" ? pathOrObject : pathOrObject.path
+
+          const params = extractParams(route, urlPath)
+
+          pages.push({
+            pattern: route.pattern,
+            path: urlPath,
+            modulePath: route.modulePath,
+            filePath: route.filePath,
+            moduleName,
+            params,
+          })
         }
-      } catch (error) {
-        console.error(`Error loading ${route.filePath}:`, error)
+      } else {
+        console.warn(
+          `Dynamic route ${route.filePath} has no getStaticPaths export. ` +
+            `It will be skipped during SSG.`,
+        )
       }
     } else {
       // Static route - add directly
       pages.push({
-        path: route.pattern === "" ? "/" : route.pattern,
+        pattern: route.pattern,
+        path: route.pattern || "/",
         modulePath: route.modulePath,
         filePath: route.filePath,
+        moduleName,
         params: {},
       })
     }

package/src/scripts/app.js

@@ -1,41 +1,58 @@
+/* eslint-disable no-unused-vars */
+
 /**
  * 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, pages) {
   // Collect all unique page modules and their exports
-  const routeEntries = pages.map(
-    (page) =>
-      `      "${page.path}": () => import("@/pages/${page.modulePath}")`,
-  )
+  const routes = pages
+    .filter((page, index) => {
+      return pages.findIndex((p) => p.pattern === page.pattern) === index
+    })
+    .map(
+      (page) =>
+        `  "${page.pattern}": () => import("@/pages/${page.modulePath}")`,
+    )
 
   return `import { createDevtools, createStore, mount } from "@inglorious/web"
-import { router } from "@inglorious/web/router"
+import { getRoute, router, setRoutes } from "@inglorious/web/router"
+
+const pages = ${JSON.stringify(pages.map(({ filePath, ...page }) => page))}
+const path = window.location.pathname + window.location.search + window.location.hash
+const page = pages.find((page) => page.path === path)
 
 const types = { router }
 
 const entities = {
   router: {
     type: "router",
-    routes: {
-${routeEntries.join(",\n")}
-    }
+    path: page.path,
+    route: page.moduleName,
   },
 ${JSON.stringify(store.getState(), null, 2).slice(1, -1)}
 }
 
 const middlewares = []
-// if (import.meta.env.DEV) {
+if (import.meta.env.DEV) {
   middlewares.push(createDevtools().middleware)
-// }
+}
+
+setRoutes({
+${routes.join(",\n")}
+})
+
+const module = await getRoute(page.pattern)()
+const type = module[page.moduleName]
+types[page.moduleName] = type
 
 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)`
+}, root)
+`
 }

package/src/vite-config.js

@@ -1,6 +1,6 @@
 import path from "node:path"
 
-import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
+// import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
 
 /**
  * Generate Vite config for building the client bundle
@@ -9,8 +9,8 @@ export function createViteConfig(options = {}) {
   const { rootDir = "src", outDir = "dist" } = options
 
   return {
-    root: outDir,
-    plugins: [minifyTemplateLiterals()],
+    root: rootDir,
+    // plugins: [minifyTemplateLiterals()], // TODO: minification breaks hydration. The footprint difference is minimal after all
     build: {
       outDir,
       emptyOutDir: false, // Don't delete HTML files we already generated
@@ -22,6 +22,12 @@ export function createViteConfig(options = {}) {
           entryFileNames: "[name].js",
           chunkFileNames: "[name].[hash].js",
           assetFileNames: "[name].[ext]",
+
+          manualChunks(id) {
+            if (id.includes("node_modules")) {
+              return "lib"
+            }
+          },
         },
       },
     },

package/src/scripts/lit-loader.js

@@ -1,23 +0,0 @@
-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

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