@remotion/studio-server 4.0.527 → 4.0.528

package/dist/preview-server/routes/install-dependency.js

@@ -72,16 +72,26 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { dependenc
                     YARN_ENABLE_SCRIPTS: 'false',
                 },
             });
+            let stderr = '';
             cmd.on('error', reject);
             cmd.stdout.on('data', (d) => d
                 .toString()
                 .trim()
                 .split('\n')
                 .forEach((line) => renderer_1.RenderInternals.Log.info({ indent: true, logLevel }, line)));
-            cmd.stdout.on('end', resolve);
-            cmd.on('close', (code, signal) => code === 0
-                ? resolve()
-                : reject(new Error(`Command exited with code ${code} and signal ${signal}`)));
+            cmd.stderr.on('data', (data) => {
+                stderr += data.toString();
+            });
+            cmd.on('close', (code, signal) => {
+                if (code === 0) {
+                    resolve();
+                    return;
+                }
+                const packageManagerError = stderr.trim();
+                reject(new Error(packageManagerError.length > 0
+                    ? `Package installation failed:\n${packageManagerError}`
+                    : `Package installation failed: Command exited with code ${code} and signal ${signal}`));
+            });
         });
         await invalidateBundle();
         renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.gray('╰─ '), `Done in ${Date.now() - time}ms`);

