[LiveComponent] add LiveProp name to modifier function #2652

jannes-io · 2025-03-23T19:28:55Z

Q	A
Bug fix?	no
New feature?	yes
Docs?	yes
Issues	Fix #2650
License	MIT

Implements proposal 2 from the examples in the RFC.

Personally I would just pass the entire liveprop metadata object to this function instead of only the name, but it's marked internal so I'm not sure if we should be exposing it to users like that.

smnandre · 2025-03-30T06:05:17Z

src/LiveComponent/doc/index.rst

@@ -2617,7 +2617,9 @@ definition::

 Then the ``query`` value will appear in the URL like ``https://my.domain/search?q=my+query+string``.

-If you need to change the parameter name on a specific page, you can leverage the :ref:`modifier <modifier>` option::
+If you need to change the parameter name on a specific page, you can leverage the :ref:`modifier <modifier>` option


A couple of remarks here (unrelated to wether we will move forward with this PR or not :) )

First of all: thank you for thinking immediately "documentation". That's a very nice habit to have.

Now for the changes here: I think we should not change the existing documentation, but instead we may add a dedicated paragraph after this part.

The current version does it jobs, covers the feature and how most developers use it, while keeping things small / easy to understand.

Moreover, using a prefix instead of an alias here would offer less possibilities than before, so we should probably not describe this solution in first examples, but only when a prefix could be justified (many identical components in the same page ? still not sure to be honest)

So here I think a dedicated paragraph after this one, for more advanced use case, could be more appropriate.

smnandre · 2025-03-30T06:12:19Z

src/LiveComponent/src/Metadata/LivePropMetadata.php

@@ -135,7 +135,7 @@ public function withModifier(object $component): self
            throw new \LogicException(\sprintf('Method "%s::%s()" given in LiveProp "modifier" does not exist.', $component::class, $modifier));
        }

-        $modifiedLiveProp = $component->{$modifier}($this->liveProp);
+        $modifiedLiveProp = $component->{$modifier}($this->liveProp, $this->getName());


For a change like this, a test would be needed. Especially for things related to query, URL, etc.

(The fact tests do pass after your changes does not proves it does work (nor that our current suite of test is good enough, to be fair))

Added to the existing test, I don't see the need to make a separate test for just this param unless there are some edge cases that aren't entirely obvious to me at this time.

Let's test a page with two instances of same component, different prefix used in the modifier ... and check that the correct one as the good value and not the other :)

weaverryan · 2025-04-01T23:45:51Z

I personally don't have a big issue with removing the internal. Very thoughtful to realize that issue :).

Alternatively, if there is something you need on the metadata, we could add it to LiveProp

smnandre · 2025-04-02T11:48:25Z

I don't see a problem to pass the second argument 👍
(we should precise in docs this information may not be the original name of the prop in the class)

Passing the metadata is not something I'd love to do, without an absolute need to do so.
Anything we expose cannot then be changed afterwards.. And it did bring us in situations were we're a bit "stuck" to move forward / improve features.

jannes-io · 2025-04-06T13:05:47Z

I don't see a problem to pass the second argument 👍 (we should precise in docs this information may not be the original name of the prop in the class)

Okidoki, I can do the requested changes to the docs and add some tests to finish off this PR. Could you give me a case where the property name could be different from the name in the metadata? Or where I could find code that could create this side-effect so I can try to reproduce? Just want to understand what the implications might be there.

Passing the metadata is not something I'd love to do, without an absolute need to do so. Anything we expose cannot then be changed afterwards.. And it did bring us in situations were we're a bit "stuck" to move forward / improve features.

Agreed 😄

jannes-io · 2025-04-06T13:57:31Z

src/LiveComponent/doc/index.rst

+.. versionadded:: 2.25
+
+   The property name is passed into the modifier function since LiveComponents 2.25.


This'd have to be updated to the actual release version, I just took the next one.

