@remotion/web-renderer 4.0.374 → 4.0.375

package/dist/error-boundary.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare class ErrorBoundary extends React.Component<{
+    onError: (error: Error) => void;
+    children: React.ReactNode;
+}, {
+    hasError: Error | null;
+}> {
+    state: {
+        hasError: null;
+    };
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error): void;
+    render(): React.ReactNode;
+}

package/dist/error-boundary.js

@@ -0,0 +1,20 @@
+import React from 'react';
+export class ErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: null };
+    }
+    static getDerivedStateFromError() {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        this.props.onError(error);
+    }
+    render() {
+        if (this.state.hasError) {
+            return null;
+        }
+        return this.props.children;
+    }
+}

package/dist/esm/index.mjs

@@ -1,4 +1,5 @@
 // src/render-still-on-web.tsx
+import { flushSync } from "react-dom";
 import ReactDOM from "react-dom/client";
 import { Internals } from "remotion";
 
@@ -83,13 +84,29 @@ var findSvgElements = (element) => {
   return composables;
 };
 
+// src/with-resolvers.ts
+var withResolvers = function() {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+};
+
 // src/wait-for-ready.ts
 var waitForReady = (timeoutInMilliseconds, scope) => {
-  const { promise, resolve, reject } = Promise.withResolvers();
+  if (scope.remotion_renderReady === true) {
+    return Promise.resolve();
+  }
   const start = Date.now();
+  const { promise, resolve, reject } = withResolvers();
   const interval = setInterval(() => {
     if (scope.remotion_renderReady === true) {
-      resolve(true);
+      requestAnimationFrame(() => {
+        resolve();
+      });
       clearInterval(interval);
       return;
     }
@@ -109,7 +126,7 @@ var waitForReady = (timeoutInMilliseconds, scope) => {
 // src/render-still-on-web.tsx
 import { jsx } from "react/jsx-runtime";
 var COMP_ID = "markup";
-var internalRenderStillOnWeb = async ({
+async function internalRenderStillOnWeb({
   Component,
   width,
   height,
@@ -117,8 +134,9 @@ var internalRenderStillOnWeb = async ({
   durationInFrames,
   frame,
   delayRenderTimeoutInMilliseconds,
-  logLevel
-}) => {
+  logLevel,
+  inputProps
+}) {
   const div = document.createElement("div");
   div.style.display = "flex";
   div.style.backgroundColor = "transparent";
@@ -130,74 +148,87 @@ var internalRenderStillOnWeb = async ({
   if (!ReactDOM.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
   }
-  const root = ReactDOM.createRoot(div);
+  const { promise, resolve, reject } = withResolvers();
+  const root = ReactDOM.createRoot(div, {
+    onUncaughtError: (err) => {
+      reject(err);
+    }
+  });
   const delayRenderScope = {
     remotion_renderReady: true,
     remotion_delayRenderTimeouts: {},
     remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
     remotion_attempt: 0
   };
-  root.render(/* @__PURE__ */ jsx(Internals.RemotionEnvironmentContext, {
-    value: {
-      isStudio: false,
-      isRendering: true,
-      isPlayer: false,
-      isReadOnlyStudio: false,
-      isClientSideRendering: true
-    },
-    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
+  flushSync(() => {
+    root.render(/* @__PURE__ */ jsx(Internals.RemotionEnvironmentContext, {
+      value: {
+        isStudio: false,
+        isRendering: true,
+        isPlayer: false,
+        isReadOnlyStudio: false,
+        isClientSideRendering: true
+      },
+      children: /* @__PURE__ */ jsx(Internals.DelayRenderContextType.Provider, {
+        value: delayRenderScope,
+        children: /* @__PURE__ */ jsx(Internals.CompositionManager.Provider, {
+          value: {
+            compositions: [
+              {
+                id: COMP_ID,
+                component: Component,
+                nonce: 0,
+                defaultProps: undefined,
+                folderName: null,
+                parentFolderName: null,
+                schema: null,
+                calculateMetadata: null,
+                durationInFrames,
+                fps,
+                height,
+                width
+              }
+            ],
+            canvasContent: {
+              type: "composition",
+              compositionId: COMP_ID
+            },
+            currentCompositionMetadata: {
+              props: inputProps,
+              durationInFrames,
+              fps,
+              height,
+              width,
+              defaultCodec: null,
+              defaultOutName: null,
+              defaultVideoImageFormat: null,
+              defaultPixelFormat: null,
+              defaultProResProfile: null
+            },
+            folders: []
           },
-          children: /* @__PURE__ */ jsx(Internals.CanUseRemotionHooks, {
-            value: true,
-            children: /* @__PURE__ */ jsx(Component, {})
+          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, {
+                ...inputProps
+              })
+            })
           })
         })
       })
-    })
-  }));
+    }));
+  });
+  resolve();
+  await promise;
   await waitForReady(delayRenderTimeoutInMilliseconds, delayRenderScope);
   const canvasElements = findCanvasElements(div);
   const svgElements = findSvgElements(div);
@@ -212,7 +243,7 @@ var internalRenderStillOnWeb = async ({
   root.unmount();
   div.remove();
   return imageData;
-};
+}
 var renderStillOnWeb = (options) => {
   return internalRenderStillOnWeb({
     ...options,

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

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

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { flushSync } from 'react-dom';
 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';
+import { withResolvers } from './with-resolvers';
 const COMP_ID = 'markup';
-const internalRenderStillOnWeb = async ({ Component, width, height, fps, durationInFrames, frame, delayRenderTimeoutInMilliseconds, logLevel, }) => {
+async function internalRenderStillOnWeb({ Component, width, height, fps, durationInFrames, frame, delayRenderTimeoutInMilliseconds, logLevel, inputProps, }) {
     const div = document.createElement('div');
     // Match same behavior as renderEntry.tsx
     div.style.display = 'flex';
@@ -22,69 +24,73 @@ const internalRenderStillOnWeb = async ({ Component, width, height, fps, duratio
     // TODO: Env variables
     // TODO: Input Props
     // TODO: Default props
+    // TODO: getInputProps()
     // TODO: calculateMetadata()
     // TODO: getRemotionEnvironment()
     // TODO: delayRender()
     // TODO: Video config
-    // TODO: window.remotion_isPlayer
-    const root = ReactDOM.createRoot(div);
+    const { promise, resolve, reject } = withResolvers();
+    // TODO: This might not work in React 18
+    const root = ReactDOM.createRoot(div, {
+        onUncaughtError: (err) => {
+            reject(err);
+        },
+    });
     const delayRenderScope = {
         remotion_renderReady: true,
         remotion_delayRenderTimeouts: {},
         remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
         remotion_attempt: 0,
     };
-    root.render(_jsx(Internals.RemotionEnvironmentContext, { value: {
-            isStudio: false,
-            isRendering: true,
-            isPlayer: false,
-            isReadOnlyStudio: false,
-            isClientSideRendering: true,
-        }, children: _jsx(Internals.DelayRenderContextType.Provider, { value: delayRenderScope, children: _jsx(Internals.CompositionManagerProvider, { initialCanvasContent: {
-                    type: 'composition',
-                    compositionId: COMP_ID,
-                }, onlyRenderComposition: null, 
-                // TODO: Hardcoded
-                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
-                , { 
-                    // 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()
+    flushSync(() => {
+        root.render(_jsx(Internals.RemotionEnvironmentContext, { value: {
+                isStudio: false,
+                isRendering: true,
+                isPlayer: false,
+                isReadOnlyStudio: false,
+                isClientSideRendering: true,
+            }, children: _jsx(Internals.DelayRenderContextType.Provider, { value: delayRenderScope, children: _jsx(Internals.CompositionManager.Provider, { value: {
+                        compositions: [
+                            {
+                                id: COMP_ID,
+                                // @ts-expect-error
+                                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,
+                            },
+                        ],
+                        canvasContent: {
+                            type: 'composition',
+                            compositionId: COMP_ID,
+                        },
+                        currentCompositionMetadata: {
+                            props: inputProps,
+                            durationInFrames,
+                            fps,
+                            height,
+                            width,
+                            defaultCodec: null,
+                            defaultOutName: null,
+                            defaultVideoImageFormat: null,
+                            defaultPixelFormat: null,
+                            defaultProResProfile: null,
+                        },
+                        folders: [],
+                    }, children: _jsx(Internals.RemotionRoot, { audioEnabled: false, videoEnabled: true, logLevel: logLevel, numberOfAudioTags: 0, audioLatencyHint: "interactive", frameState: {
+                            [COMP_ID]: frame,
+                        }, children: _jsx(Internals.CanUseRemotionHooks, { value: true, children: _jsx(Component, { ...inputProps }) }) }) }) }) }));
+    });
+    resolve();
+    await promise;
     await waitForReady(delayRenderTimeoutInMilliseconds, delayRenderScope);
     const canvasElements = findCanvasElements(div);
     const svgElements = findSvgElements(div);
@@ -99,7 +105,7 @@ const internalRenderStillOnWeb = async ({ Component, width, height, fps, duratio
     root.unmount();
     div.remove();
     return imageData;
-};
+}
 export const renderStillOnWeb = (options) => {
     var _a, _b;
     return internalRenderStillOnWeb({

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

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

package/dist/wait-for-ready.js

@@ -1,9 +1,16 @@
+import { withResolvers } from './with-resolvers';
 export const waitForReady = (timeoutInMilliseconds, scope) => {
-    const { promise, resolve, reject } = Promise.withResolvers();
+    if (scope.remotion_renderReady === true) {
+        return Promise.resolve();
+    }
     const start = Date.now();
+    const { promise, resolve, reject } = withResolvers();
     const interval = setInterval(() => {
         if (scope.remotion_renderReady === true) {
-            resolve(true);
+            // Wait for useEffects() to apply
+            requestAnimationFrame(() => {
+                resolve();
+            });
             clearInterval(interval);
             return;
         }

package/dist/with-resolvers.d.ts

@@ -0,0 +1,10 @@
+export interface WithResolvers<T> {
+    promise: Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: any) => void;
+}
+export declare const withResolvers: <T>() => {
+    promise: Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: any) => void;
+};

package/dist/with-resolvers.js

@@ -0,0 +1,9 @@
+export const withResolvers = function () {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return { promise, resolve: resolve, reject: reject };
+};

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.374",
+	"version": "4.0.375",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -15,10 +15,11 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.374"
+		"remotion": "4.0.375"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.374",
+		"@remotion/eslint-config-internal": "4.0.375",
+		"@remotion/player": "4.0.375",
 		"@vitejs/plugin-react": "^5.1.0",
 		"@vitest/browser-webdriverio": "4.0.7",
 		"eslint": "9.19.0",