@remotion/studio-server 4.0.513 → 4.0.515

package/dist/preview-server/routes/insert-element.js

@@ -197,8 +197,8 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             : plan.elementFileExists
                 ? 'Reused existing Element source'
                 : 'Created Element source';
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileAction}`);
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(compositionLocationLabel)} Added <${plan.componentName}>`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileAction}`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(compositionLocationLabel)} Added <${plan.componentName}>`);
         if (!inserted.formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

package/dist/preview-server/routes/insert-jsx-element.js

@@ -204,7 +204,7 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
             absolutePath: fileName,
             line: logLine,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${elementLabel}`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${elementLabel}`);
         if (!formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

package/dist/preview-server/routes/install-dependency.js

@@ -46,13 +46,19 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { dependenc
         manager: manager.manager,
         packages: packagesWithVersions,
         version: '',
-        additionalArgs: [],
+        additionalArgs: manager.manager === 'yarn' ? [] : ['--ignore-scripts'],
     });
     renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.gray(`╭─  ${manager.manager} ${command.join(' ')}`));
     const time = Date.now();
     try {
         await new Promise((resolve, reject) => {
-            const cmd = (0, node_child_process_1.spawn)(manager.manager, command, (0, package_manager_spawn_options_1.getPackageManagerSpawnOptions)());
+            const cmd = (0, node_child_process_1.spawn)(manager.manager, command, {
+                ...(0, package_manager_spawn_options_1.getPackageManagerSpawnOptions)(),
+                env: {
+                    ...process.env,
+                    YARN_ENABLE_SCRIPTS: 'false',
+                },
+            });
             cmd.on('error', reject);
             cmd.stdout.on('data', (d) => d
                 .toString()

package/dist/preview-server/routes/log-updates/log-effect-update.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logEffectUpdate = void 0;
 const renderer_1 = require("@remotion/renderer");
+const source_file_write_queue_1 = require("../source-file-write-queue");
 const format_effect_prop_change_1 = require("./format-effect-prop-change");
 const log_update_1 = require("./log-update");
 const logEffectUpdate = ({ fileRelativeToRoot, line, effectName, propKey, oldValueString, newValueString, defaultValueString, formatted, logLevel, removedProps, addedProps, }) => {
@@ -15,7 +16,7 @@ const logEffectUpdate = ({ fileRelativeToRoot, line, effectName, propKey, oldVal
         removedProps,
         addedProps,
     });
-    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${propChange}`);
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${propChange}`);
     if (!formatted) {
         (0, log_update_1.warnAboutPrettierOnce)(logLevel);
     }

package/dist/preview-server/routes/log-updates/log-update.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logUpdate = exports.normalizeQuotes = exports.warnAboutPrettierOnce = void 0;
 const renderer_1 = require("@remotion/renderer");
+const source_file_write_queue_1 = require("../source-file-write-queue");
 const format_prop_change_1 = require("./format-prop-change");
 let warnedAboutPrettier = false;
 const warnAboutPrettierOnce = (logLevel) => {
@@ -31,7 +32,7 @@ const logUpdate = ({ fileRelativeToRoot, line, key, oldValueString, newValueStri
         removedProps,
         addedProps,
     });
-    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${propChange}`);
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${propChange}`);
     if (!formatted) {
         (0, exports.warnAboutPrettierOnce)(logLevel);
     }

package/dist/preview-server/routes/paste-effects.js

@@ -66,7 +66,7 @@ const pasteEffectsHandler = ({ input: { targetFileName, targetSequenceNodePath,
                 absolutePath,
                 line: logLine,
             });
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Pasted ${(0, formatting_1.attrName)(effectDescription)}`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Pasted ${(0, formatting_1.attrName)(effectDescription)}`);
             if (!formatted) {
                 (0, log_update_1.warnAboutPrettierOnce)(logLevel);
             }

package/dist/preview-server/routes/remotion-skills-info.d.ts

@@ -0,0 +1,7 @@
+import type { GetRemotionSkillsInfoRequest, GetRemotionSkillsInfoResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const getRemotionSkillsInfo: ({ remotionRoot, homeDirectory, }: {
+    remotionRoot: string;
+    homeDirectory?: string | undefined;
+}) => GetRemotionSkillsInfoResponse;
+export declare const remotionSkillsInfoHandler: ApiHandler<GetRemotionSkillsInfoRequest, GetRemotionSkillsInfoResponse>;

package/dist/preview-server/routes/remotion-skills-info.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remotionSkillsInfoHandler = exports.getRemotionSkillsInfo = void 0;
+const node_fs_1 = require("node:fs");
+const node_os_1 = require("node:os");
+const node_path_1 = __importDefault(require("node:path"));
+const detect_outdated_remotion_skills_1 = require("../../detect-outdated-remotion-skills");
+const getRemotionSkillsInfo = ({ remotionRoot, homeDirectory = (0, node_os_1.homedir)(), }) => {
+    const skillsDirectories = (0, detect_outdated_remotion_skills_1.getRemotionSkillsDirectories)({
+        cwd: remotionRoot,
+        homeDirectory,
+    });
+    const isSkillAvailable = (skillName) => Object.values(skillsDirectories).some((skillsDirectory) => (0, node_fs_1.existsSync)(node_path_1.default.join(skillsDirectory, skillName, 'SKILL.md')));
+    return {
+        remotionUpgradeSkillAvailable: isSkillAvailable('remotion-upgrade'),
+        remotionInteractivitySkillAvailable: isSkillAvailable('remotion-interactivity'),
+    };
+};
+exports.getRemotionSkillsInfo = getRemotionSkillsInfo;
+const remotionSkillsInfoHandler = ({ remotionRoot }) => Promise.resolve((0, exports.getRemotionSkillsInfo)({ remotionRoot }));
+exports.remotionSkillsInfoHandler = remotionSkillsInfoHandler;

package/dist/preview-server/routes/reorder-effect.js

@@ -54,7 +54,7 @@ const reorderEffectHandler = ({ input: { fileName, sequenceNodePath, fromIndex,
                 absolutePath,
                 line: logLine,
             });
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Reordered ${(0, formatting_1.attrName)(effectLabel)}`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Reordered ${(0, formatting_1.attrName)(effectLabel)}`);
             if (!formatted) {
                 (0, log_update_1.warnAboutPrettierOnce)(logLevel);
             }

package/dist/preview-server/routes/reorder-sequence.js

@@ -62,7 +62,7 @@ const reorderSequenceHandler = ({ input: { fileName, sourceNodePath, targetNodeP
                 absolutePath,
                 line: logLine,
             });
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Reordered ${(0, formatting_1.attrName)(sequenceLabel)}`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Reordered ${(0, formatting_1.attrName)(sequenceLabel)}`);
             if (!formatted) {
                 (0, log_update_1.warnAboutPrettierOnce)(logLevel);
             }

package/dist/preview-server/routes/save-props-mutex.d.ts

@@ -0,0 +1 @@
+export declare const withSavePropsLock: <T>(fn: () => Promise<T>) => Promise<T>;

package/dist/preview-server/routes/save-props-mutex.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withSavePropsLock = void 0;
+let chain = Promise.resolve();
+const withSavePropsLock = (fn) => {
+    const run = () => fn();
+    const next = chain.then(run, run);
+    chain = next.then(() => undefined, () => undefined);
+    return next;
+};
+exports.withSavePropsLock = withSavePropsLock;

package/dist/preview-server/routes/source-file-write-queue.d.ts

@@ -1 +1,2 @@
+export declare const getCodemodTimingPrefix: (logLevel: "error" | "info" | "trace" | "verbose" | "warn") => string;
 export declare const withSourceFileWriteQueue: <T>(fn: () => Promise<T>) => Promise<T>;

package/dist/preview-server/routes/source-file-write-queue.js

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSourceFileWriteQueue = void 0;
+exports.withSourceFileWriteQueue = exports.getCodemodTimingPrefix = void 0;
+const node_async_hooks_1 = require("node:async_hooks");
 let chain = Promise.resolve();
+const codemodStartTime = new node_async_hooks_1.AsyncLocalStorage();
+const getCodemodTimingPrefix = (logLevel) => {
+    const startTime = codemodStartTime.getStore();
+    return logLevel === 'trace' && startTime !== undefined
+        ? `[${Date.now() - startTime}ms] `
+        : '';
+};
+exports.getCodemodTimingPrefix = getCodemodTimingPrefix;
 const withSourceFileWriteQueue = (fn) => {
-    const run = () => fn();
+    const run = () => codemodStartTime.run(Date.now(), fn);
     const next = chain.then(run, run);
     chain = next.then(() => undefined, () => undefined);
     return next;

package/dist/preview-server/routes/split-jsx-sequence.js

@@ -60,7 +60,7 @@ const splitJsxSequenceHandler = ({ input: { fileName, nodePath, sequenceKeys, sp
             absolutePath,
             line: logLine,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Split ${nodeLabel}`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Split ${nodeLabel}`);
         if (!formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

package/dist/preview-server/routes/split-video-from-audio.d.ts

@@ -0,0 +1,3 @@
+import type { SplitVideoFromAudioRequest, SplitVideoFromAudioResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const splitVideoFromAudioHandler: ApiHandler<SplitVideoFromAudioRequest, SplitVideoFromAudioResponse>;

package/dist/preview-server/routes/split-video-from-audio.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitVideoFromAudioHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const split_video_from_audio_1 = require("../../codemods/split-video-from-audio");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const format_log_file_location_1 = require("../format-log-file-location");
+const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
+const undo_stack_1 = require("../undo-stack");
+const log_update_1 = require("./log-updates/log-update");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const splitVideoFromAudioHandler = ({ input: { fileName, nodePath }, remotionRoot, logLevel }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    try {
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[split-video-from-audio] Received request for fileName="${fileName}"`);
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName,
+            action: 'modify',
+        });
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        const { output, formatted, nodeLabel, logLine, nodePathRemappings } = await (0, split_video_from_audio_1.splitVideoFromAudio)({
+            input: fileContents,
+            nodePath,
+        });
+        const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
+            {
+                absolutePath,
+                remappings: nodePathRemappings,
+                restoredNodePaths: [],
+            },
+        ]);
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: null,
+            logLevel,
+            remotionRoot,
+            logLine,
+            description: {
+                undoMessage: `↩️  Split of audio from ${nodeLabel}`,
+                redoMessage: `↪️  Split of audio from ${nodeLabel}`,
+            },
+            entryType: 'split-video-from-audio',
+            suppressHmrOnFileRestore: false,
+            nodePathRemappings,
+        });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+            file: absolutePath,
+            content: output,
+            originatorClientId: undefined,
+            metadata: { skipSequencePropsUpdate: true },
+        });
+        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot,
+            absolutePath,
+            line: logLine,
+        });
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Split audio from ${nodeLabel}`);
+        if (!formatted) {
+            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        }
+        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[split-video-from-audio] Wrote ${fileRelativeToRoot}${formatted ? ' (formatted)' : ''}`);
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+            nodePathMutation,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
+    }
+});
+exports.splitVideoFromAudioHandler = splitVideoFromAudioHandler;

package/dist/preview-server/routes/update-default-props.js

@@ -60,7 +60,7 @@ const updateDefaultPropsHandler = ({ input: { compositionId, defaultProps, enumP
                 absolutePath: projectInfo.rootFile,
                 line: logLine,
             });
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Updated default props for "${compositionId}"`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Updated default props for "${compositionId}"`);
             if (!formatted) {
                 (0, log_update_1.warnAboutPrettierOnce)(logLevel);
             }

package/dist/preview-server/start-server.js

@@ -29,171 +29,219 @@ const startServer = async (options) => {
             });
             return detection.type === 'match' ? 'stop' : 'continue';
         };
-    const watchIgnorePlugin = new bundler_1.WatchIgnoreNextChangePlugin((...args) => {
-        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel: options.logLevel }, ...args);
+    let portSelection = await renderer_1.RenderInternals.getDesiredPort({
+        desiredPort,
+        from: 3000,
+        to: 3100,
+        hostsToTry: portConfig.hostsToTry,
+        onPortUnavailable,
     });
-    const configArgs = {
-        entry: options.entry,
-        userDefinedComponent: options.userDefinedComponent,
-        outDir: null,
-        environment: 'development',
-        bundlerOverride: options.bundlerOverride,
-        rspackOverride: options.rspackOverride,
-        webpackOverride: options === null || options === void 0 ? void 0 : options.webpackOverride,
-        remotionRoot: options.remotionRoot,
-        poll: options.poll,
-        extraPlugins: [watchIgnorePlugin],
-    };
-    let compiler;
-    if (options.rspack) {
-        const [, rspackConf] = await bundler_1.BundlerInternals.rspackConfig(configArgs);
-        compiler = bundler_1.BundlerInternals.createRspackCompiler(rspackConf);
-    }
-    else {
-        const [, webpackConf] = await bundler_1.BundlerInternals.webpackConfig(configArgs);
-        compiler = (0, bundler_1.webpack)(webpackConf);
-    }
-    (0, watch_ignore_next_change_1.setWatchIgnoreNextChangePlugin)(watchIgnorePlugin);
-    const wdmMiddleware = (0, dev_middleware_1.wdm)(compiler, options.logLevel);
-    const liveEventsServer = (0, live_events_1.makeLiveEventsRouter)(options.logLevel, () => {
-        const undoStack = (0, undo_stack_1.getUndoStack)();
-        const redoStack = (0, undo_stack_1.getRedoStack)();
+    if (portSelection.didUsePort) {
+        portSelection.unlockPort();
         return {
-            undoFile: undoStack.length > 0 ? undoStack[undoStack.length - 1].filePath : null,
-            redoFile: redoStack.length > 0 ? redoStack[redoStack.length - 1].filePath : null,
+            type: 'already-running',
+            port: portSelection.port,
         };
-    });
-    (0, hot_middleware_1.setupWebpackHmr)(compiler, options.logLevel, liveEventsServer);
-    compiler.hooks.done.tap('remotion-node-path-cache', () => {
-        (0, node_path_cache_1.clearNodePathCache)();
-    });
-    const server = node_http_1.default.createServer((request, response) => {
-        if (options.enableCrossSiteIsolation) {
-            response.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
-            response.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
-        }
-        new Promise((resolve) => {
-            wdmMiddleware(request, response, () => {
-                resolve();
-            });
-        })
-            .then(() => {
-            return (0, routes_1.handleRoutes)({
-                staticHash: options.staticHash,
-                staticHashPrefix: options.staticHashPrefix,
-                outputHash: options.outputHash,
-                outputHashPrefix: options.outputHashPrefix,
-                request: request,
-                response,
-                liveEventsServer,
-                getCurrentInputProps: options.getCurrentInputProps,
-                getEnvVariables: options.getEnvVariables,
-                remotionRoot: options.remotionRoot,
-                entryPoint: options.userDefinedComponent,
-                publicDir: options.publicDir,
-                logLevel: options.logLevel,
-                getRenderQueue: options.getRenderQueue,
-                getRenderDefaults: options.getRenderDefaults,
-                getNumberOfAudioTags: options.getNumberOfAudioTags,
-                queueMethods: options.queueMethods,
-                gitSource: options.gitSource,
-                binariesDirectory: options.binariesDirectory,
-                getAudioLatencyHint: options.getAudioLatencyHint,
-                getExperimentalKeepAudioContextAlive: options.getExperimentalKeepAudioContextAlive,
-                getPreviewSampleRate: options.getPreviewSampleRate,
-                enableCrossSiteIsolation: options.enableCrossSiteIsolation,
-                getStudioRuntimeConfig: options.getStudioRuntimeConfig,
-                getDefaultCodingAgent: options.getDefaultCodingAgent,
-                getDefaultEditor: options.getDefaultEditor,
-                configFile: options.configFile,
-            });
-        })
-            .catch((err) => {
-            renderer_1.RenderInternals.Log.error({ indent: false, logLevel: options.logLevel }, `Error while calling ${request.url}`, err);
-            if (!response.headersSent) {
-                response.setHeader('content-type', 'application/json');
-                response.writeHead(500);
-            }
-            if (!response.writableEnded) {
-                response.end(JSON.stringify({
-                    err: err.message,
-                }));
-            }
-        });
-    });
+    }
+    const handleRequestBeforeReady = (_request, response) => {
+        response.writeHead(503);
+        response.end('Studio is starting...');
+    };
+    const server = node_http_1.default.createServer(handleRequestBeforeReady);
     const maxTries = 5;
+    let selectedPort = null;
     for (let i = 0; i < maxTries; i++) {
         try {
-            const { port, unlockPort, didUsePort } = await renderer_1.RenderInternals.getDesiredPort({
-                desiredPort,
-                from: 3000,
-                to: 3100,
-                hostsToTry: portConfig.hostsToTry,
-                onPortUnavailable,
-            });
-            if (didUsePort) {
-                unlockPort();
-                await Promise.all([
-                    new Promise((resolve) => {
-                        server.close(() => resolve());
-                    }),
-                    new Promise((resolve) => {
-                        compiler.close(() => resolve());
-                    }),
-                ]);
-                return {
-                    type: 'already-running',
-                    port,
-                };
-            }
-            const selectedPort = await new Promise((resolve, reject) => {
+            const { port, unlockPort } = portSelection;
+            selectedPort = await new Promise((resolve, reject) => {
                 renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel: options.logLevel }, `Binding server to host ${portConfig.host}, port ${port}`);
+                const onListening = () => {
+                    server.off('error', onError);
+                    unlockPort();
+                    resolve(port);
+                };
+                const onError = (error) => {
+                    server.off('listening', onListening);
+                    reject(error);
+                };
+                server.once('listening', onListening);
+                server.once('error', onError);
                 server.listen({
                     port,
                     host: portConfig.host,
                 });
-                server.on('listening', () => {
-                    resolve(port);
-                    return unlockPort();
-                });
-                server.on('error', (err) => {
-                    reject(err);
-                });
             });
-            return {
-                type: 'started',
-                port: selectedPort,
-                liveEventsServer,
-                close: async () => {
-                    server.closeAllConnections();
-                    await Promise.all([
-                        new Promise((resolve) => {
-                            server.close(() => {
-                                resolve();
-                            });
-                        }),
-                        new Promise((resolve) => {
-                            compiler.close(() => {
-                                resolve();
-                            });
-                        }),
-                    ]);
-                },
-            };
+            break;
         }
         catch (err) {
             if (!(err instanceof Error)) {
+                portSelection.unlockPort();
                 throw err;
             }
             const codedError = err;
             if (codedError.code === 'EADDRINUSE') {
+                portSelection.unlockPort();
                 renderer_1.RenderInternals.Log.error({ indent: false, logLevel: options.logLevel }, `Port ${codedError.port} is already in use. Trying another port...`);
+                if (i === maxTries - 1) {
+                    break;
+                }
+                portSelection = await renderer_1.RenderInternals.getDesiredPort({
+                    desiredPort,
+                    from: 3000,
+                    to: 3100,
+                    hostsToTry: portConfig.hostsToTry,
+                    onPortUnavailable,
+                });
+                if (portSelection.didUsePort) {
+                    portSelection.unlockPort();
+                    return {
+                        type: 'already-running',
+                        port: portSelection.port,
+                    };
+                }
             }
             else {
+                portSelection.unlockPort();
                 throw err;
             }
         }
     }
-    throw new Error(`Tried ${maxTries} times to find a free port. Giving up.`);
+    if (selectedPort === null) {
+        throw new Error(`Tried ${maxTries} times to find a free port. Giving up.`);
+    }
+    let compiler = null;
+    try {
+        const watchIgnorePlugin = new bundler_1.WatchIgnoreNextChangePlugin((...args) => {
+            renderer_1.RenderInternals.Log.trace({ indent: false, logLevel: options.logLevel }, ...args);
+        });
+        const configArgs = {
+            entry: options.entry,
+            userDefinedComponent: options.userDefinedComponent,
+            outDir: null,
+            environment: 'development',
+            bundlerOverride: options.bundlerOverride,
+            rspackOverride: options.rspackOverride,
+            webpackOverride: options === null || options === void 0 ? void 0 : options.webpackOverride,
+            remotionRoot: options.remotionRoot,
+            poll: options.poll,
+            extraPlugins: [watchIgnorePlugin],
+        };
+        if (options.rspack) {
+            const [, rspackConf] = await bundler_1.BundlerInternals.rspackConfig(configArgs);
+            compiler = bundler_1.BundlerInternals.createRspackCompiler(rspackConf);
+        }
+        else {
+            const [, webpackConf] = await bundler_1.BundlerInternals.webpackConfig(configArgs);
+            compiler = (0, bundler_1.webpack)(webpackConf);
+        }
+        (0, watch_ignore_next_change_1.setWatchIgnoreNextChangePlugin)(watchIgnorePlugin);
+        const wdmMiddleware = (0, dev_middleware_1.wdm)(compiler, options.logLevel);
+        const liveEventsServer = (0, live_events_1.makeLiveEventsRouter)(options.logLevel, () => {
+            const undoStack = (0, undo_stack_1.getUndoStack)();
+            const redoStack = (0, undo_stack_1.getRedoStack)();
+            return {
+                undoFile: undoStack.length > 0
+                    ? undoStack[undoStack.length - 1].filePath
+                    : null,
+                redoFile: redoStack.length > 0
+                    ? redoStack[redoStack.length - 1].filePath
+                    : null,
+            };
+        });
+        (0, hot_middleware_1.setupWebpackHmr)(compiler, options.logLevel, liveEventsServer);
+        compiler.hooks.done.tap('remotion-node-path-cache', () => {
+            (0, node_path_cache_1.clearNodePathCache)();
+        });
+        server.off('request', handleRequestBeforeReady);
+        server.on('request', (request, response) => {
+            if (options.enableCrossSiteIsolation) {
+                response.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+                response.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
+            }
+            new Promise((resolve) => {
+                wdmMiddleware(request, response, () => {
+                    resolve();
+                });
+            })
+                .then(() => {
+                return (0, routes_1.handleRoutes)({
+                    staticHash: options.staticHash,
+                    staticHashPrefix: options.staticHashPrefix,
+                    outputHash: options.outputHash,
+                    outputHashPrefix: options.outputHashPrefix,
+                    request: request,
+                    response,
+                    liveEventsServer,
+                    getCurrentInputProps: options.getCurrentInputProps,
+                    getEnvVariables: options.getEnvVariables,
+                    remotionRoot: options.remotionRoot,
+                    entryPoint: options.userDefinedComponent,
+                    publicDir: options.publicDir,
+                    logLevel: options.logLevel,
+                    getRenderQueue: options.getRenderQueue,
+                    getRenderDefaults: options.getRenderDefaults,
+                    getNumberOfAudioTags: options.getNumberOfAudioTags,
+                    queueMethods: options.queueMethods,
+                    gitSource: options.gitSource,
+                    binariesDirectory: options.binariesDirectory,
+                    getAudioLatencyHint: options.getAudioLatencyHint,
+                    getExperimentalKeepAudioContextAlive: options.getExperimentalKeepAudioContextAlive,
+                    getPreviewSampleRate: options.getPreviewSampleRate,
+                    enableCrossSiteIsolation: options.enableCrossSiteIsolation,
+                    getStudioRuntimeConfig: options.getStudioRuntimeConfig,
+                    getDefaultCodingAgent: options.getDefaultCodingAgent,
+                    getDefaultEditor: options.getDefaultEditor,
+                    configFile: options.configFile,
+                });
+            })
+                .catch((err) => {
+                renderer_1.RenderInternals.Log.error({ indent: false, logLevel: options.logLevel }, `Error while calling ${request.url}`, err);
+                if (!response.headersSent) {
+                    response.setHeader('content-type', 'application/json');
+                    response.writeHead(500);
+                }
+                if (!response.writableEnded) {
+                    response.end(JSON.stringify({
+                        err: err.message,
+                    }));
+                }
+            });
+        });
+        const initializedCompiler = compiler;
+        return {
+            type: 'started',
+            port: selectedPort,
+            liveEventsServer,
+            close: async () => {
+                server.closeAllConnections();
+                await Promise.all([
+                    new Promise((resolve) => {
+                        server.close(() => {
+                            resolve();
+                        });
+                    }),
+                    new Promise((resolve) => {
+                        initializedCompiler.close(() => {
+                            resolve();
+                        });
+                    }),
+                ]);
+            },
+        };
+    }
+    catch (error) {
+        server.closeAllConnections();
+        await Promise.all([
+            new Promise((resolve) => {
+                server.close(() => resolve());
+            }),
+            compiler
+                ? new Promise((resolve) => {
+                    compiler === null || compiler === void 0 ? void 0 : compiler.close(() => resolve());
+                })
+                : Promise.resolve(),
+        ]);
+        throw error;
+    }
 };
 exports.startServer = startServer;