@remotion/studio-server 4.0.485 → 4.0.487

package/dist/codemods/duplicate-composition.js

@@ -94,6 +94,14 @@ const parseAndApplyCodemod = ({ input, codeMod, }) => {
             localName: codeMod.componentName,
         });
     }
+    if (codeMod.type === 'new-folder') {
+        (0, imports_1.ensureNamedImport)({
+            ast: newAst,
+            importedName: 'Folder',
+            sourcePath: 'remotion',
+            localName: 'Folder',
+        });
+    }
     const output = (0, parse_ast_1.serializeAst)(newAst);
     return { changesMade, newContents: output };
 };

package/dist/codemods/recast-mods.js

@@ -36,12 +36,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyCodemod = void 0;
 const recast = __importStar(require("recast"));
 const apply_visual_control_1 = require("./apply-visual-control");
+const delete_jsx_node_1 = require("./delete-jsx-node");
 const b = recast.types.builders;
 const applyCodemod = ({ file, codeMod, }) => {
     const changesMade = [];
     if (codeMod.type === 'apply-visual-control') {
         return (0, apply_visual_control_1.applyVisualControl)({ file, transformation: codeMod, changesMade });
     }
+    if (codeMod.type === 'move-composition-to-folder') {
+        return moveCompositionToFolder({
+            file,
+            transformation: codeMod,
+            changesMade,
+        });
+    }
     const body = file.program.body.map((node) => {
         return mapAll(node, codeMod, changesMade, null);
     });
@@ -104,6 +112,15 @@ const mapReturnStatement = (statement, transformation, changesMade, parentFolder
             argument: addNewCompositionToRootJsx(statement.argument, transformation, changesMade),
         };
     }
+    if (transformation.type === 'new-folder' &&
+        transformation.parentName === null &&
+        (statement.argument.type === 'JSXElement' ||
+            statement.argument.type === 'JSXFragment')) {
+        return {
+            ...statement,
+            argument: addNewFolderToRootJsx(statement.argument, transformation, changesMade),
+        };
+    }
     const replacement = transformLoneJsxElement(statement.argument, transformation, changesMade, parentFolderName);
     if (replacement !== null) {
         return { ...statement, argument: replacement };
@@ -177,6 +194,19 @@ const newCompositionElement = (transformation) => {
         children: [],
     };
 };
+const newFolderElement = (transformation) => {
+    return {
+        type: 'JSXElement',
+        openingElement: {
+            type: 'JSXOpeningElement',
+            name: jsxId('Folder'),
+            attributes: [jsxAttributeWithString('name', transformation.folderName)],
+            selfClosing: true,
+        },
+        closingElement: null,
+        children: [],
+    };
+};
 const addNewCompositionToRootJsx = (root, transformation, changesMade) => {
     if (changesMade.length > 0) {
         return root;
@@ -192,6 +222,21 @@ const addNewCompositionToRootJsx = (root, transformation, changesMade) => {
     }
     return wrapInJsxFragment([root, newCompositionElement(transformation)]);
 };
+const addNewFolderToRootJsx = (root, transformation, changesMade) => {
+    if (changesMade.length > 0) {
+        return root;
+    }
+    changesMade.push({
+        description: 'Added new folder',
+    });
+    if (root.type === 'JSXFragment') {
+        return {
+            ...root,
+            children: [...root.children, newFolderElement(transformation)],
+        };
+    }
+    return wrapInJsxFragment([root, newFolderElement(transformation)]);
+};
 const addNewCompositionToFolder = (folderElement, transformation, changesMade) => {
     var _a;
     if (changesMade.length > 0) {
@@ -216,6 +261,146 @@ const addNewCompositionToFolder = (folderElement, transformation, changesMade) =
         ],
     };
 };
