zone5 0.0.0 → 1.0.0

package/dist/processor/variants.d.ts

@@ -0,0 +1,13 @@
+import type { BaseConfigType } from '../config.js';
+import type { ProcessorConfig } from './config.js';
+export interface GeneratedVariant {
+    width: number;
+    path: string;
+}
+export declare function generateImageVariants(options: {
+    base: BaseConfigType;
+    processor: ProcessorConfig;
+    sourceFile: string;
+    clear?: boolean;
+    forceOverwrite?: boolean;
+}): Promise<GeneratedVariant[]>;

package/dist/processor/variants.js

@@ -0,0 +1,83 @@
+import { SpanStatusCode, trace } from '@opentelemetry/api';
+import { rm } from 'fs/promises';
+import { join, parse } from 'path';
+import sharp from 'sharp';
+import { ensureDirectoryExists, fileExists, sourceFileHash } from './file.js';
+const tracer = trace.getTracer('zone5-processor-variants');
+const addDebugText = async (img, width, height) => {
+    const svg = `<svg height="100" width="300">
+	  <text x="0" y="50" font-size="50" fill="#fff">${width}×${height}</text>
+	</svg>`;
+    return img.composite([{ input: Buffer.from(svg), gravity: sharp.gravity.center }]);
+};
+export async function generateImageVariants(options) {
+    return tracer.startActiveSpan('zone5.generateImageVariants', async (span) => {
+        try {
+            const { base, processor, sourceFile, clear = false, forceOverwrite = false } = options;
+            // Parse file path components
+            const { name: fileBasename, ext: fileExtension } = parse(sourceFile);
+            // Get source image metadata to check dimensions
+            const sourceImage = sharp(sourceFile);
+            const { width: sourceWidth } = await sourceImage.metadata();
+            // Filter out widths that would be wider than the source image
+            const validWidths = processor.variants.filter((width) => width <= sourceWidth);
+            span.setAttributes({
+                'zone5.sourceFile': sourceFile,
+                'zone5.sourceWidth': sourceWidth,
+                'zone5.validWidthsCount': validWidths.length,
+                'zone5.clear': clear,
+                'zone5.forceOverwrite': forceOverwrite,
+            });
+            // Create cache subdirectory
+            const sourceHash = sourceFileHash(base.root, sourceFile);
+            const cacheSubDir = join(base.cache, `${fileBasename}-${sourceHash}`);
+            if (clear) {
+                await rm(cacheSubDir, { recursive: true, force: true });
+            }
+            await ensureDirectoryExists(cacheSubDir);
+            // Generate variants for each valid width
+            const variants = [];
+            let generatedCount = 0;
+            for (const width of validWidths) {
+                const variantFilename = `${fileBasename}-${width}${fileExtension}`;
+                const variantPath = join(cacheSubDir, variantFilename);
+                // Check if variant already exists and should be overwritten
+                const variantExists = await fileExists(variantPath);
+                if (!variantExists || forceOverwrite) {
+                    let img = sharp(sourceFile).gamma(processor.resize_gamma).resize(width, null, {
+                        fit: 'inside',
+                        kernel: processor.resize_kernel,
+                    });
+                    if (process.env.ZONE5_DEBUG) {
+                        const { width: w, height: h } = await img.metadata();
+                        const scale = w / width;
+                        img = await addDebugText(img, width, Math.ceil(h * scale));
+                    }
+                    await img.toFile(variantPath);
+                    generatedCount++;
+                }
+                variants.push({
+                    width,
+                    path: variantPath,
+                });
+            }
+            span.setAttributes({
+                'zone5.variantsGenerated': generatedCount,
+                'zone5.variantsTotal': variants.length,
+            });
+            span.setStatus({ code: SpanStatusCode.OK });
+            return variants;
+        }
+        catch (error) {
+            span.setStatus({
+                code: SpanStatusCode.ERROR,
+                message: error instanceof Error ? error.message : String(error),
+            });
+            span.recordException(error instanceof Error ? error : new Error(String(error)));
+            throw error;
+        }
+        finally {
+            span.end();
+        }
+    });
+}

package/dist/remark.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'unified';
+/**
+ * Remark plugin to process Zone5 images
+ */
+export declare const remarkZ5Images: Plugin;

package/dist/remark.js

