fix plugin-transform-react-constant-elements transform JSXFrament but not add JSXExpressionContainer

[keiseiTi]

Q	A
Fixed Issues?	Fixes #16449
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

fix #16449，the specific repair content is shown in the following figure

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/57189

[nicolo-ribaudo]

Thank you! Would you like to update the PR to get to the other possible expected output (the one where the fragment itself is hoisted), since it seems to be better?

And if yes, then also add a test where only one element can be hoisted and not the whole fragment:

function Component({ x }) {
   return <>
     <a>{x}</a>
     <b />
   </>;
}

[keiseiTi]

Thank you! Would you like to update the PR to get to the other possible expected output (the one where the fragment itself is hoisted), since it seems to be better?

And if yes, then also add a test where only one element can be hoisted and not the whole fragment:

function Component({ x }) {
   return <>
     <a>{x}</a>
     <b />
   </>;
}

sorry , I can't seem to understand what you mean . or want to add a test case ? or tell me your expected conversion result , then I will do that .

[JLHwung]

@keiseiTi Sorry for the late reply.

For the test case

function F() {
  return <><div>f</div></>;
}

The current output in this PR is

var _div;
function F() {
  return <>{_div || (_div = <div>f</div>)}</>;
}

This is already working but not optimal, since we still create a new JSX fragment <>{_div...}</> whenever F is invoked. Can you try to further optimize it to

var _frag;
function F() {
  return _frag || _frag = <><div>f</div></>;
}

And when you have done the optimization part, can you also add the following test case?

• jsx-dynamic-children-in-fragment

function Component({ x }) {
   return <>
     <a>{x}</a>
     <b />
   </>;
}

The expected output should be

var _b;
function Component({
  x
}) {
  return <>
    <a>{x}</a>
    {_b || (_b = <b />)}
  </>;
}

This test is to verify that Babel can still hoist constant elements, e.g. <b /> within the fragment, when the fragment as a whole, should not be hoisted as x is dynamic.