@remotion/bundler 4.0.0-alpha.217 → 4.0.0-alpha10

package/dist/bundle.js

@@ -27,23 +27,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bundle = exports.getConfig = void 0;
-const fs_1 = __importStar(require("fs"));
-const os_1 = __importDefault(require("os"));
-const path_1 = __importDefault(require("path"));
-const util_1 = require("util");
+const node_fs_1 = __importStar(require("node:fs"));
+const node_os_1 = __importDefault(require("node:os"));
+const node_path_1 = __importDefault(require("node:path"));
+const node_util_1 = require("node:util");
+const node_worker_threads_1 = require("node:worker_threads");
 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 read_recursively_1 = require("./read-recursively");
 const webpack_config_1 = require("./webpack-config");
-const promisified = (0, util_1.promisify)(webpack_1.default);
+const promisified = (0, node_util_1.promisify)(webpack_1.default);
 const prepareOutDir = async (specified) => {
     if (specified) {
-        await fs_1.default.promises.mkdir(specified, { recursive: true });
+        await node_fs_1.default.promises.mkdir(specified, { recursive: true });
         return specified;
     }
-    return fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'remotion-webpack-bundle-'));
+    return node_fs_1.default.promises.mkdtemp(node_path_1.default.join(node_os_1.default.tmpdir(), 'remotion-webpack-bundle-'));
 };
 const trimLeadingSlash = (p) => {
     if (p.startsWith('/')) {
@@ -100,17 +100,17 @@ const recursionLimit = 5;
 const findClosestPackageJsonFolder = (currentDir) => {
     let possiblePackageJson = '';
     for (let i = 0; i < recursionLimit; i++) {
-        possiblePackageJson = path_1.default.join(currentDir, 'package.json');
-        const exists = fs_1.default.existsSync(possiblePackageJson);
+        possiblePackageJson = node_path_1.default.join(currentDir, 'package.json');
+        const exists = node_fs_1.default.existsSync(possiblePackageJson);
         if (exists) {
-            return path_1.default.dirname(possiblePackageJson);
+            return node_path_1.default.dirname(possiblePackageJson);
         }
-        currentDir = path_1.default.dirname(currentDir);
+        currentDir = node_path_1.default.dirname(currentDir);
     }
     return null;
 };
 const validateEntryPoint = async (entryPoint) => {
-    const contents = await fs_1.promises.readFile(entryPoint, 'utf8');
+    const contents = await node_fs_1.promises.readFile(entryPoint, 'utf8');
     if (!contents.includes('registerRoot')) {
         throw new Error([
             `You passed ${entryPoint} as your entry point, but this file does not contain "registerRoot".`,
@@ -127,7 +127,7 @@ const validateEntryPoint = async (entryPoint) => {
 async function bundle(...args) {
     var _a, _b, _c, _d, _e;
     const actualArgs = convertArgumentsIntoOptions(args);
-    const entryPoint = path_1.default.resolve(process.cwd(), actualArgs.entryPoint);
+    const entryPoint = node_path_1.default.resolve(process.cwd(), actualArgs.entryPoint);
     const resolvedRemotionRoot = (_b = (_a = actualArgs === null || actualArgs === void 0 ? void 0 : actualArgs.rootDir) !== null && _a !== void 0 ? _a : findClosestPackageJsonFolder(entryPoint)) !== null && _b !== void 0 ? _b : process.cwd();
     if (!actualArgs.ignoreRegisterRootWarning) {
         await validateEntryPoint(entryPoint);
@@ -138,7 +138,7 @@ async function bundle(...args) {
     // `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) {
+    if (node_worker_threads_1.isMainThread) {
         process.chdir(resolvedRemotionRoot);
     }
     const { onProgress, ...options } = actualArgs;
@@ -150,7 +150,7 @@ async function bundle(...args) {
         options,
     });
     const output = await promisified([config]);
-    if (worker_threads_1.isMainThread) {
+    if (node_worker_threads_1.isMainThread) {
         process.chdir(currentCwd);
     }
     if (!output) {
@@ -166,15 +166,15 @@ async function bundle(...args) {
             .filter(Boolean)
             .join('/');
     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');
+        ? node_path_1.default.resolve(resolvedRemotionRoot, options.publicDir)
+        : node_path_1.default.join(resolvedRemotionRoot, 'public');
+    const to = node_path_1.default.join(outDir, 'public');
     let symlinkWarningShown = false;
     const showSymlinkWarning = (ent, src) => {
         if (symlinkWarningShown) {
             return;
         }
-        const absolutePath = path_1.default.join(src, ent.name);
+        const absolutePath = node_path_1.default.join(src, ent.name);
         if (options.onSymlinkDetected) {
             options.onSymlinkDetected(absolutePath);
             return;
@@ -182,7 +182,7 @@ async function bundle(...args) {
         symlinkWarningShown = true;
         console.warn(`\nFound a symbolic link in the public folder (${absolutePath}). The symlink will be forwarded into the bundle.`);
     };
-    if (fs_1.default.existsSync(from)) {
+    if (node_fs_1.default.existsSync(from)) {
         await (0, copy_dir_1.copyDir)({
             src: from,
             dest: to,
@@ -197,7 +197,7 @@ async function bundle(...args) {
         editorName: null,
         inputProps: null,
         remotionRoot: resolvedRemotionRoot,
-        previewServerCommand: null,
+        studioServerCommand: null,
         renderQueue: null,
         numberOfAudioTags: 0,
         publicFiles: (0, read_recursively_1.readRecursively)({
@@ -210,7 +210,7 @@ async function bundle(...args) {
         title: 'Remotion Bundle',
         renderDefaults: undefined,
     });
-    fs_1.default.writeFileSync(path_1.default.join(outDir, 'index.html'), html);
+    node_fs_1.default.writeFileSync(node_path_1.default.join(outDir, 'index.html'), html);
     return outDir;
 }
 exports.bundle = bundle;

package/dist/copy-dir.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import fs from 'fs';
+import fs from 'node:fs';
 export declare function copyDir({ src, dest, onSymlinkDetected, onProgress, copied, }: {
     src: string;
     dest: string;

package/dist/copy-dir.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.copyDir = void 0;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
 async function copyDir({ src, dest, onSymlinkDetected, onProgress, copied = 0, }) {
-    await fs_1.default.promises.mkdir(dest, { recursive: true });
-    const entries = await fs_1.default.promises.readdir(src, { withFileTypes: true });
+    await node_fs_1.default.promises.mkdir(dest, { recursive: true });
+    const entries = await node_fs_1.default.promises.readdir(src, { withFileTypes: true });
     for (const entry of entries) {
-        const srcPath = path_1.default.join(src, entry.name);
-        const destPath = path_1.default.join(dest, entry.name);
+        const srcPath = node_path_1.default.join(src, entry.name);
+        const destPath = node_path_1.default.join(dest, entry.name);
         if (entry.isDirectory()) {
             await copyDir({
                 src: srcPath,
@@ -22,14 +22,14 @@ async function copyDir({ src, dest, onSymlinkDetected, onProgress, copied = 0, }
             });
         }
         else if (entry.isSymbolicLink()) {
-            const realpath = await fs_1.default.promises.realpath(srcPath);
+            const realpath = await node_fs_1.default.promises.realpath(srcPath);
             onSymlinkDetected(entry, src);
-            await fs_1.default.promises.symlink(realpath, destPath);
+            await node_fs_1.default.promises.symlink(realpath, destPath);
         }
         else {
             const [, { size }] = await Promise.all([
-                fs_1.default.promises.copyFile(srcPath, destPath),
-                fs_1.default.promises.stat(srcPath),
+                node_fs_1.default.promises.copyFile(srcPath, destPath),
+                node_fs_1.default.promises.stat(srcPath),
             ]);
             copied += size;
             onProgress(copied);

package/dist/esbuild-loader/index.js

@@ -4,7 +4,7 @@ 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 node_path_1 = __importDefault(require("node:path"));
 const isTsExtensionPtrn = /\.ts$/i;
 const isTypescriptInstalled = () => {
     try {
@@ -21,7 +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');
+    const tsConfigPath = node_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;

package/dist/fast-refresh/runtime.js

@@ -24,7 +24,6 @@ self.$RefreshInterceptModuleExecution$ = function (webpackModuleId) {
     };
     self.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
     // Modeled after `useEffect` cleanup pattern:
-    // https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup
     return () => {
         self.$RefreshReg$ = prevRefreshReg;
         self.$RefreshSig$ = prevRefreshSig;

package/dist/homepage/homepage.js

@@ -24,7 +24,9 @@ const pre = {
     overflowX: 'auto',
 };
 const AvailableCompositions = () => {
-    const [comps, setComps] = (0, react_1.useState)(null);
+    const [state, setComps] = (0, react_1.useState)({
+        type: 'not-initialized',
+    });
     (0, react_1.useEffect)(() => {
         if ((0, bundle_mode_1.getBundleMode)().type !== 'evaluation') {
             return;
@@ -32,8 +34,13 @@ const AvailableCompositions = () => {
         let timeout = null;
         const check = () => {
             if (window.ready === true) {
-                const newComps = window.getStaticCompositions();
-                setComps(newComps);
+                setComps({ type: 'loading' });
+                window
+                    .getStaticCompositions()
+                    .then((newComps) => {
+                    setComps({ type: 'loaded', comps: newComps });
+                })
+                    .catch((err) => ({ type: 'error', error: err }));
             }
             else {
                 timeout = setTimeout(check, 250);
@@ -53,11 +60,20 @@ const AvailableCompositions = () => {
     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." }));
     }
-    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
-                    ? []
-                    : comps.map((c) => {
-                        return (0, jsx_runtime_1.jsx)("li", { children: c.id }, c.id);
-                    }) })] }));
+    if (state.type === 'loading') {
+        return (0, jsx_runtime_1.jsx)("div", { children: state === null ? (0, jsx_runtime_1.jsx)("p", { children: "Loading compositions..." }) : null });
+    }
+    if (state.type === 'error') {
+        return (0, jsx_runtime_1.jsxs)("div", { children: ["Error loading compositions: ", state.error.stack] });
+    }
+    if (state.type === 'not-initialized') {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Not initialized" });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { children: state === null
+                ? []
+                : state.comps.map((c) => {
+                    return (0, jsx_runtime_1.jsx)("li", { children: c.id }, c.id);
+                }) }) }));
 };
 const TestCORS = () => {
     const [serveUrl, setServeUrl] = (0, react_1.useState)('');

package/dist/index-html.d.ts

@@ -29,14 +29,14 @@ declare global {
         remotion_renderDefaults: RenderDefaults | undefined;
     }
 }
-export declare const indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
+export declare const indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
     staticHash: string;
     baseDir: string;
     editorName: string | null;
     inputProps: object | null;
     envVariables?: Record<string, string> | undefined;
     remotionRoot: string;
-    previewServerCommand: string | null;
+    studioServerCommand: string | null;
     renderQueue: unknown | null;
     numberOfAudioTags: number;
     publicFiles: StaticFile[];

package/dist/index-html.js

@@ -4,8 +4,8 @@ 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 = ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }) => `
+const node_path_1 = __importDefault(require("node:path"));
+const indexHtml = ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }) => `
 <!DOCTYPE html>
 <html lang="en">
 	<head>
@@ -25,10 +25,10 @@ ${includeFavicon
 		${editorName
     ? `<script>window.remotion_editorName = "${editorName}";</script>`
     : '<script>window.remotion_editorName = null;</script>'}
-		<script>window.remotion_projectName = ${JSON.stringify(path_1.default.basename(remotionRoot))};</script>
+		<script>window.remotion_projectName = ${JSON.stringify(node_path_1.default.basename(remotionRoot))};</script>
 		<script>window.remotion_renderDefaults = ${JSON.stringify(renderDefaults)};</script>
 		<script>window.remotion_cwd = ${JSON.stringify(remotionRoot)};</script>
-		<script>window.remotion_previewServerCommand = ${previewServerCommand ? JSON.stringify(previewServerCommand) : 'null'};</script>
+		<script>window.remotion_studioServerCommand = ${studioServerCommand ? JSON.stringify(studioServerCommand) : 'null'};</script>
 		${inputProps
     ? `<script>window.remotion_inputProps = ${JSON.stringify(JSON.stringify(inputProps))};</script>
 			`

package/dist/index.d.ts

@@ -17,14 +17,14 @@ export declare const BundlerInternals: {
         remotionRoot: string;
         poll: number | null;
     }) => [string, webpack.Configuration];
-    indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
+    indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, }: {
         staticHash: string;
         baseDir: string;
         editorName: string | null;
         inputProps: object | null;
         envVariables?: Record<string, string> | undefined;
         remotionRoot: string;
-        previewServerCommand: string | null;
+        studioServerCommand: string | null;
         renderQueue: unknown;
         numberOfAudioTags: number;
         publicFiles: import("remotion").StaticFile[];
@@ -33,7 +33,7 @@ export declare const BundlerInternals: {
         renderDefaults: import("./index-html").RenderDefaults | undefined;
     }) => string;
     cacheExists: (remotionRoot: string, environment: "development" | "production", hash: string) => "exists" | "other-exists" | "does-not-exist";
-    clearCache: (remotionRoot: string) => Promise<void>;
+    clearCache: (remotionRoot: string, env: "development" | "production") => Promise<void>;
     getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgress, options, }: {
         outDir: string;
         entryPoint: string;

package/dist/optional-depdendencies.d.ts

@@ -0,0 +1,5 @@
+import type { Compiler } from 'webpack';
+export declare class AllowOptionalDependenciesPlugin {
+    filter(error: Error): boolean;
+    apply(compiler: Compiler): void;
+}

package/dist/optional-depdendencies.js

@@ -0,0 +1,27 @@
+"use strict";
+// When Webpack cannot resolve these dependencies, it will not print an error message.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllowOptionalDependenciesPlugin = void 0;
+const OPTIONAL_DEPENDENCIES = [
+    'zod',
+    '@remotion/zod-types',
+    'react-native-reanimated',
+    'react-native-reanimated/package.json',
+];
+class AllowOptionalDependenciesPlugin {
+    filter(error) {
+        for (const dependency of OPTIONAL_DEPENDENCIES) {
+            if (error.message.includes(`Can't resolve '${dependency}'`)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    apply(compiler) {
+        compiler.hooks.afterEmit.tap('AllowOptionalDependenciesPlugin', (compilation) => {
+            compilation.errors = compilation.errors.filter(this.filter);
+            compilation.warnings = compilation.warnings.filter(this.filter);
+        });
+    }
+}
+exports.AllowOptionalDependenciesPlugin = AllowOptionalDependenciesPlugin;

package/dist/optional-dependencies.d.ts

@@ -0,0 +1,5 @@
+import type { Compiler } from 'webpack';
+export declare class AllowOptionalDependenciesPlugin {
+    filter(error: Error): boolean;
+    apply(compiler: Compiler): void;
+}

package/dist/optional-dependencies.js

@@ -0,0 +1,27 @@
+"use strict";
+// When Webpack cannot resolve these dependencies, it will not print an error message.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllowOptionalDependenciesPlugin = void 0;
+const OPTIONAL_DEPENDENCIES = [
+    'zod',
+    '@remotion/zod-types',
+    'react-native-reanimated',
+    'react-native-reanimated/package.json',
+];
+class AllowOptionalDependenciesPlugin {
+    filter(error) {
+        for (const dependency of OPTIONAL_DEPENDENCIES) {
+            if (error.message.includes(`Can't resolve '${dependency}'`)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    apply(compiler) {
+        compiler.hooks.afterEmit.tap('AllowOptionalDependenciesPlugin', (compilation) => {
+            compilation.errors = compilation.errors.filter(this.filter);
+            compilation.warnings = compilation.warnings.filter(this.filter);
+        });
+    }
+}
+exports.AllowOptionalDependenciesPlugin = AllowOptionalDependenciesPlugin;

package/dist/read-recursively.js

@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.readRecursively = void 0;
-const fs_1 = __importStar(require("fs"));
-const path_1 = __importDefault(require("path"));
+const node_fs_1 = __importStar(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
 const readRecursively = ({ folder, output = [], startPath, staticHash, limit, }) => {
-    const absFolder = path_1.default.join(startPath, folder);
-    if (!fs_1.default.existsSync(absFolder)) {
+    const absFolder = node_path_1.default.join(startPath, folder);
+    if (!node_fs_1.default.existsSync(absFolder)) {
         return [];
     }
-    const files = fs_1.default.readdirSync(absFolder);
+    const files = node_fs_1.default.readdirSync(absFolder);
     for (const file of files) {
         if (output.length >= limit) {
             break;
@@ -42,11 +42,11 @@ const readRecursively = ({ folder, output = [], startPath, staticHash, limit, })
         if (file.startsWith('.DS_Store')) {
             continue;
         }
-        const stat = (0, fs_1.statSync)(path_1.default.join(absFolder, file));
+        const stat = (0, node_fs_1.statSync)(node_path_1.default.join(absFolder, file));
         if (stat.isDirectory()) {
             (0, exports.readRecursively)({
                 startPath,
-                folder: path_1.default.join(folder, file),
+                folder: node_path_1.default.join(folder, file),
                 output,
                 staticHash,
                 limit,
@@ -54,21 +54,21 @@ const readRecursively = ({ folder, output = [], startPath, staticHash, limit, })
         }
         else if (stat.isFile()) {
             output.push({
-                name: path_1.default.join(folder, file),
+                name: node_path_1.default.join(folder, file),
                 lastModified: Math.floor(stat.mtimeMs),
                 sizeInBytes: stat.size,
-                src: staticHash + '/' + path_1.default.join(folder, file),
+                src: staticHash + '/' + encodeURIComponent(node_path_1.default.join(folder, file)),
             });
         }
         else if (stat.isSymbolicLink()) {
-            const realpath = fs_1.default.realpathSync(path_1.default.join(folder, file));
-            const realStat = fs_1.default.statSync(realpath);
+            const realpath = node_fs_1.default.realpathSync(node_path_1.default.join(folder, file));
+            const realStat = node_fs_1.default.statSync(realpath);
             if (realStat.isFile()) {
                 output.push({
                     name: realpath,
                     lastModified: Math.floor(realStat.mtimeMs),
                     sizeInBytes: realStat.size,
-                    src: staticHash + '/' + realpath,
+                    src: staticHash + '/' + encodeURIComponent(realpath),
                 });
             }
         }

package/dist/renderEntry.js

@@ -44,7 +44,9 @@ const GetVideo = ({ state }) => {
         if (!video && compositions.compositions.length > 0) {
             const foundComposition = compositions.compositions.find((c) => c.id === state.compositionName);
             if (!foundComposition) {
-                throw new Error('Found no composition with the name ' + state.compositionName);
+                throw new Error(`Found no composition with the name ${state.compositionName}. The following compositions were found instead: ${compositions.compositions
+                    .map((c) => c.id)
+                    .join(', ')}. All compositions must have their ID calculated deterministically and must be mounted at the same time.`);
             }
             compositions.setCurrentComposition((_a = foundComposition === null || foundComposition === void 0 ? void 0 : foundComposition.id) !== null && _a !== void 0 ? _a : null);
             compositions.setCurrentCompositionMetadata({
@@ -186,18 +188,31 @@ if (typeof window !== 'undefined') {
             console.warn('Could not single out a problematic composition -  The composition list as a whole is too big to serialize.');
             throw new Error('defaultProps too big - Could not serialize - an object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops');
         }
-        return compositions.map((c) => {
-            return {
-                defaultProps: c.defaultProps,
-                durationInFrames: c.durationInFrames,
-                fps: c.fps,
-                height: c.height,
-                id: c.id,
-                width: c.width,
-            };
-        });
+        return Promise.all(compositions.map((c) => {
+            return Promise.resolve(remotion_1.Internals.resolveVideoConfig({
+                composition: c,
+                editorProps: {},
+                signal: new AbortController().signal,
+            }));
+        }));
+    };
+    window.calculateComposition = (compId) => {
+        if (!remotion_1.Internals.compositionsRef.current) {
+            throw new Error('Unexpectedly did not have a CompositionManager');
+        }
+        const compositions = remotion_1.Internals.compositionsRef.current.getCompositions();
+        const selectedComp = compositions.find((c) => c.id === compId);
+        if (!selectedComp) {
+            throw new Error(`Could not find composition with ID ${compId}`);
+        }
+        const abortController = new AbortController();
+        return Promise.resolve(remotion_1.Internals.resolveVideoConfig({
+            composition: selectedComp,
+            editorProps: {},
+            signal: abortController.signal,
+        }));
     };
-    window.siteVersion = '4';
+    window.siteVersion = '5';
     window.remotion_version = remotion_1.VERSION;
     window.setBundleMode = exports.setBundleModeAndUpdate;
 }

package/dist/setup-environment.js

@@ -36,6 +36,7 @@ remotion_1.Internals.CSSUtils.injectCSS(`
     background-color: rgba(0, 0, 0, 1);
   }
 
+
   .__remotion-horizontal-scrollbar::-webkit-scrollbar {
     height: 6px;
   }
@@ -49,6 +50,29 @@ remotion_1.Internals.CSSUtils.injectCSS(`
     background-color: rgba(0, 0, 0, 1);
   }
 
+
+  @-moz-document url-prefix() {
+    .__remotion-vertical-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0);
+    }
+
+    .__remotion-vertical-scrollbar:hover {
+      scrollbar-color: rgba(0, 0, 0, 1) rgba(0, 0, 0, 0);
+    }
+
+    .__remotion-horizontal-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0);
+    }
+
+    .__remotion-horizontal-scrollbar:hover {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 1) rgba(0, 0, 0, 0);
+    }
+  }
+
+
   .__remotion-timeline-slider {
     appearance: none;
     width: 100px;
@@ -66,4 +90,6 @@ remotion_1.Internals.CSSUtils.injectCSS(`
     appearance: none;
   }
 
+
+
 `);

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

@@ -3,12 +3,12 @@ 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 node_path_1 = __importDefault(require("node: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.expect)(() => (0, validate_public_dir_1.validatePublicDir)(node_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';

package/dist/validate-public-dir.js

@@ -4,15 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validatePublicDir = void 0;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
 const validatePublicDir = (p) => {
-    const { root } = path_1.default.parse(process.cwd());
+    const { root } = node_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);
+        const stat = node_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.`);
         }
@@ -20,8 +20,8 @@ const validatePublicDir = (p) => {
     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);
+        const parentPath = node_path_1.default.dirname(p);
+        const exists = node_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.`);
         }

package/dist/webpack-cache.d.ts

@@ -7,7 +7,8 @@ declare global {
         }
     }
 }
-export declare const clearCache: (remotionRoot: string) => Promise<void>;
+export declare const clearCache: (remotionRoot: string, env: Environment) => Promise<void>;
+export declare const getWebpackCacheEnvDir: (environment: Environment) => string;
 export declare const getWebpackCacheName: (environment: Environment, hash: string) => string;
 export declare const cacheExists: (remotionRoot: string, environment: Environment, hash: string) => CacheState;
 export {};

package/dist/webpack-cache.js

@@ -3,22 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cacheExists = exports.getWebpackCacheName = exports.clearCache = void 0;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
+exports.cacheExists = exports.getWebpackCacheName = exports.getWebpackCacheEnvDir = exports.clearCache = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
 // Inlined from https://github.com/webpack/webpack/blob/4c2ee7a4ddb8db2362ca83b6c4190523387ba7ee/lib/config/defaults.js#L265
 // An algorithm to determine where Webpack will cache the depencies
 const getWebpackCacheDir = (remotionRoot) => {
     let dir = remotionRoot;
     for (;;) {
         try {
-            if (fs_1.default.statSync(path_1.default.join(dir, 'package.json')).isFile()) {
+            if (node_fs_1.default.statSync(node_path_1.default.join(dir, 'package.json')).isFile()) {
                 break;
             }
             // eslint-disable-next-line no-empty
         }
         catch (e) { }
-        const parent = path_1.default.dirname(dir);
+        const parent = node_path_1.default.dirname(dir);
         if (dir === parent) {
             dir = undefined;
             break;
@@ -26,39 +26,41 @@ const getWebpackCacheDir = (remotionRoot) => {
         dir = parent;
     }
     if (!dir) {
-        return path_1.default.resolve(remotionRoot, '.cache/webpack');
+        return node_path_1.default.resolve(remotionRoot, '.cache/webpack');
     }
     if (process.versions.pnp === '1') {
-        return path_1.default.resolve(dir, '.pnp/.cache/webpack');
+        return node_path_1.default.resolve(dir, '.pnp/.cache/webpack');
     }
     if (process.versions.pnp === '3') {
-        return path_1.default.resolve(dir, '.yarn/.cache/webpack');
+        return node_path_1.default.resolve(dir, '.yarn/.cache/webpack');
     }
-    return path_1.default.resolve(dir, 'node_modules/.cache/webpack');
+    return node_path_1.default.resolve(dir, 'node_modules/.cache/webpack');
+};
+const remotionCacheLocationForEnv = (remotionRoot, environment) => {
+    return node_path_1.default.join(getWebpackCacheDir(remotionRoot), (0, exports.getWebpackCacheEnvDir)(environment));
 };
 const remotionCacheLocation = (remotionRoot, environment, hash) => {
-    return path_1.default.join(getWebpackCacheDir(remotionRoot), (0, exports.getWebpackCacheName)(environment, hash));
+    return node_path_1.default.join(getWebpackCacheDir(remotionRoot), (0, exports.getWebpackCacheName)(environment, hash));
 };
-const clearCache = (remotionRoot) => {
-    return fs_1.default.promises.rm(getWebpackCacheDir(remotionRoot), {
+const clearCache = (remotionRoot, env) => {
+    return node_fs_1.default.promises.rm(remotionCacheLocationForEnv(remotionRoot, env), {
         recursive: true,
     });
 };
 exports.clearCache = clearCache;
 const getPrefix = (environment) => {
-    return `remotion-v4-${environment}`;
+    return `remotion-v5-${environment}`;
+};
+const getWebpackCacheEnvDir = (environment) => {
+    return getPrefix(environment);
 };
+exports.getWebpackCacheEnvDir = getWebpackCacheEnvDir;
 const getWebpackCacheName = (environment, hash) => {
-    if (environment === 'development') {
-        return `${getPrefix(environment)}-${hash}`;
-    }
-    // In production, the cache is independent from input props because
-    // they are passed over URL params. Speed is mostly important in production.
-    return `${getPrefix(environment)}-${hash}`;
+    return [(0, exports.getWebpackCacheEnvDir)(environment), hash].join(node_path_1.default.sep);
 };
 exports.getWebpackCacheName = getWebpackCacheName;
 const hasOtherCache = ({ remotionRoot, environment, }) => {
-    const cacheDir = fs_1.default.readdirSync(getWebpackCacheDir(remotionRoot));
+    const cacheDir = node_fs_1.default.readdirSync(getWebpackCacheDir(remotionRoot));
     if (cacheDir.find((c) => {
         return c.startsWith(getPrefix(environment));
     })) {
@@ -67,10 +69,10 @@ const hasOtherCache = ({ remotionRoot, environment, }) => {
     return false;
 };
 const cacheExists = (remotionRoot, environment, hash) => {
-    if (fs_1.default.existsSync(remotionCacheLocation(remotionRoot, environment, hash))) {
+    if (node_fs_1.default.existsSync(remotionCacheLocation(remotionRoot, environment, hash))) {
         return 'exists';
     }
-    if (!fs_1.default.existsSync(getWebpackCacheDir(remotionRoot))) {
+    if (!node_fs_1.default.existsSync(getWebpackCacheDir(remotionRoot))) {
         return 'does-not-exist';
     }
     if (hasOtherCache({ remotionRoot, environment })) {

package/dist/webpack-config.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpackConfig = void 0;
-const crypto_1 = require("crypto");
+const node_crypto_1 = require("node:crypto");
 const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const webpack_1 = __importStar(require("webpack"));
@@ -35,6 +35,7 @@ const fast_refresh_1 = require("./fast-refresh");
 const stringify_with_circular_references_1 = require("./stringify-with-circular-references");
 const webpack_cache_1 = require("./webpack-cache");
 const esbuild = require("esbuild");
+const optional_dependencies_1 = require("./optional-dependencies");
 if (!react_dom_1.default || !react_dom_1.default.version) {
     throw new Error('Could not find "react-dom" package. Did you install it?');
 }
@@ -92,6 +93,7 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
                     'process.env.KEYBOARD_SHORTCUTS_ENABLED': keyboardShortcutsEnabled,
                     [`process.env.${remotion_1.Internals.ENV_VARIABLES_ENV_NAME}`]: JSON.stringify(envVariables),
                 }),
+                new optional_dependencies_1.AllowOptionalDependenciesPlugin(),
             ]
             : [
                 new webpack_1.ProgressPlugin((p) => {
@@ -99,10 +101,10 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
                         onProgress(Number((p * 100).toFixed(2)));
                     }
                 }),
+                new optional_dependencies_1.AllowOptionalDependenciesPlugin(),
             ],
         output: {
             hashFunction: 'xxhash64',
-            globalObject: 'this',
             filename: 'bundle.js',
             devtoolModuleFilenameTemplate: '[resource-path]',
             assetModuleFilename: environment === 'development' ? '[path][name][ext]' : '[hash][ext]',
@@ -117,7 +119,6 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
                     ? require.resolve('react-dom/client')
                     : require.resolve('react-dom'),
                 remotion: require.resolve('remotion'),
-                'react-native$': 'react-native-web',
             },
         },
         module: {
@@ -168,7 +169,7 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
             ],
         },
     });
-    const hash = (0, crypto_1.createHash)('md5')
+    const hash = (0, node_crypto_1.createHash)('md5')
         .update((0, stringify_with_circular_references_1.jsonStringifyWithCircularReferences)(conf))
         .digest('hex');
     return [

package/package.json

@@ -1,67 +1,67 @@
 {
-	"name": "@remotion/bundler",
-	"version": "4.0.0-alpha.217+27eff7599",
-	"description": "Bundler for Remotion",
-	"main": "dist/index.js",
-	"sideEffects": false,
-	"repository": {
-		"url": "https://github.com/remotion-dev/remotion"
-	},
-	"bugs": {
-		"url": "https://github.com/remotion-dev/remotion/issues"
-	},
-	"scripts": {
-		"lint": "eslint src --ext ts,tsx",
-		"build": "tsc -d",
-		"watch": "tsc -w",
-		"test": "vitest --run"
-	},
-	"files": [
-		"dist",
-		"react-shim.js"
-	],
-	"author": "Jonny Burger <jonny@remotion.dev>",
-	"license": "SEE LICENSE IN LICENSE.md",
-	"dependencies": {
-		"css-loader": "5.2.7",
-		"esbuild": "0.16.12",
-		"react-refresh": "0.9.0",
-		"remotion": "4.0.0-alpha.217+27eff7599",
-		"style-loader": "2.0.0",
-		"webpack": "5.76.1"
-	},
-	"peerDependencies": {
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
-	},
-	"devDependencies": {
-		"@jonny/eslint-config": "3.0.266",
-		"@types/node": "^16.7.5",
-		"@types/react": "18.0.26",
-		"@types/react-dom": "18.0.10",
-		"@typescript-eslint/eslint-plugin": "5.18.0",
-		"@typescript-eslint/parser": "5.18.0",
-		"eslint": "8.25.0",
-		"eslint-plugin-10x": "1.5.2",
-		"eslint-plugin-react": "7.29.4",
-		"eslint-plugin-react-hooks": "4.4.0",
-		"prettier": "^2.7.1",
-		"prettier-plugin-organize-imports": "^2.3.4",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
-		"typescript": "^4.7.0",
-		"vitest": "0.24.3"
-	},
-	"keywords": [
-		"remotion",
-		"ffmpeg",
-		"video",
-		"react",
-		"webpack",
-		"player"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"gitHead": "27eff759935b19b666e29f4f46dd5bdd6214e188"
-}
+  "name": "@remotion/bundler",
+  "version": "4.0.0-alpha10",
+  "description": "Bundler for Remotion",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion"
+  },
+  "bugs": {
+    "url": "https://github.com/remotion-dev/remotion/issues"
+  },
+  "files": [
+    "dist",
+    "react-shim.js"
+  ],
+  "author": "Jonny Burger <jonny@remotion.dev>",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "dependencies": {
+    "css-loader": "5.2.7",
+    "esbuild": "0.16.12",
+    "react-refresh": "0.9.0",
+    "style-loader": "2.0.0",
+    "webpack": "5.83.1",
+    "remotion": "4.0.0-alpha10"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@jonny/eslint-config": "3.0.266",
+    "@types/node": "18.14.6",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/parser": "5.18.0",
+    "eslint": "8.25.0",
+    "eslint-plugin-10x": "1.5.2",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "4.4.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^4.7.0",
+    "vitest": "0.31.1"
+  },
+  "keywords": [
+    "remotion",
+    "ffmpeg",
+    "video",
+    "react",
+    "webpack",
+    "player"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "formatting": "prettier src --check",
+    "lint": "eslint src --ext ts,tsx",
+    "build": "tsc -d",
+    "watch": "tsc -w",
+    "test": "vitest --run"
+  }
+}