@remotion/studio-server 4.0.485 → 4.0.486

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;

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

@@ -41,8 +41,10 @@ const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
+const no_react_1 = require("remotion/no-react");
 const format_file_content_1 = require("../codemods/format-file-content");
 const parse_ast_1 = require("../codemods/parse-ast");
+const update_nested_prop_1 = require("../codemods/update-nested-prop");
 const imports_1 = require("./imports");
 const allowedFileExtensions = new Set(['.tsx', '.ts', '.jsx', '.js']);
 const extensionsToProbe = ['.tsx', '.ts', '.jsx', '.js'];
@@ -119,7 +121,7 @@ const getComponentIdentifier = (element) => {
     return attribute.value.expression.name;
 };
 const isRecord = (value) => {
-    return typeof value === 'object' && value !== null;
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
 };
 const findDynamicImportPath = (value) => {
     if (!isRecord(value)) {
@@ -578,11 +580,14 @@ const createComponentElement = ({ addPositionStyle, localName, props, position,
             : []),
     ], true), null, []);
 };
-const createSequenceWrappedElement = ({ child, dimensions, name, position, sequenceLocalName, }) => {
+const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, name, position, sequenceLocalName, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(sequenceLocalName), [
         ...(name === null ? [] : [createStringAttribute('name', name)]),
         createNumberAttribute('width', dimensions.width),
         createNumberAttribute('height', dimensions.height),
+        ...(durationInFrames === null
+            ? []
+            : [createNumberAttribute('durationInFrames', durationInFrames)]),
         createPositionAbsoluteStyleAttribute(position),
     ], false), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier(sequenceLocalName)), [child]);
 };
@@ -847,6 +852,167 @@ const ensureComponentImport = ({ ast, componentName, importName, importPath, })
         localName: componentName,
     });
 };
