@remotion/bundler 4.0.0-offthread.9 → 4.0.0-prefetch.7

package/dist/bundle-mode.d.ts

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

package/dist/bundle.d.ts

@@ -1,7 +1,18 @@
-import { WebpackOverrideFn } from 'remotion';
-export declare const bundle: (entryPoint: string, onProgressUpdate?: ((progress: number) => void) | undefined, options?: {
+import type { WebpackOverrideFn } from 'remotion';
+import webpack from 'webpack';
+export declare type BundleOptions = {
     webpackOverride?: WebpackOverrideFn;
     outDir?: string;
     enableCaching?: boolean;
     publicPath?: string;
-}) => Promise<string>;
+    rootDir?: string;
+    publicDir?: string | null;
+};
+export declare const getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgressUpdate, options, }: {
+    outDir: string;
+    entryPoint: string;
+    resolvedRemotionRoot: string;
+    onProgressUpdate?: ((progress: number) => void) | undefined;
+    options?: BundleOptions | undefined;
+}) => [string, webpack.Configuration];
+export declare const bundle: (entryPoint: string, onProgressUpdate?: ((progress: number) => void) | undefined, options?: BundleOptions) => Promise<string>;

package/dist/bundle.js

@@ -3,15 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bundle = void 0;
+exports.bundle = exports.getConfig = void 0;
 const fs_1 = __importDefault(require("fs"));
 const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
-const remotion_1 = require("remotion");
 const util_1 = require("util");
 const webpack_1 = __importDefault(require("webpack"));
+const worker_threads_1 = require("worker_threads");
 const copy_dir_1 = require("./copy-dir");
-const static_preview_1 = require("./static-preview");
+const index_html_1 = require("./index-html");
 const webpack_config_1 = require("./webpack-config");
 const entry = require.resolve('./renderEntry');
 const promisified = (0, util_1.promisify)(webpack_1.default);
@@ -34,24 +34,47 @@ const trimTrailingSlash = (p) => {
     }
     return p;
 };
