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

package/dist/preview-server/error-overlay/remotion-overlay/CodeFrame.js

@@ -13,6 +13,8 @@ const lineNumber = {
     paddingLeft: 10,
     paddingRight: 12,
     marginRight: 12,
+    color: 'inherit',
+    fontSize: 14,
 };
 const CodeFrame = ({ source, lineNumberWidth }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: frame, children: source.map((s, j) => {

package/dist/preview-server/error-overlay/remotion-overlay/ErrorMessage.js

@@ -16,9 +16,11 @@ const container = {
     marginBottom: 15,
 };
 const messageContainer = {
+    overflow: 'hidden',
+};
+const textContainer = {
     fontSize,
     lineHeight,
-    overflow: 'hidden',
 };
 const moreLine = {
     width: '100%',
@@ -62,6 +64,6 @@ const ErrorMessage = ({ message }) => {
     const toggle = (0, react_1.useCallback)(() => {
         setExpanded((e) => !e);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, children: message }) }), errorLines !== null && errorLines > maxLines ? ((0, jsx_runtime_1.jsx)("div", { style: moreLine, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggle, style: moreButton, children: (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: expanded }) }) })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: textContainer, children: message }) }), errorLines !== null && errorLines > maxLines ? ((0, jsx_runtime_1.jsx)("div", { style: moreLine, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggle, style: moreButton, children: (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: expanded }) }) })) : null] }));
 };
 exports.ErrorMessage = ErrorMessage;

package/dist/preview-server/error-overlay/remotion-overlay/ErrorTitle.js

@@ -32,6 +32,6 @@ const spacer = {
     width: 5,
 };
 const ErrorTitle = ({ name, message, symbolicating }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: title, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: title, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("span", { style: errName, children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [symbolicating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Symbolicating_1.Symbolicating, {}), (0, jsx_runtime_1.jsx)("div", { style: spacer })] })) : null, (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: message })] })] }), (0, react_overlay_1.didUnmountReactApp)() ? null : (0, jsx_runtime_1.jsx)(DismissButton_1.DismissButton, {})] }));
 };
 exports.ErrorTitle = ErrorTitle;

package/dist/preview-server/error-overlay/remotion-overlay/HelpLink.js

@@ -6,6 +6,10 @@ const react_1 = require("react");
 const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
 const Button_1 = require("./Button");
 const ShortcutHint_1 = require("./ShortcutHint");
+const buttonStyle = {
+    backgroundColor: 'var(--blue)',
+    color: 'white',
+};
 const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
     const openLink = (0, react_1.useCallback)(() => {
         window.open(link.url, '_blank');
@@ -23,9 +27,10 @@ const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {
             key: 'h',
             callback: onEditor,
             commandCtrlKey: true,
+            preventDefault: true,
         });
         return () => unregister();
     }, [canHaveKeyboardShortcuts, openLink, registerKeybinding]);
-    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: openLink, children: ["Help: ", '"', link.title, '"', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "h", cmdOrCtrl: true })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { style: buttonStyle, onClick: openLink, children: ["Help: ", '"', link.title, '"', canHaveKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "h", cmdOrCtrl: true })) : null] }));
 };
 exports.HelpLink = HelpLink;

package/dist/preview-server/error-overlay/remotion-overlay/OpenInEditor.js

@@ -4,6 +4,7 @@ exports.OpenInEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-console */
 const react_1 = require("react");
+const open_in_editor_1 = require("../../../editor/helpers/open-in-editor");
 const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
 const Button_1 = require("./Button");
 const ShortcutHint_1 = require("./ShortcutHint");
@@ -42,15 +43,7 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
     }, []);
     const openInBrowser = (0, react_1.useCallback)(() => {
         dispatch({ type: 'start' });
-        fetch(`/api/open-in-editor`, {
-            method: 'post',
-            headers: {
-                'content-type': 'application/json',
-            },
-            body: JSON.stringify({
-                stack,
-            }),
-        })
+        (0, open_in_editor_1.openInEditor)(stack)
             .then((res) => res.json())
             .then((data) => {
             if (data.success) {
@@ -87,6 +80,7 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
             key: 'o',
             callback: onEditor,
             commandCtrlKey: true,
+            preventDefault: true,
         });
         return () => unregister();
     }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);

package/dist/preview-server/error-overlay/remotion-overlay/SearchGitHubIssues.js

@@ -23,6 +23,7 @@ const SearchGithubIssues = ({ message, canHaveKeyboardShortcuts }) => {
             key: 'g',
             callback: onEditor,
             commandCtrlKey: true,
+            preventDefault: true,
         });
         return () => unregister();
     }, [canHaveKeyboardShortcuts, openInBrowser, registerKeybinding]);

