@remotion/studio-server 4.0.527 → 4.0.528

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

@@ -7,15 +7,17 @@ exports.insertElementHandler = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const apply_codemod_to_file_1 = require("../../codemods/apply-codemod-to-file");
 const file_watcher_1 = require("../../file-watcher");
+const open_file_for_writing_without_symlinks_1 = require("../../helpers/open-file-for-writing-without-symlinks");
 const resolve_composition_component_1 = require("../../helpers/resolve-composition-component");
 const format_log_file_location_1 = require("../format-log-file-location");
 const project_info_1 = require("../project-info");
 const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
 const undo_stack_1 = require("../undo-stack");
-const apply_codemod_1 = require("./apply-codemod");
 const can_update_default_props_1 = require("./can-update-default-props");
+const download_remote_asset_1 = require("./download-remote-asset");
 const element_install_plan_1 = require("./element-install-plan");
 const source_file_write_queue_1 = require("./source-file-write-queue");
 const hasExpectedFileState = ({ expected, actual, }) => {
@@ -30,312 +32,429 @@ const hasExpectedFileState = ({ expected, actual, }) => {
     }
     return actual.sourceHash === expected.sourceHash;
 };
-const insertElementHandler = ({ input: { compositionFile, compositionId, element, installationName, expectedFileState, from, position, overwriteExisting, undoRedoNavigation, newComposition, }, entryPoint, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
-    var _a, _b, _c;
-    var _d, _e, _f;
+const insertElementHandler = async ({ input: { compositionFile, compositionId, element, installationName, expectedFileState, from, position, overwriteExisting, undoRedoNavigation, newComposition, }, entryPoint, remotionRoot, logLevel, publicDir, }) => {
+    var _a;
+    let resolvedAssets;
     try {
-        (0, element_install_plan_1.validateElementInstallPosition)(position);
-        if (from !== null &&
-            (!Number.isInteger(from) || !Number.isFinite(from) || from < 0)) {
-            throw new Error('from must be a non-negative integer');
-        }
-        const installationMode = element.installationMode === null
-            ? 'wrapped'
-            : element.installationMode;
-        const componentOwnsSequence = installationMode === 'component-owned-sequence';
-        if (componentOwnsSequence &&
-            element.initialProps !== null &&
-            ['from', 'durationInFrames', 'name'].some((prop) => {
-                var _a;
-                return Object.hasOwn((_a = element.initialProps) !== null && _a !== void 0 ? _a : {}, prop);
-            })) {
-            throw new Error('Component-owned Element initial props must not override from, durationInFrames, or name');
-        }
-        if (componentOwnsSequence &&
-            ((_a = element.initialProps) === null || _a === void 0 ? void 0 : _a.style) !== undefined &&
-            (element.initialProps.style === null ||
-                typeof element.initialProps.style !== 'object' ||
-                Array.isArray(element.initialProps.style))) {
-            throw new Error('Component-owned Element initial style must be an object');
-        }
-        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.slug}"`);
-        let compositionCreation = null;
-        let sourceFileOverrides = null;
-        if (newComposition !== null) {
-            if (newComposition.codemod.newId !== compositionId) {
-                throw new Error('New composition ID does not match installation target');
+        studio_protocol_1.StudioProtocolInternals.assertElementAssets(element.assets);
+        studio_protocol_1.StudioProtocolInternals.assertElementAssetReferences(element);
+        resolvedAssets = await studio_protocol_1.StudioProtocolInternals.resolveElementAssets({
+            assets: element.assets,
+            downloadAsset: (options) => (0, download_remote_asset_1.downloadRemoteAssetBytes)({ ...options, acceptHeader: null }),
+        });
+    }
+    catch (err) {
+        return {
+            success: false,
+            type: 'error',
+            reason: err.message,
+            stack: (_a = err.stack) !== null && _a !== void 0 ? _a : '',
+        };
+    }
+    return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+        var _a, _b, _c, _d, _e;
+        var _f, _g, _h, _j;
+        const createdAssets = [];
+        const changedSources = [];
+        let undoEntryPushed = false;
+        try {
+            (0, element_install_plan_1.validateElementInstallPosition)(position);
+            if (from !== null &&
+                (!Number.isInteger(from) || !Number.isFinite(from) || from < 0)) {
+                throw new Error('from must be a non-negative integer');
             }
-            const registrationFilePath = newComposition.symbolicatedStack
-                ? (0, apply_codemod_to_file_1.resolveFilePathFromSymbolicatedStack)(remotionRoot, newComposition.symbolicatedStack)
-                : (await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint)).rootFile;
-            if (registrationFilePath === null) {
-                throw new Error('Cannot find file for composition in project');
+            const installationMode = element.installationMode === null
+                ? 'wrapped'
+                : element.installationMode;
+            const componentOwnsSequence = installationMode === 'component-owned-sequence';
+            if (componentOwnsSequence &&
+                element.initialProps !== null &&
+                ['from', 'durationInFrames', 'name'].some((prop) => {
+                    var _a;
+                    return Object.hasOwn((_a = element.initialProps) !== null && _a !== void 0 ? _a : {}, prop);
+                })) {
+                throw new Error('Component-owned Element initial props must not override from, durationInFrames, or name');
             }
-            (0, can_update_default_props_1.checkIfTypeScriptFile)(registrationFilePath);
-            if (node_path_1.default.resolve(remotionRoot, compositionFile) !== registrationFilePath) {
-                throw new Error('New composition source does not match installation target');
+            if (componentOwnsSequence &&
+                ((_a = element.initialProps) === null || _a === void 0 ? void 0 : _a.style) !== undefined &&
+                (element.initialProps.style === null ||
+                    typeof element.initialProps.style !== 'object' ||
+                    Array.isArray(element.initialProps.style))) {
+                throw new Error('Component-owned Element initial style must be an object');
             }
-            const componentFilePath = node_path_1.default.join(node_path_1.default.dirname(registrationFilePath), `${newComposition.codemod.componentName}.tsx`);
-            if ((0, node_fs_1.existsSync)(componentFilePath)) {
-                throw new Error(`Cannot create ${node_path_1.default.relative(remotionRoot, componentFilePath)} because it already exists`);
+            renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.slug}"`);
+            let compositionCreation = null;
+            let sourceFileOverrides = null;
+            if (newComposition !== null) {
+                if (newComposition.codemod.newId !== compositionId) {
+                    throw new Error('New composition ID does not match installation target');
+                }
+                const registrationFilePath = newComposition.symbolicatedStack
+                    ? (0, apply_codemod_to_file_1.resolveFilePathFromSymbolicatedStack)(remotionRoot, newComposition.symbolicatedStack)
+                    : (await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint)).rootFile;
+                if (registrationFilePath === null) {
+                    throw new Error('Cannot find file for composition in project');
+                }
+                (0, can_update_default_props_1.checkIfTypeScriptFile)(registrationFilePath);
+                if (node_path_1.default.resolve(remotionRoot, compositionFile) !== registrationFilePath) {
+                    throw new Error('New composition source does not match installation target');
+                }
+                const componentFilePath = node_path_1.default.join(node_path_1.default.dirname(registrationFilePath), `${newComposition.codemod.componentName}.tsx`);
+                if ((0, node_fs_1.existsSync)(componentFilePath)) {
+                    throw new Error(`Cannot create ${node_path_1.default.relative(remotionRoot, componentFilePath)} because it already exists`);
+                }
+                const registrationFileOldContents = (0, node_fs_1.readFileSync)(registrationFilePath, 'utf-8');
+                const codemodResult = await (0, apply_codemod_to_file_1.applyCodemodToFile)({
+                    filePath: registrationFilePath,
+                    codeMod: newComposition.codemod,
+                });
+                const registrationFileNewContents = (_f = (_b = codemodResult.changes.find((change) => change.filePath === registrationFilePath)) === null || _b === void 0 ? void 0 : _b.nextContents) !== null && _f !== void 0 ? _f : registrationFileOldContents;
+                const componentFileContents = (_c = codemodResult.changes.find((change) => change.filePath === componentFilePath)) === null || _c === void 0 ? void 0 : _c.nextContents;
+                if (componentFileContents === null ||
+                    componentFileContents === undefined) {
+                    throw new Error('Could not create the composition component');
+                }
+                compositionCreation = {
+                    componentFileContents,
+                    componentFilePath,
+                    registrationFileNewContents,
+                    registrationFileOldContents,
+                    registrationFilePath,
+                };
+                sourceFileOverrides = new Map([
+                    [registrationFilePath, registrationFileNewContents],
+                    [componentFilePath, componentFileContents],
+                ]);
             }
-            const registrationFileOldContents = (0, node_fs_1.readFileSync)(registrationFilePath, 'utf-8');
-            const registrationFileNewContents = await (0, apply_codemod_to_file_1.applyCodemodToFile)({
-                filePath: registrationFilePath,
-                codeMod: newComposition.codemod,
+            const installDestination = newComposition === null
+                ? {
+                    type: 'current-composition',
+                    compositionFile,
+                    compositionId,
+                }
+                : {
+                    type: 'new-composition',
+                    compositionFile,
+                };
+            const plan = await (0, element_install_plan_1.getElementInstallPlan)({
+                installationName,
+                destination: installDestination,
+                element,
+                entryPoint,
+                remotionRoot,
             });
-            const componentFileContents = await (0, apply_codemod_1.formatNewCompositionFile)(newComposition.codemod);
-            compositionCreation = {
-                componentFileContents,
-                componentFilePath,
-                registrationFileNewContents,
-                registrationFileOldContents,
-                registrationFilePath,
-            };
-            sourceFileOverrides = new Map([
-                [registrationFilePath, registrationFileNewContents],
-                [componentFilePath, componentFileContents],
-            ]);
-        }
-        const installDestination = newComposition === null
-            ? {
-                type: 'current-composition',
-                compositionFile,
-                compositionId,
+            if (expectedFileState !== null &&
+                !hasExpectedFileState({
+                    actual: plan.expectedFileState,
+                    expected: expectedFileState,
+                })) {
+                const { existingElementSource } = plan;
+                if (existingElementSource !== null) {
+                    return {
+                        success: false,
+                        type: 'file-conflict',
+                        conflict: {
+                            filePath: plan.filePath,
+                            existingSource: existingElementSource,
+                            incomingSource: element.sourceCode,
+                        },
+                    };
+                }
+                throw new Error('Element source changed during installation');
             }
-            : {
-                type: 'new-composition',
-                compositionFile,
-            };
-        const plan = await (0, element_install_plan_1.getElementInstallPlan)({
-            installationName,
-            destination: installDestination,
-            element,
-            entryPoint,
-            remotionRoot,
-        });
-        if (expectedFileState !== null &&
-            !hasExpectedFileState({
-                actual: plan.expectedFileState,
-                expected: expectedFileState,
-            })) {
-            const { existingElementSource } = plan;
-            if (existingElementSource !== null) {
+            const elementSourcesDiffer = plan.existingElementSource !== null &&
+                plan.existingElementSource !== element.sourceCode;
+            if (!overwriteExisting && plan.existingElementSource !== null) {
                 return {
                     success: false,
                     type: 'file-conflict',
                     conflict: {
                         filePath: plan.filePath,
-                        existingSource: existingElementSource,
+                        existingSource: plan.existingElementSource,
                         incomingSource: element.sourceCode,
                     },
                 };
             }
-            throw new Error('Element source changed during installation');
-        }
-        const elementSourcesDiffer = plan.existingElementSource !== null &&
-            plan.existingElementSource !== element.sourceCode;
-        if (!overwriteExisting && plan.existingElementSource !== null) {
-            return {
-                success: false,
-                type: 'file-conflict',
-                conflict: {
-                    filePath: plan.filePath,
-                    existingSource: plan.existingElementSource,
-                    incomingSource: element.sourceCode,
+            if (compositionCreation !== null &&
+                plan.elementFileName ===
+                    node_path_1.default.join(node_path_1.default.dirname(plan.safePaths.compositionFileName), node_path_1.default.basename(compositionCreation.componentFilePath))) {
+                throw new Error('Element source file conflicts with the new composition file');
+            }
+            const shouldWriteElementFile = !plan.elementFileExists || elementSourcesDiffer;
+            const insertionInput = {
+                remotionRoot,
+                compositionFile,
+                compositionId,
+                element: {
+                    type: 'component',
+                    componentName: plan.componentName,
+                    importName: plan.componentName,
+                    importPath: plan.importPath,
+                    props: [
+                        ...Object.entries((_g = element.initialProps) !== null && _g !== void 0 ? _g : {}).map(([name, value]) => ({ name, value })),
+                        ...(componentOwnsSequence && element.durationInFrames !== null
+                            ? [
+                                {
+                                    name: 'durationInFrames',
+                                    value: element.durationInFrames,
+                                },
+                            ]
+                            : []),
+                        ...(componentOwnsSequence
+                            ? [{ name: 'name', value: element.displayName }]
+                            : []),
+                    ],
+                    position: componentOwnsSequence ? position : null,
                 },
+                from: componentOwnsSequence ? from : null,
+                prettierConfigOverride: null,
+                wrapInSequence: componentOwnsSequence
+                    ? null
+                    : {
+                        dimensions: element.dimensions,
+                        durationInFrames: element.durationInFrames,
+                        from,
+                        name: element.displayName,
+                        position,
+                    },
             };
-        }
-        if (compositionCreation !== null &&
-            plan.elementFileName ===
-                node_path_1.default.join(node_path_1.default.dirname(plan.safePaths.compositionFileName), node_path_1.default.basename(compositionCreation.componentFilePath))) {
-            throw new Error('Element source file conflicts with the new composition file');
-        }
-        const shouldWriteElementFile = !plan.elementFileExists || elementSourcesDiffer;
-        const insertionInput = {
-            remotionRoot,
-            compositionFile,
-            compositionId,
-            element: {
-                type: 'component',
-                componentName: plan.componentName,
-                importName: plan.componentName,
-                importPath: plan.importPath,
-                props: [
-                    ...Object.entries((_d = element.initialProps) !== null && _d !== void 0 ? _d : {}).map(([name, value]) => ({ name, value })),
-                    ...(componentOwnsSequence && element.durationInFrames !== null
+            const inserted = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
+                ...insertionInput,
+                sourceFileOverrides,
+            });
+            if (compositionCreation !== null &&
+                inserted.fileName !== compositionCreation.componentFilePath) {
+                throw new Error('New composition component does not match installation target');
+            }
+            const finalPlan = await (0, element_install_plan_1.getElementInstallPlan)({
+                installationName,
+                destination: installDestination,
+                element,
+                entryPoint,
+                remotionRoot,
+            });
+            if (finalPlan.safePaths.compositionFileName !==
+                plan.safePaths.compositionFileName) {
+                throw new Error('Composition source changed during Element installation');
+            }
+            if (!hasExpectedFileState({
+                actual: finalPlan.expectedFileState,
+                expected: plan.expectedFileState,
+            })) {
+                throw new Error('Element source changed during installation');
+            }
+            if (compositionCreation !== null &&
+                ((0, node_fs_1.readFileSync)(compositionCreation.registrationFilePath, 'utf-8') !==
+                    compositionCreation.registrationFileOldContents ||
+                    (0, node_fs_1.existsSync)(compositionCreation.componentFilePath))) {
+                throw new Error('Composition source changed during Element installation');
+            }
+            const assetsToCreate = [];
+            for (const asset of resolvedAssets) {
+                const absolutePath = node_path_1.default.resolve(publicDir, ...asset.path.split('/'));
+                (0, open_file_for_writing_without_symlinks_1.assertNoSymlinks)({
+                    absolutePath,
+                    rootDirectory: node_path_1.default.resolve(publicDir),
+                });
+                if ((0, node_fs_1.existsSync)(absolutePath)) {
+                    if (!(0, node_fs_1.lstatSync)(absolutePath).isFile()) {
+                        throw new Error(`Asset ${asset.path} already exists and is not a file`);
+                    }
+                    if (!(0, node_fs_1.readFileSync)(absolutePath).equals(asset.contents)) {
+                        throw new Error(`Asset ${asset.path} already exists with different contents`);
+                    }
+                }
+                else {
+                    assetsToCreate.push({ absolutePath, contents: asset.contents });
+                }
+            }
+            for (const asset of assetsToCreate) {
+                const fileDescriptor = (0, open_file_for_writing_without_symlinks_1.openFileForWritingWithoutSymlinks)({
+                    absolutePath: asset.absolutePath,
+                    exclusive: true,
+                    rootDirectory: publicDir,
+                });
+                try {
+                    (0, node_fs_1.writeFileSync)(fileDescriptor, asset.contents);
+                }
+                catch (error) {
+                    (0, node_fs_1.closeSync)(fileDescriptor);
+                    try {
+                        (0, node_fs_1.unlinkSync)(asset.absolutePath);
+                    }
+                    catch (_k) {
+                        // Keep the original write error.
+                    }
+                    throw error;
+                }
+                (0, node_fs_1.closeSync)(fileDescriptor);
+                createdAssets.push(asset);
+            }
+            const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
+                {
+                    absolutePath: inserted.fileName,
+                    remappings: inserted.nodePathRemappings,
+                },
+            ], null);
+            const writeSource = ({ content, file, metadata, }) => {
+                const oldContents = (0, node_fs_1.existsSync)(file)
+                    ? (0, node_fs_1.readFileSync)(file, 'utf8')
+                    : null;
+                changedSources.push({
+                    filePath: file,
+                    newContents: content,
+                    oldContents,
+                });
+                (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                    file,
+                    content,
+                    originatorClientId: undefined,
+                    metadata,
+                });
+            };
+            (0, undo_stack_1.pushTransactionToUndoStack)({
+                snapshots: [
+                    ...(compositionCreation === null
+                        ? []
+                        : [
+                            {
+                                filePath: compositionCreation.registrationFilePath,
+                                oldContents: compositionCreation.registrationFileOldContents,
+                                newContents: compositionCreation.registrationFileNewContents,
+                                logLine: (_h = (_d = newComposition === null || newComposition === void 0 ? void 0 : newComposition.symbolicatedStack) === null || _d === void 0 ? void 0 : _d.originalLineNumber) !== null && _h !== void 0 ? _h : 1,
+                                nodePathRemappings: null,
+                            },
+                        ]),
+                    ...(shouldWriteElementFile
                         ? [
                             {
-                                name: 'durationInFrames',
-                                value: element.durationInFrames,
+                                filePath: plan.elementFileName,
+                                oldContents: plan.existingElementSource,
+                                newContents: element.sourceCode,
+                                logLine: 1,
+                                nodePathRemappings: null,
                             },
                         ]
                         : []),
-                    ...(componentOwnsSequence
-                        ? [{ name: 'name', value: element.displayName }]
-                        : []),
+                    {
+                        filePath: inserted.fileName,
+                        oldContents: compositionCreation === null ? inserted.oldContents : null,
+                        newContents: inserted.output,
+                        logLine: inserted.logLine,
+                        nodePathRemappings: inserted.nodePathRemappings,
+                    },
                 ],
-                position: componentOwnsSequence ? position : null,
-            },
-            from: componentOwnsSequence ? from : null,
-            prettierConfigOverride: null,
-            wrapInSequence: componentOwnsSequence
-                ? null
-                : {
-                    dimensions: element.dimensions,
-                    durationInFrames: element.durationInFrames,
-                    from,
-                    name: element.displayName,
-                    position,
-                },
-        };
-        const inserted = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
-            ...insertionInput,
-            sourceFileOverrides,
-        });
-        if (compositionCreation !== null &&
-            inserted.fileName !== compositionCreation.componentFilePath) {
-            throw new Error('New composition component does not match installation target');
-        }
-        const finalPlan = await (0, element_install_plan_1.getElementInstallPlan)({
-            installationName,
-            destination: installDestination,
-            element,
-            entryPoint,
-            remotionRoot,
-        });
-        if (finalPlan.safePaths.compositionFileName !==
-            plan.safePaths.compositionFileName) {
-            throw new Error('Composition source changed during Element installation');
-        }
-        if (!hasExpectedFileState({
-            actual: finalPlan.expectedFileState,
-            expected: plan.expectedFileState,
-        })) {
-            throw new Error('Element source changed during installation');
-        }
-        if (compositionCreation !== null &&
-            ((0, node_fs_1.readFileSync)(compositionCreation.registrationFilePath, 'utf-8') !==
-                compositionCreation.registrationFileOldContents ||
-                (0, node_fs_1.existsSync)(compositionCreation.componentFilePath))) {
-            throw new Error('Composition source changed during Element installation');
-        }
-        const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
-            {
+                logLevel,
+                remotionRoot,
+                description: newComposition === null
+                    ? {
+                        undoMessage: `↩️  Added ${element.displayName}`,
+                        redoMessage: `↪️  Added ${element.displayName}`,
+                    }
+                    : {
+                        undoMessage: `↩️  Installation of ${element.displayName} into composition "${compositionId}"`,
+                        redoMessage: `↪️  Installation of ${element.displayName} into composition "${compositionId}"`,
+                    },
+                entryType: 'insert-jsx-element',
+                suppressHmrOnFileRestore: false,
+                undoRedoNavigation,
+            });
+            undoEntryPushed = true;
+            if (compositionCreation !== null) {
+                (0, undo_stack_1.suppressUndoStackInvalidation)(compositionCreation.registrationFilePath);
+            }
+            if (shouldWriteElementFile) {
+                (0, undo_stack_1.suppressUndoStackInvalidation)(plan.elementFileName);
+            }
+            (0, undo_stack_1.suppressUndoStackInvalidation)(inserted.fileName);
+            if (compositionCreation !== null) {
+                writeSource({
+                    file: compositionCreation.registrationFilePath,
+                    content: compositionCreation.registrationFileNewContents,
+                    metadata: null,
+                });
+            }
+            if (shouldWriteElementFile) {
+                writeSource({
+                    file: plan.elementFileName,
+                    content: element.sourceCode,
+                    metadata: null,
+                });
+            }
+            writeSource({
+                file: inserted.fileName,
+                content: inserted.output,
+                metadata: { skipSequencePropsUpdate: true },
+            });
+            if (newComposition !== null && compositionCreation !== null) {
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright((0, format_log_file_location_1.formatLogFileLocation)({
+                    remotionRoot,
+                    absolutePath: compositionCreation.registrationFilePath,
+                    line: (_j = (_e = newComposition.symbolicatedStack) === null || _e === void 0 ? void 0 : _e.originalLineNumber) !== null && _j !== void 0 ? _j : 1,
+                }))} Created composition "${compositionId}"`);
+            }
+            const compositionLocationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
                 absolutePath: inserted.fileName,
-                remappings: inserted.nodePathRemappings,
-            },
-        ], null);
-        (0, undo_stack_1.pushTransactionToUndoStack)({
-            snapshots: [
-                ...(compositionCreation === null
-                    ? []
-                    : [
-                        {
-                            filePath: compositionCreation.registrationFilePath,
-                            oldContents: compositionCreation.registrationFileOldContents,
-                            newContents: compositionCreation.registrationFileNewContents,
-                            logLine: (_e = (_b = newComposition === null || newComposition === void 0 ? void 0 : newComposition.symbolicatedStack) === null || _b === void 0 ? void 0 : _b.originalLineNumber) !== null && _e !== void 0 ? _e : 1,
-                            nodePathRemappings: null,
-                        },
-                    ]),
-                ...(shouldWriteElementFile
-                    ? [
-                        {
-                            filePath: plan.elementFileName,
-                            oldContents: plan.existingElementSource,
-                            newContents: element.sourceCode,
-                            logLine: 1,
-                            nodePathRemappings: null,
-                        },
-                    ]
-                    : []),
-                {
-                    filePath: inserted.fileName,
-                    oldContents: compositionCreation === null ? inserted.oldContents : null,
-                    newContents: inserted.output,
-                    logLine: inserted.logLine,
-                    nodePathRemappings: inserted.nodePathRemappings,
-                },
-            ],
-            logLevel,
-            remotionRoot,
-            description: newComposition === null
-                ? {
-                    undoMessage: `↩️  Added ${element.displayName}`,
-                    redoMessage: `↪️  Added ${element.displayName}`,
-                }
-                : {
-                    undoMessage: `↩️  Installation of ${element.displayName} into composition "${compositionId}"`,
-                    redoMessage: `↪️  Installation of ${element.displayName} into composition "${compositionId}"`,
-                },
-            entryType: 'insert-jsx-element',
-            suppressHmrOnFileRestore: false,
-            undoRedoNavigation,
-        });
-        if (compositionCreation !== null) {
-            (0, undo_stack_1.suppressUndoStackInvalidation)(compositionCreation.registrationFilePath);
-        }
-        if (shouldWriteElementFile) {
-            (0, undo_stack_1.suppressUndoStackInvalidation)(plan.elementFileName);
-        }
-        (0, undo_stack_1.suppressUndoStackInvalidation)(inserted.fileName);
-        if (compositionCreation !== null) {
-            (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
-                file: compositionCreation.registrationFilePath,
-                content: compositionCreation.registrationFileNewContents,
-                originatorClientId: undefined,
-                metadata: null,
+                line: inserted.logLine,
             });
-        }
-        if (shouldWriteElementFile) {
-            (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
-                file: plan.elementFileName,
-                content: element.sourceCode,
-                originatorClientId: undefined,
-                metadata: null,
+            const elementLocationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: plan.elementFileName,
+                line: 1,
             });
+            const elementFileAction = elementSourcesDiffer
+                ? 'Overwrote existing Element source'
+                : plan.elementFileExists
+                    ? 'Reused existing Element source'
+                    : 'Created Element source';
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileAction}`);
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(compositionLocationLabel)} Added <${plan.componentName}>`);
+            (0, undo_stack_1.printUndoHint)(logLevel);
+            return { success: true, nodePathMutation };
         }
-        (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
-            file: inserted.fileName,
-            content: inserted.output,
-            originatorClientId: undefined,
-            metadata: { skipSequencePropsUpdate: true },
-        });
-        if (newComposition !== null && compositionCreation !== null) {
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright((0, format_log_file_location_1.formatLogFileLocation)({
-                remotionRoot,
-                absolutePath: compositionCreation.registrationFilePath,
-                line: (_f = (_c = newComposition.symbolicatedStack) === null || _c === void 0 ? void 0 : _c.originalLineNumber) !== null && _f !== void 0 ? _f : 1,
-            }))} Created composition "${compositionId}"`);
+        catch (err) {
+            if (undoEntryPushed) {
+                (0, undo_stack_1.discardLastUndoEntryAfterFailedCommit)();
+            }
+            for (const source of changedSources.reverse()) {
+                try {
+                    if ((0, node_fs_1.readFileSync)(source.filePath, 'utf8') !== source.newContents) {
+                        continue;
+                    }
+                    if (source.oldContents === null) {
+                        (0, node_fs_1.unlinkSync)(source.filePath);
+                    }
+                    else {
+                        (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                            file: source.filePath,
+                            content: source.oldContents,
+                            originatorClientId: undefined,
+                            metadata: null,
+                        });
+                    }
+                }
+                catch (_l) {
+                    // Preserve subsequent user changes and the original installation error.
+                }
+            }
+            for (const asset of createdAssets.reverse()) {
+                try {
+                    if ((0, node_fs_1.readFileSync)(asset.absolutePath).equals(asset.contents)) {
+                        (0, node_fs_1.unlinkSync)(asset.absolutePath);
+                    }
+                }
+                catch (_m) {
+                    // Preserve subsequent user changes and the original installation error.
+                }
+            }
+            return {
+                success: false,
+                type: 'error',
+                reason: err.message,
+                stack: err.stack,
+            };
         }
-        const compositionLocationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
-            remotionRoot,
-            absolutePath: inserted.fileName,
-            line: inserted.logLine,
-        });
-        const elementLocationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
-            remotionRoot,
-            absolutePath: plan.elementFileName,
-            line: 1,
-        });
-        const elementFileAction = elementSourcesDiffer
-            ? 'Overwrote existing Element source'
-            : plan.elementFileExists
-                ? 'Reused existing Element source'
-                : 'Created Element source';
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(elementLocationLabel)} ${elementFileAction}`);
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(compositionLocationLabel)} Added <${plan.componentName}>`);
-        (0, undo_stack_1.printUndoHint)(logLevel);
-        return { success: true, nodePathMutation };
-    }
-    catch (err) {
-        return {
-            success: false,
-            type: 'error',
-            reason: err.message,
-            stack: err.stack,
-        };
-    }
-});
+    });
+};
 exports.insertElementHandler = insertElementHandler;