jannes-io · 2025-05-03T11:24:32Z

@smnandre , @weaverryan Is there anything I can do to move this along?

smnandre · 2025-05-04T04:47:16Z

src/LiveComponent/doc/index.rst

+    abstract class AbstractSearchModule
+    {
+        #[LiveProp(writable: true, url: true, modifier: 'modifyQueryProp')]
+        public string $query = '';
+
+        protected string $urlPrefix = '';
+
+        public function modifyQueryProp(LiveProp $liveProp, string $propName): LiveProp
+        {
+            if ($this->urlPrefix) {
+                return $liveProp->withUrl(new UrlMapping(as: $this->urlPrefix.'-'.$propName));
+            }
+            return $liveProp;
+        }
+    }
+
+    #[AsLiveComponent]
+    class ImportantSearchModule extends AbstractSearchModule
+    {
+    }
+
+    #[AsLiveComponent]
+    class SecondarySearchModule extends AbstractSearchModule
+    {
+        protected string $urlPrefix = 'secondary';
+    }


I'm wondering.. could we find use an example more focused on the feature than the PHP code structure abstract/extends here ?

I was thinking something like "imagine you have a CMS theme editor with a split view allowing you to adjust your design both in light and dark mode. ...

You could use a ColorTheme LiveComponent for both, but then [describe problem]

<twig:ColorSettings prefix="dark" color="..." /> <twig:ColorSettings prefix="light" color="..." />

Thanks to the second parameter of YYY, you can dynamically prefix [...].

#[LiveProp] public string $theme; #[LiveProp(url: true, modifier: 'prefixParam')] public string $color; public function prefixParam($liveProp, string $propName): LiveProp { return $liveProp->withUrl( // Light Theme will use ?light-color new UrlMapping(as: $this->prefix.'-'.$propName) ); }

Now your query parameters will be: XXX ZZZ

It even works with the as: property ..

// query param will be ZZZ #[LiveProp(url: true, as: 'bg' modifier: 'prefixParam')] public string $background;

wdyt ?

smnandre · 2025-05-16T15:58:11Z

LGTM, and we will improve the docs afterwards

(changelog must be updated, though)

jannes-io · 2025-05-16T16:25:25Z

(changelog must be updated, though)

Done.

As for the other remarks, apologies for not getting back to you on that.

For the test, I didn't find an existing test where actual LiveComponents are rendered on a page. I'm afraid I'm a little out of my depth to be the first to produce such a test. If there is such a test that can be easily copied and modified to test the new parameter, and I just missed it, I can take a look.
For the docs, it feels to me like the feature is adequately technically documented, we don't look at docs to read a story, we're there for information on how to use features so we can use them in our own stories. If someone wants to rewrite it with a better example, that's fair 😆

Thanks for your assistance.

The following features were moved in the changelog as they are not present in the 2.23 release, but will be included in the 2.24 release - `id` to `Marker`, `Polygon` and `Polyline` constructors - `Map::removeMarker(string|Marker $markerOrId)` - `Map::removePolygon(string|Polygon $polygonOrId)` - `Map::removePolyline(string|Polyline $polylineOrId)`

i missed that i need the http-client installed, the bundle silently reduces functionality without it. make it more clear what needs to be installed

…-notifier Co-authored-by: Simon André <smn.andre@gmail.com>