package/dist/preview-server/error-overlay/remotion-overlay/ShortcutHint.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const cmdOrCtrlCharacter: string;
 export declare const ShortcutHint: React.FC<{
     keyToPress: string;
     cmdOrCtrl: boolean;

package/dist/preview-server/error-overlay/remotion-overlay/ShortcutHint.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShortcutHint = void 0;
+exports.ShortcutHint = exports.cmdOrCtrlCharacter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
+exports.cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
     ? '⌘'
     : 'Ctrl';
 const container = {
@@ -11,6 +11,6 @@ const container = {
     opacity: 0.6,
 };
 const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
-    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${cmdOrCtrlCharacter}+` : '', keyToPress.toUpperCase()] }));
+    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${exports.cmdOrCtrlCharacter}+` : '', keyToPress.toUpperCase()] }));
 };
 exports.ShortcutHint = ShortcutHint;

package/dist/preview-server/error-overlay/remotion-overlay/StackFrame.js

@@ -10,6 +10,7 @@ const format_location_1 = require("./format-location");
 const location = {
     color: 'rgba(255, 255, 255, 0.6)',
     fontFamily: 'monospace',
+    fontSize: 14,
 };
 const header = {
     paddingLeft: 14,
@@ -28,6 +29,7 @@ const left = {
 };
 const fnName = {
     fontSize: 14,
+    lineHeight: 1.5,
     marginBottom: 3,
 };
 const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
@@ -41,7 +43,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName }) => {
     const toggleCodeFrame = (0, react_1.useCallback)(() => {
         setShowCodeFrame((f) => !f);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: header, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: false }) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}) })) : null] }), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: header, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? ((0, jsx_runtime_1.jsxs)("div", { style: location, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleCodeFrame, children: showCodeFrame ? (0, jsx_runtime_1.jsx)(carets_1.CaretDown, { invert: false }) : (0, jsx_runtime_1.jsx)(carets_1.CaretRight, {}) })) : null] }), (0, jsx_runtime_1.jsx)("div", { children: s.originalScriptCode &&
                     s.originalScriptCode.length > 0 &&
                     showCodeFrame ? ((0, jsx_runtime_1.jsx)(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })] }));
 };

package/dist/preview-server/error-overlay/remotion-overlay/get-help-link.js

@@ -14,6 +14,36 @@ const getHelpLink = (message) => {
             url: 'https://remotion.dev/docs/wrong-composition-mount',
         };
     }
