npm - @remotion/bundler - Versions diffs - 4.0.0-alpha.4 → 4.0.0-alpha4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (321) hide show

package/dist/index-html.js CHANGED Viewed

@@ -5,17 +5,20 @@ 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, staticHash, remotionRoot, }) => `
+const indexHtml = ({ baseDir, editorName, inputProps, envVariables, staticHash, remotionRoot, previewServerCommand, numberOfAudioTags, publicFiles, includeFavicon, title, }) => `
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" />
-		<link rel="icon" type="image/png" href="/remotion.png" />
-		<title>Remotion Preview</title>
+${includeFavicon
+    ? `		<link rel="icon" type="image/png" href="/remotion.png" />\n`
+    : ''}
+		<title>${title}</title>
 	</head>
 	<body>
+    <script>window.remotion_numberOfAudioTags = ${numberOfAudioTags};</script>
     <script>window.remotion_staticBase = "${staticHash}";</script>
 		<div id="video-container"></div>
 		<div id="explainer-container"></div>
@@ -24,10 +27,18 @@ const indexHtml = ({ baseDir, editorName, inputProps, staticHash, remotionRoot,
     : '<script>window.remotion_editorName = null;</script>'}
 		<script>window.remotion_projectName = ${JSON.stringify(path_1.default.basename(remotionRoot))};</script>
 		<script>window.remotion_cwd = ${JSON.stringify(remotionRoot)};</script>
+		<script>window.remotion_previewServerCommand = ${previewServerCommand ? JSON.stringify(previewServerCommand) : 'null'};</script>
 		${inputProps
-    ? `		<script>window.remotion_inputProps = ${JSON.stringify(JSON.stringify(inputProps))};</script>
+    ? `<script>window.remotion_inputProps = ${JSON.stringify(JSON.stringify(inputProps))};</script>
+			`
+    : ''}
+		${envVariables
+    ? `<script> window.process = {
+    						env: ${JSON.stringify(envVariables)}
+ 				};</script>
 			`
     : ''}
+		<script>window.remotion_staticFiles = ${JSON.stringify(publicFiles)}</script>
 		<div id="container"></div>
 		<div id="menuportal-0"></div>
@@ -37,6 +48,7 @@ const indexHtml = ({ baseDir, editorName, inputProps, staticHash, remotionRoot,
 		<div id="menuportal-4"></div>
 		<div id="menuportal-5"></div>
 		<div id="remotion-error-overlay"></div>
+		<div id="server-disconnected-overlay"></div>
 		<script src="${baseDir}bundle.js"></script>
 	</body>
 </html>

package/dist/index.d.ts CHANGED Viewed

@@ -2,36 +2,51 @@ import esbuild = require('esbuild');
 import webpack = require('webpack');
 export declare const BundlerInternals: {
     esbuild: typeof esbuild;
-    webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgressUpdate, enableCaching, envVariables, maxTimelineTracks, entryPoints, remotionRoot, }: {
+    webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgress, enableCaching, envVariables, maxTimelineTracks, entryPoints, remotionRoot, keyboardShortcutsEnabled, poll, }: {
         entry: string;
         userDefinedComponent: string;
-        outDir: string;
+        outDir: string | null;
         environment: "development" | "production";
-        webpackOverride: import("remotion/dist/internals").WebpackOverrideFn;
-        onProgressUpdate?: ((f: number) => void) | undefined;
+        webpackOverride: import("remotion").WebpackOverrideFn;
+        onProgress?: ((f: number) => void) | undefined;
         enableCaching?: boolean | undefined;
         envVariables: Record<string, string>;
         maxTimelineTracks: number;
+        keyboardShortcutsEnabled: boolean;
         entryPoints: string[];
         remotionRoot: string;
+        poll: number | null;
     }) => [string, webpack.Configuration];
-    indexHtml: ({ baseDir, editorName, inputProps, staticHash, remotionRoot, }: {
+    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: import("remotion").StaticFile[];
+        includeFavicon: boolean;
+        title: string;
     }) => string;
     cacheExists: (remotionRoot: string, environment: "development" | "production", hash: string) => "exists" | "other-exists" | "does-not-exist";
     clearCache: (remotionRoot: string) => Promise<void>;
-    getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgressUpdate, options, }: {
+    getConfig: ({ entryPoint, outDir, resolvedRemotionRoot, onProgress, options, }: {
         outDir: string;
         entryPoint: string;
         resolvedRemotionRoot: string;
-        onProgressUpdate?: ((progress: number) => void) | undefined;
-        options?: import("./bundle").BundleOptions | undefined;
+        onProgress?: ((progress: number) => void) | undefined;
+        options?: import("./bundle").LegacyBundleOptions | undefined;
     }) => [string, webpack.Configuration];
+    readRecursively: ({ folder, output, startPath, staticHash, limit, }: {
+        folder: string;
+        startPath: string;
+        output?: import("remotion").StaticFile[] | undefined;
+        staticHash: string;
+        limit: number;
+    }) => import("remotion").StaticFile[];
 };
-export { bundle, BundleOptions } from './bundle';
+export { WebpackConfiguration, WebpackOverrideFn } from 'remotion';
+export { bundle, BundleOptions, LegacyBundleOptions } from './bundle';
 export { webpack };
-export declare type WebpackConfiguration = webpack.Configuration;

package/dist/index.js CHANGED Viewed

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpack = exports.bundle = exports.BundlerInternals = void 0;
 const bundle_1 = require("./bundle");
 const index_html_1 = require("./index-html");
+const read_recursively_1 = require("./read-recursively");
 const webpack_cache_1 = require("./webpack-cache");
 const webpack_config_1 = require("./webpack-config");
 const esbuild = require("esbuild");
@@ -15,6 +16,7 @@ exports.BundlerInternals = {
     cacheExists: webpack_cache_1.cacheExists,
     clearCache: webpack_cache_1.clearCache,
     getConfig: bundle_1.getConfig,
+    readRecursively: read_recursively_1.readRecursively,
 };
 var bundle_2 = require("./bundle");
 Object.defineProperty(exports, "bundle", { enumerable: true, get: function () { return bundle_2.bundle; } });

package/dist/read-recursively.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { StaticFile } from 'remotion';
+export declare const readRecursively: ({ folder, output, startPath, staticHash, limit, }: {
+    folder: string;
+    startPath: string;
+    output?: StaticFile[] | undefined;
+    staticHash: string;
+    limit: number;
+}) => StaticFile[];

package/dist/read-recursively.js ADDED Viewed

@@ -0,0 +1,78 @@
+"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.readRecursively = void 0;
+const fs_1 = __importStar(require("fs"));
+const path_1 = __importDefault(require("path"));
+const readRecursively = ({ folder, output = [], startPath, staticHash, limit, }) => {
+    const absFolder = path_1.default.join(startPath, folder);
+    if (!fs_1.default.existsSync(absFolder)) {
+        return [];
+    }
+    const files = fs_1.default.readdirSync(absFolder);
+    for (const file of files) {
+        if (output.length >= limit) {
+            break;
+        }
+        if (file.startsWith('.DS_Store')) {
+            continue;
+        }
+        const stat = (0, fs_1.statSync)(path_1.default.join(absFolder, file));
+        if (stat.isDirectory()) {
+            (0, exports.readRecursively)({
+                startPath,
+                folder: path_1.default.join(folder, file),
+                output,
+                staticHash,
+                limit,
+            });
+        }
+        else if (stat.isFile()) {
+            output.push({
+                name: path_1.default.join(folder, file),
+                lastModified: Math.floor(stat.mtimeMs),
+                sizeInBytes: stat.size,
+                src: staticHash + '/' + 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);
+            if (realStat.isFile()) {
+                output.push({
+                    name: realpath,
+                    lastModified: Math.floor(realStat.mtimeMs),
+                    sizeInBytes: realStat.size,
+                    src: staticHash + '/' + realpath,
+                });
+            }
+        }
+    }
+    return output.sort((a, b) => a.name.localeCompare(b.name));
+};
+exports.readRecursively = readRecursively;

package/dist/renderEntry.d.ts CHANGED Viewed

File without changes

package/dist/renderEntry.js CHANGED Viewed

@@ -15,6 +15,19 @@ 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 getCanSerializeDefaultProps = (object) => {
+    try {
+        const str = JSON.stringify(object);
+        // 256MB is the theoretical limit, making it throw if over 90% of that is reached.
+        return str.length < 256 * 1024 * 1024 * 0.9;
+    }
+    catch (err) {
+        if (err.message.includes('Invalid string length')) {
+            return false;
+        }
+        throw err;
+    }
+};
 const GetVideo = ({ state }) => {
     const video = remotion_1.Internals.useVideo();
     const compositions = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -34,6 +47,13 @@ const GetVideo = ({ state }) => {
                 throw new Error('Found no composition with the name ' + state.compositionName);
             }
             compositions.setCurrentComposition((_a = foundComposition === null || foundComposition === void 0 ? void 0 : foundComposition.id) !== null && _a !== void 0 ? _a : null);
+            compositions.setCurrentCompositionMetadata({
+                defaultProps: state.compositionDefaultProps,
+                durationInFrames: state.compositionDurationInFrames,
+                fps: state.compositionFps,
+                height: state.compositionHeight,
+                width: state.compositionWidth,
+            });
         }
     }, [compositions, compositions.compositions, state, video]);
     (0, react_1.useEffect)(() => {
@@ -75,7 +95,7 @@ let cleanupVideoContainer = () => {
 let cleanupExplainerContainer = () => {
     explainerContainer.innerHTML = '';
 };
-const waitForRootHandle = (0, remotion_1.delayRender)('Loading root component');
+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)(() => {
@@ -96,7 +116,7 @@ const WaitForRoot = () => {
 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)(WaitForRoot, {}), (0, jsx_runtime_1.jsx)(GetVideo, { state: bundleMode })] }));
+        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);
@@ -154,9 +174,19 @@ if (typeof window !== 'undefined') {
         if (!remotion_1.Internals.compositionsRef.current) {
             throw new Error('Unexpectedly did not have a CompositionManager');
         }
-        return remotion_1.Internals.compositionsRef.current
-            .getCompositions()
-            .map((c) => {
+        const compositions = remotion_1.Internals.compositionsRef.current.getCompositions();
+        const canSerializeDefaultProps = getCanSerializeDefaultProps(compositions);
+        if (!canSerializeDefaultProps) {
+            console.warn('defaultProps are too big to serialize - trying to find the problematic composition...');
+            for (const comp of compositions) {
+                if (!getCanSerializeDefaultProps(comp)) {
+                    throw new Error(`defaultProps too big - could not serialize - the defaultProps of composition with ID ${comp.id} - the object that was passed to defaultProps was too big. Learn how to mitigate this error by visiting https://remotion.dev/docs/troubleshooting/serialize-defaultprops`);
+                }
+            }
+            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,
@@ -167,6 +197,7 @@ if (typeof window !== 'undefined') {
             };
         });
     };