+const getConfig = ({ entryPoint, outDir, resolvedRemotionRoot, onProgressUpdate, options, }) => {
+    var _a, _b;
+    return (0, webpack_config_1.webpackConfig)({
+        entry,
+        userDefinedComponent: entryPoint,
+        outDir,
+        environment: 'production',
+        webpackOverride: (_a = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _a !== void 0 ? _a : ((f) => f),
+        onProgressUpdate,
+        enableCaching: (_b = options === null || options === void 0 ? void 0 : options.enableCaching) !== null && _b !== void 0 ? _b : true,
+        maxTimelineTracks: 15,
+        // For production, the variables are set dynamically
+        envVariables: {},
+        entryPoints: [],
+        remotionRoot: resolvedRemotionRoot,
+        keyboardShortcutsEnabled: false,
+    });
+};
+exports.getConfig = getConfig;
 const bundle = async (entryPoint, onProgressUpdate, options) => {
-    var _a, _b, _c, _d;
-    const outDir = await prepareOutDir((_a = options === null || options === void 0 ? void 0 : options.outDir) !== null && _a !== void 0 ? _a : null);
-    const output = await promisified([
-        (0, webpack_config_1.webpackConfig)({
-            entry,
-            userDefinedComponent: entryPoint,
-            outDir,
-            environment: 'production',
-            webpackOverride: (_b = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _b !== void 0 ? _b : remotion_1.Internals.defaultOverrideFunction,
-            onProgressUpdate,
-            enableCaching: (_c = options === null || options === void 0 ? void 0 : options.enableCaching) !== null && _c !== void 0 ? _c : remotion_1.Internals.DEFAULT_WEBPACK_CACHE_ENABLED,
-            maxTimelineTracks: 15,
-            // For production, the variables are set dynamically
-            envVariables: {},
-            inputProps: {},
-        }),
-    ]);
+    var _a, _b, _c;
+    const resolvedRemotionRoot = (_a = options === null || options === void 0 ? void 0 : options.rootDir) !== null && _a !== void 0 ? _a : process.cwd();
+    const outDir = await prepareOutDir((_b = options === null || options === void 0 ? void 0 : options.outDir) !== null && _b !== void 0 ? _b : null);
+    // The config might use an override which might use
+    // `process.cwd()`. The context should always be the Remotion root.
+    // This is not supported in worker threads (used for tests)
+    const currentCwd = process.cwd();
+    if (worker_threads_1.isMainThread) {
+        process.chdir(resolvedRemotionRoot);
+    }
+    const [, config] = (0, exports.getConfig)({
+        outDir,
+        entryPoint,
+        resolvedRemotionRoot,
+        onProgressUpdate,
+        options,
+    });
+    const output = await promisified([config]);
+    if (worker_threads_1.isMainThread) {
+        process.chdir(currentCwd);
+    }
     if (!output) {
         throw new Error('Expected webpack output');
     }
@@ -59,17 +82,26 @@ const bundle = async (entryPoint, onProgressUpdate, options) => {
     if (errors !== undefined && errors.length > 0) {
         throw new Error(errors[0].message + '\n' + errors[0].details);
     }
-    const baseDir = (_d = options === null || options === void 0 ? void 0 : options.publicPath) !== null && _d !== void 0 ? _d : '/';
-    const publicDir = '/' +
+    const baseDir = (_c = options === null || options === void 0 ? void 0 : options.publicPath) !== null && _c !== void 0 ? _c : '/';
+    const staticHash = '/' +
         [trimTrailingSlash(trimLeadingSlash(baseDir)), 'public']
             .filter(Boolean)
             .join('/');
-    const from = path_1.default.join(process.cwd(), 'public');
+    const from = (options === null || options === void 0 ? void 0 : options.publicDir)
+        ? path_1.default.resolve(resolvedRemotionRoot, options.publicDir)
+        : path_1.default.join(resolvedRemotionRoot, 'public');
     const to = path_1.default.join(outDir, 'public');
     if (fs_1.default.existsSync(from)) {
         await (0, copy_dir_1.copyDir)(from, to);
     }
-    const html = (0, static_preview_1.indexHtml)(publicDir, baseDir, null);
+    const html = (0, index_html_1.indexHtml)({
+        staticHash,
+        baseDir,
+        editorName: null,
+        inputProps: null,
+        remotionRoot: resolvedRemotionRoot,
+        previewServerCommand: null,
+    });
     fs_1.default.writeFileSync(path_1.default.join(outDir, 'index.html'), html);
     return outDir;
 };

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

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

package/dist/esbuild-loader/index.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const esbuild_1 = require("esbuild");
 const path_1 = __importDefault(require("path"));
-const tsConfigPath = path_1.default.join(process.cwd(), 'tsconfig.json');
 const isTsExtensionPtrn = /\.ts$/i;
 const isTypescriptInstalled = () => {
     try {
@@ -22,6 +21,7 @@ async function ESBuildLoader(source) {
     this.getOptions();
     const options = this.getOptions();
     const { implementation, ...esbuildTransformOptions } = options;
+    const tsConfigPath = path_1.default.join(this.context, 'tsconfig.json');
     if (implementation && typeof implementation.transform !== 'function') {
         done(new TypeError(`esbuild-loader: options.implementation.transform must be an ESBuild transform function. Received ${typeof implementation.transform}`));
         return;
@@ -35,6 +35,7 @@ async function ESBuildLoader(source) {
         sourcefile: this.resourcePath,
     };
     if (!('tsconfigRaw' in transformOptions) && isTypescriptInstalled()) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-imports
         const typescript = require('typescript');
         const tsConfig = typescript.readConfigFile(tsConfigPath, typescript.sys.readFile);
         transformOptions.tsconfigRaw = tsConfig.config;

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

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

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

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

package/dist/fast-refresh/index.js

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

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

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

package/dist/homepage/homepage.d.ts

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

package/dist/homepage/homepage.js

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

package/dist/index-html.d.ts

@@ -0,0 +1,8 @@
+export declare const indexHtml: ({ baseDir, editorName, inputProps, staticHash, remotionRoot, previewServerCommand, }: {
+    staticHash: string;
+    baseDir: string;
+    editorName: string | null;
+    inputProps: object | null;
+    remotionRoot: string;
+    previewServerCommand: string | null;
+}) => string;

package/dist/{static-preview.js → index-html.js}

@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.indexHtml = void 0;
 const path_1 = __importDefault(require("path"));
-const indexHtml = (staticHash, baseDir, editorName) => `
+const indexHtml = ({ baseDir, editorName, inputProps, staticHash, remotionRoot, previewServerCommand, }) => `
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
+		<link rel="icon" type="image/png" href="/remotion.png" />
 		<title>Remotion Preview</title>
 	</head>
 	<body>
@@ -22,8 +22,13 @@ const indexHtml = (staticHash, baseDir, editorName) => `
 		${editorName
     ? `<script>window.remotion_editorName = "${editorName}";</script>`
     : '<script>window.remotion_editorName = null;</script>'}
-		<script>window.remotion_projectName = ${JSON.stringify(path_1.default.basename(process.cwd()))};</script>
-		<script>window.remotion_cwd = ${JSON.stringify(process.cwd())};</script>
+		<script>window.remotion_projectName = ${JSON.stringify(path_1.default.basename(remotionRoot))};</script>
+		<script>window.remotion_cwd = ${JSON.stringify(remotionRoot)};</script>
+		<script>window.remotion_previewServerCommand = ${previewServerCommand ? JSON.stringify(previewServerCommand) : 'null'};</script>
+		${inputProps
+    ? `<script>window.remotion_inputProps = ${JSON.stringify(JSON.stringify(inputProps))};</script>
+			`
+    : ''}
 		
 		<div id="container"></div>
 		<div id="menuportal-0"></div>
@@ -33,6 +38,7 @@ const indexHtml = (staticHash, baseDir, editorName) => `
 		<div id="menuportal-4"></div>
 		<div id="menuportal-5"></div>
 		<div id="remotion-error-overlay"></div>
+		<div id="server-disconnected-overlay"></div>
 		<script src="${baseDir}bundle.js"></script>
 	</body>
 </html>

package/dist/index.d.ts

@@ -1,22 +1,39 @@
 import esbuild = require('esbuild');
+import webpack = require('webpack');
 export declare const BundlerInternals: {
-    startServer: (entry: string, userDefinedComponent: string, options?: {
-        webpackOverride?: import("remotion").WebpackOverrideFn | undefined;
-        inputProps?: object | undefined;
-        envVariables?: Record<string, string> | undefined;
-        port: number | null;
-        maxTimelineTracks?: number | undefined;
-    } | undefined) => Promise<number>;
-    cacheExists: (environment: "development" | "production", inputProps: object | null) => boolean;
-    clearCache: (environment: "development" | "production", inputProps: object | null) => Promise<void>;
-    getLatestRemotionVersion: () => Promise<any>;
-    getPackageManager: () => import("./get-package-manager").PackageManager | "unknown";
-    lockFilePaths: {
-        manager: import("./get-package-manager").PackageManager;
-        path: string;
-    }[];
     esbuild: typeof esbuild;
+    webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgressUpdate, enableCaching, envVariables, maxTimelineTracks, entryPoints, remotionRoot, keyboardShortcutsEnabled, }: {
+        entry: string;
+        userDefinedComponent: string;
+        outDir: string;
+        environment: "development" | "production";
+        webpackOverride: import("remotion/dist/internals").WebpackOverrideFn;
+        onProgressUpdate?: ((f: number) => void) | undefined;
+        enableCaching?: boolean | undefined;
+        envVariables: Record<string, string>;
+        maxTimelineTracks: number;
+        keyboardShortcutsEnabled: boolean;
+        entryPoints: string[];
+        remotionRoot: string;
+    }) => [string, webpack.Configuration];
+    indexHtml: ({ baseDir, editorName, inputProps, staticHash, remotionRoot, previewServerCommand, }: {
+        staticHash: string;
+        baseDir: string;
+        editorName: string | null;
+        inputProps: object | null;
+        remotionRoot: string;
+        previewServerCommand: string | null;
+    }) => string;
+    cacheExists: (remotionRoot: string, environment: "development" | "production", hash: string) => "exists" | "other-exists" | "does-not-exist";
+    clearCache: (remotionRoot: string) => Promise<void>;
+    getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgressUpdate, options, }: {
+        outDir: string;
+        entryPoint: string;
+        resolvedRemotionRoot: string;
+        onProgressUpdate?: ((progress: number) => void) | undefined;
+        options?: import("./bundle").BundleOptions | undefined;
+    }) => [string, webpack.Configuration];
 };
-export { bundle } from './bundle';
-export { PackageManager } from './get-package-manager';
-export type { ProjectInfo } from './project-info';
+export { bundle, BundleOptions } from './bundle';
+export { webpack };
+export declare type WebpackConfiguration = webpack.Configuration;

package/dist/index.js

@@ -1,19 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bundle = exports.BundlerInternals = void 0;
-const get_latest_remotion_version_1 = require("./get-latest-remotion-version");
-const get_package_manager_1 = require("./get-package-manager");
-const start_server_1 = require("./start-server");
+exports.webpack = exports.bundle = exports.BundlerInternals = void 0;
+const bundle_1 = require("./bundle");
+const index_html_1 = require("./index-html");
 const webpack_cache_1 = require("./webpack-cache");
+const webpack_config_1 = require("./webpack-config");
 const esbuild = require("esbuild");
+const webpack = require("webpack");
+exports.webpack = webpack;
 exports.BundlerInternals = {
-    startServer: start_server_1.startServer,
+    esbuild,
+    webpackConfig: webpack_config_1.webpackConfig,
+    indexHtml: index_html_1.indexHtml,
     cacheExists: webpack_cache_1.cacheExists,
     clearCache: webpack_cache_1.clearCache,
-    getLatestRemotionVersion: get_latest_remotion_version_1.getLatestRemotionVersion,
-    getPackageManager: get_package_manager_1.getPackageManager,
-    lockFilePaths: get_package_manager_1.lockFilePaths,
-    esbuild,
+    getConfig: bundle_1.getConfig,
 };
-var bundle_1 = require("./bundle");
-Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundle_1.bundle; } });
+var bundle_2 = require("./bundle");
+Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundle_2.bundle; } });

