@remotion/studio-server 4.0.468 → 4.0.470

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

@@ -111,6 +111,7 @@ const applyVisualControlHandler = async ({ input: { fileName, changes }, remotio
     (0, undo_stack_1.pushToUndoStack)({
         filePath: absolutePath,
         oldContents: fileContents,
+        newContents: null,
         logLevel,
         remotionRoot,
         logLine,

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

@@ -6,15 +6,6 @@ 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, }: {
-    fileName: string;
-    nodePath: SequenceNodePath;
-    keys: string[];
-    remotionRoot: string;
-}) => {
-    canUpdate: true;
-    props: Record<string, CanUpdateSequencePropStatus>;
-};
 export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, keys, effects, }: {
     fileContents: string;
     nodePath: SequenceNodePath;

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

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.computeSequencePropsOnlyStatus = exports.lineColumnToNodePath = exports.findJsxElementAtNodePath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
+exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.lineColumnToNodePath = exports.findJsxElementAtNodePath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const recast = __importStar(require("recast"));
@@ -128,6 +128,174 @@ const getNumericValue = (node) => {
     }
     return null;
 };
+const getExtrapolateType = (node) => {
+    if (node.type === 'StringLiteral') {
+        if (node.value === 'extend' ||
+            node.value === 'identity' ||
+            node.value === 'clamp' ||
+            node.value === 'wrap') {
+            return node.value;
+        }
+        return null;
+    }
+    if (node.type === 'TSAsExpression') {
+        return getExtrapolateType(node.expression);
+    }
+    return null;
+};
+const getKeyframeEasing = (node) => {
+    if (node.type === 'TSAsExpression') {
+        return getKeyframeEasing(node.expression);
+    }
+    if (node.type === 'MemberExpression' &&
+        node.object.type === 'Identifier' &&
+        node.object.name === 'Easing' &&
+        node.property.type === 'Identifier' &&
+        node.property.name === 'linear' &&
+        node.computed === false) {
+        return 'linear';
+    }
+    if (node.type !== 'CallExpression' ||
+        node.callee.type !== 'MemberExpression' ||
+        node.callee.object.type !== 'Identifier' ||
+        node.callee.object.name !== 'Easing' ||
+        node.callee.property.type !== 'Identifier' ||
+        node.callee.property.name !== 'bezier' ||
+        node.callee.computed) {
+        return null;
+    }
+    if (node.arguments.length !== 4) {
+        return null;
+    }
+    const values = node.arguments.map((arg) => {
+        if (arg.type === 'ArgumentPlaceholder' ||
+            arg.type === 'JSXNamespacedName' ||
+            arg.type === 'SpreadElement') {
+            return null;
+        }
+        return getNumericValue(arg);
+    });
+    if (values.some((v) => v === null)) {
+        return null;
+    }
+    return values;
+};
+const getKeyframeEasingArray = ({ easingNode, segments, }) => {
+    if (segments === 0) {
+        return [];
+    }
+    if (easingNode.type === 'TSAsExpression') {
+        return getKeyframeEasingArray({
+            easingNode: easingNode.expression,
+            segments,
+        });
+    }
+    if (easingNode.type === 'ArrayExpression') {
+        if (easingNode.elements.length !== segments) {
+            return null;
+        }
+        const parsed = easingNode.elements.map((element) => {
+            if (!element || element.type === 'SpreadElement') {
+                return null;
+            }
+            return getKeyframeEasing(element);
+        });
+        if (parsed.some((value) => value === null)) {
+            return null;
+        }
+        return parsed;
+    }
+    const easing = getKeyframeEasing(easingNode);
+    if (!easing) {
+        return null;
+    }
+    return new Array(segments).fill(easing);
+};
+const getInterpolationMetadata = (interpolationFunction, callExpression, keyframeCount) => {
+    const segments = Math.max(0, keyframeCount - 1);
+    const defaultClamping = interpolationFunction === 'interpolateColors'
+        ? {
+            left: 'clamp',
+            right: 'clamp',
+        }
+        : {
+            left: 'extend',
+            right: 'extend',
+        };
+    const defaults = {
+        easing: new Array(segments).fill('linear'),
+        clamping: defaultClamping,
+        posterize: undefined,
+    };
+    const optionsArg = callExpression.arguments[3];
+    if (!optionsArg) {
+        return defaults;
+    }
+    if (optionsArg.type !== 'ObjectExpression') {
+        return null;
+    }
+    let { easing } = defaults;
+    let { clamping } = defaults;
+    let posterize;
+    for (const property of optionsArg.properties) {
+        if (property.type !== 'ObjectProperty' || property.computed) {
+            return null;
+        }
+        const key = property.key.type === 'Identifier'
+            ? property.key.name
+            : property.key.type === 'StringLiteral'
+                ? property.key.value
+                : null;
+        if (!key) {
+            return null;
+        }
+        const value = property.value;
+        if (key === 'easing') {
+            if (interpolationFunction === 'interpolateColors') {
+                return null;
+            }
+            const parsedEasing = getKeyframeEasingArray({
+                easingNode: value,
+                segments,
+            });
+            if (!parsedEasing) {
+                return null;
+            }
+            easing = parsedEasing;
+            continue;
+        }
+        if (key === 'extrapolateLeft' || key === 'extrapolateRight') {
+            if (interpolationFunction === 'interpolateColors') {
+                return null;
+            }
+            const extrapolateType = getExtrapolateType(value);
+            if (!extrapolateType) {
+                return null;
+            }
+            clamping =
+                key === 'extrapolateLeft'
+                    ? { ...clamping, left: extrapolateType }
+                    : { ...clamping, right: extrapolateType };
+            continue;
+        }
+        if (key === 'posterize') {
+            const parsedPosterize = getNumericValue(value);
+            if (parsedPosterize === null ||
+                !Number.isFinite(parsedPosterize) ||
+                parsedPosterize <= 0) {
+                return null;
+            }
+            posterize = parsedPosterize;
+            continue;
+        }
+        return null;
+    }
+    return {
+        easing,
+        clamping,
+        posterize,
+    };
+};
 const getInterpolationKeyframes = (node) => {
     if (node.type === 'TSAsExpression') {
         return getInterpolationKeyframes(node.expression);
@@ -141,6 +309,7 @@ const getInterpolationKeyframes = (node) => {
             callExpression.callee.name !== 'interpolateColors')) {
         return undefined;
     }
+    const interpolationFunction = callExpression.callee.name;
     const inputArg = callExpression.arguments[1];
     const outputArg = callExpression.arguments[2];
     if (!inputArg ||
@@ -171,17 +340,34 @@ const getInterpolationKeyframes = (node) => {
             value: (0, exports.extractStaticValue)(outputElement),
         });
     }
-    return keyframes.length > 0 ? keyframes : undefined;
+    if (keyframes.length === 0) {
+        return undefined;
+    }
+    const metadata = getInterpolationMetadata(interpolationFunction, callExpression, keyframes.length);
+    if (!metadata) {
+        return undefined;
+    }
+    return {
+        interpolationFunction,
+        keyframes,
+        easing: metadata.easing,
+        clamping: metadata.clamping,
+        posterize: metadata.posterize,
+    };
 };
 const getComputedStatus = (node) => {
-    const keyframes = getInterpolationKeyframes(node);
-    if (!keyframes) {
+    const interpolation = getInterpolationKeyframes(node);
+    if (!interpolation) {
         return { canUpdate: false, reason: 'computed' };
     }
     return {
         canUpdate: false,
-        reason: 'computed',
-        keyframes,
+        reason: 'keyframed',
+        interpolationFunction: interpolation.interpolationFunction,
+        keyframes: interpolation.keyframes,
+        easing: interpolation.easing,
+        clamping: interpolation.clamping,
+        posterize: interpolation.posterize,
     };
 };
 exports.getComputedStatus = getComputedStatus;
@@ -345,24 +531,6 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, keys, }) => {
     }
     return filteredProps;
 };
