@remotion/studio-server 4.0.517 → 4.0.518

package/dist/preview-server/api-routes.d.ts

@@ -1,5 +1,7 @@
 import type { ApiRoutes } from '@remotion/studio-shared';
 import type { ApiHandler } from './api-types';
+type StandardApiRoute = Exclude<keyof ApiRoutes, '/api/update-config'>;
 export declare const allApiRoutes: {
-    [key in keyof ApiRoutes]: ApiHandler<ApiRoutes[key]['Request'], ApiRoutes[key]['Response']>;
+    [key in StandardApiRoute]: ApiHandler<ApiRoutes[key]['Request'], ApiRoutes[key]['Response']>;
 };
+export {};

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

@@ -57,7 +57,6 @@ const unsubscribe_from_default_props_1 = require("./routes/unsubscribe-from-defa
 const unsubscribe_from_file_existence_1 = require("./routes/unsubscribe-from-file-existence");
 const unsubscribe_from_sequence_props_1 = require("./routes/unsubscribe-from-sequence-props");
 const update_available_1 = require("./routes/update-available");
-const update_config_1 = require("./routes/update-config");
 const update_default_props_1 = require("./routes/update-default-props");
 const update_effect_keyframe_settings_1 = require("./routes/update-effect-keyframe-settings");
 const update_element_install_target_1 = require("./routes/update-element-install-target");
@@ -113,7 +112,6 @@ exports.allApiRoutes = {
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,
     '/api/rename-static-file': rename_static_file_1.renameStaticFileHandler,
     '/api/restart-studio': restart_studio_1.handleRestartStudio,
-    '/api/update-config': update_config_1.updateConfigHandler,
     '/api/default-coding-agent-info': default_coding_agent_1.getDefaultCodingAgentInfoHandler,
     '/api/default-editor-info': default_editor_1.getDefaultEditorInfoHandler,
     '/api/install-package': install_dependency_1.handleInstallPackage,

package/dist/preview-server/element-install-state.d.ts

@@ -11,7 +11,7 @@ export type ElementInstallTarget = {
     studioUrl: string;
     updatedAt: number;
 };
-export type StudioProtocolTargetPurpose = 'install-element' | 'set-license-key';
+export type StudioProtocolTargetPurpose = 'install-element' | 'set-license-key' | 'add-element-library';
 type StudioProtocolTarget = {
     readonly id: string;
     readonly origin: string;

package/dist/preview-server/element-install-state.js

@@ -77,7 +77,7 @@ const consumeStudioProtocolTarget = ({ now, origin, purpose, targetId, }) => {
         current.readOnly) {
         return null;
     }
-    if (purpose === 'set-license-key') {
+    if (purpose !== 'install-element') {
         return issued.target;
     }
     if (!current.canInstall ||

package/dist/preview-server/routes/update-config.d.ts

@@ -1,7 +1,12 @@
-import { type ConfigUpdate, type UpdateConfigRequest, type UpdateConfigResponse } from '@remotion/studio-shared';
+import { type ConfigUpdate, type StudioRuntimeConfig, type UpdateConfigRequest, type UpdateConfigResponse } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
-export declare const updateConfigFile: ({ configContents, updates, }: {
+export declare const updateConfigFile: ({ configContents, existingElementLibraryUrls, updates, }: {
     readonly configContents: string;
+    readonly existingElementLibraryUrls: readonly string[];
     readonly updates: ConfigUpdate[];
 }) => string;
-export declare const updateConfigHandler: ApiHandler<UpdateConfigRequest, UpdateConfigResponse>;
+type UpdateConfigHandlerParams = Parameters<ApiHandler<UpdateConfigRequest, UpdateConfigResponse>>[0] & {
+    readonly getStudioRuntimeConfig: () => StudioRuntimeConfig;
+};
+export declare const updateConfigHandler: ({ input, configFile, getStudioRuntimeConfig, }: UpdateConfigHandlerParams) => Promise<UpdateConfigResponse>;
+export {};

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

@@ -74,7 +74,7 @@ const validateUpdates = (updates) => {
         }
         const { setter, type } = update;
         if (typeof setter !== 'string' ||
-            !validSetterName.test(setter) ||
+            (!validSetterName.test(setter) && setter !== 'addElementLibrary') ||
             !(setter in studio_shared_1.configMethodLifecycles)) {
             return `Invalid config setter: ${JSON.stringify(setter)}.`;
         }
@@ -82,6 +82,34 @@ const validateUpdates = (updates) => {
             return `The config setter ${setter} was specified more than once.`;
         }
         setters.add(setter);
+        if (setter === 'addElementLibrary') {
+            if (type !== 'set' ||
+                !('value' in update) ||
+                typeof update.value !== 'object' ||
+                update.value === null ||
+                Array.isArray(update.value)) {
+                return 'Config.addElementLibrary() expects an object value.';
+            }
+            const elementLibrary = update.value;
+            const { displayName, url } = elementLibrary;
+            if (typeof url !== 'string') {
+                return 'Config.addElementLibrary() expects an HTTP or HTTPS URL.';
+            }
+            try {
+                const parsedUrl = new URL(url);
+                if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
+                    return 'Config.addElementLibrary() expects an HTTP or HTTPS URL.';
+                }
+            }
+            catch (_a) {
+                return 'Config.addElementLibrary() expects an HTTP or HTTPS URL.';
+            }
+            if (displayName !== undefined &&
+                (typeof displayName !== 'string' || displayName.trim() === '')) {
+                return 'Config.addElementLibrary() expects a non-empty display name.';
+            }
+            continue;
+        }
         if (type === 'delete') {
             continue;
         }
@@ -93,20 +121,64 @@ const validateUpdates = (updates) => {
     }
     return null;
 };
-const updateConfigFile = ({ configContents, updates, }) => {
+const updateConfigFile = ({ configContents, existingElementLibraryUrls, updates, }) => {
     const setters = new Set(updates.map(({ setter }) => setter));
+    const elementLibraryUrls = new Set();
+    for (const url of existingElementLibraryUrls) {
+        try {
+            elementLibraryUrls.add(new URL(url).href);
+        }
+        catch (_a) {
+            // Runtime config only contains validated URLs.
+        }
+    }
+    let changed = false;
     const ast = (0, parse_ast_1.parseAst)(configContents);
     recast.types.visit(ast.program, {
         visitExpressionStatement(path) {
             const { expression } = path.node;
-            if (expression.type === 'CallExpression' &&
-                expression.callee.type === 'MemberExpression' &&
-                !expression.callee.computed &&
-                expression.callee.object.type === 'Identifier' &&
-                expression.callee.object.name === 'Config' &&
-                expression.callee.property.type === 'Identifier' &&
-                setters.has(expression.callee.property.name)) {
+            if (expression.type !== 'CallExpression' ||
+                expression.callee.type !== 'MemberExpression' ||
+                expression.callee.computed ||
+                expression.callee.object.type !== 'Identifier' ||
+                expression.callee.object.name !== 'Config' ||
+                expression.callee.property.type !== 'Identifier') {
+                this.traverse(path);
+                return;
+            }
+            const setter = expression.callee.property.name;
+            if (setter === 'addElementLibrary') {
+                const argument = expression.arguments[0];
+                if ((argument === null || argument === void 0 ? void 0 : argument.type) === 'ObjectExpression') {
+                    const urlProperty = argument.properties.find((property) => {
+                        if (property.type !== 'ObjectProperty' || property.computed) {
+                            return false;
+                        }
+                        return ((property.key.type === 'Identifier' &&
+                            property.key.name === 'url') ||
+                            (property.key.type === 'StringLiteral' &&
+                                property.key.value === 'url'));
+                    });
+                    if ((urlProperty === null || urlProperty === void 0 ? void 0 : urlProperty.type) === 'ObjectProperty' &&
+                        urlProperty.value.type === 'StringLiteral') {
+                        try {
+                            const parsedUrl = new URL(urlProperty.value.value);
+                            if (parsedUrl.protocol === 'http:' ||
+                                parsedUrl.protocol === 'https:') {
+                                elementLibraryUrls.add(parsedUrl.href);
+                            }
+                        }
+                        catch (_a) {
+                            // Preserve invalid existing config without treating it as a match.
+                        }
+                    }
+                }
+                this.traverse(path);
+                return;
+            }
+            if (setters.has(setter)) {
                 path.prune();
+                changed = true;
                 return false;
             }
             this.traverse(path);
@@ -117,22 +189,41 @@ const updateConfigFile = ({ configContents, updates, }) => {
         if (update.type === 'delete') {
             continue;
         }
-        const serializedValue = JSON.stringify(update.value)
+        const { setter, value: initialValue } = update;
+        let value = initialValue;
+        if (setter === 'addElementLibrary') {
+            const elementLibrary = initialValue;
+            const { displayName: rawDisplayName, url } = elementLibrary;
+            const normalizedUrl = new URL(url).href;
+            if (elementLibraryUrls.has(normalizedUrl)) {
+                continue;
+            }
+            const displayName = typeof rawDisplayName === 'string' ? rawDisplayName.trim() : null;
+            value =
+                displayName === null
+                    ? { url: normalizedUrl }
+                    : { url: normalizedUrl, displayName };
+            elementLibraryUrls.add(normalizedUrl);
+        }
+        const serializedValue = JSON.stringify(value)
             .replaceAll('\u2028', '\\u2028')
             .replaceAll('\u2029', '\\u2029');
-        const statement = (0, parse_ast_1.parseAst)(`Config.${update.setter}(${serializedValue});`)
-            .program.body[0];
+        const statement = (0, parse_ast_1.parseAst)(`Config.${setter}(${serializedValue});`).program
+            .body[0];
         const separator = updatedConfig.endsWith('\n') ? '' : '\n';
         updatedConfig += `${separator}${recast.prettyPrint(statement, {
             lineTerminator: '\n',
             quote: 'single',
             useTabs: true,
         }).code}\n`;
+        changed = true;
     }
-    return updatedConfig;
+    return changed ? updatedConfig : configContents;
 };
 exports.updateConfigFile = updateConfigFile;
-const updateConfigHandler = async ({ input, configFile }) => {
+const updateConfigHandler = async ({ input, configFile, getStudioRuntimeConfig, }) => {
+    var _a;
+    var _b;
     if (configFile === null || configFile === undefined) {
         return {
             success: false,
@@ -182,9 +273,17 @@ const updateConfigHandler = async ({ input, configFile }) => {
         }
     }
     const configContents = (0, node_fs_1.readFileSync)(configFile, 'utf8');
+    const updatedConfig = (0, exports.updateConfigFile)({
+        configContents,
+        existingElementLibraryUrls: (_b = (_a = getStudioRuntimeConfig().elementLibraries) === null || _a === void 0 ? void 0 : _a.map(({ url }) => url)) !== null && _b !== void 0 ? _b : [],
+        updates: input.updates,
+    });
+    if (updatedConfig === configContents) {
+        return { success: true };
+    }
     (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
         file: configFile,
-        content: (0, exports.updateConfigFile)({ configContents, updates: input.updates }),
+        content: updatedConfig,
         originatorClientId: input.clientId,
         metadata: null,
     });

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

@@ -85,6 +85,14 @@ const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRo
                     purpose: 'set-license-key',
                     target,
                 });
+            const issuedElementLibraryTarget = target === null
+                ? null
+                : (0, element_install_state_1.issueStudioProtocolTarget)({
+                    now,
+                    origin: requestOrigin,
+                    purpose: 'add-element-library',
+                    target,
+                });
             response.writeHead(200, {
                 'Cache-Control': 'no-store',
                 'Content-Type': 'application/json',
@@ -120,6 +128,18 @@ const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRo
                                 lastFocusedAt: target.lastFocusedAt,
                             },
                     },
+                    {
+                        type: 'add-element-library',
+                        target: issuedElementLibraryTarget === null ||
+                            target === null ||
+                            target.lastFocusedAt === null
+                            ? null
+                            : {
+                                id: issuedElementLibraryTarget.id,
+                                expiresAt: issuedElementLibraryTarget.expiresAt,
+                                lastFocusedAt: target.lastFocusedAt,
+                            },
+                    },
                 ],
             }));
             resolve();

package/dist/preview-server/studio-protocol/handle-element-library.d.ts

@@ -0,0 +1,11 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { LiveEventsServer } from '../live-events';
+type FocusStudioTab = (studioUrl: string) => void;
+export declare const handleStudioProtocolElementLibrary: ({ configFile, focusStudioTab, liveEventsServer, request, response, }: {
+    readonly configFile: string | null;
+    readonly focusStudioTab: FocusStudioTab;
+    readonly liveEventsServer: LiveEventsServer;
+    readonly request: IncomingMessage;
+    readonly response: ServerResponse<IncomingMessage>;
+}) => Promise<void>;
+export {};

package/dist/preview-server/studio-protocol/handle-element-library.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleStudioProtocolElementLibrary = void 0;
+const zod_1 = require("zod");
+const element_install_state_1 = require("../element-install-state");
+const parse_body_1 = require("../parse-body");
+const origin_policy_1 = require("./origin-policy");
+const protocol_response_1 = require("./protocol-response");
+const studioProtocolElementLibraryRequestSchema = zod_1.z.object({
+    operation: zod_1.z.literal('add-element-library'),
+    protocol: zod_1.z.literal('remotion-studio-protocol'),
+    protocolVersion: zod_1.z.literal(1),
+    targetId: zod_1.z.string().min(1),
+    url: zod_1.z.string(),
+    displayName: zod_1.z.string().nullable(),
+});
+const MAX_STUDIO_PROTOCOL_ELEMENT_LIBRARY_BODY_SIZE = 16 * 1024;
+const handleStudioProtocolElementLibrary = async ({ configFile, focusStudioTab, liveEventsServer, request, response, }) => {
+    var _a;
+    var _b;
+    (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    if (requestOrigin === null) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'unsupported-origin',
+            message: 'Origin not allowed',
+            response,
+            status: 403,
+        });
+        return;
+    }
+    if (request.method !== 'POST') {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'method-not-allowed',
+            message: 'Use POST to add an Element catalog.',
+            response,
+            status: 405,
+        });
+        return;
+    }
+    let body;
+    try {
+        body = await (0, parse_body_1.parseRequestBody)(request, {
+            maxBytes: MAX_STUDIO_PROTOCOL_ELEMENT_LIBRARY_BODY_SIZE,
+        });
+    }
+    catch (error) {
+        if (error instanceof parse_body_1.RequestBodyTooLargeError) {
+            (0, protocol_response_1.writeStudioProtocolError)({
+                code: 'request-too-large',
+                message: 'The request body is too large.',
+                response,
+                status: 413,
+            });
+            return;
+        }
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'invalid-request',
+            message: 'The request body is not valid JSON.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    const parsedRequest = studioProtocolElementLibraryRequestSchema.safeParse(body);
+    if (!parsedRequest.success) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'unsupported-protocol',
+            message: 'Invalid Remotion Studio Protocol request.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    let normalizedUrl;
+    try {
+        const parsedUrl = new URL(parsedRequest.data.url);
+        if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
+            throw new Error('Unsupported protocol');
+        }
+        normalizedUrl = parsedUrl.href;
+    }
+    catch (_c) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'invalid-url',
+            message: 'The Element catalog URL must be an absolute HTTP or HTTPS URL.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    const displayName = (_b = (_a = parsedRequest.data.displayName) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : null;
+    if (displayName === '') {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'invalid-display-name',
+            message: 'The Element catalog display name must not be empty.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    const target = (0, element_install_state_1.consumeStudioProtocolTarget)({
+        now: Date.now(),
+        origin: requestOrigin,
+        purpose: 'add-element-library',
+        targetId: parsedRequest.data.targetId,
+    });
+    if (target === null) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'target-expired',
+            message: 'The selected Studio target is no longer available.',
+            response,
+            status: 409,
+        });
+        return;
+    }
+    if (configFile === null) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'no-config-file',
+            message: 'The selected Studio did not load a Remotion config file.',
+            response,
+            status: 409,
+        });
+        return;
+    }
+    const delivered = liveEventsServer.sendEventToClientId(target.clientId, {
+        type: 'element-library-add-request',
+        url: normalizedUrl,
+        displayName,
+        origin: requestOrigin,
+    });
+    if (!delivered) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'target-expired',
+            message: 'The selected Remotion Studio tab is no longer connected.',
+            response,
+            status: 409,
+        });
+        return;
+    }
+    focusStudioTab(target.studioUrl);
+    response.writeHead(200, { 'Content-Type': 'application/json' });
+    response.end(JSON.stringify({
+        protocol: 'remotion-studio-protocol',
+        protocolVersion: 1,
+        status: 'awaiting-confirmation',
+    }));
+};
+exports.handleStudioProtocolElementLibrary = handleStudioProtocolElementLibrary;

