@symfony/ux-live-component 2.23.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Fabien Potencier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# @symfony/ux-live-component
+
+Live Component: bring server-side re-rendering & model binding to any element.
+
+**ℹ️ Direct installation of this package is for advanced users only.** We strongly recommend installing it through the PHP package [symfony/ux-live-component](https://packagist.org/packages/symfony/ux-live-component) in a Symfony application with Flex enabled.
+
+If you still want to install this package directly, **make sure its version exactly matches [symfony/ux-live-component](https://packagist.org/packages/symfony/ux-live-component) PHP package version.**
+
+## Resources
+
+-   [Documentation](https://symfony.com/bundles/ux-live-component/current/index.html)
+-   [Report issues](https://github.com/symfony/ux/issues) and
+    [send Pull Requests](https://github.com/symfony/ux/pulls)
+    in the [main Symfony UX repository](https://github.com/symfony/ux)

package/dist/Backend/Backend.d.ts

@@ -0,0 +1,31 @@
+import BackendRequest from './BackendRequest';
+export interface ChildrenFingerprints {
+    [key: string]: {
+        fingerprint: string;
+        tag: string;
+    };
+}
+export interface BackendInterface {
+    makeRequest(props: any, actions: BackendAction[], updated: {
+        [key: string]: any;
+    }, children: ChildrenFingerprints, updatedPropsFromParent: {
+        [key: string]: any;
+    }, files: {
+        [key: string]: FileList;
+    }): BackendRequest;
+}
+export interface BackendAction {
+    name: string;
+    args: Record<string, string>;
+}
+export default class implements BackendInterface {
+    private readonly requestBuilder;
+    constructor(url: string, method?: 'get' | 'post');
+    makeRequest(props: any, actions: BackendAction[], updated: {
+        [key: string]: any;
+    }, children: ChildrenFingerprints, updatedPropsFromParent: {
+        [key: string]: any;
+    }, files: {
+        [key: string]: FileList;
+    }): BackendRequest;
+}

package/dist/Backend/BackendRequest.d.ts

@@ -0,0 +1,9 @@
+export default class {
+    promise: Promise<Response>;
+    actions: string[];
+    updatedModels: string[];
+    isResolved: boolean;
+    constructor(promise: Promise<Response>, actions: string[], updateModels: string[]);
+    containsOneOfActions(targetedActions: string[]): boolean;
+    areAnyModelsUpdated(targetedModels: string[]): boolean;
+}

package/dist/Backend/BackendResponse.d.ts

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

package/dist/Backend/RequestBuilder.d.ts

@@ -0,0 +1,17 @@
+import type { BackendAction, ChildrenFingerprints } from './Backend';
+export default class {
+    private url;
+    private method;
+    constructor(url: string, method?: 'get' | 'post');
+    buildRequest(props: any, actions: BackendAction[], updated: {
+        [key: string]: any;
+    }, children: ChildrenFingerprints, updatedPropsFromParent: {
+        [key: string]: any;
+    }, files: {
+        [key: string]: FileList;
+    }): {
+        url: string;
+        fetchOptions: RequestInit;
+    };
+    private willDataFitInUrl;
+}

package/dist/Component/ElementDriver.d.ts

@@ -0,0 +1,31 @@
+import type LiveControllerDefault from '../live_controller';
+export interface ElementDriver {
+    getModelName(element: HTMLElement): string | null;
+    getComponentProps(): any;
+    getEventsToEmit(): Array<{
+        event: string;
+        data: any;
+        target: string | null;
+        componentName: string | null;
+    }>;
+    getBrowserEventsToDispatch(): Array<{
+        event: string;
+        payload: any;
+    }>;
+}
+export declare class StimulusElementDriver implements ElementDriver {
+    private readonly controller;
+    constructor(controller: LiveControllerDefault);
+    getModelName(element: HTMLElement): string | null;
+    getComponentProps(): any;
+    getEventsToEmit(): Array<{
+        event: string;
+        data: any;
+        target: string | null;
+        componentName: string | null;
+    }>;
+    getBrowserEventsToDispatch(): Array<{
+        event: string;
+        payload: any;
+    }>;
+}

package/dist/Component/UnsyncedInputsTracker.d.ts

@@ -0,0 +1,28 @@
+import type { ElementDriver } from './ElementDriver';
+import type Component from './index';
+export default class {
+    private readonly component;
+    private readonly modelElementResolver;
+    private readonly unsyncedInputs;
+    private elementEventListeners;
+    constructor(component: Component, modelElementResolver: ElementDriver);
+    activate(): void;
+    deactivate(): void;
+    markModelAsSynced(modelName: string): void;
+    private handleInputEvent;
+    private updateModelFromElement;
+    getUnsyncedInputs(): HTMLElement[];
+    getUnsyncedModels(): string[];
+    resetUnsyncedFields(): void;
+}
+export declare class UnsyncedInputContainer {
+    private unsyncedModelFields;
+    private unsyncedNonModelFields;
+    private unsyncedModelNames;
+    constructor();
+    add(element: HTMLElement, modelName?: string | null): void;
+    resetUnsyncedFields(): void;
+    allUnsyncedInputs(): HTMLElement[];
+    markModelAsSynced(modelName: string): void;
+    getUnsyncedModelNames(): string[];
+}

package/dist/Component/ValueStore.d.ts

@@ -0,0 +1,17 @@
+export default class {
+    private props;
+    private dirtyProps;
+    private pendingProps;
+    private updatedPropsFromParent;
+    constructor(props: any);
+    get(name: string): any;
+    has(name: string): boolean;
+    set(name: string, value: any): boolean;
+    getOriginalProps(): any;
+    getDirtyProps(): any;
+    getUpdatedPropsFromParent(): any;
+    flushDirtyPropsToPending(): void;
+    reinitializeAllProps(props: any): void;
+    pushPendingPropsBackToDirty(): void;
+    storeNewPropsFromParent(props: any): boolean;
+}

package/dist/Component/index.d.ts

@@ -0,0 +1,74 @@
+import type { BackendInterface } from '../Backend/Backend';
+import type BackendRequest from '../Backend/BackendRequest';
+import BackendResponse from '../Backend/BackendResponse';
+import type { ElementDriver } from './ElementDriver';
+import ValueStore from './ValueStore';
+import type { PluginInterface } from './plugins/PluginInterface';
+type MaybePromise<T = void> = T | Promise<T>;
+export type ComponentHooks = {
+    connect: (component: Component) => MaybePromise;
+    disconnect: (component: Component) => MaybePromise;
+    'request:started': (requestConfig: any) => MaybePromise;
+    'render:finished': (component: Component) => MaybePromise;
+    'response:error': (backendResponse: BackendResponse, controls: {
+        displayError: boolean;
+    }) => MaybePromise;
+    'loading.state:started': (element: HTMLElement, request: BackendRequest) => MaybePromise;
+    'loading.state:finished': (element: HTMLElement) => MaybePromise;
+    'model:set': (model: string, value: any, component: Component) => MaybePromise;
+};
+export type ComponentHookName = keyof ComponentHooks;
+export type ComponentHookCallback<T extends string = ComponentHookName> = T extends ComponentHookName ? ComponentHooks[T] : (...args: any[]) => MaybePromise;
+export default class Component {
+    readonly element: HTMLElement;
+    readonly name: string;
+    readonly listeners: Map<string, string[]>;
+    private backend;
+    readonly elementDriver: ElementDriver;
+    id: string | null;
+    fingerprint: string;
+    readonly valueStore: ValueStore;
+    private readonly unsyncedInputsTracker;
+    private hooks;
+    defaultDebounce: number;
+    private backendRequest;
+    private pendingActions;
+    private pendingFiles;
+    private isRequestPending;
+    private requestDebounceTimeout;
+    private nextRequestPromise;
+    private nextRequestPromiseResolve;
+    private externalMutationTracker;
+    constructor(element: HTMLElement, name: string, props: any, listeners: Array<{
+        event: string;
+        action: string;
+    }>, id: string | null, backend: BackendInterface, elementDriver: ElementDriver);
+    addPlugin(plugin: PluginInterface): void;
+    connect(): void;
+    disconnect(): void;
+    on<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void;
+    off<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void;
+    set(model: string, value: any, reRender?: boolean, debounce?: number | boolean): Promise<BackendResponse>;
+    getData(model: string): any;
+    action(name: string, args?: any, debounce?: number | boolean): Promise<BackendResponse>;
+    files(key: string, input: HTMLInputElement): void;
+    render(): Promise<BackendResponse>;
+    getUnsyncedModels(): string[];
+    emit(name: string, data: any, onlyMatchingComponentsNamed?: string | null): void;
+    emitUp(name: string, data: any, onlyMatchingComponentsNamed?: string | null): void;
+    emitSelf(name: string, data: any): void;
+    private performEmit;
+    private doEmit;
+    private isTurboEnabled;
+    private tryStartingRequest;
+    private performRequest;
+    private processRerender;
+    private calculateDebounce;
+    private clearRequestDebounceTimeout;
+    private debouncedStartRequest;
+    private renderError;
+    private resetPromise;
+    _updateFromParentProps(props: any): void;
+}
+export declare function proxifyComponent(component: Component): Component;
+export {};

package/dist/Component/plugins/ChildComponentPlugin.d.ts

@@ -0,0 +1,11 @@
+import type Component from '../../Component';
+import type { PluginInterface } from './PluginInterface';
+export default class implements PluginInterface {
+    private readonly component;
+    private parentModelBindings;
+    constructor(component: Component);
+    attachToComponent(component: Component): void;
+    private getChildrenFingerprints;
+    private notifyParentModelChange;
+    private getChildren;
+}

package/dist/Component/plugins/LazyPlugin.d.ts

@@ -0,0 +1,7 @@
+import type Component from '../index';
+import type { PluginInterface } from './PluginInterface';
+export default class implements PluginInterface {
+    private intersectionObserver;
+    attachToComponent(component: Component): void;
+    private getObserver;
+}

package/dist/Component/plugins/LoadingPlugin.d.ts

@@ -0,0 +1,23 @@
+import type BackendRequest from '../../Backend/BackendRequest';
+import type Component from '../../Component';
+import { type Directive } from '../../Directive/directives_parser';
+import type { PluginInterface } from './PluginInterface';
+interface ElementLoadingDirectives {
+    element: HTMLElement | SVGElement;
+    directives: Directive[];
+}
+export default class implements PluginInterface {
+    attachToComponent(component: Component): void;
+    startLoading(component: Component, targetElement: HTMLElement | SVGElement, backendRequest: BackendRequest): void;
+    finishLoading(component: Component, targetElement: HTMLElement | SVGElement): void;
+    private handleLoadingToggle;
+    private handleLoadingDirective;
+    getLoadingDirectives(component: Component, element: HTMLElement | SVGElement): ElementLoadingDirectives[];
+    private showElement;
+    private hideElement;
+    private addClass;
+    private removeClass;
+    private addAttributes;
+    private removeAttributes;
+}
+export {};

package/dist/Component/plugins/PageUnloadingPlugin.d.ts

@@ -0,0 +1,6 @@
+import type Component from '../index';
+import type { PluginInterface } from './PluginInterface';
+export default class implements PluginInterface {
+    private isConnected;
+    attachToComponent(component: Component): void;
+}

package/dist/Component/plugins/PluginInterface.d.ts

@@ -0,0 +1,4 @@
+import type Component from '../index';
+export interface PluginInterface {
+    attachToComponent(component: Component): void;
+}

package/dist/Component/plugins/PollingPlugin.d.ts

@@ -0,0 +1,10 @@
+import type Component from '../index';
+import type { PluginInterface } from './PluginInterface';
+export default class implements PluginInterface {
+    private element;
+    private pollingDirector;
+    attachToComponent(component: Component): void;
+    addPoll(actionName: string, duration: number): void;
+    clearPolling(): void;
+    private initializePolling;
+}

package/dist/Component/plugins/QueryStringPlugin.d.ts

@@ -0,0 +1,13 @@
+import type Component from '../index';
+import type { PluginInterface } from './PluginInterface';
+interface QueryMapping {
+    name: string;
+}
+export default class implements PluginInterface {
+    private readonly mapping;
+    constructor(mapping: {
+        [p: string]: QueryMapping;
+    });
+    attachToComponent(component: Component): void;
+}
+export {};

package/dist/Component/plugins/SetValueOntoModelFieldsPlugin.d.ts

@@ -0,0 +1,6 @@
+import type Component from '../index';
+import type { PluginInterface } from './PluginInterface';
+export default class implements PluginInterface {
+    attachToComponent(component: Component): void;
+    private synchronizeValueOfModelFields;
+}

package/dist/Component/plugins/ValidatedFieldsPlugin.d.ts

@@ -0,0 +1,6 @@
+import type Component from '../index';
+import type { PluginInterface } from './PluginInterface';
+export default class implements PluginInterface {
+    attachToComponent(component: Component): void;
+    private handleModelSet;
+}

package/dist/ComponentRegistry.d.ts

@@ -0,0 +1,8 @@
+import type Component from './Component';
+export declare const resetRegistry: () => void;
+export declare const registerComponent: (component: Component) => void;
+export declare const unregisterComponent: (component: Component) => void;
+export declare const getComponent: (element: HTMLElement) => Promise<Component>;
+export declare const findComponents: (currentComponent: Component, onlyParents: boolean, onlyMatchName: string | null) => Component[];
+export declare const findChildren: (currentComponent: Component) => Component[];
+export declare const findParent: (currentComponent: Component) => Component | null;

package/dist/Directive/directives_parser.d.ts

@@ -0,0 +1,11 @@
+export interface DirectiveModifier {
+    name: string;
+    value: string | null;
+}
+export interface Directive {
+    action: string;
+    args: string[];
+    modifiers: DirectiveModifier[];
+    getString: () => string;
+}
+export declare function parseDirectives(content: string | null): Directive[];

package/dist/Directive/get_model_binding.d.ts

@@ -0,0 +1,9 @@
+import type { Directive } from './directives_parser';
+export interface ModelBinding {
+    modelName: string;
+    innerModelName: string | null;
+    shouldRender: boolean;
+    debounce: number | boolean;
+    targetEventName: string | null;
+}
+export default function (modelDirective: Directive): ModelBinding;

package/dist/HookManager.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentHookCallback, ComponentHookName } from './Component';
+export default class {
+    private hooks;
+    register<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void;
+    unregister<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void;
+    triggerHook<T extends string | ComponentHookName = ComponentHookName>(hookName: T, ...args: Parameters<ComponentHookCallback<T>>): void;
+}

package/dist/PollingDirector.d.ts

@@ -0,0 +1,16 @@
+import type Component from './Component';
+export default class {
+    component: Component;
+    isPollingActive: boolean;
+    polls: Array<{
+        actionName: string;
+        duration: number;
+    }>;
+    pollingIntervals: number[];
+    constructor(component: Component);
+    addPoll(actionName: string, duration: number): void;
+    startAllPolling(): void;
+    stopAllPolling(): void;
+    clearPolling(): void;
+    private initiatePoll;
+}

package/dist/Rendering/ChangingItemsTracker.d.ts

@@ -0,0 +1,12 @@
+export default class {
+    private changedItems;
+    private removedItems;
+    setItem(itemName: string, newValue: string, previousValue: string | null): void;
+    removeItem(itemName: string, currentValue: string | null): void;
+    getChangedItems(): {
+        name: string;
+        value: string;
+    }[];
+    getRemovedItems(): string[];
+    isEmpty(): boolean;
+}

package/dist/Rendering/ElementChanges.d.ts

@@ -0,0 +1,26 @@
+export default class ElementChanges {
+    private addedClasses;
+    private removedClasses;
+    private styleChanges;
+    private attributeChanges;
+    addClass(className: string): void;
+    removeClass(className: string): void;
+    addStyle(styleName: string, newValue: string, originalValue: string | null): void;
+    removeStyle(styleName: string, originalValue: string): void;
+    addAttribute(attributeName: string, newValue: string, originalValue: string | null): void;
+    removeAttribute(attributeName: string, originalValue: string | null): void;
+    getAddedClasses(): string[];
+    getRemovedClasses(): string[];
+    getChangedStyles(): {
+        name: string;
+        value: string;
+    }[];
+    getRemovedStyles(): string[];
+    getChangedAttributes(): {
+        name: string;
+        value: string;
+    }[];
+    getRemovedAttributes(): string[];
+    applyToElement(element: HTMLElement): void;
+    isEmpty(): boolean;
+}

package/dist/Rendering/ExternalMutationTracker.d.ts

@@ -0,0 +1,26 @@
+import ElementChanges from './ElementChanges';
+export default class {
+    private element;
+    private shouldTrackChangeCallback;
+    private mutationObserver;
+    private changedElements;
+    changedElementsCount: number;
+    private addedElements;
+    private removedElements;
+    private isStarted;
+    constructor(element: Element, shouldTrackChangeCallback: (element: Element) => boolean);
+    start(): void;
+    stop(): void;
+    getChangedElement(element: Element): ElementChanges | null;
+    getAddedElements(): Element[];
+    wasElementAdded(element: Element): boolean;
+    handlePendingChanges(): void;
+    private onMutations;
+    private handleChildListMutation;
+    private handleAttributeMutation;
+    private handleClassAttributeMutation;
+    private handleStyleAttributeMutation;
+    private handleGenericAttributeMutation;
+    private extractStyles;
+    private isElementAddedByTranslation;
+}

package/dist/Util/getElementAsTagText.d.ts

@@ -0,0 +1 @@
+export default function getElementAsTagText(element: HTMLElement): string;

package/dist/data_manipulation_utils.d.ts

@@ -0,0 +1,2 @@
+export declare function getDeepData(data: any, propertyPath: string): any;
+export declare function setDeepData(data: any, propertyPath: string, value: any): any;

package/dist/dom_utils.d.ts

@@ -0,0 +1,10 @@
+import type Component from './Component';
+import type ValueStore from './Component/ValueStore';
+import { type Directive } from './Directive/directives_parser';
+export declare function getValueFromElement(element: HTMLElement, valueStore: ValueStore): string | string[] | null | boolean;
+export declare function setValueOnElement(element: HTMLElement, value: any): void;
+export declare function getAllModelDirectiveFromElements(element: HTMLElement): Directive[];
+export declare function getModelDirectiveFromElement(element: HTMLElement, throwOnMissing?: boolean): null | Directive;
+export declare function elementBelongsToThisComponent(element: Element, component: Component): boolean;
+export declare function cloneHTMLElement(element: HTMLElement): HTMLElement;
+export declare function htmlToElement(html: string): HTMLElement;

package/dist/live.min.css

@@ -0,0 +1 @@
+[data-loading=""],[data-loading=show],[data-loading=delay\|show]{display:none}

package/dist/live_controller.d.ts

@@ -0,0 +1,112 @@
+import { Controller } from '@hotwired/stimulus';
+import { type BackendInterface } from './Backend/Backend';
+import Component from './Component';
+export { Component };
+export { getComponent } from './ComponentRegistry';
+export interface LiveEvent extends CustomEvent {
+    detail: {
+        controller: LiveController;
+        component: Component;
+    };
+}
+export interface LiveController {
+    element: HTMLElement;
+    component: Component;
+}
+export default class LiveControllerDefault extends Controller<HTMLElement> implements LiveController {
+    static values: {
+        name: StringConstructor;
+        url: StringConstructor;
+        props: {
+            type: ObjectConstructor;
+            default: {};
+        };
+        propsUpdatedFromParent: {
+            type: ObjectConstructor;
+            default: {};
+        };
+        listeners: {
+            type: ArrayConstructor;
+            default: never[];
+        };
+        eventsToEmit: {
+            type: ArrayConstructor;
+            default: never[];
+        };
+        eventsToDispatch: {
+            type: ArrayConstructor;
+            default: never[];
+        };
+        debounce: {
+            type: NumberConstructor;
+            default: number;
+        };
+        fingerprint: {
+            type: StringConstructor;
+            default: string;
+        };
+        requestMethod: {
+            type: StringConstructor;
+            default: string;
+        };
+        queryMapping: {
+            type: ObjectConstructor;
+            default: {};
+        };
+    };
+    readonly nameValue: string;
+    readonly urlValue: string;
+    readonly propsValue: any;
+    propsUpdatedFromParentValue: any;
+    readonly listenersValue: Array<{
+        event: string;
+        action: string;
+    }>;
+    readonly eventsToEmitValue: Array<{
+        event: string;
+        data: any;
+        target: string | null;
+        componentName: string | null;
+    }>;
+    readonly eventsToDispatchValue: Array<{
+        event: string;
+        payload: any;
+    }>;
+    readonly hasDebounceValue: boolean;
+    readonly debounceValue: number;
+    readonly fingerprintValue: string;
+    readonly requestMethodValue: 'get' | 'post';
+    readonly queryMappingValue: {
+        [p: string]: {
+            name: string;
+        };
+    };
+    private proxiedComponent;
+    private mutationObserver;
+    component: Component;
+    pendingActionTriggerModelElement: HTMLElement | null;
+    private elementEventListeners;
+    private pendingFiles;
+    static backendFactory: (controller: LiveControllerDefault) => BackendInterface;
+    initialize(): void;
+    connect(): void;
+    disconnect(): void;
+    update(event: any): void;
+    action(event: any): void;
+    $render(): Promise<import("./Backend/BackendResponse").default>;
+    emit(event: any): void;
+    emitUp(event: any): void;
+    emitSelf(event: any): void;
+    $updateModel(model: string, value: any, shouldRender?: boolean, debounce?: number | boolean): Promise<import("./Backend/BackendResponse").default>;
+    propsUpdatedFromParentValueChanged(): void;
+    fingerprintValueChanged(): void;
+    private getEmitDirectives;
+    private createComponent;
+    private connectComponent;
+    private disconnectComponent;
+    private handleInputEvent;
+    private handleChangeEvent;
+    private updateModelFromElementEvent;
+    private dispatchEvent;
+    private onMutations;
+}