@remotion/studio-server 4.0.431 → 4.0.433

package/dist/codemods/update-nested-prop.d.ts

@@ -0,0 +1,11 @@
+import type { JSXOpeningElement } from '@babel/types';
+import type { ExpressionKind } from 'ast-types/lib/gen/kinds';
+export declare const parseValueExpression: (value: unknown) => ExpressionKind;
+export declare const updateNestedProp: ({ node, parentKey, childKey, value, defaultValue, isDefault, }: {
+    node: JSXOpeningElement;
+    parentKey: string;
+    childKey: string;
+    value: unknown;
+    defaultValue: unknown;
+    isDefault: boolean;
+}) => string;

package/dist/codemods/update-nested-prop.js

@@ -0,0 +1,156 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateNestedProp = exports.parseValueExpression = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const recast = __importStar(require("recast"));
+const parse_ast_1 = require("./parse-ast");
+const b = recast.types.builders;
+const parseValueExpression = (value) => {
+    return (0, parse_ast_1.parseAst)(`a = ${(0, studio_shared_1.stringifyDefaultProps)({ props: value, enumPaths: [] })}`)
+        .program.body[0].expression.right;
+};
+exports.parseValueExpression = parseValueExpression;
+const findJsxAttribute = (attributes, name) => {
+    const attrIndex = attributes.findIndex((a) => {
+        if (a.type === 'JSXSpreadAttribute') {
+            return false;
+        }
+        if (a.name.type === 'JSXNamespacedName') {
+            return false;
+        }
+        return a.name.name === name;
+    });
+    const found = attrIndex !== -1 ? attributes[attrIndex] : undefined;
+    return {
+        attrIndex,
+        attr: found && found.type === 'JSXAttribute'
+            ? found
+            : undefined,
+    };
+};
+const findObjectProperty = (objExpr, propertyName) => {
+    const propIndex = objExpr.properties.findIndex((p) => p.type === 'ObjectProperty' &&
+        ((p.key.type === 'Identifier' &&
+            p.key.name === propertyName) ||
+            (p.key.type === 'StringLiteral' &&
+                p.key.value === propertyName)));
+    return {
+        propIndex,
+        prop: propIndex !== -1
+            ? objExpr.properties[propIndex]
+            : undefined,
+    };
+};
+const getObjectExpression = (attr) => {
+    const { value } = attr;
+    if (!value || value.type !== 'JSXExpressionContainer') {
+        return null;
+    }
+    const container = value;
+    if (container.expression.type !== 'ObjectExpression') {
+        return null;
+    }
+    return container.expression;
+};
+const getOldValueString = ({ attr, childKey, defaultValue, }) => {
+    if (attr) {
+        const objExpr = getObjectExpression(attr);
+        if (objExpr) {
+            const { prop } = findObjectProperty(objExpr, childKey);
+            if (prop) {
+                return recast.print(prop.value).code;
+            }
+        }
+    }
+    if (defaultValue !== null) {
+        return JSON.stringify(defaultValue);
+    }
+    return '';
+};
+const removeNestedProp = ({ attr, attrIndex, attributes, childKey, }) => {
+    if (!attr) {
+        return;
+    }
+    const objExpr = getObjectExpression(attr);
+    if (!objExpr) {
+        return;
+    }
+    const { propIndex } = findObjectProperty(objExpr, childKey);
+    if (propIndex !== -1) {
+        objExpr.properties.splice(propIndex, 1);
+    }
+    if (objExpr.properties.length === 0 && attrIndex !== -1) {
+        attributes.splice(attrIndex, 1);
+    }
+};
+const setNestedProp = ({ attr, attributes, parentKey, childKey, value, }) => {
+    const parsedValue = (0, exports.parseValueExpression)(value);
+    if (attr) {
+        const objExpr = getObjectExpression(attr);
+        if (objExpr) {
+            const { prop } = findObjectProperty(objExpr, childKey);
+            if (prop) {
+                prop.value = parsedValue;
+            }
+            else {
+                objExpr.properties.push(b.objectProperty(b.identifier(childKey), parsedValue));
+            }
+        }
+    }
+    else {
+        const objExpr = b.objectExpression([
+            b.objectProperty(b.identifier(childKey), parsedValue),
+        ]);
+        const newAttr = b.jsxAttribute(b.jsxIdentifier(parentKey), b.jsxExpressionContainer(objExpr));
+        attributes.push(newAttr);
+    }
+};
+const updateNestedProp = ({ node, parentKey, childKey, value, defaultValue, isDefault, }) => {
+    if (!node.attributes) {
+        node.attributes = [];
+    }
+    const { attributes } = node;
+    const { attrIndex, attr } = findJsxAttribute(attributes, parentKey);
+    const oldValueString = getOldValueString({ attr, childKey, defaultValue });
+    if (isDefault) {
+        removeNestedProp({ attr, attrIndex, attributes, childKey });
+    }
+    else {
+        setNestedProp({ attr, attributes, parentKey, childKey, value });
+    }
+    return oldValueString;
+};
+exports.updateNestedProp = updateNestedProp;

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

