@remotion/bundler 4.0.0-oops.3 → 4.0.0-publish.10

package/dist/bundle-mode.d.ts

@@ -1,3 +1,3 @@
-import { BundleState } from 'remotion';
+import type { BundleState } from 'remotion';
 export declare const setBundleMode: (state: BundleState) => void;
 export declare const getBundleMode: () => BundleState;

package/dist/bundle.d.ts

@@ -0,0 +1,7 @@
+import type { WebpackOverrideFn } from 'remotion';
+export declare const bundle: (entryPoint: string, onProgressUpdate?: ((progress: number) => void) | undefined, options?: {
+    webpackOverride?: WebpackOverrideFn;
+    outDir?: string;
+    enableCaching?: boolean;
+    publicPath?: string;
+}) => Promise<string>;

package/dist/bundle.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bundle = void 0;
+const fs_1 = __importDefault(require("fs"));
+const os_1 = __importDefault(require("os"));
+const path_1 = __importDefault(require("path"));
+const remotion_1 = require("remotion");
+const util_1 = require("util");
+const webpack_1 = __importDefault(require("webpack"));
+const copy_dir_1 = require("./copy-dir");
+const index_html_1 = require("./index-html");
+const webpack_config_1 = require("./webpack-config");
+const entry = require.resolve('./renderEntry');
+const promisified = (0, util_1.promisify)(webpack_1.default);
+const prepareOutDir = async (specified) => {
+    if (specified) {
+        await fs_1.default.promises.mkdir(specified, { recursive: true });
+        return specified;
+    }
+    return fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-graphics'));
+};
+const trimLeadingSlash = (p) => {
+    if (p.startsWith('/')) {
+        return trimLeadingSlash(p.substr(1));
+    }
+    return p;
+};
+const trimTrailingSlash = (p) => {
+    if (p.endsWith('/')) {
+        return trimTrailingSlash(p.substr(0, p.length - 1));
+    }
+    return p;
+};
+const bundle = async (entryPoint, onProgressUpdate, options) => {
+    var _a, _b, _c, _d;
+    const outDir = await prepareOutDir((_a = options === null || options === void 0 ? void 0 : options.outDir) !== null && _a !== void 0 ? _a : null);
+    const output = await promisified([
+        (0, webpack_config_1.webpackConfig)({
+            entry,
+            userDefinedComponent: entryPoint,
+            outDir,
+            environment: 'production',
+            webpackOverride: (_b = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _b !== void 0 ? _b : remotion_1.Internals.defaultOverrideFunction,
+            onProgressUpdate,
+            enableCaching: (_c = options === null || options === void 0 ? void 0 : options.enableCaching) !== null && _c !== void 0 ? _c : remotion_1.Internals.DEFAULT_WEBPACK_CACHE_ENABLED,
+            maxTimelineTracks: 15,
+            // For production, the variables are set dynamically
+            envVariables: {},
+            inputProps: {},
+            entryPoints: [],
+        }),
+    ]);
+    if (!output) {
+        throw new Error('Expected webpack output');
+    }
+    const { errors } = output.toJson();
+    if (errors !== undefined && errors.length > 0) {
+        throw new Error(errors[0].message + '\n' + errors[0].details);
+    }
+    const baseDir = (_d = options === null || options === void 0 ? void 0 : options.publicPath) !== null && _d !== void 0 ? _d : '/';
+    const publicDir = '/' +
+        [trimTrailingSlash(trimLeadingSlash(baseDir)), 'public']
+            .filter(Boolean)
+            .join('/');
+    const from = path_1.default.join(process.cwd(), 'public');
+    const to = path_1.default.join(outDir, 'public');
+    if (fs_1.default.existsSync(from)) {
+        await (0, copy_dir_1.copyDir)(from, to);
+    }
+    const html = (0, index_html_1.indexHtml)(publicDir, baseDir, null);
+    fs_1.default.writeFileSync(path_1.default.join(outDir, 'index.html'), html);
+    return outDir;
+};
+exports.bundle = bundle;

package/dist/dev-middleware/compatible-api.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
+/// <reference types="node" />
 import { Request, Response } from 'express';
 import { ReadStream } from 'fs';
 export declare function getHeaderNames(res: Response): string[];

package/dist/dev-middleware/is-color-supported.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/error-overlay/react-overlay/utils/open-in-editor.js

@@ -2,7 +2,11 @@
 // Duplicated in create-video/src/open-in-editor.ts
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

@@ -9,6 +9,6 @@ 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" }, void 0);
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, children: "Ask on Discord" });
 };
 exports.AskOnDiscord = AskOnDiscord;

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

