feature #2673 [LiveComponent] Add the possibility to map LiveProp as a path parameter (mbuliard)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[LiveComponent] Add the possibility to map LiveProp as a path parameter

| 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 :
```php
#[LiveProp(writable: true, url: new UrlMapping(mapPath: true))]
public int $id;
```
### WORKFLOW

1. When sending a request to the backend, the frontend add a new header `X-Live-Url` containing the current path and query parameters.
2. 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`.
3. 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 :-)

Commits
-------

bc5f27d [LiveComponent] Add the possibility to map LiveProp as a path parameter

Author: Kocal

src/LiveComponent/CHANGELOG.md

@@ -6,6 +6,9 @@
     - `min_length` and `max_length`: validate length from textual input elements
     - `min_value` and `max_value`: validate value from numeral input elements
 
+-   Add new `mapPath` options (default `false`) to `UrlMapping` of a `LiveProp`
+    to allow the prop to be mapped to the path instead of the query in the url.
+
 ```twig
 <!-- Do not trigger model update until 3 characters are typed -->
 <input data-model="min_length(3)|username" type="text" value="" />

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

@@ -1,6 +1,8 @@
 export default class {
     response: Response;
     private body;
+    private liveUrl;
     constructor(response: Response);
     getBody(): Promise<string>;
+    getLiveUrl(): string | null;
 }

src/LiveComponent/assets/dist/Component/plugins/QueryStringPlugin.d.ts

@@ -49,10 +49,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
             type: StringConstructor;
             default: string;
         };
-        queryMapping: {
-            type: ObjectConstructor;
-            default: {};
-        };
     };
     readonly nameValue: string;
     readonly urlValue: string;
@@ -76,11 +72,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     readonly debounceValue: number;
     readonly fingerprintValue: string;
     readonly requestMethodValue: 'get' | 'post';
-    readonly queryMappingValue: {
-        [p: string]: {
-            name: string;
-        };
-    };
     private proxiedComponent;
     private mutationObserver;
     component: Component;

src/LiveComponent/assets/dist/live_controller.d.ts

@@ -33,6 +33,7 @@ class RequestBuilder {
         fetchOptions.headers = {
             Accept: 'application/vnd.live-component+html',
             'X-Requested-With': 'XMLHttpRequest',
+            'X-Live-Url': window.location.pathname + window.location.search,
         };
         const totalFiles = Object.entries(files).reduce((total, current) => total + current.length, 0);
         const hasFingerprints = Object.keys(children).length > 0;
@@ -111,6 +112,12 @@ class BackendResponse {
         }
         return this.body;
     }
