@stacksjs/stx 0.2.95 → 0.2.96

package/dist/image-optimization/auto-sibling.js

@@ -1,2 +1,88 @@
-// @bun
-import{Dm as a}from"../chunk-zf2pek72.js";import"../chunk-xv34zbp4.js";export{a as rewriteImagesWithSiblings};
+import path from "node:path";
+const RASTER_EXTS = new Set([".jpg", ".jpeg", ".png", ".gif"]), DEFAULT_FORMATS = [
+  { ext: ".avif", mime: "image/avif" },
+  { ext: ".webp", mime: "image/webp" }
+];
+export async function rewriteImagesWithSiblings(html, options) {
+  const formats = options.formats ?? DEFAULT_FORMATS;
+  if (!options.publicDir)
+    return html;
+  const pictureRanges = collectPictureRanges(html), patches = [], imgRe = /<img\b[^>]*?>/gi, matches = [];
+  let m;
+  while ((m = imgRe.exec(html)) !== null) {
+    const raw = m[0], srcMatch = raw.match(/\bsrc=["']([^"']+)["']/i);
+    if (!srcMatch)
+      continue;
+    if (isInsideRange(m.index, pictureRanges))
+      continue;
+    matches.push({ idx: m.index, length: raw.length, src: srcMatch[1], raw });
+  }
+  if (matches.length === 0)
+    return html;
+  const probes = await Promise.all(matches.map(async (match) => {
+    const sources = await findSiblings(match.src, options.publicDir, formats);
+    return { match, sources };
+  }));
+  for (const { match, sources } of probes) {
+    if (sources.length === 0)
+      continue;
+    const replacement = `<picture>${sources.map((s) => `<source type="${s.mime}" srcset="${escapeAttr(s.url)}">`).join("")}${match.raw}</picture>`;
+    patches.push({ start: match.idx, end: match.idx + match.length, replacement });
+  }
+  if (patches.length === 0)
+    return html;
+  let out = "", cursor = 0;
+  for (const p of patches) {
+    out += html.slice(cursor, p.start);
+    out += p.replacement;
+    cursor = p.end;
+  }
+  out += html.slice(cursor);
+  return out;
+}
+async function findSiblings(srcUrl, publicDir, formats) {
+  if (!shouldProbe(srcUrl))
+    return [];
+  const ext = path.extname(srcUrl).toLowerCase();
+  if (!RASTER_EXTS.has(ext))
+    return [];
+  if (!srcUrl.startsWith("/"))
+    return [];
+  const fsBase = path.join(publicDir, srcUrl.slice(1)), fsDir = path.dirname(fsBase), fsBaseName = path.basename(fsBase, ext), resolvedDir = path.resolve(fsDir), resolvedPublic = path.resolve(publicDir);
+  if (!resolvedDir.startsWith(resolvedPublic))
+    return [];
+  const urlDir = path.posix.dirname(srcUrl), checks = formats.map(async (fmt) => {
+    const siblingPath = path.join(fsDir, `${fsBaseName}${fmt.ext}`);
+    if (!await Bun.file(siblingPath).exists())
+      return null;
+    return { url: path.posix.join(urlDir, `${fsBaseName}${fmt.ext}`), mime: fmt.mime };
+  });
+  return (await Promise.all(checks)).filter((s) => s !== null);
+}
+function shouldProbe(srcUrl) {
+  if (!srcUrl)
+    return !1;
+  if (srcUrl.startsWith("http://") || srcUrl.startsWith("https://"))
+    return !1;
+  if (srcUrl.startsWith("//"))
+    return !1;
+  if (srcUrl.startsWith("data:"))
+    return !1;
+  return !0;
+}
+function collectPictureRanges(html) {
+  const ranges = [], re = /<picture\b[^>]*>[\s\S]*?<\/picture>/gi;
+  let m;
+  while ((m = re.exec(html)) !== null)
+    ranges.push([m.index, m.index + m[0].length]);
+  return ranges;
+}
+function isInsideRange(idx, ranges) {
+  for (const [start, end] of ranges)
+    if (idx >= start && idx < end)
+      return !0;
+  return !1;
+}
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}

