@remotion/studio-server 4.0.470 → 4.0.472

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

@@ -0,0 +1,26 @@
+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;
+    effectName: string;
+    effectImportPath: string;
+    effectConfig: Record<string, unknown>;
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    formatted: boolean;
+    effectLabel: string;
+    nodeLabel: string;
+    logLine: number;
+}>;

package/dist/codemods/add-effect.js

@@ -0,0 +1,193 @@
+"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.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");
+const update_effect_props_1 = require("./update-effect-props/update-effect-props");
+const b = recast.types.builders;
+const identifierRegex = /^[A-Za-z_$][0-9A-Za-z_$]*$/;
+const assertValidEffect = ({ effectName, effectImportPath, }) => {
+    if (!identifierRegex.test(effectName)) {
+        throw new Error(`Invalid effect name "${effectName}"`);
+    }
+    const allowedImport = effectImportPath.startsWith('@remotion/effects/') ||
+        effectImportPath === '@remotion/light-leaks' ||
+        effectImportPath === '@remotion/starburst';
+    if (!allowedImport) {
+        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);
+    const stmt = ast.program.body[0];
+    if (stmt.type !== 'ExpressionStatement' ||
+        stmt.expression.type !== 'AssignmentExpression') {
+        throw new Error('Failed to parse effect config value');
+    }
+    return stmt.expression.right;
+};
+const declarationBindsName = (declaration, name) => {
+    var _a, _b;
+    if (declaration.type === 'ClassDeclaration') {
+        return ((_a = declaration.id) === null || _a === void 0 ? void 0 : _a.name) === name;
+    }
+    if (declaration.type === 'FunctionDeclaration') {
+        return ((_b = declaration.id) === null || _b === void 0 ? void 0 : _b.name) === name;
+    }
+    return declaration.declarations.some((variableDeclaration) => {
+        return (variableDeclaration.id.type === 'Identifier' &&
+            variableDeclaration.id.name === name);
+    });
+};
+const hasTopLevelBinding = ({ ast, name }) => {
+    return ast.program.body.some((node) => {
+        var _a;
+        if (node.type === 'FunctionDeclaration' ||
+            node.type === 'ClassDeclaration' ||
+            node.type === 'VariableDeclaration') {
+            return declarationBindsName(node, name);
+        }
+        if (node.type === 'ExportNamedDeclaration' &&
+            node.declaration &&
+            (node.declaration.type === 'FunctionDeclaration' ||
+                node.declaration.type === 'ClassDeclaration' ||
+                node.declaration.type === 'VariableDeclaration')) {
+            return declarationBindsName(node.declaration, name);
+        }
+        if (node.type !== 'ImportDeclaration') {
+            return false;
+        }
+        return (_a = node.specifiers) === null || _a === void 0 ? void 0 : _a.some((specifier) => {
+            var _a;
+            return ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === name;
+        });
+    });
+};
+const getAvailableLocalName = ({ ast, effectName, }) => {
+    if (!hasTopLevelBinding({ ast, name: effectName })) {
+        return effectName;
+    }
+    const base = `${effectName}Effect`;
+    if (!hasTopLevelBinding({ ast, name: base })) {
+        return base;
+    }
+    for (let i = 2; i < 100; i++) {
+        const candidate = `${base}${i}`;
+        if (!hasTopLevelBinding({ ast, name: candidate })) {
+            return candidate;
+        }
+    }
+    throw new Error(`Cannot find a local name for ${effectName}`);
+};
+const ensureEffectImport = ({ ast, effectName, effectImportPath, }) => {
+    const localName = getAvailableLocalName({ ast, effectName });
+    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');
+    }
+    const expr = attr.value.expression;
+    if (expr.type !== 'ArrayExpression') {
+        throw new Error('Cannot add effect: effects prop is not an array');
+    }
+    return expr;
+};
+const makeEffectsAttr = (array) => {
+    return b.jsxAttribute(b.jsxIdentifier('effects'), b.jsxExpressionContainer(array));
+};
+const makeConfigObjectExpression = (config) => {
+    return b.objectExpression(Object.entries(config).map(([key, value]) => {
+        const keyNode = identifierRegex.test(key)
+            ? b.identifier(key)
+            : b.stringLiteral(key);
+        return b.objectProperty(keyNode, parseValueExpression(value));
+    }));
+};
+exports.makeConfigObjectExpression = makeConfigObjectExpression;
+const getJsxTagLabel = (name) => {
+    if (name.type === 'JSXIdentifier') {
+        return `<${name.name}>`;
+    }
+    return 'element';
+};
+const addEffect = async ({ input, sequenceNodePath, effectName, effectImportPath, effectConfig, prettierConfigOverride, }) => {
+    var _a;
+    var _b, _c;
+    (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 = (0, exports.ensureEffectImport)({ ast, effectName, effectImportPath });
+    const effectCall = b.callExpression(b.identifier(localName), [
+        (0, exports.makeConfigObjectExpression)(effectConfig),
+    ]);
+    const attr = (0, update_effect_props_1.findEffectsAttr)((_b = jsx.attributes) !== null && _b !== void 0 ? _b : []);
+    if (attr) {
+        getEffectsArray(attr).elements.push(effectCall);
+    }
+    else {
+        const effectsArray = b.arrayExpression([effectCall]);
+        jsx.attributes.push(makeEffectsAttr(effectsArray));
+    }
+    const finalFile = (0, parse_ast_1.serializeAst)(ast);
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: finalFile,
+        prettierConfigOverride,
+    });
+    return {
+        output,
+        formatted,
+        effectLabel: `${effectName}()`,
+        nodeLabel: getJsxTagLabel(jsx.name),
+        logLine: (_c = (_a = jsx.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _c !== void 0 ? _c : 1,
+    };
+};
+exports.addEffect = addEffect;

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;