@remotion/bundler 4.0.89 → 4.0.91

package/dist/bundle.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bundle = exports.findClosestFolderWithFile = 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"));
 const node_path_1 = __importDefault(require("node:path"));
@@ -59,7 +60,7 @@ const trimTrailingSlash = (p) => {
 };
 const getConfig = ({ entryPoint, outDir, resolvedRemotionRoot, onProgress, options, }) => {
     var _a, _b;
-    const entry = require.resolve('./renderEntry');
+    const entry = node_path_1.default.resolve(__dirname, '..', './renderEntry.tsx');
     return (0, webpack_config_1.webpackConfig)({
         entry,
         userDefinedComponent: entryPoint,
@@ -69,9 +70,8 @@ const getConfig = ({ entryPoint, outDir, resolvedRemotionRoot, onProgress, optio
         onProgress,
         enableCaching: (_b = options === null || options === void 0 ? void 0 : options.enableCaching) !== null && _b !== void 0 ? _b : true,
         maxTimelineTracks: 90,
-        entryPoints: [],
         remotionRoot: resolvedRemotionRoot,
-        keyboardShortcutsEnabled: false,
+        keyboardShortcutsEnabled: true,
         poll: null,
     });
 };
@@ -221,6 +221,7 @@ async function bundle(...args) {
     });
     node_fs_1.default.writeFileSync(node_path_1.default.join(outDir, 'index.html'), html);
     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.bundle = bundle;

package/dist/index-html.d.ts

@@ -1,43 +1,5 @@
+import type { RenderDefaults } from '@remotion/studio';
 import type { StaticFile } from 'remotion';
-export type RenderDefaults = {
-    jpegQuality: number;
-    scale: number;
-    logLevel: string;
-    codec: string;
-    concurrency: number;
-    minConcurrency: number;
-    muted: boolean;
-    maxConcurrency: number;
-    stillImageFormat: 'png' | 'jpeg' | 'webp' | 'pdf';
-    videoImageFormat: 'png' | 'jpeg' | 'none';
-    audioCodec: string | null;
-    enforceAudioTrack: boolean;
-    proResProfile: string;
-    x264Preset: string;
-    pixelFormat: string;
-    audioBitrate: string | null;
-    videoBitrate: string | null;
-    encodingBufferSize: string | null;
-    encodingMaxRate: string | null;
-    userAgent: string | null;
-    everyNthFrame: number;
-    numberOfGifLoops: number | null;
-    delayRenderTimeout: number;
-    disableWebSecurity: boolean;
-    openGlRenderer: string | null;
-    ignoreCertificateErrors: boolean;
-    offthreadVideoCacheSizeInBytes: number | null;
-    headless: boolean;
-    colorSpace: string;
-    multiProcessOnLinux: boolean;
-    beepOnFinish: boolean;
-    repro: boolean;
-};
-declare global {
-    interface Window {
-        remotion_renderDefaults: RenderDefaults | undefined;
-    }
-}
 export declare const indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, publicFolderExists, }: {
     staticHash: string;
     baseDir: string;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import esbuild = require('esbuild');
 import webpack = require('webpack');
 export declare const BundlerInternals: {
     esbuild: typeof esbuild;
-    webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgress, enableCaching, maxTimelineTracks, entryPoints, remotionRoot, keyboardShortcutsEnabled, poll, }: {
+    webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgress, enableCaching, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, poll, }: {
         entry: string;
         userDefinedComponent: string;
         outDir: string | null;
@@ -12,7 +12,6 @@ export declare const BundlerInternals: {
         enableCaching?: boolean | undefined;
         maxTimelineTracks: number;
         keyboardShortcutsEnabled: boolean;
-        entryPoints: string[];
         remotionRoot: string;
         poll: number | null;
     }) => [string, webpack.Configuration];
@@ -30,7 +29,7 @@ export declare const BundlerInternals: {
         publicFolderExists: string | null;
         includeFavicon: boolean;
         title: string;
-        renderDefaults: import("./index-html").RenderDefaults | undefined;
+        renderDefaults: import("@remotion/studio-shared/dist").RenderDefaults | undefined;
     }) => string;
     cacheExists: (remotionRoot: string, environment: "development" | "production", hash: string) => "exists" | "other-exists" | "does-not-exist";
     clearCache: (remotionRoot: string, env: "development" | "production") => Promise<void>;
@@ -51,6 +50,5 @@ export declare const BundlerInternals: {
     findClosestFolderWithFile: (currentDir: string, file: string) => string | null;
 };
 export { bundle, BundleOptions, LegacyBundleOptions } from './bundle';
