@remotion/bundler 4.0.126 → 4.0.128

package/dist/bundle-mode.d.ts

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

package/dist/bundle-mode.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBundleMode = exports.setBundleMode = void 0;
+let bundleMode = {
+    type: 'index',
+};
+const setBundleMode = (state) => {
+    bundleMode = state;
+};
+exports.setBundleMode = setBundleMode;
+const getBundleMode = () => {
+    return bundleMode;
+};
+exports.getBundleMode = getBundleMode;

package/dist/bundle.d.ts

@@ -1,16 +1,17 @@
 import type { GitSource } from '@remotion/studio-shared';
 import webpack from 'webpack';
 import type { WebpackOverrideFn } from './webpack-config';
-export type LegacyBundleOptions = {
-    webpackOverride?: WebpackOverrideFn;
-    outDir?: string;
-    enableCaching?: boolean;
-    publicPath?: string;
-    rootDir?: string;
-    publicDir?: string | null;
-    onPublicDirCopyProgress?: (bytes: number) => void;
-    onSymlinkDetected?: (path: string) => void;
+export type MandatoryLegacyBundleOptions = {
+    webpackOverride: WebpackOverrideFn;
+    outDir: string | null;
+    enableCaching: boolean;
+    publicPath: string | null;
+    rootDir: string | null;
+    publicDir: string | null;
+    onPublicDirCopyProgress: (bytes: number) => void;
+    onSymlinkDetected: (path: string) => void;
 };
+export type LegacyBundleOptions = Partial<MandatoryLegacyBundleOptions>;
 export declare const getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgress, options, bufferStateDelayInMilliseconds, maxTimelineTracks, }: {
     outDir: string;
     entryPoint: string;
@@ -18,25 +19,32 @@ export declare const getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onP
     bufferStateDelayInMilliseconds: number | null;
     maxTimelineTracks: number | null;
     onProgress?: ((progress: number) => void) | undefined;
-    options?: LegacyBundleOptions | undefined;
+    options?: Partial<MandatoryLegacyBundleOptions> | undefined;
 }) => Promise<[string, webpack.Configuration]>;
+type NewBundleOptions = {
+    entryPoint: string;
+    onProgress: (progress: number) => void;
+    ignoreRegisterRootWarning: boolean;
+    onDirectoryCreated: (dir: string) => void;
+    gitSource: GitSource | null;
+    maxTimelineTracks: number | null;
+    bufferStateDelayInMilliseconds: number | null;
+};
+type MandatoryBundleOptions = {
+    entryPoint: string;
+} & NewBundleOptions & MandatoryLegacyBundleOptions;
 export type BundleOptions = {
     entryPoint: string;
-    onProgress?: (progress: number) => void;
-    ignoreRegisterRootWarning?: boolean;
-    onDirectoryCreated?: (dir: string) => void;
-    gitSource?: GitSource | null;
-    maxTimelineTracks?: number;
-    bufferStateDelayInMilliseconds?: number;
-} & LegacyBundleOptions;
+} & Partial<NewBundleOptions> & LegacyBundleOptions;
 type Arguments = [options: BundleOptions] | [
     entryPoint: string,
     onProgress?: (progress: number) => void,
     options?: LegacyBundleOptions
 ];
 export declare const findClosestFolderWithItem: (currentDir: string, file: string) => string | null;
+export declare const internalBundle: (actualArgs: MandatoryBundleOptions) => Promise<string>;
 /**
- * @description The method bundles a Remotion project using Webpack and prepares it for rendering using renderMedia()
+ * @description The method bundles a Remotion project using Webpack and prepares it for rendering.
  * @see [Documentation](https://www.remotion.dev/docs/bundle)
  */
 export declare function bundle(...args: Arguments): Promise<string>;

package/dist/bundle.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bundle = exports.findClosestFolderWithItem = exports.getConfig = void 0;
+exports.bundle = exports.internalBundle = exports.findClosestFolderWithItem = exports.getConfig = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const node_fs_1 = __importStar(require("node:fs"));
 const node_os_1 = __importDefault(require("node:os"));
@@ -123,13 +123,8 @@ const validateEntryPoint = async (entryPoint) => {
         ].join(' '));
     }
 };
