@think-grid-labs/snapbolt 0.1.3

package/README.md

@@ -0,0 +1,36 @@
+# @think-grid-labs/snapbolt
+
+A high-performance image optimization toolkit powered by Rust and WebAssembly.
+
+## Overview
+This toolkit provides professional-grade image optimization (resizing and JPEG/WebP encoding) that runs entirely on the client side.
+
+## Quick Start
+
+### 1. Install
+```bash
+npm install @think-grid-labs/snapbolt
+```
+
+### 2. Sync WASM Binary
+You must ensure the `.wasm` file is available in your project's `public` folder:
+```bash
+npx @think-grid-labs/snapbolt-cli sync ./public
+```
+
+### 3. Use with React
+```tsx
+import { useImageOptimizer } from '@think-grid-labs/snapbolt';
+
+const SmartImage = ({ src }) => {
+  const { optimizedUrl, loading } = useImageOptimizer(src, 75, 300);
+  return <img src={optimizedUrl || src} alt="Optimized" />;
+};
+```
+
+## Features
+- **Client-Side Optimization**: Zero server cost.
+- **Blazing Fast**: Powered by a Rust core.
+- **React Ready**: Easy-to-use hooks.
+
+For full documentation, visit our [GitHub Repository](https://github.com/ThinkGrid-Labs/snapbolt).

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,69 @@
+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/snapbolt.js');
+};
+export const useImageOptimizer = (src, quality = 80) => {
+    const [state, setState] = useState({
+        optimizedUrl: null,
+        loading: false,
+        error: null,
+    });
+    useEffect(() => {
+        let mounted = true;
+        let currentUrl = null;
+        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);
+                currentUrl = url; // Store locally for cleanup
+                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 (currentUrl) {
+                URL.revokeObjectURL(currentUrl);
+            }
+        };
+    }, [src, quality]);
+    return state;
+};

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,56 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useImageOptimizer } from './index';
+// Mock Fetch
+global.fetch = vi.fn();
+// Mock URL.createObjectURL/revokeObjectURL
+if (typeof window !== 'undefined') {
+    window.URL.createObjectURL = vi.fn(() => 'blob:mock-url');
+    window.URL.revokeObjectURL = vi.fn();
+}
+// Mock the Wasm Module import
+vi.mock('../pkg/snapbolt.js', () => ({
+    init: vi.fn().mockResolvedValue({}),
+    optimize_image_sync: vi.fn().mockReturnValue(new Uint8Array([1, 2, 3])),
+}));
+describe('useImageOptimizer', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        global.fetch.mockReset();
+    });
+    it('should optimize image smoothly', async () => {
+        const mockBlob = new Blob(['test'], { type: 'image/png' });
+        mockBlob.arrayBuffer = vi.fn().mockResolvedValue(new ArrayBuffer(4));
+        global.fetch.mockResolvedValue({
+            ok: true,
+            blob: () => Promise.resolve(mockBlob),
+        });
+        const { result } = renderHook(() => useImageOptimizer('test.png', 80));
+        await waitFor(() => expect(result.current.loading).toBe(false), { timeout: 4000 });
+        expect(result.current.optimizedUrl).toBe('blob:mock-url');
+        expect(result.current.error).toBeNull();
+    });
+    it('should handle fetch errors', async () => {
+        global.fetch.mockResolvedValue({
+            ok: false,
+            statusText: 'Not Found',
+        });
+        const { result } = renderHook(() => useImageOptimizer('invalid.png', 80));
+        await waitFor(() => expect(result.current.loading).toBe(false), { timeout: 4000 });
+        expect(result.current.error).toContain('Failed to fetch image');
+        expect(result.current.optimizedUrl).toBeNull();
+    });
+    it('should cleanup on unmount', async () => {
+        const mockBlob = new Blob(['test'], { type: 'image/png' });
+        mockBlob.arrayBuffer = vi.fn().mockResolvedValue(new ArrayBuffer(4));
+        global.fetch.mockResolvedValue({
+            ok: true,
+            blob: () => Promise.resolve(mockBlob),
+        });
+        const { unmount } = renderHook(() => useImageOptimizer('cleanup.png', 80));
+        await waitFor(() => expect(window.URL.createObjectURL).toHaveBeenCalled(), { timeout: 3000 });
+        unmount();
+        expect(window.URL.revokeObjectURL).toHaveBeenCalled();
+    });
+});

package/package.json

@@ -0,0 +1,57 @@
+{
+    "name": "@think-grid-labs/snapbolt",
+    "version": "0.1.3",
+    "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",
+        "README.md"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./browser": {
+            "types": "./pkg/snapbolt.d.ts",
+            "import": "./pkg/snapbolt.js",
+            "default": "./pkg/snapbolt.js"
+        }
+    },
+    "scripts": {
+        "build": "npm run build:wasm && npm run build:ts",
+        "build:wasm": "npx wasm-pack build --target web --out-dir pkg --release",
+        "build:ts": "tsc",
+        "test": "vitest"
+    },
+    "keywords": [
+        "react",
+        "react-component",
+        "nextjs",
+        "nextjs-component",
+        "image-optimization",
+        "wasm",
+        "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"
+    }
+}