-export type { RenderDefaults } from './index-html';
 export { WebpackConfiguration, WebpackOverrideFn } from './webpack-config';
 export { webpack };

package/dist/optional-dependencies.d.ts

@@ -1,5 +1,7 @@
 import type { Compiler } from 'webpack';
+import type { webpack } from '.';
 export declare class AllowOptionalDependenciesPlugin {
+    checkIgnore: (resolveData: webpack.ResolveData) => false | undefined;
     filter(error: Error): boolean;
     apply(compiler: Compiler): void;
 }

package/dist/optional-dependencies.js

@@ -10,6 +10,14 @@ const OPTIONAL_DEPENDENCIES = [
 ];
 const SOURCE_MAP_IGNORE = ['path', 'fs'];
 class AllowOptionalDependenciesPlugin {
+    constructor() {
+        this.checkIgnore = (resolveData) => {
+            if (resolveData.context.includes('source-map') &&
+                SOURCE_MAP_IGNORE.includes(resolveData.request)) {
+                return false;
+            }
+        };
+    }
     filter(error) {
         for (const dependency of OPTIONAL_DEPENDENCIES) {
             if (error.message.includes(`Can't resolve '${dependency}'`)) {
@@ -29,6 +37,12 @@ class AllowOptionalDependenciesPlugin {
             compilation.errors = compilation.errors.filter(this.filter);
             compilation.warnings = compilation.warnings.filter(this.filter);
         });
+        compiler.hooks.normalModuleFactory.tap('AllowOptionalDependenciesPlugin', (nmf) => {
+            nmf.hooks.beforeResolve.tap('AllowOptionalDependenciesPlugin', this.checkIgnore);
+        });
+        compiler.hooks.contextModuleFactory.tap('AllowOptionalDependenciesPlugin', (cmf) => {
+            cmf.hooks.beforeResolve.tap('AllowOptionalDependenciesPlugin', this.checkIgnore);
+        });
     }
 }
 exports.AllowOptionalDependenciesPlugin = AllowOptionalDependenciesPlugin;

package/dist/webpack-config.d.ts

@@ -1,7 +1,7 @@
 import type { Configuration } from 'webpack';
 export type WebpackConfiguration = Configuration;
 export type WebpackOverrideFn = (currentConfiguration: WebpackConfiguration) => WebpackConfiguration;
-export declare const webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgress, enableCaching, maxTimelineTracks, entryPoints, remotionRoot, keyboardShortcutsEnabled, poll, }: {
+export declare const webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgress, enableCaching, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, poll, }: {
     entry: string;
     userDefinedComponent: string;
     outDir: string | null;
@@ -11,7 +11,6 @@ export declare const webpackConfig: ({ entry, userDefinedComponent, outDir, envi
     enableCaching?: boolean | undefined;
     maxTimelineTracks: number;
     keyboardShortcutsEnabled: boolean;
-    entryPoints: string[];
     remotionRoot: string;
     poll: number | null;
 }) => [string, WebpackConfiguration];

package/dist/webpack-config.js

@@ -52,9 +52,13 @@ const esbuildLoaderOptions = {
 function truthy(value) {
     return Boolean(value);
 }
-const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpackOverride = (f) => f, onProgress, enableCaching = true, maxTimelineTracks, entryPoints, remotionRoot, keyboardShortcutsEnabled, poll, }) => {
+const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpackOverride = (f) => f, onProgress, enableCaching = true, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, poll, }) => {
     let lastProgress = 0;
     const isBun = typeof Bun !== 'undefined';
+    const define = new webpack_1.default.DefinePlugin({
+        'process.env.MAX_TIMELINE_TRACKS': maxTimelineTracks,
+        'process.env.KEYBOARD_SHORTCUTS_ENABLED': keyboardShortcutsEnabled,
+    });
     const conf = webpackOverride({
         optimization: {
             minimize: false,
@@ -71,7 +75,7 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
         watchOptions: {
             poll: poll !== null && poll !== void 0 ? poll : undefined,
             aggregateTimeout: 0,
-            ignored: ['**/.git/**', '**/node_modules/**'],
+            ignored: ['**/.git/**', '**/.turbo/**', '**/node_modules/**'],
         },
         // Higher source map quality in development to power line numbers for stack traces
         devtool: environment === 'development' ? 'source-map' : 'cheap-module-source-map',
@@ -83,7 +87,6 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
                 ? require.resolve('./fast-refresh/runtime.js')
                 : null,
             require.resolve('./setup-environment'),
-            ...entryPoints,
             userDefinedComponent,
             require.resolve('../react-shim.js'),
             entry,
@@ -93,10 +96,7 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
             ? [
                 new fast_refresh_1.ReactFreshWebpackPlugin(),
                 new webpack_1.default.HotModuleReplacementPlugin(),
-                new webpack_1.default.DefinePlugin({
-                    'process.env.MAX_TIMELINE_TRACKS': maxTimelineTracks,
-                    'process.env.KEYBOARD_SHORTCUTS_ENABLED': keyboardShortcutsEnabled,
-                }),
+                define,
                 new optional_dependencies_1.AllowOptionalDependenciesPlugin(),
             ]
             : [
@@ -108,6 +108,7 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
                         }
                     }
                 }),
+                define,
                 new optional_dependencies_1.AllowOptionalDependenciesPlugin(),
             ],
         output: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/bundler",
