@remotion/cli 4.0.0-fastlambda.8 → 4.0.0-lambda.1

package/dist/preview-server/error-overlay/react-overlay/utils/unmapper.js

@@ -0,0 +1,64 @@
+"use strict";
+/*
+    Source code adapted from https://github.com/facebook/create-react-app/tree/main/packages/react-error-overlay and refactored in Typescript. This file is MIT-licensed.
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unmap = void 0;
+/* eslint-disable eqeqeq */
+/* eslint-disable no-eq-null */
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const remotion_1 = require("remotion");
+const get_lines_around_1 = require("./get-lines-around");
+const get_source_map_1 = require("./get-source-map");
+const getFileContents = async (fileName) => {
+    const res = await fetch(fileName);
+    const fileContents = await res.text();
+    return fileContents;
+};
+const unmap = async (frames, contextLines) => {
+    const transpiled = frames
+        .filter((s) => s.type === 'transpiled')
+        .map((s) => s.frame);
+    const uniqueFileNames = [
+        ...new Set(transpiled.map((f) => f.fileName).filter(remotion_1.Internals.truthy)),
+    ];
+    const maps = await Promise.all(uniqueFileNames.map(async (fileName) => {
+        const fileContents = await getFileContents(fileName);
+        return (0, get_source_map_1.getSourceMap)(fileName, fileContents);
+    }));
+    const mapValues = {};
+    for (let i = 0; i < uniqueFileNames.length; i++) {
+        mapValues[uniqueFileNames[i]] = maps[i];
+    }
+    return frames
+        .map((frame) => {
+        if (frame.type === 'symbolicated') {
+            return frame.frame;
+        }
+        const map = mapValues[frame.frame.fileName];
+        if (!map) {
+            return null;
+        }
+        const pos = (0, get_source_map_1.getOriginalPosition)(map, frame.frame.lineNumber, frame.frame.columnNumber);
+        const { functionName } = frame.frame;
+        let hasSource = null;
+        hasSource = pos.source ? map.sourceContentFor(pos.source, false) : null;
+        const scriptCode = hasSource && pos.line
+            ? (0, get_lines_around_1.getLinesAround)(pos.line, contextLines, hasSource.split('\n'))
+            : null;
+        return {
+            originalColumnNumber: pos.column,
+            originalFileName: pos.source,
+            originalFunctionName: functionName,
+            originalLineNumber: pos.line,
+            originalScriptCode: scriptCode,
+        };
+    })
+        .filter(remotion_1.Internals.truthy);
+};
+exports.unmap = unmap;

package/dist/preview-server/error-overlay/remotion-overlay/AskOnDiscord.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AskOnDiscord: React.FC;

package/dist/preview-server/error-overlay/remotion-overlay/AskOnDiscord.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AskOnDiscord = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DISCORD_LINK = 'https://discord.gg/6VzzNDwUwV';
+const react_1 = require("react");
+const Button_1 = require("./Button");
+const AskOnDiscord = () => {
+    const openInBrowser = (0, react_1.useCallback)(() => {
+        window.open(DISCORD_LINK, '_blank');
+    }, []);
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, children: "Ask on Discord" });
+};
+exports.AskOnDiscord = AskOnDiscord;

package/dist/preview-server/error-overlay/remotion-overlay/Button.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Button: React.FC<{
+    onClick: () => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+}>;

package/dist/preview-server/error-overlay/remotion-overlay/Button.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
+const INPUT_BACKGROUND = '#2f363d';
+const button = {
+    border: `1px solid ${INPUT_BORDER_COLOR_UNHOVERED}`,
+    borderRadius: 4,
+    backgroundColor: INPUT_BACKGROUND,
+    appearance: 'none',
+    fontFamily: 'inherit',
+    fontSize: 14,
+    color: 'white',
+};
+const buttonContainer = {
+    padding: 10,
+    cursor: 'pointer',
+    fontSize: 14,
+};
+const Button = ({ children, onClick, disabled }) => {
+    return ((0, jsx_runtime_1.jsx)("button", { style: button, type: "button", disabled: disabled, onClick: onClick, children: (0, jsx_runtime_1.jsx)("div", { style: buttonContainer, children: children }) }));
+};
+exports.Button = Button;