@@ -1,12 +1,13 @@
-import { type EnumPath } from '@remotion/studio-shared';
-export declare const updateSequenceProps: ({ input, targetLine, key, value, enumPaths, defaultValue, }: {
+import type { SequenceNodePath } from '@remotion/studio-shared';
+export declare const updateSequenceProps: ({ input, nodePath, key, value, defaultValue, prettierConfigOverride, }: {
     input: string;
-    targetLine: number;
+    nodePath: SequenceNodePath;
     key: string;
     value: unknown;
-    enumPaths: EnumPath[];
     defaultValue: unknown;
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;
     oldValueString: string;
+    formatted: boolean;
 }>;

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

@@ -34,63 +34,73 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSequenceProps = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
+const can_update_sequence_props_1 = require("../preview-server/routes/can-update-sequence-props");
 const parse_ast_1 = require("./parse-ast");
-const updateSequenceProps = async ({ input, targetLine, key, value, enumPaths, defaultValue, }) => {
+const update_nested_prop_1 = require("./update-nested-prop");
+const b = recast.types.builders;
+const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue, prettierConfigOverride, }) => {
+    var _a, _b;
     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, _b;
-            const { node } = path;
-            if (!node.loc || node.loc.start.line !== targetLine) {
-                return this.traverse(path);
-            }
-            const attrIndex = (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.findIndex((a) => {
-                if (a.type === 'JSXSpreadAttribute') {
-                    return false;
-                }
-                if (a.name.type === 'JSXNamespacedName') {
-                    return false;
-                }
-                return a.name.name === key;
-            });
-            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';
+    const dotIndex = key.indexOf('.');
+    const isNested = dotIndex !== -1;
+    const parentKey = isNested ? key.slice(0, dotIndex) : key;
+    const childKey = isNested ? key.slice(dotIndex + 1) : '';
+    const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
+    if (!node) {
+        throw new Error('Could not find a JSX element at the specified line to update');
+    }
+    if (isNested) {
+        oldValueString = (0, update_nested_prop_1.updateNestedProp)({
+            node,
+            parentKey,
+            childKey,
+            value,
+            defaultValue,
+            isDefault,
+        });
+    }
+    else {
+        const attrIndex = (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.findIndex((a) => {
+            if (a.type === 'JSXSpreadAttribute') {
+                return false;
             }
-            else if (!attr && defaultValue !== null) {
-                oldValueString = JSON.stringify(defaultValue);
+            if (a.name.type === 'JSXNamespacedName') {
+                return false;
             }
-            if (isDefault) {
-                if (attr && attr.type !== 'JSXSpreadAttribute' && node.attributes) {
-                    node.attributes.splice(attrIndex, 1);
-                }
-                found = true;
-                return this.traverse(path);
+            return a.name.name === key;
+        });
+        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);
             }
-            const parsed = (0, parse_ast_1.parseAst)(`a = ${(0, studio_shared_1.stringifyDefaultProps)({ props: value, enumPaths })}`)
-                .program.body[0].expression.right;
-            const newValue = value === true
-                ? null
-                : recast.types.builders.jsxExpressionContainer(parsed);
+        }
+        else {
+            const parsed = (0, update_nested_prop_1.parseValueExpression)(value);
+            const newValue = value === true ? null : b.jsxExpressionContainer(parsed);
             if (!attr || attr.type === 'JSXSpreadAttribute') {
-                const newAttr = recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(key), newValue);
+                const newAttr = b.jsxAttribute(b.jsxIdentifier(key), newValue);
                 if (!node.attributes) {
                     node.attributes = [];
                 }
@@ -99,36 +109,53 @@ const updateSequenceProps = async ({ input, targetLine, key, value, enumPaths, d
             else {
                 attr.value = newValue;
             }
-            found = true;
-            return this.traverse(path);
-        },
-    });
-    if (!found) {
-        throw new Error('Could not find a JSX element at the specified line to update');
+        }
     }
+    const finalFile = (0, parse_ast_1.serializeAst)(ast);
     let prettier = null;
     try {
         prettier = await Promise.resolve().then(() => __importStar(require('prettier')));
     }
-    catch (_a) {
-        throw new Error('Prettier cannot be found in the current project.');
+    catch (_c) {
+        return {
+            output: finalFile,
+            oldValueString,
+            formatted: false,
+        };
     }
     const { format, resolveConfig, resolveConfigFile } = prettier;
-    const configFilePath = await resolveConfigFile();
-    if (!configFilePath) {
-        throw new Error('The Prettier config file was not found');
+    let prettierConfig;
+    if (prettierConfigOverride !== undefined) {
+        prettierConfig = prettierConfigOverride;
+    }
+    else {
+        const configFilePath = await resolveConfigFile();
+        if (!configFilePath) {
+            return {
+                output: finalFile,
+                oldValueString,
+                formatted: false,
+            };
+        }
+        prettierConfig = await resolveConfig(configFilePath);
     }
-    const prettierConfig = await resolveConfig(configFilePath);
     if (!prettierConfig) {
-        throw new Error('The Prettier config file was not found. For this feature, the "prettier" package must be installed and a .prettierrc file must exist.');
+        return {
+            output: finalFile,
+            oldValueString,
+            formatted: false,
+        };
     }
-    const finalFile = (0, parse_ast_1.serializeAst)(ast);
     const prettified = await format(finalFile, {
         ...prettierConfig,
         filepath: 'test.tsx',
         plugins: [],
-        endOfLine: 'auto',
+        endOfLine: 'lf',
     });
-    return { output: prettified, oldValueString };
+    return {
+        output: prettified,
+        oldValueString,
+        formatted: true,
+    };
 };
 exports.updateSequenceProps = updateSequenceProps;

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

@@ -1,8 +1,17 @@
-import type { Expression } from '@babel/types';
-import type { CanUpdateSequencePropsResponse } from '@remotion/studio-shared';
+import type { Expression, File, JSXOpeningElement } from '@babel/types';
+import type { CanUpdateSequencePropsResponse, SequenceNodePath } from '@remotion/studio-shared';
 export declare const isStaticValue: (node: Expression) => boolean;
 export declare const extractStaticValue: (node: Expression) => unknown;
-export declare const computeSequencePropsStatus: ({ fileName, line, keys, remotionRoot, }: {
+export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
+export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
+export declare const computeSequencePropsStatusFromContent: (fileContents: string, nodePath: SequenceNodePath, keys: string[]) => CanUpdateSequencePropsResponse;
+export declare const computeSequencePropsStatus: ({ fileName, nodePath, keys, remotionRoot, }: {
+    fileName: string;
+    nodePath: SequenceNodePath;
+    keys: string[];
+    remotionRoot: string;
+}) => CanUpdateSequencePropsResponse;
+export declare const computeSequencePropsStatusByLine: ({ fileName, line, keys, remotionRoot, }: {
     fileName: string;
     line: number;
     keys: string[];

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.computeSequencePropsStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
+exports.computeSequencePropsStatusByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.lineColumnToNodePath = exports.findJsxElementAtNodePath = 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"));
@@ -151,21 +151,146 @@ const getPropsStatus = (jsxElement) => {
     }
     return props;
 };
-const findJsxElementAtLine = (ast, targetLine) => {
-    let found = null;
+const getNodePathForRecastPath = (
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+recastPath) => {
+    const segments = [];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let current = recastPath;
+    while (current && current.parentPath) {
+        segments.unshift(current.name);
+        current = current.parentPath;
+    }
+    // Recast paths start with "root" which doesn't correspond to a real AST property
+    if (segments.length > 0 && segments[0] === 'root') {
+        return segments.slice(1);
+    }
+    return segments;
+};
+const findJsxElementAtNodePath = (ast, nodePath) => {
+    let current = new recast.types.NodePath(ast);
+    for (const segment of nodePath) {
+        current = current.get(segment);
+        if (current.value === null || current.value === undefined) {
+            return null;
+        }
+    }
+    if (recast.types.namedTypes.JSXOpeningElement.check(current.value)) {
+        return current.value;
+    }
+    return null;
+};
+exports.findJsxElementAtNodePath = findJsxElementAtNodePath;
+const lineColumnToNodePath = (ast, targetLine) => {
+    let foundPath = null;
     recast.types.visit(ast, {
-        visitJSXOpeningElement(nodePath) {
-            const { node } = nodePath;
+        visitJSXOpeningElement(p) {
+            const { node } = p;
             if (node.loc && node.loc.start.line === targetLine) {
-                found = node;
+                foundPath = getNodePathForRecastPath(p);
                 return false;
             }
-            return this.traverse(nodePath);
+            return this.traverse(p);
         },
     });
-    return found;
+    return foundPath;
+};
+exports.lineColumnToNodePath = lineColumnToNodePath;
+const PIXEL_VALUE_REGEX = /^-?\d+(\.\d+)?px$/;
+const isSupportedTranslateValue = (value) => {
+    const parts = value.split(/\s+/);
+    if (parts.length === 1 || parts.length === 2) {
+        return parts.every((part) => PIXEL_VALUE_REGEX.test(part));
+    }
+    return false;
+};
+const validateStyleValue = (childKey, value) => {
+    if (childKey === 'translate' && typeof value === 'string') {
+        return isSupportedTranslateValue(value);
+    }
+    return true;
+};
+const getNestedPropStatus = (jsxElement, parentKey, childKey) => {
+    const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
+        a.name.type !== 'JSXNamespacedName' &&
+        a.name.name === parentKey);
+    if (!attr || !attr.value) {
+        // Parent attribute doesn't exist, nested prop can be added
+        return { canUpdate: true, codeValue: undefined };
+    }
+    if (attr.value.type !== 'JSXExpressionContainer') {
+        return { canUpdate: false, reason: 'computed' };
+    }
+    const { expression } = attr.value;
+    if (expression.type === 'JSXEmptyExpression' ||
+        expression.type !== 'ObjectExpression') {
+        // Parent is not an object literal (e.g. style={myStyles})
+        return { canUpdate: false, reason: 'computed' };
+    }
+    const objExpr = expression;
+    const prop = objExpr.properties.find((p) => p.type === 'ObjectProperty' &&
+        ((p.key.type === 'Identifier' && p.key.name === childKey) ||
+            (p.key.type === 'StringLiteral' && p.key.value === childKey)));
+    if (!prop) {
+        // Property not set in the object, can be added
+        return { canUpdate: true, codeValue: undefined };
+    }
+    const propValue = prop.value;
+    if (!(0, exports.isStaticValue)(propValue)) {
+        return { canUpdate: false, reason: 'computed' };
+    }
+    const codeValue = (0, exports.extractStaticValue)(propValue);
+    if (!validateStyleValue(childKey, codeValue)) {
+        return { canUpdate: false, reason: 'computed' };
+    }
+    return { canUpdate: true, codeValue };
+};
+const computeSequencePropsStatusFromContent = (fileContents, nodePath, keys) => {
+    const ast = (0, parse_ast_1.parseAst)(fileContents);
+    const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
+    if (!jsxElement) {
+        throw new Error('Could not find a JSX element at the specified location');
+    }
+    const allProps = getPropsStatus(jsxElement);
+    const filteredProps = {};
+    for (const key of keys) {
+        const dotIndex = key.indexOf('.');
+        if (dotIndex !== -1) {
+            filteredProps[key] = getNestedPropStatus(jsxElement, key.slice(0, dotIndex), key.slice(dotIndex + 1));
+        }
+        else if (key in allProps) {
+            filteredProps[key] = allProps[key];
+        }
+        else {
+            filteredProps[key] = { canUpdate: true, codeValue: undefined };
+        }
+    }
+    return {
+        canUpdate: true,
+        props: filteredProps,
+        nodePath,
+    };
+};
+exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
+const computeSequencePropsStatus = ({ fileName, nodePath, keys, remotionRoot, }) => {
+    try {
+        const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
+        const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
+        if (fileRelativeToRoot.startsWith('..')) {
+            throw new Error('Cannot read a file outside the project');
+        }
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        return (0, exports.computeSequencePropsStatusFromContent)(fileContents, nodePath, keys);
+    }
+    catch (err) {
+        return {
+            canUpdate: false,
+            reason: err.message,
+        };
+    }
 };
-const computeSequencePropsStatus = ({ fileName, line, keys, remotionRoot, }) => {
+exports.computeSequencePropsStatus = computeSequencePropsStatus;
+const computeSequencePropsStatusByLine = ({ fileName, line, keys, remotionRoot, }) => {
     try {
         const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
         const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
@@ -174,24 +299,16 @@ const computeSequencePropsStatus = ({ fileName, line, keys, remotionRoot, }) =>
         }
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const ast = (0, parse_ast_1.parseAst)(fileContents);
-        const jsxElement = findJsxElementAtLine(ast, line);
-        if (!jsxElement) {
+        const resolvedNodePath = (0, exports.lineColumnToNodePath)(ast, line);
+        if (!resolvedNodePath) {
             throw new Error('Could not find a JSX element at the specified location');
         }
-        const allProps = getPropsStatus(jsxElement);
-        const filteredProps = {};
-        for (const key of keys) {
-            if (key in allProps) {
-                filteredProps[key] = allProps[key];
-            }
-            else {
-                filteredProps[key] = { canUpdate: true, codeValue: undefined };
-            }
-        }
-        return {
-            canUpdate: true,
-            props: filteredProps,
-        };
+        return (0, exports.computeSequencePropsStatus)({
+            fileName,
+            nodePath: resolvedNodePath,
+            keys,
+            remotionRoot,
+        });
     }
     catch (err) {
         return {
@@ -200,4 +317,4 @@ const computeSequencePropsStatus = ({ fileName, line, keys, remotionRoot, }) =>
         };
     }
 };
-exports.computeSequencePropsStatus = computeSequencePropsStatus;
+exports.computeSequencePropsStatusByLine = computeSequencePropsStatusByLine;

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

@@ -0,0 +1,10 @@
+export declare const logUpdate: ({ absolutePath, fileRelativeToRoot, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }: {
+    absolutePath: string;
+    fileRelativeToRoot: string;
+    key: string;
+    oldValueString: string;
+    newValueString: string;
+    defaultValueString: string | null;
+    formatted: boolean;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => void;

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logUpdate = void 0;
+const renderer_1 = require("@remotion/renderer");
+const make_link_1 = require("../../hyperlinks/make-link");
+let warnedAboutPrettier = false;
+const normalizeQuotes = (str) => {
+    if (str.length >= 2 &&
+        ((str.startsWith("'") && str.endsWith("'")) ||
+            (str.startsWith('"') && str.endsWith('"')))) {
+        return `'${str.slice(1, -1)}'`;
+    }
+    return str;
+};
+const formatValueChange = ({ oldValueString, newValueString, defaultValueString, }) => {
+    // Changed to default value (prop gets deleted) → show only old value in red
+    if (defaultValueString !== null && newValueString === defaultValueString) {
+        return renderer_1.RenderInternals.chalk.red(oldValueString);
+    }
+    // Changed from default value (prop gets added) → show only new value in green
+    if (defaultValueString !== null && oldValueString === defaultValueString) {
+        return renderer_1.RenderInternals.chalk.green(newValueString);
+    }
+    return `${renderer_1.RenderInternals.chalk.red(oldValueString)} \u2192 ${renderer_1.RenderInternals.chalk.green(newValueString)}`;
+};
+const formatPropChange = ({ key, oldValueString, newValueString, defaultValueString, }) => {
+    const isResetToDefault = defaultValueString !== null && newValueString === defaultValueString;
+    const isChangeFromDefault = defaultValueString !== null && oldValueString === defaultValueString;
+    const valueChange = formatValueChange({
+        oldValueString,
+        newValueString,
+        defaultValueString,
+    });
+    const dotIndex = key.indexOf('.');
+    if (dotIndex === -1) {
+        if (isResetToDefault) {
+            return renderer_1.RenderInternals.chalk.red(`${key}={${oldValueString}}`);
+        }
+        if (isChangeFromDefault) {
+            return renderer_1.RenderInternals.chalk.green(`${key}={${newValueString}}`);
+        }
+        return `${key}={${valueChange}}`;
+    }
+    const parentKey = key.slice(0, dotIndex);
+    const childKey = key.slice(dotIndex + 1);
+    if (isResetToDefault) {
+        return `${parentKey}={{${renderer_1.RenderInternals.chalk.red(`${childKey}: ${oldValueString}`)}}}`;
+    }
+    if (isChangeFromDefault) {
+        return `${parentKey}={{${renderer_1.RenderInternals.chalk.green(`${childKey}: ${newValueString}`)}}}`;
+    }
+    return `${parentKey}={{${childKey}: ${valueChange}}}`;
+};
+const logUpdate = ({ absolutePath, fileRelativeToRoot, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }) => {
+    const locationLabel = `${fileRelativeToRoot}`;
+    const fileLink = (0, make_link_1.makeHyperlink)({
+        url: `file://${absolutePath}`,
+        text: locationLabel,
+        fallback: locationLabel,
+    });
+    const propChange = formatPropChange({
+        key,
+        oldValueString: normalizeQuotes(oldValueString),
+        newValueString: normalizeQuotes(newValueString),
+        defaultValueString: defaultValueString !== null ? normalizeQuotes(defaultValueString) : null,
+    });
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${fileLink}:`)} ${propChange}`);
+    if (!formatted && !warnedAboutPrettier) {
+        warnedAboutPrettier = true;
+        renderer_1.RenderInternals.Log.warn({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.yellow('Could not format with Prettier. File will need to be formatted manually.'));
+    }
+};
+exports.logUpdate = logUpdate;

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

@@ -6,11 +6,10 @@ 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 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, }) => {
+const log_update_1 = require("./log-update");
+const saveSequencePropsHandler = async ({ input: { fileName, nodePath, key, value, defaultValue }, remotionRoot, logLevel, }) => {
     try {
         const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
         const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
@@ -18,24 +17,27 @@ const saveSequencePropsHandler = async ({ input: { fileName, line, column, key,
             throw new Error('Cannot modify a file outside the project');
         }
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, oldValueString } = await (0, update_sequence_props_1.updateSequenceProps)({
+        const { output, oldValueString, formatted } = await (0, update_sequence_props_1.updateSequenceProps)({
             input: fileContents,
-            targetLine: line,
+            nodePath,
             key,
             value: JSON.parse(value),
-            enumPaths,
             defaultValue: defaultValue !== null ? JSON.parse(defaultValue) : null,
         });
         (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,
+        const parsedDefault = defaultValue !== null ? JSON.parse(defaultValue) : null;
+        (0, log_update_1.logUpdate)({
+            absolutePath,
+            fileRelativeToRoot,
+            key,
+            oldValueString,
+            newValueString,
+            defaultValueString: parsedDefault !== null ? JSON.stringify(parsedDefault) : null,
+            formatted,
+            logLevel,
         });
-        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.js

@@ -2,11 +2,10 @@
 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 subscribeToSequenceProps = ({ input: { fileName, line, keys, clientId }, remotionRoot }) => {
     const result = (0, sequence_props_watchers_1.subscribeToSequencePropsWatchers)({
         fileName,
         line,
-        column,
         keys,
         remotionRoot,
         clientId,

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

@@ -2,11 +2,10 @@
 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 }) => {
+const unsubscribeFromSequenceProps = ({ input: { fileName, nodePath, clientId }, remotionRoot }) => {
     (0, sequence_props_watchers_1.unsubscribeFromSequencePropsWatchers)({
         fileName,
-        line,
-        column,
+        nodePath,
         remotionRoot,
         clientId,
     });

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

@@ -1,16 +1,14 @@
-import type { CanUpdateSequencePropsResponse } from '@remotion/studio-shared';
-export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, keys, remotionRoot, clientId, }: {
+import type { CanUpdateSequencePropsResponse, SequenceNodePath } from '@remotion/studio-shared';
+export declare const subscribeToSequencePropsWatchers: ({ fileName, line, 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, }: {
+export declare const unsubscribeFromSequencePropsWatchers: ({ fileName, nodePath, remotionRoot, clientId, }: {
     fileName: string;
-    line: number;
-    column: number;
+    nodePath: SequenceNodePath;
     remotionRoot: string;
     clientId: string;
 }) => void;

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

@@ -9,23 +9,28 @@ 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 makeWatcherKey = ({ absolutePath, nodePath, }) => {
+    return `${absolutePath}:${JSON.stringify(nodePath)}`;
 };
-const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remotionRoot, clientId, }) => {
+const subscribeToSequencePropsWatchers = ({ fileName, line, 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)({
+    // Initial lookup by line+column to resolve the nodePath
+    const initialResult = (0, can_update_sequence_props_1.computeSequencePropsStatusByLine)({
         fileName,
         line,
         keys,
         remotionRoot,
     });
+    if (!initialResult.canUpdate) {
+        return initialResult;
+    }
+    const { nodePath } = initialResult;
+    const watcherKey = makeWatcherKey({ absolutePath, nodePath });
+    // 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 { unwatch } = (0, file_watcher_1.installFileWatcher)({
         file: absolutePath,
         onChange: (type) => {
@@ -34,7 +39,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remoti
             }
             const result = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
                 fileName,
-                line,
+                nodePath,
                 keys,
                 remotionRoot,
             });
@@ -42,8 +47,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remoti
                 listener.sendEventToClient({
                     type: 'sequence-props-updated',
                     fileName,
-                    line,
-                    column,
+                    nodePath,
                     result,
                 });
             });
@@ -56,14 +60,16 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, remoti
     return initialResult;
 };
 exports.subscribeToSequencePropsWatchers = subscribeToSequencePropsWatchers;
-const unsubscribeFromSequencePropsWatchers = ({ fileName, line, column, remotionRoot, clientId, }) => {
-    var _a;
+const unsubscribeFromSequencePropsWatchers = ({ fileName, nodePath, remotionRoot, clientId, }) => {
     const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
-    const watcherKey = makeWatcherKey({ absolutePath, line, column });
-    if (!sequencePropsWatchers[clientId]) {
+    const watcherKey = makeWatcherKey({ absolutePath, nodePath });
+    if (!sequencePropsWatchers[clientId] ||
+        !sequencePropsWatchers[clientId][watcherKey]) {
+        // eslint-disable-next-line no-console
+        console.warn(`Unexpected: unsubscribe for sequence props watcher that does not exist (clientId=${clientId}, key=${watcherKey})`);
         return;
     }
-    (_a = sequencePropsWatchers[clientId][watcherKey]) === null || _a === void 0 ? void 0 : _a.unwatch();
+    sequencePropsWatchers[clientId][watcherKey].unwatch();
     delete sequencePropsWatchers[clientId][watcherKey];
 };
 exports.unsubscribeFromSequencePropsWatchers = unsubscribeFromSequencePropsWatchers;

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.431",
+	"version": "4.0.433",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"sideEffects": false,
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.431",
+		"remotion": "4.0.433",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.431",
-		"@remotion/renderer": "4.0.431",
-		"@remotion/studio-shared": "4.0.431",
+		"@remotion/bundler": "4.0.433",
+		"@remotion/renderer": "4.0.433",
+		"@remotion/studio-shared": "4.0.433",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
 		"open": "^8.4.2"
@@ -41,7 +41,7 @@
 		"react": "19.2.3",
 		"@babel/types": "7.24.0",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.431",
+		"@remotion/eslint-config-internal": "4.0.433",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"

package/dist/codemods/apply-component-visual-control.d.ts

@@ -1,8 +0,0 @@
-import type { File } from '@babel/types';
-import { type ApplyComponentVisualControlCodemod } from '@remotion/studio-shared';
-import type { ApplyCodeModReturnType, Change } from './recast-mods';
-export declare const applyComponentVisualControl: ({ file, transformation, changesMade, }: {
-    file: File;
-    transformation: ApplyComponentVisualControlCodemod;
-    changesMade: Change[];
-}) => ApplyCodeModReturnType;

package/dist/codemods/apply-component-visual-control.js

@@ -1,92 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyComponentVisualControl = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
-const recast = __importStar(require("recast"));
-const parse_ast_1 = require("./parse-ast");
-const applyComponentVisualControl = ({ file, transformation, changesMade, }) => {
-    recast.types.visit(file.program, {
-        visitJSXOpeningElement(path) {
-            var _a;
-            const { node } = path;
-            if (node.name.type !== 'JSXIdentifier' ||
-                node.name.name !== transformation.componentName) {
-                return this.traverse(path);
-            }
-            if (((_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== transformation.line) {
-                return this.traverse(path);
-            }
-            const attributes = node.attributes;
-            if (!attributes) {
-                return this.traverse(path);
-            }
-            for (const change of transformation.changes) {
-                const parsed = (0, parse_ast_1.parseAst)(`a = ${(0, studio_shared_1.stringifyDefaultProps)({ props: JSON.parse(change.newValueSerialized), enumPaths: change.enumPaths })}`).program.body[0].expression.right;
-                const existingAttr = attributes.find((attr) => attr.type === 'JSXAttribute' &&
-                    attr.name.type === 'JSXIdentifier' &&
-                    attr.name.name === change.propName);
-                if (existingAttr && existingAttr.type === 'JSXAttribute') {
-                    existingAttr.value = {
-                        type: 'JSXExpressionContainer',
-                        expression: parsed,
-                    };
-                    changesMade.push({
-                        description: `Updated prop ${change.propName} on ${transformation.componentName}`,
-                    });
-                }
-                else {
-                    attributes.push({
-                        type: 'JSXAttribute',
-                        name: {
-                            type: 'JSXIdentifier',
-                            name: change.propName,
-                        },
-                        value: {
-                            type: 'JSXExpressionContainer',
-                            expression: parsed,
-                        },
-                    });
-                    changesMade.push({
-                        description: `Added prop ${change.propName} to ${transformation.componentName}`,
-                    });
-                }
-            }
-            return false;
-        },
-    });
-    return { newAst: file, changesMade };
-};
-exports.applyComponentVisualControl = applyComponentVisualControl;

package/dist/preview-server/routes/apply-component-visual-control-change.d.ts

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

package/dist/preview-server/routes/apply-component-visual-control-change.js

@@ -1,38 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyComponentVisualControlHandler = void 0;
-const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
-const parse_ast_1 = require("../../codemods/parse-ast");
-const recast_mods_1 = require("../../codemods/recast-mods");
-const applyComponentVisualControlHandler = ({ input: { fileName, componentName, line, column, changes }, remotionRoot }) => {
-    const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
-    const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
-    if (fileRelativeToRoot.startsWith('..')) {
-        throw new Error('Cannot apply component visual control change to a file outside the project');
-    }
-    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-    const ast = (0, parse_ast_1.parseAst)(fileContents);
-    const { newAst, changesMade } = (0, recast_mods_1.applyCodemod)({
-        file: ast,
-        codeMod: {
-            type: 'apply-component-visual-control',
-            componentName,
-            line,
-            column,
-            changes,
-        },
-    });
-    if (changesMade.length === 0) {
-        throw new Error('No changes were made to the file');
-    }
-    const output = (0, parse_ast_1.serializeAst)(newAst);
-    (0, node_fs_1.writeFileSync)(absolutePath, output);
-    return Promise.resolve({
-        success: true,
-    });
-};
-exports.applyComponentVisualControlHandler = applyComponentVisualControlHandler;