@inglorious/ssx 0.1.4 → 0.2.1

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

@@ -0,0 +1,230 @@
+import path from "node:path"
+import { pathToFileURL } from "node:url"
+
+import { glob } from "glob"
+
+const NEXT_MATCH = 1
+
+const STATIC_SEGMENT_WEIGHT = 3
+const CATCH_ALL_ROUTE_WEIGHT = -10
+const SCORE_MULTIPLIER = 0.1
+
+/**
+ * Get all static paths for SSG build.
+ * This calls getStaticPaths() on dynamic route pages.
+ */
+export async function getPages(pagesDir = "pages") {
+  const routes = await getRoutes(pagesDir)
+  const pages = []
+
+  for (const route of routes) {
+    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.`,
+          )
+        }
+      } catch (error) {
+        console.error(`Error loading ${route.filePath}:`, error)
+      }
+    } else {
+      // Static route - add directly
+      pages.push({
+        path: route.pattern === "" ? "/" : route.pattern,
+        modulePath: route.modulePath,
+        filePath: route.filePath,
+        params: {},
+      })
+    }
+  }
+
+  return pages
+}
+
+/**
+ * Resolve a URL to a page file and extract params.
+ * Used by dev server for on-demand rendering.
+ */
+export async function resolvePage(url, pagesDir = "pages") {
+  const routes = await getRoutes(pagesDir)
+
+  // Normalize URL (remove query string and hash)
+  const [fullPath] = url.split("?")
+  const [normalizedUrl] = fullPath.split("#")
+
+  for (const route of routes) {
+    const match = route.regex.exec(normalizedUrl)
+
+    if (match) {
+      const params = {}
+      route.params.forEach((param, i) => {
+        params[param] = match[i + NEXT_MATCH]
+      })
+
+      return {
+        filePath: route.filePath,
+        params,
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Discovers all pages in the pages directory.
+ * Returns an array of route objects with pattern matching info.
+ */
+export async function getRoutes(pagesDir = "pages") {
+  // Find all .js and .ts files in pages directory
+  const files = await glob("**/*.{js,ts}", {
+    cwd: pagesDir,
+    ignore: ["**/*.test.{js,ts}", "**/*.spec.{js,ts}"],
+    posix: true,
+  })
+
+  const routes = files.map((file) => {
+    const filePath = path.join(pagesDir, file)
+    const pattern = filePathToPattern(file)
+    const { regex, params } = patternToRegex(pattern)
+
+    return {
+      pattern,
+      modulePath: file,
+      filePath,
+      regex,
+      params,
+    }
+  })
+
+  // Sort routes by specificity (most specific first)
+  routes.sort((a, b) => {
+    const aScore = routeSpecificity(a.pattern)
+    const bScore = routeSpecificity(b.pattern)
+    return bScore - aScore
+  })
+
+  return routes
+}
+
+/**
+ * Convert a file path to a route pattern.
+ * pages/index.js -> /
+ * pages/about.js -> /about
+ * pages/blog/[slug].js -> /blog/:slug
+ * pages/api/[...path].js -> /api/*
+ */
+function filePathToPattern(file) {
+  let pattern = file
+    .replace(/\\/g, "/")
+    .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
+
+  // Normalize to start with /
+  return "/" + pattern.replace(/^\//, "")
+}
+
+/**
+ * Convert a route pattern to a regex and extract parameter names.
+ */
+function patternToRegex(pattern) {
+  const params = []
+
+  // Replace :param with capture groups
+  let regexStr = pattern.replace(/:(\w+)/g, (_, param) => {
+    params.push(param)
+    return "([^/]+)"
+  })
+
+  // Replace * with greedy capture
+  regexStr = regexStr.replace(/\*/g, () => {
+    params.push("path")
+    return "(.*)"
+  })
+
+  // Exact match
+  regexStr = "^" + regexStr + "$"
+
+  return {
+    regex: new RegExp(regexStr),
+    params,
+  }
+}
+
+/**
+ * Calculate route specificity for sorting.
+ * Higher score = more specific = should match first.
+ */
+function routeSpecificity(pattern) {
+  let score = 0
+
+  // Static segments add 3 points each
+  const segments = pattern.split("/").filter(Boolean)
+  segments.forEach((segment) => {
+    if (!segment.startsWith(":") && segment !== "*") {
+      score += STATIC_SEGMENT_WEIGHT
+    }
+  })
+
+  // Dynamic segments add 1 point
+  const dynamicCount = (pattern.match(/:/g) || []).length
+  score += dynamicCount
+
+  // Catch-all routes have lowest priority (subtract points)
+  if (pattern.includes("*")) {
+    score += CATCH_ALL_ROUTE_WEIGHT
+  }
+
+  // Longer paths are more specific
+  score += segments.length * SCORE_MULTIPLIER
+
+  return score
+}
+
+/**
+ * Check if a pattern is dynamic (contains params or wildcards).
+ */
+function isDynamic(pattern) {
+  return pattern.includes(":") || pattern.includes("*")
+}
+
+/**
+ * Extract params from a URL based on a route.
+ */
+function extractParams(route, url) {
+  const match = route.regex.exec(url)
+  if (!match) return {}
+
+  const params = {}
+  route.params.forEach((param, i) => {
+    params[param] = match[i + NEXT_MATCH]
+  })
+
+  return params
+}

package/src/router.test.js

@@ -0,0 +1,103 @@
+import path from "node:path"
+
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+import { getPages, getRoutes, resolvePage } from "./router.js"
+
+const FIXTURES_DIR = path.join(__dirname, "__fixtures__", "pages")
+
+describe("router", () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe("getRoutes", () => {
+    it("should discover and sort routes correctly", async () => {
+      const routes = await getRoutes(FIXTURES_DIR)
+
+      // Expected order based on specificity:
+      // 1. /posts/:id (static 'posts' + dynamic 'id') -> score ~4.2
+      // 2. /blog/:slug (static 'blog' + dynamic 'slug') -> score ~4.2
+      // 3. /about (static 'about') -> score ~3.1
+      // 4. / (root) -> score 0
+      // 5. /api/* (catch-all) -> score negative
+
+      const patterns = routes.map((r) => r.pattern)
+
+      expect(patterns).toContain("/posts/:id")
+      expect(patterns).toContain("/blog/:slug")
+      expect(patterns).toContain("/about")
+      expect(patterns).toContain("/")
+      expect(patterns).toContain("/api/*")
+
+      // Check specific ordering constraints
+      // Specific routes before catch-all
+      expect(patterns.indexOf("/about")).toBeLessThan(
+        patterns.indexOf("/api/*"),
+      )
+      // 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(6)
+    })
+  })
+
+  describe("resolvePage", () => {
+    it("should resolve root page", async () => {
+      const page = await resolvePage("/", FIXTURES_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)
+      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)
+      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)
+      expect(page).not.toBeNull()
+      expect(page.filePath).toContain("api")
+      expect(page.params).toEqual({ path: "v1/users" })
+    })
+
+    it("should return null for non-matching url", async () => {
+      // Since we have a catch-all /api/*, /api/foo matches.
+      // But /foo doesn't match anything except maybe if we had a root catch-all.
+      // We don't have a root catch-all, just /api/*.
+      // Wait, /blog/:slug matches /blog/foo.
+      // /posts/:id matches /posts/1.
+      // /about matches /about.
+      // / matches /.
+      // So /foo should return null.
+      const page = await resolvePage("/foo", FIXTURES_DIR)
+      expect(page).toBeNull()
+    })
+  })
+
+  describe("getPages", () => {
+    it("should generate static paths for all pages", async () => {
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+      const pages = await getPages(FIXTURES_DIR)
+
+      expect(pages).toMatchSnapshot()
+
+      // Dynamic route without getStaticPaths should be skipped (and warn)
+      const blogPage = pages.find((p) => p.path.includes("/blog/"))
+      expect(blogPage).toBeUndefined()
+
+      expect(consoleSpy).toHaveBeenCalled()
+      expect(consoleSpy.mock.calls[1][0]).toContain("has no getStaticPaths")
+    })
+  })
+})

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),
+      },
+    },
+  }
+}