+const addNewFolderToFolder = (folderElement, transformation, changesMade) => {
+    var _a;
+    if (changesMade.length > 0) {
+        return folderElement;
+    }
+    changesMade.push({
+        description: 'Added new folder',
+    });
+    return {
+        ...folderElement,
+        openingElement: {
+            ...folderElement.openingElement,
+            selfClosing: false,
+        },
+        closingElement: (_a = folderElement.closingElement) !== null && _a !== void 0 ? _a : {
+            type: 'JSXClosingElement',
+            name: folderElement.openingElement.name,
+        },
+        children: [...folderElement.children, newFolderElement(transformation)],
+    };
+};
+const getChildFolderParentName = ({ folderName, parentFolderName, }) => {
+    return [parentFolderName, folderName].filter(Boolean).join('/');
+};
+const appendCompositionToFolder = ({ compositionElement, folderElement, }) => {
+    var _a;
+    folderElement.openingElement.selfClosing = false;
+    folderElement.closingElement = (_a = folderElement.closingElement) !== null && _a !== void 0 ? _a : {
+        type: 'JSXClosingElement',
+        name: folderElement.openingElement.name,
+    };
+    folderElement.children.push(stripParenthesizedExtra(compositionElement));
+};
+const appendCompositionToRoot = ({ compositionElement, file, }) => {
+    let appended = false;
+    recast.types.visit(file, {
+        visitReturnStatement(astPath) {
+            if (appended) {
+                return false;
+            }
+            const { argument } = astPath.node;
+            if ((argument === null || argument === void 0 ? void 0 : argument.type) !== 'JSXFragment' && (argument === null || argument === void 0 ? void 0 : argument.type) !== 'JSXElement') {
+                this.traverse(astPath);
+                return undefined;
+            }
+            if (argument.type === 'JSXFragment') {
+                argument.children.push(stripParenthesizedExtra(compositionElement));
+            }
+            else {
+                astPath.node.argument = wrapInJsxFragment([
+                    argument,
+                    compositionElement,
+                ]);
+            }
+            appended = true;
+            return false;
+        },
+    });
+    if (!appended) {
+        throw new Error('Could not find a root JSX element');
+    }
+};
+const moveCompositionToFolder = ({ file, transformation, changesMade, }) => {
+    let sourcePath = null;
+    let sourceParentFolderName = null;
+    let sourceIsDirectJsxChild = false;
+    let targetFolder = null;
+    const folderStack = [];
+    const isDirectJsxChild = (astPath) => {
+        var _a;
+        const parent = (_a = astPath.parentPath) === null || _a === void 0 ? void 0 : _a.node;
+        return (((parent === null || parent === void 0 ? void 0 : parent.type) === 'JSXElement' || (parent === null || parent === void 0 ? void 0 : parent.type) === 'JSXFragment') &&
+            parent.children.includes(astPath.node));
+    };
+    const visitJsxElementWithFolderContext = (astPath) => {
+        const node = astPath.node;
+        const compositionId = getCompositionIdFromJSXElement(node);
+        if (compositionId === transformation.idToMove) {
+            sourcePath = astPath;
+            sourceParentFolderName = folderStack.join('/') || null;
+            sourceIsDirectJsxChild = isDirectJsxChild(astPath);
+        }
+        const folderName = getFolderNameFromJSXElement(node);
+        const parentName = folderStack.join('/') || null;
+        if (transformation.folderName !== null &&
+            folderName === transformation.folderName &&
+            parentName === transformation.parentName) {
+            targetFolder = node;
+        }
+        if (folderName) {
+            folderStack.push(folderName);
+        }
+        for (let i = 0; i < node.children.length; i++) {
+            if (node.children[i].type !== 'JSXElement') {
+                continue;
+            }
+            visitJsxElementWithFolderContext(astPath.get('children', i));
+        }
+        if (folderName) {
+            folderStack.pop();
+        }
+    };
+    recast.types.visit(file, {
+        visitJSXElement(astPath) {
+            visitJsxElementWithFolderContext(astPath);
+            return false;
+        },
+    });
+    if (!sourcePath) {
+        throw new Error(`Could not find composition "${transformation.idToMove}"`);
+    }
+    if (!sourceIsDirectJsxChild) {
+        throw new Error(`Cannot move composition "${transformation.idToMove}" because it is not a direct JSX child`);
+    }
+    if (transformation.folderName === null && sourceParentFolderName === null) {
+        return { newAst: file, changesMade };
+    }
+    if (transformation.folderName !== null && !targetFolder) {
+        const folderLabel = `${transformation.parentName ? `${transformation.parentName}/` : ''}${transformation.folderName}`;
+        throw new Error(`Could not find folder "${folderLabel}"`);
+    }
+    const compositionElement = sourcePath
+        .node;
+    (0, delete_jsx_node_1.deleteJsxElementAtPath)(sourcePath);
+    if (transformation.folderName === null) {
+        appendCompositionToRoot({ compositionElement, file });
+        changesMade.push({ description: 'Moved composition to root' });
+    }
+    else {
+        if (targetFolder === null) {
+            throw new Error('Could not find target folder');
+        }
+        appendCompositionToFolder({
+            compositionElement,
+            folderElement: targetFolder,
+        });
+        changesMade.push({ description: 'Moved composition into folder' });
+    }
+    return { newAst: file, changesMade };
+};
 // 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),
