@remotion/cli 4.0.3 → 4.0.5

package/dist/cloudrun-command.d.ts

@@ -0,0 +1 @@
+export declare const cloudrunCommand: (remotionRoot: string, args: string[]) => Promise<never>;

package/dist/cloudrun-command.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cloudrunCommand = void 0;
+const log_1 = require("./log");
+const get_package_manager_1 = require("./preview-server/get-package-manager");
+const update_available_1 = require("./preview-server/update-available");
+const cloudrunCommand = async (remotionRoot, args) => {
+    try {
+        const path = require.resolve('@remotion/cloudrun', {
+            paths: [remotionRoot],
+        });
+        const { CloudrunInternals } = require(path);
+        await CloudrunInternals.executeCommand(args, remotionRoot);
+        process.exit(0);
+    }
+    catch (err) {
+        const manager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
+        const installCommand = manager === 'unknown' ? 'npm i' : manager.installCommand;
+        log_1.Log.error(err);
+        log_1.Log.error('Remotion CloudRun is not installed.');
+        log_1.Log.info('');
+        log_1.Log.info('You can install it using:');
+        log_1.Log.info(`${installCommand} @remotion/cloudrun@${(0, update_available_1.getRemotionVersion)()}`);
+        process.exit(1);
+    }
+};
+exports.cloudrunCommand = cloudrunCommand;

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/GlobalKeybindings.js

@@ -43,7 +43,7 @@ const GlobalKeybindings = () => {
             callback: () => {
                 setCheckerboard((c) => !c);
             },
-            commandCtrlKey: true,
+            commandCtrlKey: false,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
         });

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/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/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/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;

package/dist/index.d.ts

@@ -112,7 +112,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
     }>;
     loadConfig: (remotionRoot: string) => Promise<string | null>;
     initializeCli: (remotionRoot: string) => Promise<void>;