package/dist/preview-server/error-overlay/remotion-overlay/CodeFrame.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ScriptLine } from '../react-overlay/utils/stack-frame';
+export declare const CodeFrame: React.FC<{
+    source: ScriptLine[];
+    lineNumberWidth: number;
+}>;

package/dist/preview-server/error-overlay/remotion-overlay/CodeFrame.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const frame = {
+    backgroundColor: '#070707',
+    marginBottom: 20,
+};
+const lineNumber = {
+    display: 'inline-block',
+    whiteSpace: 'pre',
+    backgroundColor: '#121212',
+    paddingLeft: 10,
+    paddingRight: 12,
+    marginRight: 12,
+};
+const CodeFrame = ({ source, lineNumberWidth }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: frame, children: source.map((s, j) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    fontFamily: 'monospace',
+                    whiteSpace: 'pre',
+                    tabSize: 2,
+                    color: s.highlight ? 'white' : 'rgba(255, 255, 255, 0.6)',
+                    lineHeight: 1.7,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: lineNumber, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), s.content] }, j));
+        }) }));
+};
+exports.CodeFrame = CodeFrame;

package/dist/preview-server/error-overlay/remotion-overlay/DismissButton.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DismissButton: React.FC;

package/dist/preview-server/error-overlay/remotion-overlay/DismissButton.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DismissButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const size = {
+    height: 20,
+    width: 20,
+};
+const style = {
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+};
+const DismissButton = () => {
+    const dismiss = (0, react_1.useCallback)(() => {
+        window.location.href = '/';
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: dismiss, children: (0, jsx_runtime_1.jsx)("svg", { focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 352 512", style: size, children: (0, jsx_runtime_1.jsx)("path", { fill: "white", d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" }) }) }));
+};
+exports.DismissButton = DismissButton;

package/dist/preview-server/error-overlay/remotion-overlay/ErrorDisplay.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ErrorRecord } from '../react-overlay/listen-to-runtime-errors';
+export declare const ErrorDisplay: React.FC<{
+    display: ErrorRecord;
+}>;

package/dist/preview-server/error-overlay/remotion-overlay/ErrorDisplay.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorDisplay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const map_error_to_react_stack_1 = require("../react-overlay/effects/map-error-to-react-stack");
+const AskOnDiscord_1 = require("./AskOnDiscord");
+const ErrorTitle_1 = require("./ErrorTitle");
+const OpenInEditor_1 = require("./OpenInEditor");
+const SearchGitHubIssues_1 = require("./SearchGitHubIssues");
+const StackFrame_1 = require("./StackFrame");
+const stack = {
+    marginTop: 17,
+    overflowX: 'scroll',
+    marginBottom: '10vh',
+};
+const spacer = {
+    width: 5,
+    display: 'inline-block',
+};
+const ErrorDisplay = ({ display }) => {
+    const highestLineNumber = Math.max(...display.stackFrames
+        .map((s) => s.originalScriptCode)
+        .flat(1)
+        .map((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.lineNumber) !== null && _a !== void 0 ? _a : 0; }));
+    const message = (0, react_1.useMemo)(() => {
+        // Format compilation errors
+        const location = (0, map_error_to_react_stack_1.getLocationFromBuildError)(display.error);
+        if (!location) {
+            return display.error.message;
+        }
+        return location.message
+            .replace(/\\n/g, '\n')
+            .replace(/\\t/g, '  ')
+            .replace(/^error:/, '')
+            .trim();
+    }, [display.error]);
+    const lineNumberWidth = String(highestLineNumber).length;
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: display.error.name, message: message }), display.stackFrames.length > 0 && window.remotion_editorName ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OpenInEditor_1.OpenInEditor, { stack: display.stackFrames[0] }), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(SearchGitHubIssues_1.SearchGithubIssues, { message: display.error.message }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(AskOnDiscord_1.AskOnDiscord, {}), (0, jsx_runtime_1.jsx)("div", { style: stack, children: display.stackFrames.map((s, i) => {
+                    return ((0, jsx_runtime_1.jsx)(StackFrame_1.StackElement
+                    // eslint-disable-next-line react/no-array-index-key
+                    , { isFirst: i === 0, s: s, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)' }, i));
+                }) })] }));
+};
+exports.ErrorDisplay = ErrorDisplay;

