svelte-asciiart 0.0.2 → 0.0.4

package/README.md

@@ -61,6 +61,33 @@ Grid mode renders text character-by-character in a precise grid, useful for ASCI
 </style>
 ```
 
+## Exporting
+
+The package provides utilities to export styled SVGs and PNGs:
+
+```ts
+import { exportSvg, exportSvgToPng } from 'svelte-asciiart';
+
+// Export SVG with computed styles embedded as a <style> block
+const svgMarkup = exportSvg(svgElement, {
+  includeBackground: true,
+  backgroundColor: '#f3f4f6'
+});
+
+// Export to PNG (returns data URL by default)
+const pngDataUrl = await exportSvgToPng(svgElement, {
+  includeBackground: true,
+  backgroundColor: '#f3f4f6',
+  scale: 2 // retina scale factor
+});
+
+// Export to PNG as Blob
+const pngBlob = await exportSvgToPng(svgElement, { output: 'blob' });
+```
+
+The `exportSvg` function extracts computed styles from classed elements (e.g., `gridClass`, `frameClass`) and embeds them in the SVG, making it standalone and portable.
+
 ## License
 
 MIT
+

package/dist/AsciiArt.svelte

@@ -22,6 +22,7 @@
 		rows,
 		cols,
 		grid = false,
+		// Width:Height ratio for monospace is typically ~0.6 and getting the exact number dynamically is a hassle.
 		cellAspect = 0.6,
 		gridClass = '',
 		frame = false,
@@ -61,7 +62,6 @@
 	const charAt = (r: number, c: number) => (paddedLines[r] ?? '').charAt(c) || ' ';
 
 	// Character dimensions for monospace font (approximate ratio)
-	// Width:Height ratio for monospace is typically ~0.6
 	const cellHeight = 1;
 	const defaultFontStack =
 		'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default as AsciiArt } from './AsciiArt.svelte';
+export { exportSvg, exportSvgToPng, type ExportSvgOptions, type ExportPngOptions } from './utils.js';

package/dist/index.js

@@ -1,2 +1,3 @@
 // Reexport your entry components here
 export { default as AsciiArt } from './AsciiArt.svelte';
+export { exportSvg, exportSvgToPng } from './utils.js';

package/dist/utils.d.ts

@@ -0,0 +1,25 @@
+export interface ExportSvgOptions {
+    /** Include background color as a rect. Default: false */
+    includeBackground?: boolean;
+    /** Background color to use if includeBackground is true */
+    backgroundColor?: string;
+}
+/**
+ * Export an SVG element with all computed styles embedded as a <style> block.
+ * The SVG must be mounted in the DOM for getComputedStyle to work.
+ */
+export declare function exportSvg(svgEl: SVGSVGElement, options?: ExportSvgOptions): string;
+export interface ExportPngOptions extends ExportSvgOptions {
+    /** Scale factor for the PNG. Default: 2 (for retina) */
+    scale?: number;
+    /** Output format. Default: 'dataUrl' */
+    output?: 'dataUrl' | 'blob';
+}
+/**
+ * Export an SVG element to PNG.
+ * Returns a data URL or Blob depending on options.
+ */
+export declare function exportSvgToPng(svgEl: SVGSVGElement, options: ExportPngOptions & {
+    output: 'blob';
+}): Promise<Blob>;
+export declare function exportSvgToPng(svgEl: SVGSVGElement, options?: ExportPngOptions): Promise<string>;

package/dist/utils.js

@@ -0,0 +1,151 @@
+// SVG style properties relevant for export
+const SVG_STYLE_PROPS = [
+    'fill',
+    'stroke',
+    'stroke-width',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-dasharray',
+    'opacity',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'color',
+    'paint-order'
+];
+/**
+ * Extract computed styles from elements with classes and build CSS rules.
+ * Works on mounted SVG elements only.
+ */
+function extractClassStyles(svgEl) {
+    const styleRules = [];
+    const processedClasses = new Set();
+    // Find all elements with class attribute
+    const elementsWithClasses = svgEl.querySelectorAll('[class]');
+    elementsWithClasses.forEach((el) => {
+        const classAttr = el.getAttribute('class');
+        // Handle multiple classes per element
+        const classes = classAttr.split(/\s+/).filter(Boolean);
+        classes.forEach((className) => {
+            if (processedClasses.has(className))
+                return;
+            processedClasses.add(className);
+            const computed = getComputedStyle(el);
+            const declarations = [];
+            SVG_STYLE_PROPS.forEach((prop) => {
+                const value = computed.getPropertyValue(prop);
+                // Skip empty/default values
+                if (!value || (value === 'none' && prop !== 'fill'))
+                    return;
+                declarations.push(`${prop}: ${value}`);
+            });
+            if (declarations.length) {
+                styleRules.push(`.${className} { ${declarations.join('; ')} }`);
+            }
+        });
+    });
+    return styleRules.join('\n');
+}
+/**
+ * Extract computed styles for text elements (applied via CSS variables or inheritance).
+ */
+function extractTextStyles(svgEl) {
+    const textEl = svgEl.querySelector('text');
+    if (!textEl)
+        return '';
+    const computed = getComputedStyle(textEl);
+    const declarations = [];
+    SVG_STYLE_PROPS.forEach((prop) => {
+        const value = computed.getPropertyValue(prop);
+        if (!value)
+            return;
+        declarations.push(`${prop}: ${value}`);
+    });
+    if (!declarations.length)
+        return '';
+    return `text, tspan { ${declarations.join('; ')} }`;
+}
+/**
+ * Export an SVG element with all computed styles embedded as a <style> block.
+ * The SVG must be mounted in the DOM for getComputedStyle to work.
+ */
+export function exportSvg(svgEl, options = {}) {
+    const clone = svgEl.cloneNode(true);
+    const cssRules = [];
+    // Extract styles from classed elements using original (mounted) element
+    const classStyles = extractClassStyles(svgEl);
+    if (classStyles)
+        cssRules.push(classStyles);
+    // Extract text styles
+    const textStyles = extractTextStyles(svgEl);
+    if (textStyles)
+        cssRules.push(textStyles);
+    // Add background rect if requested
+    if (options.includeBackground && options.backgroundColor) {
+        const viewBox = clone.getAttribute('viewBox');
+        if (viewBox) {
+            const [, , w, h] = viewBox.split(/\s+/).map(Number);
+            const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            bgRect.setAttribute('width', String(w));
+            bgRect.setAttribute('height', String(h));
+            bgRect.setAttribute('fill', options.backgroundColor);
+            clone.insertBefore(bgRect, clone.firstChild);
+        }
+    }
+    // Embed styles in cloned SVG
+    if (cssRules.length) {
+        const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+        style.textContent = cssRules.join('\n');
+        defs.appendChild(style);
+        clone.insertBefore(defs, clone.firstChild);
+    }
+    return new XMLSerializer().serializeToString(clone);
+}
+export async function exportSvgToPng(svgEl, options = {}) {
+    const { scale = 1, output = 'dataUrl', ...svgOptions } = options;
+    // Get the exported SVG with embedded styles
+    const svgString = exportSvg(svgEl, svgOptions);
+    // Parse viewBox to get dimensions
+    const viewBox = svgEl.getAttribute('viewBox');
+    if (!viewBox)
+        throw new Error('SVG must have a viewBox attribute');
+    const [, , vbWidth, vbHeight] = viewBox.split(/\s+/).map(Number);
+    // Use a reasonable base size (e.g., 100px per viewBox unit, then scale)
+    const baseSize = 100;
+    const width = Math.round(vbWidth * baseSize * scale);
+    const height = Math.round(vbHeight * baseSize * scale);
+    // Create canvas
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        throw new Error('Could not get canvas 2d context');
+    // Create image from SVG
+    const img = new Image();
+    const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(svgBlob);
+    return new Promise((resolve, reject) => {
+        img.onload = () => {
+            URL.revokeObjectURL(url);
+            ctx.drawImage(img, 0, 0, width, height);
+            if (output === 'blob') {
+                canvas.toBlob((blob) => {
+                    if (blob)
+                        resolve(blob);
+                    else
+                        reject(new Error('Failed to create PNG blob'));
+                }, 'image/png');
+            }
+            else {
+                resolve(canvas.toDataURL('image/png'));
+            }
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error('Failed to load SVG into image'));
+        };
+        img.src = url;
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-asciiart",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",