@@ -0,0 +1,268 @@
+import { compile } from 'svast-stringify/dist/main.es.js';
+import { visit } from 'unist-util-visit';
+/**
+ * Convert svast svelteComponent node to HTML using svast-stringify
+ */
+function svelteComponentToHTML(node) {
+    return compile({
+        type: 'root',
+        children: [node],
+    });
+}
+/**
+ * Check if a paragraph is a newline (contains only whitespace)
+ */
+function isNewlineParagraph(node) {
+    return (node.type === 'paragraph' &&
+        node.children.length === 1 &&
+        node.children[0].type === 'text' &&
+        /^\s*$/.test(node.children[0].value));
+}
+/**
+ * Build the expression value for the images property
+ */
+function buildImagesExpression(imageData) {
+    const imageExpressions = imageData.map((img) => `{...${img.key}, properties: {...${img.key}.properties, alt: ${JSON.stringify(img.alt)}, title: ${JSON.stringify(img.title)}}}`);
+    return '[' + imageExpressions.join(',') + ']';
+}
+/**
+ * Create a Zone5 Svelte component node
+ */
+function createZone5Component(imageData, mode) {
+    const properties = [
+        {
+            type: 'svelteProperty',
+            name: 'images',
+            shorthand: 'none',
+            value: [
+                {
+                    type: 'svelteDynamicContent',
+                    expression: {
+                        type: 'svelteExpression',
+                        value: buildImagesExpression(imageData),
+                    },
+                },
+            ],
+            modifiers: [],
+        },
+    ];
+    if (mode) {
+        properties.push({
+            type: 'svelteProperty',
+            name: 'mode',
+            shorthand: 'none',
+            value: [
+                {
+                    type: 'text',
+                    value: mode,
+                },
+            ],
+            modifiers: [],
+        });
+    }
+    return {
+        type: 'svelteComponent',
+        tagName: 'Zone5',
+        properties,
+        selfClosing: true,
+        children: [],
+    };
+}
+/**
+ * Collect image data from Z5 images
+ */
+function collectImageData(images, existingKeys) {
+    return images.map((imageNode) => {
+        const importKey = generateImportKey(imageNode.url, existingKeys);
+        return {
+            key: importKey,
+            alt: imageNode.alt || '',
+            title: imageNode.title || undefined,
+        };
+    });
+}
+/**
+ * Generate a unique import key for an image URL
+ */
+function generateImportKey(url, existingKeys) {
+    const baseName = url
+        .split('/')
+        .pop()
+        ?.replace(/\?z5$/, '')
+        .replace(/\.[^.]*$/, '')
+        .replace(/[^a-zA-Z0-9]/g, '_')
+        .replace(/^(\d)/, '_$1') || 'image';
+    let key = baseName;
+    let counter = 1;
+    while (existingKeys.has(key)) {
+        key = `${baseName}_${counter}`;
+        counter++;
+    }
+    existingKeys.add(key);
+    return key;
+}
+/**
+ * Check if a node is a Zone5 image (ends with ?z5)
+ */
+function isZ5Image(node) {
+    return node.type === 'image' && typeof node.url === 'string' && node.url.endsWith('?z5');
+}
+/**
+ * Check if a paragraph contains only a single Z5 image
+ */
+function isZ5ImageParagraph(node) {
+    return node.type === 'paragraph' && node.children.length === 1 && isZ5Image(node.children[0]);
+}
+/**
+ * Check if a paragraph contains multiple consecutive Z5 images
+ */
+function isMultiZ5ImageParagraph(node) {
+    if (node.type !== 'paragraph')
+        return false;
+    const paragraph = node;
+    const z5Images = paragraph.children.filter((child) => isZ5Image(child));
+    return z5Images.length >= 2;
+}
+/**
+ * Extract the image from a Z5 image paragraph
+ */
+function getImageFromParagraph(node) {
+    if (isZ5ImageParagraph(node) && node.type === 'paragraph') {
+        return node.children[0];
+    }
+    return null;
+}
+/**
+ * Find groups of consecutive Zone5 images
+ */
+function findConsecutiveImageGroups(children) {
+    const groups = [];
+    let currentGroup = [];
+    for (let i = 0; i < children.length; i++) {
+        const node = children[i];
+        if (isZ5ImageParagraph(node)) {
+            currentGroup.push(i);
+        }
+        else if (!isNewlineParagraph(node) && currentGroup.length > 0) {
+            // End of consecutive group (non-newline, non-image node)
+            if (currentGroup.length >= 2) {
+                groups.push([...currentGroup]);
+            }
+            currentGroup = [];
+        }
+    }
+    // Handle group at end of children
+    if (currentGroup.length >= 2) {
+        groups.push(currentGroup);
+    }
+    return groups;
+}
+/**
+ * Create a script element with TypeScript imports
+ */
+function createScriptElement(importMap) {
+    const imports = Object.entries(importMap)
+        .map(([key, url]) => `import ${key} from '${url}';`)
+        .join('\n');
+    // Use string concatenation to prevent the bundler from transforming the import path
+    const zone5Import = 'import { Zone5 } from ' + '"zone5/components"';
+    const lines = ['<script lang="ts">', zone5Import, imports, '</script>'];
+    return {
+        type: 'raw',
+        value: lines.join('\n'),
+    };
+}
+/**
+ * Remark plugin to process Zone5 images
+ */
+export const remarkZ5Images = () => {
+    return (tree, file) => {
+        const rootTree = tree;
+        const importMap = {};
+        const existingKeys = new Set();
+        const fm = file.data.fm;
+        const zone5mode = fm?.zone5mode;
+        // First, collect all Z5 images for the import map
+        visit(rootTree, 'image', (node) => {
+            if (isZ5Image(node)) {
+                const importKey = generateImportKey(node.url, existingKeys);
+                importMap[importKey] = node.url;
+            }
+        });
+        // Reset keys for consistent grouping
+        existingKeys.clear();
+        visit(rootTree, 'root', (node) => {
+            // First, handle multi-image paragraphs (images on consecutive lines without blank lines)
+            for (let i = node.children.length - 1; i >= 0; i--) {
+                const child = node.children[i];
+                if (isMultiZ5ImageParagraph(child) && child.type === 'paragraph') {
+                    const paragraph = child;
+                    const z5Images = paragraph.children.filter((ch) => isZ5Image(ch));
+                    const imageData = collectImageData(z5Images, existingKeys);
+                    const svelteComponent = createZone5Component(imageData, zone5mode);
+                    // Replace the multi-image paragraph with the svelte component
+                    node.children.splice(i, 1, svelteComponent);
+                }
+            }
+            // Then handle consecutive single-image paragraphs
+            const groups = findConsecutiveImageGroups(node.children);
+            // Process groups in reverse order to maintain correct indices
+            for (let i = groups.length - 1; i >= 0; i--) {
+                const group = groups[i];
+                // Collect image nodes from the group
+                const imageNodes = group
+                    .map((index) => getImageFromParagraph(node.children[index]))
+                    .filter((img) => img !== null);
+                const imageData = collectImageData(imageNodes, existingKeys);
+                const svelteComponent = createZone5Component(imageData, zone5mode);
+                // Calculate how many nodes to remove (including newlines)
+                const startIndex = group[0];
+                const endIndex = group[group.length - 1];
+                const removeCount = endIndex - startIndex + 1;
+                // Count newline paragraphs between images
+                let actualRemoveCount = removeCount;
+                for (let j = startIndex + 1; j <= endIndex; j++) {
+                    if (isNewlineParagraph(node.children[j])) {
+                        actualRemoveCount++;
+                    }
+                }
+                node.children.splice(startIndex, actualRemoveCount, svelteComponent);
+            }
+            // Finally, handle remaining single Z5 images
+            for (let i = node.children.length - 1; i >= 0; i--) {
+                const child = node.children[i];
+                if (isZ5ImageParagraph(child) && child.type === 'paragraph') {
+                    const imageNode = child.children[0];
+                    const imageData = collectImageData([imageNode], existingKeys);
+                    const svelteComponent = createZone5Component(imageData, zone5mode);
+                    // Replace the single image paragraph with the svelte component
+                    node.children.splice(i, 1, svelteComponent);
+                }
+            }
+        });
+        // Store import map on the VFile's data
+        if (!file.data) {
+            file.data = {};
+        }
+        // Convert all svelteComponent nodes to HTML using svast-stringify
+        visit(rootTree, 'svelteComponent', (node, index, parent) => {
+            if (parent && typeof index === 'number') {
+                // Convert the svelteComponent node to HTML using svast-stringify
+                const componentHTML = svelteComponentToHTML(node);
+                // Create an HTML node with the stringified component
+                const htmlNode = {
+                    type: 'html',
+                    value: componentHTML,
+                };
+                // Replace the svelteComponent node with the HTML node
+                parent.children[index] = htmlNode;
+            }
+        });
+        // add script tag at beginning of markdown
+        if (Object.keys(importMap).length) {
+            // TODO: use existing script tag if any
+            const scriptNode = createScriptElement(importMap);
+            rootTree.children.unshift(scriptNode);
+        }
+    };
+};