package/dist/renderEntry.d.ts

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

package/dist/renderEntry.js

@@ -15,23 +15,14 @@ const remotion_1 = require("remotion");
 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 Root = remotion_1.Internals.getRoot();
-if (!Root) {
-    throw new Error('Root has not been registered.');
-}
-const handle = (0, remotion_1.delayRender)('Loading root component');
-const Fallback = () => {
-    (0, react_1.useEffect)(() => {
-        const fallback = (0, remotion_1.delayRender)('Waiting for Root component to unsuspend');
-        return () => (0, remotion_1.continueRender)(fallback);
-    }, []);
-    return null;
-};
 const GetVideo = ({ state }) => {
-    var _a;
     const video = remotion_1.Internals.useVideo();
     const compositions = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [Component, setComponent] = (0, react_1.useState)(null);
+    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)(() => {
         var _a;
         if (state.type !== 'composition') {
@@ -43,37 +34,45 @@ const GetVideo = ({ state }) => {
                 throw new Error('Found no composition with the name ' + state.compositionName);
             }
             compositions.setCurrentComposition((_a = foundComposition === null || foundComposition === void 0 ? void 0 : foundComposition.id) !== null && _a !== void 0 ? _a : null);
+            compositions.setCurrentCompositionMetadata({
+                defaultProps: state.compositionDefaultProps,
+                durationInFrames: state.compositionDurationInFrames,
+                fps: state.compositionFps,
+                height: state.compositionHeight,
+                width: state.compositionWidth,
+            });
         }
     }, [compositions, compositions.compositions, state, video]);
