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

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,16 +1,31 @@
 "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')
+const react_1 = require("react");
+const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
+exports.cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
     ? '⌘'
     : 'Ctrl';
 const container = {
     display: 'inline-block',
     marginLeft: 6,
     opacity: 0.6,
+    verticalAlign: 'middle',
 };
 const ShortcutHint = ({ keyToPress, cmdOrCtrl }) => {
-    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${cmdOrCtrlCharacter}+` : '', keyToPress.toUpperCase()] }));
+    const style = (0, react_1.useMemo)(() => {
+        if (keyToPress === '↵') {
+            return {
+                display: 'inline-block',
+                transform: `translateY(2px)`,
+            };
+        }
+        return {};
+    }, [keyToPress]);
+    if ((0, use_keybinding_1.areKeyboardShortcutsDisabled)()) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("span", { style: container, children: [cmdOrCtrl ? `${exports.cmdOrCtrlCharacter}` : '', (0, jsx_runtime_1.jsx)("span", { style: style, children: 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/file-existence-watchers.d.ts

@@ -0,0 +1,13 @@
+export declare const subscribeToFileExistenceWatchers: ({ file: relativeFile, remotionRoot, clientId, }: {
+    file: string;
+    remotionRoot: string;
+    clientId: string;
+}) => {
+    exists: boolean;
+};
+export declare const unsubscribeFromFileExistenceWatchers: ({ file, remotionRoot, clientId, }: {
+    file: string;
+    remotionRoot: string;
+    clientId: string;
+}) => void;
+export declare const unsubscribeClientFileExistenceWatchers: (clientId: string) => void;

package/dist/preview-server/file-existence-watchers.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsubscribeClientFileExistenceWatchers = exports.unsubscribeFromFileExistenceWatchers = exports.subscribeToFileExistenceWatchers = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+const file_watcher_1 = require("../file-watcher");
+const live_events_1 = require("./live-events");
+const fileExistenceWatchers = {};
+const subscribeToFileExistenceWatchers = ({ file: relativeFile, remotionRoot, clientId, }) => {
+    const file = node_path_1.default.resolve(remotionRoot, relativeFile);
+    const { unwatch, exists } = (0, file_watcher_1.installFileWatcher)({
+        file,
+        onChange: (type) => {
+            if (type === 'created') {
+                (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                    listener.sendEventToClient({
+                        type: 'watched-file-undeleted',
+                        // Must be relative file because that's what the client expects
+                        file: relativeFile,
+                    });
+                });
+            }
+            if (type === 'deleted') {
+                (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                    listener.sendEventToClient({
+                        type: 'watched-file-deleted',
+                        // Must be relative file because that's what the client expects
+                        file: relativeFile,
+                    });
+                });
+            }
+        },
+    });
+    if (!fileExistenceWatchers[clientId]) {
+        fileExistenceWatchers[clientId] = {};
+    }
+    fileExistenceWatchers[clientId][file] = unwatch;
+    return { exists };
+};
+exports.subscribeToFileExistenceWatchers = subscribeToFileExistenceWatchers;
+const unsubscribeFromFileExistenceWatchers = ({ file, remotionRoot, clientId, }) => {
+    var _a, _b;
+    const actualPath = node_path_1.default.resolve(remotionRoot, file);
+    if (!fileExistenceWatchers[clientId]) {
+        return;
+    }
+    (_b = (_a = fileExistenceWatchers[clientId])[actualPath]) === null || _b === void 0 ? void 0 : _b.call(_a);
+    delete fileExistenceWatchers[clientId][actualPath];
+};
+exports.unsubscribeFromFileExistenceWatchers = unsubscribeFromFileExistenceWatchers;
+const unsubscribeClientFileExistenceWatchers = (clientId) => {
+    if (!fileExistenceWatchers[clientId]) {
+        return;
+    }
+    Object.values(fileExistenceWatchers[clientId]).forEach((unwatch) => {
+        unwatch();
+    });
+    delete fileExistenceWatchers[clientId];
+};
+exports.unsubscribeClientFileExistenceWatchers = unsubscribeClientFileExistenceWatchers;

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 node_path_1 = __importDefault(require("node:path"));
+const getAbsolutePublicDir = ({ userPassedPublicDir, remotionRoot, }) => {
+    const publicDir = userPassedPublicDir
+        ? node_path_1.default.resolve(remotionRoot, userPassedPublicDir)
+        : node_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

@@ -4,23 +4,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPackageManager = exports.lockFilePaths = void 0;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
 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 existingPkgManagers = exports.lockFilePaths.filter((p) => fs_1.default.existsSync(path_1.default.join(remotionRoot, p.path)));
+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) => node_fs_1.default.existsSync(node_path_1.default.join(remotionRoot, p.path)));
     if (existingPkgManagers.length === 0) {
         return 'unknown';
     }

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

@@ -0,0 +1,9 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { ApiHandler } from './api-types';
+export declare const handleRequest: <Req, Res>({ remotionRoot, request, response, entryPoint, handler, }: {
+    remotionRoot: string;
+    request: IncomingMessage;
+    response: ServerResponse;
+    entryPoint: string;
+    handler: ApiHandler<Req, Res>;
+}) => Promise<void>;

package/dist/preview-server/handler.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRequest = void 0;
+const parse_body_1 = require("./parse-body");
+const handleRequest = async ({ remotionRoot, request, response, entryPoint, handler, }) => {
+    if (request.method === 'OPTIONS') {
+        response.statusCode = 200;
+        response.end();
+        return;
+    }
+    response.setHeader('content-type', 'application/json');
+    response.writeHead(200);
+    try {
+        const body = (await (0, parse_body_1.parseRequestBody)(request));
+        const outputData = await handler({
+            entryPoint,
+            remotionRoot,
+            request,
+            response,
+            input: body,
+        });
+        response.end(JSON.stringify({
+            success: true,
+            data: outputData,
+        }));
+    }
+    catch (err) {
+        response.end(JSON.stringify({
+            success: false,
+            error: err.message,
+        }));
+    }
+};
+exports.handleRequest = handleRequest;

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * https://github.com/webpack-contrib/webpack-hot-middleware#readme
  * and rewritten in TypeScript. This file is MIT licensed
  */
+const ansi_split_1 = require("../../ansi/ansi-split");
 const process_update_1 = require("./process-update");
-const strip_ansi_1 = require("./strip-ansi");
 const types_1 = require("./types");
 if (typeof window === 'undefined') {
     // do nothing
@@ -107,7 +107,7 @@ function createReporter() {
         }
         const newProblems = obj[type]
             .map((msg) => {
-            return (0, strip_ansi_1.stripAnsi)(msg);
+            return (0, ansi_split_1.stripAnsi)(msg);
         })
             .join('\n');
         if (previousProblems === newProblems) {

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

@@ -4,5 +4,99 @@
  * and rewritten in TypeScript. This file is MIT licensed
  */
 import type { webpack } from '@remotion/bundler';
-import type { IncomingMessage, ServerResponse } from 'http';
+import type { IncomingMessage, ServerResponse } from 'node: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

@@ -6,12 +6,12 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpackHotMiddleware = void 0;
-const url_1 = require("url");
+const node_url_1 = require("node:url");
 const log_1 = require("../../log");
 const types_1 = require("./types");
 const pathMatch = function (url, path) {
     try {
-        return (0, url_1.parse)(url).pathname === path;
+        return (0, node_url_1.parse)(url).pathname === path;
     }
     catch (e) {
         return false;
@@ -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.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="node" />
-import type { IncomingMessage, ServerResponse } from 'http';
+import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { EventSourceEvent } from '../event-source-events';
 export declare type LiveEventsServer = {
     sendEventToClient: (event: EventSourceEvent) => void;
     router: (request: IncomingMessage, response: ServerResponse) => void;
 };
 export declare const makeLiveEventsRouter: () => LiveEventsServer;
+export declare const waitForLiveEventsListener: () => Promise<LiveEventsServer>;
+export declare const setLiveEventsListener: (listener: LiveEventsServer) => void;

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeLiveEventsRouter = void 0;
+exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = void 0;
+const server_ready_comment_1 = require("../server-ready-comment");
+const file_existence_watchers_1 = require("./file-existence-watchers");
 const serializeMessage = (message) => {
     return `data: ${JSON.stringify(message)}\n\n`;
 };
@@ -13,15 +15,24 @@ const makeLiveEventsRouter = () => {
             'cache-control': 'no-cache',
         };
         response.writeHead(200, headers);
-        response.write(serializeMessage({ type: 'init' }));
+        if (request.method === 'OPTIONS') {
+            response.end();
+            return;
+        }
         const clientId = String(Math.random());
+        response.write(serializeMessage({ type: 'init', clientId }));
         const newClient = {
             id: clientId,
             response,
         };
         clients.push(newClient);
         request.on('close', () => {
+            (0, file_existence_watchers_1.unsubscribeClientFileExistenceWatchers)(clientId);
             clients = clients.filter((client) => client.id !== clientId);
+            // If all clients disconnected, print a comment so user can easily restart it.
+            if (clients.length === 0) {
+                (0, server_ready_comment_1.printServerReadyComment)();
+            }
         });
     };
     const sendEventToClient = (event) => {
@@ -35,3 +46,21 @@ const makeLiveEventsRouter = () => {
     };
 };
 exports.makeLiveEventsRouter = makeLiveEventsRouter;
+let liveEventsListener = null;
+const waiters = [];
+const waitForLiveEventsListener = () => {
+    if (liveEventsListener) {
+        return Promise.resolve(liveEventsListener);
+    }
+    return new Promise((resolve) => {
+        waiters.push((list) => {
+            resolve(list);
+        });
+    });
+};
+exports.waitForLiveEventsListener = waitForLiveEventsListener;
+const setLiveEventsListener = (listener) => {
+    liveEventsListener = listener;
+    waiters.forEach((w) => w(listener));
+};
+exports.setLiveEventsListener = setLiveEventsListener;

package/dist/preview-server/parse-body.d.ts

@@ -0,0 +1,2 @@
+import type { IncomingMessage } from 'node:http';
+export declare const parseRequestBody: (req: IncomingMessage) => Promise<unknown>;

package/dist/preview-server/parse-body.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseRequestBody = void 0;
+const parseRequestBody = async (req) => {
+    const body = await new Promise((_resolve) => {
+        let data = '';
+        req.on('data', (chunk) => {
+            data += chunk;
+        });
+        req.on('end', () => {
+            _resolve(data.toString());
+        });
+    });
+    return JSON.parse(body);
+};
+exports.parseRequestBody = parseRequestBody;