+    getLiveUrl() {
+        if (undefined === this.liveUrl) {
+            this.liveUrl = this.response.headers.get('X-Live-Url');
+        }
+        return this.liveUrl;
+    }
 }
 
 function getElementAsTagText(element) {
@@ -2146,6 +2153,10 @@ class Component {
                 return response;
             }
             this.processRerender(html, backendResponse);
+            const liveUrl = backendResponse.getLiveUrl();
+            if (liveUrl) {
+                history.replaceState(history.state, '', new URL(liveUrl + window.location.hash, window.location.origin));
+            }
             this.backendRequest = null;
             thisPromiseResolve(backendResponse);
             if (this.isRequestPending) {
@@ -2770,129 +2781,6 @@ class PollingPlugin {
     }
 }
 
-function isValueEmpty(value) {
-    if (null === value || value === '' || undefined === value || (Array.isArray(value) && value.length === 0)) {
-        return true;
-    }
-    if (typeof value !== 'object') {
-        return false;
-    }
-    for (const key of Object.keys(value)) {
-        if (!isValueEmpty(value[key])) {
-            return false;
-        }
-    }
-    return true;
-}
-function toQueryString(data) {
-    const buildQueryStringEntries = (data, entries = {}, baseKey = '') => {
-        Object.entries(data).forEach(([iKey, iValue]) => {
-            const key = baseKey === '' ? iKey : `${baseKey}[${iKey}]`;
-            if ('' === baseKey && isValueEmpty(iValue)) {
-                entries[key] = '';
-            }
-            else if (null !== iValue) {
-                if (typeof iValue === 'object') {
-                    entries = { ...entries, ...buildQueryStringEntries(iValue, entries, key) };
-                }
-                else {
-                    entries[key] = encodeURIComponent(iValue)
-                        .replace(/%20/g, '+')
-                        .replace(/%2C/g, ',');
-                }
-            }
-        });
-        return entries;
-    };
-    const entries = buildQueryStringEntries(data);
-    return Object.entries(entries)
-        .map(([key, value]) => `${key}=${value}`)
-        .join('&');
-}
-function fromQueryString(search) {
-    search = search.replace('?', '');
-    if (search === '')
-        return {};
-    const insertDotNotatedValueIntoData = (key, value, data) => {
-        const [first, second, ...rest] = key.split('.');
-        if (!second) {
-            data[key] = value;
-            return value;
-        }
-        if (data[first] === undefined) {
-            data[first] = Number.isNaN(Number.parseInt(second)) ? {} : [];
-        }
-        insertDotNotatedValueIntoData([second, ...rest].join('.'), value, data[first]);
-    };
-    const entries = search.split('&').map((i) => i.split('='));
-    const data = {};
-    entries.forEach(([key, value]) => {
-        value = decodeURIComponent(String(value || '').replace(/\+/g, '%20'));
-        if (!key.includes('[')) {
-            data[key] = value;
-        }
-        else {
-            if ('' === value)
-                return;
-            const dotNotatedKey = key.replace(/\[/g, '.').replace(/]/g, '');
-            insertDotNotatedValueIntoData(dotNotatedKey, value, data);
-        }
-    });
-    return data;
-}
-class UrlUtils extends URL {
-    has(key) {
-        const data = this.getData();
-        return Object.keys(data).includes(key);
-    }
-    set(key, value) {
-        const data = this.getData();
-        data[key] = value;
-        this.setData(data);
-    }
-    get(key) {
-        return this.getData()[key];
-    }
-    remove(key) {
-        const data = this.getData();
-        delete data[key];
-        this.setData(data);
-    }
-    getData() {
-        if (!this.search) {
-            return {};
-        }
-        return fromQueryString(this.search);
-    }
-    setData(data) {
-        this.search = toQueryString(data);
-    }
-}
-class HistoryStrategy {
-    static replace(url) {
-        history.replaceState(history.state, '', url);
-    }
-}
-
-class QueryStringPlugin {
-    constructor(mapping) {
-        this.mapping = mapping;
-    }
-    attachToComponent(component) {
-        component.on('render:finished', (component) => {
-            const urlUtils = new UrlUtils(window.location.href);
-            const currentUrl = urlUtils.toString();
-            Object.entries(this.mapping).forEach(([prop, mapping]) => {
-                const value = component.valueStore.get(prop);
-                urlUtils.set(mapping.name, value);
-            });
-            if (currentUrl !== urlUtils.toString()) {
-                HistoryStrategy.replace(urlUtils);
-            }
-        });
-    }
-}
-
 class SetValueOntoModelFieldsPlugin {
     attachToComponent(component) {
         this.synchronizeValueOfModelFields(component);
@@ -3102,7 +2990,6 @@ class LiveControllerDefault extends Controller {
             new PageUnloadingPlugin(),
             new PollingPlugin(),
             new SetValueOntoModelFieldsPlugin(),
-            new QueryStringPlugin(this.queryMappingValue),
             new ChildComponentPlugin(this.component),
         ];
         plugins.forEach((plugin) => {
@@ -3233,7 +3120,6 @@ LiveControllerDefault.values = {
     debounce: { type: Number, default: 150 },
     fingerprint: { type: String, default: '' },
     requestMethod: { type: String, default: 'post' },
-    queryMapping: { type: Object, default: {} },
 };
 LiveControllerDefault.backendFactory = (controller) => new Backend(controller.urlValue, controller.requestMethodValue);
 

src/LiveComponent/assets/dist/live_controller.js

@@ -1,6 +1,7 @@
 export default class {
     response: Response;
     private body: string;
+    private liveUrl: string | null;
 
     constructor(response: Response) {
         this.response = response;
@@ -13,4 +14,12 @@ export default class {
 
         return this.body;
     }
+
+    getLiveUrl(): string | null {
+        if (undefined === this.liveUrl) {
+            this.liveUrl = this.response.headers.get('X-Live-Url');
+        }
+
+        return this.liveUrl;
+    }
 }

src/LiveComponent/assets/dist/url_utils.d.ts

@@ -26,6 +26,7 @@ export default class {
         fetchOptions.headers = {
             Accept: 'application/vnd.live-component+html',
             'X-Requested-With': 'XMLHttpRequest',
+            'X-Live-Url': window.location.pathname + window.location.search,
         };
 
         const totalFiles = Object.entries(files).reduce((total, current) => total + current.length, 0);

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

@@ -328,6 +328,14 @@ export default class Component {
             }
 
             this.processRerender(html, backendResponse);
+            const liveUrl = backendResponse.getLiveUrl();
+            if (liveUrl) {
+                history.replaceState(
+                    history.state,
+                    '',
+                    new URL(liveUrl + window.location.hash, window.location.origin)
+                );
+            }
 
             // finally resolve this promise
             this.backendRequest = null;