@remotion/studio-server 4.0.473 → 4.0.474

package/dist/helpers/resolve-composition-component.d.ts

@@ -1,4 +1,4 @@
-import type { InsertableCompositionElement } from '@remotion/studio-shared';
+import { type InsertableCompositionElement } from '@remotion/studio-shared';
 export type ResolvedCompositionComponent = {
     source: string;
     line: number;

package/dist/helpers/resolve-composition-component.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertJsxElementIntoComposition = exports.resolveCompositionComponent = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
+const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const format_file_content_1 = require("../codemods/format-file-content");
 const parse_ast_1 = require("../codemods/parse-ast");
@@ -508,6 +509,12 @@ const createSequenceElement = () => {
 const createNumberAttribute = (name, value) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer(recast.types.builders.numericLiteral(value)));
 };
+const createStringAttribute = (name, value) => {
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.stringLiteral(value));
+};
+const createBooleanAttribute = (name, value) => {
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer(recast.types.builders.booleanLiteral(value)));
+};
 const createPositionAbsoluteStyleAttribute = () => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression([
         recast.types.builders.objectProperty(recast.types.builders.identifier('position'), recast.types.builders.stringLiteral('absolute')),
@@ -516,6 +523,18 @@ const createPositionAbsoluteStyleAttribute = () => {
 const createStaticFileSrcAttribute = ({ staticFileLocalName, src, }) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('src'), recast.types.builders.jsxExpressionContainer(recast.types.builders.callExpression(recast.types.builders.identifier(staticFileLocalName), [recast.types.builders.stringLiteral(src)])));
 };
+const createComponentProp = ({ name, value, }) => {
+    if (typeof value === 'number') {
+        return createNumberAttribute(name, value);
+    }
+    if (typeof value === 'boolean') {
+        return createBooleanAttribute(name, value);
+    }
+    return createStringAttribute(name, value);
+};
+const createStringSrcAttribute = (src) => {
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('src'), recast.types.builders.stringLiteral(src));
+};
 const createSolidElement = ({ localName, width, height, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         createNumberAttribute('width', width),
@@ -523,9 +542,17 @@ const createSolidElement = ({ localName, width, height, }) => {
         createPositionAbsoluteStyleAttribute(),
     ], true), null, []);
 };
