@remotion/cli 4.1.0-alpha5 → 4.1.0-alpha8

package/dist/editor/components/Timeline/TimelineDragHandler.js

@@ -9,7 +9,6 @@ const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timelin
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const in_out_1 = require("../../state/in-out");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
-const FramePersistor_1 = require("../FramePersistor");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
@@ -17,6 +16,7 @@ const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineInOutPointerHandle_1 = require("./TimelineInOutPointerHandle");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const TimelineInOutToggle_1 = require("../TimelineInOutToggle");
 const inner = {
     overflowY: 'auto',
     overflowX: 'hidden',
@@ -50,6 +50,7 @@ const Inner = () => {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
     const [inOutDragging, setInOutDragging] = (0, react_1.useState)({
         dragging: false,
     });
@@ -254,11 +255,12 @@ const Inner = () => {
             width,
             extrapolate: 'clamp',
         });
-        (0, FramePersistor_1.persistCurrentFrame)(frame);
+        remotion_1.Internals.persistCurrentFrame(frame, videoConfig.id);
+        setFrame((c) => ({ ...c, [videoConfig.id]: frame }));
         if (dragging.wasPlaying) {
             play();
         }
-    }, [dragging, left, play, videoConfig, width]);
+    }, [dragging, left, play, videoConfig, setFrame, width]);
     const onPointerUpInOut = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return;
@@ -277,29 +279,53 @@ const Inner = () => {
         });
         if (inOutDragging.dragging === 'in') {
             if (frame < 1) {
-                return setInAndOutFrames((prev) => ({
-                    ...prev,
-                    inFrame: null,
-                }));
+                return setInAndOutFrames((prev) => {
+                    var _a;
+                    return ({
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                            inFrame: null,
+                        },
+                    });
+                });
             }
             const maxFrame = outFrame === null ? Infinity : outFrame - 1;
