@inglorious/ssx 1.2.0 → 1.3.0

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
@@ -636,7 +644,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.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/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