Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Oct 2, 2025

  • Explore the codebase and understand the issue
  • Examine existing tsx test (jsxUnicodeEscapeSequence.tsx)
  • Create test case based on the issue (jsxNestedIndentation.tsx)
  • Reproduce the bug and confirm TypeScript's expected output
  • Accept initial test baselines (shows bug: all on one line)
  • Fix the bug in printer.go by uncommenting EFStartOnNewLine handling
  • Re-run tests and accept new baselines (4488 → 37 .diff files!)
  • Run full test suite to ensure no regressions
  • Verify linting and formatting pass
  • Fix regression in commentsOnJSXExpressionsArePreserved test
    • Fixed inJsxChild flag state management for nested transforms
    • Fixed children newline logic to check count after filtering
    • All tests now pass with 3 more .diff files removed
Original prompt

This section details on the original issue you should resolve

<issue_title>Indentation removed in JavaScript output for JSX (minor)</issue_title>
<issue_description>## Steps to reproduce

import * as React from 'react'
declare function Child(props: { children?: React.ReactNode }): React.ReactNode;
function Test() {
    return <Child>
        <Child>
            <Child></Child>
        </Child>
    </Child>
}

Behavior with [email protected]

The output preserves the newlines and indentation of the tags:

function Test() {
    return React.createElement(Child, null,
        React.createElement(Child, null,
            React.createElement(Child, null)));
}

Behavior with tsgo

The output collapses everything on a single line:

function Test() {
    return React.createElement(Child, null, React.createElement(Child, null, React.createElement(Child, null)));
}

</issue_description>

<agent_instructions>Examine an existing tsx test first. Then create a test based on the issue and accept its baselines. Then fix the bug.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes #1791

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 3 commits October 2, 2025 16:14
Uncommented the code in printer.go that respects the EFStartOnNewLine
emit flag. This flag is set by the JSX transformer when transforming
JSX elements with multiple children, and causes the printer to emit
each child on a new line with proper indentation.

This fix brings tsgo's JSX output into alignment with TypeScript's
reference implementation, reducing the number of .diff files from
4488 to 37, and properly formatting nested JSX as:

React.createElement(Child, null,
    React.createElement(Child, null,
        React.createElement(Child, null)));

instead of:

React.createElement(Child, null, React.createElement(Child, null, React.createElement(Child, null)));

Co-authored-by: jakebailey <[email protected]>
@Copilot Copilot AI changed the title [WIP] Indentation removed in JavaScript output for JSX (minor) Fix JSX indentation in JavaScript output Oct 2, 2025
@Copilot Copilot AI requested a review from jakebailey October 2, 2025 16:28
Copilot finished work on behalf of jakebailey October 2, 2025 16:28
The previous fix incorrectly cleared the inJsxChild flag when transforming
nested JSX children. When transforming a nested child element, the defer
statement would set inJsxChild back to false, causing the parent element
to not receive the EFStartOnNewLine flag.

Fixed by saving and restoring the previous value of inJsxChild instead of
unconditionally setting it to false. This ensures that the flag state is
properly maintained across nested transformations.

Also fixed the logic for adding EFStartOnNewLine to children: the flag
should only be added when there are multiple children AFTER filtering out
null/whitespace children, not before. This matches TypeScript's behavior
where a single child expression does not get a newline, but multiple
children do.

These fixes resolve the regression in commentsOnJSXExpressionsArePreserved
tests, where a single JSX expression child was incorrectly getting a newline.

Co-authored-by: jakebailey <[email protected]>
@Copilot Copilot AI requested a review from jakebailey October 2, 2025 17:13
Copilot finished work on behalf of jakebailey October 2, 2025 17:13
Copy link
Member

@jakebailey jakebailey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is good?

@jakebailey jakebailey marked this pull request as ready for review October 2, 2025 17:33
@Copilot Copilot AI review requested due to automatic review settings October 2, 2025 17:33
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes JSX indentation in JavaScript output to match TypeScript's behavior. The issue was that nested JSX elements were being collapsed to a single line instead of preserving proper indentation and newlines.

  • Fixed JSX indentation by enabling the EFStartOnNewLine flag handling in the printer
  • Improved state management for JSX child transformations to prevent context corruption
  • Updated newline logic to check children count after filtering out null children

Reviewed Changes

Copilot reviewed 91 out of 91 changed files in this pull request and generated no comments.

Show a summary per file
File Description
testdata/tests/cases/compiler/jsxNestedIndentation.tsx New test case to verify JSX nested indentation behavior
testdata/tests/cases/compiler/jsxNestedIndentation.js Expected JavaScript output with proper indentation
internal/transformers/jsxtransforms/jsx.go Fixed JSX child state management and newline logic for proper indentation
internal/printer/printer.go Enabled EFStartOnNewLine flag handling to support multiline JSX output
Various baseline files Updated test baselines showing the fix applied across many JSX tests

@jakebailey jakebailey requested a review from weswigham October 2, 2025 18:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Indentation removed in JavaScript output for JSX (minor)
2 participants