@@ -19,6 +19,6 @@ const buttonContainer = {
     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 }, void 0) }, void 0));
+    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/error-overlay/remotion-overlay/CodeFrame.js

@@ -22,7 +22,7 @@ const CodeFrame = ({ source, lineNumberWidth }) => {
                     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, ' ') }, void 0), s.content] }, j));
-        }) }, void 0));
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: lineNumber, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), s.content] }, j));
+        }) }));
 };
 exports.CodeFrame = CodeFrame;

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

@@ -18,6 +18,6 @@ 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" }, void 0) }, void 0) }, void 0));
+    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/error-overlay/remotion-overlay/ErrorDisplay.js

@@ -36,10 +36,10 @@ const ErrorDisplay = ({ display }) => {
             .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 }, void 0), 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] }, void 0), (0, jsx_runtime_1.jsx)("div", { style: spacer }, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsx)(SearchGitHubIssues_1.SearchGithubIssues, { message: display.error.message }, void 0), (0, jsx_runtime_1.jsx)("div", { style: spacer }, void 0), (0, jsx_runtime_1.jsx)(AskOnDiscord_1.AskOnDiscord, {}, void 0), (0, jsx_runtime_1.jsx)("div", { style: stack, children: display.stackFrames.map((s, i) => {
+    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));
-                }) }, void 0)] }, void 0));
+                }) })] }));
 };
 exports.ErrorDisplay = ErrorDisplay;

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

@@ -48,14 +48,14 @@ const ErrorLoader = ({ 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 }, void 0) }, void 0));
+        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 }, void 0), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Error while getting stack trace:" }, void 0), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: state.err.stack }, void 0), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Report this in the Remotion repo." }, void 0)] }, void 0));
+        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 }, void 0), (0, jsx_runtime_1.jsx)("div", { style: errorWhileErrorStyle, children: "Check the Terminal and browser console for error messages." }, void 0)] }, void 0));
+        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 }, void 0) }, void 0));
+    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/error-overlay/remotion-overlay/ErrorTitle.js

@@ -36,6 +36,6 @@ 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 }, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (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, {}, void 0), (0, jsx_runtime_1.jsx)("div", { style: spacer }, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", { children: message }, void 0)] }, void 0)] }, void 0), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {}, void 0)] }, void 0));
+    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/error-overlay/remotion-overlay/OpenInEditor.js

@@ -85,6 +85,6 @@ const OpenInEditor = ({ stack }) => {
                 throw new Error('invalid state');
         }
     }, [state.type]);
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: label }, void 0));
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, disabled: state.type !== 'idle', children: label }));
 };
 exports.OpenInEditor = OpenInEditor;

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

@@ -44,6 +44,6 @@ const Overlay = () => {
             color: 'white',
         }, children: errors.errors.map((err) => {
             return (0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { error: err }, err.stack);
-        }) }, void 0));
+        }) }));
 };
 exports.Overlay = Overlay;

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

@@ -8,6 +8,6 @@ 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" }, void 0);
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openInBrowser, children: "Search GitHub Issues" });
 };
 exports.SearchGithubIssues = SearchGithubIssues;

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

@@ -41,8 +41,8 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
     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 }, void 0), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] }, void 0)) : null] }, void 0), 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, {}, void 0) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
+    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 }, void 0)) : null }, void 0)] }, void 0));
+                    showCodeFrame ? ((0, jsx_runtime_1.jsx)(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })] }));
 };
 exports.StackElement = StackElement;

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

