@remotion/studio-server 4.0.484 → 4.0.486

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

@@ -14,6 +14,7 @@ const file_watcher_1 = require("../../file-watcher");
 const project_info_1 = require("../project-info");
 const undo_stack_1 = require("../undo-stack");
 const can_update_default_props_1 = require("./can-update-default-props");
+const source_file_write_queue_1 = require("./source-file-write-queue");
 const formatNewCompositionFile = (componentName) => {
     return (0, duplicate_composition_1.formatOutput)(`import React from 'react';
 
@@ -46,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}"`,
@@ -61,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}`;
@@ -77,110 +97,112 @@ const getCodemodUndoDescription = (codemod) => {
         entryType: 'visual-control',
     };
 };
-const applyCodemodHandler = async ({ input: { codemod, dryRun, symbolicatedStack }, logLevel, remotionRoot, entryPoint, }) => {
-    var _a, _b;
-    try {
-        const time = Date.now();
-        const filePath = symbolicatedStack
-            ? (0, apply_codemod_to_file_1.resolveFilePathFromSymbolicatedStack)(remotionRoot, symbolicatedStack)
-            : (await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint)).rootFile;
-        if (!filePath) {
-            throw new Error('Cannot find file for composition in project');
-        }
-        (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
-        const newCompositionComponentFilePath = codemod.type === 'new-composition'
-            ? node_path_1.default.join(node_path_1.default.dirname(filePath), `${codemod.componentName}.tsx`)
-            : null;
-        if (codemod.type === 'new-composition' &&
-            newCompositionComponentFilePath &&
-            (0, node_fs_1.existsSync)(newCompositionComponentFilePath)) {
-            throw new Error(`Cannot create ${node_path_1.default.relative(remotionRoot, newCompositionComponentFilePath)} because it already exists`);
-        }
-        const input = (0, node_fs_1.readFileSync)(filePath, 'utf-8');
-        const formatted = await (0, apply_codemod_to_file_1.applyCodemodToFile)({
-            filePath,
-            codeMod: codemod,
-        });
-        const diff = (0, simple_diff_1.simpleDiff)({
-            oldLines: input.split('\n'),
-            newLines: formatted.split('\n'),
-        });
-        if (!dryRun) {
-            const { entryType, undoMessage, redoMessage } = getCodemodUndoDescription(codemod);
-            const snapshots = [
-                {
-                    filePath,
-                    oldContents: input,
-                    newContents: null,
-                    logLine: (_a = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalLineNumber) !== null && _a !== void 0 ? _a : 1,
-                },
-            ];
-            let componentFilePath = null;
-            let componentFileContents = null;
-            if (codemod.type === 'new-composition') {
-                componentFilePath = newCompositionComponentFilePath;
-                if (componentFilePath === null) {
-                    throw new Error('Could not determine the new component file path');
-                }
-                componentFileContents = await formatNewCompositionFile(codemod.componentName);
-                snapshots.push({
-                    filePath: componentFilePath,
-                    oldContents: null,
-                    newContents: componentFileContents,
-                    logLine: 1,
-                });
-                (0, undo_stack_1.pushTransactionToUndoStack)({
-                    snapshots,
-                    logLevel,
-                    remotionRoot,
-                    description: {
-                        undoMessage,
-                        redoMessage,
-                    },
-                    entryType,
-                    suppressHmrOnFileRestore: false,
-                });
+const applyCodemodHandler = ({ input: { codemod, dryRun, symbolicatedStack }, logLevel, remotionRoot, entryPoint, }) => {
+    return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+        var _a, _b;
+        try {
+            const time = Date.now();
+            const filePath = symbolicatedStack
+                ? (0, apply_codemod_to_file_1.resolveFilePathFromSymbolicatedStack)(remotionRoot, symbolicatedStack)
+                : (await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint)).rootFile;
+            if (!filePath) {
+                throw new Error('Cannot find file for composition in project');
             }
-            else {
-                (0, undo_stack_1.pushToUndoStack)({
-                    filePath,
-                    oldContents: input,
-                    newContents: null,
-                    logLevel,
-                    remotionRoot,
-                    logLine: (_b = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalLineNumber) !== null && _b !== void 0 ? _b : 1,
-                    description: {
-                        undoMessage,
-                        redoMessage,
-                    },
-                    entryType,
-                    suppressHmrOnFileRestore: false,
-                });
+            (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
+            const newCompositionComponentFilePath = codemod.type === 'new-composition'
+                ? node_path_1.default.join(node_path_1.default.dirname(filePath), `${codemod.componentName}.tsx`)
+                : null;
+            if (codemod.type === 'new-composition' &&
+                newCompositionComponentFilePath &&
+                (0, node_fs_1.existsSync)(newCompositionComponentFilePath)) {
+                throw new Error(`Cannot create ${node_path_1.default.relative(remotionRoot, newCompositionComponentFilePath)} because it already exists`);
             }
-            (0, undo_stack_1.suppressUndoStackInvalidation)(filePath);
-            if (componentFilePath) {
-                (0, undo_stack_1.suppressUndoStackInvalidation)(componentFilePath);
-            }
-            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(filePath, formatted, undefined);
-            if (componentFilePath && componentFileContents !== null) {
-                (0, file_watcher_1.writeFileAndNotifyFileWatchers)(componentFilePath, componentFileContents, undefined);
+            const input = (0, node_fs_1.readFileSync)(filePath, 'utf-8');
+            const formatted = await (0, apply_codemod_to_file_1.applyCodemodToFile)({
+                filePath,
+                codeMod: codemod,
+            });
+            const diff = (0, simple_diff_1.simpleDiff)({
+                oldLines: input.split('\n'),
+                newLines: formatted.split('\n'),
+            });
+            if (!dryRun) {
+                const { entryType, undoMessage, redoMessage } = getCodemodUndoDescription(codemod);
+                const snapshots = [
+                    {
+                        filePath,
+                        oldContents: input,
+                        newContents: null,
+                        logLine: (_a = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalLineNumber) !== null && _a !== void 0 ? _a : 1,
+                    },
+                ];
+                let componentFilePath = null;
+                let componentFileContents = null;
+                if (codemod.type === 'new-composition') {
+                    componentFilePath = newCompositionComponentFilePath;
+                    if (componentFilePath === null) {
+                        throw new Error('Could not determine the new component file path');
+                    }
+                    componentFileContents = await formatNewCompositionFile(codemod.componentName);
+                    snapshots.push({
+                        filePath: componentFilePath,
+                        oldContents: null,
+                        newContents: componentFileContents,
+                        logLine: 1,
+                    });
+                    (0, undo_stack_1.pushTransactionToUndoStack)({
+                        snapshots,
+                        logLevel,
+                        remotionRoot,
+                        description: {
+                            undoMessage,
+                            redoMessage,
+                        },
+                        entryType,
+                        suppressHmrOnFileRestore: false,
+                    });
+                }
+                else {
+                    (0, undo_stack_1.pushToUndoStack)({
+                        filePath,
+                        oldContents: input,
+                        newContents: null,
+                        logLevel,
+                        remotionRoot,
+                        logLine: (_b = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalLineNumber) !== null && _b !== void 0 ? _b : 1,
+                        description: {
+                            undoMessage,
+                            redoMessage,
+                        },
+                        entryType,
+                        suppressHmrOnFileRestore: false,
+                    });
+                }
+                (0, undo_stack_1.suppressUndoStackInvalidation)(filePath);
+                if (componentFilePath) {
+                    (0, undo_stack_1.suppressUndoStackInvalidation)(componentFilePath);
+                }
+                (0, file_watcher_1.writeFileAndNotifyFileWatchers)(filePath, formatted, undefined);
+                if (componentFilePath && componentFileContents !== null) {
+                    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(componentFilePath, componentFileContents, undefined);
+                }
+                const end = Date.now() - time;
+                const relativePath = node_path_1.default.relative(remotionRoot, filePath);
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blue(`Edited ${relativePath} in ${end}ms`));
+                (0, undo_stack_1.printUndoHint)(logLevel);
             }
-            const end = Date.now() - time;
-            const relativePath = node_path_1.default.relative(remotionRoot, filePath);
-            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blue(`Edited ${relativePath} in ${end}ms`));
-            (0, undo_stack_1.printUndoHint)(logLevel);
+            return {
+                success: true,
+                diff,
+            };
         }
-        return {
-            success: true,
-            diff,
-        };
-    }
-    catch (err) {
-        return {
-            success: false,
-            reason: err.message,
-            stack: err.stack,
-        };
-    }
+        catch (err) {
+            return {
+                success: false,
+                reason: err.message,
+                stack: err.stack,
+            };
+        }
+    });
 };
 exports.applyCodemodHandler = applyCodemodHandler;

package/dist/preview-server/routes/apply-visual-control-change.js

@@ -46,6 +46,7 @@ const live_events_1 = require("../live-events");
 const undo_stack_1 = require("../undo-stack");
 const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const log_update_1 = require("./log-updates/log-update");
+const source_file_write_queue_1 = require("./source-file-write-queue");
 const getVisualControlChangeLine = (file, changeId) => {
     let line = 1;
     recast.types.visit(file.program, {
@@ -66,89 +67,91 @@ const getVisualControlChangeLine = (file, changeId) => {
     });
     return line;
 };
-const applyVisualControlHandler = async ({ input: { fileName, changes }, remotionRoot, logLevel }) => {
-    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[apply-visual-control] Received request for ${fileName} with ${changes.length} changes`);
-    const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
-        remotionRoot,
-        fileName,
-        action: 'apply visual control change to',
-    });
-    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-    const ast = (0, parse_ast_1.parseAst)(fileContents);
-    const logLine = changes.length > 0 ? getVisualControlChangeLine(ast, changes[0].id) : 1;
-    const { newAst, changesMade } = (0, recast_mods_1.applyCodemod)({
-        file: ast,
-        codeMod: {
-            type: 'apply-visual-control',
-            changes,
-        },
-    });
-    if (changesMade.length === 0) {
-        throw new Error('No changes were made to the file');
-    }
-    let output = (0, parse_ast_1.serializeAst)(newAst);
-    let formatted = false;
-    try {
-        const prettier = await Promise.resolve().then(() => __importStar(require('prettier')));
-        const { format, resolveConfig, resolveConfigFile } = prettier;
-        const configFilePath = await resolveConfigFile();
-        if (configFilePath) {
-            const prettierConfig = await resolveConfig(configFilePath);
-            if (prettierConfig) {
-                output = await format(output, {
-                    ...prettierConfig,
-                    filepath: 'test.tsx',
-                    plugins: [],
-                    endOfLine: 'auto',
-                });
-                formatted = true;
+const applyVisualControlHandler = ({ input: { fileName, changes }, remotionRoot, logLevel }) => {
+    return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[apply-visual-control] Received request for ${fileName} with ${changes.length} changes`);
+        const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName,
+            action: 'apply visual control change to',
+        });
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        const ast = (0, parse_ast_1.parseAst)(fileContents);
+        const logLine = changes.length > 0 ? getVisualControlChangeLine(ast, changes[0].id) : 1;
+        const { newAst, changesMade } = (0, recast_mods_1.applyCodemod)({
+            file: ast,
+            codeMod: {
+                type: 'apply-visual-control',
+                changes,
+            },
+        });
+        if (changesMade.length === 0) {
+            throw new Error('No changes were made to the file');
+        }
+        let output = (0, parse_ast_1.serializeAst)(newAst);
+        let formatted = false;
+        try {
+            const prettier = await Promise.resolve().then(() => __importStar(require('prettier')));
+            const { format, resolveConfig, resolveConfigFile } = prettier;
+            const configFilePath = await resolveConfigFile();
+            if (configFilePath) {
+                const prettierConfig = await resolveConfig(configFilePath);
+                if (prettierConfig) {
+                    output = await format(output, {
+                        ...prettierConfig,
+                        filepath: 'test.tsx',
+                        plugins: [],
+                        endOfLine: 'auto',
+                    });
+                    formatted = true;
+                }
             }
         }
-    }
-    catch (_a) {
-        // Prettier not available, use unformatted output
-    }
-    (0, undo_stack_1.pushToUndoStack)({
-        filePath: absolutePath,
-        oldContents: fileContents,
-        newContents: null,
-        logLevel,
-        remotionRoot,
-        logLine,
-        description: {
-            undoMessage: '↩️  Visual control change',
-            redoMessage: '↪️  Visual control change',
-        },
-        entryType: 'visual-control',
-        suppressHmrOnFileRestore: true,
-    });
-    (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
-    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
-    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, undefined);
-    (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
-        listener.sendEventToClient({
-            type: 'visual-control-values-changed',
-            values: changes.map((change) => ({
-                id: change.id,
-                value: change.newValueIsUndefined
-                    ? null
-                    : JSON.parse(change.newValueSerialized),
-                isUndefined: change.newValueIsUndefined,
-            })),
+        catch (_a) {
+            // Prettier not available, use unformatted output
+        }
+        (0, undo_stack_1.pushToUndoStack)({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: null,
+            logLevel,
+            remotionRoot,
+            logLine,
+            description: {
+                undoMessage: '↩️  Visual control change',
+                redoMessage: '↪️  Visual control change',
+            },
+            entryType: 'visual-control',
+            suppressHmrOnFileRestore: true,
         });
+        (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, undefined);
+        (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
+            listener.sendEventToClient({
+                type: 'visual-control-values-changed',
+                values: changes.map((change) => ({
+                    id: change.id,
+                    value: change.newValueIsUndefined
+                        ? null
+                        : JSON.parse(change.newValueSerialized),
+                    isUndefined: change.newValueIsUndefined,
+                })),
+            });
+        });
+        const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+            remotionRoot,
+            absolutePath,
+            line: logLine,
+        });
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Applied visual control changes`);
+        if (!formatted) {
+            (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+        }
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+        };
     });
-    const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
-        remotionRoot,
-        absolutePath,
-        line: logLine,
-    });
-    renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Applied visual control changes`);
-    if (!formatted) {
-        (0, log_update_1.warnAboutPrettierOnce)(logLevel);
-    }
-    (0, undo_stack_1.printUndoHint)(logLevel);
-    return {
-        success: true,
-    };
 };
 exports.applyVisualControlHandler = applyVisualControlHandler;

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

@@ -1,4 +1,4 @@
-import type { Expression, File, JSXOpeningElement } from '@babel/types';
+import type { Expression, File, JSXElement, JSXOpeningElement } from '@babel/types';
 import type { SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath } from 'remotion';
 type StaticValueOptions = {
@@ -7,7 +7,19 @@ type StaticValueOptions = {
 export declare const isStaticValue: (node: Expression, options?: StaticValueOptions) => boolean;
 export declare const extractStaticValue: (node: Expression, options?: StaticValueOptions) => unknown;
 export declare const getComputedStatus: (node: Expression, ast: File) => CanUpdateSequencePropStatus;
+export declare const findJsxElementPathAtNodePath: (ast: File, nodePath: SequenceNodePath) => import("ast-types/lib/node-path").NodePath<N, V> | null;
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
+export declare const findJsxElementNodeAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXElement | null;
+export type StaticJsxTextContent = {
+    kind: 'jsx-text';
+    value: string;
+} | {
+    kind: 'string-expression';
+    value: string;
+};
+export declare const getStaticJsxChildrenAttribute: (jsxElement: JSXOpeningElement) => StaticJsxTextContent | null;
+export declare const hasJsxChildrenAttribute: (jsxElement: JSXOpeningElement) => boolean;
+export declare const getStaticJsxTextContent: (jsxElement: JSXElement) => StaticJsxTextContent | null;
 export declare const findNodePathForJsxElement: (ast: File, target: JSXOpeningElement) => SequenceNodePath | null;
 export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
 export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, componentIdentity, keys, effects, }: {

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

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 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;
+exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.lineColumnToNodePath = exports.findNodePathForJsxElement = exports.getStaticJsxTextContent = exports.hasJsxChildrenAttribute = exports.getStaticJsxChildrenAttribute = exports.findJsxElementNodeAtNodePath = exports.findJsxElementAtNodePath = exports.findJsxElementPathAtNodePath = 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");
@@ -545,17 +545,88 @@ recastPath, ast) => {
     }
     return (0, import_agnostic_node_path_1.toImportAgnosticNodePath)({ ast, nodePath: segments });
 };
-const findJsxElementAtNodePath = (ast, nodePath) => {
+const findJsxElementPathAtNodePath = (ast, nodePath) => {
     const current = (0, get_ast_node_path_1.getAstNodePath)(ast, nodePath);
     if (!current) {
         return null;
     }
     if (recast.types.namedTypes.JSXOpeningElement.check(current.value)) {
-        return current.value;
+        return current;
     }
     return null;
 };
+exports.findJsxElementPathAtNodePath = findJsxElementPathAtNodePath;
+const findJsxElementAtNodePath = (ast, nodePath) => {
+    const current = (0, exports.findJsxElementPathAtNodePath)(ast, nodePath);
+    return current ? current.value : null;
+};
 exports.findJsxElementAtNodePath = findJsxElementAtNodePath;
+const findJsxElementNodeAtNodePath = (ast, nodePath) => {
+    var _a;
+    const current = (0, exports.findJsxElementPathAtNodePath)(ast, nodePath);
+    if (!current) {
+        return null;
+    }
+    if (recast.types.namedTypes.JSXElement.check((_a = current.parentPath) === null || _a === void 0 ? void 0 : _a.value)) {
+        return current.parentPath.value;
+    }
+    return null;
+};
+exports.findJsxElementNodeAtNodePath = findJsxElementNodeAtNodePath;
+const findJsxChildrenAttribute = (jsxElement) => {
+    const childrenAttr = jsxElement.attributes.find((attr) => {
+        return (attr.type === 'JSXAttribute' &&
+            attr.name.type === 'JSXIdentifier' &&
+            attr.name.name === 'children');
+    });
+    return childrenAttr && childrenAttr.type === 'JSXAttribute'
+        ? childrenAttr
+        : null;
+};
+const getStaticJsxChildrenAttribute = (jsxElement) => {
+    const childrenAttr = findJsxChildrenAttribute(jsxElement);
+    if (!(childrenAttr === null || childrenAttr === void 0 ? void 0 : childrenAttr.value)) {
+        return null;
+    }
+    if (childrenAttr.value.type === 'StringLiteral') {
+        return { kind: 'jsx-text', value: childrenAttr.value.value };
+    }
+    if (childrenAttr.value.type === 'JSXExpressionContainer' &&
+        childrenAttr.value.expression.type === 'StringLiteral') {
+        return {
+            kind: 'string-expression',
+            value: childrenAttr.value.expression.value,
+        };
+    }
+    return null;
+};
+exports.getStaticJsxChildrenAttribute = getStaticJsxChildrenAttribute;
+const hasJsxChildrenAttribute = (jsxElement) => findJsxChildrenAttribute(jsxElement) !== null;
+exports.hasJsxChildrenAttribute = hasJsxChildrenAttribute;
+const getStaticJsxTextContent = (jsxElement) => {
+    const meaningfulChildren = jsxElement.children.filter((candidate) => {
+        return !(candidate.type === 'JSXText' && candidate.value.trim() === '');
+    });
+    if (meaningfulChildren.length === 0) {
+        return { kind: 'jsx-text', value: '' };
+    }
+    if (meaningfulChildren.length !== 1) {
+        return null;
+    }
+    const child = meaningfulChildren[0];
+    if (child.type === 'JSXText') {
+        return {
+            kind: 'jsx-text',
+            value: child.value.includes('\n') ? child.value.trim() : child.value,
+        };
+    }
+    if (child.type === 'JSXExpressionContainer' &&
+        child.expression.type === 'StringLiteral') {
+        return { kind: 'string-expression', value: child.expression.value };
+    }
+    return null;
+};
+exports.getStaticJsxTextContent = getStaticJsxTextContent;
 const findNodePathForJsxElement = (ast, target) => {
     let foundPath = null;
     recast.types.visit(ast, {
@@ -642,10 +713,26 @@ const computeEffectsForJsx = ({ ast, jsxElement, effects, }) => {
         keys: effect,
     }));
 };
-const computeSequenceOnlyPropsRecord = ({ jsxElement, ast, keys, }) => {
+const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys, }) => {
     const allProps = getPropsStatus(jsxElement, ast);
     const filteredProps = {};
     for (const key of keys) {
+        if (key === 'children') {
+            const staticChildrenAttribute = (0, exports.getStaticJsxChildrenAttribute)(jsxElement);
+            if (staticChildrenAttribute) {
+                filteredProps[key] = staticStatus(staticChildrenAttribute.value);
+                continue;
+            }
+            if ((0, exports.hasJsxChildrenAttribute)(jsxElement)) {
+                filteredProps[key] = computedStatus();
+                continue;
+            }
+            const staticTextContent = (0, exports.getStaticJsxTextContent)(jsxElementNode);
+            filteredProps[key] = staticTextContent
+                ? staticStatus(staticTextContent.value)
+                : computedStatus();
+            continue;
+        }
         const dotIndex = key.indexOf('.');
         if (dotIndex !== -1) {
             filteredProps[key] = getNestedPropStatus(jsxElement, ast, key.slice(0, dotIndex), key.slice(dotIndex + 1));
@@ -660,9 +747,11 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, ast, keys, }) => {
     return filteredProps;
 };
 const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, effects, }) => {
+    var _a;
     const ast = (0, parse_ast_1.parseAst)(fileContents);
-    const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
-    if (!jsxElement) {
+    const jsxElementNode = (0, exports.findJsxElementNodeAtNodePath)(ast, nodePath);
+    const jsxElement = (_a = jsxElementNode === null || jsxElementNode === void 0 ? void 0 : jsxElementNode.openingElement) !== null && _a !== void 0 ? _a : null;
+    if (!jsxElement || !jsxElementNode) {
         throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
     }
     if (!(0, jsx_component_identity_1.jsxComponentIdentitiesMatch)({
@@ -671,7 +760,12 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, compone
     })) {
         throw new jsx_component_identity_1.JsxElementIdentityMismatchError();
     }
-    const filteredProps = computeSequenceOnlyPropsRecord({ jsxElement, ast, keys });
+    const filteredProps = computeSequenceOnlyPropsRecord({
+        jsxElement,
+        jsxElementNode,
+        ast,
+        keys,
+    });
     const effectsStatuses = computeEffectsForJsx({ ast, jsxElement, effects });
     return {
         canUpdate: true,