-const computeSequencePropsOnlyStatus = ({ fileName, nodePath, keys, remotionRoot, }) => {
-    const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
-        remotionRoot,
-        fileName,
-        action: 'read',
-    });
-    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-    const ast = (0, parse_ast_1.parseAst)(fileContents);
-    const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
-    if (!jsxElement) {
-        throw new Error('Cannot compute sequence props: Could not find a JSX element at the specified location');
-    }
-    return {
-        canUpdate: true,
-        props: computeSequenceOnlyPropsRecord({ jsxElement, keys }),
-    };
-};
-exports.computeSequencePropsOnlyStatus = computeSequencePropsOnlyStatus;
 const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, effects, }) => {
     const ast = (0, parse_ast_1.parseAst)(fileContents);
     const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);

package/dist/preview-server/routes/composition-component-info.d.ts

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

package/dist/preview-server/routes/composition-component-info.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compositionComponentInfoHandler = void 0;
+const resolve_composition_component_1 = require("../../helpers/resolve-composition-component");
+const compositionComponentInfoHandler = async ({ input: { compositionFile, compositionId }, remotionRoot }) => {
+    if (typeof compositionFile !== 'string') {
+        throw new TypeError('Need to pass compositionFile');
+    }
+    if (typeof compositionId !== 'string') {
+        throw new TypeError('Need to pass compositionId');
+    }
+    const location = await (0, resolve_composition_component_1.resolveCompositionComponent)({
+        remotionRoot,
+        compositionFile,
+        compositionId,
+    });
+    return {
+        location: {
+            source: location.source,
+            line: location.line,
+            column: location.column,
+        },
+        canAddSequence: location.canAddSequence,
+    };
+};
+exports.compositionComponentInfoHandler = compositionComponentInfoHandler;

