@remotion/studio-server 4.0.484 → 4.0.486

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/api-routes.js

@@ -35,6 +35,7 @@ const reorder_sequence_1 = require("./routes/reorder-sequence");
 const restart_studio_1 = require("./routes/restart-studio");
 const save_effect_props_1 = require("./routes/save-effect-props");
 const save_sequence_props_1 = require("./routes/save-sequence-props");
+const split_jsx_sequence_1 = require("./routes/split-jsx-sequence");
 const subscribe_to_default_props_1 = require("./routes/subscribe-to-default-props");
 const subscribe_to_file_existence_1 = require("./routes/subscribe-to-file-existence");
 const subscribe_to_sequence_props_1 = require("./routes/subscribe-to-sequence-props");
@@ -82,6 +83,7 @@ exports.allApiRoutes = {
     '/api/paste-effects': paste_effects_1.pasteEffectsHandler,
     '/api/delete-jsx-node': delete_jsx_node_1.deleteJsxNodeHandler,
     '/api/duplicate-jsx-node': duplicate_jsx_node_1.duplicateJsxNodeHandler,
+    '/api/split-jsx-sequence': split_jsx_sequence_1.splitJsxSequenceHandler,
     '/api/update-available': update_available_1.handleUpdate,
     '/api/project-info': project_info_1.projectInfoHandler,
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,

package/dist/preview-server/routes/add-effect-keyframe.js

@@ -13,8 +13,8 @@ const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const can_update_effect_props_1 = require("./can-update-effect-props");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
 const log_effect_update_1 = require("./log-updates/log-effect-update");
-const save_props_mutex_1 = require("./save-props-mutex");
-const addEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, frame, value, schema, clientId, }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const addEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, frame, value, schema, clientId, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-effect-keyframe] Received request for fileName="${fileName}" effectIndex=${effectIndex} key="${key}" frame=${frame}`);
     const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
         remotionRoot,

package/dist/preview-server/routes/add-effect.js

@@ -10,59 +10,62 @@ const format_log_file_location_1 = require("../format-log-file-location");
 const undo_stack_1 = require("../undo-stack");
 const formatting_1 = require("./log-updates/formatting");
 const log_update_1 = require("./log-updates/log-update");
-const addEffectHandler = async ({ input: { fileName, sequenceNodePath, effectName, effectImportPath, effectConfig, clientId, }, remotionRoot, logLevel, }) => {
-    try {
-        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-effect] Received request for fileName="${fileName}" effect="${effectName}"`);
-        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
-            remotionRoot,
-            fileName,
-            action: 'modify',
-        });
-        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, formatted, effectLabel, nodeLabel, logLine } = await (0, add_effect_1.addEffect)({
-            input: fileContents,
-            sequenceNodePath: sequenceNodePath.nodePath,
-            effectName,
-            effectImportPath,
-            effectConfig,
-        });
-        (0, undo_stack_1.pushToUndoStack)({
-            filePath: absolutePath,
-            oldContents: fileContents,
-            newContents: null,
-            logLevel,
-            remotionRoot,
-            logLine,
-            description: {
-                undoMessage: `↩️  Addition of ${effectLabel} to ${nodeLabel}`,
-                redoMessage: `↪️  Addition of ${effectLabel} to ${nodeLabel}`,
-            },
-            entryType: 'add-effect',
-            suppressHmrOnFileRestore: false,
-        });
-        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
-        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
-            remotionRoot,
-            absolutePath,
-            line: logLine,
-        });
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${(0, formatting_1.attrName)(effectLabel)} to ${nodeLabel}`);
-        if (!formatted) {
-            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const addEffectHandler = ({ input: { fileName, sequenceNodePath, effectName, effectImportPath, effectConfig, clientId, }, remotionRoot, logLevel, }) => {
+    return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+        try {
+            renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-effect] Received request for fileName="${fileName}" effect="${effectName}"`);
+            const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                remotionRoot,
+                fileName,
+                action: 'modify',
+            });
+            const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+            const { output, formatted, effectLabel, nodeLabel, logLine } = await (0, add_effect_1.addEffect)({
+                input: fileContents,
+                sequenceNodePath: sequenceNodePath.nodePath,
+                effectName,
+                effectImportPath,
+                effectConfig,
+            });
+            (0, undo_stack_1.pushToUndoStack)({
+                filePath: absolutePath,
+                oldContents: fileContents,
+                newContents: null,
+                logLevel,
+                remotionRoot,
+                logLine,
+                description: {
+                    undoMessage: `↩️  Addition of ${effectLabel} to ${nodeLabel}`,
+                    redoMessage: `↪️  Addition of ${effectLabel} to ${nodeLabel}`,
+                },
+                entryType: 'add-effect',
+                suppressHmrOnFileRestore: false,
+            });
+            (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath,
+                line: logLine,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${(0, formatting_1.attrName)(effectLabel)} to ${nodeLabel}`);
+            if (!formatted) {
+                (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+            }
+            renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[add-effect] Wrote ${fileRelativeToRoot}${formatted ? ' (formatted)' : ''}`);
+            (0, undo_stack_1.printUndoHint)(logLevel);
+            return {
+                success: true,
+            };
         }
-        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[add-effect] Wrote ${fileRelativeToRoot}${formatted ? ' (formatted)' : ''}`);
-        (0, undo_stack_1.printUndoHint)(logLevel);
-        return {
-            success: true,
-        };
-    }
-    catch (err) {
-        return {
-            success: false,
-            reason: err.message,
-            stack: err.stack,
-        };
-    }
+        catch (err) {
+            return {
+                success: false,
+                reason: err.message,
+                stack: err.stack,
+            };
+        }
+    });
 };
 exports.addEffectHandler = addEffectHandler;

package/dist/preview-server/routes/add-keyframes.js

@@ -10,7 +10,7 @@ const undo_stack_1 = require("../undo-stack");
 const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const log_effect_update_1 = require("./log-updates/log-effect-update");
 const log_update_1 = require("./log-updates/log-update");
-const save_props_mutex_1 = require("./save-props-mutex");
+const source_file_write_queue_1 = require("./source-file-write-queue");
 const groupBy = (items, getKey) => {
     var _a;
     const groups = new Map();
@@ -212,7 +212,7 @@ const addKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, remo
     (0, undo_stack_1.printUndoHint)(logLevel);
 };
 exports.addKeyframes = addKeyframes;
-const addKeyframesHandler = ({ input: { sequenceKeyframes, effectKeyframes, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+const addKeyframesHandler = ({ input: { sequenceKeyframes, effectKeyframes, clientId }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-keyframes] Received request to add ${sequenceKeyframes.length + effectKeyframes.length} keyframe(s)`);
     await (0, exports.addKeyframes)({
         sequenceKeyframes,

package/dist/preview-server/routes/add-sequence-keyframe.js

@@ -11,8 +11,8 @@ const undo_stack_1 = require("../undo-stack");
 const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
 const log_update_1 = require("./log-updates/log-update");
-const save_props_mutex_1 = require("./save-props-mutex");
-const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, value, schema, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, value, schema, clientId }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-sequence-keyframe] Received request for fileName="${fileName}" key="${key}" frame=${frame}`);
     const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
         remotionRoot,