@pechynho/stimulus-typescript 0.0.8

package/dist/portal-controller.js

@@ -0,0 +1,792 @@
+import { Controller } from "@hotwired/stimulus";
+import { throttle } from "throttle-debounce";
+import { camelCase, capitalize } from "./utils";
+const proxyActionPrefix = '__proxyAction__';
+class Action {
+    constructor(event, identifier, method, modifier, stringified = null) {
+        this.event = event;
+        this.identifier = identifier;
+        this.method = method;
+        this.modifier = modifier;
+        this.stringified = stringified;
+    }
+    toString() {
+        if (this.stringified !== null) {
+            return this.stringified;
+        }
+        let directive = '';
+        if (this.event !== undefined) {
+            directive += `${this.event}->`;
+        }
+        directive += `${this.identifier}#${this.method}`;
+        if (this.modifier !== undefined) {
+            directive += `:${this.modifier}`;
+        }
+        this.stringified = directive;
+        return this.stringified;
+    }
+}
+export default class extends Controller {
+    constructor() {
+        super(...arguments);
+        this.observer = null;
+        this.isConnected = false;
+        this.identifiers = new Set();
+        this.searchedIdentifiersForTargets = new Set();
+        this.searchedIdentifiersForActions = new Set();
+        this.controllers = new Map();
+        this.targetsByController = new Map();
+        this.targetsByIdentifier = new Map();
+        this.targetsByTargetName = new Map();
+        this.controllerOriginalMethods = new Map();
+        this.actionToElementsMap = new Map();
+        this.elementToActionsMap = new Map();
+        this.identifierToActionElementsMap = new Map();
+        this.actionElementToIdentifiersMap = new Map();
+    }
+    initialize() {
+        this.searchTargets = throttle(1, this.searchTargets.bind(this));
+        this.searchActions = throttle(1, this.searchActions.bind(this));
+    }
+    connect() {
+        this.isConnected = true;
+        this.reinitializeObserver();
+        this.connectObserver();
+        this.searchTargets();
+        this.searchActions();
+    }
+    disconnect() {
+        this.isConnected = false;
+        this.disconnectAllTargets();
+        this.restoreControllersGetTargetMethods();
+        this.removeAllProxyActions();
+        this.disconnectObserver();
+        this.identifiers.clear();
+        this.searchedIdentifiersForTargets.clear();
+        this.searchedIdentifiersForActions.clear();
+        this.controllers.clear();
+        this.targetsByController.clear();
+        this.targetsByIdentifier.clear();
+        this.targetsByTargetName.clear();
+        this.controllerOriginalMethods.clear();
+        this.actionToElementsMap.clear();
+        this.elementToActionsMap.clear();
+        this.identifierToActionElementsMap.clear();
+        this.actionElementToIdentifiersMap.clear();
+    }
+    sync(controller) {
+        this.identifiers.add(controller.identifier);
+        let controllers = this.controllers.get(controller.identifier);
+        if (controllers === undefined) {
+            controllers = new Set();
+            this.controllers.set(controller.identifier, controllers);
+        }
+        controllers.add(controller);
+        this.overrideControllerGetTargetMethods(controller);
+        if (this.isConnected) {
+            this.reinitializeObserver();
+            this.connectObserver();
+            this.searchTargets();
+            this.searchActions();
+        }
+        const targetsByIdentifier = this.targetsByIdentifier.get(controller.identifier);
+        if (targetsByIdentifier !== undefined) {
+            for (const target of targetsByIdentifier) {
+                this.addTarget(target, controller.identifier);
+            }
+        }
+    }
+    unsync(controller) {
+        const controllers = this.controllers.get(controller.identifier);
+        if (controllers === undefined) {
+            return;
+        }
+        controllers.delete(controller);
+        this.restoreControllerGetTargetMethods(controller);
+        if (controllers.size === 0) {
+            this.controllers.delete(controller.identifier);
+            this.identifiers.delete(controller.identifier);
+            this.targetsByIdentifier.delete(controller.identifier);
+            this.searchedIdentifiersForTargets.delete(controller.identifier);
+            this.searchedIdentifiersForActions.delete(controller.identifier);
+            this.targetsByTargetName.delete(controller.identifier);
+            if (this.isConnected) {
+                this.removeAllProxyActionsByIdentifier(controller.identifier);
+            }
+        }
+        this.targetsByController.delete(controller);
+        this.reinitializeObserver();
+        this.connectObserver();
+    }
+    reinitializeObserver() {
+        this.disconnectObserver();
+        this.observer = new MutationObserver(this.handleMutations.bind(this));
+    }
+    connectObserver() {
+        if (this.observer === null) {
+            return;
+        }
+        const attributes = [this.getActionAttributeName()];
+        for (const identifier of this.identifiers) {
+            attributes.push(this.getTargetAttributeName(identifier));
+        }
+        this.observer.observe(this.element, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: attributes,
+            attributeOldValue: true,
+        });
+    }
+    disconnectObserver() {
+        if (this.observer === null) {
+            return;
+        }
+        this.observer.disconnect();
+    }
+    handleMutations(mutations) {
+        for (const mutation of mutations) {
+            if (mutation.type === 'childList') {
+                for (const node of mutation.addedNodes) {
+                    if (node instanceof Element) {
+                        if (this.isObservedTargetElement(node)) {
+                            this.addTarget(node);
+                        }
+                        if (node.hasAttribute(this.getActionAttributeName())) {
+                            this.addActionElement(node);
+                        }
+                    }
+                }
+                for (const node of mutation.removedNodes) {
+                    if (node instanceof Element) {
+                        if (this.isObservedTargetElement(node)) {
+                            this.removeTarget(node);
+                        }
+                        if (node.hasAttribute(this.getActionAttributeName())) {
+                            this.removeActionElement(node);
+                        }
+                    }
+                }
+            }
+            else if (mutation.type === 'attributes' && mutation.target instanceof Element && typeof mutation.attributeName === 'string') {
+                const oldValue = mutation.oldValue;
+                const currentValue = mutation.target.getAttribute(mutation.attributeName);
+                if (mutation.attributeName === this.getActionAttributeName()) {
+                    if (oldValue === null && currentValue !== null) {
+                        this.addActionElement(mutation.target);
+                    }
+                    else if (oldValue !== null && currentValue !== null && oldValue !== currentValue) {
+                        this.addActionElement(mutation.target);
+                    }
+                    else if (oldValue !== null && currentValue === null) {
+                        this.removeActionElement(mutation.target, true);
+                    }
+                }
+                else {
+                    for (const identifier of this.identifiers) {
+                        if (mutation.attributeName === this.getTargetAttributeName(identifier)) {
+                            if (oldValue === null && currentValue !== null) {
+                                this.addTarget(mutation.target, identifier);
+                            }
+                            else if (oldValue !== null && currentValue === null) {
+                                this.removeTarget(mutation.target, identifier);
+                            }
+                            else if (oldValue !== null && currentValue !== null && oldValue !== currentValue) {
+                                this.removeStoredTargetByTargetName(mutation.target, identifier, oldValue);
+                                this.storeTargetByTargetName(mutation.target, identifier, currentValue);
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    addTarget(firstArg, secondArg) {
+        const target = firstArg;
+        if (!(target instanceof Element)) {
+            throw new Error('Expected first argument to be an Element');
+        }
+        const identifier = secondArg;
+        const addTarget = (target, identifier) => {
+            const targetAttributeName = this.getTargetAttributeName(identifier);
+            if (!target.hasAttribute(targetAttributeName)) {
+                return;
+            }
+            let targetsByIdentifier = this.targetsByIdentifier.get(identifier);
+            if (targetsByIdentifier === undefined) {
+                targetsByIdentifier = new Set();
+                this.targetsByIdentifier.set(identifier, targetsByIdentifier);
+            }
+            targetsByIdentifier.add(target);
+            const targetName = target.getAttribute(targetAttributeName);
+            this.storeTargetByTargetName(target, identifier, targetName);
+            const controllers = this.controllers.get(identifier);
+            if (controllers === undefined) {
+                return;
+            }
+            for (const controller of controllers) {
+                let targetsByController = this.targetsByController.get(controller);
+                if (targetsByController === undefined) {
+                    targetsByController = new Set();
+                    this.targetsByController.set(controller, targetsByController);
+                }
+                if (targetsByController.has(target)) {
+                    continue;
+                }
+                try {
+                    controller.context.invokeControllerMethod(this.getTargetConnectedMethodName(targetName), target);
+                }
+                catch (e) {
+                    console.error(e);
+                }
+                finally {
+                    targetsByController.add(target);
+                }
+            }
+        };
+        if (typeof identifier === 'string') {
+            addTarget(target, identifier);
+        }
+        else if (typeof identifier === 'undefined') {
+            for (const identifier of this.identifiers) {
+                addTarget(target, identifier);
+            }
+        }
+        else {
+            throw new Error('Expected second argument to be a string or undefined');
+        }
+    }
+    removeTarget(firstArg, secondArg) {
+        const target = firstArg;
+        if (!(target instanceof Element)) {
+            throw new Error('Expected first argument to be an Element');
+        }
+        const identifier = secondArg;
+        const removeTarget = (target, identifier) => {
+            const targetAttributeName = this.getTargetAttributeName(identifier);
+            if (!target.hasAttribute(targetAttributeName)) {
+                return;
+            }
+            const targetsByIdentifier = this.targetsByIdentifier.get(identifier);
+            if (targetsByIdentifier !== undefined) {
+                targetsByIdentifier.delete(target);
+            }
+            const targetName = target.getAttribute(targetAttributeName);
+            this.removeStoredTargetByTargetName(target, identifier, targetName);
+            const controllers = this.controllers.get(identifier);
+            if (controllers === undefined) {
+                return;
+            }
+            for (const controller of controllers) {
+                let targetsByController = this.targetsByController.get(controller);
+                if (targetsByController === undefined) {
+                    targetsByController = new Set();
+                    this.targetsByController.set(controller, targetsByController);
+                }
+                if (!targetsByController.has(target)) {
+                    continue;
+                }
+                try {
+                    controller.context.invokeControllerMethod(this.getTargetDisconnectedMethodName(targetName), target);
+                }
+                catch (e) {
+                    console.error(e);
+                }
+                finally {
+                    targetsByController.delete(target);
+                }
+            }
+        };
+        if (typeof identifier === 'string') {
+            removeTarget(target, identifier);
+        }
+        else if (typeof identifier === 'undefined') {
+            for (const identifier of this.identifiers) {
+                removeTarget(target, identifier);
+            }
+        }
+        else {
+            throw new Error('Expected second argument to be a string or undefined');
+        }
+    }
+    disconnectAllTargets() {
+        for (const identifier of this.identifiers) {
+            const targetsByIdentifier = this.targetsByIdentifier.get(identifier);
+            if (targetsByIdentifier !== undefined) {
+                targetsByIdentifier.clear();
+            }
+            const controllers = this.controllers.get(identifier);
+            if (controllers === undefined) {
+                continue;
+            }
+            for (const controller of controllers) {
+                const targetsByController = this.targetsByController.get(controller);
+                if (targetsByController === undefined) {
+                    continue;
+                }
+                for (const target of targetsByController) {
+                    const targetAttributeName = this.getTargetAttributeName(identifier);
+                    if (!target.hasAttribute(targetAttributeName)) {
+                        continue;
+                    }
+                    const targetName = target.getAttribute(targetAttributeName);
+                    this.removeStoredTargetByTargetName(target, identifier, targetName);
+                    try {
+                        controller.context.invokeControllerMethod(this.getTargetDisconnectedMethodName(targetName), target);
+                    }
+                    catch (e) {
+                        console.error(e);
+                    }
+                }
+                targetsByController.clear();
+            }
+        }
+    }
+    searchTargets() {
+        if (!this.isConnected) {
+            return;
+        }
+        let batch = [];
+        const batchSize = 5;
+        const identifiers = [...this.identifiers].filter(identifier => !this.searchedIdentifiersForTargets.has(identifier));
+        for (let i = 0; i < identifiers.length; i++) {
+            batch.push(`[${this.getTargetAttributeName(identifiers[i])}]`);
+            if (batch.length == batchSize || i + 1 === identifiers.length) {
+                const targets = this.element.querySelectorAll(batch.join(','));
+                for (const target of targets) {
+                    if (target instanceof Element) {
+                        this.addTarget(target, identifiers[i]);
+                    }
+                }
+                batch = [];
+            }
+            this.searchedIdentifiersForTargets.add(identifiers[i]);
+        }
+    }
+    searchActions() {
+        if (!this.isConnected) {
+            return;
+        }
+        const identifiers = [...this.identifiers].filter(identifier => !this.searchedIdentifiersForActions.has(identifier));
+        if (identifiers.length === 0) {
+            return;
+        }
+        const elements = this.element.querySelectorAll(`[${this.getActionAttributeName()}]`);
+        for (const element of elements) {
+            this.addActionElement(element);
+        }
+        for (const identifier of identifiers) {
+            this.searchedIdentifiersForActions.add(identifier);
+        }
+    }
+    getTargetConnectedMethodName(targetName) {
+        return camelCase(targetName) + 'TargetConnected';
+    }
+    getTargetDisconnectedMethodName(targetName) {
+        return camelCase(targetName) + 'TargetDisconnected';
+    }
+    getTargetAttributeName(identifier) {
+        return `data-${identifier}-target`;
+    }
+    getActionAttributeName() {
+        return this.context.schema.actionAttribute;
+    }
+    getPortalledActionAttributeName() {
+        return this.context.schema.actionAttribute + '-portalled';
+    }
+    isObservedTargetElement(element) {
+        for (const identifier of this.identifiers) {
+            if (element.hasAttribute(this.getTargetAttributeName(identifier))) {
+                return true;
+            }
+        }
+        return false;
+    }
+    overrideControllerGetTargetMethods(controller) {
+        let originalMethods = this.controllerOriginalMethods.get(controller);
+        if (originalMethods !== undefined) {
+            throw new Error(`Controller ${controller.identifier} already has overridden target methods`);
+        }
+        originalMethods = {};
+        const targetNames = controller.constructor.targets;
+        if (!Array.isArray(targetNames) || targetNames.length === 0) {
+            return;
+        }
+        const targetDescriptorsMap = new Map();
+        for (const targetName of targetNames) {
+            targetDescriptorsMap.set(`${targetName}Target`, targetName);
+            targetDescriptorsMap.set(`${targetName}Targets`, targetName);
+            targetDescriptorsMap.set(`has${capitalize(targetName)}Target`, targetName);
+        }
+        const descriptors = {};
+        let prototype = controller;
+        while (prototype !== Object.prototype) {
+            const prototypeDescriptors = Object.getOwnPropertyDescriptors(prototype);
+            Object.keys(prototypeDescriptors).forEach((descriptorName) => {
+                if (!targetDescriptorsMap.has(descriptorName) || descriptors[descriptorName] !== undefined) {
+                    return;
+                }
+                descriptors[descriptorName] = prototypeDescriptors[descriptorName];
+            });
+            prototype = Object.getPrototypeOf(prototype);
+        }
+        Object.keys(descriptors).forEach((descriptorName) => {
+            const targetName = targetDescriptorsMap.get(descriptorName);
+            if (targetName === undefined) {
+                return;
+            }
+            const portal = this;
+            const descriptor = descriptors[descriptorName];
+            if (descriptorName === `has${capitalize(targetName)}Target`) {
+                originalMethods[descriptorName] = descriptor;
+                Object.defineProperty(controller, descriptorName, {
+                    get: function () {
+                        if (portal.hasStoredTargetsByTargetName(controller.identifier, targetName)) {
+                            return true;
+                        }
+                        return controller.targets.has(targetName);
+                    },
+                    configurable: true,
+                    enumerable: descriptor.enumerable,
+                });
+            }
+            else if (descriptorName === `${targetName}Target`) {
+                originalMethods[descriptorName] = descriptor;
+                Object.defineProperty(controller, descriptorName, {
+                    get: function () {
+                        if (portal.hasStoredTargetsByTargetName(controller.identifier, targetName)) {
+                            return portal.getStoredTargetsByTargetName(controller.identifier, targetName)[0];
+                        }
+                        const target = controller.targets.find(targetName);
+                        if (target === undefined) {
+                            throw new Error(`Missing target element "${targetName}" for "${controller.identifier}" controller`);
+                        }
+                        return target;
+                    },
+                    configurable: true,
+                    enumerable: descriptor.enumerable,
+                });
+            }
+            else if (descriptorName === `${targetName}Targets`) {
+                originalMethods[descriptorName] = descriptor;
+                Object.defineProperty(controller, descriptorName, {
+                    get: function () {
+                        return [
+                            ...portal.getStoredTargetsByTargetName(controller.identifier, targetName),
+                            ...controller.targets.findAll(targetName),
+                        ];
+                    },
+                    configurable: true,
+                    enumerable: descriptor.enumerable,
+                });
+            }
+        });
+        this.controllerOriginalMethods.set(controller, originalMethods);
+    }
+    restoreControllerGetTargetMethods(controller) {
+        const originalMethods = this.controllerOriginalMethods.get(controller);
+        if (originalMethods === undefined) {
+            return;
+        }
+        for (const [descriptorName, descriptor] of Object.entries(originalMethods)) {
+            Object.defineProperty(controller, descriptorName, {
+                ...descriptor,
+                configurable: true,
+                enumerable: descriptor.enumerable,
+            });
+        }
+        this.controllerOriginalMethods.delete(controller);
+    }
+    restoreControllersGetTargetMethods() {
+        const controllers = this.controllerOriginalMethods.keys();
+        for (const controller of controllers) {
+            this.restoreControllerGetTargetMethods(controller);
+        }
+    }
+    storeTargetByTargetName(target, identifier, targetName) {
+        let targetsByTargetName1 = this.targetsByTargetName.get(identifier);
+        if (targetsByTargetName1 === undefined) {
+            targetsByTargetName1 = new Map();
+            this.targetsByTargetName.set(identifier, targetsByTargetName1);
+        }
+        let targetsByTargetName2 = targetsByTargetName1.get(targetName);
+        if (targetsByTargetName2 === undefined) {
+            targetsByTargetName2 = new Set();
+            targetsByTargetName1.set(targetName, targetsByTargetName2);
+        }
+        targetsByTargetName2.add(target);
+    }
+    removeStoredTargetByTargetName(target, identifier, targetName) {
+        const targetsByTargetName1 = this.targetsByTargetName.get(identifier);
+        if (targetsByTargetName1 === undefined) {
+            return;
+        }
+        const targetsByTargetName2 = targetsByTargetName1.get(targetName);
+        if (targetsByTargetName2 === undefined) {
+            return;
+        }
+        targetsByTargetName2.delete(target);
+    }
+    hasStoredTargetsByTargetName(identifier, targetName) {
+        const targetsByTargetName1 = this.targetsByTargetName.get(identifier);
+        if (targetsByTargetName1 === undefined) {
+            return false;
+        }
+        const targetsByTargetName2 = targetsByTargetName1.get(targetName);
+        if (targetsByTargetName2 === undefined) {
+            return false;
+        }
+        return targetsByTargetName2.size > 0;
+    }
+    getStoredTargetsByTargetName(identifier, targetName) {
+        const targetsByTargetName1 = this.targetsByTargetName.get(identifier);
+        if (targetsByTargetName1 === undefined) {
+            return [];
+        }
+        const targetsByTargetName2 = targetsByTargetName1.get(targetName);
+        if (targetsByTargetName2 === undefined) {
+            return [];
+        }
+        return [...targetsByTargetName2.values()];
+    }
+    addActionElement(element) {
+        const actionAttributeName = this.getActionAttributeName();
+        const portalledActionAttributeName = this.getPortalledActionAttributeName();
+        const actionsToProxy = [];
+        const actionsToDeleteProxyMethods = [];
+        const newAttributeValueTokens = [];
+        const newPortalledAttributeValueTokens = [];
+        if (!element.hasAttribute(actionAttributeName) && !element.hasAttribute(portalledActionAttributeName)) {
+            const elementToActionsSet = this.elementToActionsMap.get(element);
+            if (elementToActionsSet === undefined || elementToActionsSet.size === 0) {
+                return;
+            }
+            for (const directive of elementToActionsSet) {
+                const actionToElementsSet = this.actionToElementsMap.get(directive);
+                if (actionToElementsSet === undefined || actionToElementsSet.size === 0) {
+                    continue;
+                }
+                actionToElementsSet.delete(element);
+                if (actionToElementsSet.size === 0) {
+                    actionsToDeleteProxyMethods.push(this.parseActionToken(directive));
+                }
+            }
+        }
+        const actions = this.parseActions(element);
+        for (const action of actions) {
+            if (action.identifier === this.identifier) {
+                continue;
+            }
+            const directive = action.toString();
+            let actionToElementsSet = this.actionToElementsMap.get(directive);
+            if (actionToElementsSet === undefined) {
+                actionToElementsSet = new Set();
+                this.actionToElementsMap.set(directive, actionToElementsSet);
+            }
+            let elementToActionsSet = this.elementToActionsMap.get(element);
+            if (elementToActionsSet === undefined) {
+                elementToActionsSet = new Set();
+                this.elementToActionsMap.set(element, elementToActionsSet);
+            }
+            if (this.identifiers.has(action.identifier)) {
+                actionToElementsSet.add(element);
+                elementToActionsSet.add(directive);
+                actionsToProxy.push(action);
+                newPortalledAttributeValueTokens.push(directive);
+                continue;
+            }
+            newAttributeValueTokens.push(directive);
+            actionToElementsSet.delete(element);
+            elementToActionsSet.delete(directive);
+            if (actionToElementsSet.size === 0) {
+                actionsToDeleteProxyMethods.push(action);
+            }
+        }
+        for (const action of actionsToDeleteProxyMethods) {
+            const proxyActionName = this.getProxyActionName(action.method);
+            if (typeof this[proxyActionName] === 'function') {
+                delete this[proxyActionName];
+            }
+        }
+        for (const action of actionsToProxy) {
+            let identifierToActionElementsSet = this.identifierToActionElementsMap.get(action.identifier);
+            if (identifierToActionElementsSet === undefined) {
+                identifierToActionElementsSet = new Set();
+                this.identifierToActionElementsMap.set(action.identifier, identifierToActionElementsSet);
+            }
+            identifierToActionElementsSet.add(element);
+            let actionElementToIdentifiersSet = this.actionElementToIdentifiersMap.get(element);
+            if (actionElementToIdentifiersSet === undefined) {
+                actionElementToIdentifiersSet = new Set();
+                this.actionElementToIdentifiersMap.set(element, actionElementToIdentifiersSet);
+            }
+            actionElementToIdentifiersSet.add(action.identifier);
+            const proxyAction = this.toProxyAction(action);
+            newAttributeValueTokens.push(proxyAction.toString());
+            if (typeof this[proxyAction.method] === 'function') {
+                continue;
+            }
+            this[proxyAction.method] = (event) => {
+                const target = event.currentTarget;
+                if (!(target instanceof Element)) {
+                    console.warn(`Proxy action "${proxyAction.method}" called on non-element target`, event);
+                    return;
+                }
+                const targetActions = this.parseActions(target);
+                for (const targetAction of targetActions) {
+                    if (targetAction.identifier === this.identifier || targetAction.method !== action.method) {
+                        continue;
+                    }
+                    const controllers = this.controllers.get(targetAction.identifier);
+                    if (controllers === undefined) {
+                        continue;
+                    }
+                    event.params = this.getActionParams(target, targetAction.identifier);
+                    for (const controller of controllers) {
+                        try {
+                            controller.context.invokeControllerMethod(targetAction.method, event);
+                        }
+                        catch (e) {
+                            console.error(e);
+                        }
+                    }
+                }
+            };
+        }
+        this.setAttributeValue(element, actionAttributeName, newAttributeValueTokens.join(' '));
+        this.setAttributeValue(element, portalledActionAttributeName, newPortalledAttributeValueTokens.join(' '));
+    }
+    removeActionElement(element, forceActionsAttributeRemoval = false) {
+        const actionsToDeleteProxyMethods = [];
+        const newAttributeValueTokens = [];
+        const actions = this.parseActions(element);
+        this.elementToActionsMap.delete(element);
+        const actionElementToIdentifiersSet = this.actionElementToIdentifiersMap.get(element);
+        if (actionElementToIdentifiersSet !== undefined) {
+            for (const identifier of actionElementToIdentifiersSet) {
+                const identifierToActionElementsSet = this.identifierToActionElementsMap.get(identifier);
+                if (identifierToActionElementsSet !== undefined) {
+                    identifierToActionElementsSet.delete(element);
+                    if (identifierToActionElementsSet.size === 0) {
+                        this.identifierToActionElementsMap.delete(identifier);
+                    }
+                }
+            }
+            this.actionElementToIdentifiersMap.delete(element);
+        }
+        for (const action of actions) {
+            if (action.identifier === this.identifier) {
+                continue;
+            }
+            const directive = action.toString();
+            if (!forceActionsAttributeRemoval) {
+                newAttributeValueTokens.push(directive);
+            }
+            const actionToElementsSet = this.actionToElementsMap.get(directive);
+            if (actionToElementsSet !== undefined) {
+                actionToElementsSet.delete(element);
+                if (actionToElementsSet.size === 0) {
+                    this.actionToElementsMap.delete(directive);
+                    actionsToDeleteProxyMethods.push(action);
+                }
+            }
+        }
+        for (const action of actionsToDeleteProxyMethods) {
+            const proxyActionName = this.getProxyActionName(action.method);
+            if (typeof this[proxyActionName] === 'function') {
+                delete this[proxyActionName];
+            }
+        }
+        this.setAttributeValue(element, this.getActionAttributeName(), newAttributeValueTokens.join(' '));
+        this.setAttributeValue(element, this.getPortalledActionAttributeName(), null);
+    }
+    removeAllProxyActions() {
+        for (const identifier of this.identifiers) {
+            this.removeAllProxyActionsByIdentifier(identifier);
+        }
+    }
+    removeAllProxyActionsByIdentifier(identifier) {
+        const elements = this.identifierToActionElementsMap.get(identifier);
+        if (elements === undefined) {
+            return;
+        }
+        for (const element of elements) {
+            this.removeActionElement(element);
+        }
+        this.identifierToActionElementsMap.delete(identifier);
+    }
+    parseActions(element) {
+        let attributeValue = '';
+        const actionAttributeName = this.getActionAttributeName();
+        const portalledActionAttributeName = this.getPortalledActionAttributeName();
+        if (element.hasAttribute(actionAttributeName)) {
+            attributeValue = (attributeValue + ' ' + element.getAttribute(actionAttributeName)).trim();
+        }
+        if (element.hasAttribute(portalledActionAttributeName)) {
+            attributeValue = (attributeValue + ' ' + element.getAttribute(portalledActionAttributeName)).trim();
+        }
+        attributeValue = attributeValue.trim();
+        if (attributeValue === '') {
+            return [];
+        }
+        const actions = [];
+        const tokens = attributeValue.split(' ');
+        for (let token of tokens) {
+            token = token.trim();
+            if (token === '') {
+                continue;
+            }
+            actions.push(this.parseActionToken(token));
+        }
+        return actions;
+    }
+    parseActionToken(token) {
+        let [event, rest] = token.split('->');
+        if (rest === undefined) {
+            rest = event;
+            event = undefined;
+        }
+        const [identifier, methodDetails] = rest.split('#');
+        const [method, modifier] = methodDetails.split(':');
+        return new Action(event, identifier, method, modifier, token);
+    }
+    getProxyActionName(action) {
+        return `${proxyActionPrefix}${action}`;
+    }
+    getActionParams(element, identifier) {
+        const params = {};
+        const parseParam = (value) => {
+            try {
+                return JSON.parse(value);
+            }
+            catch (_) {
+                return value;
+            }
+        };
+        const pattern = new RegExp(`^data-${identifier}-(.+)-param$`, 'i');
+        for (const { name, value } of Array.from(element.attributes)) {
+            const match = name.match(pattern);
+            if (match === null) {
+                continue;
+            }
+            params[camelCase(match[1])] = parseParam(value);
+        }
+        return params;
+    }
+    toProxyAction(action) {
+        return new Action(action.event, this.identifier, this.getProxyActionName(action.method), action.modifier);
+    }
+    setAttributeValue(element, attributeName, value) {
+        value = value === null ? '' : value.trim();
+        if (value === '' && element.hasAttribute(attributeName)) {
+            element.removeAttribute(attributeName);
+        }
+        else if (value !== '' && !element.hasAttribute(attributeName)) {
+            element.setAttribute(attributeName, value);
+        }
+        else if (value !== '' && element.getAttribute(attributeName) !== value) {
+            element.setAttribute(attributeName, value);
+        }
+    }
+}