package/dist/preview-server/routes/delete-effect-keyframe.d.ts

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

package/dist/preview-server/routes/delete-effect-keyframe.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteEffectKeyframeHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const studio_shared_1 = require("@remotion/studio-shared");
+const parse_ast_1 = require("../../codemods/parse-ast");
+const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const undo_stack_1 = require("../undo-stack");
+const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
+const can_update_effect_props_1 = require("./can-update-effect-props");
+const can_update_sequence_props_1 = require("./can-update-sequence-props");
+const log_effect_update_1 = require("./log-updates/log-effect-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const deleteEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, frame, schema, clientId, }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-effect-keyframe] Received request for fileName="${fileName}" effectIndex=${effectIndex} key="${key}" frame=${frame}`);
+    const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'modify',
+    });
+    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+    const { output, oldValueStrings, newValueStrings, formatted, logLine, effectCallee, } = await (0, update_keyframes_1.updateEffectKeyframes)({
+        input: fileContents,
+        sequenceNodePath: sequenceNodePath.nodePath,
+        effectIndex,
+        updates: [
+            {
+                key,
+                operation: {
+                    type: 'remove',
+                    frame,
+                },
+            },
+        ],
+    });
+    const oldValueString = oldValueStrings[0];
+    const newValueString = newValueStrings[0];
+    const undoPropChange = `${key} keyframe restored at frame ${frame}`;
+    const redoPropChange = `${key} keyframe deleted at frame ${frame}`;
+    (0, undo_stack_1.pushToUndoStack)({
+        filePath: absolutePath,
+        oldContents: fileContents,
+        newContents: null,
+        logLevel,
+        remotionRoot,
+        logLine,
+        description: {
+            undoMessage: `↩️  ${undoPropChange}`,
+            redoMessage: `↪️  ${redoPropChange}`,
+        },
+        entryType: 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+    (0, log_effect_update_1.logEffectUpdate)({
+        fileRelativeToRoot,
+        line: logLine,
+        effectName: effectCallee,
+        propKey: key,
+        oldValueString,
+        newValueString,
+        defaultValueString: null,
+        formatted,
+        logLevel,
+        removedProps: [],
+        addedProps: [],
+    });
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const ast = (0, parse_ast_1.parseAst)((0, node_fs_1.readFileSync)(absolutePath, 'utf-8'));
+    const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath.nodePath);
+    if (!jsx) {
+        return {
+            canUpdate: false,
+            effectIndex,
+            reason: 'not-found',
+        };
+    }
+    return (0, can_update_effect_props_1.computeEffectPropStatus)({
+        jsx,
+        effectIndex,
+        keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+    });
+});
+exports.deleteEffectKeyframeHandler = deleteEffectKeyframeHandler;

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

@@ -10,45 +10,84 @@ const format_log_file_location_1 = require("../format-log-file-location");
 const undo_stack_1 = require("../undo-stack");
 const formatting_1 = require("./log-updates/formatting");
 const log_update_1 = require("./log-updates/log-update");
