LiveProp in URL path #2673

mbuliard · 2025-04-01T18:28:59Z

Q	A
Bug fix?	no
New feature?	yes
Docs?	yes
Issues	No
License	MIT

The purpose of this MR is to give the responsability of changing the URL to the backend, allowing to use Symfony Router and to have LiveProps in the path, not only in query parameters :
http://example.com/content?id=123 vs
http://example.com/content/123

To set the LiveProp in the path, a new option, mapPath has been added to the UrlMapping option of the LiveProp :

#[LiveProp(writable: true, url: new UrlMapping(mapPath: true))]
public int $id;

WORKFLOW

When sending a request to the backend, the frontend add a new header X-Live-Url containing the current path and query parameters.
On KernelResponse event, the new path and query string is calculated from the header received and the new props and put in the response header X-Live-Url.
When the frontend receives the response, the current path and query are placed by those received, via history.replaceState.

BACKEND CHANGES

New UrlFactory service to generate URL from the previous one, the path-mapped props and the query-mapped props. The url is first generated by the Symfony Router, using the previous one and the path-mapped props. Then the query-mapped props and the previous query parameters are added.
QueryStringPropsExtractor is renamed to RequestPropsExtractor and now extract props from the request attributes and query parameters.
UrlMapping now has a new option mapPath, boolean, false by default.
LiveComponentMetadata has new method getAllUrlMappings returning urlMappings of all LiveProps.
QueryStringInitializeSubscriber is renamed to RequestInitializeSubscriber
new LiveUrlSubscriber, listening to KernelResponse, and setting the X-Live-Url of the response with the new URL, generated by the UrlFactory. To generate it, the previous location is extracted from the request and the props are extracted from metadata, hydrated with the values of _live_request_data and sorted between path-mapped and query-mapped.
LiveComponentSubscriber now add responseProps data to the _live_request_data attribute, containing the mounted component data when the action is not the default one. This change is made to take server-side changes into account.
LiveComponentMetadata has new method getAllUrlMappings returning urlMappings of all LiveProps.

FRONTEND CHANGES

Backend/RequestBuilder now add the current pathname and search as X-Live-Url header in the request.
Backend/BackendResponse has new property liveUrl, populated from the HTTP response X-Live-Url header.
Component/index.ts : performRequest now check for X-Live-Url header in response and, when found, do history.replace with the new url and the current hash and origin.
url_utils is removed.
Component/plugins/QueryStringPlugin is removed.

TODO

Review :-)

github-actions · 2025-04-01T18:30:02Z

📊 Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
Please review the changes and make sure they are expected.

File	Before (Size / Gzip)	After (Size / Gzip)
LiveComponent
`Backend/BackendResponse.d.ts`	`136 B` / `139 B`	`190 B`^{+40% 📈} / `163 B`^{+17% 📈}
`Component/plugins/QueryStringPlugin.d.ts`	`356 B` / `239 B`	Removed
`live_controller.d.ts`	`3.3 kB` / `924 B`	`3.1 kB`^{-6% 📉} / `893 B`^{-3% 📉}
`live_controller.js`	`120.02 kB` / `23.44 kB`	`116.66 kB`^{-3% 📉} / `22.61 kB`^{-4% 📉}
`url_utils.d.ts`	`306 B` / `205 B`	Removed

smnandre · 2025-04-04T13:40:53Z

(Had a quick chat with @mbuliard yesterday — he's making a few adjustments before opening the PR. Stay tuned! 😄 )

src/LiveComponent/assets/src/Component/index.ts

smnandre · 2025-05-04T02:59:09Z

Do you want/need any help here @mbuliard ?

mbuliard · 2025-05-12T16:49:18Z

Do you want/need any help here @mbuliard ?

Thanks ! I needed free time, but the PR is almost done. Related tests are green, but I shall now add my own testing of the backend.

What took me some time was to the handling of custom actions, who may (and often do) update component props. I choose to store the updated component props in _live_request_data.responseProps, next to props and updated values.
I'm thinking to always populate these responseProps, even for default action and then simplifying my LiveUrlSubscriber.

smnandre · 2025-07-10T17:08:53Z

What do you think here @Kocal @kbond ? :)

src/LiveComponent/CHANGELOG.md

src/LiveComponent/assets/src/Backend/BackendResponse.ts

src/LiveComponent/doc/index.rst

src/LiveComponent/src/EventListener/LiveComponentSubscriber.php

src/LiveComponent/src/Util/UrlFactory.php

src/LiveComponent/tests/Unit/Util/UrlFactoryTest.php

src/LiveComponent/tests/Unit/EventListener/LiveUrlSubscriberTest.php

Kocal · 2025-07-10T20:33:25Z

Thanks for working on it! Just few nitpicking, the PR seems pretty mature right now

… props also from path. RequestInitializeSubscriber also renamed

…criber

mbuliard · 2025-07-11T13:19:43Z

Thanks for working on it! Just few nitpicking, the PR seems pretty mature right now

Thanks for your review ! I made the changes you suggested.

src/LiveComponent/doc/index.rst

Kocal · 2025-07-13T08:03:13Z

src/LiveComponent/doc/index.rst

+    // ...
+
+    #[Route('/node/{id}', name: 'node')]
+    public function node(NodeModule $nodeModule): Response


Wait, you can (or must) inject the LiveComponent instance as a route parameter? 🤔
It seems weird to me

I don't think you need to but indeed this looks weird (and I think led to my confusion on this feature initially).

What about /search/{mode}/{query}? This way we can build upon the existing example in the docs.