+    if (message.includes('https://remotion.dev/docs/staticfile-relative-paths')) {
+        return {
+            title: 'staticFile() relative paths',
+            url: 'https://remotion.dev/docs/staticfile-relative-paths',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/staticfile-remote-urls')) {
+        return {
+            title: 'staticFile() remote URLs',
+            url: 'https://remotion.dev/docs/staticfile-remote-urls',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/non-seekable-media')) {
+        return {
+            title: 'Non-seekable media',
+            url: 'https://remotion.dev/docs/non-seekable-media',
+        };
+    }
+    if (message.includes('https://remotion.dev/docs/media-playback-error')) {
+        return {
+            title: 'Media playback error',
+            url: 'https://remotion.dev/docs/media-playback-error',
+        };
+    }
+    if (message.includes('Div is not part of the THREE')) {
+        return {
+            title: '<Sequence> inside <ThreeCanvas>',
+            url: 'https://remotion.dev/docs/sequence#note-for-remotionthree',
+        };
+    }
     return null;
 };
 exports.getHelpLink = getHelpLink;

package/dist/preview-server/get-absolute-public-dir.d.ts

@@ -0,0 +1,4 @@
+export declare const getAbsolutePublicDir: ({ userPassedPublicDir, remotionRoot, }: {
+    userPassedPublicDir: string | null;
+    remotionRoot: string;
+}) => string;

package/dist/preview-server/get-absolute-public-dir.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAbsolutePublicDir = void 0;
+const path_1 = __importDefault(require("path"));
+const getAbsolutePublicDir = ({ userPassedPublicDir, remotionRoot, }) => {
+    const publicDir = userPassedPublicDir
+        ? path_1.default.resolve(remotionRoot, userPassedPublicDir)
+        : path_1.default.join(remotionRoot, 'public');
+    return publicDir;
+};
+exports.getAbsolutePublicDir = getAbsolutePublicDir;

package/dist/preview-server/get-package-manager.d.ts

@@ -3,7 +3,8 @@ declare type LockfilePath = {
     manager: PackageManager;
     path: string;
     installCommand: string;
+    startCommand: string;
 };
 export declare const lockFilePaths: LockfilePath[];
-export declare const getPackageManager: (remotionRoot: string) => LockfilePath | 'unknown';
+export declare const getPackageManager: (remotionRoot: string, packageManager: string | undefined) => LockfilePath | 'unknown';
 export {};

package/dist/preview-server/get-package-manager.js

@@ -7,19 +7,35 @@ exports.getPackageManager = exports.lockFilePaths = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 exports.lockFilePaths = [
-    { path: 'package-lock.json', manager: 'npm', installCommand: 'npm i' },
+    {
+        path: 'package-lock.json',
+        manager: 'npm',
+        installCommand: 'npm i',
+        startCommand: 'npm start',
+    },
     {
         path: 'yarn.lock',
         manager: 'yarn',
         installCommand: 'yarn add',
+        startCommand: 'yarn start',
     },
     {
         path: 'pnpm-lock.yaml',
         manager: 'pnpm',
         installCommand: 'pnpm i',
+        startCommand: 'pnpm start',
     },
 ];
-const getPackageManager = (remotionRoot) => {
+const getPackageManager = (remotionRoot, packageManager) => {
+    if (packageManager) {
+        const manager = exports.lockFilePaths.find((p) => p.manager === packageManager);
+        if (!manager) {
+            throw new Error(`The package manager ${packageManager} is not supported. Supported package managers are ${exports.lockFilePaths
+                .map((p) => p.manager)
+                .join(', ')}`);
+        }
+        return manager;
+    }
     const existingPkgManagers = exports.lockFilePaths.filter((p) => fs_1.default.existsSync(path_1.default.join(remotionRoot, p.path)));
     if (existingPkgManagers.length === 0) {
         return 'unknown';

package/dist/preview-server/hot-middleware/index.d.ts

@@ -5,4 +5,98 @@
  */
 import type { webpack } from '@remotion/bundler';
 import type { IncomingMessage, ServerResponse } from 'http';
+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;
+}
 export declare const webpackHotMiddleware: (compiler: webpack.Compiler) => (req: IncomingMessage, res: ServerResponse, next: () => void) => void;

package/dist/preview-server/hot-middleware/index.js

@@ -24,7 +24,7 @@ const webpackHotMiddleware = (compiler) => {
     compiler.hooks.done.tap('remotion', onDone);
     function onInvalid() {
         latestStats = null;
-        log_1.Log.info('webpack building...');
+        log_1.Log.info('Building...');
         eventStream === null || eventStream === void 0 ? void 0 : eventStream.publish({
             action: 'building',
         });
@@ -114,7 +114,6 @@ function publishStats(action, statsResult, eventStream) {
         if (bundles.length === 1 && !name && statsResult.compilation) {
             name = statsResult.compilation.name || '';
         }
-        log_1.Log.info(`webpack built in ${_stats.time}ms`);
         eventStream === null || eventStream === void 0 ? void 0 : eventStream.publish({
             name,
             action,

package/dist/preview-server/hot-middleware/process-update.js

@@ -7,8 +7,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processUpdate = void 0;
-/* global  __webpack_hash__ */
-if (!module.hot) {
+if (!__webpack_module__.hot) {
     throw new Error('[Fast refresh] Hot Module Replacement is disabled.');
 }
 const hmrDocsUrl = 'https://webpack.js.org/concepts/hot-module-replacement/'; // eslint-disable-line max-len
@@ -44,7 +43,7 @@ function upToDate(hash) {
 const processUpdate = function (hash, moduleMap, options) {
     var _a;
     const { reload } = options;
-    if (!upToDate(hash) && ((_a = module.hot) === null || _a === void 0 ? void 0 : _a.status()) === 'idle') {
+    if (!upToDate(hash) && ((_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.status()) === 'idle') {
         check();
     }
     async function check() {
@@ -69,7 +68,7 @@ const processUpdate = function (hash, moduleMap, options) {
                 }
                 logUpdates(updatedModules, renewedModules);
             };
-            const applyResult = (_a = module.hot) === null || _a === void 0 ? void 0 : _a.apply(applyOptions, applyCallback);
+            const applyResult = (_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.apply(applyOptions);
             if (applyResult === null || applyResult === void 0 ? void 0 : applyResult.then) {
                 // HotModuleReplacement.runtime.js refers to the result as `outdatedModules`
                 applyResult
@@ -80,7 +79,7 @@ const processUpdate = function (hash, moduleMap, options) {
             }
         };
         try {
-            const result = await ((_a = module.hot) === null || _a === void 0 ? void 0 : _a.check(false, cb));
+            const result = await ((_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.check(false));
             cb(null, result);
         }
         catch (err) {
@@ -119,7 +118,7 @@ const processUpdate = function (hash, moduleMap, options) {
     }
     function handleError(err) {
         var _a, _b;
-        if (((_b = (_a = module.hot) === null || _a === void 0 ? void 0 : _a.status()) !== null && _b !== void 0 ? _b : 'nope') in failureStatuses) {
+        if (((_b = (_a = __webpack_module__.hot) === null || _a === void 0 ? void 0 : _a.status()) !== null && _b !== void 0 ? _b : 'nope') in failureStatuses) {
             if (options.warn) {
                 console.warn('[Fast refresh] Cannot check for update (Full reload needed)');
                 console.warn('[Fast refresh] ' + (err.stack || err.message));

package/dist/preview-server/live-events.js

@@ -13,6 +13,10 @@ const makeLiveEventsRouter = () => {
             'cache-control': 'no-cache',
         };
         response.writeHead(200, headers);
+        if (request.method === 'OPTIONS') {
+            response.end();
+            return;
+        }
         response.write(serializeMessage({ type: 'init' }));
         const clientId = String(Math.random());
         const newClient = {

package/dist/preview-server/project-info.js

@@ -8,7 +8,15 @@ const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const getProjectInfo = (remotionRoot) => {
     var _a;
-    const pathsToLookFor = ['src/Video.tsx', 'src/Video.jsx'].map((p) => {
+    const pathsToLookFor = [
+        'src/Root.tsx',
+        'src/Root.jsx',
+        'remotion/Root.tsx',
+        'remotion/Root.jsx',
+        'app/remotion/Root.tsx',
+        'src/Video.tsx',
+        'src/Video.jsx',
+    ].map((p) => {
         return path_1.default.join(remotionRoot, p);
     });
     const videoFile = (_a = pathsToLookFor.find((p) => (0, fs_1.existsSync)(p))) !== null && _a !== void 0 ? _a : null;

package/dist/preview-server/public-folder.d.ts

@@ -0,0 +1,17 @@
+import type { StaticFile } from 'remotion';
+export declare const initPublicFolderWatch: ({ publicDir, onUpdate, staticHash, }: {
+    publicDir: string;
+    remotionRoot: string;
+    onUpdate: () => void;
+    staticHash: string;
+}) => void;
+export declare const fetchFolder: ({ publicDir, staticHash, }: {
+    publicDir: string;
+    staticHash: string;
+}) => void;
+export declare const watchPublicFolder: ({ publicDir, onUpdate, staticHash, }: {
+    publicDir: string;
+    onUpdate: () => void;
+    staticHash: string;
+}) => void;
+export declare const getFiles: () => StaticFile[];

package/dist/preview-server/public-folder.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFiles = exports.watchPublicFolder = exports.fetchFolder = exports.initPublicFolderWatch = void 0;
+const bundler_1 = require("@remotion/bundler");
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const env_supports_fs_recursive_1 = require("./env-supports-fs-recursive");
+let files = [];
+const initPublicFolderWatch = ({ publicDir, onUpdate, staticHash, }) => {
+    (0, exports.fetchFolder)({ publicDir, staticHash });
+    (0, exports.watchPublicFolder)({ publicDir, onUpdate, staticHash });
+};
+exports.initPublicFolderWatch = initPublicFolderWatch;
+const fetchFolder = ({ publicDir, staticHash, }) => {
+    files = bundler_1.BundlerInternals.readRecursively({
+        folder: '.',
+        startPath: publicDir,
+        staticHash,
+        limit: 1000,
+    }).map((f) => {
+        return {
+            ...f,
+            name: f.name.split(path_1.default.sep).join('/'),
+        };
+    });
+};
+exports.fetchFolder = fetchFolder;
+const watchPublicFolder = ({ publicDir, onUpdate, staticHash, }) => {
+    if (!(0, fs_1.existsSync)(publicDir)) {
+        const parentDir = path_1.default.dirname(publicDir);
+        const onDirChange = () => {
+            if ((0, fs_1.existsSync)(publicDir)) {
+                (0, exports.watchPublicFolder)({
+                    publicDir,
+                    onUpdate,
+                    staticHash,
+                });
+                watcher.close();
+            }
+        };
+        const watcher = (0, fs_1.watch)(parentDir, {}, onDirChange);
+        return;
+    }
+    (0, fs_1.watch)(publicDir, { recursive: (0, env_supports_fs_recursive_1.envSupportsFsRecursive)() }, () => {
+        (0, exports.fetchFolder)({ publicDir, staticHash });
+        onUpdate();
+    });
+};
+exports.watchPublicFolder = watchPublicFolder;
+const getFiles = () => {
+    return files;
+};
+exports.getFiles = getFiles;

package/dist/preview-server/routes.d.ts

@@ -1,11 +1,13 @@
 import type { IncomingMessage, ServerResponse } from 'http';
 import type { LiveEventsServer } from './live-events';
-export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, remotionRoot, }: {
+export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, publicDir, }: {
     hash: string;
     hashPrefix: string;
     request: IncomingMessage;
     response: ServerResponse;
     liveEventsServer: LiveEventsServer;
     getCurrentInputProps: () => object;
+    getEnvVariables: () => Record<string, string>;
     remotionRoot: string;
+    publicDir: string;
 }) => void | Promise<void>;