svelte-asciiart 0.0.1 → 0.0.3

package/README.md

@@ -27,28 +27,26 @@ npm install svelte-asciiart
 
 ## Props
 
-| Prop                | Type                                                             | Default              | Description                                      |
-| ------------------- | ---------------------------------------------------------------- | -------------------- | ------------------------------------------------ |
-| `text`              | `string`                                                         | required             | The ASCII art text to render                     |
-| `rows`              | `number`                                                         | auto                 | Number of rows (derived from text if not set)    |
-| `cols`              | `number`                                                         | auto                 | Number of columns (derived from text if not set) |
-| `grid`              | `boolean`                                                        | `false`              | Enable grid mode with cell-based layout          |
-| `cellAspect`        | `number`                                                         | `0.6`                | Width/height ratio of grid cells                 |
-| `measureCellAspect` | `boolean`                                                        | `false`              | Measure actual font aspect ratio                 |
-| `gridClass`         | `string`                                                         | `''`                 | CSS class for grid lines                         |
-| `gridStyle`         | `string`                                                         | `''`                 | Inline styles for grid lines                     |
-| `fontFamily`        | `string`                                                         | `'Courier New', ...` | Font family for text                             |
-| `frame`             | `boolean`                                                        | `false`              | Show frame around content (grid mode only)       |
-| `frameMargin`       | `number \| [number, number] \| [number, number, number, number]` | `0`                  | Margin around frame in grid cells                |
-| `frameClass`        | `string`                                                         | `''`                 | CSS class for frame                              |
-| `frameStyle`        | `string`                                                         | `''`                 | Inline styles for frame                          |
+| Prop         | Type                                                             | Default  | Description                                                   |
+| ------------ | ---------------------------------------------------------------- | -------- | ------------------------------------------------------------- |
+| `text`       | `string`                                                         | required | The ASCII art text to render                                  |
+| `rows`       | `number`                                                         | auto     | Frame rows (content can overflow into the margin)             |
+| `cols`       | `number`                                                         | auto     | Frame columns (content can overflow into the margin)          |
+| `grid`       | `boolean`                                                        | `false`  | Draw grid lines for the full viewBox (frame + margin)         |
+| `cellAspect` | `number`                                                         | `0.6`    | Character cell width/height ratio                             |
+| `gridClass`  | `string`                                                         | `''`     | CSS class for the grid lines `<path>`                         |
+| `frame`      | `boolean`                                                        | `false`  | Draw a frame `<rect>` around the frame area                   |
+| `margin`     | `number \| [number, number] \| [number, number, number, number]` | `0`      | Margin around the frame in grid cells (top/right/bottom/left) |
+| `frameClass` | `string`                                                         | `''`     | CSS class for the frame `<rect>`                              |
+| `svg`        | `SVGSVGElement \| null`                                          | bindable | Optionally bind the underlying `<svg>` element                |
+| `...rest`    | `SVGAttributes<SVGSVGElement>`                                   | -        | All other SVG attributes are forwarded to the `<svg>` element |
 
 ## Grid Mode
 
 Grid mode renders text character-by-character in a precise grid, useful for ASCII art that needs exact alignment:
 
 ```svelte
-<AsciiArt {text} grid frame frameMargin={[1, 2]} gridClass="ascii-grid" frameClass="ascii-frame" />
+<AsciiArt {text} grid frame margin={[1, 2]} gridClass="ascii-grid" frameClass="ascii-frame" />
 
 <style>
 	.ascii-grid {
@@ -63,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 = 2, 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.1",
+	"version": "0.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -53,6 +53,18 @@
 		"vitest-browser-svelte": "^2.0.1"
 	},
 	"keywords": [
-		"svelte"
-	]
+		"svelte",
+		"ascii",
+		"art",
+		"ascii-art"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/xl0/svelte-asciiart.git",
+		"directory": "packages/svelte-asciiart"
+	},
+	"bugs": {
+		"url": "https://github.com/xl0/svelte-asciiart/issues"
+	},
+	"homepage": "https://github.com/xl0/svelte-asciiart#readme"
 }