Skip to content

Commit e25e877

Browse files
squrioussqurious
committed
[LiveComponent] Allow binding LiveProp to URL query parameter
1 parent 262db2b commit e25e877

25 files changed

+727
-12
lines changed

‎src/LiveComponent/CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
## 2.13.0
44

5+
- Add support for URL binding in `LiveProp`
56
- Add deferred rendering of Live Components
67

78
## 2.12.0

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Component from '../index';
2+
import { PluginInterface } from './PluginInterface';
3+
export default class implements PluginInterface {
4+
private element;
5+
private mapping;
6+
attachToComponent(component: Component): void;
7+
private registerBindings;
8+
private updateUrl;
9+
}

‎src/LiveComponent/assets/dist/Component/plugins/QueryStringPluging.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Component from '../index';
2+
import { PluginInterface } from './PluginInterface';
3+
export default class implements PluginInterface {
4+
private element;
5+
private mapping;
6+
attachToComponent(component: Component): void;
7+
private registerBindings;
8+
private updateUrl;
9+
}

‎src/LiveComponent/assets/dist/live_controller.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2696,6 +2696,92 @@ class ComponentRegistry {
26962696
}
26972697
}
26982698

2699+
class AdvancedURLSearchParams extends URLSearchParams {
2700+
set(name, value) {
2701+
if (typeof value !== 'object') {
2702+
super.set(name, value);
2703+
}
2704+
else {
2705+
this.delete(name);
2706+
if (Array.isArray(value)) {
2707+
value.forEach((v) => {
2708+
this.append(`${name}[]`, v);
2709+
});
2710+
}
2711+
else {
2712+
Object.entries(value).forEach(([index, v]) => {
2713+
this.append(`${name}[${index}]`, v);
2714+
});
2715+
}
2716+
}
2717+
}
2718+
delete(name) {
2719+
super.delete(name);
2720+
const pattern = new RegExp(`^${name}(\\[.*\\])?$`);
2721+
for (const key of this.keys()) {
2722+
if (key.match(pattern)) {
2723+
this.delete(key);
2724+
}
2725+
}
2726+
}
2727+
}
2728+
function setQueryParam(param, value) {
2729+
const queryParams = new AdvancedURLSearchParams(window.location.search);
2730+
queryParams.set(param, value);
2731+
const url = urlFromQueryParams(queryParams);
2732+
history.replaceState(history.state, '', url);
2733+
}
2734+
function removeQueryParam(param) {
2735+
const queryParams = new AdvancedURLSearchParams(window.location.search);
2736+
queryParams.delete(param);
2737+
const url = urlFromQueryParams(queryParams);
2738+
history.replaceState(history.state, '', url);
2739+
}
2740+
function urlFromQueryParams(queryParams) {
2741+
let queryString = '';
2742+
if (Array.from(queryParams.entries()).length > 0) {
2743+
queryString += '?' + queryParams.toString();
2744+
}
2745+
return window.location.origin + window.location.pathname + queryString + window.location.hash;
2746+
}
2747+
2748+
class QueryStringPlugin {
2749+
constructor() {
2750+
this.mapping = new Map;
2751+
}
2752+
attachToComponent(component) {
2753+
this.element = component.element;
2754+
this.registerBindings();
2755+
component.on('connect', (component) => {
2756+
this.updateUrl(component);
2757+
});
2758+
component.on('render:finished', (component) => {
2759+
this.updateUrl(component);
2760+
});
2761+
}
2762+
registerBindings() {
2763+
const rawQueryMapping = this.element.dataset.liveQueryMapping;
2764+
if (rawQueryMapping === undefined) {
2765+
return;
2766+
}
2767+
const mapping = JSON.parse(rawQueryMapping);
2768+
Object.entries(mapping).forEach(([key, config]) => {
2769+
this.mapping.set(key, config);
2770+
});
2771+
}
2772+
updateUrl(component) {
2773+
this.mapping.forEach((mapping, propName) => {
2774+
const value = component.valueStore.get(propName);
2775+
if (value === '' || value === null || value === undefined) {
2776+
removeQueryParam(mapping.name);
2777+
}
2778+
else {
2779+
setQueryParam(mapping.name, value);
2780+
}
2781+
});
2782+
}
2783+
}
2784+
26992785
const getComponent = (element) => LiveControllerDefault.componentRegistry.getComponent(element);
27002786
class LiveControllerDefault extends Controller {
27012787
constructor() {
@@ -2723,6 +2809,7 @@ class LiveControllerDefault extends Controller {
27232809
new PageUnloadingPlugin(),
27242810
new PollingPlugin(),
27252811
new SetValueOntoModelFieldsPlugin(),
2812+
new QueryStringPlugin(),
27262813
];
27272814
plugins.forEach((plugin) => {
27282815
this.component.addPlugin(plugin);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export declare function setQueryParam(param: string, value: any): void;
2+
export declare function removeQueryParam(param: string): void;

‎src/LiveComponent/assets/src/Component/plugins/QueryStringPlugin.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Component from '../index';
2+
import { PluginInterface } from './PluginInterface';
3+
import {
4+
setQueryParam, removeQueryParam,
5+
} from '../../url_utils';
6+
7+
type QueryMapping = {
8+
name: string,
9+
}
10+
11+
export default class implements PluginInterface {
12+
private element: Element;
13+
private mapping: Map<string,QueryMapping> = new Map;
14+
15+
attachToComponent(component: Component): void {
16+
this.element = component.element;
17+
this.registerBindings();
18+
19+
component.on('connect', (component: Component) => {
20+
this.updateUrl(component);
21+
});
22+
23+
component.on('render:finished', (component: Component)=> {
24+
this.updateUrl(component);
25+
});
26+
}
27+
28+
private registerBindings(): void {
29+
const rawQueryMapping = (this.element as HTMLElement).dataset.liveQueryMapping;
30+
if (rawQueryMapping === undefined) {
31+
return;
32+
}
33+
34+
const mapping = JSON.parse(rawQueryMapping) as {[p: string]: QueryMapping};
35+
36+
Object.entries(mapping).forEach(([key, config]) => {
37+
this.mapping.set(key, config);
38+
})
39+
}
40+
41+
private updateUrl(component: Component){
42+
this.mapping.forEach((mapping, propName) => {
43+
const value = component.valueStore.get(propName);
44+
if (value === '' || value === null || value === undefined) {
45+
removeQueryParam(mapping.name);
46+
} else {
47+
setQueryParam(mapping.name, value);
48+
}
49+
50+
});
51+
}
52+
}

‎src/LiveComponent/assets/src/live_controller.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import SetValueOntoModelFieldsPlugin from './Component/plugins/SetValueOntoModel
1818
import { PluginInterface } from './Component/plugins/PluginInterface';
1919
import getModelBinding from './Directive/get_model_binding';
2020
import ComponentRegistry from './ComponentRegistry';
21+
import QueryStringPlugin from './Component/plugins/QueryStringPlugin';
2122

2223
export { Component };
2324
export const getComponent = (element: HTMLElement): Promise<Component> =>
@@ -102,6 +103,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
102103
new PageUnloadingPlugin(),
103104
new PollingPlugin(),
104105
new SetValueOntoModelFieldsPlugin(),
106+
new QueryStringPlugin(),
105107
];
106108
plugins.forEach((plugin) => {
107109
this.component.addPlugin(plugin);

‎src/LiveComponent/assets/src/url_utils.ts

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
class AdvancedURLSearchParams extends URLSearchParams {
2+
set(name: string, value: any) {
3+
if (typeof value !== 'object') {
4+
super.set(name, value);
5+
} else {
6+
this.delete(name);
7+
if (Array.isArray(value)) {
8+
value.forEach((v) => {
9+
this.append(`${name}[]`, v);
10+
});
11+
} else {
12+
Object.entries(value).forEach(([index, v]) => {
13+
this.append(`${name}[${index}]`, v as string);
14+
});
15+
}
16+
}
17+
}
18+
19+
delete(name: string) {
20+
super.delete(name);
21+
const pattern = new RegExp(`^${name}(\\[.*\\])?$`);
22+
for (const key of this.keys()) {
23+
if (key.match(pattern)) {
24+
this.delete(key);
25+
}
26+
}
27+
}
28+
}
29+
30+
export function setQueryParam(param: string, value: any) {
31+
const queryParams = new AdvancedURLSearchParams(window.location.search);
32+
33+
queryParams.set(param, value);
34+
35+
const url = urlFromQueryParams(queryParams);
36+
37+
history.replaceState(history.state, '', url);
38+
}
39+
40+
export function removeQueryParam(param: string) {
41+
const queryParams = new AdvancedURLSearchParams(window.location.search);
42+
43+
queryParams.delete(param);
44+
45+
const url = urlFromQueryParams(queryParams);
46+
47+
history.replaceState(history.state, '', url);
48+
}
49+
50+
function urlFromQueryParams(queryParams: URLSearchParams) {
51+
let queryString = '';
52+
if (Array.from(queryParams.entries()).length > 0) {
53+
queryString += '?' + queryParams.toString();
54+
}
55+
56+
return window.location.origin + window.location.pathname + queryString + window.location.hash;
57+
}

‎src/LiveComponent/src/Attribute/LiveProp.php

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,13 @@ final class LiveProp
5858
*/
5959
private null|string|array $onUpdated;
6060

61+
/**
62+
* @var bool
63+
*
64+
* Tells if this property should be bound to the URL
65+
*/
66+
private bool $url;
67+
6168
/**
6269
* @param bool|array $writable If true, this property can be changed by the frontend.
6370
* Or set to an array of paths within this object/array
@@ -73,6 +80,8 @@ final class LiveProp
7380
* from the value used when originally rendering
7481
* this child, the value in the child will be updated
7582
* to match the new value and the child will be re-rendered
83+
* @param bool $url if true, this property will be synchronized with a query parameter
84+
* in the URL
7685
*/
7786
public function __construct(
7887
bool|array $writable = false,
@@ -84,6 +93,7 @@ public function __construct(
8493
string $format = null,
8594
bool $updateFromParent = false,
8695
string|array $onUpdated = null,
96+
bool $url = false,
8797
) {
8898
$this->writable = $writable;
8999
$this->hydrateWith = $hydrateWith;
@@ -94,6 +104,7 @@ public function __construct(
94104
$this->format = $format;
95105
$this->acceptUpdatesFromParent = $updateFromParent;
96106
$this->onUpdated = $onUpdated;
107+
$this->url = $url;
97108

98109
if ($this->useSerializerForHydration && ($this->hydrateWith || $this->dehydrateWith)) {
99110
throw new \InvalidArgumentException('Cannot use useSerializerForHydration with hydrateWith or dehydrateWith.');
@@ -188,4 +199,9 @@ public function onUpdated(): null|string|array
188199
{
189200
return $this->onUpdated;
190201
}
202+
203+
public function url(): bool
204+
{
205+
return $this->url;
206+
}
191207
}

‎src/LiveComponent/src/DependencyInjection/LiveComponentExtension.php

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
use Symfony\UX\LiveComponent\EventListener\DeferLiveComponentSubscriber;
2929
use Symfony\UX\LiveComponent\EventListener\InterceptChildComponentRenderSubscriber;
3030
use Symfony\UX\LiveComponent\EventListener\LiveComponentSubscriber;
31+
use Symfony\UX\LiveComponent\EventListener\QueryStringInitializeSubscriber;
3132
use Symfony\UX\LiveComponent\EventListener\ResetDeterministicIdSubscriber;
3233
use Symfony\UX\LiveComponent\Form\Type\LiveCollectionType;
3334
use Symfony\UX\LiveComponent\Hydration\HydrationExtensionInterface;
@@ -44,6 +45,7 @@
4445
use Symfony\UX\LiveComponent\Util\FingerprintCalculator;
4546
use Symfony\UX\LiveComponent\Util\LiveComponentStack;
4647
use Symfony\UX\LiveComponent\Util\LiveControllerAttributesCreator;
48+
use Symfony\UX\LiveComponent\Util\QueryStringPropsExtractor;
4749
use Symfony\UX\LiveComponent\Util\TwigAttributeHelperFactory;
4850
use Symfony\UX\TwigComponent\ComponentFactory;
4951
use Symfony\UX\TwigComponent\ComponentRenderer;
@@ -216,6 +218,16 @@ function (ChildDefinition $definition, AsLiveComponent $attribute) {
216218
->addTag('container.service_subscriber', ['key' => LiveControllerAttributesCreator::class, 'id' => 'ux.live_component.live_controller_attributes_creator'])
217219
;
218220

221+
$container->register('ux.live_component.query_string_props_extractor', QueryStringPropsExtractor::class);
222+
223+
$container->register('ux.live_component.query_string_initializer_subscriber', QueryStringInitializeSubscriber::class)
224+
->setArguments([
225+
new Reference('request_stack'),
226+
new Reference('ux.live_component.metadata_factory'),
227+
new Reference('ux.live_component.query_string_props_extractor'),
228+
])
229+
->addTag('kernel.event_subscriber');
230+
219231
$container->register('ux.live_component.defer_live_component_subscriber', DeferLiveComponentSubscriber::class)
220232
->setArguments([
221233
new Reference('ux.twig_component.component_stack'),

0 commit comments

Comments
 (0)