@remotion/studio-server 4.0.473 → 4.0.475

package/dist/codemods/effect-param-expression.js

@@ -39,10 +39,7 @@ const imports_1 = require("../helpers/imports");
 const update_nested_prop_1 = require("./update-nested-prop");
 const b = recast.types.builders;
 const isNonLinearEasing = (easing) => easing !== 'linear';
-const keyframedParamNeedsEasingImport = (param) => {
-    return (param.interpolationFunction !== 'interpolateColors' &&
-        param.easing.some(isNonLinearEasing));
-};
+const keyframedParamNeedsEasingImport = (param) => param.easing.some(isNonLinearEasing);
 const getRequiredRemotionImportsForEffectParams = (params) => {
     const requiredImports = new Set();
     for (const param of params) {
@@ -91,10 +88,10 @@ const makeKeyframedOptions = ({ param, remotionLocalNames, }) => {
         if (param.clamping.right !== 'extend') {
             properties.push(b.objectProperty(b.identifier('extrapolateRight'), b.stringLiteral(param.clamping.right)));
         }
-        if (keyframedParamNeedsEasingImport(param)) {
-            const easingLocalName = (_a = remotionLocalNames.Easing) !== null && _a !== void 0 ? _a : 'Easing';
-            properties.push(b.objectProperty(b.identifier('easing'), b.arrayExpression(param.easing.map((easing) => makeEasingExpression({ easing, easingLocalName })))));
-        }
+    }
+    if (keyframedParamNeedsEasingImport(param)) {
+        const easingLocalName = (_a = remotionLocalNames.Easing) !== null && _a !== void 0 ? _a : 'Easing';
+        properties.push(b.objectProperty(b.identifier('easing'), b.arrayExpression(param.easing.map((easing) => makeEasingExpression({ easing, easingLocalName })))));
     }
     if (param.posterize !== undefined) {
         properties.push(b.objectProperty(b.identifier('posterize'), (0, update_nested_prop_1.parseValueExpression)(param.posterize)));

package/dist/codemods/update-keyframes/update-keyframes.d.ts

@@ -1,5 +1,8 @@
 import { type KeyframeInterpolationFunction } from '@remotion/studio-shared';
-import type { ExtrapolateType, SequenceNodePath, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, ExtrapolateType, SequenceNodePath, SequenceSchema } from 'remotion';
+type KeyframeEasing = Extract<CanUpdateSequencePropStatus, {
+    status: 'keyframed';
+}>['easing'][number];
 export type KeyframeOperation = {
     type: 'add';
     frame: number;
@@ -14,6 +17,10 @@ export type KeyframeOperation = {
         right: ExtrapolateType;
     } | undefined;
     posterize: number | undefined;
+} | {
+    type: 'easing';
+    segmentIndex: number;
+    easing: KeyframeEasing;
 } | {
     type: 'move';
     moves: {
@@ -32,6 +39,7 @@ export type EffectKeyframeUpdate = {
 export type IntroducedKeyframeIdentifiers = {
     calleeName: KeyframeInterpolationFunction | null;
     needsFrameHook: boolean;
+    needsEasingImport: boolean;
 };
 export declare const updateSequenceKeyframesAst: ({ input, nodePath, updates, schema, }: {
     input: string;
@@ -89,3 +97,4 @@ export declare const updateEffectKeyframes: ({ input, sequenceNodePath, effectIn
     effectCallee: string;
     updatedSequenceNodePath: SequenceNodePath;
 }>;
+export {};

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -44,6 +44,62 @@ const update_effect_props_1 = require("../update-effect-props/update-effect-prop
 const update_nested_prop_1 = require("../update-nested-prop");
 const ensure_imports_and_frame_hook_1 = require("./ensure-imports-and-frame-hook");
 const b = recast.types.builders;
+const getObjectPropertyNameFromUpdateKey = (key) => {
+    const dotIndex = key.indexOf('.');
+    return dotIndex === -1 ? key : key.slice(dotIndex + 1);
+};
+const lineStartsWithPropertyName = ({ line, propertyName, }) => {
+    const trimmed = line.trimStart();
+    return (trimmed.startsWith(`${propertyName}:`) ||
+        trimmed.startsWith(`'${propertyName}':`) ||
+        trimmed.startsWith(`"${propertyName}":`));
+};
+const getIndent = (line) => {
+    var _a;
+    var _b;
+    return (_b = (_a = line.match(/^[ \t]*/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '';
+};
+const removeBlankLinesFromObjectsWithProperties = ({ input, propertyNames, }) => {
+    if (propertyNames.length === 0) {
+        return input;
+    }
+    const lines = input.split('\n');
+    const linesToRemove = new Set();
+    for (let i = 0; i < lines.length; i++) {
+        const propertyName = propertyNames.find((name) => lineStartsWithPropertyName({ line: lines[i], propertyName: name }));
+        if (!propertyName) {
+            continue;
+        }
+        const propertyIndentLength = getIndent(lines[i]).length;
+        let objectStart = i;
+        for (let j = i - 1; j >= 0; j--) {
+            const trimmed = lines[j].trim();
+            if (trimmed.endsWith('{') &&
+                getIndent(lines[j]).length < propertyIndentLength) {
+                objectStart = j;
+                break;
+            }
+        }
+        let objectEnd = i;
+        for (let j = i + 1; j < lines.length; j++) {
+            const trimmed = lines[j].trim();
+            if (trimmed.startsWith('}') &&
+                getIndent(lines[j]).length < propertyIndentLength) {
+                objectEnd = j;
+                break;
+            }
+        }
+        for (let j = objectStart + 1; j < objectEnd; j++) {
+            if (lines[j].trim() === '') {
+                linesToRemove.add(j);
+            }
+        }
+    }
+    if (linesToRemove.size === 0) {
+        return input;
+    }
+    return lines.filter((_, index) => !linesToRemove.has(index)).join('\n');
+};
 const getSupportedCallArgument = (arg) => {
     if (arg === undefined ||
         arg.type === 'ArgumentPlaceholder' ||
@@ -168,6 +224,173 @@ const setOptionsProperty = ({ options, propertyName, value, }) => {
     }
     options.properties.push(b.objectProperty(b.identifier(propertyName), value));
 };
+const isLinearEasing = (easing) => easing === 'linear';
+const getKeyframeEasing = (node) => {
+    if (node.type === 'TSAsExpression') {
+        return getKeyframeEasing(node.expression);
+    }
+    if (node.type === 'MemberExpression' &&
+        node.object.type === 'Identifier' &&
+        node.object.name === 'Easing' &&
+        node.property.type === 'Identifier' &&
+        node.property.name === 'linear' &&
+        node.computed === false) {
+        return 'linear';
+    }
+    if (node.type !== 'CallExpression' ||
+        node.callee.type !== 'MemberExpression' ||
+        node.callee.object.type !== 'Identifier' ||
+        node.callee.object.name !== 'Easing' ||
+        node.callee.property.type !== 'Identifier' ||
+        node.callee.property.name !== 'bezier' ||
+        node.callee.computed ||
+        node.arguments.length !== 4) {
+        return null;
+    }
+    const values = node.arguments.map((arg) => {
+        if (arg.type === 'ArgumentPlaceholder' ||
+            arg.type === 'JSXNamespacedName' ||
+            arg.type === 'SpreadElement') {
+            return null;
+        }
+        return getNumericValue(arg);
+    });
+    if (values.some((value) => value === null)) {
+        return null;
+    }
+    return values;
+};
+const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
+    if (segmentCount === 0) {
+        return [];
+    }
+    if (easingNode.type === 'TSAsExpression') {
+        return getKeyframeEasingArray({
+            easingNode: easingNode.expression,
+            segmentCount,
+        });
+    }
+    if (easingNode.type === 'ArrayExpression') {
+        if (easingNode.elements.length > segmentCount) {
+            return null;
+        }
+        const parsed = easingNode.elements.map((element) => {
+            if (!element || element.type === 'SpreadElement') {
+                return null;
+            }
+            return getKeyframeEasing(element);
+        });
+        if (parsed.some((value) => value === null)) {
+            return null;
+        }
+        const easingArray = parsed;
+        while (easingArray.length < segmentCount) {
+            easingArray.push('linear');
+        }
+        return easingArray;
+    }
+    const easing = getKeyframeEasing(easingNode);
+    if (!easing) {
+        return null;
+    }
+    return new Array(segmentCount).fill(easing);
+};
+const getExistingEasingArray = ({ options, segmentCount, }) => {
+    const { prop } = findObjectOptionProperty(options, 'easing');
+    if (!prop) {
+        return new Array(segmentCount).fill('linear');
+    }
+    const easing = getKeyframeEasingArray({
+        easingNode: prop.value,
+        segmentCount,
+    });
+    if (!easing) {
+        throw new Error('Cannot update easing: easing must be inline');
+    }
+    return easing;
+};
+const getExistingEasingArrayOrNull = ({ options, segmentCount, }) => {
+    const { prop } = findObjectOptionProperty(options, 'easing');
+    if (!prop) {
+        return null;
+    }
+    return getExistingEasingArray({ options, segmentCount });
+};
+const createEasingExpression = (easing) => {
+    if (easing === 'linear') {
+        return b.memberExpression(b.identifier('Easing'), b.identifier('linear'));
+    }
+    return b.callExpression(b.memberExpression(b.identifier('Easing'), b.identifier('bezier')), easing.map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
+};
+const createEasingArrayExpression = (easing) => b.arrayExpression(easing.map((easingValue) => createEasingExpression(easingValue)));
+const setEasingOption = ({ options, easing, }) => {
+    const hasNonLinearEasing = easing.some((easingValue) => !isLinearEasing(easingValue));
+    setOptionsProperty({
+        options,
+        propertyName: 'easing',
+        value: hasNonLinearEasing ? createEasingArrayExpression(easing) : null,
+    });
+    return hasNonLinearEasing;
+};
+const getExtraArgsWithOptions = ({ extraArgs, options, }) => {
+    return options.properties.length === 0
+        ? extraArgs.slice(1)
+        : [options, ...extraArgs.slice(1)];
+};
+const getInlineOptionsFromExtraArgs = (extraArgs) => {
+    const existingOptions = extraArgs[0];
+    if (!existingOptions || existingOptions.type !== 'ObjectExpression') {
+        return null;
+    }
+    return existingOptions;
+};
+const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, nextSegmentCount, }) => {
+    const options = getInlineOptionsFromExtraArgs(extraArgs);
+    if (!options) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    const easing = getExistingEasingArrayOrNull({
+        options,
+        segmentCount: previousSegmentCount,
+    });
+    if (easing === null) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    while (easing.length < nextSegmentCount) {
+        easing.push('linear');
+    }
+    return {
+        extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
+        needsEasingImport: setEasingOption({ options, easing }),
+    };
+};
+const normalizeEasingAfterRemovingKeyframe = ({ extraArgs, previousSegmentCount, nextSegmentCount, removedKeyframeIndex, }) => {
+    const options = getInlineOptionsFromExtraArgs(extraArgs);
+    if (!options) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    const easing = getExistingEasingArrayOrNull({
+        options,
+        segmentCount: previousSegmentCount,
+    });
+    if (easing === null) {
+        return { extraArgs, needsEasingImport: false };
+    }
+    if (easing.length > 0) {
+        const easingIndexToRemove = removedKeyframeIndex === 0 ? 0 : removedKeyframeIndex - 1;
+        easing.splice(easingIndexToRemove, 1);
+    }
+    while (easing.length > nextSegmentCount) {
+        easing.pop();
+    }
+    while (easing.length < nextSegmentCount) {
+        easing.push('linear');
+    }
+    return {
+        extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
+        needsEasingImport: setEasingOption({ options, easing }),
+    };
+};
 const validatePosterize = (posterize) => {
     if (posterize === undefined) {
         return;
@@ -227,6 +450,46 @@ const updateKeyframeSettings = ({ expression, clamping, posterize, }) => {
         keyframes: existing.keyframes,
     });
 };
+const updateKeyframeEasing = ({ expression, segmentIndex, easing, }) => {
+    const existing = getInterpolationExpression(expression);
+    if (!existing) {
+        throw new Error('Cannot update easing on non-keyframed value');
+    }
+    const segmentCount = Math.max(0, existing.keyframes.length - 1);
+    if (!Number.isInteger(segmentIndex) ||
+        segmentIndex < 0 ||
+        segmentIndex >= segmentCount) {
+        throw new Error('Cannot update easing: segment index out of range');
+    }
+    const extraArgs = [...existing.extraArgs];
+    const existingOptions = extraArgs[0];
+    if (existingOptions && existingOptions.type !== 'ObjectExpression') {
+        throw new Error('Cannot update easing: options must be inline');
+    }
+    const options = (existingOptions === null || existingOptions === void 0 ? void 0 : existingOptions.type) === 'ObjectExpression'
+        ? existingOptions
+        : createEmptyOptionsExpression();
+    const nextEasing = getExistingEasingArray({ options, segmentCount });
+    nextEasing[segmentIndex] = easing;
+    const hasNonLinearEasing = nextEasing.some((easingValue) => !isLinearEasing(easingValue));
+    setOptionsProperty({
+        options,
+        propertyName: 'easing',
+        value: hasNonLinearEasing ? createEasingArrayExpression(nextEasing) : null,
+    });
+    const nextExtraArgs = options.properties.length === 0
+        ? extraArgs.slice(1)
+        : [options, ...extraArgs.slice(1)];
+    return {
+        expression: createInterpolateExpression({
+            callee: existing.callee,
+            input: existing.input,
+            extraArgs: nextExtraArgs,
+            keyframes: existing.keyframes,
+        }),
+        needsEasingImport: hasNonLinearEasing,
+    };
+};
 const createInterpolateExpression = ({ callee, input, extraArgs, keyframes, }) => {
     const sortedKeyframes = [...keyframes].sort((first, second) => first.frame - second.frame);
     return b.callExpression(callee, [
@@ -239,6 +502,7 @@ const createInterpolateExpression = ({ callee, input, extraArgs, keyframes, }) =
 const noIntroducedIdentifiers = {
     calleeName: null,
     needsFrameHook: false,
+    needsEasingImport: false,
 };
 const addKeyframe = ({ expression, key, frame, value, schema, }) => {
     if (!(0, studio_shared_1.isSchemaFieldKeyframable)({ schema, key })) {
@@ -261,11 +525,18 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
             : existing.keyframes.map((keyframe, index) => index === existingIndex
                 ? { frame, output: newOutput, value }
                 : keyframe);
+        const normalizedEasing = existingIndex === -1
+            ? normalizeEasingAfterAddingKeyframe({
+                extraArgs: existing.extraArgs,
+                previousSegmentCount: Math.max(existing.keyframes.length - 1, 0),
+                nextSegmentCount: Math.max(nextKeyframes.length - 1, 0),
+            })
+            : { extraArgs: existing.extraArgs, needsEasingImport: false };
         return {
             expression: createInterpolateExpression({
                 callee: b.identifier(nextCalleeName),
                 input: existing.input,
-                extraArgs: existing.extraArgs,
+                extraArgs: normalizedEasing.extraArgs,
                 keyframes: nextKeyframes,
             }),
             introduced: {
@@ -273,6 +544,7 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
                     ? schemaCalleeName
                     : null,
                 needsFrameHook: false,
+                needsEasingImport: normalizedEasing.needsEasingImport,
             },
         };
     }
@@ -302,6 +574,7 @@ const addKeyframe = ({ expression, key, frame, value, schema, }) => {
                 ? callee.name
                 : null,
             needsFrameHook: true,
+            needsEasingImport: false,
         },
     };
 };
@@ -316,14 +589,29 @@ const removeKeyframe = ({ expression, frame, }) => {
     }
     const nextKeyframes = existing.keyframes.filter((_keyframe, index) => index !== keyframeIndex);
     if (nextKeyframes.length === 0) {
-        return existing.keyframes[keyframeIndex].output;
+        return {
+            expression: existing.keyframes[keyframeIndex].output,
+            introduced: noIntroducedIdentifiers,
+        };
     }
-    return createInterpolateExpression({
-        callee: existing.callee,
-        input: existing.input,
+    const normalizedEasing = normalizeEasingAfterRemovingKeyframe({
         extraArgs: existing.extraArgs,
-        keyframes: nextKeyframes,
+        previousSegmentCount: Math.max(existing.keyframes.length - 1, 0),
+        nextSegmentCount: Math.max(nextKeyframes.length - 1, 0),
+        removedKeyframeIndex: keyframeIndex,
     });
+    return {
+        expression: createInterpolateExpression({
+            callee: existing.callee,
+            input: existing.input,
+            extraArgs: normalizedEasing.extraArgs,
+            keyframes: nextKeyframes,
+        }),
+        introduced: {
+            ...noIntroducedIdentifiers,
+            needsEasingImport: normalizedEasing.needsEasingImport,
+        },
+    };
 };
 const moveKeyframes = ({ expression, moves, }) => {
     var _a;
@@ -395,16 +683,27 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, }) => {
             introduced: noIntroducedIdentifiers,
         };
     }
+    if (operation.type === 'easing') {
+        const updated = updateKeyframeEasing({
+            expression,
+            segmentIndex: operation.segmentIndex,
+            easing: operation.easing,
+        });
+        return {
+            expression: updated.expression,
+            introduced: {
+                ...noIntroducedIdentifiers,
+                needsEasingImport: updated.needsEasingImport,
+            },
+        };
+    }
     if (operation.type === 'move') {
         return {
             expression: moveKeyframes({ expression, moves: operation.moves }),
             introduced: noIntroducedIdentifiers,
         };
     }
-    return {
-        expression: removeKeyframe({ expression, frame: operation.frame }),
-        introduced: noIntroducedIdentifiers,
-    };
+    return removeKeyframe({ expression, frame: operation.frame });
 };
 const getExpressionFromJsxAttribute = (attr) => {
     if (!attr.value) {
@@ -609,6 +908,9 @@ const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, }) => {
             requiredImports.add('useCurrentFrame');
             needsFrameHook = true;
         }
+        if (introduced.needsEasingImport) {
+            requiredImports.add('Easing');
+        }
     }
     if (needsFrameHook) {
         const fnPath = (0, ensure_imports_and_frame_hook_1.findEnclosingFunctionPath)(jsxPath);
@@ -641,8 +943,12 @@ const updateSequenceKeyframes = async ({ input, nodePath, updates, schema, prett
         input: serialized,
         prettierConfigOverride,
     });
+    const outputWithoutInsertedBlankLines = removeBlankLinesFromObjectsWithProperties({
+        input: output,
+        propertyNames: updates.map((update) => getObjectPropertyNameFromUpdateKey(update.key)),
+    });
     return {
-        output,
+        output: outputWithoutInsertedBlankLines,
         formatted,
         oldValueStrings,
         newValueStrings,
@@ -699,6 +1005,9 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
             requiredImports.add('useCurrentFrame');
             needsFrameHook = true;
         }
+        if (introduced.needsEasingImport) {
+            requiredImports.add('Easing');
+        }
     }
     if (needsFrameHook) {
         const fnPath = (0, ensure_imports_and_frame_hook_1.findEnclosingFunctionPath)(jsxPath);
@@ -733,8 +1042,12 @@ const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, upd
         input: serialized,
         prettierConfigOverride,
     });
+    const outputWithoutInsertedBlankLines = removeBlankLinesFromObjectsWithProperties({
+        input: output,
+        propertyNames: updates.map((update) => update.key),
+    });
     return {
-        output,
+        output: outputWithoutInsertedBlankLines,
         formatted,
         oldValueStrings,
         newValueStrings,

package/dist/helpers/imports.js

@@ -105,18 +105,23 @@ const ensureNamedImport = ({ ast, importedName, sourcePath, localName, }) => {
 };
 exports.ensureNamedImport = ensureNamedImport;
 const ensureNamedImports = ({ ast, importedNames, sourcePath, }) => {
-    var _a, _b;
+    var _a;
+    var _b, _c, _d;
     if (importedNames.size === 0) {
         return;
     }
     const existingImports = findImportDeclarations(ast, sourcePath);
     const existingNames = new Set();
     for (const existingImportDeclaration of existingImports) {
-        for (const importSpecifierCandidate of (_a = existingImportDeclaration.specifiers) !== null && _a !== void 0 ? _a : []) {
+        for (const importSpecifierCandidate of (_b = existingImportDeclaration.specifiers) !== null && _b !== void 0 ? _b : []) {
             if (importSpecifierCandidate.type !== 'ImportSpecifier') {
                 continue;
             }
-            existingNames.add((0, exports.getImportedName)(importSpecifierCandidate));
+            const importedName = (0, exports.getImportedName)(importSpecifierCandidate);
+            const localName = (_c = (_a = importSpecifierCandidate.local) === null || _a === void 0 ? void 0 : _a.name) !== null && _c !== void 0 ? _c : importedName;
+            if (localName === importedName) {
+                existingNames.add(importedName);
+            }
         }
     }
     const existingImport = existingImports.find((candidateImportDeclaration) => !hasNamespaceSpecifier(candidateImportDeclaration));
@@ -126,7 +131,7 @@ const ensureNamedImports = ({ ast, importedNames, sourcePath, }) => {
                 continue;
             }
             existingImport.specifiers = [
-                ...((_b = existingImport.specifiers) !== null && _b !== void 0 ? _b : []),
+                ...((_d = existingImport.specifiers) !== null && _d !== void 0 ? _d : []),
                 b.importSpecifier(b.identifier(importedName)),
             ];
             existingNames.add(importedName);

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,10 +542,18 @@ const createSolidElement = ({ localName, width, height, }) => {
         createPositionAbsoluteStyleAttribute(),
     ], true), null, []);
 };
-const createAssetElement = ({ localName, staticFileLocalName, src, dimensions, }) => {
+const createComponentElement = ({ localName, props, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
-        createStaticFileSrcAttribute({ staticFileLocalName, src }),
+        ...props.map(createComponentProp),
         createPositionAbsoluteStyleAttribute(),
+    ], true), null, []);
+};
+const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, }) => {
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
+        staticFileLocalName === null
+            ? createStringSrcAttribute(src)
+            : createStaticFileSrcAttribute({ staticFileLocalName, src }),
+        ...(addPositionStyle ? [createPositionAbsoluteStyleAttribute()] : []),
         ...(dimensions
             ? [
                 createNumberAttribute('width', dimensions.width),
@@ -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);
@@ -966,6 +1043,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             throw new Error('Unsupported asset type');
         }
         return createAssetElement({
+            addPositionStyle: element.assetType !== 'audio',
             localName,
             staticFileLocalName,
             src: element.src,