+const createComponentElement = ({ localName, props, }) => {
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
+        ...props.map(createComponentProp),
+        createPositionAbsoluteStyleAttribute(),
+    ], true), null, []);
+};
 const createAssetElement = ({ localName, staticFileLocalName, src, dimensions, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
-        createStaticFileSrcAttribute({ staticFileLocalName, src }),
+        staticFileLocalName === null
+            ? createStringSrcAttribute(src)
+            : createStaticFileSrcAttribute({ staticFileLocalName, src }),
         createPositionAbsoluteStyleAttribute(),
         ...(dimensions
             ? [
@@ -725,6 +752,41 @@ const ensureGifImport = (ast) => {
         label: '<Gif>',
     });
 };
+const hasComponentLocalImport = ({ ast, importName, importPath, }) => {
+    var _a;
+    var _b, _c;
+    for (const importDeclaration of getImportDeclarations({
+        ast,
+        sourcePath: importPath,
+    })) {
+        for (const specifier of (_b = importDeclaration.specifiers) !== null && _b !== void 0 ? _b : []) {
+            if (specifier.type === 'ImportSpecifier' &&
+                (0, imports_1.getImportedName)(specifier) === importName) {
+                return (_c = (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _c !== void 0 ? _c : importName;
+            }
+        }
+    }
+    return null;
+};
+const ensureComponentImport = ({ ast, componentName, importName, importPath, }) => {
+    const existingLocalName = hasComponentLocalImport({
+        ast,
+        importName,
+        importPath,
+    });
+    if (existingLocalName) {
+        return existingLocalName;
+    }
+    if (hasTopLevelBinding({ ast, name: componentName })) {
+        throw new Error(`Cannot add <${componentName}> because ${componentName} is already defined`);
+    }
+    return (0, imports_1.ensureNamedImport)({
+        ast,
+        importedName: importName,
+        sourcePath: importPath,
+        localName: componentName,
+    });
+};
 const addElementToComponentRoot = ({ ast, exportName, element, }) => {
     var _a;
     var _b;
@@ -947,8 +1009,23 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             height: element.height,
         });
     }
+    if (element.type === 'component') {
+        const componentLocalName = ensureComponentImport({
+            ast,
+            componentName: element.componentName,
+            importName: element.importName,
+            importPath: element.importPath,
+        });
+        return createComponentElement({
+            localName: componentLocalName,
+            props: element.props,
+        });
+    }
     if (element.type === 'asset') {
-        const staticFileLocalName = ensureStaticFileImport(ast);
+        if (element.srcType === 'remote' && !(0, studio_shared_1.isUrl)(element.src)) {
+            throw new Error('Remote asset source must be a URL');
+        }
+        const staticFileLocalName = element.srcType === 'remote' ? null : ensureStaticFileImport(ast);
         let localName;
         if (element.assetType === 'image') {
             localName = ensureImgImport(ast);

package/dist/preview-server/routes/can-update-sequence-props.js

@@ -406,7 +406,6 @@ const getComputedStatus = (node, ast) => {
     }
     return {
         status: 'keyframed',
-        codeValue: undefined,
         interpolationFunction: interpolation.interpolationFunction,
         keyframes: interpolation.keyframes,
         easing: interpolation.easing,
@@ -553,11 +552,11 @@ const getNestedPropStatus = (jsxElement, ast, parentKey, childKey) => {
     if (!(0, exports.isStaticValue)(propValue)) {
         return (0, exports.getComputedStatus)(propValue, ast);
     }
-    const codeValue = (0, exports.extractStaticValue)(propValue);
-    if (!validateStyleValue(childKey, codeValue)) {
+    const propStatus = (0, exports.extractStaticValue)(propValue);
+    if (!validateStyleValue(childKey, propStatus)) {
         return computedStatus();
     }
-    return staticStatus(codeValue);
+    return staticStatus(propStatus);
 };
 const computeEffectsForJsx = ({ ast, jsxElement, effects, }) => {
     return effects.map((effect, effectIndex) => (0, can_update_effect_props_1.computeEffectPropStatus)({

package/dist/preview-server/routes/download-remote-asset.js

@@ -255,6 +255,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
         type: 'asset',
         assetType: fileType.type === 'gif' ? 'gif' : 'image',
         src: assetPath,
+        srcType: 'static',
         dimensions: fileType.dimensions,
     };
     return {

package/dist/preview-server/routes/insert-jsx-element.d.ts

@@ -1,3 +1,3 @@
-import type { InsertJsxElementRequest, InsertJsxElementResponse } from '@remotion/studio-shared';
+import { type InsertJsxElementRequest, type InsertJsxElementResponse } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
 export declare const insertJsxElementHandler: ApiHandler<InsertJsxElementRequest, InsertJsxElementResponse>;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertJsxElementHandler = void 0;
 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");
@@ -20,7 +21,12 @@ const validateElement = (element) => {
         return;
     }
     if (element.type === 'asset') {
-        if (!element.src || element.src.includes('\\')) {
+        if (element.srcType === 'remote') {
+            if (!(0, studio_shared_1.isUrl)(element.src)) {
+                throw new Error('Remote asset source must be a URL');
+            }
+        }
+        else if (!element.src || element.src.includes('\\')) {
             throw new Error('Asset path must be a static file path');
         }
         if (element.dimensions) {
@@ -29,6 +35,21 @@ const validateElement = (element) => {
         }
         return;
     }
+    if (element.type === 'component') {
+        if (!(0, studio_shared_1.isComponentIdentifier)(element.componentName)) {
+            throw new Error('Unsupported component name');
+        }
+        if (!(0, studio_shared_1.isComponentIdentifier)(element.importName)) {
+            throw new Error('Unsupported component import name');
+        }
+        if (!(0, studio_shared_1.isComponentImportPath)(element.importPath)) {
+            throw new Error('Unsupported component import path');
+        }
+        if (!(0, studio_shared_1.areComponentProps)(element.props)) {
+            throw new Error('Unsupported component props');
+        }
+        return;
+    }
     throw new Error('Unsupported element type');
 };
 const getElementLabel = (element) => {
@@ -49,6 +70,9 @@ const getElementLabel = (element) => {
             return '<Audio>';
         }
     }
+    if (element.type === 'component') {
+        return `<${element.componentName}>`;
+    }
     throw new Error('Unsupported element type');
 };
 const insertJsxElementHandler = ({ input: { compositionFile, compositionId, element }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {

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.473",
+	"version": "4.0.474",
 	"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.473",
+		"remotion": "4.0.474",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.473",
-		"@remotion/renderer": "4.0.473",
-		"@remotion/studio-shared": "4.0.473",
+		"@remotion/bundler": "4.0.474",
+		"@remotion/renderer": "4.0.474",
+		"@remotion/studio-shared": "4.0.474",
 		"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.473",
+		"@remotion/eslint-config-internal": "4.0.474",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"