@@ -237,7 +422,10 @@ const transformLoneJsxElement = (expression, transformation, changesMade, parent
                     parentFolderName === transformation.parentName) ||
                 (transformation.type === 'new-composition' &&
                     folderName === transformation.folderName &&
-                    parentFolderName === transformation.parentName));
+                    parentFolderName === transformation.parentName) ||
+                (transformation.type === 'new-folder' &&
+                    getChildFolderParentName({ folderName, parentFolderName }) ===
+                        transformation.parentName));
         if (!isFolderMatch) {
             return null;
         }
@@ -256,7 +444,11 @@ const transformLoneJsxElement = (expression, transformation, changesMade, parent
             parentFolderName === transformation.parentName) ||
         (transformation.type === 'new-composition' &&
             folderName === transformation.folderName &&
-            parentFolderName === transformation.parentName);
+            parentFolderName === transformation.parentName) ||
+        (transformation.type === 'new-folder' &&
+            folderName !== null &&
+            getChildFolderParentName({ folderName, parentFolderName }) ===
+                transformation.parentName);
     if (!isMatch) {
         return null;
     }
@@ -283,9 +475,6 @@ const mapJsxElementOrFragment = (jsxFragment, transformation, changesMade, paren
             .flat(1),
     };
 };
-const getChildFolderParentName = ({ folderName, parentFolderName, }) => {
-    return [parentFolderName, folderName].filter(Boolean).join('/');
-};
 const mapJsxChild = (c, transformation, changesMade, parentFolderName) => {
     const compId = getCompositionIdFromJSXElement(c);
     const folderName = getFolderNameFromJSXElement(c);
@@ -354,6 +543,12 @@ const mapJsxChild = (c, transformation, changesMade, parentFolderName) => {
         parentFolderName === transformation.parentName) {
         return [addNewCompositionToFolder(c, transformation, changesMade)];
     }
+    if (transformation.type === 'new-folder' &&
+        folderName !== null &&
+        getChildFolderParentName({ folderName, parentFolderName }) ===
+            transformation.parentName) {
+        return [addNewFolderToFolder(c, transformation, changesMade)];
+    }
     const childParentFolderName = folderName
         ? getChildFolderParentName({ folderName, parentFolderName })
         : parentFolderName;
@@ -374,6 +569,15 @@ const mapRecognizedType = (expression, transformation, changesMade, parentFolder
                 body: addNewCompositionToRootJsx(expression.body, transformation, changesMade),
             };
         }
+        if (transformation.type === 'new-folder' &&
+            transformation.parentName === null &&
+            (expression.body.type === 'JSXElement' ||
+                expression.body.type === 'JSXFragment')) {
+            return {
+                ...expression,
+                body: addNewFolderToRootJsx(expression.body, transformation, changesMade),
+            };
+        }
         if (expression.type === 'ArrowFunctionExpression' &&
             expression.body.type === 'JSXElement') {
             const replacement = transformLoneJsxElement(expression.body, transformation, changesMade, parentFolderName);

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

@@ -37,6 +37,7 @@ exports.updateEffectKeyframes = exports.updateEffectKeyframesAst = exports.updat
 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 parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
 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");
@@ -225,55 +226,7 @@ const setOptionsProperty = ({ options, propertyName, value, }) => {
     options.properties.push(b.objectProperty(b.identifier(propertyName), value));
 };
 const isLinearEasing = (easing) => easing.type === 'linear';
-const getKeyframeEasing = (node) => {
-    if (node.type === 'TSAsExpression') {
-        return getKeyframeEasing(node.expression);
-    }
-    if (node.type === 'MemberExpression' &&
-        node.object.type === 'Identifier' &&
-        node.object.name === 'Easing' &&
-        node.property.type === 'Identifier' &&
-        node.property.name === 'linear' &&
-        node.computed === false) {
-        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.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) => {
-        if (arg.type === 'ArgumentPlaceholder' ||
-            arg.type === 'JSXNamespacedName' ||
-            arg.type === 'SpreadElement') {
-            return null;
-        }
-        return getNumericValue(arg);
-    });
-    if (values.some((value) => value === null)) {
-        return null;
-    }
-    const [x1, y1, x2, y2] = values;
-    return { type: 'bezier', x1, y1, x2, y2 };
-};
+const getKeyframeEasing = (node) => (0, parse_keyframe_easing_expression_1.parseKeyframeEasingExpression)(node);
 const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
     if (segmentCount === 0) {
         return [];

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

@@ -1,8 +1,10 @@
+import type { GoogleFontSourceEdit } from '@remotion/studio-shared';
 import type { InteractivitySchema, SequenceNodePath } from 'remotion';
 export type SequencePropUpdate = {
     key: string;
     value: unknown;
     defaultValue: unknown | null;
+    googleFont?: GoogleFontSourceEdit | null;
 };
 export type RemovedProp = {
     key: string;