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.

mbuliard · 2025-06-11T16:19:34Z

@mbuliard, sorry, I misunderstood the feature. It took me a bit to realize the docs showed the route/controller that renders the component initially.

My example was not clear enough, I added a line to clarify that it was a controller.

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.

Kocal · 2025-07-13T08:01:42Z

src/LiveComponent/doc/index.rst

+    }
+
+
+If the symfony route is defined like this::


Suggested change

If the symfony route is defined like this::

If the current route is defined like this::

Kocal · 2025-07-13T08:01:57Z

src/LiveComponent/doc/index.rst

+    The ``mapPath`` option was added in LiveComponents 2.28.
+
+Instead of setting the ``LiveProp`` as a query parameter, you can set it as route parameter.
+definition::


What do we do with definition::?

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

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

src/LiveComponent/src/EventListener/LiveUrlSubscriber.php

+        if (!$event->isMainRequest()) {
+            return;
+        }
+        $request = $event->getRequest();
+        if (!$request->attributes->has('_live_component')) {
+            return;
+        }


Suggested change

if (!$event->isMainRequest()) {

return;

}

$request = $event->getRequest();

if (!$request->attributes->has('_live_component')) {

return;

}

if (!$event->isMainRequest()) {

return;

}

$request = $event->getRequest();

if (!$request->attributes->has('_live_component')) {

return;

}

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);

}

Kocal · 2025-07-13T08:06:08Z

src/LiveComponent/src/EventListener/LiveUrlSubscriber.php

+        ];
+    }
+
+    private function getLivePropsToMap(Request $request): array


Suggested change

private function getLivePropsToMap(Request $request): array

private function getLivePropsFromRequest(Request $request): array

or

Suggested change

private function getLivePropsToMap(Request $request): array

private function extractLivePropsFromRequest(Request $request): array

Kocal · 2025-07-13T08:06:38Z

src/LiveComponent/src/EventListener/LiveUrlSubscriber.php

+        ];
+    }
+
+    private function getLivePropsToMap(Request $request): array


Please add PHPDoc to document the return type

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

mbuliard force-pushed the live-url branch 3 times, most recently from 9df1066 to 8ffadcb Compare June 11, 2025 16:15

smnandre added the LiveComponent label Jul 10, 2025

smnandre requested review from kbond and Kocal July 10, 2025 17:08

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

	If the symfony route is defined like this::
	If the current route is defined like this::

	private function getLivePropsToMap(Request $request): array
	private function getLivePropsFromRequest(Request $request): array

	private function getLivePropsToMap(Request $request): array
	private function extractLivePropsFromRequest(Request $request): array

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!

mbuliard commented Jun 11, 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!

Kocal Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

Kocal Jul 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mbuliard commented Apr 1, 2025 •

edited

Loading

github-actions bot commented Apr 1, 2025 •

edited

Loading