@remotion/studio-server 4.0.463 → 4.0.465

package/dist/codemods/apply-codemod-to-file.d.ts

@@ -0,0 +1,6 @@
+import type { RecastCodemod, SymbolicatedStackFrame } from '@remotion/studio-shared';
+export declare const resolveFilePathFromSymbolicatedStack: (remotionRoot: string, stack: SymbolicatedStackFrame) => string;
+export declare const applyCodemodToFile: ({ filePath, codeMod, }: {
+    filePath: string;
+    codeMod: RecastCodemod;
+}) => Promise<string>;

package/dist/codemods/apply-codemod-to-file.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyCodemodToFile = exports.resolveFilePathFromSymbolicatedStack = void 0;
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const can_update_default_props_1 = require("../preview-server/routes/can-update-default-props");
+const duplicate_composition_1 = require("./duplicate-composition");
+const resolveFilePathFromSymbolicatedStack = (remotionRoot, stack) => {
+    if (!stack.originalFileName) {
+        throw new Error('Could not determine the file where this composition is defined');
+    }
+    const absolutePath = node_path_1.default.resolve(remotionRoot, stack.originalFileName);
+    const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
+    if (fileRelativeToRoot.startsWith('..')) {
+        throw new Error('Cannot apply codemod to a file outside the project');
+    }
+    if (!(0, node_fs_1.existsSync)(absolutePath)) {
+        throw new Error(`File not found: ${stack.originalFileName}`);
+    }
+    return absolutePath;
+};
+exports.resolveFilePathFromSymbolicatedStack = resolveFilePathFromSymbolicatedStack;
+const applyCodemodToFile = async ({ filePath, codeMod, }) => {
+    (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
+    const input = (0, node_fs_1.readFileSync)(filePath, 'utf-8');
+    const { newContents } = (0, duplicate_composition_1.parseAndApplyCodemod)({
+        codeMod,
+        input,
+    });
+    return (0, duplicate_composition_1.formatOutput)(newContents);
+};
+exports.applyCodemodToFile = applyCodemodToFile;

package/dist/codemods/delete-effect.d.ts

@@ -0,0 +1,12 @@
+import type { SequenceNodePath } from 'remotion';
+export declare const deleteEffect: ({ input, sequenceNodePath, effectIndex, prettierConfigOverride, }: {
+    input: string;
+    sequenceNodePath: SequenceNodePath;
+    effectIndex: number;
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    formatted: boolean;
+    effectLabel: string;
+    logLine: number;
+}>;

package/dist/codemods/delete-effect.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteEffect = void 0;
+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");
+const update_effect_props_1 = require("./update-effect-props/update-effect-props");
+const getEffectsArray = (attr) => {
+    if (!attr.value || attr.value.type !== 'JSXExpressionContainer') {
+        throw new Error('Cannot delete effect: effects prop is not an array');
+    }
+    const expr = attr.value.expression;
+    if (expr.type !== 'ArrayExpression') {
+        throw new Error('Cannot delete effect: effects prop is not an array');
+    }
+    return expr;
+};
+const deleteEffect = async ({ input, sequenceNodePath, effectIndex, prettierConfigOverride, }) => {
+    var _a, _b;
+    var _c, _d, _e;
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath);
+    if (!jsx) {
+        throw new Error('Could not find a JSX element at the specified location to delete effect');
+    }
+    const attr = (0, update_effect_props_1.findEffectsAttr)((_c = jsx.attributes) !== null && _c !== void 0 ? _c : []);
+    if (!attr) {
+        throw new Error('Could not find effects on the target JSX element');
+    }
+    const effectsArray = getEffectsArray(attr);
+    const found = (0, update_effect_props_1.findEffectCallExpression)({ attr, effectIndex });
+    if (found.kind === 'error') {
+        throw new Error(`Cannot delete effect: ${found.reason}`);
+    }
+    effectsArray.elements.splice(effectIndex, 1);
+    if (effectsArray.elements.length === 0) {
+        const attrIndex = jsx.attributes.indexOf(attr);
+        if (attrIndex !== -1) {
+            jsx.attributes.splice(attrIndex, 1);
+        }
+    }
+    const finalFile = (0, parse_ast_1.serializeAst)(ast);
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: finalFile,
+        prettierConfigOverride,
+    });
+    return {
+        output,
+        formatted,
+        effectLabel: `${found.callee}()`,
+        logLine: (_e = (_d = (_a = found.call.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : (_b = jsx.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _e !== void 0 ? _e : 1,
+    };
+};
+exports.deleteEffect = deleteEffect;

package/dist/codemods/duplicate-composition.js

@@ -69,7 +69,7 @@ const parseAndApplyCodemod = ({ input, codeMod, }) => {
         codeMod,
     });
     if (changesMade.length === 0) {
-        throw new Error('Unable to calculate the changes needed for this file. Edit the root file manually.');
+        throw new Error('Unable to calculate the changes needed for this file. Edit the file manually.');
     }
     const output = (0, parse_ast_1.serializeAst)(newAst);
     return { changesMade, newContents: output };

package/dist/codemods/recast-mods.js

@@ -60,11 +60,65 @@ const mapReturnStatement = (statement, transformation, changesMade) => {
     if (!statement.argument) {
         return statement;
     }
+    const replacement = transformLoneJsxElement(statement.argument, transformation, changesMade);
+    if (replacement !== null) {
+        return { ...statement, argument: replacement };
+    }
     return {
         ...statement,
         argument: mapAll(statement.argument, transformation, changesMade),
     };
 };
+const nullLiteral = () => ({ type: 'NullLiteral' });
+// When a node was originally parenthesized (e.g. the `<JSX/>` inside
+// `return (<JSX/>)`), Babel records `extra.parenthesized` on it. If we move
+// such a node into a JSXFragment without clearing that hint, recast prints
+// stray `(` / `)` characters around it as JSX text. Clear the hint so the
+// node prints cleanly in its new context.
+const stripParenthesizedExtra = (node) => {
+    if (!node.extra) {
+        return node;
+    }
+    const { parenthesized: _p, parenStart: _ps, ...rest } = node.extra;
+    return { ...node, extra: rest };
+};
+const wrapInJsxFragment = (children) => ({
+    type: 'JSXFragment',
+    openingFragment: { type: 'JSXOpeningFragment' },
+    closingFragment: { type: 'JSXClosingFragment' },
+    children: children.map(stripParenthesizedExtra),
+});
+// When a <Composition> JSX element appears in a position where it cannot
+// simply be removed from a parent's children list (e.g. as the sole return
+// value of a wrapper component or as the concise body of an arrow function),
+// we still want delete/rename/duplicate codemods to work. This helper detects
+// that case and produces a structurally-valid replacement expression.
+const transformLoneJsxElement = (expression, transformation, changesMade) => {
+    if (expression.type !== 'JSXElement') {
+        return null;
+    }
+    const compId = getCompositionIdFromJSXElement(expression);
+    if (compId === null) {
+        return null;
+    }
+    const isMatch = (transformation.type === 'delete-composition' &&
+        compId === transformation.idToDelete) ||
+        (transformation.type === 'rename-composition' &&
+            compId === transformation.idToRename) ||
+        (transformation.type === 'duplicate-composition' &&
+            compId === transformation.idToDuplicate);
+    if (!isMatch) {
+        return null;
+    }
+    const transformed = mapJsxChild(expression, transformation, changesMade);
+    if (transformed.length === 0) {
+        return nullLiteral();
+    }
+    if (transformed.length === 1) {
+        return transformed[0];
+    }
+    return wrapInJsxFragment(transformed);
+};
 const mapJsxElementOrFragment = (jsxFragment, transformation, changesMade) => {
     return {
         ...jsxFragment,
@@ -129,6 +183,16 @@ const mapRecognizedType = (expression, transformation, changesMade) => {
     }
     if (expression.type === 'ArrowFunctionExpression' ||
         expression.type === 'FunctionExpression') {
+        if (expression.type === 'ArrowFunctionExpression' &&
+            expression.body.type === 'JSXElement') {
+            const replacement = transformLoneJsxElement(expression.body, transformation, changesMade);
+            if (replacement !== null) {
+                return {
+                    ...expression,
+                    body: replacement,
+                };
+            }
+        }
         return {
             ...expression,
             body: mapAll(expression.body, transformation, changesMade),

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

@@ -12,6 +12,7 @@ export type UpdateEffectPropsResult = {
     logLine: number;
     effectCallee: string;
 };
+export declare const findEffectsAttr: (attrs: readonly unknown[]) => JSXAttribute | null;
 export type EffectArrayElement = {
     kind: 'call';
     callee: string;

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

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateEffectProps = exports.updateEffectPropsAst = exports.findEffectCallExpression = exports.enumerateEffectArrayElements = void 0;
+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 can_update_sequence_props_1 = require("../../preview-server/routes/can-update-sequence-props");
@@ -50,19 +50,19 @@ const parseValueExpression = (value) => {
     }
     return stmt.expression.right;
 };
-const findExperimentalEffectsAttr = (attrs) => {
+const findEffectsAttr = (attrs) => {
     for (const attr of attrs) {
         if (attr.type !== 'JSXAttribute') {
             continue;
         }
         const a = attr;
-        if (a.name.type === 'JSXIdentifier' &&
-            a.name.name === '_experimentalEffects') {
+        if (a.name.type === 'JSXIdentifier' && a.name.name === 'effects') {
             return a;
         }
     }
     return null;
 };
+exports.findEffectsAttr = findEffectsAttr;
 const getCalleeName = (call) => {
     const { callee } = call;
     if (callee.type === 'Identifier') {
@@ -140,9 +140,9 @@ const updateEffectPropsAst = ({ input, sequenceNodePath, effectIndex, update, })
     if (!jsx) {
         throw new Error('Could not find a JSX element at the specified location to update effects');
     }
-    const attr = findExperimentalEffectsAttr((_e = jsx.attributes) !== null && _e !== void 0 ? _e : []);
+    const attr = (0, exports.findEffectsAttr)((_e = jsx.attributes) !== null && _e !== void 0 ? _e : []);
     if (!attr) {
-        throw new Error('Could not find _experimentalEffects on the target JSX element');
+        throw new Error('Could not find effects on the target JSX element');
     }
     const found = (0, exports.findEffectCallExpression)({
         attr,

package/dist/file-watcher.d.ts

@@ -1,11 +1,13 @@
 export type FileChangeEvent = {
     type: 'created';
     content: string;
+    originatorClientId: string | undefined;
 } | {
     type: 'deleted';
 } | {
     type: 'changed';
     content: string;
+    originatorClientId: string | undefined;
 };
 type OnChange = (event: FileChangeEvent) => void;
 export type FileWatcherRegistry = {
@@ -23,7 +25,7 @@ export type FileWatcherRegistry = {
         exists: boolean;
         unwatch: () => void;
     };
-    writeFileAndNotifyFileWatchers: (file: string, content: string) => void;
+    writeFileAndNotifyFileWatchers: (file: string, content: string, originatorClientId: string | undefined) => void;
 };
 export declare const createFileWatcherRegistry: () => FileWatcherRegistry;
 export declare const setFileWatcherRegistry: (registry: FileWatcherRegistry) => () => void;

package/dist/file-watcher.js

@@ -69,7 +69,11 @@ const createFileWatcherRegistry = () => {
             if (existenceOnly) {
                 if (!shared.existedBefore && existsNow) {
                     shared.existedBefore = true;
-                    event = { type: 'created', content: '' };
+                    event = {
+                        type: 'created',
+                        content: '',
+                        originatorClientId: undefined,
+                    };
                 }
                 else if (shared.existedBefore && !existsNow) {
                     shared.existedBefore = false;
@@ -80,7 +84,7 @@ const createFileWatcherRegistry = () => {
                 const content = (0, node_fs_1.readFileSync)(file, 'utf-8');
                 shared.existedBefore = true;
                 shared.lastKnownContent = content;
-                event = { type: 'created', content };
+                event = { type: 'created', content, originatorClientId: undefined };
             }
             else if (shared.existedBefore && !existsNow) {
                 shared.existedBefore = false;
@@ -97,7 +101,7 @@ const createFileWatcherRegistry = () => {
                     return;
                 }
                 shared.lastKnownContent = content;
-                event = { type: 'changed', content };
+                event = { type: 'changed', content, originatorClientId: undefined };
             }
             if (!event) {
                 return;
@@ -119,7 +123,7 @@ const createFileWatcherRegistry = () => {
             },
         };
     };
-    const _writeFileAndNotifyFileWatchers = (file, content) => {
+    const _writeFileAndNotifyFileWatchers = (file, content, originatorClientId) => {
         (0, node_fs_1.writeFileSync)(file, content);
         const shared = sharedWatchers.get(getRegistryKey(file, false));
         if (!shared) {
@@ -128,7 +132,7 @@ const createFileWatcherRegistry = () => {
         shared.lastKnownContent = content;
         shared.existedBefore = true;
         for (const subscriber of shared.subscribers) {
-            subscriber({ type: 'changed', content });
+            subscriber({ type: 'changed', content, originatorClientId });
         }
     };
     return {
@@ -162,10 +166,10 @@ const installFileWatcher = (options) => {
     return (0, exports.getFileWatcherRegistry)().installFileWatcher(options);
 };
 exports.installFileWatcher = installFileWatcher;
-const writeFileAndNotifyFileWatchers = (file, content) => {
+const writeFileAndNotifyFileWatchers = (file, content, originatorClientId) => {
     if (!currentRegistry) {
         return;
     }
-    (0, exports.getFileWatcherRegistry)().writeFileAndNotifyFileWatchers(file, content);
+    (0, exports.getFileWatcherRegistry)().writeFileAndNotifyFileWatchers(file, content, originatorClientId);
 };
 exports.writeFileAndNotifyFileWatchers = writeFileAndNotifyFileWatchers;

package/dist/index.d.ts

@@ -63,7 +63,7 @@ export declare const StudioServerInternals: {
         exists: boolean;
         unwatch: () => void;
     };
-    writeFileAndNotifyFileWatchers: (file: string, content: string) => void;
+    writeFileAndNotifyFileWatchers: (file: string, content: string, originatorClientId: string | undefined) => void;
     createFileWatcherRegistry: () => import("./file-watcher").FileWatcherRegistry;
     setFileWatcherRegistry: (registry: import("./file-watcher").FileWatcherRegistry) => () => void;
     AnsiDiff: typeof AnsiDiff;
@@ -80,6 +80,20 @@ export declare const StudioServerInternals: {
         newContents: string;
         changesMade: import("./codemods/recast-mods").Change[];
     };
+    applyCodemodToFile: ({ filePath, codeMod, }: {
+        filePath: string;
+        codeMod: import("@remotion/studio-shared").RecastCodemod;
+    }) => Promise<string>;
+    formatOutput: (tsContent: string) => Promise<string>;
+    updateDefaultProps: ({ input, compositionId, newDefaultProps, enumPaths, }: {
+        input: string;
+        compositionId: string;
+        newDefaultProps: Record<string, unknown>;
+        enumPaths: import("@remotion/studio-shared").EnumPath[];
+    }) => Promise<{
+        output: string;
+        formatted: boolean;
+    }>;
     getInstalledDependencies: (remotionRoot: string) => {
         dependencies: string[];
         devDependencies: string[];

package/dist/index.js

@@ -6,7 +6,9 @@ const studio_shared_2 = require("@remotion/studio-shared");
 Object.defineProperty(exports, "getDefaultOutLocation", { enumerable: true, get: function () { return studio_shared_2.getDefaultOutLocation; } });
 const ansi_diff_1 = require("./ansi-diff");
 const client_render_queue_1 = require("./client-render-queue");
+const apply_codemod_to_file_1 = require("./codemods/apply-codemod-to-file");
 const duplicate_composition_1 = require("./codemods/duplicate-composition");
+const update_default_props_1 = require("./codemods/update-default-props");
 const file_watcher_1 = require("./file-watcher");
 const get_latest_remotion_version_1 = require("./get-latest-remotion-version");
 const get_installed_dependencies_1 = require("./helpers/get-installed-dependencies");
@@ -32,6 +34,9 @@ exports.StudioServerInternals = {
     AnsiDiff: ansi_diff_1.AnsiDiff,
     formatBytes: studio_shared_1.formatBytes,
     parseAndApplyCodemod: duplicate_composition_1.parseAndApplyCodemod,
+    applyCodemodToFile: apply_codemod_to_file_1.applyCodemodToFile,
+    formatOutput: duplicate_composition_1.formatOutput,
+    updateDefaultProps: update_default_props_1.updateDefaultProps,
     getInstalledDependencies: get_installed_dependencies_1.getInstalledDependencies,
     getInstalledDependenciesWithVersions: get_installed_dependencies_1.getInstalledDependenciesWithVersions,
     getInstallCommand: install_command_1.getInstallCommand,

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

@@ -5,6 +5,7 @@ const add_render_1 = require("./routes/add-render");
 const apply_codemod_1 = require("./routes/apply-codemod");
 const apply_visual_control_change_1 = require("./routes/apply-visual-control-change");
 const cancel_render_1 = require("./routes/cancel-render");
+const delete_effect_1 = require("./routes/delete-effect");
 const delete_jsx_node_1 = require("./routes/delete-jsx-node");
 const delete_static_file_1 = require("./routes/delete-static-file");
 const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
@@ -41,6 +42,7 @@ exports.allApiRoutes = {
     '/api/unsubscribe-from-sequence-props': unsubscribe_from_sequence_props_1.unsubscribeFromSequenceProps,
     '/api/save-sequence-props': save_sequence_props_1.saveSequencePropsHandler,
     '/api/save-effect-props': save_effect_props_1.saveEffectPropsHandler,
+    '/api/delete-effect': delete_effect_1.deleteEffectHandler,
     '/api/delete-jsx-node': delete_jsx_node_1.deleteJsxNodeHandler,
     '/api/duplicate-jsx-node': duplicate_jsx_node_1.duplicateJsxNodeHandler,
     '/api/update-available': update_available_1.handleUpdate,

package/dist/preview-server/dev-middleware/setup-output-filesystem.js

@@ -7,7 +7,7 @@ exports.setupOutputFileSystem = setupOutputFileSystem;
 const memfs_1 = __importDefault(require("memfs"));
 function setupOutputFileSystem(context) {
     const outputFileSystem = memfs_1.default.createFsFromVolume(new memfs_1.default.Volume());
-    // @ts-expect-error output file sytem
-    context.compiler.outputFileSystem = outputFileSystem;
+    context.compiler.outputFileSystem =
+        outputFileSystem;
     context.outputFileSystem = outputFileSystem;
 }

package/dist/preview-server/routes/apply-codemod.js

@@ -1,35 +1,89 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyCodemodHandler = void 0;
 const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
-const duplicate_composition_1 = require("../../codemods/duplicate-composition");
+const apply_codemod_to_file_1 = require("../../codemods/apply-codemod-to-file");
 const simple_diff_1 = require("../../codemods/simple-diff");
 const file_watcher_1 = require("../../file-watcher");
 const project_info_1 = require("../project-info");
+const undo_stack_1 = require("../undo-stack");
 const can_update_default_props_1 = require("./can-update-default-props");
-const applyCodemodHandler = async ({ input: { codemod, dryRun }, logLevel, remotionRoot, entryPoint }) => {
+const getCodemodUndoDescription = (codemod) => {
+    if (codemod.type === 'delete-composition') {
+        return {
+            undoMessage: `↩️  Deletion of composition "${codemod.idToDelete}"`,
+            redoMessage: `↪️  Deletion of composition "${codemod.idToDelete}"`,
+            entryType: codemod.type,
+        };
+    }
+    if (codemod.type === 'rename-composition') {
+        const label = `composition "${codemod.idToRename}" to "${codemod.newId}"`;
+        return {
+            undoMessage: `↩️  Rename of ${label}`,
+            redoMessage: `↪️  Rename of ${label}`,
+            entryType: codemod.type,
+        };
+    }
+    if (codemod.type === 'duplicate-composition') {
+        const label = `composition "${codemod.idToDuplicate}" to "${codemod.newId}"`;
+        return {
+            undoMessage: `↩️  Duplication of ${label}`,
+            redoMessage: `↪️  Duplication of ${label}`,
+            entryType: codemod.type,
+        };
+    }
+    return {
+        undoMessage: '↩️  Visual control change',
+        redoMessage: '↪️  Visual control change',
+        entryType: 'visual-control',
+    };
+};
+const applyCodemodHandler = async ({ input: { codemod, dryRun, symbolicatedStack }, logLevel, remotionRoot, entryPoint, }) => {
+    var _a;
     try {
         const time = Date.now();
-        const projectInfo = await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint);
-        if (!projectInfo.rootFile) {
-            throw new Error('Cannot find root file in project');
+        const filePath = symbolicatedStack
+            ? (0, apply_codemod_to_file_1.resolveFilePathFromSymbolicatedStack)(remotionRoot, symbolicatedStack)
+            : (await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint)).rootFile;
+        if (!filePath) {
+            throw new Error('Cannot find file for composition in project');
         }
-        (0, can_update_default_props_1.checkIfTypeScriptFile)(projectInfo.rootFile);
-        const input = (0, node_fs_1.readFileSync)(projectInfo.rootFile, 'utf-8');
-        const { newContents } = (0, duplicate_composition_1.parseAndApplyCodemod)({
+        (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
+        const input = (0, node_fs_1.readFileSync)(filePath, 'utf-8');
+        const formatted = await (0, apply_codemod_to_file_1.applyCodemodToFile)({
+            filePath,
             codeMod: codemod,
-            input,
         });
-        const formatted = await (0, duplicate_composition_1.formatOutput)(newContents);
         const diff = (0, simple_diff_1.simpleDiff)({
             oldLines: input.split('\n'),
             newLines: formatted.split('\n'),
         });
         if (!dryRun) {
-            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(projectInfo.rootFile, formatted);
+            const { entryType, undoMessage, redoMessage } = getCodemodUndoDescription(codemod);
+            (0, undo_stack_1.pushToUndoStack)({
+                filePath,
+                oldContents: input,
+                logLevel,
+                remotionRoot,
+                logLine: (_a = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalLineNumber) !== null && _a !== void 0 ? _a : 1,
+                description: {
+                    undoMessage,
+                    redoMessage,
+                },
+                entryType,
+                suppressHmrOnFileRestore: false,
+            });
+            (0, undo_stack_1.suppressUndoStackInvalidation)(filePath);
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(filePath, formatted, undefined);
             const end = Date.now() - time;
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blue(`Edited root file in ${end}ms`));
+            const relativePath = node_path_1.default.relative(remotionRoot, filePath);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blue(`Edited ${relativePath} in ${end}ms`));
+            (0, undo_stack_1.printUndoHint)(logLevel);
         }
         return {
             success: true,

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

@@ -126,7 +126,7 @@ const applyVisualControlHandler = async ({ input: { fileName, changes }, remotio
     });
     (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
     (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
-    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, undefined);
     (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
         listener.sendEventToClient({
             type: 'visual-control-values-changed',

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

@@ -9,13 +9,12 @@ const node_path_1 = __importDefault(require("node:path"));
 const parse_ast_1 = require("../../codemods/parse-ast");
 const update_effect_props_1 = require("../../codemods/update-effect-props/update-effect-props");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
-const findExperimentalEffectsAttr = (jsx) => {
+const findEffectsAttr = (jsx) => {
     for (const attr of jsx.attributes) {
         if (attr.type !== 'JSXAttribute') {
             continue;
         }
-        if (attr.name.type === 'JSXIdentifier' &&
-            attr.name.name === '_experimentalEffects') {
+        if (attr.name.type === 'JSXIdentifier' && attr.name.name === 'effects') {
             return attr;
         }
     }
@@ -55,7 +54,7 @@ const getPropsFromObjectExpression = ({ objExpr, keys, }) => {
     return out;
 };
 const computeEffectPropStatus = ({ jsx, effectIndex, keys, }) => {
-    const attr = findExperimentalEffectsAttr(jsx);
+    const attr = findEffectsAttr(jsx);
     const elements = getEffectsArrayElements(attr);
     if (!elements) {
         return {

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

@@ -43,6 +43,7 @@ const renderer_1 = require("@remotion/renderer");
 const recast = __importStar(require("recast"));
 const parse_ast_1 = require("../../codemods/parse-ast");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
+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 isStaticValue = (node) => {
     switch (node.type) {
@@ -295,7 +296,7 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, e
     const ast = (0, parse_ast_1.parseAst)(fileContents);
     const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
     if (!jsxElement) {
-        throw new Error('Cannot compute sequence props status: Could not find a JSX element at the specified location');
+        throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
     }
     const filteredProps = computeSequenceOnlyPropsRecord({ jsxElement, keys });
     const effectsStatuses = computeEffectsForJsx({ jsxElement, effects });

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

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

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

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteEffectHandler = void 0;
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const renderer_1 = require("@remotion/renderer");
+const delete_effect_1 = require("../../codemods/delete-effect");
+const file_watcher_1 = require("../../file-watcher");
+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, }) => {
+    try {
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-effect] Received request for fileName="${fileName}" effectIndex=${effectIndex}`);
+        const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
+        const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
+        if (fileRelativeToRoot.startsWith('..')) {
+            throw new Error('Cannot modify a file outside the project');
+        }
+        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);
+        }
+        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[delete-effect] Wrote ${fileRelativeToRoot}${formatted ? ' (formatted)' : ''}`);
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
+    }
+};
+exports.deleteEffectHandler = deleteEffectHandler;

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

@@ -39,7 +39,7 @@ const deleteJsxNodeHandler = async ({ input: { fileName, nodePath }, remotionRoo
             suppressHmrOnFileRestore: false,
         });
         (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, undefined);
         const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
             remotionRoot,
             absolutePath,

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

@@ -39,7 +39,7 @@ const duplicateJsxNodeHandler = async ({ input: { fileName, nodePath }, remotion
             suppressHmrOnFileRestore: false,
         });
         (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, undefined);
         const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
             remotionRoot,
             absolutePath,

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

@@ -19,7 +19,7 @@ const format_effect_prop_change_1 = require("./log-updates/format-effect-prop-ch
 const log_effect_update_1 = require("./log-updates/log-effect-update");
 const log_update_1 = require("./log-updates/log-update");
 const save_props_mutex_1 = require("./save-props-mutex");
-const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, value, defaultValue, schema, }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, value, defaultValue, schema, clientId, }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
     renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-effect-props] Received request for fileName="${fileName}" effectIndex=${effectIndex} key="${key}"`);
     const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
     const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
@@ -75,7 +75,7 @@ const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectInd
     });
     (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
     (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
-    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
     (0, log_effect_update_1.logEffectUpdate)({
         fileRelativeToRoot,
         line: logLine,

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

@@ -17,7 +17,7 @@ const can_update_sequence_props_1 = require("./can-update-sequence-props");
 const format_prop_change_1 = require("./log-updates/format-prop-change");
 const log_update_1 = require("./log-updates/log-update");
 const save_props_mutex_1 = require("./save-props-mutex");
-const saveSequencePropsHandler = ({ input: { fileName, nodePath, key, value, defaultValue, schema }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+const saveSequencePropsHandler = ({ input: { fileName, nodePath, key, value, defaultValue, schema, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
     renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request for fileName="${fileName}" key="${key}"`);
     const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
     const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, absolutePath);
@@ -75,7 +75,7 @@ const saveSequencePropsHandler = ({ input: { fileName, nodePath, key, value, def
     });
     (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
     (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
-    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
     (0, log_update_1.logUpdate)({
         fileRelativeToRoot,
         line: logLine,

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

@@ -45,7 +45,7 @@ const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps,
         });
         (0, undo_stack_1.suppressUndoStackInvalidation)(projectInfo.rootFile);
         (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(projectInfo.rootFile);
-        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(projectInfo.rootFile, output);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(projectInfo.rootFile, output, undefined);
         const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
             remotionRoot,
             absolutePath: projectInfo.rootFile,

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

@@ -8,6 +8,7 @@ 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_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");
@@ -77,6 +78,9 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, effect
             if (event.type === 'deleted') {
                 return;
             }
+            if (event.originatorClientId === clientId) {
+                return;
+            }
             try {
                 const result = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
                     fileContents: event.content,
@@ -101,6 +105,17 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, effect
                 });
             }
             catch (error) {
+                if (error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError) {
+                    (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+                        listener.sendEventToClientId(clientId, {
+                            type: 'lost-node-path',
+                            fileName,
+                            line,
+                            column,
+                        });
+                    });
+                    return;
+                }
                 renderer_1.RenderInternals.Log.error({ indent: false, logLevel }, error);
             }
         },

package/dist/preview-server/undo-stack.d.ts

@@ -3,7 +3,7 @@ export interface UndoEntryDescription {
     undoMessage: string;
     redoMessage: string;
 }
-type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'delete-jsx-node' | 'duplicate-jsx-node';
+type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'delete-effect' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'delete-composition' | 'rename-composition' | 'duplicate-composition';
 type UndoEntry = {
     filePath: string;
     oldContents: string;
@@ -20,10 +20,18 @@ type UndoEntry = {
     entryType: 'sequence-props';
 } | {
     entryType: 'effect-props';
+} | {
+    entryType: 'delete-effect';
 } | {
     entryType: 'delete-jsx-node';
 } | {
     entryType: 'duplicate-jsx-node';
+} | {
+    entryType: 'delete-composition';
+} | {
+    entryType: 'rename-composition';
+} | {
+    entryType: 'duplicate-composition';
 });
 export declare function pushToUndoStack({ filePath, oldContents, logLevel, remotionRoot, logLine, description, entryType, suppressHmrOnFileRestore }: {
     filePath: string;

package/dist/preview-server/undo-stack.js

@@ -195,7 +195,7 @@ function popUndo() {
     if (entry.suppressHmrOnFileRestore) {
         (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(entry.filePath);
     }
-    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(entry.filePath, entry.oldContents);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(entry.filePath, entry.oldContents, undefined);
     renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel: storedLogLevel }, renderer_1.RenderInternals.chalk.gray(`Undo: restored ${entry.filePath} (undo: ${undoStack.length}, redo: ${redoStack.length})`));
     logFileAction(entry.description.undoMessage, entry.filePath, entry.logLine);
     if (entry.entryType === 'visual-control') {
@@ -223,7 +223,7 @@ function popRedo() {
     if (entry.suppressHmrOnFileRestore) {
         (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(entry.filePath);
     }
-    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(entry.filePath, entry.oldContents);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(entry.filePath, entry.oldContents, undefined);
     renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel: storedLogLevel }, renderer_1.RenderInternals.chalk.gray(`Redo: restored ${entry.filePath} (undo: ${undoStack.length}, redo: ${redoStack.length})`));
     logFileAction(entry.description.redoMessage, entry.filePath, entry.logLine);
     if (entry.entryType === 'visual-control') {

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