@remotion/rive 4.0.534 → 4.0.536

package/dist/cjs/RemotionRiveCanvas.d.ts

@@ -1,6 +1,6 @@
 import type { Artboard, CanvasRenderer, File, FileAsset, LinearAnimationInstance, RiveCanvas } from '@rive-app/canvas-advanced';
 import React from 'react';
-import type { EffectsProp, InteractiveBaseProps, InteractivePremountProps, InteractiveCropProps, InteractivitySchema } from 'remotion';
+import type { EffectsProp, EffectsOutputSize, InteractiveBaseProps, InteractivePremountProps, InteractiveCropProps, InteractivitySchema } from 'remotion';
 import type { RemotionRiveCanvasAlignment, RemotionRiveCanvasFit } from './map-enums.js';
 type assetLoadCallback = (asset: FileAsset, bytes: Uint8Array) => boolean;
 type onLoadCallback = (file: File) => void;
@@ -16,6 +16,7 @@ type RemotionRiveCanvasOwnProps = {
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
 };
 export type RemotionRiveCanvasProps = RemotionRiveCanvasOwnProps & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps;
 export type RiveCanvasRef = {

package/dist/cjs/RemotionRiveCanvas.js

@@ -1,37 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemotionRiveCanvas = exports.riveCanvasSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const canvas_advanced_1 = __importDefault(require("@rive-app/canvas-advanced"));
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const remotion_1 = require("remotion");
 const map_enums_js_1 = require("./map-enums.js");
 const { runEffectChain, useEffectChainState, useMemoizedEffectDefinitions, useMemoizedEffects, } = remotion_1.Internals;
@@ -84,14 +51,14 @@ exports.riveCanvasSchema = {
     ...remotion_1.Interactive.borderRadiusSchema,
     ...remotion_1.Interactive.cropSchema,
 };
-const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artboard: artboardName, animation: animationIndex, onLoad = null, assetLoader, enableRiveAssetCdn, className, style, effects, controls, canvasRef, }, ref) => {
-    var _a, _b;
+const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artboard: artboardName, animation: animationIndex, onLoad = null, assetLoader, enableRiveAssetCdn, className, style, effects, effectsOutputSize, controls, canvasRef, }, ref) => {
+    var _a, _b, _c;
     const { width, fps, height } = (0, remotion_1.useVideoConfig)();
     const frame = (0, remotion_1.useCurrentFrame)();
-    const [riveCanvasInstance, setRiveCanvas] = (0, react_1.useState)(null);
+    const [loadedRuntime, setLoadedRuntime] = (0, react_1.useState)(null);
+    const riveCanvasInstance = (_a = loadedRuntime === null || loadedRuntime === void 0 ? void 0 : loadedRuntime.instance) !== null && _a !== void 0 ? _a : null;
     const [err, setError] = (0, react_1.useState)(null);
     const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
-    const [handle] = (0, react_1.useState)(() => delayRender());
     const lastFrame = (0, react_1.useRef)(0);
     // Rive draws to this offscreen-style canvas; the effect chain then
     // composites from here onto the visible output canvas.
@@ -101,11 +68,11 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
         }
         return document.createElement('canvas');
     }, []);
-    const chainState = useEffectChainState();
+    const chainState = useEffectChainState(effectsOutputSize);
     const memoizedEffects = useMemoizedEffects({
         effects,
-        overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
-        videoConfigValues: (_b = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _b !== void 0 ? _b : null,
+        overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null,
+        videoConfigValues: (_c = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _c !== void 0 ? _c : null,
     });
     if (err) {
         throw err;
@@ -130,35 +97,51 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
             },
         };
     }, [rive, riveCanvasInstance]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
