@remotion/studio-server 4.0.474 → 4.0.476

package/dist/preview-server/routes/log-updates/formatting.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatAddition = exports.formatDeletion = exports.formatPropDelta = exports.addedPrefixIfNoColor = exports.strikeThroughOrRemovedPrefix = exports.strikeThrough = exports.numberValue = exports.stringValue = exports.punctuation = exports.equals = exports.attrName = exports.bg = exports.fg = exports.colorValue = exports.colorEnabled = void 0;
+exports.formatAddition = exports.formatDeletion = exports.formatPropChangeDelta = exports.formatPropDelta = exports.addedPrefixIfNoColor = exports.strikeThroughOrRemovedPrefix = exports.strikeThrough = exports.inlineAddition = exports.numberValue = exports.stringValue = exports.punctuation = exports.equals = exports.attrName = exports.bg = exports.fg = exports.colorValue = exports.colorEnabled = void 0;
 const renderer_1 = require("@remotion/renderer");
 const colorEnabled = () => renderer_1.RenderInternals.chalk.enabled();
 exports.colorEnabled = colorEnabled;
@@ -35,6 +35,8 @@ const stringValue = (str) => (0, exports.fg)(230, 219, 116, str);
 exports.stringValue = stringValue;
 const numberValue = (str) => (0, exports.fg)(174, 129, 255, str);
 exports.numberValue = numberValue;
+const inlineAddition = (str) => (0, exports.fg)(166, 226, 46, str);
+exports.inlineAddition = inlineAddition;
 const strikeThrough = (str) => `\u001b[9m\u001b[38;2;255;85;85m${stripAnsi(str)}\u001b[39m\u001b[29m`;
 exports.strikeThrough = strikeThrough;
 const strikeThroughOrRemovedPrefix = (str) => (0, exports.colorEnabled)() ? (0, exports.strikeThrough)(str) : 'removed: ' + str;
