defuss-astro 1.3.5 → 1.4.0

package/dist/client.cjs

@@ -50,7 +50,13 @@ const Img = ({
     const img = imgRef.current;
     if (!img) return;
     let loaded = false;
-    const getTransformOptionsPath2 = ({ src: src2, height: height2, width: width2, quality: quality2, format: format2 }) => {
+    const getTransformOptionsPath2 = ({
+      src: src2,
+      height: height2,
+      width: width2,
+      quality: quality2,
+      format: format2
+    }) => {
       const transformOptions = new URLSearchParams({
         href: src2,
         h: height2.toString(),
@@ -77,14 +83,17 @@ const Img = ({
         loaded = true;
       };
     };
-    const observer = new window.IntersectionObserver((entries, observer2) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          lazyLoad();
-          observer2.unobserve(entry.target);
-        }
-      });
-    }, { threshold: 0.1 });
+    const observer = new window.IntersectionObserver(
+      (entries, observer2) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            lazyLoad();
+            observer2.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
     observer.observe(imgRef.current);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/client.d.cts

@@ -14,6 +14,14 @@ interface ImgProps extends Props {
     previewQuality?: number;
     quality?: number;
 }
+/**
+ * Image component for displaying responsive images with automatic format conversion.
+ *
+ * Default style: {
+ *   filter: "blur(40px)",
+ *   transition: "0.125s filter linear",
+ * }
+ */
 declare const Img: ({ id, src, alt, height, width, previewQuality, quality, className, class: _class, style, format, astroAssetsPath, }: ImgProps) => any;
 
 declare const _default: (element: HTMLElement) => (Component: any, props: Record<string, any>, { default: children, ...slotted }: Record<string, any>, { client }: Record<string, string>) => Promise<void>;

package/dist/client.d.mts

@@ -14,6 +14,14 @@ interface ImgProps extends Props {
     previewQuality?: number;
     quality?: number;
 }
+/**
+ * Image component for displaying responsive images with automatic format conversion.
+ *
+ * Default style: {
+ *   filter: "blur(40px)",
+ *   transition: "0.125s filter linear",
+ * }
+ */
 declare const Img: ({ id, src, alt, height, width, previewQuality, quality, className, class: _class, style, format, astroAssetsPath, }: ImgProps) => any;
 
 declare const _default: (element: HTMLElement) => (Component: any, props: Record<string, any>, { default: children, ...slotted }: Record<string, any>, { client }: Record<string, string>) => Promise<void>;

package/dist/client.mjs

@@ -46,7 +46,13 @@ const Img = ({
     const img = imgRef.current;
     if (!img) return;
     let loaded = false;
-    const getTransformOptionsPath2 = ({ src: src2, height: height2, width: width2, quality: quality2, format: format2 }) => {
+    const getTransformOptionsPath2 = ({
+      src: src2,
+      height: height2,
+      width: width2,
+      quality: quality2,
+      format: format2
+    }) => {
       const transformOptions = new URLSearchParams({
         href: src2,
         h: height2.toString(),
@@ -73,14 +79,17 @@ const Img = ({
         loaded = true;
       };
     };
-    const observer = new window.IntersectionObserver((entries, observer2) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          lazyLoad();
-          observer2.unobserve(entry.target);
-        }
-      });
-    }, { threshold: 0.1 });
+    const observer = new window.IntersectionObserver(
+      (entries, observer2) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            lazyLoad();
+            observer2.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
     observer.observe(imgRef.current);
   };
   return /* @__PURE__ */ jsx(

package/dist/endpoint/image-endpoint.cjs

@@ -1,11 +1,8 @@
 'use strict';
 
 var fileType = require('file-type');
-var node_module = require('node:module');
+var lightningimg = require('lightningimg');
 
-var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
-const nodeRequire = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('endpoint/image-endpoint.cjs', document.baseURI).href)));
-const { convertToWebp } = nodeRequire("lightningimg-node");
 const GET = async ({ url }) => {
   try {
     const imgHrefRelative = url.searchParams.get("href");
@@ -23,6 +20,7 @@ const GET = async ({ url }) => {
       return new Response("Error fetching image", { status: 500 });
     }
     const imageBuffer = Buffer.from(await response.arrayBuffer());
+    const imageDimensions = await lightningimg.getImageInfo(imageBuffer);
     const fileExtension = (await fileType.fileTypeFromBuffer(imageBuffer))?.ext;
     if (!fileExtension) {
       console.log("Error fetching fileExtension", { fileExtension, response });
@@ -38,16 +36,20 @@ const GET = async ({ url }) => {
     }
     let convertedImageBuffer;
     try {
-      convertedImageBuffer = convertToWebp(imageBuffer, fileExtension, {
-        height: height ? Number.parseInt(height) : void 0,
-        width: width ? Number.parseInt(width) : void 0,
-        quality: quality ? Number.parseInt(quality) : void 0
-      });
+      convertedImageBuffer = await lightningimg.convertImageBuffer(
+        imageBuffer,
+        width ? Number.parseInt(width) : imageDimensions.width,
+        height ? Number.parseInt(height) : imageDimensions.height
+      );
       if (!convertedImageBuffer) {
         throw new Error("Error converting image: no buffer returned");
       }
     } catch (error) {
-      console.log("Error converting image", { fileExtension, bufferLength: imageBuffer.byteLength, error });
+      console.log("Error converting image", {
+        fileExtension,
+        bufferLength: imageBuffer.byteLength,
+        error
+      });
       return new Response("Error converting image", { status: 500 });
     }
     const mimeType = `image/${fileExtension}`;
@@ -63,4 +65,3 @@ const GET = async ({ url }) => {
 };
 
 exports.GET = GET;
-exports.nodeRequire = nodeRequire;

package/dist/endpoint/image-endpoint.d.cts

@@ -1,6 +1,5 @@
 import { APIRoute } from 'astro';
 
-declare const nodeRequire: NodeJS.Require;
 declare const GET: APIRoute;
 
-export { GET, nodeRequire };
+export { GET };

package/dist/endpoint/image-endpoint.d.mts

@@ -1,6 +1,5 @@
 import { APIRoute } from 'astro';
 
-declare const nodeRequire: NodeJS.Require;
 declare const GET: APIRoute;
 
-export { GET, nodeRequire };
+export { GET };

package/dist/endpoint/image-endpoint.mjs

@@ -1,8 +1,6 @@
 import { fileTypeFromBuffer } from 'file-type';
-import { createRequire } from 'node:module';
+import { getImageInfo, convertImageBuffer } from 'lightningimg';
 
-const nodeRequire = createRequire(import.meta.url);
-const { convertToWebp } = nodeRequire("lightningimg-node");
 const GET = async ({ url }) => {
   try {
     const imgHrefRelative = url.searchParams.get("href");
@@ -20,6 +18,7 @@ const GET = async ({ url }) => {
       return new Response("Error fetching image", { status: 500 });
     }
     const imageBuffer = Buffer.from(await response.arrayBuffer());
+    const imageDimensions = await getImageInfo(imageBuffer);
     const fileExtension = (await fileTypeFromBuffer(imageBuffer))?.ext;
     if (!fileExtension) {
       console.log("Error fetching fileExtension", { fileExtension, response });
@@ -35,16 +34,20 @@ const GET = async ({ url }) => {
     }
     let convertedImageBuffer;
     try {
-      convertedImageBuffer = convertToWebp(imageBuffer, fileExtension, {
-        height: height ? Number.parseInt(height) : void 0,
-        width: width ? Number.parseInt(width) : void 0,
-        quality: quality ? Number.parseInt(quality) : void 0
-      });
+      convertedImageBuffer = await convertImageBuffer(
+        imageBuffer,
+        width ? Number.parseInt(width) : imageDimensions.width,
+        height ? Number.parseInt(height) : imageDimensions.height
+      );
       if (!convertedImageBuffer) {
         throw new Error("Error converting image: no buffer returned");
       }
     } catch (error) {
-      console.log("Error converting image", { fileExtension, bufferLength: imageBuffer.byteLength, error });
+      console.log("Error converting image", {
+        fileExtension,
+        bufferLength: imageBuffer.byteLength,
+        error
+      });
       return new Response("Error converting image", { status: 500 });
     }
     const mimeType = `image/${fileExtension}`;
@@ -59,4 +62,4 @@ const GET = async ({ url }) => {
   }
 };
 
-export { GET, nodeRequire };
+export { GET };

package/dist/index.cjs

@@ -11,16 +11,12 @@ var node_path = require('node:path');
 var promises = require('node:fs/promises');
 var purgecss = require('purgecss');
 var node_fs = require('node:fs');
-var node_module = require('node:module');
 
-var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 const logMessage = (message) => {
   const date = (/* @__PURE__ */ new Date()).toLocaleTimeString();
   console.log(`${date} \x1B[32mdefuss-astro:\x1B[0m ${message}`);
 };
 
-const nodeRequire = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
-const { processDirectoryDestructive } = nodeRequire("lightningimg-node");
 const getRenderer = (development) => ({
   name: "defuss",
   clientEntrypoint: "defuss-astro/client.js",
@@ -66,24 +62,34 @@ const minifyAndWriteFile = async (cwd, filename, type) => {
     }
   }
 };
-function index({ include, exclude, devtools } = {}) {
+function index({
+  include,
+  exclude,
+  devtools
+} = {}) {
   return {
     name: "defuss",
     hooks: {
-      "astro:config:setup": async ({ config, addRenderer, updateConfig, command, injectScript, injectRoute }) => {
+      "astro:config:setup": async ({
+        config,
+        addRenderer,
+        updateConfig,
+        command,
+        injectScript,
+        injectRoute
+      }) => {
         injectRoute({
           pattern: "/_defuss/image",
           prerender: false,
           entrypoint: "defuss-astro/image-endpoint.js"
         });
-        const publicDirPath = node_url.fileURLToPath(config.publicDir);
+        node_url.fileURLToPath(config.publicDir);
         config.compressHTML = true;
         config.scopedStyleStrategy = "class";
         if (!config.vite.build) {
           config.vite.build = {};
         }
         config.vite.build.cssMinify = "lightningcss";
-        processDirectoryDestructive(publicDirPath, false);
         addRenderer(getRenderer());
         updateConfig({
           vite: {
@@ -100,21 +106,18 @@ function index({ include, exclude, devtools } = {}) {
       "astro:build:done": async ({ dir }) => {
         const start = node_perf_hooks.performance.now();
         const cwd = node_url.fileURLToPath(dir);
-        const [cssFiles, htmlFiles, imageFiles, svgFiles] = await Promise.all([
+        const [cssFiles, htmlFiles, svgFiles] = await Promise.all([
           glob("**/*.css", { cwd, ignore: ["**/*-min.css", "**/*.min.css"] }),
           glob("**/*.html", { cwd }),
-          glob("**/*.(jpg|jpeg|png|tiff)", { cwd }),
           glob("**/*.svg", { cwd })
         ]);
-        logMessage(`\u2734\uFE0F Optimizing ${imageFiles.length} images`);
-        processDirectoryDestructive(cwd, true);
         if (htmlFiles.length === 0 && svgFiles.length === 0) return;
-        logMessage(`\u2734\uFE0F Optimizing ${svgFiles.length} SVG vector graphics`);
         logMessage(`\u2734\uFE0F Optimizing ${cssFiles.length} CSS stylesheets`);
         const minifyAndWritePromises = [];
         for (const filename of cssFiles) {
           minifyAndWritePromises.push(minifyAndWriteFile(cwd, filename, "css"));
         }
+        logMessage(`\u2734\uFE0F Optimizing ${svgFiles.length} SVG vector graphics`);
         for (const filename of svgFiles) {
           minifyAndWritePromises.push(minifyAndWriteFile(cwd, filename, "svg"));
         }
@@ -130,4 +133,3 @@ function index({ include, exclude, devtools } = {}) {
 
 exports.default = index;
 exports.getContainerRenderer = getContainerRenderer;
-exports.nodeRequire = nodeRequire;

package/dist/index.d.cts

@@ -5,8 +5,7 @@ interface Options extends Pick<DefussVitePluginOptions, "exclude" | "include"> {
     devtools?: boolean;
 }
 
-declare const nodeRequire: NodeJS.Require;
 declare const getContainerRenderer: () => ContainerRenderer;
-declare function export_default({ include, exclude, devtools }?: Options): AstroIntegration;
+declare function export_default({ include, exclude, devtools, }?: Options): AstroIntegration;
 
-export { export_default as default, getContainerRenderer, nodeRequire };
+export { export_default as default, getContainerRenderer };

package/dist/index.d.mts

@@ -5,8 +5,7 @@ interface Options extends Pick<DefussVitePluginOptions, "exclude" | "include"> {
     devtools?: boolean;
 }
 
-declare const nodeRequire: NodeJS.Require;
 declare const getContainerRenderer: () => ContainerRenderer;
-declare function export_default({ include, exclude, devtools }?: Options): AstroIntegration;
+declare function export_default({ include, exclude, devtools, }?: Options): AstroIntegration;
 
-export { export_default as default, getContainerRenderer, nodeRequire };
+export { export_default as default, getContainerRenderer };

package/dist/index.mjs

@@ -7,15 +7,12 @@ import { join } from 'node:path';
 import { readFile, writeFile } from 'node:fs/promises';
 import { PurgeCSS } from 'purgecss';
 import { existsSync } from 'node:fs';
-import { createRequire } from 'node:module';
 
 const logMessage = (message) => {
   const date = (/* @__PURE__ */ new Date()).toLocaleTimeString();
   console.log(`${date} \x1B[32mdefuss-astro:\x1B[0m ${message}`);
 };
 
-const nodeRequire = createRequire(import.meta.url);
-const { processDirectoryDestructive } = nodeRequire("lightningimg-node");
 const getRenderer = (development) => ({
   name: "defuss",
   clientEntrypoint: "defuss-astro/client.js",
@@ -61,24 +58,34 @@ const minifyAndWriteFile = async (cwd, filename, type) => {
     }
   }
 };
-function index({ include, exclude, devtools } = {}) {
+function index({
+  include,
+  exclude,
+  devtools
+} = {}) {
   return {
     name: "defuss",
     hooks: {
-      "astro:config:setup": async ({ config, addRenderer, updateConfig, command, injectScript, injectRoute }) => {
+      "astro:config:setup": async ({
+        config,
+        addRenderer,
+        updateConfig,
+        command,
+        injectScript,
+        injectRoute
+      }) => {
         injectRoute({
           pattern: "/_defuss/image",
           prerender: false,
           entrypoint: "defuss-astro/image-endpoint.js"
         });
-        const publicDirPath = fileURLToPath(config.publicDir);
+        fileURLToPath(config.publicDir);
         config.compressHTML = true;
         config.scopedStyleStrategy = "class";
         if (!config.vite.build) {
           config.vite.build = {};
         }
         config.vite.build.cssMinify = "lightningcss";
-        processDirectoryDestructive(publicDirPath, false);
         addRenderer(getRenderer());
         updateConfig({
           vite: {
@@ -95,21 +102,18 @@ function index({ include, exclude, devtools } = {}) {
       "astro:build:done": async ({ dir }) => {
         const start = performance.now();
         const cwd = fileURLToPath(dir);
-        const [cssFiles, htmlFiles, imageFiles, svgFiles] = await Promise.all([
+        const [cssFiles, htmlFiles, svgFiles] = await Promise.all([
           glob("**/*.css", { cwd, ignore: ["**/*-min.css", "**/*.min.css"] }),
           glob("**/*.html", { cwd }),
-          glob("**/*.(jpg|jpeg|png|tiff)", { cwd }),
           glob("**/*.svg", { cwd })
         ]);
-        logMessage(`\u2734\uFE0F Optimizing ${imageFiles.length} images`);
-        processDirectoryDestructive(cwd, true);
         if (htmlFiles.length === 0 && svgFiles.length === 0) return;
-        logMessage(`\u2734\uFE0F Optimizing ${svgFiles.length} SVG vector graphics`);
         logMessage(`\u2734\uFE0F Optimizing ${cssFiles.length} CSS stylesheets`);
         const minifyAndWritePromises = [];
         for (const filename of cssFiles) {
           minifyAndWritePromises.push(minifyAndWriteFile(cwd, filename, "css"));
         }
+        logMessage(`\u2734\uFE0F Optimizing ${svgFiles.length} SVG vector graphics`);
         for (const filename of svgFiles) {
           minifyAndWritePromises.push(minifyAndWriteFile(cwd, filename, "svg"));
         }
@@ -123,4 +127,4 @@ function index({ include, exclude, devtools } = {}) {
   };
 }
 
-export { index as default, getContainerRenderer, nodeRequire };
+export { index as default, getContainerRenderer };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "defuss-astro",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "license": "MIT",
-  "description": "Defuss Integration for Astro.",
+  "description": "Defuss Integration for Astro with WASM-based built-in image conversion support.",
   "keywords": [
     "jsx",
     "render",
@@ -71,19 +71,16 @@
     "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
   },
   "dependencies": {
-    "astro": "^5.8.0",
+    "astro": "^5.8.1",
     "vite": "^6.3.5",
     "fast-glob": "^3.3.2",
     "svgo": "^3.3.2",
-    "lightningimg-node": "^0.3.3",
+    "lightningimg": "^1.0.0",
     "purgecss": "^7.0.2",
     "file-type": "^19.6.0",
     "defuss": "2.0.7",
     "defuss-vite": "1.1.3"
   },
-  "peerDependencies": {
-    "@minify-html/node": "^0.15.0"
-  },
   "scripts": {
     "clean": "rm -rf ./dist && rm -rf ./node_modules/.pnpm",
     "prebuild": "pnpm run clean",