@remotion/studio-server 4.0.475 → 4.0.477

package/dist/codemods/duplicate-composition.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseAndApplyCodemod = exports.formatOutput = void 0;
+const imports_1 = require("../helpers/imports");
 const parse_ast_1 = require("./parse-ast");
 const recast_mods_1 = require("./recast-mods");
 const getPrettier = async () => {
@@ -71,6 +72,14 @@ const parseAndApplyCodemod = ({ input, codeMod, }) => {
     if (changesMade.length === 0) {
         throw new Error('Unable to calculate the changes needed for this file. Edit the file manually.');
     }
+    if (codeMod.type === 'duplicate-composition' && codeMod.tag) {
+        (0, imports_1.ensureNamedImport)({
+            ast: newAst,
+            importedName: codeMod.tag,
+            sourcePath: 'remotion',
+            localName: codeMod.tag,
+        });
+    }
     const output = (0, parse_ast_1.serializeAst)(newAst);
     return { changesMade, newContents: output };
 };

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -391,6 +391,36 @@ const normalizeEasingAfterRemovingKeyframe = ({ extraArgs, previousSegmentCount,
         needsEasingImport: setEasingOption({ options, easing }),
     };
 };
+const normalizeEasingAfterRemovingKeyframes = ({ extraArgs, previousSegmentCount, nextSegmentCount, removedKeyframeIndexes, }) => {
+    const options = getInlineOptionsFromExtraArgs(extraArgs);
+    if (!options) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    const easing = getExistingEasingArrayOrNull({
+        options,
+        segmentCount: previousSegmentCount,
+    });
+    if (easing === null) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    for (const removedKeyframeIndex of [...removedKeyframeIndexes].sort((first, second) => second - first)) {
+        if (easing.length === 0) {
+            break;
+        }
+        const easingIndexToRemove = removedKeyframeIndex === 0 ? 0 : removedKeyframeIndex - 1;
+        easing.splice(easingIndexToRemove, 1);
+    }
+    while (easing.length > nextSegmentCount) {
+        easing.pop();
+    }
+    while (easing.length < nextSegmentCount) {
+        easing.push('linear');
+    }
+    return {
+        extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
+        needsEasingImport: setEasingOption({ options, easing }),
+    };
+};
 const validatePosterize = (posterize) => {
     if (posterize === undefined) {
         return;
@@ -614,7 +644,6 @@ const removeKeyframe = ({ expression, frame, }) => {
     };
 };
 const moveKeyframes = ({ expression, moves, }) => {
-    var _a;
     const existing = getInterpolationExpression(expression);
     if (!existing) {
         throw new Error('Cannot move keyframe in non-interpolated expression');
@@ -639,28 +668,38 @@ const moveKeyframes = ({ expression, moves, }) => {
         }
     }
     const movedFromFrames = new Set(moveMap.keys());
-    const nextFrames = new Set();
-    for (const keyframe of existing.keyframes) {
-        const nextFrame = (_a = moveMap.get(keyframe.frame)) !== null && _a !== void 0 ? _a : keyframe.frame;
-        if (nextFrames.has(nextFrame)) {
-            throw new Error(`Cannot move keyframe to frame ${nextFrame}: frame already exists`);
+    const movedToFrames = new Set(moveMap.values());
+    const removedKeyframeIndexes = [];
+    const nextKeyframes = existing.keyframes.flatMap((keyframe, index) => {
+        const movedFrame = moveMap.get(keyframe.frame);
+        if (movedFrame !== undefined) {
+            return [{ ...keyframe, frame: movedFrame }];
         }
-        if (!movedFromFrames.has(keyframe.frame) && moveMap.has(nextFrame)) {
-            throw new Error(`Cannot move keyframe to frame ${nextFrame}: frame already exists`);
+        if (movedToFrames.has(keyframe.frame) &&
+            !movedFromFrames.has(keyframe.frame)) {
+            removedKeyframeIndexes.push(index);
+            return [];
         }
-        nextFrames.add(nextFrame);
+        return [keyframe];
+    });
+    const nextFrames = new Set();
+    for (const keyframe of nextKeyframes) {
+        if (nextFrames.has(keyframe.frame)) {
+            throw new Error(`Cannot move keyframe to frame ${keyframe.frame}: frame already exists`);
+        }
+        nextFrames.add(keyframe.frame);
     }
+    const normalizedEasing = normalizeEasingAfterRemovingKeyframes({
+        extraArgs: existing.extraArgs,
+        previousSegmentCount: Math.max(existing.keyframes.length - 1, 0),
+        nextSegmentCount: Math.max(nextKeyframes.length - 1, 0),
+        removedKeyframeIndexes,
+    });
     return createInterpolateExpression({
         callee: existing.callee,
         input: existing.input,
-        extraArgs: existing.extraArgs,
-        keyframes: existing.keyframes.map((keyframe) => {
-            var _a;
-            return ({
-                ...keyframe,
-                frame: (_a = moveMap.get(keyframe.frame)) !== null && _a !== void 0 ? _a : keyframe.frame,
-            });
-        }),
+        extraArgs: normalizedEasing.extraArgs,
+        keyframes: nextKeyframes,
     });
 };
 const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {

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

@@ -515,10 +515,15 @@ const createStringAttribute = (name, value) => {
 const createBooleanAttribute = (name, value) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer(recast.types.builders.booleanLiteral(value)));
 };
-const createPositionAbsoluteStyleAttribute = () => {
-    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression([
+const formatTranslateValue = ({ x, y }) => `${x}px ${y}px`;
+const createPositionAbsoluteStyleAttribute = (position) => {
+    const properties = [
         recast.types.builders.objectProperty(recast.types.builders.identifier('position'), recast.types.builders.stringLiteral('absolute')),
-    ])));
+    ];
+    if (position) {
+        properties.push(recast.types.builders.objectProperty(recast.types.builders.identifier('translate'), recast.types.builders.stringLiteral(formatTranslateValue(position))));
+    }
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression(properties)));
 };
 const createStaticFileSrcAttribute = ({ staticFileLocalName, src, }) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('src'), recast.types.builders.jsxExpressionContainer(recast.types.builders.callExpression(recast.types.builders.identifier(staticFileLocalName), [recast.types.builders.stringLiteral(src)])));
@@ -535,25 +540,27 @@ const createComponentProp = ({ name, value, }) => {
 const createStringSrcAttribute = (src) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('src'), recast.types.builders.stringLiteral(src));
 };
