@remotion/bundler 4.0.88 → 4.0.89

package/dist/bundle.d.ts

@@ -28,6 +28,7 @@ type Arguments = [options: BundleOptions] | [
     onProgress?: (progress: number) => void,
     options?: LegacyBundleOptions
 ];
+export declare const findClosestFolderWithFile: (currentDir: string, file: string) => string | null;
 /**
  * @description The method bundles a Remotion project using Webpack and prepares it for rendering using renderMedia()
  * @see [Documentation](https://www.remotion.dev/docs/bundle)

package/dist/bundle.js

@@ -26,7 +26,7 @@ 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;
+exports.bundle = exports.findClosestFolderWithFile = exports.getConfig = void 0;
 const node_fs_1 = __importStar(require("node:fs"));
 const node_os_1 = __importDefault(require("node:os"));
 const node_path_1 = __importDefault(require("node:path"));
@@ -95,18 +95,22 @@ const convertArgumentsIntoOptions = (args) => {
     return firstArg;
 };
 const recursionLimit = 5;
-const findClosestPackageJsonFolder = (currentDir) => {
-    let possiblePackageJson = '';
+const findClosestFolderWithFile = (currentDir, file) => {
+    let possibleFile = '';
     for (let i = 0; i < recursionLimit; i++) {
-        possiblePackageJson = node_path_1.default.join(currentDir, 'package.json');
-        const exists = node_fs_1.default.existsSync(possiblePackageJson);
+        possibleFile = node_path_1.default.join(currentDir, file);
+        const exists = node_fs_1.default.existsSync(possibleFile);
         if (exists) {
-            return node_path_1.default.dirname(possiblePackageJson);
+            return node_path_1.default.dirname(possibleFile);
         }
         currentDir = node_path_1.default.dirname(currentDir);
     }
     return null;
 };
+exports.findClosestFolderWithFile = findClosestFolderWithFile;
+const findClosestPackageJsonFolder = (currentDir) => {
+    return (0, exports.findClosestFolderWithFile)(currentDir, 'package.json');
+};
 const validateEntryPoint = async (entryPoint) => {
     const contents = await node_fs_1.promises.readFile(entryPoint, 'utf8');
     if (!contents.includes('registerRoot')) {

package/dist/homepage/homepage.d.ts

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

package/dist/homepage/homepage.js

@@ -101,8 +101,9 @@ const TestCORS = () => {
     }, [serveUrl]);
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Quickly test if a URL is supported being loaded on origin", ' ', (0, jsx_runtime_1.jsx)("code", { children: window.location.origin }), ". Enter the URL of an asset below."] }), result ? (0, jsx_runtime_1.jsx)("p", { className: "result", children: result }) : null, (0, jsx_runtime_1.jsxs)("form", { onSubmit: isCORSWorking, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "serveurl", children: (0, jsx_runtime_1.jsx)("input", { placeholder: "Enter URL", type: "text", name: "serveurl", value: serveUrl, onChange: handleServeUrl }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Test CORS" })] })] }));
 };
-const Homepage = () => {
+const Homepage = ({ rootComponent }) => {
     const url = window.location.origin + window.location.pathname;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("h1", { children: "Remotion Bundle" }), "This is a website which contains a bundled Remotion video. You can render videos based on this URL.", (0, jsx_runtime_1.jsx)("h2", { children: "Available compositions" }), (0, jsx_runtime_1.jsx)(AvailableCompositions, {}), (0, jsx_runtime_1.jsx)("h2", { children: "How to render" }), "Locally: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion render ", url, " ", '<comp-name> <output-location>'] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "With Remotion Lambda: ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: pre, children: ["npx remotion lambda render ", url, " ", '<comp-name>'] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("p", { children: ["You can also render still images, and use the Node.JS APIs", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getCompositions()" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderMedia()" }), ",", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderMediaOnLambda()" }), ", ", (0, jsx_runtime_1.jsx)("code", { children: "renderStill()" }), " and", ' ', (0, jsx_runtime_1.jsx)("code", { children: "renderStillOnLambda()" }), " with this URL."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Visit", ' ', (0, jsx_runtime_1.jsx)("a", { href: "https://remotion.dev/docs", target: "_blank", children: "remotion.dev/docs" }), ' ', "to read the documentation."] }), (0, jsx_runtime_1.jsx)("h2", { children: "CORS testing tool" }), (0, jsx_runtime_1.jsx)(TestCORS, {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] }));
+    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/index-html.js

@@ -24,7 +24,6 @@ ${includeFavicon
     <script>window.remotion_numberOfAudioTags = ${numberOfAudioTags};</script>
     <script>window.remotion_staticBase = "${staticHash}";</script>
 		<div id="video-container"></div>
-		<div id="explainer-container"></div>
 		${editorName
     ? `<script>window.remotion_editorName = "${editorName}";</script>`
     : '<script>window.remotion_editorName = null;</script>'}

package/dist/index.d.ts

@@ -48,6 +48,7 @@ export declare const BundlerInternals: {
         staticHash: string;
         limit: number;
     }) => import("remotion").StaticFile[];
+    findClosestFolderWithFile: (currentDir: string, file: string) => string | null;
 };
 export { bundle, BundleOptions, LegacyBundleOptions } from './bundle';
 export type { RenderDefaults } from './index-html';

package/dist/index.js

@@ -17,6 +17,7 @@ exports.BundlerInternals = {
     clearCache: webpack_cache_1.clearCache,
     getConfig: bundle_1.getConfig,
     readRecursively: read_recursively_1.readRecursively,
+    findClosestFolderWithFile: bundle_1.findClosestFolderWithFile,
 };
 var bundle_2 = require("./bundle");
 Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundle_2.bundle; } });

package/dist/renderEntry.js

@@ -15,7 +15,7 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const bundle_mode_1 = require("./bundle-mode");
 const homepage_1 = require("./homepage/homepage");
-remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(null, '#fff'));
+remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(null, '#1f2428'));
 const getCanSerializeDefaultProps = (object) => {
     try {
         const str = JSON.stringify(object);
@@ -98,83 +98,52 @@ const GetVideo = ({ state }) => {
             backgroundColor: 'transparent',
         } }));
 };
-const videoContainer = document.getElementById('video-container');
-const explainerContainer = document.getElementById('explainer-container');
-let cleanupVideoContainer = () => {
-    videoContainer.innerHTML = '';
-};
-let cleanupExplainerContainer = () => {
-    explainerContainer.innerHTML = '';
-};
 const waitForRootHandle = (0, remotion_1.delayRender)('Loading root component - See https://remotion.dev/docs/troubleshooting/loading-root-component if you experience a timeout');
-const WaitForRoot = () => {
-    const [Root, setRoot] = (0, react_1.useState)(() => remotion_1.Internals.getRoot());
-    (0, react_1.useEffect)(() => {
-        if (Root) {
-            (0, remotion_1.continueRender)(waitForRootHandle);
-            return;
-        }
-        const cleanup = remotion_1.Internals.waitForRoot((NewRoot) => {
-            setRoot(() => NewRoot);
-        });
-        return () => cleanup();
-    }, [Root]);
-    if (Root === null) {
-        return null;
+const videoContainer = document.getElementById('video-container');
+let root = null;
+const getRootForElement = () => {
+    if (root) {
+        return root;
     }
-    return (0, jsx_runtime_1.jsx)(Root, {});
+    root = client_1.default.createRoot(videoContainer);
+    return root;
 };
-const renderContent = () => {
-    const bundleMode = (0, bundle_mode_1.getBundleMode)();
-    if (bundleMode.type === 'composition' || bundleMode.type === 'evaluation') {
-        const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: 0, children: [(0, jsx_runtime_1.jsx)(WaitForRoot, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }));
-        if (client_1.default.createRoot) {
-            const root = client_1.default.createRoot(videoContainer);
-            root.render(markup);
-            cleanupVideoContainer = () => {
-                root.unmount();
-            };
-        }
-        else {
-            client_1.default.render(markup, videoContainer);
-            cleanupVideoContainer = () => {
-                client_1.default.unmountComponentAtNode(videoContainer);
-            };
-        }
+const renderToDOM = (content) => {
+    // @ts-expect-error
+    if (client_1.default.createRoot) {
+        getRootForElement().render(content);
     }
     else {
-        cleanupVideoContainer();
-        cleanupVideoContainer = () => {
-            videoContainer.innerHTML = '';
-        };
+        client_1.default.render(content, videoContainer);
     }
-    if (bundleMode.type === 'index' || bundleMode.type === 'evaluation') {
-        if (client_1.default.createRoot) {
-            const root = client_1.default.createRoot(explainerContainer);
-            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}));
-            cleanupExplainerContainer = () => {
-                root.unmount();
-            };
-        }
-        else {
-            const root = client_1.default;
-            root.render((0, jsx_runtime_1.jsx)(homepage_1.Homepage, {}), explainerContainer);
-            cleanupExplainerContainer = () => {
-                root.unmountComponentAtNode(explainerContainer);
-            };
-        }
+};
+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);
     }
-    else {
-        cleanupExplainerContainer();
-        cleanupExplainerContainer = () => {
-            explainerContainer.innerHTML = '';
-        };
+    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 }));
     }
 };
-renderContent();
+remotion_1.Internals.waitForRoot((Root) => {
+    renderContent(Root);
+    (0, remotion_1.continueRender)(waitForRootHandle);
+});
 const setBundleModeAndUpdate = (state) => {
     (0, bundle_mode_1.setBundleMode)(state);
-    renderContent();
+    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') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/bundler",
-  "version": "4.0.88",
+  "version": "4.0.89",
   "description": "Bundler for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -23,7 +23,7 @@
     "react-refresh": "0.9.0",
     "style-loader": "2.0.0",
     "webpack": "5.83.1",
-    "remotion": "4.0.88"
+    "remotion": "4.0.89"
   },
   "peerDependencies": {
     "react": ">=16.8.0",