@takazudo/mdx-formatter 0.4.0 → 0.4.2

package/dist/hybrid-formatter.d.ts

@@ -11,10 +11,19 @@ export declare class HybridFormatter {
     private ast;
     private positionMap;
     private indentDetector;
+    private readonly htmlFormatter;
     constructor(content: string, settings?: FormatterSettings | null);
     parseAST(content: string): Root;
     fixStandaloneClosingTags(content: string): string;
     buildPositionMap(): PositionMapEntry[];
+    /**
+     * Get the list of components to ignore during formatting.
+     */
+    private get ignoreComponents();
+    /**
+     * Check if a JSX node should be processed (correct type, has position, not HTML, not ignored).
+     */
+    private isFormattableJsxNode;
     /**
      * Detect indentation from content and update formatter settings
      */
@@ -64,6 +73,11 @@ export declare class HybridFormatter {
      */
     preprocessYamlForParsing(yamlText: string): string;
     collectYamlFormatOperations(operations: FormatterOperation[]): void;
+    /**
+     * Remove replaceLines/replaceHtmlBlock operations that are strictly contained
+     * within a wider replacement range (parent wins over child). Mutates the array in place.
+     */
+    private filterOverlappingReplacements;
     getLineAtPosition(charPos: number): number;
     applyOperation(lines: string[], op: FormatterOperation): void;
 }

package/dist/hybrid-formatter.js

@@ -20,12 +20,14 @@ export class HybridFormatter {
     ast;
     positionMap;
     indentDetector;
+    htmlFormatter;
     constructor(content, settings = null) {
         this.originalContent = content;
         this.content = content; // Use content directly without preprocessing
         this.lines = this.content.split('\n');
         this.settings = settings ? deepCloneSettings(settings) : deepCloneSettings(formatterSettings);
         this.indentDetector = null;
+        this.htmlFormatter = new HtmlBlockFormatter(this.settings.formatHtmlBlocksInMdx || {});
         // Auto-detect indentation if enabled
         if (this.settings.autoDetectIndent && this.settings.autoDetectIndent.enabled) {
             this.detectAndApplyIndentation();
@@ -96,6 +98,29 @@ export class HybridFormatter {
         }
         return map;
     }
+    /**
+     * Get the list of components to ignore during formatting.
+     */
+    get ignoreComponents() {
+        return this.settings.formatMultiLineJsx.ignoreComponents || [];
+    }
+    /**
+     * Check if a JSX node should be processed (correct type, has position, not HTML, not ignored).
+     */
+    isFormattableJsxNode(node) {
+        if ((node.type !== 'mdxJsxFlowElement' && node.type !== 'mdxJsxTextElement') ||
+            !node.position) {
+            return false;
+        }
+        const jsxNode = node;
+        if (jsxNode.name && this.htmlFormatter.isHtmlElement(jsxNode.name)) {
+            return false;
+        }
+        if (jsxNode.name && this.ignoreComponents.includes(jsxNode.name)) {
+            return false;
+        }
+        return true;
+    }
     /**
      * Detect indentation from content and update formatter settings
      */
@@ -185,9 +210,34 @@ export class HybridFormatter {
         if (this.settings.formatHtmlBlocksInMdx && this.settings.formatHtmlBlocksInMdx.enabled) {
             await this.collectHtmlBlockOperations(operations);
         }
+        // When parent and child JSX elements both produce replaceLines operations
+        // with overlapping ranges, keep only the wider range (parent).
+        this.filterOverlappingReplacements(operations);
+        // Collect line ranges covered by replaceLines/replaceHtmlBlock operations.
+        // Other operations (insertLine, indentLine) that fall within these ranges
+        // must be dropped to prevent duplication — the replacement already rewrites
+        // the entire range.
+        const replacedRanges = [];
+        for (const op of operations) {
+            if ((op.type === 'replaceLines' || op.type === 'replaceHtmlBlock') && 'endLine' in op) {
+                replacedRanges.push([op.startLine, op.endLine]);
+            }
+        }
+        const isInsideReplacedRange = (line) => {
+            return replacedRanges.some(([start, end]) => line >= start && line <= end);
+        };
+        // Filter out operations that conflict with replaceLines ranges
+        const filteredOperations = operations.filter((op) => {
+            if (op.type === 'replaceLines' || op.type === 'replaceHtmlBlock') {
+                return true; // Always keep replacement operations
+            }
+            // Drop insertLine / indentLine / fixListIndent if they target a line
+            // inside a range that will be completely replaced
+            return !isInsideReplacedRange(op.startLine);
+        });
         // Sort operations by position (reverse order to preserve positions)
         // Also sort by operation type to ensure replacements happen before insertions at the same line
-        operations.sort((a, b) => {
+        filteredOperations.sort((a, b) => {
             if (b.startLine !== a.startLine) {
                 return b.startLine - a.startLine;
             }
@@ -204,7 +254,7 @@ export class HybridFormatter {
         // Apply operations to lines with deduplication
         const resultLines = [...this.lines];
         const appliedOperations = new Set();
-        for (const op of operations) {
+        for (const op of filteredOperations) {
             // Create a unique key for this operation
             const endLine = 'endLine' in op ? op.endLine : op.startLine;
             const opKey = `${op.type}-${op.startLine}-${endLine}`;
@@ -220,8 +270,6 @@ export class HybridFormatter {
         return result.replace(/\n{3,}/g, '\n\n');
     }
     collectSpacingOperations(operations) {
-        // Initialize HTML formatter to check if elements are HTML
-        const htmlFormatter = new HtmlBlockFormatter(this.settings.formatHtmlBlocksInMdx || {});
         visit(this.ast, (node) => {
             // Add spacing after headings
             if (node.type === 'heading' && node.position) {
@@ -239,14 +287,14 @@ export class HybridFormatter {
                 }
             }
             // FIXED: Add spacing after JSX components when followed by text or another JSX component
-            if ((node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') &&
-                node.position) {
+            if (this.isFormattableJsxNode(node)) {
                 const jsxNode = node;
-                // Skip HTML elements - they will be handled by HTML formatter
-                if (jsxNode.name && htmlFormatter.isHtmlElement(jsxNode.name)) {
+                const endLine = jsxNode.position.end.line - 1;
+                // Skip JSX elements inside table rows
+                const currentLineContent = this.lines[endLine];
+                if (currentLineContent && currentLineContent.trim().startsWith('|')) {
                     return;
                 }
-                const endLine = jsxNode.position.end.line - 1;
                 if (endLine < this.lines.length - 1) {
                     const nextLine = this.lines[endLine + 1];
                     // Check if next line is text (not empty, not heading)
@@ -359,21 +407,9 @@ export class HybridFormatter {
         });
     }
     collectJsxFormatOperations(operations) {
-        // Initialize HTML formatter to check if elements are HTML
-        const htmlFormatter = new HtmlBlockFormatter(this.settings.formatHtmlBlocksInMdx || {});
         visit(this.ast, (node) => {
-            if ((node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') &&
-                node.position) {
+            if (this.isFormattableJsxNode(node)) {
                 const jsxNode = node;
-                // Skip HTML elements - they will be handled by HTML formatter
-                if (jsxNode.name && htmlFormatter.isHtmlElement(jsxNode.name)) {
-                    return;
-                }
-                // Skip components in the ignore list
-                const ignoreComponents = this.settings.formatMultiLineJsx.ignoreComponents || [];
-                if (jsxNode.name && ignoreComponents.includes(jsxNode.name)) {
-                    return;
-                }
                 const startLine = jsxNode.position.start.line - 1;
                 const endLine = jsxNode.position.end.line - 1;
                 // Extract the original JSX text
@@ -395,8 +431,7 @@ export class HybridFormatter {
     }
     needsJsxFormatting(node, originalText) {
         // Check if component is in ignore list
-        const ignoreComponents = this.settings.formatMultiLineJsx.ignoreComponents || [];
-        if (node.name && ignoreComponents.includes(node.name)) {
+        if (node.name && this.ignoreComponents.includes(node.name)) {
             return false;
         }
         const attributes = node.attributes || [];
@@ -415,6 +450,30 @@ export class HybridFormatter {
             const expectedIndent = this.indentDetector
                 ? this.indentDetector.getIndentString()
                 : ' '.repeat(this.settings.formatMultiLineJsx.indentSize || 2);
+            // Determine where the opening tag ends so we only check attribute lines.
+            // For self-closing elements the opening tag ends at /> or the last line.
+            // For non-self-closing elements the opening tag ends at the first line
+            // containing a bare > (not />).
+            let openingTagEndLine = lines.length - 1;
+            const hasClosingTag = originalText.includes(`</${node.name}>`);
+            if (hasClosingTag) {
+                let braceDepth = 0;
+                for (let i = 0; i < lines.length; i++) {
+                    const line = lines[i];
+                    // Track brace depth to avoid matching > inside expressions like {a > b}
+                    for (const ch of line) {
+                        if (ch === '{')
+                            braceDepth++;
+                        if (ch === '}')
+                            braceDepth--;
+                    }
+                    const trimmed = line.trim();
+                    if (braceDepth === 0 && trimmed.endsWith('>') && !trimmed.endsWith('/>')) {
+                        openingTagEndLine = i;
+                        break;
+                    }
+                }
+            }
             // Check for attributes split across lines incorrectly
             // Like: <ExImg src="..." className="..."
             //         alt="..." />
@@ -423,24 +482,20 @@ export class HybridFormatter {
                 // Has attributes on first line but doesn't close
                 return true;
             }
-            // Check if /> is on its own line (this is always incorrect)
-            for (let i = 1; i < lines.length; i++) {
+            // Only check lines within the opening tag (not children content)
+            for (let i = 1; i <= openingTagEndLine; i++) {
                 const trimmed = lines[i].trim();
+                // Check if /> is on its own line (this is always incorrect)
                 if (trimmed === '/>') {
-                    // /> should never be on its own line in JSX/MDX
                     return true;
                 }
-            }
-            // Check indentation on subsequent lines
-            for (let i = 1; i < lines.length; i++) {
-                const line = lines[i];
-                const trimmed = line.trim();
                 // Skip empty lines or closing tag
                 if (!trimmed || trimmed.startsWith(`</${node.name}`)) {
                     continue;
                 }
                 // Check proper indentation for attribute lines
                 // Attributes should be indented by exactly one indent level
+                const line = lines[i];
                 if (!line.startsWith(expectedIndent)) {
                     return true;
                 }
@@ -543,9 +598,19 @@ export class HybridFormatter {
         }
         // Add children content if not self-closing
         if (!selfClosing) {
+            // Check if this is a block component that needs empty lines
+            const blockComponents = this.settings.addEmptyLinesInBlockJsx?.blockComponents || [];
+            const isBlockComponent = this.settings.addEmptyLinesInBlockJsx?.enabled !== false && blockComponents.includes(name);
             // Extract children content from original
             const childrenText = this.extractChildrenText(node, originalText);
             if (childrenText) {
+                // Add empty line after opening tag for block components
+                if (isBlockComponent) {
+                    const firstContentLine = childrenText.split('\n')[0];
+                    if (firstContentLine && firstContentLine.trim() !== '') {
+                        lines.push('');
+                    }
+                }
                 // Check if this is a container component that needs indented content
                 const containerComponents = this.settings.indentJsxContent.containerComponents || [];
                 const isContainer = containerComponents.includes(name);
@@ -561,6 +626,13 @@ export class HybridFormatter {
                 else {
                     lines.push(...childrenText.split('\n'));
                 }
+                // Add empty line before closing tag for block components
+                if (isBlockComponent) {
+                    const lastContentLine = lines[lines.length - 1];
+                    if (lastContentLine && lastContentLine.trim() !== '') {
+                        lines.push('');
+                    }
+                }
             }
             // Closing tag
             lines.push(`</${name}>`);
@@ -751,15 +823,13 @@ export class HybridFormatter {
      * Collect HTML block formatting operations using HtmlBlockFormatter
      */
     async collectHtmlBlockOperations(operations) {
-        // Initialize the HTML formatter
-        const htmlFormatter = new HtmlBlockFormatter(this.settings.formatHtmlBlocksInMdx);
         // Collect all HTML nodes first, tracking parent-child relationships
         const htmlNodes = [];
         const processedRanges = [];
         visit(this.ast, 'mdxJsxFlowElement', (node) => {
             const jsxNode = node;
             // Check if this is an HTML element (not a JSX component)
-            if (jsxNode.name && htmlFormatter.isHtmlElement(jsxNode.name)) {
+            if (jsxNode.name && this.htmlFormatter.isHtmlElement(jsxNode.name)) {
                 const startLine = jsxNode.position.start.line;
                 const endLine = jsxNode.position.end.line;
                 // Check if this node is within an already processed range
@@ -783,7 +853,7 @@ export class HybridFormatter {
             const htmlContent = this.extractHtmlFromNode(node);
             if (htmlContent) {
                 // Format just this HTML block using Prettier
-                const formatted = await htmlFormatter.formatWithPrettier(htmlContent);
+                const formatted = await this.htmlFormatter.formatWithPrettier(htmlContent);
                 // Only add operation if formatting changed the content
                 if (formatted !== htmlContent) {
                     operations.push({
@@ -813,18 +883,10 @@ export class HybridFormatter {
     }
     collectJsxIndentOperations(operations) {
         const containerNames = this.settings.indentJsxContent.containerComponents || [];
-        // Initialize HTML formatter to check if elements are HTML
-        const htmlFormatter = new HtmlBlockFormatter(this.settings.formatHtmlBlocksInMdx || {});
-        // Get components to ignore
-        const ignoreComponents = this.settings.formatMultiLineJsx.ignoreComponents || [];
         visit(this.ast, (node) => {
-            if (node.type === 'mdxJsxFlowElement' && node.position) {
+            if (this.isFormattableJsxNode(node)) {
                 const jsxNode = node;
-                if (containerNames.includes(jsxNode.name || '') &&
-                    // Skip HTML elements - they are handled by HTML formatter
-                    !htmlFormatter.isHtmlElement(jsxNode.name || '') &&
-                    // Skip ignored components
-                    !ignoreComponents.includes(jsxNode.name || '')) {
+                if (containerNames.includes(jsxNode.name || '')) {
                     const startLine = jsxNode.position.start.line - 1;
                     const endLine = jsxNode.position.end.line - 1;
                     // Check if content needs indentation
@@ -850,19 +912,10 @@ export class HybridFormatter {
     }
     collectBlockJsxEmptyLineOperations(operations) {
         const blockComponents = this.settings.addEmptyLinesInBlockJsx.blockComponents || [];
-        // Initialize HTML formatter to check if elements are HTML
-        const htmlFormatter = new HtmlBlockFormatter(this.settings.formatHtmlBlocksInMdx || {});
-        // Get components to ignore
-        const ignoreComponents = this.settings.formatMultiLineJsx.ignoreComponents || [];
         visit(this.ast, (node) => {
-            if ((node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') &&
-                node.position) {
+            if (this.isFormattableJsxNode(node)) {
                 const jsxNode = node;
-                if (blockComponents.includes(jsxNode.name || '') &&
-                    // Skip HTML elements - they are handled by HTML formatter
-                    !htmlFormatter.isHtmlElement(jsxNode.name || '') &&
-                    // Skip ignored components
-                    !ignoreComponents.includes(jsxNode.name || '')) {
+                if (blockComponents.includes(jsxNode.name || '')) {
                     const startLine = jsxNode.position.start.line - 1;
                     const endLine = jsxNode.position.end.line - 1;
                     // Handle single-line components
@@ -1014,6 +1067,38 @@ export class HybridFormatter {
             }
         });
     }
+    /**
+     * Remove replaceLines/replaceHtmlBlock operations that are strictly contained
+     * within a wider replacement range (parent wins over child). Mutates the array in place.
+     */
+    filterOverlappingReplacements(operations) {
+        const replaceOps = [];
+        for (const op of operations) {
+            if ((op.type === 'replaceLines' || op.type === 'replaceHtmlBlock') && 'endLine' in op) {
+                replaceOps.push(op);
+            }
+        }
+        // Find ops that are strictly contained within another op's range
+        const dropped = new Set();
+        for (const inner of replaceOps) {
+            for (const outer of replaceOps) {
+                if (inner === outer)
+                    continue;
+                if (inner.startLine >= outer.startLine &&
+                    inner.endLine <= outer.endLine &&
+                    (inner.startLine !== outer.startLine || inner.endLine !== outer.endLine)) {
+                    dropped.add(inner);
+                    break;
+                }
+            }
+        }
+        // Remove dropped operations in place
+        for (let i = operations.length - 1; i >= 0; i--) {
+            if (dropped.has(operations[i])) {
+                operations.splice(i, 1);
+            }
+        }
+    }
     getLineAtPosition(charPos) {
         for (let i = 0; i < this.positionMap.length; i++) {
             if (charPos >= this.positionMap[i].start && charPos <= this.positionMap[i].end) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takazudo/mdx-formatter",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "AST-based markdown and MDX formatter with Japanese text support",
   "type": "module",
   "main": "dist/index.js",