Interactivity API: Add wp-each directive
#57859
Merged
Conversation
This file contains 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
47 tasks
|
Size Change: +200 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
DAreRodz
added
[Type] Feature
DAreRodz
force-pushed
the
add/interactivity-api-wp-each
branch
from
609a7db
to
07a53b6
Compare
DAreRodz
requested review from
kevin940726,
Mamaduka,
ntwb,
nerrad,
ajitbohra and
luisherranz
as code owners
luisherranz
requested changes
Jan 17, 2024
There was a problem hiding this comment.
Amazing work. And really good tests! I love the way you covered rerenderings.
It's amazing how well this works with such "a little effort" on our side, even on client-side navigation (thanks, Preact! 😄)
Before merging, could you please add a couple of extra tets?
- Test nested templates.
- Test derived state used as key.
Comment on lines
+43
to
+44
| // These tags are included to check that the elements are not unmounted | ||
| // and mounted again. If an element remounts, its tag should be missing. |
DAreRodz
changed the title
wp-each directive.wp-each directive
cbravobernal
requested changes
Jan 18, 2024
Co-authored-by: Luis Herranz <luisherranz@gmail.com>
Co-authored-by: Luis Herranz <luisherranz@gmail.com>
DAreRodz
force-pushed
the
add/interactivity-api-wp-each
branch
from
6635608
to
00650c7
Compare
|
Flaky tests detected in a115a92. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7613036049
|
luisherranz
requested changes
Jan 22, 2024
There was a problem hiding this comment.
This looks good to me. Thanks, David 🙂
By the way, unless we specifically optimize for the case of nested templates in the server directive processor, the SSRing of the internal data-wp-each is going to include the template and data-wp-each-child directives as well.I added them in 1621077 and we can remove them once we finish the server wp-each implementation if that's not the case.
luisherranz
approved these changes
Jan 22, 2024
cbravobernal
approved these changes
Jan 23, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Tracking issue: #56803
What
Implements the
data-wp-eachdirective and related (data-wp-each-key&data-wp-each-child).This directive is passed to template elements and receives a path to a list of elements that are rendered using the template content. Each item is included in the context under the
itemname, so directives inside the template can access the current item.For example, the following HTML...
...generates the following output:
The prop that holds the item in the context can be changed by passing a suffix to the directive name.
By default, it uses each element as the key for the rendered nodes, but you can also specify a path to retrieve the key if necessary, e.g., when the list contains objects.
For server-side rendered lists, another directive called
data-wp-each-childensures hydration works as expected. It should be placed in the server-side rendered elements.Why?
The directive is meant to be part of the public 1.0 version of the Interactivity API shipped in WordPress.
How?
The
data-wp-eachimplementation evaluates the list passed as value and iterates over it, rendering the content of the<template>wrapped inside the context provider.Making the item available inside the context was tricky, not only for the elements in the template content but also for the
data-wp-each-keydirective, which is defined in the<template>element itself along with thedata-wp-eachdirective.Tasks
data-wp-eachanddata-wp-each-childimplementations from Woo main repository.data-wp-each.