-const createSolidElement = ({ localName, width, height, }) => {
+const createSolidElement = ({ localName, width, height, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         createNumberAttribute('width', width),
         createNumberAttribute('height', height),
-        createPositionAbsoluteStyleAttribute(),
+        createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };
-const createComponentElement = ({ localName, props, }) => {
+const createComponentElement = ({ localName, props, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         ...props.map(createComponentProp),
-        createPositionAbsoluteStyleAttribute(),
+        createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };
-const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, }) => {
+const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         staticFileLocalName === null
             ? createStringSrcAttribute(src)
             : createStaticFileSrcAttribute({ staticFileLocalName, src }),
-        ...(addPositionStyle ? [createPositionAbsoluteStyleAttribute()] : []),
+        ...(addPositionStyle
+            ? [createPositionAbsoluteStyleAttribute(position)]
+            : []),
         ...(dimensions
             ? [
                 createNumberAttribute('width', dimensions.width),
@@ -1007,6 +1014,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             localName: solidLocalName,
             width: element.width,
             height: element.height,
+            position: element.position,
         });
     }
     if (element.type === 'component') {
@@ -1019,6 +1027,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
         return createComponentElement({
             localName: componentLocalName,
             props: element.props,
+            position: element.position,
         });
     }
     if (element.type === 'asset') {
@@ -1048,6 +1057,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             staticFileLocalName,
             src: element.src,
             dimensions: element.dimensions,
+            position: element.position,
         });
     }
     throw new Error('Unsupported element type');

package/dist/preview-server/jsx-component-identity.d.ts

@@ -0,0 +1,12 @@
+import type { File, JSXOpeningElement } from '@babel/types';
+export declare class JsxElementIdentityMismatchError extends Error {
+    constructor();
+}
+export declare const getJsxComponentIdentity: ({ ast, jsxElement, }: {
+    ast: File;
+    jsxElement: JSXOpeningElement;
+}) => string | null;
+export declare const jsxComponentIdentitiesMatch: ({ expected, actual, }: {
+    expected: string | null;
+    actual: string | null;
+}) => boolean;

