@remotion/bundler 4.0.0-fastlambda.7 → 4.0.0-forcepublish.6

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

@@ -0,0 +1,17 @@
+import type { WebpackOverrideFn } from 'remotion';
+import webpack from 'webpack';
+export declare type BundleOptions = {
+    webpackOverride?: WebpackOverrideFn;
+    outDir?: string;
+    enableCaching?: boolean;
+    publicPath?: string;
+    rootDir?: string;
+};
+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

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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 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);
+const prepareOutDir = async (specified) => {
+    if (specified) {
+        await fs_1.default.promises.mkdir(specified, { recursive: true });
+        return specified;
+    }
+    return fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-graphics'));
+};
+const trimLeadingSlash = (p) => {
+    if (p.startsWith('/')) {
+        return trimLeadingSlash(p.substr(1));
+    }
+    return p;
+};
+const trimTrailingSlash = (p) => {
+    if (p.endsWith('/')) {
+        return trimTrailingSlash(p.substr(0, p.length - 1));
+    }
+    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,
+    });
+};
+exports.getConfig = getConfig;
+const bundle = async (entryPoint, onProgressUpdate, options) => {
+    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');
+    }
+    const { errors } = output.toJson();
+    if (errors !== undefined && errors.length > 0) {
+        throw new Error(errors[0].message + '\n' + errors[0].details);
+    }
+    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('/');
+    // TODO: Unhardcode public directory
+    const from = 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, 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;
+};
+exports.bundle = bundle;

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");
@@ -47,17 +47,16 @@ const AvailableCompositions = () => {
         (0, renderEntry_1.setBundleModeAndUpdate)({ type: 'evaluation' });
     }, []);
     if ((0, bundle_mode_1.getBundleMode)().type !== 'evaluation') {
-        return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: showComps, children: "Click here to see a list of available compositions." }, void 0));
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: showComps, children: "Click here to see a list of available compositions." }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [comps === null ? (0, jsx_runtime_1.jsx)("p", { children: "Loading compositions..." }, void 0) : null, (0, jsx_runtime_1.jsx)("ul", { children: comps === null
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [comps === null ? (0, jsx_runtime_1.jsx)("p", { children: "Loading compositions..." }) : null, (0, jsx_runtime_1.jsx)("ul", { children: comps === null
                     ? null
                     : comps.map((c) => {
                         return (0, jsx_runtime_1.jsx)("li", { children: c.id }, c.id);
-                    }) }, void 0)] }, void 0));
+                    }) })] }));
 };
-exports.AvailableCompositions = AvailableCompositions;
 const Homepage = () => {
     const url = window.location.origin + window.location.pathname;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("h1", { children: "Remotion Bundle" }, void 0), "This is a website which contains a bundled Remotion video. You can render videos based on this URL.", (0, jsx_runtime_1.jsx)("h2", { children: "Available compositions" }, void 0), (0, jsx_runtime_1.jsx)(exports.AvailableCompositions, {}, void 0), (0, jsx_runtime_1.jsx)("h2", { children: "How to render" }, void 0), "Locally: ", (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion render ", url, " ", '<comp-name> <output-location>'] }, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), "With Remotion Lambda: ", (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion lambda render ", url, " ", '<comp-name>'] }, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["You can also render still images, and use the Node.JS APIs", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getCompositions()" }, void 0), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderMedia()" }, void 0), ",", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderMediaOnLambda()" }, void 0), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderStill()" }, void 0), " and", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderStillOnLambda()" }, void 0), " with this URL."] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["Visit", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.dev/docs", target: "_blank", children: "remotion.dev/docs" }, void 0), ' ', "to read the documentation."] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("h1", { children: "Remotion Bundle" }), "This is a website which contains a bundled Remotion video. You can render videos based on this URL.", (0, jsx_runtime_1.jsx)("h2", { children: "Available compositions" }), (0, jsx_runtime_1.jsx)(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,24 +1,38 @@
-import mimeTypes from 'mime-types';
 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 | undefined;
-        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;
-    mimeTypes: typeof mimeTypes;
+    webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgressUpdate, enableCaching, envVariables, maxTimelineTracks, entryPoints, remotionRoot, }: {
+        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;
+        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 './bundler';
-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,24 +1,20 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bundle = exports.BundlerInternals = void 0;
-const mime_types_1 = __importDefault(require("mime-types"));
-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,
-    mimeTypes: mime_types_1.default,
+    getConfig: bundle_1.getConfig,
 };
-var bundler_1 = require("./bundler");
-Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundler_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') {
@@ -45,35 +36,36 @@ const GetVideo = ({ state }) => {
             compositions.setCurrentComposition((_a = foundComposition === null || foundComposition === void 0 ? void 0 : foundComposition.id) !== null && _a !== void 0 ? _a : null);
         }
     }, [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, {}, void 0), children: (0, jsx_runtime_1.jsx)("div", { id: "remotion-canvas", style: {
-                width: video.width,
-                height: video.height,
-                display: 'flex',
-                backgroundColor: 'transparent',
-            }, children: Component ? ((0, jsx_runtime_1.jsx)(Component, { ...((_a = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _a !== void 0 ? _a : {}), ...(0, remotion_1.getInputProps)() }, void 0)) : null }, void 0) }, void 0));
+    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 +75,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, {}, void 0), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode }, void 0)] }, void 0));
+        const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { children: [(0, jsx_runtime_1.jsx)(WaitForRoot, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }));
         if (client_1.default.createRoot) {
             const root = client_1.default.createRoot(videoContainer);
             root.render(markup);
@@ -110,14 +120,14 @@ const renderContent = () => {
     if (bundleMode.type === 'index' || bundleMode.type === 'evaluation') {
         if (client_1.default.createRoot) {
             const root = client_1.default.createRoot(explainerContainer);
-            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}, void 0));
+            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}));
             cleanupExplainerContainer = () => {
                 root.unmount();
             };
         }
         else {
             const root = client_1.default;
-            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}, void 0), explainerContainer);
+            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}), explainerContainer);
             cleanupExplainerContainer = () => {
                 root.unmountComponentAtNode(explainerContainer);
             };
@@ -138,6 +148,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 +167,6 @@ if (typeof window !== 'undefined') {
             };
         });
     };
-    window.siteVersion = '2';
+    window.siteVersion = '4';
     window.setBundleMode = exports.setBundleModeAndUpdate;
 }

package/dist/setup-environment.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const remotion_1 = require("remotion");
 remotion_1.Internals.setupEnvVariables();
-remotion_1.Internals.setupInitialFrame();
-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/webpack-cache.d.ts

@@ -1,4 +1,5 @@
 declare type Environment = 'development' | 'production';
+declare type CacheState = 'exists' | 'other-exists' | 'does-not-exist';
 declare global {
     namespace NodeJS {
         interface ProcessVersions {
@@ -6,7 +7,7 @@ declare global {
         }
     }
 }
-export declare const clearCache: (environment: Environment, inputProps: object | null) => Promise<void>;
-export declare const getWebpackCacheName: (environment: Environment, inputProps: object | null) => string;
-export declare const cacheExists: (environment: Environment, inputProps: object | null) => boolean;
+export declare const clearCache: (remotionRoot: string) => Promise<void>;
+export declare const getWebpackCacheName: (environment: Environment, hash: string) => string;
+export declare const cacheExists: (remotionRoot: string, environment: Environment, hash: string) => CacheState;
 export {};