@remotion/studio-server 4.0.464 → 4.0.466

package/dist/helpers/resolve-composition-component.js

@@ -0,0 +1,691 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveCompositionComponent = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const recast = __importStar(require("recast"));
+const parse_ast_1 = require("../codemods/parse-ast");
+const allowedFileExtensions = new Set(['.tsx', '.ts', '.jsx', '.js']);
+const extensionsToProbe = ['.tsx', '.ts', '.jsx', '.js'];
+const isInRemotionRoot = ({ remotionRoot, fileName, }) => {
+    const relativePath = node_path_1.default.relative(remotionRoot, fileName);
+    return !relativePath.startsWith('..') && !node_path_1.default.isAbsolute(relativePath);
+};
+const readSourceFile = ({ remotionRoot, fileName, }) => {
+    const resolved = node_path_1.default.resolve(remotionRoot, fileName);
+    if (!isInRemotionRoot({ remotionRoot, fileName: resolved })) {
+        throw new Error(`Not allowed to open ${fileName}`);
+    }
+    if (!allowedFileExtensions.has(node_path_1.default.extname(resolved))) {
+        throw new Error(`Not allowed to open ${fileName}`);
+    }
+    return node_fs_1.default.promises.readFile(resolved, 'utf-8');
+};
+const getAttributeName = (attribute) => {
+    if (attribute.name.type !== 'JSXIdentifier') {
+        return null;
+    }
+    return attribute.name.name;
+};
+const findAttribute = (element, name) => {
+    return element.openingElement.attributes.find((attribute) => {
+        if (attribute.type !== 'JSXAttribute') {
+            return false;
+        }
+        return getAttributeName(attribute) === name;
+    });
+};
+const getStringAttributeValue = (element, name) => {
+    const attribute = findAttribute(element, name);
+    if (!(attribute === null || attribute === void 0 ? void 0 : 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;
+};
+const findCompositionElement = ({ ast, compositionId, }) => {
+    let found = null;
+    recast.types.visit(ast, {
+        visitJSXElement(astPath) {
+            if (found) {
+                return false;
+            }
+            const node = astPath.node;
+            const openingName = node.openingElement.name;
+            if (openingName.type === 'JSXIdentifier' &&
+                (openingName.name === 'Composition' || openingName.name === 'Still') &&
+                getStringAttributeValue(node, 'id') === compositionId) {
+                found = node;
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+    });
+    return found;
+};
+const getComponentIdentifier = (element) => {
+    const attribute = findAttribute(element, 'component');
+    if (!(attribute === null || attribute === void 0 ? void 0 : attribute.value) ||
+        attribute.value.type !== 'JSXExpressionContainer' ||
+        attribute.value.expression.type !== 'Identifier') {
+        return null;
+    }
+    return attribute.value.expression.name;
+};
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null;
+};
+const findDynamicImportPath = (value) => {
+    if (!isRecord(value)) {
+        return null;
+    }
+    if (value.type === 'CallExpression' &&
+        isRecord(value.callee) &&
+        value.callee.type === 'Import' &&
+        Array.isArray(value.arguments) &&
+        isRecord(value.arguments[0]) &&
+        value.arguments[0].type === 'StringLiteral' &&
+        typeof value.arguments[0].value === 'string') {
+        return value.arguments[0].value;
+    }
+    for (const [key, child] of Object.entries(value)) {
+        if (key === 'loc' ||
+            key === 'start' ||
+            key === 'end' ||
+            key === 'comments' ||
+            key === 'leadingComments' ||
+            key === 'trailingComments' ||
+            key === 'innerComments' ||
+            key === 'extra' ||
+            key === 'original') {
+            continue;
+        }
+        if (Array.isArray(child)) {
+            for (const item of child) {
+                const nestedResult = findDynamicImportPath(item);
+                if (nestedResult) {
+                    return nestedResult;
+                }
+            }
+            continue;
+        }
+        const childResult = findDynamicImportPath(child);
+        if (childResult) {
+            return childResult;
+        }
+    }
+    return null;
+};
+const getLazyImportPath = (element) => {
+    const attribute = findAttribute(element, 'lazyComponent');
+    if (!(attribute === null || attribute === void 0 ? void 0 : attribute.value) || attribute.value.type !== 'JSXExpressionContainer') {
+        return null;
+    }
+    return findDynamicImportPath(attribute.value.expression);
+};
+const findImportTarget = ({ ast, componentName, }) => {
+    let found = null;
+    recast.types.visit(ast, {
+        visitImportDeclaration(astPath) {
+            var _a;
+            if (found) {
+                return false;
+            }
+            const node = astPath.node;
+            if (typeof node.source.value !== 'string') {
+                return false;
+            }
+            const matchingSpecifier = (_a = node.specifiers) === null || _a === void 0 ? void 0 : _a.find((specifier) => {
+                var _a;
+                return ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === componentName;
+            });
+            if (!matchingSpecifier) {
+                return false;
+            }
+            if (matchingSpecifier.type === 'ImportDefaultSpecifier') {
+                found = {
+                    importPath: node.source.value,
+                    exportName: 'default',
+                };
+                return false;
+            }
+            if (matchingSpecifier.type === 'ImportSpecifier' &&
+                matchingSpecifier.imported.type === 'Identifier') {
+                found = {
+                    importPath: node.source.value,
+                    exportName: matchingSpecifier.imported.name,
+                };
+                return false;
+            }
+            if (matchingSpecifier.type === 'ImportSpecifier' &&
+                matchingSpecifier.imported.type === 'StringLiteral') {
+                found = {
+                    importPath: node.source.value,
+                    exportName: matchingSpecifier.imported.value,
+                };
+                return false;
+            }
+            return false;
+        },
+    });
+    return found;
+};
+const getExportedName = (exported) => {
+    if (!exported) {
+        return null;
+    }
+    if (!isRecord(exported)) {
+        return null;
+    }
+    if (exported.type === 'Identifier' && typeof exported.name === 'string') {
+        return exported.name;
+    }
+    if (exported.type === 'StringLiteral' && typeof exported.value === 'string') {
+        return exported.value;
+    }
+    return null;
+};
+const getSpecifierLocalName = (specifier) => {
+    if (specifier.local.type === 'Identifier') {
+        return specifier.local.name;
+    }
+    return null;
+};
+const findReExportTargets = ({ ast, exportName, }) => {
+    const targets = [];
+    recast.types.visit(ast, {
+        visitExportNamedDeclaration(astPath) {
+            var _a;
+            const node = astPath.node;
+            if (typeof ((_a = node.source) === null || _a === void 0 ? void 0 : _a.value) !== 'string') {
+                return false;
+            }
+            for (const specifier of node.specifiers) {
+                if (specifier.type !== 'ExportSpecifier') {
+                    continue;
+                }
+                const exportedName = getExportedName(specifier.exported);
+                if (exportedName !== exportName) {
+                    continue;
+                }
+                const localName = getSpecifierLocalName(specifier);
+                if (!localName) {
+                    continue;
+                }
+                targets.push({
+                    importPath: node.source.value,
+                    exportName: localName === 'default' ? 'default' : localName,
+                });
+            }
+            return false;
+        },
+        visitExportAllDeclaration(astPath) {
+            const node = astPath.node;
+            if (typeof node.source.value !== 'string') {
+                return false;
+            }
+            targets.push({
+                importPath: node.source.value,
+                exportName,
+            });
+            return false;
+        },
+    });
+    return targets;
+};
+const resolveImportPath = ({ importPath, fromFile, }) => {
+    if (!importPath.startsWith('.')) {
+        throw new Error(`Cannot resolve non-relative import ${importPath}`);
+    }
+    const basePath = node_path_1.default.resolve(node_path_1.default.dirname(fromFile), importPath);
+    const candidates = node_path_1.default.extname(basePath)
+        ? [basePath]
+        : [
+            ...extensionsToProbe.map((extension) => `${basePath}${extension}`),
+            ...extensionsToProbe.map((extension) => node_path_1.default.join(basePath, `index${extension}`)),
+        ];
+    const existingFile = candidates.find((candidate) => {
+        return node_fs_1.default.existsSync(candidate) && node_fs_1.default.statSync(candidate).isFile();
+    });
+    if (!existingFile) {
+        throw new Error(`Could not find imported component file ${importPath}`);
+    }
+    return existingFile;
+};
+const locationFromNode = (node) => {
+    if (!node.loc) {
+        return null;
+    }
+    return {
+        line: node.loc.start.line,
+        column: node.loc.start.column,
+    };
+};
+const findLocalSymbolLocation = ({ ast, name, }) => {
+    let location = null;
+    recast.types.visit(ast, {
+        visitVariableDeclarator(astPath) {
+            if (location) {
+                return false;
+            }
+            const { node } = astPath;
+            if (node.id.type === 'Identifier' && node.id.name === name) {
+                location = locationFromNode(node);
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+        visitFunctionDeclaration(astPath) {
+            var _a;
+            if (location) {
+                return false;
+            }
+            const { node } = astPath;
+            if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
+                location = locationFromNode(node);
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+        visitClassDeclaration(astPath) {
+            var _a;
+            if (location) {
+                return false;
+            }
+            const { node } = astPath;
+            if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
+                location = locationFromNode(node);
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+    });
+    return location;
+};
+const findDefaultExportLocation = (ast) => {
+    let location = null;
+    let exportedIdentifier = null;
+    recast.types.visit(ast, {
+        visitExportDefaultDeclaration(astPath) {
+            var _a;
+            if (location || exportedIdentifier) {
+                return false;
+            }
+            const { node } = astPath;
+            if (node.declaration.type === 'Identifier') {
+                exportedIdentifier = node.declaration.name;
+                return false;
+            }
+            location = (_a = locationFromNode(node.declaration)) !== null && _a !== void 0 ? _a : locationFromNode(node);
+            return false;
+        },
+    });
+    if (exportedIdentifier) {
+        return findLocalSymbolLocation({ ast, name: exportedIdentifier });
+    }
+    return location;
+};
+const findLocalComponentDeclaration = ({ ast, name, }) => {
+    let declaration = null;
+    recast.types.visit(ast, {
+        visitVariableDeclarator(astPath) {
+            if (declaration) {
+                return false;
+            }
+            const { node } = astPath;
+            if (node.id.type === 'Identifier' && node.id.name === name) {
+                declaration = node;
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+        visitFunctionDeclaration(astPath) {
+            var _a;
+            if (declaration) {
+                return false;
+            }
+            const { node } = astPath;
+            if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
+                declaration = node;
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+        visitClassDeclaration(astPath) {
+            var _a;
+            if (declaration) {
+                return false;
+            }
+            const { node } = astPath;
+            if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
+                declaration = node;
+                return false;
+            }
+            this.traverse(astPath);
+            return undefined;
+        },
+    });
+    return declaration;
+};
+const getTopLevelReturnStatement = (statements) => {
+    const returnStatements = [];
+    for (const statement of statements) {
+        if (recast.types.namedTypes.ReturnStatement.check(statement)) {
+            returnStatements.push(statement);
+        }
+    }
+    if (returnStatements.length !== 1) {
+        return null;
+    }
+    const singleReturn = returnStatements[0];
+    const finalStatement = statements.at(-1);
+    if (singleReturn !== finalStatement) {
+        return null;
+    }
+    return singleReturn;
+};
+const getReturnedJsxFromFunction = (fn) => {
+    if (fn.type === 'ArrowFunctionExpression') {
+        if (fn.body.type === 'JSXElement' || fn.body.type === 'JSXFragment') {
+            return fn.body;
+        }
+        if (fn.body.type !== 'BlockStatement') {
+            return null;
+        }
+        const arrowReturnStatement = getTopLevelReturnStatement(fn.body.body);
+        if (!(arrowReturnStatement === null || arrowReturnStatement === void 0 ? void 0 : arrowReturnStatement.argument)) {
+            return null;
+        }
+        return arrowReturnStatement.argument.type === 'JSXElement' ||
+            arrowReturnStatement.argument.type === 'JSXFragment'
+            ? arrowReturnStatement.argument
+            : null;
+    }
+    if (fn.body.type !== 'BlockStatement') {
+        return null;
+    }
+    const returnStatement = getTopLevelReturnStatement(fn.body.body);
+    if (!(returnStatement === null || returnStatement === void 0 ? void 0 : returnStatement.argument)) {
+        return null;
+    }
+    return returnStatement.argument.type === 'JSXElement' ||
+        returnStatement.argument.type === 'JSXFragment'
+        ? returnStatement.argument
+        : null;
+};
+const findRenderMethod = (declaration) => {
+    const renderMethod = declaration.body.body.find((member) => {
+        return (member.type === 'ClassMethod' &&
+            member.kind === 'method' &&
+            member.key.type === 'Identifier' &&
+            member.key.name === 'render');
+    });
+    return (renderMethod === null || renderMethod === void 0 ? void 0 : renderMethod.type) === 'ClassMethod' ? renderMethod : null;
+};
+const getComponentRootNode = (declaration) => {
+    if (declaration.type === 'VariableDeclarator') {
+        if (!declaration.init ||
+            (declaration.init.type !== 'ArrowFunctionExpression' &&
+                declaration.init.type !== 'FunctionExpression')) {
+            return null;
+        }
+        return getReturnedJsxFromFunction(declaration.init);
+    }
+    if (declaration.type === 'ArrowFunctionExpression' ||
+        declaration.type === 'FunctionExpression' ||
+        declaration.type === 'FunctionDeclaration') {
+        return getReturnedJsxFromFunction(declaration);
+    }
+    if (declaration.type !== 'ClassDeclaration') {
+        return null;
+    }
+    const renderMethod = findRenderMethod(declaration);
+    if (!renderMethod) {
+        return null;
+    }
+    const returnStatement = getTopLevelReturnStatement(renderMethod.body.body);
+    if (!(returnStatement === null || returnStatement === void 0 ? void 0 : returnStatement.argument)) {
+        return null;
+    }
+    return returnStatement.argument.type === 'JSXElement' ||
+        returnStatement.argument.type === 'JSXFragment'
+        ? returnStatement.argument
+        : null;
+};
+const createSequenceElement = () => {
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier('Sequence'), []), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier('Sequence')), []);
+};
+const getDefaultExportDeclaration = (ast) => {
+    let declaration = null;
+    let identifierName = null;
+    recast.types.visit(ast, {
+        visitExportDefaultDeclaration(astPath) {
+            if (declaration || identifierName) {
+                return false;
+            }
+            const { node } = astPath;
+            if (node.declaration.type === 'Identifier') {
+                identifierName = node.declaration.name;
+                return false;
+            }
+            declaration = node.declaration;
+            return false;
+        },
+    });
+    if (identifierName) {
+        return findLocalComponentDeclaration({ ast, name: identifierName });
+    }
+    return declaration;
+};
+const getDeclarationByExportName = ({ ast, exportName, }) => {
+    if (exportName === 'default') {
+        return getDefaultExportDeclaration(ast);
+    }
+    return findLocalComponentDeclaration({ ast, name: exportName });
+};
+const canAddSequenceToComponent = ({ ast, exportName, }) => {
+    const declaration = getDeclarationByExportName({ ast, exportName });
+    if (!declaration) {
+        return false;
+    }
+    const rootNode = getComponentRootNode(declaration);
+    if (!rootNode) {
+        return false;
+    }
+    if (rootNode.type === 'JSXElement') {
+        if (rootNode.openingElement.selfClosing) {
+            return false;
+        }
+        if (!rootNode.children) {
+            return false;
+        }
+        rootNode.children.push(createSequenceElement());
+        try {
+            recast.print(ast);
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    if (!rootNode.children) {
+        return false;
+    }
+    rootNode.children.push(createSequenceElement());
+    try {
+        recast.print(ast);
+        return true;
+    }
+    catch (_b) {
+        return false;
+    }
+};
+const getComponentLocationInFile = async ({ remotionRoot, fileName, exportName, }) => {
+    var _a, _b;
+    const input = await readSourceFile({ remotionRoot, fileName });
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const astForSequenceSimulation = (0, parse_ast_1.parseAst)(input);
+    const location = exportName === 'default'
+        ? findDefaultExportLocation(ast)
+        : findLocalSymbolLocation({ ast, name: exportName });
+    const canAddSequence = canAddSequenceToComponent({
+        ast: astForSequenceSimulation,
+        exportName,
+    });
+    return {
+        source: node_path_1.default.relative(remotionRoot, fileName),
+        line: (_a = location === null || location === void 0 ? void 0 : location.line) !== null && _a !== void 0 ? _a : 1,
+        column: (_b = location === null || location === void 0 ? void 0 : location.column) !== null && _b !== void 0 ? _b : 0,
+        canAddSequence,
+    };
+};
+const getComponentLocationRecursively = async ({ remotionRoot, fileName, exportName, visited, }) => {
+    const key = `${fileName}:${exportName}`;
+    if (visited.has(key)) {
+        throw new Error(`Could not resolve component export "${exportName}" in ${node_path_1.default.relative(remotionRoot, fileName)}`);
+    }
+    visited.add(key);
+    try {
+        const input = await readSourceFile({ remotionRoot, fileName });
+        const ast = (0, parse_ast_1.parseAst)(input);
+        const localDeclaration = getDeclarationByExportName({
+            ast,
+            exportName,
+        });
+        if (localDeclaration) {
+            return await getComponentLocationInFile({
+                remotionRoot,
+                fileName,
+                exportName,
+            });
+        }
+        const reExportTargets = findReExportTargets({
+            ast,
+            exportName,
+        });
+        for (const target of reExportTargets) {
+            try {
+                const resolvedImportPath = resolveImportPath({
+                    importPath: target.importPath,
+                    fromFile: fileName,
+                });
+                return await getComponentLocationRecursively({
+                    remotionRoot,
+                    fileName: resolvedImportPath,
+                    exportName: target.exportName,
+                    visited,
+                });
+            }
+            catch (_a) {
+                continue;
+            }
+        }
+        if (reExportTargets.length > 0) {
+            throw new Error(`Could not resolve component export "${exportName}" in ${node_path_1.default.relative(remotionRoot, fileName)}`);
+        }
+        return await getComponentLocationInFile({
+            remotionRoot,
+            fileName,
+            exportName,
+        });
+    }
+    finally {
+        visited.delete(key);
+    }
+};
+const resolveCompositionComponent = async ({ remotionRoot, compositionFile, compositionId, }) => {
+    const compositionFileName = node_path_1.default.resolve(remotionRoot, compositionFile);
+    const input = await readSourceFile({
+        remotionRoot,
+        fileName: compositionFileName,
+    });
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const compositionElement = findCompositionElement({ ast, compositionId });
+    if (!compositionElement) {
+        throw new Error(`Could not find composition "${compositionId}"`);
+    }
+    const lazyImportPath = getLazyImportPath(compositionElement);
+    if (lazyImportPath) {
+        const lazyComponentFile = resolveImportPath({
+            importPath: lazyImportPath,
+            fromFile: compositionFileName,
+        });
+        return getComponentLocationRecursively({
+            remotionRoot,
+            fileName: lazyComponentFile,
+            exportName: 'default',
+            visited: new Set(),
+        });
+    }
+    const componentName = getComponentIdentifier(compositionElement);
+    if (!componentName) {
+        throw new Error(`Could not find a component prop for composition "${compositionId}"`);
+    }
+    const importTarget = findImportTarget({ ast, componentName });
+    if (!importTarget) {
+        return getComponentLocationInFile({
+            remotionRoot,
+            fileName: compositionFileName,
+            exportName: componentName,
+        });
+    }
+    const importedComponentFile = resolveImportPath({
+        importPath: importTarget.importPath,
+        fromFile: compositionFileName,
+    });
+    return getComponentLocationRecursively({
+        remotionRoot,
+        fileName: importedComponentFile,
+        exportName: importTarget.exportName,
+        visited: new Set(),
+    });
+};
+exports.resolveCompositionComponent = resolveCompositionComponent;

package/dist/index.d.ts

@@ -80,6 +80,10 @@ export declare const StudioServerInternals: {
         newContents: string;
         changesMade: import("./codemods/recast-mods").Change[];
     };
+    applyCodemodToFile: ({ filePath, codeMod, }: {
+        filePath: string;
+        codeMod: import("@remotion/studio-shared").RecastCodemod;
+    }) => Promise<string>;
     formatOutput: (tsContent: string) => Promise<string>;
     updateDefaultProps: ({ input, compositionId, newDefaultProps, enumPaths, }: {
         input: string;