@remotion/studio-server 4.0.500 → 4.0.502

package/dist/helpers/css-shorthand-properties.d.ts

@@ -3,20 +3,26 @@ export type CssShorthandProperty = {
     readonly parentKey: string;
     readonly shorthand: string;
     readonly longhands: readonly string[];
-    readonly parse: (value: string) => ParsedCssShorthand | null;
+    readonly parse: (value: unknown) => ParsedCssShorthand | null;
     readonly isUnsupportedProperty: (propertyName: string) => boolean;
 };
 export declare const cssShorthandProperties: readonly [{
     readonly parentKey: "style";
     readonly shorthand: "background";
     readonly longhands: readonly ["backgroundColor", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "backgroundOrigin", "backgroundClip", "backgroundAttachment"];
-    readonly parse: (value: string) => import("./parse-background-shorthand").ParsedBackgroundShorthand | null;
+    readonly parse: (value: unknown) => import("./parse-background-shorthand").ParsedBackgroundShorthand | null;
     readonly isUnsupportedProperty: () => false;
 }, {
     readonly parentKey: "style";
     readonly shorthand: "border";
     readonly longhands: readonly ["borderWidth", "borderStyle", "borderColor"];
-    readonly parse: (value: string) => import("./parse-border-shorthand").ParsedBorderShorthand | null;
+    readonly parse: (value: unknown) => import("./parse-border-shorthand").ParsedBorderShorthand | null;
+    readonly isUnsupportedProperty: (propertyName: string) => boolean;
+}, {
+    readonly parentKey: "style";
+    readonly shorthand: "borderRadius";
+    readonly longhands: readonly ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"];
+    readonly parse: (value: unknown) => import("./parse-border-radius-shorthand").ParsedBorderRadiusShorthand | null;
     readonly isUnsupportedProperty: (propertyName: string) => boolean;
 }];
 export declare const getCssShorthandForLonghand: ({ parentKey, longhand, }: {

package/dist/helpers/css-shorthand-properties.js

@@ -2,15 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCssShorthandsForUpdates = exports.getCssShorthandForLonghand = exports.cssShorthandProperties = void 0;
 const parse_background_shorthand_1 = require("./parse-background-shorthand");
+const parse_border_radius_shorthand_1 = require("./parse-border-radius-shorthand");
 const parse_border_shorthand_1 = require("./parse-border-shorthand");
 const borderSidePropertyRegex = /^border(?:Top|Right|Bottom|Left)(?:Width|Style|Color)?$/;
 const borderShorthand = {
     parentKey: 'style',
     shorthand: 'border',
     longhands: ['borderWidth', 'borderStyle', 'borderColor'],
-    parse: parse_border_shorthand_1.parseBorderShorthand,
+    parse: (value) => typeof value === 'string' ? (0, parse_border_shorthand_1.parseBorderShorthand)(value) : null,
     isUnsupportedProperty: (propertyName) => borderSidePropertyRegex.test(propertyName),
 };
+const borderRadiusShorthand = {
+    parentKey: 'style',
+    shorthand: 'borderRadius',
+    longhands: [
+        'borderTopLeftRadius',
+        'borderTopRightRadius',
+        'borderBottomRightRadius',
+        'borderBottomLeftRadius',
+    ],
+    parse: parse_border_radius_shorthand_1.parseBorderRadiusShorthand,
+    isUnsupportedProperty: (propertyName) => /^border(?:StartStart|StartEnd|EndStart|EndEnd)Radius$/.test(propertyName),
+};
 const backgroundShorthand = {
     parentKey: 'style',
     shorthand: 'background',
@@ -24,12 +37,13 @@ const backgroundShorthand = {
         'backgroundClip',
         'backgroundAttachment',
     ],
-    parse: parse_background_shorthand_1.parseBackgroundShorthand,
+    parse: (value) => typeof value === 'string' ? (0, parse_background_shorthand_1.parseBackgroundShorthand)(value) : null,
     isUnsupportedProperty: () => false,
 };
 exports.cssShorthandProperties = [
     backgroundShorthand,
     borderShorthand,
+    borderRadiusShorthand,
 ];
 const getCssShorthandForLonghand = ({ parentKey, longhand, }) => {
     var _a;

package/dist/helpers/parse-border-radius-shorthand.d.ts

@@ -0,0 +1,7 @@
+export type ParsedBorderRadiusShorthand = {
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+};
+export declare const parseBorderRadiusShorthand: (value: unknown) => ParsedBorderRadiusShorthand | null;

package/dist/helpers/parse-border-radius-shorthand.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseBorderRadiusShorthand = void 0;
+const parsePixelRadius = (value) => {
+    if (value === '0') {
+        return 0;
+    }
+    const match = value.match(/^(\d+(?:\.\d+)?|\.\d+)px$/i);
+    return match ? Number(match[1]) : null;
+};
+const expandBorderRadius = (values) => {
+    if (values.length === 1) {
+        return [values[0], values[0], values[0], values[0]];
+    }
+    if (values.length === 2) {
+        return [values[0], values[1], values[0], values[1]];
+    }
+    if (values.length === 3) {
+        return [values[0], values[1], values[2], values[1]];
+    }
+    return [values[0], values[1], values[2], values[3]];
+};
+const parseBorderRadiusShorthand = (value) => {
+    let values;
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value) || value < 0) {
+            return null;
+        }
+        values = [value];
+    }
+    else if (typeof value === 'string') {
+        const tokens = value.trim().split(/\s+/);
+        if (tokens.length < 1 || tokens.length > 4) {
+            return null;
+        }
+        const parsed = tokens.map(parsePixelRadius);
+        if (parsed.some((radius) => radius === null)) {
+            return null;
+        }
+        values = parsed;
+    }
+    else {
+        return null;
+    }
+    const [topLeft, topRight, bottomRight, bottomLeft] = expandBorderRadius(values);
+    return {
+        borderTopLeftRadius: topLeft,
+        borderTopRightRadius: topRight,
+        borderBottomRightRadius: bottomRight,
+        borderBottomLeftRadius: bottomLeft,
+    };
+};
+exports.parseBorderRadiusShorthand = parseBorderRadiusShorthand;

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

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertJsxElementIntoComposition = exports.resolveCompositionComponent = exports.resolveCompositionComponentWithFile = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
+const studio_codemods_1 = require("@remotion/studio-codemods");
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const no_react_1 = require("remotion/no-react");
@@ -247,9 +248,6 @@ const findReExportTargets = ({ ast, exportName, }) => {
         visitExportNamedDeclaration(astPath) {
             var _a;
             const node = astPath.node;
-            if (typeof ((_a = node.source) === null || _a === void 0 ? void 0 : _a.value) !== 'string') {
-                return false;
-            }
             for (const specifier of node.specifiers) {
                 if (specifier.type !== 'ExportSpecifier') {
                     continue;
@@ -262,6 +260,18 @@ const findReExportTargets = ({ ast, exportName, }) => {
                 if (!localName) {
                     continue;
                 }
+                // Support barrel files that import a component and export it in a
+                // separate declaration. See https://github.com/remotion-dev/remotion/issues/9172.
+                if (typeof ((_a = node.source) === null || _a === void 0 ? void 0 : _a.value) !== 'string') {
+                    const importTarget = findImportTarget({
+                        ast,
+                        componentName: localName,
+                    });
+                    if (importTarget) {
+                        targets.push(importTarget);
+                    }
+                    continue;
+                }
                 targets.push({
                     importPath: node.source.value,
                     exportName: localName === 'default' ? 'default' : localName,
@@ -313,6 +323,9 @@ const locationFromNode = (node) => {
 };
 const findLocalSymbolLocation = ({ ast, name, }) => {
     let location = null;
+    // Recast can omit the declaration location for exported functions and
+    // classes, including components resolved through barrel files. The identifier
+    // keeps its location. See https://github.com/remotion-dev/remotion/issues/9172.
     recast.types.visit(ast, {
         visitVariableDeclarator(astPath) {
             if (location) {
@@ -320,7 +333,7 @@ const findLocalSymbolLocation = ({ ast, name, }) => {
             }
             const { node } = astPath;
             if (node.id.type === 'Identifier' && node.id.name === name) {
-                location = locationFromNode(node);
+                location = locationFromNode(node.id);
                 return false;
             }
             this.traverse(astPath);
@@ -333,7 +346,7 @@ const findLocalSymbolLocation = ({ ast, name, }) => {
             }
             const { node } = astPath;
             if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
-                location = locationFromNode(node);
+                location = locationFromNode(node.id);
                 return false;
             }
             this.traverse(astPath);
@@ -346,7 +359,7 @@ const findLocalSymbolLocation = ({ ast, name, }) => {
             }
             const { node } = astPath;
             if (((_a = node.id) === null || _a === void 0 ? void 0 : _a.name) === name) {
-                location = locationFromNode(node);
+                location = locationFromNode(node.id);
                 return false;
             }
             this.traverse(astPath);
@@ -1427,56 +1440,71 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
         remotionRoot,
         fileName: location.fileName,
     });
-    const ast = (0, parse_ast_1.parseAst)(input);
-    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,
+    let finalFile;
+    let logLine;
+    if (element.type === 'solid' && from === null && wrapInSequence === null) {
+        const inserted = (0, studio_codemods_1.insertSolidIntoSource)({
+            exportName: location.exportName,
+            height: element.height,
             position: element.position,
-            from,
+            source: input,
+            width: element.width,
+        });
+        finalFile = inserted.output;
+        logLine = inserted.line;
+    }
+    else {
+        const ast = (0, parse_ast_1.parseAst)(input);
+        if (element.type === 'composition' &&
+            element.compositionId === compositionId) {
+            throw new Error('Cannot insert a composition into itself');
         }
-        : from === null ||
-            element.type === 'asset' ||
-            element.type === 'svg' ||
-            element.type === 'component'
-            ? wrapInSequence
-            : {
-                dimensions: null,
-                durationInFrames: null,
-                name: null,
+        const sequenceWrapper = element.type === 'composition'
+            ? {
+                dimensions: { width: element.width, height: element.height },
+                durationInFrames: element.durationInFrames,
+                name: element.compositionId,
                 position: element.position,
                 from,
-            };
-    const elementToInsert = await createInsertableJsxElement({
-        addPositionStyleToComponent: sequenceWrapper === null,
-        ast,
-        destinationFileName: location.fileName,
-        element,
-        from,
-        remotionRoot,
-    });
-    const finalElementToInsert = sequenceWrapper
-        ? createSequenceWrappedElement({
-            child: elementToInsert,
-            dimensions: sequenceWrapper.dimensions,
-            durationInFrames: (_a = sequenceWrapper.durationInFrames) !== null && _a !== void 0 ? _a : null,
-            from: sequenceWrapper.from,
-            name: sequenceWrapper.name,
-            position: sequenceWrapper.position,
-            sequenceLocalName: ensureSequenceImport(ast),
-        })
-        : elementToInsert;
-    const logLine = addElementToComponentRoot({
-        ast,
-        exportName: location.exportName,
-        element: finalElementToInsert,
-    });
-    const finalFile = (0, parse_ast_1.serializeAst)(ast);
+            }
+            : from === null ||
+                element.type === 'asset' ||
+                element.type === 'svg' ||
+                element.type === 'component'
+                ? wrapInSequence
+                : {
+                    dimensions: null,
+                    durationInFrames: null,
+                    name: null,
+                    position: element.position,
+                    from,
+                };
+        const elementToInsert = await createInsertableJsxElement({
+            addPositionStyleToComponent: sequenceWrapper === null,
+            ast,
+            destinationFileName: location.fileName,
+            element,
+            from,
+            remotionRoot,
+        });
+        const finalElementToInsert = sequenceWrapper
+            ? createSequenceWrappedElement({
+                child: elementToInsert,
+                dimensions: sequenceWrapper.dimensions,
+                durationInFrames: (_a = sequenceWrapper.durationInFrames) !== null && _a !== void 0 ? _a : null,
+                from: sequenceWrapper.from,
+                name: sequenceWrapper.name,
+                position: sequenceWrapper.position,
+                sequenceLocalName: ensureSequenceImport(ast),
+            })
+            : elementToInsert;
+        logLine = addElementToComponentRoot({
+            ast,
+            exportName: location.exportName,
+            element: finalElementToInsert,
+        });
+        finalFile = (0, parse_ast_1.serializeAst)(ast);
+    }
     const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
         input: finalFile,
         prettierConfigOverride,

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

@@ -1,4 +1,5 @@
 export declare const ELEMENT_INSTALL_TARGET_MAX_AGE = 5000;
+export declare const STUDIO_PROTOCOL_TARGET_MAX_AGE = 4000;
 export type ElementInstallTarget = {
     requestId: string | null;
     clientId: string;
@@ -10,6 +11,21 @@ export type ElementInstallTarget = {
     studioUrl: string;
     updatedAt: number;
 };
+type StudioProtocolTarget = {
+    readonly id: string;
+    readonly target: ElementInstallTarget;
+    readonly expiresAt: number;
+};
 export declare const updateElementInstallTarget: (newTarget: Omit<ElementInstallTarget, "updatedAt">) => void;
+export declare const getElementInstallTargetByClientId: (clientId: string) => ElementInstallTarget | null;
 export declare const getElementInstallTarget: (requestId: string | null) => ElementInstallTarget | null;
+export declare const issueStudioProtocolTarget: ({ now, target, }: {
+    readonly now: number;
+    readonly target: ElementInstallTarget;
+}) => StudioProtocolTarget;
+export declare const consumeStudioProtocolTarget: ({ now, targetId, }: {
+    readonly now: number;
+    readonly targetId: string;
+}) => ElementInstallTarget | null;
 export declare const clearElementInstallStateForTests: () => void;
+export {};

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

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearElementInstallStateForTests = exports.getElementInstallTarget = exports.updateElementInstallTarget = exports.ELEMENT_INSTALL_TARGET_MAX_AGE = void 0;
+exports.clearElementInstallStateForTests = exports.consumeStudioProtocolTarget = exports.issueStudioProtocolTarget = exports.getElementInstallTarget = exports.getElementInstallTargetByClientId = exports.updateElementInstallTarget = exports.STUDIO_PROTOCOL_TARGET_MAX_AGE = exports.ELEMENT_INSTALL_TARGET_MAX_AGE = void 0;
+const node_crypto_1 = require("node:crypto");
 exports.ELEMENT_INSTALL_TARGET_MAX_AGE = 5000;
+exports.STUDIO_PROTOCOL_TARGET_MAX_AGE = 4000;
 const targetsByClientId = new Map();
+const studioProtocolTargets = new Map();
 const compareTargets = (a, b) => {
     var _a, _b;
     const aFocusedAt = (_a = a.lastFocusedAt) !== null && _a !== void 0 ? _a : 0;
@@ -19,6 +22,11 @@ const updateElementInstallTarget = (newTarget) => {
     });
 };
 exports.updateElementInstallTarget = updateElementInstallTarget;
+const getElementInstallTargetByClientId = (clientId) => {
+    var _a;
+    return (_a = targetsByClientId.get(clientId)) !== null && _a !== void 0 ? _a : null;
+};
+exports.getElementInstallTargetByClientId = getElementInstallTargetByClientId;
 const getElementInstallTarget = (requestId) => {
     const now = Date.now();
     let bestTarget = null;
@@ -37,7 +45,41 @@ const getElementInstallTarget = (requestId) => {
     return bestTarget;
 };
 exports.getElementInstallTarget = getElementInstallTarget;
+const issueStudioProtocolTarget = ({ now, target, }) => {
+    for (const [id, existing] of studioProtocolTargets) {
+        if (existing.expiresAt <= now) {
+            studioProtocolTargets.delete(id);
+        }
+    }
+    const issued = {
+        id: (0, node_crypto_1.randomUUID)(),
+        target: { ...target },
+        expiresAt: now + exports.STUDIO_PROTOCOL_TARGET_MAX_AGE,
+    };
+    studioProtocolTargets.set(issued.id, issued);
+    return issued;
+};
+exports.issueStudioProtocolTarget = issueStudioProtocolTarget;
+const consumeStudioProtocolTarget = ({ now, targetId, }) => {
+    const issued = studioProtocolTargets.get(targetId);
+    studioProtocolTargets.delete(targetId);
+    if (issued === undefined || issued.expiresAt <= now) {
+        return null;
+    }
+    const current = (0, exports.getElementInstallTargetByClientId)(issued.target.clientId);
+    if (current === null ||
+        now - current.updatedAt >= exports.ELEMENT_INSTALL_TARGET_MAX_AGE ||
+        !current.canInstall ||
+        current.readOnly ||
+        current.compositionFile !== issued.target.compositionFile ||
+        current.compositionId !== issued.target.compositionId) {
+        return null;
+    }
+    return issued.target;
+};
+exports.consumeStudioProtocolTarget = consumeStudioProtocolTarget;
 const clearElementInstallStateForTests = () => {
     targetsByClientId.clear();
+    studioProtocolTargets.clear();
 };
 exports.clearElementInstallStateForTests = clearElementInstallStateForTests;

package/dist/preview-server/handler.js

@@ -13,7 +13,7 @@ const handleRequest = async ({ remotionRoot, request, response, entryPoint, hand
     response.setHeader('content-type', 'application/json');
     response.writeHead(200);
     try {
-        const body = (await (0, parse_body_1.parseRequestBody)(request));
+        const body = (await (0, parse_body_1.parseRequestBody)(request, { maxBytes: null }));
         const outputData = await handler({
             entryPoint,
             remotionRoot,

package/dist/preview-server/parse-body.d.ts

@@ -1,2 +1,7 @@
 import type { IncomingMessage } from 'node:http';
-export declare const parseRequestBody: (req: IncomingMessage) => Promise<unknown>;
+export declare class RequestBodyTooLargeError extends Error {
+    constructor(maxBytes: number);
+}
+export declare const parseRequestBody: (req: IncomingMessage, { maxBytes, }: {
+    readonly maxBytes: number | null;
+}) => Promise<unknown>;

package/dist/preview-server/parse-body.js

@@ -1,15 +1,66 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseRequestBody = void 0;
-const parseRequestBody = async (req) => {
-    const body = await new Promise((_resolve) => {
+exports.parseRequestBody = exports.RequestBodyTooLargeError = void 0;
+class RequestBodyTooLargeError extends Error {
+    constructor(maxBytes) {
+        super(`Request body exceeds the limit of ${maxBytes} bytes`);
+        this.name = 'RequestBodyTooLargeError';
+    }
+}
+exports.RequestBodyTooLargeError = RequestBodyTooLargeError;
+const parseRequestBody = async (req, { maxBytes, }) => {
+    const body = await new Promise((resolve, reject) => {
+        const decoder = new TextDecoder();
+        const encoder = new TextEncoder();
         let data = '';
-        req.on('data', (chunk) => {
-            data += chunk;
-        });
-        req.on('end', () => {
-            _resolve(data.toString());
-        });
+        let receivedBytes = 0;
+        let settled = false;
+        const cleanup = () => {
+            req.off('aborted', onAborted);
+            req.off('data', onData);
+            req.off('end', onEnd);
+            req.off('error', onError);
+        };
+        const rejectOnce = (error) => {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            cleanup();
+            reject(error);
+        };
+        const onAborted = () => rejectOnce(new Error('Request body was aborted'));
+        const onData = (chunk) => {
+            receivedBytes +=
+                typeof chunk === 'string'
+                    ? encoder.encode(chunk).byteLength
+                    : chunk.byteLength;
+            if (maxBytes !== null && receivedBytes > maxBytes) {
+                rejectOnce(new RequestBodyTooLargeError(maxBytes));
+                // Discard the rest without buffering it. Keep request stream errors from
+                // becoming unhandled after the parser listeners have been removed.
+                req.on('error', () => undefined);
+                req.resume();
+                return;
+            }
+            data +=
+                typeof chunk === 'string'
+                    ? decoder.decode() + chunk
+                    : decoder.decode(chunk, { stream: true });
+        };
+        const onEnd = () => {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            cleanup();
+            resolve(data + decoder.decode());
+        };
+        const onError = (error) => rejectOnce(error);
+        req.on('aborted', onAborted);
+        req.on('data', onData);
+        req.on('end', onEnd);
+        req.on('error', onError);
     });
     return JSON.parse(body);
 };

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

@@ -1,6 +1,6 @@
 import type { CanUpdateDefaultPropsResponse } from '@remotion/studio-shared';
+export { computeCanUpdateDefaultPropsFromContent } from '@remotion/studio-codemods';
 export declare const checkIfTypeScriptFile: (file: string) => void;
-export declare const computeCanUpdateDefaultPropsFromContent: (content: string, compositionId: string) => CanUpdateDefaultPropsResponse;
 export declare const computeCanUpdateDefaultProps: ({ compositionId, remotionRoot, entryPoint, }: {
     compositionId: string;
     remotionRoot: string;