-const deleteEffectHandler = async ({ input: { fileName, sequenceNodePath, effectIndex }, remotionRoot, logLevel, }) => {
+const getDeletedEffectDescription = (effectLabels) => {
+    if (effectLabels.length === 1) {
+        return effectLabels[0];
+    }
+    return `${effectLabels.length} effects`;
+};
+const deleteEffectHandler = async ({ input: effects, remotionRoot, logLevel }) => {
+    var _a;
     try {
-        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-effect] Received request for fileName="${fileName}" effectIndex=${effectIndex}`);
-        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
-            remotionRoot,
-            fileName,
-            action: 'modify',
-        });
-        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, formatted, effectLabel, logLine } = await (0, delete_effect_1.deleteEffect)({
-            input: fileContents,
-            sequenceNodePath: sequenceNodePath.nodePath,
-            effectIndex,
-        });
-        (0, undo_stack_1.pushToUndoStack)({
-            filePath: absolutePath,
-            oldContents: fileContents,
-            logLevel,
-            remotionRoot,
-            logLine,
-            description: {
-                undoMessage: `↩️  Deletion of ${effectLabel}`,
-                redoMessage: `↪️  Deletion of ${effectLabel}`,
-            },
-            entryType: 'delete-effect',
-            suppressHmrOnFileRestore: false,
-        });
-        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, undefined);
-        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
-            remotionRoot,
-            absolutePath,
-            line: logLine,
-        });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${(0, formatting_1.strikeThroughOrRemovedPrefix)(effectLabel)}`);
-        if (!formatted) {
-            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        if (effects.length === 0) {
+            throw new Error('No effects were specified for deletion');
+        }
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-effect] Received request to delete ${effects.length} effect target${effects.length === 1 ? '' : 's'}`);
+        const itemsByFileName = new Map();
+        for (const item of effects) {
+            const fileItems = (_a = itemsByFileName.get(item.fileName)) !== null && _a !== void 0 ? _a : [];
+            fileItems.push(item);
+            itemsByFileName.set(item.fileName, fileItems);
+        }
+        const updates = await Promise.all([...itemsByFileName.entries()].map(async ([fileName, fileItems]) => {
+            const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                remotionRoot,
+                fileName,
+                action: 'modify',
+            });
+            const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+            const { output, formatted, effectLabels, logLines } = await (0, delete_effect_1.deleteEffects)({
+                input: fileContents,
+                effects: fileItems.map((item) => item.type === 'single-effect'
+                    ? {
+                        type: 'single-effect',
+                        sequenceNodePath: item.sequenceNodePath.nodePath,
+                        effectIndex: item.effectIndex,
+                    }
+                    : {
+                        type: 'all-effects',
+                        sequenceNodePath: item.sequenceNodePath.nodePath,
+                    }),
+            });
+            return {
+                absolutePath,
+                fileRelativeToRoot,
+                fileContents,
+                output,
+                formatted,
+                effectLabels,
+                logLine: Math.min(...logLines),
+            };
+        }));
+        for (const update of updates) {
+            const deletedEffectDescription = getDeletedEffectDescription(update.effectLabels);
+            (0, undo_stack_1.pushToUndoStack)({
+                filePath: update.absolutePath,
+                oldContents: update.fileContents,
+                newContents: null,
+                logLevel,
+                remotionRoot,
+                logLine: update.logLine,
+                description: {
+                    undoMessage: `↩️  Deletion of ${deletedEffectDescription}`,
+                    redoMessage: `↪️  Deletion of ${deletedEffectDescription}`,
+                },
+                entryType: 'delete-effect',
+                suppressHmrOnFileRestore: false,
+            });
+            (0, undo_stack_1.suppressUndoStackInvalidation)(update.absolutePath);
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(update.absolutePath, update.output, undefined);
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: update.absolutePath,
+                line: update.logLine,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} ${(0, formatting_1.strikeThroughOrRemovedPrefix)(deletedEffectDescription)}`);
+            if (!update.formatted) {
+                (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+            }
+            renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[delete-effect] Wrote ${update.fileRelativeToRoot}${update.formatted ? ' (formatted)' : ''}`);
         }
-        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[delete-effect] Wrote ${fileRelativeToRoot}${formatted ? ' (formatted)' : ''}`);
         (0, undo_stack_1.printUndoHint)(logLevel);
         return {
             success: true,

package/dist/preview-server/routes/delete-jsx-node.js

@@ -9,44 +9,75 @@ const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside
 const format_log_file_location_1 = require("../format-log-file-location");
 const undo_stack_1 = require("../undo-stack");
 const log_update_1 = require("./log-updates/log-update");
-const deleteJsxNodeHandler = async ({ input: { fileName, nodePath }, remotionRoot, logLevel }) => {
+const getDeletedNodeDescription = (nodeLabels) => {
+    if (nodeLabels.length === 1) {
+        return nodeLabels[0];
+    }
+    return `${nodeLabels.length} JSX nodes`;
+};
+const deleteJsxNodeHandler = async ({ input: { nodes }, remotionRoot, logLevel }) => {
+    var _a;
     try {
-        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-jsx-node] Received request for fileName="${fileName}"`);
-        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
-            remotionRoot,
-            fileName,
-            action: 'modify',
-        });
-        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, formatted, nodeLabel, logLine } = await (0, delete_jsx_node_1.deleteJsxNode)({
-            input: fileContents,
-            nodePath,
-        });
-        (0, undo_stack_1.pushToUndoStack)({
-            filePath: absolutePath,
-            oldContents: fileContents,
-            logLevel,
-            remotionRoot,
-            logLine,
-            description: {
-                undoMessage: `↩️  Deletion of ${nodeLabel}`,
-                redoMessage: `↪️  Deletion of ${nodeLabel}`,
-            },
-            entryType: 'delete-jsx-node',
-            suppressHmrOnFileRestore: false,
-        });
-        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, undefined);
-        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
-            remotionRoot,
-            absolutePath,
-            line: logLine,
-        });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Deleted ${nodeLabel}`);
-        if (!formatted) {
-            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        if (nodes.length === 0) {
+            throw new Error('No JSX nodes were specified for deletion');
+        }
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-jsx-node] Received request to delete ${nodes.length} JSX node${nodes.length === 1 ? '' : 's'}`);
+        const itemsByFileName = new Map();
+        for (const item of nodes) {
+            const fileItems = (_a = itemsByFileName.get(item.fileName)) !== null && _a !== void 0 ? _a : [];
+            fileItems.push(item);
+            itemsByFileName.set(item.fileName, fileItems);
+        }
+        const updates = await Promise.all([...itemsByFileName.entries()].map(async ([fileName, fileItems]) => {
+            const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                remotionRoot,
+                fileName,
+                action: 'modify',
+            });
+            const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+            const { output, formatted, nodeLabels, logLines } = await (0, delete_jsx_node_1.deleteJsxNodes)({
+                input: fileContents,
+                nodePaths: fileItems.map((item) => item.nodePath),
+            });
+            return {
+                absolutePath,
+                fileRelativeToRoot,
+                fileContents,
+                output,
+                formatted,
+                nodeLabels,
+                logLine: Math.min(...logLines),
+            };
+        }));
+        for (const update of updates) {
+            const deletedNodeDescription = getDeletedNodeDescription(update.nodeLabels);
+            (0, undo_stack_1.pushToUndoStack)({
+                filePath: update.absolutePath,
+                oldContents: update.fileContents,
+                newContents: null,
+                logLevel,
+                remotionRoot,
+                logLine: update.logLine,
+                description: {
+                    undoMessage: `↩️  Deletion of ${deletedNodeDescription}`,
+                    redoMessage: `↪️  Deletion of ${deletedNodeDescription}`,
+                },
+                entryType: 'delete-jsx-node',
+                suppressHmrOnFileRestore: false,
+            });
+            (0, undo_stack_1.suppressUndoStackInvalidation)(update.absolutePath);
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(update.absolutePath, update.output, undefined);
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: update.absolutePath,
+                line: update.logLine,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Deleted ${deletedNodeDescription}`);
+            if (!update.formatted) {
+                (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+            }
+            renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[delete-jsx-node] Wrote ${update.fileRelativeToRoot}${update.formatted ? ' (formatted)' : ''}`);
         }
-        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[delete-jsx-node] Wrote ${fileRelativeToRoot}${formatted ? ' (formatted)' : ''}`);
         (0, undo_stack_1.printUndoHint)(logLevel);
         return {
             success: true,

package/dist/preview-server/routes/delete-sequence-keyframe.d.ts

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