@squoosh-kit/vite-plugin 0.1.18 → 0.2.1

package/README.md

@@ -2,14 +2,14 @@
 
 [![npm version](https://badge.fury.io/js/%40squoosh-kit%2Fvite-plugin.svg)](https://badge.fury.io/js/%40squoosh-kit%2Fvite-plugin)
 [![Bun](https://img.shields.io/badge/Bun-000000?logo=bun&logoColor=white)](https://bun.sh/)
-[![License: MIT](https://img.shields.io/badge/license-Apache%202-blue)](https://opensource.org/license/apache-2-0)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
 
-A Vite plugin for Squoosh Kit that handles asset copying and WebAssembly configuration.
+A Vite plugin for Squoosh-Kit that handles asset copying and WebAssembly configuration.
 
 ## Overview
 
-The `@squoosh-kit/vite-plugin` simplifies integrating Squoosh Kit codecs into Vite projects by:
+The `@squoosh-kit/vite-plugin` simplifies integrating Squoosh-Kit codecs into Vite projects by:
 
 - **Automatically copying browser-compatible assets** from `@squoosh-kit/webp` and `@squoosh-kit/resize` packages
 - **Configuring WASM module handling** with proper MIME types and CORS headers
@@ -32,15 +32,16 @@ Add the plugin to your `vite.config.ts`:
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import squooshVitePlugin from '@squoosh-kit/vite-plugin';
+import { resolve } from 'path';
 
 export default defineConfig({
-  plugins: [react(), squooshVitePlugin()],
+  plugins: [react(), squooshVitePlugin(resolve('node_modules/@squoosh-kit'))],
 });
 ```
 
 That's it! The plugin will:
 
-1. Copy Squoosh Kit browser assets to your `public/squoosh-kit` directory
+1. Copy Squoosh-Kit browser assets to your `public/squoosh-kit` directory
 2. Configure Vite to properly handle WASM files
 3. Set necessary CORS headers for cross-origin embedder policy
 4. Exclude heavy dependencies from optimization
@@ -78,7 +79,7 @@ In development mode, the plugin:
 
 ## Usage Example
 
-After setting up the plugin, you can use Squoosh Kit as normal:
+After setting up the plugin, you can use Squoosh-Kit as normal:
 
 ```typescript
 import { createWebpEncoder, createResizer } from '@squoosh-kit/core';
@@ -99,11 +100,13 @@ const resizedImage = await resizer(imageData, { width: 800 });
 
 ## API Reference
 
-### `squooshVitePlugin()`
+### `squooshVitePlugin(squooshKitRoot)`
 
-Returns a Vite plugin that configures Squoosh Kit integration.
+Returns a Vite plugin that configures Squoosh-Kit integration.
 
-**Parameters:** None
+**Parameters:**
+
+- `squooshKitRoot: string` — Path to the `@squoosh-kit` directory inside `node_modules`. The plugin uses this to locate the `webp/dist` and `resize/dist` directories for asset copying.
 
 **Returns:** Vite Plugin
 
@@ -111,9 +114,10 @@ Returns a Vite plugin that configures Squoosh Kit integration.
 
 ```typescript
 import squooshVitePlugin from '@squoosh-kit/vite-plugin';
+import { resolve } from 'path';
 
 export default defineConfig({
-  plugins: [squooshVitePlugin()],
+  plugins: [squooshVitePlugin(resolve('node_modules/@squoosh-kit'))],
 });
 ```
 
@@ -179,7 +183,7 @@ Check that:
 
 ### Build fails with "dist not found"
 
-Ensure you've built the Squoosh Kit packages first:
+Ensure you've built the Squoosh-Kit packages first:
 
 ```bash
 bun run build
@@ -194,7 +198,7 @@ bun run build
 
 ## Architecture
 
-The plugin follows Squoosh Kit principles:
+The plugin follows Squoosh-Kit principles:
 
 - **Minimal and focused**: Handles only WASM and asset configuration
 - **Framework agnostic**: Works with any Vite-based framework
@@ -203,4 +207,4 @@ The plugin follows Squoosh Kit principles:
 
 ## License
 
-MIT - part of the Squoosh Kit family
+MIT - part of the Squoosh-Kit family

package/dist/index.cjs

@@ -0,0 +1,182 @@
+// @bun @bun-cjs
+(function(exports, require, module, __filename, __dirname) {var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toCommonJS = (from) => {
+  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(entry, key))
+        __defProp(entry, key, {
+          get: __accessProp.bind(from, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+  }
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __moduleCache;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  default: () => squooshVitePlugin
+});
+module.exports = __toCommonJS(exports_src);
+var import_fs = require("fs");
+var import_path = require("path");
+function copyBrowserFiles(srcDir, destDir) {
+  if (!import_fs.existsSync(srcDir)) {
+    console.warn(`Source directory does not exist: ${srcDir}`);
+    return;
+  }
+  import_fs.mkdirSync(destDir, { recursive: true });
+  const files = import_fs.readdirSync(srcDir);
+  const browserFiles = files.filter((file) => file.endsWith(".browser.mjs") || file.endsWith(".browser.mjs.map") || file.endsWith(".d.ts") || file.endsWith(".d.ts.map"));
+  for (const file of browserFiles) {
+    const srcPath = import_path.join(srcDir, file);
+    const destPath = import_path.join(destDir, file);
+    import_fs.cpSync(srcPath, destPath);
+  }
+  const wasmDir = import_path.join(srcDir, "wasm");
+  if (import_fs.existsSync(wasmDir)) {
+    const destWasmDir = import_path.join(destDir, "wasm");
+    import_fs.cpSync(wasmDir, destWasmDir, { recursive: true });
+  }
+}
+function squooshVitePlugin(squooshKitRoot) {
+  const viteRoot = process.cwd();
+  const publicDir = import_path.join(viteRoot, "public", "squoosh-kit");
+  const webpDist = import_path.join(squooshKitRoot, "webp", "dist");
+  const resizeDist = import_path.join(squooshKitRoot, "resize", "dist");
+  const avifDist = import_path.join(squooshKitRoot, "avif", "dist");
+  const mozjpegDist = import_path.join(squooshKitRoot, "mozjpeg", "dist");
+  const jxlDist = import_path.join(squooshKitRoot, "jxl", "dist");
+  const oxipngDist = import_path.join(squooshKitRoot, "oxipng", "dist");
+  const imagequantDist = import_path.join(squooshKitRoot, "imagequant", "dist");
+  const pngDist = import_path.join(squooshKitRoot, "png", "dist");
+  const qoiDist = import_path.join(squooshKitRoot, "qoi", "dist");
+  const wp2Dist = import_path.join(squooshKitRoot, "wp2", "dist");
+  const hqxDist = import_path.join(squooshKitRoot, "hqx", "dist");
+  const rotateDist = import_path.join(squooshKitRoot, "rotate", "dist");
+  const visdifDist = import_path.join(squooshKitRoot, "visdif", "dist");
+  return {
+    name: "squoosh-vite-plugin",
+    buildStart() {
+      if (import_fs.existsSync(publicDir)) {
+        import_fs.rmSync(publicDir, { recursive: true, force: true });
+      }
+      if (import_fs.existsSync(webpDist)) {
+        copyBrowserFiles(webpDist, import_path.join(publicDir, "webp"));
+      }
+      if (import_fs.existsSync(resizeDist)) {
+        copyBrowserFiles(resizeDist, import_path.join(publicDir, "resize"));
+      }
+      if (import_fs.existsSync(avifDist)) {
+        copyBrowserFiles(avifDist, import_path.join(publicDir, "avif"));
+      }
+      if (import_fs.existsSync(mozjpegDist)) {
+        copyBrowserFiles(mozjpegDist, import_path.join(publicDir, "mozjpeg"));
+      }
+      if (import_fs.existsSync(jxlDist)) {
+        copyBrowserFiles(jxlDist, import_path.join(publicDir, "jxl"));
+      }
+      if (import_fs.existsSync(oxipngDist)) {
+        copyBrowserFiles(oxipngDist, import_path.join(publicDir, "oxipng"));
+      }
+      if (import_fs.existsSync(imagequantDist)) {
+        copyBrowserFiles(imagequantDist, import_path.join(publicDir, "imagequant"));
+      }
+      if (import_fs.existsSync(pngDist)) {
+        copyBrowserFiles(pngDist, import_path.join(publicDir, "png"));
+      }
+      if (import_fs.existsSync(qoiDist)) {
+        copyBrowserFiles(qoiDist, import_path.join(publicDir, "qoi"));
+      }
+      if (import_fs.existsSync(wp2Dist)) {
+        copyBrowserFiles(wp2Dist, import_path.join(publicDir, "wp2"));
+      }
+      if (import_fs.existsSync(hqxDist)) {
+        copyBrowserFiles(hqxDist, import_path.join(publicDir, "hqx"));
+      }
+      if (import_fs.existsSync(rotateDist)) {
+        copyBrowserFiles(rotateDist, import_path.join(publicDir, "rotate"));
+      }
+      if (import_fs.existsSync(visdifDist)) {
+        copyBrowserFiles(visdifDist, import_path.join(publicDir, "visdif"));
+      }
+      console.log("Squoosh assets copied successfully!");
+    },
+    config: () => ({
+      server: {
+        headers: {
+          "Cross-Origin-Embedder-Policy": "credentialless",
+          "Cross-Origin-Opener-Policy": "same-origin",
+          "Access-Control-Allow-Origin": "*"
+        }
+      },
+      optimizeDeps: {
+        exclude: [
+          "@squoosh-kit/webp",
+          "@squoosh-kit/resize",
+          "@squoosh-kit/avif",
+          "@squoosh-kit/mozjpeg",
+          "@squoosh-kit/jxl",
+          "@squoosh-kit/oxipng",
+          "@squoosh-kit/imagequant",
+          "@squoosh-kit/png",
+          "@squoosh-kit/qoi",
+          "@squoosh-kit/wp2",
+          "@squoosh-kit/hqx",
+          "@squoosh-kit/rotate",
+          "@squoosh-kit/visdif"
+        ]
+      },
+      assetsInclude: ["**/*.wasm"]
+    }),
+    configureServer(server) {
+      server.middlewares.use("/squoosh-kit", (req, res, next) => {
+        try {
+          const filePath = import_path.join(publicDir, req.url ?? "/");
+          if (import_fs.existsSync(filePath)) {
+            const fileData = import_fs.readFileSync(filePath);
+            if (filePath.endsWith(".wasm")) {
+              res.setHeader("Content-Type", "application/wasm");
+            } else if (filePath.endsWith(".js") || filePath.endsWith(".mjs")) {
+              res.setHeader("Content-Type", "application/javascript");
+            }
+            res.setHeader("Cross-Origin-Embedder-Policy", "credentialless");
+            res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
+            res.setHeader("Content-Length", fileData.length.toString());
+            res.end(fileData);
+            return;
+          }
+          next();
+        } catch {
+          next();
+        }
+      });
+    }
+  };
+}
+})

package/dist/index.d.ts

@@ -1,23 +1 @@
-import type { ViteDevServer } from 'vite';
-export default function squooshVitePlugin(squooshKitRoot: string): {
-    name: string;
-    buildStart(this: import("rollup").PluginContext): void;
-    config: () => {
-        server: {
-            fs: {
-                allow: string[];
-            };
-            headers: {
-                'Cross-Origin-Embedder-Policy': string;
-                'Cross-Origin-Opener-Policy': string;
-                'Access-Control-Allow-Origin': string;
-            };
-        };
-        optimizeDeps: {
-            exclude: string[];
-        };
-        assetsInclude: string[];
-    };
-    configureServer(this: import("vite").MinimalPluginContextWithoutEnvironment, server: ViteDevServer): void;
-};
-//# sourceMappingURL=index.d.ts.map
+export default function squooshVitePlugin(squooshKitRoot: string): { name: string };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,MAAM,CAAC;AAgCxD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,cAAc,EAAE,MAAM;;;;;;;;;;;;;;;;;;;yFAqCpC,aAAa;EA6DxC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAiB,MAAM,MAAM,CAAC;AAgCxD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,cAAc,EAAE,MAAM,GACrB,YAAY,CA+Hd"}

package/dist/index.js

@@ -33,6 +33,17 @@ function squooshVitePlugin(squooshKitRoot) {
   const publicDir = join(viteRoot, "public", "squoosh-kit");
   const webpDist = join(squooshKitRoot, "webp", "dist");
   const resizeDist = join(squooshKitRoot, "resize", "dist");
+  const avifDist = join(squooshKitRoot, "avif", "dist");
+  const mozjpegDist = join(squooshKitRoot, "mozjpeg", "dist");
+  const jxlDist = join(squooshKitRoot, "jxl", "dist");
+  const oxipngDist = join(squooshKitRoot, "oxipng", "dist");
+  const imagequantDist = join(squooshKitRoot, "imagequant", "dist");
+  const pngDist = join(squooshKitRoot, "png", "dist");
+  const qoiDist = join(squooshKitRoot, "qoi", "dist");
+  const wp2Dist = join(squooshKitRoot, "wp2", "dist");
+  const hqxDist = join(squooshKitRoot, "hqx", "dist");
+  const rotateDist = join(squooshKitRoot, "rotate", "dist");
+  const visdifDist = join(squooshKitRoot, "visdif", "dist");
   return {
     name: "squoosh-vite-plugin",
     buildStart() {
@@ -45,40 +56,69 @@ function squooshVitePlugin(squooshKitRoot) {
       if (existsSync(resizeDist)) {
         copyBrowserFiles(resizeDist, join(publicDir, "resize"));
       }
+      if (existsSync(avifDist)) {
+        copyBrowserFiles(avifDist, join(publicDir, "avif"));
+      }
+      if (existsSync(mozjpegDist)) {
+        copyBrowserFiles(mozjpegDist, join(publicDir, "mozjpeg"));
+      }
+      if (existsSync(jxlDist)) {
+        copyBrowserFiles(jxlDist, join(publicDir, "jxl"));
+      }
+      if (existsSync(oxipngDist)) {
+        copyBrowserFiles(oxipngDist, join(publicDir, "oxipng"));
+      }
+      if (existsSync(imagequantDist)) {
+        copyBrowserFiles(imagequantDist, join(publicDir, "imagequant"));
+      }
+      if (existsSync(pngDist)) {
+        copyBrowserFiles(pngDist, join(publicDir, "png"));
+      }
+      if (existsSync(qoiDist)) {
+        copyBrowserFiles(qoiDist, join(publicDir, "qoi"));
+      }
+      if (existsSync(wp2Dist)) {
+        copyBrowserFiles(wp2Dist, join(publicDir, "wp2"));
+      }
+      if (existsSync(hqxDist)) {
+        copyBrowserFiles(hqxDist, join(publicDir, "hqx"));
+      }
+      if (existsSync(rotateDist)) {
+        copyBrowserFiles(rotateDist, join(publicDir, "rotate"));
+      }
+      if (existsSync(visdifDist)) {
+        copyBrowserFiles(visdifDist, join(publicDir, "visdif"));
+      }
       console.log("Squoosh assets copied successfully!");
     },
     config: () => ({
       server: {
-        fs: {
-          allow: [viteRoot, squooshKitRoot]
-        },
         headers: {
-          "Cross-Origin-Embedder-Policy": "require-corp",
+          "Cross-Origin-Embedder-Policy": "credentialless",
           "Cross-Origin-Opener-Policy": "same-origin",
           "Access-Control-Allow-Origin": "*"
         }
       },
       optimizeDeps: {
-        exclude: ["@squoosh-kit/webp", "@squoosh-kit/resize"]
+        exclude: [
+          "@squoosh-kit/webp",
+          "@squoosh-kit/resize",
+          "@squoosh-kit/avif",
+          "@squoosh-kit/mozjpeg",
+          "@squoosh-kit/jxl",
+          "@squoosh-kit/oxipng",
+          "@squoosh-kit/imagequant",
+          "@squoosh-kit/png",
+          "@squoosh-kit/qoi",
+          "@squoosh-kit/wp2",
+          "@squoosh-kit/hqx",
+          "@squoosh-kit/rotate",
+          "@squoosh-kit/visdif"
+        ]
       },
       assetsInclude: ["**/*.wasm"]
     }),
     configureServer(server) {
-      server.middlewares.use((req, res, next) => {
-        const url = req.url;
-        if (!url?.includes("squoosh-kit")) {
-          next();
-          return;
-        }
-        let rewrittenUrl = url;
-        if (url.includes("@squoosh-kit")) {
-          rewrittenUrl = "/squoosh-kit" + url.split("@squoosh-kit")[1].replace("/dist", "").split("?")[0];
-        } else {
-          rewrittenUrl = "/squoosh-kit" + url.split("squoosh-kit")[1].replace("/dist", "").split("?")[0];
-        }
-        req.url = rewrittenUrl;
-        next();
-      });
       server.middlewares.use("/squoosh-kit", (req, res, next) => {
         try {
           const filePath = join(publicDir, req.url ?? "/");
@@ -89,7 +129,7 @@ function squooshVitePlugin(squooshKitRoot) {
             } else if (filePath.endsWith(".js") || filePath.endsWith(".mjs")) {
               res.setHeader("Content-Type", "application/javascript");
             }
-            res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+            res.setHeader("Cross-Origin-Embedder-Policy", "credentialless");
             res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
             res.setHeader("Content-Length", fileData.length.toString());
             res.end(fileData);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@squoosh-kit/vite-plugin",
-  "version": "0.1.18",
+  "version": "0.2.1",
   "type": "module",
-  "description": "Vite plugin for Squoosh Kit - handles asset copying and WASM configuration",
+  "description": "Vite plugin for Squoosh-Kit - handles asset copying and WASM configuration",
   "author": "Bartosz Nowak <bnowak008@gmail.com>",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "bunx tsc -p . && bun build ./src/index.ts --outdir dist --format esm --target bun --external vite",
+    "build": "bunx tsc -p . && bun build ./src/index.ts --outdir dist --format esm --target bun --external vite && bun build ./src/index.ts --outfile dist/index.cjs --format cjs --target bun --external vite && printf 'export default function squooshVitePlugin(squooshKitRoot: string): { name: string };\\n' > dist/index.d.ts",
     "clean": "rm -rf dist node_modules .bun/install/cache bun.lockb bun.lock *.tsbuildinfo",
     "prepublishOnly": "bun run build",
     "typecheck": "tsc --noEmit"
@@ -38,6 +38,6 @@
   "devDependencies": {
     "@types/bun": "latest",
     "typescript": "~5.9.3",
-    "vite": "^7.2.2"
+    "vite": "^7.3.1"
   }
 }