@remotion/bundler 4.0.113 → 4.0.115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/bundler",
-  "version": "4.0.113",
+  "version": "4.0.115",
   "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.113",
-    "@remotion/studio-shared": "4.0.113",
-    "@remotion/studio": "4.0.113"
+    "remotion": "4.0.115",
+    "@remotion/studio": "4.0.115",
+    "@remotion/studio-shared": "4.0.115"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/dist/bundle-mode.d.ts

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

package/dist/bundle-mode.js

@@ -1,14 +0,0 @@
-"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/homepage/homepage.d.ts

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

package/dist/homepage/homepage.js

@@ -1,108 +0,0 @@
-"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/renderEntry.d.ts

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

package/dist/renderEntry.js

@@ -1,274 +0,0 @@
-"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;
-}