package/dist/preview-server/error-overlay/remotion-overlay/ErrorLoader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ErrorLoader: React.FC<{
+    error: Error;
+}>;

package/dist/preview-server/error-overlay/remotion-overlay/ErrorLoader.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorLoader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const listen_to_runtime_errors_1 = require("../react-overlay/listen-to-runtime-errors");
+const ErrorDisplay_1 = require("./ErrorDisplay");
+const ErrorTitle_1 = require("./ErrorTitle");
+const container = {
+    width: '100%',
+    maxWidth: 1000,
+    paddingLeft: 14,
+    paddingRight: 14,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    fontFamily: 'SF Pro Text, sans-serif',
+    paddingTop: '5vh',
+};
+const errorWhileErrorStyle = {
+    color: 'white',
+    lineHeight: 1.5,
+    whiteSpace: 'pre',
+};
+const ErrorLoader = ({ error }) => {
+    const [state, setState] = (0, react_1.useState)({
+        type: 'loading',
+    });
+    (0, react_1.useEffect)(() => {
+        (0, listen_to_runtime_errors_1.getErrorRecord)(error)
+            .then((record) => {
+            if (record) {
+                setState({
+                    type: 'symbolicated',
+                    record,
+                });
+            }
+            else {
+                setState({
+                    type: 'no-record',
+                });
+            }
+        })
+            .catch((err) => {
+            setState({
+                err,
+                type: 'error',
+            });
+        });
+    }, [error]);
+    if (state.type === 'loading') {
+        return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: true, name: error.name, message: error.message }) }));
+    }
+    if (state.type === 'error') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Error while getting stack trace:" }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: state.err.stack }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Report this in the Remotion repo." })] }));
+    }
+    if (state.type === 'no-record') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ErrorTitle_1.ErrorTitle, { symbolicating: false, name: error.name, message: error.message }), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Check the Terminal and browser console for error messages." })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(ErrorDisplay_1.ErrorDisplay, { display: state.record }) }));
+};
+exports.ErrorLoader = ErrorLoader;

package/dist/preview-server/error-overlay/remotion-overlay/ErrorTitle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ErrorTitle: React.FC<{
+    name: string;
+    message: string;
+    symbolicating: boolean;
+}>;

package/dist/preview-server/error-overlay/remotion-overlay/ErrorTitle.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_overlay_1 = require("../react-overlay");
+const DismissButton_1 = require("./DismissButton");
+const Symbolicating_1 = require("./Symbolicating");
+const title = {
+    marginBottom: 8,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+};
+const left = {
+    flex: 1,
+    paddingRight: 14,
+    lineHeight: 1.5,
+    whiteSpace: 'pre',
+    fontSize: '1.5em',
+    fontWeight: 'bold',
+    overflowX: 'auto',
+};
+const errName = {
+    fontSize: '0.8em',
+    background: 'linear-gradient(90deg,#4290f5,#42e9f5)',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    display: 'inline-block',
+};
+const row = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const spacer = {
+    width: 5,
+};
+const ErrorTitle = ({ name, message, symbolicating }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: title, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)("div", { children: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})] }));
+};
+exports.ErrorTitle = ErrorTitle;

package/dist/preview-server/error-overlay/remotion-overlay/OpenInEditor.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SymbolicatedStackFrame } from '../react-overlay/utils/stack-frame';
+export declare const OpenInEditor: React.FC<{
+    stack: SymbolicatedStackFrame;
+}>;

