@remotion/studio-server 4.0.484 → 4.0.486

package/dist/codemods/update-sequence-props/update-sequence-props.js

@@ -85,9 +85,396 @@ const snapshotTopLevelAttrs = (node) => {
     }
     return result;
 };
-const updateSequencePropsNode = ({ node, updates, schema, }) => {
+const escapeJsxText = (value) => {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/{/g, '&#123;')
+        .replace(/}/g, '&#125;');
+};
+const findChildrenAttribute = (node) => {
+    var _a;
+    return (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.find((attr) => {
+        return (attr.type === 'JSXAttribute' &&
+            attr.name.type === 'JSXIdentifier' &&
+            attr.name.name === 'children');
+    });
+};
+const updateJsxTextContent = ({ jsxElement, value, }) => {
+    const nextValue = String(value !== null && value !== void 0 ? value : '');
+    const staticChildrenAttribute = (0, can_update_sequence_props_1.getStaticJsxChildrenAttribute)(jsxElement.openingElement);
+    if (staticChildrenAttribute) {
+        const childrenAttribute = findChildrenAttribute(jsxElement.openingElement);
+        if (!childrenAttribute) {
+            throw new Error('Expected static children attribute to exist');
+        }
+        childrenAttribute.value = b.stringLiteral(nextValue);
+        return staticChildrenAttribute.value;
+    }
+    if ((0, can_update_sequence_props_1.hasJsxChildrenAttribute)(jsxElement.openingElement)) {
+        throw new Error('Cannot update text content because the children attribute is not static text');
+    }
+    const staticTextContent = (0, can_update_sequence_props_1.getStaticJsxTextContent)(jsxElement);
+    if (!staticTextContent) {
+        throw new Error('Cannot update text content because JSX children are not static text');
+    }
+    const canRepresentAsJsxText = staticTextContent.kind === 'jsx-text' &&
+        !nextValue.includes('\n') &&
+        nextValue.trim() === nextValue;
+    if (canRepresentAsJsxText) {
+        jsxElement.children = [
+            b.jsxText(escapeJsxText(nextValue)),
+        ];
+    }
+    else {
+        jsxElement.children = [
+            b.jsxExpressionContainer(b.stringLiteral(nextValue)),
+        ];
+    }
+    return staticTextContent.value;
+};
+const collectTopLevelIdentifierNames = (ast) => {
+    const names = new Set();
+    recast.types.visit(ast, {
+        visitIdentifier(path) {
+            names.add(path.node.name);
+            this.traverse(path);
+        },
+    });
+    return names;
+};
+const toSafeIdentifier = (value) => {
+    const sanitized = value.replace(/[^a-zA-Z0-9_$]/g, '');
+    if (!sanitized) {
+        return 'loadGoogleFont';
+    }
+    return /^[a-zA-Z_$]/.test(sanitized) ? sanitized : `_${sanitized}`;
+};
+const getSafeLoadFontIdentifier = ({ font, usedNames, }) => {
+    const baseName = toSafeIdentifier(`load${font.importName}`);
+    if (!usedNames.has(baseName)) {
+        usedNames.add(baseName);
+        return baseName;
+    }
+    let index = 2;
+    while (usedNames.has(`${baseName}${index}`)) {
+        index++;
+    }
+    const name = `${baseName}${index}`;
+    usedNames.add(name);
+    return name;
+};
+const getImportedLoadFontIdentifier = ({ ast, font, }) => {
+    var _a;
+    var _b, _c;
+    const moduleName = `@remotion/google-fonts/${font.importName}`;
+    for (const statement of ast.program.body) {
+        if (statement.type !== 'ImportDeclaration' ||
+            statement.source.value !== moduleName) {
+            continue;
+        }
+        for (const specifier of (_b = statement.specifiers) !== null && _b !== void 0 ? _b : []) {
+            if (specifier.type === 'ImportSpecifier' &&
+                specifier.imported.type === 'Identifier' &&
+                specifier.imported.name === 'loadFont') {
+                return (_c = (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _c !== void 0 ? _c : 'loadFont';
+            }
+        }
+    }
+    return null;
+};
+const getInsertIndexAfterImportsOrDirectives = (ast) => {
+    const lastImportIndex = ast.program.body.reduce((lastIndex, statement, index) => {
+        return statement.type === 'ImportDeclaration' ? index : lastIndex;
+    }, -1);
+    if (lastImportIndex !== -1) {
+        return lastImportIndex + 1;
+    }
+    return ast.program.body.findIndex((statement) => {
+        return !(statement.type === 'ExpressionStatement' &&
+            'directive' in statement &&
+            statement.directive);
+    });
+};
+const insertAfterImportsOrDirectives = (ast, statement) => {
+    const insertIndex = getInsertIndexAfterImportsOrDirectives(ast);
+    ast.program.body.splice(insertIndex === -1 ? ast.program.body.length : insertIndex, 0, statement);
+};
+const ensureLoadFontImport = ({ ast, font, usedNames, }) => {
+    var _a;
+    var _b;
+    const existing = getImportedLoadFontIdentifier({ ast, font });
+    if (existing) {
+        return existing;
+    }
+    const moduleName = `@remotion/google-fonts/${font.importName}`;
+    const localName = getSafeLoadFontIdentifier({ font, usedNames });
+    const specifier = b.importSpecifier(b.identifier('loadFont'), b.identifier(localName));
+    for (const statement of ast.program.body) {
+        if (statement.type === 'ImportDeclaration' &&
+            statement.source.value === moduleName &&
+            !((_a = statement.specifiers) === null || _a === void 0 ? void 0 : _a.some((existingSpecifier) => existingSpecifier.type === 'ImportNamespaceSpecifier'))) {
+            statement.specifiers = [
+                ...((_b = statement.specifiers) !== null && _b !== void 0 ? _b : []),
+                specifier,
+            ];
+            return localName;
+        }
+    }
+    const declaration = b.importDeclaration([specifier], b.stringLiteral(moduleName));
+    insertAfterImportsOrDirectives(ast, declaration);
+    return localName;
+};
+const getStringArrayObjectProperty = ({ node, key, }) => {
+    if (node.type !== 'ObjectExpression') {
+        return null;
+    }
+    const property = node.properties.find((prop) => {
+        return (prop.type === 'ObjectProperty' &&
+            prop.key.type === 'Identifier' &&
+            prop.key.name === key);
+    });
+    if (!property || property.type !== 'ObjectProperty') {
+        return null;
+    }
+    if (property.value.type !== 'ArrayExpression') {
+        return null;
+    }
+    const values = [];
+    for (const element of property.value.elements) {
+        if (!element || element.type !== 'StringLiteral') {
+            return null;
+        }
+        values.push(element.value);
+    }
+    return values;
+};
+const arraysEqual = (a, bValues) => {
+    return (a.length === bValues.length &&
+        a.every((value, index) => value === bValues[index]));
+};
+const isMatchingLoadFontCall = ({ statement, localName, font, }) => {
+    if (statement.type !== 'ExpressionStatement' ||
+        statement.expression.type !== 'CallExpression' ||
+        statement.expression.callee.type !== 'Identifier' ||
+        statement.expression.callee.name !== localName) {
+        return false;
+    }
+    const [style, options] = statement.expression.arguments;
+    if ((style === null || style === void 0 ? void 0 : style.type) !== 'StringLiteral' || style.value !== font.style) {
+        return false;
+    }
+    if (!options || options.type !== 'ObjectExpression') {
+        return false;
+    }
+    const weights = getStringArrayObjectProperty({ node: options, key: 'weights' });
+    const subsets = getStringArrayObjectProperty({ node: options, key: 'subsets' });
+    return (weights !== null &&
+        subsets !== null &&
+        arraysEqual(weights, font.weights) &&
+        arraysEqual(subsets, font.subsets));
+};
+const hasTopLevelLoadFontCall = ({ ast, localName, font, }) => {
+    return ast.program.body.some((statement) => {
+        return isMatchingLoadFontCall({ statement, localName, font });
+    });
+};
+const getGoogleFontImportName = (moduleName) => {
+    const prefix = '@remotion/google-fonts/';
+    return moduleName.startsWith(prefix) ? moduleName.slice(prefix.length) : null;
+};
+const normalizeFontFamilyName = (fontFamily) => {
+    return fontFamily.toLowerCase().replace(/[^a-z0-9]/g, '');
+};
+const getPrimaryFontFamilyName = (fontFamily) => {
+    const trimmed = fontFamily.trim();
+    if (!trimmed) {
+        return null;
+    }
+    const quote = trimmed[0];
+    if (quote === '"' || quote === "'") {
+        const closingQuote = trimmed.indexOf(quote, 1);
+        return closingQuote === -1
+            ? trimmed.slice(1)
+            : trimmed.slice(1, closingQuote);
+    }
+    return trimmed.split(',')[0].trim();
+};
+const collectUsedFontFamilyNames = (ast) => {
+    const used = new Set();
+    const add = (fontFamily) => {
+        const primary = getPrimaryFontFamilyName(fontFamily);
+        if (primary) {
+            used.add(normalizeFontFamilyName(primary));
+        }
+    };
+    recast.types.visit(ast, {
+        visitObjectProperty(path) {
+            var _a;
+            const { node } = path;
+            if (node.key.type === 'Identifier' && node.key.name === 'fontFamily') {
+                if (node.value.type === 'StringLiteral') {
+                    add(node.value.value);
+                }
+                if (node.value.type === 'TemplateLiteral' &&
+                    node.value.expressions.length === 0 &&
+                    node.value.quasis.length === 1) {
+                    add((_a = node.value.quasis[0].value.cooked) !== null && _a !== void 0 ? _a : node.value.quasis[0].value.raw);
+                }
+            }
+            this.traverse(path);
+        },
+        visitJSXAttribute(path) {
+            var _a;
+            const { node } = path;
+            if (node.name.type === 'JSXIdentifier' &&
+                node.name.name === 'fontFamily' &&
+                ((_a = node.value) === null || _a === void 0 ? void 0 : _a.type) === 'StringLiteral') {
+                add(node.value.value);
+            }
+            this.traverse(path);
+        },
+    });
+    return used;
+};
+const isIdentifierImportedBySpecifier = ({ parent, name, }) => {
+    return (parent !== null &&
+        typeof parent === 'object' &&
+        'type' in parent &&
+        parent.type === 'ImportSpecifier' &&
+        'local' in parent &&
+        parent.local !== null &&
+        typeof parent.local === 'object' &&
+        'type' in parent.local &&
+        parent.local.type === 'Identifier' &&
+        'name' in parent.local &&
+        parent.local.name === name);
+};
+const hasNonImportIdentifierReference = ({ ast, name, }) => {
+    let hasReference = false;
+    recast.types.visit(ast, {
+        visitIdentifier(path) {
+            if (path.node.name !== name) {
+                this.traverse(path);
+                return;
+            }
+            if (isIdentifierImportedBySpecifier({ parent: path.parent.node, name })) {
+                this.traverse(path);
+                return;
+            }
+            hasReference = true;
+            return false;
+        },
+    });
+    return hasReference;
+};
+const googleFontLoadingComment = 'Remotion Studio generated Google Font loading';
+const hasStudioGeneratedGoogleFontLoadingComment = (statement) => {
+    var _a;
+    return ((_a = statement.leadingComments) !== null && _a !== void 0 ? _a : []).some((comment) => comment.value.includes(googleFontLoadingComment));
+};
+const isTopLevelCallToIdentifier = ({ statement, localName, }) => {
+    return (statement.type === 'ExpressionStatement' &&
+        statement.expression.type === 'CallExpression' &&
+        statement.expression.callee.type === 'Identifier' &&
+        statement.expression.callee.name === localName);
+};
+const removeUnusedGoogleFontSourceEdits = (ast) => {
+    var _a;
+    var _b, _c;
+    const usedFonts = collectUsedFontFamilyNames(ast);
+    const loadFontLocalNamesToRemove = new Set();
+    for (const statement of ast.program.body) {
+        if (statement.type !== 'ImportDeclaration' ||
+            typeof statement.source.value !== 'string') {
+            continue;
+        }
+        const importName = getGoogleFontImportName(statement.source.value);
+        if (!importName) {
+            continue;
+        }
+        if (usedFonts.has(normalizeFontFamilyName(importName))) {
+            continue;
+        }
+        for (const specifier of (_b = statement.specifiers) !== null && _b !== void 0 ? _b : []) {
+            if (specifier.type === 'ImportSpecifier' &&
+                specifier.imported.type === 'Identifier' &&
+                specifier.imported.name === 'loadFont') {
+                loadFontLocalNamesToRemove.add((_c = (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _c !== void 0 ? _c : 'loadFont');
+            }
+        }
+    }
+    if (loadFontLocalNamesToRemove.size === 0) {
+        return;
+    }
+    ast.program.body = ast.program.body.filter((statement) => {
+        for (const localName of loadFontLocalNamesToRemove) {
+            if (isTopLevelCallToIdentifier({ statement, localName }) &&
+                hasStudioGeneratedGoogleFontLoadingComment(statement)) {
+                return false;
+            }
+        }
+        return true;
+    });
+    ast.program.body = ast.program.body.filter((statement) => {
+        var _a;
+        if (statement.type !== 'ImportDeclaration') {
+            return true;
+        }
+        statement.specifiers = ((_a = statement.specifiers) !== null && _a !== void 0 ? _a : []).filter((specifier) => {
+            var _a, _b;
+            var _c, _d;
+            return !(specifier.type === 'ImportSpecifier' &&
+                specifier.imported.type === 'Identifier' &&
+                specifier.imported.name === 'loadFont' &&
+                loadFontLocalNamesToRemove.has((_c = (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _c !== void 0 ? _c : 'loadFont') &&
+                !hasNonImportIdentifierReference({
+                    ast,
+                    name: (_d = (_b = specifier.local) === null || _b === void 0 ? void 0 : _b.name) !== null && _d !== void 0 ? _d : 'loadFont',
+                }));
+        });
+        return statement.specifiers.length > 0;
+    });
+};
+const insertLoadFontCall = ({ ast, font, localName, }) => {
+    if (hasTopLevelLoadFontCall({ ast, localName, font })) {
+        return;
+    }
+    const call = b.expressionStatement(b.callExpression(b.identifier(localName), [
+        b.stringLiteral(font.style),
+        b.objectExpression([
+            b.objectProperty(b.identifier('weights'), b.arrayExpression(font.weights.map((weight) => b.stringLiteral(weight)))),
+            b.objectProperty(b.identifier('subsets'), b.arrayExpression(font.subsets.map((subset) => b.stringLiteral(subset)))),
+        ]),
+    ]));
+    call.comments = [b.commentLine(` ${googleFontLoadingComment}`)];
+    insertAfterImportsOrDirectives(ast, call);
+};
+const applyGoogleFontSourceEdits = ({ ast, updates, }) => {
+    const fonts = new Map();
+    let hasFontFamilyUpdate = false;
+    for (const update of updates) {
+        if (update.key === 'style.fontFamily') {
+            hasFontFamilyUpdate = true;
+        }
+        if (update.googleFont) {
+            fonts.set(update.googleFont.importName, update.googleFont);
+        }
+    }
+    const usedNames = collectTopLevelIdentifierNames(ast);
+    for (const font of fonts.values()) {
+        const localName = ensureLoadFontImport({ ast, font, usedNames });
+        insertLoadFontCall({ ast, font, localName });
+    }
+    if (hasFontFamilyUpdate) {
+        removeUnusedGoogleFontSourceEdits(ast);
+    }
+};
+const updateSequencePropsNode = ({ jsxElement, updates, schema, }) => {
     var _a, _b, _c;
     var _d, _e;
+    const node = jsxElement.openingElement;
     const logLine = (_d = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : 1;
     const oldValueStrings = [];
     const initialAttrs = snapshotTopLevelAttrs(node);
@@ -97,8 +484,14 @@ const updateSequencePropsNode = ({ node, updates, schema, }) => {
     }));
     for (const { key, value, defaultValue } of updates) {
         let oldValueString = '';
-        const isDefault = defaultValue !== null &&
-            JSON.stringify(value) === JSON.stringify(defaultValue);
+        if (key === 'children') {
+            oldValueString = updateJsxTextContent({ jsxElement, value });
+            oldValueStrings.push(oldValueString);
+            continue;
+        }
+        const isDefault = (defaultValue === null && value === undefined) ||
+            (defaultValue !== null &&
+                JSON.stringify(value) === JSON.stringify(defaultValue));
         const dotIndex = key.indexOf('.');
         const isNested = dotIndex !== -1;
         const parentKey = isNested ? key.slice(0, dotIndex) : key;
@@ -197,15 +590,16 @@ const updateSequencePropsNode = ({ node, updates, schema, }) => {
 };
 const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
     const ast = (0, parse_ast_1.parseAst)(input);
-    const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
-    if (!node) {
+    const jsxElement = (0, can_update_sequence_props_1.findJsxElementNodeAtNodePath)(ast, nodePath);
+    if (!jsxElement) {
         throw new Error('Could not find a JSX element at the specified line to update');
     }
     const { oldValueStrings, logLine, removedProps } = updateSequencePropsNode({
-        node,
+        jsxElement,
         updates,
         schema,
     });
+    applyGoogleFontSourceEdits({ ast, updates });
     return {
         serialized: (0, parse_ast_1.serializeAst)(ast),
         oldValueStrings,
@@ -216,13 +610,16 @@ const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
 exports.updateSequencePropsAst = updateSequencePropsAst;
 const updateMultipleSequenceProps = async ({ input, changes, prettierConfigOverride, }) => {
     const ast = (0, parse_ast_1.parseAst)(input);
+    const allUpdates = [];
     const results = changes.map(({ nodePath, updates, schema }) => {
-        const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
-        if (!node) {
+        const jsxElement = (0, can_update_sequence_props_1.findJsxElementNodeAtNodePath)(ast, nodePath);
+        if (!jsxElement) {
             throw new Error('Could not find a JSX element at the specified line to update');
         }
-        return updateSequencePropsNode({ node, updates, schema });
+        allUpdates.push(...updates);
+        return updateSequencePropsNode({ jsxElement, updates, schema });
     });
+    applyGoogleFontSourceEdits({ ast, updates: allUpdates });
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
         input: (0, parse_ast_1.serializeAst)(ast),
         prettierConfigOverride,

package/dist/helpers/import-agnostic-node-path.js

@@ -49,6 +49,26 @@ const getUseCurrentFrameLocalNames = (ast) => {
     }
     return names;
 };
+const getGoogleFontLoadFontLocalNames = (ast) => {
+    var _a;
+    var _b;
+    const names = new Set();
+    for (const statement of ast.program.body) {
+        if (statement.type !== 'ImportDeclaration' ||
+            typeof statement.source.value !== 'string' ||
+            !statement.source.value.startsWith('@remotion/google-fonts/')) {
+            continue;
+        }
+        for (const specifier of statement.specifiers) {
+            if (specifier.type === 'ImportSpecifier' &&
+                specifier.imported.type === 'Identifier' &&
+                specifier.imported.name === 'loadFont') {
+                names.add((_b = (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'loadFont');
+            }
+        }
+    }
+    return names;
+};
 const isUseCurrentFrameCall = (node, useCurrentFrameLocalNames) => {
     return ((node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' &&
         node.callee.type === 'Identifier' &&
@@ -63,13 +83,19 @@ const isUseCurrentFrameStatement = (node, useCurrentFrameLocalNames) => {
     }
     return isUseCurrentFrameCall(node.declarations[0].init, useCurrentFrameLocalNames);
 };
+const isGoogleFontLoadFontStatement = (node, googleFontLoadFontLocalNames) => {
+    return (node.type === 'ExpressionStatement' &&
+        node.expression.type === 'CallExpression' &&
+        node.expression.callee.type === 'Identifier' &&
+        googleFontLoadFontLocalNames.has(node.expression.callee.name));
+};
 const getIgnoredNodePredicate = (ast) => {
     const useCurrentFrameLocalNames = getUseCurrentFrameLocalNames(ast);
+    const googleFontLoadFontLocalNames = getGoogleFontLoadFontLocalNames(ast);
     return (node, { parent, property }) => {
-        if (parent.type === 'Program' &&
-            property === 'body' &&
-            node.type === 'ImportDeclaration') {
-            return true;
+        if (parent.type === 'Program' && property === 'body') {
+            return (node.type === 'ImportDeclaration' ||
+                isGoogleFontLoadFontStatement(node, googleFontLoadFontLocalNames));
         }
         if (parent.type === 'BlockStatement' && property === 'body') {
             return isUseCurrentFrameStatement(node, useCurrentFrameLocalNames);

package/dist/helpers/resolve-composition-component.d.ts

@@ -30,6 +30,7 @@ export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositi
             width: number;
             height: number;
         };
+        durationInFrames?: number | null | undefined;
         name: string | null;
         position: InsertableCompositionElementPosition | null;
     } | null | undefined;