-    window.siteVersion = '3';
+    window.siteVersion = '4';
+    window.remotion_version = remotion_1.VERSION;
     window.setBundleMode = exports.setBundleModeAndUpdate;
 }

package/dist/setup-environment.d.ts CHANGED Viewed

File without changes

package/dist/setup-environment.js CHANGED Viewed

@@ -5,10 +5,15 @@ remotion_1.Internals.setupEnvVariables();
 remotion_1.Internals.CSSUtils.injectCSS(`
   .css-reset, .css-reset * {
     font-size: 16px;
-    line-height: 1;
+    line-height: 1.5;
     color: white;
     font-family: Arial, Helvetica, sans-serif;
     background: transparent;
     box-sizing: border-box;
   }
+  .algolia-docsearch-suggestion--highlight {
+    font-size: 15px;
+    line-height: 1.25;
+  }
 `);

package/dist/stringify-with-circular-references.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const jsonStringifyWithCircularReferences: (circ: unknown) => string;

package/dist/stringify-with-circular-references.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsonStringifyWithCircularReferences = void 0;
+const jsonStringifyWithCircularReferences = (circ) => {
+    let seen = [];
+    const val = JSON.stringify(circ, (_, value) => {
+        if (typeof value === 'object' && value !== null && seen) {
+            if (seen.includes(value)) {
+                return '[Circular]';
+            }
+            seen.push(value);
+        }
+        return value;
+    });
+    seen = null;
+    return val;
+};
+exports.jsonStringifyWithCircularReferences = jsonStringifyWithCircularReferences;

