@ascii-web/client 0.0.0-stage → 0.9.0

package/dist/ascii-img.d.ts

@@ -0,0 +1,11 @@
+export declare class AsciiImg extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private loadImage;
+    private measureCharWidth;
+    private renderAscii;
+}

package/dist/ascii-img.js

@@ -0,0 +1,146 @@
+import init, { ascii_art } from '@ascii-web/wasm/web';
+let wasmReady = null;
+function ensureInit() {
+    if (!wasmReady)
+        wasmReady = init();
+    return wasmReady;
+}
+const DEFAULT_MIN_COLS = 80;
+const DEFAULT_MAX_COLS = 300;
+const STYLES = `
+  :host {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    contain: inline-size;
+  }
+  pre {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    white-space: pre;
+    max-width: 100%;
+    font-family: var(--ascii-font-family, monospace);
+    font-size: var(--ascii-font-size, 8px);
+    line-height: var(--ascii-line-height, 1);
+    color: var(--ascii-color, white);
+    background-color: var(--ascii-bg, black);
+  }
+`;
+export class AsciiImg extends HTMLElement {
+    static observedAttributes = ['src', 'alt', 'min-cols', 'max-cols'];
+    #shadow;
+    #pre;
+    #resizeObserver;
+    #imageData = null;
+    #imageNaturalWidth = 0;
+    #imageNaturalHeight = 0;
+    #minCols = DEFAULT_MIN_COLS;
+    #maxCols = DEFAULT_MAX_COLS;
+    #lastRenderedCols = 0;
+    constructor() {
+        super();
+        this.#shadow = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = STYLES;
+        this.#shadow.appendChild(style);
+        this.#pre = document.createElement('pre');
+        this.#pre.setAttribute('aria-hidden', 'true');
+        this.#shadow.appendChild(this.#pre);
+        this.setAttribute('role', 'img');
+        this.#resizeObserver = new ResizeObserver(() => this.renderAscii());
+    }
+    connectedCallback() {
+        this.#resizeObserver.observe(this);
+        this.loadImage();
+    }
+    disconnectedCallback() {
+        this.#resizeObserver.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case 'src':
+                this.#lastRenderedCols = 0;
+                this.loadImage();
+                break;
+            case 'alt':
+                this.setAttribute('aria-label', newValue ?? '');
+                break;
+            case 'min-cols': {
+                const parsed = parseInt(newValue ?? '', 10);
+                this.#minCols = isNaN(parsed) ? DEFAULT_MIN_COLS : parsed;
+                this.renderAscii();
+                break;
+            }
+            case 'max-cols': {
+                const parsed = parseInt(newValue ?? '', 10);
+                this.#maxCols = isNaN(parsed) ? DEFAULT_MAX_COLS : parsed;
+                this.renderAscii();
+                break;
+            }
+        }
+    }
+    loadImage() {
+        const src = this.getAttribute('src');
+        if (!src)
+            return;
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.src = src;
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            this.#imageNaturalWidth = img.naturalWidth;
+            this.#imageNaturalHeight = img.naturalHeight;
+            canvas.width = this.#imageNaturalWidth;
+            canvas.height = this.#imageNaturalHeight;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                console.error('Could not get canvas 2d context');
+                return;
+            }
+            ctx.drawImage(img, 0, 0);
+            this.#imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            this.renderAscii();
+        };
+        img.onerror = () => {
+            console.error(`Failed to load image: ${src}`);
+        };
+    }
+    measureCharWidth() {
+        const span = document.createElement('span');
+        span.style.font = getComputedStyle(this.#pre).font;
+        span.style.visibility = 'hidden';
+        span.style.position = 'absolute';
+        span.textContent = 'M';
+        document.body.appendChild(span);
+        const width = span.getBoundingClientRect().width;
+        document.body.removeChild(span);
+        return width;
+    }
+    async renderAscii() {
+        if (!this.#imageData || !this.#imageNaturalHeight || !this.#imageNaturalWidth)
+            return;
+        await ensureInit();
+        this.#pre.style.fontSize = '';
+        const baseCharWidth = this.measureCharWidth();
+        if (baseCharWidth === 0)
+            return;
+        const containerWidth = this.clientWidth;
+        const rawCols = Math.floor(containerWidth / baseCharWidth);
+        const cols = Math.min(this.#maxCols, Math.max(this.#minCols, rawCols));
+        if (rawCols < this.#minCols) {
+            const baseFontSize = parseFloat(getComputedStyle(this.#pre).fontSize);
+            this.#pre.style.fontSize = `${baseFontSize * (containerWidth / (cols * baseCharWidth))}px`;
+        }
+        if (cols === this.#lastRenderedCols)
+            return;
+        this.#lastRenderedCols = cols;
+        const aspectRatio = this.#imageNaturalWidth / this.#imageNaturalHeight;
+        const rows = Math.round((cols / aspectRatio) * 0.5);
+        const art = ascii_art(new Uint8Array(this.#imageData.data.buffer), this.#imageNaturalWidth, this.#imageNaturalHeight, cols, rows);
+        this.#pre.textContent = art;
+    }
+}
+customElements.define('ascii-img', AsciiImg);

package/package.json

@@ -1,6 +1,41 @@
 {
   "name": "@ascii-web/client",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.9.0",
+  "description": "A web component that renders images as ASCII art using WASM",
+  "author": "Raffaele Cataldo",
+  "type": "module",
+  "main": "./dist/ascii-img.js",
+  "types": "./dist/ascii-img.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/ascii-img.js",
+      "types": "./dist/ascii-img.d.ts"
+    }
+  },
+  "files": [
+    "dist/"
+  ],
+  "dependencies": {
+    "@ascii-web/wasm": "0.9.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0"
+  },
+  "sideEffects": true,
+  "keywords": [
+    "ascii",
+    "art",
+    "image",
+    "wasm",
+    "web-component"
+  ],
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/farmeroy/ascii-web.git",
+    "directory": "packages/client"
+  },
+  "scripts": {
+    "build": "tsc"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.