@Kocal @kbond I can't remember nor figure out why I wrote this in the doc... Of course not, the LiveComponent should not be there, only the $id or the fetched $node.
I will rewrite this, following @kbond suggestion to follow the /search examples

src/LiveComponent/src/EventListener/LiveUrlSubscriber.php

Kocal · 2025-07-13T08:05:03Z

src/LiveComponent/src/EventListener/LiveUrlSubscriber.php

+        $newUrl = null;
+        if ($previousLocation = $request->headers->get(self::URL_HEADER)) {
+            $liveProps = $this->getLivePropsToMap($request);
+            $newUrl = $this->urlFactory->createFromPreviousAndProps($previousLocation, $liveProps['path'], $liveProps['query']);
+        }
+
+        if ($newUrl) {
+            $event->getResponse()->headers->set(self::URL_HEADER, $newUrl);
+        }


Suggested change

$newUrl = null;

if ($previousLocation = $request->headers->get(self::URL_HEADER)) {

$liveProps = $this->getLivePropsToMap($request);

$newUrl = $this->urlFactory->createFromPreviousAndProps($previousLocation, $liveProps['path'], $liveProps['query']);

}

if ($newUrl) {

$event->getResponse()->headers->set(self::URL_HEADER, $newUrl);

}

if ($previousLiveUrl = $request->headers->get(self::URL_HEADER)) {

$liveProps = $this->getLivePropsToMap($request);

$newLiveUrl = $this->urlFactory->createFromPreviousAndProps($previousLiveUrl, $liveProps['path'], $liveProps['query']);

$event->getResponse()->headers->set(self::URL_HEADER, $newUrl);

}

I kept two separated if to not set the header if the $newLiveUrl is null.
It can happen if :

the previous url cannot be parsed

the previous url does not match any known route

some mandatory parameter is missing to generate the url of the route

But maybe it would be better to throw exceptions ?
I was worried to break anything doing so

src/LiveComponent/src/EventListener/LiveUrlSubscriber.php

carsonbot added Feature New Feature Status: Needs Work Additional work is needed labels Apr 1, 2025

mbuliard marked this pull request as draft April 1, 2025 19:23

mbuliard force-pushed the live-url branch from 999e17f to 7bf195c Compare April 1, 2025 19:26

mbuliard force-pushed the live-url branch 6 times, most recently from 93c0a12 to d848b54 Compare April 10, 2025 11:34

smnandre reviewed Apr 10, 2025

View reviewed changes

src/LiveComponent/assets/src/Component/index.ts Outdated Show resolved Hide resolved

mbuliard force-pushed the live-url branch 7 times, most recently from ceabe03 to 04dc91a Compare May 12, 2025 16:34

mbuliard force-pushed the live-url branch 8 times, most recently from 9393039 to df97b2f Compare May 22, 2025 15:46

Kocal reviewed Jul 10, 2025

View reviewed changes

mbuliard added 14 commits July 11, 2025 12:32

[WIP] LiveUrl

1c25773

LiveUrlSubscriber should handle only path and query

5961401

Remove unused QueryStringPlugin

4acfcac

UrlMapping.mapPath

19428f6

QueryStringPropsExtractor, renamed to RequestPropsExtractor shall get…

57b7746

… props also from path. RequestInitializeSubscriber also renamed

UrlFactory

242736b

remove UrlUtils

b0a5cf1

add server-side changed props in request to be handled by LiveUrlSubs…

1e581d8

…criber

LiveUrlSubscriberTest

098bef7

fix query-binding tests

1a7e543

LiveComponentMetadata.getAllUrlMappings()

c055db4

Update and extends functional tests

269acb6

CHANGELOG

67bdeff

doc

a8b58d2

mbuliard force-pushed the live-url branch from 8ffadcb to a8b58d2 Compare July 11, 2025 10:36

mbuliard added 2 commits July 11, 2025 12:40

rebuild after rebase

9a5b9cf

returns

b838ecc

mbuliard force-pushed the live-url branch from 465cc7e to b838ecc Compare July 11, 2025 13:09

Kocal reviewed Jul 13, 2025

View reviewed changes

Kocal added Status: Needs Work Additional work is needed and removed Status: Needs Review Needs to be reviewed labels Jul 14, 2025

rewrite doc

c2adbd0

carsonbot added Status: Needs Review Needs to be reviewed and removed Status: Needs Work Additional work is needed labels Jul 16, 2025

returns

d8d2e65

mbuliard force-pushed the live-url branch from 4cf48b4 to d8d2e65 Compare July 16, 2025 11:47

Uh oh!

LiveProp in URL path #2673

Are you sure you want to change the base?

LiveProp in URL path #2673

Conversation

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

Uh oh!

WORKFLOW

BACKEND CHANGES

FRONTEND CHANGES

TODO

Uh oh!

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

Uh oh!

📊 Packages dist files size difference

Uh oh!

smnandre commented Apr 4, 2025

Uh oh!

Uh oh!

smnandre commented May 4, 2025

Uh oh!

mbuliard commented May 12, 2025

Uh oh!

smnandre commented Jul 10, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Kocal commented Jul 10, 2025

Uh oh!

mbuliard commented Jul 11, 2025

Uh oh!

Uh oh!

Uh oh!

Kocal Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

kbond Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

mbuliard Jul 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Kocal Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

mbuliard Jul 16, 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!

Uh oh!

Uh oh!

Uh oh!

mbuliard commented Apr 1, 2025 •

edited

Loading

github-actions bot commented Apr 1, 2025 •

edited

Loading

mbuliard Jul 16, 2025 •

edited

Loading