@remotion/studio-server 4.0.429 → 4.0.430

package/dist/codemods/update-sequence-props.d.ts

@@ -1,8 +1,12 @@
 import { type EnumPath } from '@remotion/studio-shared';
-export declare const updateSequenceProps: ({ input, targetLine, key, value, enumPaths, }: {
+export declare const updateSequenceProps: ({ input, targetLine, key, value, enumPaths, defaultValue, }: {
     input: string;
     targetLine: number;
     key: string;
     value: unknown;
     enumPaths: EnumPath[];
-}) => Promise<string>;
+    defaultValue: unknown;
+}) => Promise<{
+    output: string;
+    oldValueString: string;
+}>;

package/dist/codemods/update-sequence-props.js

@@ -37,17 +37,20 @@ exports.updateSequenceProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const parse_ast_1 = require("./parse-ast");
-const updateSequenceProps = async ({ input, targetLine, key, value, enumPaths, }) => {
+const updateSequenceProps = async ({ input, targetLine, key, value, enumPaths, defaultValue, }) => {
     const ast = (0, parse_ast_1.parseAst)(input);
     let found = false;
+    let oldValueString = '';
+    const isDefault = defaultValue !== null &&
+        JSON.stringify(value) === JSON.stringify(defaultValue);
     recast.types.visit(ast, {
         visitJSXOpeningElement(path) {
-            var _a;
+            var _a, _b;
             const { node } = path;
             if (!node.loc || node.loc.start.line !== targetLine) {
                 return this.traverse(path);
             }
-            const attr = (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.find((a) => {
+            const attrIndex = (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.findIndex((a) => {
                 if (a.type === 'JSXSpreadAttribute') {
                     return false;
                 }
@@ -56,12 +59,46 @@ const updateSequenceProps = async ({ input, targetLine, key, value, enumPaths, }
                 }
                 return a.name.name === key;
             });
-            if (!attr || attr.type === 'JSXSpreadAttribute') {
-                throw new Error(`Could not find attribute "${key}" on the JSX element at line ${targetLine}`);
+            const attr = attrIndex !== undefined && attrIndex !== -1
+                ? (_b = node.attributes) === null || _b === void 0 ? void 0 : _b[attrIndex]
+                : undefined;
+            if (attr && attr.type !== 'JSXSpreadAttribute' && attr.value) {
+                const printed = recast.print(attr.value).code;
+                // Strip JSX expression container braces, e.g. "{30}" -> "30"
+                oldValueString =
+                    printed.startsWith('{') && printed.endsWith('}')
+                        ? printed.slice(1, -1)
+                        : printed;
+            }
+            else if (attr && attr.type !== 'JSXSpreadAttribute' && !attr.value) {
+                // JSX shorthand like `loop` (no value) is implicitly `true`
+                oldValueString = 'true';
+            }
+            else if (!attr && defaultValue !== null) {
+                oldValueString = JSON.stringify(defaultValue);
+            }
+            if (isDefault) {
+                if (attr && attr.type !== 'JSXSpreadAttribute' && node.attributes) {
+                    node.attributes.splice(attrIndex, 1);
+                }
+                found = true;
+                return this.traverse(path);
             }
             const parsed = (0, parse_ast_1.parseAst)(`a = ${(0, studio_shared_1.stringifyDefaultProps)({ props: value, enumPaths })}`)
                 .program.body[0].expression.right;
-            attr.value = recast.types.builders.jsxExpressionContainer(parsed);
+            const newValue = value === true
+                ? null
+                : recast.types.builders.jsxExpressionContainer(parsed);
+            if (!attr || attr.type === 'JSXSpreadAttribute') {
+                const newAttr = recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(key), newValue);
+                if (!node.attributes) {
+                    node.attributes = [];
+                }
+                node.attributes.push(newAttr);
+            }
+            else {
+                attr.value = newValue;
+            }
             found = true;
             return this.traverse(path);
         },
@@ -92,6 +129,6 @@ const updateSequenceProps = async ({ input, targetLine, key, value, enumPaths, }
         plugins: [],
         endOfLine: 'auto',
     });
-    return prettified;
+    return { output: prettified, oldValueString };
 };
 exports.updateSequenceProps = updateSequenceProps;

package/dist/helpers/get-installed-dependencies.d.ts

@@ -1,6 +1,14 @@
+type DepsWithVersions = {
+    dependencies: Record<string, string>;
+    devDependencies: Record<string, string>;
+    optionalDependencies: Record<string, string>;
+    peerDependencies: Record<string, string>;
+};
+export declare const getInstalledDependenciesWithVersions: (remotionRoot: string) => DepsWithVersions;
 export declare const getInstalledDependencies: (remotionRoot: string) => {
     dependencies: string[];
     devDependencies: string[];
     optionalDependencies: string[];
     peerDependencies: string[];
 };
+export {};

package/dist/helpers/get-installed-dependencies.js

@@ -3,22 +3,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInstalledDependencies = void 0;
+exports.getInstalledDependencies = exports.getInstalledDependenciesWithVersions = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
-const getInstalledDependencies = (remotionRoot) => {
+const getInstalledDependenciesWithVersions = (remotionRoot) => {
     var _a, _b, _c, _d;
     const packageJsonFilePath = node_path_1.default.join(remotionRoot, 'package.json');
     const packageJson = JSON.parse(node_fs_1.default.readFileSync(packageJsonFilePath, 'utf-8'));
-    const dependencies = Object.keys((_a = packageJson.dependencies) !== null && _a !== void 0 ? _a : {});
-    const devDependencies = Object.keys((_b = packageJson.devDependencies) !== null && _b !== void 0 ? _b : {});
-    const optionalDependencies = Object.keys((_c = packageJson.optionalDependencies) !== null && _c !== void 0 ? _c : {});
-    const peerDependencies = Object.keys((_d = packageJson.peerDependencies) !== null && _d !== void 0 ? _d : {});
     return {
-        dependencies,
-        devDependencies,
-        optionalDependencies,
-        peerDependencies,
+        dependencies: (_a = packageJson.dependencies) !== null && _a !== void 0 ? _a : {},
+        devDependencies: (_b = packageJson.devDependencies) !== null && _b !== void 0 ? _b : {},
+        optionalDependencies: (_c = packageJson.optionalDependencies) !== null && _c !== void 0 ? _c : {},
+        peerDependencies: (_d = packageJson.peerDependencies) !== null && _d !== void 0 ? _d : {},
+    };
+};
+exports.getInstalledDependenciesWithVersions = getInstalledDependenciesWithVersions;
+const getInstalledDependencies = (remotionRoot) => {
+    const deps = (0, exports.getInstalledDependenciesWithVersions)(remotionRoot);
+    return {
+        dependencies: Object.keys(deps.dependencies),
+        devDependencies: Object.keys(deps.devDependencies),
+        optionalDependencies: Object.keys(deps.optionalDependencies),
+        peerDependencies: Object.keys(deps.peerDependencies),
     };
 };
 exports.getInstalledDependencies = getInstalledDependencies;

package/dist/hyperlinks/is-supported.d.ts

@@ -0,0 +1 @@
+export declare function supportsHyperlink(): false | string;

package/dist/hyperlinks/is-supported.js

@@ -0,0 +1,82 @@
+"use strict";
+// From https://github.com/jamestalmage/supports-hyperlinks/blob/master/index.js
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.supportsHyperlink = supportsHyperlink;
+// MIT License
+// Copyright (c) James Talmage <james@talmage.io> (github.com/jamestalmage)
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+const renderer_1 = require("@remotion/renderer");
+function parseVersion(versionString) {
+    if (/^\d{3,4}$/.test(versionString)) {
+        // Env var doesn't always use dots. example: 4601 => 46.1.0
+        const m = /(\d{1,2})(\d{2})/.exec(versionString) || [];
+        return {
+            major: 0,
+            minor: parseInt(m[1], 10),
+            patch: parseInt(m[2], 10),
+        };
+    }
+    const versions = (versionString || '').split('.').map((n) => parseInt(n, 10));
+    return {
+        major: versions[0],
+        minor: versions[1],
+        patch: versions[2],
+    };
+}
+function supportsHyperlink() {
+    const { CI, NETLIFY, TEAMCITY_VERSION, TERM_PROGRAM, TERM_PROGRAM_VERSION, VTE_VERSION, } = process.env;
+    // Netlify does not run a TTY, it does not need `supportsColor` check
+    if (NETLIFY) {
+        return 'Click';
+    }
+    // If they specify no colors, they probably don't want hyperlinks.
+    if (!renderer_1.RenderInternals.isColorSupported()) {
+        return false;
+    }
+    if (process.platform === 'win32') {
+        return false;
+    }
+    if (CI) {
+        return false;
+    }
+    if (TEAMCITY_VERSION) {
+        return false;
+    }
+    if (TERM_PROGRAM) {
+        const version = parseVersion(TERM_PROGRAM_VERSION || '');
+        switch (TERM_PROGRAM) {
+            case 'iTerm.app':
+                if (version.major === 3) {
+                    return version.minor >= 1 ? 'Cmd+Click' : false;
+                }
+                return version.major > 3 ? 'Cmd+Click' : false;
+            case 'WezTerm':
+                return version.major >= 20200620 ? 'Click' : false;
+            case 'vscode':
+                // Cursor is at v0
+                if (version.major === 0) {
+                    return process.platform === 'darwin' ? 'Option+Click' : 'Ctrl+Click';
+                }
+                return version.major > 1 ||
+                    (version.major === 1 && version.minor >= 72)
+                    ? process.platform === 'darwin'
+                        ? 'Option+Click'
+                        : 'Ctrl+Click'
+                    : false;
+            // No default
+        }
+    }
+    if (VTE_VERSION) {
+        // 0.50.0 was supposed to support hyperlinks, but throws a segfault
+        if (VTE_VERSION === '0.50.0') {
+            return false;
+        }
+        const version = parseVersion(VTE_VERSION);
+        return version.major > 0 || version.minor >= 50
+            ? 'Click'
+            : false;
+    }
+    return false;
+}

package/dist/hyperlinks/make-link.d.ts

@@ -0,0 +1,5 @@
+export declare const makeHyperlink: ({ text, url, fallback, }: {
+    text: string | ((clickInstruction: string) => string);
+    url: string;
+    fallback: string;
+}) => string;

package/dist/hyperlinks/make-link.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeHyperlink = void 0;
+const is_supported_1 = require("./is-supported");
+const OSC = '\u001B]';
+const SEP = ';';
+const BEL = '\u0007';
+const makeHyperlink = ({ text, url, fallback, }) => {
+    const supports = (0, is_supported_1.supportsHyperlink)();
+    if (!supports) {
+        return fallback;
+    }
+    const label = typeof text === 'function' ? text(supports) : text;
+    return [OSC, '8', SEP, SEP, url, BEL, label, OSC, '8', SEP, SEP, BEL].join('');
+};
+exports.makeHyperlink = makeHyperlink;

package/dist/index.d.ts

@@ -83,6 +83,12 @@ export declare const StudioServerInternals: {
         optionalDependencies: string[];
         peerDependencies: string[];
     };
+    getInstalledDependenciesWithVersions: (remotionRoot: string) => {
+        dependencies: Record<string, string>;
+        devDependencies: Record<string, string>;
+        optionalDependencies: Record<string, string>;
+        peerDependencies: Record<string, string>;
+    };
     getInstallCommand: ({ manager, packages, version, additionalArgs, }: {
         manager: import("@remotion/studio-shared").PackageManager;
         packages: string[];

package/dist/index.js

@@ -30,6 +30,7 @@ exports.StudioServerInternals = {
     formatBytes: studio_shared_1.formatBytes,
     parseAndApplyCodemod: duplicate_composition_1.parseAndApplyCodemod,
     getInstalledDependencies: get_installed_dependencies_1.getInstalledDependencies,
+    getInstalledDependenciesWithVersions: get_installed_dependencies_1.getInstalledDependenciesWithVersions,
     getInstallCommand: install_command_1.getInstallCommand,
     addCompletedClientRender: client_render_queue_1.addCompletedClientRender,
     getCompletedClientRenders: client_render_queue_1.getCompletedClientRenders,

package/dist/preview-server/__tests__/multiple-lockfiles.test.d.ts

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

package/dist/preview-server/__tests__/multiple-lockfiles.test.js

@@ -0,0 +1,64 @@
+'use strict';
+var __importDefault =
+	(this && this.__importDefault) ||
+	function (mod) {
+		return mod && mod.__esModule ? mod : {default: mod};
+	};
+Object.defineProperty(exports, '__esModule', {value: true});
+const bun_test_1 = require('bun:test');
+const node_fs_1 = __importDefault(require('node:fs'));
+const node_os_1 = __importDefault(require('node:os'));
+const node_path_1 = __importDefault(require('node:path'));
+const get_package_manager_1 = require('../get-package-manager');
+(0, bun_test_1.describe)('getPackageManager multiple lockfiles', () => {
+	let tempDir;
+	(0, bun_test_1.beforeEach)(() => {
+		tempDir = node_fs_1.default.mkdtempSync(
+			node_path_1.default.join(node_os_1.default.tmpdir(), 'remotion-test-'),
+		);
+	});
+	(0, bun_test_1.afterEach)(() => {
+		node_fs_1.default.rmSync(tempDir, {recursive: true, force: true});
+	});
+	(0, bun_test_1.test)(
+		'should not throw error when multiple lockfiles are detected',
+		() => {
+			node_fs_1.default.writeFileSync(
+				node_path_1.default.join(tempDir, 'package-lock.json'),
+				'{}',
+			);
+			node_fs_1.default.writeFileSync(
+				node_path_1.default.join(tempDir, 'bun.lock'),
+				'',
+			);
+			// Should not throw
+			const manager = (0, get_package_manager_1.getPackageManager)(
+				tempDir,
+				undefined,
+				0,
+			);
+			// Should return one of them (usually the first one in the list, which is npm)
+			(0, bun_test_1.expect)(manager).not.toBe('unknown');
+			if (typeof manager !== 'string') {
+				(0, bun_test_1.expect)(['npm', 'bun']).toContain(manager.manager);
+			}
+		},
+	);
+	(0, bun_test_1.test)(
+		'should return npm if only package-lock.json exists',
+		() => {
+			node_fs_1.default.writeFileSync(
+				node_path_1.default.join(tempDir, 'package-lock.json'),
+				'{}',
+			);
+			const manager = (0, get_package_manager_1.getPackageManager)(
+				tempDir,
+				undefined,
+				0,
+			);
+			if (typeof manager !== 'string') {
+				(0, bun_test_1.expect)(manager.manager).toBe('npm');
+			}
+		},
+	);
+});

package/dist/preview-server/api-routes.js

@@ -5,7 +5,6 @@ const add_render_1 = require("./routes/add-render");
 const apply_codemod_1 = require("./routes/apply-codemod");
 const apply_visual_control_change_1 = require("./routes/apply-visual-control-change");
 const can_update_default_props_1 = require("./routes/can-update-default-props");
-const can_update_sequence_props_1 = require("./routes/can-update-sequence-props");
 const cancel_render_1 = require("./routes/cancel-render");
 const delete_static_file_1 = require("./routes/delete-static-file");
 const install_dependency_1 = require("./routes/install-dependency");
@@ -15,7 +14,9 @@ const remove_render_1 = require("./routes/remove-render");
 const restart_studio_1 = require("./routes/restart-studio");
 const save_sequence_props_1 = require("./routes/save-sequence-props");
 const subscribe_to_file_existence_1 = require("./routes/subscribe-to-file-existence");
+const subscribe_to_sequence_props_1 = require("./routes/subscribe-to-sequence-props");
 const unsubscribe_from_file_existence_1 = require("./routes/unsubscribe-from-file-existence");
+const unsubscribe_from_sequence_props_1 = require("./routes/unsubscribe-from-sequence-props");
 const update_available_1 = require("./routes/update-available");
 const update_default_props_1 = require("./routes/update-default-props");
 exports.allApiRoutes = {
@@ -29,7 +30,8 @@ exports.allApiRoutes = {
     '/api/apply-visual-control-change': apply_visual_control_change_1.applyVisualControlHandler,
     '/api/apply-codemod': apply_codemod_1.applyCodemodHandler,
     '/api/can-update-default-props': can_update_default_props_1.canUpdateDefaultPropsHandler,
-    '/api/can-update-sequence-props': can_update_sequence_props_1.canUpdateSequencePropsHandler,
+    '/api/subscribe-to-sequence-props': subscribe_to_sequence_props_1.subscribeToSequenceProps,
+    '/api/unsubscribe-from-sequence-props': unsubscribe_from_sequence_props_1.unsubscribeFromSequenceProps,
     '/api/save-sequence-props': save_sequence_props_1.saveSequencePropsHandler,
     '/api/update-available': update_available_1.handleUpdate,
     '/api/project-info': project_info_1.projectInfoHandler,

package/dist/preview-server/hmr-suppression.d.ts

@@ -0,0 +1,2 @@
+export declare function suppressHmrForFile(absolutePath: string): void;
+export declare function shouldSuppressHmr(filename: string | null): boolean;

package/dist/preview-server/hmr-suppression.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.suppressHmrForFile = suppressHmrForFile;
+exports.shouldSuppressHmr = shouldSuppressHmr;
+const suppressedFiles = new Set();
+function suppressHmrForFile(absolutePath) {
+    suppressedFiles.add(absolutePath);
+}
+function shouldSuppressHmr(filename) {
+    if (filename === null) {
+        return false;
+    }
+    if (suppressedFiles.has(filename)) {
+        suppressedFiles.delete(filename);
+        return true;
+    }
+    return false;
+}

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

@@ -9,6 +9,7 @@ exports.webpackHotMiddleware = void 0;
 const node_url_1 = require("node:url");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
+const hmr_suppression_1 = require("../hmr-suppression");
 const pathMatch = function (url, path) {
     try {
         return (0, node_url_1.parse)(url).pathname === path;
@@ -20,9 +21,16 @@ const pathMatch = function (url, path) {
 const webpackHotMiddleware = (compiler, logLevel) => {
     const eventStream = createEventStream(studio_shared_1.hotMiddlewareOptions.heartbeat);
     let latestStats = null;
+    let currentBuildSuppressed = false;
     compiler.hooks.invalid.tap('remotion', onInvalid);
     compiler.hooks.done.tap('remotion', onDone);
-    function onInvalid() {
+    function onInvalid(filename) {
+        if ((0, hmr_suppression_1.shouldSuppressHmr)(filename)) {
+            currentBuildSuppressed = true;
+            latestStats = null;
+            return;
+        }
+        currentBuildSuppressed = false;
         latestStats = null;
         renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, 'Building...');
         eventStream === null || eventStream === void 0 ? void 0 : eventStream.publish({
@@ -32,6 +40,12 @@ const webpackHotMiddleware = (compiler, logLevel) => {
     function onDone(statsResult) {
         // Keep hold of latest stats so they can be propagated to new clients
         latestStats = statsResult;
+        if (currentBuildSuppressed) {
+            // Still send the "built" event so the client hash stays in sync,
+            // but skip the "building" spinner. This avoids accumulating
+            // a large HMR delta for the next real build.
+            currentBuildSuppressed = false;
+        }
         publishStats('built', latestStats, eventStream);
     }
     const middleware = function (req, res, next) {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = void 0;
 const server_ready_1 = require("../server-ready");
 const file_existence_watchers_1 = require("./file-existence-watchers");
+const sequence_props_watchers_1 = require("./sequence-props-watchers");
 const serializeMessage = (message) => {
     return `data: ${JSON.stringify(message)}\n\n`;
 };
@@ -33,6 +34,7 @@ const makeLiveEventsRouter = (logLevel) => {
         }
         request.on('close', () => {
             (0, file_existence_watchers_1.unsubscribeClientFileExistenceWatchers)(clientId);
+            (0, sequence_props_watchers_1.unsubscribeClientSequencePropsWatchers)(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) {

package/dist/preview-server/routes/can-update-sequence-props.d.ts

@@ -1,5 +1,10 @@
 import type { Expression } from '@babel/types';
-import type { CanUpdateSequencePropsRequest, CanUpdateSequencePropsResponse } from '@remotion/studio-shared';
-import type { ApiHandler } from '../api-types';
+import type { CanUpdateSequencePropsResponse } from '@remotion/studio-shared';
 export declare const isStaticValue: (node: Expression) => boolean;
-export declare const canUpdateSequencePropsHandler: ApiHandler<CanUpdateSequencePropsRequest, CanUpdateSequencePropsResponse>;
+export declare const extractStaticValue: (node: Expression) => unknown;
+export declare const computeSequencePropsStatus: ({ fileName, line, keys, remotionRoot, }: {
+    fileName: string;
+    line: number;
+    keys: string[];
+    remotionRoot: string;
+}) => CanUpdateSequencePropsResponse;

package/dist/preview-server/routes/can-update-sequence-props.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canUpdateSequencePropsHandler = exports.isStaticValue = void 0;
+exports.computeSequencePropsStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const recast = __importStar(require("recast"));
@@ -62,6 +62,53 @@ const isStaticValue = (node) => {
     }
 };
 exports.isStaticValue = isStaticValue;
+const extractStaticValue = (node) => {
+    switch (node.type) {
+        case 'NumericLiteral':
+        case 'StringLiteral':
+        case 'BooleanLiteral':
+            return node.value;
+        case 'NullLiteral':
+            return null;
+        case 'UnaryExpression': {
+            const un = node;
+            if (un.argument.type === 'NumericLiteral') {
+                const val = un.argument.value;
+                return un.operator === '-' ? -val : val;
+            }
+            return undefined;
+        }
+        case 'ArrayExpression':
+            return node.elements.map((el) => {
+                if (el === null || el.type === 'SpreadElement') {
+                    return undefined;
+                }
+                return (0, exports.extractStaticValue)(el);
+            });
+        case 'ObjectExpression': {
+            const obj = node;
+            const result = {};
+            for (const prop of obj.properties) {
+                if (prop.type === 'ObjectProperty') {
+                    const p = prop;
+                    const key = p.key.type === 'Identifier'
+                        ? p.key.name
+                        : p.key.type === 'StringLiteral' ||
+                            p.key.type === 'NumericLiteral'
+                            ? String(p.key.value)
+                            : undefined;
+                    if (key !== undefined) {
+                        result[key] = (0, exports.extractStaticValue)(p.value);
+                    }
+                }
+            }
+            return result;
+        }
+        default:
+            return undefined;
+    }
+};
+exports.extractStaticValue = extractStaticValue;
 const getPropsStatus = (jsxElement) => {
     const props = {};
     for (const attr of jsxElement.attributes) {
@@ -77,11 +124,14 @@ const getPropsStatus = (jsxElement) => {
         }
         const { value } = attr;
         if (!value) {
-            props[name] = { canUpdate: true };
+            props[name] = { canUpdate: true, codeValue: true };
             continue;
         }
         if (value.type === 'StringLiteral') {
-            props[name] = { canUpdate: true };
+            props[name] = {
+                canUpdate: true,
+                codeValue: value.value,
+            };
             continue;
         }
         if (value.type === 'JSXExpressionContainer') {
@@ -91,7 +141,10 @@ const getPropsStatus = (jsxElement) => {
                 props[name] = { canUpdate: false, reason: 'computed' };
                 continue;
             }
-            props[name] = { canUpdate: true };
+            props[name] = {
+                canUpdate: true,
+                codeValue: (0, exports.extractStaticValue)(expression),
+            };
             continue;
         }
         props[name] = { canUpdate: false, reason: 'computed' };
@@ -112,7 +165,7 @@ const findJsxElementAtLine = (ast, targetLine) => {
     });
     return found;
 };
-const canUpdateSequencePropsHandler = ({ input: { fileName, line, column: _column, keys }, remotionRoot }) => {
+const computeSequencePropsStatus = ({ fileName, line, keys, remotionRoot, }) => {
     try {
         const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
         const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
@@ -132,19 +185,19 @@ const canUpdateSequencePropsHandler = ({ input: { fileName, line, column: _colum
                 filteredProps[key] = allProps[key];
             }
             else {
-                filteredProps[key] = { canUpdate: false, reason: 'computed' };
+                filteredProps[key] = { canUpdate: true, codeValue: undefined };
             }
         }
-        return Promise.resolve({
+        return {
             canUpdate: true,
             props: filteredProps,
-        });
+        };
     }
     catch (err) {
-        return Promise.resolve({
+        return {
             canUpdate: false,
             reason: err.message,
-        });
+        };
     }
 };
-exports.canUpdateSequencePropsHandler = canUpdateSequencePropsHandler;
+exports.computeSequencePropsStatus = computeSequencePropsStatus;

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

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveSequencePropsHandler = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
+const renderer_1 = require("@remotion/renderer");
 const update_sequence_props_1 = require("../../codemods/update-sequence-props");
-const saveSequencePropsHandler = async ({ input: { fileName, line, column: _column, key, value, enumPaths }, remotionRoot, }) => {
+const make_link_1 = require("../../hyperlinks/make-link");
+const hmr_suppression_1 = require("../hmr-suppression");
+const saveSequencePropsHandler = async ({ input: { fileName, line, column, key, value, enumPaths, defaultValue }, remotionRoot, logLevel, }) => {
     try {
         const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
         const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
@@ -15,14 +18,24 @@ const saveSequencePropsHandler = async ({ input: { fileName, line, column: _colu
             throw new Error('Cannot modify a file outside the project');
         }
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const updated = await (0, update_sequence_props_1.updateSequenceProps)({
+        const { output, oldValueString } = await (0, update_sequence_props_1.updateSequenceProps)({
             input: fileContents,
             targetLine: line,
             key,
             value: JSON.parse(value),
             enumPaths,
+            defaultValue: defaultValue !== null ? JSON.parse(defaultValue) : null,
         });
-        (0, node_fs_1.writeFileSync)(absolutePath, updated);
+        (0, hmr_suppression_1.suppressHmrForFile)(absolutePath);
+        (0, node_fs_1.writeFileSync)(absolutePath, output);
+        const newValueString = JSON.stringify(JSON.parse(value));
+        const locationLabel = `${fileRelativeToRoot}:${line}:${column}`;
+        const fileLink = (0, make_link_1.makeHyperlink)({
+            url: `file://${absolutePath}`,
+            text: locationLabel,
+            fallback: locationLabel,
+        });
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blueBright(`${fileLink} updated: ${key} ${oldValueString} \u2192 ${newValueString}`));
         return {
             success: true,
         };

package/dist/preview-server/routes/subscribe-to-sequence-props.d.ts

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

package/dist/preview-server/routes/subscribe-to-sequence-props.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToSequenceProps = void 0;
+const sequence_props_watchers_1 = require("../sequence-props-watchers");
+const subscribeToSequenceProps = ({ input: { fileName, line, column, keys, clientId }, remotionRoot }) => {
+    const result = (0, sequence_props_watchers_1.subscribeToSequencePropsWatchers)({
+        fileName,
+        line,
+        column,
+        keys,
+        remotionRoot,
+        clientId,
+    });
+    return Promise.resolve(result);
+};
+exports.subscribeToSequenceProps = subscribeToSequenceProps;

package/dist/preview-server/routes/unsubscribe-from-sequence-props.d.ts

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

package/dist/preview-server/routes/unsubscribe-from-sequence-props.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsubscribeFromSequenceProps = void 0;
+const sequence_props_watchers_1 = require("../sequence-props-watchers");
+const unsubscribeFromSequenceProps = ({ input: { fileName, line, column, clientId }, remotionRoot }) => {
+    (0, sequence_props_watchers_1.unsubscribeFromSequencePropsWatchers)({
+        fileName,
+        line,
+        column,
+        remotionRoot,
+        clientId,
+    });
+    return Promise.resolve(undefined);
+};
+exports.unsubscribeFromSequenceProps = unsubscribeFromSequenceProps;

package/dist/preview-server/sequence-props-watchers.d.ts

@@ -0,0 +1,17 @@
+import type { CanUpdateSequencePropsResponse } from '@remotion/studio-shared';
+export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, keys, remotionRoot, clientId, }: {
+    fileName: string;
+    line: number;
+    column: number;
+    keys: string[];
+    remotionRoot: string;
+    clientId: string;
+}) => CanUpdateSequencePropsResponse;
+export declare const unsubscribeFromSequencePropsWatchers: ({ fileName, line, column, remotionRoot, clientId, }: {
+    fileName: string;
+    line: number;
+    column: number;
+    remotionRoot: string;
+    clientId: string;
+}) => void;
+export declare const unsubscribeClientSequencePropsWatchers: (clientId: string) => void;

package/dist/preview-server/sequence-props-watchers.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsubscribeClientSequencePropsWatchers = exports.unsubscribeFromSequencePropsWatchers = exports.subscribeToSequencePropsWatchers = 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 can_update_sequence_props_1 = require("./routes/can-update-sequence-props");
+const sequencePropsWatchers = {};
+const makeWatcherKey = ({ absolutePath, line, column, }) => {
+    return `${absolutePath}:${line}:${column}`;
+};
+const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remotionRoot, clientId, }) => {
+    var _a;
+    const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
+    const watcherKey = makeWatcherKey({ absolutePath, line, column });
+    // Unwatch any existing watcher for the same key
+    if ((_a = sequencePropsWatchers[clientId]) === null || _a === void 0 ? void 0 : _a[watcherKey]) {
+        sequencePropsWatchers[clientId][watcherKey].unwatch();
+    }
+    const initialResult = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+        fileName,
+        line,
+        keys,
+        remotionRoot,
+    });
+    const { unwatch } = (0, file_watcher_1.installFileWatcher)({
+        file: absolutePath,
+        onChange: (type) => {
+            if (type === 'deleted') {
+                return;
+            }
+            const result = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+                fileName,
+                line,
+                keys,
+                remotionRoot,
+            });
+            (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                listener.sendEventToClient({
+                    type: 'sequence-props-updated',
+                    fileName,
+                    line,
+                    column,
+                    result,
+                });
+            });
+        },
+    });
+    if (!sequencePropsWatchers[clientId]) {
+        sequencePropsWatchers[clientId] = {};
+    }
+    sequencePropsWatchers[clientId][watcherKey] = { unwatch };
+    return initialResult;
+};
+exports.subscribeToSequencePropsWatchers = subscribeToSequencePropsWatchers;
+const unsubscribeFromSequencePropsWatchers = ({ fileName, line, column, remotionRoot, clientId, }) => {
+    var _a;
+    const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
+    const watcherKey = makeWatcherKey({ absolutePath, line, column });
+    if (!sequencePropsWatchers[clientId]) {
+        return;
+    }
+    (_a = sequencePropsWatchers[clientId][watcherKey]) === null || _a === void 0 ? void 0 : _a.unwatch();
+    delete sequencePropsWatchers[clientId][watcherKey];
+};
+exports.unsubscribeFromSequencePropsWatchers = unsubscribeFromSequencePropsWatchers;
+const unsubscribeClientSequencePropsWatchers = (clientId) => {
+    if (!sequencePropsWatchers[clientId]) {
+        return;
+    }
+    Object.values(sequencePropsWatchers[clientId]).forEach((watcher) => {
+        watcher.unwatch();
+    });
+    delete sequencePropsWatchers[clientId];
+};
+exports.unsubscribeClientSequencePropsWatchers = unsubscribeClientSequencePropsWatchers;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-server"
 	},
 	"name": "@remotion/studio-server",
-	"version": "4.0.429",
+	"version": "4.0.430",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"sideEffects": false,
@@ -11,6 +11,7 @@
 		"lint": "eslint src",
 		"test": "bun test src",
 		"formatting": "oxfmt src --check",
+		"format": "oxfmt src",
 		"make": "tsgo -d"
 	},
 	"author": "Jonny Burger <jonny@remotion.dev>",