+const identifierRegex = /^[A-Za-z_$][0-9A-Za-z_$]*$/;
+const toPascalCaseIdentifier = (value) => {
+    var _a;
+    const words = (_a = value.match(/[a-zA-Z0-9]+/g)) !== null && _a !== void 0 ? _a : [];
+    const candidate = words
+        .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+        .join('');
+    if (!candidate) {
+        return 'CompositionComponent';
+    }
+    if (/^[0-9]/.test(candidate)) {
+        return `Composition${candidate}`;
+    }
+    return identifierRegex.test(candidate) ? candidate : 'CompositionComponent';
+};
+const getAvailableLocalName = ({ ast, baseName, }) => {
+    if (!hasTopLevelBinding({ ast, name: baseName })) {
+        return baseName;
+    }
+    const suffixed = `${baseName}Composition`;
+    if (!hasTopLevelBinding({ ast, name: suffixed })) {
+        return suffixed;
+    }
+    for (let i = 2; i < 100; i++) {
+        const candidate = `${suffixed}${i}`;
+        if (!hasTopLevelBinding({ ast, name: candidate })) {
+            return candidate;
+        }
+    }
+    throw new Error(`Cannot find a local name for ${baseName}`);
+};
+const getImportPathBetweenFiles = ({ fromFile, toFile, }) => {
+    let relativeImport = node_path_1.default
+        .relative(node_path_1.default.dirname(fromFile), toFile)
+        .replaceAll(node_path_1.default.sep, '/')
+        .replace(/\.(tsx|ts|jsx|js)$/, '');
+    if (!relativeImport.startsWith('.')) {
+        relativeImport = `./${relativeImport}`;
+    }
+    return relativeImport;
+};
+const ensureDefaultImport = ({ ast, localName, sourcePath, }) => {
+    var _a, _b;
+    var _c;
+    for (const declaration of getImportDeclarations({ ast, sourcePath })) {
+        const defaultSpecifier = (_a = declaration.specifiers) === null || _a === void 0 ? void 0 : _a.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
+        if ((_b = defaultSpecifier === null || defaultSpecifier === void 0 ? void 0 : defaultSpecifier.local) === null || _b === void 0 ? void 0 : _b.name) {
+            return defaultSpecifier.local.name;
+        }
+    }
+    const importSpecifier = recast.types.builders.importDefaultSpecifier(recast.types.builders.identifier(localName));
+    const existingImport = getImportDeclarations({ ast, sourcePath }).find((declaration) => {
+        var _a;
+        return !((_a = declaration.specifiers) === null || _a === void 0 ? void 0 : _a.some((specifier) => specifier.type === 'ImportNamespaceSpecifier'));
+    });
+    if (existingImport) {
+        existingImport.specifiers = [
+            importSpecifier,
+            ...((_c = existingImport.specifiers) !== null && _c !== void 0 ? _c : []),
+        ];
+        return localName;
+    }
+    const importDeclaration = recast.types.builders.importDeclaration([importSpecifier], recast.types.builders.stringLiteral(sourcePath));
+    (0, imports_1.insertImportDeclaration)(ast, importDeclaration);
+    return localName;
+};
+const ensureCompositionComponentImport = async ({ ast, compositionFile, compositionId, destinationFileName, remotionRoot, }) => {
+    const sourceLocation = await (0, exports.resolveCompositionComponentWithFile)({
+        remotionRoot,
+        compositionFile,
+        compositionId,
+    });
+    if (sourceLocation.fileName === destinationFileName) {
+        if (sourceLocation.exportName === 'default') {
+            throw new Error('Cannot insert a composition whose component is a default export in the same file');
+        }
+        if (!hasTopLevelBinding({ ast, name: sourceLocation.exportName })) {
+            throw new Error(`Cannot find component "${sourceLocation.exportName}" in this file`);
+        }
+        return sourceLocation.exportName;
+    }
+    const sourcePath = getImportPathBetweenFiles({
+        fromFile: destinationFileName,
+        toFile: sourceLocation.fileName,
+    });
+    if (sourceLocation.exportName === 'default') {
+        return ensureDefaultImport({
+            ast,
+            localName: getAvailableLocalName({
+                ast,
+                baseName: toPascalCaseIdentifier(compositionId),
+            }),
+            sourcePath,
+        });
+    }
+    return (0, imports_1.ensureNamedImport)({
+        ast,
+        importedName: sourceLocation.exportName,
+        sourcePath,
+        localName: getAvailableLocalName({
+            ast,
+            baseName: sourceLocation.exportName,
+        }),
+    });
+};
+const parseSerializedCompositionProps = (serializedResolvedPropsWithCustomSchema) => {
+    const parsed = JSON.parse(serializedResolvedPropsWithCustomSchema);
+    if (!isRecord(parsed)) {
+        throw new Error('Resolved composition props must be an object');
+    }
+    return parsed;
+};
+const containsFileToken = (value) => {
+    if (typeof value === 'string') {
+        return value.startsWith(no_react_1.NoReactInternals.FILE_TOKEN);
+    }
+    if (Array.isArray(value)) {
+        return value.some(containsFileToken);
+    }
+    if (isRecord(value)) {
+        return Object.values(value).some(containsFileToken);
+    }
+    return false;
+};
+const createExpressionAttribute = (name, value) => {
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer((0, update_nested_prop_1.parseValueExpression)(value)));
+};
+const createCompositionPropAttribute = ({ name, value, }) => {
+    if (typeof value === 'string' &&
+        !value.startsWith(no_react_1.NoReactInternals.FILE_TOKEN) &&
+        !value.startsWith(no_react_1.NoReactInternals.DATE_TOKEN)) {
+        return createStringAttribute(name, value);
+    }
+    return createExpressionAttribute(name, value);
+};
+const createCompositionObjectProperty = ({ name, value, }) => {
+    return recast.types.builders.objectProperty(identifierRegex.test(name)
+        ? recast.types.builders.identifier(name)
+        : recast.types.builders.stringLiteral(name), (0, update_nested_prop_1.parseValueExpression)(value));
+};
+const createCompositionComponentElement = ({ localName, props, }) => {
+    const directAttributes = [];
+    const spreadProperties = [];
+    for (const [name, value] of Object.entries(props)) {
+        if (identifierRegex.test(name)) {
+            directAttributes.push(createCompositionPropAttribute({ name, value }));
+        }
+        else {
+            spreadProperties.push(createCompositionObjectProperty({ name, value }));
+        }
+    }
+    const attributes = [
+        ...directAttributes,
+        ...(spreadProperties.length === 0
+            ? []
+            : [
+                recast.types.builders.jsxSpreadAttribute(recast.types.builders.objectExpression(spreadProperties)),
+            ]),
+    ];
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), attributes, true), null, []);
+};
 const addElementToComponentRoot = ({ ast, exportName, element, }) => {
     var _a;
     var _b;
@@ -1061,7 +1227,7 @@ const resolveCompositionComponent = async ({ remotionRoot, compositionFile, comp
     };
 };
 exports.resolveCompositionComponent = resolveCompositionComponent;
-const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, element, }) => {
+const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinationFileName, element, remotionRoot, }) => {
     if (element.type === 'solid') {
         const solidLocalName = ensureSolidImport(ast);
         return createSolidElement({
@@ -1085,6 +1251,21 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, element,
             position: element.position,
         });
     }
+    if (element.type === 'composition') {
+        return Promise.resolve(ensureCompositionComponentImport({
+            ast,
+            compositionFile: element.compositionFile,
+            compositionId: element.compositionId,
+            destinationFileName,
+            remotionRoot,
+        })).then((localName) => {
+            const props = parseSerializedCompositionProps(element.serializedResolvedPropsWithCustomSchema);
+            if (containsFileToken(props)) {
+                ensureStaticFileImport(ast);
+            }
+            return createCompositionComponentElement({ localName, props });
+        });
+    }
     if (element.type === 'asset') {
         if (element.srcType === 'remote' && !(0, studio_shared_1.isUrl)(element.src)) {
             throw new Error('Remote asset source must be a URL');
@@ -1121,6 +1302,7 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, element,
     throw new Error('Unsupported element type');
 };
 const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, wrapInSequence = null, }) => {
+    var _a;
     const location = await (0, exports.resolveCompositionComponentWithFile)({
         remotionRoot,
         compositionFile,
@@ -1134,17 +1316,32 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
         fileName: location.fileName,
     });
     const ast = (0, parse_ast_1.parseAst)(input);
-    const elementToInsert = createInsertableJsxElement({
-        addPositionStyleToComponent: wrapInSequence === null,
+    if (element.type === 'composition' &&
+        element.compositionId === compositionId) {
+        throw new Error('Cannot insert a composition into itself');
+    }
+    const sequenceWrapper = element.type === 'composition'
+        ? {
+            dimensions: { width: element.width, height: element.height },
+            durationInFrames: element.durationInFrames,
+            name: element.compositionId,
+            position: element.position,
+        }
+        : wrapInSequence;
+    const elementToInsert = await createInsertableJsxElement({
+        addPositionStyleToComponent: sequenceWrapper === null,
         ast,
+        destinationFileName: location.fileName,
         element,
+        remotionRoot,
     });
-    const finalElementToInsert = wrapInSequence
+    const finalElementToInsert = sequenceWrapper
         ? createSequenceWrappedElement({
             child: elementToInsert,
-            dimensions: wrapInSequence.dimensions,
-            name: wrapInSequence.name,
-            position: wrapInSequence.position,
+            dimensions: sequenceWrapper.dimensions,
+            durationInFrames: (_a = sequenceWrapper.durationInFrames) !== null && _a !== void 0 ? _a : null,
+            name: sequenceWrapper.name,
+            position: sequenceWrapper.position,
             sequenceLocalName: ensureSequenceImport(ast),
         })
         : elementToInsert;

package/dist/preview-server/routes/apply-codemod.js

@@ -47,6 +47,17 @@ const getCodemodUndoDescription = (codemod) => {
             entryType: codemod.type,
         };
     }
+    if (codemod.type === 'move-composition-to-folder') {
+        const destination = codemod.folderName === null
+            ? 'to root'
+            : `into folder "${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}"`;
+        const label = `composition "${codemod.idToMove}" ${destination}`;
+        return {
+            undoMessage: `↩️  Move of ${label}`,
+            redoMessage: `↪️  Move of ${label}`,
+            entryType: codemod.type,
+        };
+    }
     if (codemod.type === 'new-composition') {
         return {
             undoMessage: `↩️  Creation of composition "${codemod.newId}"`,
@@ -62,6 +73,14 @@ const getCodemodUndoDescription = (codemod) => {
             entryType: codemod.type,
         };
     }
+    if (codemod.type === 'new-folder') {
+        const label = `folder "${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}"`;
+        return {
+            undoMessage: `↩️  Creation of ${label}`,
+            redoMessage: `↪️  Creation of ${label}`,
+            entryType: codemod.type,
+        };
+    }
     if (codemod.type === 'rename-folder') {
         const oldName = `${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}`;
         const newName = `${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.newName}`;

package/dist/preview-server/routes/insert-jsx-element.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertJsxElementHandler = void 0;
+const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const file_watcher_1 = require("../../file-watcher");
@@ -22,7 +26,27 @@ const validatePosition = (position) => {
         throw new Error('Position must be finite');
     }
 };
-const validateElement = (element) => {
+const isInsideRemotionRoot = ({ fileName, remotionRoot, }) => {
+    const relativePath = node_path_1.default.relative(remotionRoot, fileName);
+    return !relativePath.startsWith('..') && !node_path_1.default.isAbsolute(relativePath);
+};
+const hasParentDirectorySegment = (fileName) => {
+    return fileName.split('/').includes('..');
+};
+const validateCompositionFile = ({ compositionFile, remotionRoot, }) => {
+    if (!compositionFile ||
+        compositionFile.includes('\0') ||
+        compositionFile.includes('\\') ||
+        compositionFile.startsWith('/') ||
+        hasParentDirectorySegment(compositionFile)) {
+        throw new Error('Unsupported composition file');
+    }
+    const resolved = node_path_1.default.resolve(remotionRoot, compositionFile);
+    if (!isInsideRemotionRoot({ fileName: resolved, remotionRoot })) {
+        throw new Error('Unsupported composition file');
+    }
+};
+const validateElement = (element, remotionRoot) => {
     validatePosition(element.position);
     if (element.type === 'solid') {
         validateDimension('width', element.width);
@@ -59,6 +83,28 @@ const validateElement = (element) => {
         }
         return;
     }
+    if (element.type === 'composition') {
+        if (typeof element.compositionId !== 'string' || !element.compositionId) {
+            throw new Error('Unsupported composition ID');
+        }
+        if (typeof element.compositionFile !== 'string') {
+            throw new Error('Unsupported composition file');
+        }
+        validateCompositionFile({
+            compositionFile: element.compositionFile,
+            remotionRoot,
+        });
+        validateDimension('width', element.width);
+        validateDimension('height', element.height);
+        validateDimension('durationInFrames', element.durationInFrames);
+        const parsedProps = JSON.parse(element.serializedResolvedPropsWithCustomSchema);
+        if (typeof parsedProps !== 'object' ||
+            parsedProps === null ||
+            Array.isArray(parsedProps)) {
+            throw new Error('Resolved composition props must be an object');
+        }
+        return;
+    }
     throw new Error('Unsupported element type');
 };
 const getElementLabel = (element) => {
@@ -85,11 +131,14 @@ const getElementLabel = (element) => {
     if (element.type === 'component') {
         return `<${element.componentName}>`;
     }
+    if (element.type === 'composition') {
+        return `composition "${element.compositionId}"`;
+    }
     throw new Error('Unsupported element type');
 };
 const insertJsxElementHandler = ({ input: { compositionFile, compositionId, element }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
-        validateElement(element);
+        validateElement(element, remotionRoot);
         const elementLabel = getElementLabel(element);
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-jsx-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.type}"`);
         const { fileName, source, oldContents, output, formatted, logLine } = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({

package/dist/preview-server/routes/save-sequence-props.d.ts

@@ -11,10 +11,12 @@ type ResolvedSequencePropEdit = {
     defaultValue: unknown | null;
     defaultValueString: string | null;
     schema: SaveSequencePropEdit['schema'];
+    sourceEdit: SaveSequencePropEdit['sourceEdit'];
 };
-export declare const convertSequencePropEditToCodemodChange: (edit: Pick<ResolvedSequencePropEdit, "defaultValue" | "key" | "nodePath" | "schema" | "value">) => SequencePropsNodeUpdate;
+export declare const convertSequencePropEditToCodemodChange: (edit: Pick<ResolvedSequencePropEdit, "defaultValue" | "key" | "nodePath" | "schema" | "sourceEdit" | "value">) => SequencePropsNodeUpdate;
 export declare const shouldSuppressHmrForSequencePropEdits: (edits: readonly {
     key: string;
+    sourceEdit?: import("@remotion/studio-shared").SaveSequencePropSourceEdit | null | undefined;
 }[]) => boolean;
 export declare const saveSequencePropsHandler: ApiHandler<SaveSequencePropsRequest, SaveSequencePropsResponse>;
 export {};