+        const handle = delayRender('Loading Rive runtime');
+        let cancelled = false;
         (0, canvas_advanced_1.default)({
             locateFile: () => 'https://unpkg.com/@rive-app/canvas-advanced@2.31.5/rive.wasm',
         })
             .then((riveInstance) => {
-            setRiveCanvas(riveInstance);
-            continueRender(handle);
+            if (!cancelled) {
+                setLoadedRuntime({ instance: riveInstance, handle });
+            }
         })
             .catch((newErr) => {
-            setError(newErr);
+            if (!cancelled) {
+                setError(newErr);
+            }
         });
-    }, [handle, continueRender]);
-    (0, react_1.useEffect)(() => {
-        if (!riveCanvasInstance || !sourceCanvas) {
+        return () => {
+            cancelled = true;
+            continueRender(handle);
+        };
+    }, [delayRender, continueRender]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!riveCanvasInstance || !sourceCanvas || !loadedRuntime) {
             return;
         }
+        const handle = delayRender(`Loading <RemotionRiveCanvas src="${src}"/>`);
+        continueRender(loadedRuntime.handle);
+        let cancelled = false;
+        const controller = new AbortController();
         sourceCanvas.width = width;
         sourceCanvas.height = height;
         const renderer = riveCanvasInstance.makeRenderer(sourceCanvas);
-        fetch(new Request(src))
+        fetch(new Request(src), { signal: controller.signal })
             .then((f) => f.arrayBuffer())
             .then((b) => {
-            riveCanvasInstance
+            return riveCanvasInstance
                 .load(new Uint8Array(b), assetLoader
                 ? new riveCanvasInstance.CustomFileAssetLoader({
                     loadContents: assetLoader,
                 })
                 : undefined, enableRiveAssetCdn)
                 .then((file) => {
+                if (cancelled) {
+                    return;
+                }
                 const artboard = typeof artboardName === 'string'
                     ? file.artboardByName(artboardName)
                     : typeof artboardName === 'number'
@@ -174,12 +157,20 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
                     artboard,
                     renderer,
                     file,
+                    handle,
                 });
             });
         })
             .catch((newErr) => {
-            setError(newErr);
+            if (!cancelled) {
+                setError(newErr);
+            }
         });
+        return () => {
+            cancelled = true;
+            controller.abort();
+            continueRender(handle);
+        };
     }, [
         animationIndex,
         artboardName,
@@ -191,13 +182,16 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
         sourceCanvas,
         width,
         height,
+        loadedRuntime,
+        delayRender,
+        continueRender,
     ]);
     (0, react_1.useEffect)(() => {
         if (onLoad && rive) {
             onLoad(rive.file);
         }
     }, [onLoad, rive]);
-    react_1.default.useEffect(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (!riveCanvasInstance || !rive) {
             return;
         }
@@ -245,6 +239,7 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
             return;
         }
         const effectChainHandle = delayRender(`Rendering frame at ${frame} of <RemotionRiveCanvas src="${src}"/>`);
+        continueRender(rive.handle);
         let cancelled = false;
         runEffectChain({
             state,
@@ -291,7 +286,7 @@ const RemotionRiveCanvasContentForwardRefFunction = ({ src, fit, alignment, artb
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: width, height: height, className: className, style: canvasStyle }));
 };
 const RemotionRiveCanvasContent = (0, react_1.forwardRef)(RemotionRiveCanvasContentForwardRefFunction);
