@remotion/bundler 4.0.0-alpha.4 → 4.0.0-alpha4

package/LICENSE.md

@@ -1,34 +1,34 @@
 # Remotion License
 
-Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion create videos for free (even commercial), while a company license is required for for-profit organisations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
 - [Free license](#free-license)
 - [Company license](#company-license)
 
 ## Free license
 
-Copyright © 2022 [Jonny Burger](https://jonny.io)
+Copyright © 2023 [Remotion](https://www.remotion.dev/)
 
 ### Eligibility
 
 You are eligible to use Remotion for free if you are:
 
 - an individual
-- a for-profit organisation with up to 3 employees
-- a non-profit or not-for-profit organisation
+- a for-profit organization with up to 3 employees
+- a non-profit or not-for-profit organization
 - evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
 
 ### Allowed use cases
 
-Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify and the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
 
 ### Disallowed use cases
 
-It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, sublicensing your own derivate of Remotion.
+It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
 
 ### Warranty notice
 
-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 author 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.
+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 non-infringement. In no event shall the author 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.
 
 ### Support
 
@@ -36,6 +36,6 @@ Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
 
 ## Company license
 
-You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support.
+You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](/docs/support)).
 
 Visit [companies.remotion.dev](https://companies.remotion.dev) for pricing and to buy a license.

package/dist/bundle.d.ts

@@ -1,17 +1,35 @@
 import type { WebpackOverrideFn } from 'remotion';
 import webpack from 'webpack';
-export declare type BundleOptions = {
+export declare type LegacyBundleOptions = {
     webpackOverride?: WebpackOverrideFn;
     outDir?: string;
     enableCaching?: boolean;
     publicPath?: string;
     rootDir?: string;
+    publicDir?: string | null;
+    onPublicDirCopyProgress?: (bytes: number) => void;
+    onSymlinkDetected?: (path: string) => void;
 };
-export declare const getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgressUpdate, options, }: {
+export declare const getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgress, options, }: {
     outDir: string;
     entryPoint: string;
     resolvedRemotionRoot: string;
-    onProgressUpdate?: ((progress: number) => void) | undefined;
-    options?: BundleOptions | undefined;
+    onProgress?: ((progress: number) => void) | undefined;
+    options?: LegacyBundleOptions | undefined;
 }) => [string, webpack.Configuration];
-export declare const bundle: (entryPoint: string, onProgressUpdate?: ((progress: number) => void) | undefined, options?: BundleOptions) => Promise<string>;
+export declare type BundleOptions = {
+    entryPoint: string;
+    onProgress?: (progress: number) => void;
+    ignoreRegisterRootWarning?: boolean;
+} & LegacyBundleOptions;
+declare type Arguments = [options: BundleOptions] | [
+    entryPoint: string,
+    onProgress?: (progress: number) => void,
+    options?: LegacyBundleOptions
+];
+/**
+ * @description The method bundles a Remotion project using Webpack and prepares it for rendering using renderMedia()
+ * @see [Documentation](https://www.remotion.dev/docs/bundle)
+ */
+export declare function bundle(...args: Arguments): Promise<string>;
+export {};

package/dist/bundle.js

@@ -1,10 +1,33 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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 fs_1 = __importStar(require("fs"));
 const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
 const util_1 = require("util");
@@ -12,15 +35,15 @@ 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 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'));
+    return fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'remotion-webpack-bundle-'));
 };
 const trimLeadingSlash = (p) => {
     if (p.startsWith('/')) {
@@ -34,28 +57,82 @@ const trimTrailingSlash = (p) => {
     }
     return p;
 };
-const getConfig = ({ entryPoint, outDir, resolvedRemotionRoot, onProgressUpdate, options, }) => {
+const getConfig = ({ entryPoint, outDir, resolvedRemotionRoot, onProgress, options, }) => {
     var _a, _b;
+    const entry = require.resolve('./renderEntry');
     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,
+        onProgress,
         enableCaching: (_b = options === null || options === void 0 ? void 0 : options.enableCaching) !== null && _b !== void 0 ? _b : true,
         maxTimelineTracks: 15,
         // For production, the variables are set dynamically
         envVariables: {},
         entryPoints: [],
         remotionRoot: resolvedRemotionRoot,
+        keyboardShortcutsEnabled: false,
+        poll: null,
     });
 };
 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);