-            setInAndOutFrames((prev) => ({
-                ...prev,
-                inFrame: Math.min(maxFrame, frame),
-            }));
+            setInAndOutFrames((prev) => {
+                var _a;
+                return ({
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                        inFrame: Math.min(maxFrame, frame),
+                    },
+                });
+            });
         }
         else {
             if (frame > videoConfig.durationInFrames - 2) {
-                return setInAndOutFrames((prev) => ({
-                    ...prev,
-                    outFrame: null,
-                }));
+                return setInAndOutFrames((prev) => {
+                    var _a;
+                    return ({
+                        ...prev,
+                        [videoConfig.id]: {
+                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                            outFrame: null,
+                        },
+                    });
+                });
             }
             const minFrame = inFrame === null ? -Infinity : inFrame + 1;
-            setInAndOutFrames((prev) => ({
-                ...prev,
-                outFrame: Math.max(minFrame, frame),
-            }));
+            setInAndOutFrames((prev) => {
+                var _a;
+                return ({
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
+                        outFrame: Math.max(minFrame, frame),
+                    },
+                });
+            });
         }
     }, [
         inFrame,

package/dist/editor/components/TimelineInOutToggle.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { InOutValue } from '../state/in-out';
 export declare const inOutHandles: React.RefObject<{
     inMarkClick: (e: KeyboardEvent | null) => void;
     outMarkClick: (e: KeyboardEvent | null) => void;
     clearMarks: () => void;
-    setMarks: (marks: [number | null, number | null]) => void;
 }>;
+export declare const defaultInOutValue: InOutValue;
 export declare const TimelineInOutPointToggle: React.FC;

package/dist/editor/components/TimelineInOutToggle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineInOutPointToggle = exports.inOutHandles = void 0;
+exports.TimelineInOutPointToggle = exports.defaultInOutValue = exports.inOutHandles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -10,7 +10,6 @@ const is_current_selected_still_1 = require("../helpers/is-current-selected-stil
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
-const marks_1 = require("../state/marks");
 const ControlButton_1 = require("./ControlButton");
 const getTooltipText = (pointType, key) => [
     `Mark ${pointType}`,
@@ -24,19 +23,22 @@ const style = {
     height: 16,
 };
 exports.inOutHandles = (0, react_1.createRef)();
+exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
-    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const onInOutClear = (0, react_1.useCallback)(() => {
-        setInAndOutFrames(() => {
+    const onInOutClear = (0, react_1.useCallback)((composition) => {
+        setInAndOutFrames((prev) => {
             return {
-                inFrame: null,
-                outFrame: null,
+                ...prev,
+                [composition]: {
+                    inFrame: null,
+                    outFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames]);
@@ -45,35 +47,51 @@ const TimelineInOutPointToggle = () => {
             return null;
         }
         if (e === null || e === void 0 ? void 0 : e.shiftKey) {
-            setInAndOutFrames((f) => {
+            setInAndOutFrames((prev) => {
+                var _a;
                 return {
-                    ...f,
-                    inFrame: null,
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
                 };
             });
             return null;
         }
         setInAndOutFrames((prev) => {
-            const biggestPossible = prev.outFrame === null ? Infinity : prev.outFrame - 1;
+            var _a, _b, _c, _d, _e;
+            const prevOut = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.outFrame;
+            const biggestPossible = prevOut === undefined || prevOut === null ? Infinity : prevOut - 1;
             const selected = Math.min(timelinePosition, biggestPossible);
             if (selected === 0) {
                 return {
                     ...prev,
-                    inFrame: null,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
                 };
             }
-            if (prev.inFrame !== null) {
+            const prevIn = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.inFrame;
+            if (prevIn !== null && prevIn !== undefined) {
                 // Disable if already at this position
-                if (prev.inFrame === selected) {
+                if (prevIn === selected) {
                     return {
                         ...prev,
-                        inFrame: null,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            inFrame: null,
+                        },
                     };
                 }
             }
             return {
                 ...prev,
-                inFrame: selected,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    inFrame: selected,
+                },
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
@@ -83,9 +101,13 @@ const TimelineInOutPointToggle = () => {
         }
         e.preventDefault();
         setInAndOutFrames((f) => {
+            var _a;
             return {
                 ...f,
-                inFrame: null,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    inFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames, videoConfig]);
@@ -95,9 +117,13 @@ const TimelineInOutPointToggle = () => {
         }
         e === null || e === void 0 ? void 0 : e.preventDefault();
         setInAndOutFrames((f) => {
+            var _a;
             return {
                 ...f,
-                outFrame: null,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    outFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames, videoConfig]);
@@ -107,37 +133,59 @@ const TimelineInOutPointToggle = () => {
         }
         if (e === null || e === void 0 ? void 0 : e.shiftKey) {
             setInAndOutFrames((f) => {
+                var _a;
                 return {
                     ...f,
-                    outFrame: null,
+                    [videoConfig.id]: {
+                        ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
                 };
             });
             return;
         }
         setInAndOutFrames((prev) => {
-            const smallestPossible = prev.inFrame === null ? -Infinity : prev.inFrame + 1;
+            var _a, _b, _c, _d, _e;
+            const prevInFrame = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.inFrame;
+            const smallestPossible = prevInFrame === null || prevInFrame === undefined
+                ? -Infinity
+                : prevInFrame + 1;
             const selected = Math.max(timelinePosition, smallestPossible);
             if (selected === videoConfig.durationInFrames - 1) {
                 return {
                     ...prev,
-                    outFrame: null,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
                 };
             }
-            if (prev.outFrame !== null) {
-                if (prev.outFrame === selected) {
+            const prevOut = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.outFrame;
+            if (prevOut !== null && prevOut !== undefined) {
+                if (prevOut === selected) {
                     return {
                         ...prev,
-                        outFrame: null,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            outFrame: null,
+                        },
                     };
                 }
             }
             return {
                 ...prev,
-                outFrame: selected,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    outFrame: selected,
+                },
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    const confId = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.id;
     (0, react_1.useEffect)(() => {
+        if (!confId) {
+            return;
+        }
         const iKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'i',
@@ -162,7 +210,7 @@ const TimelineInOutPointToggle = () => {
             event: 'keypress',
             key: 'x',
             callback: () => {
-                onInOutClear();
+                onInOutClear(confId);
             },
             commandCtrlKey: false,
             preventDefault: true,
@@ -173,52 +221,19 @@ const TimelineInOutPointToggle = () => {
             iKey.unregister();
             xKey.unregister();
         };
-    }, [keybindings, onInMark, onInOutClear, onOutMark]);
-    (0, react_1.useEffect)(() => {
-        if (!currentComposition || !videoConfig) {
-            return;
-        }
-        (0, marks_1.persistMarks)(currentComposition, videoConfig.durationInFrames, [
-            inFrame,
-            outFrame,
-        ]);
-    }, [currentComposition, inFrame, outFrame, videoConfig]);
-    // If duration changes and it goes out of range, we reset
-    (0, react_1.useEffect)(() => {
-        if (outFrame === null) {
-            return;
-        }
-        if (!videoConfig) {
-            return;
-        }
-        if (outFrame >= videoConfig.durationInFrames - 1) {
-            onInOutClear();
-        }
-    }, [onInOutClear, outFrame, videoConfig]);
-    (0, react_1.useEffect)(() => {
-        if (inFrame === null) {
-            return;
-        }
-        if (!videoConfig) {
-            return;
-        }
-        if (inFrame >= videoConfig.durationInFrames - 1) {
-            onInOutClear();
-        }
-    }, [onInOutClear, inFrame, videoConfig]);
+    }, [confId, keybindings, onInMark, onInOutClear, onOutMark]);
     (0, react_1.useImperativeHandle)(exports.inOutHandles, () => {
         return {
-            clearMarks: onInOutClear,
+            clearMarks: () => {
+                if (!confId) {
+                    return;
+                }
+                onInOutClear(confId);
+            },
             inMarkClick: onInMark,
             outMarkClick: onOutMark,
-            setMarks: ([newInFrame, newOutFrame]) => {
-                setInAndOutFrames({
-                    inFrame: newInFrame,
-                    outFrame: newOutFrame,
-                });
-            },
         };
-    }, [onInMark, onInOutClear, onOutMark, setInAndOutFrames]);
+    }, [confId, onInMark, onInOutClear, onOutMark]);
     if (isStill) {
         return null;
     }

package/dist/editor/helpers/is-composition-still.d.ts

@@ -1,3 +1,3 @@
 export declare const isCompositionStill: (comp: {
-    durationInFrames: number;
+    durationInFrames: number | undefined;
 } | null) => boolean;

package/dist/editor/helpers/is-current-selected-still.js

@@ -13,16 +13,15 @@ const useIsStill = () => {
 };
 exports.useIsStill = useIsStill;
 const useDimensions = () => {
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const selected = (0, react_1.useMemo)(() => compositions.find((c) => c.id === currentComposition), [compositions, currentComposition]);
+    const config = remotion_1.Internals.useUnsafeVideoConfig();
     return (0, react_1.useMemo)(() => {
-        if (!selected) {
+        if (!config) {
             return null;
         }
         return {
-            width: selected.width,
-            height: selected.height,
+            width: config.width,
+            height: config.height,
         };
-    }, [selected]);
+    }, [config]);
 };
 exports.useDimensions = useDimensions;

package/dist/editor/icons/keys.js

@@ -4,6 +4,7 @@ exports.ArrowRight = exports.ArrowLeft = exports.ShiftIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const iconStyle = {
     width: 10,
+    display: 'inline',
 };
 const ShiftIcon = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M48.048 304h73.798v128c0 26.51 21.49 48 48 48h108.308c26.51 0 48-21.49 48-48V304h73.789c42.638 0 64.151-51.731 33.941-81.941l-175.943-176c-18.745-18.745-49.137-18.746-67.882 0l-175.952 176C-16.042 252.208 5.325 304 48.048 304zM224 80l176 176H278.154v176H169.846V256H48L224 80z" }) }));

package/dist/editor/state/in-out.d.ts

@@ -1,12 +1,13 @@
 import type React from 'react';
-export type TimelineInOutContextValue = {
+export type InOutValue = {
     inFrame: number | null;
     outFrame: number | null;
 };
+export type TimelineInOutContextValue = Record<string, InOutValue>;
 export type SetTimelineInOutContextValue = {
     setInAndOutFrames: (u: React.SetStateAction<TimelineInOutContextValue>) => void;
 };
 export declare const TimelineInOutContext: React.Context<TimelineInOutContextValue>;
 export declare const SetTimelineInOutContext: React.Context<SetTimelineInOutContextValue>;
-export declare const useTimelineInOutFramePosition: () => TimelineInOutContextValue;
+export declare const useTimelineInOutFramePosition: () => InOutValue;
 export declare const useTimelineSetInOutFramePosition: () => SetTimelineInOutContextValue;

package/dist/editor/state/in-out.js

@@ -2,18 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTimelineSetInOutFramePosition = exports.useTimelineInOutFramePosition = exports.SetTimelineInOutContext = exports.TimelineInOutContext = void 0;
 const react_1 = require("react");
-exports.TimelineInOutContext = (0, react_1.createContext)({
-    inFrame: null,
-    outFrame: null,
-});
+const remotion_1 = require("remotion");
+exports.TimelineInOutContext = (0, react_1.createContext)({});
 exports.SetTimelineInOutContext = (0, react_1.createContext)({
     setInAndOutFrames: () => {
         throw new Error('default');
     },
 });
 const useTimelineInOutFramePosition = () => {
+    var _a, _b, _c, _d;
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const state = (0, react_1.useContext)(exports.TimelineInOutContext);
-    return state;
+    if (!videoConfig) {
+        return { inFrame: null, outFrame: null };
+    }
+    const maxFrame = videoConfig.durationInFrames - 1;
+    const actualInFrame = (_b = (_a = state[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.inFrame) !== null && _b !== void 0 ? _b : null;
+    const actualOutFrame = (_d = (_c = state[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.outFrame) !== null && _d !== void 0 ? _d : null;
+    return {
+        inFrame: actualInFrame === null
+            ? null
+            : actualInFrame >= maxFrame
+                ? null
+                : actualInFrame,
+        outFrame: actualOutFrame === null
+            ? null
+            : actualOutFrame >= maxFrame
+                ? null
+                : actualOutFrame,
+    };
 };
 exports.useTimelineInOutFramePosition = useTimelineInOutFramePosition;
 const useTimelineSetInOutFramePosition = () => {

package/dist/editor/state/marks.d.ts

@@ -1,2 +1,3 @@
-export declare const persistMarks: (comp: string, durationInFrames: number, marks: [number | null, number | null]) => void;
-export declare const loadMarks: (comp: string, durationInFrames: number) => [number | null, number | null];
+import type { TimelineInOutContextValue } from './in-out';
+export declare const persistMarks: (marks: TimelineInOutContextValue) => void;
+export declare const loadMarks: () => TimelineInOutContextValue;

package/dist/editor/state/marks.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadMarks = exports.persistMarks = void 0;
-const localStorageKey = (comp, durationInFrames) => `remotion.editor.marks.${comp}.${durationInFrames}`;
-const persistMarks = (comp, durationInFrames, marks) => {
-    localStorage.setItem(localStorageKey(comp, durationInFrames), JSON.stringify(marks));
+const localStorageKey = () => `remotion.editor.marksv2`;
+const persistMarks = (marks) => {
+    localStorage.setItem(localStorageKey(), JSON.stringify(marks));
 };
 exports.persistMarks = persistMarks;
-const loadMarks = (comp, durationInFrames) => {
-    const item = localStorage.getItem(localStorageKey(comp, durationInFrames));
+const loadMarks = () => {
+    const item = localStorage.getItem(localStorageKey());
     if (item === null) {
-        return [null, null];
+        return {};
     }
     return JSON.parse(item);
 };

package/dist/error-with-stack-frame.d.ts

@@ -0,0 +1,19 @@
+import type { Page, SymbolicatedStackFrame } from '@remotion/renderer';
+export declare class ErrorWithStackFrame extends Error {
+    symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
+    frame: number | null;
+    name: string;
+    delayRenderCall: SymbolicatedStackFrame[] | null;
+    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }: {
+        message: string;
+        symbolicatedStackFrames: SymbolicatedStackFrame[] | null;
+        frame: number | null;
+        name: string;
+        delayRenderCall: SymbolicatedStackFrame[] | null;
+    });
+}
+export declare const handleJavascriptException: ({ page, onError, frame, }: {
+    page: Page;
+    frame: number | null;
+    onError: (err: Error) => void;
+}) => () => void;

package/dist/error-with-stack-frame.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleJavascriptException = exports.ErrorWithStackFrame = void 0;
+const remotion_1 = require("remotion");
+const renderer_1 = require("@remotion/renderer");
+const log_1 = require("./log");
+class ErrorWithStackFrame extends Error {
+    constructor({ message, symbolicatedStackFrames, frame, name, delayRenderCall, }) {
+        super(message);
+        this.symbolicatedStackFrames = symbolicatedStackFrames;
+        this.frame = frame;
+        this.name = name;
+        this.delayRenderCall = delayRenderCall;
+    }
+}
+exports.ErrorWithStackFrame = ErrorWithStackFrame;
+const cleanUpErrorMessage = (exception) => {
+    var _a, _b, _c, _d;
+    let errorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
+    if (!errorMessage) {
+        return null;
+    }
+    const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
+    const prefix = `${errorType}: `;
+    if (errorMessage.startsWith(prefix)) {
+        errorMessage = errorMessage.substring(prefix.length);
+    }
+    const frames = (_d = (_c = exception.exceptionDetails.stackTrace) === null || _c === void 0 ? void 0 : _c.callFrames.length) !== null && _d !== void 0 ? _d : 0;
+    const split = errorMessage.split('\n');
+    return split.slice(0, Math.max(1, split.length - frames)).join('\n');
+};
+const removeDelayRenderStack = (message) => {
+    const index = message.indexOf(remotion_1.Internals.DELAY_RENDER_CALLSTACK_TOKEN);
+    if (index === -1) {
+        return message;
+    }
+    return message.substring(0, index);
+};
+const callFrameToStackFrame = (callFrame) => {
+    return {
+        columnNumber: callFrame.columnNumber,
+        fileName: callFrame.url,
+        functionName: callFrame.functionName,
+        lineNumber: callFrame.lineNumber,
+    };
+};
+const handleJavascriptException = ({ page, onError, frame, }) => {
+    const client = page._client();
+    const handler = (exception) => {
+        var _a, _b, _c;
+        const rawErrorMessage = (_a = exception.exceptionDetails.exception) === null || _a === void 0 ? void 0 : _a.description;
+        const cleanErrorMessage = cleanUpErrorMessage(exception);
+        if (!cleanErrorMessage) {
+            log_1.Log.error(exception);
+            const err = new Error(rawErrorMessage);
+            err.stack = rawErrorMessage;
+            onError(err);
+            return;
+        }
+        if (!exception.exceptionDetails.stackTrace) {
+            const err = new Error(removeDelayRenderStack(cleanErrorMessage));
+            err.stack = rawErrorMessage;
+            onError(err);
+            return;
+        }
+        const errorType = (_b = exception.exceptionDetails.exception) === null || _b === void 0 ? void 0 : _b.className;
+        const symbolicatedErr = new renderer_1.RenderInternals.SymbolicateableError({
+            message: removeDelayRenderStack(cleanErrorMessage),
+            stackFrame: exception.exceptionDetails.stackTrace.callFrames.map((f) => callFrameToStackFrame(f)),
+            frame,
+            name: errorType,
+            stack: (_c = exception.exceptionDetails.exception) === null || _c === void 0 ? void 0 : _c.description,
+        });
+        onError(symbolicatedErr);
+    };
+    client.on('Runtime.exceptionThrown', handler);
+    return () => {
+        client.off('Runtime.exceptionThrown', handler);
+    };
+};
+exports.handleJavascriptException = handleJavascriptException;

package/dist/get-composition-id.d.ts

@@ -1,9 +1,9 @@
 import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, LogLevel, RemotionServer } from '@remotion/renderer';
 import type { VideoConfig } from 'remotion';
-export declare const getCompositionId: ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }: {
+export declare const getCompositionId: ({ args, compositionIdFromUi, serializedInputPropsWithCustomSchema, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }: {
     args: string[];
     compositionIdFromUi: string | null;
-    inputProps: Record<string, unknown>;
+    serializedInputPropsWithCustomSchema: string;
     puppeteerInstance: HeadlessBrowser | undefined;
     envVariables: Record<string, string>;
     timeoutInMilliseconds: number;