@remotion/studio-server 4.0.470 → 4.0.472

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

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertJsxElementHandler = void 0;
+const renderer_1 = require("@remotion/renderer");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_composition_component_1 = require("../../helpers/resolve-composition-component");
+const format_log_file_location_1 = require("../format-log-file-location");
+const undo_stack_1 = require("../undo-stack");
+const log_update_1 = require("./log-updates/log-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const validateDimension = (name, value) => {
+    if (!Number.isFinite(value) || value < 1) {
+        throw new Error(`${name} must be a positive number`);
+    }
+};
+const validateElement = (element) => {
+    if (element.type === 'solid') {
+        validateDimension('width', element.width);
+        validateDimension('height', element.height);
+        return;
+    }
+    if (element.type === 'asset') {
+        if (!element.src || element.src.includes('\\')) {
+            throw new Error('Asset path must be a static file path');
+        }
+        if (element.dimensions) {
+            validateDimension('width', element.dimensions.width);
+            validateDimension('height', element.dimensions.height);
+        }
+        return;
+    }
+    throw new Error('Unsupported element type');
+};
+const getElementLabel = (element) => {
+    if (element.type === 'solid') {
+        return '<Solid>';
+    }
+    if (element.type === 'asset') {
+        if (element.assetType === 'image') {
+            return '<Img>';
+        }
+        if (element.assetType === 'video') {
+            return '<Video>';
+        }
+        if (element.assetType === 'gif') {
+            return '<Gif>';
+        }
+    }
+    throw new Error('Unsupported element type');
+};
+const insertJsxElementHandler = ({ input: { compositionFile, compositionId, element }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    try {
+        validateElement(element);
+        const elementLabel = getElementLabel(element);
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-jsx-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.type}"`);
+        const { fileName, source, oldContents, output, formatted, logLine } = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
+            remotionRoot,
+            compositionFile,
+            compositionId,
+            element,
+            prettierConfigOverride: null,
+        });
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: fileName,
+            oldContents,
+            newContents: output,
+            logLevel,
+            remotionRoot,
+            logLine,
+            description: {
+                undoMessage: `↩️  Added ${elementLabel}`,
+                redoMessage: `↪️  Added ${elementLabel}`,
+            },
+            entryType: 'insert-jsx-element',
+            suppressHmrOnFileRestore: false,
+        });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(fileName);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(fileName, output, undefined);
+        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot,
+            absolutePath: fileName,
+            line: logLine,
+        });
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Added ${elementLabel}`);
+        if (!formatted) {
+            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        }
+        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[insert-jsx-element] Wrote ${source}${formatted ? ' (formatted)' : ''}`);
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
+    }
+});
+exports.insertJsxElementHandler = insertJsxElementHandler;

package/dist/preview-server/routes/paste-effects.d.ts

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

package/dist/preview-server/routes/paste-effects.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pasteEffectsHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const paste_effects_1 = require("../../codemods/paste-effects");
+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 undo_stack_1 = require("../undo-stack");
+const formatting_1 = require("./log-updates/formatting");
+const log_update_1 = require("./log-updates/log-update");
+const getPastedEffectDescription = (effectLabels) => {
+    if (effectLabels.length === 1) {
+        return effectLabels[0];
+    }
+    return `${effectLabels.length} effects`;
+};
+const pasteEffectsHandler = async ({ input: { targetFileName, targetSequenceNodePath, type, effects, clientId }, remotionRoot, logLevel, }) => {
+    try {
+        if (effects.length === 0 && type !== 'effects-replacing') {
+            throw new Error('No effects were specified for pasting');
+        }
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[paste-effects] Received request to paste ${effects.length} effect${effects.length === 1 ? '' : 's'} into fileName="${targetFileName}"`);
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: targetFileName,
+            action: 'modify',
+        });
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        const { output, formatted, effectLabels, logLine } = await (0, paste_effects_1.pasteEffects)({
+            input: fileContents,
+            targetFileName,
+            targetSequenceNodePath: targetSequenceNodePath.nodePath,
+            type,
+            effects,
+        });
+        const effectDescription = getPastedEffectDescription(effectLabels);
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: null,
+            logLevel,
+            remotionRoot,
+            logLine,
+            description: {
+                undoMessage: `↩️  Pasting of ${effectDescription}`,
+                redoMessage: `↪️  Pasting of ${effectDescription}`,
+            },
+            entryType: 'paste-effects',
+            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}`)} Pasted ${(0, formatting_1.attrName)(effectDescription)}`);
+        if (!formatted) {
+            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        }
+        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[paste-effects] Wrote ${fileRelativeToRoot}${formatted ? ' (formatted)' : ''}`);
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
+    }
+};
+exports.pasteEffectsHandler = pasteEffectsHandler;

package/dist/preview-server/routes/reorder-effect.d.ts

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

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reorderEffectHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const reorder_effect_1 = require("../../codemods/reorder-effect");
+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 undo_stack_1 = require("../undo-stack");
+const formatting_1 = require("./log-updates/formatting");
+const log_update_1 = require("./log-updates/log-update");
+const reorderEffectHandler = async ({ input: { fileName, sequenceNodePath, fromIndex, toIndex, clientId }, remotionRoot, logLevel, }) => {
+    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)({
+            remotionRoot,
+            fileName,
+            action: 'modify',
+        });
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        const { output, formatted, effectLabel, logLine } = await (0, reorder_effect_1.reorderEffect)({
+            input: fileContents,
+            sequenceNodePath: sequenceNodePath.nodePath,
+            fromIndex,
+            toIndex,
+        });
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: null,
+            logLevel,
+            remotionRoot,
+            logLine,
+            description: {
+                undoMessage: `↩️  Reordering of ${effectLabel}`,
+                redoMessage: `↪️  Reordering of ${effectLabel}`,
+            },
+            entryType: 'reorder-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}`)} Reordered ${(0, formatting_1.attrName)(effectLabel)}`);
+        if (!formatted) {
+            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        }
+        renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[reorder-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,
+        };
+    }
+};
+exports.reorderEffectHandler = reorderEffectHandler;

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

