@remotion/studio-server 4.0.485 → 4.0.487

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,

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/parse-keyframe-easing-expression.d.ts

@@ -0,0 +1,3 @@
+import type { Expression } from '@babel/types';
+import type { CanUpdateSequencePropStatusEasing } from 'remotion';
+export declare const parseKeyframeEasingExpression: (node: Expression) => CanUpdateSequencePropStatusEasing | null;

package/dist/helpers/parse-keyframe-easing-expression.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseKeyframeEasingExpression = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const getNumericValue = (node) => {
+    if (node.type === 'NumericLiteral') {
+        return node.value;
+    }
+    if (node.type === 'UnaryExpression' &&
+        (node.operator === '-' || node.operator === '+') &&
+        node.argument.type === 'NumericLiteral') {
+        return node.operator === '-' ? -node.argument.value : node.argument.value;
+    }
+    if (node.type === 'TSAsExpression') {
+        return getNumericValue(node.expression);
+    }
+    return null;
+};
+const getExpressionArgument = (arg) => {
+    if (arg === undefined ||
+        arg.type === 'ArgumentPlaceholder' ||
+        arg.type === 'JSXNamespacedName' ||
+        arg.type === 'SpreadElement') {
+        return null;
+    }
+    return arg;
+};
+const getMemberExpressionKeyframeEasing = (name) => {
+    if (name === 'linear') {
+        return studio_shared_1.LINEAR_KEYFRAME_EASING;
+    }
+    if (name === 'ease') {
+        return studio_shared_1.EASE_KEYFRAME_EASING;
+    }
+    if (name === 'quad') {
+        return studio_shared_1.QUAD_KEYFRAME_EASING;
+    }
+    if (name === 'cubic') {
+        return studio_shared_1.CUBIC_KEYFRAME_EASING;
+    }
+    return null;
+};
+const parseKeyframeEasingExpression = (node) => {
+    if (node.type === 'TSAsExpression') {
+        return (0, exports.parseKeyframeEasingExpression)(node.expression);
+    }
+    if (node.type === 'MemberExpression' &&
+        node.object.type === 'Identifier' &&
+        node.object.name === 'Easing' &&
+        node.property.type === 'Identifier' &&
+        node.computed === false) {
+        return getMemberExpressionKeyframeEasing(node.property.name);
+    }
+    if (node.type !== 'CallExpression' ||
+        node.callee.type !== 'MemberExpression' ||
+        node.callee.object.type !== 'Identifier' ||
+        node.callee.object.name !== 'Easing' ||
+        node.callee.property.type !== 'Identifier' ||
+        node.callee.computed) {
+        return null;
+    }
+    const propertyName = node.callee.property.name;
+    if (propertyName === 'spring') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        if (node.arguments.length === 0) {
+            return (0, studio_shared_1.parseSpringEasingConfig)(undefined);
+        }
+        const springConfig = getExpressionArgument(node.arguments[0]);
+        return springConfig ? (0, studio_shared_1.parseSpringEasingConfig)(springConfig) : null;
+    }
+    if (propertyName === 'bezier') {
+        if (node.arguments.length !== 4) {
+            return null;
+        }
+        const values = node.arguments.map((arg) => {
+            const expression = getExpressionArgument(arg);
+            return expression ? getNumericValue(expression) : null;
+        });
+        if (values.some((value) => value === null)) {
+            return null;
+        }
+        const [x1, y1, x2, y2] = values;
+        return { type: 'bezier', x1, y1, x2, y2 };
+    }
+    if (propertyName === 'back') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        if (node.arguments.length === 0) {
+            return (0, studio_shared_1.getBackKeyframeEasing)();
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        if (!expression) {
+            return null;
+        }
+        const s = getNumericValue(expression);
+        if (s === null) {
+            return null;
+        }
+        return (0, studio_shared_1.getBackKeyframeEasing)(s);
+    }
+    if (propertyName === 'poly') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        const n = expression ? getNumericValue(expression) : null;
+        return n === null ? null : (0, studio_shared_1.getPolyKeyframeEasing)(n);
+    }
+    if (propertyName === 'in') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        return expression ? (0, exports.parseKeyframeEasingExpression)(expression) : null;
+    }
+    if (propertyName === 'out') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        const easing = expression
+            ? (0, exports.parseKeyframeEasingExpression)(expression)
+            : null;
+        return easing ? (0, studio_shared_1.getOutKeyframeEasing)(easing) : null;
+    }
+    if (propertyName === 'inOut') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        const easing = expression
+            ? (0, exports.parseKeyframeEasingExpression)(expression)
+            : null;
+        return (easing === null || easing === void 0 ? void 0 : easing.type) === 'linear' ? easing : null;
+    }
+    return null;
+};
+exports.parseKeyframeEasingExpression = parseKeyframeEasingExpression;

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

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