@shotstack/shotstack-canvas 1.9.5 → 1.9.6

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

@@ -608,6 +608,9 @@ var FontRegistry = class _FontRegistry {
     const normalizedWeight = normalizeWeight(desc.weight);
     return `${desc.family}__${normalizedWeight}`;
   }
+  hasRegisteredFace(desc) {
+    return this.faces.has(this.key(desc));
+  }
   async registerFromBytes(bytes, desc) {
     try {
       if (!this.hb) await this.init();
@@ -3705,16 +3708,56 @@ async function createTextEngine(opts = {}) {
   }
   const layout = new LayoutEngine(fonts);
   const videoGenerator = new VideoGenerator();
+  const customFontLoadCache = /* @__PURE__ */ new Map();
+  const directRegistrationCache = /* @__PURE__ */ new Map();
+  const normalizeWeight2 = (weight) => `${weight ?? "400"}`;
+  const fontDescKey = (family, weight) => `${family}__${normalizeWeight2(weight)}`;
+  const registerFontFromSource = async (source, desc) => {
+    const normalizedDesc = {
+      family: desc.family,
+      weight: normalizeWeight2(desc.weight)
+    };
+    const cacheKey = `${source}|${fontDescKey(normalizedDesc.family, normalizedDesc.weight)}`;
+    const cached = directRegistrationCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const registrationTask = (async () => {
+      if (fonts.hasRegisteredFace(normalizedDesc)) {
+        return;
+      }
+      const bytes = await loadFileOrHttpToArrayBuffer(source);
+      await fonts.registerFromBytes(bytes, normalizedDesc);
+    })();
+    directRegistrationCache.set(cacheKey, registrationTask);
+    return registrationTask;
+  };
+  const ensureCustomFontLoaded = async (customFont) => {
+    const normalizedDesc = {
+      family: customFont.family,
+      weight: normalizeWeight2(customFont.weight)
+    };
+    const cacheKey = `${customFont.src}|${fontDescKey(normalizedDesc.family, normalizedDesc.weight)}`;
+    const cached = customFontLoadCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const loadTask = (async () => {
+      if (fonts.hasRegisteredFace(normalizedDesc)) {
+        return;
+      }
+      const bytes = await loadFileOrHttpToArrayBuffer(customFont.src);
+      await fonts.registerFromBytes(bytes, normalizedDesc);
+    })();
+    customFontLoadCache.set(cacheKey, loadTask);
+    return loadTask;
+  };
   async function ensureFonts(asset) {
     try {
       if (asset.customFonts) {
         for (const cf of asset.customFonts) {
           try {
-            const bytes = await loadFileOrHttpToArrayBuffer(cf.src);
-            await fonts.registerFromBytes(bytes, {
-              family: cf.family,
-              weight: cf.weight ?? "400"
-            });
+            await ensureCustomFontLoaded(cf);
             if (fonts.isColorEmojiFont(cf.family)) {
               const emojiBytes = fonts.getColorEmojiFontBytes(cf.family);
               if (emojiBytes) {
@@ -3754,8 +3797,7 @@ async function createTextEngine(opts = {}) {
     },
     async registerFontFromFile(path, desc) {
       try {
-        const bytes = await loadFileOrHttpToArrayBuffer(path);
-        await fonts.registerFromBytes(bytes, desc);
+        await registerFontFromSource(path, desc);
       } catch (err) {
         throw new Error(
           `Failed to register font "${desc.family}" from file ${path}: ${err instanceof Error ? err.message : String(err)}`
@@ -3764,8 +3806,7 @@ async function createTextEngine(opts = {}) {
     },
     async registerFontFromUrl(url, desc) {
       try {
-        const bytes = await loadFileOrHttpToArrayBuffer(url);
-        await fonts.registerFromBytes(bytes, desc);
+        await registerFontFromSource(url, desc);
       } catch (err) {
         throw new Error(
           `Failed to register font "${desc.family}" from URL ${url}: ${err instanceof Error ? err.message : String(err)}`

package/dist/entry.node.js

@@ -564,6 +564,9 @@ var FontRegistry = class _FontRegistry {
     const normalizedWeight = normalizeWeight(desc.weight);
     return `${desc.family}__${normalizedWeight}`;
   }
+  hasRegisteredFace(desc) {
+    return this.faces.has(this.key(desc));
+  }
   async registerFromBytes(bytes, desc) {
     try {
       if (!this.hb) await this.init();
@@ -3661,16 +3664,56 @@ async function createTextEngine(opts = {}) {
   }
   const layout = new LayoutEngine(fonts);
   const videoGenerator = new VideoGenerator();
+  const customFontLoadCache = /* @__PURE__ */ new Map();
+  const directRegistrationCache = /* @__PURE__ */ new Map();
+  const normalizeWeight2 = (weight) => `${weight ?? "400"}`;
+  const fontDescKey = (family, weight) => `${family}__${normalizeWeight2(weight)}`;
+  const registerFontFromSource = async (source, desc) => {
+    const normalizedDesc = {
+      family: desc.family,
+      weight: normalizeWeight2(desc.weight)
+    };
+    const cacheKey = `${source}|${fontDescKey(normalizedDesc.family, normalizedDesc.weight)}`;
+    const cached = directRegistrationCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const registrationTask = (async () => {
+      if (fonts.hasRegisteredFace(normalizedDesc)) {
+        return;
+      }
+      const bytes = await loadFileOrHttpToArrayBuffer(source);
+      await fonts.registerFromBytes(bytes, normalizedDesc);
+    })();
+    directRegistrationCache.set(cacheKey, registrationTask);
+    return registrationTask;
+  };
+  const ensureCustomFontLoaded = async (customFont) => {
+    const normalizedDesc = {
+      family: customFont.family,
+      weight: normalizeWeight2(customFont.weight)
+    };
+    const cacheKey = `${customFont.src}|${fontDescKey(normalizedDesc.family, normalizedDesc.weight)}`;
+    const cached = customFontLoadCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const loadTask = (async () => {
+      if (fonts.hasRegisteredFace(normalizedDesc)) {
+        return;
+      }
+      const bytes = await loadFileOrHttpToArrayBuffer(customFont.src);
+      await fonts.registerFromBytes(bytes, normalizedDesc);
+    })();
+    customFontLoadCache.set(cacheKey, loadTask);
+    return loadTask;
+  };
   async function ensureFonts(asset) {
     try {
       if (asset.customFonts) {
         for (const cf of asset.customFonts) {
           try {
-            const bytes = await loadFileOrHttpToArrayBuffer(cf.src);
-            await fonts.registerFromBytes(bytes, {
-              family: cf.family,
-              weight: cf.weight ?? "400"
-            });
+            await ensureCustomFontLoaded(cf);
             if (fonts.isColorEmojiFont(cf.family)) {
               const emojiBytes = fonts.getColorEmojiFontBytes(cf.family);
               if (emojiBytes) {
@@ -3710,8 +3753,7 @@ async function createTextEngine(opts = {}) {
     },
     async registerFontFromFile(path, desc) {
       try {
-        const bytes = await loadFileOrHttpToArrayBuffer(path);
-        await fonts.registerFromBytes(bytes, desc);
+        await registerFontFromSource(path, desc);
       } catch (err) {
         throw new Error(
           `Failed to register font "${desc.family}" from file ${path}: ${err instanceof Error ? err.message : String(err)}`
@@ -3720,8 +3762,7 @@ async function createTextEngine(opts = {}) {
     },
     async registerFontFromUrl(url, desc) {
       try {
-        const bytes = await loadFileOrHttpToArrayBuffer(url);
-        await fonts.registerFromBytes(bytes, desc);
+        await registerFontFromSource(url, desc);
       } catch (err) {
         throw new Error(
           `Failed to register font "${desc.family}" from URL ${url}: ${err instanceof Error ? err.message : String(err)}`

package/dist/entry.web.js

@@ -564,6 +564,9 @@ var _FontRegistry = class _FontRegistry {
     const normalizedWeight = normalizeWeight(desc.weight);
     return `${desc.family}__${normalizedWeight}`;
   }
+  hasRegisteredFace(desc) {
+    return this.faces.has(this.key(desc));
+  }
   async registerFromBytes(bytes, desc) {
     try {
       if (!this.hb) await this.init();
@@ -3380,16 +3383,56 @@ async function createTextEngine(opts = {}) {
     );
   }
   const layout = new LayoutEngine(fonts);
+  const customFontLoadCache = /* @__PURE__ */ new Map();
+  const directRegistrationCache = /* @__PURE__ */ new Map();
+  const normalizeWeight2 = (weight) => `${weight ?? "400"}`;
+  const fontDescKey = (family, weight) => `${family}__${normalizeWeight2(weight)}`;
+  const registerFontFromSource = async (source, desc) => {
+    const normalizedDesc = {
+      family: desc.family,
+      weight: normalizeWeight2(desc.weight)
+    };
+    const cacheKey = `${source}|${fontDescKey(normalizedDesc.family, normalizedDesc.weight)}`;
+    const cached = directRegistrationCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const registrationTask = (async () => {
+      if (fonts.hasRegisteredFace(normalizedDesc)) {
+        return;
+      }
+      const bytes = await fetchToArrayBuffer(source);
+      await fonts.registerFromBytes(bytes, normalizedDesc);
+    })();
+    directRegistrationCache.set(cacheKey, registrationTask);
+    return registrationTask;
+  };
+  const ensureCustomFontLoaded = async (customFont) => {
+    const normalizedDesc = {
+      family: customFont.family,
+      weight: normalizeWeight2(customFont.weight)
+    };
+    const cacheKey = `${customFont.src}|${fontDescKey(normalizedDesc.family, normalizedDesc.weight)}`;
+    const cached = customFontLoadCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const loadTask = (async () => {
+      if (fonts.hasRegisteredFace(normalizedDesc)) {
+        return;
+      }
+      const bytes = await fetchToArrayBuffer(customFont.src);
+      await fonts.registerFromBytes(bytes, normalizedDesc);
+    })();
+    customFontLoadCache.set(cacheKey, loadTask);
+    return loadTask;
+  };
   async function ensureFonts(asset) {
     try {
       if (asset.customFonts) {
         for (const cf of asset.customFonts) {
           try {
-            const bytes = await fetchToArrayBuffer(cf.src);
-            await fonts.registerFromBytes(bytes, {
-              family: cf.family,
-              weight: cf.weight ?? "400"
-            });
+            await ensureCustomFontLoaded(cf);
           } catch (err) {
             throw new Error(
               `Failed to load custom font "${cf.family}" from ${cf.src}: ${err instanceof Error ? err.message : String(err)}`
@@ -3411,11 +3454,13 @@ async function createTextEngine(opts = {}) {
         } catch {
           const wantsDefaultRoboto = (main.family || "Roboto").toLowerCase() === "roboto" && `${main.weight}` === "400";
           if (wantsDefaultRoboto) {
-            const bytes = await fetchToArrayBuffer(DEFAULT_ROBOTO_URL);
-            await fonts.registerFromBytes(bytes, {
-              family: "Roboto",
-              weight: "400"
-            });
+            if (!fonts.hasRegisteredFace({ family: "Roboto", weight: "400" })) {
+              const bytes = await fetchToArrayBuffer(DEFAULT_ROBOTO_URL);
+              await fonts.registerFromBytes(bytes, {
+                family: "Roboto",
+                weight: "400"
+              });
+            }
           } else {
             throw new Error(`Font not registered for ${desc.family}__${desc.weight}`);
           }
@@ -3439,8 +3484,7 @@ async function createTextEngine(opts = {}) {
     },
     async registerFontFromUrl(url, desc) {
       try {
-        const bytes = await fetchToArrayBuffer(url);
-        await fonts.registerFromBytes(bytes, desc);
+        await registerFontFromSource(url, desc);
       } catch (err) {
         throw new Error(
           `Failed to register font "${desc.family}" from URL ${url}: ${err instanceof Error ? err.message : String(err)}`
@@ -3451,13 +3495,8 @@ async function createTextEngine(opts = {}) {
       try {
         let bytes;
         if (typeof source === "string") {
-          try {
-            bytes = await fetchToArrayBuffer(source);
-          } catch (err) {
-            throw new Error(
-              `Failed to fetch font from ${source}: ${err instanceof Error ? err.message : String(err)}`
-            );
-          }
+          await registerFontFromSource(source, desc);
+          return;
         } else {
           try {
             bytes = await source.arrayBuffer();
@@ -3467,7 +3506,14 @@ async function createTextEngine(opts = {}) {
             );
           }
         }
-        await fonts.registerFromBytes(bytes, desc);
+        const normalizedDesc = {
+          family: desc.family,
+          weight: normalizeWeight2(desc.weight)
+        };
+        if (fonts.hasRegisteredFace(normalizedDesc)) {
+          return;
+        }
+        await fonts.registerFromBytes(bytes, normalizedDesc);
       } catch (err) {
         if (err instanceof Error) {
           throw err;

package/package.json

@@ -1,65 +1,65 @@
-{
-  "name": "@shotstack/shotstack-canvas",
-  "version": "1.9.5",
-  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
-  "type": "module",
-  "main": "./dist/entry.node.cjs",
-  "module": "./dist/entry.node.js",
-  "browser": "./dist/entry.web.js",
-  "types": "./dist/entry.node.d.ts",
-  "exports": {
-    ".": {
-      "node": {
-        "import": "./dist/entry.node.js",
-        "require": "./dist/entry.node.cjs"
-      },
-      "browser": "./dist/entry.web.js",
-      "default": "./dist/entry.web.js"
-    }
-  },
-  "files": [
-    "dist/**",
-    "scripts/postinstall.js",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "postinstall": "node scripts/postinstall.js",
-    "vendor:harfbuzz": "node scripts/vendor-harfbuzz.js",
-    "example:node": "node examples/node-example.mjs",
-    "example:video": "node examples/node-video.mjs",
-    "example:web": "vite dev examples/web-example",
-    "prepublishOnly": "npm run build"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "@resvg/resvg-js": "^2.6.2",
-    "@resvg/resvg-wasm": "^2.6.2",
-    "@shotstack/schemas": "^1.5.4",
-    "canvas": "npm:@napi-rs/canvas@^0.1.54",
-    "ffmpeg-static": "^5.2.0",
-    "fontkit": "^2.0.4",
-    "harfbuzzjs": "0.4.12",
-    "opentype.js": "^1.3.4",
-    "zod": "^4.2.0"
-  },
-  "devDependencies": {
-    "@types/fluent-ffmpeg": "2.1.27",
-    "@types/node": "^20.14.10",
-    "fluent-ffmpeg": "^2.1.3",
-    "tsup": "^8.2.3",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
-    "vite-plugin-top-level-await": "1.6.0",
-    "vite-plugin-wasm": "3.5.0"
-  }
-}
+{
+  "name": "@shotstack/shotstack-canvas",
+  "version": "1.9.6",
+  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
+  "type": "module",
+  "main": "./dist/entry.node.cjs",
+  "module": "./dist/entry.node.js",
+  "browser": "./dist/entry.web.js",
+  "types": "./dist/entry.node.d.ts",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/entry.node.js",
+        "require": "./dist/entry.node.cjs"
+      },
+      "browser": "./dist/entry.web.js",
+      "default": "./dist/entry.web.js"
+    }
+  },
+  "files": [
+    "dist/**",
+    "scripts/postinstall.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "postinstall": "node scripts/postinstall.js",
+    "vendor:harfbuzz": "node scripts/vendor-harfbuzz.js",
+    "example:node": "node examples/node-example.mjs",
+    "example:video": "node examples/node-video.mjs",
+    "example:web": "vite dev examples/web-example",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
+    "@resvg/resvg-wasm": "^2.6.2",
+    "@shotstack/schemas": "^1.5.4",
+    "canvas": "npm:@napi-rs/canvas@^0.1.54",
+    "ffmpeg-static": "^5.2.0",
+    "fontkit": "^2.0.4",
+    "harfbuzzjs": "0.4.12",
+    "opentype.js": "^1.3.4",
+    "zod": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/fluent-ffmpeg": "2.1.27",
+    "@types/node": "^20.14.10",
+    "fluent-ffmpeg": "^2.1.3",
+    "tsup": "^8.2.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-plugin-top-level-await": "1.6.0",
+    "vite-plugin-wasm": "3.5.0"
+  }
+}

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`);
+}