defuss-astro 1.4.8 → 1.5.0

package/dist/client.cjs

@@ -1,121 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var client$1 = require('defuss/client');
 var render = require('./render-DkMOLcUd.cjs');
-var jsxRuntime = require('defuss/jsx-runtime');
 require('defuss');
 
-const Img = ({
-  id,
-  src,
-  alt,
-  height = 100,
-  width = 100,
-  previewQuality = 5,
-  quality = 90,
-  className = "",
-  class: _class = "",
-  style = {},
-  format = "webp",
-  astroAssetsPath = "_defuss/image"
-}) => {
-  const placeholderWidth = Math.round(width / 7);
-  const placeholderHeight = Math.round(height / 7);
-  const imgRef = client$1.createRef();
-  const getTransformOptionsPath = ({
-    src: src2,
-    height: height2,
-    width: width2,
-    quality: quality2 = previewQuality,
-    format: format2 = "webp"
-  }) => {
-    const transformOptions = new URLSearchParams({
-      href: src2,
-      h: height2.toString(),
-      w: width2.toString(),
-      q: quality2.toString(),
-      f: format2
-    });
-    return `/${astroAssetsPath}?${transformOptions.toString()}`;
-  };
-  const transformedSrc = getTransformOptionsPath({
-    src,
-    height: placeholderHeight,
-    width: placeholderWidth,
-    format
-  });
-  const whenImageMounts = () => {
-    const img = imgRef.current;
-    if (!img) return;
-    let loaded = false;
-    const getTransformOptionsPath2 = ({
-      src: src2,
-      height: height2,
-      width: width2,
-      quality: quality2,
-      format: format2
-    }) => {
-      const transformOptions = new URLSearchParams({
-        href: src2,
-        h: height2.toString(),
-        w: width2.toString(),
-        q: quality2.toString(),
-        f: format2
-      });
-      return `/${astroAssetsPath}?${transformOptions.toString()}`;
-    };
-    const lazyLoad = () => {
-      if (loaded) return;
-      const transformedSrc2 = getTransformOptionsPath2({
-        src,
-        height,
-        width,
-        quality,
-        format
-      });
-      img.src = transformedSrc2;
-      img.onload = () => {
-        img.classList.remove("blur");
-        img.classList.add("loaded");
-        img.style.filter = "blur(0px)";
-        loaded = true;
-      };
-    };
-    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(
-    "img",
-    {
-      id,
-      ref: imgRef,
-      onMount: whenImageMounts,
-      alt,
-      class: `${className || _class} blur`,
-      src: transformedSrc,
-      style: {
-        filter: "blur(40px)",
-        transition: "0.125s filter linear",
-        ...style
-      },
-      width,
-      height
-    }
-  );
-};
-
 var client = (element) => async (Component, props, { default: children, ...slotted }, { client }) => {
   const isHydrate = element.hasAttribute("ssr") && (client === "visible" || client === "idle" || client === "load" || client === "media");
   if (!element.hasAttribute("ssr")) return;
@@ -190,5 +78,4 @@ var client = (element) => async (Component, props, { default: children, ...slott
   );
 };
 
-exports.Img = Img;
-exports.default = client;
+module.exports = client;

package/dist/client.d.cts

@@ -1,29 +1,3 @@
-import { Props, CSSProperties } from 'defuss/client';
-
-interface ImgProps extends Props {
-    id?: string;
-    src: string;
-    width?: number;
-    height?: number;
-    alt: string;
-    style?: CSSProperties;
-    class?: string;
-    className?: string;
-    format?: string;
-    astroAssetsPath?: string;
-    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>;
 
-export { Img, type ImgProps, _default as default };
+export { _default as default };

package/dist/client.d.mts

@@ -1,29 +1,3 @@
-import { Props, CSSProperties } from 'defuss/client';
-
-interface ImgProps extends Props {
-    id?: string;
-    src: string;
-    width?: number;
-    height?: number;
-    alt: string;
-    style?: CSSProperties;
-    class?: string;
-    className?: string;
-    format?: string;
-    astroAssetsPath?: string;
-    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>;
 
-export { Img, type ImgProps, _default as default };
+export { _default as default };

package/dist/client.mjs

@@ -1,117 +1,7 @@
-import { createRef, hydrate, renderSync, DANGEROUSLY_SET_INNER_HTML_ATTRIBUTE, REF_ATTRIBUTE_NAME } from 'defuss/client';
+import { hydrate, renderSync, DANGEROUSLY_SET_INNER_HTML_ATTRIBUTE, REF_ATTRIBUTE_NAME } from 'defuss/client';
 import { S as StaticHtml } from './render-viAgneG-.mjs';
-import { jsx } from 'defuss/jsx-runtime';
 import 'defuss';
 
-const Img = ({
-  id,
-  src,
-  alt,
-  height = 100,
-  width = 100,
-  previewQuality = 5,
-  quality = 90,
-  className = "",
-  class: _class = "",
-  style = {},
-  format = "webp",
-  astroAssetsPath = "_defuss/image"
-}) => {
-  const placeholderWidth = Math.round(width / 7);
-  const placeholderHeight = Math.round(height / 7);
-  const imgRef = createRef();
-  const getTransformOptionsPath = ({
-    src: src2,
-    height: height2,
-    width: width2,
-    quality: quality2 = previewQuality,
-    format: format2 = "webp"
-  }) => {
-    const transformOptions = new URLSearchParams({
-      href: src2,
-      h: height2.toString(),
-      w: width2.toString(),
-      q: quality2.toString(),
-      f: format2
-    });
-    return `/${astroAssetsPath}?${transformOptions.toString()}`;
-  };
-  const transformedSrc = getTransformOptionsPath({
-    src,
-    height: placeholderHeight,
-    width: placeholderWidth,
-    format
-  });
-  const whenImageMounts = () => {
-    const img = imgRef.current;
-    if (!img) return;
-    let loaded = false;
-    const getTransformOptionsPath2 = ({
-      src: src2,
-      height: height2,
-      width: width2,
-      quality: quality2,
-      format: format2
-    }) => {
-      const transformOptions = new URLSearchParams({
-        href: src2,
-        h: height2.toString(),
-        w: width2.toString(),
-        q: quality2.toString(),
-        f: format2
-      });
-      return `/${astroAssetsPath}?${transformOptions.toString()}`;
-    };
-    const lazyLoad = () => {
-      if (loaded) return;
-      const transformedSrc2 = getTransformOptionsPath2({
-        src,
-        height,
-        width,
-        quality,
-        format
-      });
-      img.src = transformedSrc2;
-      img.onload = () => {
-        img.classList.remove("blur");
-        img.classList.add("loaded");
-        img.style.filter = "blur(0px)";
-        loaded = true;
-      };
-    };
-    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(
-    "img",
-    {
-      id,
-      ref: imgRef,
-      onMount: whenImageMounts,
-      alt,
-      class: `${className || _class} blur`,
-      src: transformedSrc,
-      style: {
-        filter: "blur(40px)",
-        transition: "0.125s filter linear",
-        ...style
-      },
-      width,
-      height
-    }
-  );
-};
-
 var client = (element) => async (Component, props, { default: children, ...slotted }, { client }) => {
   const isHydrate = element.hasAttribute("ssr") && (client === "visible" || client === "idle" || client === "load" || client === "media");
   if (!element.hasAttribute("ssr")) return;
@@ -186,4 +76,4 @@ var client = (element) => async (Component, props, { default: children, ...slott
   );
 };
 
-export { Img, client as default };
+export { client as default };

package/dist/index.cjs

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var defussPlugin = require('defuss-vite');
+var vite = require('vite');
+var core = require('@swc/core');
 var node_url = require('node:url');
 var glob = require('fast-glob');
 var node_perf_hooks = require('node:perf_hooks');
@@ -12,6 +13,90 @@ var promises = require('node:fs/promises');
 var purgecss = require('purgecss');
 var node_fs = require('node:fs');
 
+function parseId(url) {
+  return { id: url.split("?", 2)[0] };
+}
+function defussVitePlugin({
+  include,
+  exclude
+} = {}) {
+  let config;
+  const shouldTransform = vite.createFilter(
+    include || [/\.[cm]?[tj]sx?$/],
+    exclude || [/node_modules/]
+  );
+  const jsxPlugin = {
+    name: "vite:defuss-jsx",
+    enforce: "pre",
+    config() {
+      return {
+        esbuild: {
+          // we want Vite to handle JSX transformations
+          jsxImportSource: "defuss",
+          jsxFactory: "jsx",
+          jsxFragment: "Fragment"
+        },
+        optimizeDeps: {
+          // we want Vite to optimize the runtime code
+          include: ["defuss"],
+          // we don't want Vite to optimize this plugin code
+          exclude: ["defuss-vite"]
+        },
+        ssr: {
+          // LinkeDOM (used by defuss/render) imports perf_hooks
+          // which is actually just an empty placeholder package,
+          // therefore, we externalize it
+          external: ["perf_hooks"]
+        }
+      };
+    },
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    async transform(code, url) {
+      const { id } = parseId(url);
+      if (!shouldTransform(id)) {
+        return null;
+      }
+      const prevSourceMap = this.getCombinedSourcemap?.();
+      const inputSourceMap = prevSourceMap ? JSON.stringify({ code, map: prevSourceMap }) : void 0;
+      const result = await core.transform(code, {
+        jsc: {
+          parser: {
+            syntax: "typescript",
+            tsx: true,
+            dynamicImport: true,
+            decorators: true
+          },
+          transform: {
+            react: {
+              development: true,
+              useBuiltins: false,
+              throwIfNamespace: false,
+              pragma: "jsx",
+              pragmaFrag: "Fragment",
+              runtime: "automatic",
+              importSource: "defuss"
+            }
+          },
+          target: "es2024"
+        },
+        sourceMaps: true,
+        sourceFileName: id,
+        filename: id,
+        sourceRoot: config.root,
+        inputSourceMap
+      });
+      if (!result) return null;
+      return {
+        code: result.code || code,
+        map: result.map
+      };
+    }
+  };
+  return jsxPlugin;
+}
+
 const logMessage = (message) => {
   const date = (/* @__PURE__ */ new Date()).toLocaleTimeString();
   console.log(`${date} \x1B[32mdefuss-astro:\x1B[0m ${message}`);
@@ -76,16 +161,8 @@ function index({
         config,
         addRenderer,
         updateConfig,
-        command,
-        injectScript,
-        injectRoute
+        command
       }) => {
-        injectRoute({
-          pattern: "/_defuss/image",
-          prerender: false,
-          entrypoint: "defuss-astro/image-endpoint.js"
-        });
-        node_url.fileURLToPath(config.publicDir);
         config.compressHTML = true;
         config.scopedStyleStrategy = "class";
         if (!config.vite.build) {
@@ -98,10 +175,7 @@ function index({
             optimizeDeps: {
               include: ["defuss-astro/client.js", "defuss-astro/server.js"]
             },
-            ssr: {
-              noExternal: ["lightningimg-node"]
-            },
-            plugins: [defussPlugin()]
+            plugins: [defussVitePlugin()]
           }
         });
       },

package/dist/index.d.cts

@@ -1,5 +1,16 @@
 import { AstroIntegration, ContainerRenderer } from 'astro';
-import { DefussVitePluginOptions } from 'defuss-vite';
+import { FilterPattern } from 'vite';
+
+interface DefussVitePluginOptions {
+    /**
+     * RegExp or glob to match files to be transformed
+     */
+    include?: FilterPattern;
+    /**
+     * RegExp or glob to match files to NOT be transformed
+     */
+    exclude?: FilterPattern;
+}
 
 interface Options extends Pick<DefussVitePluginOptions, "exclude" | "include"> {
     devtools?: boolean;

package/dist/index.d.mts

@@ -1,5 +1,16 @@
 import { AstroIntegration, ContainerRenderer } from 'astro';
-import { DefussVitePluginOptions } from 'defuss-vite';
+import { FilterPattern } from 'vite';
+
+interface DefussVitePluginOptions {
+    /**
+     * RegExp or glob to match files to be transformed
+     */
+    include?: FilterPattern;
+    /**
+     * RegExp or glob to match files to NOT be transformed
+     */
+    exclude?: FilterPattern;
+}
 
 interface Options extends Pick<DefussVitePluginOptions, "exclude" | "include"> {
     devtools?: boolean;

package/dist/index.mjs

@@ -1,4 +1,5 @@
-import defussPlugin from 'defuss-vite';
+import { createFilter } from 'vite';
+import { transform } from '@swc/core';
 import { fileURLToPath } from 'node:url';
 import glob from 'fast-glob';
 import { performance } from 'node:perf_hooks';
@@ -8,6 +9,90 @@ import { readFile, writeFile } from 'node:fs/promises';
 import { PurgeCSS } from 'purgecss';
 import { existsSync } from 'node:fs';
 
+function parseId(url) {
+  return { id: url.split("?", 2)[0] };
+}
+function defussVitePlugin({
+  include,
+  exclude
+} = {}) {
+  let config;
+  const shouldTransform = createFilter(
+    include || [/\.[cm]?[tj]sx?$/],
+    exclude || [/node_modules/]
+  );
+  const jsxPlugin = {
+    name: "vite:defuss-jsx",
+    enforce: "pre",
+    config() {
+      return {
+        esbuild: {
+          // we want Vite to handle JSX transformations
+          jsxImportSource: "defuss",
+          jsxFactory: "jsx",
+          jsxFragment: "Fragment"
+        },
+        optimizeDeps: {
+          // we want Vite to optimize the runtime code
+          include: ["defuss"],
+          // we don't want Vite to optimize this plugin code
+          exclude: ["defuss-vite"]
+        },
+        ssr: {
+          // LinkeDOM (used by defuss/render) imports perf_hooks
+          // which is actually just an empty placeholder package,
+          // therefore, we externalize it
+          external: ["perf_hooks"]
+        }
+      };
+    },
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    async transform(code, url) {
+      const { id } = parseId(url);
+      if (!shouldTransform(id)) {
+        return null;
+      }
+      const prevSourceMap = this.getCombinedSourcemap?.();
+      const inputSourceMap = prevSourceMap ? JSON.stringify({ code, map: prevSourceMap }) : void 0;
+      const result = await transform(code, {
+        jsc: {
+          parser: {
+            syntax: "typescript",
+            tsx: true,
+            dynamicImport: true,
+            decorators: true
+          },
+          transform: {
+            react: {
+              development: true,
+              useBuiltins: false,
+              throwIfNamespace: false,
+              pragma: "jsx",
+              pragmaFrag: "Fragment",
+              runtime: "automatic",
+              importSource: "defuss"
+            }
+          },
+          target: "es2024"
+        },
+        sourceMaps: true,
+        sourceFileName: id,
+        filename: id,
+        sourceRoot: config.root,
+        inputSourceMap
+      });
+      if (!result) return null;
+      return {
+        code: result.code || code,
+        map: result.map
+      };
+    }
+  };
+  return jsxPlugin;
+}
+
 const logMessage = (message) => {
   const date = (/* @__PURE__ */ new Date()).toLocaleTimeString();
   console.log(`${date} \x1B[32mdefuss-astro:\x1B[0m ${message}`);
@@ -72,16 +157,8 @@ function index({
         config,
         addRenderer,
         updateConfig,
-        command,
-        injectScript,
-        injectRoute
+        command
       }) => {
-        injectRoute({
-          pattern: "/_defuss/image",
-          prerender: false,
-          entrypoint: "defuss-astro/image-endpoint.js"
-        });
-        fileURLToPath(config.publicDir);
         config.compressHTML = true;
         config.scopedStyleStrategy = "class";
         if (!config.vite.build) {
@@ -94,10 +171,7 @@ function index({
             optimizeDeps: {
               include: ["defuss-astro/client.js", "defuss-astro/server.js"]
             },
-            ssr: {
-              noExternal: ["lightningimg-node"]
-            },
-            plugins: [defussPlugin()]
+            plugins: [defussVitePlugin()]
           }
         });
       },

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "defuss-astro",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "license": "MIT",
-  "description": "Defuss Integration for Astro with WASM-based built-in image conversion support.",
+  "description": "defuss integration for Astro",
   "keywords": [
     "jsx",
     "render",
@@ -56,10 +56,6 @@
         "types": "./dist/server.d.mts",
         "default": "./dist/server.mjs"
       }
-    },
-    "./image-endpoint.js": {
-      "types": "./dist/endpoint/image-endpoint.d.mts",
-      "default": "./dist/endpoint/image-endpoint.mjs"
     }
   },
   "main": "./dist/index.cjs",
@@ -78,12 +74,11 @@
   },
   "dependencies": {
     "defuss": "^2.1.10",
-    "defuss-vite": "^1.1.3",
+    "@swc/core": "^1.10.2",
     "astro": "^5.16.11",
     "vite": "^6.4.1",
     "fast-glob": "^3.3.3",
     "svgo": "^4.0.0",
-    "lightningimg": "^1.0.3",
     "purgecss": "^7.0.2",
     "file-type": "^21.3.0"
   }

package/dist/endpoint/image-endpoint.cjs

@@ -1,67 +0,0 @@
-'use strict';
-
-var fileType = require('file-type');
-var lightningimg = require('lightningimg');
-
-const GET = async ({ url }) => {
-  try {
-    const imgHrefRelative = url.searchParams.get("href");
-    const height = url.searchParams.get("h");
-    const width = url.searchParams.get("w");
-    const quality = url.searchParams.get("q");
-    if (!imgHrefRelative) {
-      return new Response("Image URL is required", { status: 400 });
-    }
-    const imgHrefAbsolute = `${url.protocol}//${url.host}${imgHrefRelative}`;
-    console.log("GET /_defuss/image (transforming: ", imgHrefAbsolute, ")");
-    const response = await fetch(imgHrefAbsolute);
-    if (!response.ok) {
-      console.log("Error fetching image", { imgHrefAbsolute, response });
-      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 });
-      return new Response("Error getting file extension", { status: 500 });
-    }
-    if (fileExtension === "webp") {
-      return new Response(imageBuffer, {
-        headers: {
-          "Content-Type": "image/webp",
-          "Content-Length": imageBuffer.byteLength.toString()
-        }
-      });
-    }
-    let convertedImageBuffer;
-    try {
-      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
-      });
-      return new Response("Error converting image", { status: 500 });
-    }
-    const mimeType = `image/${fileExtension}`;
-    return new Response(convertedImageBuffer, {
-      headers: {
-        "Content-Type": mimeType,
-        "Content-Length": convertedImageBuffer.length.toString()
-      }
-    });
-  } catch (error) {
-    return new Response(`Error fetching image: ${error}`, { status: 500 });
-  }
-};
-
-exports.GET = GET;

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

@@ -1,5 +0,0 @@
-import { APIRoute } from 'astro';
-
-declare const GET: APIRoute;
-
-export { GET };

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

@@ -1,5 +0,0 @@
-import { APIRoute } from 'astro';
-
-declare const GET: APIRoute;
-
-export { GET };

package/dist/endpoint/image-endpoint.mjs

@@ -1,65 +0,0 @@
-import { fileTypeFromBuffer } from 'file-type';
-import { getImageInfo, convertImageBuffer } from 'lightningimg';
-
-const GET = async ({ url }) => {
-  try {
-    const imgHrefRelative = url.searchParams.get("href");
-    const height = url.searchParams.get("h");
-    const width = url.searchParams.get("w");
-    const quality = url.searchParams.get("q");
-    if (!imgHrefRelative) {
-      return new Response("Image URL is required", { status: 400 });
-    }
-    const imgHrefAbsolute = `${url.protocol}//${url.host}${imgHrefRelative}`;
-    console.log("GET /_defuss/image (transforming: ", imgHrefAbsolute, ")");
-    const response = await fetch(imgHrefAbsolute);
-    if (!response.ok) {
-      console.log("Error fetching image", { imgHrefAbsolute, response });
-      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 });
-      return new Response("Error getting file extension", { status: 500 });
-    }
-    if (fileExtension === "webp") {
-      return new Response(imageBuffer, {
-        headers: {
-          "Content-Type": "image/webp",
-          "Content-Length": imageBuffer.byteLength.toString()
-        }
-      });
-    }
-    let convertedImageBuffer;
-    try {
-      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
-      });
-      return new Response("Error converting image", { status: 500 });
-    }
-    const mimeType = `image/${fileExtension}`;
-    return new Response(convertedImageBuffer, {
-      headers: {
-        "Content-Type": mimeType,
-        "Content-Length": convertedImageBuffer.length.toString()
-      }
-    });
-  } catch (error) {
-    return new Response(`Error fetching image: ${error}`, { status: 500 });
-  }
-};
-
-export { GET };