@think-grid-labs/opti-assets 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export interface UseImageOptimizerResult {
+    optimizedUrl: string | null;
+    loading: boolean;
+    error: string | null;
+}
+export declare const useImageOptimizer: (src: string | Blob, quality?: number) => UseImageOptimizerResult;

package/dist/index.js

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+// Dynamic import for the Wasm module
+const loadWasm = async () => {
+    // We import from the local pkg directory (built via wasm-pack)
+    return import('../pkg/opti_assets_browser.js');
+};
+export const useImageOptimizer = (src, quality = 80) => {
+    const [state, setState] = useState({
+        optimizedUrl: null,
+        loading: false,
+        error: null,
+    });
+    useEffect(() => {
+        let mounted = true;
+        const process = async () => {
+            if (!src)
+                return;
+            setState(prev => ({ ...prev, loading: true, error: null }));
+            try {
+                // 1. Get Blob
+                let blob;
+                if (typeof src === 'string') {
+                    const resp = await fetch(src);
+                    if (!resp.ok)
+                        throw new Error(`Failed to fetch image: ${resp.statusText}`);
+                    blob = await resp.blob();
+                }
+                else {
+                    blob = src;
+                }
+                // 2. Load bytes
+                const buffer = await blob.arrayBuffer();
+                const bytes = new Uint8Array(buffer);
+                // 3. Wasm Optimize
+                const wasm = await loadWasm();
+                const optimizedBytes = wasm.optimize_image_sync(bytes, quality);
+                // 4. Create Object URL
+                const optimizedBlob = new Blob([optimizedBytes], { type: 'image/webp' });
+                const url = URL.createObjectURL(optimizedBlob);
+                if (mounted) {
+                    setState({
+                        optimizedUrl: url,
+                        loading: false,
+                        error: null
+                    });
+                }
+            }
+            catch (err) {
+                if (mounted) {
+                    setState(prev => ({
+                        ...prev,
+                        loading: false,
+                        error: err.message || 'Unknown error'
+                    }));
+                }
+            }
+        };
+        process();
+        return () => {
+            mounted = false;
+            if (state.optimizedUrl) {
+                URL.revokeObjectURL(state.optimizedUrl);
+            }
+        };
+    }, [src, quality]);
+    return state;
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@think-grid-labs/opti-assets",
+    "version": "0.1.0",
+    "description": "Unified image optimization toolkit for the browser and React",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "pkg"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./browser": {
+            "types": "./pkg/opti_assets_browser.d.ts",
+            "import": "./pkg/opti_assets_browser.js",
+            "default": "./pkg/opti_assets_browser.js"
+        }
+    },
+    "scripts": {
+        "build": "npm run build:wasm && npm run build:ts",
+        "build:wasm": "wasm-pack build --target web --out-dir pkg --release",
+        "build:ts": "tsc",
+        "test": "vitest"
+    },
+    "keywords": [
+        "image-optimization",
+        "wasm",
+        "react",
+        "rust",
+        "webp"
+    ],
+    "author": "DennisP <dennis@thinkgrid-labs.com>",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": ">=16.8.0"
+    },
+    "devDependencies": {
+        "typescript": "^5.0.0",
+        "@types/react": "^18.0.0",
+        "concurrently": "^8.0.0",
+        "vitest": "^0.34.0",
+        "@testing-library/react": "^14.0.0",
+        "jsdom": "^22.0.0",
+        "@types/node": "^20.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}