@remotion/studio-server 4.0.478 → 4.0.479

package/dist/codemods/effect-param-expression.js

@@ -38,7 +38,7 @@ const recast = __importStar(require("recast"));
 const imports_1 = require("../helpers/imports");
 const update_nested_prop_1 = require("./update-nested-prop");
 const b = recast.types.builders;
-const isNonLinearEasing = (easing) => easing !== 'linear';
+const isNonLinearEasing = (easing) => easing.type !== 'linear';
 const keyframedParamNeedsEasingImport = (param) => param.easing.some(isNonLinearEasing);
 const getRequiredRemotionImportsForEffectParams = (params) => {
     const requiredImports = new Set();
@@ -73,10 +73,23 @@ const ensureRemotionImportLocalNames = ({ ast, requiredImports, }) => {
 };
 exports.ensureRemotionImportLocalNames = ensureRemotionImportLocalNames;
 const makeEasingExpression = ({ easing, easingLocalName, }) => {
-    if (easing === 'linear') {
-        return b.memberExpression(b.identifier(easingLocalName), b.identifier('linear'));
+    switch (easing.type) {
+        case 'linear':
+            return b.memberExpression(b.identifier(easingLocalName), b.identifier('linear'));
+        case 'spring':
+            return b.callExpression(b.memberExpression(b.identifier(easingLocalName), b.identifier('spring')), [
+                b.objectExpression([
+                    b.objectProperty(b.identifier('damping'), (0, update_nested_prop_1.parseValueExpression)(easing.damping)),
+                    b.objectProperty(b.identifier('mass'), (0, update_nested_prop_1.parseValueExpression)(easing.mass)),
+                    b.objectProperty(b.identifier('stiffness'), (0, update_nested_prop_1.parseValueExpression)(easing.stiffness)),
+                    b.objectProperty(b.identifier('overshootClamping'), b.booleanLiteral(easing.overshootClamping)),
+                ]),
+            ]);
+        case 'bezier':
+            return b.callExpression(b.memberExpression(b.identifier(easingLocalName), b.identifier('bezier')), [easing.x1, easing.y1, easing.x2, easing.y2].map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
+        default:
+            throw new Error(`Unsupported easing: ${JSON.stringify(easing)}`);
     }
-    return b.callExpression(b.memberExpression(b.identifier(easingLocalName), b.identifier('bezier')), easing.map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
 };
 const makeKeyframedOptions = ({ param, remotionLocalNames, }) => {
     var _a;

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

@@ -1,6 +1,6 @@
 import type { ArrayExpression, CallExpression, JSXAttribute } from '@babel/types';
 import type { EffectClipboardParam } from '@remotion/studio-shared';
-import type { SequenceNodePath, SequenceSchema } from 'remotion';
+import type { SequenceNodePath, InteractivitySchema } from 'remotion';
 export type EffectPropUpdate = {
     key: string;
     value: unknown;
@@ -49,7 +49,7 @@ export declare const updateEffectPropsAst: ({ input, sequenceNodePath, effectInd
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     update: EffectPropUpdate;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 }) => {
     serialized: string;
     oldValueString: string;
@@ -63,6 +63,6 @@ export declare const updateEffectProps: ({ input, sequenceNodePath, effectIndex,
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     update: EffectPropUpdate;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<UpdateEffectPropsResult>;

package/dist/codemods/update-keyframes/update-keyframes.d.ts

@@ -1,5 +1,5 @@
 import { type KeyframeInterpolationFunction } from '@remotion/studio-shared';
-import type { CanUpdateSequencePropStatus, ExtrapolateType, SequenceNodePath, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, ExtrapolateType, SequenceNodePath, InteractivitySchema } from 'remotion';
 type KeyframeEasing = Extract<CanUpdateSequencePropStatus, {
     status: 'keyframed';
 }>['easing'][number];
@@ -45,7 +45,7 @@ export declare const updateSequenceKeyframesAst: ({ input, nodePath, updates, sc
     input: string;
     nodePath: SequenceNodePath;
     updates: SequenceKeyframeUpdate[];
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
 }) => {
     serialized: string;
     oldValueStrings: string[];
@@ -57,7 +57,7 @@ export declare const updateSequenceKeyframes: ({ input, nodePath, updates, schem
     input: string;
     nodePath: SequenceNodePath;
     updates: SequenceKeyframeUpdate[];
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;
@@ -72,7 +72,7 @@ export declare const updateEffectKeyframesAst: ({ input, sequenceNodePath, effec
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     updates: EffectKeyframeUpdate[];
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
 }) => {
     serialized: string;
     oldValueStrings: string[];
@@ -86,7 +86,7 @@ export declare const updateEffectKeyframes: ({ input, sequenceNodePath, effectIn
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     updates: EffectKeyframeUpdate[];
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;

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

@@ -224,7 +224,7 @@ const setOptionsProperty = ({ options, propertyName, value, }) => {
     }
     options.properties.push(b.objectProperty(b.identifier(propertyName), value));
 };
-const isLinearEasing = (easing) => easing === 'linear';
+const isLinearEasing = (easing) => easing.type === 'linear';
 const getKeyframeEasing = (node) => {
     if (node.type === 'TSAsExpression') {
         return getKeyframeEasing(node.expression);
@@ -235,16 +235,29 @@ const getKeyframeEasing = (node) => {
         node.property.type === 'Identifier' &&
         node.property.name === 'linear' &&
         node.computed === false) {
-        return 'linear';
+        return { type: 'linear' };
     }
     if (node.type !== 'CallExpression' ||
         node.callee.type !== 'MemberExpression' ||
         node.callee.object.type !== 'Identifier' ||
         node.callee.object.name !== 'Easing' ||
         node.callee.property.type !== 'Identifier' ||
-        node.callee.property.name !== 'bezier' ||
-        node.callee.computed ||
-        node.arguments.length !== 4) {
+        node.callee.computed) {
+        return null;
+    }
+    if (node.callee.property.name === 'spring') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        const springConfig = node.arguments[0];
+        if ((springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'ArgumentPlaceholder' ||
+            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'JSXNamespacedName' ||
+            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'SpreadElement') {
+            return null;
+        }
+        return (0, studio_shared_1.parseSpringEasingConfig)(springConfig);
+    }
+    if (node.callee.property.name !== 'bezier' || node.arguments.length !== 4) {
         return null;
     }
     const values = node.arguments.map((arg) => {
@@ -258,7 +271,8 @@ const getKeyframeEasing = (node) => {
     if (values.some((value) => value === null)) {
         return null;
     }
-    return values;
+    const [x1, y1, x2, y2] = values;
+    return { type: 'bezier', x1, y1, x2, y2 };
 };
 const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
     if (segmentCount === 0) {
@@ -285,7 +299,7 @@ const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
         }
         const easingArray = parsed;
         while (easingArray.length < segmentCount) {
-            easingArray.push('linear');
+            easingArray.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
         }
         return easingArray;
     }
@@ -298,7 +312,7 @@ const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
 const getExistingEasingArray = ({ options, segmentCount, }) => {
     const { prop } = findObjectOptionProperty(options, 'easing');
     if (!prop) {
-        return new Array(segmentCount).fill('linear');
+        return Array.from({ length: segmentCount }, () => ({ type: 'linear' }));
     }
     const easing = getKeyframeEasingArray({
         easingNode: prop.value,
@@ -317,10 +331,23 @@ const getExistingEasingArrayOrNull = ({ options, segmentCount, }) => {
     return getExistingEasingArray({ options, segmentCount });
 };
 const createEasingExpression = (easing) => {
-    if (easing === 'linear') {
-        return b.memberExpression(b.identifier('Easing'), b.identifier('linear'));
+    switch (easing.type) {
+        case 'linear':
+            return b.memberExpression(b.identifier('Easing'), b.identifier('linear'));
+        case 'spring':
+            return b.callExpression(b.memberExpression(b.identifier('Easing'), b.identifier('spring')), [
+                b.objectExpression([
+                    b.objectProperty(b.identifier('damping'), (0, update_nested_prop_1.parseValueExpression)(easing.damping)),
+                    b.objectProperty(b.identifier('mass'), (0, update_nested_prop_1.parseValueExpression)(easing.mass)),
+                    b.objectProperty(b.identifier('stiffness'), (0, update_nested_prop_1.parseValueExpression)(easing.stiffness)),
+                    b.objectProperty(b.identifier('overshootClamping'), b.booleanLiteral(easing.overshootClamping)),
+                ]),
+            ]);
+        case 'bezier':
+            return b.callExpression(b.memberExpression(b.identifier('Easing'), b.identifier('bezier')), [easing.x1, easing.y1, easing.x2, easing.y2].map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
+        default:
+            throw new Error(`Unsupported easing: ${JSON.stringify(easing)}`);
     }
-    return b.callExpression(b.memberExpression(b.identifier('Easing'), b.identifier('bezier')), easing.map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
 };
 const createEasingArrayExpression = (easing) => b.arrayExpression(easing.map((easingValue) => createEasingExpression(easingValue)));
 const setEasingOption = ({ options, easing, }) => {
@@ -357,7 +384,7 @@ const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, n
         return { extraArgs, needsEasingImport: false };
     }
     while (easing.length < nextSegmentCount) {
-        easing.push('linear');
+        easing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
     }
     return {
         extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
@@ -384,7 +411,7 @@ const normalizeEasingAfterRemovingKeyframe = ({ extraArgs, previousSegmentCount,
         easing.pop();
     }
     while (easing.length < nextSegmentCount) {
-        easing.push('linear');
+        easing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
     }
     return {
         extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
@@ -414,7 +441,7 @@ const normalizeEasingAfterRemovingKeyframes = ({ extraArgs, previousSegmentCount
         easing.pop();
     }
     while (easing.length < nextSegmentCount) {
-        easing.push('linear');
+        easing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
     }
     return {
         extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
@@ -901,6 +928,37 @@ const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, })
         },
     };
 };
+const getEffectWritableProp = ({ objExpr, key, missingPropInitialValue, }) => {
+    const { prop } = findObjectProperty(objExpr, key);
+    if (!prop) {
+        if (missingPropInitialValue) {
+            return {
+                expression: createMissingPropExpression(missingPropInitialValue),
+                setExpression: (nextExpression) => {
+                    objExpr.properties.push(createObjectProperty(key, nextExpression));
+                },
+            };
+        }
+        throw new Error(`Cannot update keyframes: "${key}" is not set`);
+    }
+    return {
+        expression: prop.value,
+        setExpression: (nextExpression) => {
+            prop.value = nextExpression;
+        },
+    };
+};
+const getEffectPropsObjectExpression = (call) => {
+    if (call.arguments.length === 0) {
+        const objExpr = b.objectExpression([]);
+        call.arguments.push(objExpr);
+        return objExpr;
+    }
+    if (call.arguments[0].type !== 'ObjectExpression') {
+        throw new Error('Cannot update effect keyframe: computed');
+    }
+    return call.arguments[0];
+};
 const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, }) => {
     var _a;
     var _b;
@@ -1014,29 +1072,34 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
         throw new Error(`Cannot update effect keyframe: ${found.reason}`);
     }
     const { call, callee: effectCallee } = found;
-    if (call.arguments.length === 0 ||
-        call.arguments[0].type !== 'ObjectExpression') {
-        throw new Error('Cannot update effect keyframe: computed');
-    }
-    const objExpr = call.arguments[0];
+    const objExpr = getEffectPropsObjectExpression(call);
     const oldValueStrings = [];
     const newValueStrings = [];
     const requiredImports = new Set();
     let needsFrameHook = false;
     for (const update of updates) {
-        const { prop } = findObjectProperty(objExpr, update.key);
-        if (!prop) {
-            throw new Error(`Cannot update keyframes: "${update.key}" is not set`);
-        }
-        oldValueStrings.push(recast.print(prop.value).code);
+        const prop = getEffectWritableProp({
+            objExpr,
+            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.value,
+            expression: prop.expression,
             key: update.key,
             operation: update.operation,
             schema: schema !== null && schema !== void 0 ? schema : null,
         });
         newValueStrings.push(recast.print(nextExpression).code);
-        prop.value = nextExpression;
+        prop.setExpression(nextExpression);
         if (introduced.calleeName) {
             requiredImports.add(introduced.calleeName);
         }

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

@@ -1,4 +1,4 @@
-import type { SequenceNodePath, SequenceSchema } from 'remotion';
+import type { SequenceNodePath, InteractivitySchema } from 'remotion';
 export type SequencePropUpdate = {
     key: string;
     value: unknown;
@@ -11,7 +11,7 @@ export type RemovedProp = {
 export type SequencePropsNodeUpdate = {
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type SequencePropsNodeUpdateResult = {
     oldValueStrings: string[];
@@ -35,7 +35,7 @@ export declare const updateSequencePropsAst: ({ input, nodePath, updates, schema
     input: string;
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 }) => {
     serialized: string;
     oldValueStrings: string[];
@@ -51,7 +51,7 @@ export declare const updateSequenceProps: ({ input, nodePath, updates, schema, p
     input: string;
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     prettierConfigOverride: PrettierConfigOverride;
 }) => Promise<UpdateSequencePropsResult>;
 export {};

package/dist/helpers/resolve-composition-component.js

@@ -515,7 +515,13 @@ const createStringAttribute = (name, value) => {
 const createBooleanAttribute = (name, value) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer(recast.types.builders.booleanLiteral(value)));
 };
-const formatTranslateValue = ({ x, y }) => `${x}px ${y}px`;
+const translateDecimalPlaces = 1;
+const roundTranslateCoordinate = (value) => {
+    const factor = 10 ** translateDecimalPlaces;
+    const rounded = Math.round(value * factor) / factor;
+    return Object.is(rounded, -0) ? 0 : rounded;
+};
+const formatTranslateValue = ({ x, y }) => `${roundTranslateCoordinate(x)}px ${roundTranslateCoordinate(y)}px`;
 const createPositionAbsoluteStyleAttribute = (position) => {
     const properties = [
         recast.types.builders.objectProperty(recast.types.builders.identifier('position'), recast.types.builders.stringLiteral('absolute')),

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

@@ -1,5 +1,5 @@
 import type { File, JSXOpeningElement } from '@babel/types';
-import type { CanUpdateEffectPropsResponse, SequenceNodePath, SequenceSchema } from 'remotion';
+import type { CanUpdateEffectPropsResponse, SequenceNodePath, InteractivitySchema } from 'remotion';
 export declare const computeEffectPropStatus: ({ ast, jsx, effectIndex, keys, }: {
     ast: File;
     jsx: JSXOpeningElement;
@@ -9,13 +9,13 @@ export declare const computeEffectPropStatus: ({ ast, jsx, effectIndex, keys, }:
 export declare const computeEffectPropsStatusesFromContent: ({ fileContents, sequenceNodePath, effects, keysFor, }: {
     fileContents: string;
     sequenceNodePath: SequenceNodePath;
-    effects: SequenceSchema[];
-    keysFor: (effect: SequenceSchema) => string[];
+    effects: InteractivitySchema[];
+    keysFor: (effect: InteractivitySchema) => string[];
 }) => CanUpdateEffectPropsResponse[];
 export declare const computeEffectPropsStatusesFromFile: ({ fileName, sequenceNodePath, effects, keysFor, remotionRoot, }: {
     fileName: string;
     sequenceNodePath: SequenceNodePath;
-    effects: SequenceSchema[];
-    keysFor: (effect: SequenceSchema) => string[];
+    effects: InteractivitySchema[];
+    keysFor: (effect: InteractivitySchema) => string[];
     remotionRoot: string;
 }) => CanUpdateEffectPropsResponse[];

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

@@ -210,18 +210,29 @@ const getKeyframeEasing = (node) => {
         node.property.type === 'Identifier' &&
         node.property.name === 'linear' &&
         node.computed === false) {
-        return 'linear';
+        return { type: 'linear' };
     }
     if (node.type !== 'CallExpression' ||
         node.callee.type !== 'MemberExpression' ||
         node.callee.object.type !== 'Identifier' ||
         node.callee.object.name !== 'Easing' ||
         node.callee.property.type !== 'Identifier' ||
-        node.callee.property.name !== 'bezier' ||
         node.callee.computed) {
         return null;
     }
-    if (node.arguments.length !== 4) {
+    if (node.callee.property.name === 'spring') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        const springConfig = node.arguments[0];
+        if ((springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'ArgumentPlaceholder' ||
+            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'JSXNamespacedName' ||
+            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'SpreadElement') {
+            return null;
+        }
+        return (0, studio_shared_1.parseSpringEasingConfig)(springConfig);
+    }
+    if (node.callee.property.name !== 'bezier' || node.arguments.length !== 4) {
         return null;
     }
     const values = node.arguments.map((arg) => {
@@ -235,7 +246,8 @@ const getKeyframeEasing = (node) => {
     if (values.some((v) => v === null)) {
         return null;
     }
-    return values;
+    const [x1, y1, x2, y2] = values;
+    return { type: 'bezier', x1, y1, x2, y2 };
 };
 const getKeyframeEasingArray = ({ easingNode, segments, }) => {
     if (segments === 0) {
@@ -280,7 +292,7 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
             right: 'extend',
         };
     const defaults = {
-        easing: new Array(segments).fill('linear'),
+        easing: Array.from({ length: segments }, () => studio_shared_1.LINEAR_KEYFRAME_EASING),
         clamping: defaultClamping,
         posterize: undefined,
     };

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.478",
+	"version": "4.0.479",
 	"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.478",
+		"remotion": "4.0.479",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.478",
-		"@remotion/renderer": "4.0.478",
-		"@remotion/studio-shared": "4.0.478",
+		"@remotion/bundler": "4.0.479",
+		"@remotion/renderer": "4.0.479",
+		"@remotion/studio-shared": "4.0.479",
 		"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.478",
+		"@remotion/eslint-config-internal": "4.0.479",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"