@@ -103,6 +103,7 @@ const saveEffectPropsHandler = ({ input: { fileName, sequenceNodePath, effectInd
         };
     }
     return (0, can_update_effect_props_1.computeEffectPropStatus)({
+        ast,
         jsx,
         effectIndex,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),

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

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToSequenceProps = void 0;
 const sequence_props_watchers_1 = require("../sequence-props-watchers");
-const subscribeToSequenceProps = ({ input: { fileName, line, column, keys, effects, clientId }, remotionRoot, logLevel, }) => {
+const subscribeToSequenceProps = ({ input: { fileName, line, column, nodePath, keys, effects, clientId }, remotionRoot, logLevel, }) => {
     const result = (0, sequence_props_watchers_1.subscribeToSequencePropsWatchers)({
         fileName,
         line,
         column,
+        nodePath,
         keys,
         effects,
         remotionRoot,

package/dist/preview-server/sequence-props-watchers.d.ts

@@ -1,9 +1,10 @@
 import { type SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
 import type { SequenceNodePath } from 'remotion';
-export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, keys, effects, remotionRoot, clientId, logLevel, }: {
+export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, nodePath: preferredNodePath, keys, effects, remotionRoot, clientId, logLevel, }: {
     fileName: string;
     line: number;
     column: number;
+    nodePath: SequenceNodePath | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;

package/dist/preview-server/sequence-props-watchers.js

@@ -13,7 +13,26 @@ const live_events_1 = require("./live-events");
 const node_path_cache_1 = require("./node-path-cache");
 const can_update_sequence_props_1 = require("./routes/can-update-sequence-props");
 const sequencePropsWatchers = {};
-const getSequencePropsStatus = ({ fileName, line, column, keys, effects, remotionRoot, logLevel, }) => {
+const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, keys, effects, remotionRoot, logLevel, }) => {
+    if (preferredNodePath) {
+        const fromNodePath = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+            fileName,
+            nodePath: preferredNodePath,
+            keys,
+            effects,
+            remotionRoot,
+        });
+        return {
+            status: fromNodePath,
+            nodePath: {
+                absolutePath: node_path_1.default.resolve(remotionRoot, fileName),
+                nodePath: preferredNodePath,
+                sequenceKeys: keys,
+                effectKeys: effects,
+            },
+            success: true,
+        };
+    }
     // Try cached nodePath first (handles stale source maps after suppressed rebuilds)
     const cachedNodePath = (0, node_path_cache_1.getCachedNodePath)(fileName, line, column);
     if (cachedNodePath) {
@@ -47,12 +66,13 @@ const getSequencePropsStatus = ({ fileName, line, column, keys, effects, remotio
     });
     return status;
 };
-const subscribeToSequencePropsWatchers = ({ fileName, line, column, keys, effects, remotionRoot, clientId, logLevel, }) => {
+const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: preferredNodePath, keys, effects, remotionRoot, clientId, logLevel, }) => {
     var _a;
     const initialResult = getSequencePropsStatus({
         fileName,
         line,
         column,
+        preferredNodePath,
         keys,
         effects,
         remotionRoot,

package/dist/preview-server/undo-stack.d.ts

@@ -3,7 +3,7 @@ export interface UndoEntryDescription {
     undoMessage: string;
     redoMessage: string;
 }
-type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'delete-effect' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'delete-composition' | 'rename-composition' | 'duplicate-composition';
+type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'paste-effects' | 'reorder-effect' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'duplicate-composition' | 'delete-folder' | 'rename-folder';
 type UndoEntrySnapshot = {
     filePath: string;
     oldContents: string;
@@ -27,18 +27,32 @@ type UndoEntry = {
     entryType: 'sequence-props';
 } | {
     entryType: 'effect-props';
+} | {
+    entryType: 'keyframe-delete';
+} | {
+    entryType: 'add-effect';
 } | {
     entryType: 'delete-effect';
+} | {
+    entryType: 'paste-effects';
+} | {
+    entryType: 'reorder-effect';
 } | {
     entryType: 'delete-jsx-node';
 } | {
     entryType: 'duplicate-jsx-node';
+} | {
+    entryType: 'insert-jsx-element';
 } | {
     entryType: 'delete-composition';
 } | {
     entryType: 'rename-composition';
 } | {
     entryType: 'duplicate-composition';
+} | {
+    entryType: 'delete-folder';
+} | {
+    entryType: 'rename-folder';
 });
 export declare function pushToUndoStack({ filePath, oldContents, newContents, logLevel, remotionRoot, logLine, description, entryType, suppressHmrOnFileRestore }: {
     filePath: string;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-server"
 	},
 	"name": "@remotion/studio-server",
-	"version": "4.0.470",
+	"version": "4.0.472",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.470",
+		"remotion": "4.0.472",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.470",
-		"@remotion/renderer": "4.0.470",
-		"@remotion/studio-shared": "4.0.470",
+		"@remotion/bundler": "4.0.472",
+		"@remotion/renderer": "4.0.472",
+		"@remotion/studio-shared": "4.0.472",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -39,7 +39,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.470",
+		"@remotion/eslint-config-internal": "4.0.472",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"