…stream_listen`

The check failed here because file changed .. but with no content change.

…ed in Symfony 7.1 and we want to support at least Symfony 6.4

…t to use, remove ux_toolkit.kit parameter, remove DependencyInjection configuration

Fix symfony#2539

…umentation tabs rendering into ToolkitService

…splay scrollbars

… to render the highlighted code inside a Terminal component

…ding PHP package

… given Kit

…es (from their documentation), with a snapshot system

…og (will be re-added later 😇)

…ra on PHP < 8.2, since it now supports PHP 8.1

…s, fix doc format)

Fix symfony#2710 cf twigphp/Twig#4583

jannes-io · 2025-05-16T16:42:46Z

What in tarnation happened here... Fabbot told me not to merge, so I rebased, and now all this crap is in here..

CBA to fiddle with git, remade it here: #2744

…econd parameter of the `modifier` callback (jannes-io) This PR was merged into the 2.x branch. Discussion ---------- [LiveComponent] `LiveProp`: Pass the property name as second parameter of the `modifier` callback supersedes #2652 Commits ------- 8fb5245 [LiveComponent] Add property name to modifier function

carsonbot added Feature New Feature LiveComponent Status: Needs Review Needs to be reviewed labels Mar 23, 2025

jannes-io force-pushed the modifier-prop-name branch 2 times, most recently from 631af7c to 0a949c8 Compare March 23, 2025 19:40

smnandre reviewed Mar 30, 2025

View reviewed changes

jannes-io force-pushed the modifier-prop-name branch from 0a949c8 to d3c8127 Compare April 6, 2025 13:56

jannes-io commented Apr 6, 2025

View reviewed changes

jannes-io requested a review from smnandre April 6, 2025 13:57

smnandre reviewed May 4, 2025

View reviewed changes

[LiveComponent] add LiveProp name to modifier function

09b1d86

jannes-io force-pushed the modifier-prop-name branch from d3c8127 to 09b1d86 Compare May 16, 2025 16:18

seb-jean and others added 11 commits May 16, 2025 18:31

Add Twig Extensions for page refreshes

208952b

[Map] Make renderer tests way easier to maintain, use snapshots

2197b93

improve setup instructions

67eb6b5

i missed that i need the http-client installed, the bundle silently reduces functionality without it. make it more clear what needs to be installed

[Notify] Added body, icon, tag ,renotify to controller.js for mercure…

cb989bb

…-notifier Co-authored-by: Simon André <smn.andre@gmail.com>

[Icons] Add xmlns attribute to svg icons

1fc98e5

[Turbo] Add support for authentication to the EventSource via `turbo_…

adf15e7

