@remotion/studio-server 4.0.485 → 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);
     });
@@ -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-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;

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

@@ -134,6 +134,343 @@ const updateJsxTextContent = ({ jsxElement, value, }) => {
     }
     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;
@@ -152,8 +489,9 @@ const updateSequencePropsNode = ({ jsxElement, updates, schema, }) => {
             oldValueStrings.push(oldValueString);
             continue;
         }
-        const isDefault = defaultValue !== null &&
-            JSON.stringify(value) === JSON.stringify(defaultValue);
+        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;
@@ -261,6 +599,7 @@ const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
         updates,
         schema,
     });
+    applyGoogleFontSourceEdits({ ast, updates });
     return {
         serialized: (0, parse_ast_1.serializeAst)(ast),
         oldValueStrings,
@@ -271,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 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');
         }
+        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,