package/dist/image-optimization/build-plugin.js

@@ -1,2 +1,241 @@
-// @bun
-import{Em as a,Fm as b,Gm as c,Hm as d,Im as e}from"../chunk-p1h8065h.js";import"../chunk-4d2y57k7.js";import"../chunk-xv34zbp4.js";export{e as writeImageManifest,b as optimizeImage,c as optimizeDirectory,d as generateImageManifest,a as createImagePlugin};
+import fs from "node:fs";
+import path from "node:path";
+import {
+  DEFAULT_FORMATS,
+  DEFAULT_QUALITY,
+  DEFAULT_WIDTHS,
+  processImage,
+  isImageFile,
+  isImageBackendAvailable,
+  isSharpAvailable,
+  formatSize,
+  getTotalSize
+} from "./processor.js";
+export function createImagePlugin(options = {}) {
+  const {
+    inputDirs = ["public", "src/assets", "assets"],
+    outputDir = "dist/images",
+    baseUrl = "/images",
+    formats = DEFAULT_FORMATS,
+    widths = DEFAULT_WIDTHS,
+    quality = DEFAULT_QUALITY,
+    placeholder = "none",
+    concurrency = 4,
+    cache = !0,
+    cacheDir = ".stx/image-cache",
+    referencedOnly = !1,
+    verbose = !1
+  } = options, ctx = {
+    imageReferences: new Set,
+    processedImages: new Map,
+    stats: {
+      totalImages: 0,
+      optimizedImages: 0,
+      savedBytes: 0,
+      variants: 0
+    }
+  };
+  return {
+    name: "stx-image-optimization",
+    async setup(build) {
+      if (!await isImageBackendAvailable()) {
+        console.warn("[stx-images] no image backend available, optimization disabled");
+        return;
+      }
+      if (cache)
+        await fs.promises.mkdir(cacheDir, { recursive: !0 });
+      if (verbose) {
+        const hasSharp = await isSharpAvailable();
+        console.log("[stx-images] Plugin initialized");
+        console.log(`  Backend: ${hasSharp ? "sharp (native fast path) + ts-images" : "ts-images (pure TS)"}`);
+        console.log(`  Input dirs: ${inputDirs.join(", ")}`);
+        console.log(`  Output dir: ${outputDir}`);
+        console.log(`  Formats: ${formats.join(", ")}`);
+        console.log(`  Widths: ${widths.join(", ")}`);
+      }
+    },
+    async buildStart() {
+      ctx.imageReferences.clear();
+      ctx.processedImages.clear();
+      ctx.stats = {
+        totalImages: 0,
+        optimizedImages: 0,
+        savedBytes: 0,
+        variants: 0
+      };
+    },
+    async transform(code, id) {
+      if (id.endsWith(".html") || id.endsWith(".stx")) {
+        const refs = extractImageReferences(code);
+        for (const ref of refs)
+          ctx.imageReferences.add(ref);
+      }
+      if (code.includes("<Image") || code.includes("@image"))
+        return await transformImageReferences(code, {
+          formats,
+          widths,
+          quality,
+          placeholder,
+          outputDir,
+          baseUrl,
+          processedImages: ctx.processedImages
+        });
+      return code;
+    },
+    async buildEnd(result) {
+      if (!await isImageBackendAvailable())
+        return;
+      await fs.promises.mkdir(outputDir, { recursive: !0 });
+      const imagesToProcess = [];
+      for (const dir of inputDirs) {
+        if (!fs.existsSync(dir))
+          continue;
+        const images = await collectImages(dir);
+        imagesToProcess.push(...images);
+      }
+      const finalImages = referencedOnly ? imagesToProcess.filter((img) => isImageReferenced(img, ctx.imageReferences)) : imagesToProcess;
+      ctx.stats.totalImages = finalImages.length;
+      if (verbose)
+        console.log(`[stx-images] Processing ${finalImages.length} images...`);
+      const chunks = chunkArray(finalImages, concurrency);
+      for (const chunk of chunks)
+        await Promise.all(chunk.map(async (imagePath) => {
+          try {
+            const processed = await processImage(imagePath, {
+              formats,
+              widths,
+              quality,
+              placeholder,
+              outputDir,
+              baseUrl
+            });
+            ctx.processedImages.set(imagePath, processed);
+            ctx.stats.optimizedImages++;
+            ctx.stats.variants += processed.variants.length;
+            const originalSize = fs.statSync(imagePath).size, optimizedSize = getTotalSize(processed.variants);
+            ctx.stats.savedBytes += Math.max(0, originalSize - optimizedSize / processed.variants.length);
+            if (verbose)
+              console.log(`  \u2713 ${path.basename(imagePath)} \u2192 ${processed.variants.length} variants`);
+          } catch (error) {
+            console.error(`[stx-images] Error processing ${imagePath}:`, error);
+          }
+        }));
+      console.log("[stx-images] Optimization complete:");
+      console.log(`  Images: ${ctx.stats.optimizedImages}/${ctx.stats.totalImages}`);
+      console.log(`  Variants: ${ctx.stats.variants}`);
+      if (ctx.stats.savedBytes > 0)
+        console.log(`  Saved: ~${formatSize(ctx.stats.savedBytes)}`);
+    }
+  };
+}
+function extractImageReferences(content) {
+  const refs = [], srcPattern = /src=["']([^"']+\.(jpg|jpeg|png|webp|avif|gif))["']/gi;
+  let match;
+  while ((match = srcPattern.exec(content)) !== null)
+    refs.push(match[1]);
+  const imageCompPattern = /<Image[^>]+src=["']([^"']+)["']/gi;
+  while ((match = imageCompPattern.exec(content)) !== null)
+    refs.push(match[1]);
+  const directivePattern = /@image\s*\(\s*['"]([^'"]+)['"]/gi;
+  while ((match = directivePattern.exec(content)) !== null)
+    refs.push(match[1]);
+  const bgPattern = /background(?:-image)?:\s*url\(["']?([^"')]+\.(jpg|jpeg|png|webp|avif|gif))["']?\)/gi;
+  while ((match = bgPattern.exec(content)) !== null)
+    refs.push(match[1]);
+  return refs;
+}
+function isImageReferenced(imagePath, references) {
+  const basename = path.basename(imagePath);
+  for (const ref of references)
+    if (ref.endsWith(basename) || ref.includes(basename))
+      return !0;
+  return !1;
+}
+async function transformImageReferences(content, options) {
+  return content;
+}
+async function collectImages(dir) {
+  const images = [];
+  async function walk(currentDir) {
+    const entries = await fs.promises.readdir(currentDir, { withFileTypes: !0 });
+    for (const entry of entries) {
+      const fullPath = path.join(currentDir, entry.name);
+      if (entry.isDirectory())
+        await walk(fullPath);
+      else if (entry.isFile() && isImageFile(fullPath))
+        images.push(fullPath);
+    }
+  }
+  await walk(dir);
+  return images;
+}
+function chunkArray(array, size) {
+  const chunks = [];
+  for (let i = 0;i < array.length; i += size)
+    chunks.push(array.slice(i, i + size));
+  return chunks;
+}
+export async function optimizeImage(inputPath, outputDir, options = {}) {
+  if (!await isImageBackendAvailable())
+    throw Error("No image backend available \u2014 install sharp or ensure ts-images is bundled");
+  return processImage(inputPath, {
+    ...options,
+    outputDir
+  });
+}
+export async function optimizeDirectory(inputDir, outputDir, options = {}) {
+  const {
+    formats = DEFAULT_FORMATS,
+    widths = DEFAULT_WIDTHS,
+    quality = DEFAULT_QUALITY,
+    placeholder = "none",
+    concurrency = 4,
+    verbose = !1
+  } = options;
+  if (!await isImageBackendAvailable())
+    throw Error("No image backend available \u2014 install sharp or ensure ts-images is bundled");
+  await fs.promises.mkdir(outputDir, { recursive: !0 });
+  const images = await collectImages(inputDir), processed = [], stats = {
+    totalImages: images.length,
+    optimizedImages: 0,
+    savedBytes: 0,
+    variants: 0
+  }, chunks = chunkArray(images, concurrency);
+  for (const chunk of chunks) {
+    const results = await Promise.all(chunk.map(async (imagePath) => {
+      try {
+        const result = await processImage(imagePath, {
+          formats,
+          widths,
+          quality,
+          placeholder,
+          outputDir,
+          baseUrl: "/"
+        });
+        stats.optimizedImages++;
+        stats.variants += result.variants.length;
+        if (verbose)
+          console.log(`  \u2713 ${path.basename(imagePath)}`);
+        return result;
+      } catch (error) {
+        console.error(`Error processing ${imagePath}:`, error);
+        return null;
+      }
+    }));
+    processed.push(...results.filter((r) => r !== null));
+  }
+  return { processed, stats };
+}
+export function generateImageManifest(images) {
+  const manifest = {};
+  for (const img of images)
+    manifest[img.src] = {
+      variants: img.variants,
+      placeholder: img.placeholder
+    };
+  return manifest;
+}
+export async function writeImageManifest(images, outputPath) {
+  const manifest = generateImageManifest(images);
+  await Bun.write(outputPath, JSON.stringify(manifest, null, 2));
+}

package/dist/image-optimization/component.js

@@ -1,2 +1,244 @@
-// @bun
-import{Jm as a,Km as b,Lm as c}from"../chunk-p3e0cqtt.js";import"../chunk-4d2y57k7.js";import"../chunk-xv34zbp4.js";export{a as renderImageComponent,c as processImageComponents,b as parseImageComponent};
+import {
+  DEFAULT_FORMATS,
+  DEFAULT_QUALITY,
+  DEFAULT_WIDTHS,
+  generateSrcSet,
+  generateSizes,
+  getFallbackVariant,
+  groupVariantsByFormat,
+  getMimeType
+} from "./processor.js";
+export function renderImageComponent(props, context = {}) {
+  const {
+    src,
+    alt,
+    width,
+    height,
+    sizes = "100vw",
+    loading = "lazy",
+    priority = !1,
+    quality = DEFAULT_QUALITY,
+    placeholder = "none",
+    formats = DEFAULT_FORMATS,
+    widths = DEFAULT_WIDTHS,
+    decoding = "async",
+    fetchpriority,
+    objectFit,
+    objectPosition
+  } = props, className = props.class, style = props.style, { processedImage, variants, optimize = !0, isDev = !1 } = context;
+  if (variants && variants.length > 0)
+    return renderPicture(props, variants, processedImage);
+  if (isDev || !optimize)
+    return renderSimpleImg(props);
+  return renderPlaceholder(props);
+}
+function renderPicture(props, variants, processedImage) {
+  const {
+    src,
+    alt,
+    width,
+    height,
+    sizes = "100vw",
+    loading = "lazy",
+    priority = !1,
+    decoding = "async",
+    fetchpriority,
+    objectFit,
+    objectPosition,
+    placeholder = "none"
+  } = props, className = props.class, style = props.style, grouped = groupVariantsByFormat(variants), fallback = getFallbackVariant(variants), sizesAttr = typeof sizes === "object" ? generateSizes(sizes) : sizes, aspectRatio = processedImage ? processedImage.aspectRatio : width && height ? Number(width) / Number(height) : void 0, styleAttrs = [];
+  if (aspectRatio)
+    styleAttrs.push(`aspect-ratio: ${aspectRatio}`);
+  if (objectFit)
+    styleAttrs.push(`object-fit: ${objectFit}`);
+  if (objectPosition)
+    styleAttrs.push(`object-position: ${objectPosition}`);
+  if (style)
+    styleAttrs.push(style);
+  const styleAttr = styleAttrs.length > 0 ? ` style="${styleAttrs.join("; ")}"` : "", classAttr = className ? ` class="${className}"` : "", loadingAttr = priority ? "" : ` loading="${loading}"`, decodingAttr = ` decoding="${decoding}"`, priorityAttr = fetchpriority ? ` fetchpriority="${fetchpriority}"` : priority ? ' fetchpriority="high"' : "", formatOrder = ["avif", "webp", "jpeg", "png"], sources = [];
+  for (const format of formatOrder) {
+    const formatVariants = grouped.get(format);
+    if (formatVariants && formatVariants.length > 0) {
+      const srcset = generateSrcSet(formatVariants), mimeType = getMimeType(format);
+      sources.push(`  <source type="${mimeType}" srcset="${srcset}" sizes="${sizesAttr}" />`);
+    }
+  }
+  let wrapperStart = "", wrapperEnd = "", placeholderCss;
+  if (placeholder !== "none" && processedImage?.placeholder) {
+    const placeholderId = `img-${Math.random().toString(36).slice(2, 8)}`;
+    wrapperStart = `<div class="stx-image-wrapper" id="${placeholderId}">`;
+    wrapperEnd = "</div>";
+    if (placeholder === "blur")
+      placeholderCss = `
+#${placeholderId} {
+  position: relative;
+  background-image: url('${processedImage.placeholder}');
+  background-size: cover;
+  background-position: center;
+}
+#${placeholderId} img {
+  transition: opacity 0.3s ease;
+}
+#${placeholderId}.loaded img {
+  opacity: 1;
+}
+`.trim();
+    else if (placeholder === "color")
+      placeholderCss = `
+#${placeholderId} {
+  background-color: ${processedImage.placeholder};
+}
+`.trim();
+  }
+  const widthAttr = width ? ` width="${width}"` : processedImage ? ` width="${processedImage.width}"` : "", heightAttr = height ? ` height="${height}"` : processedImage ? ` height="${processedImage.height}"` : "", html = `${wrapperStart}<picture>
+${sources.join(`
+`)}
+  <img
+    src="${fallback?.url || src}"
+    alt="${escapeHtml(alt)}"${widthAttr}${heightAttr}${classAttr}${styleAttr}${loadingAttr}${decodingAttr}${priorityAttr}
+  />
+</picture>${wrapperEnd}`;
+  let preloadLink;
+  if (priority && fallback) {
+    const webpVariants = grouped.get("webp"), preloadVariant = webpVariants?.[Math.floor(webpVariants.length / 2)] || fallback, mimeType = getMimeType(preloadVariant.format);
+    preloadLink = `<link rel="preload" as="image" href="${preloadVariant.url}" type="${mimeType}" />`;
+  }
+  return { html, preloadLink, placeholderCss };
+}
+function renderSimpleImg(props) {
+  const {
+    src,
+    alt,
+    width,
+    height,
+    loading = "lazy",
+    decoding = "async",
+    priority = !1,
+    fetchpriority,
+    objectFit,
+    objectPosition
+  } = props, className = props.class, style = props.style, styleAttrs = [];
+  if (objectFit)
+    styleAttrs.push(`object-fit: ${objectFit}`);
+  if (objectPosition)
+    styleAttrs.push(`object-position: ${objectPosition}`);
+  if (style)
+    styleAttrs.push(style);
+  const styleAttr = styleAttrs.length > 0 ? ` style="${styleAttrs.join("; ")}"` : "", classAttr = className ? ` class="${className}"` : "", widthAttr = width ? ` width="${width}"` : "", heightAttr = height ? ` height="${height}"` : "", loadingAttr = priority ? "" : ` loading="${loading}"`, decodingAttr = ` decoding="${decoding}"`, priorityAttr = fetchpriority ? ` fetchpriority="${fetchpriority}"` : priority ? ' fetchpriority="high"' : "";
+  return { html: `<img src="${src}" alt="${escapeHtml(alt)}"${widthAttr}${heightAttr}${classAttr}${styleAttr}${loadingAttr}${decodingAttr}${priorityAttr} />` };
+}
+function renderPlaceholder(props) {
+  const {
+    src,
+    alt,
+    width,
+    height,
+    sizes = "100vw",
+    loading = "lazy",
+    priority = !1,
+    quality = DEFAULT_QUALITY,
+    formats = DEFAULT_FORMATS,
+    widths = DEFAULT_WIDTHS,
+    decoding = "async",
+    fetchpriority,
+    objectFit,
+    objectPosition
+  } = props, className = props.class, style = props.style, styleAttrs = [];
+  if (objectFit)
+    styleAttrs.push(`object-fit: ${objectFit}`);
+  if (objectPosition)
+    styleAttrs.push(`object-position: ${objectPosition}`);
+  if (style)
+    styleAttrs.push(style);
+  const styleAttr = styleAttrs.length > 0 ? ` style="${styleAttrs.join("; ")}"` : "", classAttr = className ? ` class="${className}"` : "", widthAttr = width ? ` width="${width}"` : "", heightAttr = height ? ` height="${height}"` : "", loadingAttr = priority ? "" : ` loading="${loading}"`, decodingAttr = ` decoding="${decoding}"`, priorityAttr = fetchpriority ? ` fetchpriority="${fetchpriority}"` : priority ? ' fetchpriority="high"' : "", sizesAttr = typeof sizes === "object" ? generateSizes(sizes) : sizes, dataAttrs = `
+    data-stx-image
+    data-src="${src}"
+    data-sizes="${sizesAttr}"
+    data-quality="${quality}"
+    data-formats="${formats.join(",")}"
+    data-widths="${widths.join(",")}"
+  `.replace(/\s+/g, " ").trim();
+  return { html: `<img src="${src}" alt="${escapeHtml(alt)}"${widthAttr}${heightAttr}${classAttr}${styleAttr}${loadingAttr}${decodingAttr}${priorityAttr} ${dataAttrs} />` };
+}
+export function parseImageComponent(content) {
+  const match = content.match(/<Image\s+([^>]*?)\/?>/);
+  if (!match)
+    return null;
+  const attrsStr = match[1], props = {}, attrRegex = /(\w+)(?:=(?:"([^"]*)"|'([^']*)'|(\{[^}]+\})))?/g;
+  let attrMatch;
+  while ((attrMatch = attrRegex.exec(attrsStr)) !== null) {
+    const [, name, doubleQuoted, singleQuoted, braced] = attrMatch, value = doubleQuoted ?? singleQuoted ?? braced ?? !0;
+    switch (name) {
+      case "src":
+        props.src = String(value);
+        break;
+      case "alt":
+        props.alt = String(value);
+        break;
+      case "width":
+        props.width = Number(value) || value;
+        break;
+      case "height":
+        props.height = Number(value) || value;
+        break;
+      case "sizes":
+        props.sizes = String(value);
+        break;
+      case "loading":
+        props.loading = value;
+        break;
+      case "priority":
+        props.priority = value === !0 || value === "true";
+        break;
+      case "quality":
+        props.quality = Number(value);
+        break;
+      case "placeholder":
+        props.placeholder = value;
+        break;
+      case "class":
+        props.class = String(value);
+        break;
+      case "style":
+        props.style = String(value);
+        break;
+      case "decoding":
+        props.decoding = value;
+        break;
+      case "fetchpriority":
+        props.fetchpriority = value;
+        break;
+      case "objectFit":
+        props.objectFit = value;
+        break;
+      case "objectPosition":
+        props.objectPosition = String(value);
+        break;
+    }
+  }
+  if (!props.src || !props.alt)
+    return null;
+  return props;
+}
+export async function processImageComponents(content, processor) {
+  const imagePattern = /<Image\s+[^>]*?\/?>/g, preloadLinks = [], styles = [];
+  let result = content, match;
+  const matches = [];
+  while ((match = imagePattern.exec(content)) !== null)
+    matches.push({ match: match[0], index: match.index });
+  for (let i = matches.length - 1;i >= 0; i--) {
+    const { match: imageTag } = matches[i], props = parseImageComponent(imageTag);
+    if (props) {
+      const renderResult = await processor(props);
+      result = result.replace(imageTag, renderResult.html);
+      if (renderResult.preloadLink)
+        preloadLinks.push(renderResult.preloadLink);
+      if (renderResult.placeholderCss)
+        styles.push(renderResult.placeholderCss);
+    }
+  }
+  return { html: result, preloadLinks, styles };
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}