@remotion/bundler 3.0.19 → 3.0.22

package/dist/bundle.js

@@ -11,7 +11,7 @@ const remotion_1 = require("remotion");
 const util_1 = require("util");
 const webpack_1 = __importDefault(require("webpack"));
 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);
@@ -50,6 +50,7 @@ const bundle = async (entryPoint, onProgressUpdate, options) => {
             // For production, the variables are set dynamically
             envVariables: {},
             inputProps: {},
+            entryPoints: [],
         }),
     ]);
     if (!output) {
@@ -69,7 +70,7 @@ const bundle = async (entryPoint, onProgressUpdate, options) => {
     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)(publicDir, baseDir, null);
     fs_1.default.writeFileSync(path_1.default.join(outDir, 'index.html'), html);
     return outDir;
 };

package/dist/error-overlay/remotion-overlay/carets.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 export declare const CaretRight: () => JSX.Element;
 export declare const CaretDown: () => JSX.Element;

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.d.ts

@@ -1,22 +1,23 @@
 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>;
+    esbuild: typeof esbuild;
+    webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgressUpdate, enableCaching, inputProps, envVariables, maxTimelineTracks, entryPoints, }: {
+        entry: string;
+        userDefinedComponent: string;
+        outDir: string;
+        environment: "development" | "production";
+        webpackOverride: import("remotion").WebpackOverrideFn;
+        onProgressUpdate?: ((f: number) => void) | undefined;
+        enableCaching?: boolean | undefined;
+        inputProps: object;
+        envVariables: Record<string, string>;
+        maxTimelineTracks: number;
+        entryPoints: string[];
+    }) => webpack.Configuration;
+    indexHtml: (staticHash: string, baseDir: string, editorName: string | null) => string;
     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;
 };
 export { bundle } from './bundle';
-export { PackageManager } from './get-package-manager';
-export type { ProjectInfo } from './project-info';
+export { webpack };

package/dist/index.js

@@ -1,19 +1,18 @@
 "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 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,
 };
 var bundle_1 = require("./bundle");
 Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundle_1.bundle; } });

package/dist/renderEntry.js

@@ -15,16 +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 GetVideo = ({ state }) => {
     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') {
@@ -38,26 +36,14 @@ 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;
@@ -89,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, {}), (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);
@@ -144,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');
         }

package/dist/webpack-config.d.ts

@@ -1,5 +1,5 @@
 import { WebpackConfiguration, WebpackOverrideFn } from 'remotion';
-export declare const webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgressUpdate, enableCaching, inputProps, envVariables, maxTimelineTracks, }: {
+export declare const webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgressUpdate, enableCaching, inputProps, envVariables, maxTimelineTracks, entryPoints, }: {
     entry: string;
     userDefinedComponent: string;
     outDir: string;
@@ -10,4 +10,5 @@ export declare const webpackConfig: ({ entry, userDefinedComponent, outDir, envi
     inputProps: object;
     envVariables: Record<string, string>;
     maxTimelineTracks: number;
+    entryPoints: string[];
 }) => WebpackConfiguration;

package/dist/webpack-config.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpackConfig = void 0;
-const path_1 = __importDefault(require("path"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const webpack_1 = __importStar(require("webpack"));
@@ -50,7 +49,7 @@ const esbuildLoaderOptions = {
 function truthy(value) {
     return Boolean(value);
 }
-const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpackOverride = (f) => f, onProgressUpdate, enableCaching = remotion_1.Internals.DEFAULT_WEBPACK_CACHE_ENABLED, inputProps, envVariables, maxTimelineTracks, }) => {
+const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpackOverride = (f) => f, onProgressUpdate, enableCaching = remotion_1.Internals.DEFAULT_WEBPACK_CACHE_ENABLED, inputProps, envVariables, maxTimelineTracks, entryPoints, }) => {
     return webpackOverride({
         optimization: {
             minimize: false,
@@ -76,16 +75,14 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
             ? 'cheap-module-source-map'
             : 'cheap-module-source-map',
         entry: [
-            require.resolve('./setup-environment'),
-            environment === 'development'
-                ? require.resolve('./hot-middleware/client')
-                : null,
+            // Fast Refresh must come first,
+            // because setup-environment imports ReactDOM.
+            // If React DOM is imported before Fast Refresh, Fast Refresh does not work
             environment === 'development'
                 ? require.resolve('./fast-refresh/runtime.js')
                 : null,
-            environment === 'development'
-                ? require.resolve('./error-overlay/entry-basic.js')
-                : null,
+            require.resolve('./setup-environment'),
+            ...entryPoints,
             userDefinedComponent,
             require.resolve('../react-shim.js'),
             entry,
@@ -116,11 +113,6 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
             devtoolModuleFilenameTemplate: '[resource-path]',
             assetModuleFilename: environment === 'development' ? '[path][name][ext]' : '[hash][ext]',
         },
-        devServer: {
-            contentBase: path_1.default.resolve(__dirname, '..', 'web'),
-            historyApiFallback: true,
-            hot: true,
-        },
         resolve: {
             extensions: ['.ts', '.tsx', '.js', '.jsx'],
             alias: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/bundler",
-	"version": "3.0.19",
+	"version": "3.0.22",
 	"description": "Bundler for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -12,7 +12,6 @@
 	},
 	"scripts": {
 		"lint": "eslint src --ext ts,tsx",
-		"test": "jest",
 		"build": "tsc -d",
 		"watch": "tsc -w"
 	},
@@ -26,13 +25,8 @@
 	"dependencies": {
 		"css-loader": "5.2.7",
 		"esbuild": "0.14.19",
-		"express": "4.17.1",
-		"memfs": "3.4.3",
-		"mime-types": "2.1.34",
 		"react-refresh": "0.9.0",
-		"remotion": "3.0.19",
-		"semver": "7.3.4",
-		"source-map": "0.6.1",
+		"remotion": "3.0.22",
 		"style-loader": "2.0.0",
 		"webpack": "5.72.0"
 	},
@@ -42,13 +36,9 @@
 	},
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.259",
-		"@types/express": "^4.17.7",
-		"@types/jest": "^27.4.0",
-		"@types/mime-types": "2.1.1",
 		"@types/node": "^16.7.5",
 		"@types/react": "18.0.1",
 		"@types/react-dom": "18.0.0",
-		"@types/semver": "^7.3.4",
 		"@types/webpack-env": "^1.16.0",
 		"@typescript-eslint/eslint-plugin": "5.18.0",
 		"@typescript-eslint/parser": "5.18.0",
@@ -56,12 +46,10 @@
 		"eslint-plugin-10x": "1.5.2",
 		"eslint-plugin-react": "7.29.4",
 		"eslint-plugin-react-hooks": "4.4.0",
-		"jest": "^27.2.4",
 		"prettier": "^2.0.5",
 		"prettier-plugin-organize-imports": "^2.3.4",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
-		"ts-jest": "^27.0.5",
 		"typescript": "^4.7.0"
 	},
 	"keywords": [
@@ -75,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "388ef0a2eacf9dbadbc860fdb8d6b3e32acb10f3"
+	"gitHead": "e79cfa299f58a26c84a637174875941898cdab97"
 }