@ecopages/image-processor 0.2.0-beta.9 → 0.2.0-rc.1

package/src/image-renderer.js

@@ -1,222 +1,224 @@
-import { DEFAULT_LAYOUT } from "./constants.js";
-import { ImageUtils } from "./image-utils.js";
-class LayoutAttributesManager {
-  static shouldIncludeWidthHeight(layout) {
-    return layout === "fixed";
-  }
-  static filterDimensionAttributes(props) {
-    const layout = props.layout || "constrained";
-    if (!LayoutAttributesManager.shouldIncludeWidthHeight(layout)) {
-      return {};
-    }
-    return {
-      ...props.width && { width: props.width },
-      ...props.height && { height: props.height }
-    };
-  }
-  static getEffectiveDimensions(props, variants) {
-    const mainVariant = variants?.[0];
-    const layout = props.layout || DEFAULT_LAYOUT;
-    if (layout === "constrained" && props.width && !props.height) {
-      return { width: props.width };
-    }
-    const effectiveWidth = props.width || mainVariant?.width;
-    let effectiveHeight = props.height || mainVariant?.height;
-    if (props.aspectRatio && effectiveWidth) {
-      const [aspectWidth, aspectHeight] = props.aspectRatio.split("/").map(Number);
-      effectiveHeight = Math.round(effectiveWidth * aspectHeight / aspectWidth);
-    }
-    return { width: effectiveWidth, height: effectiveHeight };
-  }
+/**
+ * ImageRenderer
+ * @module
+ */
+import { DEFAULT_LAYOUT } from './constants.js';
+import { ImageUtils } from './image-utils.js';
+export class LayoutAttributesManager {
+    static shouldIncludeWidthHeight(layout) {
+        return layout === 'fixed';
+    }
+    static filterDimensionAttributes(props) {
+        const layout = props.layout || 'constrained';
+        if (!LayoutAttributesManager.shouldIncludeWidthHeight(layout)) {
+            return {};
+        }
+        return {
+            ...(props.width && { width: props.width }),
+            ...(props.height && { height: props.height }),
+        };
+    }
+    static getEffectiveDimensions(props, variants) {
+        const mainVariant = variants?.[0];
+        const layout = props.layout || DEFAULT_LAYOUT;
+        if (layout === 'constrained' && props.width && !props.height) {
+            return { width: props.width };
+        }
+        const effectiveWidth = props.width || mainVariant?.width;
+        let effectiveHeight = props.height || mainVariant?.height;
+        if (props.aspectRatio && effectiveWidth) {
+            const [aspectWidth, aspectHeight] = props.aspectRatio.split('/').map(Number);
+            effectiveHeight = Math.round((effectiveWidth * aspectHeight) / aspectWidth);
+        }
+        return { width: effectiveWidth, height: effectiveHeight };
+    }
 }
-class ImageRenderer {
-  originalProps;
-  internalProps = [
-    "attributes",
-    "variants",
-    "layout",
-    "staticVariant",
-    "aspectRatio",
-    "unstyled",
-    "priority",
-    "width",
-    "height",
-    "cacheKey"
-  ];
-  generateAttributes(props) {
-    this.originalProps = props;
-    const collected = this.collectAttributes(props);
-    if (!collected) return null;
-    const { styles, width, height, ...rest } = collected;
-    const dimensions = LayoutAttributesManager.filterDimensionAttributes({
-      width,
-      height,
-      layout: props.layout
-    });
-    const htmlAttributes = this.getHtmlAttributes(props);
-    const generatedStyles = styles ? this.generateStyleString(styles) : "";
-    const userStyles = props.style || "";
-    return {
-      ...htmlAttributes,
-      ...rest,
-      ...dimensions,
-      style: userStyles ? `${generatedStyles};${userStyles}` : generatedStyles
-    };
-  }
-  getHtmlAttributes(props) {
-    return Object.fromEntries(
-      Object.entries(props).filter(
-        ([key]) => !this.internalProps.includes(key) && key !== "attributes" && key !== "variants"
-      )
-    );
-  }
-  generateAttributesJsx(props) {
-    this.originalProps = props;
-    const collected = this.collectAttributes(props);
-    if (!collected) return null;
-    const { styles, fetchpriority, loading, decoding, src, srcset, sizes, width, height } = collected;
-    const dimensions = LayoutAttributesManager.filterDimensionAttributes({
-      width,
-      height,
-      layout: props.layout
-    });
-    const validHtmlAttributes = Object.fromEntries(
-      Object.entries(props).filter(([key]) => !this.internalProps.includes(key))
-    );
-    const generatedStyles = styles ? this.createCamelCaseKeysOnStyle(styles) : {};
-    const userStyles = typeof props.style === "object" ? props.style : {};
-    return {
-      fetchPriority: fetchpriority,
-      loading,
-      decoding,
-      src,
-      srcSet: srcset,
-      sizes,
-      ...dimensions,
-      ...validHtmlAttributes,
-      style: { ...generatedStyles, ...userStyles }
-    };
-  }
-  renderToString({ attributes, variants, ...rest }) {
-    this.originalProps = { attributes, variants, ...rest };
-    const derivedAttributes = this.generateAttributes(this.originalProps);
-    if (!derivedAttributes) return "";
-    const stringifiedAttributes = this.stringifyAttributes(derivedAttributes);
-    return `<img ${stringifiedAttributes} />`;
-  }
-  collectAttributes(props) {
-    const { variants, priority, layout = DEFAULT_LAYOUT, unstyled, staticVariant } = props;
-    const priorityAttributes = this.getPriorityAttributes(priority);
-    if (!variants || variants.length === 0) {
-      return this.handleNoVariants(props, priorityAttributes);
-    }
-    const mainVariant = this.getMainVariant(variants, staticVariant);
-    if (!mainVariant) return null;
-    const dimensions = this.calculateEffectiveDimensions(props, mainVariant);
-    const styles = this.calculateStyles({
-      dimensions,
-      layout,
-      attributes: props.attributes,
-      unstyled
-    });
-    const imageAttributes = this.buildImageAttributes(mainVariant, dimensions, props, priorityAttributes, styles);
-    return imageAttributes;
-  }
-  getPriorityAttributes(priority) {
-    return {
-      loading: priority ? "eager" : "lazy",
-      fetchpriority: priority ? "high" : "auto",
-      decoding: priority ? "auto" : "async"
-    };
-  }
-  getMainVariant(variants, staticVariant) {
-    if (staticVariant) {
-      return variants.find((v) => v.label === staticVariant) || null;
-    }
-    return variants.sort((a, b) => b.width - a.width)[0] || null;
-  }
-  calculateEffectiveDimensions(props, variant) {
-    return LayoutAttributesManager.getEffectiveDimensions(props, [variant]);
-  }
-  calculateStyles({
-    dimensions,
-    layout,
-    unstyled,
-    attributes
-  }) {
-    if (unstyled) return [];
-    return ImageUtils.generateLayoutStyles({
-      ...dimensions,
-      layout,
-      aspectRatio: this.originalProps?.aspectRatio,
-      attributes
-    });
-  }
-  buildImageAttributes(variant, dimensions, props, priorityAttributes, styles) {
-    const { staticVariant, attributes } = props;
-    const useResponsiveImage = !staticVariant;
-    return {
-      ...dimensions,
-      ...priorityAttributes,
-      src: variant.src,
-      ...useResponsiveImage ? {
-        srcset: attributes.srcset,
-        sizes: attributes.sizes
-      } : {},
-      styles
-    };
-  }
-  handleNoVariants(props, priorityAttributes) {
-    const { attributes, width, height, layout, unstyled } = props;
-    const dimensions = {
-      width,
-      height
-    };
-    const styles = this.calculateStyles({
-      dimensions,
-      layout: layout || DEFAULT_LAYOUT,
-      attributes,
-      unstyled
-    });
-    return {
-      ...priorityAttributes,
-      ...dimensions,
-      src: attributes.src,
-      styles
-    };
-  }
-  stringifyAttributes(attributes) {
-    const attributePairs = [];
-    for (const [key, value] of Object.entries(attributes)) {
-      if (value == null || value === "") continue;
-      if (typeof value === "boolean") {
-        if (value) attributePairs.push(key);
-      } else {
-        attributePairs.push(`${key}="${value}"`);
-      }
-    }
-    return attributePairs.join(" ");
-  }
-  generateStyleString(styles) {
-    const styleMap = /* @__PURE__ */ new Map();
-    for (const [key, value] of styles) {
-      const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-      styleMap.set(camelKey, value);
-    }
-    return Array.from(styleMap.entries()).map(([key, value]) => {
-      const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-      return `${cssKey}:${value}`;
-    }).join(";");
-  }
-  createCamelCaseKeysOnStyle(styles) {
-    return Object.fromEntries(
-      styles.map(([key, value]) => [key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()), value])
-    );
-  }
+/**
+ * ImageRenderer
+ * This class is responsible for generating the attributes for the image element
+ */
+export class ImageRenderer {
+    originalProps;
+    internalProps = [
+        'attributes',
+        'variants',
+        'layout',
+        'staticVariant',
+        'aspectRatio',
+        'unstyled',
+        'priority',
+        'width',
+        'height',
+        'cacheKey',
+    ];
+    generateAttributes(props) {
+        this.originalProps = props;
+        const collected = this.collectAttributes(props);
+        if (!collected)
+            return null;
+        const { styles, width, height, ...rest } = collected;
+        const dimensions = LayoutAttributesManager.filterDimensionAttributes({
+            width,
+            height,
+            layout: props.layout,
+        });
+        const htmlAttributes = this.getHtmlAttributes(props);
+        const generatedStyles = styles ? this.generateStyleString(styles) : '';
+        const userStyles = props.style || '';
+        return {
+            ...htmlAttributes,
+            ...rest,
+            ...dimensions,
+            style: userStyles ? `${generatedStyles};${userStyles}` : generatedStyles,
+        };
+    }
+    getHtmlAttributes(props) {
+        return Object.fromEntries(Object.entries(props).filter(([key]) => !this.internalProps.includes(key) && key !== 'attributes' && key !== 'variants'));
+    }
+    generateAttributesJsx(props) {
+        this.originalProps = props;
+        const collected = this.collectAttributes(props);
+        if (!collected)
+            return null;
+        const { styles, fetchpriority, loading, decoding, src, srcset, sizes, width, height } = collected;
+        const dimensions = LayoutAttributesManager.filterDimensionAttributes({
+            width,
+            height,
+            layout: props.layout,
+        });
+        const validHtmlAttributes = Object.fromEntries(Object.entries(props).filter(([key]) => !this.internalProps.includes(key)));
+        const generatedStyles = styles ? this.createCamelCaseKeysOnStyle(styles) : {};
+        const userStyles = typeof props.style === 'object' ? props.style : {};
+        return {
+            fetchPriority: fetchpriority,
+            loading,
+            decoding,
+            src,
+            srcSet: srcset,
+            sizes,
+            ...dimensions,
+            ...validHtmlAttributes,
+            style: { ...generatedStyles, ...userStyles },
+        };
+    }
+    renderToString({ attributes, variants, ...rest }) {
+        this.originalProps = { attributes, variants, ...rest };
+        const derivedAttributes = this.generateAttributes(this.originalProps);
+        if (!derivedAttributes)
+            return '';
+        const stringifiedAttributes = this.stringifyAttributes(derivedAttributes);
+        return `<img ${stringifiedAttributes} />`;
+    }
+    collectAttributes(props) {
+        const { variants, priority, layout = DEFAULT_LAYOUT, unstyled, staticVariant } = props;
+        const priorityAttributes = this.getPriorityAttributes(priority);
+        if (!variants || variants.length === 0) {
+            return this.handleNoVariants(props, priorityAttributes);
+        }
+        const mainVariant = this.getMainVariant(variants, staticVariant);
+        if (!mainVariant)
+            return null;
+        const dimensions = this.calculateEffectiveDimensions(props, mainVariant);
+        const styles = this.calculateStyles({
+            dimensions,
+            layout,
+            attributes: props.attributes,
+            unstyled,
+        });
+        const imageAttributes = this.buildImageAttributes(mainVariant, dimensions, props, priorityAttributes, styles);
+        return imageAttributes;
+    }
+    getPriorityAttributes(priority) {
+        return {
+            loading: priority ? 'eager' : 'lazy',
+            fetchpriority: priority ? 'high' : 'auto',
+            decoding: priority ? 'auto' : 'async',
+        };
+    }
+    getMainVariant(variants, staticVariant) {
+        if (staticVariant) {
+            return variants.find((v) => v.label === staticVariant) || null;
+        }
+        return variants.sort((a, b) => b.width - a.width)[0] || null;
+    }
+    calculateEffectiveDimensions(props, variant) {
+        return LayoutAttributesManager.getEffectiveDimensions(props, [variant]);
+    }
+    calculateStyles({ dimensions, layout, unstyled, attributes, }) {
+        if (unstyled)
+            return [];
+        return ImageUtils.generateLayoutStyles({
+            ...dimensions,
+            layout,
+            aspectRatio: this.originalProps?.aspectRatio,
+            attributes,
+        });
+    }
+    buildImageAttributes(variant, dimensions, props, priorityAttributes, styles) {
+        const { staticVariant, attributes } = props;
+        const useResponsiveImage = !staticVariant;
+        return {
+            ...dimensions,
+            ...priorityAttributes,
+            src: variant.src,
+            ...(useResponsiveImage
+                ? {
+                    srcset: attributes.srcset,
+                    sizes: attributes.sizes,
+                }
+                : {}),
+            styles,
+        };
+    }
+    handleNoVariants(props, priorityAttributes) {
+        const { attributes, width, height, layout, unstyled } = props;
+        const dimensions = {
+            width,
+            height,
+        };
+        const styles = this.calculateStyles({
+            dimensions,
+            layout: layout || DEFAULT_LAYOUT,
+            attributes,
+            unstyled,
+        });
+        return {
+            ...priorityAttributes,
+            ...dimensions,
+            src: attributes.src,
+            styles,
+        };
+    }
+    stringifyAttributes(attributes) {
+        const attributePairs = [];
+        for (const [key, value] of Object.entries(attributes)) {
+            if (value == null || value === '')
+                continue;
+            if (typeof value === 'boolean') {
+                if (value)
+                    attributePairs.push(key);
+            }
+            else {
+                attributePairs.push(`${key}="${value}"`);
+            }
+        }
+        return attributePairs.join(' ');
+    }
+    generateStyleString(styles) {
+        const styleMap = new Map();
+        for (const [key, value] of styles) {
+            const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+            styleMap.set(camelKey, value);
+        }
+        return Array.from(styleMap.entries())
+            .map(([key, value]) => {
+            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            return `${cssKey}:${value}`;
+        })
+            .join(';');
+    }
+    createCamelCaseKeysOnStyle(styles) {
+        return Object.fromEntries(styles.map(([key, value]) => [key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()), value]));
+    }
 }
