@inglorious/ssx 0.2.2 → 0.3.0

package/bin/ssx.js

@@ -23,6 +23,57 @@ program
   .description("Static Site Xecution for @inglorious/web")
   .version(packageJson.version)
 
+program
+  .command("dev")
+  .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 || [],
+          scripts: options.scripts || [],
+        },
+      })
+    } catch (error) {
+      console.error("Dev server failed:", error)
+      process.exit(1)
+    }
+  })
+
 program
   .command("build")
   .description("Build static site from pages directory")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ssx",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Server-Side-X. Xecution? Xperience? Who knows.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -34,22 +34,23 @@
   "files": [
     "bin",
     "src",
-    "!src/__fixtures__",
-    "!src/__snapshots__"
+    "!src/**/__fixtures__",
+    "!src/**/__snapshots__"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "commander": "^14.0.2",
+    "connect": "^3.7.0",
     "glob": "^13.0.0",
     "happy-dom": "^20.0.11",
-    "@inglorious/web": "3.0.0"
+    "rollup-plugin-minify-template-literals": "^1.1.7",
+    "vite": "^7.1.3",
+    "@inglorious/web": "3.0.1"
   },
   "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"
   },
@@ -61,7 +62,8 @@
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "test:watch": "vitest",
     "test": "vitest run",
-    "dev": "node ./bin/ssx.js build -r ./src/__fixtures__",
-    "preview": "pnpm dlx serve -s dist"
+    "dev": "node ./bin/ssx.js dev -r ./src/__fixtures__",
+    "build": "node ./bin/ssx.js build -r ./src/__fixtures__",
+    "preview": "pnpm dlx serve dist"
   }
 }

package/src/build.js

@@ -2,15 +2,14 @@ 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 { generateStore } from "./store.js"
 import { createViteConfig } from "./vite-config.js"
 
 export async function build(options = {}) {
@@ -39,7 +38,7 @@ export async function build(options = {}) {
   const litLoader = generateLitLoader(renderOptions)
   await fs.writeFile(path.join(outDir, "lit-loader.js"), litLoader, "utf-8")
 
-  const app = generateApp(store, renderedPages)
+  const app = generateApp(store, pages)
   await fs.writeFile(path.join(outDir, "app.js"), app, "utf-8")
 
   const main = generateMain()
@@ -65,23 +64,6 @@ export async function build(options = {}) {
   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
 

package/src/build.test.js

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

package/src/dev.js

@@ -0,0 +1,121 @@
+import path from "node:path"
+
+import connect from "connect"
+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 = {}) {
+  const { rootDir = "src", port = 3000, renderOptions = {} } = options
+
+  console.log("🚀 Starting dev server...\n")
+
+  // Get all pages once at startup
+  const pages = await getPages(path.join(rootDir, "pages"))
+  console.log(`📄 Found ${pages.length} pages\n`)
+
+  // 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(),
+    server: { port, middlewareMode: true },
+    appType: "custom",
+    plugins: [virtualPlugin()],
+    resolve: {
+      alias: {
+        "@": path.resolve(process.cwd(), rootDir),
+      },
+    },
+  })
+
+  // Use Vite's middleware first (handles HMR, static files, etc.)
+  const connectServer = connect()
+
+  connectServer.use(viteServer.middlewares)
+
+  // Add SSR middleware
+  connectServer.use(async (req, res, next) => {
+    const [url] = req.url.split("?")
+
+    try {
+      // Find matching page
+      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, {
+        ...renderOptions,
+        wrap: true,
+        dev: true,
+      })
+
+      res.setHeader("Content-Type", "text/html")
+      res.end(html)
+    } catch (error) {
+      viteServer.ssrFixStacktrace(error)
+      next(error) // Let Vite handle the error overlay
+    }
+  })
+
+  const server = connectServer.listen(port)
+
+  console.log(`\n✨ Dev server running at http://localhost:${port}\n`)
+  console.log("Press Ctrl+C to stop\n")
+
+  return {
+    close: () => {
+      server.close()
+      viteServer.close()
+    },
+  }
+}
+
+// Simple route matcher (could be moved to router.js)
+function matchRoute(pattern, url) {
+  const patternParts = pattern.split("/").filter(Boolean)
+  const urlParts = url.split("/").filter(Boolean)
+
+  if (patternParts.length !== urlParts.length) {
+    return false
+  }
+
+  return patternParts.every((part, i) => {
+    if (part.startsWith(":") || part.startsWith("[")) {
+      return true
+    }
+    return part === urlParts[i]
+  })
+}
+
+const virtualFiles = new Map()
+
+function virtualPlugin() {
+  return {
+    name: "ssx-virtual-files",
+
+    resolveId(id) {
+      if (virtualFiles.has(id)) return id
+    },
+
+    load(id) {
+      if (virtualFiles.has(id)) return virtualFiles.get(id)
+    },
+  }
+}

