@remotion/studio-server 4.0.471 → 4.0.472

package/dist/codemods/add-effect.d.ts

@@ -1,4 +1,15 @@
+import type { File, ObjectExpression } from '@babel/types';
 import type { SequenceNodePath } from 'remotion';
+export declare const assertValidEffect: ({ effectName, effectImportPath, }: {
+    effectName: string;
+    effectImportPath: string;
+}) => void;
+export declare const ensureEffectImport: ({ ast, effectName, effectImportPath, }: {
+    ast: File;
+    effectName: string;
+    effectImportPath: string;
+}) => string;
+export declare const makeConfigObjectExpression: (config: Record<string, unknown>) => ObjectExpression;
 export declare const addEffect: ({ input, sequenceNodePath, effectName, effectImportPath, effectConfig, prettierConfigOverride, }: {
     input: string;
     sequenceNodePath: SequenceNodePath;

package/dist/codemods/add-effect.js

@@ -33,9 +33,10 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addEffect = void 0;
+exports.addEffect = exports.makeConfigObjectExpression = exports.ensureEffectImport = exports.assertValidEffect = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
+const imports_1 = require("../helpers/imports");
 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");
@@ -53,6 +54,7 @@ const assertValidEffect = ({ effectName, effectImportPath, }) => {
         throw new Error(`Unsupported effect import "${effectImportPath}"`);
     }
 };
+exports.assertValidEffect = assertValidEffect;
 const parseValueExpression = (value) => {
     const code = `a = ${(0, studio_shared_1.stringifyDefaultProps)({ props: value, enumPaths: [] })}`;
     const ast = (0, parse_ast_1.parseAst)(code);
@@ -63,12 +65,6 @@ const parseValueExpression = (value) => {
     }
     return stmt.expression.right;
 };
-const getImportedName = (specifier) => {
-    if (specifier.imported.type === 'Identifier') {
-        return specifier.imported.name;
-    }
-    return specifier.imported.value;
-};
 const declarationBindsName = (declaration, name) => {
     var _a, _b;
     if (declaration.type === 'ClassDeclaration') {
@@ -106,16 +102,6 @@ const hasTopLevelBinding = ({ ast, name }) => {
         });
     });
 };
