@remotion/web-renderer 4.0.372 → 4.0.374

package/dist/composable.d.ts

@@ -0,0 +1,7 @@
+export type Composable = {
+    type: 'canvas';
+    element: HTMLCanvasElement;
+} | {
+    type: 'svg';
+    element: SVGSVGElement;
+};

package/dist/composable.js

@@ -0,0 +1 @@
+export {};

package/dist/compose.d.ts

@@ -1,6 +1,6 @@
-export type Composable = HTMLCanvasElement;
+import type { Composable } from './composable';
 export declare const compose: ({ composables, width, height, }: {
     composables: Composable[];
     width: number;
     height: number;
-}) => OffscreenCanvas;
+}) => Promise<OffscreenCanvas>;

package/dist/compose.js

@@ -1,7 +1,32 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.compose = void 0;
-const compose = ({ composables, width, height, }) => {
+const svgToImageBitmap = (svg) => {
+    const computedStyle = getComputedStyle(svg);
+    const { transform: originalTransform } = computedStyle;
+    svg.style.transform = 'none';
+    const svgDimensions = svg.getBoundingClientRect();
+    svg.style.transform = originalTransform;
+    if (svgDimensions.width === 0 || svgDimensions.height === 0) {
+        return Promise.resolve(null);
+    }
+    const svgData = new XMLSerializer().serializeToString(svg);
+    return new Promise((resolve, reject) => {
+        const image = new Image(svgDimensions.width, svgDimensions.height);
+        const url = 'data:image/svg+xml;base64,' + window.btoa(svgData);
+        image.onload = function () {
+            resolve({
+                image,
+                width: svgDimensions.width,
+                height: svgDimensions.height,
+                left: svgDimensions.left,
+                top: svgDimensions.top,
+            });
+        };
+        image.onerror = () => {
+            reject(new Error('Failed to convert SVG to image'));
+        };
+        image.src = url;
+    });
+};
+export const compose = async ({ composables, width, height, }) => {
     const canvas = new OffscreenCanvas(width, height);
     const context = canvas.getContext('2d');
     if (!context) {
@@ -9,8 +34,20 @@ const compose = ({ composables, width, height, }) => {
     }
     // TODO: Consider z-index
     for (const composable of composables) {
-        context.drawImage(composable, 0, 0);
+        if (composable.type === 'canvas') {
+            const boundingClientRect = composable.element.getBoundingClientRect();
+            context.drawImage(composable.element, boundingClientRect.left, boundingClientRect.top);
+        }
+        else if (composable.type === 'svg') {
+            // This already takes care of the "transform" of the SVG
+            // but not of the transforms of the parent
+            const imageBitmap = await svgToImageBitmap(composable.element);
+            if (imageBitmap) {
+                // transform origin
+                // Don't need to get transform from SVG
+                context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top);
+            }
+        }
     }
     return canvas;
 };
-exports.compose = compose;

package/dist/esm/index.mjs

@@ -3,7 +3,35 @@ import ReactDOM from "react-dom/client";
 import { Internals } from "remotion";
 
 // src/compose.ts
-var compose = ({
+var svgToImageBitmap = (svg) => {
+  const computedStyle = getComputedStyle(svg);
+  const { transform: originalTransform } = computedStyle;
+  svg.style.transform = "none";
+  const svgDimensions = svg.getBoundingClientRect();
+  svg.style.transform = originalTransform;
+  if (svgDimensions.width === 0 || svgDimensions.height === 0) {
+    return Promise.resolve(null);
+  }
+  const svgData = new XMLSerializer().serializeToString(svg);
+  return new Promise((resolve, reject) => {
+    const image = new Image(svgDimensions.width, svgDimensions.height);
+    const url = "data:image/svg+xml;base64," + window.btoa(svgData);
+    image.onload = function() {
+      resolve({
+        image,
+        width: svgDimensions.width,
+        height: svgDimensions.height,
+        left: svgDimensions.left,
+        top: svgDimensions.top
+      });
+    };
+    image.onerror = () => {
+      reject(new Error("Failed to convert SVG to image"));
+    };
+    image.src = url;
+  });
+};
+var compose = async ({
   composables,
   width,
   height
@@ -14,7 +42,15 @@ var compose = ({
     throw new Error("Could not get context");
   }
   for (const composable of composables) {
-    context.drawImage(composable, 0, 0);
+    if (composable.type === "canvas") {
+      const boundingClientRect = composable.element.getBoundingClientRect();
+      context.drawImage(composable.element, boundingClientRect.left, boundingClientRect.top);
+    } else if (composable.type === "svg") {
+      const imageBitmap = await svgToImageBitmap(composable.element);
+      if (imageBitmap) {
+        context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top);
+      }
+    }
   }
   return canvas;
 };
@@ -25,28 +61,45 @@ var findCanvasElements = (element) => {
   const composables = [];
   Array.from(canvasElements).forEach((canvasElement) => {
     const canvas = canvasElement;
-    composables.push(canvas);
+    composables.push({
+      type: "canvas",
+      element: canvas
+    });
+  });
+  return composables;
+};
+
+// src/find-svg-elements.ts
+var findSvgElements = (element) => {
+  const svgElements = element.querySelectorAll("svg");
+  const composables = [];
+  Array.from(svgElements).forEach((svgElement) => {
+    const svg = svgElement;
+    composables.push({
+      type: "svg",
+      element: svg
+    });
   });
   return composables;
 };
 
 // src/wait-for-ready.ts
-var waitForReady = (timeoutInMilliseconds) => {
+var waitForReady = (timeoutInMilliseconds, scope) => {
   const { promise, resolve, reject } = Promise.withResolvers();
   const start = Date.now();
   const interval = setInterval(() => {
-    if (window.remotion_renderReady === true) {
+    if (scope.remotion_renderReady === true) {
       resolve(true);
       clearInterval(interval);
       return;
     }
-    if (window.remotion_cancelledError !== undefined) {
-      reject(window.remotion_cancelledError);
+    if (scope.remotion_cancelledError !== undefined) {
+      reject(scope.remotion_cancelledError);
       clearInterval(interval);
       return;
     }
     if (Date.now() - start > timeoutInMilliseconds + 3000) {
-      reject(new Error(Object.values(window.remotion_delayRenderTimeouts).map((d) => d.label).join(", ")));
+      reject(new Error(Object.values(scope.remotion_delayRenderTimeouts).map((d) => d.label).join(", ")));
       clearInterval(interval);
     }
   }, 50);
@@ -55,61 +108,35 @@ var waitForReady = (timeoutInMilliseconds) => {
 
 // src/render-still-on-web.tsx
 import { jsx } from "react/jsx-runtime";
-var renderStillOnWeb = async ({
+var COMP_ID = "markup";
+var internalRenderStillOnWeb = async ({
   Component,
   width,
   height,
   fps,
   durationInFrames,
-  frame
+  frame,
+  delayRenderTimeoutInMilliseconds,
+  logLevel
 }) => {
   const div = document.createElement("div");
   div.style.display = "flex";
   div.style.backgroundColor = "transparent";
-  div.style.position = "absolute";
+  div.style.position = "fixed";
   div.style.width = `${width}px`;
   div.style.height = `${height}px`;
+  div.style.zIndex = "-9999";
   document.body.appendChild(div);
-  const delayRenderTimeoutInMilliseconds = 1e4;
   if (!ReactDOM.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
   }
-  const compositionManagerContext = {
-    currentCompositionMetadata: {
-      durationInFrames,
-      fps,
-      height,
-      width,
-      props: {},
-      defaultCodec: null,
-      defaultOutName: null,
-      defaultVideoImageFormat: null,
-      defaultPixelFormat: null,
-      defaultProResProfile: null
-    },
-    folders: [],
-    compositions: [
-      {
-        id: "markup",
-        component: Component,
-        nonce: 0,
-        defaultProps: undefined,
-        folderName: null,
-        parentFolderName: null,
-        schema: null,
-        calculateMetadata: null,
-        durationInFrames,
-        fps,
-        height,
-        width
-      }
-    ],
-    canvasContent: {
-      type: "composition",
-      compositionId: "markup"
-    }
-  };
   const root = ReactDOM.createRoot(div);
+  const delayRenderScope = {
+    remotion_renderReady: true,
+    remotion_delayRenderTimeouts: {},
+    remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
+    remotion_attempt: 0
+  };
   root.render(/* @__PURE__ */ jsx(Internals.RemotionEnvironmentContext, {
     value: {
       isStudio: false,
@@ -118,54 +145,80 @@ var renderStillOnWeb = async ({
       isReadOnlyStudio: false,
       isClientSideRendering: true
     },
-    children: /* @__PURE__ */ jsx(Internals.RemotionRoot, {
-      audioEnabled: true,
-      videoEnabled: true,
-      logLevel: "info",
-      numberOfAudioTags: 0,
-      onlyRenderComposition: null,
-      currentCompositionMetadata: {
-        props: {},
-        durationInFrames,
-        fps,
-        height,
-        width,
-        defaultCodec: null,
-        defaultOutName: null,
-        defaultVideoImageFormat: null,
-        defaultPixelFormat: null,
-        defaultProResProfile: null
-      },
-      audioLatencyHint: "interactive",
-      children: /* @__PURE__ */ jsx(Internals.CanUseRemotionHooks, {
-        value: true,
-        children: /* @__PURE__ */ jsx(Internals.CompositionManager.Provider, {
-          value: compositionManagerContext,
-          children: /* @__PURE__ */ jsx(Component, {})
+    children: /* @__PURE__ */ jsx(Internals.DelayRenderContextType.Provider, {
+      value: delayRenderScope,
+      children: /* @__PURE__ */ jsx(Internals.CompositionManagerProvider, {
+        initialCanvasContent: {
+          type: "composition",
+          compositionId: COMP_ID
+        },
+        onlyRenderComposition: null,
+        currentCompositionMetadata: {
+          props: {},
+          durationInFrames,
+          fps,
+          height,
+          width,
+          defaultCodec: null,
+          defaultOutName: null,
+          defaultVideoImageFormat: null,
+          defaultPixelFormat: null,
+          defaultProResProfile: null
+        },
+        initialCompositions: [
+          {
+            id: COMP_ID,
+            component: Component,
+            nonce: 0,
+            defaultProps: undefined,
+            folderName: null,
+            parentFolderName: null,
+            schema: null,
+            calculateMetadata: null,
+            durationInFrames,
+            fps,
+            height,
+            width
+          }
+        ],
+        children: /* @__PURE__ */ jsx(Internals.RemotionRoot, {
+          audioEnabled: false,
+          videoEnabled: true,
+          logLevel,
+          numberOfAudioTags: 0,
+          audioLatencyHint: "interactive",
+          frameState: {
+            [COMP_ID]: frame
+          },
+          children: /* @__PURE__ */ jsx(Internals.CanUseRemotionHooks, {
+            value: true,
+            children: /* @__PURE__ */ jsx(Component, {})
+          })
         })
       })
     })
   }));
-  window.remotion_setFrame(frame, "markup", frame);
-  await waitForReady(delayRenderTimeoutInMilliseconds);
+  await waitForReady(delayRenderTimeoutInMilliseconds, delayRenderScope);
   const canvasElements = findCanvasElements(div);
-  const composed = compose({
-    composables: canvasElements,
+  const svgElements = findSvgElements(div);
+  const composed = await compose({
+    composables: [...canvasElements, ...svgElements],
     width,
     height
   });
   const imageData = await composed.convertToBlob({
     type: "image/png"
   });
-  const blob = new Blob([imageData], { type: "image/png" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = "composed.png";
-  a.click();
-  URL.revokeObjectURL(url);
   root.unmount();
   div.remove();
+  return imageData;
+};
+var renderStillOnWeb = (options) => {
+  return internalRenderStillOnWeb({
+    ...options,
+    delayRenderTimeoutInMilliseconds: options.delayRenderTimeoutInMilliseconds ?? 30000,
+    logLevel: options.logLevel ?? "info"
+  });
 };
 export {
   renderStillOnWeb

package/dist/find-canvas-elements.d.ts

@@ -1 +1,2 @@
-export declare const findCanvasElements: (element: HTMLDivElement) => HTMLCanvasElement[];
+import type { Composable } from './composable';
+export declare const findCanvasElements: (element: HTMLDivElement) => Composable[];

package/dist/find-canvas-elements.js

@@ -1,13 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findCanvasElements = void 0;
-const findCanvasElements = (element) => {
+export const findCanvasElements = (element) => {
     const canvasElements = element.querySelectorAll('canvas');
     const composables = [];
     Array.from(canvasElements).forEach((canvasElement) => {
         const canvas = canvasElement;
-        composables.push(canvas);
+        composables.push({
+            type: 'canvas',
+            element: canvas,
+        });
     });
     return composables;
 };
-exports.findCanvasElements = findCanvasElements;

package/dist/find-svg-elements.d.ts

@@ -0,0 +1,2 @@
+import type { Composable } from './composable';
+export declare const findSvgElements: (element: HTMLDivElement) => Composable[];

package/dist/find-svg-elements.js

@@ -0,0 +1,12 @@
+export const findSvgElements = (element) => {
+    const svgElements = element.querySelectorAll('svg');
+    const composables = [];
+    Array.from(svgElements).forEach((svgElement) => {
+        const svg = svgElement;
+        composables.push({
+            type: 'svg',
+            element: svg,
+        });
+    });
+    return composables;
+};

package/dist/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderStillOnWeb = void 0;
-var render_still_on_web_1 = require("./render-still-on-web");
-Object.defineProperty(exports, "renderStillOnWeb", { enumerable: true, get: function () { return render_still_on_web_1.renderStillOnWeb; } });
+export { renderStillOnWeb } from './render-still-on-web';

package/dist/render-still-on-web.d.ts

@@ -1,9 +1,17 @@
 import { type ComponentType, type LazyExoticComponent } from 'react';
-export declare const renderStillOnWeb: ({ Component, width, height, fps, durationInFrames, frame, }: {
+import type { LogLevel } from 'remotion';
+type MandatoryRenderStillOnWebOptions = {
     Component: LazyExoticComponent<ComponentType<Record<string, unknown>>> | ComponentType<Record<string, unknown>>;
     width: number;
     height: number;
     fps: number;
     durationInFrames: number;
     frame: number;
-}) => Promise<void>;
+};
+type OptionalRenderStillOnWebOptions = {
+    delayRenderTimeoutInMilliseconds: number;
+    logLevel: LogLevel;
+};
+type RenderStillOnWebOptions = MandatoryRenderStillOnWebOptions & Partial<OptionalRenderStillOnWebOptions>;
+export declare const renderStillOnWeb: (options: RenderStillOnWebOptions) => Promise<Blob>;
+export {};

package/dist/render-still-on-web.js

@@ -1,27 +1,22 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderStillOnWeb = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = __importDefault(require("react-dom/client"));
-const remotion_1 = require("remotion");
-const compose_1 = require("./compose");
-const find_canvas_elements_1 = require("./find-canvas-elements");
-const wait_for_ready_1 = require("./wait-for-ready");
-const renderStillOnWeb = async ({ Component, width, height, fps, durationInFrames, frame, }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOM from 'react-dom/client';
+import { Internals } from 'remotion';
+import { compose } from './compose';
+import { findCanvasElements } from './find-canvas-elements';
+import { findSvgElements } from './find-svg-elements';
+import { waitForReady } from './wait-for-ready';
+const COMP_ID = 'markup';
+const internalRenderStillOnWeb = async ({ Component, width, height, fps, durationInFrames, frame, delayRenderTimeoutInMilliseconds, logLevel, }) => {
     const div = document.createElement('div');
     // Match same behavior as renderEntry.tsx
     div.style.display = 'flex';
     div.style.backgroundColor = 'transparent';
-    div.style.position = 'absolute';
+    div.style.position = 'fixed';
     div.style.width = `${width}px`;
     div.style.height = `${height}px`;
+    div.style.zIndex = '-9999';
     document.body.appendChild(div);
-    // TODO: Hardcoded
-    const delayRenderTimeoutInMilliseconds = 10000;
-    if (!client_1.default.createRoot) {
+    if (!ReactDOM.createRoot) {
         throw new Error('@remotion/web-renderer requires React 18 or higher');
     }
     // TODO: Env variables
@@ -32,113 +27,84 @@ const renderStillOnWeb = async ({ Component, width, height, fps, durationInFrame
     // TODO: delayRender()
     // TODO: Video config
     // TODO: window.remotion_isPlayer
-    // TODO: Log Level
-    const compositionManagerContext = {
-        currentCompositionMetadata: {
-            durationInFrames,
-            fps,
-            height,
-            width,
-            props: {},
-            defaultCodec: null,
-            defaultOutName: null,
-            defaultVideoImageFormat: null,
-            defaultPixelFormat: null,
-            defaultProResProfile: null,
-        },
-        folders: [],
-        compositions: [
-            {
-                // TODO: Make dynamic
-                id: 'markup',
-                component: Component,
-                nonce: 0,
-                defaultProps: undefined,
-                folderName: null,
-                parentFolderName: null,
-                schema: null,
-                calculateMetadata: null,
-                durationInFrames,
-                fps,
-                height,
-                width,
-            },
-        ],
-        canvasContent: {
-            type: 'composition',
-            compositionId: 'markup',
-        },
+    const root = ReactDOM.createRoot(div);
+    const delayRenderScope = {
+        remotion_renderReady: true,
+        remotion_delayRenderTimeouts: {},
+        remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
+        remotion_attempt: 0,
     };
-    const root = client_1.default.createRoot(div);
-    root.render((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionEnvironmentContext, { value: {
+    root.render(_jsx(Internals.RemotionEnvironmentContext, { value: {
             isStudio: false,
             isRendering: true,
             isPlayer: false,
             isReadOnlyStudio: false,
             isClientSideRendering: true,
-        }, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot
-        // TODO: Hardcoded
-        , { 
-            // TODO: Hardcoded
-            audioEnabled: true, 
-            // TODO: Hardcoded
-            videoEnabled: true, 
-            // TODO: Hardcoded
-            logLevel: "info", 
-            // TODO: Hardcoded
-            numberOfAudioTags: 0, 
-            // TODO: Hardcoded
-            onlyRenderComposition: null, 
-            // TODO: Hardcoded
-            currentCompositionMetadata: {
-                // TODO: Empty
-                props: {},
-                // TODO: Hardcoded
-                durationInFrames,
-                // TODO: Hardcoded
-                fps,
-                // TODO: Hardcoded
-                height,
-                // TODO: Hardcoded
-                width,
+        }, children: _jsx(Internals.DelayRenderContextType.Provider, { value: delayRenderScope, children: _jsx(Internals.CompositionManagerProvider, { initialCanvasContent: {
+                    type: 'composition',
+                    compositionId: COMP_ID,
+                }, onlyRenderComposition: null, 
                 // TODO: Hardcoded
-                defaultCodec: null,
+                currentCompositionMetadata: {
+                    // TODO: Empty
+                    props: {},
+                    durationInFrames,
+                    fps,
+                    height,
+                    width,
+                    defaultCodec: null,
+                    defaultOutName: null,
+                    defaultVideoImageFormat: null,
+                    defaultPixelFormat: null,
+                    defaultProResProfile: null,
+                }, initialCompositions: [
+                    {
+                        id: COMP_ID,
+                        component: Component,
+                        nonce: 0,
+                        // TODO: Do we need to allow to set this?
+                        defaultProps: undefined,
+                        folderName: null,
+                        parentFolderName: null,
+                        schema: null,
+                        calculateMetadata: null,
+                        durationInFrames,
+                        fps,
+                        height,
+                        width,
+                    },
+                ], children: _jsx(Internals.RemotionRoot
                 // TODO: Hardcoded
-                defaultOutName: null,
-                // TODO: Hardcoded
-                defaultVideoImageFormat: null,
-                // TODO: Hardcoded
-                defaultPixelFormat: null,
-                // TODO: Hardcoded
-                defaultProResProfile: null,
-            }, 
-            // TODO: Hardcoded
-            audioLatencyHint: "interactive", children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooks, { value: true, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider
-                // TODO: This context is double-wrapped
                 , { 
-                    // TODO: This context is double-wrapped
-                    value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(Component, {}) }) }) }) }));
-    // TODO: Doesn't work at all 🙈
-    window.remotion_setFrame(frame, 'markup', frame);
-    await (0, wait_for_ready_1.waitForReady)(delayRenderTimeoutInMilliseconds);
-    const canvasElements = (0, find_canvas_elements_1.findCanvasElements)(div);
-    const composed = (0, compose_1.compose)({
-        composables: canvasElements,
+                    // TODO: Hardcoded
+                    audioEnabled: false, 
+                    // TODO: Hardcoded
+                    videoEnabled: true, logLevel: logLevel, numberOfAudioTags: 0, 
+                    // TODO: Hardcoded
+                    audioLatencyHint: "interactive", frameState: {
+                        [COMP_ID]: frame,
+                    }, children: _jsx(Internals.CanUseRemotionHooks, { value: true, children: _jsx(Component, {}) }) }) }) }) }));
+    // TODO: Scope cancelRender()
+    await waitForReady(delayRenderTimeoutInMilliseconds, delayRenderScope);
+    const canvasElements = findCanvasElements(div);
+    const svgElements = findSvgElements(div);
+    const composed = await compose({
+        composables: [...canvasElements, ...svgElements],
         width,
         height,
     });
     const imageData = await composed.convertToBlob({
         type: 'image/png',
     });
-    // download image
-    const blob = new Blob([imageData], { type: 'image/png' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'composed.png';
-    a.click();
-    URL.revokeObjectURL(url);
     root.unmount();
     div.remove();
+    return imageData;
+};
+export const renderStillOnWeb = (options) => {
+    var _a, _b;
+    return internalRenderStillOnWeb({
+        ...options,
+        delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
+        logLevel: (_b = options.logLevel) !== null && _b !== void 0 ? _b : 'info',
+    });
 };
-exports.renderStillOnWeb = renderStillOnWeb;

package/dist/wait-for-ready.d.ts

@@ -1 +1,2 @@
-export declare const waitForReady: (timeoutInMilliseconds: number) => Promise<unknown>;
+import type { _InternalTypes } from 'remotion';
+export declare const waitForReady: (timeoutInMilliseconds: number, scope: _InternalTypes["DelayRenderScope"]) => Promise<unknown>;

package/dist/wait-for-ready.js

@@ -1,23 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.waitForReady = void 0;
-const waitForReady = (timeoutInMilliseconds) => {
+export const waitForReady = (timeoutInMilliseconds, scope) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     const start = Date.now();
     const interval = setInterval(() => {
-        if (window.remotion_renderReady === true) {
+        if (scope.remotion_renderReady === true) {
             resolve(true);
             clearInterval(interval);
             return;
         }
-        if (window.remotion_cancelledError !== undefined) {
-            reject(window.remotion_cancelledError);
+        if (scope.remotion_cancelledError !== undefined) {
+            reject(scope.remotion_cancelledError);
             clearInterval(interval);
             return;
         }
         if (Date.now() - start > timeoutInMilliseconds + 3000) {
             // TODO: Error message should be just as good
-            reject(new Error(Object.values(window.remotion_delayRenderTimeouts)
+            reject(new Error(Object.values(scope.remotion_delayRenderTimeouts)
                 .map((d) => d.label)
                 .join(', ')));
             clearInterval(interval);
@@ -25,4 +22,3 @@ const waitForReady = (timeoutInMilliseconds) => {
     }, 50);
     return promise;
 };
-exports.waitForReady = waitForReady;

package/package.json

@@ -3,24 +3,29 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.372",
+	"version": "4.0.374",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
 		"formatting": "prettier --experimental-cli src --check",
 		"lint": "eslint src",
-		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
+		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts",
+		"test": "node src/test/execute.mjs"
 	},
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.372"
+		"remotion": "4.0.374"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.372",
+		"@remotion/eslint-config-internal": "4.0.374",
+		"@vitejs/plugin-react": "^5.1.0",
+		"@vitest/browser-webdriverio": "4.0.7",
 		"eslint": "9.19.0",
 		"react": "19.0.0",
-		"react-dom": "19.0.0"
+		"react-dom": "19.0.0",
+		"vitest": "4.0.7",
+		"vitest-browser-react": "^2.0.2"
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",