@remotion/studio-server 4.0.474 → 4.0.476

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.allApiRoutes = void 0;
 const add_effect_1 = require("./routes/add-effect");
 const add_effect_keyframe_1 = require("./routes/add-effect-keyframe");
+const add_keyframes_1 = require("./routes/add-keyframes");
 const add_render_1 = require("./routes/add-render");
 const add_sequence_keyframe_1 = require("./routes/add-sequence-keyframe");
 const apply_codemod_1 = require("./routes/apply-codemod");
@@ -71,6 +72,7 @@ exports.allApiRoutes = {
     '/api/move-keyframes': move_keyframes_1.moveKeyframesHandler,
     '/api/add-sequence-keyframe': add_sequence_keyframe_1.addSequenceKeyframeHandler,
     '/api/add-effect-keyframe': add_effect_keyframe_1.addEffectKeyframeHandler,
+    '/api/add-keyframes': add_keyframes_1.addKeyframesHandler,
     '/api/update-sequence-keyframe-settings': update_sequence_keyframe_settings_1.updateSequenceKeyframeSettingsHandler,
     '/api/update-effect-keyframe-settings': update_effect_keyframe_settings_1.updateEffectKeyframeSettingsHandler,
     '/api/delete-effect': delete_effect_1.deleteEffectHandler,

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

@@ -0,0 +1,7 @@
+import type { AddKeyframesRequest, AddKeyframesResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const addKeyframes: ({ sequenceKeyframes, effectKeyframes, clientId, remotionRoot, logLevel, }: AddKeyframesRequest & {
+    readonly remotionRoot: string;
+    readonly logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => Promise<void>;
+export declare const addKeyframesHandler: ApiHandler<AddKeyframesRequest, AddKeyframesResponse>;

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

@@ -0,0 +1,226 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addKeyframesHandler = exports.addKeyframes = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const undo_stack_1 = require("../undo-stack");
+const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
+const log_effect_update_1 = require("./log-updates/log-effect-update");
+const log_update_1 = require("./log-updates/log-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const groupBy = (items, getKey) => {
+    var _a;
+    const groups = new Map();
+    for (const item of items) {
+        const key = getKey(item);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+        group.push(item);
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+};
+const getBatchDescription = ({ totalKeyframes, firstKeyframe, }) => {
+    if (totalKeyframes === 1) {
+        return {
+            undoMessage: `↩️  ${firstKeyframe.key} keyframe removed at frame ${firstKeyframe.frame}`,
+            redoMessage: `↪️  ${firstKeyframe.key} keyframe added at frame ${firstKeyframe.frame}`,
+        };
+    }
+    return {
+        undoMessage: `↩️  ${totalKeyframes} keyframes removed`,
+        redoMessage: `↪️  ${totalKeyframes} keyframes added`,
+    };
+};
+const addKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, remotionRoot, logLevel, }) => {
+    var _a, _b;
+    const totalKeyframes = sequenceKeyframes.length + effectKeyframes.length;
+    if (totalKeyframes === 0) {
+        throw new Error('No keyframes were specified for adding');
+    }
+    const fileGroups = new Map();
+    for (const [index, keyframe] of sequenceKeyframes.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: keyframe.fileName,
+            action: 'modify',
+        });
+        const group = (_a = fileGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
+            fileRelativeToRoot,
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.sequenceKeyframes.push({
+            ...keyframe,
+            index,
+            absolutePath,
+            fileRelativeToRoot,
+        });
+        fileGroups.set(absolutePath, group);
+    }
+    for (const [index, keyframe] of effectKeyframes.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: keyframe.fileName,
+            action: 'modify',
+        });
+        const group = (_b = fileGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
+            fileRelativeToRoot,
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.effectKeyframes.push({
+            ...keyframe,
+            index,
+            absolutePath,
+            fileRelativeToRoot,
+        });
+        fileGroups.set(absolutePath, group);
+    }
+    const snapshots = [];
+    const sequenceLogs = [];
+    const effectLogs = [];
+    for (const [absolutePath, group] of fileGroups) {
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        let output = fileContents;
+        let firstLogLine = Number.POSITIVE_INFINITY;
+        for (const keyframeGroup of groupBy(group.sequenceKeyframes, (keyframe) => JSON.stringify(keyframe.nodePath.nodePath))) {
+            const [firstSequenceKeyframe] = keyframeGroup;
+            if (!firstSequenceKeyframe) {
+                continue;
+            }
+            const result = await (0, update_keyframes_1.updateSequenceKeyframes)({
+                input: output,
+                nodePath: firstSequenceKeyframe.nodePath.nodePath,
+                schema: firstSequenceKeyframe.schema,
+                updates: keyframeGroup.map((keyframe) => ({
+                    key: keyframe.key,
+                    operation: {
+                        type: 'add',
+                        frame: keyframe.frame,
+                        value: JSON.parse(keyframe.value),
+                    },
+                })),
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [keyframeIndex, keyframe] of keyframeGroup.entries()) {
+                sequenceLogs.push({
+                    fileRelativeToRoot: keyframe.fileRelativeToRoot,
+                    line: result.logLine,
+                    key: keyframe.key,
+                    oldValueString: result.oldValueStrings[keyframeIndex],
+                    newValueString: result.newValueStrings[keyframeIndex],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        for (const keyframeGroup of groupBy(group.effectKeyframes, (keyframe) => `${JSON.stringify(keyframe.sequenceNodePath.nodePath)}:${keyframe.effectIndex}`)) {
+            const [firstEffectKeyframe] = keyframeGroup;
+            if (!firstEffectKeyframe) {
+                continue;
+            }
+            const result = await (0, update_keyframes_1.updateEffectKeyframes)({
+                input: output,
+                sequenceNodePath: firstEffectKeyframe.sequenceNodePath.nodePath,
+                effectIndex: firstEffectKeyframe.effectIndex,
+                schema: firstEffectKeyframe.schema,
+                updates: keyframeGroup.map((keyframe) => ({
+                    key: keyframe.key,
+                    operation: {
+                        type: 'add',
+                        frame: keyframe.frame,
+                        value: JSON.parse(keyframe.value),
+                    },
+                })),
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [keyframeIndex, keyframe] of keyframeGroup.entries()) {
+                effectLogs.push({
+                    fileRelativeToRoot: keyframe.fileRelativeToRoot,
+                    line: result.logLine,
+                    effectName: result.effectCallee,
+                    propKey: keyframe.key,
+                    oldValueString: result.oldValueStrings[keyframeIndex],
+                    newValueString: result.newValueStrings[keyframeIndex],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        snapshots.push({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: output,
+            logLine: Number.isFinite(firstLogLine) ? firstLogLine : 1,
+        });
+    }
+    const [firstKeyframe] = sequenceKeyframes.length > 0 ? sequenceKeyframes : effectKeyframes;
+    if (!firstKeyframe) {
+        throw new Error('No keyframes were specified for adding');
+    }
+    (0, undo_stack_1.pushTransactionToUndoStack)({
+        snapshots,
+        logLevel,
+        remotionRoot,
+        description: getBatchDescription({ totalKeyframes, firstKeyframe }),
+        entryType: sequenceKeyframes.length > 0 && effectKeyframes.length > 0
+            ? // Dead code for now: sequence props and effect props cannot be selected
+                // together yet. Keep the mixed transaction type for the planned UI.
+                'keyframe-add'
+            : sequenceKeyframes.length > 0
+                ? 'sequence-props'
+                : 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    for (const snapshot of snapshots) {
+        (0, undo_stack_1.suppressUndoStackInvalidation)(snapshot.filePath);
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(snapshot.filePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(snapshot.filePath, snapshot.newContents, clientId);
+    }
+    for (const log of sequenceLogs) {
+        (0, log_update_1.logUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            key: log.key,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: log.formatted,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
+    for (const log of effectLogs) {
+        (0, log_effect_update_1.logEffectUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            effectName: log.effectName,
+            propKey: log.propKey,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: log.formatted,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
+    (0, undo_stack_1.printUndoHint)(logLevel);
+};
+exports.addKeyframes = addKeyframes;
+const addKeyframesHandler = ({ input: { sequenceKeyframes, effectKeyframes, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-keyframes] Received request to add ${sequenceKeyframes.length + effectKeyframes.length} keyframe(s)`);
+    await (0, exports.addKeyframes)({
+        sequenceKeyframes,
+        effectKeyframes,
+        clientId,
+        remotionRoot,
+        logLevel,
+    });
+    return { success: true };
+});
+exports.addKeyframesHandler = addKeyframesHandler;

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

@@ -106,8 +106,12 @@ const extractDefaultPropsFromSource = (input, compositionId) => {
                 this.traverse(path);
                 return;
             }
-            if ((0, can_update_sequence_props_1.isStaticValue)(expression)) {
-                const value = (0, can_update_sequence_props_1.extractStaticValue)(expression);
+            if ((0, can_update_sequence_props_1.isStaticValue)(expression, {
+                allowSpecialValues: true,
+            })) {
+                const value = (0, can_update_sequence_props_1.extractStaticValue)(expression, {
+                    allowSpecialValues: true,
+                });
                 if (value !== null &&
                     typeof value === 'object' &&
                     !Array.isArray(value)) {

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

@@ -1,8 +1,11 @@
 import type { Expression, File, JSXOpeningElement } from '@babel/types';
 import type { SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath } from 'remotion';
-export declare const isStaticValue: (node: Expression) => boolean;
-export declare const extractStaticValue: (node: Expression) => unknown;
+type StaticValueOptions = {
+    allowSpecialValues: boolean;
+};
+export declare const isStaticValue: (node: Expression, options?: StaticValueOptions) => boolean;
+export declare const extractStaticValue: (node: Expression, options?: StaticValueOptions) => unknown;
 export declare const getComputedStatus: (node: Expression, ast: File) => CanUpdateSequencePropStatus;
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
 export declare const findNodePathForJsxElement: (ast: File, target: JSXOpeningElement) => SequenceNodePath | null;
@@ -28,3 +31,4 @@ export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName,
     remotionRoot: string;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
 }) => SubscribeToSequencePropsResponse;
+export {};

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

@@ -38,6 +38,7 @@ const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
+const no_react_1 = require("remotion/no-react");
 const parse_ast_1 = require("../../codemods/parse-ast");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
@@ -51,7 +52,42 @@ const staticStatus = (codeValue) => ({
 const computedStatus = () => ({
     status: 'computed',
 });
-const isStaticValue = (node) => {
+// Mirrors the encoding that staticFile() from "remotion" applies at runtime
+const encodeStaticFilePath = (path) => {
+    return path.split('/').map(encodeURIComponent).join('/');
+};
+// Detects calls that the Studio knows how to serialize back to source:
+// staticFile("...") and new Date("...")
+const getSpecialValueCall = (node) => {
+    if (node.type === 'CallExpression') {
+        const call = node;
+        if (call.callee.type === 'Identifier' &&
+            call.callee.name === 'staticFile' &&
+            call.arguments.length === 1 &&
+            call.arguments[0].type === 'StringLiteral') {
+            return { type: 'static-file', value: call.arguments[0].value };
+        }
+        return null;
+    }
+    if (node.type === 'NewExpression') {
+        const newExpr = node;
+        if (newExpr.callee.type === 'Identifier' &&
+            newExpr.callee.name === 'Date' &&
+            newExpr.arguments.length === 1 &&
+            newExpr.arguments[0].type === 'StringLiteral') {
+            return { type: 'date', value: newExpr.arguments[0].value };
+        }
+        return null;
+    }
+    return null;
+};
+const defaultStaticValueOptions = {
+    allowSpecialValues: false,
+};
+const isStaticValue = (node, options = defaultStaticValueOptions) => {
+    if (options.allowSpecialValues && getSpecialValueCall(node) !== null) {
+        return true;
+    }
     switch (node.type) {
         case 'NumericLiteral':
         case 'StringLiteral':
@@ -63,18 +99,29 @@ const isStaticValue = (node) => {
                 node.operator === '+') &&
                 node.argument.type === 'NumericLiteral');
         case 'TSAsExpression':
-            return (0, exports.isStaticValue)(node.expression);
+            return (0, exports.isStaticValue)(node.expression, options);
         case 'ArrayExpression':
-            return node.elements.every((el) => el !== null && el.type !== 'SpreadElement' && (0, exports.isStaticValue)(el));
+            return node.elements.every((el) => el !== null &&
+                el.type !== 'SpreadElement' &&
+                (0, exports.isStaticValue)(el, options));
         case 'ObjectExpression':
             return node.properties.every((prop) => prop.type === 'ObjectProperty' &&
-                (0, exports.isStaticValue)(prop.value));
+                (0, exports.isStaticValue)(prop.value, options));
         default:
             return false;
     }
 };
 exports.isStaticValue = isStaticValue;
-const extractStaticValue = (node) => {
+const extractStaticValue = (node, options = defaultStaticValueOptions) => {
+    if (options.allowSpecialValues) {
+        const specialValue = getSpecialValueCall(node);
+        if (specialValue !== null) {
+            if (specialValue.type === 'static-file') {
+                return `${no_react_1.NoReactInternals.FILE_TOKEN}${encodeStaticFilePath(specialValue.value)}`;
+            }
+            return `${no_react_1.NoReactInternals.DATE_TOKEN}${specialValue.value}`;
+        }
+    }
     switch (node.type) {
         case 'NumericLiteral':
         case 'StringLiteral':
@@ -91,13 +138,13 @@ const extractStaticValue = (node) => {
             return undefined;
         }
         case 'TSAsExpression':
-            return (0, exports.extractStaticValue)(node.expression);
+            return (0, exports.extractStaticValue)(node.expression, options);
         case 'ArrayExpression':
             return node.elements.map((el) => {
                 if (el === null || el.type === 'SpreadElement') {
                     return undefined;
                 }
-                return (0, exports.extractStaticValue)(el);
+                return (0, exports.extractStaticValue)(el, options);
             });
         case 'ObjectExpression': {
             const obj = node;
@@ -112,7 +159,7 @@ const extractStaticValue = (node) => {
                             ? String(p.key.value)
                             : undefined;
                     if (key !== undefined) {
-                        result[key] = (0, exports.extractStaticValue)(p.value);
+                        result[key] = (0, exports.extractStaticValue)(p.value, options);
                     }
                 }
             }
@@ -260,9 +307,6 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
         }
         const value = property.value;
         if (key === 'easing') {
-            if (interpolationFunction === 'interpolateColors') {
-                return null;
-            }
             const parsedEasing = getKeyframeEasingArray({
                 easingNode: value,
                 segments,

package/dist/preview-server/routes/log-updates/format-prop-change.js

@@ -10,7 +10,7 @@ const formatInnerPropChange = ({ key, oldValueString, newValueString, defaultVal
     if (defaultValueString !== null && oldValueString === defaultValueString) {
         return (0, formatting_1.formatAddition)({ valueString: newValueString, key });
     }
-    return `${(0, formatting_1.formatPropDelta)({ valueString: oldValueString, key })} \u2192 ${(0, formatting_1.formatPropDelta)({ valueString: newValueString, key })}`;
+    return (0, formatting_1.formatPropChangeDelta)({ key, oldValueString, newValueString });
 };
 const formatPropChange = ({ key, oldValueString, newValueString, defaultValueString, removedProps, addedProps, }) => {
     const suffix = (0, format_side_props_1.formatSideProps)({ removedProps, addedProps });

package/dist/preview-server/routes/log-updates/formatting.d.ts

@@ -7,6 +7,7 @@ export declare const equals: (str: string) => string;
 export declare const punctuation: (str: string) => string;
 export declare const stringValue: (str: string) => string;
 export declare const numberValue: (str: string) => string;
+export declare const inlineAddition: (str: string) => string;
 export declare const strikeThrough: (str: string) => string;
 export declare const strikeThroughOrRemovedPrefix: (str: string) => string;
 export declare const addedPrefixIfNoColor: (str: string) => string;
@@ -15,5 +16,10 @@ export type PropDelta = {
     valueString: string;
 };
 export declare const formatPropDelta: ({ key, valueString }: PropDelta) => string;
+export declare const formatPropChangeDelta: ({ key, oldValueString, newValueString, }: {
+    key: string;
+    oldValueString: string;
+    newValueString: string;
+}) => string;
 export declare const formatDeletion: (prop: PropDelta) => string;
 export declare const formatAddition: (prop: PropDelta) => string;