package/dist/preview-server/routes/prepare-element-install.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.prepareElementInstallHandler = void 0;
+const studio_protocol_1 = require("@remotion/studio-protocol");
 const element_install_plan_1 = require("./element-install-plan");
 const source_file_write_queue_1 = require("./source-file-write-queue");
 const prepareElementInstallHandler = ({ entryPoint, input, remotionRoot }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
+        studio_protocol_1.StudioProtocolInternals.assertElementAssets(input.element.assets);
+        studio_protocol_1.StudioProtocolInternals.assertElementAssetReferences(input.element);
         const plan = await (0, element_install_plan_1.getElementInstallPlan)({
             ...input,
             entryPoint,

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

@@ -11,9 +11,10 @@ const undo_stack_1 = require("../undo-stack");
 const formatting_1 = require("./log-updates/formatting");
 const log_update_1 = require("./log-updates/log-update");
 const source_file_write_queue_1 = require("./source-file-write-queue");
-const { reorderEffect } = codemods_1.CodemodsInternals;
 const reorderEffectHandler = ({ input: { fileName, sequenceNodePath, fromIndex, toIndex, clientId }, remotionRoot, logLevel, }) => {
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+        var _a;
+        var _b;
         try {
             renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[reorder-effect] Received request for fileName="${fileName}" fromIndex=${fromIndex} toIndex=${toIndex}`);
             const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
@@ -22,12 +23,17 @@ const reorderEffectHandler = ({ input: { fileName, sequenceNodePath, fromIndex,
                 action: 'modify',
             });
             const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-            const { output, formatted, effectLabel, logLine } = await reorderEffect({
-                input: fileContents,
-                sequenceNodePath: sequenceNodePath.nodePath,
-                fromIndex,
+            const result = await (0, codemods_1.reorderEffect)({
+                project: { files: { [absolutePath]: fileContents }, rootDir: remotionRoot },
+                effect: {
+                    filePath: absolutePath,
+                    nodePath: sequenceNodePath.nodePath,
+                    effectIndex: fromIndex,
+                },
                 toIndex,
             });
+            const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
+            const { formatted, effectLabel, logLine } = result.editDetails[0];
             (0, undo_stack_1.pushToUndoStack)({
                 filePath: absolutePath,
                 oldContents: fileContents,

package/dist/preview-server/routes/reorder-sequence.js

@@ -11,9 +11,10 @@ const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
 const undo_stack_1 = require("../undo-stack");
 const formatting_1 = require("./log-updates/formatting");
 const source_file_write_queue_1 = require("./source-file-write-queue");
-const { reorderSequence } = codemods_1.CodemodsInternals;
 const reorderSequenceHandler = ({ input: { fileName, sourceNodePath, targetNodePath, position, clientId }, remotionRoot, logLevel, }) => {
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+        var _a;
+        var _b;
         try {
             renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[reorder-sequence] Received request for fileName="${fileName}" position=${position}`);
             const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
@@ -22,12 +23,15 @@ const reorderSequenceHandler = ({ input: { fileName, sourceNodePath, targetNodeP
                 action: 'modify',
             });
             const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-            const { output, sequenceLabel, logLine, nodePathRemappings } = await reorderSequence({
-                input: fileContents,
-                sourceNodePath: sourceNodePath.nodePath,
-                targetNodePath: targetNodePath.nodePath,
+            const result = await (0, codemods_1.reorderJsxNode)({
+                project: { files: { [absolutePath]: fileContents }, rootDir: remotionRoot },
+                node: { filePath: absolutePath, nodePath: sourceNodePath.nodePath },
+                target: { filePath: absolutePath, nodePath: targetNodePath.nodePath },
                 position,
             });
+            const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
+            const { sequenceLabel, logLine } = result.editDetails[0];
+            const nodePathRemappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath }) => ({ oldNodePath, newNodePath }));
             const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
                 {
                     absolutePath,

package/dist/preview-server/routes/replace-video-source.d.ts

@@ -0,0 +1,3 @@
+import type { ReplaceVideoSourceRequest, ReplaceVideoSourceResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const replaceVideoSourceHandler: ApiHandler<ReplaceVideoSourceRequest, ReplaceVideoSourceResponse>;

package/dist/preview-server/routes/replace-video-source.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceVideoSourceHandler = void 0;
+const node_fs_1 = require("node:fs");
+const codemods_1 = require("@remotion/codemods");
+const renderer_1 = require("@remotion/renderer");
+const no_react_1 = require("remotion/no-react");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const format_log_file_location_1 = require("../format-log-file-location");
+const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
+const undo_stack_1 = require("../undo-stack");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const replaceVideoSourceHandler = ({ input: { fileName, nodePath, src }, remotionRoot, logLevel }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(() => {
+    var _a;
+    var _b, _c;
+    try {
+        const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName,
+            action: 'modify',
+        });
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        const result = (0, codemods_1.updateJsxNodeProps)({
+            project: {
+                files: { [absolutePath]: fileContents },
+                rootDir: remotionRoot,
+            },
+            node: { filePath: absolutePath, nodePath },
+            updates: [
+                {
+                    key: 'src',
+                    value: `${no_react_1.NoReactInternals.FILE_TOKEN}${src.split('/').map(encodeURIComponent).join('/')}`,
+                    defaultValue: null,
+                },
+            ],
+        });
+        const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
+        const { logLine } = result;
+        const nodePathRemappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath }) => ({ oldNodePath, newNodePath }));
+        const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([{ absolutePath, remappings: nodePathRemappings }], null);
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: null,
+            logLevel,
+            remotionRoot,
+            logLine,
+            description: {
+                undoMessage: '↩️  Removed video background',
+                redoMessage: '↪️  Removed video background',
+            },
+            entryType: 'replace-video-source',
+            suppressHmrOnFileRestore: false,
+            nodePathRemappings,
+        });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+            file: absolutePath,
+            content: output,
+            originatorClientId: undefined,
+            metadata: { skipSequencePropsUpdate: true },
+        });
+        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot,
+            absolutePath,
+            line: logLine,
+        });
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(locationLabel)} Replaced video source`);
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return Promise.resolve({ success: true, nodePathMutation });
+    }
+    catch (error) {
+        return Promise.resolve({
+            success: false,
+            reason: error.message,
+            stack: (_c = error.stack) !== null && _c !== void 0 ? _c : '',
+        });
+    }
+});
+exports.replaceVideoSourceHandler = replaceVideoSourceHandler;

package/dist/preview-server/routes/save-sequence-props.js

@@ -191,7 +191,6 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     }
     const snapshots = [];
     const outputByPath = new Map();
-    const statusAstByPath = new Map();
     const resultByIndex = new Map();
     const updatedNodePaths = new Map();
     const sequenceKeyframeLogs = [];
@@ -200,20 +199,14 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     for (const [absolutePath, group] of editGroups) {
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
         let output = fileContents;
-        const cachedStatusAst = group.edits.length > 0
-            ? (0, can_update_sequence_props_1.takeCachedSequencePropsStatusAst)(fileContents)
-            : null;
-        let sequencePropsAst = null;
         let firstLogLine = Number.POSITIVE_INFINITY;
         if (group.edits.length > 0) {
-            const { output: sequencePropsOutput, formatted, results: updateResults, ast, } = await (0, update_sequence_props_1.updateMultipleSequenceProps)({
+            const { output: sequencePropsOutput, formatted, results: updateResults, } = await (0, update_sequence_props_1.updateMultipleSequenceProps)({
                 input: output,
                 changes: group.edits.map(exports.convertSequencePropEditToCodemodChange),
                 prettierConfigOverride: null,
-                ast: cachedStatusAst !== null && cachedStatusAst !== void 0 ? cachedStatusAst : undefined,
             });
             output = sequencePropsOutput;
-            sequencePropsAst = ast;
             const firstUpdate = updateResults[0];
             if (firstUpdate) {
                 firstLogLine = Math.min(firstLogLine, firstUpdate.logLine);
@@ -373,13 +366,6 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
                 });
             }
         }
-        if (sequencePropsAst &&
-            group.captionPatches.length === 0 &&
-            group.addedKeyframes.length === 0 &&
-            group.movedSequenceKeyframes.length === 0 &&
-            group.effectKeyframes.length === 0) {
-            statusAstByPath.set(absolutePath, sequencePropsAst);
-        }
         outputByPath.set(absolutePath, output);
         snapshots.push({
             filePath: absolutePath,
@@ -505,16 +491,10 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
             effects: [],
             videoConfigValues: target.nodePath.videoConfigValues,
         };
-        const statusAst = statusAstByPath.get(absolutePath);
-        const newStatus = statusAst
-            ? (0, can_update_sequence_props_1.computeSequencePropsStatusFromAst)({
-                ...statusInput,
-                ast: statusAst,
-            })
-            : (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
-                ...statusInput,
-                fileContents: output,
-            });
+        const newStatus = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
+            ...statusInput,
+            fileContents: output,
+        });
         return {
             fileName: target.fileName,
             nodePath: target.nodePath,
@@ -527,7 +507,6 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     }
     return {
         canUpdate: true,
-        props: firstResult.props,
         results,
     };
 });

package/dist/preview-server/routes/split-jsx-sequence.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.splitJsxSequenceHandler = void 0;
 const node_fs_1 = require("node:fs");
+const codemods_1 = require("@remotion/codemods");
 const renderer_1 = require("@remotion/renderer");
-const split_jsx_sequence_1 = require("../../codemods/split-jsx-sequence");
 const file_watcher_1 = require("../../file-watcher");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const format_log_file_location_1 = require("../format-log-file-location");
@@ -24,20 +24,28 @@ const splitJsxSequenceHandler = ({ input: { sequences }, remotionRoot, logLevel
             sequencesByFileName.set(sequence.fileName, fileSequences);
         }
         const updates = await Promise.all([...sequencesByFileName].map(async ([fileName, fileSequences]) => {
+            var _a;
+            var _b;
             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, nodeLabels, logLines, nodePathRemappings } = await (0, split_jsx_sequence_1.splitJsxSequences)({
-                input: fileContents,
+            const result = await (0, codemods_1.splitSequences)({
+                project: {
+                    files: { [absolutePath]: fileContents },
+                    rootDir: remotionRoot,
+                },
                 splits: fileSequences.map(({ nodePath, sequenceKeys, splitFrame }) => ({
-                    nodePath,
+                    node: { filePath: absolutePath, nodePath },
                     sequenceKeys,
-                    splitFrame,
+                    frame: splitFrame,
                 })),
             });
+            const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
+            const { nodeLabels, logLines } = result.editDetails[0];
+            const nodePathRemappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath }) => ({ oldNodePath, newNodePath }));
             return {
                 absolutePath,
                 fileContents,

package/dist/preview-server/routes/split-video-from-audio.js

@@ -11,8 +11,9 @@ const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
 const undo_stack_1 = require("../undo-stack");
 const log_update_1 = require("./log-updates/log-update");
 const source_file_write_queue_1 = require("./source-file-write-queue");
-const { splitVideoFromAudio } = codemods_1.CodemodsInternals;
 const splitVideoFromAudioHandler = ({ input: { fileName, nodePath }, remotionRoot, logLevel }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a;
+    var _b;
     try {
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[split-video-from-audio] Received request for fileName="${fileName}"`);
         const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