package/src/html.js

@@ -26,7 +26,7 @@ function stripLitMarkers(html) {
 }
 
 function wrapHTML(body, options) {
-  const { title = "", meta = {}, styles = [], scripts = [] } = options
+  const { dev, title = "", meta = {}, styles = [], scripts = [] } = options
 
   return `<!DOCTYPE html>
 <html>
@@ -41,7 +41,7 @@ function wrapHTML(body, options) {
 <body>
   <div id="root">${body}</div>
 
-  <script type="module" src="/main.js"></script>
+  ${dev ? `<script type="module" src="/@vite/client"></script>` : ``}<script type="module" src="/main.js"></script>
   ${scripts.map((src) => `<script type="module" src="${src}"></script>`).join("\n")}
 </body>
 </html>`

package/src/module.test.js

@@ -0,0 +1,45 @@
+import { expect, it } from "vitest"
+
+import { getModuleName } from "./module"
+
+it("should get the name when it's the only export", () => {
+  const module = {
+    about: {
+      render: () => {},
+    },
+  }
+
+  expect(getModuleName(module)).toBe("about")
+})
+
+it("should get the name when there's other exports", () => {
+  const module = {
+    about: {
+      render: () => {},
+    },
+    title: "About",
+    meta: {
+      description: "About page",
+    },
+    scripts: ["/script.js"],
+    styles: ["/style.css"],
+  }
+
+  expect(getModuleName(module)).toBe("about")
+})
+
+it("should get the name when the exports are functions", () => {
+  const module = {
+    about: {
+      render: () => {},
+    },
+    title: () => "About",
+    meta: () => ({
+      description: "About page",
+    }),
+    scripts: ["/script.js"],
+    styles: ["/style.css"],
+  }
+
+  expect(getModuleName(module)).toBe("about")
+})

package/src/render.test.js

@@ -5,7 +5,8 @@ import { expect, it } from "vitest"
 
 import { renderPage } from "./render"
 
-const PAGES_DIR = path.join(__dirname, "__fixtures__", "pages")
+const ROOT_DIR = path.join(__dirname, "__fixtures__")
+const PAGES_DIR = path.join(ROOT_DIR, "pages")
 
 const DEFAULT_OPTIONS = { stripLitMarkers: true }
 

package/src/router.test.js

@@ -4,7 +4,8 @@ import { afterEach, describe, expect, it, vi } from "vitest"
 
 import { getPages, getRoutes, resolvePage } from "./router.js"
 
-const FIXTURES_DIR = path.join(__dirname, "__fixtures__", "pages")
+const ROOT_DIR = path.join(__dirname, "__fixtures__")
+const PAGES_DIR = path.join(ROOT_DIR, "pages")
 
 describe("router", () => {
   afterEach(() => {
@@ -13,7 +14,7 @@ describe("router", () => {
 
   describe("getRoutes", () => {
     it("should discover and sort routes correctly", async () => {
-      const routes = await getRoutes(FIXTURES_DIR)
+      const routes = await getRoutes(PAGES_DIR)
 
       // Expected order based on specificity:
       // 1. /posts/:id (static 'posts' + dynamic 'id') -> score ~4.2
@@ -44,28 +45,28 @@ describe("router", () => {
 
   describe("resolvePage", () => {
     it("should resolve root page", async () => {
-      const page = await resolvePage("/", FIXTURES_DIR)
+      const page = await resolvePage("/", PAGES_DIR)
       expect(page).not.toBeNull()
       expect(page.filePath).toContain("index.js")
       expect(page.params).toEqual({})
     })
 
     it("should resolve static page", async () => {
-      const page = await resolvePage("/about", FIXTURES_DIR)
+      const page = await resolvePage("/about", PAGES_DIR)
       expect(page).not.toBeNull()
       expect(page.filePath).toContain("about.js")
       expect(page.params).toEqual({})
     })
 
     it("should resolve dynamic page with params", async () => {
-      const page = await resolvePage("/blog/hello-world", FIXTURES_DIR)
+      const page = await resolvePage("/blog/hello-world", PAGES_DIR)
       expect(page).not.toBeNull()
       expect(page.filePath).toContain("blog")
       expect(page.params).toEqual({ slug: "hello-world" })
     })
 
     it("should resolve catch-all page", async () => {
-      const page = await resolvePage("/api/v1/users", FIXTURES_DIR)
+      const page = await resolvePage("/api/v1/users", PAGES_DIR)
       expect(page).not.toBeNull()
       expect(page.filePath).toContain("api")
       expect(page.params).toEqual({ path: "v1/users" })
@@ -80,7 +81,7 @@ describe("router", () => {
       // /about matches /about.
       // / matches /.
       // So /foo should return null.
-      const page = await resolvePage("/foo", FIXTURES_DIR)
+      const page = await resolvePage("/foo", PAGES_DIR)
       expect(page).toBeNull()
     })
   })
@@ -88,7 +89,7 @@ describe("router", () => {
   describe("getPages", () => {
     it("should generate static paths for all pages", async () => {
       const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
-      const pages = await getPages(FIXTURES_DIR)
+      const pages = await getPages(PAGES_DIR)
 
       expect(pages).toMatchSnapshot()
 

package/src/scripts/app.js

@@ -1,62 +1,33 @@
-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) {
+export function generateApp(store, pages) {
   // 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}'`)
-  }
+  const routeEntries = pages.map(
+    (page) =>
+      `      "${page.path}": () => import("@/pages/${page.modulePath}")`,
+  )
 
-  // Generate import statements
-  const imports = Array.from(pageImports.entries())
-    .map(
-      ([importPath, exportName]) =>
-        `import { ${exportName} } from '${importPath}'`,
-    )
-    .join("\n")
+  return `import { createDevtools, createStore, mount } from "@inglorious/web"
+import { router } from "@inglorious/web/router"
 
-  // 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 types = { router }
 
 const entities = {
   router: {
-    type: 'router',
+    type: "router",
     routes: {
-${routes}
+${routeEntries.join(",\n")}
     }
   },
 ${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)
-}
+// }
 
 const store = createStore({ types, entities, middlewares })
 

package/src/scripts/app.test.js

@@ -0,0 +1,47 @@
+import path from "node:path"
+
+import { expect, it } from "vitest"
+
+import { generateStore } from "../store"
+import { generateApp } from "./app"
+
+const ROOT_DIR = path.join(__dirname, "..", "__fixtures__")
+
+it("should generate the app script for a static page", async () => {
+  const page = {
+    path: "/",
+    modulePath: "index.js",
+    filePath: path.join(ROOT_DIR, "pages", "index.js"),
+  }
+  const store = await generateStore([page], { rootDir: ROOT_DIR })
+
+  const app = generateApp(store, [page])
+
+  expect(app).toMatchSnapshot()
+})
+
+it("should generate the app script for a page with an entity", async () => {
+  const page = {
+    path: "/about",
+    modulePath: "about.js",
+    filePath: path.join(ROOT_DIR, "pages", "about.js"),
+  }
+  const store = await generateStore([page], { rootDir: ROOT_DIR })
+
+  const app = generateApp(store, [page])
+
+  expect(app).toMatchSnapshot()
+})
+
+it("should generate the app script for a page that has metadata", async () => {
+  const page = {
+    path: "/posts",
+    modulePath: "posts.js",
+    filePath: path.join(ROOT_DIR, "pages", "posts.js"),
+  }
+  const store = await generateStore([page], { rootDir: ROOT_DIR })
+
+  const app = generateApp(store, [page])
+
+  expect(app).toMatchSnapshot()
+})

package/src/scripts/main.js

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

package/src/store.js

@@ -0,0 +1,23 @@
+import path from "node:path"
+import { pathToFileURL } from "node:url"
+
+import { createStore } from "@inglorious/web"
+
+import { getModuleName } from "./module.js"
+
+export 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" })
+}

package/src/store.test.js

@@ -0,0 +1,40 @@
+import path from "node:path"
+
+import { expect, it } from "vitest"
+
+import { generateStore } from "./store"
+
+const ROOT_DIR = path.join(__dirname, "__fixtures__")
+
+it("should generate the proper types and entities from a static page", async () => {
+  const page = {
+    filePath: path.join(ROOT_DIR, "pages", "index.js"),
+  }
+
+  const store = await generateStore([page], { rootDir: ROOT_DIR })
+
+  expect(store.getType("index").render).toBeDefined()
+  expect(store.getState()).toMatchSnapshot()
+})
+
+it("should generate the proper types and entities from a page with an entity", async () => {
+  const page = {
+    filePath: path.join(ROOT_DIR, "pages", "about.js"),
+  }
+
+  const store = await generateStore([page], { rootDir: ROOT_DIR })
+
+  expect(store.getType("about").render).toBeDefined()
+  expect(store.getState()).toMatchSnapshot()
+})
+
+it("should generate the proper types and entities from a page that has metadata", async () => {
+  const page = {
+    filePath: path.join(ROOT_DIR, "pages", "posts.js"),
+  }
+
+  const store = await generateStore([page], { rootDir: ROOT_DIR })
+
+  expect(store.getType("posts").render).toBeDefined()
+  expect(store.getState()).toMatchSnapshot()
+})

package/src/vite-config.js

@@ -9,7 +9,7 @@ export function createViteConfig(options = {}) {
   const { rootDir = "src", outDir = "dist" } = options
 
   return {
-    root: process.cwd(),
+    root: outDir,
     plugins: [minifyTemplateLiterals()],
     build: {
       outDir,
@@ -22,10 +22,6 @@ export function createViteConfig(options = {}) {
           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"
-          },
         },
       },
     },