-const renderer = new ImageRenderer();
-export {
-  ImageRenderer,
-  LayoutAttributesManager,
-  renderer
-};
+export const renderer = new ImageRenderer();

package/src/image-runtime-state.d.ts

@@ -0,0 +1,20 @@
+import type { ImageSpecifications } from './types.js';
+export type ImageMap = Record<string, ImageSpecifications>;
+export type ImageProcessorDiskConfig = {
+    sourceDir: string;
+    outputDir: string;
+    acceptedFormats?: string[];
+};
+/**
+ * Parses export bindings from the generated image virtual-module source file.
+ */
+export declare function parseVirtualModuleExports(content: string): Record<string, ImageSpecifications> | null;
+export declare function getSourceImagePaths(resolvedConfig: ImageProcessorDiskConfig): Promise<string[]>;
+/**
+ * Restores processed image state from generated dist artifacts when every source
+ * image has a matching virtual-module export and output files on disk.
+ */
+export declare function loadProcessedImagesFromDisk(options: {
+    resolvedConfig: ImageProcessorDiskConfig;
+    runtimeVirtualModulePath: string;
+}): Promise<ImageMap | null>;

package/src/image-runtime-state.js

@@ -0,0 +1,59 @@
+import path from 'node:path';
+import { fileSystem } from '@ecopages/file-system';
+import { anyCaseToCamelCase } from './utils.js';
+/**
+ * Parses export bindings from the generated image virtual-module source file.
+ */
+export function parseVirtualModuleExports(content) {
+    const exports = {};
+    const pattern = /export const (\w+) = ([\s\S]*?) as const;/g;
+    let match;
+    while ((match = pattern.exec(content)) !== null) {
+        try {
+            exports[match[1]] = JSON.parse(match[2]);
+        }
+        catch {
+            return null;
+        }
+    }
+    return exports;
+}
+export async function getSourceImagePaths(resolvedConfig) {
+    const acceptedFormats = resolvedConfig.acceptedFormats ?? ['jpg', 'jpeg', 'png', 'webp'];
+    return fileSystem.glob([`${resolvedConfig.sourceDir}/**/*.{${acceptedFormats.join(',')}}`]);
+}
+function getGeneratedOutputPath(outputDir, src) {
+    return path.join(outputDir, path.basename(src));
+}
+/**
+ * Restores processed image state from generated dist artifacts when every source
+ * image has a matching virtual-module export and output files on disk.
+ */
+export async function loadProcessedImagesFromDisk(options) {
+    const sourceImages = await getSourceImagePaths(options.resolvedConfig);
+    if (sourceImages.length === 0) {
+        return {};
+    }
+    if (!fileSystem.exists(options.runtimeVirtualModulePath)) {
+        return null;
+    }
+    const exportsByName = parseVirtualModuleExports(fileSystem.readFileSync(options.runtimeVirtualModulePath));
+    if (!exportsByName) {
+        return null;
+    }
+    const imageMap = {};
+    for (const file of sourceImages) {
+        const basename = path.basename(file);
+        const exportName = anyCaseToCamelCase(basename);
+        const spec = exportsByName[exportName];
+        if (!spec) {
+            return null;
+        }
+        const outputPaths = [spec.attributes.src, ...spec.variants.map((variant) => variant.src)];
+        if (!outputPaths.every((src) => fileSystem.exists(getGeneratedOutputPath(options.resolvedConfig.outputDir, src)))) {
+            return null;
+        }
+        imageMap[basename] = spec;
+    }
+    return imageMap;
+}

package/src/image-types.d.ts

@@ -0,0 +1,3 @@
+export type { ImageAttributes, ImageSize, ImageSpecifications, ImageVariant } from './types.js';
+
+declare module 'ecopages:images' {}