@shotstack/shotstack-canvas 2.0.15 → 2.0.17

package/README.md

@@ -1,13 +1,72 @@
-# @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
+
+Text layout and animation engine using HarfBuzz WASM. Identical rendering on Node.js and Web.
+
+## Features
+
+- HarfBuzz WASM text shaping with glyph outlines
+- Cross-platform DrawOp abstraction (Canvas2D for web, @napi-rs/canvas for Node.js)
+- Rich text with fonts, stroke, shadow, gradients, backgrounds, and borders
+- SVG asset rendering (11 shape types + SVG markup import)
+- Rich caption support with word-level timing and 8 animation styles
+- Video generation (H.264 MP4 via FFmpeg on Node.js, WebCodecs in browser)
+- RTL and bidirectional text support
+- Custom font registration (file, URL, or ArrayBuffer)
+
+## Install
+
+```bash
+pnpm add @shotstack/shotstack-canvas
+```
+
+## Quick Start
+
+### Node.js
+
+```js
+import { createTextEngine } from "@shotstack/shotstack-canvas";
+
+const engine = await createTextEngine({ width: 800, height: 400 });
+
+const asset = engine.validate({
+  type: "rich-text",
+  text: "Hello World",
+  font: { family: "Open Sans", size: 48, color: "#ffffff" },
+});
+
+const drawOps = await engine.renderFrame(asset.value, 0);
+const renderer = await engine.createRenderer({ width: 800, height: 400 });
+const buffer = renderer.paint(drawOps);
+```
+
+### Web
+
+```js
+import { createTextEngine } from "@shotstack/shotstack-canvas";
+
+const engine = await createTextEngine({ width: 800, height: 400 });
+const asset = engine.validate({ type: "rich-text", text: "Hello World" });
+const drawOps = await engine.renderFrame(asset.value, 0);
+const renderer = engine.createRenderer(canvas);
+renderer.paint(drawOps);
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm build
+pnpm test
+```
+
+## Release
+
+Releases are automated via [semantic-release](https://github.com/semantic-release/semantic-release). Pushing to `main` with Conventional Commit messages triggers a release:
+
+- `fix: ...` — patch release (e.g., 2.0.15 → 2.0.16)
+- `feat: ...` — minor release (e.g., 2.0.15 → 2.1.0)
+- `feat!: ...` or `BREAKING CHANGE:` — major release (e.g., 2.0.15 → 3.0.0)
+
+## License
+
+MIT

package/dist/entry.web.js

@@ -32091,10 +32091,7 @@ var _FontRegistry = class _FontRegistry {
       return;
     }
     try {
-      const canvasMod = await import(
-        /* @vite-ignore */
-        "canvas"
-      );
+      const canvasMod = { GlobalFonts: void 0 };
       const GlobalFonts = canvasMod.GlobalFonts;
       if (GlobalFonts && typeof GlobalFonts.register === "function") {
         const buffer = Buffer.from(bytes);

package/package.json

@@ -1,66 +1,78 @@
-{
-  "name": "@shotstack/shotstack-canvas",
-  "version": "2.0.15",
-  "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",
-    "test:caption-web": "vite dev examples/caption-tests",
-    "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",
-    "bidi-js": "^1.0.3",
-    "@shotstack/schemas": "1.8.7",
-    "canvas": "npm:@napi-rs/canvas@^0.1.54",
-    "ffmpeg-static": "^5.2.0",
-    "fontkit": "^2.0.4",
-    "harfbuzzjs": "0.4.12",
-    "lru-cache": "^11.2.5",
-    "mp4-muxer": "^5.1.3",
-    "zod": "^4.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.14.10",
-    "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": "2.0.17",
+  "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",
+    "test:caption-web": "vite dev examples/caption-tests",
+    "prepublishOnly": "node scripts/publish-guard.cjs && pnpm build",
+    "test": "node --test tests/build-verify.mjs"
+  },
+  "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.8.7",
+    "bidi-js": "^1.0.3",
+    "canvas": "npm:@napi-rs/canvas@^0.1.54",
+    "ffmpeg-static": "^5.2.0",
+    "fontkit": "^2.0.4",
+    "harfbuzzjs": "0.4.12",
+    "lru-cache": "^11.2.5",
+    "mp4-muxer": "^5.1.3",
+    "zod": "^4.2.0"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.6",
+    "@semantic-release/npm": "^13.1.5",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@types/node": "^20.14.10",
+    "semantic-release": "^25.0.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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shotstack/shotstack-canvas.git"
+  }
+}

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