package/dist/preview-server/error-overlay/remotion-overlay/OpenInEditor.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenInEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-console */
+const react_1 = require("react");
+const Button_1 = require("./Button");
+const initialState = { type: 'idle' };
+const reducer = (state, action) => {
+    if (action.type === 'start') {
+        return {
+            type: 'load',
+        };
+    }
+    if (action.type === 'fail') {
+        return {
+            type: 'error',
+        };
+    }
+    if (action.type === 'reset') {
+        return {
+            type: 'idle',
+        };
+    }
+    if (action.type === 'succeed') {
+        return {
+            type: 'success',
+        };
+    }
+    return state;
+};
+const OpenInEditor = ({ stack }) => {
+    const isMounted = (0, react_1.useRef)(true);
+    const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
+    const dispatchIfMounted = (0, react_1.useCallback)((payload) => {
+        if (isMounted.current === false)
+            return;
+        dispatch(payload);
+    }, []);
+    const openInBrowser = (0, react_1.useCallback)(() => {
+        dispatch({ type: 'start' });
+        fetch(`/api/open-in-editor`, {
+            method: 'post',
+            headers: {
+                'content-type': 'application/json',
+            },
+            body: JSON.stringify({
+                stack,
+            }),
+        })
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.success) {
+                dispatchIfMounted({ type: 'succeed' });
+            }
+            else {
+                dispatchIfMounted({ type: 'fail' });
+            }
+        })
+            .catch((err) => {
+            dispatchIfMounted({ type: 'fail' });
+            console.log('Could not open browser', err);
+        })
+            .finally(() => {
+            setTimeout(() => {
+                dispatchIfMounted({ type: 'reset' });
+            }, 2000);
+        });
+    }, [dispatchIfMounted, stack]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const label = (0, react_1.useMemo)(() => {
+        switch (state.type) {
+            case 'error':
+                return 'Failed to open';
+            case 'idle':
+                return `Open in ${window.remotion_editorName}`;
+            case 'success':
+                return `Opened in ${window.remotion_editorName}`;
+            case 'load':
+                return `Opening...`;
+            default:
+                throw new Error('invalid state');
+        }
+    }, [state.type]);
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: label }));
+};
+exports.OpenInEditor = OpenInEditor;

package/dist/preview-server/error-overlay/remotion-overlay/Overlay.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare type SetErrors = {
+    setErrors: (errs: State) => void;
+    addError: (err: Error) => void;
+};
+export declare const setErrorsRef: React.RefObject<SetErrors>;
+declare type State = {
+    type: 'clear';
+} | {
+    type: 'errors';
+    errors: Error[];
+};
+export declare const Overlay: React.FC;
+export {};

package/dist/preview-server/error-overlay/remotion-overlay/Overlay.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = exports.setErrorsRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const ErrorLoader_1 = require("./ErrorLoader");
+exports.setErrorsRef = (0, react_1.createRef)();
+const errorsAreTheSame = (first, second) => {
+    return first.stack === second.stack && first.message === second.message;
+};
+const BACKGROUND_COLOR = '#1f2428';
+const Overlay = () => {
+    const [errors, setErrors] = (0, react_1.useState)({ type: 'clear' });
+    const addError = (0, react_1.useCallback)((err) => {
+        setErrors((state) => {
+            if (state.type === 'errors') {
+                if (state.errors.some((e) => errorsAreTheSame(e, err))) {
+                    return state;
+                }
+                return {
+                    ...state,
+                    errors: [...state.errors, err],
+                };
+            }
+            return {
+                type: 'errors',
+                errors: [err],
+            };
+        });
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.setErrorsRef, () => {
+        return { setErrors, addError };
+    }, [addError]);
+    if (errors.type === 'clear') {
+        return null;
+    }
+    if (errors.errors.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
+            backgroundColor: BACKGROUND_COLOR,
+            overflow: 'auto',
+            color: 'white',
+        }, children: errors.errors.map((err) => {
+            return (0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { error: err }, err.stack);
+        }) }));
+};
+exports.Overlay = Overlay;

package/dist/preview-server/error-overlay/remotion-overlay/SearchGitHubIssues.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SearchGithubIssues: React.FC<{
+    message: string;
+}>;

