@shotstack/shotstack-canvas 1.8.4 → 1.9.0

package/README.md

@@ -1,13 +1,13 @@
-# @shotstack/shotstack-canvas
-
-One package → identical text shaping/wrapping/animation on Web & Node.
-- HarfBuzz WASM for shaping and glyph outlines (via `harfbuzzjs`).
-- Device-independent draw-ops.
-- Painters: Canvas2D (web) and node-canvas (node).
-- Deterministic time-driven animations.
-
-## Install
-
-```bash
-pnpm add @shotstack/shotstack-canvas
-# or npm i / yarn add
+# @shotstack/shotstack-canvas
+
+One package → identical text shaping/wrapping/animation on Web & Node.
+- HarfBuzz WASM for shaping and glyph outlines (via `harfbuzzjs`).
+- Device-independent draw-ops.
+- Painters: Canvas2D (web) and node-canvas (node).
+- Deterministic time-driven animations.
+
+## Install
+
+```bash
+pnpm add @shotstack/shotstack-canvas
+# or npm i / yarn add

package/dist/entry.node.cjs

@@ -327,7 +327,7 @@ function setupWasmInterceptors(wasmBinary) {
   const originalFetch = window.fetch;
   window.fetch = function(input, init) {
     const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
-    if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
+    if (url.includes("hb.wasm")) {
       return Promise.resolve(
         new Response(wasmBinary.slice(0), {
           status: 200,
@@ -360,7 +360,7 @@ function setupWasmInterceptors(wasmBinary) {
       try {
         const response = await source;
         const url = response.url || "";
-        if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
+        if (url.includes("hb.wasm")) {
           const module2 = await WebAssembly.compile(wasmBinary);
           const instance = await WebAssembly.instantiate(module2, importObject);
           return { module: module2, instance };

package/dist/entry.node.js

@@ -283,7 +283,7 @@ function setupWasmInterceptors(wasmBinary) {
   const originalFetch = window.fetch;
   window.fetch = function(input, init) {
     const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
-    if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
+    if (url.includes("hb.wasm")) {
       return Promise.resolve(
         new Response(wasmBinary.slice(0), {
           status: 200,
@@ -316,7 +316,7 @@ function setupWasmInterceptors(wasmBinary) {
       try {
         const response = await source;
         const url = response.url || "";
-        if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
+        if (url.includes("hb.wasm")) {
           const module = await WebAssembly.compile(wasmBinary);
           const instance = await WebAssembly.instantiate(module, importObject);
           return { module, instance };

package/dist/entry.web.d.ts

@@ -528,7 +528,7 @@ interface ResvgRenderResult {
     width: number;
     height: number;
 }
-declare function initResvg(wasmBinary?: ArrayBuffer): Promise<void>;
+declare function initResvg(wasmBinary?: ArrayBuffer | string): Promise<void>;
 declare function renderSvgToPng(svgString: string, options?: ResvgRenderOptions): Promise<ResvgRenderResult>;
 declare function shapeToSvgString(asset: CanvasSvgAsset, defaultWidth: number, defaultHeight: number): string;
 declare function generateShapePathData(shape: NonNullable<CanvasSvgAsset["shape"]>): string;

package/dist/entry.web.js

@@ -287,7 +287,7 @@ function setupWasmInterceptors(wasmBinary) {
   const originalFetch = window.fetch;
   window.fetch = function(input, init) {
     const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
-    if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
+    if (url.includes("hb.wasm")) {
       return Promise.resolve(
         new Response(wasmBinary.slice(0), {
           status: 200,
@@ -320,7 +320,7 @@ function setupWasmInterceptors(wasmBinary) {
       try {
         const response = await source;
         const url = response.url || "";
-        if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
+        if (url.includes("hb.wasm")) {
           const module = await WebAssembly.compile(wasmBinary);
           const instance = await WebAssembly.instantiate(module, importObject);
           return { module, instance };
@@ -355,10 +355,10 @@ async function initHB(wasmBaseURL) {
         }
       };
     }
-    const hbModule = await import("./hb-ODWKSLMB.js");
+    const hbModule = await import("./hb-KXF2MJ2J.js");
     const hbFactory = hbModule.default || hbModule;
     const hbInstance = await hbFactory({ wasmBinary });
-    const hbjsModule = await import("./hbjs-HHU2TAW7.js");
+    const hbjsModule = await import("./hbjs-ZTRARROF.js");
     const hbjsWrapper = hbjsModule.default || hbjsModule;
     const hb = hbjsWrapper(hbInstance);
     if (!hb || typeof hb.createBuffer !== "function" || typeof hb.createFont !== "function") {
@@ -2748,17 +2748,55 @@ function quadraticToCubic(x0, y0, qx, qy, x, y) {
 // src/core/resvg-renderer-web.ts
 var resvgWasmModule = null;
 var wasmInitialized = false;
-async function initResvgWasm() {
+var DEFAULT_RESVG_WASM_URL = "https://unpkg.com/@resvg/resvg-wasm@2.6.2/index_bg.wasm";
+async function fetchResvgWasmFromUrl(url) {
+  try {
+    const response = await fetch(url);
+    if (response.ok) {
+      const arrayBuffer = await response.arrayBuffer();
+      const bytes = new Uint8Array(arrayBuffer);
+      if (bytes.length >= 4 && bytes[0] === 0 && bytes[1] === 97 && bytes[2] === 115 && bytes[3] === 109) {
+        return arrayBuffer;
+      } else {
+        console.error(`Invalid WASM magic number from URL: ${url}`);
+      }
+    } else {
+      console.error(`Failed to fetch resvg WASM from URL: ${url}, status: ${response.status}`);
+    }
+    return void 0;
+  } catch (err) {
+    console.error(`Error fetching resvg WASM from ${url}:`, err);
+    return void 0;
+  }
+}
+async function loadResvgWasmWeb(wasmBaseURL) {
+  try {
+    if (wasmBaseURL) {
+      const url = wasmBaseURL.endsWith(".wasm") ? wasmBaseURL : wasmBaseURL.endsWith("/") ? `${wasmBaseURL}resvg.wasm` : `${wasmBaseURL}/resvg.wasm`;
+      const result = await fetchResvgWasmFromUrl(url);
+      if (result) return result;
+    }
+    return void 0;
+  } catch (err) {
+    console.error("Error in loadResvgWasmWeb:", err);
+    return void 0;
+  }
+}
+async function initResvgWasm(wasmBaseURL) {
   if (resvgWasmModule && wasmInitialized) {
     return resvgWasmModule;
   }
   const wasmModule = await import("@resvg/resvg-wasm");
   resvgWasmModule = wasmModule;
   if (!wasmInitialized) {
-    const wasmUrl = new URL("@resvg/resvg-wasm/index_bg.wasm", import.meta.url);
-    const wasmResponse = await fetch(wasmUrl);
-    const wasmBytes = await wasmResponse.arrayBuffer();
-    const compiled = await WebAssembly.compile(wasmBytes);
+    let wasmBinary = await loadResvgWasmWeb(wasmBaseURL);
+    if (!wasmBinary) {
+      wasmBinary = await fetchResvgWasmFromUrl(DEFAULT_RESVG_WASM_URL);
+    }
+    if (!wasmBinary) {
+      throw new Error("Failed to load resvg WASM from any source");
+    }
+    const compiled = await WebAssembly.compile(wasmBinary);
     await resvgWasmModule.initWasm(compiled);
     wasmInitialized = true;
   }
@@ -2770,16 +2808,20 @@ async function initResvg(wasmBinary) {
   }
   const wasmModule = await import("@resvg/resvg-wasm");
   resvgWasmModule = wasmModule;
-  if (wasmBinary) {
-    const compiled = await WebAssembly.compile(wasmBinary);
-    await resvgWasmModule.initWasm(compiled);
+  let binary;
+  if (wasmBinary instanceof ArrayBuffer) {
+    binary = wasmBinary;
   } else {
-    const wasmUrl = new URL("@resvg/resvg-wasm/index_bg.wasm", import.meta.url);
-    const wasmResponse = await fetch(wasmUrl);
-    const wasmBytes = await wasmResponse.arrayBuffer();
-    const compiled = await WebAssembly.compile(wasmBytes);
-    await resvgWasmModule.initWasm(compiled);
+    binary = await loadResvgWasmWeb(wasmBinary);
+    if (!binary) {
+      binary = await fetchResvgWasmFromUrl(DEFAULT_RESVG_WASM_URL);
+    }
+  }
+  if (!binary) {
+    throw new Error("Failed to load resvg WASM from any source");
   }
+  const compiled = await WebAssembly.compile(binary);
+  await resvgWasmModule.initWasm(compiled);
   wasmInitialized = true;
 }
 async function renderSvgToPng(svgString, options = {}) {

package/dist/{hb-ODWKSLMB.js → hb-KXF2MJ2J.js}

@@ -4,9 +4,9 @@ import {
   __require
 } from "./chunk-HYGMWVDX.js";
 
-// node_modules/.pnpm/harfbuzzjs@0.4.12/node_modules/harfbuzzjs/hb.js
+// node_modules/harfbuzzjs/hb.js
 var require_hb = __commonJS({
-  "node_modules/.pnpm/harfbuzzjs@0.4.12/node_modules/harfbuzzjs/hb.js"(exports, module) {
+  "node_modules/harfbuzzjs/hb.js"(exports, module) {
     var createHarfBuzz = (() => {
       var _scriptName = typeof document != "undefined" ? document.currentScript?.src : void 0;
       return async function(moduleArg = {}) {

package/dist/{hbjs-HHU2TAW7.js → hbjs-ZTRARROF.js}

@@ -2,9 +2,9 @@ import {
   __commonJS
 } from "./chunk-HYGMWVDX.js";
 
-// node_modules/.pnpm/harfbuzzjs@0.4.12/node_modules/harfbuzzjs/hbjs.js
+// node_modules/harfbuzzjs/hbjs.js
 var require_hbjs = __commonJS({
-  "node_modules/.pnpm/harfbuzzjs@0.4.12/node_modules/harfbuzzjs/hbjs.js"(exports, module) {
+  "node_modules/harfbuzzjs/hbjs.js"(exports, module) {
     function hbjs(Module) {
       "use strict";
       var exports2 = Module.wasmExports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",

package/scripts/postinstall.js

@@ -1,58 +1,58 @@
-#!/usr/bin/env node
-
-/**
- * Postinstall script to verify native canvas bindings are available
- * This helps catch issues early and provides helpful guidance
- */
-
-import { platform as _platform, arch as _arch } from 'os';
-import { dirname } from 'path';
-import { readdirSync } from 'fs';
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
-const platform = _platform();
-const arch = _arch();
-
-// Map platform/arch to package names
-const platformMap = {
-  'darwin-arm64': '@napi-rs/canvas-darwin-arm64',
-  'darwin-x64': '@napi-rs/canvas-darwin-x64',
-  'linux-arm64': '@napi-rs/canvas-linux-arm64-gnu',
-  'linux-x64': '@napi-rs/canvas-linux-x64-gnu',
-  'win32-x64': '@napi-rs/canvas-win32-x64-msvc',
-  'linux-arm': '@napi-rs/canvas-linux-arm-gnueabihf',
-  'android-arm64': '@napi-rs/canvas-android-arm64',
-};
-
-const platformKey = `${platform}-${arch}`;
-const requiredPackage = platformMap[platformKey];
-
-if (!requiredPackage) {
-  console.warn(`\n⚠️  Warning: Unsupported platform ${platformKey} for @napi-rs/canvas`);
-  console.warn('   Canvas rendering may not work on this platform.\n');
-  process.exit(0);
-}
-
-// Check if the native binding package is installed
-try {
-  const packagePath = require.resolve(`${requiredPackage}/package.json`);
-  const packageDir = dirname(packagePath);
-
-  // Verify the .node file exists
-  const nodeFiles = readdirSync(packageDir).filter(f => f.endsWith('.node'));
-
-  if (nodeFiles.length > 0) {
-    console.log(`✅ @shotstack/shotstack-canvas: Native canvas binding found for ${platformKey}`);
-  } else {
-    throw new Error('No .node file found');
-  }
-} catch (error) {
-  console.warn(`\n⚠️  Warning: Native canvas binding not found for ${platformKey}`);
-  console.warn(`   Expected package: ${requiredPackage}`);
-  console.warn('\n   If you see "Cannot find native binding" errors, try:');
-  console.warn('   1. Delete node_modules and package-lock.json');
-  console.warn('   2. Run: npm install');
-  console.warn(`   3. Or manually install: npm install ${requiredPackage}\n`);
-}
+#!/usr/bin/env node
+
+/**
+ * Postinstall script to verify native canvas bindings are available
+ * This helps catch issues early and provides helpful guidance
+ */
+
+import { platform as _platform, arch as _arch } from 'os';
+import { dirname } from 'path';
+import { readdirSync } from 'fs';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+const platform = _platform();
+const arch = _arch();
+
+// Map platform/arch to package names
+const platformMap = {
+  'darwin-arm64': '@napi-rs/canvas-darwin-arm64',
+  'darwin-x64': '@napi-rs/canvas-darwin-x64',
+  'linux-arm64': '@napi-rs/canvas-linux-arm64-gnu',
+  'linux-x64': '@napi-rs/canvas-linux-x64-gnu',
+  'win32-x64': '@napi-rs/canvas-win32-x64-msvc',
+  'linux-arm': '@napi-rs/canvas-linux-arm-gnueabihf',
+  'android-arm64': '@napi-rs/canvas-android-arm64',
+};
+
+const platformKey = `${platform}-${arch}`;
+const requiredPackage = platformMap[platformKey];
+
+if (!requiredPackage) {
+  console.warn(`\n⚠️  Warning: Unsupported platform ${platformKey} for @napi-rs/canvas`);
+  console.warn('   Canvas rendering may not work on this platform.\n');
+  process.exit(0);
+}
+
+// Check if the native binding package is installed
+try {
+  const packagePath = require.resolve(`${requiredPackage}/package.json`);
+  const packageDir = dirname(packagePath);
+
+  // Verify the .node file exists
+  const nodeFiles = readdirSync(packageDir).filter(f => f.endsWith('.node'));
+
+  if (nodeFiles.length > 0) {
+    console.log(`✅ @shotstack/shotstack-canvas: Native canvas binding found for ${platformKey}`);
+  } else {
+    throw new Error('No .node file found');
+  }
+} catch (error) {
+  console.warn(`\n⚠️  Warning: Native canvas binding not found for ${platformKey}`);
+  console.warn(`   Expected package: ${requiredPackage}`);
+  console.warn('\n   If you see "Cannot find native binding" errors, try:');
+  console.warn('   1. Delete node_modules and package-lock.json');
+  console.warn('   2. Run: npm install');
+  console.warn(`   3. Or manually install: npm install ${requiredPackage}\n`);
+}