@@ -21,10 +22,13 @@ const splitVideoFromAudioHandler = ({ input: { fileName, nodePath }, remotionRoo
             action: 'modify',
         });
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, formatted, nodeLabel, logLine, nodePathRemappings } = await splitVideoFromAudio({
-            input: fileContents,
-            nodePath,
+        const result = await (0, codemods_1.detachAudio)({
+            project: { files: { [absolutePath]: fileContents }, rootDir: remotionRoot },
+            node: { filePath: absolutePath, nodePath },
         });
+        const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
+        const { formatted, nodeLabel, logLine } = result.editDetails[0];
+        const nodePathRemappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath }) => ({ oldNodePath, newNodePath }));
         const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
             {
                 absolutePath,

package/dist/preview-server/routes/subscribe-to-sequence-props.js

@@ -4,14 +4,13 @@ exports.subscribeToSequenceProps = void 0;
 const sequence_props_watchers_1 = require("../sequence-props-watchers");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
 const subscribeToSequenceProps = ({ input, remotionRoot, logLevel }) => {
-    var _a, _b;
-    const requests = (_a = input.requests) !== null && _a !== void 0 ? _a : [input];
+    var _a;
     const unresolvedByFile = new Map();
-    for (const [index, request] of requests.entries()) {
+    for (const [index, request] of input.requests.entries()) {
         if (request.nodePath !== null) {
             continue;
         }
-        const unresolved = (_b = unresolvedByFile.get(request.fileName)) !== null && _b !== void 0 ? _b : [];
+        const unresolved = (_a = unresolvedByFile.get(request.fileName)) !== null && _a !== void 0 ? _a : [];
         unresolved.push({ index, line: request.line, column: request.column });
         unresolvedByFile.set(request.fileName, unresolved);
     }
@@ -29,11 +28,11 @@ const subscribeToSequenceProps = ({ input, remotionRoot, logLevel }) => {
                 }
             }
         }
-        catch (_c) {
+        catch (_b) {
             // Let each subscription produce its usual not-found response.
         }
     }
-    const results = requests.map(({ fileName, line, column, nodePath, componentIdentity, keys, assetKeys = [], effects, clientId, videoConfigValues, }, index) => (0, sequence_props_watchers_1.subscribeToSequencePropsWatchers)({
+    const results = input.requests.map(({ fileName, line, column, nodePath, componentIdentity, keys, assetKeys, effects, clientId, videoConfigValues, }, index) => (0, sequence_props_watchers_1.subscribeToSequencePropsWatchers)({
         fileName,
         line,
         column,
@@ -48,9 +47,6 @@ const subscribeToSequenceProps = ({ input, remotionRoot, logLevel }) => {
         videoConfigValues,
         logLevel,
     }));
-    return Promise.resolve({
-        ...results[0],
-        results,
-    });
+    return Promise.resolve({ results });
 };
 exports.subscribeToSequenceProps = subscribeToSequenceProps;

package/dist/preview-server/routes/update-config.js

@@ -83,6 +83,22 @@ const validateUpdates = (updates) => {
         }
         setters.add(setter);
         if (setter === 'addElementLibrary') {
+            if (type === 'delete') {
+                if (typeof update.value !== 'string') {
+                    return 'Deleting an Element Library requires its URL.';
+                }
+                try {
+                    const parsedUrl = new URL(update.value);
+                    if (parsedUrl.protocol !== 'http:' &&
+                        parsedUrl.protocol !== 'https:') {
+                        return 'Deleting an Element Library requires an HTTP or HTTPS URL.';
+                    }
+                }
+                catch (_a) {
+                    return 'Deleting an Element Library requires an HTTP or HTTPS URL.';
+                }
+                continue;
+            }
             if (type !== 'set' ||
                 !('value' in update) ||
                 typeof update.value !== 'object' ||
@@ -101,7 +117,7 @@ const validateUpdates = (updates) => {
                     return 'Config.addElementLibrary() expects an HTTP or HTTPS URL.';
                 }
             }
-            catch (_a) {
+            catch (_b) {
                 return 'Config.addElementLibrary() expects an HTTP or HTTPS URL.';
             }
             if (displayName !== undefined &&
@@ -111,6 +127,9 @@ const validateUpdates = (updates) => {
             continue;
         }
         if (type === 'delete') {
+            if (update.value !== undefined) {
+                return `Config.${setter}() does not accept a value when deleting.`;
+            }
             continue;
         }
         if (type !== 'set' ||
@@ -122,13 +141,18 @@ const validateUpdates = (updates) => {
     return null;
 };
 const updateConfigFile = ({ configContents, existingElementLibraryUrls, updates, }) => {
+    var _a;
     const setters = new Set(updates.map(({ setter }) => setter));
+    const deletedElementLibraryValue = (_a = updates.find((update) => update.setter === 'addElementLibrary' && update.type === 'delete')) === null || _a === void 0 ? void 0 : _a.value;
+    const deletedElementLibraryUrl = typeof deletedElementLibraryValue === 'string'
+        ? new URL(deletedElementLibraryValue).href
+        : null;
     const elementLibraryUrls = new Set();
     for (const url of existingElementLibraryUrls) {
         try {
             elementLibraryUrls.add(new URL(url).href);
         }
-        catch (_a) {
+        catch (_b) {
             // Runtime config only contains validated URLs.
         }
     }
@@ -163,6 +187,12 @@ const updateConfigFile = ({ configContents, existingElementLibraryUrls, updates,
                         urlProperty.value.type === 'StringLiteral') {
                         try {
                             const parsedUrl = new URL(urlProperty.value.value);
+                            if (deletedElementLibraryUrl !== null &&
+                                parsedUrl.href === deletedElementLibraryUrl) {
+                                path.prune();
+                                changed = true;
+                                return false;
+                            }
                             if (parsedUrl.protocol === 'http:' ||
                                 parsedUrl.protocol === 'https:') {
                                 elementLibraryUrls.add(parsedUrl.href);
@@ -285,6 +315,12 @@ const updateConfigHandler = async ({ input, configFile, getStudioRuntimeConfig,
         updates: input.updates,
     });
     if (updatedConfig === configContents) {
+        if (input.updates.some((update) => update.setter === 'addElementLibrary' && update.type === 'delete')) {
+            return {
+                success: false,
+                reason: 'Could not find a matching literal Element Library URL in the config file.',
+            };
+        }
         return { success: true };
     }
     (0, file_watcher_1.writeFileAndNotifyFileWatchers)({

package/dist/preview-server/routes/update-default-props.js

@@ -11,9 +11,10 @@ const undo_stack_1 = require("../undo-stack");
 const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const can_update_default_props_1 = require("./can-update-default-props");
 const source_file_write_queue_1 = require("./source-file-write-queue");
-const { getCompositionDefaultPropsLine, updateDefaultProps } = codemods_1.CodemodsInternals;
 const updateDefaultPropsHandler = ({ input: { compositionId, defaultProps, enumPaths }, remotionRoot, entryPoint, logLevel, }) => {
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+        var _a;
+        var _b;
         try {
             renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[update-default-props] Received request for compositionId="${compositionId}"`);
             const projectInfo = await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint);
@@ -22,16 +23,18 @@ const updateDefaultPropsHandler = ({ input: { compositionId, defaultProps, enumP
             }
             (0, can_update_default_props_1.checkIfTypeScriptFile)(projectInfo.rootFile);
             const fileContents = (0, node_fs_1.readFileSync)(projectInfo.rootFile, 'utf-8');
-            const logLine = getCompositionDefaultPropsLine({
-                input: fileContents,
-                compositionId,
-            });
-            const { output } = updateDefaultProps({
+            const result = (0, codemods_1.setCompositionDefaultProps)({
+                project: {
+                    files: { [projectInfo.rootFile]: fileContents },
+                    rootDir: remotionRoot,
+                },
+                compositionFile: projectInfo.rootFile,
                 compositionId,
-                input: fileContents,
-                newDefaultProps: JSON.parse(defaultProps),
+                defaultProps: JSON.parse(defaultProps),
                 enumPaths,
             });
+            const { logLine } = result;
+            const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
             (0, undo_stack_1.pushToUndoStack)({
                 filePath: projectInfo.rootFile,
                 oldContents: fileContents,

package/dist/preview-server/routes/wrap-jsx-node.d.ts

@@ -0,0 +1,3 @@
+import type { WrapJsxNodeRequest, WrapJsxNodeResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const wrapJsxNodeHandler: ApiHandler<WrapJsxNodeRequest, WrapJsxNodeResponse>;

package/dist/preview-server/routes/wrap-jsx-node.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapJsxNodeHandler = void 0;
+const node_fs_1 = require("node:fs");
+const codemods_1 = require("@remotion/codemods");
+const renderer_1 = require("@remotion/renderer");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const format_log_file_location_1 = require("../format-log-file-location");
+const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
+const undo_stack_1 = require("../undo-stack");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const wrapJsxNodeHandler = ({ input: { fileName, nodePath, wrapper, width, height }, remotionRoot, logLevel, }) => {
+    return (0, source_file_write_queue_1.withSourceFileWriteQueue)(() => {
+        var _a;
+        try {
+            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 eligibility = (0, codemods_1.canWrapJsxNode)({ input: fileContents, nodePath });
+            if (wrapper === null) {
+                return Promise.resolve({
+                    success: true,
+                    ...eligibility,
+                    nodePathMutation: null,
+                });
+            }
+            if (!eligibility.canWrap ||
+                (wrapper === 'HtmlInCanvas' && !eligibility.canWrapHtmlInCanvas)) {
+                throw new Error('This JSX element cannot be wrapped');
+            }
+            const result = (0, codemods_1.wrapJsxNode)({
+                project: { files: { [absolutePath]: fileContents }, rootDir: remotionRoot },
+                node: { filePath: absolutePath, nodePath },
+                wrapper,
+                width: width !== null && width !== void 0 ? width : 0,
+                height: height !== null && height !== void 0 ? height : 0,
+            });
+            const change = result.changes.find(({ filePath }) => filePath === absolutePath);
+            if ((change === null || change === void 0 ? void 0 : change.previousContents) !== fileContents ||
+                change.nextContents === null) {
+                throw new Error('Could not wrap JSX node');
+            }
+            const output = change.nextContents;
+            const remappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath }) => ({ oldNodePath, newNodePath }));
+            const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([{ absolutePath, remappings }], null);
+            const line = result.logLine;
+            (0, undo_stack_1.pushTransactionToUndoStack)({
+                snapshots: [
+                    {
+                        filePath: absolutePath,
+                        oldContents: fileContents,
+                        newContents: null,
+                        logLine: line,
+                        nodePathRemappings: remappings,
+                    },
+                ],
+                logLevel,
+                remotionRoot,
+                description: {
+                    undoMessage: `↩️  Wrapping in ${wrapper}`,
+                    redoMessage: `↪️  Wrapping in ${wrapper}`,
+                },
+                entryType: 'wrap-jsx-node',
+                suppressHmrOnFileRestore: false,
+                undoRedoNavigation: null,
+            });
+            (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                file: absolutePath,
+                content: output,
+                originatorClientId: undefined,
+                metadata: { skipSequencePropsUpdate: true },
+            });
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath,
+                line,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(locationLabel)} Wrapped JSX in <${wrapper}>`);
+            renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[wrap-jsx-node] Wrote ${fileRelativeToRoot}`);
+            (0, undo_stack_1.printUndoHint)(logLevel);
+            return Promise.resolve({ success: true, ...eligibility, nodePathMutation });
+        }
+        catch (err) {
+            return Promise.resolve({
+                success: false,
+                reason: err.message,
+                stack: (_a = err.stack) !== null && _a !== void 0 ? _a : '',
+            });
+        }
+    });
+};
+exports.wrapJsxNodeHandler = wrapJsxNodeHandler;

package/dist/preview-server/studio-protocol/handle-discovery.js

@@ -105,7 +105,7 @@ const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRo
                     {
                         type: 'install-element',
                         payloadType: 'remotion-element',
-                        payloadVersions: [1],
+                        payloadVersions: [1, 2],
                         target: issuedInstallTarget === null || installTarget === null
                             ? null
                             : {