-const insertImportDeclaration = (ast, importDeclaration) => {
-    const { body } = ast.program;
-    let lastImportIndex = -1;
-    for (let i = 0; i < body.length; i++) {
-        if (body[i].type === 'ImportDeclaration') {
-            lastImportIndex = i;
-        }
-    }
-    body.splice(lastImportIndex + 1, 0, importDeclaration);
-};
 const getAvailableLocalName = ({ ast, effectName, }) => {
     if (!hasTopLevelBinding({ ast, name: effectName })) {
         return effectName;
@@ -133,40 +119,15 @@ const getAvailableLocalName = ({ ast, effectName, }) => {
     throw new Error(`Cannot find a local name for ${effectName}`);
 };
 const ensureEffectImport = ({ ast, effectName, effectImportPath, }) => {
-    var _a, _b, _c;
-    var _d;
-    let importDeclaration = null;
-    for (const node of ast.program.body) {
-        if (node.type !== 'ImportDeclaration' ||
-            node.source.value !== effectImportPath) {
-            continue;
-        }
-        importDeclaration = node;
-        const matchingSpecifier = (_a = node.specifiers) === null || _a === void 0 ? void 0 : _a.find((importSpecifier) => {
-            return (importSpecifier.type === 'ImportSpecifier' &&
-                getImportedName(importSpecifier) === effectName);
-        });
-        if ((_b = matchingSpecifier === null || matchingSpecifier === void 0 ? void 0 : matchingSpecifier.local) === null || _b === void 0 ? void 0 : _b.name) {
-            return matchingSpecifier.local.name;
-        }
-    }
     const localName = getAvailableLocalName({ ast, effectName });
-    const imported = b.identifier(effectName);
-    const local = localName === effectName ? null : b.identifier(localName);
-    const specifier = b.importSpecifier(imported, local);
-    if (importDeclaration &&
-        !((_c = importDeclaration.specifiers) === null || _c === void 0 ? void 0 : _c.some((importSpecifier) => importSpecifier.type === 'ImportNamespaceSpecifier'))) {
-        importDeclaration.specifiers = [
-            ...((_d = importDeclaration.specifiers) !== null && _d !== void 0 ? _d : []),
-            specifier,
-        ];
-        return localName;
-    }
-    const newImport = b.importDeclaration([], b.stringLiteral(effectImportPath));
-    newImport.specifiers = [specifier];
-    insertImportDeclaration(ast, newImport);
-    return localName;
+    return (0, imports_1.ensureNamedImport)({
+        ast,
+        importedName: effectName,
+        sourcePath: effectImportPath,
+        localName,
+    });
 };
+exports.ensureEffectImport = ensureEffectImport;
 const getEffectsArray = (attr) => {
     if (!attr.value || attr.value.type !== 'JSXExpressionContainer') {
         throw new Error('Cannot add effect: effects prop is not an array');
@@ -188,6 +149,7 @@ const makeConfigObjectExpression = (config) => {
         return b.objectProperty(keyNode, parseValueExpression(value));
     }));
 };
+exports.makeConfigObjectExpression = makeConfigObjectExpression;
 const getJsxTagLabel = (name) => {
     if (name.type === 'JSXIdentifier') {
         return `<${name.name}>`;
@@ -197,15 +159,15 @@ const getJsxTagLabel = (name) => {
 const addEffect = async ({ input, sequenceNodePath, effectName, effectImportPath, effectConfig, prettierConfigOverride, }) => {
     var _a;
     var _b, _c;
-    assertValidEffect({ effectName, effectImportPath });
+    (0, exports.assertValidEffect)({ effectName, effectImportPath });
     const ast = (0, parse_ast_1.parseAst)(input);
     const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath);
     if (!jsx) {
         throw new Error('Could not find a JSX element at the specified location to add effect');
     }
-    const localName = ensureEffectImport({ ast, effectName, effectImportPath });
+    const localName = (0, exports.ensureEffectImport)({ ast, effectName, effectImportPath });
     const effectCall = b.callExpression(b.identifier(localName), [
-        makeConfigObjectExpression(effectConfig),
+        (0, exports.makeConfigObjectExpression)(effectConfig),
     ]);
     const attr = (0, update_effect_props_1.findEffectsAttr)((_b = jsx.attributes) !== null && _b !== void 0 ? _b : []);
     if (attr) {

package/dist/codemods/format-file-content.js

@@ -47,7 +47,7 @@ const formatFileContent = async ({ input, prettierConfigOverride, }) => {
     }
     const { format, resolveConfig, resolveConfigFile } = prettier;
     let prettierConfig;
-    if (prettierConfigOverride !== undefined) {
+    if (prettierConfigOverride !== undefined && prettierConfigOverride !== null) {
         prettierConfig = prettierConfigOverride;
     }
     else {

package/dist/codemods/parse-ast.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeAst = exports.parseAst = void 0;
 const recast = __importStar(require("recast"));
 const tsParser = __importStar(require("recast/parsers/babel-ts"));
+const imports_1 = require("../helpers/imports");
 const parseAst = (input) => {
     return recast.parse(input, {
         parser: tsParser,
@@ -43,8 +44,10 @@ const parseAst = (input) => {
 };
 exports.parseAst = parseAst;
 const serializeAst = (ast) => {
-    return recast.print(ast, {
+    const raw = recast.print(ast, {
         parser: tsParser,
     }).code;
+    // Normalize Windows line endings so normalizeImportSpacing regex works
+    return (0, imports_1.normalizeImportSpacing)(raw.replace(/\r\n/g, '\n'));
 };
 exports.serializeAst = serializeAst;

package/dist/codemods/paste-effects.d.ts

@@ -0,0 +1,15 @@
+import type { EffectClipboardPasteType, EffectClipboardSnapshot } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
+export declare const pasteEffects: ({ input, targetSequenceNodePath, type, effects, prettierConfigOverride, }: {
+    readonly input: string;
+    readonly targetFileName: string;
+    readonly targetSequenceNodePath: SequenceNodePath;
+    readonly type: EffectClipboardPasteType;
+    readonly effects: EffectClipboardSnapshot[];
+    readonly prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    readonly output: string;
+    readonly formatted: boolean;
+    readonly effectLabels: string[];
+    readonly logLine: number;
+}>;

package/dist/codemods/paste-effects.js

@@ -0,0 +1,234 @@
+"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.pasteEffects = void 0;
+const recast = __importStar(require("recast"));
+const get_ast_node_path_1 = require("../helpers/get-ast-node-path");
+const imports_1 = require("../helpers/imports");
+const can_update_sequence_props_1 = require("../preview-server/routes/can-update-sequence-props");
+const add_effect_1 = require("./add-effect");
+const format_file_content_1 = require("./format-file-content");
+const parse_ast_1 = require("./parse-ast");
+const update_effect_props_1 = require("./update-effect-props/update-effect-props");
+const ensure_imports_and_frame_hook_1 = require("./update-keyframes/ensure-imports-and-frame-hook");
+const update_nested_prop_1 = require("./update-nested-prop");
+const b = recast.types.builders;
+const identifierRegex = /^[A-Za-z_$][0-9A-Za-z_$]*$/;
+const getEffectsArray = (attr) => {
+    if (!attr.value || attr.value.type !== 'JSXExpressionContainer') {
+        throw new Error('Cannot append effects: effects prop is not an array');
+    }
+    const expr = attr.value.expression;
+    if (expr.type !== 'ArrayExpression') {
+        throw new Error('Cannot append effects: effects prop is not an array');
+    }
+    return expr;
+};
+const makeEffectsAttr = (array) => {
+    return b.jsxAttribute(b.jsxIdentifier('effects'), b.jsxExpressionContainer(array));
+};
+const makeEffectsArray = (calls) => {
+    return b.arrayExpression(calls);
+};
+const isNonLinearEasing = (easing) => easing !== 'linear';
+const keyframedParamNeedsEasingImport = (param) => {
+    return (param.interpolationFunction !== 'interpolateColors' &&
+        param.easing.some(isNonLinearEasing));
+};
+const getRequiredRemotionImports = (effects) => {
+    const requiredImports = new Set();
+    for (const effect of effects) {
+        for (const param of Object.values(effect.params)) {
+            if (param.type !== 'keyframed') {
+                continue;
+            }
+            requiredImports.add('useCurrentFrame');
+            requiredImports.add(param.interpolationFunction);
+            if (keyframedParamNeedsEasingImport(param)) {
+                requiredImports.add('Easing');
+            }
+        }
+    }
+    return requiredImports;
+};
+const ensureRemotionImportLocalNames = ({ ast, requiredImports, }) => {
+    const localNames = {};
+    for (const importedName of requiredImports) {
+        localNames[importedName] = (0, imports_1.ensureNamedImport)({
+            ast,
+            importedName,
+            sourcePath: 'remotion',
+            localName: importedName,
+        });
+    }
+    return localNames;
+};
+const makeEasingExpression = ({ easing, easingLocalName, }) => {
+    if (easing === 'linear') {
+        return b.memberExpression(b.identifier(easingLocalName), b.identifier('linear'));
+    }
+    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;
+    const properties = [];
+    if (param.interpolationFunction !== 'interpolateColors') {
+        if (param.clamping.left !== 'extend') {
+            properties.push(b.objectProperty(b.identifier('extrapolateLeft'), b.stringLiteral(param.clamping.left)));
+        }
+        if (param.clamping.right !== 'extend') {
+            properties.push(b.objectProperty(b.identifier('extrapolateRight'), b.stringLiteral(param.clamping.right)));
+        }
+        if (keyframedParamNeedsEasingImport(param)) {
+            const easingLocalName = (_a = remotionLocalNames.Easing) !== null && _a !== void 0 ? _a : 'Easing';
+            properties.push(b.objectProperty(b.identifier('easing'), b.arrayExpression(param.easing.map((easing) => makeEasingExpression({ easing, easingLocalName })))));
+        }
+    }
+    if (param.posterize !== undefined) {
+        properties.push(b.objectProperty(b.identifier('posterize'), (0, update_nested_prop_1.parseValueExpression)(param.posterize)));
+    }
+    if (properties.length === 0) {
+        return null;
+    }
+    return b.objectExpression(properties);
+};
+const makeKeyframedExpression = ({ param, remotionLocalNames, }) => {
+    var _a;
+    const expectedEasingCount = Math.max(0, param.keyframes.length - 1);
+    if (param.easing.length !== expectedEasingCount) {
+        throw new Error('Cannot paste keyframed effect: invalid easing metadata');
+    }
+    const calleeName = (_a = remotionLocalNames[param.interpolationFunction]) !== null && _a !== void 0 ? _a : param.interpolationFunction;
+    const args = [
+        b.identifier('frame'),
+        b.arrayExpression(param.keyframes.map((keyframe) => (0, update_nested_prop_1.parseValueExpression)(keyframe.frame))),
+        b.arrayExpression(param.keyframes.map((keyframe) => (0, update_nested_prop_1.parseValueExpression)(keyframe.value))),
+    ];
+    const options = makeKeyframedOptions({ param, remotionLocalNames });
+    if (options) {
+        args.push(options);
+    }
+    return b.callExpression(b.identifier(calleeName), args);
+};
+const makeParamExpression = ({ param, remotionLocalNames, }) => {
+    if (param.type === 'static') {
+        return (0, update_nested_prop_1.parseValueExpression)(param.value);
+    }
+    return makeKeyframedExpression({ param, remotionLocalNames });
+};
+const makeParamsObjectExpression = ({ params, remotionLocalNames, }) => {
+    return b.objectExpression(Object.entries(params).map(([key, param]) => {
+        const keyNode = identifierRegex.test(key)
+            ? b.identifier(key)
+            : b.stringLiteral(key);
+        return b.objectProperty(keyNode, makeParamExpression({ param, remotionLocalNames }));
+    }));
+};
+const makeEffectCall = ({ ast, effect, remotionLocalNames, }) => {
+    (0, add_effect_1.assertValidEffect)({
+        effectName: effect.callee,
+        effectImportPath: effect.importPath,
+    });
+    const localName = (0, add_effect_1.ensureEffectImport)({
+        ast,
+        effectName: effect.callee,
+        effectImportPath: effect.importPath,
+    });
+    return b.callExpression(b.identifier(localName), [
+        makeParamsObjectExpression({
+            params: effect.params,
+            remotionLocalNames,
+        }),
+    ]);
+};
+const removeEffectsAttr = (attributes, attr) => {
+    const index = attributes.indexOf(attr);
+    if (index !== -1) {
+        attributes.splice(index, 1);
+    }
+};
+const pasteEffects = async ({ input, targetSequenceNodePath, type, effects, prettierConfigOverride, }) => {
+    var _a;
+    var _b, _c, _d;
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const targetJsxPath = (0, get_ast_node_path_1.getAstNodePath)(ast, targetSequenceNodePath);
+    const targetJsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, targetSequenceNodePath);
+    if (!targetJsx || !targetJsxPath) {
+        throw new Error('Could not find a JSX element at the specified location to paste effects');
+    }
+    const requiredRemotionImports = getRequiredRemotionImports(effects);
+    const remotionLocalNames = ensureRemotionImportLocalNames({
+        ast,
+        requiredImports: requiredRemotionImports,
+    });
+    if (requiredRemotionImports.has('useCurrentFrame')) {
+        const fnPath = (0, ensure_imports_and_frame_hook_1.findEnclosingFunctionPath)(targetJsxPath);
+        if (fnPath) {
+            (0, ensure_imports_and_frame_hook_1.ensureUseCurrentFrameHook)(fnPath, (_b = remotionLocalNames.useCurrentFrame) !== null && _b !== void 0 ? _b : 'useCurrentFrame');
+        }
+    }
+    const effectCalls = effects.map((effect) => makeEffectCall({ ast, effect, remotionLocalNames }));
+    const effectLabels = effects.map((effect) => `${effect.callee}()`);
+    const existingAttr = (0, update_effect_props_1.findEffectsAttr)((_c = targetJsx.attributes) !== null && _c !== void 0 ? _c : []);
+    if (type === 'effects-replacing') {
+        if (existingAttr) {
+            removeEffectsAttr(targetJsx.attributes, existingAttr);
+        }
+        if (effectCalls.length > 0) {
+            targetJsx.attributes.push(makeEffectsAttr(makeEffectsArray(effectCalls)));
+        }
+    }
+    else if (existingAttr) {
+        getEffectsArray(existingAttr).elements.push(...effectCalls);
+    }
+    else if (effectCalls.length > 0) {
+        targetJsx.attributes.push(makeEffectsAttr(makeEffectsArray(effectCalls)));
+    }
+    else {
+        throw new Error('Cannot paste effects: no effects were copied');
+    }
+    const finalFile = (0, parse_ast_1.serializeAst)(ast);
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: finalFile,
+        prettierConfigOverride,
+    });
+    return {
+        output,
+        formatted,
+        effectLabels,
+        logLine: (_d = (_a = targetJsx.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : 1,
+    };
+};
+exports.pasteEffects = pasteEffects;