@@ -3,6 +3,6 @@ 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" }, void 0) }, void 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" }, void 0) }, void 0), (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" }, void 0) }, void 0), (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" }, void 0) }, void 0), (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" }, void 0) }, void 0), (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" }, void 0) }, void 0), (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" }, void 0) }, void 0), (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" }, void 0) }, void 0)] }, void 0));
+    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/error-overlay/remotion-overlay/carets.js

@@ -3,10 +3,10 @@ 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" }, void 0) }, void 0));
+    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" }, void 0) }, void 0));
+    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/error-overlay/remotion-overlay/index.js

@@ -9,10 +9,10 @@ const client_1 = __importDefault(require("react-dom/client"));
 const Overlay_1 = require("./Overlay");
 const mountRemotionOverlay = () => {
     if (client_1.default.createRoot) {
-        client_1.default.createRoot(document.getElementById('remotion-error-overlay')).render((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, {}, void 0));
+        client_1.default.createRoot(document.getElementById('remotion-error-overlay')).render((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, {}));
     }
     else {
-        client_1.default.render((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, {}, void 0), document.getElementById('remotion-error-overlay'));
+        client_1.default.render((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, {}), document.getElementById('remotion-error-overlay'));
     }
 };
 exports.mountRemotionOverlay = mountRemotionOverlay;

package/dist/esbuild-loader/index.d.ts

@@ -1,4 +1,4 @@
-import webpack from 'webpack';
-import { LoaderOptions } from './interfaces';
+import type webpack from 'webpack';
+import type { LoaderOptions } from './interfaces';
 declare function ESBuildLoader(this: webpack.LoaderContext<LoaderOptions>, source: string): Promise<void>;
 export default ESBuildLoader;

package/dist/esbuild-loader/index.js

@@ -35,6 +35,7 @@ async function ESBuildLoader(source) {
         sourcefile: this.resourcePath,
     };
     if (!('tsconfigRaw' in transformOptions) && isTypescriptInstalled()) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-imports
         const typescript = require('typescript');
         const tsConfig = typescript.readConfigFile(tsConfigPath, typescript.sys.readFile);
         transformOptions.tsconfigRaw = tsConfig.config;

package/dist/esbuild-loader/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { transform, TransformOptions } from 'esbuild';
+import type { transform, TransformOptions } from 'esbuild';
 declare type Implementation = {
     transform: typeof transform;
 };

package/dist/fast-refresh/index.d.ts

@@ -24,7 +24,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import webpack from 'webpack';
+import type webpack from 'webpack';
 export declare class ReactFreshWebpackPlugin {
     apply(compiler: webpack.Compiler): void;
 }

package/dist/fast-refresh/index.js

