@remotion/studio-server 4.0.471 → 4.0.472

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

@@ -42,6 +42,7 @@ const node_path_1 = __importDefault(require("node:path"));
 const recast = __importStar(require("recast"));
 const format_file_content_1 = require("../codemods/format-file-content");
 const parse_ast_1 = require("../codemods/parse-ast");
+const imports_1 = require("./imports");
 const allowedFileExtensions = new Set(['.tsx', '.ts', '.jsx', '.js']);
 const extensionsToProbe = ['.tsx', '.ts', '.jsx', '.js'];
 const isInRemotionRoot = ({ remotionRoot, fileName, }) => {
@@ -507,13 +508,31 @@ 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 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')),
+    ])));
+};
+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 createSolidElement = ({ localName, width, height, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         createNumberAttribute('width', width),
         createNumberAttribute('height', height),
-        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')),
-        ]))),
+        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 }),
+        createPositionAbsoluteStyleAttribute(),
+        ...(dimensions
+            ? [
+                createNumberAttribute('width', dimensions.width),
+                createNumberAttribute('height', dimensions.height),
+            ]
+            : []),
     ], true), null, []);
 };
 const createFragmentWithElement = (element) => {
@@ -568,12 +587,6 @@ const addElementToNullComponentReturn = ({ declaration, element, }) => {
     returnStatement.argument = createFragmentWithElement(element);
     return (_b = (_a = returnStatement.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1;
 };
-const getImportedName = (specifier) => {
-    if (specifier.imported.type === 'Identifier') {
-        return specifier.imported.name;
-    }
-    return specifier.imported.value;
-};
 const declarationBindsName = (declaration, name) => {
     var _a;
     if (declaration.type === 'FunctionDeclaration' ||
@@ -619,54 +632,90 @@ const getAvailableSolidLocalName = (ast) => {
     }
     return available;
 };
-const insertImportDeclaration = (ast, importDeclaration) => {
-    const { body } = ast.program;
-    let lastImportIndex = -1;
-    for (let i = 0; i < body.length; i++) {
-        if (body[i].type === 'ImportDeclaration') {
-            lastImportIndex = i;
-        }
-    }
-    body.splice(lastImportIndex + 1, 0, importDeclaration);
+const ensureSolidImport = (ast) => {
+    return (0, imports_1.ensureNamedImport)({
+        ast,
+        importedName: 'Solid',
+        sourcePath: 'remotion',
+        localName: getAvailableSolidLocalName(ast),
+    });
+};
+const getImportDeclarations = ({ ast, sourcePath, }) => {
+    return ast.program.body.filter((node) => node.type === 'ImportDeclaration' &&
+        node.source.type === 'StringLiteral' &&
+        node.source.value === sourcePath);
 };
-const addSolidImport = ({ ast, localName, remotionImport, }) => {
+const importDeclarationHasNamespaceSpecifier = (importDeclaration) => {
     var _a;
-    var _b;
-    const imported = recast.types.builders.identifier('Solid');
-    const local = localName === 'Solid' ? null : recast.types.builders.identifier(localName);
-    const specifier = recast.types.builders.importSpecifier(imported, local);
-    const canAddToExistingRemotionImport = remotionImport &&
-        !((_a = remotionImport.specifiers) === null || _a === void 0 ? void 0 : _a.some((importSpecifier) => importSpecifier.type === 'ImportNamespaceSpecifier'));
-    if (canAddToExistingRemotionImport) {
-        remotionImport.specifiers = [
-            ...((_b = remotionImport.specifiers) !== null && _b !== void 0 ? _b : []),
-            specifier,
+    return (_a = importDeclaration.specifiers) === null || _a === void 0 ? void 0 : _a.some((specifier) => specifier.type === 'ImportNamespaceSpecifier');
+};
+const hasOfficialLocalImport = ({ ast, importedName, sourcePath, }) => {
+    return getImportDeclarations({ ast, sourcePath }).some((importDeclaration) => {
+        var _a;
+        return (_a = importDeclaration.specifiers) === null || _a === void 0 ? void 0 : _a.some((specifier) => {
+            var _a;
+            var _b;
+            return (specifier.type === 'ImportSpecifier' &&
+                (0, imports_1.getImportedName)(specifier) === importedName &&
+                ((_b = (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : importedName) === importedName);
+        });
+    });
+};
+const addOfficialNamedImport = ({ ast, importedName, sourcePath, }) => {
+    var _a;
+    const existingImport = getImportDeclarations({ ast, sourcePath }).find((candidate) => !importDeclarationHasNamespaceSpecifier(candidate));
+    const importSpecifier = recast.types.builders.importSpecifier(recast.types.builders.identifier(importedName));
+    if (existingImport) {
+        existingImport.specifiers = [
+            ...((_a = existingImport.specifiers) !== null && _a !== void 0 ? _a : []),
+            importSpecifier,
         ];
         return;
     }
-    const importDeclaration = recast.types.builders.importDeclaration([], recast.types.builders.stringLiteral('remotion'));
-    importDeclaration.specifiers = [specifier];
-    insertImportDeclaration(ast, importDeclaration);
+    const importDeclaration = recast.types.builders.importDeclaration([importSpecifier], recast.types.builders.stringLiteral(sourcePath));
+    (0, imports_1.insertImportDeclaration)(ast, importDeclaration);
 };
-const ensureSolidImport = (ast) => {
-    var _a, _b;
-    let remotionImport = null;
-    for (const node of ast.program.body) {
-        if (node.type !== 'ImportDeclaration' || node.source.value !== 'remotion') {
-            continue;
-        }
-        remotionImport = node;
-        const solidSpecifier = (_a = node.specifiers) === null || _a === void 0 ? void 0 : _a.find((specifier) => {
-            return (specifier.type === 'ImportSpecifier' &&
-                getImportedName(specifier) === 'Solid');
-        });
-        if ((_b = solidSpecifier === null || solidSpecifier === void 0 ? void 0 : solidSpecifier.local) === null || _b === void 0 ? void 0 : _b.name) {
-            return solidSpecifier.local.name;
-        }
+const ensureOfficialNamedImport = ({ ast, importedName, sourcePath, label, }) => {
+    if (hasOfficialLocalImport({ ast, importedName, sourcePath })) {
+        return importedName;
+    }
+    if (hasTopLevelBinding({ ast, name: importedName })) {
+        throw new Error(`Cannot add ${label} because ${importedName} is already defined`);
     }
-    const localName = getAvailableSolidLocalName(ast);
-    addSolidImport({ ast, localName, remotionImport });
-    return localName;
+    addOfficialNamedImport({ ast, importedName, sourcePath });
+    return importedName;
+};
+const ensureStaticFileImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'staticFile',
+        sourcePath: 'remotion',
+        label: 'staticFile()',
+    });
+};
+const ensureImgImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'Img',
+        sourcePath: 'remotion',
+        label: '<Img>',
+    });
+};
+const ensureVideoImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'Video',
+        sourcePath: '@remotion/media',
+        label: '<Video>',
+    });
+};
+const ensureGifImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'Gif',
+        sourcePath: '@remotion/gif',
+        label: '<Gif>',
+    });
 };
 const addElementToComponentRoot = ({ ast, exportName, element, }) => {
     var _a;
@@ -695,7 +744,7 @@ const addElementToComponentRoot = ({ ast, exportName, element, }) => {
     if (rootNode.type === 'JSXElement' &&
         rootNode.openingElement.name.type === 'JSXIdentifier' &&
         CANVAS_ROOT_ELEMENTS.includes(rootNode.openingElement.name.name)) {
-        throw new Error(`Cannot insert a <Solid> into a composition whose root element is <${rootNode.openingElement.name.name}>`);
+        throw new Error(`Cannot insert a JSX element into a composition whose root element is <${rootNode.openingElement.name.name}>`);
     }
     if (!rootNode.children) {
         throw new Error('Composition component root does not accept children');
@@ -890,6 +939,20 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             height: element.height,
         });
     }
