@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/image-optimization/component.js

@@ -0,0 +1,244 @@
+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;");
+}

package/dist/image-optimization/directive.d.ts

@@ -0,0 +1,30 @@
+import { type ImageFormat } from './processor';
+import type { CustomDirective } from '../types';
+/**
+ * Clear the image cache
+ */
+export declare function clearImageCache(): void;
+/**
+ * Create the @image directive
+ */
+export declare function createImageDirective(): CustomDirective;
+/**
+ * The @image directive instance
+ */
+export declare const imageDirective: unknown;
+// ============================================================================
+// Types
+// ============================================================================
+export declare interface ImageDirectiveOptions {
+  width?: number
+  height?: number
+  quality?: number
+  lazy?: boolean
+  formats?: ImageFormat[]
+  widths?: number[]
+  sizes?: string
+  class?: string
+  style?: string
+  priority?: boolean
+  placeholder?: 'blur' | 'color' | 'thumbhash' | 'none'
+}

package/dist/image-optimization/directive.js

@@ -0,0 +1,203 @@
+import { defineDirective } from "../directive-api.js";
+import {
+  DEFAULT_FORMATS,
+  DEFAULT_QUALITY,
+  DEFAULT_WIDTHS,
+  processImage,
+  generateSrcSet,
+  getMimeType,
+  isImageFile,
+  isImageBackendAvailable
+} from "./processor.js";
+const imageCache = new Map;
+export function clearImageCache() {
+  imageCache.clear();
+}
+async function getCachedImage(src, options) {
+  const cacheKey = `${src}:${JSON.stringify(options)}`;
+  if (imageCache.has(cacheKey))
+    return imageCache.get(cacheKey);
+  try {
+    const processed = await processImage(src, options);
+    imageCache.set(cacheKey, processed);
+    return processed;
+  } catch {
+    return null;
+  }
+}
+export function createImageDirective() {
+  return defineDirective({
+    name: "image",
+    hasEndTag: !1,
+    description: "Render an optimized image with responsive variants",
+    transform: async (content, params, context) => {
+      const { src, alt, options } = parseImageArgs(content, params, context);
+      if (!src) {
+        console.warn("@image directive: missing src argument");
+        return "<!-- @image: missing src -->";
+      }
+      const imageOptions = {
+        widths: options.widths || (options.width ? [options.width] : DEFAULT_WIDTHS),
+        formats: options.formats || DEFAULT_FORMATS,
+        quality: options.quality || DEFAULT_QUALITY,
+        placeholder: (options.placeholder === "color" ? "dominant-color" : options.placeholder) || "none"
+      };
+      if (!await isImageBackendAvailable())
+        return renderSimpleImage(src, alt || "", options);
+      const processed = await getCachedImage(src, imageOptions);
+      if (!processed)
+        return renderSimpleImage(src, alt || "", options);
+      return renderOptimizedImage(processed, alt || "", options);
+    }
+  });
+}
+function parseImageArgs(content, params, context) {
+  if (params.src)
+    return {
+      src: String(params.src),
+      alt: String(params.alt || ""),
+      options: params.options || {}
+    };
+  let args = content.trim();
+  if (args.startsWith("@image(") || args.startsWith("("))
+    args = args.replace(/^@image\(/, "").replace(/^\(/, "").replace(/\)$/, "");
+  const parsed = parseArguments(args);
+  let src = parsed[0] || "", alt = parsed[1] || "", options = {};
+  if (src && !src.startsWith("/") && !src.startsWith(".") && !src.startsWith("http")) {
+    const contextValue = context[src];
+    if (typeof contextValue === "string")
+      src = contextValue;
+  }
+  if (parsed[2])
+    try {
+      if (typeof parsed[2] === "string")
+        options = JSON.parse(parsed[2]);
+      else
+        options = parsed[2];
+    } catch {}
+  return { src, alt, options };
+}
+function parseArguments(argsStr) {
+  const args = [];
+  let current = "", inString = !1, stringChar = "", braceDepth = 0, bracketDepth = 0;
+  for (let i = 0;i < argsStr.length; i++) {
+    const char = argsStr[i], prevChar = i > 0 ? argsStr[i - 1] : "";
+    if ((char === '"' || char === "'") && prevChar !== "\\") {
+      if (!inString) {
+        inString = !0;
+        stringChar = char;
+      } else if (char === stringChar) {
+        inString = !1;
+        stringChar = "";
+      } else
+        current += char;
+      continue;
+    }
+    if (!inString) {
+      if (char === "{")
+        braceDepth++;
+      if (char === "}")
+        braceDepth--;
+      if (char === "[")
+        bracketDepth++;
+      if (char === "]")
+        bracketDepth--;
+      if (char === "," && braceDepth === 0 && bracketDepth === 0) {
+        args.push(current.trim());
+        current = "";
+        continue;
+      }
+    }
+    current += char;
+  }
+  if (current.trim())
+    args.push(current.trim());
+  return args;
+}
+function renderSimpleImage(src, alt, options) {
+  const attrs = [`src="${escapeAttr(src)}"`];
+  if (alt)
+    attrs.push(`alt="${escapeAttr(alt)}"`);
+  if (options.width)
+    attrs.push(`width="${options.width}"`);
+  if (options.height)
+    attrs.push(`height="${options.height}"`);
+  if (options.class)
+    attrs.push(`class="${escapeAttr(options.class)}"`);
+  if (options.style)
+    attrs.push(`style="${escapeAttr(options.style)}"`);
+  if (options.lazy !== !1)
+    attrs.push('loading="lazy"');
+  attrs.push('decoding="async"');
+  return `<img ${attrs.join(" ")} />`;
+}
+function renderOptimizedImage(processed, alt, options) {
+  const { variants, placeholder, width, height, aspectRatio } = processed, byFormat = new Map;
+  for (const variant of variants) {
+    const existing = byFormat.get(variant.format) || [];
+    existing.push(variant);
+    byFormat.set(variant.format, existing);
+  }
+  const formatOrder = ["avif", "webp", "jpeg", "png"], sources = [];
+  for (const format of formatOrder) {
+    const formatVariants = byFormat.get(format);
+    if (formatVariants && formatVariants.length > 0) {
+      const srcset = generateSrcSet(formatVariants), mimeType = getMimeType(format), sizes = options.sizes || "100vw";
+      sources.push(`  <source type="${mimeType}" srcset="${escapeAttr(srcset)}" sizes="${escapeAttr(sizes)}" />`);
+    }
+  }
+  const jpegs = byFormat.get("jpeg") || [], fallback = jpegs.length > 0 ? jpegs[Math.floor(jpegs.length / 2)] : variants[Math.floor(variants.length / 2)], imgAttrs = [
+    `src="${fallback?.url || processed.src}"`,
+    `alt="${escapeAttr(alt)}"`
+  ];
+  if (options.width || width)
+    imgAttrs.push(`width="${options.width || width}"`);
+  if (options.height || height)
+    imgAttrs.push(`height="${options.height || height}"`);
+  if (options.class)
+    imgAttrs.push(`class="${escapeAttr(options.class)}"`);
+  const styles = [];
+  if (aspectRatio)
+    styles.push(`aspect-ratio: ${aspectRatio.toFixed(4)}`);
+  if (options.style)
+    styles.push(options.style);
+  if (styles.length > 0)
+    imgAttrs.push(`style="${styles.join("; ")}"`);
+  if (options.lazy !== !1 && !options.priority)
+    imgAttrs.push('loading="lazy"');
+  imgAttrs.push('decoding="async"');
+  if (options.priority)
+    imgAttrs.push('fetchpriority="high"');
+  let html = `<picture>
+`;
+  html += sources.join(`
+`) + `
+`;
+  html += `  <img ${imgAttrs.join(" ")} />
+`;
+  html += "</picture>";
+  if (options.placeholder && placeholder) {
+    const wrapperId = `stx-img-${Math.random().toString(36).slice(2, 8)}`;
+    if (options.placeholder === "blur" || options.placeholder === "thumbhash") {
+      const safeUrl = placeholder.replace(/'/g, "%27").replace(/"/g, "%22");
+      html = `<div id="${wrapperId}" class="stx-image-placeholder" style="background-image: url('${safeUrl}'); background-size: cover;">
+${html}
+</div>`;
+    } else if (options.placeholder === "color") {
+      const safeColor = placeholder.replace(/[^a-zA-Z0-9#(),.\s%-]/g, "");
+      html = `<div id="${wrapperId}" class="stx-image-placeholder" style="background-color: ${safeColor};">
+${html}
+</div>`;
+    }
+  }
+  if (options.priority && fallback) {
+    const preloadMime = getMimeType(fallback.format);
+    html = `<link rel="preload" as="image" href="${escapeAttr(fallback.url)}" type="${preloadMime}" />
+` + html;
+  }
+  return html;
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#039;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+export const imageDirective = createImageDirective();

package/dist/image-optimization/index.d.ts

@@ -0,0 +1,156 @@
+/**
+ * Default image configuration
+ */
+export declare const defaultImageConfig: ImageConfig;
+/**
+ * Image optimization configuration for stx.config.ts
+ */
+export declare interface ImageConfig {
+  enabled?: boolean
+  widths?: number[]
+  formats?: ('webp' | 'avif' | 'jpeg' | 'png')[]
+  quality?: number
+  devOptimize?: boolean
+  cacheDir?: string
+  placeholder?: 'blur' | 'dominant-color' | 'none'
+  inputDirs?: string[]
+  outputDir?: string
+  baseUrl?: string
+}
+/**
+ * STX Image Optimization
+ *
+ * Comprehensive image optimization for improved Core Web Vitals (LCP).
+ *
+ * Features:
+ * - Responsive images with srcset/sizes
+ * - Modern format conversion (WebP, AVIF)
+ * - Lazy loading with blur placeholders
+ * - Build-time optimization
+ * - <Image> component and @image directive
+ *
+ * @module image-optimization
+ *
+ * @example
+ * ```html
+ * <!-- Image Component -->
+ * <Image
+ *   src="/images/hero.jpg"
+ *   alt="Hero image"
+ *   width="1200"
+ *   height="600"
+ *   sizes="(max-width: 768px) 100vw, 50vw"
+ *   priority
+ * />
+ *
+ * <!-- @image Directive -->
+ * @image('/images/photo.jpg', 'A photo', { width: 800, lazy: true })
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Build plugin
+ * import { createImagePlugin } from 'stx/image-optimization'
+ *
+ * const plugin = createImagePlugin({
+ *   formats: ['webp', 'avif', 'jpeg'],
+ *   widths: [320, 640, 1024, 1920],
+ *   quality: 80,
+ * })
+ * ```
+ */
+// ============================================================================
+// Processor Exports
+// ============================================================================
+export {
+  // Core processing
+  processImage,
+  getImageMetadata,
+  isSharpAvailable,
+  isImageBackendAvailable,
+
+  // HTML helpers
+  generateSrcSet,
+  generateSizes,
+  getFallbackVariant,
+  groupVariantsByFormat,
+
+  // Utilities
+  isImageFile,
+  getMimeType,
+  getTotalSize,
+  formatSize,
+
+  // Error class
+  ImageProcessingError,
+
+  // Constants
+  DEFAULT_WIDTHS,
+  DEFAULT_FORMATS,
+  DEFAULT_QUALITY,
+
+  // Types
+  type ImageOptions,
+  type ImageFormat,
+  type ProcessedImage,
+  type ImageVariant,
+  type ImageMetadata,
+} from './processor';
+// ============================================================================
+// Auto-Sibling Discovery
+// ============================================================================
+export {
+  rewriteImagesWithSiblings,
+  type AutoSiblingOptions,
+} from './auto-sibling';
+// ============================================================================
+// Runtime Transform Endpoint
+// ============================================================================
+export {
+  createImageHandler,
+  handleImageRequest,
+  type ImageServeOptions,
+} from './serve';
+// ============================================================================
+// Component Exports
+// ============================================================================
+export {
+  // Rendering
+  renderImageComponent,
+  parseImageComponent,
+  processImageComponents,
+
+  // Types
+  type ImageComponentProps,
+  type ImageRenderContext,
+  type ImageRenderResult,
+} from './component';
+// ============================================================================
+// Directive Exports
+// ============================================================================
+export {
+  // Directive
+  imageDirective,
+  createImageDirective,
+  clearImageCache,
+
+  // Types
+  type ImageDirectiveOptions,
+} from './directive';
+// ============================================================================
+// Build Plugin Exports
+// ============================================================================
+export {
+  // Plugin
+  createImagePlugin,
+
+  // Standalone functions
+  optimizeImage,
+  optimizeDirectory,
+  generateImageManifest,
+  writeImageManifest,
+
+  // Types
+  type ImageBuildOptions,
+  type ImageBuildContext,
+} from './build-plugin';

package/dist/image-optimization/index.js

@@ -0,0 +1,54 @@
+export {
+  processImage,
+  getImageMetadata,
+  isSharpAvailable,
+  isImageBackendAvailable,
+  generateSrcSet,
+  generateSizes,
+  getFallbackVariant,
+  groupVariantsByFormat,
+  isImageFile,
+  getMimeType,
+  getTotalSize,
+  formatSize,
+  ImageProcessingError,
+  DEFAULT_WIDTHS,
+  DEFAULT_FORMATS,
+  DEFAULT_QUALITY
+} from "./processor.js";
+export {
+  rewriteImagesWithSiblings
+} from "./auto-sibling.js";
+export {
+  createImageHandler,
+  handleImageRequest
+} from "./serve.js";
+export {
+  renderImageComponent,
+  parseImageComponent,
+  processImageComponents
+} from "./component.js";
+export {
+  imageDirective,
+  createImageDirective,
+  clearImageCache
+} from "./directive.js";
+export {
+  createImagePlugin,
+  optimizeImage,
+  optimizeDirectory,
+  generateImageManifest,
+  writeImageManifest
+} from "./build-plugin.js";
+export const defaultImageConfig = {
+  enabled: !0,
+  widths: [320, 640, 768, 1024, 1280, 1536, 1920],
+  formats: ["webp", "jpeg"],
+  quality: 80,
+  devOptimize: !1,
+  cacheDir: ".stx/image-cache",
+  placeholder: "none",
+  inputDirs: ["public", "src/assets", "assets"],
+  outputDir: "dist/images",
+  baseUrl: "/images"
+};