-/**
- * @description The method bundles a Remotion project using Webpack and prepares it for rendering using renderMedia()
- * @see [Documentation](https://www.remotion.dev/docs/bundle)
- */
-async function bundle(...args) {
+const internalBundle = async (actualArgs) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const actualArgs = convertArgumentsIntoOptions(args);
     const entryPoint = node_path_1.default.resolve(process.cwd(), actualArgs.entryPoint);
     const resolvedRemotionRoot = (_b = (_a = actualArgs === null || actualArgs === void 0 ? void 0 : actualArgs.rootDir) !== null && _a !== void 0 ? _a : findClosestPackageJsonFolder(entryPoint)) !== null && _b !== void 0 ? _b : process.cwd();
     if (!actualArgs.ignoreRegisterRootWarning) {
@@ -233,5 +228,32 @@ async function bundle(...args) {
     node_fs_1.default.copyFileSync(node_path_1.default.join(__dirname, '../favicon.ico'), node_path_1.default.join(outDir, 'favicon.ico'));
     node_fs_1.default.copyFileSync(node_path_1.default.resolve(require.resolve('source-map'), '..', 'lib', 'mappings.wasm'), node_path_1.default.join(outDir, studio_shared_1.SOURCE_MAP_ENDPOINT.replace('/', '')));
     return outDir;
+};
+exports.internalBundle = internalBundle;
+/**
+ * @description The method bundles a Remotion project using Webpack and prepares it for rendering.
+ * @see [Documentation](https://www.remotion.dev/docs/bundle)
+ */
+async function bundle(...args) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const actualArgs = convertArgumentsIntoOptions(args);
+    const result = await (0, exports.internalBundle)({
+        bufferStateDelayInMilliseconds: (_a = actualArgs.bufferStateDelayInMilliseconds) !== null && _a !== void 0 ? _a : null,
+        enableCaching: (_b = actualArgs.enableCaching) !== null && _b !== void 0 ? _b : true,
+        entryPoint: actualArgs.entryPoint,
+        gitSource: (_c = actualArgs.gitSource) !== null && _c !== void 0 ? _c : null,
+        ignoreRegisterRootWarning: (_d = actualArgs.ignoreRegisterRootWarning) !== null && _d !== void 0 ? _d : false,
+        maxTimelineTracks: (_e = actualArgs.maxTimelineTracks) !== null && _e !== void 0 ? _e : null,
+        onDirectoryCreated: (_f = actualArgs.onDirectoryCreated) !== null && _f !== void 0 ? _f : (() => { }),
+        onProgress: (_g = actualArgs.onProgress) !== null && _g !== void 0 ? _g : (() => { }),
+        onPublicDirCopyProgress: (_h = actualArgs.onPublicDirCopyProgress) !== null && _h !== void 0 ? _h : (() => { }),
+        onSymlinkDetected: (_j = actualArgs.onSymlinkDetected) !== null && _j !== void 0 ? _j : (() => { }),
+        outDir: (_k = actualArgs.outDir) !== null && _k !== void 0 ? _k : null,
+        publicDir: (_l = actualArgs.publicDir) !== null && _l !== void 0 ? _l : null,
+        publicPath: (_m = actualArgs.publicPath) !== null && _m !== void 0 ? _m : null,
+        rootDir: (_o = actualArgs.rootDir) !== null && _o !== void 0 ? _o : null,
+        webpackOverride: (_p = actualArgs.webpackOverride) !== null && _p !== void 0 ? _p : ((f) => f),
+    });
+    return result;
 }
 exports.bundle = bundle;

package/dist/homepage/homepage.d.ts

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

package/dist/homepage/homepage.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Homepage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const bundle_mode_1 = require("../bundle-mode");
+const renderEntry_1 = require("../renderEntry");
+const container = {
+    width: 800,
+    margin: 'auto',
+    paddingLeft: 20,
+    paddingRight: 20,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const pre = {
+    display: 'block',
+    backgroundColor: '#f7f7f7',
+    whiteSpace: 'nowrap',
+    padding: 16,
+    fontFamily: 'monospace',
+    borderRadius: 5,
+    fontSize: 15,
+    overflowX: 'auto',
+};
+const AvailableCompositions = () => {
+    const [state, setComps] = (0, react_1.useState)({
+        type: 'not-initialized',
+    });
+    (0, react_1.useEffect)(() => {
+        if ((0, bundle_mode_1.getBundleMode)().type !== 'evaluation') {
+            return;
+        }
+        let timeout = null;
+        const check = () => {
+            if (window.remotion_renderReady === true) {
+                setComps({ type: 'loading' });
+                setTimeout(() => {
+                    try {
+                        const newComps = window.remotion_getCompositionNames();
+                        setComps({ type: 'loaded', comps: newComps });
+                    }
+                    catch (err) {
+                        setComps({ type: 'error', error: err });
+                    }
+                }, 250);
+            }
+            else {
+                timeout = setTimeout(check, 250);
+            }
+        };
+        check();
+        return () => {
+            if (!timeout) {
+                return;
+            }
+            clearTimeout(timeout);
+        };
+    }, []);
+    const showComps = (0, react_1.useCallback)(() => {
+        (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." }));
+    }
+    if (state.type === 'loading') {
+        return (0, jsx_runtime_1.jsx)("div", { children: state === null ? (0, jsx_runtime_1.jsx)("p", { children: "Loading compositions..." }) : null });
+    }
+    if (state.type === 'error') {
+        return (0, jsx_runtime_1.jsxs)("div", { children: ["Error loading compositions: ", state.error.stack] });
+    }
+    if (state.type === 'not-initialized') {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Not initialized" });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { children: state === null
+                ? []
+                : state.comps.map((c) => {
+                    return (0, jsx_runtime_1.jsx)("li", { children: c }, c);
+                }) }) }));
+};
+const TestCORS = () => {
+    const [serveUrl, setServeUrl] = (0, react_1.useState)('');
+    const [result, setResult] = (0, react_1.useState)('');
+    const handleServeUrl = (0, react_1.useCallback)((e) => {
+        setServeUrl(e.target.value);
+    }, []);
+    const isCORSWorking = (0, react_1.useCallback)(async (e) => {
+        e.preventDefault();
+        try {
+            const response = await fetch(serveUrl, { mode: 'cors' });
+            if (response.ok) {
+                setResult(`CORS is enabled on this URL: ${serveUrl}`);
+            }
+            else {
+                setResult('URL does not support CORS - See DevTools console for more details');
+            }
+        }
+        catch (error) {
+            setResult('URL does not support CORS - See DevTools console for more details');
+        }
+    }, [serveUrl]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Quickly test if a URL is supported being loaded on origin", ' ', (0, jsx_runtime_1.jsx)("code", { children: window.location.origin }), ". Enter the URL of an asset below."] }), result ? (0, jsx_runtime_1.jsx)("p", { className: "result", children: result }) : null, (0, jsx_runtime_1.jsxs)("form", { onSubmit: isCORSWorking, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "serveurl", children: (0, jsx_runtime_1.jsx)("input", { placeholder: "Enter URL", type: "text", name: "serveurl", value: serveUrl, onChange: handleServeUrl }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Test CORS" })] })] }));
+};
+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" }), "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."] }), (0, jsx_runtime_1.jsx)("h2", { children: "CORS testing tool" }), (0, jsx_runtime_1.jsx)(TestCORS, {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] }));
+};
+exports.Homepage = Homepage;

