@inglorious/ssx 1.2.0 → 1.3.1

package/README.md

@@ -31,6 +31,7 @@ SSX takes your entity-based web apps and generates optimized static HTML with fu
 - **Lazy-loaded routes** - Code splitting automatically
 - **lit-html hydration** - Interactive UI without the bloat
 - **TypeScript Ready** - Write your pages and entities in TypeScript.
+- **Image Optimization** - Automatic compression for static assets.
 
 ### 🚀 Production Ready
 
@@ -389,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
@@ -400,7 +408,7 @@ SSX provides a simple CLI for building and developing:
 Builds your static site:
 
 ```bash
-ssx build [options]
+pnpm ssx build [options]
 
 Options:
   -c, --config <file>  Config file (default: "site.config.js")
@@ -410,12 +418,20 @@ Options:
   -f, --force          Force clean build, ignore cache
 ```
 
+### `preview`
+
+Serves the built static site on port 3000 through the `serve` NPM package.
+
+```bash
+pnpm preview
+```
+
 ### `ssx dev`
 
-Starts development server with hot reload:
+Starts the Vite development server on port 3000 with hot reload:
 
 ```bash
-ssx dev [options]
+pnpm ssx dev [options]
 
 Options:
   -c, --config <file>  Config file (default: "site.config.js")
@@ -423,18 +439,6 @@ Options:
   -p, --port <port>    Dev server port (default: 3000)
 ```
 
-### Package.json Scripts
-
-```json
-{
-  "scripts": {
-    "dev": "ssx dev",
-    "build": "ssx build",
-    "preview": "pnpm dlx serve dist"
-  }
-}
-```
-
 ---
 
 ## Project Structure
@@ -636,7 +640,7 @@ Check out these example projects:
 ## Roadmap
 
 - [x] TypeScript support
-- [ ] Image optimization
+- [x] Image optimization
 - [ ] API routes (serverless functions)
 - [ ] MDX support
 - [ ] i18n helpers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ssx",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Server-Side-X. Xecution? Xperience? Who knows.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -44,11 +44,15 @@
     "fast-xml-parser": "^5.3.3",
     "glob": "^13.0.0",
     "rollup-plugin-minify-template-literals": "^1.1.7",
+    "sharp": "^0.34.5",
+    "svgo": "^4.0.0",
     "vite": "^7.1.3",
-    "@inglorious/web": "4.0.1"
+    "vite-plugin-image-optimizer": "^2.0.3",
+    "@inglorious/web": "4.0.2"
   },
   "devDependencies": {
     "prettier": "^3.6.2",
+    "serve": "^14.2.1",
     "vitest": "^1.6.1",
     "@inglorious/eslint-config": "1.1.1"
   },
@@ -62,6 +66,6 @@
     "test": "vitest run",
     "dev": "node ./bin/ssx.js dev -r ./src/__fixtures__",
     "build": "node ./bin/ssx.js build -r ./src/__fixtures__",
-    "preview": "pnpm dlx serve dist"
+    "preview": "serve dist"
   }
 }

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