@remotion/bundler 4.0.0-preload.13 → 4.0.0-spawn.13

package/dist/bundle.d.ts

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

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

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

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/get-port.js

@@ -6,15 +6,30 @@ 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);
-        });
+    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 = 'available';
+        reject(new Error('Timeout (' +
+            1000 +
+            'ms) occurred waiting for ' +
+            host +
+            ':' +
+            portToTry +
+            ' to be available'));
+        socket.destroy();
+    });
+    socket.on('error', () => {
+        status = 'available';
+    });
+    socket.on('close', () => resolve(status));
+    socket.connect(portToTry, host);
 });
 const portCheckSequence = function* (ports) {
     if (ports) {
@@ -22,22 +37,10 @@ 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;
         }
     }
@@ -45,7 +48,7 @@ const getPort = async (from, to) => {
 };
 const getDesiredPort = async (desiredPort, from, to) => {
     if (typeof desiredPort !== 'undefined' &&
-        (await isPortAvailable(desiredPort))) {
+        (await getAvailablePort(desiredPort)) === 'available') {
         return desiredPort;
     }
     const actualPort = await getPort(from, to);

package/dist/homepage/homepage.js

@@ -47,17 +47,17 @@ 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)(exports.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.d.ts

@@ -4,7 +4,7 @@ export declare const BundlerInternals: {
         webpackOverride?: import("remotion").WebpackOverrideFn | undefined;
         inputProps?: object | undefined;
         envVariables?: Record<string, string> | undefined;
-        port?: number | undefined;
+        port: number | null;
         maxTimelineTracks?: number | undefined;
     } | undefined) => Promise<number>;
     cacheExists: (environment: "development" | "production", inputProps: object | null) => boolean;

package/dist/renderEntry.js

@@ -68,12 +68,12 @@ const GetVideo = ({ state }) => {
     if (!video) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}, void 0), children: (0, jsx_runtime_1.jsx)("div", { id: "remotion-canvas", style: {
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)("div", { id: "remotion-canvas", style: {
                 width: video.width,
                 height: video.height,
                 display: 'flex',
                 backgroundColor: 'transparent',
-            }, children: Component ? ((0, jsx_runtime_1.jsx)(Component, { ...((_a = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _a !== void 0 ? _a : {}), ...(0, remotion_1.getInputProps)() }, void 0)) : null }, void 0) }, void 0));
+            }, children: Component ? ((0, jsx_runtime_1.jsx)(Component, { ...((_a = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _a !== void 0 ? _a : {}), ...(0, remotion_1.getInputProps)() })) : null }) }));
 };
 const videoContainer = document.getElementById('video-container');
 const explainerContainer = document.getElementById('explainer-container');
@@ -86,7 +86,7 @@ let cleanupExplainerContainer = () => {
 const renderContent = () => {
     const bundleMode = (0, bundle_mode_1.getBundleMode)();
     if (bundleMode.type === 'composition' || bundleMode.type === 'evaluation') {
-        const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { children: [(0, jsx_runtime_1.jsx)(Root, {}, void 0), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode }, void 0)] }, void 0));
+        const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { children: [(0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }));
         if (client_1.default.createRoot) {
             const root = client_1.default.createRoot(videoContainer);
             root.render(markup);
@@ -110,14 +110,14 @@ const renderContent = () => {
     if (bundleMode.type === 'index' || bundleMode.type === 'evaluation') {
         if (client_1.default.createRoot) {
             const root = client_1.default.createRoot(explainerContainer);
-            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}, void 0));
+            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}));
             cleanupExplainerContainer = () => {
                 root.unmount();
             };
         }
         else {
             const root = client_1.default;
-            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}, void 0), explainerContainer);
+            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}), explainerContainer);
             cleanupExplainerContainer = () => {
                 root.unmountComponentAtNode(explainerContainer);
             };
@@ -154,6 +154,6 @@ if (typeof window !== 'undefined') {
             };
         });
     };
-    window.siteVersion = '2';
+    window.siteVersion = '3';
     window.setBundleMode = exports.setBundleModeAndUpdate;
 }

package/dist/start-server.d.ts

@@ -1,8 +1,8 @@
 import { WebpackOverrideFn } from 'remotion';
 export declare const startServer: (entry: string, userDefinedComponent: string, options?: {
-    webpackOverride?: WebpackOverrideFn | undefined;
-    inputProps?: object | undefined;
-    envVariables?: Record<string, string> | undefined;
-    port?: number | undefined;
-    maxTimelineTracks?: number | undefined;
-} | undefined) => Promise<number>;
+    webpackOverride?: WebpackOverrideFn;
+    inputProps?: object;
+    envVariables?: Record<string, string>;
+    port: number | null;
+    maxTimelineTracks?: number;
+}) => Promise<number>;

package/dist/start-server.js

@@ -51,7 +51,7 @@ const startServer = async (entry, userDefinedComponent, options) => {
     }));
     app.use((0, dev_middleware_1.wdm)(compiler));
     app.use((0, hot_middleware_1.webpackHotMiddleware)(compiler));
-    app.get('/api/update', (req, res) => {
+    app.get('/api/update', (_req, res) => {
         (0, update_available_1.isUpdateAvailableWithTimeout)()
             .then((data) => {
             res.json(data);
@@ -62,7 +62,7 @@ const startServer = async (entry, userDefinedComponent, options) => {
             });
         });
     });
-    app.get('/api/project-info', (req, res) => {
+    app.get('/api/project-info', (_req, res) => {
         (0, project_info_1.getProjectInfo)()
             .then((data) => {
             res.json(data);
@@ -115,7 +115,7 @@ const startServer = async (entry, userDefinedComponent, options) => {
             });
         }
     });
-    app.use('favicon.png', (req, res) => {
+    app.use('favicon.png', (_req, res) => {
         res.sendFile(path_1.default.join(__dirname, '..', 'web', 'favicon.png'));
     });
     const edit = await editorGuess;
@@ -124,7 +124,7 @@ const startServer = async (entry, userDefinedComponent, options) => {
         res.set('content-type', 'text/html');
         res.end((0, static_preview_1.indexHtml)(hash, '/', displayName));
     });
-    const desiredPort = (_e = options === null || options === void 0 ? void 0 : options.port) !== null && _e !== void 0 ? _e : remotion_1.Internals.getServerPort();
+    const desiredPort = (_e = options === null || options === void 0 ? void 0 : options.port) !== null && _e !== void 0 ? _e : undefined;
     const port = await (0, get_port_1.getDesiredPort)(desiredPort, 3000, 3100);
     app.listen(port);
     return port;

package/dist/webpack-config.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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/bundler",
-	"version": "4.0.0-preload.13+f7b159495",
+	"version": "4.0.0-spawn.13+5f3607e8b",
 	"description": "Bundler for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -31,7 +31,7 @@
 		"memfs": "3.4.3",
 		"mime-types": "2.1.34",
 		"react-refresh": "0.9.0",
-		"remotion": "4.0.0-preload.13+f7b159495",
+		"remotion": "4.0.0-spawn.13+5f3607e8b",
 		"semver": "7.3.4",
 		"source-map": "0.6.1",
 		"source-map-loader": "3.0.0",
@@ -64,7 +64,7 @@
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
 		"ts-jest": "^27.0.5",
-		"typescript": "^4.5.5"
+		"typescript": "^4.7.0"
 	},
 	"keywords": [
 		"remotion",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f7b1594951e881444050f2f9d4af8d442bbec942"
+	"gitHead": "5f3607e8b8b958cf0604798639c8d901e9f2a295"
 }