package/dist/test/validate-bundle.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/test/validate-bundle.test.js ADDED Viewed

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const bundle_1 = require("../bundle");
+(0, vitest_1.test)('Should reject bad bundle options', () => {
+    // @ts-expect-error
+    (0, vitest_1.expect)(() => (0, bundle_1.bundle)()).rejects.toThrow(/bundle\(\) was called without arguments/);
+    // @ts-expect-error
+    (0, vitest_1.expect)(() => (0, bundle_1.bundle)({})).rejects.toThrow(/bundle\(\) was called without the `entryPoint` option/);
+});

package/dist/test/validate-public-dir.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

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

@@ -0,0 +1,21 @@
+"use strict";
+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 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.test)('Should not allow a path where the parent directory does not exist', () => {
+        const pathToPass = process.platform === 'win32' ? 'C:\\foo\\bar' : '/foo/bar';
+        const expectedParent = process.platform === 'win32' ? 'C:\\foo' : '/foo';
+        (0, vitest_1.expect)(() => (0, validate_public_dir_1.validatePublicDir)(pathToPass)).toThrow(`The public directory was specified as "${pathToPass}", but this folder does not exist and the parent directory "${expectedParent}" does also not exist.`);
+    });
+    (0, vitest_1.test)('Should allow /foo as a path since that directory can be created', () => {
+        (0, vitest_1.expect)(() => (0, validate_public_dir_1.validatePublicDir)(process.platform === 'win32' ? 'C:\\foo' : '/foo')).not.toThrow();
+    });
+});

package/dist/validate-public-dir.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const validatePublicDir: (p: string) => void;

