rn-remove-image-bg 0.0.25 → 0.0.26

package/README.md

@@ -326,46 +326,51 @@ try {
 
 ### Web (React Native Web)
 
-This package supports **React Native Web** via the `@imgly/background-removal` library.
+This package supports **React Native Web** via the `@imgly/background-removal` library loaded from CDN.
 
-#### Setup
+#### Setup (Required)
 
-No manual setup is required! The library is installed automatically via npm and works with Metro bundler out of the box.
+Add this script tag to your `index.html` (before your app bundle):
+
+```html
+<script type="module">
+  import { removeBackground } from "https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/+esm";
+  window.imglyRemoveBackground = removeBackground;
+</script>
+```
+
+> **Why CDN?** The `@imgly/background-removal` library uses dynamic imports that Metro bundler doesn't support. Loading from CDN bypasses this limitation.
 
 #### Usage
 
-Use `removeBgImage` exactly like on native platforms.
+Use `removeBgImage` exactly like on native platforms:
 
 ```typescript
 import { removeBgImage } from 'rn-remove-image-bg';
 
 const result = await removeBgImage(uri, {
   maxDimension: 1024,
-  onProgress: (p) => console.log(p),
-  // Web-specific: Path to custom hosted models (optional)
-  // If omitted, models are downloaded from @imgly CDN (~30MB)
-  publicPath: '/assets/models/' 
+  onProgress: (p) => console.log(`Progress: ${p}%`),
 });
 ```
 
-#### Asset Handling & Offline Support
-
-By default, the library downloads AI models (~30MB) from the **Internet (CDN)** on the first run and caches them in the browser (IndexedDB). This keeps your app bundle small (~2MB).
+#### First-Time Use
 
-**For Offline Support / Self-Hosting:**
-1.  Copy the `.wasm` and `.onnx` files from `node_modules/@imgly/background-removal/dist/` to your web `public/models` folder.
-2.  Pass `publicPath: '/models/'` (or your chosen path) in the options.
+On first use, the library downloads AI models (~30MB) from the CDN and caches them in IndexedDB. Subsequent uses are much faster.
 
 #### Compatibility
 
-- **Browsers**: Chrome, Edge, Firefox, Safari (versions with WebGPU or WebGL2 support).
-- **Bundlers**: Works with **Metro** (Expo) out of the box.
-- **CORS**: If loading images from remote URLs, ensure they have `Access-Control-Allow-Origin: *` headers.
+- **Browsers**: Chrome, Edge, Firefox, Safari (with WebGPU or WebGL2)
+- **Expo Web**: ✅ Works with Metro bundler
+- **CORS**: Remote images must have `Access-Control-Allow-Origin: *` headers
 
 #### Troubleshooting (Web)
 
-- **"Resource not found"**: If you see 404s for `.wasm` files, ensure you have internet access (for CDN) or have correctly configured `publicPath`.
-- **CORS Errors**: "Tainted canvas" or "SecurityError" means the image server didn't send CORS headers. Proxy the image or configure your S3 bucket/server.
+| Error | Solution |
+|-------|----------|
+| `Background removal library not loaded` | Add the script tag to your HTML |
+| `"Resource not found"` (404s) | Check internet connection (models download from CDN) |
+| `"Tainted canvas"` / CORS errors | Ensure image server sends CORS headers |
 
 ---
 

package/lib/web/core/BackgroundRemover.d.ts

@@ -1,8 +1,25 @@
 import type { RemoveBgImageOptions } from './types';
+type ImglyRemoveBackground = (image: string | Blob | ArrayBuffer, config?: {
+    publicPath?: string;
+    progress?: (key: string, current: number, total: number) => void;
+    debug?: boolean;
+}) => Promise<Blob>;
+declare global {
+    interface Window {
+        imglyRemoveBackground?: ImglyRemoveBackground;
+    }
+}
 export declare const BackgroundRemover: {
+    /**
+     * Checks if the background removal library is loaded.
+     */
+    isAvailable(): boolean;
     /**
      * Removes background from an image.
-     * Returns a Blobl of the processed image (PNG).
+     * Returns a Blob of the processed image (PNG).
+     *
+     * Requires @imgly/background-removal to be loaded via CDN script tag.
      */
     remove(uri: string, options: RemoveBgImageOptions): Promise<Blob>;
 };
+export {};

package/lib/web/core/BackgroundRemover.js

@@ -1,13 +1,38 @@
-import { removeBackground as imglyRemove } from '@imgly/background-removal';
-import { mapErrorToBackgroundRemovalError } from '../errors/WebErrorAdapter';
+import { mapErrorToBackgroundRemovalError, BackgroundRemovalError } from '../errors/WebErrorAdapter';
 import { normalizeUri } from '../utils/uriHelper';
+/**
+ * Gets the @imgly removeBackground function from window.
+ * This must be loaded via CDN script tag before use.
+ */
+function getImglyRemoveBackground() {
+    if (typeof window === 'undefined') {
+        throw new BackgroundRemovalError('Background removal is only available in browser environment.', 'ENVIRONMENT_ERROR');
+    }
+    if (!window.imglyRemoveBackground) {
+        throw new BackgroundRemovalError('Background removal library not loaded. Please add the following script to your HTML:\n' +
+            '<script type="module">\n' +
+            '  import { removeBackground } from "https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/+esm";\n' +
+            '  window.imglyRemoveBackground = removeBackground;\n' +
+            '</script>', 'LIBRARY_NOT_LOADED');
+    }
+    return window.imglyRemoveBackground;
+}
 export const BackgroundRemover = {
+    /**
+     * Checks if the background removal library is loaded.
+     */
+    isAvailable() {
+        return typeof window !== 'undefined' && typeof window.imglyRemoveBackground === 'function';
+    },
     /**
      * Removes background from an image.
-     * Returns a Blobl of the processed image (PNG).
+     * Returns a Blob of the processed image (PNG).
+     *
+     * Requires @imgly/background-removal to be loaded via CDN script tag.
      */
     async remove(uri, options) {
         try {
+            const imglyRemove = getImglyRemoveBackground();
             const normalizedUri = await normalizeUri(uri);
             const config = {
                 // Pass publicPath if provided (for self-hosted assets)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-remove-image-bg",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "rn-remove-image-bg",
   "homepage": "https://github.com/a-eid/rn-remove-image-bg",
   "main": "lib/index",
@@ -33,11 +33,10 @@
     "app.plugin.js",
     "nitro.json",
     "*.podspec",
-    "README.md",
-    "scripts"
+    "README.md"
   ],
   "scripts": {
-    "postinstall": "node scripts/patch-onnxruntime-web.js && tsc || exit 0;",
+    "postinstall": "tsc || exit 0;",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf android/build node_modules/**/android/build lib",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",
@@ -97,8 +96,6 @@
     "lib/"
   ],
   "dependencies": {
-    "@imgly/background-removal": "^1.7.0",
-    "buffer": "^6.0.3",
     "thumbhash": "^0.1.1",
     "upng-js": "^2.1.0"
   }

package/src/web/core/BackgroundRemover.ts

@@ -1,18 +1,70 @@
-import { removeBackground as imglyRemove, type Config } from '@imgly/background-removal';
 import type { RemoveBgImageOptions } from './types';
-import { mapErrorToBackgroundRemovalError } from '../errors/WebErrorAdapter';
+import { mapErrorToBackgroundRemovalError, BackgroundRemovalError } from '../errors/WebErrorAdapter';
 import { normalizeUri } from '../utils/uriHelper';
 
+// Type for the CDN-loaded @imgly/background-removal function
+type ImglyRemoveBackground = (
+  image: string | Blob | ArrayBuffer,
+  config?: {
+    publicPath?: string;
+    progress?: (key: string, current: number, total: number) => void;
+    debug?: boolean;
+  }
+) => Promise<Blob>;
+
+// Declare the global window property
+declare global {
+  interface Window {
+    imglyRemoveBackground?: ImglyRemoveBackground;
+  }
+}
+
+/**
+ * Gets the @imgly removeBackground function from window.
+ * This must be loaded via CDN script tag before use.
+ */
+function getImglyRemoveBackground(): ImglyRemoveBackground {
+  if (typeof window === 'undefined') {
+    throw new BackgroundRemovalError(
+      'Background removal is only available in browser environment.',
+      'ENVIRONMENT_ERROR'
+    );
+  }
+  
+  if (!window.imglyRemoveBackground) {
+    throw new BackgroundRemovalError(
+      'Background removal library not loaded. Please add the following script to your HTML:\n' +
+      '<script type="module">\n' +
+      '  import { removeBackground } from "https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/+esm";\n' +
+      '  window.imglyRemoveBackground = removeBackground;\n' +
+      '</script>',
+      'LIBRARY_NOT_LOADED'
+    );
+  }
+  
+  return window.imglyRemoveBackground;
+}
+
 export const BackgroundRemover = {
+  /**
+   * Checks if the background removal library is loaded.
+   */
+  isAvailable(): boolean {
+    return typeof window !== 'undefined' && typeof window.imglyRemoveBackground === 'function';
+  },
+
   /**
    * Removes background from an image.
-   * Returns a Blobl of the processed image (PNG).
+   * Returns a Blob of the processed image (PNG).
+   * 
+   * Requires @imgly/background-removal to be loaded via CDN script tag.
    */
   async remove(uri: string, options: RemoveBgImageOptions): Promise<Blob> {
     try {
+      const imglyRemove = getImglyRemoveBackground();
       const normalizedUri = await normalizeUri(uri);
       
-      const config: Config = {
+      const config = {
         // Pass publicPath if provided (for self-hosted assets)
         publicPath: options.publicPath,
         

package/scripts/patch-onnxruntime-web.js

@@ -1,52 +0,0 @@
-#!/usr/bin/env node
-// Patch script for onnxruntime-web Metro bundler compatibility
-// Removes webpack-specific comments that break Metro bundler
-// Usage: node scripts/patch-onnxruntime-web.js
-
-const fs = require('fs');
-const path = require('path');
-
-const filesToPatch = [
-  'node_modules/onnxruntime-web/dist/ort.bundle.min.mjs',
-  'node_modules/onnxruntime-web/dist/ort.webgpu.bundle.min.mjs',
-  'node_modules/onnxruntime-web/dist/ort.all.bundle.min.mjs',
-];
-
-let patchedCount = 0;
-let skippedCount = 0;
-
-for (const relativePath of filesToPatch) {
-  const absolutePath = path.join(__dirname, '..', relativePath);
-  
-  if (!fs.existsSync(absolutePath)) {
-    // File doesn't exist, skip silently (not all bundles may be present)
-    continue;
-  }
-
-  try {
-    const content = fs.readFileSync(absolutePath, 'utf-8');
-    
-    // Remove webpack-specific comments that break Metro
-    // Pattern: /*webpackIgnore:true*/ or /*webpackChunkName:...*/
-    const patched = content
-      .replace(/\/\*webpackIgnore:true\*\//g, '')
-      .replace(/\/\*webpackChunkName:[^*]+\*\//g, '');
-    
-    if (content === patched) {
-      console.log(`✅ ${relativePath} - already patched`);
-      skippedCount++;
-    } else {
-      fs.writeFileSync(absolutePath, patched);
-      console.log(`✅ ${relativePath} - patched successfully`);
-      patchedCount++;
-    }
-  } catch (error) {
-    console.error(`❌ ${relativePath} - failed to patch: ${error.message}`);
-  }
-}
-
-if (patchedCount === 0 && skippedCount === 0) {
-  console.log('⚠️  No onnxruntime-web files found to patch (library may not be installed yet)');
-} else {
-  console.log(`\n📦 Patch complete: ${patchedCount} patched, ${skippedCount} already patched`);
-}