@remotion/studio-server 4.0.459 → 4.0.461

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

@@ -1,5 +1,5 @@
 import type { File, JSXElement } from '@babel/types';
-import type { SequenceNodePath } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
 /** 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;

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

@@ -1,4 +1,4 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
 export declare const duplicateJsxElementAtPath: (jsxPath: import("ast-types/lib/node-path").NodePath<N, V>) => void;
 export declare const duplicateJsxNode: ({ input, nodePath, prettierConfigOverride, }: {
     input: string;

package/dist/codemods/jsx-sequence-context.d.ts

@@ -1,5 +1,5 @@
 import type { Expression, File } from '@babel/types';
-import type { SequenceNodePath } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
 /**
  * Whether the callee is a `.map(...)` member call (including optional `?.map`).
  */

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

@@ -0,0 +1,35 @@
+import type { SequenceNodePath } from 'remotion';
+import type { SequenceSchema } from 'remotion';
+export type SequencePropUpdate = {
+    key: string;
+    value: unknown;
+    defaultValue: unknown | null;
+};
+export type RemovedProp = {
+    key: string;
+    valueString: string;
+};
+export declare const updateSequencePropsAst: ({ input, nodePath, updates, schema, }: {
+    input: string;
+    nodePath: SequenceNodePath;
+    updates: SequencePropUpdate[];
+    schema: SequenceSchema;
+}) => {
+    serialized: string;
+    oldValueStrings: string[];
+    logLine: number;
+    removedProps: RemovedProp[];
+};
+export declare const updateSequenceProps: ({ input, nodePath, updates, schema, prettierConfigOverride, }: {
+    input: string;
+    nodePath: SequenceNodePath;
+    updates: SequencePropUpdate[];
+    schema: SequenceSchema;
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    oldValueStrings: string[];
+    formatted: boolean;
+    logLine: number;
+    removedProps: RemovedProp[];
+}>;

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

@@ -0,0 +1,224 @@
+"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.updateSequenceProps = exports.updateSequencePropsAst = void 0;
+const recast = __importStar(require("recast"));
+const no_react_1 = require("remotion/no-react");
+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_nested_prop_1 = require("../update-nested-prop");
+const b = recast.types.builders;
+const removeVariantKey = ({ node, variantKey, }) => {
+    var _a;
+    const dotIndex = variantKey.indexOf('.');
+    if (dotIndex === -1) {
+        const idx = (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.findIndex((a) => a.type === 'JSXAttribute' &&
+            a.name.type === 'JSXIdentifier' &&
+            a.name.name === variantKey);
+        if (idx !== undefined && idx !== -1 && node.attributes) {
+            node.attributes.splice(idx, 1);
+        }
+        return;
+    }
+    (0, update_nested_prop_1.updateNestedProp)({
+        node,
+        parentKey: variantKey.slice(0, dotIndex),
+        childKey: variantKey.slice(dotIndex + 1),
+        value: undefined,
+        defaultValue: null,
+        isDefault: true,
+    });
+};
+const snapshotTopLevelAttrs = (node) => {
+    var _a;
+    const result = new Map();
+    for (const a of (_a = node.attributes) !== null && _a !== void 0 ? _a : []) {
+        if (a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier') {
+            const { name } = a.name;
+            const printed = recast
+                .print(a)
+                .code.replace(/\s+/g, ' ')
+                .replace(/,(\s*[}\]])/g, '$1')
+                .trim();
+            const prefix = `${name}=`;
+            let valueOnly = printed.startsWith(prefix)
+                ? printed.slice(prefix.length)
+                : printed;
+            if (valueOnly.startsWith('{') && valueOnly.endsWith('}')) {
+                valueOnly = valueOnly.slice(1, -1).trim();
+            }
+            result.set(name, valueOnly);
+        }
+    }
+    return result;
+};
+const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
+    var _a, _b, _c;
+    var _d, _e;
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
+    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;
+    const oldValueStrings = [];
+    const initialAttrs = snapshotTopLevelAttrs(node);
+    const updatedTopLevelKeys = new Set(updates.map(({ key }) => {
+        const dot = key.indexOf('.');
+        return dot === -1 ? key : key.slice(0, dot);
+    }));
+    for (const { key, value, defaultValue } of updates) {
+        let oldValueString = '';
+        const isDefault = defaultValue !== null &&
+            JSON.stringify(value) === JSON.stringify(defaultValue);
+        const dotIndex = key.indexOf('.');
+        const isNested = dotIndex !== -1;
+        const parentKey = isNested ? key.slice(0, dotIndex) : key;
+        const childKey = isNested ? key.slice(dotIndex + 1) : '';
+        if (isNested) {
+            oldValueString = (0, update_nested_prop_1.updateNestedProp)({
+                node,
+                parentKey,
+                childKey,
+                value,
+                defaultValue,
+                isDefault,
+            });
+        }
+        else {
+            const attrIndex = (_b = node.attributes) === null || _b === void 0 ? void 0 : _b.findIndex((a) => {
+                if (a.type === 'JSXSpreadAttribute') {
+                    return false;
+                }
+                if (a.name.type === 'JSXNamespacedName') {
+                    return false;
+                }
+                return a.name.name === key;
+            });
+            const attr = attrIndex !== undefined && attrIndex !== -1
+                ? (_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;
+                // Strip JSX expression container braces, e.g. "{30}" -> "30"
+                oldValueString =
+                    printed.startsWith('{') && printed.endsWith('}')
+                        ? printed.slice(1, -1)
+                        : printed;
+            }
+            else if (attr && attr.type !== 'JSXSpreadAttribute' && !attr.value) {
+                // JSX shorthand like `loop` (no value) is implicitly `true`
+                oldValueString = 'true';
+            }
+            else if (!attr && defaultValue !== null) {
+                oldValueString = JSON.stringify(defaultValue);
+            }
+            if (isDefault) {
+                if (attr && attr.type !== 'JSXSpreadAttribute' && node.attributes) {
+                    node.attributes.splice(attrIndex, 1);
+                }
+            }
+            else {
+                const parsed = (0, update_nested_prop_1.parseValueExpression)(value);
+                const newValue = value === true ? null : b.jsxExpressionContainer(parsed);
+                if (!attr || attr.type === 'JSXSpreadAttribute') {
+                    const newAttr = b.jsxAttribute(b.jsxIdentifier(key), newValue);
+                    if (!node.attributes) {
+                        node.attributes = [];
+                    }
+                    node.attributes.push(newAttr);
+                }
+                else {
+                    attr.value = newValue;
+                }
+            }
+        }
+        oldValueStrings.push(oldValueString);
+        if (!isNested) {
+            const fieldSchema = schema[key];
+            if (fieldSchema && fieldSchema.type === 'enum') {
+                const propsToDelete = no_react_1.NoReactInternals.findPropsToDelete({
+                    schema,
+                    key,
+                    value,
+                });
+                for (const propToDelete of propsToDelete) {
+                    removeVariantKey({ node, variantKey: propToDelete });
+                }
+            }
+        }
+    }
+    const finalAttrNames = new Set();
+    for (const a of (_e = node.attributes) !== null && _e !== void 0 ? _e : []) {
+        if (a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier') {
+            finalAttrNames.add(a.name.name);
+        }
+    }
+    const removedProps = [];
+    for (const [name, valueString] of initialAttrs) {
+        if (finalAttrNames.has(name) || updatedTopLevelKeys.has(name)) {
+            continue;
+        }
+        removedProps.push({ key: name, valueString });
+    }
+    return {
+        serialized: (0, parse_ast_1.serializeAst)(ast),
+        oldValueStrings,
+        logLine,
+        removedProps,
+    };
+};
+exports.updateSequencePropsAst = updateSequencePropsAst;
+const updateSequenceProps = async ({ input, nodePath, updates, schema, prettierConfigOverride, }) => {
+    const { serialized, oldValueStrings, logLine, removedProps } = (0, exports.updateSequencePropsAst)({
+        input,
+        nodePath,
+        updates,
+        schema,
+    });
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: serialized,
+        prettierConfigOverride,
+    });
+    return {
+        output,
+        oldValueStrings,
+        formatted,
+        logLine,
+        removedProps,
+    };
+};
+exports.updateSequenceProps = updateSequenceProps;

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

