@bendyline/squisq-video-react 2.5.14 → 2.5.16

package/README.md

@@ -220,6 +220,27 @@ available, and otherwise skipped with `audioIncluded: false` plus an
 completes. GIF skips audio preparation entirely. `supportsWebCodecsH264(config)` probes a specific encoder
 configuration; `EncoderConfig` and `FfmpegWasmLoadConfig` are also exported.
 
+### RNNoise WASM for Vite hosts (recommended)
+
+Media-edit denoise uses RNNoise, whose package embeds a 3.6 MB WASM as base64.
+A host that bundles the media-edit worker and its main-thread fallback gets that
+payload twice. Add the plugin to both the page and the worker builds and it
+ships once, as an emitted `rnnoise-*.wasm` fetched on first use:
+
+```ts
+// vite.config.ts
+import { rnnoiseWasmPlugin } from '@bendyline/squisq-video-react/vite';
+
+export default defineConfig({
+  plugins: [rnnoiseWasmPlugin()],
+  worker: { plugins: () => [rnnoiseWasmPlugin()] },
+});
+```
+
+It works for ES and IIFE (Vite's default) worker formats and follows `base`
+the way Vite's own asset URLs do. The fetch must be allowed by `connect-src`.
+Without the plugin, everything still works with the self-contained modules.
+
 ## Audio export
 
 `@bendyline/squisq-video-react/encoder` also exports a streaming audio-file

package/dist/index.js

@@ -30,6 +30,7 @@ import {
   supportsWebCodecsAac,
   supportsWebCodecsH264
 } from "./chunk-RIXBIX3H.js";
+import "./chunk-5MFQMJ5Z.js";
 import {
   createMediaEditRenderManager,
   createMediaEditRenderer,
@@ -38,7 +39,6 @@ import {
   useProcessedAudio
 } from "./chunk-TRCTDIWS.js";
 import "./chunk-TL2IMDIZ.js";
-import "./chunk-5MFQMJ5Z.js";
 export {
   CoverImageExportModal,
   DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS,

package/dist/vite/index.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Vite plugin that ships RNNoise's WASM as one file instead of twice in base64.
+ *
+ * The pinned `@shiguredo/rnnoise-wasm` embeds its 3.6 MB WASM as base64 in
+ * JavaScript. A host bundling the media-edit engine gets that payload twice:
+ * statically inside the worker, and again in the main-thread fallback's lazy
+ * chunk. This plugin extracts it to an emitted `rnnoise.wasm` that both load
+ * only when `Rnnoise.load()` runs, keeping the upstream runtime. Hosts add it
+ * to `plugins` and to `worker.plugins`; dev servers keep the self-contained
+ * module.
+ *
+ * The URL is written once the output format is known, by Vite's own rule: an
+ * absolute `base` names the file outright, a relative one resolves it against
+ * the running chunk. `import.meta.ROLLUP_FILE_URL` cannot be used: an IIFE
+ * worker (Vite's default) has no `import.meta`, so Vite 8 writes `{}.url` and
+ * the fetch throws.
+ */
+/** The plugin-context methods this plugin calls (Rollup and Rolldown both provide them). */
+interface RnnoisePluginContext {
+    emitFile(file: {
+        type: 'asset';
+        name: string;
+        source: Uint8Array;
+    }): string;
+    getFileName(referenceId: string): string;
+    error(message: string): never;
+}
+/** A Vite plugin, declared structurally so this package needs no Vite dependency. */
+interface RnnoiseWasmPlugin {
+    name: string;
+    apply: 'build';
+    enforce: 'pre';
+    configResolved(config: {
+        base: string;
+    }): void;
+    transform(this: RnnoisePluginContext, code: string, id: string): {
+        code: string;
+        map: null;
+    } | null;
+    renderChunk(this: RnnoisePluginContext, code: string, chunk: {
+        fileName: string;
+    }, options: {
+        format: string;
+    }): {
+        code: string;
+        map: null;
+    } | null;
+}
+declare function rnnoiseWasmPlugin(): RnnoiseWasmPlugin;
+
+export { type RnnoiseWasmPlugin, rnnoiseWasmPlugin };

package/dist/vite/index.js

@@ -0,0 +1,72 @@
+// src/vite/rnnoiseWasmPlugin.ts
+var MODULE_SUFFIX = "/@shiguredo/rnnoise-wasm/dist/rnnoise.js";
+var WASM_MAGIC = [0, 97, 115, 109, 1, 0, 0, 0];
+var URL_PLACEHOLDER = "__SQUISQ_RNNOISE_WASM_URL__";
+var SCRIPT_URL = "(typeof document === 'undefined' ? self.location.href : (document.currentScript && document.currentScript.src) || document.baseURI)";
+function rnnoiseWasmPlugin() {
+  let base;
+  let wasmReference;
+  return {
+    name: "squisq-rnnoise-wasm-asset",
+    apply: "build",
+    enforce: "pre",
+    configResolved(config) {
+      base = config.base;
+    },
+    transform(code, id) {
+      if (!id.replaceAll("\\", "/").endsWith(MODULE_SUFFIX)) return null;
+      const factory = /function (\w+)\(\) \{\s*return \w+\("([A-Za-z0-9+/=]{1000,})"\);\s*\}/.exec(
+        code
+      );
+      if (!factory) this.error("RNNoise embedded WASM factory changed; update the asset plugin.");
+      const [, name, base64] = factory;
+      const load = /static async load\(\) \{/g;
+      if ([...code.matchAll(load)].length !== 1) {
+        this.error("RNNoise load method changed; update the asset plugin.");
+      }
+      const bytes = Uint8Array.from(atob(base64), (char) => char.charCodeAt(0));
+      if (!WASM_MAGIC.every((byte, index) => bytes[index] === byte)) {
+        this.error("RNNoise embedded payload is not a WebAssembly binary.");
+      }
+      wasmReference = this.emitFile({ type: "asset", name: "rnnoise.wasm", source: bytes });
+      return {
+        // Fetch before entering Emscripten: a failed request must not leave
+        // its initialization promise or dependency-monitor timer running.
+        code: `let squisqRnnoiseBytes;
+            async function squisqFetchRnnoiseWasm() {
+              const response = await fetch(${URL_PLACEHOLDER});
+              if (!response.ok) throw new Error('RNNoise WASM load failed: ' + response.status);
+              return new Uint8Array(await response.arrayBuffer());
+            }
+` + code.replace(factory[0], `function ${name}() { return squisqRnnoiseBytes; }`).replace(
+          load,
+          "static async load() { squisqRnnoiseBytes ??= await squisqFetchRnnoiseWasm();"
+        ),
+        map: null
+      };
+    },
+    renderChunk(code, chunk, options) {
+      if (!wasmReference || !code.includes(URL_PLACEHOLDER)) return null;
+      const file = this.getFileName(wasmReference);
+      return {
+        code: code.replaceAll(URL_PLACEHOLDER, wasmUrl(file, chunk.fileName, options.format, base)),
+        map: null
+      };
+    }
+  };
+}
+function wasmUrl(file, chunk, format, base) {
+  if (base && /^(?:[a-z][a-z\d+.-]*:)?\//i.test(base)) return JSON.stringify(base + file);
+  const script = format === "es" ? "import.meta.url" : SCRIPT_URL;
+  return `new URL(${JSON.stringify(relativePath(chunk, file))}, ${script}).href`;
+}
+function relativePath(from, to) {
+  const fromDirs = from.split("/").slice(0, -1);
+  const toParts = to.split("/");
+  let shared = 0;
+  while (shared < fromDirs.length && fromDirs[shared] === toParts[shared]) shared++;
+  return [...fromDirs.slice(shared).map(() => ".."), ...toParts.slice(shared)].join("/");
+}
+export {
+  rnnoiseWasmPlugin
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video-react",
-  "version": "2.5.14",
+  "version": "2.5.16",
   "description": "React components for browser-based MP4 and animated-GIF export of Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -57,6 +57,10 @@
     "./media-edit": {
       "types": "./dist/media-edit/index.d.ts",
       "import": "./dist/media-edit/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.js"
     }
   },
   "files": [
@@ -77,9 +81,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.13.4",
-    "@bendyline/squisq-video": "2.4.10",
-    "@bendyline/squisq-react": "2.12.13",
+    "@bendyline/squisq": "2.13.5",
+    "@bendyline/squisq-video": "2.4.11",
+    "@bendyline/squisq-react": "2.12.15",
     "@ffmpeg/core": "0.12.10",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",