Optimize jsx spreads of object expressions#12557
Conversation
|
Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/36464/ |
|
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:
|
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 rewrite generated props after conversion.
7cfb335 to
49518aa
Compare
Duplicated keys may be created as per current behaviour, using `@babel/plugin-transform-duplicate-keys` would allow use when transpiling to strict.
|
@nicolo-ribaudo Added some tests for duplicated props - no change there from current logic with JSX per #2462 so would also want Also changed the 'classic' logic after first push, to be explicitly two-pass which effectively handles the edge cases (and added tests). |
|
Spurious (probably) failure on |
|
I restarted the e2e tests. |
|
Is there anything I can do to help this get a second review? |
|
Thanks for the PR! |
|
Amazing! Thanks all for the reviews. |
The result of spreading an object expression is known at compile time enabling better code generation without a spread or extends helper.
Replace
convertAttributefunction withaccumulateAttributeto allow multiple attributes to be created from one input.Rework special case check for spreads when runtime is classic and
useSpreadis 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__*/ _jsx("img", { alt: "", - ...{ - src, - title - } + src, + title }); /*#__PURE__*/ - _jsx("blockquote", { ...{ - cite - }, + _jsx("blockquote", { + cite, children: items });