fix(react-compiler): JSXText emits incorrect with bracket

[himself65]

Summary

Our LlamaIndex Product is blocked by this bug

Fixes: #32137

How did you test this change?

[mofeiZ]

Thanks for the report and fix! Instead of adding a playground test, can you add this as a unit test fixture?

1. Add the following in the fixtures directory

descriptive-name.jsx|tsx

// component to compile
function Test({friends}) {
  return (
    <div>
      If the string contains the string &#123;pageNumber&#125; it will be
      replaced by the page number.
    </div>
  );
}

// Export for test evaluator to know which function to invoke.
// Test evaluator will compare the result of compiledFn() against originalFn()
export const FIXTURE_ENTRYPOINT = {
  fn: Test,
  params: [{friends: []}],
};

2. Run our test evaluator to update unit test snapshot files. (--watch or --filter mode might also be helpful)

# in react/compiler
$ yarn; yarn snap --update

[mofeiZ]

Looks good overall, please address feedback and we'll merge this 🙂

[himself65]

Looks good overall, please address feedback and we'll merge this 🙂

Done

[mofeiZ]

Let's remove the changes to page.spec.ts (the playground test) and rename descriptive-name.jsx to a descriptive name, e.g. your PR title jsx-bracket-repro.jsx

[mofeiZ]

Awesome, thanks for the fix!