+    if (element.type === 'asset') {
+        const staticFileLocalName = ensureStaticFileImport(ast);
+        const localName = element.assetType === 'image'
+            ? ensureImgImport(ast)
+            : element.assetType === 'video'
+                ? ensureVideoImport(ast)
+                : ensureGifImport(ast);
+        return createAssetElement({
+            localName,
+            staticFileLocalName,
+            src: element.src,
+            dimensions: element.dimensions,
+        });
+    }
     throw new Error('Unsupported element type');
 };
 const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, }) => {

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

@@ -18,6 +18,7 @@ const insert_jsx_element_1 = require("./routes/insert-jsx-element");
 const install_dependency_1 = require("./routes/install-dependency");
 const open_in_editor_1 = require("./routes/open-in-editor");
 const open_in_file_explorer_1 = require("./routes/open-in-file-explorer");
+const paste_effects_1 = require("./routes/paste-effects");
 const project_info_1 = require("./routes/project-info");
 const redo_1 = require("./routes/redo");
 const register_client_render_1 = require("./routes/register-client-render");
@@ -62,6 +63,7 @@ exports.allApiRoutes = {
     '/api/add-sequence-keyframe': add_sequence_keyframe_1.addSequenceKeyframeHandler,
     '/api/add-effect-keyframe': add_effect_keyframe_1.addEffectKeyframeHandler,
     '/api/delete-effect': delete_effect_1.deleteEffectHandler,
+    '/api/paste-effects': paste_effects_1.pasteEffectsHandler,
     '/api/delete-jsx-node': delete_jsx_node_1.deleteJsxNodeHandler,
     '/api/duplicate-jsx-node': duplicate_jsx_node_1.duplicateJsxNodeHandler,
     '/api/update-available': update_available_1.handleUpdate,

package/dist/preview-server/routes/add-effect-keyframe.js

@@ -27,6 +27,7 @@ const addEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectI
         input: fileContents,
         sequenceNodePath: sequenceNodePath.nodePath,
         effectIndex,
+        schema,
         updates: [
             {
                 key,
@@ -83,6 +84,7 @@ const addEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectI
         };
     }
     return (0, can_update_effect_props_1.computeEffectPropStatus)({
+        ast,
         jsx,
         effectIndex,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),

package/dist/preview-server/routes/add-sequence-keyframe.js

@@ -24,6 +24,7 @@ const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, v
     const { output, oldValueStrings, newValueStrings, formatted, logLine, updatedNodePath, } = await (0, update_keyframes_1.updateSequenceKeyframes)({
         input: fileContents,
         nodePath: nodePath.nodePath,
+        schema,
         updates: [
             {
                 key,

package/dist/preview-server/routes/apply-codemod.js

@@ -37,6 +37,24 @@ const getCodemodUndoDescription = (codemod) => {
             entryType: codemod.type,
         };
     }
+    if (codemod.type === 'delete-folder') {
+        const label = `folder "${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}"`;
+        return {
+            undoMessage: `↩️  Deletion of ${label}`,
+            redoMessage: `↪️  Deletion of ${label}`,
+            entryType: codemod.type,
+        };
+    }
+    if (codemod.type === 'rename-folder') {
+        const oldName = `${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}`;
+        const newName = `${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.newName}`;
+        const label = `folder "${oldName}" to "${newName}"`;
+        return {
+            undoMessage: `↩️  Rename of ${label}`,
+            redoMessage: `↪️  Rename of ${label}`,
+            entryType: codemod.type,
+        };
+    }
     return {
         undoMessage: '↩️  Visual control change',
         redoMessage: '↪️  Visual control change',

package/dist/preview-server/routes/can-update-effect-props.d.ts

@@ -1,6 +1,7 @@
-import type { JSXOpeningElement } from '@babel/types';
+import type { File, JSXOpeningElement } from '@babel/types';
 import type { CanUpdateEffectPropsResponse, SequenceNodePath, SequenceSchema } from 'remotion';
-export declare const computeEffectPropStatus: ({ jsx, effectIndex, keys, }: {
+export declare const computeEffectPropStatus: ({ ast, jsx, effectIndex, keys, }: {
+    ast: File;
     jsx: JSXOpeningElement;
     effectIndex: number;
     keys: string[];

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

@@ -6,6 +6,10 @@ const parse_ast_1 = require("../../codemods/parse-ast");
 const update_effect_props_1 = require("../../codemods/update-effect-props/update-effect-props");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
+const staticStatus = (codeValue) => ({
+    status: 'static',
+    codeValue,
+});
 const findEffectsAttr = (jsx) => {
     for (const attr of jsx.attributes) {
         if (attr.type !== 'JSXAttribute') {
@@ -27,6 +31,63 @@ const getEffectsArrayElements = (attr) => {
     }
     return (0, update_effect_props_1.enumerateEffectArrayElements)(expr);
 };
+const getImportedName = (specifier) => {
+    var _a, _b;
+    if (!specifier.imported) {
+        return null;
+    }
+    if (specifier.imported.type === 'Identifier') {
+        return (_a = specifier.imported.name) !== null && _a !== void 0 ? _a : null;
+    }
+    return (_b = specifier.imported.value) !== null && _b !== void 0 ? _b : null;
+};
+const resolveEffectImport = ({ ast, call, fallbackCallee, }) => {
+    var _a, _b;
+    var _c;
+    const { callee } = call;
+    if (callee.type === 'Identifier') {
+        const localName = callee.name;
+        for (const node of ast.program.body) {
+            if (node.type !== 'ImportDeclaration') {
+                continue;
+            }
+            const matchingSpecifier = (_a = node.specifiers) === null || _a === void 0 ? void 0 : _a.find((specifier) => {
+                var _a;
+                return (specifier.type === 'ImportSpecifier' &&
+                    ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === localName);
+            });
+            if ((matchingSpecifier === null || matchingSpecifier === void 0 ? void 0 : matchingSpecifier.type) === 'ImportSpecifier') {
+                return {
+                    callee: (_c = getImportedName(matchingSpecifier)) !== null && _c !== void 0 ? _c : fallbackCallee,
+                    importPath: String(node.source.value),
+                };
+            }
+        }
+    }
+    if (callee.type === 'MemberExpression' &&
+        callee.object.type === 'Identifier' &&
+        callee.property.type === 'Identifier' &&
+        !callee.computed) {
+        const namespaceName = callee.object.name;
+        for (const node of ast.program.body) {
+            if (node.type !== 'ImportDeclaration') {
+                continue;
+            }
+            const matchingSpecifier = (_b = node.specifiers) === null || _b === void 0 ? void 0 : _b.find((specifier) => {
+                var _a;
+                return (specifier.type === 'ImportNamespaceSpecifier' &&
+                    ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === namespaceName);
+            });
+            if (matchingSpecifier) {
+                return {
+                    callee: callee.property.name,
+                    importPath: String(node.source.value),
+                };
+            }
+        }
+    }
+    return { callee: fallbackCallee, importPath: null };
+};
 const getPropsFromObjectExpression = ({ objExpr, keys, }) => {
     const out = {};
     for (const key of keys) {
@@ -35,7 +96,7 @@ const getPropsFromObjectExpression = ({ objExpr, keys, }) => {
                 (p.key.type === 'StringLiteral' &&
                     p.key.value === key)));
         if (!prop) {
-            out[key] = { canUpdate: true, codeValue: undefined };
+            out[key] = staticStatus(undefined);
             continue;
         }
         const valueExpr = prop.value;
@@ -44,13 +105,13 @@ const getPropsFromObjectExpression = ({ objExpr, keys, }) => {
             continue;
         }
         out[key] = {
-            canUpdate: true,
+            status: 'static',
             codeValue: (0, can_update_sequence_props_1.extractStaticValue)(valueExpr),
         };
     }
     return out;
 };
-const computeEffectPropStatus = ({ jsx, effectIndex, keys, }) => {
+const computeEffectPropStatus = ({ ast, jsx, effectIndex, keys, }) => {
     const attr = findEffectsAttr(jsx);
     const elements = getEffectsArrayElements(attr);
     if (!elements) {
@@ -76,14 +137,20 @@ const computeEffectPropStatus = ({ jsx, effectIndex, keys, }) => {
         };
     }
     const call = target.node;
+    const effectImport = resolveEffectImport({
+        ast,
+        call,
+        fallbackCallee: target.callee,
+    });
     if (call.arguments.length === 0) {
         const emptyProps = {};
         for (const key of keys) {
-            emptyProps[key] = { canUpdate: true, codeValue: undefined };
+            emptyProps[key] = staticStatus(undefined);
         }
         return {
             canUpdate: true,
-            callee: target.callee,
+            callee: effectImport.callee,
+            importPath: effectImport.importPath,
             effectIndex,
             props: emptyProps,
         };
@@ -103,7 +170,8 @@ const computeEffectPropStatus = ({ jsx, effectIndex, keys, }) => {
     return {
         canUpdate: true,
         effectIndex,
-        callee: target.callee,
+        callee: effectImport.callee,
+        importPath: effectImport.importPath,
         props: resolvedProps,
     };
 };
@@ -119,6 +187,7 @@ const computeEffectPropsStatusesFromContent = ({ fileContents, sequenceNodePath,
         }));
     }
     return effects.map((effect, effectIndex) => (0, exports.computeEffectPropStatus)({
+        ast,
         jsx,
         effectIndex,
         keys: keysFor(effect),

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

@@ -36,12 +36,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.lineColumnToNodePath = exports.findNodePathForJsxElement = exports.findJsxElementAtNodePath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
+const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const parse_ast_1 = require("../../codemods/parse-ast");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
+const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const jsx_element_not_found_at_location_error_1 = require("../jsx-element-not-found-at-location-error");
 const can_update_effect_props_1 = require("./can-update-effect-props");
+const staticStatus = (codeValue) => ({
+    status: 'static',
+    codeValue,
+});
+const computedStatus = () => ({
+    status: 'computed',
+});
 const isStaticValue = (node) => {
     switch (node.type) {
         case 'NumericLiteral':
@@ -305,8 +314,7 @@ const getInterpolationKeyframes = (node) => {
     }
     const callExpression = node;
     if (callExpression.callee.type !== 'Identifier' ||
-        (callExpression.callee.name !== 'interpolate' &&
-            callExpression.callee.name !== 'interpolateColors')) {
+        !(0, studio_shared_1.isKeyframeInterpolationFunction)(callExpression.callee.name)) {
         return undefined;
     }
     const interpolationFunction = callExpression.callee.name;
@@ -358,11 +366,11 @@ const getInterpolationKeyframes = (node) => {
 const getComputedStatus = (node) => {
     const interpolation = getInterpolationKeyframes(node);
     if (!interpolation) {
-        return { canUpdate: false, reason: 'computed' };
+        return computedStatus();
     }
     return {
-        canUpdate: false,
-        reason: 'keyframed',
+        status: 'keyframed',
+        codeValue: undefined,
         interpolationFunction: interpolation.interpolationFunction,
         keyframes: interpolation.keyframes,
         easing: interpolation.easing,
@@ -386,39 +394,33 @@ const getPropsStatus = (jsxElement) => {
         }
         const { value } = attr;
         if (!value) {
-            props[name] = { canUpdate: true, codeValue: true };
+            props[name] = staticStatus(true);
             continue;
         }
         if (value.type === 'StringLiteral') {
-            props[name] = {
-                canUpdate: true,
-                codeValue: value.value,
-            };
+            props[name] = staticStatus(value.value);
             continue;
         }
         if (value.type === 'JSXExpressionContainer') {
             const { expression } = value;
             if (expression.type === 'JSXEmptyExpression') {
-                props[name] = { canUpdate: false, reason: 'computed' };
+                props[name] = computedStatus();
                 continue;
             }
             if (!(0, exports.isStaticValue)(expression)) {
                 props[name] = (0, exports.getComputedStatus)(expression);
                 continue;
             }
-            props[name] = {
-                canUpdate: true,
-                codeValue: (0, exports.extractStaticValue)(expression),
-            };
+            props[name] = staticStatus((0, exports.extractStaticValue)(expression));
             continue;
         }
-        props[name] = { canUpdate: false, reason: 'computed' };
+        props[name] = computedStatus();
     }
     return props;
 };
 const getNodePathForRecastPath = (
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-recastPath) => {
+recastPath, ast) => {
     const segments = [];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let current = recastPath;
@@ -428,9 +430,9 @@ recastPath) => {
     }
     // Recast paths start with "root" which doesn't correspond to a real AST property
     if (segments.length > 0 && segments[0] === 'root') {
-        return segments.slice(1);
+        return (0, import_agnostic_node_path_1.toImportAgnosticNodePath)({ ast, nodePath: segments.slice(1) });
     }
-    return segments;
+    return (0, import_agnostic_node_path_1.toImportAgnosticNodePath)({ ast, nodePath: segments });
 };
 const findJsxElementAtNodePath = (ast, nodePath) => {
     const current = (0, get_ast_node_path_1.getAstNodePath)(ast, nodePath);
@@ -448,7 +450,7 @@ const findNodePathForJsxElement = (ast, target) => {
     recast.types.visit(ast, {
         visitJSXOpeningElement(p) {
             if (p.node === target) {
-                foundPath = getNodePathForRecastPath(p);
+                foundPath = getNodePathForRecastPath(p, ast);
                 return false;
             }
             return this.traverse(p);
@@ -463,7 +465,7 @@ const lineColumnToNodePath = (ast, targetLine) => {
         visitJSXOpeningElement(p) {
             const { node } = p;
             if (node.loc && node.loc.start.line === targetLine) {
-                foundPath = getNodePathForRecastPath(p);
+                foundPath = getNodePathForRecastPath(p, ast);
                 return false;
             }
             return this.traverse(p);
@@ -492,16 +494,16 @@ const getNestedPropStatus = (jsxElement, parentKey, childKey) => {
         a.name.name === parentKey);
     if (!attr || !attr.value) {
         // Parent attribute doesn't exist, nested prop can be added
-        return { canUpdate: true, codeValue: undefined };
+        return staticStatus(undefined);
     }
     if (attr.value.type !== 'JSXExpressionContainer') {
-        return { canUpdate: false, reason: 'computed' };
+        return computedStatus();
     }
     const { expression } = attr.value;
     if (expression.type === 'JSXEmptyExpression' ||
         expression.type !== 'ObjectExpression') {
         // Parent is not an object literal (e.g. style={myStyles})
-        return { canUpdate: false, reason: 'computed' };
+        return computedStatus();
     }
     const objExpr = expression;
     const prop = objExpr.properties.find((p) => p.type === 'ObjectProperty' &&
@@ -509,7 +511,7 @@ const getNestedPropStatus = (jsxElement, parentKey, childKey) => {
             (p.key.type === 'StringLiteral' && p.key.value === childKey)));
     if (!prop) {
         // Property not set in the object, can be added
-        return { canUpdate: true, codeValue: undefined };
+        return staticStatus(undefined);
     }
     const propValue = prop.value;
     if (!(0, exports.isStaticValue)(propValue)) {
@@ -517,12 +519,13 @@ const getNestedPropStatus = (jsxElement, parentKey, childKey) => {
     }
     const codeValue = (0, exports.extractStaticValue)(propValue);
     if (!validateStyleValue(childKey, codeValue)) {
-        return { canUpdate: false, reason: 'computed' };
+        return computedStatus();
     }
-    return { canUpdate: true, codeValue };
+    return staticStatus(codeValue);
 };
-const computeEffectsForJsx = ({ jsxElement, effects, }) => {
+const computeEffectsForJsx = ({ ast, jsxElement, effects, }) => {
     return effects.map((effect, effectIndex) => (0, can_update_effect_props_1.computeEffectPropStatus)({
+        ast,
         jsx: jsxElement,
         effectIndex,
         keys: effect,
@@ -540,7 +543,7 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, keys, }) => {
             filteredProps[key] = allProps[key];
         }
         else {
-            filteredProps[key] = { canUpdate: true, codeValue: undefined };
+            filteredProps[key] = staticStatus(undefined);
         }
     }
     return filteredProps;
@@ -552,7 +555,7 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, e
         throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
     }
     const filteredProps = computeSequenceOnlyPropsRecord({ jsxElement, keys });
-    const effectsStatuses = computeEffectsForJsx({ jsxElement, effects });
+    const effectsStatuses = computeEffectsForJsx({ ast, jsxElement, effects });
     return {
         canUpdate: true,
         props: filteredProps,

package/dist/preview-server/routes/delete-keyframes.js

@@ -241,6 +241,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
             };
         }
         return (0, can_update_effect_props_1.computeEffectPropStatus)({
+            ast,
             jsx,
             effectIndex: keyframe.effectIndex,
             keys: (0, studio_shared_1.getAllSchemaKeys)(keyframe.schema),

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

@@ -17,12 +17,35 @@ 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 () => {