+const convertArgumentsIntoOptions = (args) => {
+    var _a;
+    if (args.length === 0) {
+        throw new TypeError('bundle() was called without arguments');
+    }
+    const firstArg = args[0];
+    if (typeof firstArg === 'string') {
+        return {
+            entryPoint: firstArg,
+            onProgress: args[1],
+            ...((_a = args[2]) !== null && _a !== void 0 ? _a : {}),
+        };
+    }
+    if (typeof firstArg.entryPoint !== 'string') {
+        throw new TypeError('bundle() was called without the `entryPoint` option');
+    }
+    return firstArg;
+};
+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);
+        if (exists) {
+            return path_1.default.dirname(possiblePackageJson);
+        }
+        currentDir = path_1.default.dirname(currentDir);
+    }
+    return null;
+};
+const validateEntryPoint = async (entryPoint) => {
+    const contents = await 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".`,
+            'You should use the file that calls registerRoot() as the entry point.',
+            'To ignore this error, pass "ignoreRegisterRootWarning" to bundle().',
+            'This error cannot be ignored on the CLI.',
+        ].join(' '));
+    }
+};
+/**
+ * @description The method bundles a Remotion project using Webpack and prepares it for rendering using renderMedia()
+ * @see [Documentation](https://www.remotion.dev/docs/bundle)
+ */
+async function bundle(...args) {
+    var _a, _b, _c, _d;
+    const actualArgs = convertArgumentsIntoOptions(args);
+    const entryPoint = 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);
+    }
+    const outDir = await prepareOutDir((_c = actualArgs === null || actualArgs === void 0 ? void 0 : actualArgs.outDir) !== null && _c !== void 0 ? _c : 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)
@@ -63,11 +140,12 @@ const bundle = async (entryPoint, onProgressUpdate, options) => {
     if (worker_threads_1.isMainThread) {
         process.chdir(resolvedRemotionRoot);
     }
+    const { onProgress, ...options } = actualArgs;
     const [, config] = (0, exports.getConfig)({
         outDir,
         entryPoint,
         resolvedRemotionRoot,
-        onProgressUpdate,
+        onProgress,
         options,
     });
     const output = await promisified([config]);
@@ -81,16 +159,35 @@ const bundle = async (entryPoint, onProgressUpdate, options) => {
     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 baseDir = (_d = actualArgs === null || actualArgs === void 0 ? void 0 : actualArgs.publicPath) !== null && _d !== void 0 ? _d : '/';
     const staticHash = '/' +
         [trimTrailingSlash(trimLeadingSlash(baseDir)), 'public']
             .filter(Boolean)
             .join('/');
-    // TODO: Unhardcode public directory
-    const from = path_1.default.join(resolvedRemotionRoot, 'public');
+    const from = (options === null || options === void 0 ? void 0 : options.publicDir)
+        ? path_1.default.resolve(resolvedRemotionRoot, options.publicDir)
+        : path_1.default.join(resolvedRemotionRoot, 'public');
     const to = path_1.default.join(outDir, 'public');
+    let symlinkWarningShown = false;
+    const showSymlinkWarning = (ent, src) => {
+        if (symlinkWarningShown) {
+            return;
+        }
+        const absolutePath = path_1.default.join(src, ent.name);
+        if (options.onSymlinkDetected) {
+            options.onSymlinkDetected(absolutePath);
+            return;
+        }
+        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)) {
-        await (0, copy_dir_1.copyDir)(from, to);
+        await (0, copy_dir_1.copyDir)({
+            src: from,
+            dest: to,
+            onSymlinkDetected: showSymlinkWarning,
+            onProgress: (prog) => { var _a; return (_a = options.onPublicDirCopyProgress) === null || _a === void 0 ? void 0 : _a.call(options, prog); },
+        });
     }
     const html = (0, index_html_1.indexHtml)({
         staticHash,
@@ -98,8 +195,18 @@ const bundle = async (entryPoint, onProgressUpdate, options) => {
         editorName: null,
         inputProps: null,
         remotionRoot: resolvedRemotionRoot,
+        previewServerCommand: null,
+        numberOfAudioTags: 0,
+        publicFiles: (0, read_recursively_1.readRecursively)({
+            folder: '.',
+            startPath: from,
+            staticHash,
+            limit: 1000,
+        }),
+        includeFavicon: false,
+        title: 'Remotion Bundle',
     });
     fs_1.default.writeFileSync(path_1.default.join(outDir, 'index.html'), html);
     return outDir;
-};
+}
 exports.bundle = bundle;

package/dist/copy-dir.d.ts

@@ -1 +1,8 @@
-export declare function copyDir(src: string, dest: string): Promise<void>;
+/// <reference types="node" />
+import fs from 'fs';
+export declare function copyDir({ src, dest, onSymlinkDetected, onProgress, }: {
+    src: string;
+    dest: string;
+    onSymlinkDetected: (entry: fs.Dirent, dir: string) => void;
+    onProgress: (bytes: number) => void;
+}): Promise<void>;