package/dist/preview-server/jsx-component-identity.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsxComponentIdentitiesMatch = exports.getJsxComponentIdentity = exports.JsxElementIdentityMismatchError = void 0;
+const imports_1 = require("../helpers/imports");
+class JsxElementIdentityMismatchError extends Error {
+    constructor() {
+        super('JSX element identity changed');
+    }
+}
+exports.JsxElementIdentityMismatchError = JsxElementIdentityMismatchError;
+const jsxMemberToString = (expr) => {
+    if (expr.type === 'JSXIdentifier') {
+        return expr.name;
+    }
+    return `${jsxMemberToString(expr.object)}.${expr.property.name}`;
+};
+const getJsxRootIdentifier = (expr) => {
+    if (expr.type === 'JSXIdentifier') {
+        return expr;
+    }
+    return getJsxRootIdentifier(expr.object);
+};
+const getTagName = (node) => {
+    if (node.name.type === 'JSXIdentifier') {
+        return node.name.name;
+    }
+    if (node.name.type === 'JSXMemberExpression') {
+        return jsxMemberToString(node.name);
+    }
+    return null;
+};
+const getMemberPath = (tagName) => {
+    const dotIndex = tagName.indexOf('.');
+    return dotIndex === -1 ? '' : tagName.slice(dotIndex + 1);
+};
+const getMemberPathAfterImportName = ({ tagName, importName, }) => {
+    const parts = tagName.split('.');
+    const importNameIndex = parts.indexOf(importName);
+    if (importNameIndex === -1) {
+        return getMemberPath(tagName);
+    }
+    return parts.slice(importNameIndex + 1).join('.');
+};
+const sourcePathToIdentityPrefix = (sourcePath) => {
+    if (sourcePath === 'remotion') {
+        return 'dev.remotion.remotion';
+    }
+    if (sourcePath.startsWith('@remotion/')) {
+        const packageName = sourcePath
+            .slice('@remotion/'.length)
+            .replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+        return `dev.remotion.${packageName}`;
+    }
+    return null;
+};
+const makeImportedIdentity = ({ sourcePath, importName, memberPath, }) => {
+    const prefix = sourcePathToIdentityPrefix(sourcePath);
+    if (prefix === null) {
+        return null;
+    }
+    return [prefix, importName, memberPath].filter(Boolean).join('.');
+};
+const getJsxComponentIdentity = ({ ast, jsxElement, }) => {
+    var _a;
+    const tagName = getTagName(jsxElement);
+    if (tagName === null) {
+        return null;
+    }
+    const rootIdentifier = jsxElement.name.type === 'JSXIdentifier'
+        ? jsxElement.name
+        : jsxElement.name.type === 'JSXMemberExpression'
+            ? getJsxRootIdentifier(jsxElement.name)
+            : null;
+    if (rootIdentifier === null) {
+        return tagName;
+    }
+    for (const node of ast.program.body) {
+        if (node.type !== 'ImportDeclaration') {
+            continue;
+        }
+        const sourcePath = String(node.source.value);
+        for (const specifier of node.specifiers) {
+            if (specifier.type === 'ImportSpecifier' &&
+                ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === rootIdentifier.name) {
+                const importName = (0, imports_1.getImportedName)(specifier);
+                return makeImportedIdentity({
+                    sourcePath,
+                    importName,
+                    memberPath: getMemberPath(tagName),
+                });
+            }
+            if (specifier.type === 'ImportNamespaceSpecifier' &&
+                specifier.local.name === rootIdentifier.name) {
+                const [importName, ...members] = getMemberPath(tagName).split('.');
+                if (!importName) {
+                    return null;
+                }
+                return makeImportedIdentity({
+                    sourcePath,
+                    importName,
+                    memberPath: members.join('.'),
+                });
+            }
+            if (specifier.type === 'ImportDefaultSpecifier' &&
+                specifier.local.name === rootIdentifier.name) {
+                return makeImportedIdentity({
+                    sourcePath,
+                    importName: 'default',
+                    memberPath: getMemberPathAfterImportName({
+                        tagName,
+                        importName: rootIdentifier.name,
+                    }),
+                });
+            }
+        }
+    }
+    return tagName;
+};
+exports.getJsxComponentIdentity = getJsxComponentIdentity;
+const jsxComponentIdentitiesMatch = ({ expected, actual, }) => {
+    if (expected === null) {
+        return true;
+    }
+    return expected === actual;
+};
+exports.jsxComponentIdentitiesMatch = jsxComponentIdentitiesMatch;

