@remotion/studio-server 4.0.484 → 4.0.486

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);
     });
@@ -96,6 +104,7 @@ const mapReturnStatement = (statement, transformation, changesMade, parentFolder
         return statement;
     }
     if (transformation.type === 'new-composition' &&
+        transformation.folderName === null &&
         (statement.argument.type === 'JSXElement' ||
             statement.argument.type === 'JSXFragment')) {
         return {
@@ -103,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 };
@@ -176,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;
@@ -191,6 +222,185 @@ 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) {
+        return folderElement;
+    }
+    changesMade.push({
+        description: 'Added new composition',
+    });
+    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,
+            newCompositionElement(transformation),
+        ],
+    };
+};
+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),
@@ -209,7 +419,13 @@ const transformLoneJsxElement = (expression, transformation, changesMade, parent
                 parentFolderName === transformation.parentName) ||
                 (transformation.type === 'rename-folder' &&
                     folderName === transformation.folderName &&
-                    parentFolderName === transformation.parentName));
+                    parentFolderName === transformation.parentName) ||
+                (transformation.type === 'new-composition' &&
+                    folderName === transformation.folderName &&
+                    parentFolderName === transformation.parentName) ||
+                (transformation.type === 'new-folder' &&
+                    getChildFolderParentName({ folderName, parentFolderName }) ===
+                        transformation.parentName));
         if (!isFolderMatch) {
             return null;
         }
@@ -225,7 +441,14 @@ const transformLoneJsxElement = (expression, transformation, changesMade, parent
             parentFolderName === transformation.parentName) ||
         (transformation.type === 'rename-folder' &&
             folderName === transformation.folderName &&
-            parentFolderName === transformation.parentName);
+            parentFolderName === transformation.parentName) ||
+        (transformation.type === 'new-composition' &&
+            folderName === transformation.folderName &&
+            parentFolderName === transformation.parentName) ||
+        (transformation.type === 'new-folder' &&
+            folderName !== null &&
+            getChildFolderParentName({ folderName, parentFolderName }) ===
+                transformation.parentName);
     if (!isMatch) {
         return null;
     }
@@ -252,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);
@@ -318,6 +538,17 @@ const mapJsxChild = (c, transformation, changesMade, parentFolderName) => {
         });
         return c.children;
     }
+    if (transformation.type === 'new-composition' &&
+        folderName === transformation.folderName &&
+        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;
@@ -330,6 +561,7 @@ const mapRecognizedType = (expression, transformation, changesMade, parentFolder
     if (expression.type === 'ArrowFunctionExpression' ||
         expression.type === 'FunctionExpression') {
         if (transformation.type === 'new-composition' &&
+            transformation.folderName === null &&
             (expression.body.type === 'JSXElement' ||
                 expression.body.type === 'JSXFragment')) {
             return {
@@ -337,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/split-jsx-sequence.d.ts

@@ -0,0 +1,14 @@
+import type { SequenceNodePath } from 'remotion';
+export declare const getSplitUnsupportedSequenceTagReason: (tagName: string) => string | null;
+export declare const getIsSplittableSequenceTag: (tagName: string) => boolean;
+export declare const splitJsxSequence: ({ input, nodePath, splitFrame, prettierConfigOverride, }: {
+    input: string;
+    nodePath: SequenceNodePath;
+    splitFrame: number;
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    formatted: boolean;
+    nodeLabel: string;
+    logLine: number;
+}>;