@remotion/studio-server 4.0.485 → 4.0.487

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

@@ -41,8 +41,10 @@ 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 no_react_1 = require("remotion/no-react");
 const format_file_content_1 = require("../codemods/format-file-content");
 const parse_ast_1 = require("../codemods/parse-ast");
+const update_nested_prop_1 = require("../codemods/update-nested-prop");
 const imports_1 = require("./imports");
 const allowedFileExtensions = new Set(['.tsx', '.ts', '.jsx', '.js']);
 const extensionsToProbe = ['.tsx', '.ts', '.jsx', '.js'];
@@ -119,7 +121,7 @@ const getComponentIdentifier = (element) => {
     return attribute.value.expression.name;
 };
 const isRecord = (value) => {
-    return typeof value === 'object' && value !== null;
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
 };
 const findDynamicImportPath = (value) => {
     if (!isRecord(value)) {
@@ -578,11 +580,18 @@ const createComponentElement = ({ addPositionStyle, localName, props, position,
             : []),
     ], true), null, []);
 };
-const createSequenceWrappedElement = ({ child, dimensions, name, position, sequenceLocalName, }) => {
+const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, name, position, sequenceLocalName, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(sequenceLocalName), [
         ...(name === null ? [] : [createStringAttribute('name', name)]),
-        createNumberAttribute('width', dimensions.width),
-        createNumberAttribute('height', dimensions.height),
+        ...(dimensions !== null
+            ? [
+                createNumberAttribute('width', dimensions.width),
+                createNumberAttribute('height', dimensions.height),
+            ]
+            : []),
+        ...(durationInFrames === null
+            ? []
+            : [createNumberAttribute('durationInFrames', durationInFrames)]),
         createPositionAbsoluteStyleAttribute(position),
     ], false), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier(sequenceLocalName)), [child]);
 };
@@ -847,6 +856,167 @@ const ensureComponentImport = ({ ast, componentName, importName, importPath, })
         localName: componentName,
     });
 };
