-
-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature #1396 [LiveComponent] Alias URL bound props (squrious)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [LiveComponent] Alias URL bound props | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | Issues | N/A | License | MIT Following symfony/ux#1230. Allow custom parameter names for URL bound props, and mapping specification from Twig templates. ## Usage From PHP definition: ```php #[AsLiveComponent()] final class MyComponent { // ... #[LiveProp(writable: true, url: new QueryMapping(alias: 'q')) public ?string $search = null; } ``` From templates: ```twig {{ component('MyComponent', { 'data-live-url-mapping-search': { 'alias': 'q' } }) }} {{ component('MyComponent', { 'data-live-url-mapping-search-alias': 'q' }) }} ``` HTML syntax also works: ```twig <twig:MyComponent :data-live-url-mapping-search="{ alias: 'q'}" /> <twig:MyComponent data-live-url-mapping-search-alias="q" /> ``` ## Result Changing the value of `search` will update the url to `https://my.domain?q=my+search+string`. Mappings provided in Twig templates are merged into those provided in PHP. Thus, query mappings in PHP act as defaults, and we can override them in templates (e.g. for specific page requirements). So a page with: ```twig <twig:MyComponent/> <twig:MyComponent data-live-url-mapping-search-alias="q" /> ``` will update its URL to `http://my.domain?search=foo&q=bar`. Commits ------- 828e34e5 [LiveComponent] Alias URL bound props
- Loading branch information
Showing
16 changed files
with
240 additions
and
91 deletions.
There are no files selected for viewing
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
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
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
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
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
<?php | ||
|
||
/* | ||
* This file is part of the Symfony package. | ||
* | ||
* (c) Fabien Potencier <fabien@symfony.com> | ||
* | ||
* For the full copyright and license information, please view the LICENSE | ||
* file that was distributed with this source code. | ||
*/ | ||
|
||
namespace Symfony\UX\LiveComponent\Metadata; | ||
|
||
/** | ||
* Mapping configuration to bind a LiveProp to a URL query parameter. | ||
* | ||
* @author Nicolas Rigaud <squrious@protonmail.com> | ||
*/ | ||
final class UrlMapping | ||
{ | ||
public function __construct( | ||
/** | ||
* The name of the prop that appears in the URL. If null, the LiveProp's field name is used. | ||
*/ | ||
public readonly ?string $as = null, | ||
) { | ||
} | ||
} |
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
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
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
18 changes: 10 additions & 8 deletions
18
tests/Fixtures/templates/components/component_with_url_bound_props.html.twig
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,12 @@ | ||
<div {{ attributes }}> | ||
Prop1: {{ prop1 }} | ||
Prop2: {{ prop2 }} | ||
Prop3: {{ prop3|join(',') }} | ||
Prop4: {{ prop4 }} | ||
Prop5: address: {{ prop5.address ?? '' }} city: {{ prop5.city ?? '' }} | ||
Prop6: {{ prop6 }} | ||
Prop7: {{ prop7 }} | ||
Prop8: {{ prop8 }} | ||
StringProp: {{ stringProp }} | ||
IntProp: {{ intProp }} | ||
ArrayProp: {{ arrayProp|join(',') }} | ||
UnboundProp: {{ unboundProp }} | ||
ObjectProp: address: {{ objectProp.address ?? '' }} city: {{ objectProp.city ?? '' }} | ||
PropWithField1: {{ propWithField1 }} | ||
PropWithField2: {{ propWithField2 }} | ||
MaybeBoundProp: {{ maybeBoundProp }} | ||
BoundPropWithAlias: {{ boundPropWithAlias }} | ||
BoundPropWithCustomAlias: {{ boundPropWithCustomAlias }} | ||
</div> |
3 changes: 2 additions & 1 deletion
3
tests/Fixtures/templates/render_component_with_url_bound_props.html.twig
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
{{ component('component_with_url_bound_props', { | ||
prop8InUrl: true | ||
maybeBoundPropInUrl: true, | ||
customAlias: 'customAlias', | ||
}) }} |
Oops, something went wrong.