package/dist/stores/index.d.ts

@@ -0,0 +1 @@
+export { type Registry, default as registry } from './registry.svelte.js';

package/dist/stores/index.js

@@ -0,0 +1 @@
+export { default as registry } from './registry.svelte.js';

package/dist/stores/registry.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type Readable } from 'svelte/store';
+import type { ImageData } from '../components/types';
+export type Registry = Readable<{
+    images: ImageData[];
+    current: ImageData | null;
+    currentOffset: number | null;
+    offsets: Map<symbol, {
+        start: number;
+        count: number;
+    }>;
+}> & {
+    register: (componentId: symbol, images: ImageData[]) => void;
+    remove: (componentId: symbol) => void;
+    clear: () => void;
+    setCurrent: (componentId: symbol, offset: number) => void;
+    findCurrent: (id: string) => boolean;
+    next: () => void;
+    prev: () => void;
+    clearCurrent: () => void;
+};
+declare const registry: Registry;
+export default registry;

package/dist/stores/registry.svelte.js

@@ -0,0 +1,100 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { get, writable } from 'svelte/store';
+const store = writable({
+    images: [],
+    current: null,
+    currentOffset: null,
+    offsets: new Map(),
+});
+const mod = (n, m) => ((n % m) + m) % m;
+const registry = {
+    subscribe: store.subscribe,
+    register: (componentId, images) => {
+        store.update((previous) => {
+            const offset = previous.offsets.get(componentId);
+            const start = offset?.start ?? previous.images.length;
+            const deleteCount = offset?.count ?? 0;
+            previous.offsets.set(componentId, { start, count: images.length });
+            return {
+                ...previous,
+                images: previous.images.toSpliced(start, deleteCount, ...images),
+                current: null,
+            };
+        });
+    },
+    remove: (componentId) => {
+        store.update((previous) => {
+            const offset = previous.offsets.get(componentId);
+            if (!offset) {
+                return previous;
+            }
+            return {
+                ...previous,
+                images: previous.images.toSpliced(offset.start, offset.count),
+                current: null,
+            };
+        });
+    },
+    clear: () => {
+        store.set({ images: [], current: null, currentOffset: null, offsets: new SvelteMap() });
+    },
+    setCurrent: (componentId, offset) => {
+        const registered = get(store).offsets.get(componentId);
+        if (!registered) {
+            throw new Error(`no component registered under given key.`);
+        }
+        if (offset < 0 || offset >= registered.count) {
+            throw new Error(`offset not within registered image count for component`);
+        }
+        const newCurrentIndex = registered.start + offset;
+        store.update((current) => ({
+            ...current,
+            current: current.images[newCurrentIndex],
+            currentOffset: newCurrentIndex,
+        }));
+    },
+    findCurrent: (id) => {
+        const value = get(store);
+        const index = value.images.findIndex((img) => img.id === id);
+        if (index >= 0 && value.currentOffset !== index) {
+            store.update((current) => ({
+                ...current,
+                current: current.images[index],
+                currentOffset: index,
+            }));
+        }
+        return index >= 0;
+    },
+    next: () => {
+        const current = get(store);
+        if (current.currentOffset === null) {
+            throw new Error('can not call next with not current image');
+        }
+        const newCurrentIndex = mod(current.currentOffset + 1, current.images.length);
+        store.update((current) => ({
+            ...current,
+            current: current.images[newCurrentIndex],
+            currentOffset: newCurrentIndex,
+        }));
+    },
+    prev: () => {
+        const current = get(store);
+        if (current.currentOffset === null) {
+            throw new Error('can not call prev with not current image');
+        }
+        const newCurrentIndex = mod(current.currentOffset - 1, current.images.length);
+        store.update((current) => ({
+            ...current,
+            current: current.images[newCurrentIndex],
+            currentOffset: newCurrentIndex,
+        }));
+    },
+    clearCurrent: () => {
+        store.update((current) => ({
+            ...current,
+            current: null,
+            currentOffset: null,
+        }));
+    },
+};
+export default registry;

package/dist/test-setup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Test setup file for Vitest
+ * Configures the environment for component testing
+ */
+declare class ResizeObserverMock {
+    observe(): void;
+    unobserve(): void;
+    disconnect(): void;
+}

package/dist/test-setup.js

@@ -0,0 +1,25 @@
+"use strict";
+/**
+ * Test setup file for Vitest
+ * Configures the environment for component testing
+ */
+// Mock ResizeObserver for jsdom
+class ResizeObserverMock {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+}
+// Set up DOM environment
+if (typeof global !== 'undefined') {
+    global.window = global.window || {};
+    global.ResizeObserver = ResizeObserverMock;
+}
+// Ensure we're in a browser-like environment
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    // Add ResizeObserver polyfill for jsdom
+    if (!window.ResizeObserver) {
+        window.ResizeObserver = ResizeObserverMock;
+    }
+    // Browser environment is ready
+    console.log('Test environment: Browser (jsdom)');
+}

package/dist/vite.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function zone5(cwd?: string): Plugin;