package/dist/preview-server/routes/add-sequence-keyframe.js

@@ -74,6 +74,7 @@ const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, v
         fileContents: output,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
         nodePath: updatedNodePath,
+        componentIdentity: null,
         effects: [],
     });
     const updatedSubscriptionKey = { ...nodePath, nodePath: updatedNodePath };

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

@@ -106,8 +106,12 @@ const extractDefaultPropsFromSource = (input, compositionId) => {
                 this.traverse(path);
                 return;
             }
-            if ((0, can_update_sequence_props_1.isStaticValue)(expression)) {
-                const value = (0, can_update_sequence_props_1.extractStaticValue)(expression);
+            if ((0, can_update_sequence_props_1.isStaticValue)(expression, {
+                allowSpecialValues: true,
+            })) {
+                const value = (0, can_update_sequence_props_1.extractStaticValue)(expression, {
+                    allowSpecialValues: true,
+                });
                 if (value !== null &&
                     typeof value === 'object' &&
                     !Array.isArray(value)) {

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

@@ -1,30 +1,37 @@
 import type { Expression, File, JSXOpeningElement } from '@babel/types';
 import type { SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath } from 'remotion';
-export declare const isStaticValue: (node: Expression) => boolean;
-export declare const extractStaticValue: (node: Expression) => unknown;
+type StaticValueOptions = {
+    allowSpecialValues: boolean;
+};
+export declare const isStaticValue: (node: Expression, options?: StaticValueOptions) => boolean;
+export declare const extractStaticValue: (node: Expression, options?: StaticValueOptions) => unknown;
 export declare const getComputedStatus: (node: Expression, ast: File) => CanUpdateSequencePropStatus;
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
 export declare const findNodePathForJsxElement: (ast: File, target: JSXOpeningElement) => SequenceNodePath | null;
 export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
-export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, keys, effects, }: {
+export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, componentIdentity, keys, effects, }: {
     fileContents: string;
     nodePath: SequenceNodePath;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatus: ({ fileName, nodePath, keys, effects, remotionRoot, }: {
+export declare const computeSequencePropsStatus: ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, }: {
     fileName: string;
     nodePath: SequenceNodePath;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, keys, effects, remotionRoot, logLevel, }: {
+export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, }: {
     fileName: string;
     line: number;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
 }) => SubscribeToSequencePropsResponse;
+export {};

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

@@ -38,10 +38,12 @@ const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
+const no_react_1 = require("remotion/no-react");
 const parse_ast_1 = require("../../codemods/parse-ast");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const jsx_component_identity_1 = require("../jsx-component-identity");
 const jsx_element_not_found_at_location_error_1 = require("../jsx-element-not-found-at-location-error");
 const can_update_effect_props_1 = require("./can-update-effect-props");
 const staticStatus = (codeValue) => ({
@@ -51,7 +53,42 @@ const staticStatus = (codeValue) => ({
 const computedStatus = () => ({
     status: 'computed',
 });
-const isStaticValue = (node) => {
+// Mirrors the encoding that staticFile() from "remotion" applies at runtime
+const encodeStaticFilePath = (path) => {
+    return path.split('/').map(encodeURIComponent).join('/');
+};
+// Detects calls that the Studio knows how to serialize back to source:
+// staticFile("...") and new Date("...")
+const getSpecialValueCall = (node) => {
+    if (node.type === 'CallExpression') {
+        const call = node;
+        if (call.callee.type === 'Identifier' &&
+            call.callee.name === 'staticFile' &&
+            call.arguments.length === 1 &&
+            call.arguments[0].type === 'StringLiteral') {
+            return { type: 'static-file', value: call.arguments[0].value };
+        }
+        return null;
+    }
+    if (node.type === 'NewExpression') {
+        const newExpr = node;
+        if (newExpr.callee.type === 'Identifier' &&
+            newExpr.callee.name === 'Date' &&
+            newExpr.arguments.length === 1 &&
+            newExpr.arguments[0].type === 'StringLiteral') {
+            return { type: 'date', value: newExpr.arguments[0].value };
+        }
+        return null;
+    }
+    return null;
+};
+const defaultStaticValueOptions = {
+    allowSpecialValues: false,
+};
+const isStaticValue = (node, options = defaultStaticValueOptions) => {
+    if (options.allowSpecialValues && getSpecialValueCall(node) !== null) {
+        return true;
+    }
     switch (node.type) {
         case 'NumericLiteral':
         case 'StringLiteral':
@@ -63,18 +100,29 @@ const isStaticValue = (node) => {
                 node.operator === '+') &&
                 node.argument.type === 'NumericLiteral');
         case 'TSAsExpression':
-            return (0, exports.isStaticValue)(node.expression);
+            return (0, exports.isStaticValue)(node.expression, options);
         case 'ArrayExpression':
-            return node.elements.every((el) => el !== null && el.type !== 'SpreadElement' && (0, exports.isStaticValue)(el));
+            return node.elements.every((el) => el !== null &&
+                el.type !== 'SpreadElement' &&
+                (0, exports.isStaticValue)(el, options));
         case 'ObjectExpression':
             return node.properties.every((prop) => prop.type === 'ObjectProperty' &&
-                (0, exports.isStaticValue)(prop.value));
+                (0, exports.isStaticValue)(prop.value, options));
         default:
             return false;
     }
 };
 exports.isStaticValue = isStaticValue;
-const extractStaticValue = (node) => {
+const extractStaticValue = (node, options = defaultStaticValueOptions) => {
+    if (options.allowSpecialValues) {
+        const specialValue = getSpecialValueCall(node);
+        if (specialValue !== null) {
+            if (specialValue.type === 'static-file') {
+                return `${no_react_1.NoReactInternals.FILE_TOKEN}${encodeStaticFilePath(specialValue.value)}`;
+            }
+            return `${no_react_1.NoReactInternals.DATE_TOKEN}${specialValue.value}`;
+        }
+    }
     switch (node.type) {
         case 'NumericLiteral':
         case 'StringLiteral':
@@ -91,13 +139,13 @@ const extractStaticValue = (node) => {
             return undefined;
         }
         case 'TSAsExpression':
-            return (0, exports.extractStaticValue)(node.expression);
+            return (0, exports.extractStaticValue)(node.expression, options);
         case 'ArrayExpression':
             return node.elements.map((el) => {
                 if (el === null || el.type === 'SpreadElement') {
                     return undefined;
                 }
-                return (0, exports.extractStaticValue)(el);
+                return (0, exports.extractStaticValue)(el, options);
             });
         case 'ObjectExpression': {
             const obj = node;
@@ -112,7 +160,7 @@ const extractStaticValue = (node) => {
                             ? String(p.key.value)
                             : undefined;
                     if (key !== undefined) {
-                        result[key] = (0, exports.extractStaticValue)(p.value);
+                        result[key] = (0, exports.extractStaticValue)(p.value, options);
                     }
                 }
             }
@@ -306,6 +354,25 @@ const getInterpolationKeyframes = (node, ast) => {
     if (node.type === 'TSAsExpression') {
         return getInterpolationKeyframes(node.expression, ast);
     }
+    if (node.type === 'CallExpression' &&
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'String' &&
+        node.arguments.length === 1 &&
+        node.arguments[0].type !== 'ArgumentPlaceholder' &&
+        node.arguments[0].type !== 'JSXNamespacedName' &&
+        node.arguments[0].type !== 'SpreadElement') {
+        const interpolation = getInterpolationKeyframes(node.arguments[0], ast);
+        if (!interpolation) {
+            return undefined;
+        }
+        return {
+            ...interpolation,
+            keyframes: interpolation.keyframes.map((keyframe) => ({
+                ...keyframe,
+                value: String(keyframe.value),
+            })),
+        };
+    }
     if (node.type !== 'CallExpression') {
         return undefined;
     }
@@ -580,12 +647,18 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, ast, keys, }) => {
     }
     return filteredProps;
 };
-const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, effects, }) => {
+const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, effects, }) => {
     const ast = (0, parse_ast_1.parseAst)(fileContents);
     const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
     if (!jsxElement) {
         throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
     }
+    if (!(0, jsx_component_identity_1.jsxComponentIdentitiesMatch)({
+        expected: componentIdentity,
+        actual: (0, jsx_component_identity_1.getJsxComponentIdentity)({ ast, jsxElement }),
+    })) {
+        throw new jsx_component_identity_1.JsxElementIdentityMismatchError();
+    }
     const filteredProps = computeSequenceOnlyPropsRecord({ jsxElement, ast, keys });
     const effectsStatuses = computeEffectsForJsx({ ast, jsxElement, effects });
     return {
@@ -595,7 +668,7 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, e
     };
 };
 exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
-const computeSequencePropsStatus = ({ fileName, nodePath, keys, effects, remotionRoot, }) => {
+const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, }) => {
     const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
         remotionRoot,
         fileName,
@@ -605,12 +678,13 @@ const computeSequencePropsStatus = ({ fileName, nodePath, keys, effects, remotio
     return (0, exports.computeSequencePropsStatusFromContent)({
         fileContents,
         nodePath,
+        componentIdentity,
         keys,
         effects,
     });
 };
 exports.computeSequencePropsStatus = computeSequencePropsStatus;
-const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, keys, effects, remotionRoot, logLevel, }) => {
+const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, }) => {
     try {
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
@@ -633,6 +707,7 @@ const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, keys, ef
             status: (0, exports.computeSequencePropsStatus)({
                 fileName,
                 nodePath: resolvedNodePath,
+                componentIdentity,
                 keys,
                 effects,
                 remotionRoot,

package/dist/preview-server/routes/delete-keyframes.js

@@ -215,6 +215,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
             fileContents: output,
             keys: (0, studio_shared_1.getAllSchemaKeys)(keyframe.schema),
             nodePath: keyframe.nodePath.nodePath,
+            componentIdentity: null,
             effects: [],
         });
         return {

package/dist/preview-server/routes/download-remote-asset.js

@@ -257,6 +257,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
         src: assetPath,
         srcType: 'static',
         dimensions: fileType.dimensions,
+        position: null,
     };
     return {
         assetPath,

package/dist/preview-server/routes/insert-jsx-element.js

@@ -14,7 +14,16 @@ const validateDimension = (name, value) => {
         throw new Error(`${name} must be a positive number`);
     }
 };
+const validatePosition = (position) => {
+    if (position === null) {
+        return;
+    }
+    if (!Number.isFinite(position.x) || !Number.isFinite(position.y)) {
+        throw new Error('Position must be finite');
+    }
+};
 const validateElement = (element) => {
+    validatePosition(element.position);
     if (element.type === 'solid') {
         validateDimension('width', element.width);
         validateDimension('height', element.height);

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

@@ -1,3 +1,20 @@
-import type { SaveSequencePropsRequest, SaveSequencePropsResponse } from '@remotion/studio-shared';
+import type { SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse } from '@remotion/studio-shared';
+import { type SequencePropsNodeUpdate } from '../../codemods/update-sequence-props/update-sequence-props';
 import type { ApiHandler } from '../api-types';
+type ResolvedSequencePropEdit = {
+    index: number;
+    fileName: SaveSequencePropEdit['fileName'];
+    nodePath: SaveSequencePropEdit['nodePath'];
+    key: SaveSequencePropEdit['key'];
+    value: unknown;
+    valueString: string;
+    defaultValue: unknown | null;
+    defaultValueString: string | null;
+    schema: SaveSequencePropEdit['schema'];
+};
+export declare const convertSequencePropEditToCodemodChange: (edit: Pick<ResolvedSequencePropEdit, "defaultValue" | "key" | "nodePath" | "schema" | "value">) => SequencePropsNodeUpdate;
+export declare const shouldSuppressHmrForSequencePropEdits: (edits: readonly {
+    key: string;
+}[]) => boolean;
 export declare const saveSequencePropsHandler: ApiHandler<SaveSequencePropsRequest, SaveSequencePropsResponse>;
+export {};

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

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveSequencePropsHandler = void 0;
+exports.saveSequencePropsHandler = exports.shouldSuppressHmrForSequencePropEdits = exports.convertSequencePropEditToCodemodChange = void 0;
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
-const no_react_1 = require("remotion/no-react");
 const update_sequence_props_1 = require("../../codemods/update-sequence-props/update-sequence-props");
 const file_watcher_1 = require("../../file-watcher");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
@@ -13,6 +12,24 @@ const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
 const log_update_1 = require("./log-updates/log-update");
 const save_props_mutex_1 = require("./save-props-mutex");
+const convertSequencePropEditToCodemodChange = (edit) => {
+    return {
+        nodePath: edit.nodePath.nodePath,
+        updates: [
+            {
+                key: edit.key,
+                value: edit.value,
+                defaultValue: edit.defaultValue,
+            },
+        ],
+        schema: edit.schema,
+    };
+};
+exports.convertSequencePropEditToCodemodChange = convertSequencePropEditToCodemodChange;
+const shouldSuppressHmrForSequencePropEdits = (edits) => {
+    return edits.every((edit) => edit.key !== 'showInTimeline');
+};
+exports.shouldSuppressHmrForSequencePropEdits = shouldSuppressHmrForSequencePropEdits;
 const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLabel }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
     var _a;
     if (edits.length === 0) {
@@ -54,19 +71,7 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const { output, formatted, results: updateResults, } = await (0, update_sequence_props_1.updateMultipleSequenceProps)({
             input: fileContents,
-            changes: group.edits.map((edit) => {
-                return {
-                    nodePath: edit.nodePath.nodePath,
-                    updates: [
-                        {
-                            key: edit.key,
-                            value: edit.value,
-                            defaultValue: edit.defaultValue,
-                        },
-                    ],
-                    schema: no_react_1.NoReactInternals.sequenceSchema,
-                };
-            }),
+            changes: group.edits.map(exports.convertSequencePropEditToCodemodChange),
             prettierConfigOverride: null,
         });
         const [{ logLine: firstLogLine }] = updateResults;
@@ -89,17 +94,20 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
     }
     const undoMessage = `↩️  ${undoLabel}`;
     const redoMessage = `↪️  ${redoLabel}`;
+    const suppressHmr = (0, exports.shouldSuppressHmrForSequencePropEdits)(edits);
     (0, undo_stack_1.pushTransactionToUndoStack)({
         snapshots,
         logLevel,
         remotionRoot,
         description: { undoMessage, redoMessage },
         entryType: 'sequence-props',
-        suppressHmrOnFileRestore: true,
+        suppressHmrOnFileRestore: suppressHmr,
     });
     for (const [absolutePath, output] of outputByPath) {
         (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+        if (suppressHmr) {
+            (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+        }
         (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
     }
     for (const { edits: groupEdits, fileRelativeToRoot } of editGroups.values()) {
@@ -137,6 +145,7 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
             fileContents: output,
             keys: (0, studio_shared_1.getAllSchemaKeys)(edit.schema),
             nodePath: edit.nodePath.nodePath,
+            componentIdentity: null,
             effects: [],
         });
         return {

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

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

package/dist/preview-server/routes/update-sequence-keyframe-settings.js

@@ -77,6 +77,7 @@ const updateSequenceKeyframeSettingsHandler = ({ input: { fileName, nodePath, ke
         fileContents: output,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
         nodePath: updatedNodePath,
+        componentIdentity: null,
         effects: [],
     });
     const updatedSubscriptionKey = { ...nodePath, nodePath: updatedNodePath };

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

@@ -1,10 +1,11 @@
 import { type SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
 import type { SequenceNodePath } from 'remotion';
-export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, nodePath: preferredNodePath, keys, effects, remotionRoot, clientId, logLevel, }: {
+export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, }: {
     fileName: string;
     line: number;
     column: number;
     nodePath: SequenceNodePath | null;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;

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

@@ -8,42 +8,64 @@ const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const file_watcher_1 = require("../file-watcher");
+const jsx_component_identity_1 = require("./jsx-component-identity");
 const jsx_element_not_found_at_location_error_1 = require("./jsx-element-not-found-at-location-error");
 const live_events_1 = require("./live-events");
 const node_path_cache_1 = require("./node-path-cache");
 const can_update_sequence_props_1 = require("./routes/can-update-sequence-props");
 const sequencePropsWatchers = {};
-const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, keys, effects, remotionRoot, logLevel, }) => {
+const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, componentIdentity, keys, effects, remotionRoot, logLevel, }) => {
     if (preferredNodePath) {
-        const fromNodePath = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
-            fileName,
-            nodePath: preferredNodePath,
-            keys,
-            effects,
-            remotionRoot,
-        });
-        return {
-            status: fromNodePath,
-            nodePath: {
-                absolutePath: node_path_1.default.resolve(remotionRoot, fileName),
+        try {
+            const fromNodePath = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+                fileName,
                 nodePath: preferredNodePath,
-                sequenceKeys: keys,
-                effectKeys: effects,
-            },
-            success: true,
-        };
+                componentIdentity,
+                keys,
+                effects,
+                remotionRoot,
+            });
+            return {
+                status: fromNodePath,
+                nodePath: {
+                    absolutePath: node_path_1.default.resolve(remotionRoot, fileName),
+                    nodePath: preferredNodePath,
+                    sequenceKeys: keys,
+                    effectKeys: effects,
+                },
+                success: true,
+            };
+        }
+        catch (error) {
+            if (!(error instanceof jsx_component_identity_1.JsxElementIdentityMismatchError ||
+                error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError)) {
+                throw error;
+            }
+        }
     }
     // Try cached nodePath first (handles stale source maps after suppressed rebuilds)
     const cachedNodePath = (0, node_path_cache_1.getCachedNodePath)(fileName, line, column);
     if (cachedNodePath) {
-        const cachedResult = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
-            fileName,
-            nodePath: cachedNodePath,
-            keys,
-            effects,
-            remotionRoot,
-        });
-        if (cachedResult.canUpdate) {
+        const cachedResult = (() => {
+            try {
+                return (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+                    fileName,
+                    nodePath: cachedNodePath,
+                    componentIdentity,
+                    keys,
+                    effects,
+                    remotionRoot,
+                });
+            }
+            catch (error) {
+                if (error instanceof jsx_component_identity_1.JsxElementIdentityMismatchError ||
+                    error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError) {
+                    return null;
+                }
+                throw error;
+            }
+        })();
+        if (cachedResult === null || cachedResult === void 0 ? void 0 : cachedResult.canUpdate) {
             return {
                 status: cachedResult,
                 nodePath: {
@@ -59,6 +81,7 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, key
     const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromFilenameByLine)({
         fileName,
         line,
+        componentIdentity,
         keys,
         effects,
         remotionRoot,
@@ -66,13 +89,14 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, key
     });
     return status;
 };
-const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: preferredNodePath, keys, effects, remotionRoot, clientId, logLevel, }) => {
+const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, }) => {
     var _a;
     const initialResult = getSequencePropsStatus({
         fileName,
         line,
         column,
         preferredNodePath,
+        componentIdentity,
         keys,
         effects,
         remotionRoot,
@@ -105,6 +129,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
                 const result = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
                     fileContents: event.content,
                     nodePath: nodePath.nodePath,
+                    componentIdentity,
                     keys,
                     effects,
                 });
@@ -125,7 +150,8 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
                 });
             }
             catch (error) {
-                if (error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError) {
+                if (error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError ||
+                    error instanceof jsx_component_identity_1.JsxElementIdentityMismatchError) {
                     (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
                         listener.sendEventToClientId(clientId, {
                             type: 'lost-node-path',

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.475",
+	"version": "4.0.477",
 	"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.475",
+		"remotion": "4.0.477",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.475",
-		"@remotion/renderer": "4.0.475",
-		"@remotion/studio-shared": "4.0.475",
+		"@remotion/bundler": "4.0.477",
+		"@remotion/renderer": "4.0.477",
+		"@remotion/studio-shared": "4.0.477",
 		"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.475",
+		"@remotion/eslint-config-internal": "4.0.477",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"