@@ -49,6 +51,25 @@ const formatSimpleProp = (key, value) => {
 const formatNestedProp = (parentKey, childKey, value) => {
     return `${(0, exports.attrName)(parentKey)}${(0, exports.equals)('=')}${(0, exports.punctuation)('{{')}${(0, exports.punctuation)(childKey)}${(0, exports.punctuation)(':')} ${(0, exports.colorValue)(value)}${(0, exports.punctuation)('}}')}`;
 };
+const formatValueDelta = ({ oldValueString, newValueString, }) => {
+    const withoutUnchangedOptions = shortenUnchangedInterpolateOptions({
+        oldValueString,
+        newValueString,
+    });
+    const shortened = removeUnchangedInterpolateOptionProperties(withoutUnchangedOptions);
+    const inlineDelta = formatInlineAdditionOrRemoval(shortened);
+    if (inlineDelta !== null) {
+        return inlineDelta;
+    }
+    return `${(0, exports.colorValue)(shortened.oldValueString)} ${(0, exports.punctuation)('→')} ${(0, exports.colorValue)(shortened.newValueString)}`;
+};
+const formatSimplePropChange = ({ key, oldValueString, newValueString, }) => {
+    return `${(0, exports.attrName)(key)}${(0, exports.equals)('=')}${(0, exports.punctuation)('{')}${formatValueDelta({ oldValueString, newValueString })}${(0, exports.punctuation)('}')}`;
+};
+const formatNestedPropChange = ({ key, oldValueString, newValueString, }) => {
+    const dotIdx = key.indexOf('.');
+    return `${(0, exports.attrName)(key.slice(0, dotIdx))}${(0, exports.equals)('=')}${(0, exports.punctuation)('{{')}${(0, exports.punctuation)(key.slice(dotIdx + 1))}${(0, exports.punctuation)(':')} ${formatValueDelta({ oldValueString, newValueString })}${(0, exports.punctuation)('}}')}`;
+};
 const formatPropDelta = ({ key, valueString }) => {
     const dotIdx = key.indexOf('.');
     if (dotIdx === -1) {
@@ -57,6 +78,14 @@ const formatPropDelta = ({ key, valueString }) => {
     return formatNestedProp(key.slice(0, dotIdx), key.slice(dotIdx + 1), valueString);
 };
 exports.formatPropDelta = formatPropDelta;
+const formatPropChangeDelta = ({ key, oldValueString, newValueString, }) => {
+    const dotIdx = key.indexOf('.');
+    if (dotIdx === -1) {
+        return formatSimplePropChange({ key, oldValueString, newValueString });
+    }
+    return formatNestedPropChange({ key, oldValueString, newValueString });
+};
+exports.formatPropChangeDelta = formatPropChangeDelta;
 const formatDeletion = (prop) => {
     const formatted = (0, exports.formatPropDelta)(prop);
     return (0, exports.strikeThroughOrRemovedPrefix)(formatted);
@@ -67,3 +96,229 @@ const formatAddition = (prop) => {
     return (0, exports.addedPrefixIfNoColor)(formatted);
 };
 exports.formatAddition = formatAddition;
+const callStart = 'interpolate(';
+const normalizeArg = (arg) => {
+    return arg
+        .replace(/\s+/g, ' ')
+        .replace(/,(\s*[}\]])/g, '$1')
+        .trim();
+};
+const shortenUnchangedOptionProperties = new Set([
+    'extrapolateLeft',
+    'extrapolateRight',
+]);
+const splitTopLevelArgs = (argsSource) => {
+    const args = [];
+    let depth = 0;
+    let quote = null;
+    let start = 0;
+    for (let i = 0; i < argsSource.length; i++) {
+        const char = argsSource[i];
+        const previous = argsSource[i - 1];
+        if (quote) {
+            if (char === quote && previous !== '\\') {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === "'" || char === '"' || char === '`') {
+            quote = char;
+            continue;
+        }
+        if (char === '(' || char === '[' || char === '{') {
+            depth++;
+            continue;
+        }
+        if (char === ')' || char === ']' || char === '}') {
+            depth--;
+            continue;
+        }
+        if (char === ',' && depth === 0) {
+            args.push(argsSource.slice(start, i).trim());
+            start = i + 1;
+        }
+    }
+    args.push(argsSource.slice(start).trim());
+    return args;
+};
+const getCommonPrefixLength = (oldValueString, newValueString) => {
+    const maxLength = Math.min(oldValueString.length, newValueString.length);
+    let index = 0;
+    while (index < maxLength && oldValueString[index] === newValueString[index]) {
+        index++;
+    }
+    return index;
+};
+const getCommonSuffixLength = ({ oldValueString, newValueString, prefixLength, }) => {
+    const maxLength = Math.min(oldValueString.length, newValueString.length) - prefixLength;
+    let index = 0;
+    while (index < maxLength &&
+        oldValueString[oldValueString.length - 1 - index] ===
+            newValueString[newValueString.length - 1 - index]) {
+        index++;
+    }
+    return index;
+};
+const minSharedInlineDeltaChars = 12;
+const formatInlineAdditionOrRemoval = ({ oldValueString, newValueString, }) => {
+    if (!(0, exports.colorEnabled)()) {
+        return null;
+    }
+    const prefixLength = getCommonPrefixLength(oldValueString, newValueString);
+    const suffixLength = getCommonSuffixLength({
+        oldValueString,
+        newValueString,
+        prefixLength,
+    });
+    if (prefixLength + suffixLength < minSharedInlineDeltaChars) {
+        return null;
+    }
+    const oldMiddleEnd = oldValueString.length - suffixLength;
+    const newMiddleEnd = newValueString.length - suffixLength;
+    const oldMiddle = oldValueString.slice(prefixLength, oldMiddleEnd);
+    const newMiddle = newValueString.slice(prefixLength, newMiddleEnd);
+    if (oldMiddle.length === 0 && newMiddle.length > 0) {
+        return `${newValueString.slice(0, prefixLength)}${(0, exports.inlineAddition)(newMiddle)}${newValueString.slice(newMiddleEnd)}`;
+    }
+    if (newMiddle.length === 0 && oldMiddle.length > 0) {
+        return `${oldValueString.slice(0, prefixLength)}${(0, exports.strikeThrough)(oldMiddle)}${oldValueString.slice(oldMiddleEnd)}`;
+    }
+    return null;
+};
+const getObjectPropertyKey = (propertySource) => {
+    const colonIndex = propertySource.indexOf(':');
+    if (colonIndex === -1) {
+        return null;
+    }
+    const key = propertySource.slice(0, colonIndex).trim();
+    if (/^[A-Za-z_$][\w$]*$/.test(key)) {
+        return key;
+    }
+    if ((key.startsWith("'") && key.endsWith("'")) ||
+        (key.startsWith('"') && key.endsWith('"'))) {
+        return key.slice(1, -1);
+    }
+    return null;
+};
+const parseTopLevelObjectProperties = (objectSource) => {
+    const trimmed = objectSource.trim();
+    if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
+        return null;
+    }
+    const properties = splitTopLevelArgs(trimmed.slice(1, -1))
+        .filter(Boolean)
+        .map((propertySource) => {
+        const key = getObjectPropertyKey(propertySource);
+        if (key === null) {
+            return null;
+        }
+        const colonIndex = propertySource.indexOf(':');
+        return {
+            key,
+            value: normalizeArg(propertySource.slice(colonIndex + 1)),
+            source: propertySource.trim(),
+        };
+    });
+    if (properties.some((property) => property === null)) {
+        return null;
+    }
+    return properties;
+};
+const parseInterpolateCall = (valueString) => {
+    const trimmed = valueString.trim();
+    if (!trimmed.startsWith(callStart) || !trimmed.endsWith(')')) {
+        return null;
+    }
+    let depth = 0;
+    let quote = null;
+    for (let i = 'interpolate'.length; i < trimmed.length; i++) {
+        const char = trimmed[i];
+        const previous = trimmed[i - 1];
+        if (quote) {
+            if (char === quote && previous !== '\\') {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === "'" || char === '"' || char === '`') {
+            quote = char;
+            continue;
+        }
+        if (char === '(' || char === '[' || char === '{') {
+            depth++;
+            continue;
+        }
+        if (char === ')' || char === ']' || char === '}') {
+            depth--;
+            if (depth === 0 && i !== trimmed.length - 1) {
+                return null;
+            }
+        }
+    }
+    if (depth !== 0) {
+        return null;
+    }
+    return {
+        args: splitTopLevelArgs(trimmed.slice(callStart.length, -1)),
+    };
+};
+const shortenUnchangedInterpolateOptions = ({ oldValueString, newValueString, }) => {
+    const oldCall = parseInterpolateCall(oldValueString);
+    const newCall = parseInterpolateCall(newValueString);
+    if (!oldCall ||
+        !newCall ||
+        oldCall.args.length <= 3 ||
+        newCall.args.length <= 3) {
+        return { oldValueString, newValueString };
+    }
+    const oldOptions = oldCall.args.slice(3).map(normalizeArg);
+    const newOptions = newCall.args.slice(3).map(normalizeArg);
+    if (oldOptions.length !== newOptions.length ||
+        oldOptions.some((option, index) => option !== newOptions[index])) {
+        return { oldValueString, newValueString };
+    }
+    return {
+        oldValueString: `interpolate(${oldCall.args.slice(0, 3).join(', ')})`,
+        newValueString: `interpolate(${newCall.args.slice(0, 3).join(', ')})`,
+    };
+};
+const removeUnchangedInterpolateOptionProperties = ({ oldValueString, newValueString, }) => {
+    const oldCall = parseInterpolateCall(oldValueString);
+    const newCall = parseInterpolateCall(newValueString);
+    if (!oldCall ||
+        !newCall ||
+        oldCall.args.length <= 3 ||
+        newCall.args.length <= 3) {
+        return { oldValueString, newValueString };
+    }
+    const oldProperties = parseTopLevelObjectProperties(oldCall.args[3]);
+    const newProperties = parseTopLevelObjectProperties(newCall.args[3]);
+    if (!oldProperties || !newProperties) {
+        return { oldValueString, newValueString };
+    }
+    const propertiesToRemove = [...shortenUnchangedOptionProperties].filter((propertyName) => {
+        const oldProperty = oldProperties.find((property) => property.key === propertyName);
+        const newProperty = newProperties.find((property) => property.key === propertyName);
+        return (oldProperty !== undefined &&
+            newProperty !== undefined &&
+            oldProperty.value === newProperty.value);
+    });
+    if (propertiesToRemove.length === 0) {
+        return { oldValueString, newValueString };
+    }
+    const removeProperties = (call, properties) => {
+        const nextOptions = properties.filter((property) => !propertiesToRemove.includes(property.key));
+        const nextArgs = nextOptions.length === 0
+            ? [...call.args.slice(0, 3), ...call.args.slice(4)]
+            : [
+                ...call.args.slice(0, 3),
+                `{${nextOptions.map((property) => property.source).join(', ')}}`,
+                ...call.args.slice(4),
+            ];
+        return `interpolate(${nextArgs.join(', ')})`;
+    };
+    return {
+        oldValueString: removeProperties(oldCall, oldProperties),
+        newValueString: removeProperties(newCall, newProperties),
+    };
+};

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

@@ -1,3 +1,20 @@
-import type { SaveSequencePropsRequest, SaveSequencePropsResponse } from '@remotion/studio-shared';
+import type { SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse } from '@remotion/studio-shared';
+import { type SequencePropsNodeUpdate } from '../../codemods/update-sequence-props/update-sequence-props';
 import type { ApiHandler } from '../api-types';
+type ResolvedSequencePropEdit = {
+    index: number;
+    fileName: SaveSequencePropEdit['fileName'];
+    nodePath: SaveSequencePropEdit['nodePath'];
+    key: SaveSequencePropEdit['key'];
+    value: unknown;
+    valueString: string;
+    defaultValue: unknown | null;
+    defaultValueString: string | null;
+    schema: SaveSequencePropEdit['schema'];
+};
+export declare const convertSequencePropEditToCodemodChange: (edit: Pick<ResolvedSequencePropEdit, "defaultValue" | "key" | "nodePath" | "schema" | "value">) => SequencePropsNodeUpdate;
+export declare const shouldSuppressHmrForSequencePropEdits: (edits: readonly {
+    key: string;
+}[]) => boolean;
 export declare const saveSequencePropsHandler: ApiHandler<SaveSequencePropsRequest, SaveSequencePropsResponse>;
+export {};

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

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveSequencePropsHandler = void 0;
+exports.saveSequencePropsHandler = exports.shouldSuppressHmrForSequencePropEdits = exports.convertSequencePropEditToCodemodChange = void 0;
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
-const no_react_1 = require("remotion/no-react");
 const update_sequence_props_1 = require("../../codemods/update-sequence-props/update-sequence-props");
 const file_watcher_1 = require("../../file-watcher");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
@@ -13,6 +12,24 @@ const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
 const log_update_1 = require("./log-updates/log-update");
 const save_props_mutex_1 = require("./save-props-mutex");
+const convertSequencePropEditToCodemodChange = (edit) => {
+    return {
+        nodePath: edit.nodePath.nodePath,
+        updates: [
+            {
+                key: edit.key,
+                value: edit.value,
+                defaultValue: edit.defaultValue,
+            },
+        ],
+        schema: edit.schema,
+    };
+};
+exports.convertSequencePropEditToCodemodChange = convertSequencePropEditToCodemodChange;
+const shouldSuppressHmrForSequencePropEdits = (edits) => {
+    return edits.every((edit) => edit.key !== 'showInTimeline');
+};
+exports.shouldSuppressHmrForSequencePropEdits = shouldSuppressHmrForSequencePropEdits;
 const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLabel }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
     var _a;
     if (edits.length === 0) {
@@ -54,19 +71,7 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         const { output, formatted, results: updateResults, } = await (0, update_sequence_props_1.updateMultipleSequenceProps)({
             input: fileContents,
-            changes: group.edits.map((edit) => {
-                return {
-                    nodePath: edit.nodePath.nodePath,
-                    updates: [
-                        {
-                            key: edit.key,
-                            value: edit.value,
-                            defaultValue: edit.defaultValue,
-                        },
-                    ],
-                    schema: no_react_1.NoReactInternals.sequenceSchema,
-                };
-            }),
+            changes: group.edits.map(exports.convertSequencePropEditToCodemodChange),
             prettierConfigOverride: null,
         });
         const [{ logLine: firstLogLine }] = updateResults;
@@ -89,17 +94,20 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
     }
     const undoMessage = `↩️  ${undoLabel}`;
     const redoMessage = `↪️  ${redoLabel}`;
+    const suppressHmr = (0, exports.shouldSuppressHmrForSequencePropEdits)(edits);
     (0, undo_stack_1.pushTransactionToUndoStack)({
         snapshots,
         logLevel,
         remotionRoot,
         description: { undoMessage, redoMessage },
         entryType: 'sequence-props',
-        suppressHmrOnFileRestore: true,
+        suppressHmrOnFileRestore: suppressHmr,
     });
     for (const [absolutePath, output] of outputByPath) {
         (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+        if (suppressHmr) {
+            (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+        }
         (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
     }
     for (const { edits: groupEdits, fileRelativeToRoot } of editGroups.values()) {

package/dist/preview-server/routes/update-effect-keyframe-settings.js

@@ -30,11 +30,17 @@ const updateEffectKeyframeSettingsHandler = ({ input: { fileName, sequenceNodePa
         updates: [
             {
                 key,
-                operation: {
-                    type: 'settings',
-                    clamping: settings.clamping,
-                    posterize: settings.posterize,
-                },
+                operation: settings.type === 'settings'
+                    ? {
+                        type: 'settings',
+                        clamping: settings.clamping,
+                        posterize: settings.posterize,
+                    }
+                    : {
+                        type: 'easing',
+                        segmentIndex: settings.segmentIndex,
+                        easing: settings.easing,
+                    },
             },
         ],
     });

package/dist/preview-server/routes/update-sequence-keyframe-settings.js

@@ -27,11 +27,17 @@ const updateSequenceKeyframeSettingsHandler = ({ input: { fileName, nodePath, ke
         updates: [
             {
                 key,
-                operation: {
-                    type: 'settings',
-                    clamping: settings.clamping,
-                    posterize: settings.posterize,
-                },
+                operation: settings.type === 'settings'
+                    ? {
+                        type: 'settings',
+                        clamping: settings.clamping,
+                        posterize: settings.posterize,
+                    }
+                    : {
+                        type: 'easing',
+                        segmentIndex: settings.segmentIndex,
+                        easing: settings.easing,
+                    },
             },
         ],
     });

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

@@ -3,7 +3,7 @@ export interface UndoEntryDescription {
     undoMessage: string;
     redoMessage: string;
 }
-type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'duplicate-composition' | 'delete-folder' | 'rename-folder';
+type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-add' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'duplicate-composition' | 'delete-folder' | 'rename-folder';
 type UndoEntrySnapshot = {
     filePath: string;
     oldContents: string;
@@ -27,6 +27,8 @@ type UndoEntry = {
     entryType: 'sequence-props';
 } | {
     entryType: 'effect-props';
+} | {
+    entryType: 'keyframe-add';
 } | {
     entryType: 'keyframe-delete';
 } | {

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.474",
+	"version": "4.0.476",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.474",
+		"remotion": "4.0.476",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.474",
-		"@remotion/renderer": "4.0.474",
-		"@remotion/studio-shared": "4.0.474",
+		"@remotion/bundler": "4.0.476",
+		"@remotion/renderer": "4.0.476",
+		"@remotion/studio-shared": "4.0.476",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -39,7 +39,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.474",
+		"@remotion/eslint-config-internal": "4.0.476",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"