package/dist/index.d.ts

@@ -43,7 +43,7 @@ export declare const BundlerInternals: {
         bufferStateDelayInMilliseconds: number | null;
         maxTimelineTracks: number | null;
         onProgress?: ((progress: number) => void) | undefined;
-        options?: import("./bundle").LegacyBundleOptions | undefined;
+        options?: Partial<import("./bundle").MandatoryLegacyBundleOptions> | undefined;
     }) => Promise<[string, webpack.Configuration]>;
     readRecursively: ({ folder, output, startPath, staticHash, limit, }: {
         folder: string;
@@ -53,8 +53,19 @@ export declare const BundlerInternals: {
         limit: number;
     }) => import("remotion").StaticFile[];
     findClosestFolderWithItem: (currentDir: string, file: string) => string | null;
+    internalBundle: (actualArgs: {
+        entryPoint: string;
+    } & {
+        entryPoint: string;
+        onProgress: (progress: number) => void;
+        ignoreRegisterRootWarning: boolean;
+        onDirectoryCreated: (dir: string) => void;
+        gitSource: import("@remotion/studio").GitSource | null;
+        maxTimelineTracks: number | null;
+        bufferStateDelayInMilliseconds: number | null;
+    } & import("./bundle").MandatoryLegacyBundleOptions) => Promise<string>;
 };
 export type { GitSource } from '@remotion/studio';