-  "version": "4.0.89",
+  "version": "4.0.91",
   "description": "Bundler for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -13,6 +13,7 @@
   "files": [
     "dist",
     "react-shim.js",
+    "renderEntry.tsx",
     "favicon.ico"
   ],
   "author": "Jonny Burger <jonny@remotion.dev>",
@@ -23,7 +24,9 @@
     "react-refresh": "0.9.0",
     "style-loader": "2.0.0",
     "webpack": "5.83.1",
-    "remotion": "4.0.89"
+    "remotion": "4.0.91",
+    "@remotion/studio": "4.0.91",
+    "@remotion/studio-shared": "4.0.91"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -33,8 +36,8 @@
     "@jonny/eslint-config": "3.0.276",
     "@types/node": "18.14.6",
     "bun-types": "0.8.0",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
     "eslint": "8.42.0",
     "eslint-plugin-10x": "1.5.2",
     "eslint-plugin-react": "7.32.2",

package/renderEntry.tsx

@@ -0,0 +1,411 @@
+// This file is not compiled by Typescript, but by ESBuild
+// to keep the dynamic import
+
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import type {render} from 'react-dom';
+// 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
+import ReactDOM from 'react-dom/client';
+import type {
+	AnyComposition,
+	BundleState,
+	VideoConfigWithSerializedProps,
+} from 'remotion';
+import {
+	AbsoluteFill,
+	Internals,
+	VERSION,
+	continueRender,
+	delayRender,
+	getInputProps,
+	getRemotionEnvironment,
+} from 'remotion';
+import {NoReactInternals} from 'remotion/no-react';
+import {getBundleMode, setBundleMode} from './src/bundle-mode';
+
+Internals.CSSUtils.injectCSS(
+	Internals.CSSUtils.makeDefaultCSS(null, '#1f2428'),
+);
+
+const getCanSerializeDefaultProps = (object: unknown) => {
+	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 as Error).message.includes('Invalid string length')) {
+			return false;
+		}
+
+		throw err;
+	}
+};
+
+const isInHeadlessBrowser = () => {
+	return typeof window.remotion_puppeteerTimeout !== 'undefined';
+};
+
+const DelayedSpinner: React.FC = () => {
+	const [show, setShow] = useState(false);
+
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			setShow(true);
+		}, 2000);
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, []);
+
+	if (!show) {
+		return null;
+	}
+
+	return (
+		<AbsoluteFill
+			style={{
+				justifyContent: 'center',
+				alignItems: 'center',
+				fontSize: 13,
+				opacity: 0.6,
+				color: 'white',
+				fontFamily: 'Helvetica, Arial, sans-serif',
+			}}
+		>
+			Loading Studio
+		</AbsoluteFill>
+	);
+};
+
+const GetVideo: React.FC<{state: BundleState}> = ({state}) => {
+	const video = Internals.useVideo();
+	const compositions = useContext(Internals.CompositionManager);
+
+	const portalContainer = useRef<HTMLDivElement>(null);
+	const [handle] = useState(() =>
+		delayRender('Wait for Composition' + JSON.stringify(state)),
+	);
+
+	useEffect(() => {
+		return () => continueRender(handle);
+	}, [handle]);
+
+	useEffect(() => {
+		if (state.type !== 'composition') {
+			return;
+		}
+
+		if (!video && compositions.compositions.length > 0) {
+			const foundComposition = compositions.compositions.find(
+				(c) => c.id === state.compositionName,
+			) as AnyComposition;
+			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: NoReactInternals.deserializeJSONWithCustomFields(
+					state.serializedResolvedPropsWithSchema,
+				),
+				durationInFrames: state.compositionDurationInFrames,
+				fps: state.compositionFps,
+				height: state.compositionHeight,
+				width: state.compositionWidth,
+				defaultCodec: state.compositionDefaultCodec,
+			});
+		}
+	}, [compositions, compositions.compositions, state, video]);
+
+	useEffect(() => {
+		if (state.type === 'evaluation') {
+			continueRender(handle);
+		} else if (video) {
+			continueRender(handle);
+		}
+	}, [handle, state.type, video]);
+
+	useEffect(() => {
+		if (!video) {
+			return;
+		}
+
+		const {current} = portalContainer;
+		if (!current) {
+			throw new Error('portal did not render');
+		}
+
+		current.appendChild(Internals.portalNode());
+		return () => {
+			current.removeChild(Internals.portalNode());
+		};
+	}, [video]);
+
+	if (!video) {
+		return null;
+	}
+
+	return (
+		<div
+			ref={portalContainer}
+			id="remotion-canvas"
+			style={{
+				width: video.width,
+				height: video.height,
+				display: 'flex',
+				backgroundColor: 'transparent',
+			}}
+		/>
+	);
+};
+
+const waitForRootHandle = delayRender(
+	'Loading root component - See https://remotion.dev/docs/troubleshooting/loading-root-component if you experience a timeout',
+);
+
+const videoContainer = document.getElementById(
+	'video-container',
+) as HTMLElement;
+
+let root: ReturnType<typeof ReactDOM.createRoot> | null = null;
+
+const getRootForElement = () => {
+	if (root) {
+		return root;
+	}
+
+	root = ReactDOM.createRoot(videoContainer);
+	return root;
+};
+
+const renderToDOM = (content: React.ReactElement) => {
+	// @ts-expect-error
+	if (ReactDOM.createRoot) {
+		getRootForElement().render(content);
+	} else {
+		(ReactDOM as unknown as {render: typeof render}).render(
+			content,
+			videoContainer,
+		);
+	}
+};
+
+const renderContent = (Root: React.FC) => {
+	const bundleMode = getBundleMode();
+
+	if (bundleMode.type === 'composition') {
+		const markup = (
+			<Internals.RemotionRoot numberOfAudioTags={0}>
+				<Root />
+				<GetVideo state={bundleMode} />
+			</Internals.RemotionRoot>
+		);
+
+		renderToDOM(markup);
+	}
+
+	if (bundleMode.type === 'evaluation') {
+		const markup = (
+			<Internals.RemotionRoot numberOfAudioTags={0}>
+				<Root />
+				<GetVideo state={bundleMode} />
+			</Internals.RemotionRoot>
+		);
+
+		renderToDOM(markup);
+	}
+
+	if (bundleMode.type === 'index') {
+		if (isInHeadlessBrowser()) {
+			return;
+		}
+
+		renderToDOM(
+			<div>
+				<DelayedSpinner />
+			</div>,
+		);
+		import('@remotion/studio')
+			.then(({Studio}) => {
+				renderToDOM(<Studio readOnly rootComponent={Root} />);
+			})
+			.catch((err) => {
+				renderToDOM(<div>Failed to load Remotion Studio: {err.message}</div>);
+			});
+	}
+};
+
+Internals.waitForRoot((Root) => {
+	renderContent(Root);
+	continueRender(waitForRootHandle);
+});
+
+export const setBundleModeAndUpdate = (state: BundleState) => {
+	setBundleMode(state);
+	const delay = delayRender(
+		'Waiting for root component to load - See https://remotion.dev/docs/troubleshooting/loading-root-component if you experience a timeout',
+	);
+	Internals.waitForRoot((Root) => {
+		renderContent(Root);
+		requestAnimationFrame(() => {
+			continueRender(delay);
+		});
+	});
+};
+
+if (typeof window !== 'undefined') {
+	const getUnevaluatedComps = () => {
+		if (!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 (!Internals.compositionsRef.current) {
+			throw new Error('Unexpectedly did not have a CompositionManager');
+		}
+
+		const compositions = 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 = (): Promise<
+		VideoConfigWithSerializedProps[]
+	> => {
+		const compositions = getUnevaluatedComps();
+
+		const inputProps =
+			typeof window === 'undefined' || getRemotionEnvironment().isPlayer
+				? {}
+				: getInputProps() ?? {};
+
+		return Promise.all(
+			compositions.map(async (c): Promise<VideoConfigWithSerializedProps> => {
+				const handle = delayRender(
+					`Running calculateMetadata() for composition ${c.id}. If you didn't want to evaluate this composition, use "selectComposition()" instead of "getCompositions()"`,
+				);
+
+				const comp = Internals.resolveVideoConfig({
+					composition: c,
+					editorProps: {},
+					signal: new AbortController().signal,
+					inputProps,
+				});
+
+				const resolved = await Promise.resolve(comp);
+				continueRender(handle);
+				const {props, defaultProps, ...data} = resolved;
+
+				return {
+					...data,
+					serializedResolvedPropsWithCustomSchema:
+						NoReactInternals.serializeJSONWithDate({
+							data: props,
+							indent: undefined,
+							staticBase: null,
+						}).serializedString,
+					serializedDefaultPropsWithCustomSchema:
+						NoReactInternals.serializeJSONWithDate({
+							data: defaultProps,
+							indent: undefined,
+							staticBase: null,
+						}).serializedString,
+				};
+			}),
+		);
+	};
+
+	window.remotion_getCompositionNames = () => {
+		return getUnevaluatedComps().map((c) => c.id);
+	};
+
+	window.remotion_calculateComposition = async (compId: string) => {
+		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 = delayRender(
+			`Running the calculateMetadata() function for composition ${compId}`,
+		);
+
+		const inputProps =
+			typeof window === 'undefined' || getRemotionEnvironment().isPlayer
+				? {}
+				: getInputProps() ?? {};
+
+		const prom = await Promise.resolve(
+			Internals.resolveVideoConfig({
+				composition: selectedComp,
+				editorProps: {},
+				signal: abortController.signal,
+				inputProps,
+			}),
+		);
+		continueRender(handle);
+
+		const {props, defaultProps, ...data} = prom;
+		return {
+			...data,
+			serializedResolvedPropsWithCustomSchema:
+				NoReactInternals.serializeJSONWithDate({
+					data: props,
+					indent: undefined,
+					staticBase: null,
+				}).serializedString,
+			serializedDefaultPropsWithCustomSchema:
+				NoReactInternals.serializeJSONWithDate({
+					data: defaultProps,
+					indent: undefined,
+					staticBase: null,
+				}).serializedString,
+		};
+	};
+
+	window.siteVersion = '10';
+	window.remotion_version = VERSION;
+	window.remotion_setBundleMode = setBundleModeAndUpdate;
+}

package/dist/homepage/homepage.d.ts

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

package/dist/homepage/homepage.js

@@ -1,109 +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 = ({ rootComponent }) => {
-    const url = window.location.origin + window.location.pathname;
-    const Root = rootComponent;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(Root, {}), (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,243 +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, '#1f2428'));
-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 waitForRootHandle = (0, remotion_1.delayRender)('Loading root component - See https://remotion.dev/docs/troubleshooting/loading-root-component if you experience a timeout');
-const videoContainer = document.getElementById('video-container');
-let root = null;
-const getRootForElement = () => {
-    if (root) {
-        return root;
-    }
-    root = client_1.default.createRoot(videoContainer);
-    return root;
-};
-const renderToDOM = (content) => {
-    // @ts-expect-error
-    if (client_1.default.createRoot) {
-        getRootForElement().render(content);
-    }
-    else {
-        client_1.default.render(content, videoContainer);
-    }
-};
-const renderContent = (Root) => {
-    const bundleMode = (0, bundle_mode_1.getBundleMode)();
-    if (bundleMode.type === 'composition') {
-        const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: 0, children: [(0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }));
-        renderToDOM(markup);
-    }
-    if (bundleMode.type === 'evaluation') {
-        const markup = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: 0, children: [(0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }), (0, jsx_runtime_1.jsx)(homepage_1.Homepage, { rootComponent: Root })] }));
-        renderToDOM(markup);
-    }
-    if (bundleMode.type === 'index') {
-        renderToDOM((0, jsx_runtime_1.jsx)(homepage_1.Homepage, { rootComponent: Root }));
-    }
-};
-remotion_1.Internals.waitForRoot((Root) => {
-    renderContent(Root);
-    (0, remotion_1.continueRender)(waitForRootHandle);
-});
-const setBundleModeAndUpdate = (state) => {
-    (0, bundle_mode_1.setBundleMode)(state);
-    const delay = (0, remotion_1.delayRender)('Waiting for root component to load - See https://remotion.dev/docs/troubleshooting/loading-root-component if you experience a timeout');
-    remotion_1.Internals.waitForRoot((Root) => {
-        renderContent(Root);
-        requestAnimationFrame(() => {
-            (0, remotion_1.continueRender)(delay);
-        });
-    });
-};
-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;
-}