@remotion/studio-server 4.0.443 → 4.0.445

package/dist/codemods/delete-jsx-node.d.ts

@@ -0,0 +1,16 @@
+import type { File, JSXElement } from '@babel/types';
+import type { SequenceNodePath } from '@remotion/studio-shared';
+/** e.g. `<Video>` or `<Remotion.Sequence>` for logs and undo copy. */
+export declare const getJsxElementTagLabel: (element: JSXElement) => string;
+export declare const findJsxElementPathForDeletion: (ast: File, nodePath: SequenceNodePath) => import("ast-types/lib/node-path").NodePath<N, V> | null;
+export declare const deleteJsxElementAtPath: (jsxPath: import("ast-types/lib/node-path").NodePath<N, V>) => void;
+export declare const deleteJsxNode: ({ input, nodePath, prettierConfigOverride, }: {
+    input: string;
+    nodePath: SequenceNodePath;
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    formatted: boolean;
+    nodeLabel: string;
+    logLine: number;
+}>;

package/dist/codemods/delete-jsx-node.js

@@ -0,0 +1,354 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteJsxNode = exports.deleteJsxElementAtPath = exports.findJsxElementPathForDeletion = exports.getJsxElementTagLabel = void 0;
+const recast = __importStar(require("recast"));
+const parse_ast_1 = require("./parse-ast");
+const { builders: b, namedTypes } = recast.types;
+/** Recast `builders.nullLiteral()` is typed against ast-types; normalize to Babel `Expression`. */
+const nullLiteralExpr = () => b.nullLiteral();
+const jsxOpeningNameToString = (name) => {
+    if (name.type === 'JSXIdentifier') {
+        return name.name;
+    }
+    if (name.type === 'JSXNamespacedName') {
+        return `${name.namespace.name}:${name.name.name}`;
+    }
+    if (name.type === 'JSXMemberExpression') {
+        const memberToString = (expr) => {
+            if (expr.type === 'JSXIdentifier') {
+                return expr.name;
+            }
+            return `${memberToString(expr.object)}.${expr.property.name}`;
+        };
+        return memberToString(name);
+    }
+    return 'Unknown';
+};
+/** e.g. `<Video>` or `<Remotion.Sequence>` for logs and undo copy. */
+const getJsxElementTagLabel = (element) => {
+    return `<${jsxOpeningNameToString(element.openingElement.name)}>`;
+};
+exports.getJsxElementTagLabel = getJsxElementTagLabel;
+const findJsxElementPathForDeletion = (ast, nodePath) => {
+    let current = new recast.types.NodePath(ast);
+    for (const segment of nodePath) {
+        current = current.get(segment);
+        if (current.value === null || current.value === undefined) {
+            return null;
+        }
+    }
+    if (namedTypes.JSXOpeningElement.check(current.value)) {
+        const parent = current.parentPath;
+        if (parent && namedTypes.JSXElement.check(parent.value)) {
+            return parent;
+        }
+        return null;
+    }
+    if (namedTypes.JSXElement.check(current.value)) {
+        return current;
+    }
+    return null;
+};
+exports.findJsxElementPathForDeletion = findJsxElementPathForDeletion;
+const replaceInLogicalExpression = (parent, node) => {
+    const nl = nullLiteralExpr();
+    if (parent.left === node) {
+        parent.left = nl;
+        return true;
+    }
+    if (parent.right === node) {
+        parent.right = nl;
+        return true;
+    }
+    return false;
+};
+const replaceInConditionalExpression = (parent, node) => {
+    const nl = nullLiteralExpr();
+    if (parent.consequent === node) {
+        parent.consequent = nl;
+        return true;
+    }
+    if (parent.alternate === node) {
+        parent.alternate = nl;
+        return true;
+    }
+    return false;
+};
+const replaceInArrowFunctionExpression = (parent, node) => {
+    if (parent.body === node) {
+        parent.body = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInReturnStatement = (parent, node) => {
+    if (parent.argument === node) {
+        parent.argument = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInCallExpression = (parent, node) => {
+    const idx = parent.arguments.indexOf(node);
+    if (idx !== -1) {
+        parent.arguments[idx] = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInOptionalCallExpression = (parent, node) => {
+    const idx = parent.arguments.indexOf(node);
+    if (idx !== -1) {
+        parent.arguments[idx] = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInArrayExpression = (parent, node) => {
+    const idx = parent.elements.indexOf(node);
+    if (idx !== -1) {
+        parent.elements[idx] = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInAssignmentExpression = (parent, node) => {
+    if (parent.right === node) {
+        parent.right = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInVariableDeclarator = (parent, node) => {
+    if (parent.init === node) {
+        parent.init = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInExportDefaultDeclaration = (parent, node) => {
+    if (parent.declaration === node) {
+        parent.declaration = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInSequenceExpression = (parent, node) => {
+    const idx = parent.expressions.indexOf(node);
+    if (idx !== -1) {
+        parent.expressions[idx] = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInNewExpression = (parent, node) => {
+    const idx = parent.arguments.indexOf(node);
+    if (idx !== -1) {
+        parent.arguments[idx] = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInExpressionStatement = (parent, node) => {
+    if (parent.expression === node) {
+        parent.expression = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInParenthesizedExpression = (parent, node) => {
+    if (parent.expression === node) {
+        parent.expression = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInJSXExpressionContainer = (parent, node) => {
+    if (parent.expression === node) {
+        parent.expression = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInTSAsExpression = (parent, node) => {
+    if (parent.expression === node) {
+        parent.expression = nullLiteralExpr();
+        return true;
+    }
+    return false;
+};
+const replaceInJSXParentChildren = (parent, node) => {
+    const idx = parent.children.indexOf(node);
+    if (idx !== -1) {
+        parent.children.splice(idx, 1);
+        return true;
+    }
+    return false;
+};
+const replaceNodeWithNull = (parentNode, node) => {
+    if (namedTypes.LogicalExpression.check(parentNode)) {
+        return replaceInLogicalExpression(parentNode, node);
+    }
+    if (namedTypes.ConditionalExpression.check(parentNode)) {
+        return replaceInConditionalExpression(parentNode, node);
+    }
+    if (namedTypes.ArrowFunctionExpression.check(parentNode)) {
+        return replaceInArrowFunctionExpression(parentNode, node);
+    }
+    if (namedTypes.ReturnStatement.check(parentNode)) {
+        return replaceInReturnStatement(parentNode, node);
+    }
+    if (namedTypes.CallExpression.check(parentNode)) {
+        return replaceInCallExpression(parentNode, node);
+    }
+    if (parentNode.type === 'OptionalCallExpression') {
+        return replaceInOptionalCallExpression(parentNode, node);
+    }
+    if (namedTypes.ArrayExpression.check(parentNode)) {
+        return replaceInArrayExpression(parentNode, node);
+    }
+    if (namedTypes.AssignmentExpression.check(parentNode)) {
+        return replaceInAssignmentExpression(parentNode, node);
+    }
+    if (namedTypes.VariableDeclarator.check(parentNode)) {
+        return replaceInVariableDeclarator(parentNode, node);
+    }
+    if (namedTypes.ExportDefaultDeclaration.check(parentNode)) {
+        return replaceInExportDefaultDeclaration(parentNode, node);
+    }
+    if (namedTypes.SequenceExpression.check(parentNode)) {
+        return replaceInSequenceExpression(parentNode, node);
+    }
+    if (namedTypes.NewExpression.check(parentNode)) {
+        return replaceInNewExpression(parentNode, node);
+    }
+    if (namedTypes.ExpressionStatement.check(parentNode)) {
+        return replaceInExpressionStatement(parentNode, node);
+    }
+    if (namedTypes.ParenthesizedExpression.check(parentNode)) {
+        return replaceInParenthesizedExpression(parentNode, node);
+    }
+    if (namedTypes.JSXExpressionContainer.check(parentNode)) {
+        return replaceInJSXExpressionContainer(parentNode, node);
+    }
+    if (namedTypes.TSAsExpression.check(parentNode)) {
+        return replaceInTSAsExpression(parentNode, node);
+    }
+    if (namedTypes.JSXElement.check(parentNode)) {
+        return replaceInJSXParentChildren(parentNode, node);
+    }
+    if (namedTypes.JSXFragment.check(parentNode)) {
+        return replaceInJSXParentChildren(parentNode, node);
+    }
+    return false;
+};
+const deleteJsxElementAtPath = (jsxPath) => {
+    const { node, parentPath } = jsxPath;
+    if (!parentPath) {
+        throw new Error('Cannot delete JSX element with no parent');
+    }
+    const jsxNode = node;
+    if (replaceNodeWithNull(parentPath.node, jsxNode)) {
+        return;
+    }
+    // Recast can replace this node in arbitrary parent contexts.
+    jsxPath.replace(b.nullLiteral());
+};
+exports.deleteJsxElementAtPath = deleteJsxElementAtPath;
+const deleteJsxNode = async ({ input, nodePath, prettierConfigOverride, }) => {
+    var _a, _b;
+    var _c, _d;
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const jsxPath = (0, exports.findJsxElementPathForDeletion)(ast, nodePath);
+    if (!jsxPath) {
+        throw new Error('Could not find a JSX element at the specified location to delete');
+    }
+    const jsxElement = jsxPath.node;
+    const nodeLabel = (0, exports.getJsxElementTagLabel)(jsxElement);
+    const logLine = (_d = (_c = (_a = jsxElement.openingElement.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _c !== void 0 ? _c : (_b = jsxElement.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _d !== void 0 ? _d : 1;
+    (0, exports.deleteJsxElementAtPath)(jsxPath);
+    const finalFile = (0, parse_ast_1.serializeAst)(ast);
+    let prettier = null;
+    try {
+        prettier = await Promise.resolve().then(() => __importStar(require('prettier')));
+    }
+    catch (_e) {
+        return {
+            output: finalFile,
+            formatted: false,
+            nodeLabel,
+            logLine,
+        };
+    }
+    const { format, resolveConfig, resolveConfigFile } = prettier;
+    let prettierConfig;
+    if (prettierConfigOverride !== undefined) {
+        prettierConfig = prettierConfigOverride;
+    }
+    else {
+        const configFilePath = await resolveConfigFile();
+        if (!configFilePath) {
+            return {
+                output: finalFile,
+                formatted: false,
+                nodeLabel,
+                logLine,
+            };
+        }
+        prettierConfig = await resolveConfig(configFilePath);
+    }
+    if (!prettierConfig) {
+        return {
+            output: finalFile,
+            formatted: false,
+            nodeLabel,
+            logLine,
+        };
+    }
+    const prettified = await format(finalFile, {
+        ...prettierConfig,
+        filepath: 'test.tsx',
+        plugins: [],
+        endOfLine: 'lf',
+    });
+    return {
+        output: prettified,
+        formatted: true,
+        nodeLabel,
+        logLine,
+    };
+};
+exports.deleteJsxNode = deleteJsxNode;

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

@@ -8,3 +8,8 @@ export declare const updateDefaultProps: ({ input, compositionId, newDefaultProp
     output: string;
     formatted: boolean;
 }>;
+/** Line of the matching `<Composition>` / `<Still>` opening tag (for log links). */
+export declare const getCompositionDefaultPropsLine: ({ input, compositionId, }: {
+    input: string;
+    compositionId: string;
+}) => number;

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

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateDefaultProps = void 0;
+exports.getCompositionDefaultPropsLine = exports.updateDefaultProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const format_inline_content_1 = require("./format-inline-content");
@@ -169,3 +169,56 @@ const updateDefaultProps = async ({ input, compositionId, newDefaultProps, enumP
     return { output, formatted: didFormat };
 };
 exports.updateDefaultProps = updateDefaultProps;
+/** Line of the matching `<Composition>` / `<Still>` opening tag (for log links). */
+const getCompositionDefaultPropsLine = ({ input, compositionId, }) => {
+    const ast = (0, parse_ast_1.parseAst)(input);
+    let line = 1;
+    let found = false;
+    recast.types.visit(ast, {
+        visitJSXElement(path) {
+            var _a, _b, _c;
+            var _d, _e;
+            if (found) {
+                this.traverse(path);
+                return;
+            }
+            const { openingElement } = path.node;
+            const openingName = openingElement.name;
+            if (openingName.type !== 'JSXIdentifier' &&
+                openingName.type !== 'JSXNamespacedName') {
+                this.traverse(path);
+                return;
+            }
+            if (openingName.name !== 'Composition' && openingName.name !== 'Still') {
+                this.traverse(path);
+                return;
+            }
+            if (!((_a = openingElement.attributes) === null || _a === void 0 ? void 0 : _a.some((attr) => {
+                if (attr.type === 'JSXSpreadAttribute') {
+                    return;
+                }
+                if (!attr.value) {
+                    return;
+                }
+                if (attr.value.type === 'JSXElement') {
+                    return;
+                }
+                if (attr.value.type === 'JSXExpressionContainer') {
+                    return;
+                }
+                if (attr.value.type === 'JSXFragment') {
+                    return;
+                }
+                return attr.name.name === 'id' && attr.value.value === compositionId;
+            }))) {
+                this.traverse(path);
+                return;
+            }
+            found = true;
+            line = (_e = (_d = (_b = openingElement.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _d !== void 0 ? _d : (_c = path.node.loc) === null || _c === void 0 ? void 0 : _c.start.line) !== null && _e !== void 0 ? _e : 1;
+            this.traverse(path);
+        },
+    });
+    return line;
+};
+exports.getCompositionDefaultPropsLine = getCompositionDefaultPropsLine;

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

@@ -10,4 +10,5 @@ export declare const updateSequenceProps: ({ input, nodePath, key, value, defaul
     output: string;
     oldValueString: string;
     formatted: boolean;
+    logLine: number;
 }>;

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

@@ -40,7 +40,8 @@ const parse_ast_1 = require("./parse-ast");
 const update_nested_prop_1 = require("./update-nested-prop");
 const b = recast.types.builders;
 const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue, prettierConfigOverride, }) => {
-    var _a, _b;
+    var _a, _b, _c;
+    var _d;
     const ast = (0, parse_ast_1.parseAst)(input);
     let oldValueString = '';
     const isDefault = defaultValue !== null &&
@@ -53,6 +54,7 @@ const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue,
     if (!node) {
         throw new Error('Could not find a JSX element at the specified line to update');
     }
+    const logLine = (_d = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : 1;
     if (isNested) {
         oldValueString = (0, update_nested_prop_1.updateNestedProp)({
             node,
@@ -64,7 +66,7 @@ const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue,
         });
     }
     else {
-        const attrIndex = (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.findIndex((a) => {
+        const attrIndex = (_b = node.attributes) === null || _b === void 0 ? void 0 : _b.findIndex((a) => {
             if (a.type === 'JSXSpreadAttribute') {
                 return false;
             }
@@ -74,7 +76,7 @@ const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue,
             return a.name.name === key;
         });
         const attr = attrIndex !== undefined && attrIndex !== -1
-            ? (_b = node.attributes) === null || _b === void 0 ? void 0 : _b[attrIndex]
+            ? (_c = node.attributes) === null || _c === void 0 ? void 0 : _c[attrIndex]
             : undefined;
         if (attr && attr.type !== 'JSXSpreadAttribute' && attr.value) {
             const printed = recast.print(attr.value).code;
@@ -116,11 +118,12 @@ const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue,
     try {
         prettier = await Promise.resolve().then(() => __importStar(require('prettier')));
     }
-    catch (_c) {
+    catch (_e) {
         return {
             output: finalFile,
             oldValueString,
             formatted: false,
+            logLine,
         };
     }
     const { format, resolveConfig, resolveConfigFile } = prettier;
@@ -135,6 +138,7 @@ const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue,
                 output: finalFile,
                 oldValueString,
                 formatted: false,
+                logLine,
             };
         }
         prettierConfig = await resolveConfig(configFilePath);
@@ -144,6 +148,7 @@ const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue,
             output: finalFile,
             oldValueString,
             formatted: false,
+            logLine,
         };
     }
     const prettified = await format(finalFile, {
@@ -156,6 +161,7 @@ const updateSequenceProps = async ({ input, nodePath, key, value, defaultValue,
         output: prettified,
         oldValueString,
         formatted: true,
+        logLine,
     };
 };
 exports.updateSequenceProps = updateSequenceProps;

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_jsx_node_1 = require("./routes/delete-jsx-node");
 const delete_static_file_1 = require("./routes/delete-static-file");
 const install_dependency_1 = require("./routes/install-dependency");
 const open_in_file_explorer_1 = require("./routes/open-in-file-explorer");
@@ -37,6 +38,7 @@ exports.allApiRoutes = {
     '/api/subscribe-to-sequence-props': subscribe_to_sequence_props_1.subscribeToSequenceProps,
     '/api/unsubscribe-from-sequence-props': unsubscribe_from_sequence_props_1.unsubscribeFromSequenceProps,
     '/api/save-sequence-props': save_sequence_props_1.saveSequencePropsHandler,
+    '/api/delete-jsx-node': delete_jsx_node_1.deleteJsxNodeHandler,
     '/api/update-available': update_available_1.handleUpdate,
     '/api/project-info': project_info_1.projectInfoHandler,
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,

package/dist/preview-server/format-log-file-location.d.ts

@@ -0,0 +1,5 @@
+export declare const formatLogFileLocation: ({ remotionRoot, absolutePath, line, }: {
+    remotionRoot: string;
+    absolutePath: string;
+    line: number;
+}) => string;

package/dist/preview-server/format-log-file-location.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLogFileLocation = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+const formatLogFileLocation = ({ remotionRoot, absolutePath, line, }) => {
+    return `${node_path_1.default.relative(remotionRoot, absolutePath)}:${line}`;
+};
+exports.formatLogFileLocation = formatLogFileLocation;

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

@@ -40,14 +40,35 @@ exports.applyVisualControlHandler = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
+const recast = __importStar(require("recast"));
 const parse_ast_1 = require("../../codemods/parse-ast");
 const recast_mods_1 = require("../../codemods/recast-mods");
 const file_watcher_1 = require("../../file-watcher");
-const make_link_1 = require("../../hyperlinks/make-link");
+const format_log_file_location_1 = require("../format-log-file-location");
 const live_events_1 = require("../live-events");
 const undo_stack_1 = require("../undo-stack");
 const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const log_update_1 = require("./log-update");
+const getVisualControlChangeLine = (file, changeId) => {
+    let line = 1;
+    recast.types.visit(file.program, {
+        visitCallExpression(callPath) {
+            var _a;
+            var _b;
+            const { node } = callPath;
+            if (node.callee.type === 'Identifier' &&
+                node.callee.name === 'visualControl') {
+                const firstArg = node.arguments[0];
+                if ((firstArg === null || firstArg === void 0 ? void 0 : firstArg.type) === 'StringLiteral' && firstArg.value === changeId) {
+                    line = (_b = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1;
+                    return false;
+                }
+            }
+            this.traverse(callPath);
+        },
+    });
+    return line;
+};
 const applyVisualControlHandler = async ({ input: { fileName, changes }, remotionRoot, logLevel }) => {
     renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[apply-visual-control] Received request for ${fileName} with ${changes.length} changes`);
     const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
@@ -57,6 +78,7 @@ const applyVisualControlHandler = async ({ input: { fileName, changes }, remotio
     }
     const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
     const ast = (0, parse_ast_1.parseAst)(fileContents);
+    const logLine = changes.length > 0 ? getVisualControlChangeLine(ast, changes[0].id) : 1;
     const { newAst, changesMade } = (0, recast_mods_1.applyCodemod)({
         file: ast,
         codeMod: {
@@ -94,11 +116,13 @@ const applyVisualControlHandler = async ({ input: { fileName, changes }, remotio
         oldContents: fileContents,
         logLevel,
         remotionRoot,
+        logLine,
         description: {
             undoMessage: 'Undid visual control change',
             redoMessage: 'Redid visual control change',
         },
         entryType: 'visual-control',
+        suppressHmrOnFileRestore: true,
     });
     (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
     (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
@@ -115,13 +139,12 @@ const applyVisualControlHandler = async ({ input: { fileName, changes }, remotio
             })),
         });
     });
-    const locationLabel = `${fileRelativeToRoot}`;
-    const fileLink = (0, make_link_1.makeHyperlink)({
-        url: `file://${absolutePath}`,
-        text: locationLabel,
-        fallback: locationLabel,
+    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(`${fileLink}:`)} Applied visual control changes`);
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} Applied visual control changes`);
     if (!formatted) {
         (0, log_update_1.warnAboutPrettierOnce)(logLevel);
     }

package/dist/preview-server/routes/delete-jsx-node.d.ts

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

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

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteJsxNodeHandler = 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_jsx_node_1 = require("../../codemods/delete-jsx-node");
+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 log_update_1 = require("./log-update");
+const deleteJsxNodeHandler = async ({ input: { fileName, nodePath }, remotionRoot, logLevel }) => {
+    try {
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-jsx-node] Received request for fileName="${fileName}"`);
+        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, 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: `Undid deletion of ${nodeLabel}`,
+                redoMessage: `Redid deletion of ${nodeLabel}`,
+            },
+            entryType: 'delete-jsx-node',
+            suppressHmrOnFileRestore: false,
+        });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output);
+        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);
+        }
+        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[delete-jsx-node] 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.deleteJsxNodeHandler = deleteJsxNodeHandler;

package/dist/preview-server/routes/log-update.d.ts

@@ -6,9 +6,9 @@ export declare const formatPropChange: ({ key, oldValueString, newValueString, d
     newValueString: string;
     defaultValueString: string | null;
 }) => string;
-export declare const logUpdate: ({ absolutePath, fileRelativeToRoot, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }: {
-    absolutePath: string;
+export declare const logUpdate: ({ fileRelativeToRoot, line, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }: {
     fileRelativeToRoot: string;
+    line: number;
     key: string;
     oldValueString: string;
     newValueString: string;

package/dist/preview-server/routes/log-update.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.logUpdate = exports.formatPropChange = exports.normalizeQuotes = exports.warnAboutPrettierOnce = void 0;
 const renderer_1 = require("@remotion/renderer");
-const make_link_1 = require("../../hyperlinks/make-link");
 let warnedAboutPrettier = false;
 const warnAboutPrettierOnce = (logLevel) => {
     if (warnedAboutPrettier) {
@@ -85,20 +84,15 @@ const formatPropChange = ({ key, oldValueString, newValueString, defaultValueStr
     return `${removedBg(formatNestedProp(parentKey, childKey, oldValueString))} \u2192 ${addedBg(formatNestedProp(parentKey, childKey, newValueString))}`;
 };
 exports.formatPropChange = formatPropChange;
-const logUpdate = ({ absolutePath, fileRelativeToRoot, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }) => {
-    const locationLabel = `${fileRelativeToRoot}`;
-    const fileLink = (0, make_link_1.makeHyperlink)({
-        url: `file://${absolutePath}`,
-        text: locationLabel,
-        fallback: locationLabel,
-    });
+const logUpdate = ({ fileRelativeToRoot, line, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }) => {
+    const locationLabel = `${fileRelativeToRoot}:${line}`;
     const propChange = (0, exports.formatPropChange)({
         key,
         oldValueString: (0, exports.normalizeQuotes)(oldValueString),
         newValueString: (0, exports.normalizeQuotes)(newValueString),
         defaultValueString: defaultValueString !== null ? (0, exports.normalizeQuotes)(defaultValueString) : null,
     });
-    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${fileLink}:`)} ${propChange}`);
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} ${propChange}`);
     if (!formatted) {
         (0, exports.warnAboutPrettierOnce)(logLevel);
     }

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

@@ -22,7 +22,7 @@ const saveSequencePropsHandler = async ({ input: { fileName, nodePath, key, valu
             throw new Error('Cannot modify a file outside the project');
         }
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, oldValueString, formatted } = await (0, update_sequence_props_1.updateSequenceProps)({
+        const { output, oldValueString, formatted, logLine } = await (0, update_sequence_props_1.updateSequenceProps)({
             input: fileContents,
             nodePath,
             key,
@@ -52,18 +52,20 @@ const saveSequencePropsHandler = async ({ input: { fileName, nodePath, key, valu
             oldContents: fileContents,
             logLevel,
             remotionRoot,
+            logLine,
             description: {
                 undoMessage: `Undid ${undoPropChange}`,
                 redoMessage: `Redid ${redoPropChange}`,
             },
             entryType: 'sequence-props',
+            suppressHmrOnFileRestore: true,
         });
         (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
         (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
         (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output);
         (0, log_update_1.logUpdate)({
-            absolutePath,
             fileRelativeToRoot,
+            line: logLine,
             key,
             oldValueString,
             newValueString,

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

@@ -1,15 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateDefaultPropsHandler = void 0;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const update_default_props_1 = require("../../codemods/update-default-props");
 const file_watcher_1 = require("../../file-watcher");
-const make_link_1 = require("../../hyperlinks/make-link");
+const format_log_file_location_1 = require("../format-log-file-location");
 const project_info_1 = require("../project-info");
 const undo_stack_1 = require("../undo-stack");
 const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
@@ -24,6 +20,10 @@ const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps,
         }
         (0, can_update_default_props_1.checkIfTypeScriptFile)(projectInfo.rootFile);
         const fileContents = (0, node_fs_1.readFileSync)(projectInfo.rootFile, 'utf-8');
+        const logLine = (0, update_default_props_1.getCompositionDefaultPropsLine)({
+            input: fileContents,
+            compositionId,
+        });
         const { output, formatted } = await (0, update_default_props_1.updateDefaultProps)({
             compositionId,
             input: fileContents,
@@ -35,23 +35,23 @@ const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps,
             oldContents: fileContents,
             logLevel,
             remotionRoot,
+            logLine,
             description: {
                 undoMessage: `Undid default props update for "${compositionId}"`,
                 redoMessage: `Redid default props update for "${compositionId}"`,
             },
             entryType: 'default-props',
+            suppressHmrOnFileRestore: true,
         });
         (0, undo_stack_1.suppressUndoStackInvalidation)(projectInfo.rootFile);
         (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(projectInfo.rootFile);
         (0, file_watcher_1.writeFileAndNotifyFileWatchers)(projectInfo.rootFile, output);
-        const fileRelativeToRoot = node_path_1.default.relative(remotionRoot, projectInfo.rootFile);
-        const locationLabel = `${fileRelativeToRoot}`;
-        const fileLink = (0, make_link_1.makeHyperlink)({
-            url: `file://${projectInfo.rootFile}`,
-            text: locationLabel,
-            fallback: locationLabel,
+        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot,
+            absolutePath: projectInfo.rootFile,
+            line: logLine,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${fileLink}:`)} Updated default props for "${compositionId}"`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} Updated default props for "${compositionId}"`);
         if (!formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

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

@@ -3,28 +3,43 @@ export interface UndoEntryDescription {
     undoMessage: string;
     redoMessage: string;
 }
-type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props';
+type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'delete-jsx-node';
 type UndoEntry = {
     filePath: string;
     oldContents: string;
+    /** 1-based source line for terminal/IDE file links (e.g. path:line). */
+    logLine: number;
     description: UndoEntryDescription;
+    /** When true, undo/redo file restores call `suppressBundlerUpdateForFile` (skip HMR refresh). */
+    suppressHmrOnFileRestore: boolean;
 } & ({
     entryType: 'visual-control';
 } | {
     entryType: 'default-props';
 } | {
     entryType: 'sequence-props';
+} | {
+    entryType: 'delete-jsx-node';
 });
-export declare function pushToUndoStack({ filePath, oldContents, logLevel, remotionRoot, description, entryType }: {
+export declare function pushToUndoStack({ filePath, oldContents, logLevel, remotionRoot, logLine, description, entryType, suppressHmrOnFileRestore }: {
     filePath: string;
     oldContents: string;
     logLevel: LogLevel;
     remotionRoot: string;
+    logLine: number;
     description: UndoEntryDescription;
     entryType: UndoEntryType;
+    suppressHmrOnFileRestore: boolean;
 }): void;
 export declare function printUndoHint(logLevel: LogLevel): void;
-export declare function pushToRedoStack(filePath: string, oldContents: string, description: UndoEntryDescription, entryType: UndoEntryType): void;
+export declare function pushToRedoStack({ filePath, oldContents, logLine, description, entryType, suppressHmrOnFileRestore }: {
+    filePath: string;
+    oldContents: string;
+    logLine: number;
+    description: UndoEntryDescription;
+    entryType: UndoEntryType;
+    suppressHmrOnFileRestore: boolean;
+}): void;
 export declare function suppressUndoStackInvalidation(filePath: string): void;
 export declare function popUndo(): {
     success: true;

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

@@ -1,7 +1,4 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pushToUndoStack = pushToUndoStack;
 exports.printUndoHint = printUndoHint;
@@ -12,12 +9,11 @@ exports.popRedo = popRedo;
 exports.getUndoStack = getUndoStack;
 exports.getRedoStack = getRedoStack;
 const node_fs_1 = require("node:fs");
-const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const parse_ast_1 = require("../codemods/parse-ast");
 const read_visual_control_values_1 = require("../codemods/read-visual-control-values");
 const file_watcher_1 = require("../file-watcher");
-const make_link_1 = require("../hyperlinks/make-link");
+const format_log_file_location_1 = require("./format-log-file-location");
 const live_events_1 = require("./live-events");
 const watch_ignore_next_change_1 = require("./watch-ignore-next-change");
 const MAX_ENTRIES = 100;
@@ -39,10 +35,17 @@ function broadcastState() {
         });
     });
 }
-function pushToUndoStack({ filePath, oldContents, logLevel, remotionRoot, description, entryType, }) {
+function pushToUndoStack({ filePath, oldContents, logLevel, remotionRoot, logLine, description, entryType, suppressHmrOnFileRestore, }) {
     storedLogLevel = logLevel;
     storedRemotionRoot = remotionRoot;
-    undoStack.push({ filePath, oldContents, description, entryType });
+    undoStack.push({
+        filePath,
+        oldContents,
+        logLine,
+        description,
+        entryType,
+        suppressHmrOnFileRestore,
+    });
     if (undoStack.length > MAX_ENTRIES) {
         undoStack.shift();
     }
@@ -58,8 +61,15 @@ function printUndoHint(logLevel) {
         renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.gray(`Tip: ${shortcut} in Studio to undo`));
     }
 }
-function pushToRedoStack(filePath, oldContents, description, entryType) {
-    redoStack.push({ filePath, oldContents, description, entryType });
+function pushToRedoStack({ filePath, oldContents, logLine, description, entryType, suppressHmrOnFileRestore, }) {
+    redoStack.push({
+        filePath,
+        oldContents,
+        logLine,
+        description,
+        entryType,
+        suppressHmrOnFileRestore,
+    });
     if (redoStack.length > MAX_ENTRIES) {
         redoStack.shift();
     }
@@ -156,16 +166,15 @@ function emitVisualControlChanges(fileContents) {
         // File might not contain visual controls or might not be parseable
     }
 }
-function logFileAction(action, filePath) {
-    const locationLabel = storedRemotionRoot
-        ? node_path_1.default.relative(storedRemotionRoot, filePath)
-        : filePath;
-    const fileLink = (0, make_link_1.makeHyperlink)({
-        url: `file://${filePath}`,
-        text: locationLabel,
-        fallback: locationLabel,
-    });
-    renderer_1.RenderInternals.Log.info({ indent: false, logLevel: storedLogLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${fileLink}:`)} ${action}`);
+function logFileAction(action, filePath, logLine) {
+    const locationLabel = storedRemotionRoot !== null
+        ? (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot: storedRemotionRoot,
+            absolutePath: filePath,
+            line: logLine,
+        })
+        : `${filePath}:${logLine}`;
+    renderer_1.RenderInternals.Log.info({ indent: false, logLevel: storedLogLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} ${action}`);
 }
 function popUndo() {
     const entry = undoStack.pop();
@@ -176,14 +185,18 @@ function popUndo() {
     redoStack.push({
         filePath: entry.filePath,
         oldContents: currentContents,
+        logLine: entry.logLine,
         description: entry.description,
         entryType: entry.entryType,
+        suppressHmrOnFileRestore: entry.suppressHmrOnFileRestore,
     });
     suppressUndoStackInvalidation(entry.filePath);
-    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(entry.filePath);
+    if (entry.suppressHmrOnFileRestore) {
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(entry.filePath);
+    }
     (0, file_watcher_1.writeFileAndNotifyFileWatchers)(entry.filePath, entry.oldContents);
     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);
+    logFileAction(entry.description.undoMessage, entry.filePath, entry.logLine);
     if (entry.entryType === 'visual-control') {
         emitVisualControlChanges(entry.oldContents);
     }
@@ -200,14 +213,18 @@ function popRedo() {
     undoStack.push({
         filePath: entry.filePath,
         oldContents: currentContents,
+        logLine: entry.logLine,
         description: entry.description,
         entryType: entry.entryType,
+        suppressHmrOnFileRestore: entry.suppressHmrOnFileRestore,
     });
     suppressUndoStackInvalidation(entry.filePath);
-    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(entry.filePath);
+    if (entry.suppressHmrOnFileRestore) {
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(entry.filePath);
+    }
     (0, file_watcher_1.writeFileAndNotifyFileWatchers)(entry.filePath, entry.oldContents);
     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);
+    logFileAction(entry.description.redoMessage, entry.filePath, entry.logLine);
     if (entry.entryType === 'visual-control') {
         emitVisualControlChanges(entry.oldContents);
     }

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.443",
+	"version": "4.0.445",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"sideEffects": false,
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.443",
+		"remotion": "4.0.445",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.443",
-		"@remotion/renderer": "4.0.443",
-		"@remotion/studio-shared": "4.0.443",
+		"@remotion/bundler": "4.0.445",
+		"@remotion/renderer": "4.0.445",
+		"@remotion/studio-shared": "4.0.445",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
 		"open": "^8.4.2"
@@ -41,7 +41,7 @@
 		"react": "19.2.3",
 		"@babel/types": "7.24.0",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.443",
+		"@remotion/eslint-config-internal": "4.0.445",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"