+const identifierRegex = /^[A-Za-z_$][0-9A-Za-z_$]*$/;
+const toPascalCaseIdentifier = (value) => {
+    var _a;
+    const words = (_a = value.match(/[a-zA-Z0-9]+/g)) !== null && _a !== void 0 ? _a : [];
+    const candidate = words
+        .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+        .join('');
+    if (!candidate) {
+        return 'CompositionComponent';
+    }
+    if (/^[0-9]/.test(candidate)) {
+        return `Composition${candidate}`;
+    }
+    return identifierRegex.test(candidate) ? candidate : 'CompositionComponent';
+};
+const getAvailableLocalName = ({ ast, baseName, }) => {
+    if (!hasTopLevelBinding({ ast, name: baseName })) {
+        return baseName;
+    }
+    const suffixed = `${baseName}Composition`;
+    if (!hasTopLevelBinding({ ast, name: suffixed })) {
+        return suffixed;
+    }
+    for (let i = 2; i < 100; i++) {
+        const candidate = `${suffixed}${i}`;
+        if (!hasTopLevelBinding({ ast, name: candidate })) {
+            return candidate;
+        }
+    }
+    throw new Error(`Cannot find a local name for ${baseName}`);
+};
+const getImportPathBetweenFiles = ({ fromFile, toFile, }) => {
+    let relativeImport = node_path_1.default
+        .relative(node_path_1.default.dirname(fromFile), toFile)
+        .replaceAll(node_path_1.default.sep, '/')
+        .replace(/\.(tsx|ts|jsx|js)$/, '');
+    if (!relativeImport.startsWith('.')) {
+        relativeImport = `./${relativeImport}`;
+    }
+    return relativeImport;
+};
+const ensureDefaultImport = ({ ast, localName, sourcePath, }) => {
+    var _a, _b;
+    var _c;
+    for (const declaration of getImportDeclarations({ ast, sourcePath })) {
+        const defaultSpecifier = (_a = declaration.specifiers) === null || _a === void 0 ? void 0 : _a.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
+        if ((_b = defaultSpecifier === null || defaultSpecifier === void 0 ? void 0 : defaultSpecifier.local) === null || _b === void 0 ? void 0 : _b.name) {
+            return defaultSpecifier.local.name;
+        }
+    }
+    const importSpecifier = recast.types.builders.importDefaultSpecifier(recast.types.builders.identifier(localName));
+    const existingImport = getImportDeclarations({ ast, sourcePath }).find((declaration) => {
+        var _a;
+        return !((_a = declaration.specifiers) === null || _a === void 0 ? void 0 : _a.some((specifier) => specifier.type === 'ImportNamespaceSpecifier'));
+    });
+    if (existingImport) {
+        existingImport.specifiers = [
+            importSpecifier,
+            ...((_c = existingImport.specifiers) !== null && _c !== void 0 ? _c : []),
+        ];
+        return localName;
+    }
+    const importDeclaration = recast.types.builders.importDeclaration([importSpecifier], recast.types.builders.stringLiteral(sourcePath));
+    (0, imports_1.insertImportDeclaration)(ast, importDeclaration);
+    return localName;
+};
+const ensureCompositionComponentImport = async ({ ast, compositionFile, compositionId, destinationFileName, remotionRoot, }) => {
+    const sourceLocation = await (0, exports.resolveCompositionComponentWithFile)({
+        remotionRoot,
+        compositionFile,
+        compositionId,
+    });
+    if (sourceLocation.fileName === destinationFileName) {
+        if (sourceLocation.exportName === 'default') {
+            throw new Error('Cannot insert a composition whose component is a default export in the same file');
+        }
+        if (!hasTopLevelBinding({ ast, name: sourceLocation.exportName })) {
+            throw new Error(`Cannot find component "${sourceLocation.exportName}" in this file`);
+        }
+        return sourceLocation.exportName;
+    }
+    const sourcePath = getImportPathBetweenFiles({
+        fromFile: destinationFileName,
+        toFile: sourceLocation.fileName,
+    });
+    if (sourceLocation.exportName === 'default') {
+        return ensureDefaultImport({
+            ast,
+            localName: getAvailableLocalName({
+                ast,
+                baseName: toPascalCaseIdentifier(compositionId),
+            }),
+            sourcePath,
+        });
+    }
+    return (0, imports_1.ensureNamedImport)({
+        ast,
+        importedName: sourceLocation.exportName,
+        sourcePath,
+        localName: getAvailableLocalName({
+            ast,
+            baseName: sourceLocation.exportName,
+        }),
+    });
+};
+const parseSerializedCompositionProps = (serializedResolvedPropsWithCustomSchema) => {
+    const parsed = JSON.parse(serializedResolvedPropsWithCustomSchema);
+    if (!isRecord(parsed)) {
+        throw new Error('Resolved composition props must be an object');
+    }
+    return parsed;
+};
+const containsFileToken = (value) => {
+    if (typeof value === 'string') {
+        return value.startsWith(no_react_1.NoReactInternals.FILE_TOKEN);
+    }
+    if (Array.isArray(value)) {
+        return value.some(containsFileToken);
+    }
+    if (isRecord(value)) {
+        return Object.values(value).some(containsFileToken);
+    }
+    return false;
+};
+const createExpressionAttribute = (name, value) => {
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer((0, update_nested_prop_1.parseValueExpression)(value)));
+};
+const createCompositionPropAttribute = ({ name, value, }) => {
+    if (typeof value === 'string' &&
+        !value.startsWith(no_react_1.NoReactInternals.FILE_TOKEN) &&
+        !value.startsWith(no_react_1.NoReactInternals.DATE_TOKEN)) {
+        return createStringAttribute(name, value);
+    }
+    return createExpressionAttribute(name, value);
+};
+const createCompositionObjectProperty = ({ name, value, }) => {
+    return recast.types.builders.objectProperty(identifierRegex.test(name)
+        ? recast.types.builders.identifier(name)
+        : recast.types.builders.stringLiteral(name), (0, update_nested_prop_1.parseValueExpression)(value));
+};
+const createCompositionComponentElement = ({ localName, props, }) => {
+    const directAttributes = [];
+    const spreadProperties = [];
+    for (const [name, value] of Object.entries(props)) {
+        if (identifierRegex.test(name)) {
+            directAttributes.push(createCompositionPropAttribute({ name, value }));
+        }
+        else {
+            spreadProperties.push(createCompositionObjectProperty({ name, value }));
+        }
+    }
+    const attributes = [
+        ...directAttributes,
+        ...(spreadProperties.length === 0
+            ? []
+            : [
+                recast.types.builders.jsxSpreadAttribute(recast.types.builders.objectExpression(spreadProperties)),
+            ]),
+    ];
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), attributes, true), null, []);
+};
 const addElementToComponentRoot = ({ ast, exportName, element, }) => {
     var _a;
     var _b;
@@ -1061,7 +1231,7 @@ const resolveCompositionComponent = async ({ remotionRoot, compositionFile, comp
     };
 };
 exports.resolveCompositionComponent = resolveCompositionComponent;
-const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, element, }) => {
+const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinationFileName, element, remotionRoot, }) => {
     if (element.type === 'solid') {
         const solidLocalName = ensureSolidImport(ast);
         return createSolidElement({
@@ -1085,6 +1255,21 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, element,
             position: element.position,
         });
     }
+    if (element.type === 'composition') {
+        return Promise.resolve(ensureCompositionComponentImport({
+            ast,
+            compositionFile: element.compositionFile,
+            compositionId: element.compositionId,
+            destinationFileName,
+            remotionRoot,
+        })).then((localName) => {
+            const props = parseSerializedCompositionProps(element.serializedResolvedPropsWithCustomSchema);
+            if (containsFileToken(props)) {
+                ensureStaticFileImport(ast);
+            }
+            return createCompositionComponentElement({ localName, props });
+        });
+    }
     if (element.type === 'asset') {
         if (element.srcType === 'remote' && !(0, studio_shared_1.isUrl)(element.src)) {
             throw new Error('Remote asset source must be a URL');
@@ -1121,6 +1306,7 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, element,
     throw new Error('Unsupported element type');
 };
 const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, wrapInSequence = null, }) => {
+    var _a;
     const location = await (0, exports.resolveCompositionComponentWithFile)({
         remotionRoot,
         compositionFile,
@@ -1134,17 +1320,32 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
         fileName: location.fileName,
     });
     const ast = (0, parse_ast_1.parseAst)(input);
-    const elementToInsert = createInsertableJsxElement({
-        addPositionStyleToComponent: wrapInSequence === null,
+    if (element.type === 'composition' &&
+        element.compositionId === compositionId) {
+        throw new Error('Cannot insert a composition into itself');
+    }
+    const sequenceWrapper = element.type === 'composition'
+        ? {
+            dimensions: { width: element.width, height: element.height },
+            durationInFrames: element.durationInFrames,
+            name: element.compositionId,
+            position: element.position,
+        }
+        : wrapInSequence;
+    const elementToInsert = await createInsertableJsxElement({
+        addPositionStyleToComponent: sequenceWrapper === null,
         ast,
+        destinationFileName: location.fileName,
         element,
+        remotionRoot,
     });
-    const finalElementToInsert = wrapInSequence
+    const finalElementToInsert = sequenceWrapper
         ? createSequenceWrappedElement({
             child: elementToInsert,
-            dimensions: wrapInSequence.dimensions,
-            name: wrapInSequence.name,
-            position: wrapInSequence.position,
+            dimensions: sequenceWrapper.dimensions,
+            durationInFrames: (_a = sequenceWrapper.durationInFrames) !== null && _a !== void 0 ? _a : null,
+            name: sequenceWrapper.name,
+            position: sequenceWrapper.position,
             sequenceLocalName: ensureSequenceImport(ast),
         })
         : elementToInsert;

package/dist/open-browser-shortcut.d.ts

@@ -0,0 +1,9 @@
+export declare const registerOpenBrowserShortcut: ({ browserArgs, browserFlag, url, logLevel, }: {
+    browserArgs: string;
+    browserFlag: string;
+    url: string;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => {
+    registered: boolean;
+    cleanup: () => void;
+};

package/dist/open-browser-shortcut.js

@@ -0,0 +1,111 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerOpenBrowserShortcut = void 0;
+const readline = __importStar(require("node:readline"));
+const renderer_1 = require("@remotion/renderer");
+const maybe_open_browser_1 = require("./maybe-open-browser");
+const live_events_1 = require("./preview-server/live-events");
+const registerOpenBrowserShortcut = ({ browserArgs, browserFlag, url, logLevel, }) => {
+    if (!process.stdin.isTTY) {
+        return { registered: false, cleanup: () => undefined };
+    }
+    if (typeof process.stdin.setRawMode !== 'function') {
+        return { registered: false, cleanup: () => undefined };
+    }
+    const wasRaw = process.stdin.isRaw;
+    const shouldPauseAfterCleanup = process.stdin.isPaused();
+    let cleanedUp = false;
+    let isOpeningBrowser = false;
+    const cleanup = () => {
+        if (cleanedUp) {
+            return;
+        }
+        cleanedUp = true;
+        process.stdin.removeListener('keypress', onKeypress);
+        process.removeListener('SIGINT', cleanup);
+        process.removeListener('exit', cleanup);
+        if (!wasRaw && process.stdin.isTTY) {
+            process.stdin.setRawMode(false);
+        }
+        if (shouldPauseAfterCleanup) {
+            process.stdin.pause();
+        }
+    };
+    const openStudio = () => {
+        if (isOpeningBrowser) {
+            return;
+        }
+        isOpeningBrowser = true;
+        (0, live_events_1.clearPrintPortMessageTimeout)();
+        (0, maybe_open_browser_1.maybeOpenBrowser)({
+            browserArgs,
+            browserFlag,
+            shouldOpenBrowser: true,
+            url,
+            logLevel,
+        })
+            .then((result) => {
+            if (result.didOpenBrowser) {
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `Opened ${url} in browser`);
+            }
+        })
+            .catch((err) => {
+            renderer_1.RenderInternals.Log.error({ indent: false, logLevel }, 'Could not open browser:', err);
+        })
+            .finally(() => {
+            isOpeningBrowser = false;
+        });
+    };
+    function onKeypress(_str, key) {
+        if ((key === null || key === void 0 ? void 0 : key.ctrl) && key.name === 'c') {
+            cleanup();
+            process.kill(process.pid, 'SIGINT');
+            return;
+        }
+        if ((key === null || key === void 0 ? void 0 : key.meta) || (key === null || key === void 0 ? void 0 : key.ctrl) || (key === null || key === void 0 ? void 0 : key.name) !== 's') {
+            return;
+        }
+        openStudio();
+    }
+    readline.emitKeypressEvents(process.stdin);
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on('keypress', onKeypress);
+    process.once('SIGINT', cleanup);
+    process.once('exit', cleanup);
+    return { registered: true, cleanup };
+};
+exports.registerOpenBrowserShortcut = registerOpenBrowserShortcut;

package/dist/preview-server/live-events.d.ts

@@ -7,6 +7,7 @@ export type LiveEventsServer = {
     closeConnections: () => Promise<void>;
     addNewClientListener: (cb: () => void) => () => void;
 };
+export declare const clearPrintPortMessageTimeout: () => void;
 export type InitialUndoRedoState = {
     undoFile: string | null;
     redoFile: string | null;

package/dist/preview-server/live-events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = void 0;
+exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = exports.clearPrintPortMessageTimeout = void 0;
 const server_ready_1 = require("../server-ready");
 const default_props_watchers_1 = require("./default-props-watchers");
 const file_existence_watchers_1 = require("./file-existence-watchers");
@@ -9,6 +9,13 @@ const serializeMessage = (message) => {
     return `data: ${JSON.stringify(message)}\n\n`;
 };
 let printPortMessageTimeout = null;
+const clearPrintPortMessageTimeout = () => {
+    if (printPortMessageTimeout) {
+        clearTimeout(printPortMessageTimeout);
+        printPortMessageTimeout = null;
+    }
+};
+exports.clearPrintPortMessageTimeout = clearPrintPortMessageTimeout;
 const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
     let clients = [];
     let newClientListeners = [];
@@ -33,9 +40,7 @@ const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
         };
         clients.push(newClient);
         newClientListeners.forEach((cb) => cb());
-        if (printPortMessageTimeout) {
-            clearTimeout(printPortMessageTimeout);
-        }
+        (0, exports.clearPrintPortMessageTimeout)();
         request.on('close', () => {
             (0, default_props_watchers_1.unsubscribeClientDefaultPropsWatchers)(clientId);
             (0, file_existence_watchers_1.unsubscribeClientFileExistenceWatchers)(clientId);
@@ -43,9 +48,7 @@ const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
             clients = clients.filter((client) => client.id !== clientId);
             // If all clients disconnected, print a comment so user can easily restart it.
             if (clients.length === 0) {
-                if (printPortMessageTimeout) {
-                    clearTimeout(printPortMessageTimeout);
-                }
+                (0, exports.clearPrintPortMessageTimeout)();
                 printPortMessageTimeout = setTimeout(() => {
                     (0, server_ready_1.printServerReadyComment)('To restart', logLevel);
                 }, 2500);

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

@@ -47,6 +47,17 @@ const getCodemodUndoDescription = (codemod) => {
             entryType: codemod.type,
         };
     }
+    if (codemod.type === 'move-composition-to-folder') {
+        const destination = codemod.folderName === null
+            ? 'to root'
+            : `into folder "${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}"`;
+        const label = `composition "${codemod.idToMove}" ${destination}`;
+        return {
+            undoMessage: `↩️  Move of ${label}`,
+            redoMessage: `↪️  Move of ${label}`,
+            entryType: codemod.type,
+        };
+    }
     if (codemod.type === 'new-composition') {
         return {
             undoMessage: `↩️  Creation of composition "${codemod.newId}"`,
@@ -62,6 +73,14 @@ const getCodemodUndoDescription = (codemod) => {
             entryType: codemod.type,
         };
     }
+    if (codemod.type === 'new-folder') {
+        const label = `folder "${codemod.parentName ? `${codemod.parentName}/` : ''}${codemod.folderName}"`;
+        return {
+            undoMessage: `↩️  Creation of ${label}`,
+            redoMessage: `↪️  Creation 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}`;

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

@@ -42,6 +42,7 @@ const no_react_1 = require("remotion/no-react");
 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 parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const jsx_component_identity_1 = require("../jsx-component-identity");
 const jsx_element_not_found_at_location_error_1 = require("../jsx-element-not-found-at-location-error");
@@ -200,55 +201,7 @@ const getExtrapolateType = (node) => {
     }
     return null;
 };
-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 { type: '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.computed) {
-        return null;
-    }
-    if (node.callee.property.name === 'spring') {
-        if (node.arguments.length > 1) {
-            return null;
-        }
-        const springConfig = node.arguments[0];
-        if ((springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'ArgumentPlaceholder' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'JSXNamespacedName' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'SpreadElement') {
-            return null;
-        }
-        return (0, studio_shared_1.parseSpringEasingConfig)(springConfig);
-    }
-    if (node.callee.property.name !== 'bezier' || 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((v) => v === null)) {
-        return null;
-    }
-    const [x1, y1, x2, y2] = values;
-    return { type: 'bezier', x1, y1, x2, y2 };
-};
+const getKeyframeEasing = (node) => (0, parse_keyframe_easing_expression_1.parseKeyframeEasingExpression)(node);
 const getKeyframeEasingArray = ({ easingNode, segments, }) => {
     if (segments === 0) {
         return [];

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

@@ -45,6 +45,9 @@ const makeRelativeImportPath = ({ fromFile, toFile, }) => {
     return relative;
 };
 const validateDimensions = (dimensions) => {
+    if (dimensions === null) {
+        return;
+    }
     if (!Number.isFinite(dimensions.width) ||
         !Number.isFinite(dimensions.height) ||
         dimensions.width <= 0 ||

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

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertJsxElementHandler = void 0;
+const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const file_watcher_1 = require("../../file-watcher");
@@ -22,7 +26,27 @@ const validatePosition = (position) => {
         throw new Error('Position must be finite');
     }
 };
-const validateElement = (element) => {
+const isInsideRemotionRoot = ({ fileName, remotionRoot, }) => {
+    const relativePath = node_path_1.default.relative(remotionRoot, fileName);
+    return !relativePath.startsWith('..') && !node_path_1.default.isAbsolute(relativePath);
+};
+const hasParentDirectorySegment = (fileName) => {
+    return fileName.split('/').includes('..');
+};
+const validateCompositionFile = ({ compositionFile, remotionRoot, }) => {
+    if (!compositionFile ||
+        compositionFile.includes('\0') ||
+        compositionFile.includes('\\') ||
+        compositionFile.startsWith('/') ||
+        hasParentDirectorySegment(compositionFile)) {
+        throw new Error('Unsupported composition file');
+    }
+    const resolved = node_path_1.default.resolve(remotionRoot, compositionFile);
+    if (!isInsideRemotionRoot({ fileName: resolved, remotionRoot })) {
+        throw new Error('Unsupported composition file');
+    }
+};
+const validateElement = (element, remotionRoot) => {
     validatePosition(element.position);
     if (element.type === 'solid') {
         validateDimension('width', element.width);
@@ -59,6 +83,28 @@ const validateElement = (element) => {
         }
         return;
     }
+    if (element.type === 'composition') {
+        if (typeof element.compositionId !== 'string' || !element.compositionId) {
+            throw new Error('Unsupported composition ID');
+        }
+        if (typeof element.compositionFile !== 'string') {
+            throw new Error('Unsupported composition file');
+        }
+        validateCompositionFile({
+            compositionFile: element.compositionFile,
+            remotionRoot,
+        });
+        validateDimension('width', element.width);
+        validateDimension('height', element.height);
+        validateDimension('durationInFrames', element.durationInFrames);
+        const parsedProps = JSON.parse(element.serializedResolvedPropsWithCustomSchema);
+        if (typeof parsedProps !== 'object' ||
+            parsedProps === null ||
+            Array.isArray(parsedProps)) {
+            throw new Error('Resolved composition props must be an object');
+        }
+        return;
+    }
     throw new Error('Unsupported element type');
 };
 const getElementLabel = (element) => {
@@ -85,11 +131,14 @@ const getElementLabel = (element) => {
     if (element.type === 'component') {
         return `<${element.componentName}>`;
     }
+    if (element.type === 'composition') {
+        return `composition "${element.compositionId}"`;
+    }
     throw new Error('Unsupported element type');
 };
 const insertJsxElementHandler = ({ input: { compositionFile, compositionId, element }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
-        validateElement(element);
+        validateElement(element, remotionRoot);
         const elementLabel = getElementLabel(element);
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-jsx-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.type}"`);
         const { fileName, source, oldContents, output, formatted, logLine } = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({

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

@@ -11,10 +11,12 @@ type ResolvedSequencePropEdit = {
     defaultValue: unknown | null;
     defaultValueString: string | null;
     schema: SaveSequencePropEdit['schema'];
+    sourceEdit: SaveSequencePropEdit['sourceEdit'];
 };
-export declare const convertSequencePropEditToCodemodChange: (edit: Pick<ResolvedSequencePropEdit, "defaultValue" | "key" | "nodePath" | "schema" | "value">) => SequencePropsNodeUpdate;
+export declare const convertSequencePropEditToCodemodChange: (edit: Pick<ResolvedSequencePropEdit, "defaultValue" | "key" | "nodePath" | "schema" | "sourceEdit" | "value">) => SequencePropsNodeUpdate;
 export declare const shouldSuppressHmrForSequencePropEdits: (edits: readonly {
     key: string;
+    sourceEdit?: import("@remotion/studio-shared").SaveSequencePropSourceEdit | null | undefined;
 }[]) => boolean;
 export declare const saveSequencePropsHandler: ApiHandler<SaveSequencePropsRequest, SaveSequencePropsResponse>;
 export {};