@@ -121,7 +121,7 @@ export declare const CliInternals: {
     parsedCli: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
+        "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
         "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
         "bundle-cache": string;
         "env-file": string;
@@ -185,7 +185,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
+        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
         isLambda: boolean;
         fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
     }) => {
@@ -200,8 +200,8 @@ export declare const CliInternals: {
     };
     getVideoImageFormat: ({ codec, uiImageFormat, }: {
         codec: import("@remotion/renderer").CodecOrUndefined;
-        uiImageFormat: "png" | "jpeg" | "none" | null;
-    }) => "png" | "jpeg" | "none";
+        uiImageFormat: "none" | "png" | "jpeg" | null;
+    }) => "none" | "png" | "jpeg";
     printCompositions: (compositions: import("remotion").VideoConfig[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;

package/dist/index.js

@@ -61,14 +61,17 @@ const cli = async () => {
     if (command !== versions_1.VERSIONS_COMMAND) {
         await (0, versions_1.validateVersionsBeforeCommand)(remotionRoot);
     }
-    const errorSymbolicationLock = renderer_1.RenderInternals.registerErrorSymbolicationLock();
+    const isStudio = command === 'studio' || command === 'preview';
+    const errorSymbolicationLock = isStudio
+        ? 0
+        : renderer_1.RenderInternals.registerErrorSymbolicationLock();
     (0, cleanup_before_quit_1.handleCtrlC)();
     await (0, initialize_cli_1.initializeCli)(remotionRoot);
     try {
         if (command === 'compositions') {
             await (0, compositions_1.listCompositionsCommand)(remotionRoot, args);
         }
-        else if (command === 'preview' || command === 'studio') {
+        else if (isStudio) {
             await (0, studio_1.studioCommand)(remotionRoot, args);
         }
         else if (command === 'lambda') {

package/dist/log.d.ts

@@ -2,19 +2,19 @@ export declare const Log: {
     verbose: (message?: any, ...optionalParams: any[]) => void;
     verboseAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     } & {
         tag?: string | undefined;
     }, message?: any, ...optionalParams: any[]) => void;
     info: (message?: any, ...optionalParams: any[]) => void;
     infoAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     }, message?: any, ...optionalParams: any[]) => void;
     warn: (message?: any, ...optionalParams: any[]) => void;
     warnAdvanced: (options: {
         indent: boolean;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
     }, message?: any, ...optionalParams: any[]) => void;
     error: (message?: any, ...optionalParams: any[]) => void;
 };

package/dist/preview-server/dev-middleware/range-parser.d.ts

@@ -11,5 +11,5 @@ type Range = {
 type Ranges = Range[] & {
     type?: string;
 };
-export declare function parseRange(size: number, str: string | string[]): -1 | Ranges | -2;
+export declare function parseRange(size: number, str: string | string[]): -1 | -2 | Ranges;
 export {};

package/dist/preview-server/routes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { LiveEventsServer } from './live-events';
 export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }: {

package/dist/render-flows/render.js

@@ -139,7 +139,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
     const puppeteerInstance = await browserInstance;
     addCleanupCallback(() => puppeteerInstance.close(false, logLevel, indent));
     const actualConcurrency = renderer_1.RenderInternals.getActualConcurrency(concurrency);
-    const server = renderer_1.RenderInternals.prepareServer({
+    const server = await renderer_1.RenderInternals.prepareServer({
         concurrency: actualConcurrency,
         indent,
         port,
@@ -147,7 +147,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         logLevel,
         webpackConfigOrServeUrl: urlOrBundle,
     });
-    addCleanupCallback(() => server.then((s) => s.closeServer(false)));
+    addCleanupCallback(() => server.closeServer(false));
     const { compositionId, config, reason, argsAfterComposition } = await (0, get_composition_with_dimension_override_1.getCompositionWithDimensionOverride)({
         height,
         width,
@@ -163,7 +163,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         serveUrlOrWebpackUrl: urlOrBundle,
         timeoutInMilliseconds: puppeteerTimeout,
         logLevel,
-        server: await server,
+        server,
     });
     const { codec, reason: codecReason } = (0, get_final_output_codec_1.getFinalOutputCodec)({
         cliFlag: parse_command_line_1.parsedCli.codec,

package/dist/render-flows/still.js

@@ -76,7 +76,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         },
         quietProgress: updatesDontOverwrite,
     });
-    const server = renderer_1.RenderInternals.prepareServer({
+    const server = await renderer_1.RenderInternals.prepareServer({
         concurrency: 1,
         indent: indentOutput,
         port,
@@ -84,7 +84,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         logLevel,
         webpackConfigOrServeUrl: urlOrBundle,
     });
-    addCleanupCallback(() => server.then((s) => s.closeServer(false)));
+    addCleanupCallback(() => server.closeServer(false));
     addCleanupCallback(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;
     addCleanupCallback(() => puppeteerInstance.close(false, logLevel, indentOutput));
@@ -103,7 +103,7 @@ const renderStillFlow = async ({ remotionRoot, fullEntryPoint, entryPointReason,
         serveUrlOrWebpackUrl: urlOrBundle,
         timeoutInMilliseconds: puppeteerTimeout,
         logLevel,
-        server: await server,
+        server,
     });
     const { format: imageFormat, source } = (0, determine_image_format_1.determineFinalStillImageFormat)({
         cliFlag: (_a = parse_command_line_1.parsedCli['image-format']) !== null && _a !== void 0 ? _a : null,

package/dist/symbolicate-error.d.ts

@@ -0,0 +1,3 @@
+import { ErrorWithStackFrame } from './handle-javascript-exception';
+import type { SymbolicateableError } from './symbolicateable-error';
+export declare const symbolicateError: (symbolicateableError: SymbolicateableError) => Promise<ErrorWithStackFrame>;

package/dist/symbolicate-error.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.symbolicateError = void 0;
+const symbolicate_stacktrace_1 = require("../symbolicate-stacktrace");
+const handle_javascript_exception_1 = require("./handle-javascript-exception");
+const truthy_1 = require("./truthy");
+const symbolicateError = async (symbolicateableError) => {
+    const { delayRenderCall, stackFrame } = symbolicateableError;
+    const [mainErrorFrames, delayRenderFrames] = await Promise.all([
+        stackFrame ? (0, symbolicate_stacktrace_1.symbolicateStackTraceFromRemoteFrames)(stackFrame) : null,
+        delayRenderCall
+            ? (0, symbolicate_stacktrace_1.symbolicateStackTraceFromRemoteFrames)(delayRenderCall)
+            : null,
+    ].filter(truthy_1.truthy));
+    const symbolicatedErr = new handle_javascript_exception_1.ErrorWithStackFrame({
+        message: symbolicateableError.message,
+        symbolicatedStackFrames: mainErrorFrames,
+        frame: symbolicateableError.frame,
+        name: symbolicateableError.name,
+        delayRenderCall: delayRenderFrames,
+    });
+    return symbolicatedErr;
+};
+exports.symbolicateError = symbolicateError;

package/dist/symbolicate-errors.d.ts

@@ -0,0 +1,7 @@
+import type { SymbolicatedStackFrame, UnsymbolicatedStackFrame } from '@remotion/renderer';
+import type { SourceMapConsumer } from 'source-map';
+import { ErrorWithStackFrame } from './error-with-stack-frame';
+export declare const symbolicateError: (symbolicateableError: SymbolicateableError) => Promise<ErrorWithStackFrame>;
+export declare const symbolicateStackTraceFromRemoteFrames: (frames: UnsymbolicatedStackFrame[]) => Promise<SymbolicatedStackFrame[]>;
+export declare const getSourceMapFromRemoteFile: (fileName: string) => Promise<any>;
+export declare const symbolicateFromSources: (frames: UnsymbolicatedStackFrame[], mapValues: Record<string, SourceMapConsumer | null>) => SymbolicatedStackFrame[];

package/dist/symbolicate-errors.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.symbolicateFromSources = exports.getSourceMapFromRemoteFile = exports.symbolicateStackTraceFromRemoteFrames = exports.symbolicateError = void 0;
+const renderer_1 = require("@remotion/renderer");
+const truthy_1 = require("./truthy");
+const error_with_stack_frame_1 = require("./error-with-stack-frame");
+const symbolicateError = async (symbolicateableError) => {
+    const { delayRenderCall, stackFrame } = symbolicateableError;
+    const [mainErrorFrames, delayRenderFrames] = await Promise.all([
+        stackFrame ? (0, exports.symbolicateStackTraceFromRemoteFrames)(stackFrame) : null,
+        delayRenderCall
+            ? (0, exports.symbolicateStackTraceFromRemoteFrames)(delayRenderCall)
+            : null,
+    ].filter(truthy_1.truthy));
+    const symbolicatedErr = new error_with_stack_frame_1.ErrorWithStackFrame({
+        message: symbolicateableError.message,
+        symbolicatedStackFrames: mainErrorFrames,
+        frame: symbolicateableError.frame,
+        name: symbolicateableError.name,
+        delayRenderCall: delayRenderFrames,
+    });
+    return symbolicatedErr;
+};
+exports.symbolicateError = symbolicateError;
+const symbolicateStackTraceFromRemoteFrames = async (frames) => {
+    const uniqueFileNames = [
+        ...new Set(frames
+            .map((f) => f.fileName)
+            .filter((f) => f.startsWith('http://') || f.startsWith('https://'))
+            .filter(truthy_1.truthy)),
+    ];
+    const maps = await Promise.all(uniqueFileNames.map((fileName) => {
+        return (0, exports.getSourceMapFromRemoteFile)(fileName);
+    }));
+    const mapValues = {};
+    for (let i = 0; i < uniqueFileNames.length; i++) {
+        mapValues[uniqueFileNames[i]] = maps[i];
+    }
+    return (0, exports.symbolicateFromSources)(frames, mapValues);
+};
+exports.symbolicateStackTraceFromRemoteFrames = symbolicateStackTraceFromRemoteFrames;
+const getSourceMapFromRemoteFile = async (fileName) => {
+    const fileContents = await renderer_1.RenderInternals.fetchUrl(fileName);
+    return renderer_1.RenderInternals.getSourceMap(fileName, fileContents, 'remote');
+};
+exports.getSourceMapFromRemoteFile = getSourceMapFromRemoteFile;
+const symbolicateFromSources = (frames, mapValues) => {
+    return frames
+        .map((frame) => {
+        const map = mapValues[frame.fileName];
+        if (!map) {
+            return null;
+        }
+        return symbolicateStackFrame(frame, map);
+    })
+        .filter(truthy_1.truthy);
+};
+exports.symbolicateFromSources = symbolicateFromSources;
+const symbolicateStackFrame = (frame, map) => {
+    const pos = getOriginalPosition(map, frame.lineNumber, frame.columnNumber);
+    const hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
+    const scriptCode = hasSource && pos.line
+        ? getLinesAround(pos.line, 3, hasSource.split('\n'))
+        : null;
+    return {
+        originalColumnNumber: pos.column,
+        originalFileName: pos.source,
+        originalFunctionName: frame.functionName,
+        originalLineNumber: pos.line,
+        originalScriptCode: scriptCode,
+    };
+};
+const getOriginalPosition = (source_map, line, column) => {
+    const result = source_map.originalPositionFor({
+        line,
+        column,
+    });
+    return { line: result.line, column: result.column, source: result.source };
+};
+function getLinesAround(line, count, lines) {
+    const result = [];
+    for (let index = Math.max(0, line - 1 - count) + 1; index <= Math.min(lines.length - 1, line - 1 + count); ++index) {
+        result.push({
+            lineNumber: index + 1,
+            content: lines[index],
+            highlight: index + 1 === line,
+        });
+    }
+    return result;
+}

package/dist/symbolicate-stacktrace.d.ts

@@ -0,0 +1,28 @@
+import type { BasicSourceMapConsumer, IndexedSourceMapConsumer } from 'source-map';
+import { SourceMapConsumer } from 'source-map';
+import type { UnsymbolicatedStackFrame } from './parse-browser-error-stack';
+type ScriptLine = {
+    lineNumber: number;
+    content: string;
+    highlight: boolean;
+};
+export type SymbolicatedStackFrame = {
+    originalFunctionName: string | null;
+    originalFileName: string | null;
+    originalLineNumber: number | null;
+    originalColumnNumber: number | null;
+    originalScriptCode: ScriptLine[] | null;
+};
+export declare const symbolicateStackTraceFromRemoteFrames: (frames: UnsymbolicatedStackFrame[]) => Promise<SymbolicatedStackFrame[]>;
+export declare const symbolicateFromSources: (frames: UnsymbolicatedStackFrame[], mapValues: Record<string, SourceMapConsumer | null>) => SymbolicatedStackFrame[];
+export declare const symbolicateStackFrame: (frame: UnsymbolicatedStackFrame, map: SourceMapConsumer) => {
+    originalColumnNumber: number | null;
+    originalFileName: string | null;
+    originalFunctionName: any;
+    originalLineNumber: number | null;
+    originalScriptCode: ScriptLine[] | null;
+};
+export declare const getSourceMapFromRemoteFile: (fileName: string) => Promise<SourceMapConsumer | null>;
+export declare const getSourceMapFromLocalFile: (fileName: string) => Promise<SourceMapConsumer | null>;
+export type AnySourceMapConsumer = BasicSourceMapConsumer | IndexedSourceMapConsumer;
+export {};

package/dist/symbolicate-stacktrace.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSourceMapFromLocalFile = exports.getSourceMapFromRemoteFile = exports.symbolicateStackFrame = exports.symbolicateFromSources = exports.symbolicateStackTraceFromRemoteFrames = void 0;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const source_map_1 = require("source-map");
+const read_file_1 = require("./assets/read-file");
+const truthy_1 = require("./truthy");
+function extractSourceMapUrl(fileContents) {
+    const regex = /\/\/[#@] ?sourceMappingURL=([^\s'"]+)\s*$/gm;
+    let match = null;
+    for (;;) {
+        const next = regex.exec(fileContents);
+        if (next === null || next === undefined) {
+            break;
+        }
+        match = next;
+    }
+    if (!(match === null || match === void 0 ? void 0 : match[1])) {
+        return null;
+    }
+    return match[1].toString();
+}
+const getSourceMap = async (filePath, fileContents, type) => {
+    const sm = extractSourceMapUrl(fileContents);
+    if (sm === null) {
+        return null;
+    }
+    if (sm.indexOf('data:') === 0) {
+        const base64 = /^data:application\/json;([\w=:"-]+;)*base64,/;
+        const match2 = sm.match(base64);
+        if (!match2) {
+            throw new Error('Sorry, non-base64 inline source-map encoding is not supported.');
+        }
+        const converted = window.atob(sm.substring(match2[0].length));
+        return new source_map_1.SourceMapConsumer(JSON.parse(converted));
+    }
+    if (type === 'local') {
+        // Find adjacent file: bundle.js -> bundle.js.map
+        const newFilePath = path_1.default.join(path_1.default.dirname(filePath), sm);
+        return new source_map_1.SourceMapConsumer((0, fs_1.readFileSync)(newFilePath, 'utf8'));
+    }
+    const index = filePath.lastIndexOf('/');
+    const url = filePath.substring(0, index + 1) + sm;
+    const obj = await fetchUrl(url);
+    return new source_map_1.SourceMapConsumer(obj);
+};
+const fetchUrl = async (url) => {
+    const res = await (0, read_file_1.readFile)(url);
+    return new Promise((resolve, reject) => {
+        let downloaded = '';
+        res.on('data', (d) => {
+            downloaded += d;
+        });
+        res.on('end', () => {
+            resolve(downloaded);
+        });
+        res.on('error', (err) => reject(err));
+    });
+};
+function getLinesAround(line, count, lines) {
+    const result = [];
+    for (let index = Math.max(0, line - 1 - count) + 1; index <= Math.min(lines.length - 1, line - 1 + count); ++index) {
+        result.push({
+            lineNumber: index + 1,
+            content: lines[index],
+            highlight: index + 1 === line,
+        });
+    }
+    return result;
+}
+const getOriginalPosition = (source_map, line, column) => {
+    const result = source_map.originalPositionFor({
+        line,
+        column,
+    });
+    return { line: result.line, column: result.column, source: result.source };
+};
+const symbolicateStackTraceFromRemoteFrames = async (frames) => {
+    const uniqueFileNames = [
+        ...new Set(frames
+            .map((f) => f.fileName)
+            .filter((f) => f.startsWith('http://') || f.startsWith('https://'))
+            .filter(truthy_1.truthy)),
+    ];
+    const maps = await Promise.all(uniqueFileNames.map((fileName) => {
+        return (0, exports.getSourceMapFromRemoteFile)(fileName);
+    }));
+    const mapValues = {};
+    for (let i = 0; i < uniqueFileNames.length; i++) {
+        mapValues[uniqueFileNames[i]] = maps[i];
+    }
+    return (0, exports.symbolicateFromSources)(frames, mapValues);
+};
+exports.symbolicateStackTraceFromRemoteFrames = symbolicateStackTraceFromRemoteFrames;
+const symbolicateFromSources = (frames, mapValues) => {
+    return frames
+        .map((frame) => {
+        const map = mapValues[frame.fileName];
+        if (!map) {
+            return null;
+        }
+        return (0, exports.symbolicateStackFrame)(frame, map);
+    })
+        .filter(truthy_1.truthy);
+};
+exports.symbolicateFromSources = symbolicateFromSources;
+const symbolicateStackFrame = (frame, map) => {
+    const pos = getOriginalPosition(map, frame.lineNumber, frame.columnNumber);
+    const hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
+    const scriptCode = hasSource && pos.line
+        ? getLinesAround(pos.line, 3, hasSource.split('\n'))
+        : null;
+    return {
+        originalColumnNumber: pos.column,
+        originalFileName: pos.source,
+        originalFunctionName: frame.functionName,
+        originalLineNumber: pos.line,
+        originalScriptCode: scriptCode,
+    };
+};
+exports.symbolicateStackFrame = symbolicateStackFrame;
+const getSourceMapFromRemoteFile = async (fileName) => {
+    const fileContents = await fetchUrl(fileName);
+    return getSourceMap(fileName, fileContents, 'remote');
+};
+exports.getSourceMapFromRemoteFile = getSourceMapFromRemoteFile;
+const getSourceMapFromLocalFile = (fileName) => {
+    const fileContents = (0, fs_1.readFileSync)(fileName, 'utf8');
+    return getSourceMap(fileName, fileContents, 'local');
+};
+exports.getSourceMapFromLocalFile = getSourceMapFromLocalFile;

package/dist/symbolicateable-error.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A symbolicateable error is an error that can be symolicated by fetching the original sources. By throwing a symbolicateable error, Remotion CLI will attempt to symplicate it
+ */
+import type { UnsymbolicatedStackFrame } from '../parse-browser-error-stack';
+export declare class SymbolicateableError extends Error {
+    stackFrame: UnsymbolicatedStackFrame[] | null;
+    delayRenderCall: UnsymbolicatedStackFrame[] | null;
+    frame: number | null;
+    constructor({ message, stack, stackFrame, frame, name, }: {
+        message: string;
+        stack: string | undefined;
+        frame: number | null;
+        name: string;
+        stackFrame: UnsymbolicatedStackFrame[] | null;
+    });
+}

package/dist/symbolicateable-error.js

@@ -0,0 +1,18 @@
+"use strict";
+/**
+ * A symbolicateable error is an error that can be symolicated by fetching the original sources. By throwing a symbolicateable error, Remotion CLI will attempt to symplicate it
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SymbolicateableError = void 0;
+const delay_render_embedded_stack_1 = require("../delay-render-embedded-stack");
+class SymbolicateableError extends Error {
+    constructor({ message, stack, stackFrame, frame, name, }) {
+        super(message);
+        this.stack = stack;
+        this.stackFrame = stackFrame;
+        this.frame = frame;
+        this.name = name;
+        this.delayRenderCall = stack ? (0, delay_render_embedded_stack_1.parseDelayRenderEmbeddedStack)(stack) : null;
+    }
+}
+exports.SymbolicateableError = SymbolicateableError;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/bundler": "4.0.3",
-    "remotion": "4.0.3",
-    "@remotion/player": "4.0.3",
-    "@remotion/media-utils": "4.0.3",
-    "@remotion/renderer": "4.0.3"
+    "@remotion/media-utils": "4.0.5",
+    "@remotion/player": "4.0.5",
+    "remotion": "4.0.5",
+    "@remotion/bundler": "4.0.5",
+    "@remotion/renderer": "4.0.5"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -65,8 +65,8 @@
     "typescript": "4.9.5",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/tailwind": "4.0.3",
-    "@remotion/zod-types": "4.0.3"
+    "@remotion/zod-types": "4.0.5",
+    "@remotion/tailwind": "4.0.5"
   },
   "keywords": [
     "remotion",