package/dist/copy-dir.js

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

package/dist/fast-refresh/helpers.js

@@ -127,10 +127,10 @@ function scheduleUpdate() {
         }
     };
     // Only trigger refresh if the webpack HMR state is idle
-    if (((_a = module.hot) === null || _a === void 0 ? void 0 : _a.status()) === 'idle') {
+    if (((_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.status()) === 'idle') {
         return;
     }
-    (_b = module.hot) === null || _b === void 0 ? void 0 : _b.addStatusHandler((status) => {
+    (_b = __webpack_module__.hot) === null || _b === void 0 ? void 0 : _b.addStatusHandler((status) => {
         if (status === 'idle') {
             execute();
         }

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

@@ -31,5 +31,99 @@
  * SOFTWARE.
  */
 import type { LoaderDefinition } from 'webpack';
+declare global {
+    const __webpack_hash__: unknown;
+    interface HotNotifierInfo {
+        type: 'self-declined' | 'declined' | 'unaccepted' | 'accepted' | 'disposed' | 'accept-errored' | 'self-accept-errored' | 'self-accept-error-handler-errored';
+        /**
+         * The module in question.
+         */
+        moduleId: number;
+        /**
+         * For errors: the module id owning the accept handler.
+         */
+        dependencyId?: number | undefined;
+        /**
+         * For declined/accepted/unaccepted: the chain from where the update was propagated.
+         */
+        chain?: number[] | undefined;
+        /**
+         * For declined: the module id of the declining parent
+         */
+        parentId?: number | undefined;
+        /**
+         * For accepted: the modules that are outdated and will be disposed
+         */
+        outdatedModules?: number[] | undefined;
+        /**
+         * For accepted: The location of accept handlers that will handle the update
+         */
+        outdatedDependencies?: {
+            [dependencyId: number]: number[];
+        } | undefined;
+        /**
+         * For errors: the thrown error
+         */
+        error?: Error | undefined;
+        /**
+         * For self-accept-error-handler-errored: the error thrown by the module
+         * before the error handler tried to handle it.
+         */
+        originalError?: Error | undefined;
+    }
+    interface AcceptOptions {
+        /**
+         * If true the update process continues even if some modules are not accepted (and would bubble to the entry point).
+         */
+        ignoreUnaccepted?: boolean | undefined;
+        /**
+         * Ignore changes made to declined modules.
+         */
+        ignoreDeclined?: boolean | undefined;
+        /**
+         *  Ignore errors throw in accept handlers, error handlers and while reevaluating module.
+         */
+        ignoreErrored?: boolean | undefined;
+        /**
+         * Notifier for declined modules.
+         */
+        onDeclined?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Notifier for unaccepted modules.
+         */
+        onUnaccepted?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Notifier for accepted modules.
+         */
+        onAccepted?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Notifier for disposed modules.
+         */
+        onDisposed?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Notifier for errors.
+         */
+        onErrored?: ((info: HotNotifierInfo) => void) | undefined;
+        /**
+         * Indicates that apply() is automatically called by check function
+         */
+        autoApply?: boolean | undefined;
+    }
+    const __webpack_module__: {
+        id: string;
+        exports: unknown;
+        hot: {
+            accept: () => void;
+            dispose: (onDispose: (data: Record<string, unknown>) => void) => void;
+            invalidate: () => void;
+            data?: Record<string, unknown>;
+            addStatusHandler(callback: (status: string) => void): void;
+            status(): string;
+            apply(options?: AcceptOptions): Promise<ModuleId[]>;
+            check(autoApply?: boolean): Promise<null | ModuleId[]>;
+        };
+    };
+    type ModuleId = string | number;
+}
 declare const ReactRefreshLoader: LoaderDefinition;
 export default ReactRefreshLoader;

package/dist/fast-refresh/loader.js

@@ -12,34 +12,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // This function gets unwrapped into global scope, which is why we don't invert
 // if-blocks. Also, you cannot use `return`.
 function RefreshModuleRuntime() {
+    var _a, _b;
     // Legacy CSS implementations will `eval` browser code in a Node.js context
     // to extract CSS. For backwards compatibility, we need to check we're in a
     // browser context before continuing.
     if (typeof self !== 'undefined' &&
         // AMP / No-JS mode does not inject these helpers:
         '$RefreshHelpers$' in self) {
-        // @ts-expect-error
-        // eslint-disable-next-line no-proto
-        const currentExports = module.__proto__.exports;
-        let prevExports = null;
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-        if (module.hot && module.hot.data && module.hot.data.prevExports) {
-            prevExports = module.hot.data.prevExports;
-        }
+        const currentExports = __webpack_module__.exports;
+        const prevExports = (_b = (_a = __webpack_module__.hot.data) === null || _a === void 0 ? void 0 : _a.prevExports) !== null && _b !== void 0 ? _b : null;
         // This cannot happen in MainTemplate because the exports mismatch between
         // templating and execution.
-        self.$RefreshHelpers$.registerExportsForReactRefresh(currentExports, module.id);
+        self.$RefreshHelpers$.registerExportsForReactRefresh(currentExports, __webpack_module__.id);
         // A module can be accepted automatically based on its exports, e.g. when
         // it is a Refresh Boundary.
         if (self.$RefreshHelpers$.isReactRefreshBoundary(currentExports)) {
             // Save the previous exports on update so we can compare the boundary
             // signatures.
-            module.hot.dispose((data) => {
+            __webpack_module__.hot.dispose((data) => {
                 data.prevExports = currentExports;
             });
             // Unconditionally accept an update to this module, we'll check if it's
             // still a Refresh Boundary later.
-            module.hot.accept();
+            __webpack_module__.hot.accept();
             // This field is set when the previous version of this module was a
             // Refresh Boundary, letting us know we need to check for invalidation or
             // enqueue an update.
@@ -52,8 +47,7 @@ function RefreshModuleRuntime() {
                 // re-render. Similarly, if you convert a class component to a
                 // function, we want to invalidate the boundary.
                 if (self.$RefreshHelpers$.shouldInvalidateReactRefreshBoundary(prevExports, currentExports)) {
-                    // @ts-expect-error
-                    module.hot.invalidate();
+                    __webpack_module__.hot.invalidate();
                 }
                 else {
                     self.$RefreshHelpers$.scheduleUpdate();
@@ -67,8 +61,7 @@ function RefreshModuleRuntime() {
             // because we already accepted this update (accidental side effect).
             const isNoLongerABoundary = prevExports !== null;
             if (isNoLongerABoundary) {
-                // @ts-expect-error
-                module.hot.invalidate();
+                __webpack_module__.hot.invalidate();
             }
         }
     }

package/dist/homepage/homepage.js

@@ -26,10 +26,14 @@ const pre = {
 const AvailableCompositions = () => {
     const [comps, setComps] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
+        if ((0, bundle_mode_1.getBundleMode)().type !== 'evaluation') {
+            return;
+        }
         let timeout = null;
         const check = () => {
             if (window.ready === true) {
-                setComps(window.getStaticCompositions());
+                const newComps = window.getStaticCompositions();
+                setComps(newComps);
             }
             else {
                 timeout = setTimeout(check, 250);
@@ -50,13 +54,36 @@ const AvailableCompositions = () => {
         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
-                    ? null
+                    ? []
                     : comps.map((c) => {
                         return (0, jsx_runtime_1.jsx)("li", { children: c.id }, c.id);
                     }) })] }));
 };
+const TestCORS = () => {
+    const [serveUrl, setServeUrl] = (0, react_1.useState)('');
+    const [result, setResult] = (0, react_1.useState)('');
+    const handleServeUrl = (0, react_1.useCallback)((e) => {
+        setServeUrl(e.target.value);
+    }, []);
+    const isCORSWorking = (0, react_1.useCallback)(async (e) => {
+        e.preventDefault();
+        try {
+            const response = await fetch(serveUrl, { mode: 'cors' });
+            if (response.ok) {
+                setResult(`CORS is enabled on this URL: ${serveUrl}`);
+            }
+            else {
+                setResult('URL does not support CORS - See DevTools console for more details');
+            }
+        }
+        catch (error) {
+            setResult('URL does not support CORS - See DevTools console for more details');
+        }
+    }, [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 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."] })] }));
+    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", {})] }));
 };
 exports.Homepage = Homepage;

package/dist/index-html.d.ts

@@ -1,7 +1,14 @@
-export declare const indexHtml: ({ baseDir, editorName, inputProps, staticHash, remotionRoot, }: {
+import type { StaticFile } from 'remotion';
+export declare const indexHtml: ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, numberOfAudioTags, publicFiles, includeFavicon, title, }: {
     staticHash: string;
     baseDir: string;
     editorName: string | null;
     inputProps: object | null;
+    envVariables?: Record<string, string> | undefined;
     remotionRoot: string;
+    previewServerCommand: string | null;
+    numberOfAudioTags: number;
+    publicFiles: StaticFile[];
+    includeFavicon: boolean;
+    title: string;
 }) => string;