@remotion/studio-server 4.0.498 → 4.0.500

package/dist/preview-server/api-routes.js

@@ -19,6 +19,7 @@ const delete_static_file_1 = require("./routes/delete-static-file");
 const download_remote_asset_1 = require("./routes/download-remote-asset");
 const duplicate_effect_1 = require("./routes/duplicate-effect");
 const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
+const find_in_file_1 = require("./routes/find-in-file");
 const insert_element_1 = require("./routes/insert-element");
 const insert_jsx_element_1 = require("./routes/insert-jsx-element");
 const install_dependency_1 = require("./routes/install-dependency");
@@ -36,6 +37,7 @@ const reorder_effect_1 = require("./routes/reorder-effect");
 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_multiple_effect_props_1 = require("./routes/save-multiple-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");
@@ -61,6 +63,7 @@ exports.allApiRoutes = {
     '/api/subscribe-to-file-existence': subscribe_to_file_existence_1.subscribeToFileExistence,
     '/api/remove-render': remove_render_1.handleRemoveRender,
     '/api/open-in-editor': open_in_editor_1.openInEditorHandler,
+    '/api/find-in-file': find_in_file_1.findInFileHandler,
     '/api/open-in-file-explorer': open_in_file_explorer_1.handleOpenInFileExplorer,
     '/api/register-client-render': register_client_render_1.registerClientRenderHandler,
     '/api/unregister-client-render': unregister_client_render_1.unregisterClientRenderHandler,
@@ -73,6 +76,7 @@ exports.allApiRoutes = {
     '/api/unsubscribe-from-sequence-props': unsubscribe_from_sequence_props_1.unsubscribeFromSequenceProps,
     '/api/save-sequence-props': save_sequence_props_1.saveSequencePropsHandler,
     '/api/save-effect-props': save_effect_props_1.saveEffectPropsHandler,
+    '/api/save-multiple-effect-props': save_multiple_effect_props_1.saveMultipleEffectPropsHandler,
     '/api/add-effect': add_effect_1.addEffectHandler,
     '/api/reorder-effect': reorder_effect_1.reorderEffectHandler,
     '/api/duplicate-effect': duplicate_effect_1.duplicateEffectHandler,

package/dist/preview-server/routes/find-in-file.d.ts

@@ -0,0 +1,12 @@
+import type { FindInFileRequest, FindInFileResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const findSearchPosition: ({ contents, lineNumber, columnNumber, search, }: {
+    contents: string;
+    lineNumber: number;
+    columnNumber: number;
+    search: string;
+}) => {
+    lineNumber: number;
+    columnNumber: number;
+};
+export declare const findInFileHandler: ApiHandler<FindInFileRequest, FindInFileResponse>;

package/dist/preview-server/routes/find-in-file.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findInFileHandler = exports.findSearchPosition = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const findSearchPosition = ({ contents, lineNumber, columnNumber, search, }) => {
+    const lines = contents.split(/\r?\n/);
+    const startLineIndex = Math.max(0, lineNumber - 1);
+    for (let lineIndex = startLineIndex; lineIndex < lines.length; lineIndex++) {
+        const startColumnIndex = lineIndex === startLineIndex ? Math.max(0, columnNumber - 1) : 0;
+        const foundColumnIndex = lines[lineIndex].indexOf(search, startColumnIndex);
+        if (foundColumnIndex !== -1) {
+            return {
+                lineNumber: lineIndex + 1,
+                columnNumber: foundColumnIndex + 1,
+            };
+        }
+    }
+    return { lineNumber, columnNumber };
+};
+exports.findSearchPosition = findSearchPosition;
+const findInFileHandler = async ({ input, remotionRoot }) => {
+    const { fileName, lineNumber, columnNumber, search } = input;
+    const contents = await node_fs_1.default.promises.readFile(node_path_1.default.resolve(remotionRoot, fileName), 'utf-8');
+    return (0, exports.findSearchPosition)({
+        contents,
+        lineNumber,
+        columnNumber,
+        search,
+    });
+};
+exports.findInFileHandler = findInFileHandler;

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertElementHandler = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const renderer_1 = require("@remotion/renderer");
-const studio_shared_1 = require("@remotion/studio-shared");
 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");
@@ -56,7 +56,7 @@ const validateDimensions = (dimensions) => {
     }
 };
 const validateElement = (element) => {
-    if ((0, studio_shared_1.makeElementFileNameFromSlug)(element.slug) === null) {
+    if (drag_and_drop_1.DragAndDropInternals.makeElementFileNameFromSlug(element.slug) === null) {
         throw new Error('Element slug must produce a safe lowercase .tsx file name');
     }
     if (typeof element.sourceCode !== 'string' ||
@@ -64,7 +64,7 @@ const validateElement = (element) => {
         element.sourceCode.length > 200000) {
         throw new Error('Unsupported Element source code');
     }
-    if ((0, studio_shared_1.getElementComponentNameFromSourceCode)(element.sourceCode) === null) {
+    if (drag_and_drop_1.DragAndDropInternals.getElementComponentNameFromSourceCode(element.sourceCode) === null) {
         throw new Error('Element source must export exactly one named component');
     }
     validateDimensions(element.dimensions);
@@ -77,7 +77,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             (!Number.isInteger(from) || !Number.isFinite(from) || from < 0)) {
             throw new Error('from must be a non-negative integer');
         }
-        const componentName = (0, studio_shared_1.getElementComponentNameFromSourceCode)(element.sourceCode);
+        const componentName = drag_and_drop_1.DragAndDropInternals.getElementComponentNameFromSourceCode(element.sourceCode);
         if (componentName === null) {
             throw new Error('Element source must export exactly one named component');
         }
@@ -90,7 +90,7 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
         if (!location.canAddSequence) {
             throw new Error('Cannot insert Element into this composition component');
         }
-        const derivedElementFileName = (0, studio_shared_1.makeElementFileNameFromSlug)(element.slug);
+        const derivedElementFileName = drag_and_drop_1.DragAndDropInternals.makeElementFileNameFromSlug(element.slug);
         if (derivedElementFileName === null) {
             throw new Error('Element slug must produce a safe lowercase .tsx file name');
         }

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

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertJsxElementHandler = void 0;
 const node_path_1 = __importDefault(require("node:path"));
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const file_watcher_1 = require("../../file-watcher");
@@ -78,16 +79,16 @@ const validateElement = (element, remotionRoot) => {
         return;
     }
     if (element.type === 'component') {
-        if (!(0, studio_shared_1.isComponentIdentifier)(element.componentName)) {
+        if (!drag_and_drop_1.DragAndDropInternals.isComponentIdentifier(element.componentName)) {
             throw new Error('Unsupported component name');
         }
-        if (!(0, studio_shared_1.isComponentIdentifier)(element.importName)) {
+        if (!drag_and_drop_1.DragAndDropInternals.isComponentIdentifier(element.importName)) {
             throw new Error('Unsupported component import name');
         }
-        if (!(0, studio_shared_1.isComponentImportPath)(element.importPath)) {
+        if (!drag_and_drop_1.DragAndDropInternals.isComponentImportPath(element.importPath)) {
             throw new Error('Unsupported component import path');
         }
-        if (!(0, studio_shared_1.areComponentProps)(element.props)) {
+        if (!drag_and_drop_1.DragAndDropInternals.areComponentProps(element.props)) {
             throw new Error('Unsupported component props');
         }
         return;

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

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

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

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveMultipleEffectPropsHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const studio_shared_1 = require("@remotion/studio-shared");
+const parse_ast_1 = require("../../codemods/parse-ast");
+const update_effect_props_1 = require("../../codemods/update-effect-props/update-effect-props");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const video_config_values_1 = require("../../helpers/video-config-values");
+const undo_stack_1 = require("../undo-stack");
+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 source_file_write_queue_1 = require("./source-file-write-queue");
+const resolveEdit = ({ edit, index, }) => {
+    const defaultValue = edit.defaultValue === null ? null : JSON.parse(edit.defaultValue);
+    const update = edit.type === 'value'
+        ? {
+            key: edit.key,
+            value: JSON.parse(edit.value),
+            defaultValue,
+        }
+        : {
+            key: edit.key,
+            effectParam: edit.effectParam,
+            defaultValue,
+        };
+    return {
+        index,
+        edit,
+        update,
+        defaultValueString: defaultValue === null ? null : JSON.stringify(defaultValue),
+    };
+};
+const saveMultipleEffectPropsHandler = ({ input: { edits, clientId, undoLabel, redoLabel }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a;
+    if (edits.length === 0) {
+        throw new Error('No effect prop edits to save');
+    }
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-multiple-effect-props] Received request with ${edits.length} edit(s)`);
+    const editGroups = new Map();
+    for (const [index, edit] of edits.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: edit.fileName,
+            action: 'modify',
+        });
+        const group = (_a = editGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
+            fileRelativeToRoot,
+            edits: [],
+        };
+        group.edits.push(resolveEdit({ edit, index }));
+        editGroups.set(absolutePath, group);
+    }
+    const snapshots = [];
+    const outputByPath = new Map();
+    const resultByIndex = new Map();
+    for (const [absolutePath, group] of editGroups) {
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        let output = fileContents;
+        let firstLogLine = Number.POSITIVE_INFINITY;
+        for (const edit of group.edits) {
+            const result = await (0, update_effect_props_1.updateEffectProps)({
+                input: output,
+                sequenceNodePath: edit.edit.sequenceNodePath.nodePath,
+                effectIndex: edit.edit.effectIndex,
+                update: edit.update,
+                schema: edit.edit.schema,
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            resultByIndex.set(edit.index, {
+                ...result,
+                edit,
+                fileRelativeToRoot: group.fileRelativeToRoot,
+            });
+        }
+        outputByPath.set(absolutePath, output);
+        snapshots.push({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: output,
+            logLine: Number.isFinite(firstLogLine) ? firstLogLine : 1,
+        });
+    }
+    (0, undo_stack_1.pushTransactionToUndoStack)({
+        snapshots,
+        logLevel,
+        remotionRoot,
+        description: {
+            undoMessage: `↩️  ${undoLabel}`,
+            redoMessage: `↪️  ${redoLabel}`,
+        },
+        entryType: 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    for (const [absolutePath, output] of outputByPath) {
+        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+    }
+    for (const index of edits.keys()) {
+        const result = resultByIndex.get(index);
+        if (!result) {
+            throw new Error('Could not compute effect prop edit result');
+        }
+        (0, log_effect_update_1.logEffectUpdate)({
+            fileRelativeToRoot: result.fileRelativeToRoot,
+            line: result.logLine,
+            effectName: result.effectCallee,
+            propKey: result.edit.edit.key,
+            oldValueString: result.oldValueString,
+            newValueString: result.newValueString,
+            defaultValueString: result.edit.defaultValueString,
+            formatted: result.formatted,
+            logLevel,
+            removedProps: result.removedProps,
+            addedProps: [],
+        });
+    }
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const statusTargets = [
+        ...new Map(edits.map((edit) => [
+            JSON.stringify([
+                edit.fileName,
+                edit.sequenceNodePath.nodePath,
+                edit.effectIndex,
+            ]),
+            edit,
+        ])).values(),
+    ];
+    const results = statusTargets.map((edit) => {
+        const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: edit.fileName,
+            action: 'modify',
+        });
+        const output = outputByPath.get(absolutePath);
+        if (!output) {
+            throw new Error('Could not compute effect prop edit status');
+        }
+        const ast = (0, parse_ast_1.parseAst)(output);
+        const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, edit.sequenceNodePath.nodePath);
+        const status = jsx
+            ? (0, can_update_effect_props_1.computeEffectPropStatus)({
+                ast,
+                jsx,
+                effectIndex: edit.effectIndex,
+                keys: (0, studio_shared_1.getAllSchemaKeys)(edit.schema),
+                videoConfigValues: (0, video_config_values_1.getVideoConfigIdentifierValues)({
+                    ast,
+                    videoConfigValues: edit.sequenceNodePath.videoConfigValues,
+                }),
+            })
+            : {
+                canUpdate: false,
+                effectIndex: edit.effectIndex,
+                reason: 'not-found',
+            };
+        return {
+            fileName: edit.fileName,
+            sequenceNodePath: edit.sequenceNodePath,
+            status,
+        };
+    });
+    return { results };
+});
+exports.saveMultipleEffectPropsHandler = saveMultipleEffectPropsHandler;

package/dist/routes.js

@@ -39,6 +39,7 @@ const node_fs_1 = require("node:fs");
 const node_path_1 = __importStar(require("node:path"));
 const node_url_1 = require("node:url");
 const bundler_1 = require("@remotion/bundler");
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const better_opn_1 = require("./better-opn");
@@ -165,12 +166,11 @@ const handleRequestElementInstall = async ({ liveEventsServer, request, response
     response.setHeader('Content-Type', 'application/json');
     try {
         const body = await (0, parse_body_1.parseRequestBody)(request);
-        const parsed = (0, studio_shared_1.parseElementDragData)(JSON.stringify({
-            type: 'remotion-element',
-            version: 1,
-            element: body.element,
-        }));
-        if (parsed === null) {
+        const { mimeType, payload } = body;
+        const parsed = typeof mimeType === 'string' && typeof payload === 'string'
+            ? drag_and_drop_1.DragAndDropInternals.parseDragData({ mimeType, payload })
+            : null;
+        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'element') {
             response.writeHead(400);
             response.end(JSON.stringify({ success: false, reason: 'Invalid Element payload' }));
             return;
@@ -201,7 +201,7 @@ const handleRequestElementInstall = async ({ liveEventsServer, request, response
             createdAt: Date.now(),
             compositionFile: target.compositionFile,
             compositionId: target.compositionId,
-            element: parsed.element,
+            element: parsed.data.element,
             position: null,
         };
         const delivered = liveEventsServer.sendEventToClientId(target.clientId, {

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.498",
+	"version": "4.0.500",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,6 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
+		"@remotion/drag-and-drop": "4.0.500",
 		"@babel/types": "7.24.0",
 		"@babel/parser": "7.24.1",
 		"@svgr/core": "8.1.0",
@@ -30,11 +31,11 @@
 		"kiwi-schema": "0.5.0",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.498",
+		"remotion": "4.0.500",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.498",
-		"@remotion/renderer": "4.0.498",
-		"@remotion/studio-shared": "4.0.498",
+		"@remotion/bundler": "4.0.500",
+		"@remotion/renderer": "4.0.500",
+		"@remotion/studio-shared": "4.0.500",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -42,7 +43,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.498",
+		"@remotion/eslint-config-internal": "4.0.500",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"