@remotion/cli 4.1.0-alpha7 → 4.1.0-alpha9

package/dist/benchmark.js

@@ -18,6 +18,7 @@ const setup_cache_1 = require("./setup-cache");
 const should_use_non_overlaying_logger_1 = require("./should-use-non-overlaying-logger");
 const show_compositions_picker_1 = require("./show-compositions-picker");
 const truthy_1 = require("./truthy");
+const remotion_1 = require("remotion");
 const DEFAULT_RUNS = 3;
 const getValidConcurrency = (cliConcurrency) => {
     const { concurrencies } = parse_command_line_1.parsedCli;
@@ -125,9 +126,14 @@ const benchmarkCommand = async (remotionRoot, args) => {
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;
+    const serializedInputPropsWithCustomSchema = remotion_1.Internals.serializeJSONWithDate({
+        data: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        indent: undefined,
+        staticBase: null,
+    }).serializedString;
     const comps = await renderer_1.RenderInternals.internalGetCompositions({
         serveUrlOrWebpackUrl: bundleLocation,
-        inputProps,
+        serializedInputPropsWithCustomSchema,
         envVariables,
         chromiumOptions,
         timeoutInMilliseconds: puppeteerTimeout,
@@ -191,7 +197,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
                     codec,
                     uiImageFormat: null,
                 }),
-                inputProps,
+                serializedInputPropsWithCustomSchema,
                 overwrite,
                 pixelFormat,
                 proResProfile,
@@ -223,6 +229,11 @@ const benchmarkCommand = async (remotionRoot, args) => {
                 onStart: () => undefined,
                 preferLossless: false,
                 server: undefined,
+                serializedResolvedPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+                    data: composition.props,
+                    indent: undefined,
+                    staticBase: null,
+                }).serializedString,
             }, (run, progress) => {
                 benchmarkProgress.update(makeBenchmarkProgressBar({
                     totalRuns: runs,

package/dist/codemods/stringify-with-path.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stringifyDefaultProps = void 0;
-const input_props_serialization_1 = require("../editor/components/RenderModal/SchemaEditor/input-props-serialization");
+const remotion_1 = require("remotion");
 const doesMatchPath = (path1, enumPaths) => {
     return enumPaths.some((p) => path1.every((item, index) => {
         if (p[index] === '[]' && !Number.isNaN(Number(item))) {
@@ -21,8 +21,8 @@ const stringifyDefaultProps = ({ props, enumPaths, }) => JSON.stringify(props, r
     if (typeof item === 'string' && doesMatchPath(path, enumPaths)) {
         return `${item}__ADD_AS_CONST__`;
     }
-    if (typeof item === 'string' && item.startsWith(input_props_serialization_1.FILE_TOKEN)) {
-        return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(input_props_serialization_1.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
+    if (typeof item === 'string' && item.startsWith(remotion_1.Internals.FILE_TOKEN)) {
+        return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(remotion_1.Internals.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
     }
     return value;
 }))

package/dist/compositions.js

@@ -9,6 +9,7 @@ const get_cli_options_1 = require("./get-cli-options");
 const log_1 = require("./log");
 const print_compositions_1 = require("./print-compositions");
 const setup_cache_1 = require("./setup-cache");
+const remotion_1 = require("remotion");
 const listCompositionsCommand = async (remotionRoot, args) => {
     const { file, reason } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
     if (!file) {
@@ -44,7 +45,11 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         browserExecutable,
         chromiumOptions,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps,
+            staticBase: null,
+            indent: undefined,
+        }).serializedString,
         timeoutInMilliseconds: puppeteerTimeout,
         port,
         indent: false,

package/dist/config/image-format.d.ts

@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 export declare const setStillImageFormat: (format: StillImageFormat) => void;
 export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
 export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;

package/dist/config/index.d.ts

@@ -297,7 +297,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;

package/dist/config/log.d.ts

@@ -1 +1 @@
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error", setLogLevel: (newLogLevel: "verbose" | "info" | "warn" | "error") => void;
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn", setLogLevel: (newLogLevel: "error" | "verbose" | "info" | "warn") => void;

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     isFocused: boolean;
     isHovered: boolean;
 }) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemTextarea.d.ts

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/RenderModal/DataEditor.js

@@ -39,7 +39,6 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
 const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
 const extract_enum_json_paths_1 = require("./SchemaEditor/extract-enum-json-paths");
-const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
 const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
 const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
 const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
@@ -99,7 +98,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             return null;
         }
         const value = inputProps;
-        return (0, input_props_serialization_1.serializeJSONWithDate)({
+        return remotion_1.Internals.serializeJSONWithDate({
             data: value,
             indent: 2,
             staticBase: window.remotion_staticBase,
@@ -226,12 +225,13 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
         setSaving(false);
     }, [fastRefreshes]);
     const onSave = (0, react_1.useCallback)((updater) => {
+        var _a;
         if (schema === 'no-zod' || schema === 'no-schema' || z === null) {
             (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
             return;
         }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater(unresolvedComposition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater((_a = unresolvedComposition.defaultProps) !== null && _a !== void 0 ? _a : {}), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
             .then((response) => {
             if (!response.success) {
                 console.log(response.stack);

package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { z } from 'zod';
-import type { SerializedJSONWithCustomFields } from './SchemaEditor/input-props-serialization';
+import type { SerializedJSONWithCustomFields } from 'remotion';
 export type EditType = 'inputProps' | 'defaultProps';
 export declare const RenderModalJSONPropsEditor: React.FC<{
     value: unknown;

package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -32,8 +32,8 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const layout_1 = require("../layout");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
-const input_props_serialization_1 = require("./SchemaEditor/input-props-serialization");
 const ZodErrorMessages_1 = require("./SchemaEditor/ZodErrorMessages");
+const remotion_1 = require("remotion");
 const style = {
     fontFamily: 'monospace',
     flex: 1,
@@ -46,7 +46,7 @@ const scrollable = {
 };
 const parseJSON = (str, schema) => {
     try {
-        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
+        const value = remotion_1.Internals.deserializeJSONWithCustomFields(str);
         const zodValidation = schema.safeParse(value);
         return { str, value, validJSON: true, zodValidation };
     }

package/dist/editor/components/RenderModal/SchemaEditor/SchemaEditor.d.ts

@@ -6,7 +6,7 @@ export declare const SchemaEditor: React.FC<{
     setValue: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
     defaultProps: Record<string, unknown>;
-    onSave: (updater: (oldState: unknown) => unknown) => void;
+    onSave: (updater: (oldState: Record<string, unknown>) => Record<string, unknown>) => void;
     showSaveButton: boolean;
     saving: boolean;
     saveDisabledByParent: boolean;

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -56,5 +56,5 @@ export declare const openInFileExplorer: ({ directory }: {
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("../../../preview-server/render-queue/job").CancelRenderResponse>;
 export declare const updateAvailable: (signal: AbortSignal) => Promise<import("../../../preview-server/render-queue/job").UpdateAvailableResponse>;
-export declare const updateDefaultProps: (compositionId: string, defaultProps: unknown, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
+export declare const updateDefaultProps: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("../../../preview-server/render-queue/job").UpdateDefaultPropsResponse>;
 export declare const canUpdateDefaultProps: (compositionId: string) => Promise<import("../../../preview-server/render-queue/job").CanUpdateDefaultPropsResponse>;

package/dist/editor/components/RenderQueue/actions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
-const input_props_serialization_1 = require("../RenderModal/SchemaEditor/input-props-serialization");
+const remotion_1 = require("remotion");
 const callApi = (endpoint, body, signal) => {
     return new Promise((resolve, reject) => {
         fetch(endpoint, {
@@ -39,7 +39,11 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
         chromiumOptions,
         delayRenderTimeout,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps,
+            staticBase: window.remotion_staticBase,
+            indent: undefined,
+        }).serializedString,
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
@@ -70,7 +74,11 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         disallowParallelEncoding,
         chromiumOptions,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema: remotion_1.Internals.serializeJSONWithDate({
+            data: inputProps,
+            staticBase: window.remotion_staticBase,
+            indent: undefined,
+        }).serializedString,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;
@@ -112,7 +120,7 @@ exports.updateAvailable = updateAvailable;
 const updateDefaultProps = (compositionId, defaultProps, enumPaths) => {
     return callApi('/api/update-default-props', {
         compositionId,
-        defaultProps: (0, input_props_serialization_1.serializeJSONWithDate)({
+        defaultProps: remotion_1.Internals.serializeJSONWithDate({
             data: defaultProps,
             indent: undefined,
             staticBase: window.remotion_staticBase,

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/editor/helpers/render-modal-sections.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

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-cli-options.d.ts

@@ -33,5 +33,5 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
 }>;

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;

package/dist/get-composition-id.js

@@ -16,7 +16,7 @@ const getCompName = ({ cliArgs, compositionIdFromUi, }) => {
     const [compName, ...remainingArgs] = cliArgs;
     return { compName, remainingArgs, reason: 'Passed as argument' };
 };
-const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }) => {
+const getCompositionId = async ({ args, compositionIdFromUi, serializedInputPropsWithCustomSchema, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }) => {
     const { compName, remainingArgs, reason: compReason, } = getCompName({
         cliArgs: args,
         compositionIdFromUi,
@@ -24,7 +24,7 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
     if (compName) {
         const { metadata: config, propsSize } = await renderer_1.RenderInternals.internalSelectComposition({
             id: compName,
-            inputProps,
+            serializedInputPropsWithCustomSchema,
             puppeteerInstance,
             envVariables,
             timeoutInMilliseconds,
@@ -38,7 +38,10 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
             onBrowserLog: null,
         });
         if (propsSize > 10000000) {
-            log_1.Log.warn(`The props of your composition are large (${(0, format_bytes_1.formatBytes)(propsSize)}). This may cause slowdown.`);
+            log_1.Log.warnAdvanced({
+                indent,
+                logLevel,
+            }, `The props of your composition are large (${(0, format_bytes_1.formatBytes)(propsSize)}). This may cause slowdown.`);
         }
         if (!config) {
             throw new Error(`Cannot find composition with ID "${compName}"`);
@@ -52,7 +55,6 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
     }
     if (!process.env.CI) {
         const comps = await renderer_1.RenderInternals.internalGetCompositions({
-            inputProps,
             puppeteerInstance,
             envVariables,
             timeoutInMilliseconds,
@@ -64,6 +66,7 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
             server,
             serveUrlOrWebpackUrl,
             onBrowserLog: null,
+            serializedInputPropsWithCustomSchema,
         });
         const { compositionId, reason } = await (0, show_compositions_picker_1.showSingleCompositionsPicker)(comps);
         if (compositionId && typeof compositionId === 'string') {

package/dist/get-composition-with-dimension-override.d.ts

@@ -1,6 +1,6 @@
 import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, LogLevel, RemotionServer } from '@remotion/renderer';
 import type { VideoConfig } from 'remotion';
-export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, logLevel, server, }: {
+export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, }: {
     height: number | null;
     width: number | null;
     args: string[];
@@ -14,7 +14,7 @@ export declare const getCompositionWithDimensionOverride: ({ height, width, args
     serveUrlOrWebpackUrl: string;
     indent: boolean;
     logLevel: LogLevel;
-    inputProps: Record<string, unknown>;
+    serializedInputPropsWithCustomSchema: string;
     server: RemotionServer;
 }) => Promise<{
     compositionId: string;

package/dist/get-composition-with-dimension-override.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionWithDimensionOverride = void 0;
 const get_composition_id_1 = require("./get-composition-id");
-const getCompositionWithDimensionOverride = async ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, logLevel, server, }) => {
+const getCompositionWithDimensionOverride = async ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, }) => {
     const returnValue = await (0, get_composition_id_1.getCompositionId)({
         args,
         compositionIdFromUi,
@@ -12,7 +12,7 @@ const getCompositionWithDimensionOverride = async ({ height, width, args, compos
         browserExecutable,
         chromiumOptions,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema,
         port,
         puppeteerInstance,
         timeoutInMilliseconds,

package/dist/handle-javascript-error.d.ts

@@ -0,0 +1,20 @@
+import type { Page } from '../browser/BrowserPage';
+import type { SymbolicatedStackFrame } from '../symbolicate-stacktrace';
+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/handle-javascript-error.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 symbolicateable_error_1 = require("./symbolicateable-error");
+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 symbolicateable_error_1.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;