@inglorious/ssx 1.1.1 → 1.3.0

package/README.md

@@ -30,7 +30,8 @@ SSX takes your entity-based web apps and generates optimized static HTML with fu
 - **Hot reload dev server** - See changes instantly
 - **Lazy-loaded routes** - Code splitting automatically
 - **lit-html hydration** - Interactive UI without the bloat
-- **TypeScript ready** - Full type support (coming soon)
+- **TypeScript Ready** - Write your pages and entities in TypeScript.
+- **Image Optimization** - Automatic compression for static assets.
 
 ### 🚀 Production Ready
 
@@ -59,6 +60,32 @@ npm run dev
 
 Or manually: -->
 
+### Create Your First Site (TypeScript)
+
+```typescript
+// src/pages/index.ts
+import { html } from "@inglorious/web"
+
+// You can import API for type safety, though it's optional
+// import type { API } from "@inglorious/web"
+
+export const index = {
+  render(/* entity: any, api: API */) {
+    return html`
+      <div>
+        <h1>Welcome to SSX!</h1>
+        <p>This page was pre-rendered at build time.</p>
+        <nav>
+          <a href="/about">About</a>
+        </nav>
+      </div>
+    `
+  },
+}
+```
+
+### Create Your First Site (JavaScript)
+
 ```javascript
 // src/pages/index.js
 import { html } from "@inglorious/web"
@@ -119,7 +146,7 @@ Deploy `dist/` to:
 
 ## Features
 
-### �️ Sitemap & RSS Generation
+### 🗺️ Sitemap & RSS Generation
 
 SSX automatically generates `sitemap.xml` and `rss.xml` based on your pages. Configure them in `src/site.config.js`:
 
@@ -159,7 +186,7 @@ export default {
 
 Pages with a `published` date in metadata are included in RSS feeds.
 
-### �📁 File-Based Routing
+### 📁 File-Based Routing
 
 Your file structure defines your routes:
 
@@ -363,6 +390,13 @@ api.notify("navigate", {
 
 Routes are lazy-loaded on demand, keeping initial bundle size small.
 
+### 🖼️ Image Optimization
+
+SSX includes built-in image optimization using `vite-plugin-image-optimizer`.
+
+- **Automatic compression** - PNG, JPEG, GIF, SVG, WebP, and AVIF are compressed at build time.
+- **Lossless & Lossy** - Configurable settings via `vite` config in `site.config.js`.
+
 ---
 
 ## CLI
@@ -609,8 +643,8 @@ Check out these example projects:
 
 ## Roadmap
 
-- [ ] TypeScript support
-- [ ] Image optimization
+- [x] TypeScript support
+- [x] Image optimization
 - [ ] API routes (serverless functions)
 - [ ] MDX support
 - [ ] i18n helpers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ssx",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "Server-Side-X. Xecution? Xperience? Who knows.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -49,6 +49,9 @@
   },
   "devDependencies": {
     "prettier": "^3.6.2",
+    "sharp": "^0.34.5",
+    "svgo": "^4.0.0",
+    "vite-plugin-image-optimizer": "^2.0.3",
     "vitest": "^1.6.1",
     "@inglorious/eslint-config": "1.1.1"
   },

package/src/build/build.test.js

@@ -1,8 +1,8 @@
 import fs from "node:fs/promises"
 import path from "node:path"
 
-import { build as viteBuild } from "vite"
-import { afterEach, describe, expect, it, vi } from "vitest"
+import { build as viteBuild, createServer } from "vite"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 
 import { getPages } from "../router/index.js"
 import { generateApp } from "../scripts/app.js"
@@ -39,6 +39,13 @@ describe("build", () => {
   // Mock console to keep output clean
   vi.spyOn(console, "log").mockImplementation(() => {})
 
+  beforeEach(() => {
+    createServer.mockResolvedValue({
+      ssrLoadModule: vi.fn(),
+      close: vi.fn(),
+    })
+  })
+
   afterEach(() => {
     vi.clearAllMocks()
   })

package/src/build/index.js

@@ -1,7 +1,7 @@
 import fs from "node:fs/promises"
 import path from "node:path"
 
-import { build as viteBuild } from "vite"
+import { build as viteBuild, createServer } from "vite"
 
 import { getPages } from "../router/index.js"
 import { generateApp } from "../scripts/app.js"
@@ -47,8 +47,16 @@ export async function build(options = {}) {
 
   console.log("🔨 Starting build...\n")
 
+  // Create a temporary Vite server to load modules (supports TS)
+  const vite = await createServer({
+    ...createViteConfig(mergedOptions),
+    server: { middlewareMode: true, hmr: false },
+    appType: "custom",
+  })
+  const loader = (p) => vite.ssrLoadModule(p)
+
   // 0. Get all pages to build (Fail fast if source is broken)
-  const allPages = await getPages(path.join(rootDir, "pages"))
+  const allPages = await getPages(path.join(rootDir, "pages"), loader)
   console.log(`📄 Found ${allPages.length} pages\n`)
 
   // Load previous build manifest
@@ -85,10 +93,15 @@ export async function build(options = {}) {
   }
 
   // 4. Generate store with all types and initial entities
-  const store = await generateStore(allPages, mergedOptions)
+  const store = await generateStore(allPages, mergedOptions, loader)
 
   // 5. Render only pages that changed
-  const changedPages = await generatePages(store, pagesToChange, mergedOptions)
+  const changedPages = await generatePages(
+    store,
+    pagesToChange,
+    mergedOptions,
+    loader,
+  )
   // For skipped pages, load their metadata from disk if needed for sitemap/RSS
   const skippedPages = await generatePages(store, pagesToSkip, {
     ...mergedOptions,
@@ -133,6 +146,7 @@ export async function build(options = {}) {
   const viteConfig = createViteConfig(mergedOptions)
   await viteBuild(viteConfig)
 
+  await vite.close()
   // 12. Cleanup
   // console.log("\n🧹 Cleaning up...\n")
 

package/src/build/pages.js

@@ -14,10 +14,12 @@ import { extractPageMetadata } from "./metadata.js"
  * @param {Object} [options] - Generation options.
  * @param {boolean} [options.shouldGenerateHtml=true] - Whether to generate HTML.
  * @param {boolean} [options.shouldGenerateMetadata=true] - Whether to generate metadata.
+ * @param {Function} [loader] - Optional loader function.
  * @returns {Promise<Array<Object>>} The processed pages with `html` and `metadata` properties added.
  */
-export async function generatePages(store, pages, options = {}) {
+export async function generatePages(store, pages, options = {}, loader) {
   const { shouldGenerateHtml = true, shouldGenerateMetadata = true } = options
+  const load = loader || ((p) => import(pathToFileURL(path.resolve(p))))
 
   const api = store._api
 
@@ -26,7 +28,7 @@ export async function generatePages(store, pages, options = {}) {
       `  Generating ${shouldGenerateHtml ? "HTML" : ""}${shouldGenerateHtml && shouldGenerateMetadata ? " and " : ""}${shouldGenerateMetadata ? "metadata" : ""} for ${page.path}...`,
     )
 
-    const module = await import(pathToFileURL(path.resolve(page.filePath)))
+    const module = await load(page.filePath)
     page.module = module
 
     const entity = api.getEntity(page.moduleName)

package/src/build/vite-config.js

@@ -1,6 +1,7 @@
 import path from "node:path"
 
 import { mergeConfig } from "vite"
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer"
 
 // import { minifyTemplateLiterals } from "rollup-plugin-minify-template-literals"
 
@@ -19,7 +20,12 @@ export function createViteConfig(options = {}) {
     {
       root: rootDir,
       publicDir: path.resolve(process.cwd(), rootDir, publicDir),
-      // plugins: [minifyTemplateLiterals()], // TODO: minification breaks hydration. The footprint difference is minimal after all
+      plugins: [
+        // minifyTemplateLiterals(), // TODO: minification breaks hydration. The footprint difference is minimal after all
+        ViteImageOptimizer({
+          // Options can be overridden by the user in site.config.js via the `vite` property
+        }),
+      ],
       build: {
         outDir,
         emptyOutDir: false, // Don't delete HTML files we already generated

package/src/dev/index.js

@@ -25,16 +25,17 @@ export async function dev(options = {}) {
 
   console.log("🚀 Starting dev server...\n")
 
+  // Create Vite dev server
+  const viteConfig = createViteConfig(mergedOptions)
+  const viteServer = await createServer(viteConfig)
+  const loader = (p) => viteServer.ssrLoadModule(p)
+
   // Get all pages once at startup
-  const pages = await getPages(path.join(rootDir, "pages"))
+  const pages = await getPages(path.join(rootDir, "pages"), loader)
   console.log(`📄 Found ${pages.length} pages\n`)
 
   // Generate store config once for all pages
-  const store = await generateStore(pages, mergedOptions)
-
-  // Create Vite dev server
-  const viteConfig = createViteConfig(mergedOptions)
-  const viteServer = await createServer(viteConfig)
+  const store = await generateStore(pages, mergedOptions, loader)
 
   // Use Vite's middleware first (handles HMR, static files, etc.)
   const connectServer = connect()
@@ -59,7 +60,7 @@ export async function dev(options = {}) {
       const page = pages.find((p) => matchRoute(p.path, url))
       if (!page) return next()
 
-      const module = await viteServer.ssrLoadModule(page.filePath)
+      const module = await loader(page.filePath)
       page.module = module
 
       const entity = store._api.getEntity(page.moduleName)

package/src/router/index.js

@@ -17,15 +17,17 @@ const SCORE_MULTIPLIER = 0.1
  * to generate all possible paths.
  *
  * @param {string} pagesDir - The directory containing page files.
+ * @param {Function} [loader] - Optional loader function (e.g. vite.ssrLoadModule).
  * @returns {Promise<Array<Object>>} A list of page objects with metadata.
  */
-export async function getPages(pagesDir = "pages") {
+export async function getPages(pagesDir = "pages", loader) {
   const routes = await getRoutes(pagesDir)
   const pages = []
+  const load = loader || ((p) => import(pathToFileURL(path.resolve(p))))
 
   for (const route of routes) {
     try {
-      const module = await import(pathToFileURL(path.resolve(route.filePath)))
+      const module = await load(route.filePath)
       const moduleName = getModuleName(module)
 
       if (isDynamic(route.pattern)) {
@@ -122,7 +124,7 @@ export async function resolvePage(url, pagesDir = "pages") {
  */
 export async function getRoutes(pagesDir = "pages") {
   // Find all .js and .ts files in pages directory
-  const files = await glob("**/*.{js,ts}", {
+  const files = await glob("**/*.{js,ts,jsx,tsx}", {
     cwd: pagesDir,
     ignore: ["**/*.test.{js,ts}", "**/*.spec.{js,ts}"],
     posix: true,
@@ -190,7 +192,7 @@ export function matchRoute(pattern, url) {
 function filePathToPattern(file) {
   let pattern = file
     .replace(/\\/g, "/")
-    .replace(/\.(js|ts)$/, "") // Remove extension
+    .replace(/\.(js|ts|jsx|tsx)$/, "") // Remove extension
     .replace(/\/index$/, "") // index becomes root of directory
     .replace(/^index$/, "") // Handle root index
     .replace(/__(\w+)/g, "*") // __path becomes *

package/src/store/index.js

@@ -13,26 +13,31 @@ import { getModuleName } from "../utils/module.js"
  * @param {Array<Object>} pages - List of page objects containing file paths.
  * @param {Object} options - Configuration options.
  * @param {string} [options.rootDir="src"] - Root directory to look for entities.js.
+ * @param {Function} [loader] - Optional loader function.
  * @returns {Promise<Object>} The initialized store instance.
  */
-export async function generateStore(pages = [], options = {}) {
+export async function generateStore(pages = [], options = {}, loader) {
   const { rootDir = "src" } = options
+  const load = loader || ((p) => import(pathToFileURL(p)))
 
   const types = {}
   for (const page of pages) {
-    const pageModule = await import(pathToFileURL(page.filePath))
+    const pageModule = await load(page.filePath)
     const name = getModuleName(pageModule)
     types[name] = pageModule[name]
   }
 
   let entities = {}
-  try {
-    const module = await import(
-      pathToFileURL(path.join(rootDir, "entities.js"))
-    )
-    entities = module.entities
-  } catch {
-    entities = {}
+  const extensions = ["js", "ts"]
+
+  for (const ext of extensions) {
+    try {
+      const module = await load(path.join(rootDir, `entities.${ext}`))
+      entities = module.entities
+      break
+    } catch {
+      // ignore and try next extension
+    }
   }
 
   return createStore({ types, entities, updateMode: "manual" })

package/src/store/store.test.js

@@ -1,10 +1,10 @@
 import path from "node:path"
 
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi } from "vitest"
 
 import { generateStore } from "."
 
-const ROOT_DIR = path.join(__dirname, "..", "__fixtures__")
+const ROOT_DIR = path.join(import.meta.dirname, "..", "__fixtures__")
 
 describe("generateStore", () => {
   it("should generate the proper types and entities from a static page", async () => {
@@ -53,4 +53,22 @@ describe("generateStore", () => {
     // Should initialize with empty entities (or at least not the ones from fixtures)
     expect(store.getState()).not.toHaveProperty("about")
   })
+
+  it("should attempt to load entities.js and entities.ts", async () => {
+    const loader = vi.fn(async (p) => {
+      // Mock a successful page load
+      if (p.endsWith("index.js")) {
+        return { index: { render: () => {} } }
+      }
+      // Mock entity files not being found
+      throw new Error("MODULE_NOT_FOUND")
+    })
+
+    const page = { filePath: path.join(ROOT_DIR, "pages", "index.js") }
+    await generateStore([page], { rootDir: "src" }, loader)
+
+    expect(loader).toHaveBeenCalledWith(page.filePath)
+    expect(loader).toHaveBeenCalledWith(path.join("src", "entities.js"))
+    expect(loader).toHaveBeenCalledWith(path.join("src", "entities.ts"))
+  })
 })