package/dist/validate-public-dir.js ADDED Viewed

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatePublicDir = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const validatePublicDir = (p) => {
+    const { root } = 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);
+        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.`);
+        }
+    }
+    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);
+        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.`);
+        }
+    }
+};
+exports.validatePublicDir = validatePublicDir;

package/dist/webpack-cache.d.ts CHANGED Viewed

File without changes

package/dist/webpack-cache.js CHANGED Viewed

File without changes

package/dist/webpack-config.d.ts CHANGED Viewed

@@ -1,14 +1,16 @@
 import type { WebpackConfiguration, WebpackOverrideFn } from 'remotion';
-export declare const webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgressUpdate, enableCaching, envVariables, maxTimelineTracks, entryPoints, remotionRoot, }: {
+export declare const webpackConfig: ({ entry, userDefinedComponent, outDir, environment, webpackOverride, onProgress, enableCaching, envVariables, maxTimelineTracks, entryPoints, remotionRoot, keyboardShortcutsEnabled, poll, }: {
     entry: string;
     userDefinedComponent: string;
-    outDir: string;
+    outDir: string | null;
     environment: 'development' | 'production';
     webpackOverride: WebpackOverrideFn;
-    onProgressUpdate?: ((f: number) => void) | undefined;
+    onProgress?: ((f: number) => void) | undefined;
     enableCaching?: boolean | undefined;
     envVariables: Record<string, string>;
     maxTimelineTracks: number;
+    keyboardShortcutsEnabled: boolean;
     entryPoints: string[];
     remotionRoot: string;
+    poll: number | null;
 }) => [string, WebpackConfiguration];

package/dist/webpack-config.js CHANGED Viewed

@@ -32,6 +32,7 @@ const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const webpack_1 = __importStar(require("webpack"));
 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");
 if (!react_dom_1.default || !react_dom_1.default.version) {
@@ -50,7 +51,7 @@ const esbuildLoaderOptions = {
 function truthy(value) {
     return Boolean(value);
 }
-const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpackOverride = (f) => f, onProgressUpdate, enableCaching = true, envVariables, maxTimelineTracks, entryPoints, remotionRoot, }) => {
+const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpackOverride = (f) => f, onProgress, enableCaching = true, envVariables, maxTimelineTracks, entryPoints, remotionRoot, keyboardShortcutsEnabled, poll, }) => {
     const conf = webpackOverride({
         optimization: {
             minimize: false,
@@ -63,12 +64,11 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
                 },
         },
         watchOptions: {
+            poll: poll !== null && poll !== void 0 ? poll : undefined,
             aggregateTimeout: 0,
             ignored: ['**/.git/**', '**/node_modules/**'],
         },
-        devtool: environment === 'development'
-            ? 'cheap-module-source-map'
-            : 'cheap-module-source-map',
+        devtool: 'cheap-module-source-map',
         entry: [
             // Fast Refresh must come first,
             // because setup-environment imports ReactDOM.
@@ -89,13 +89,14 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
                 new webpack_1.default.HotModuleReplacementPlugin(),
                 new webpack_1.default.DefinePlugin({
                     'process.env.MAX_TIMELINE_TRACKS': maxTimelineTracks,
+                    'process.env.KEYBOARD_SHORTCUTS_ENABLED': keyboardShortcutsEnabled,
                     [`process.env.${remotion_1.Internals.ENV_VARIABLES_ENV_NAME}`]: JSON.stringify(envVariables),
                 }),
             ]
             : [
                 new webpack_1.ProgressPlugin((p) => {
-                    if (onProgressUpdate) {
-                        onProgressUpdate(Number((p * 100).toFixed(2)));
+                    if (onProgress) {
+                        onProgress(Number((p * 100).toFixed(2)));
                     }
                 }),
             ],
@@ -107,7 +108,7 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
             assetModuleFilename: environment === 'development' ? '[path][name][ext]' : '[hash][ext]',
         },
         resolve: {
-            extensions: ['.ts', '.tsx', '.js', '.jsx'],
+            extensions: ['.ts', '.tsx', '.web.js', '.js', '.jsx'],
             alias: {
                 // Only one version of react
                 'react/jsx-runtime': require.resolve('react/jsx-runtime'),
@@ -167,7 +168,9 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
             ],
         },
     });
-    const hash = (0, crypto_1.createHash)('md5').update(JSON.stringify(conf)).digest('hex');
+    const hash = (0, crypto_1.createHash)('md5')
+        .update((0, stringify_with_circular_references_1.jsonStringifyWithCircularReferences)(conf))
+        .digest('hex');
     return [
         hash,
         {
@@ -181,7 +184,7 @@ const webpackConfig = ({ entry, userDefinedComponent, outDir, environment, webpa
                 : false,
             output: {
                 ...conf.output,
-                path: outDir,
+                ...(outDir ? { path: outDir } : {}),
             },
             context: remotionRoot,
         },