-const RemotionRiveCanvasInnerForwardRefFunction = ({ src, fit = 'contain', alignment = 'center', artboard, animation, onLoad = null, assetLoader, enableRiveAssetCdn = true, className, style, effects = [], controls, durationInFrames, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, showInTimeline, hidden, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
+const RemotionRiveCanvasInnerForwardRefFunction = ({ src, fit = 'contain', alignment = 'center', artboard, animation, onLoad = null, assetLoader, enableRiveAssetCdn = true, className, style, effects = [], effectsOutputSize, controls, durationInFrames, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, showInTimeline, hidden, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
     props;
     const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
     const canvasRef = (0, react_1.useRef)(null);
@@ -317,9 +312,7 @@ const RemotionRiveCanvasInnerForwardRefFunction = ({ src, fit = 'contain', align
         style: premountingStyle,
         componentName: '<RemotionRiveCanvas />',
     });
-    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, name: name !== null && name !== void 0 ? name : '<RemotionRiveCanvas>', _remotionInternalDocumentationLink: name === undefined
-                ? 'https://www.remotion.dev/docs/rive/remotionrivecanvas'
-                : undefined, durationInFrames: durationInFrames, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(RemotionRiveCanvasContent, { ref: ref, src: src, fit: fit, alignment: alignment, artboard: artboard, animation: animation, onLoad: onLoad, assetLoader: assetLoader, enableRiveAssetCdn: enableRiveAssetCdn, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, controls: controls, canvasRef: canvasRef }) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, name: name !== null && name !== void 0 ? name : '<RemotionRiveCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/rive/remotionrivecanvas", durationInFrames: durationInFrames, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(RemotionRiveCanvasContent, { ref: ref, src: src, fit: fit, alignment: alignment, artboard: artboard, animation: animation, onLoad: onLoad, assetLoader: assetLoader, enableRiveAssetCdn: enableRiveAssetCdn, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, controls: controls, canvasRef: canvasRef }) }) }));
 };
 const RemotionRiveCanvasInner = (0, react_1.forwardRef)(RemotionRiveCanvasInnerForwardRefFunction);
 exports.RemotionRiveCanvas = remotion_1.Interactive.withSchema({

package/dist/esm/index.mjs

@@ -1,9 +1,10 @@
 // src/RemotionRiveCanvas.tsx
 import riveCanvas from "@rive-app/canvas-advanced";
-import React, {
+import {
   forwardRef,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState
@@ -135,15 +136,16 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
   className,
   style,
   effects,
+  effectsOutputSize,
   controls,
   canvasRef
 }, ref) => {
   const { width, fps, height } = useVideoConfig();
   const frame = useCurrentFrame();
-  const [riveCanvasInstance, setRiveCanvas] = useState(null);
+  const [loadedRuntime, setLoadedRuntime] = useState(null);
+  const riveCanvasInstance = loadedRuntime?.instance ?? null;
   const [err, setError] = useState(null);
   const { delayRender, continueRender } = useDelayRender();
-  const [handle] = useState(() => delayRender());
   const lastFrame = useRef(0);
   const sourceCanvas = useMemo(() => {
     if (typeof document === "undefined") {
@@ -151,7 +153,7 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
     }
     return document.createElement("canvas");
   }, []);
-  const chainState = useEffectChainState();
+  const chainState = useEffectChainState(effectsOutputSize);
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: controls?.overrideId ?? null,
@@ -177,39 +179,63 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
       }
     };
   }, [rive, riveCanvasInstance]);
-  useEffect(() => {
+  useLayoutEffect(() => {
+    const handle = delayRender("Loading Rive runtime");
+    let cancelled = false;
     riveCanvas({
       locateFile: () => "https://unpkg.com/@rive-app/canvas-advanced@2.31.5/rive.wasm"
     }).then((riveInstance) => {
-      setRiveCanvas(riveInstance);
-      continueRender(handle);
+      if (!cancelled) {
+        setLoadedRuntime({ instance: riveInstance, handle });
+      }
     }).catch((newErr) => {
-      setError(newErr);
+      if (!cancelled) {
+        setError(newErr);
+      }
     });
-  }, [handle, continueRender]);
-  useEffect(() => {
-    if (!riveCanvasInstance || !sourceCanvas) {
+    return () => {
+      cancelled = true;
+      continueRender(handle);
+    };
+  }, [delayRender, continueRender]);
+  useLayoutEffect(() => {
+    if (!riveCanvasInstance || !sourceCanvas || !loadedRuntime) {
       return;
     }
+    const handle = delayRender(`Loading <RemotionRiveCanvas src="${src}"/>`);
+    continueRender(loadedRuntime.handle);
+    let cancelled = false;
+    const controller = new AbortController;
     sourceCanvas.width = width;
     sourceCanvas.height = height;
     const renderer = riveCanvasInstance.makeRenderer(sourceCanvas);
-    fetch(new Request(src)).then((f) => f.arrayBuffer()).then((b) => {
-      riveCanvasInstance.load(new Uint8Array(b), assetLoader ? new riveCanvasInstance.CustomFileAssetLoader({
+    fetch(new Request(src), { signal: controller.signal }).then((f) => f.arrayBuffer()).then((b) => {
+      return riveCanvasInstance.load(new Uint8Array(b), assetLoader ? new riveCanvasInstance.CustomFileAssetLoader({
         loadContents: assetLoader
       }) : undefined, enableRiveAssetCdn).then((file) => {
+        if (cancelled) {
+          return;
+        }
         const artboard = typeof artboardName === "string" ? file.artboardByName(artboardName) : typeof artboardName === "number" ? file.artboardByIndex(artboardName) : file.defaultArtboard();
         const animation = new riveCanvasInstance.LinearAnimationInstance(typeof animationIndex === "number" ? artboard.animationByIndex(animationIndex) : typeof animationIndex === "string" ? artboard.animationByName(animationIndex) : artboard.animationByIndex(0), artboard);
         setRive({
           animation,
           artboard,
           renderer,
-          file
+          file,
+          handle
         });
       });
     }).catch((newErr) => {
-      setError(newErr);
+      if (!cancelled) {
+        setError(newErr);
+      }
     });
+    return () => {
+      cancelled = true;
+      controller.abort();
+      continueRender(handle);
+    };
   }, [
     animationIndex,
     artboardName,
@@ -220,14 +246,17 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
     enableRiveAssetCdn,
     sourceCanvas,
     width,
-    height
+    height,
+    loadedRuntime,
+    delayRender,
+    continueRender
   ]);
   useEffect(() => {
     if (onLoad && rive) {
       onLoad(rive.file);
     }
   }, [onLoad, rive]);
-  React.useEffect(() => {
+  useLayoutEffect(() => {
     if (!riveCanvasInstance || !rive) {
       return;
     }
@@ -266,6 +295,7 @@ var RemotionRiveCanvasContentForwardRefFunction = ({
       return;
     }
     const effectChainHandle = delayRender(`Rendering frame at ${frame} of <RemotionRiveCanvas src="${src}"/>`);
+    continueRender(rive.handle);
     let cancelled = false;
     runEffectChain({
       state,
@@ -328,6 +358,7 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
   className,
   style,
   effects = [],
+  effectsOutputSize,
   controls,
   durationInFrames,
   name,
@@ -393,7 +424,7 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
       hidden,
       showInTimeline,
       name: name ?? "<RemotionRiveCanvas>",
-      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/rive/remotionrivecanvas" : undefined,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/rive/remotionrivecanvas",
       durationInFrames,
       controls,
       _remotionInternalEffects: memoizedEffectDefinitions,
@@ -415,6 +446,7 @@ var RemotionRiveCanvasInnerForwardRefFunction = ({
         className,
         style: croppedStyle ?? undefined,
         effects,
+        effectsOutputSize: effectsOutputSize ?? null,
         controls,
         canvasRef
       })

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/rive"
 	},
 	"name": "@remotion/rive",
-	"version": "4.0.534",
+	"version": "4.0.536",
 	"description": "Embed Rive animations in a Remotion video",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -23,7 +23,7 @@
 	"license": "See LICENSE.md",
 	"dependencies": {
 		"@rive-app/canvas-advanced": "2.31.5",
-		"remotion": "4.0.534"
+		"remotion": "4.0.536"
 	},
 	"peerDependencies": {
 		"react": ">=18.2.0",
@@ -32,7 +32,7 @@
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/eslint-config-internal": "4.0.534",
+		"@remotion/eslint-config-internal": "4.0.536",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},