@remotion/studio-server 4.0.470 → 4.0.472

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateEffectKeyframes = exports.updateEffectKeyframesAst = exports.updateSequenceKeyframes = exports.updateSequenceKeyframesAst = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const can_update_sequence_props_1 = require("../../preview-server/routes/can-update-sequence-props");
@@ -71,8 +72,7 @@ const getInterpolationExpression = (node) => {
     }
     if (node.type !== 'CallExpression' ||
         node.callee.type !== 'Identifier' ||
-        (node.callee.name !== 'interpolate' &&
-            node.callee.name !== 'interpolateColors')) {
+        !(0, studio_shared_1.isKeyframeInterpolationFunction)(node.callee.name)) {
         return null;
     }
     const frameArg = getSupportedCallArgument(node.arguments[0]);
@@ -124,14 +124,23 @@ const getInterpolationExpression = (node) => {
         keyframes,
     };
 };
-const getInterpolationCalleeForValues = ({ staticValue, newValue, }) => {
-    return b.identifier(typeof staticValue === 'string' && typeof newValue === 'string'
-        ? 'interpolateColors'
-        : 'interpolate');
+const getInterpolationCalleeForValues = ({ schema, key, staticValue, newValue, }) => {
+    return b.identifier((0, studio_shared_1.getKeyframeInterpolationFunction)({
+        schema,
+        key,
+        staticValue,
+        newValue,
+    }));
 };
 const createFrameExpression = (frame) => {
     return (0, update_nested_prop_1.parseValueExpression)(frame);
 };
+const createClampOptionsExpression = () => {
+    return b.objectExpression([
+        b.objectProperty(b.identifier('extrapolateLeft'), b.stringLiteral('clamp')),
+        b.objectProperty(b.identifier('extrapolateRight'), b.stringLiteral('clamp')),
+    ]);
+};
 const createInterpolateExpression = ({ callee, input, extraArgs, keyframes, }) => {
     const sortedKeyframes = [...keyframes].sort((first, second) => first.frame - second.frame);
     return b.callExpression(callee, [
@@ -145,10 +154,21 @@ const noIntroducedIdentifiers = {
     calleeName: null,
     needsFrameHook: false,
 };
-const addKeyframe = ({ expression, frame, value, }) => {
+const addKeyframe = ({ expression, key, frame, value, schema, }) => {
+    if (!(0, studio_shared_1.isSchemaFieldKeyframable)({ schema, key })) {
+        throw new Error(`Cannot add keyframe: "${key}" is not keyframable`);
+    }
     const existing = getInterpolationExpression(expression);
     const newOutput = (0, update_nested_prop_1.parseValueExpression)(value);
     if (existing) {
+        const existingCalleeName = existing.callee.type === 'Identifier'
+            ? existing.callee.name
+            : 'interpolate';
+        const schemaCalleeName = (0, studio_shared_1.getKeyframeInterpolationFunctionForSchemaField)({
+            schema,
+            key,
+        });
+        const nextCalleeName = schemaCalleeName !== null && schemaCalleeName !== void 0 ? schemaCalleeName : existingCalleeName;
         const existingIndex = existing.keyframes.findIndex((keyframe) => keyframe.frame === frame);
         const nextKeyframes = existingIndex === -1
             ? [...existing.keyframes, { frame, output: newOutput, value }]
@@ -157,34 +177,38 @@ const addKeyframe = ({ expression, frame, value, }) => {
                 : keyframe);
         return {
             expression: createInterpolateExpression({
-                callee: existing.callee,
+                callee: b.identifier(nextCalleeName),
                 input: existing.input,
                 extraArgs: existing.extraArgs,
                 keyframes: nextKeyframes,
             }),
-            introduced: noIntroducedIdentifiers,
+            introduced: {
+                calleeName: schemaCalleeName && schemaCalleeName !== existingCalleeName
+                    ? schemaCalleeName
+                    : null,
+                needsFrameHook: false,
+            },
         };
     }
     if (!(0, can_update_sequence_props_1.isStaticValue)(expression)) {
         throw new Error('Cannot add keyframe to computed expression');
     }
     const staticValue = (0, can_update_sequence_props_1.extractStaticValue)(expression);
-    const staticOutput = (0, update_nested_prop_1.parseValueExpression)(staticValue);
-    const keyframes = frame === 0
-        ? [{ frame, output: newOutput, value }]
-        : [
-            { frame: 0, output: staticOutput, value: staticValue },
-            { frame, output: newOutput, value },
-        ];
+    const keyframes = [{ frame, output: newOutput, value }];
     const callee = getInterpolationCalleeForValues({
+        schema,
+        key,
         staticValue,
         newValue: value,
     });
+    const extraArgs = callee.type === 'Identifier' && callee.name === 'interpolateColors'
+        ? []
+        : [createClampOptionsExpression()];
     return {
         expression: createInterpolateExpression({
             callee,
             input: b.identifier('frame'),
-            extraArgs: [],
+            extraArgs,
             keyframes,
         }),
         introduced: {
@@ -205,6 +229,9 @@ const removeKeyframe = ({ expression, frame, }) => {
         throw new Error(`Cannot remove keyframe at frame ${frame}: not found`);
     }
     const nextKeyframes = existing.keyframes.filter((_keyframe, index) => index !== keyframeIndex);
+    if (nextKeyframes.length === 0) {
+        return existing.keyframes[keyframeIndex].output;
+    }
     return createInterpolateExpression({
         callee: existing.callee,
         input: existing.input,
@@ -212,12 +239,14 @@ const removeKeyframe = ({ expression, frame, }) => {
         keyframes: nextKeyframes,
     });
 };
-const applyKeyframeOperation = ({ expression, operation, }) => {
+const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
     if (operation.type === 'add') {
         return addKeyframe({
             expression,
+            key,
             frame: operation.frame,
             value: operation.value,
+            schema,
         });
     }
     return {
@@ -270,6 +299,30 @@ const findObjectProperty = (objExpr, propertyName) => {
             : objExpr.properties[propIndex],
     };
 };
+const findFieldInSchema = (schema, key) => {
+    if (key in schema) {
+        return schema[key];
+    }
+    for (const field of Object.values(schema)) {
+        if (field.type !== 'enum') {
+            continue;
+        }
+        for (const variant of Object.values(field.variants)) {
+            const found = findFieldInSchema(variant, key);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return undefined;
+};
+const getInitialValueForMissingProp = ({ schema, key, newValue, }) => {
+    const field = schema ? findFieldInSchema(schema, key) : undefined;
+    if (field && field.type !== 'hidden' && field.default !== undefined) {
+        return field.default;
+    }
+    return newValue;
+};
 const getObjectExpression = (attr) => {
     if (!attr.value || attr.value.type !== 'JSXExpressionContainer') {
         return null;
@@ -279,11 +332,31 @@ const getObjectExpression = (attr) => {
     }
     return attr.value.expression;
 };
-const getSequenceWritableProp = ({ attributes, key, }) => {
+const createJsxExpressionAttribute = (key, expression) => {
+    return b.jsxAttribute(b.jsxIdentifier(key), b.jsxExpressionContainer(expression));
+};
+const createObjectProperty = (key, value) => b.objectProperty(b.identifier(key), value);
+const createObjectExpressionAttribute = ({ parentKey, childKey, expression, }) => {
+    return createJsxExpressionAttribute(parentKey, b.objectExpression([
+        createObjectProperty(childKey, expression),
+    ]));
+};
+const createMissingPropExpression = (missingPropInitialValue) => {
+    return (0, update_nested_prop_1.parseValueExpression)(missingPropInitialValue.value);
+};
+const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, }) => {
     const dotIndex = key.indexOf('.');
     if (dotIndex === -1) {
         const { attr: topLevelAttr } = findJsxAttribute(attributes, key);
         if (!topLevelAttr) {
+            if (missingPropInitialValue) {
+                return {
+                    expression: createMissingPropExpression(missingPropInitialValue),
+                    setExpression: (nextExpression) => {
+                        attributes.push(createJsxExpressionAttribute(key, nextExpression));
+                    },
+                };
+            }
             throw new Error(`Cannot update keyframes: "${key}" is not set`);
         }
         const expression = getExpressionFromJsxAttribute(topLevelAttr);
@@ -301,6 +374,18 @@ const getSequenceWritableProp = ({ attributes, key, }) => {
     const childKey = key.slice(dotIndex + 1);
     const { attr: parentAttr } = findJsxAttribute(attributes, parentKey);
     if (!parentAttr) {
+        if (missingPropInitialValue) {
+            return {
+                expression: createMissingPropExpression(missingPropInitialValue),
+                setExpression: (nextExpression) => {
+                    attributes.push(createObjectExpressionAttribute({
+                        parentKey,
+                        childKey,
+                        expression: nextExpression,
+                    }));
+                },
+            };
+        }
         throw new Error(`Cannot update keyframes: "${parentKey}" is not set`);
     }
     const objExpr = getObjectExpression(parentAttr);
@@ -309,6 +394,14 @@ const getSequenceWritableProp = ({ attributes, key, }) => {
     }
     const { prop } = findObjectProperty(objExpr, childKey);
     if (!prop) {
+        if (missingPropInitialValue) {
+            return {
+                expression: createMissingPropExpression(missingPropInitialValue),
+                setExpression: (nextExpression) => {
+                    objExpr.properties.push(createObjectProperty(childKey, nextExpression));
+                },
+            };
+        }
         throw new Error(`Cannot update keyframes: "${key}" is not set`);
     }
     return {
@@ -318,7 +411,7 @@ const getSequenceWritableProp = ({ attributes, key, }) => {
         },
     };
 };
-const updateSequenceKeyframesAst = ({ input, nodePath, updates, }) => {
+const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, }) => {
     var _a;
     var _b;
     const ast = (0, parse_ast_1.parseAst)(input);
@@ -338,11 +431,22 @@ const updateSequenceKeyframesAst = ({ input, nodePath, updates, }) => {
         const prop = getSequenceWritableProp({
             attributes: node.attributes,
             key: update.key,
+            missingPropInitialValue: update.operation.type === 'add'
+                ? {
+                    value: getInitialValueForMissingProp({
+                        schema: schema !== null && schema !== void 0 ? schema : null,
+                        key: update.key,
+                        newValue: update.operation.value,
+                    }),
+                }
+                : null,
         });
         oldValueStrings.push(recast.print(prop.expression).code);
         const { expression: nextExpression, introduced } = applyKeyframeOperation({
             expression: prop.expression,
+            key: update.key,
             operation: update.operation,
+            schema: schema !== null && schema !== void 0 ? schema : null,
         });
         newValueStrings.push(recast.print(nextExpression).code);
         prop.setExpression(nextExpression);
@@ -361,28 +465,41 @@ const updateSequenceKeyframesAst = ({ input, nodePath, updates, }) => {
         }
     }
     (0, ensure_imports_and_frame_hook_1.ensureRemotionImports)(ast, requiredImports);
+    const updatedNodePath = (0, can_update_sequence_props_1.findNodePathForJsxElement)(ast, node);
+    if (!updatedNodePath) {
+        throw new Error('Could not find updated JSX element location after updating keyframes');
+    }
     return {
         serialized: (0, parse_ast_1.serializeAst)(ast),
         oldValueStrings,
         newValueStrings,
         logLine: (_b = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1,
+        updatedNodePath,
     };
 };
 exports.updateSequenceKeyframesAst = updateSequenceKeyframesAst;
-const updateSequenceKeyframes = async ({ input, nodePath, updates, prettierConfigOverride, }) => {
-    const { serialized, oldValueStrings, newValueStrings, logLine } = (0, exports.updateSequenceKeyframesAst)({
+const updateSequenceKeyframes = async ({ input, nodePath, updates, schema, prettierConfigOverride, }) => {
+    const { serialized, oldValueStrings, newValueStrings, logLine, updatedNodePath, } = (0, exports.updateSequenceKeyframesAst)({
         input,
         nodePath,
         updates,
+        schema,
     });
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
         input: serialized,
         prettierConfigOverride,
     });
-    return { output, formatted, oldValueStrings, newValueStrings, logLine };
+    return {
+        output,
+        formatted,
+        oldValueStrings,
+        newValueStrings,
+        logLine,
+        updatedNodePath,
+    };
 };
 exports.updateSequenceKeyframes = updateSequenceKeyframes;
-const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, updates, }) => {
+const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, updates, schema, }) => {
     var _a, _b;
     var _c, _d, _e;
     const ast = (0, parse_ast_1.parseAst)(input);
@@ -417,7 +534,9 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
         oldValueStrings.push(recast.print(prop.value).code);
         const { expression: nextExpression, introduced } = applyKeyframeOperation({
             expression: prop.value,
+            key: update.key,
             operation: update.operation,
+            schema: schema !== null && schema !== void 0 ? schema : null,
         });
         newValueStrings.push(recast.print(nextExpression).code);
         prop.value = nextExpression;
@@ -436,21 +555,27 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
         }
     }
     (0, ensure_imports_and_frame_hook_1.ensureRemotionImports)(ast, requiredImports);
+    const updatedSequenceNodePath = (0, can_update_sequence_props_1.findNodePathForJsxElement)(ast, jsx);
+    if (!updatedSequenceNodePath) {
+        throw new Error('Could not find updated JSX element location after updating effect keyframes');
+    }
     return {
         serialized: (0, parse_ast_1.serializeAst)(ast),
         oldValueStrings,
         newValueStrings,
         logLine: (_e = (_d = (_a = call.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : (_b = jsx.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _e !== void 0 ? _e : 1,
         effectCallee,
+        updatedSequenceNodePath,
     };
 };
 exports.updateEffectKeyframesAst = updateEffectKeyframesAst;
-const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, updates, prettierConfigOverride, }) => {
-    const { serialized, oldValueStrings, newValueStrings, logLine, effectCallee } = (0, exports.updateEffectKeyframesAst)({
+const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, updates, schema, prettierConfigOverride, }) => {
+    const { serialized, oldValueStrings, newValueStrings, logLine, effectCallee, updatedSequenceNodePath, } = (0, exports.updateEffectKeyframesAst)({
         input,
         sequenceNodePath,
         effectIndex,
         updates,
+        schema,
     });
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
         input: serialized,
@@ -463,6 +588,7 @@ const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, upd
         newValueStrings,
         logLine,
         effectCallee,
+        updatedSequenceNodePath,
     };
 };
 exports.updateEffectKeyframes = updateEffectKeyframes;

package/dist/helpers/get-ast-node-path.js

@@ -35,9 +35,14 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAstNodePath = void 0;
 const recast = __importStar(require("recast"));
+const import_agnostic_node_path_1 = require("./import-agnostic-node-path");
 const getAstNodePath = (ast, nodePath) => {
+    const resolvedNodePath = (0, import_agnostic_node_path_1.fromImportAgnosticNodePath)({ ast, nodePath });
+    if (!resolvedNodePath) {
+        return null;
+    }
     let current = new recast.types.NodePath(ast);
-    for (const segment of nodePath) {
+    for (const segment of resolvedNodePath) {
         current = current.get(segment);
         if (current.value === null || current.value === undefined) {
             return null;

package/dist/helpers/import-agnostic-node-path.d.ts

@@ -0,0 +1,10 @@
+import type { File } from '@babel/types';
+import type { SequenceNodePath } from 'remotion';
+export declare const toImportAgnosticNodePath: ({ ast, nodePath, }: {
+    ast: File;
+    nodePath: SequenceNodePath;
+}) => SequenceNodePath;
+export declare const fromImportAgnosticNodePath: ({ ast, nodePath, }: {
+    ast: File;
+    nodePath: SequenceNodePath;
+}) => SequenceNodePath | null;

package/dist/helpers/import-agnostic-node-path.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fromImportAgnosticNodePath = exports.toImportAgnosticNodePath = void 0;
+const getActualIndex = ({ items, agnosticIndex, shouldIgnore, context, }) => {
+    let seenIncludedNodes = 0;
+    for (let i = 0; i < items.length; i++) {
+        if (shouldIgnore(items[i], context)) {
+            continue;
+        }
+        if (seenIncludedNodes === agnosticIndex) {
+            return i;
+        }
+        seenIncludedNodes++;
+    }
+    return null;
+};
+const getAgnosticIndex = ({ items, actualIndex, shouldIgnore, context, }) => {
+    if (actualIndex < 0 || actualIndex >= items.length) {
+        return null;
+    }
+    let seenIncludedNodes = 0;
+    for (let i = 0; i <= actualIndex; i++) {
+        if (shouldIgnore(items[i], context)) {
+            continue;
+        }
+        if (i === actualIndex) {
+            return seenIncludedNodes;
+        }
+        seenIncludedNodes++;
+    }
+    return null;
+};
+const getUseCurrentFrameLocalNames = (ast) => {
+    var _a;
+    var _b;
+    const names = new Set(['useCurrentFrame']);
+    for (const statement of ast.program.body) {
+        if (statement.type !== 'ImportDeclaration' ||
+            statement.source.value !== 'remotion') {
+            continue;
+        }
+        for (const specifier of statement.specifiers) {
+            if (specifier.type === 'ImportSpecifier' &&
+                specifier.imported.type === 'Identifier' &&
+                specifier.imported.name === 'useCurrentFrame') {
+                names.add((_b = (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'useCurrentFrame');
+            }
+        }
+    }
+    return names;
+};
+const isUseCurrentFrameCall = (node, useCurrentFrameLocalNames) => {
+    return ((node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' &&
+        node.callee.type === 'Identifier' &&
+        useCurrentFrameLocalNames.has(node.callee.name));
+};
+const isUseCurrentFrameStatement = (node, useCurrentFrameLocalNames) => {
+    if (node.type === 'ExpressionStatement') {
+        return isUseCurrentFrameCall(node.expression, useCurrentFrameLocalNames);
+    }
+    if (node.type !== 'VariableDeclaration' || node.declarations.length !== 1) {
+        return false;
+    }
+    return isUseCurrentFrameCall(node.declarations[0].init, useCurrentFrameLocalNames);
+};
+const getIgnoredNodePredicate = (ast) => {
+    const useCurrentFrameLocalNames = getUseCurrentFrameLocalNames(ast);
+    return (node, { parent, property }) => {
+        if (parent.type === 'Program' &&
+            property === 'body' &&
+            node.type === 'ImportDeclaration') {
+            return true;
+        }
+        if (parent.type === 'BlockStatement' && property === 'body') {
+            return isUseCurrentFrameStatement(node, useCurrentFrameLocalNames);
+        }
+        return false;
+    };
+};
+const getChild = (value, segment) => {
+    var _a, _b;
+    if (value === null || value === undefined) {
+        return null;
+    }
+    if (Array.isArray(value)) {
+        return (_a = value[segment]) !== null && _a !== void 0 ? _a : null;
+    }
+    if (typeof value !== 'object') {
+        return null;
+    }
+    return (_b = value[segment]) !== null && _b !== void 0 ? _b : null;
+};
+const transformNodePathIndices = ({ ast, nodePath, direction, }) => {
+    const shouldIgnore = getIgnoredNodePredicate(ast);
+    const transformed = [];
+    let current = ast;
+    let arrayContext = null;
+    for (const segment of nodePath) {
+        if (typeof segment === 'string') {
+            const parent = current;
+            current = getChild(current, segment);
+            if (Array.isArray(current) &&
+                parent &&
+                typeof parent === 'object' &&
+                'type' in parent) {
+                arrayContext = { parent: parent, property: segment };
+            }
+            else {
+                arrayContext = null;
+            }
+            transformed.push(segment);
+            continue;
+        }
+        if (!Array.isArray(current) || !arrayContext) {
+            current = getChild(current, segment);
+            transformed.push(segment);
+            continue;
+        }
+        const mappedIndex = direction === 'to-agnostic'
+            ? getAgnosticIndex({
+                items: current,
+                actualIndex: segment,
+                shouldIgnore,
+                context: arrayContext,
+            })
+            : getActualIndex({
+                items: current,
+                agnosticIndex: segment,
+                shouldIgnore,
+                context: arrayContext,
+            });
+        if (mappedIndex === null) {
+            if (direction === 'from-agnostic') {
+                return null;
+            }
+            current = getChild(current, segment);
+            transformed.push(segment);
+            continue;
+        }
+        current = getChild(current, direction === 'to-agnostic' ? segment : mappedIndex);
+        arrayContext = null;
+        transformed.push(mappedIndex);
+    }
+    return transformed;
+};
+const toImportAgnosticNodePath = ({ ast, nodePath, }) => {
+    var _a;
+    return ((_a = transformNodePathIndices({ ast, nodePath, direction: 'to-agnostic' })) !== null && _a !== void 0 ? _a : nodePath);
+};
+exports.toImportAgnosticNodePath = toImportAgnosticNodePath;
+const fromImportAgnosticNodePath = ({ ast, nodePath, }) => {
+    return transformNodePathIndices({ ast, nodePath, direction: 'from-agnostic' });
+};
+exports.fromImportAgnosticNodePath = fromImportAgnosticNodePath;

package/dist/helpers/imports.d.ts

@@ -0,0 +1,16 @@
+import type { File, ImportDeclaration, ImportSpecifier } from '@babel/types';
+export declare const getImportedName: (specifier: ImportSpecifier) => string;
+export declare const findImportDeclaration: (ast: File, sourcePath: string) => ImportDeclaration | null;
+export declare const insertImportDeclaration: (ast: File, importDeclaration: ImportDeclaration) => void;
+export declare const normalizeImportSpacing: (input: string) => string;
+export declare const ensureNamedImport: ({ ast, importedName, sourcePath, localName, }: {
+    ast: File;
+    importedName: string;
+    sourcePath: string;
+    localName: string;
+}) => string;
+export declare const ensureNamedImports: ({ ast, importedNames, sourcePath, }: {
+    ast: File;
+    importedNames: ReadonlySet<string>;
+    sourcePath: string;
+}) => void;