@@ -1,10 +1,14 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
 import type { SequenceSchema } from 'remotion';
 export type SequencePropUpdate = {
     key: string;
     value: unknown;
     defaultValue: unknown | null;
 };
+export type RemovedProp = {
+    key: string;
+    valueString: string;
+};
 export declare const updateSequencePropsAst: ({ input, nodePath, updates, schema, }: {
     input: string;
     nodePath: SequenceNodePath;
@@ -14,6 +18,7 @@ export declare const updateSequencePropsAst: ({ input, nodePath, updates, schema
     serialized: string;
     oldValueStrings: string[];
     logLine: number;
+    removedProps: RemovedProp[];
 };
 export declare const updateSequenceProps: ({ input, nodePath, updates, schema, prettierConfigOverride, }: {
     input: string;
@@ -26,4 +31,5 @@ export declare const updateSequenceProps: ({ input, nodePath, updates, schema, p
     oldValueStrings: string[];
     formatted: boolean;
     logLine: number;
+    removedProps: RemovedProp[];
 }>;

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

@@ -61,9 +61,23 @@ const removeVariantKey = ({ node, variantKey, }) => {
         isDefault: true,
     });
 };
+const snapshotTopLevelAttrs = (node) => {
+    var _a;
+    const result = new Map();
+    for (const a of (_a = node.attributes) !== null && _a !== void 0 ? _a : []) {
+        if (a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier') {
+            result.set(a.name.name, recast
+                .print(a)
+                .code.replace(/\s+/g, ' ')
+                .replace(/,(\s*[}\]])/g, '$1')
+                .trim());
+        }
+    }
+    return result;
+};
 const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
     var _a, _b, _c;
-    var _d;
+    var _d, _e;
     const ast = (0, parse_ast_1.parseAst)(input);
     const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
     if (!node) {
@@ -71,6 +85,11 @@ const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
     }
     const logLine = (_d = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : 1;
     const oldValueStrings = [];
+    const initialAttrs = snapshotTopLevelAttrs(node);
+    const updatedTopLevelKeys = new Set(updates.map(({ key }) => {
+        const dot = key.indexOf('.');
+        return dot === -1 ? key : key.slice(0, dot);
+    }));
     for (const { key, value, defaultValue } of updates) {
         let oldValueString = '';
         const isDefault = defaultValue !== null &&
@@ -145,7 +164,7 @@ const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
                 try {
                     oldRawValue = JSON.parse(oldValueString);
                 }
-                catch (_e) {
+                catch (_f) {
                     oldRawValue = oldValueString;
                 }
                 if (oldRawValue !== value) {
@@ -166,15 +185,29 @@ const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
             }
         }
     }
+    const finalAttrNames = new Set();
+    for (const a of (_e = node.attributes) !== null && _e !== void 0 ? _e : []) {
+        if (a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier') {
+            finalAttrNames.add(a.name.name);
+        }
+    }
+    const removedProps = [];
+    for (const [name, valueString] of initialAttrs) {
+        if (finalAttrNames.has(name) || updatedTopLevelKeys.has(name)) {
+            continue;
+        }
+        removedProps.push({ key: name, valueString });
+    }
     return {
         serialized: (0, parse_ast_1.serializeAst)(ast),
         oldValueStrings,
         logLine,
+        removedProps,
     };
 };
 exports.updateSequencePropsAst = updateSequencePropsAst;
 const updateSequenceProps = async ({ input, nodePath, updates, schema, prettierConfigOverride, }) => {
-    const { serialized, oldValueStrings, logLine } = (0, exports.updateSequencePropsAst)({
+    const { serialized, oldValueStrings, logLine, removedProps } = (0, exports.updateSequencePropsAst)({
         input,
         nodePath,
         updates,
@@ -189,6 +222,7 @@ const updateSequenceProps = async ({ input, nodePath, updates, schema, prettierC
         oldValueStrings,
         formatted,
         logLine,
+        removedProps,
     };
 };
 exports.updateSequenceProps = updateSequenceProps;

package/dist/helpers/get-ast-node-path.d.ts

@@ -1,3 +1,3 @@
 import type { File } from '@babel/types';
-import type { SequenceNodePath } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
 export declare const getAstNodePath: (ast: File, nodePath: SequenceNodePath) => import("ast-types/lib/node-path").NodePath<N, V> | null;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { ApiRoutes, CopyStillToClipboardRequest, getDefaultOutLocation, OpenInFi
 export type { AggregateRenderProgress, BundlingState, CopyingState, DownloadProgress, HotMiddlewareOptions, JobProgressCallback, ModuleMap, PackageManager, ProjectInfo, RenderingProgressInput, RenderJob, RenderJobWithCleanup, RequiredChromiumOptions, StitchingProgressInput, UiOpenGlOptions, } from '@remotion/studio-shared';
 import { AnsiDiff } from './ansi-diff';
 export declare const StudioServerInternals: {
-    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, experimentalVisualModeEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, enableCrossSiteIsolation, askAIEnabled, forceNew, rspack, }: {
+    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, enableCrossSiteIsolation, askAIEnabled, forceNew, rspack, }: {
         browserArgs: string;
         browserFlag: string;
         logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -16,7 +16,6 @@ export declare const StudioServerInternals: {
         remotionRoot: string;
         keyboardShortcutsEnabled: boolean;
         experimentalClientSideRenderingEnabled: boolean;
-        experimentalVisualModeEnabled: boolean;
         relativePublicDir: string | null;
         webpackOverride: import("@remotion/bundler").WebpackOverrideFn;
         poll: number | null;

package/dist/preview-server/node-path-cache.d.ts

@@ -1,4 +1,4 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
 export declare const getCachedNodePath: (fileName: string, line: number, column: number) => SequenceNodePath | undefined;
 export declare const setCachedNodePath: (fileName: string, line: number, column: number, nodePath: SequenceNodePath) => void;
 export declare const clearNodePathCache: () => void;

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

@@ -48,7 +48,7 @@ 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 log_update_1 = require("./log-updates/log-update");
 const getVisualControlChangeLine = (file, changeId) => {
     let line = 1;
     recast.types.visit(file.program, {
@@ -118,8 +118,8 @@ const applyVisualControlHandler = async ({ input: { fileName, changes }, remotio
         remotionRoot,
         logLine,
         description: {
-            undoMessage: 'Undo: Visual control change',
-            redoMessage: 'Redo: Visual control change',
+            undoMessage: '↩️  Visual control change',
+            redoMessage: '↪️  Visual control change',
         },
         entryType: 'visual-control',
         suppressHmrOnFileRestore: true,
@@ -144,7 +144,7 @@ const applyVisualControlHandler = async ({ input: { fileName, changes }, remotio
         absolutePath,
         line: logLine,
     });
-    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} 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/can-update-sequence-props.d.ts

@@ -1,19 +1,21 @@
 import type { Expression, File, JSXOpeningElement } from '@babel/types';
-import type { CanUpdateSequencePropsResponse, SequenceNodePath } from '@remotion/studio-shared';
+import type { SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
+import type { CanUpdateSequencePropsResponseTrue } from 'remotion';
+import type { SequenceNodePath } from 'remotion';
 export declare const isStaticValue: (node: Expression) => boolean;
 export declare const extractStaticValue: (node: Expression) => unknown;
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
 export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
-export declare const computeSequencePropsStatusFromContent: (fileContents: string, nodePath: SequenceNodePath, keys: string[]) => CanUpdateSequencePropsResponse;
+export declare const computeSequencePropsStatusFromContent: (fileContents: string, nodePath: SequenceNodePath, keys: string[]) => CanUpdateSequencePropsResponseTrue;
 export declare const computeSequencePropsStatus: ({ fileName, nodePath, keys, remotionRoot, }: {
     fileName: string;
     nodePath: SequenceNodePath;
     keys: string[];
     remotionRoot: string;
-}) => CanUpdateSequencePropsResponse;
+}) => CanUpdateSequencePropsResponseTrue;
 export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, keys, remotionRoot, }: {
     fileName: string;
     line: number;
     keys: string[];
     remotionRoot: string;
-}) => CanUpdateSequencePropsResponse;
+}) => SubscribeToSequencePropsResponse;

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

@@ -40,7 +40,6 @@ exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePr
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const recast = __importStar(require("recast"));
-const jsx_sequence_context_1 = require("../../codemods/jsx-sequence-context");
 const parse_ast_1 = require("../../codemods/parse-ast");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const isStaticValue = (node) => {
@@ -271,27 +270,17 @@ const computeSequencePropsStatusFromContent = (fileContents, nodePath, keys) =>
     return {
         canUpdate: true,
         props: filteredProps,
-        nodePath,
-        jsxInMapCallback: (0, jsx_sequence_context_1.isJsxUnderMapCallback)(ast, nodePath),
     };
 };
 exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
 const computeSequencePropsStatus = ({ fileName, nodePath, keys, remotionRoot, }) => {
-    try {
-        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 read a file outside the project');
-        }
-        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        return (0, exports.computeSequencePropsStatusFromContent)(fileContents, nodePath, keys);
-    }
-    catch (err) {
-        return {
-            canUpdate: false,
-            reason: err.message,
-        };
+    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 read a file outside the project');
     }
+    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+    return (0, exports.computeSequencePropsStatusFromContent)(fileContents, nodePath, keys);
 };
 exports.computeSequencePropsStatus = computeSequencePropsStatus;
 const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, keys, remotionRoot, }) => {
@@ -307,17 +296,24 @@ const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, keys, re
         if (!resolvedNodePath) {
             throw new Error('Could not find a JSX element at the specified location');
         }
-        return (0, exports.computeSequencePropsStatus)({
-            fileName,
+        return {
+            status: (0, exports.computeSequencePropsStatus)({
+                fileName,
+                nodePath: resolvedNodePath,
+                keys,
+                remotionRoot,
+            }),
             nodePath: resolvedNodePath,
-            keys,
-            remotionRoot,
-        });
+            success: true,
+        };
     }
     catch (err) {
         return {
-            canUpdate: false,
-            reason: err.message,
+            status: {
+                canUpdate: false,
+                reason: err.message,
+            },
+            success: false,
         };
     }
 };

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

@@ -11,7 +11,7 @@ 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 log_update_1 = require("./log-updates/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}"`);
@@ -32,8 +32,8 @@ const deleteJsxNodeHandler = async ({ input: { fileName, nodePath }, remotionRoo
             remotionRoot,
             logLine,
             description: {
-                undoMessage: `Undo: Deletion of ${nodeLabel}`,
-                redoMessage: `Redo: Deletion of ${nodeLabel}`,
+                undoMessage: `↩️  Deletion of ${nodeLabel}`,
+                redoMessage: `↪️  Deletion of ${nodeLabel}`,
             },
             entryType: 'delete-jsx-node',
             suppressHmrOnFileRestore: false,
@@ -45,7 +45,7 @@ const deleteJsxNodeHandler = async ({ input: { fileName, nodePath }, remotionRoo
             absolutePath,
             line: logLine,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} Deleted ${nodeLabel}`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Deleted ${nodeLabel}`);
         if (!formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

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

@@ -11,7 +11,7 @@ const duplicate_jsx_node_1 = require("../../codemods/duplicate-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 log_update_1 = require("./log-updates/log-update");
 const duplicateJsxNodeHandler = async ({ input: { fileName, nodePath }, remotionRoot, logLevel }) => {
     try {
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[duplicate-jsx-node] Received request for fileName="${fileName}"`);
@@ -32,8 +32,8 @@ const duplicateJsxNodeHandler = async ({ input: { fileName, nodePath }, remotion
             remotionRoot,
             logLine,
             description: {
-                undoMessage: `Undo: duplication of ${nodeLabel}`,
-                redoMessage: `Redo: duplication of ${nodeLabel}`,
+                undoMessage: `↩️  Duplication of ${nodeLabel}`,
+                redoMessage: `↪️  Duplication of ${nodeLabel}`,
             },
             entryType: 'duplicate-jsx-node',
             suppressHmrOnFileRestore: false,
@@ -45,7 +45,7 @@ const duplicateJsxNodeHandler = async ({ input: { fileName, nodePath }, remotion
             absolutePath,
             line: logLine,
         });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}:`)} Duplicated ${nodeLabel}`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Duplicated ${nodeLabel}`);
         if (!formatted) {
             (0, log_update_1.warnAboutPrettierOnce)(logLevel);
         }

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

@@ -1,12 +1,21 @@
 export declare const warnAboutPrettierOnce: (logLevel: "error" | "info" | "trace" | "verbose" | "warn") => void;
 export declare const normalizeQuotes: (str: string) => string;
-export declare const formatPropChange: ({ key, oldValueString, newValueString, defaultValueString, }: {
+export declare const fg: (r: number, g: number, b: number, str: string) => string;
+export declare const bg: (r: number, g: number, b: number, str: string) => string;
+export declare const strikeThrough: (str: string) => string;
+export type PropDelta = {
+    key: string;
+    valueString: string;
+};
+export declare const formatPropChange: ({ key, oldValueString, newValueString, defaultValueString, removedProps, addedProps, }: {
     key: string;
     oldValueString: string;
     newValueString: string;
     defaultValueString: string | null;
+    removedProps: PropDelta[];
+    addedProps: PropDelta[];
 }) => string;
-export declare const logUpdate: ({ fileRelativeToRoot, line, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, }: {
+export declare const logUpdate: ({ fileRelativeToRoot, line, key, oldValueString, newValueString, defaultValueString, formatted, logLevel, removedProps, addedProps, }: {
     fileRelativeToRoot: string;
     line: number;
     key: string;
@@ -15,4 +24,6 @@ export declare const logUpdate: ({ fileRelativeToRoot, line, key, oldValueString
     defaultValueString: string | null;
     formatted: boolean;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    removedProps: PropDelta[];
+    addedProps: PropDelta[];
 }) => void;