@remotion/studio-server 4.0.465 → 4.0.467

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

@@ -1,5 +1,5 @@
 import type { ArrayExpression, CallExpression, JSXAttribute } from '@babel/types';
-import type { SequenceNodePath } from 'remotion';
+import type { SequenceNodePath, SequenceSchema } from 'remotion';
 export type EffectPropUpdate = {
     key: string;
     value: unknown;
@@ -11,6 +11,11 @@ export type UpdateEffectPropsResult = {
     oldValueString: string;
     logLine: number;
     effectCallee: string;
+    removedProps: PropDelta[];
+};
+export type PropDelta = {
+    key: string;
+    valueString: string;
 };
 export declare const findEffectsAttr: (attrs: readonly unknown[]) => JSXAttribute | null;
 export type EffectArrayElement = {
@@ -33,21 +38,24 @@ export declare const findEffectCallExpression: ({ attr, effectIndex, }: {
     kind: "error";
     reason: "not-call-expression" | "not-found";
 };
-export declare const updateEffectPropsAst: ({ input, sequenceNodePath, effectIndex, update, }: {
+export declare const updateEffectPropsAst: ({ input, sequenceNodePath, effectIndex, update, schema, }: {
     input: string;
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     update: EffectPropUpdate;
+    schema: SequenceSchema;
 }) => {
     serialized: string;
     oldValueString: string;
     logLine: number;
     effectCallee: string;
+    removedProps: PropDelta[];
 };
-export declare const updateEffectProps: ({ input, sequenceNodePath, effectIndex, update, prettierConfigOverride, }: {
+export declare const updateEffectProps: ({ input, sequenceNodePath, effectIndex, update, schema, prettierConfigOverride, }: {
     input: string;
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     update: EffectPropUpdate;
+    schema: SequenceSchema;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<UpdateEffectPropsResult>;

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

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateEffectProps = exports.updateEffectPropsAst = exports.findEffectCallExpression = exports.enumerateEffectArrayElements = exports.findEffectsAttr = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
+const no_react_1 = require("remotion/no-react");
 const can_update_sequence_props_1 = require("../../preview-server/routes/can-update-sequence-props");
 const format_file_content_1 = require("../format-file-content");
 const parse_ast_1 = require("../parse-ast");
@@ -132,7 +133,24 @@ const findObjectProperty = (objExpr, propertyName) => {
             : undefined,
     };
 };
-const updateEffectPropsAst = ({ input, sequenceNodePath, effectIndex, update, }) => {
+const printObjectPropertyValue = (prop) => recast
+    .print(prop.value)
+    .code.replace(/[\n\r\t]+/g, ' ')
+    .replace(/,(\s*[}\]])/g, '$1')
+    .trim();
+const removeObjectProperty = ({ objExpr, propertyName, }) => {
+    const { propIndex, prop } = findObjectProperty(objExpr, propertyName);
+    if (!prop || propIndex === -1) {
+        return null;
+    }
+    const valueString = printObjectPropertyValue(prop);
+    objExpr.properties.splice(propIndex, 1);
+    return {
+        key: propertyName,
+        valueString,
+    };
+};
+const updateEffectPropsAst = ({ input, sequenceNodePath, effectIndex, update, schema, }) => {
     var _a, _b, _c, _d;
     var _e, _f, _g, _h, _j;
     const ast = (0, parse_ast_1.parseAst)(input);
@@ -162,6 +180,7 @@ const updateEffectPropsAst = ({ input, sequenceNodePath, effectIndex, update, })
                 oldValueString: '',
                 logLine: (_g = (_f = (_a = call.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _f !== void 0 ? _f : (_b = jsx.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _g !== void 0 ? _g : 1,
                 effectCallee,
+                removedProps: [],
             };
         }
         objExpr = b.objectExpression([]);
@@ -174,6 +193,7 @@ const updateEffectPropsAst = ({ input, sequenceNodePath, effectIndex, update, })
         objExpr = call.arguments[0];
     }
     const { prop } = findObjectProperty(objExpr, update.key);
+    const removedProps = [];
     let oldValueString = '';
     if (prop) {
         oldValueString = recast.print(prop.value).code;
@@ -198,21 +218,40 @@ const updateEffectPropsAst = ({ input, sequenceNodePath, effectIndex, update, })
             objExpr.properties.push(b.objectProperty(b.identifier(update.key), newValueExpr));
         }
     }
+    const fieldSchema = schema[update.key];
+    if (fieldSchema && fieldSchema.type === 'enum') {
+        const propsToDelete = no_react_1.NoReactInternals.findPropsToDelete({
+            schema,
+            key: update.key,
+            value: update.value,
+        });
+        for (const propToDelete of propsToDelete) {
+            const removed = removeObjectProperty({
+                objExpr,
+                propertyName: propToDelete,
+            });
+            if (removed) {
+                removedProps.push(removed);
+            }
+        }
+    }
     const logLine = (_j = (_h = (_c = call.loc) === null || _c === void 0 ? void 0 : _c.start.line) !== null && _h !== void 0 ? _h : (_d = jsx.loc) === null || _d === void 0 ? void 0 : _d.start.line) !== null && _j !== void 0 ? _j : 1;
     return {
         serialized: (0, parse_ast_1.serializeAst)(ast),
         oldValueString,
         logLine,
         effectCallee,
+        removedProps,
     };
 };
 exports.updateEffectPropsAst = updateEffectPropsAst;
-const updateEffectProps = async ({ input, sequenceNodePath, effectIndex, update, prettierConfigOverride, }) => {
-    const { serialized, oldValueString, logLine, effectCallee } = (0, exports.updateEffectPropsAst)({
+const updateEffectProps = async ({ input, sequenceNodePath, effectIndex, update, schema, prettierConfigOverride, }) => {
+    const { serialized, oldValueString, logLine, effectCallee, removedProps } = (0, exports.updateEffectPropsAst)({
         input,
         sequenceNodePath,
         effectIndex,
         update,
+        schema,
     });
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
         input: serialized,
@@ -224,6 +263,7 @@ const updateEffectProps = async ({ input, sequenceNodePath, effectIndex, update,
         formatted,
         logLine,
         effectCallee,
+        removedProps,
     };
 };
 exports.updateEffectProps = updateEffectProps;

package/dist/helpers/resolve-composition-component.d.ts

@@ -0,0 +1,11 @@
+export type ResolvedCompositionComponent = {
+    source: string;
+    line: number;
+    column: number;
+    canAddSequence: boolean;
+};
+export declare const resolveCompositionComponent: ({ remotionRoot, compositionFile, compositionId, }: {
+    remotionRoot: string;
+    compositionFile: string;
+    compositionId: string;
+}) => Promise<ResolvedCompositionComponent>;

package/dist/helpers/resolve-composition-component.js

@@ -0,0 +1,691 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveCompositionComponent = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const recast = __importStar(require("recast"));
+const parse_ast_1 = require("../codemods/parse-ast");
+const allowedFileExtensions = new Set(['.tsx', '.ts', '.jsx', '.js']);
+const extensionsToProbe = ['.tsx', '.ts', '.jsx', '.js'];
+const isInRemotionRoot = ({ remotionRoot, fileName, }) => {
+    const relativePath = node_path_1.default.relative(remotionRoot, fileName);
+    return !relativePath.startsWith('..') && !node_path_1.default.isAbsolute(relativePath);
+};
+const readSourceFile = ({ remotionRoot, fileName, }) => {
+    const resolved = node_path_1.default.resolve(remotionRoot, fileName);
+    if (!isInRemotionRoot({ remotionRoot, fileName: resolved })) {
+        throw new Error(`Not allowed to open ${fileName}`);
+    }
+    if (!allowedFileExtensions.has(node_path_1.default.extname(resolved))) {
+        throw new Error(`Not allowed to open ${fileName}`);
+    }
+    return node_fs_1.default.promises.readFile(resolved, 'utf-8');
+};
+const getAttributeName = (attribute) => {
+    if (attribute.name.type !== 'JSXIdentifier') {
+        return null;
+    }
+    return attribute.name.name;
+};
+const findAttribute = (element, name) => {
+    return element.openingElement.attributes.find((attribute) => {
+        if (attribute.type !== 'JSXAttribute') {
+            return false;
+        }
+        return getAttributeName(attribute) === name;
+    });
+};
+const getStringAttributeValue = (element, name) => {
+    const attribute = findAttribute(element, name);
+    if (!(attribute === null || attribute === void 0 ? void 0 : attribute.value)) {
+        return null;
+    }
+    if (attribute.value.type === 'StringLiteral') {
+        return attribute.value.value;
+    }
+    if (attribute.value.type === 'JSXExpressionContainer' &&
+        attribute.value.expression.type === 'StringLiteral') {
+        return attribute.value.expression.value;
+    }
+    return null;
+};
+const findCompositionElement = ({ ast, compositionId, }) => {
+    let found = null;
+    recast.types.visit(ast, {
+        visitJSXElement(astPath) {
+            if (found) {
+                return false;
+            }
+            const node = astPath.node;
+            const openingName = node.openingElement.name;
+            if (openingName.type === 'JSXIdentifier' &&
+                (openingName.name === 'Composition' || openingName.name === 'Still') &&
+                getStringAttributeValue(node, 'id') === compositionId) {
+                found = node;
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+    });
+    return found;
+};
+const getComponentIdentifier = (element) => {
+    const attribute = findAttribute(element, 'component');
+    if (!(attribute === null || attribute === void 0 ? void 0 : attribute.value) ||
+        attribute.value.type !== 'JSXExpressionContainer' ||
+        attribute.value.expression.type !== 'Identifier') {
+        return null;
+    }
+    return attribute.value.expression.name;
+};
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null;
+};
+const findDynamicImportPath = (value) => {
+    if (!isRecord(value)) {
+        return null;
+    }
+    if (value.type === 'CallExpression' &&
+        isRecord(value.callee) &&
+        value.callee.type === 'Import' &&
+        Array.isArray(value.arguments) &&
+        isRecord(value.arguments[0]) &&
+        value.arguments[0].type === 'StringLiteral' &&
+        typeof value.arguments[0].value === 'string') {
+        return value.arguments[0].value;
+    }
+    for (const [key, child] of Object.entries(value)) {
+        if (key === 'loc' ||
+            key === 'start' ||
+            key === 'end' ||
+            key === 'comments' ||
+            key === 'leadingComments' ||
+            key === 'trailingComments' ||
+            key === 'innerComments' ||
+            key === 'extra' ||
+            key === 'original') {
+            continue;
+        }
+        if (Array.isArray(child)) {
+            for (const item of child) {
+                const nestedResult = findDynamicImportPath(item);
+                if (nestedResult) {
+                    return nestedResult;
+                }
+            }
+            continue;
+        }
+        const childResult = findDynamicImportPath(child);
+        if (childResult) {
+            return childResult;
+        }
+    }
+    return null;
+};
+const getLazyImportPath = (element) => {
+    const attribute = findAttribute(element, 'lazyComponent');
+    if (!(attribute === null || attribute === void 0 ? void 0 : attribute.value) || attribute.value.type !== 'JSXExpressionContainer') {
+        return null;
+    }
+    return findDynamicImportPath(attribute.value.expression);
+};
+const findImportTarget = ({ ast, componentName, }) => {
+    let found = null;
+    recast.types.visit(ast, {
+        visitImportDeclaration(astPath) {
+            var _a;
+            if (found) {
+                return false;
+            }
+            const node = astPath.node;
+            if (typeof node.source.value !== 'string') {
+                return false;
+            }
+            const matchingSpecifier = (_a = node.specifiers) === null || _a === void 0 ? void 0 : _a.find((specifier) => {
+                var _a;
+                return ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === componentName;
+            });
+            if (!matchingSpecifier) {
+                return false;
+            }
+            if (matchingSpecifier.type === 'ImportDefaultSpecifier') {
+                found = {
+                    importPath: node.source.value,
+                    exportName: 'default',
+                };
+                return false;
+            }
+            if (matchingSpecifier.type === 'ImportSpecifier' &&
+                matchingSpecifier.imported.type === 'Identifier') {
+                found = {
+                    importPath: node.source.value,
+                    exportName: matchingSpecifier.imported.name,
+                };
+                return false;
+            }
+            if (matchingSpecifier.type === 'ImportSpecifier' &&
+                matchingSpecifier.imported.type === 'StringLiteral') {
+                found = {
+                    importPath: node.source.value,
+                    exportName: matchingSpecifier.imported.value,
+                };
+                return false;
+            }
+            return false;
+        },
+    });
+    return found;
+};
+const getExportedName = (exported) => {
+    if (!exported) {
+        return null;
+    }
+    if (!isRecord(exported)) {
+        return null;
+    }
+    if (exported.type === 'Identifier' && typeof exported.name === 'string') {
+        return exported.name;
+    }
+    if (exported.type === 'StringLiteral' && typeof exported.value === 'string') {
+        return exported.value;
+    }
+    return null;
+};
+const getSpecifierLocalName = (specifier) => {
+    if (specifier.local.type === 'Identifier') {
+        return specifier.local.name;
+    }
+    return null;
+};
+const findReExportTargets = ({ ast, exportName, }) => {
+    const targets = [];
+    recast.types.visit(ast, {
+        visitExportNamedDeclaration(astPath) {
+            var _a;
+            const node = astPath.node;
+            if (typeof ((_a = node.source) === null || _a === void 0 ? void 0 : _a.value) !== 'string') {
+                return false;
+            }
+            for (const specifier of node.specifiers) {
+                if (specifier.type !== 'ExportSpecifier') {
+                    continue;
+                }
+                const exportedName = getExportedName(specifier.exported);
+                if (exportedName !== exportName) {
+                    continue;
+                }
+                const localName = getSpecifierLocalName(specifier);
+                if (!localName) {
+                    continue;
+                }
+                targets.push({
+                    importPath: node.source.value,
+                    exportName: localName === 'default' ? 'default' : localName,
+                });
+            }
+            return false;
+        },
+        visitExportAllDeclaration(astPath) {
+            const node = astPath.node;
+            if (typeof node.source.value !== 'string') {
+                return false;
+            }
+            targets.push({
+                importPath: node.source.value,
+                exportName,
+            });
+            return false;
+        },
+    });
+    return targets;
+};
+const resolveImportPath = ({ importPath, fromFile, }) => {
+    if (!importPath.startsWith('.')) {
+        throw new Error(`Cannot resolve non-relative import ${importPath}`);
+    }
+    const basePath = node_path_1.default.resolve(node_path_1.default.dirname(fromFile), importPath);
+    const candidates = node_path_1.default.extname(basePath)
+        ? [basePath]
+        : [
+            ...extensionsToProbe.map((extension) => `${basePath}${extension}`),
+            ...extensionsToProbe.map((extension) => node_path_1.default.join(basePath, `index${extension}`)),
+        ];
+    const existingFile = candidates.find((candidate) => {
+        return node_fs_1.default.existsSync(candidate) && node_fs_1.default.statSync(candidate).isFile();
+    });
+    if (!existingFile) {
+        throw new Error(`Could not find imported component file ${importPath}`);
+    }
+    return existingFile;
+};
+const locationFromNode = (node) => {
+    if (!node.loc) {
+        return null;
+    }
+    return {
+        line: node.loc.start.line,
+        column: node.loc.start.column,
+    };
+};
+const findLocalSymbolLocation = ({ ast, name, }) => {
+    let location = null;
+    recast.types.visit(ast, {
+        visitVariableDeclarator(astPath) {
+            if (location) {
+                return false;
+            }
+            const { node } = astPath;
+            if (node.id.type === 'Identifier' && node.id.name === name) {
+                location = locationFromNode(node);
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+        visitFunctionDeclaration(astPath) {
+            var _a;
+            if (location) {
+                return false;
+            }
+            const { node } = astPath;
+            if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
+                location = locationFromNode(node);
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+        visitClassDeclaration(astPath) {
+            var _a;
+            if (location) {
+                return false;
+            }
+            const { node } = astPath;
+            if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
+                location = locationFromNode(node);
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+    });
+    return location;
+};
+const findDefaultExportLocation = (ast) => {
+    let location = null;
+    let exportedIdentifier = null;
+    recast.types.visit(ast, {
+        visitExportDefaultDeclaration(astPath) {
+            var _a;
+            if (location || exportedIdentifier) {
+                return false;
+            }
+            const { node } = astPath;
+            if (node.declaration.type === 'Identifier') {
+                exportedIdentifier = node.declaration.name;
+                return false;
+            }
+            location = (_a = locationFromNode(node.declaration)) !== null && _a !== void 0 ? _a : locationFromNode(node);
+            return false;
+        },
+    });
+    if (exportedIdentifier) {
+        return findLocalSymbolLocation({ ast, name: exportedIdentifier });
+    }
+    return location;
+};
+const findLocalComponentDeclaration = ({ ast, name, }) => {
+    let declaration = null;
+    recast.types.visit(ast, {
+        visitVariableDeclarator(astPath) {
+            if (declaration) {
+                return false;
+            }
+            const { node } = astPath;
+            if (node.id.type === 'Identifier' && node.id.name === name) {
+                declaration = node;
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+        visitFunctionDeclaration(astPath) {
+            var _a;
+            if (declaration) {
+                return false;
+            }
+            const { node } = astPath;
+            if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
+                declaration = node;
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+        visitClassDeclaration(astPath) {
+            var _a;
+            if (declaration) {
+                return false;
+            }
+            const { node } = astPath;
+            if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
+                declaration = node;
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+    });
+    return declaration;
+};
+const getTopLevelReturnStatement = (statements) => {
+    const returnStatements = [];
+    for (const statement of statements) {
+        if (recast.types.namedTypes.ReturnStatement.check(statement)) {
+            returnStatements.push(statement);
+        }
+    }
+    if (returnStatements.length !== 1) {
+        return null;
+    }
+    const singleReturn = returnStatements[0];
+    const finalStatement = statements.at(-1);
+    if (singleReturn !== finalStatement) {
+        return null;
+    }
+    return singleReturn;
+};
+const getReturnedJsxFromFunction = (fn) => {
+    if (fn.type === 'ArrowFunctionExpression') {
+        if (fn.body.type === 'JSXElement' || fn.body.type === 'JSXFragment') {
+            return fn.body;
+        }
+        if (fn.body.type !== 'BlockStatement') {
+            return null;
+        }
+        const arrowReturnStatement = getTopLevelReturnStatement(fn.body.body);
+        if (!(arrowReturnStatement === null || arrowReturnStatement === void 0 ? void 0 : arrowReturnStatement.argument)) {
+            return null;
+        }
+        return arrowReturnStatement.argument.type === 'JSXElement' ||
+            arrowReturnStatement.argument.type === 'JSXFragment'
+            ? arrowReturnStatement.argument
+            : null;
+    }
+    if (fn.body.type !== 'BlockStatement') {
+        return null;
+    }
+    const returnStatement = getTopLevelReturnStatement(fn.body.body);
+    if (!(returnStatement === null || returnStatement === void 0 ? void 0 : returnStatement.argument)) {
+        return null;
+    }
+    return returnStatement.argument.type === 'JSXElement' ||
+        returnStatement.argument.type === 'JSXFragment'
+        ? returnStatement.argument
+        : null;
+};
+const findRenderMethod = (declaration) => {
+    const renderMethod = declaration.body.body.find((member) => {
+        return (member.type === 'ClassMethod' &&
+            member.kind === 'method' &&
+            member.key.type === 'Identifier' &&
+            member.key.name === 'render');
+    });
+    return (renderMethod === null || renderMethod === void 0 ? void 0 : renderMethod.type) === 'ClassMethod' ? renderMethod : null;
+};
+const getComponentRootNode = (declaration) => {
+    if (declaration.type === 'VariableDeclarator') {
+        if (!declaration.init ||
+            (declaration.init.type !== 'ArrowFunctionExpression' &&
+                declaration.init.type !== 'FunctionExpression')) {
+            return null;
+        }
+        return getReturnedJsxFromFunction(declaration.init);
+    }
+    if (declaration.type === 'ArrowFunctionExpression' ||
+        declaration.type === 'FunctionExpression' ||
+        declaration.type === 'FunctionDeclaration') {
+        return getReturnedJsxFromFunction(declaration);
+    }
+    if (declaration.type !== 'ClassDeclaration') {
+        return null;
+    }
+    const renderMethod = findRenderMethod(declaration);
+    if (!renderMethod) {
+        return null;
+    }
+    const returnStatement = getTopLevelReturnStatement(renderMethod.body.body);
+    if (!(returnStatement === null || returnStatement === void 0 ? void 0 : returnStatement.argument)) {
+        return null;
+    }
+    return returnStatement.argument.type === 'JSXElement' ||
+        returnStatement.argument.type === 'JSXFragment'
+        ? returnStatement.argument
+        : null;
+};
+const createSequenceElement = () => {
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier('Sequence'), []), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier('Sequence')), []);
+};
+const getDefaultExportDeclaration = (ast) => {
+    let declaration = null;
+    let identifierName = null;
+    recast.types.visit(ast, {
+        visitExportDefaultDeclaration(astPath) {
+            if (declaration || identifierName) {
+                return false;
+            }
+            const { node } = astPath;
+            if (node.declaration.type === 'Identifier') {
+                identifierName = node.declaration.name;
+                return false;
+            }
+            declaration = node.declaration;
+            return false;
+        },
+    });
+    if (identifierName) {
+        return findLocalComponentDeclaration({ ast, name: identifierName });
+    }
+    return declaration;
+};
+const getDeclarationByExportName = ({ ast, exportName, }) => {
+    if (exportName === 'default') {
+        return getDefaultExportDeclaration(ast);
+    }
+    return findLocalComponentDeclaration({ ast, name: exportName });
+};
+const canAddSequenceToComponent = ({ ast, exportName, }) => {
+    const declaration = getDeclarationByExportName({ ast, exportName });
+    if (!declaration) {
+        return false;
+    }
+    const rootNode = getComponentRootNode(declaration);
+    if (!rootNode) {
+        return false;
+    }
+    if (rootNode.type === 'JSXElement') {
+        if (rootNode.openingElement.selfClosing) {
+            return false;
+        }
+        if (!rootNode.children) {
+            return false;
+        }
+        rootNode.children.push(createSequenceElement());
+        try {
+            recast.print(ast);
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    if (!rootNode.children) {
+        return false;
+    }
+    rootNode.children.push(createSequenceElement());
+    try {
+        recast.print(ast);
+        return true;
+    }
+    catch (_b) {
+        return false;
+    }
+};
+const getComponentLocationInFile = async ({ remotionRoot, fileName, exportName, }) => {
+    var _a, _b;
+    const input = await readSourceFile({ remotionRoot, fileName });
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const astForSequenceSimulation = (0, parse_ast_1.parseAst)(input);
+    const location = exportName === 'default'
+        ? findDefaultExportLocation(ast)
+        : findLocalSymbolLocation({ ast, name: exportName });
+    const canAddSequence = canAddSequenceToComponent({
+        ast: astForSequenceSimulation,
+        exportName,
+    });
+    return {
+        source: node_path_1.default.relative(remotionRoot, fileName),
+        line: (_a = location === null || location === void 0 ? void 0 : location.line) !== null && _a !== void 0 ? _a : 1,
+        column: (_b = location === null || location === void 0 ? void 0 : location.column) !== null && _b !== void 0 ? _b : 0,
+        canAddSequence,
+    };
+};
+const getComponentLocationRecursively = async ({ remotionRoot, fileName, exportName, visited, }) => {
+    const key = `${fileName}:${exportName}`;
+    if (visited.has(key)) {
+        throw new Error(`Could not resolve component export "${exportName}" in ${node_path_1.default.relative(remotionRoot, fileName)}`);
+    }
+    visited.add(key);
+    try {
+        const input = await readSourceFile({ remotionRoot, fileName });
+        const ast = (0, parse_ast_1.parseAst)(input);
+        const localDeclaration = getDeclarationByExportName({
+            ast,
+            exportName,
+        });
+        if (localDeclaration) {
+            return await getComponentLocationInFile({
+                remotionRoot,
+                fileName,
+                exportName,
+            });
+        }
+        const reExportTargets = findReExportTargets({
+            ast,
+            exportName,
+        });
+        for (const target of reExportTargets) {
+            try {
+                const resolvedImportPath = resolveImportPath({
+                    importPath: target.importPath,
+                    fromFile: fileName,
+                });
+                return await getComponentLocationRecursively({
+                    remotionRoot,
+                    fileName: resolvedImportPath,
+                    exportName: target.exportName,
+                    visited,
+                });
+            }
+            catch (_a) {
+                continue;
+            }
+        }
+        if (reExportTargets.length > 0) {
+            throw new Error(`Could not resolve component export "${exportName}" in ${node_path_1.default.relative(remotionRoot, fileName)}`);
+        }
+        return await getComponentLocationInFile({
+            remotionRoot,
+            fileName,
+            exportName,
+        });
+    }
+    finally {
+        visited.delete(key);
+    }
+};
+const resolveCompositionComponent = async ({ remotionRoot, compositionFile, compositionId, }) => {
+    const compositionFileName = node_path_1.default.resolve(remotionRoot, compositionFile);
+    const input = await readSourceFile({
+        remotionRoot,
+        fileName: compositionFileName,
+    });
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const compositionElement = findCompositionElement({ ast, compositionId });
+    if (!compositionElement) {
+        throw new Error(`Could not find composition "${compositionId}"`);
+    }
+    const lazyImportPath = getLazyImportPath(compositionElement);
+    if (lazyImportPath) {
+        const lazyComponentFile = resolveImportPath({
+            importPath: lazyImportPath,
+            fromFile: compositionFileName,
+        });
+        return getComponentLocationRecursively({
+            remotionRoot,
+            fileName: lazyComponentFile,
+            exportName: 'default',
+            visited: new Set(),
+        });
+    }
+    const componentName = getComponentIdentifier(compositionElement);
+    if (!componentName) {
+        throw new Error(`Could not find a component prop for composition "${compositionId}"`);
+    }
+    const importTarget = findImportTarget({ ast, componentName });
+    if (!importTarget) {
+        return getComponentLocationInFile({
+            remotionRoot,
+            fileName: compositionFileName,
+            exportName: componentName,
+        });
+    }
+    const importedComponentFile = resolveImportPath({
+        importPath: importTarget.importPath,
+        fromFile: compositionFileName,
+    });
+    return getComponentLocationRecursively({
+        remotionRoot,
+        fileName: importedComponentFile,
+        exportName: importTarget.exportName,
+        visited: new Set(),
+    });
+};
+exports.resolveCompositionComponent = resolveCompositionComponent;

package/dist/preview-server/routes/add-render.js

@@ -26,6 +26,7 @@ const handleAddRender = ({ input, entryPoint, remotionRoot, logLevel, binariesDi
                 cancelToken: (0, renderer_1.makeCancelSignal)(),
                 concurrency: input.concurrency,
                 crf: input.crf,
+                gopSize: input.gopSize,
                 endFrame: input.endFrame,
                 startFrame: input.startFrame,
                 muted: input.muted,

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

@@ -43,7 +43,7 @@ const getPropsFromObjectExpression = ({ objExpr, keys, }) => {
         }
         const valueExpr = prop.value;
         if (!(0, can_update_sequence_props_1.isStaticValue)(valueExpr)) {
-            out[key] = { canUpdate: false, reason: 'computed' };
+            out[key] = (0, can_update_sequence_props_1.getComputedStatus)(valueExpr);
             continue;
         }
         out[key] = {

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

@@ -1,10 +1,9 @@
 import type { Expression, File, JSXOpeningElement } from '@babel/types';
 import type { SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
-import type { CanUpdateSequencePropsResponseTrue } from 'remotion';
-import type { SequenceNodePath } from 'remotion';
-import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath } from 'remotion';
 export declare const isStaticValue: (node: Expression) => boolean;
 export declare const extractStaticValue: (node: Expression) => unknown;
+export declare const getComputedStatus: (node: Expression) => CanUpdateSequencePropStatus;
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
 export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
 export declare const computeSequencePropsOnlyStatus: ({ fileName, nodePath, keys, remotionRoot, }: {

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.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.computeSequencePropsOnlyStatus = exports.lineColumnToNodePath = exports.findJsxElementAtNodePath = exports.extractStaticValue = exports.isStaticValue = void 0;
+exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.computeSequencePropsOnlyStatus = exports.lineColumnToNodePath = exports.findJsxElementAtNodePath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
@@ -117,6 +117,76 @@ const extractStaticValue = (node) => {
     }
 };
 exports.extractStaticValue = extractStaticValue;
+const getNumericValue = (node) => {
+    if (node.type === 'NumericLiteral') {
+        return node.value;
+    }
+    if (node.type === 'UnaryExpression' &&
+        (node.operator === '-' || node.operator === '+') &&
+        node.argument.type === 'NumericLiteral') {
+        return node.operator === '-' ? -node.argument.value : node.argument.value;
+    }
+    if (node.type === 'TSAsExpression') {
+        return getNumericValue(node.expression);
+    }
+    return null;
+};
+const getInterpolateKeyframes = (node) => {
+    if (node.type === 'TSAsExpression') {
+        return getInterpolateKeyframes(node.expression);
+    }
+    if (node.type !== 'CallExpression') {
+        return undefined;
+    }
+    const callExpression = node;
+    if (callExpression.callee.type !== 'Identifier' ||
+        callExpression.callee.name !== 'interpolate') {
+        return undefined;
+    }
+    const inputArg = callExpression.arguments[1];
+    const outputArg = callExpression.arguments[2];
+    if (!inputArg ||
+        !outputArg ||
+        inputArg.type !== 'ArrayExpression' ||
+        outputArg.type !== 'ArrayExpression') {
+        return undefined;
+    }
+    if (inputArg.elements.length !== outputArg.elements.length) {
+        return undefined;
+    }
+    const keyframes = [];
+    for (let i = 0; i < inputArg.elements.length; i++) {
+        const inputElement = inputArg.elements[i];
+        const outputElement = outputArg.elements[i];
+        if (!inputElement ||
+            !outputElement ||
+            inputElement.type === 'SpreadElement' ||
+            outputElement.type === 'SpreadElement') {
+            return undefined;
+        }
+        const frame = getNumericValue(inputElement);
+        if (frame === null || !(0, exports.isStaticValue)(outputElement)) {
+            return undefined;
+        }
+        keyframes.push({
+            frame,
+            value: (0, exports.extractStaticValue)(outputElement),
+        });
+    }
+    return keyframes.length > 0 ? keyframes : undefined;
+};
+const getComputedStatus = (node) => {
+    const keyframes = getInterpolateKeyframes(node);
+    if (!keyframes) {
+        return { canUpdate: false, reason: 'computed' };
+    }
+    return {
+        canUpdate: false,
+        reason: 'computed',
+        keyframes,
+    };
+};
+exports.getComputedStatus = getComputedStatus;
 const getPropsStatus = (jsxElement) => {
     const props = {};
     for (const attr of jsxElement.attributes) {
@@ -144,11 +214,14 @@ const getPropsStatus = (jsxElement) => {
         }
         if (value.type === 'JSXExpressionContainer') {
             const { expression } = value;
-            if (expression.type === 'JSXEmptyExpression' ||
-                !(0, exports.isStaticValue)(expression)) {
+            if (expression.type === 'JSXEmptyExpression') {
                 props[name] = { canUpdate: false, reason: 'computed' };
                 continue;
             }
+            if (!(0, exports.isStaticValue)(expression)) {
+                props[name] = (0, exports.getComputedStatus)(expression);
+                continue;
+            }
             props[name] = {
                 canUpdate: true,
                 codeValue: (0, exports.extractStaticValue)(expression),
@@ -242,7 +315,7 @@ const getNestedPropStatus = (jsxElement, parentKey, childKey) => {
     }
     const propValue = prop.value;
     if (!(0, exports.isStaticValue)(propValue)) {
-        return { canUpdate: false, reason: 'computed' };
+        return (0, exports.getComputedStatus)(propValue);
     }
     const codeValue = (0, exports.extractStaticValue)(propValue);
     if (!validateStyleValue(childKey, codeValue)) {

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

@@ -27,7 +27,9 @@ const attrName = (str) => (0, exports.fg)(166, 226, 46, str);
 exports.attrName = attrName;
 const equals = (str) => (0, exports.fg)(249, 38, 114, str);
 exports.equals = equals;
-const punctuation = (str) => (0, exports.fg)(248, 248, 242, str);
+// Use the terminal's default foreground color so punctuation is visible in both
+// light and dark terminal themes.
+const punctuation = (str) => str;
 exports.punctuation = punctuation;
 const stringValue = (str) => (0, exports.fg)(230, 219, 116, str);
 exports.stringValue = stringValue;

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

@@ -28,7 +28,7 @@ const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectInd
     }
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     const parsedDefault = defaultValue !== null ? JSON.parse(defaultValue) : null;
-    const { output, oldValueString, formatted, logLine, effectCallee } = await (0, update_effect_props_1.updateEffectProps)({
+    const { output, oldValueString, formatted, logLine, effectCallee, removedProps, } = await (0, update_effect_props_1.updateEffectProps)({
         input: fileContents,
         sequenceNodePath: sequenceNodePath.nodePath,
         effectIndex,
@@ -37,11 +37,16 @@ const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectInd
             value: JSON.parse(value),
             defaultValue: parsedDefault,
         },
+        schema,
     });
     const defaultValueString = parsedDefault !== null ? JSON.stringify(parsedDefault) : null;
     const normalizedOld = (0, log_update_1.normalizeQuotes)(oldValueString);
     const normalizedNew = (0, log_update_1.normalizeQuotes)(value);
     const normalizedDefault = defaultValueString !== null ? (0, log_update_1.normalizeQuotes)(defaultValueString) : null;
+    const normalizedRemovedProps = removedProps.map((prop) => ({
+        ...prop,
+        valueString: (0, log_update_1.normalizeQuotes)(prop.valueString),
+    }));
     const undoPropChange = (0, format_effect_prop_change_1.formatEffectPropChange)({
         effectName: effectCallee,
         key,
@@ -49,7 +54,7 @@ const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectInd
         newValueString: normalizedOld,
         defaultValueString: normalizedDefault,
         removedProps: [],
-        addedProps: [],
+        addedProps: normalizedRemovedProps,
     });
     const redoPropChange = (0, format_effect_prop_change_1.formatEffectPropChange)({
         effectName: effectCallee,
@@ -57,7 +62,7 @@ const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectInd
         oldValueString: normalizedOld,
         newValueString: normalizedNew,
         defaultValueString: normalizedDefault,
-        removedProps: [],
+        removedProps: normalizedRemovedProps,
         addedProps: [],
     });
     (0, undo_stack_1.pushToUndoStack)({
@@ -86,7 +91,7 @@ const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectInd
         defaultValueString,
         formatted,
         logLevel,
-        removedProps: [],
+        removedProps,
         addedProps: [],
     });
     (0, undo_stack_1.printUndoHint)(logLevel);

package/dist/routes.js

@@ -45,6 +45,7 @@ const client_render_queue_1 = require("./client-render-queue");
 const get_file_source_1 = require("./helpers/get-file-source");
 const get_installed_installable_packages_1 = require("./helpers/get-installed-installable-packages");
 const open_in_editor_1 = require("./helpers/open-in-editor");
+const resolve_composition_component_1 = require("./helpers/resolve-composition-component");
 const resolve_output_path_1 = require("./helpers/resolve-output-path");
 const api_routes_1 = require("./preview-server/api-routes");
 const get_package_manager_1 = require("./preview-server/get-package-manager");
@@ -201,6 +202,41 @@ const handleOpenInEditor = async (remotionRoot, req, res, logLevel) => {
         }));
     }
 };
+const handleGetCompositionComponentInfo = async (remotionRoot, req, res) => {
+    if (req.method === 'OPTIONS') {
+        res.statusCode = 200;
+        res.end();
+        return;
+    }
+    res.setHeader('content-type', 'application/json');
+    try {
+        const body = (await (0, parse_body_1.parseRequestBody)(req));
+        if (typeof body.compositionFile !== 'string') {
+            throw new TypeError('Need to pass compositionFile');
+        }
+        if (typeof body.compositionId !== 'string') {
+            throw new TypeError('Need to pass compositionId');
+        }
+        const location = await (0, resolve_composition_component_1.resolveCompositionComponent)({
+            remotionRoot,
+            compositionFile: body.compositionFile,
+            compositionId: body.compositionId,
+        });
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: true,
+            location,
+            canAddSequence: location.canAddSequence,
+        }));
+    }
+    catch (err) {
+        res.writeHead(200);
+        res.end(JSON.stringify({
+            success: false,
+            error: err.message,
+        }));
+    }
+};
 const validateSameOrigin = (req) => {
     const { origin, host } = req.headers;
     if (origin) {
@@ -330,6 +366,9 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
     if (url.pathname === '/api/open-in-editor') {
         return handleOpenInEditor(remotionRoot, request, response, logLevel);
     }
+    if (url.pathname === '/api/composition-component-info') {
+        return handleGetCompositionComponentInfo(remotionRoot, request, response);
+    }
     if (url.pathname === `${staticHash}/api/add-asset`) {
         return handleAddAsset({
             req: request,

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.465",
+	"version": "4.0.467",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.465",
+		"remotion": "4.0.467",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.465",
-		"@remotion/renderer": "4.0.465",
-		"@remotion/studio-shared": "4.0.465",
+		"@remotion/bundler": "4.0.467",
+		"@remotion/renderer": "4.0.467",
+		"@remotion/studio-shared": "4.0.467",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -39,7 +39,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.465",
+		"@remotion/eslint-config-internal": "4.0.467",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"