Optimize jsx spreads of object expressions

[bz2]

Q	A
Fixed Issues?	part of preactjs/preact#2773
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?	Kinda?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?	No
License	MIT

The result of spreading an object expression is known at compile time enabling better code generation without a spread or extends helper.

Replace convertAttribute function with accumulateAttribute to allow multiple attributes to be created from one input.

Rework special case check for spreads when runtime is classic and useSpread is false to check the last added prop rather than the attribute before conversion.

There are edge cases where this will result in vastly smaller code as the helpers which would otherwise be inlined are no longer required. I believe the logic to be sound in all cases, happy to any additional tests that would be helpful.

Generated code differences:

  /*#__PURE__*/
- React.createElement("img", babelHelpers.extends({
-   alt: ""
- }, {
+ React.createElement("img", {
+   alt: "", 
    src,
    title
- }));
+ }); 

  /*#__PURE__*/
  _jsx("img", {
    alt: "", 
-   ...{
-     src,
-     title
-   }   
+   src,
+   title
  }); 
  
  /*#__PURE__*/
- _jsx("blockquote", { ...{
-     cite
-   },  
+ _jsx("blockquote", {
+   cite,
    children: items
  }); 

[babel-bot]

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

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d8afcec:

Sandbox	Source
babel-repl-custom-plugin	Configuration
babel-plugin-multi-config	Configuration

[nicolo-ribaudo]

Thanks for the PR!

Could you add tests with duplicated props?

<div prop {...{prop}} />;
<div {...{prop}} prop />;

[bz2]

@nicolo-ribaudo Added some tests for duplicated props - no change there from current logic with JSX per #2462 so would also want @babel/plugin-transform-duplicate-keys for transpilation to strict mode.

Also changed the 'classic' logic after first push, to be explicitly two-pass which effectively handles the edge cases (and added tests).

[bz2]

Spurious (probably) failure on e2e-babel-old-version:

 FAIL  codemods/babel-plugin-codemod-optional-catch-binding/test/index.js
  ● Test suite failed to run

    ENOMEM: not enough memory, read

[nicolo-ribaudo]

I restarted the e2e tests.
Btw, duplicated properties are supported in strict mode! They only cause problems in some very old browsers, hence the separate plugin.

[bz2]

Is there anything I can do to help this get a second review?

[nicolo-ribaudo]

Thanks for the PR!

[bz2]

Amazing! Thanks all for the reviews.