@@ -4,33 +4,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReactFreshWebpackPlugin = void 0;
-/**
- * The MIT License (MIT)
- *
- * Copyright (c) 2020 Vercel, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-// This file is copied from the @vercel/next.js, with removed TS annotations
-// minor tweaks, and removed all webpack v4-related functionality
-//
-// https://github.com/vercel/next.js/blob/canary/packages/react-refresh-utils/ReactRefreshWebpackPlugin.ts
 const webpack_1 = require("webpack");
 class ReactRefreshRuntimeModule extends webpack_1.RuntimeModule {
     constructor() {

package/dist/fast-refresh/loader.d.ts

@@ -30,6 +30,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { LoaderDefinition } from 'webpack';
+import type { LoaderDefinition } from 'webpack';
 declare const ReactRefreshLoader: LoaderDefinition;
 export default ReactRefreshLoader;

package/dist/get-port.js

@@ -5,16 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDesiredPort = void 0;
 const net_1 = __importDefault(require("net"));
-const getAvailablePort = (portToTry) => new Promise((resolve, reject) => {
-    const server = net_1.default.createServer();
-    server.unref();
-    server.on('error', reject);
-    server.listen({ port: portToTry }, () => {
-        const { port } = server.address();
-        server.close(() => {
-            resolve(port);
-        });
+const p_limit_1 = require("./p-limit");
+const getAvailablePort = (portToTry) => new Promise((resolve) => {
+    let status = 'unavailable';
+    const host = '127.0.0.1';
+    const socket = new net_1.default.Socket();
+    socket.on('connect', () => {
+        status = 'unavailable';
+        socket.destroy();
     });
+    socket.setTimeout(1000);
+    socket.on('timeout', () => {
+        status = 'unavailable';
+        socket.destroy();
+        resolve(status);
+    });
+    socket.on('error', () => {
+        status = 'available';
+    });
+    socket.on('close', () => resolve(status));
+    socket.connect(portToTry, host);
 });
 const portCheckSequence = function* (ports) {
     if (ports) {
@@ -22,30 +32,18 @@ const portCheckSequence = function* (ports) {
     }
     yield 0; // Fall back to 0 if anything else failed
 };
-const isPortAvailable = async (port) => {
-    try {
-        await getAvailablePort(port);
-        return true;
-    }
-    catch (error) {
-        if (!['EADDRINUSE', 'EACCES'].includes(error.code)) {
-            throw error;
-        }
-        return false;
-    }
-};
 const getPort = async (from, to) => {
     const ports = makeRange(from, to);
     for (const port of portCheckSequence(ports)) {
-        if (await isPortAvailable(port)) {
+        if ((await getAvailablePort(port)) === 'available') {
             return port;
         }
     }
     throw new Error('No available ports found');
 };
-const getDesiredPort = async (desiredPort, from, to) => {
+const getDesiredPortUnlimited = async (desiredPort, from, to) => {
     if (typeof desiredPort !== 'undefined' &&
-        (await isPortAvailable(desiredPort))) {
+        (await getAvailablePort(desiredPort)) === 'available') {
         return desiredPort;
     }
     const actualPort = await getPort(from, to);
@@ -55,6 +53,10 @@ const getDesiredPort = async (desiredPort, from, to) => {
     }
     return actualPort;
 };
+const limit = (0, p_limit_1.pLimit)(1);
+const getDesiredPort = (desiredPort, from, to) => {
+    return limit(getDesiredPortUnlimited, desiredPort, from, to);
+};
 exports.getDesiredPort = getDesiredPort;
 const makeRange = (from, to) => {
     if (!Number.isInteger(from) || !Number.isInteger(to)) {

package/dist/homepage/homepage.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-export declare const AvailableCompositions: React.FC;
 export declare const Homepage: React.FC;

package/dist/homepage/homepage.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Homepage = exports.AvailableCompositions = void 0;
+exports.Homepage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const bundle_mode_1 = require("../bundle-mode");
@@ -47,17 +47,16 @@ const AvailableCompositions = () => {
         (0, renderEntry_1.setBundleModeAndUpdate)({ type: 'evaluation' });
     }, []);
     if ((0, bundle_mode_1.getBundleMode)().type !== 'evaluation') {
-        return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: showComps, children: "Click here to see a list of available compositions." }, void 0));
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: showComps, children: "Click here to see a list of available compositions." }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [comps === null ? (0, jsx_runtime_1.jsx)("p", { children: "Loading compositions..." }, void 0) : null, (0, jsx_runtime_1.jsx)("ul", { children: comps === null
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [comps === null ? (0, jsx_runtime_1.jsx)("p", { children: "Loading compositions..." }) : null, (0, jsx_runtime_1.jsx)("ul", { children: comps === null
                     ? null
                     : comps.map((c) => {
                         return (0, jsx_runtime_1.jsx)("li", { children: c.id }, c.id);
-                    }) }, void 0)] }, void 0));
+                    }) })] }));
 };
-exports.AvailableCompositions = AvailableCompositions;
 const Homepage = () => {
     const url = window.location.origin + window.location.pathname;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("h1", { children: "Remotion Bundle" }, void 0), "This is a website which contains a bundled Remotion video. You can render videos based on this URL.", (0, jsx_runtime_1.jsx)("h2", { children: "Available compositions" }, void 0), (0, jsx_runtime_1.jsx)(exports.AvailableCompositions, {}, void 0), (0, jsx_runtime_1.jsx)("h2", { children: "How to render" }, void 0), "Locally: ", (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion render ", url, " ", '<comp-name> <output-location>'] }, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), "With Remotion Lambda: ", (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion lambda render ", url, " ", '<comp-name>'] }, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["You can also render still images, and use the Node.JS APIs", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getCompositions()" }, void 0), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderMedia()" }, void 0), ",", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderMediaOnLambda()" }, void 0), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderStill()" }, void 0), " and", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderStillOnLambda()" }, void 0), " with this URL."] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["Visit", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.dev/docs", target: "_blank", children: "remotion.dev/docs" }, void 0), ' ', "to read the documentation."] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("h1", { children: "Remotion Bundle" }), "This is a website which contains a bundled Remotion video. You can render videos based on this URL.", (0, jsx_runtime_1.jsx)("h2", { children: "Available compositions" }), (0, jsx_runtime_1.jsx)(AvailableCompositions, {}), (0, jsx_runtime_1.jsx)("h2", { children: "How to render" }), "Locally: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion render ", url, " ", '<comp-name> <output-location>'] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "With Remotion Lambda: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion lambda render ", url, " ", '<comp-name>'] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("p", { children: ["You can also render still images, and use the Node.JS APIs", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getCompositions()" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderMedia()" }), ",", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderMediaOnLambda()" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderStill()" }), " and", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderStillOnLambda()" }), " with this URL."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Visit", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.dev/docs", target: "_blank", children: "remotion.dev/docs" }), ' ', "to read the documentation."] })] }));
 };
 exports.Homepage = Homepage;

package/dist/hot-middleware/process-update.js

@@ -50,7 +50,7 @@ const processUpdate = function (hash, moduleMap, options) {
     async function check() {
         var _a;
         const cb = function (err, updatedModules) {
-            var _a, _b;
+            var _a;
             if (err)
                 return handleError(err);
             if (!updatedModules) {
@@ -69,7 +69,7 @@ const processUpdate = function (hash, moduleMap, options) {
                 logUpdates(updatedModules, renewedModules);
             };
             const applyResult = (_a = module.hot) === null || _a === void 0 ? void 0 : _a.apply(applyOptions, applyCallback);
-            if ((_b = applyResult) === null || _b === void 0 ? void 0 : _b.then) {
+            if (applyResult === null || applyResult === void 0 ? void 0 : applyResult.then) {
                 // HotModuleReplacement.runtime.js refers to the result as `outdatedModules`
                 applyResult
                     .then((outdatedModules) => {

package/dist/index-html.d.ts

@@ -0,0 +1 @@
+export declare const indexHtml: (staticHash: string, baseDir: string, editorName: string | null) => string;

package/dist/index-html.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.indexHtml = void 0;
+const path_1 = __importDefault(require("path"));
+const indexHtml = (staticHash, baseDir, editorName) => `
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" />
+		<link rel="icon" type="image/png" href="/remotion.png" />
+		<title>Remotion Preview</title>
+	</head>
+	<body>
+    <script>window.remotion_staticBase = "${staticHash}";</script>
+		<div id="video-container"></div>
+		<div id="explainer-container"></div>
+		${editorName
+    ? `<script>window.remotion_editorName = "${editorName}";</script>`
+    : '<script>window.remotion_editorName = null;</script>'}
+		<script>window.remotion_projectName = ${JSON.stringify(path_1.default.basename(process.cwd()))};</script>
+		<script>window.remotion_cwd = ${JSON.stringify(process.cwd())};</script>
+		
+		<div id="container"></div>
+		<div id="menuportal-0"></div>
+		<div id="menuportal-1"></div>
+		<div id="menuportal-2"></div>
+		<div id="menuportal-3"></div>
+		<div id="menuportal-4"></div>
+		<div id="menuportal-5"></div>
+		<div id="remotion-error-overlay"></div>
+		<script src="${baseDir}bundle.js"></script>
+	</body>
+</html>
+`.trim();
+exports.indexHtml = indexHtml;