@inglorious/ssx 0.1.4 → 0.2.1

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.1.4",
+  "version": "0.2.1",
   "description": "Server-Side-X. Xecution? Xperience? Who knows.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -22,28 +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"
   },
   "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"
@@ -55,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__",
+    "serve": "pnpm dlx serve dist"
   }
 }

package/src/build.js

@@ -0,0 +1,125 @@
+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 = ["meta", "getStaticPaths", "getData"]
+
+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

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