-export { bundle, BundleOptions, LegacyBundleOptions } from './bundle';
+export { bundle, BundleOptions, LegacyBundleOptions, MandatoryLegacyBundleOptions, } from './bundle';
 export { WebpackConfiguration, WebpackOverrideFn } from './webpack-config';
 export { webpack };

package/dist/index.js

@@ -18,6 +18,7 @@ exports.BundlerInternals = {
     getConfig: bundle_1.getConfig,
     readRecursively: read_recursively_1.readRecursively,
     findClosestFolderWithItem: bundle_1.findClosestFolderWithItem,
+    internalBundle: bundle_1.internalBundle,
 };
 var bundle_2 = require("./bundle");
 Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundle_2.bundle; } });

package/dist/renderEntry.d.ts

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

package/dist/renderEntry.js

@@ -0,0 +1,274 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setBundleModeAndUpdate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// In React 18, you should use createRoot() from "react-dom/client".
+// In React 18, you should use render from "react-dom".
+// We support both, but Webpack chooses both of them and normalizes them to "react-dom/client",
+// hence why we import the right thing all the time but need to differentiate here
+const client_1 = __importDefault(require("react-dom/client"));
+const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
+const bundle_mode_1 = require("./bundle-mode");
+const homepage_1 = require("./homepage/homepage");
+remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(null, '#fff'));
+const getCanSerializeDefaultProps = (object) => {
+    try {
+        const str = JSON.stringify(object);
+        // 256MB is the theoretical limit, making it throw if over 90% of that is reached.
+        return str.length < 256 * 1024 * 1024 * 0.9;
+    }
+    catch (err) {
+        if (err.message.includes('Invalid string length')) {
+            return false;
+        }
+        throw err;
+    }
+};
+const GetVideo = ({ state }) => {
+    const video = remotion_1.Internals.useVideo();
+    const compositions = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const portalContainer = (0, react_1.useRef)(null);
+    const [handle] = (0, react_1.useState)(() => (0, remotion_1.delayRender)('Wait for Composition' + JSON.stringify(state)));
+    (0, react_1.useEffect)(() => {
+        return () => (0, remotion_1.continueRender)(handle);
+    }, [handle]);
+    (0, react_1.useEffect)(() => {
+        if (state.type !== 'composition') {
+            return;
+        }
+        if (!video && compositions.compositions.length > 0) {
+            const foundComposition = compositions.compositions.find((c) => c.id === state.compositionName);
+            if (!foundComposition) {
+                throw new Error(`Found no composition with the name ${state.compositionName}. The following compositions were found instead: ${compositions.compositions
+                    .map((c) => c.id)
+                    .join(', ')}. All compositions must have their ID calculated deterministically and must be mounted at the same time.`);
+            }
+            if (foundComposition) {
+                compositions.setCanvasContent({
+                    type: 'composition',
+                    compositionId: foundComposition.id,
+                });
+            }
+            else {
+                compositions.setCanvasContent(null);
+            }
+            compositions.setCurrentCompositionMetadata({
+                props: no_react_1.NoReactInternals.deserializeJSONWithCustomFields(state.serializedResolvedPropsWithSchema),
+                durationInFrames: state.compositionDurationInFrames,
+                fps: state.compositionFps,
+                height: state.compositionHeight,
+                width: state.compositionWidth,
+                defaultCodec: state.compositionDefaultCodec,
+            });
+        }
+    }, [compositions, compositions.compositions, state, video]);
+    (0, react_1.useEffect)(() => {
+        if (state.type === 'evaluation') {
+            (0, remotion_1.continueRender)(handle);
+        }
+        else if (video) {
+            (0, remotion_1.continueRender)(handle);
+        }
+    }, [handle, state.type, video]);
+    (0, react_1.useEffect)(() => {
+        if (!video) {
+            return;
+        }
+        const { current } = portalContainer;
+        if (!current) {
+            throw new Error('portal did not render');
+        }
+        current.appendChild(remotion_1.Internals.portalNode());
+        return () => {
+            current.removeChild(remotion_1.Internals.portalNode());
+        };
+    }, [video]);
+    if (!video) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ref: portalContainer, id: "remotion-canvas", style: {
+            width: video.width,
+            height: video.height,
+            display: 'flex',
+            backgroundColor: 'transparent',
+        } }));
+};
+const videoContainer = document.getElementById('video-container');
+const explainerContainer = document.getElementById('explainer-container');
+let cleanupVideoContainer = () => {
+    videoContainer.innerHTML = '';
+};
+let cleanupExplainerContainer = () => {
+    explainerContainer.innerHTML = '';
+};
+const waitForRootHandle = (0, remotion_1.delayRender)('Loading root component - See https://remotion.dev/docs/troubleshooting/loading-root-component if you experience a timeout');
+const WaitForRoot = () => {
+    const [Root, setRoot] = (0, react_1.useState)(() => remotion_1.Internals.getRoot());
+    (0, react_1.useEffect)(() => {
+        if (Root) {
+            (0, remotion_1.continueRender)(waitForRootHandle);
+            return;
+        }
+        const cleanup = remotion_1.Internals.waitForRoot((NewRoot) => {
+            setRoot(() => NewRoot);
+        });
+        return () => cleanup();
+    }, [Root]);
+    if (Root === null) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(Root, {});
+};
+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, { numberOfAudioTags: 0, children: [(0, jsx_runtime_1.jsx)(WaitForRoot, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }));
+        if (client_1.default.createRoot) {
+            const root = client_1.default.createRoot(videoContainer);
+            root.render(markup);
+            cleanupVideoContainer = () => {
+                root.unmount();
+            };
+        }
+        else {
+            client_1.default.render(markup, videoContainer);
+            cleanupVideoContainer = () => {
+                client_1.default.unmountComponentAtNode(videoContainer);
+            };
+        }
+    }
+    else {
+        cleanupVideoContainer();
+        cleanupVideoContainer = () => {
+            videoContainer.innerHTML = '';
+        };
+    }
+    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, {}));
+            cleanupExplainerContainer = () => {
+                root.unmount();
+            };
+        }
+        else {
+            const root = client_1.default;
+            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}), explainerContainer);
+            cleanupExplainerContainer = () => {
+                root.unmountComponentAtNode(explainerContainer);
+            };
+        }
+    }
+    else {
+        cleanupExplainerContainer();
+        cleanupExplainerContainer = () => {
+            explainerContainer.innerHTML = '';
+        };
+    }
+};
+renderContent();
+const setBundleModeAndUpdate = (state) => {
+    (0, bundle_mode_1.setBundleMode)(state);
+    renderContent();
+};
+exports.setBundleModeAndUpdate = setBundleModeAndUpdate;
+if (typeof window !== 'undefined') {
+    const getUnevaluatedComps = () => {
+        if (!remotion_1.Internals.getRoot()) {
+            throw new Error('registerRoot() was never called. 1. Make sure you specified the correct entrypoint for your bundle. 2. If your registerRoot() call is deferred, use the delayRender/continueRender pattern to tell Remotion to wait.');
+        }
+        if (!remotion_1.Internals.compositionsRef.current) {
+            throw new Error('Unexpectedly did not have a CompositionManager');
+        }
+        const compositions = remotion_1.Internals.compositionsRef.current.getCompositions();
+        const canSerializeDefaultProps = getCanSerializeDefaultProps(compositions);
+        if (!canSerializeDefaultProps) {
+            console.warn('defaultProps are too big to serialize - trying to find the problematic composition...');
+            for (const comp of compositions) {
+                if (!getCanSerializeDefaultProps(comp)) {
+                    throw new Error(`defaultProps too big - could not serialize - the defaultProps of composition with ID ${comp.id} - the object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops`);
+                }
+            }
+            console.warn('Could not single out a problematic composition -  The composition list as a whole is too big to serialize.');
+            throw new Error('defaultProps too big - Could not serialize - an object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops');
+        }
+        return compositions;
+    };
+    window.getStaticCompositions = () => {
+        var _a;
+        const compositions = getUnevaluatedComps();
+        const inputProps = typeof window === 'undefined' || (0, remotion_1.getRemotionEnvironment)().isPlayer
+            ? {}
+            : (_a = (0, remotion_1.getInputProps)()) !== null && _a !== void 0 ? _a : {};
+        return Promise.all(compositions.map(async (c) => {
+            const handle = (0, remotion_1.delayRender)(`Running calculateMetadata() for composition ${c.id}. If you didn't want to evaluate this composition, use "selectComposition()" instead of "getCompositions()"`);
+            const comp = remotion_1.Internals.resolveVideoConfig({
+                composition: c,
+                editorProps: {},
+                signal: new AbortController().signal,
+                inputProps,
+            });
+            const resolved = await Promise.resolve(comp);
+            (0, remotion_1.continueRender)(handle);
+            const { props, defaultProps, ...data } = resolved;
+            return {
+                ...data,
+                serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+                    data: props,
+                    indent: undefined,
+                    staticBase: null,
+                }).serializedString,
+                serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+                    data: defaultProps,
+                    indent: undefined,
+                    staticBase: null,
+                }).serializedString,
+            };
+        }));
+    };
+    window.remotion_getCompositionNames = () => {
+        return getUnevaluatedComps().map((c) => c.id);
+    };
+    window.remotion_calculateComposition = async (compId) => {
+        var _a;
+        const compositions = getUnevaluatedComps();
+        const selectedComp = compositions.find((c) => c.id === compId);
+        if (!selectedComp) {
+            throw new Error(`Could not find composition with ID ${compId}`);
+        }
+        const abortController = new AbortController();
+        const handle = (0, remotion_1.delayRender)(`Running the calculateMetadata() function for composition ${compId}`);
+        const inputProps = typeof window === 'undefined' || (0, remotion_1.getRemotionEnvironment)().isPlayer
+            ? {}
+            : (_a = (0, remotion_1.getInputProps)()) !== null && _a !== void 0 ? _a : {};
+        const prom = await Promise.resolve(remotion_1.Internals.resolveVideoConfig({
+            composition: selectedComp,
+            editorProps: {},
+            signal: abortController.signal,
+            inputProps,
+        }));
+        (0, remotion_1.continueRender)(handle);
+        const { props, defaultProps, ...data } = prom;
+        return {
+            ...data,
+            serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+                data: props,
+                indent: undefined,
+                staticBase: null,
+            }).serializedString,
+            serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithDate({
+                data: defaultProps,
+                indent: undefined,
+                staticBase: null,
+            }).serializedString,
+        };
+    };
+    window.siteVersion = '10';
+    window.remotion_version = remotion_1.VERSION;
+    window.remotion_setBundleMode = exports.setBundleModeAndUpdate;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/bundler",
-  "version": "4.0.126",
+  "version": "4.0.128",
   "description": "Bundler for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -25,9 +25,9 @@
     "style-loader": "2.0.0",
     "source-map": "0.7.3",
     "webpack": "5.83.1",
-    "remotion": "4.0.126",
-    "@remotion/studio": "4.0.126",
-    "@remotion/studio-shared": "4.0.126"
+    "remotion": "4.0.128",
+    "@remotion/studio": "4.0.128",
+    "@remotion/studio-shared": "4.0.128"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/renderEntry.tsx

@@ -375,7 +375,11 @@ if (typeof window !== 'undefined') {
 		const compositions = getUnevaluatedComps();
 		const selectedComp = compositions.find((c) => c.id === compId);
 		if (!selectedComp) {
-			throw new Error(`Could not find composition with ID ${compId}`);
+			throw new Error(
+				`Could not find composition with ID ${compId}. Available compositions: ${compositions
+					.map((c) => c.id)
+					.join(', ')}`,
+			);
 		}
 
 		const abortController = new AbortController();