@remotion/studio-server 4.0.470 → 4.0.472

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

@@ -36,11 +36,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveCompositionComponent = void 0;
+exports.insertJsxElementIntoComposition = exports.resolveCompositionComponent = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const recast = __importStar(require("recast"));
+const format_file_content_1 = require("../codemods/format-file-content");
 const parse_ast_1 = require("../codemods/parse-ast");
+const imports_1 = require("./imports");
 const allowedFileExtensions = new Set(['.tsx', '.ts', '.jsx', '.js']);
 const extensionsToProbe = ['.tsx', '.ts', '.jsx', '.js'];
 const isInRemotionRoot = ({ remotionRoot, fileName, }) => {
@@ -503,6 +505,253 @@ const getComponentRootNode = (declaration) => {
 const createSequenceElement = () => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier('Sequence'), []), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier('Sequence')), []);
 };
+const createNumberAttribute = (name, value) => {
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer(recast.types.builders.numericLiteral(value)));
+};
+const createPositionAbsoluteStyleAttribute = () => {
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression([
+        recast.types.builders.objectProperty(recast.types.builders.identifier('position'), recast.types.builders.stringLiteral('absolute')),
+    ])));
+};
+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)])));
+};
+const createSolidElement = ({ localName, width, height, }) => {
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
+        createNumberAttribute('width', width),
+        createNumberAttribute('height', height),
+        createPositionAbsoluteStyleAttribute(),
+    ], true), null, []);
+};
+const createAssetElement = ({ localName, staticFileLocalName, src, dimensions, }) => {
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
+        createStaticFileSrcAttribute({ staticFileLocalName, src }),
+        createPositionAbsoluteStyleAttribute(),
+        ...(dimensions
+            ? [
+                createNumberAttribute('width', dimensions.width),
+                createNumberAttribute('height', dimensions.height),
+            ]
+            : []),
+    ], true), null, []);
+};
+const createFragmentWithElement = (element) => {
+    return recast.types.builders.jsxFragment(recast.types.builders.jsxOpeningFragment(), recast.types.builders.jsxClosingFragment(), [element]);
+};
+const replaceNullReturnInFunctionLike = ({ fn, element, }) => {
+    var _a, _b;
+    var _c, _d;
+    if (fn.type === 'ArrowFunctionExpression' && fn.body.type === 'NullLiteral') {
+        fn.body = createFragmentWithElement(element);
+        return (_c = (_a = fn.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _c !== void 0 ? _c : 1;
+    }
+    if (fn.body.type !== 'BlockStatement') {
+        return null;
+    }
+    const returnStatement = getTopLevelReturnStatement(fn.body.body);
+    if (!(returnStatement === null || returnStatement === void 0 ? void 0 : returnStatement.argument) ||
+        returnStatement.argument.type !== 'NullLiteral') {
+        return null;
+    }
+    returnStatement.argument = createFragmentWithElement(element);
+    return (_d = (_b = returnStatement.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _d !== void 0 ? _d : 1;
+};
+const addElementToNullComponentReturn = ({ declaration, element, }) => {
+    var _a;
+    var _b;
+    if (declaration.type === 'VariableDeclarator') {
+        if (!declaration.init ||
+            (declaration.init.type !== 'ArrowFunctionExpression' &&
+                declaration.init.type !== 'FunctionExpression')) {
+            return null;
+        }
+        return replaceNullReturnInFunctionLike({ fn: declaration.init, element });
+    }
+    if (declaration.type === 'ArrowFunctionExpression' ||
+        declaration.type === 'FunctionExpression' ||
+        declaration.type === 'FunctionDeclaration') {
+        return replaceNullReturnInFunctionLike({ fn: declaration, element });
+    }
+    if (declaration.type !== 'ClassDeclaration') {
+        return null;
+    }
+    const renderMethod = findRenderMethod(declaration);
+    if (!renderMethod) {
+        return null;
+    }
+    const returnStatement = getTopLevelReturnStatement(renderMethod.body.body);
+    if (!(returnStatement === null || returnStatement === void 0 ? void 0 : returnStatement.argument) ||
+        returnStatement.argument.type !== 'NullLiteral') {
+        return null;
+    }
+    returnStatement.argument = createFragmentWithElement(element);
+    return (_b = (_a = returnStatement.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1;
+};
+const declarationBindsName = (declaration, name) => {
+    var _a;
+    if (declaration.type === 'FunctionDeclaration' ||
+        declaration.type === 'ClassDeclaration') {
+        return ((_a = declaration.id) === null || _a === void 0 ? void 0 : _a.name) === name;
+    }
+    return declaration.declarations.some((variableDeclaration) => {
+        return (variableDeclaration.id.type === 'Identifier' &&
+            variableDeclaration.id.name === name);
+    });
+};
+const hasTopLevelBinding = ({ ast, name }) => {
+    return ast.program.body.some((node) => {
+        var _a;
+        if (node.type === 'FunctionDeclaration' ||
+            node.type === 'ClassDeclaration' ||
+            node.type === 'VariableDeclaration') {
+            return declarationBindsName(node, name);
+        }
+        if (node.type === 'ExportNamedDeclaration' &&
+            node.declaration &&
+            (node.declaration.type === 'FunctionDeclaration' ||
+                node.declaration.type === 'ClassDeclaration' ||
+                node.declaration.type === 'VariableDeclaration')) {
+            return declarationBindsName(node.declaration, name);
+        }
+        if (node.type !== 'ImportDeclaration') {
+            return false;
+        }
+        return (_a = node.specifiers) === null || _a === void 0 ? void 0 : _a.some((specifier) => {
+            var _a;
+            return ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === name;
+        });
+    });
+};
+const getAvailableSolidLocalName = (ast) => {
+    const candidates = ['Solid', 'RemotionSolid'];
+    const available = candidates.find((candidate) => {
+        return !hasTopLevelBinding({ ast, name: candidate });
+    });
+    if (!available) {
+        throw new Error('Cannot add <Solid> because Solid is already defined');
+    }
+    return available;
+};
+const ensureSolidImport = (ast) => {
+    return (0, imports_1.ensureNamedImport)({
+        ast,
+        importedName: 'Solid',
+        sourcePath: 'remotion',
+        localName: getAvailableSolidLocalName(ast),
+    });
+};
+const getImportDeclarations = ({ ast, sourcePath, }) => {
+    return ast.program.body.filter((node) => node.type === 'ImportDeclaration' &&
+        node.source.type === 'StringLiteral' &&
+        node.source.value === sourcePath);
+};
+const importDeclarationHasNamespaceSpecifier = (importDeclaration) => {
+    var _a;
+    return (_a = importDeclaration.specifiers) === null || _a === void 0 ? void 0 : _a.some((specifier) => specifier.type === 'ImportNamespaceSpecifier');
+};
+const hasOfficialLocalImport = ({ ast, importedName, sourcePath, }) => {
+    return getImportDeclarations({ ast, sourcePath }).some((importDeclaration) => {
+        var _a;
+        return (_a = importDeclaration.specifiers) === null || _a === void 0 ? void 0 : _a.some((specifier) => {
+            var _a;
+            var _b;
+            return (specifier.type === 'ImportSpecifier' &&
+                (0, imports_1.getImportedName)(specifier) === importedName &&
+                ((_b = (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : importedName) === importedName);
+        });
+    });
+};
+const addOfficialNamedImport = ({ ast, importedName, sourcePath, }) => {
+    var _a;
+    const existingImport = getImportDeclarations({ ast, sourcePath }).find((candidate) => !importDeclarationHasNamespaceSpecifier(candidate));
+    const importSpecifier = recast.types.builders.importSpecifier(recast.types.builders.identifier(importedName));
+    if (existingImport) {
+        existingImport.specifiers = [
+            ...((_a = existingImport.specifiers) !== null && _a !== void 0 ? _a : []),
+            importSpecifier,
+        ];
+        return;
+    }
+    const importDeclaration = recast.types.builders.importDeclaration([importSpecifier], recast.types.builders.stringLiteral(sourcePath));
+    (0, imports_1.insertImportDeclaration)(ast, importDeclaration);
+};
+const ensureOfficialNamedImport = ({ ast, importedName, sourcePath, label, }) => {
+    if (hasOfficialLocalImport({ ast, importedName, sourcePath })) {
+        return importedName;
+    }
+    if (hasTopLevelBinding({ ast, name: importedName })) {
+        throw new Error(`Cannot add ${label} because ${importedName} is already defined`);
+    }
+    addOfficialNamedImport({ ast, importedName, sourcePath });
+    return importedName;
+};
+const ensureStaticFileImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'staticFile',
+        sourcePath: 'remotion',
+        label: 'staticFile()',
+    });
+};
+const ensureImgImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'Img',
+        sourcePath: 'remotion',
+        label: '<Img>',
+    });
+};
+const ensureVideoImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'Video',
+        sourcePath: '@remotion/media',
+        label: '<Video>',
+    });
+};
+const ensureGifImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'Gif',
+        sourcePath: '@remotion/gif',
+        label: '<Gif>',
+    });
+};
+const addElementToComponentRoot = ({ ast, exportName, element, }) => {
+    var _a;
+    var _b;
+    const declaration = getDeclarationByExportName({ ast, exportName });
+    if (!declaration) {
+        throw new Error('Could not find composition component declaration');
+    }
+    const rootNode = getComponentRootNode(declaration);
+    if (!rootNode) {
+        const insertedAt = addElementToNullComponentReturn({ declaration, element });
+        if (insertedAt !== null) {
+            return insertedAt;
+        }
+        throw new Error('Composition component does not return JSX');
+    }
+    if (rootNode.type === 'JSXElement' && rootNode.openingElement.selfClosing) {
+        throw new Error('Cannot insert into a self-closing root JSX element');
+    }
+    const CANVAS_ROOT_ELEMENTS = [
+        'ThreeCanvas',
+        'RiveCanvas',
+        'SkiaCanvas',
+        'canvas',
+    ];
+    if (rootNode.type === 'JSXElement' &&
+        rootNode.openingElement.name.type === 'JSXIdentifier' &&
+        CANVAS_ROOT_ELEMENTS.includes(rootNode.openingElement.name.name)) {
+        throw new Error(`Cannot insert a JSX element into a composition whose root element is <${rootNode.openingElement.name.name}>`);
+    }
+    if (!rootNode.children) {
+        throw new Error('Composition component root does not accept children');
+    }
+    rootNode.children.push(element);
+    return (_b = (_a = rootNode.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1;
+};
 const getDefaultExportDeclaration = (ast) => {
     let declaration = null;
     let identifierName = null;
@@ -532,39 +781,16 @@ const getDeclarationByExportName = ({ ast, exportName, }) => {
     return findLocalComponentDeclaration({ ast, name: exportName });
 };
 const canAddSequenceToComponent = ({ ast, exportName, }) => {
-    const declaration = getDeclarationByExportName({ ast, exportName });
-    if (!declaration) {
-        return false;
-    }
-    const rootNode = getComponentRootNode(declaration);
-    if (!rootNode) {
-        return false;
-    }
-    if (rootNode.type === 'JSXElement') {
-        if (rootNode.openingElement.selfClosing) {
-            return false;
-        }
-        if (!rootNode.children) {
-            return false;
-        }
-        rootNode.children.push(createSequenceElement());
-        try {
-            recast.print(ast);
-            return true;
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    if (!rootNode.children) {
-        return false;
-    }
-    rootNode.children.push(createSequenceElement());
     try {
+        addElementToComponentRoot({
+            ast,
+            exportName,
+            element: createSequenceElement(),
+        });
         recast.print(ast);
         return true;
     }
-    catch (_b) {
+    catch (_a) {
         return false;
     }
 };
@@ -582,6 +808,8 @@ const getComponentLocationInFile = async ({ remotionRoot, fileName, exportName,
     });
     return {
         source: node_path_1.default.relative(remotionRoot, fileName),
+        fileName,
+        exportName,
         line: (_a = location === null || location === void 0 ? void 0 : location.line) !== null && _a !== void 0 ? _a : 1,
         column: (_b = location === null || location === void 0 ? void 0 : location.column) !== null && _b !== void 0 ? _b : 0,
         canAddSequence,
@@ -641,7 +869,7 @@ const getComponentLocationRecursively = async ({ remotionRoot, fileName, exportN
         visited.delete(key);
     }
 };
-const resolveCompositionComponent = async ({ remotionRoot, compositionFile, compositionId, }) => {
+const resolveCompositionComponentWithFile = async ({ remotionRoot, compositionFile, compositionId, }) => {
     const compositionFileName = node_path_1.default.resolve(remotionRoot, compositionFile);
     const input = await readSourceFile({
         remotionRoot,
@@ -688,4 +916,77 @@ const resolveCompositionComponent = async ({ remotionRoot, compositionFile, comp
         visited: new Set(),
     });
 };
+const resolveCompositionComponent = async ({ remotionRoot, compositionFile, compositionId, }) => {
+    const { source, line, column, canAddSequence } = await resolveCompositionComponentWithFile({
+        remotionRoot,
+        compositionFile,
+        compositionId,
+    });
+    return {
+        source,
+        line,
+        column,
+        canAddSequence,
+    };
+};
 exports.resolveCompositionComponent = resolveCompositionComponent;
+const createInsertableJsxElement = ({ ast, element, }) => {
+    if (element.type === 'solid') {
+        const solidLocalName = ensureSolidImport(ast);
+        return createSolidElement({
+            localName: solidLocalName,
+            width: element.width,
+            height: element.height,
+        });
+    }
+    if (element.type === 'asset') {
+        const staticFileLocalName = ensureStaticFileImport(ast);
+        const localName = element.assetType === 'image'
+            ? ensureImgImport(ast)
+            : element.assetType === 'video'
+                ? ensureVideoImport(ast)
+                : ensureGifImport(ast);
+        return createAssetElement({
+            localName,
+            staticFileLocalName,
+            src: element.src,
+            dimensions: element.dimensions,
+        });
+    }
+    throw new Error('Unsupported element type');
+};
+const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, }) => {
+    const location = await resolveCompositionComponentWithFile({
+        remotionRoot,
+        compositionFile,
+        compositionId,
+    });
+    if (!location.canAddSequence) {
+        throw new Error('Cannot insert JSX element into this composition component');
+    }
+    const input = await readSourceFile({
+        remotionRoot,
+        fileName: location.fileName,
+    });
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const elementToInsert = createInsertableJsxElement({ ast, element });
+    const logLine = addElementToComponentRoot({
+        ast,
+        exportName: location.exportName,
+        element: elementToInsert,
+    });
+    const finalFile = (0, parse_ast_1.serializeAst)(ast);
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: finalFile,
+        prettierConfigOverride,
+    });
+    return {
+        fileName: location.fileName,
+        source: location.source,
+        oldContents: input,
+        output,
+        formatted,
+        logLine,
+    };
+};
+exports.insertJsxElementIntoComposition = insertJsxElementIntoComposition;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.allApiRoutes = void 0;
+const add_effect_1 = require("./routes/add-effect");
 const add_effect_keyframe_1 = require("./routes/add-effect-keyframe");
 const add_render_1 = require("./routes/add-render");
 const add_sequence_keyframe_1 = require("./routes/add-sequence-keyframe");
@@ -9,18 +10,20 @@ const apply_visual_control_change_1 = require("./routes/apply-visual-control-cha
 const cancel_render_1 = require("./routes/cancel-render");
 const composition_component_info_1 = require("./routes/composition-component-info");
 const delete_effect_1 = require("./routes/delete-effect");
-const delete_effect_keyframe_1 = require("./routes/delete-effect-keyframe");
 const delete_jsx_node_1 = require("./routes/delete-jsx-node");
-const delete_sequence_keyframe_1 = require("./routes/delete-sequence-keyframe");
+const delete_keyframes_1 = require("./routes/delete-keyframes");
 const delete_static_file_1 = require("./routes/delete-static-file");
 const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
+const insert_jsx_element_1 = require("./routes/insert-jsx-element");
 const install_dependency_1 = require("./routes/install-dependency");
 const open_in_editor_1 = require("./routes/open-in-editor");
 const open_in_file_explorer_1 = require("./routes/open-in-file-explorer");
+const paste_effects_1 = require("./routes/paste-effects");
 const project_info_1 = require("./routes/project-info");
 const redo_1 = require("./routes/redo");
 const register_client_render_1 = require("./routes/register-client-render");
 const remove_render_1 = require("./routes/remove-render");
+const reorder_effect_1 = require("./routes/reorder-effect");
 const restart_studio_1 = require("./routes/restart-studio");
 const save_effect_props_1 = require("./routes/save-effect-props");
 const save_sequence_props_1 = require("./routes/save-sequence-props");
@@ -54,11 +57,13 @@ 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-sequence-keyframe': delete_sequence_keyframe_1.deleteSequenceKeyframeHandler,
+    '/api/add-effect': add_effect_1.addEffectHandler,
+    '/api/reorder-effect': reorder_effect_1.reorderEffectHandler,
+    '/api/delete-keyframes': delete_keyframes_1.deleteKeyframesHandler,
     '/api/add-sequence-keyframe': add_sequence_keyframe_1.addSequenceKeyframeHandler,
-    '/api/delete-effect-keyframe': delete_effect_keyframe_1.deleteEffectKeyframeHandler,
     '/api/add-effect-keyframe': add_effect_keyframe_1.addEffectKeyframeHandler,
     '/api/delete-effect': delete_effect_1.deleteEffectHandler,
+    '/api/paste-effects': paste_effects_1.pasteEffectsHandler,
     '/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,
@@ -66,6 +71,7 @@ exports.allApiRoutes = {
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,
     '/api/restart-studio': restart_studio_1.handleRestartStudio,
     '/api/install-package': install_dependency_1.handleInstallPackage,
+    '/api/insert-jsx-element': insert_jsx_element_1.insertJsxElementHandler,
     '/api/undo': undo_1.undoHandler,
     '/api/redo': redo_1.redoHandler,
 };

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

@@ -23,10 +23,11 @@ const addEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectI
     });
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     const parsedValue = JSON.parse(value);
-    const { output, oldValueStrings, newValueStrings, formatted, logLine, effectCallee, } = await (0, update_keyframes_1.updateEffectKeyframes)({
+    const { output, oldValueStrings, newValueStrings, formatted, logLine, effectCallee, updatedSequenceNodePath, } = await (0, update_keyframes_1.updateEffectKeyframes)({
         input: fileContents,
         sequenceNodePath: sequenceNodePath.nodePath,
         effectIndex,
+        schema,
         updates: [
             {
                 key,
@@ -74,7 +75,7 @@ const addEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectI
     });
     (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);
+    const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, updatedSequenceNodePath);
     if (!jsx) {
         return {
             canUpdate: false,
@@ -83,6 +84,7 @@ const addEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectI
         };
     }
     return (0, can_update_effect_props_1.computeEffectPropStatus)({
+        ast,
         jsx,
         effectIndex,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),

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

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

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addEffectHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const add_effect_1 = require("../../codemods/add-effect");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+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 addEffectHandler = async ({ input: { fileName, sequenceNodePath, effectName, effectImportPath, effectConfig, clientId, }, remotionRoot, logLevel, }) => {
+    try {
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-effect] Received request for fileName="${fileName}" effect="${effectName}"`);
+        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, nodeLabel, logLine } = await (0, add_effect_1.addEffect)({
+            input: fileContents,
+            sequenceNodePath: sequenceNodePath.nodePath,
+            effectName,
+            effectImportPath,
+            effectConfig,
+        });
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: null,
+            logLevel,
+            remotionRoot,
+            logLine,
+            description: {
+                undoMessage: `↩️  Addition of ${effectLabel} to ${nodeLabel}`,
+                redoMessage: `↪️  Addition of ${effectLabel} to ${nodeLabel}`,
+            },
+            entryType: 'add-effect',
+            suppressHmrOnFileRestore: false,
+        });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+        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}`)} Added ${(0, formatting_1.attrName)(effectLabel)} to ${nodeLabel}`);
+        if (!formatted) {
+            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        }
+        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[add-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.addEffectHandler = addEffectHandler;

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

@@ -21,9 +21,10 @@ const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, v
     });
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     const parsedValue = JSON.parse(value);
-    const { output, oldValueStrings, newValueStrings, formatted, logLine } = await (0, update_keyframes_1.updateSequenceKeyframes)({
+    const { output, oldValueStrings, newValueStrings, formatted, logLine, updatedNodePath, } = await (0, update_keyframes_1.updateSequenceKeyframes)({
         input: fileContents,
         nodePath: nodePath.nodePath,
+        schema,
         updates: [
             {
                 key,
@@ -72,13 +73,16 @@ const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, v
     const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
         fileContents: output,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
-        nodePath: nodePath.nodePath,
+        nodePath: updatedNodePath,
         effects: [],
     });
+    const updatedSubscriptionKey = { ...nodePath, nodePath: updatedNodePath };
     return {
         canUpdate: true,
         props: status.props,
-        results: [{ fileName, nodePath, props: status.props }],
+        results: [
+            { fileName, nodePath: updatedSubscriptionKey, props: status.props },
+        ],
     };
 });
 exports.addSequenceKeyframeHandler = addSequenceKeyframeHandler;

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

@@ -37,6 +37,24 @@ const getCodemodUndoDescription = (codemod) => {
             entryType: codemod.type,
         };
     }
+    if (codemod.type === 'delete-folder') {
+        const label = `folder "${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}"`;
+        return {
+            undoMessage: `↩️  Deletion of ${label}`,
+            redoMessage: `↪️  Deletion of ${label}`,
+            entryType: codemod.type,
+        };
+    }
+    if (codemod.type === 'rename-folder') {
+        const oldName = `${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}`;
+        const newName = `${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.newName}`;
+        const label = `folder "${oldName}" to "${newName}"`;
+        return {
+            undoMessage: `↩️  Rename of ${label}`,
+            redoMessage: `↪️  Rename of ${label}`,
+            entryType: codemod.type,
+        };
+    }
     return {
         undoMessage: '↩️  Visual control change',
         redoMessage: '↪️  Visual control change',

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

@@ -1,6 +1,7 @@
-import type { JSXOpeningElement } from '@babel/types';
+import type { File, JSXOpeningElement } from '@babel/types';
 import type { CanUpdateEffectPropsResponse, SequenceNodePath, SequenceSchema } from 'remotion';
-export declare const computeEffectPropStatus: ({ jsx, effectIndex, keys, }: {
+export declare const computeEffectPropStatus: ({ ast, jsx, effectIndex, keys, }: {
+    ast: File;
     jsx: JSXOpeningElement;
     effectIndex: number;
     keys: string[];