@inglorious/ssx 0.4.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ssx",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "Server-Side-X. Xecution? Xperience? Who knows.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "glob": "^13.0.0",
     "rollup-plugin-minify-template-literals": "^1.1.7",
     "vite": "^7.1.3",
-    "@inglorious/web": "4.0.0"
+    "@inglorious/web": "4.0.1"
   },
   "devDependencies": {
     "prettier": "^3.6.2",

package/src/build.js

@@ -27,7 +27,7 @@ export async function build(options = {}) {
   const store = await generateStore(pages, options)
 
   // Render all pages
-  const renderedPages = await generatePages(store, pages, options)
+  const htmls = await renderPages(store, pages, options)
 
   // Write all pages to disk
   console.log("\n💾 Writing files...\n")
@@ -35,10 +35,11 @@ export async function build(options = {}) {
   const app = generateApp(store, pages)
   await fs.writeFile(path.join(outDir, "main.js"), app, "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")
@@ -50,10 +51,10 @@ export async function build(options = {}) {
 
   console.log("\n✨ Build complete!\n")
 
-  return { pages: renderedPages.length, outDir }
+  return { pages: htmls.length, outDir }
 }
 
-async function generatePages(store, pages, options = {}) {
+async function renderPages(store, pages, options = {}) {
   const { renderOptions } = options
 
   const renderedPages = []
@@ -62,11 +63,11 @@ async function generatePages(store, pages, options = {}) {
     console.log(`  Rendering ${page.path}...`)
 
     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

@@ -48,7 +48,7 @@ export async function dev(options = {}) {
       if (!page) return next()
 
       const module = await viteServer.ssrLoadModule(page.filePath)
-      const html = await renderPage(store, module, {
+      const html = await renderPage(store, page, module, {
         ...renderOptions,
         wrap: true,
       })

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,51 +19,54 @@ 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 module = await import(path.resolve(path.join(PAGES_DIR, "posts.js")))
+  const page = { path: "/blog" }
+  const module = await import(path.resolve(path.join(PAGES_DIR, "blog.js")))
 
   const store = createStore({
-    types: { posts: module.posts },
-    entities: { posts: { type: "posts", name: "Antony", posts: [] } },
+    types: { blog: module.blog },
+    entities: { blog: { type: "blog", name: "Antony", posts: [] } },
     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

@@ -35,6 +35,7 @@ export async function getPages(pagesDir = "pages") {
           const params = extractParams(route, urlPath)
 
           pages.push({
+            pattern: route.pattern,
             path: urlPath,
             modulePath: route.modulePath,
             filePath: route.filePath,
@@ -51,7 +52,8 @@ export async function getPages(pagesDir = "pages") {
     } 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,

package/src/router.test.js

@@ -25,8 +25,8 @@ describe("router", () => {
 
       const patterns = routes.map((r) => r.pattern)
 
-      expect(patterns).toContain("/posts/:id")
-      expect(patterns).toContain("/blog/:slug")
+      expect(patterns).toContain("/posts/:slug")
+      expect(patterns).toContain("/blog")
       expect(patterns).toContain("/about")
       expect(patterns).toContain("/")
       expect(patterns).toContain("/api/*")
@@ -39,7 +39,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(6)
+      expect(routes).toHaveLength(5)
     })
   })
 
@@ -59,9 +59,9 @@ describe("router", () => {
     })
 
     it("should resolve dynamic page with params", async () => {
-      const page = await resolvePage("/blog/hello-world", PAGES_DIR)
+      const page = await resolvePage("/posts/hello-world", PAGES_DIR)
       expect(page).not.toBeNull()
-      expect(page.filePath).toContain("blog")
+      expect(page.filePath).toContain("posts")
       expect(page.params).toEqual({ slug: "hello-world" })
     })
 

package/src/scripts/app.js

@@ -6,9 +6,14 @@
  */
 export function generateApp(store, pages) {
   // Collect all unique page modules and their exports
-  const routes = 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 { getRoute, router, setRoutes } from "@inglorious/web/router"
@@ -37,7 +42,7 @@ setRoutes({
 ${routes.join(",\n")}
 })
 
-const module = await getRoute(page.path)()
+const module = await getRoute(page.pattern)()
 const type = module[page.moduleName]
 types[page.moduleName] = type
 

package/src/scripts/app.test.js

@@ -35,9 +35,9 @@ it("should generate the app script for a page with an entity", async () => {
 
 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"),
+    path: "/blog",
+    modulePath: "blog.js",
+    filePath: path.join(ROOT_DIR, "pages", "blog.js"),
   }
   const store = await generateStore([page], { rootDir: ROOT_DIR })
 

package/src/store.js

@@ -15,9 +15,15 @@ export async function generateStore(pages = [], options = {}) {
     types[name] = pageModule[name]
   }
 
-  const { entities } = await import(
-    pathToFileURL(path.join(rootDir, "entities.js"))
-  )
+  let entities = {}
+  try {
+    const module = await import(
+      pathToFileURL(path.join(rootDir, "entities.js"))
+    )
+    entities = module.entities
+  } catch {
+    entities = {}
+  }
 
   return createStore({ types, entities, updateMode: "manual" })
 }

package/src/store.test.js

@@ -30,11 +30,11 @@ it("should generate the proper types and entities from a page with an entity", a
 
 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"),
+    filePath: path.join(ROOT_DIR, "pages", "blog.js"),
   }
 
   const store = await generateStore([page], { rootDir: ROOT_DIR })
 
-  expect(store.getType("posts").render).toBeDefined()
+  expect(store.getType("blog").render).toBeDefined()
   expect(store.getState()).toMatchSnapshot()
 })