@remotion/studio-server 4.0.471 → 4.0.472

package/dist/codemods/recast-mods.js

@@ -8,7 +8,7 @@ const applyCodemod = ({ file, codeMod, }) => {
         return (0, apply_visual_control_1.applyVisualControl)({ file, transformation: codeMod, changesMade });
     }
     const body = file.program.body.map((node) => {
-        return mapAll(node, codeMod, changesMade);
+        return mapAll(node, codeMod, changesMade, null);
     });
     return {
         newAst: {
@@ -22,9 +22,9 @@ const applyCodemod = ({ file, codeMod, }) => {
     };
 };
 exports.applyCodemod = applyCodemod;
-const mapAll = (node, transformation, changesMade) => {
+const mapAll = (node, transformation, changesMade, parentFolderName) => {
     if (isRecognizedType(node)) {
-        return mapRecognizedType(node, transformation, changesMade);
+        return mapRecognizedType(node, transformation, changesMade, parentFolderName);
     }
     return node;
 };
@@ -40,33 +40,33 @@ const isRecognizedType = (t) => {
         t.type === 'ExportNamedDeclaration' ||
         t.type === 'ExportDefaultDeclaration');
 };
-const mapVariableDeclarator = (variableDeclarator, transformation, changesMade) => {
+const mapVariableDeclarator = (variableDeclarator, transformation, changesMade, parentFolderName) => {
     return {
         ...variableDeclarator,
         init: variableDeclarator.init
-            ? mapAll(variableDeclarator.init, transformation, changesMade)
+            ? mapAll(variableDeclarator.init, transformation, changesMade, parentFolderName)
             : variableDeclarator.init,
     };
 };
-const mapBlockStatement = (blockStatement, transformation, changesMade) => {
+const mapBlockStatement = (blockStatement, transformation, changesMade, parentFolderName) => {
     return {
         ...blockStatement,
         body: blockStatement.body.map((a) => {
-            return mapAll(a, transformation, changesMade);
+            return mapAll(a, transformation, changesMade, parentFolderName);
         }),
     };
 };
-const mapReturnStatement = (statement, transformation, changesMade) => {
+const mapReturnStatement = (statement, transformation, changesMade, parentFolderName) => {
     if (!statement.argument) {
         return statement;
     }
-    const replacement = transformLoneJsxElement(statement.argument, transformation, changesMade);
+    const replacement = transformLoneJsxElement(statement.argument, transformation, changesMade, parentFolderName);
     if (replacement !== null) {
         return { ...statement, argument: replacement };
     }
     return {
         ...statement,
-        argument: mapAll(statement.argument, transformation, changesMade),
+        argument: mapAll(statement.argument, transformation, changesMade, parentFolderName),
     };
 };
 const nullLiteral = () => ({ type: 'NullLiteral' });
@@ -86,40 +86,68 @@ const wrapInJsxFragment = (children) => ({
     type: 'JSXFragment',
     openingFragment: { type: 'JSXOpeningFragment' },
     closingFragment: { type: 'JSXClosingFragment' },
-    children: children.map(stripParenthesizedExtra),
+    children: children.map((child) => {
+        if (child.type === 'JSXElement' || child.type === 'JSXFragment') {
+            return stripParenthesizedExtra(child);
+        }
+        return child;
+    }),
 });
+const isJsxExpression = (child) => {
+    return child.type === 'JSXElement' || child.type === 'JSXFragment';
+};
+const isMeaningfulJsxChild = (child) => {
+    return child.type !== 'JSXText' || child.value.trim() !== '';
+};
 // When a <Composition> JSX element appears in a position where it cannot
 // simply be removed from a parent's children list (e.g. as the sole return
 // value of a wrapper component or as the concise body of an arrow function),
 // we still want delete/rename/duplicate codemods to work. This helper detects
 // that case and produces a structurally-valid replacement expression.
-const transformLoneJsxElement = (expression, transformation, changesMade) => {
+const transformLoneJsxElement = (expression, transformation, changesMade, parentFolderName) => {
     if (expression.type !== 'JSXElement') {
         return null;
     }
     const compId = getCompositionIdFromJSXElement(expression);
+    const folderName = getFolderNameFromJSXElement(expression);
     if (compId === null) {
-        return null;
+        const isFolderMatch = folderName !== null &&
+            ((transformation.type === 'delete-folder' &&
+                folderName === transformation.folderName &&
+                parentFolderName === transformation.parentName) ||
+                (transformation.type === 'rename-folder' &&
+                    folderName === transformation.folderName &&
+                    parentFolderName === transformation.parentName));
+        if (!isFolderMatch) {
+            return null;
+        }
     }
     const isMatch = (transformation.type === 'delete-composition' &&
         compId === transformation.idToDelete) ||
         (transformation.type === 'rename-composition' &&
             compId === transformation.idToRename) ||
         (transformation.type === 'duplicate-composition' &&
-            compId === transformation.idToDuplicate);
+            compId === transformation.idToDuplicate) ||
+        (transformation.type === 'delete-folder' &&
+            folderName === transformation.folderName &&
+            parentFolderName === transformation.parentName) ||
+        (transformation.type === 'rename-folder' &&
+            folderName === transformation.folderName &&
+            parentFolderName === transformation.parentName);
     if (!isMatch) {
         return null;
     }
-    const transformed = mapJsxChild(expression, transformation, changesMade);
-    if (transformed.length === 0) {
+    const transformed = mapJsxChild(expression, transformation, changesMade, parentFolderName);
+    const meaningful = transformed.filter(isMeaningfulJsxChild);
+    if (meaningful.length === 0) {
         return nullLiteral();
     }
-    if (transformed.length === 1) {
-        return transformed[0];
+    if (meaningful.length === 1 && isJsxExpression(meaningful[0])) {
+        return meaningful[0];
     }
     return wrapInJsxFragment(transformed);
 };
-const mapJsxElementOrFragment = (jsxFragment, transformation, changesMade) => {
+const mapJsxElementOrFragment = (jsxFragment, transformation, changesMade, parentFolderName) => {
     return {
         ...jsxFragment,
         children: jsxFragment.children
@@ -127,13 +155,17 @@ const mapJsxElementOrFragment = (jsxFragment, transformation, changesMade) => {
             if (c.type !== 'JSXElement') {
                 return c;
             }
-            return mapJsxChild(c, transformation, changesMade);
+            return mapJsxChild(c, transformation, changesMade, parentFolderName);
         })
             .flat(1),
     };
 };
-const mapJsxChild = (c, transformation, changesMade) => {
+const getChildFolderParentName = ({ folderName, parentFolderName, }) => {
+    return [parentFolderName, folderName].filter(Boolean).join('/');
+};
+const mapJsxChild = (c, transformation, changesMade, parentFolderName) => {
     const compId = getCompositionIdFromJSXElement(c);
+    const folderName = getFolderNameFromJSXElement(c);
     if (transformation === null) {
         return [c];
     }
@@ -175,17 +207,39 @@ const mapJsxChild = (c, transformation, changesMade) => {
         });
         return [];
     }
-    return [mapAll(c, transformation, changesMade)];
+    if (transformation.type === 'rename-folder' &&
+        folderName === transformation.folderName &&
+        parentFolderName === transformation.parentName) {
+        return [
+            changeFolderName({
+                jsxElement: c,
+                newFolderName: transformation.newName,
+                changesMade,
+            }),
+        ];
+    }
+    if (transformation.type === 'delete-folder' &&
+        folderName === transformation.folderName &&
+        parentFolderName === transformation.parentName) {
+        changesMade.push({
+            description: 'Deleted folder',
+        });
+        return c.children;
+    }
+    const childParentFolderName = folderName
+        ? getChildFolderParentName({ folderName, parentFolderName })
+        : parentFolderName;
+    return [mapAll(c, transformation, changesMade, childParentFolderName)];
 };
-const mapRecognizedType = (expression, transformation, changesMade) => {
+const mapRecognizedType = (expression, transformation, changesMade, parentFolderName) => {
     if (expression.type === 'JSXFragment' || expression.type === 'JSXElement') {
-        return mapJsxElementOrFragment(expression, transformation, changesMade);
+        return mapJsxElementOrFragment(expression, transformation, changesMade, parentFolderName);
     }
     if (expression.type === 'ArrowFunctionExpression' ||
         expression.type === 'FunctionExpression') {
         if (expression.type === 'ArrowFunctionExpression' &&
             expression.body.type === 'JSXElement') {
-            const replacement = transformLoneJsxElement(expression.body, transformation, changesMade);
+            const replacement = transformLoneJsxElement(expression.body, transformation, changesMade, parentFolderName);
             if (replacement !== null) {
                 return {
                     ...expression,
@@ -195,19 +249,19 @@ const mapRecognizedType = (expression, transformation, changesMade) => {
         }
         return {
             ...expression,
-            body: mapAll(expression.body, transformation, changesMade),
+            body: mapAll(expression.body, transformation, changesMade, parentFolderName),
         };
     }
     if (expression.type === 'VariableDeclaration') {
         const declarations = expression.declarations.map((d) => {
-            return mapVariableDeclarator(d, transformation, changesMade);
+            return mapVariableDeclarator(d, transformation, changesMade, parentFolderName);
         });
         return { ...expression, declarations };
     }
     if (expression.type === 'FunctionDeclaration') {
         return {
             ...expression,
-            body: mapBlockStatement(expression.body, transformation, changesMade),
+            body: mapBlockStatement(expression.body, transformation, changesMade, parentFolderName),
         };
     }
     if (expression.type === 'ExportNamedDeclaration' ||
@@ -217,14 +271,14 @@ const mapRecognizedType = (expression, transformation, changesMade) => {
         }
         return {
             ...expression,
-            declaration: mapAll(expression.declaration, transformation, changesMade),
+            declaration: mapAll(expression.declaration, transformation, changesMade, parentFolderName),
         };
     }
     if (expression.type === 'ReturnStatement') {
-        return mapReturnStatement(expression, transformation, changesMade);
+        return mapReturnStatement(expression, transformation, changesMade, parentFolderName);
     }
     if (expression.type === 'BlockStatement') {
-        return mapBlockStatement(expression, transformation, changesMade);
+        return mapBlockStatement(expression, transformation, changesMade, parentFolderName);
     }
     return expression;
 };
@@ -266,6 +320,99 @@ const getCompositionIdFromJSXElement = (jsxElement) => {
         .filter(Boolean);
     return id[0];
 };
+const getFolderNameFromJSXElement = (jsxElement) => {
+    if (jsxElement.type !== 'JSXElement') {
+        return null;
+    }
+    const { openingElement } = jsxElement;
+    const { name } = openingElement;
+    if (name.type !== 'JSXIdentifier') {
+        return null;
+    }
+    if (name.name !== 'Folder') {
+        return null;
+    }
+    const folderName = openingElement.attributes
+        .map((attribute) => {
+        if (attribute.type === 'JSXSpreadAttribute') {
+            return null;
+        }
+        if (attribute.name.type === 'JSXNamespacedName') {
+            return null;
+        }
+        if (attribute.name.name !== 'name') {
+            return null;
+        }
+        if (!attribute.value) {
+            return null;
+        }
+        if (attribute.value.type === 'StringLiteral') {
+            return attribute.value.value;
+        }
+        if (attribute.value.type === 'JSXExpressionContainer' &&
+            attribute.value.expression.type === 'StringLiteral') {
+            return attribute.value.expression.value;
+        }
+        return null;
+    })
+        .filter(Boolean);
+    return folderName[0];
+};
+const changeFolderName = ({ jsxElement, newFolderName, changesMade, }) => {
+    const { openingElement } = jsxElement;
+    const { name } = openingElement;
+    if (name.type !== 'JSXIdentifier') {
+        return jsxElement;
+    }
+    if (name.name !== 'Folder') {
+        return jsxElement;
+    }
+    const attributes = openingElement.attributes.map((attribute) => {
+        if (attribute.type === 'JSXSpreadAttribute') {
+            return attribute;
+        }
+        if (attribute.name.type === 'JSXNamespacedName') {
+            return attribute;
+        }
+        if (attribute.name.name === 'name' &&
+            attribute.value &&
+            attribute.value.type === 'StringLiteral') {
+            changesMade.push({
+                description: 'Replaced folder name',
+            });
+            return {
+                ...attribute,
+                value: { ...attribute.value, value: newFolderName },
+            };
+        }
+        if (attribute.name.name === 'name' &&
+            attribute.value &&
+            attribute.value.type === 'JSXExpressionContainer' &&
+            attribute.value.expression.type === 'StringLiteral') {
+            changesMade.push({
+                description: 'Replaced folder name',
+            });
+            return {
+                ...attribute,
+                value: {
+                    ...attribute.value,
+                    expression: {
+                        ...attribute.value.expression,
+                        value: newFolderName,
+                    },
+                },
+            };
+        }
+        return attribute;
+    });
+    return {
+        ...jsxElement,
+        openingElement: {
+            ...jsxElement.openingElement,
+            attributes,
+        },
+    };
+};
 const changeComposition = ({ jsxElement, newCompositionId, newCompositionFps, newCompositionDurationInFrames, newCompositionHeight, newCompositionWidth, changesMade, newTagToUse, }) => {
     const { openingElement } = jsxElement;
     const { name } = openingElement;

package/dist/codemods/update-keyframes/ensure-imports-and-frame-hook.d.ts

@@ -1,4 +1,4 @@
 import type { File } from '@babel/types';
 export declare const findEnclosingFunctionPath: (path: import("ast-types/lib/node-path").NodePath<N, V>) => import("ast-types/lib/node-path").NodePath<N, V> | null;
 export declare const ensureRemotionImports: (ast: File, names: ReadonlySet<string>) => void;
-export declare const ensureUseCurrentFrameHook: (functionPath: import("ast-types/lib/node-path").NodePath<N, V>) => void;
+export declare const ensureUseCurrentFrameHook: (functionPath: import("ast-types/lib/node-path").NodePath<N, V>, hookName?: string) => void;

package/dist/codemods/update-keyframes/ensure-imports-and-frame-hook.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureUseCurrentFrameHook = exports.ensureRemotionImports = exports.findEnclosingFunctionPath = void 0;
 const recast = __importStar(require("recast"));
+const imports_1 = require("../../helpers/imports");
 const b = recast.types.builders;
 const n = recast.types.namedTypes;
 const isFunctionNode = (value) => {
@@ -53,60 +54,11 @@ const findEnclosingFunctionPath = (path) => {
     return null;
 };
 exports.findEnclosingFunctionPath = findEnclosingFunctionPath;
-const findRemotionImport = (ast) => {
-    for (const stmt of ast.program.body) {
-        if (stmt.type === 'ImportDeclaration' &&
-            stmt.source.type === 'StringLiteral' &&
-            stmt.source.value === 'remotion') {
-            return stmt;
-        }
-    }
-    return null;
-};
-const insertImportDeclaration = (ast, importDecl) => {
-    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, importDecl);
-};
 const ensureRemotionImports = (ast, names) => {
-    var _a, _b;
-    if (names.size === 0) {
-        return;
-    }
-    let remotionImport = findRemotionImport(ast);
-    if (!remotionImport) {
-        remotionImport = b.importDeclaration([], b.stringLiteral('remotion'));
-        insertImportDeclaration(ast, remotionImport);
-    }
-    const existingNames = new Set();
-    for (const specifier of (_a = remotionImport.specifiers) !== null && _a !== void 0 ? _a : []) {
-        if (specifier.type !== 'ImportSpecifier') {
-            continue;
-        }
-        const { imported } = specifier;
-        if (imported.type === 'Identifier') {
-            existingNames.add(imported.name);
-        }
-        else if (imported.type === 'StringLiteral') {
-            existingNames.add(imported.value);
-        }
-    }
-    for (const name of names) {
-        if (existingNames.has(name)) {
-            continue;
-        }
-        remotionImport.specifiers = (_b = remotionImport.specifiers) !== null && _b !== void 0 ? _b : [];
-        remotionImport.specifiers.push(b.importSpecifier(b.identifier(name)));
-        existingNames.add(name);
-    }
+    (0, imports_1.ensureNamedImports)({ ast, importedNames: names, sourcePath: 'remotion' });
 };
 exports.ensureRemotionImports = ensureRemotionImports;
-const componentBodyHasFrameDeclaration = (body) => {
+const componentBodyHasFrameDeclaration = ({ body, hookName, }) => {
     if (!n.BlockStatement.check(body)) {
         return false;
     }
@@ -123,14 +75,14 @@ const componentBodyHasFrameDeclaration = (body) => {
                 decl.init &&
                 decl.init.type === 'CallExpression' &&
                 decl.init.callee.type === 'Identifier' &&
-                decl.init.callee.name === 'useCurrentFrame') {
+                decl.init.callee.name === hookName) {
                 return true;
             }
         }
     }
     return false;
 };
-const ensureUseCurrentFrameHook = (functionPath) => {
+const ensureUseCurrentFrameHook = (functionPath, hookName = 'useCurrentFrame') => {
     const fn = functionPath.value;
     if (!n.BlockStatement.check(fn.body)) {
         // Arrow function with expression body: wrap the expression in a block so
@@ -140,12 +92,12 @@ const ensureUseCurrentFrameHook = (functionPath) => {
             b.returnStatement(expression),
         ]);
     }
-    if (componentBodyHasFrameDeclaration(fn.body)) {
+    if (componentBodyHasFrameDeclaration({ body: fn.body, hookName })) {
         return;
     }
     const block = fn.body;
     const frameDecl = b.variableDeclaration('const', [
-        b.variableDeclarator(b.identifier('frame'), b.callExpression(b.identifier('useCurrentFrame'), [])),
+        b.variableDeclarator(b.identifier('frame'), b.callExpression(b.identifier(hookName), [])),
     ]);
     block.body.unshift(frameDecl);
 };

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

@@ -1,4 +1,5 @@
-import type { SequenceNodePath } from 'remotion';
+import { type KeyframeInterpolationFunction } from '@remotion/studio-shared';
+import type { SequenceNodePath, SequenceSchema } from 'remotion';
 export type KeyframeOperation = {
     type: 'add';
     frame: number;
@@ -16,13 +17,14 @@ export type EffectKeyframeUpdate = {
     operation: KeyframeOperation;
 };
 export type IntroducedKeyframeIdentifiers = {
-    calleeName: 'interpolate' | 'interpolateColors' | null;
+    calleeName: KeyframeInterpolationFunction | null;
     needsFrameHook: boolean;
 };
-export declare const updateSequenceKeyframesAst: ({ input, nodePath, updates, }: {
+export declare const updateSequenceKeyframesAst: ({ input, nodePath, updates, schema, }: {
     input: string;
     nodePath: SequenceNodePath;
     updates: SequenceKeyframeUpdate[];
+    schema?: SequenceSchema | undefined;
 }) => {
     serialized: string;
     oldValueStrings: string[];
@@ -30,10 +32,11 @@ export declare const updateSequenceKeyframesAst: ({ input, nodePath, updates, }:
     logLine: number;
     updatedNodePath: SequenceNodePath;
 };
-export declare const updateSequenceKeyframes: ({ input, nodePath, updates, prettierConfigOverride, }: {
+export declare const updateSequenceKeyframes: ({ input, nodePath, updates, schema, prettierConfigOverride, }: {
     input: string;
     nodePath: SequenceNodePath;
     updates: SequenceKeyframeUpdate[];
+    schema?: SequenceSchema | undefined;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;
@@ -43,11 +46,12 @@ export declare const updateSequenceKeyframes: ({ input, nodePath, updates, prett
     logLine: number;
     updatedNodePath: SequenceNodePath;
 }>;
-export declare const updateEffectKeyframesAst: ({ input, sequenceNodePath, effectIndex, updates, }: {
+export declare const updateEffectKeyframesAst: ({ input, sequenceNodePath, effectIndex, updates, schema, }: {
     input: string;
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     updates: EffectKeyframeUpdate[];
+    schema?: SequenceSchema | undefined;
 }) => {
     serialized: string;
     oldValueStrings: string[];
@@ -56,11 +60,12 @@ export declare const updateEffectKeyframesAst: ({ input, sequenceNodePath, effec
     effectCallee: string;
     updatedSequenceNodePath: SequenceNodePath;
 };
-export declare const updateEffectKeyframes: ({ input, sequenceNodePath, effectIndex, updates, prettierConfigOverride, }: {
+export declare const updateEffectKeyframes: ({ input, sequenceNodePath, effectIndex, updates, schema, prettierConfigOverride, }: {
     input: string;
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     updates: EffectKeyframeUpdate[];
+    schema?: SequenceSchema | undefined;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;