Skip to content

Conversation

@keiseiTi
Copy link
Contributor

@keiseiTi keiseiTi commented Jun 21, 2024

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

image

@babel-bot
Copy link
Collaborator

babel-bot commented Jun 21, 2024

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

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo left a comment

Choose a reason for hiding this comment

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

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 />
   </>;
}

@nicolo-ribaudo nicolo-ribaudo added PR: Bug Fix 🐛 A type of pull request used for our changelog categories area: jsx labels Jun 21, 2024
@keiseiTi
Copy link
Contributor Author

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
Copy link
Contributor

JLHwung commented Jul 3, 2024

@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.

@JLHwung JLHwung force-pushed the fix-react-constant-elements-jsxfragment branch from 84814c7 to 181c3b3 Compare July 26, 2024 20:32
@JLHwung
Copy link
Contributor

JLHwung commented Jul 26, 2024

Pushed changes from #16620.

Copy link
Member

@liuxingbaoyu liuxingbaoyu left a comment

Choose a reason for hiding this comment

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

Thanks!

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo left a comment

Choose a reason for hiding this comment

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

Thanks to both!

@JLHwung JLHwung merged commit 026c8b3 into babel:main Jul 27, 2024
Vylpes pushed a commit to Vylpes/random-bunny that referenced this pull request Sep 2, 2024
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@babel/traverse](https://babel.dev/docs/en/next/babel-traverse) ([source](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse)) | resolutions | minor | [`7.24.8` -> `7.25.6`](https://renovatebot.com/diffs/npm/@babel%2ftraverse/7.24.8/7.25.6) |

---

### Release Notes

<details>
<summary>babel/babel (@&#8203;babel/traverse)</summary>

### [`v7.25.6`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7256-2024-08-29)

[Compare Source](babel/babel@v7.25.4...v7.25.6)

##### 🐛 Bug Fix

-   `babel-generator`
    -   [#&#8203;16783](babel/babel#16783) Properly print inner comments in TS array types ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
    -   [#&#8203;16775](babel/babel#16775) fix: jsx whitespace is not properly preserved when retainLines ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))
-   `babel-traverse`
    -   [#&#8203;16727](babel/babel#16727) fix: `path.getAssignmentIdentifiers` may be `undefined` ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))
-   `babel-parser`
    -   [#&#8203;16761](babel/babel#16761) fix: improve static canFollowModifier checks ([@&#8203;JLHwung](https://github.com/JLHwung))
-   `babel-helpers`, `babel-plugin-transform-optional-chaining`, `babel-runtime-corejs3`
    -   [#&#8203;16769](babel/babel#16769) Only wrap functions in `superPropertyGet` helper ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

##### 💅 Polish

-   `babel-generator`, `babel-plugin-transform-async-to-generator`, `babel-plugin-transform-block-scoping`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-classes`, `babel-plugin-transform-duplicate-named-capturing-groups-regex`, `babel-plugin-transform-named-capturing-groups-regex`, `babel-plugin-transform-react-jsx-development`, `babel-plugin-transform-react-jsx`, `babel-plugin-transform-react-pure-annotations`, `babel-plugin-transform-regenerator`, `babel-plugin-transform-runtime`, `babel-preset-env`
    -   [#&#8203;16780](babel/babel#16780) Do not enforce printing space between `(` and comments ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-plugin-syntax-import-assertions`, `babel-plugin-syntax-import-attributes`
    -   [#&#8203;16781](babel/babel#16781) Don't throw when enabling both syntax-import-{assertions,attributes} ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-generator`
    -   [#&#8203;16782](babel/babel#16782) TS union/intersection nested in union does not need parens ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

##### 🏠 Internal

-   `babel-generator`
    -   [#&#8203;16777](babel/babel#16777) Remove unused `parent` params in the generator ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

### [`v7.25.4`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7254-2024-08-22)

[Compare Source](babel/babel@v7.25.3...v7.25.4)

##### 🐛 Bug Fix

-   `babel-traverse`
    -   [#&#8203;16756](babel/babel#16756) fix: Skip computed key when renaming ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))
-   `babel-helper-create-class-features-plugin`, `babel-plugin-proposal-decorators`
    -   [#&#8203;16755](babel/babel#16755) fix: Decorator 2018-09 may throw an exception ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))
-   `babel-types`
    -   [#&#8203;16710](babel/babel#16710) Visit AST fields nodes according to their syntactical order ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-generator`
    -   [#&#8203;16709](babel/babel#16709) Print semicolon after TS `export namespace as A` ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

##### 💅 Polish

-   `babel-generator`, `babel-plugin-proposal-decorators`, `babel-plugin-proposal-destructuring-private`, `babel-plugin-proposal-pipeline-operator`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-destructuring`, `babel-plugin-transform-optional-chaining`, `babel-plugin-transform-private-methods`, `babel-plugin-transform-private-property-in-object`, `babel-plugin-transform-typescript`, `babel-runtime-corejs2`, `babel-runtime`, `babel-traverse`
    -   [#&#8203;16722](babel/babel#16722) Avoid unnecessary parens around sequence expressions ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-generator`, `babel-plugin-transform-class-properties`
    -   [#&#8203;16714](babel/babel#16714) Avoid unnecessary parens around exported arrow functions ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-generator`, `babel-plugin-proposal-decorators`, `babel-plugin-proposal-destructuring-private`, `babel-plugin-transform-object-rest-spread`
    -   [#&#8203;16712](babel/babel#16712) Avoid printing unnecessary parens around object destructuring ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

##### 🔬 Output optimization

-   `babel-generator`
    -   [#&#8203;16740](babel/babel#16740) Avoid extra spaces between comments/regexps in compact mode ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

### [`v7.25.3`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7253-2024-07-31)

[Compare Source](babel/babel@v7.25.2...v7.25.3)

##### 🐛 Bug Fix

-   `babel-plugin-bugfix-firefox-class-in-computed-class-key`, `babel-traverse`
    -   [#&#8203;16699](babel/babel#16699) Avoid validating visitors produced by `traverse.visitors.merge` ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

##### 🏠 Internal

-   `babel-parser`
    -   [#&#8203;16688](babel/babel#16688) Add `@babel/types` as a dependency of `@babel/parser` ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

### [`v7.25.2`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7252-2024-07-30)

[Compare Source](babel/babel@v7.25.1...v7.25.2)

##### 🐛 Bug Fix

-   `babel-core`, `babel-traverse`
    -   [#&#8203;16695](babel/babel#16695) Ensure that `requeueComputedKeyAndDecorators` is available ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

### [`v7.25.1`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7251-2024-07-28)

[Compare Source](babel/babel@v7.25.0...v7.25.1)

##### 🐛 Bug Fix

-   `babel-plugin-transform-function-name`
    -   [#&#8203;16683](babel/babel#16683) fix: `ensureFunctionName` may be undefined ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))
-   `babel-plugin-transform-react-constant-elements`
    -   [#&#8203;16582](babel/babel#16582) fix plugin-transform-react-constant-elements transform JSXFrament but not add JSXExpressionContainer ([@&#8203;keiseiTi](https://github.com/keiseiTi))
-   `babel-traverse`
    -   [#&#8203;16587](babel/babel#16587) fix: fixed issue16583 + test ([@&#8203;nerodesu017](https://github.com/nerodesu017))

##### 🏠 Internal

-   [#&#8203;16663](babel/babel#16663) Test eslint plugin against eslint 9 ([@&#8203;JLHwung](https://github.com/JLHwung))

### [`v7.25.0`](https://github.com/babel/babel/blob/HEAD/CHANGELOG.md#v7250-2024-07-26)

[Compare Source](babel/babel@v7.24.8...v7.25.0)

##### 👓 Spec Compliance

-   `babel-helpers`, `babel-plugin-proposal-explicit-resource-management`, `babel-runtime-corejs3`
    -   [#&#8203;16537](babel/babel#16537) `await using` normative updates ([@&#8203;JLHwung](https://github.com/JLHwung))
-   `babel-plugin-transform-typescript`
    -   [#&#8203;16602](babel/babel#16602) Ensure enum members syntactically determinable to be strings do not get reverse mappings ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))

##### 🚀 New Feature

-   `babel-helper-create-class-features-plugin`, `babel-helper-function-name`, `babel-helper-plugin-utils`, `babel-helper-wrap-function`, `babel-plugin-bugfix-safari-class-field-initializer-scope`, `babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression`, `babel-plugin-transform-classes`, `babel-plugin-transform-function-name`, `babel-preset-env`, `babel-traverse`, `babel-types`
    -   [#&#8203;16658](babel/babel#16658) Move `ensureFunctionName` to `NodePath.prototype` ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-helper-hoist-variables`, `babel-helper-plugin-utils`, `babel-plugin-proposal-async-do-expressions`, `babel-plugin-transform-modules-systemjs`, `babel-traverse`
    -   [#&#8203;16644](babel/babel#16644) Move `hoistVariables` to `Scope.prototype` ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-helper-create-class-features-plugin`, `babel-helper-module-transforms`, `babel-helper-plugin-utils`, `babel-helper-split-export-declaration`, `babel-plugin-transform-classes`, `babel-traverse`, `babel-types`
    -   [#&#8203;16645](babel/babel#16645) Move `splitExportDeclaration` to `NodePath.prototype` ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-helper-create-class-features-plugin`, `babel-helper-environment-visitor`, `babel-helper-module-transforms`, `babel-helper-plugin-utils`, `babel-helper-remap-async-to-generator`, `babel-helper-replace-supers`, `babel-plugin-bugfix-firefox-class-in-computed-class-key`, `babel-plugin-bugfix-v8-static-class-fields-redefine-readonly`, `babel-plugin-transform-async-generator-functions`, `babel-plugin-transform-classes`, `babel-traverse`
    -   [#&#8203;16649](babel/babel#16649) Move `environment-visitor` helper into `@babel/traverse` ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-core`, `babel-parser`
    -   [#&#8203;16480](babel/babel#16480) Expose wether a module has TLA or not as `.extra.async` ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-compat-data`, `babel-plugin-bugfix-safari-class-field-initializer-scope`, `babel-preset-env`
    -   [#&#8203;16569](babel/babel#16569) Introduce `bugfix-safari-class-field-initializer-scope` ([@&#8203;davidtaylorhq](https://github.com/davidtaylorhq))
-   `babel-plugin-transform-block-scoping`, `babel-traverse`, `babel-types`
    -   [#&#8203;16551](babel/babel#16551) Add `NodePath#getAssignmentIdentifiers` ([@&#8203;JLHwung](https://github.com/JLHwung))
-   `babel-helper-import-to-platform-api`, `babel-plugin-proposal-json-modules`
    -   [#&#8203;16579](babel/babel#16579) Add `uncheckedRequire` option for JSON imports to CJS ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-helper-transform-fixture-test-runner`, `babel-node`
    -   [#&#8203;16642](babel/babel#16642) Allow using custom config in `babel-node --eval` ([@&#8203;slatereax](https://github.com/slatereax))
-   `babel-compat-data`, `babel-helper-create-regexp-features-plugin`, `babel-plugin-proposal-duplicate-named-capturing-groups-regex`, `babel-plugin-transform-duplicate-named-capturing-groups-regex`, `babel-preset-env`, `babel-standalone`
    -   [#&#8203;16445](babel/babel#16445) Add `duplicate-named-capturing-groups-regex` to `preset-env` ([@&#8203;JLHwung](https://github.com/JLHwung))

##### 🐛 Bug Fix

-   `babel-generator`
    -   [#&#8203;16678](babel/babel#16678) Print parens around as expressions on the LHS ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-template`, `babel-types`
    -   [#&#8203;15286](babel/babel#15286) fix: Props are lost when the template replaces the node ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))

##### 🏠 Internal

-   Other
    -   [#&#8203;16674](babel/babel#16674) bump gulp to 5 ([@&#8203;JLHwung](https://github.com/JLHwung))
-   `babel-generator`
    -   [#&#8203;16651](babel/babel#16651) Simplify the printing logic for `(` before ambiguous tokens ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))
-   `babel-helper-function-name`, `babel-plugin-transform-arrow-functions`, `babel-plugin-transform-function-name`, `babel-preset-env`, `babel-traverse`
    -   [#&#8203;16652](babel/babel#16652) Simplify `helper-function-name` logic ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

##### 🏃‍♀️ Performance

-   `babel-parser`, `babel-plugin-proposal-pipeline-operator`
    -   [#&#8203;16461](babel/babel#16461) Some minor parser performance improvements for ts ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))

##### 🔬 Output optimization

-   `babel-plugin-transform-classes`
    -   [#&#8203;16670](babel/babel#16670) Reduce redundant `assertThisInitialized` ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))
-   `babel-helper-create-class-features-plugin`, `babel-helper-replace-supers`, `babel-helpers`, `babel-plugin-proposal-decorators`, `babel-plugin-transform-class-properties`, `babel-plugin-transform-classes`, `babel-plugin-transform-exponentiation-operator`, `babel-plugin-transform-object-super`, `babel-plugin-transform-private-methods`, `babel-runtime-corejs2`, `babel-runtime-corejs3`, `babel-runtime`
    -   [#&#8203;16374](babel/babel#16374) Improve `super.x` output ([@&#8203;liuxingbaoyu](https://github.com/liuxingbaoyu))
-   `babel-plugin-transform-class-properties`, `babel-plugin-transform-classes`
    -   [#&#8203;16656](babel/babel#16656) Simplify output for anonymous classes with no methods ([@&#8203;nicolo-ribaudo](https://github.com/nicolo-ribaudo))

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40MzEuNCIsInVwZGF0ZWRJblZlciI6IjM3LjQzMS40IiwidGFyZ2V0QnJhbmNoIjoiZGV2ZWxvcCIsImxhYmVscyI6WyJ0eXBlL2RlcGVuZGVuY2llcyJdfQ==-->

Reviewed-on: https://git.vylpes.xyz/RabbitLabs/random-bunny/pulls/212
Reviewed-by: Vylpes <[email protected]>
Co-authored-by: Renovate Bot <[email protected]>
Co-committed-by: Renovate Bot <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area: jsx outdated A closed issue/PR that is archived due to age. Recommended to make a new issue PR: Bug Fix 🐛 A type of pull request used for our changelog categories

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Fragment child elements are not transformed correctly when using @babel/plugin-transform-react-constant-elements

5 participants