package/dist/routes.js

@@ -53,8 +53,10 @@ const handler_1 = require("./preview-server/handler");
 const public_folder_1 = require("./preview-server/public-folder");
 const app_icon_1 = require("./preview-server/routes/app-icon");
 const open_in_editor_1 = require("./preview-server/routes/open-in-editor");
+const update_config_1 = require("./preview-server/routes/update-config");
 const serve_static_1 = require("./preview-server/serve-static");
 const handle_discovery_1 = require("./preview-server/studio-protocol/handle-discovery");
+const handle_element_library_1 = require("./preview-server/studio-protocol/handle-element-library");
 const handle_install_1 = require("./preview-server/studio-protocol/handle-install");
 const handle_license_key_1 = require("./preview-server/studio-protocol/handle-license-key");
 const origin_policy_1 = require("./preview-server/studio-protocol/origin-policy");
@@ -321,7 +323,8 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
     }
     if (url.pathname === '/api/studio-protocol' ||
         url.pathname === '/api/studio-protocol/install' ||
-        url.pathname === '/api/studio-protocol/license-key') {
+        url.pathname === '/api/studio-protocol/license-key' ||
+        url.pathname === '/api/studio-protocol/element-library') {
         if (request.method === 'OPTIONS') {
             return (0, origin_policy_1.handleStudioProtocolOptions)({
                 request,
@@ -348,6 +351,17 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
                 response,
             });
         }
+        if (url.pathname === '/api/studio-protocol/element-library') {
+            return (0, handle_element_library_1.handleStudioProtocolElementLibrary)({
+                configFile,
+                focusStudioTab: (studioUrl) => {
+                    (0, better_opn_1.focusBrowserTab)({ url: studioUrl }).catch(() => undefined);
+                },
+                liveEventsServer,
+                request,
+                response,
+            });
+        }
         return (0, handle_install_1.handleStudioProtocolInstall)({
             focusStudioTab: (studioUrl) => {
                 (0, better_opn_1.focusBrowserTab)({ url: studioUrl }).catch(() => undefined);
@@ -357,6 +371,22 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             response,
         });
     }
+    if (url.pathname === '/api/update-config') {
+        return (0, handler_1.handleRequest)({
+            remotionRoot,
+            entryPoint,
+            handler: (params) => (0, update_config_1.updateConfigHandler)({ ...params, getStudioRuntimeConfig }),
+            request,
+            response,
+            logLevel,
+            methods,
+            binariesDirectory,
+            publicDir,
+            configFile,
+            getDefaultCodingAgent,
+            getDefaultEditor,
+        });
+    }
     for (const [key, value] of Object.entries(api_routes_1.allApiRoutes)) {
         if (url.pathname === key) {
             return (0, handler_1.handleRequest)({

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.517",
+	"version": "4.0.518",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.517",
+		"@remotion/studio-protocol": "4.0.518",
 		"@babel/types": "7.24.0",
 		"@babel/parser": "7.24.1",
 		"@svgr/core": "8.1.0",
@@ -32,12 +32,12 @@
 		"semver": "7.5.3",
 		"zod": "4.4.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.517",
+		"remotion": "4.0.518",
 		"recast": "0.23.21",
-		"@remotion/bundler": "4.0.517",
-		"@remotion/renderer": "4.0.517",
-		"@remotion/studio-codemods": "4.0.517",
-		"@remotion/studio-shared": "4.0.517",
+		"@remotion/bundler": "4.0.518",
+		"@remotion/renderer": "4.0.518",
+		"@remotion/studio-codemods": "4.0.518",
+		"@remotion/studio-shared": "4.0.518",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -45,7 +45,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.517",
+		"@remotion/eslint-config-internal": "4.0.518",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"