…stream_listen`

Update versions to 2.24.0

cb6054e

remove banner

a25cca5

[CI] Fix version bump for npm packages

bda797f

[CI] Use git diff instead of git status

9af4c3e

The check failed here because file changed .. but with no content change.

Kocal and others added 22 commits May 16, 2025 18:32

[Toolkit] Do not use FileSystem::readFile(), as it has been implement…

d648b2c

…ed in Symfony 7.1 and we want to support at least Symfony 6.4

[Toolkit] Improve InstallComponentCommand by asking/guessing which Ki…

134e1eb

…t to use, remove ux_toolkit.kit parameter, remove DependencyInjection configuration

[StimulusBundle] Make the JS package private (for real)

2368fef

[ToolKit] Add missing Interface suffixes

98dec2a

Fix symfony#2539

[Toolkit] Fix deprecation Kernel > 7.3

a0f5379

[Toolkit] Remove redundant code in Shadcn kit components

c9e0f4f

[Site] Rename CodePreview_Tabs to Toolkit_Tabs, extract Toolkit's doc…

726305e

…umentation tabs rendering into ToolkitService

[Site] Add manual installation steps for Toolkit kits's components

c987f60

[Site] Fix Terminal component styles, ensure it does not grow, and di…

d2086da

…splay scrollbars

[Site] Refactor and use the CodeBlockRenderer::highlightCode() method…

ae4d71d

… to render the highlighted code inside a Terminal component

[Docs] Add step to disable package.json synchronization while upgra…

26c44dc

…ding PHP package

[Toolkit] Introduce KitContextRunner, to run code in the context of a…

8cb5384

… given Kit

[Toolkit] Add functional tests to render all Kit components usage cod…

ae50fa4

…es (from their documentation), with a snapshot system

[Toolkit] Remove documentation about non-existant component AlertDial…

d080144

…og (will be re-added later 😇)

[Toolkit] Pin symfony/phpunit-bridge to ^7.2 and phpunit to ^9.6.22

c4dcce6

[Toolkit] Remove checks layers for tales-from-a-dev/twig-tailwind-ext…

087f09c

…ra on PHP < 8.2, since it now supports PHP 8.1

[Toolkit] Minor adjustements on Kit creation command (reword question…

1282995

…s, fix doc format)

[Toolkit] Remove Kit "authors"

05726a6

[Toolkit] Improve descriptions of Shadcn components

7591e98

fix: allow LiveComponentHydrator::hydrateValue() to hydrate null values

fc9d51e

[Toolkit] Update snapshots & fix tests, following symfony#2728

c88678c

[TwigComponent] Fix loadTemplate deprecation for Twig >= 3.21

ad75701

Fix symfony#2710 cf twigphp/Twig#4583

jannes-io force-pushed the modifier-prop-name branch from f761127 to ad75701 Compare May 16, 2025 16:33

jannes-io requested a review from Kocal as a code owner May 16, 2025 16:33

jannes-io changed the base branch from 2.x to 1.x May 16, 2025 16:33

jannes-io changed the base branch from 1.x to 2.x May 16, 2025 16:33

jannes-io mentioned this pull request May 16, 2025

[LiveComponent] LiveProp: Pass the property name as second parameter of the modifier callback #2744

Merged

jannes-io closed this May 16, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[LiveComponent] add LiveProp name to modifier function #2652

[LiveComponent] add LiveProp name to modifier function #2652

Uh oh!

jannes-io commented Mar 23, 2025 •

edited

Loading

Uh oh!

smnandre Mar 30, 2025

Uh oh!

smnandre Mar 30, 2025

Uh oh!

jannes-io Apr 6, 2025

Uh oh!

smnandre May 4, 2025

Uh oh!

weaverryan commented Apr 1, 2025 •

edited

Loading

Uh oh!

smnandre commented Apr 2, 2025

Uh oh!

jannes-io commented Apr 6, 2025 •

edited

Loading

Uh oh!

jannes-io Apr 6, 2025 •

edited

Loading

Uh oh!

jannes-io commented May 3, 2025

Uh oh!

smnandre May 4, 2025

Uh oh!

smnandre commented May 16, 2025

Uh oh!

jannes-io commented May 16, 2025

Uh oh!

jannes-io commented May 16, 2025

Uh oh!

Uh oh!

		.. versionadded:: 2.25

		The property name is passed into the modifier function since LiveComponents 2.25.

Uh oh!

[LiveComponent] add LiveProp name to modifier function #2652

[LiveComponent] add LiveProp name to modifier function #2652

Uh oh!

Conversation

jannes-io commented Mar 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

smnandre Mar 30, 2025

Choose a reason for hiding this comment

Uh oh!

smnandre Mar 30, 2025

Choose a reason for hiding this comment

Uh oh!

jannes-io Apr 6, 2025

Choose a reason for hiding this comment

Uh oh!

smnandre May 4, 2025

Choose a reason for hiding this comment

Uh oh!

weaverryan commented Apr 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

smnandre commented Apr 2, 2025

Uh oh!

jannes-io commented Apr 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jannes-io Apr 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jannes-io commented May 3, 2025

Uh oh!

smnandre May 4, 2025

Choose a reason for hiding this comment

Uh oh!

smnandre commented May 16, 2025

Uh oh!

jannes-io commented May 16, 2025

Uh oh!

jannes-io commented May 16, 2025

Uh oh!

Uh oh!

jannes-io commented Mar 23, 2025 •

edited

Loading

weaverryan commented Apr 1, 2025 •

edited

Loading

jannes-io commented Apr 6, 2025 •

edited

Loading

jannes-io Apr 6, 2025 •

edited

Loading