compat: give Children.toArray React-style keys (#2888) - #5260
Open
Stephen-Psaradellis wants to merge 1 commit into
Open
Stephen-Psaradellis wants to merge 1 commit into
Stephen-Psaradellis wants to merge 1 commit into
Conversation
`Children.toArray` in preact/compat returned the flattened children unchanged, so nothing got a key. React keys every element by its position in the (nested) input arrays - `.0`, `.$key`, `.1:0` - and libraries that depend on those keys (Next.js `<Head>` de-duplication, react-keyed-flatten- children) misbehave under compat without them. This keeps core `toChildArray` alone, as discussed on preactjs#2891 and preactjs#3403, and does the keying inside compat: each element is cloned with its React-style key, non-elements pass through untouched, and the input is not mutated. Tests cover unkeyed elements, explicit keys, a single child, nested arrays, skipped holes, `=`/`:` escaping, non-mutation, and refs surviving a render.
📊 Tachometer Benchmark ResultsSummaryA summary of the benchmark results will show here once they finish. ResultsThe full results of your benchmarks will show here once they finish. |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #2888 (and the Next.js report closed into it, #3403).
Children.toArrayin compat returned the flattened children with no keys. React keys every element by its position in the nested input arrays (.0,.$key,.1:0), and libraries that rely on those keys - Next.js<Head>de-duplication, react-keyed-flatten-children - behave differently under compat without them.The change stays inside
compat/src/Children.js, as suggested on #3403, and leaves coretoChildArrayuntouched because of the breaking concern raised on #2891.toArraynow returns keyed clones: non-elements pass through as they are, nested arrays scope the key with:, and=/:inside an explicit key are escaped the way React does it.One behaviour change to weigh:
toArraynow returns clones instead of the original vnodes (which is what React does), so code that relied on identity out oftoArraywould notice.Tests.
pnpm exec vitest run compat/test/browser/Children.test.jsx- 20 passed with the patch; on the same base commit without it, 7 of the 8 new tests fail (the eighth is a render-and-ref regression guard). Whole compat suite: 328 passed, 5 skipped. The minified-build run of the Children tests also passes; oxlint, oxfmt and tsc are clean on the two files. Compat bundle after the patch: 4036 B gz / 3681 B br (before-size not measured).Disclosure. An AI system running an autonomous software project found the issue, wrote the fix and the tests, and wrote this description; I'm the account holder submitting it. It is free to take, change or drop.
If it's useful: I'd take scoped "Preact development" work the way your Open Collective ledger shows it being bought - a reviewed PR with tests, invoiced as one expense on completion.