[LiveComponent] add ability to have array props #241
Merged
Conversation
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
10 tasks
kbond
commented
Jan 24, 2022
| @@ -28,7 +28,7 @@ | |||
| final class LiveComponentHydrator | |||
| { | |||
| private const CHECKSUM_KEY = '_checksum'; | |||
| private const EXPOSED_PROP_KEY = 'id'; | |||
| private const EXPOSED_PROP_KEY = '_id'; | |||
There was a problem hiding this comment.
This doesn't mess up the frontend, does it?
weaverryan
approved these changes
Jan 25, 2022
| @@ -28,7 +28,7 @@ | |||
| final class LiveComponentHydrator | |||
| { | |||
| private const CHECKSUM_KEY = '_checksum'; | |||
| private const EXPOSED_PROP_KEY = 'id'; | |||
| private const EXPOSED_PROP_KEY = '_id'; | |||
weaverryan
force-pushed
the
bug/live-component-array-prop
branch
from
cf553ac to
f71e718
Compare
|
Thanks Kevin! |
weaverryan
added a commit
that referenced
this pull request
Jan 31, 2022
…er (kbond) This PR was merged into the 2.x branch. Discussion ---------- [WIP][TwigComponent] add component attribute system/helper | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | Tickets | n/a | License | MIT A common pattern with other component library's (ie blade components/vue) is to pass html attributes to your component that are set on the component's root node. This proposal adds a way to do this with twig components. Enable on your component by adding the `HasAttributesTrait`. Attributes are any data passed to `component()` that cannot be mounted on the component itself. This extra data is added to a `ComponentAttributes` object that lives as a public property on your component (available as `attributes` in your component's template). This should all work out-of-the box with live components. Todo: - [x] Tests - [x] Documentation - [x] #240 - [x] #241 - [x] Merge `init_live_component()` into attributes when available - [x] Document `PreRender` event. - [x] Adjust `ComponentAttributes` api (defaults instead of merge) - [ ] `attributes` always available in normal twig component templates (not sure about this - it would effectively make attributes _native_ but it a lame way) - [x] replace `init_live_component()` with `attributes` in docs - [x] Finalize docs (versionadded tags) ## Usage To use, add the `HasAttributesTrait` to your component: ```php #[AsTwigComponent('my_component')] class MyComponent { use HasAttributesTrait; } ``` Then, in your component's template: ```twig {# templates/components/my_component.html.twig #} <div{{ attributes }}> My Component! </div> ``` When rendering the component, you can pass an array of html attributes to add: ```twig {{ component('my_component', { class: 'foo', style: 'color:red' }) }} {# renders as: #} <div class="foo" style="color:red"> My Component! </div> ``` ### Defaults & Merging In your component template, you can set defaults that are merged with passed attributes. The passed attributes override the default with the exception of *class*. For class, the defaults are prepended: ```twig {# templates/components/my_component.html.twig #} <button{{ attributes.defaults({ class: 'bar', type: 'button' }) }}> My Component! </button> {# render component #} {{ component('my_component', { style: 'color:red' }) }} {{ component('my_component', { class: 'foo', type: 'submit' }) }} {# renders as: #} <div class="bar" style="color:red"> My Component! </div> <div class="bar foo" type="submit"> My Component! </div> ``` ### Only ```twig {# templates/components/my_component.html.twig #} <div{{ attributes.only('class')) }}> My Component! </div> {# render component #} {{ component('my_component', { class: 'foo', style: 'color:red' }) }} {# renders as: #} <div class="foo"> My Component! </div> ``` ### Without ```twig {# templates/components/my_component.html.twig #} <div{{ attributes.without('class')) }}> My Component! </div> {# render component #} {{ component('my_component', { class: 'foo', style: 'color:red' }) }} {# renders as: #} <div style="color:red"> My Component! </div> ``` ### Live Components We removed the `init_live_component()` twig function (**BC BREAK**) and replaced with the `attributes` variable which is always available (even if your component doesn't use `HasAttributesTrait`). To upgrade, replace all calls to `init_live_component()` with `attributes`: ```diff - <div {{ init_live_component() }}> + <div {{ attributes }}> ``` Commits ------- d638782 [Twig][Live] add html attributes system
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.
Discovered a bug when working on #220. You currently can't have
LiveProp's that are "arrays". This is because the expose system uses arrays and we weren't strict enough in determining when this system was being used.