package/dist/preview-server/error-overlay/remotion-overlay/SearchGitHubIssues.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchGithubIssues = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("./Button");
+const SearchGithubIssues = ({ message }) => {
+    const openInBrowser = (0, react_1.useCallback)(() => {
+        window.open(`https://github.com/remotion-dev/remotion/issues?q=${encodeURIComponent(message)}`, '_blank');
+    }, [message]);
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, children: "Search GitHub Issues" });
+};
+exports.SearchGithubIssues = SearchGithubIssues;

package/dist/preview-server/error-overlay/remotion-overlay/StackFrame.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SymbolicatedStackFrame } from '../react-overlay/utils/stack-frame';
+export declare const StackElement: React.FC<{
+    s: SymbolicatedStackFrame;
+    lineNumberWidth: number;
+    isFirst: boolean;
+    defaultFunctionName: string;
+}>;

package/dist/preview-server/error-overlay/remotion-overlay/StackFrame.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("./Button");
+const carets_1 = require("./carets");
+const CodeFrame_1 = require("./CodeFrame");
+const format_location_1 = require("./format-location");
+const location = {
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontFamily: 'monospace',
+};
+const header = {
+    paddingLeft: 14,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingRight: 14,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottom: '1px solid rgb(66, 144, 245)',
+    backgroundColor: 'black',
+};
+const left = {
+    paddingRight: 14,
+    flex: 1,
+};
+const fnName = {
+    fontSize: 14,
+    marginBottom: 3,
+};
+const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
+    var _a;
+    const [showCodeFrame, setShowCodeFrame] = (0, react_1.useState)(() => {
+        var _a, _b;
+        return (!((_a = s.originalFileName) === null || _a === void 0 ? void 0 : _a.includes('node_modules')) &&
+            !((_b = s.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'))) ||
+            isFirst;
+    });
+    const toggleCodeFrame = (0, react_1.useCallback)(() => {
+        setShowCodeFrame((f) => !f);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: header, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? (0, jsx_runtime_1.jsx)(carets_1.CaretDown, {}) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}) })) : null] }), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
+                    s.originalScriptCode.length > 0 &&
+                    showCodeFrame ? ((0, jsx_runtime_1.jsx)(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })] }));
+};
+exports.StackElement = StackElement;

package/dist/preview-server/error-overlay/remotion-overlay/Symbolicating.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Symbolicating: React.FC;

package/dist/preview-server/error-overlay/remotion-overlay/Symbolicating.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Symbolicating = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Symbolicating = (props) => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { id: "loading", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "16", height: "16", fill: "white", ...props, children: [(0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(0 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(45 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.125s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(90 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.25s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(135 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.375s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(180 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.5s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(225 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.675s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(270 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.75s" }) }), (0, jsx_runtime_1.jsx)("path", { opacity: ".1", d: "M14 0 H18 V8 H14 z", transform: "rotate(315 16 16)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", from: "1", to: ".1", dur: "1s", repeatCount: "indefinite", begin: "0.875s" }) })] }));
+};
+exports.Symbolicating = Symbolicating;

package/dist/preview-server/error-overlay/remotion-overlay/carets.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const CaretRight: () => JSX.Element;
+export declare const CaretDown: () => JSX.Element;

package/dist/preview-server/error-overlay/remotion-overlay/carets.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaretDown = exports.CaretRight = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CaretRight = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { style: { height: 20 }, "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 192 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
+};
+exports.CaretRight = CaretRight;
+const CaretDown = () => {
+    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: { height: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+};
+exports.CaretDown = CaretDown;

package/dist/preview-server/error-overlay/remotion-overlay/format-location.d.ts

@@ -0,0 +1 @@
+export declare const formatLocation: (location: string) => string;

package/dist/preview-server/error-overlay/remotion-overlay/format-location.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLocation = void 0;
+const formatLocation = (location) => {
+    if (location.startsWith('webpack://')) {
+        return location.replace('webpack://', '');
+    }
+    return location;
+};
+exports.formatLocation = formatLocation;