@remotion/cli 3.0.26 → 3.0.27

package/dist/event-source-events.d.ts

@@ -0,0 +1,6 @@
+export declare type EventSourceEvent = {
+    type: 'new-input-props';
+    newProps: object;
+} | {
+    type: 'init';
+};

package/dist/event-source-events.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/event-source.d.ts

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

package/dist/event-source.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openEventSource = void 0;
+let source = null;
+const openEventSource = () => {
+    source = new EventSource('/events');
+    source.addEventListener('message', (event) => {
+        const newEvent = JSON.parse(event.data);
+        if (newEvent.type === 'new-input-props') {
+            window.location.reload();
+        }
+    });
+};
+exports.openEventSource = openEventSource;

package/dist/get-cli-options.js

@@ -159,7 +159,7 @@ const getCliOptions = async (options) => {
         shouldOutputImageSequence,
         codec,
         overwrite: remotion_1.Internals.getShouldOverwrite(),
-        inputProps: (0, get_input_props_1.getInputProps)(),
+        inputProps: (0, get_input_props_1.getInputProps)(() => undefined),
         envVariables: await (0, get_env_1.getEnvironmentVariables)(),
         quality: remotion_1.Internals.getQuality(),
         absoluteOutputFile: outputFile

package/dist/get-input-props.d.ts

@@ -1 +1 @@
-export declare const getInputProps: () => object;
+export declare const getInputProps: (onUpdate: (newProps: object) => void) => object;

package/dist/get-input-props.js

@@ -9,7 +9,7 @@ const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
-const getInputProps = () => {
+const getInputProps = (onUpdate) => {
     if (!parse_command_line_1.parsedCli.props) {
         return {};
     }
@@ -17,6 +17,15 @@ const getInputProps = () => {
     try {
         if (fs_1.default.existsSync(jsonFile)) {
             const rawJsonData = fs_1.default.readFileSync(jsonFile, 'utf-8');
+            fs_1.default.watchFile(jsonFile, { interval: 100 }, () => {
+                try {
+                    onUpdate(JSON.parse(fs_1.default.readFileSync(jsonFile, 'utf-8')));
+                    log_1.Log.info(`Updated input props from ${jsonFile}.`);
+                }
+                catch (err) {
+                    log_1.Log.error(`${jsonFile} contains invalid JSON. Did not apply new input props.`);
+                }
+            });
             return JSON.parse(rawJsonData);
         }
         return JSON.parse(parse_command_line_1.parsedCli.props);

package/dist/preview-server/live-events.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="node" />
+import type { IncomingMessage, ServerResponse } from '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;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeLiveEventsRouter = void 0;
+const serializeMessage = (message) => {
+    return `data: ${JSON.stringify(message)}\n\n`;
+};
+const makeLiveEventsRouter = () => {
+    let clients = [];
+    const router = (request, response) => {
+        const headers = {
+            'content-type': 'text/event-stream',
+            connection: 'keep-alive',
+            'cache-control': 'no-cache',
+        };
+        response.writeHead(200, headers);
+        response.write(serializeMessage({ type: 'init' }));
+        const clientId = String(Math.random());
+        const newClient = {
+            id: clientId,
+            response,
+        };
+        clients.push(newClient);
+        request.on('close', () => {
+            clients = clients.filter((client) => client.id !== clientId);
+        });
+    };
+    const sendEventToClient = (event) => {
+        clients.forEach((client) => {
+            client.response.write(serializeMessage(event));
+        });
+    };
+    return {
+        sendEventToClient,
+        router,
+    };
+};
+exports.makeLiveEventsRouter = makeLiveEventsRouter;

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

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

package/dist/preview-server/routes.js

@@ -24,12 +24,12 @@ const static404 = (response) => {
     response.writeHead(404);
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
 };
-const handleFallback = async (hash, _, response) => {
+const handleFallback = async (hash, _, response, getCurrentInputProps) => {
     const edit = await editorGuess;
     const displayName = (0, open_in_editor_1.getDisplayNameForEditor)(edit[0]);
     response.setHeader('content-type', 'text/html');
     response.writeHead(200);
-    response.end(bundler_1.BundlerInternals.indexHtml(hash, '/', displayName));
+    response.end(bundler_1.BundlerInternals.indexHtml(hash, '/', displayName, getCurrentInputProps()));
 };
 const handleProjectInfo = async (_, response) => {
     const data = await (0, project_info_1.getProjectInfo)();
@@ -99,7 +99,7 @@ const handleFavicon = (_, response) => {
     const readStream = (0, fs_1.createReadStream)(filePath);
     readStream.pipe(response);
 };
-const handleRoutes = ({ hash, hashPrefix, request, response, }) => {
+const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/update') {
         return handleUpdate(request, response);
@@ -116,6 +116,9 @@ const handleRoutes = ({ hash, hashPrefix, request, response, }) => {
     if (url.pathname === '/remotion.png') {
         return handleFavicon(request, response);
     }
+    if (url.pathname === '/events') {
+        return liveEventsServer.router(request, response);
+    }
     if (url.pathname.startsWith(hash)) {
         const root = path_1.default.join(process.cwd(), 'public');
         return (0, serve_static_1.serveStatic)(root, hash, request, response);
@@ -123,6 +126,6 @@ const handleRoutes = ({ hash, hashPrefix, request, response, }) => {
     if (url.pathname.startsWith(hashPrefix)) {
         return static404(response);
     }
-    return handleFallback(hash, request, response);
+    return handleFallback(hash, request, response, getCurrentInputProps);
 };
 exports.handleRoutes = handleRoutes;

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

@@ -1,8 +1,12 @@
 import type { WebpackOverrideFn } from 'remotion';
-export declare const startServer: (entry: string, userDefinedComponent: string, options?: {
+import type { LiveEventsServer } from './live-events';
+export declare const startServer: (entry: string, userDefinedComponent: string, options: {
     webpackOverride?: WebpackOverrideFn;
-    inputProps?: object;
+    getCurrentInputProps: () => object;
     envVariables?: Record<string, string>;
     port: number | null;
     maxTimelineTracks?: number;
-}) => Promise<number>;
+}) => Promise<{
+    port: number;
+    liveEventsServer: LiveEventsServer;
+}>;

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

@@ -14,9 +14,10 @@ const path_1 = __importDefault(require("path"));
 const remotion_1 = require("remotion");
 const dev_middleware_1 = require("./dev-middleware");
 const hot_middleware_1 = require("./hot-middleware");
+const live_events_1 = require("./live-events");
 const routes_1 = require("./routes");
 const startServer = async (entry, userDefinedComponent, options) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const tmpDir = await fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-graphics'));
     const config = bundler_1.BundlerInternals.webpackConfig({
         entry,
@@ -24,9 +25,8 @@ const startServer = async (entry, userDefinedComponent, options) => {
         outDir: tmpDir,
         environment: 'development',
         webpackOverride: (_a = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _a !== void 0 ? _a : remotion_1.Internals.getWebpackOverrideFn(),
-        inputProps: (_b = options === null || options === void 0 ? void 0 : options.inputProps) !== null && _b !== void 0 ? _b : {},
-        envVariables: (_c = options === null || options === void 0 ? void 0 : options.envVariables) !== null && _c !== void 0 ? _c : {},
-        maxTimelineTracks: (_d = options === null || options === void 0 ? void 0 : options.maxTimelineTracks) !== null && _d !== void 0 ? _d : 15,
+        envVariables: (_b = options === null || options === void 0 ? void 0 : options.envVariables) !== null && _b !== void 0 ? _b : {},
+        maxTimelineTracks: (_c = options === null || options === void 0 ? void 0 : options.maxTimelineTracks) !== null && _c !== void 0 ? _c : 15,
         entryPoints: [
             require.resolve('./hot-middleware/client'),
             require.resolve('./error-overlay/entry-basic.js'),
@@ -37,6 +37,7 @@ const startServer = async (entry, userDefinedComponent, options) => {
     const hash = `${hashPrefix}${crypto_1.default.randomBytes(6).toString('hex')}`;
     const wdmMiddleware = (0, dev_middleware_1.wdm)(compiler);
     const whm = (0, hot_middleware_1.webpackHotMiddleware)(compiler);
+    const liveEventsServer = (0, live_events_1.makeLiveEventsRouter)();
     const server = http_1.default.createServer((request, response) => {
         new Promise((resolve) => {
             wdmMiddleware(request, response, () => {
@@ -51,7 +52,14 @@ const startServer = async (entry, userDefinedComponent, options) => {
             });
         })
             .then(() => {
-            (0, routes_1.handleRoutes)({ hash, hashPrefix, request, response });
+            (0, routes_1.handleRoutes)({
+                hash,
+                hashPrefix,
+                request,
+                response,
+                liveEventsServer,
+                getCurrentInputProps: options.getCurrentInputProps,
+            });
         })
             .catch((err) => {
             response.setHeader('content-type', 'application/json');
@@ -61,9 +69,9 @@ const startServer = async (entry, userDefinedComponent, options) => {
             }));
         });
     });
-    const desiredPort = (_e = options === null || options === void 0 ? void 0 : options.port) !== null && _e !== void 0 ? _e : undefined;
+    const desiredPort = (_d = options === null || options === void 0 ? void 0 : options.port) !== null && _d !== void 0 ? _d : undefined;
     const port = await renderer_1.RenderInternals.getDesiredPort(desiredPort, 3000, 3100);
     server.listen(port);
-    return port;
+    return { port, liveEventsServer };
 };
 exports.startServer = startServer;

package/dist/preview.js

@@ -14,6 +14,22 @@ const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
 const start_server_1 = require("./preview-server/start-server");
 const noop = () => undefined;
+let liveEventsListener = null;
+const waiters = [];
+const setLiveEventsListener = (listener) => {
+    liveEventsListener = listener;
+    waiters.forEach((w) => w(listener));
+};
+const waitForLiveEventsListener = () => {
+    if (liveEventsListener) {
+        return Promise.resolve(liveEventsListener);
+    }
+    return new Promise((resolve) => {
+        waiters.push((list) => {
+            resolve(list);
+        });
+    });
+};
 const previewCommand = async () => {
     const file = parse_command_line_1.parsedCli._[1];
     if (!file) {
@@ -25,14 +41,23 @@ const previewCommand = async () => {
     const { port: desiredPort } = parse_command_line_1.parsedCli;
     const fullPath = path_1.default.join(process.cwd(), file);
     await (0, initialize_render_cli_1.initializeRenderCli)('preview');
-    const inputProps = (0, get_input_props_1.getInputProps)();
+    let inputProps = (0, get_input_props_1.getInputProps)((newProps) => {
+        waitForLiveEventsListener().then((listener) => {
+            inputProps = newProps;
+            listener.sendEventToClient({
+                type: 'new-input-props',
+                newProps,
+            });
+        });
+    });
     const envVariables = await (0, get_env_1.getEnvironmentVariables)();
-    const port = await (0, start_server_1.startServer)(path_1.default.resolve(__dirname, 'previewEntry.js'), fullPath, {
-        inputProps,
+    const { port, liveEventsServer } = await (0, start_server_1.startServer)(path_1.default.resolve(__dirname, 'previewEntry.js'), fullPath, {
+        getCurrentInputProps: () => inputProps,
         envVariables,
         port: desiredPort,
         maxTimelineTracks: remotion_1.Internals.getMaxTimelineTracks(),
     });
+    setLiveEventsListener(liveEventsServer);
     (0, better_opn_1.default)(`http://localhost:${port}`);
     await new Promise(noop);
 };

package/dist/previewEntry.js

@@ -8,6 +8,7 @@ const client_1 = __importDefault(require("react-dom/client"));
 const remotion_1 = require("remotion");
 require("../styles/styles.css");
 const Editor_1 = require("./editor/components/Editor");
+const event_source_1 = require("./event-source");
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(null, '#1f2428'));
 const content = ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { children: (0, jsx_runtime_1.jsx)(Editor_1.Editor, {}) }));
 if (client_1.default.createRoot) {
@@ -16,3 +17,4 @@ if (client_1.default.createRoot) {
 else {
     client_1.default.render((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { children: (0, jsx_runtime_1.jsx)(Editor_1.Editor, {}) }), remotion_1.Internals.getPreviewDomElement());
 }
+(0, event_source_1.openEventSource)();

package/dist/setup-cache.js

@@ -9,10 +9,10 @@ const progress_bar_1 = require("./progress-bar");
 const bundleOnCli = async (fullPath, steps) => {
     var _a;
     const shouldCache = remotion_1.Internals.getWebpackCaching();
-    const cacheExistedBefore = bundler_1.BundlerInternals.cacheExists('production', null);
+    const cacheExistedBefore = bundler_1.BundlerInternals.cacheExists('production');
     if (cacheExistedBefore && !shouldCache) {
         log_1.Log.info('🧹 Cache disabled but found. Deleting... ');
-        await bundler_1.BundlerInternals.clearCache('production', null);
+        await bundler_1.BundlerInternals.clearCache('production');
     }
     const bundleStartTime = Date.now();
     const bundlingProgress = (0, progress_bar_1.createOverwriteableCliOutput)((0, parse_command_line_1.quietFlagProvided)());
@@ -32,7 +32,7 @@ const bundleOnCli = async (fullPath, steps) => {
         doneIn: Date.now() - bundleStartTime,
     }) + '\n');
     log_1.Log.verbose('Bundled under', bundled);
-    const cacheExistedAfter = bundler_1.BundlerInternals.cacheExists('production', null);
+    const cacheExistedAfter = bundler_1.BundlerInternals.cacheExists('production');
     if (cacheExistedAfter && !cacheExistedBefore) {
         log_1.Log.info('⚡️ Cached bundle. Subsequent renders will be faster.');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.0.26",
+	"version": "3.0.27",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -23,15 +23,15 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.0.26",
-		"@remotion/media-utils": "3.0.26",
-		"@remotion/player": "3.0.26",
-		"@remotion/renderer": "3.0.26",
+		"@remotion/bundler": "3.0.27",
+		"@remotion/media-utils": "3.0.27",
+		"@remotion/player": "3.0.27",
+		"@remotion/renderer": "3.0.27",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
-		"remotion": "3.0.26",
+		"remotion": "3.0.27",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "790e9bb2d66f2fe97efc209237cc57d7cad2e793"
+	"gitHead": "16f54241ee403a938c1af372bebc4ac83a4a24f0"
 }