-    const fetchComponent = (0, react_1.useCallback)(() => {
-        if (!video) {
-            throw new Error('Expected to have video');
-        }
-        const Comp = video.component;
-        setComponent(Comp);
-    }, [video]);
-    (0, react_1.useEffect)(() => {
-        if (video) {
-            fetchComponent();
-        }
-    }, [fetchComponent, video]);
     (0, react_1.useEffect)(() => {
         if (state.type === 'evaluation') {
             (0, remotion_1.continueRender)(handle);
         }
-        else if (Component) {
+        else if (video) {
             (0, remotion_1.continueRender)(handle);
         }
-    }, [Component, state.type]);
+    }, [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)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)("div", { id: "remotion-canvas", style: {
-                width: video.width,
-                height: video.height,
-                display: 'flex',
-                backgroundColor: 'transparent',
-            }, children: Component ? ((0, jsx_runtime_1.jsx)(Component, { ...((_a = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _a !== void 0 ? _a : {}), ...(0, remotion_1.getInputProps)() })) : 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');
@@ -83,10 +82,28 @@ let cleanupVideoContainer = () => {
 let cleanupExplainerContainer = () => {
     explainerContainer.innerHTML = '';
 };
+const waitForRootHandle = (0, remotion_1.delayRender)('Loading root component');
+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, { children: [(0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }));
+        const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { 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);
@@ -138,6 +155,9 @@ const setBundleModeAndUpdate = (state) => {
 exports.setBundleModeAndUpdate = setBundleModeAndUpdate;
 if (typeof window !== 'undefined') {
     window.getStaticCompositions = () => {
+        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');
         }
@@ -154,6 +174,7 @@ if (typeof window !== 'undefined') {
             };
         });
     };
-    window.siteVersion = '3';
+    window.siteVersion = '4';
+    window.remotion_version = remotion_1.VERSION;
     window.setBundleMode = exports.setBundleModeAndUpdate;
 }

package/dist/setup-environment.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const remotion_1 = require("remotion");
 remotion_1.Internals.setupEnvVariables();
-remotion_1.Internals.setupPuppeteerTimeout();
 remotion_1.Internals.CSSUtils.injectCSS(`
-  .css-reset * {
+  .css-reset, .css-reset * {
     font-size: 16px;
-    line-height: 1;
+    line-height: 1.5;
     color: white;
     font-family: Arial, Helvetica, sans-serif;
+    background: transparent;
+    box-sizing: border-box;
   }
 `);

package/dist/test/validate-public-dir.test.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const vitest_1 = require("vitest");
+const validate_public_dir_1 = require("../validate-public-dir");
+(0, vitest_1.describe)('validatePublicDir()', () => {
+    (0, vitest_1.test)('Should not allow root directory as public dir.', () => {
+        (0, vitest_1.expect)(() => (0, validate_public_dir_1.validatePublicDir)(path_1.default.parse(process.cwd()).root)).toThrow(/which is the root directory. This is not allowed./);
+    });
+    (0, vitest_1.test)('Should not allow a path where the parent directory does not exist', () => {
+        const pathToPass = process.platform === 'win32' ? 'C:\\foo\\bar' : '/foo/bar';
+        const expectedParent = process.platform === 'win32' ? 'C:\\foo' : '/foo';
+        (0, vitest_1.expect)(() => (0, validate_public_dir_1.validatePublicDir)(pathToPass)).toThrow(`The public directory was specified as "${pathToPass}", but this folder does not exist and the parent directory "${expectedParent}" does also not exist.`);
+    });
+    (0, vitest_1.test)('Should allow /foo as a path since that directory can be created', () => {
+        (0, vitest_1.expect)(() => (0, validate_public_dir_1.validatePublicDir)(process.platform === 'win32' ? 'C:\\foo' : '/foo')).not.toThrow();
+    });
+});

package/dist/validate-public-dir.d.ts

@@ -0,0 +1 @@
+export declare const validatePublicDir: (p: string) => void;

package/dist/validate-public-dir.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatePublicDir = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const validatePublicDir = (p) => {
+    const { root } = path_1.default.parse(process.cwd());
+    if (p === root) {
+        throw new Error(`The public directory was specified as "${p}", which is the root directory. This is not allowed.`);
+    }
+    try {
+        const stat = fs_1.default.lstatSync(p);
+        if (!stat.isDirectory()) {
+            throw new Error(`The public directory was specified as "${p}", and while this path exists on the filesystem, it is not a directory.`);
+        }
+    }
+    catch (e) {
+        // Path does not exist
+        // Check if the parent path exists
+        const parentPath = path_1.default.dirname(p);
+        const exists = fs_1.default.existsSync(parentPath);
+        if (!exists) {
+            throw new Error(`The public directory was specified as "${p}", but this folder does not exist and the parent directory "${parentPath}" does also not exist. Create at least the parent directory.`);
+        }
+    }
+};
+exports.validatePublicDir = validatePublicDir;