stimulus-rails 0.4.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aa026a69205d5d12a6f7dfe43892b6e832ac6d7331cb87fab2e1ae6ea6fd3a1f
-  data.tar.gz: 0b4534ef0afb61a881a8e702b6ccb61e8c24fddff649992269f2b7348546a412
+  metadata.gz: 96b9b74f895ea578d6b80110094d94dd06057c6bdaf9554ed57a07b402ef45be
+  data.tar.gz: 910d75cea83fffa62328a5a5f913ba5cf4b54a462ee092388b6e87ebf34f8565
 SHA512:
-  metadata.gz: 4512fadf940a7893da2ac9b906f6591a2829bca71f957d46693c5e1085480c9088877c70adb4c72e10b93a8c6f995d8525441bfcbb29677d1f47dea9e539dbfc
-  data.tar.gz: 3ba7838345956e406dc51183365e05f78e0b92b7102debb74b17a702d5e82b24e2173861f899704532ab0ab1fc06d0312e82f6969734f687d9b6a0186e2cbc0d
+  metadata.gz: '09f2b5d9bee56151ead42d5c5d854bc8aede8e2d3c18c97b9d6b2470de9bab42c119ccb1b2a7c0907f5719e8c6780cb1d0dddcec37176895064f31fe587a6ab4'
+  data.tar.gz: 7d922f521c2d3cb4f60fd6331340505c656817a83377c8ecd3341c0fbb73f224fbe8d5ee2fd64b976c451923b399a614e91be043acc23291613c133d7a577387

data/README.md

@@ -11,31 +11,24 @@ Stimulus for Rails makes it easy to use this modest framework with the asset pip
 2. Run `./bin/bundle install`.
 3. Run `./bin/rails stimulus:install`
 
-If using the asset pipeline to manage JavaScript, the last command will:
-
-1. Create an example controller in `app/assets/javascripts/controllers/hello_controller.js`.
-2. Append `import "@hotwired/stimulus-autoloader"` to your `app/assets/javascripts/application.js` entrypoint.
-
-Make sure you've already installed `importmap-rails` and that it's referenced before `stimulus-rails` (or `hotwire-rails`) in your Gemfile.
-
-If using Webpacker to manage JavaScript, the last command will:
-
-1. Import the controllers directory in the application pack.
-2. Create a controllers directory at `app/javascripts/controllers`.
-3. Create an example controller in `app/javascripts/controllers/hello_controller.js`.
-4. Install the Stimulus NPM package.
+The installer will automatically detect whether you're using an [import map](https://github.com/rails/importmap-rails) or [JavaScript bundler](https://github.com/rails/jsbundling-rails) to manage your application's JavaScript. If you're using an import map, the Stimulus dependencies will be pinned to the versions of the library included with this gem. If you're using node, yarn will add the dependencies to your package.json file.
 
 
 ## Usage
 
-With the installation done, you'll automatically have activated Stimulus through the controller autoloader. You can now easily add new Stimulus controllers that'll be loaded via ESM dynamic imports.
+The installer amends your JavaScript entry point at `app/javascript/application.js` to import the `app/javascript/controllers/index.js` file, which is responsible for setting up your Stimulus application and registering your controllers.
+
+With an import-mapped application, controllers are automatically pinned and registered based on the file structure. With a node application, controllers need to be imported and registered directly in the index.js file, but this is done automatically using either the Stimulus generator (`./bin/rails generate stimulus [controller]`) or the dedicated `stimulus:manifest:update` task. Either will overwrite the `controllers/index.js` file.
 
-For example, a more advanced `hello_controller` could look like this:
+You're encouraged to use the generator to add new controllers like so:
 
 ```javascript
+// Run "./bin/rails g stimulus hello" to create the file and update the index, then amend:
+
 // app/assets/javascripts/controllers/hello_controller.js
-import { Controller } from "stimulus"
+import { Controller } from "@hotwired/stimulus"
 
+// Connects with data-controller="hello"
 export default class extends Controller {
   static targets = [ "name", "output" ]
 

data/app/assets/javascripts/stimulus-importmap-autoloader.js

@@ -1,13 +1,17 @@
 // FIXME: es-module-shim won't shim the dynamic import without this explicit import
 import "@hotwired/stimulus"
 
-export function registerControllersFrom(under, importmap, application) {
-  const paths = Object.keys(importmap)
+export function registerControllersFrom(under, application) {
+  const paths = Object.keys(parseImportmapJson())
     .filter(path => path.match(new RegExp(`^${under}/.*_controller$`)))
 
   paths.forEach(path => registerControllerFromPath(path, under, application))
 }
 
+export function parseImportmapJson() {
+  return JSON.parse(document.querySelector("script[type=importmap]").text).imports
+}
+
 function registerControllerFromPath(path, under, application) {
   const name = path
     .replace(`${under}/`, "")

data/app/assets/javascripts/stimulus.js

@@ -1,4 +1,4 @@
 //= require ./stimulus@2.js
-//= link ./stimulus@3.0.0-beta.1.js
+//= link ./stimulus@3.0.0-beta.2.js
 //= link ./stimulus-autoloader.js
 //= link ./stimulus-importmap-autoloader.js

data/app/assets/javascripts/stimulus@3.0.0-beta.2.js

@@ -0,0 +1,2034 @@
+/*
+Stimulus 3.0.0-beta.2
+Copyright © 2021 Basecamp, LLC
+ */
+class EventListener {
+    constructor(eventTarget, eventName, eventOptions) {
+        this.eventTarget = eventTarget;
+        this.eventName = eventName;
+        this.eventOptions = eventOptions;
+        this.unorderedBindings = new Set();
+    }
+    connect() {
+        this.eventTarget.addEventListener(this.eventName, this, this.eventOptions);
+    }
+    disconnect() {
+        this.eventTarget.removeEventListener(this.eventName, this, this.eventOptions);
+    }
+    bindingConnected(binding) {
+        this.unorderedBindings.add(binding);
+    }
+    bindingDisconnected(binding) {
+        this.unorderedBindings.delete(binding);
+    }
+    handleEvent(event) {
+        const extendedEvent = extendEvent(event);
+        for (const binding of this.bindings) {
+            if (extendedEvent.immediatePropagationStopped) {
+                break;
+            }
+            else {
+                binding.handleEvent(extendedEvent);
+            }
+        }
+    }
+    get bindings() {
+        return Array.from(this.unorderedBindings).sort((left, right) => {
+            const leftIndex = left.index, rightIndex = right.index;
+            return leftIndex < rightIndex ? -1 : leftIndex > rightIndex ? 1 : 0;
+        });
+    }
+}
+function extendEvent(event) {
+    if ("immediatePropagationStopped" in event) {
+        return event;
+    }
+    else {
+        const { stopImmediatePropagation } = event;
+        return Object.assign(event, {
+            immediatePropagationStopped: false,
+            stopImmediatePropagation() {
+                this.immediatePropagationStopped = true;
+                stopImmediatePropagation.call(this);
+            }
+        });
+    }
+}
+
+class Dispatcher {
+    constructor(application) {
+        this.application = application;
+        this.eventListenerMaps = new Map;
+        this.started = false;
+    }
+    start() {
+        if (!this.started) {
+            this.started = true;
+            this.eventListeners.forEach(eventListener => eventListener.connect());
+        }
+    }
+    stop() {
+        if (this.started) {
+            this.started = false;
+            this.eventListeners.forEach(eventListener => eventListener.disconnect());
+        }
+    }
+    get eventListeners() {
+        return Array.from(this.eventListenerMaps.values())
+            .reduce((listeners, map) => listeners.concat(Array.from(map.values())), []);
+    }
+    bindingConnected(binding) {
+        this.fetchEventListenerForBinding(binding).bindingConnected(binding);
+    }
+    bindingDisconnected(binding) {
+        this.fetchEventListenerForBinding(binding).bindingDisconnected(binding);
+    }
+    handleError(error, message, detail = {}) {
+        this.application.handleError(error, `Error ${message}`, detail);
+    }
+    fetchEventListenerForBinding(binding) {
+        const { eventTarget, eventName, eventOptions } = binding;
+        return this.fetchEventListener(eventTarget, eventName, eventOptions);
+    }
+    fetchEventListener(eventTarget, eventName, eventOptions) {
+        const eventListenerMap = this.fetchEventListenerMapForEventTarget(eventTarget);
+        const cacheKey = this.cacheKey(eventName, eventOptions);
+        let eventListener = eventListenerMap.get(cacheKey);
+        if (!eventListener) {
+            eventListener = this.createEventListener(eventTarget, eventName, eventOptions);
+            eventListenerMap.set(cacheKey, eventListener);
+        }
+        return eventListener;
+    }
+    createEventListener(eventTarget, eventName, eventOptions) {
+        const eventListener = new EventListener(eventTarget, eventName, eventOptions);
+        if (this.started) {
+            eventListener.connect();
+        }
+        return eventListener;
+    }
+    fetchEventListenerMapForEventTarget(eventTarget) {
+        let eventListenerMap = this.eventListenerMaps.get(eventTarget);
+        if (!eventListenerMap) {
+            eventListenerMap = new Map;
+            this.eventListenerMaps.set(eventTarget, eventListenerMap);
+        }
+        return eventListenerMap;
+    }
+    cacheKey(eventName, eventOptions) {
+        const parts = [eventName];
+        Object.keys(eventOptions).sort().forEach(key => {
+            parts.push(`${eventOptions[key] ? "" : "!"}${key}`);
+        });
+        return parts.join(":");
+    }
+}
+
+const descriptorPattern = /^((.+?)(@(window|document))?->)?(.+?)(#([^:]+?))(:(.+))?$/;
+function parseActionDescriptorString(descriptorString) {
+    const source = descriptorString.trim();
+    const matches = source.match(descriptorPattern) || [];
+    return {
+        eventTarget: parseEventTarget(matches[4]),
+        eventName: matches[2],
+        eventOptions: matches[9] ? parseEventOptions(matches[9]) : {},
+        identifier: matches[5],
+        methodName: matches[7]
+    };
+}
+function parseEventTarget(eventTargetName) {
+    if (eventTargetName == "window") {
+        return window;
+    }
+    else if (eventTargetName == "document") {
+        return document;
+    }
+}
+function parseEventOptions(eventOptions) {
+    return eventOptions.split(":").reduce((options, token) => Object.assign(options, { [token.replace(/^!/, "")]: !/^!/.test(token) }), {});
+}
+function stringifyEventTarget(eventTarget) {
+    if (eventTarget == window) {
+        return "window";
+    }
+    else if (eventTarget == document) {
+        return "document";
+    }
+}
+
+function camelize(value) {
+    return value.replace(/(?:[_-])([a-z0-9])/g, (_, char) => char.toUpperCase());
+}
+function capitalize(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function dasherize(value) {
+    return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`);
+}
+function tokenize(value) {
+    return value.match(/[^\s]+/g) || [];
+}
+
+class Action {
+    constructor(element, index, descriptor) {
+        this.element = element;
+        this.index = index;
+        this.eventTarget = descriptor.eventTarget || element;
+        this.eventName = descriptor.eventName || getDefaultEventNameForElement(element) || error("missing event name");
+        this.eventOptions = descriptor.eventOptions || {};
+        this.identifier = descriptor.identifier || error("missing identifier");
+        this.methodName = descriptor.methodName || error("missing method name");
+    }
+    static forToken(token) {
+        return new this(token.element, token.index, parseActionDescriptorString(token.content));
+    }
+    toString() {
+        const eventNameSuffix = this.eventTargetName ? `@${this.eventTargetName}` : "";
+        return `${this.eventName}${eventNameSuffix}->${this.identifier}#${this.methodName}`;
+    }
+    get params() {
+        if (this.eventTarget instanceof Element) {
+            return this.getParamsFromEventTargetAttributes(this.eventTarget);
+        }
+        else {
+            return {};
+        }
+    }
+    getParamsFromEventTargetAttributes(eventTarget) {
+        const params = {};
+        const pattern = new RegExp(`^data-${this.identifier}-(.+)-param$`);
+        const attributes = Array.from(eventTarget.attributes);
+        attributes.forEach(({ name, value }) => {
+            const match = name.match(pattern);
+            const key = match && match[1];
+            if (key) {
+                Object.assign(params, { [camelize(key)]: typecast(value) });
+            }
+        });
+        return params;
+    }
+    get eventTargetName() {
+        return stringifyEventTarget(this.eventTarget);
+    }
+}
+const defaultEventNames = {
+    "a": e => "click",
+    "button": e => "click",
+    "form": e => "submit",
+    "input": e => e.getAttribute("type") == "submit" ? "click" : "input",
+    "select": e => "change",
+    "textarea": e => "input"
+};
+function getDefaultEventNameForElement(element) {
+    const tagName = element.tagName.toLowerCase();
+    if (tagName in defaultEventNames) {
+        return defaultEventNames[tagName](element);
+    }
+}
+function error(message) {
+    throw new Error(message);
+}
+function typecast(value) {
+    try {
+        return JSON.parse(value);
+    }
+    catch (o_O) {
+        return value;
+    }
+}
+
+class Binding {
+    constructor(context, action) {
+        this.context = context;
+        this.action = action;
+    }
+    get index() {
+        return this.action.index;
+    }
+    get eventTarget() {
+        return this.action.eventTarget;
+    }
+    get eventOptions() {
+        return this.action.eventOptions;
+    }
+    get identifier() {
+        return this.context.identifier;
+    }
+    handleEvent(event) {
+        if (this.willBeInvokedByEvent(event)) {
+            this.invokeWithEvent(event);
+        }
+    }
+    get eventName() {
+        return this.action.eventName;
+    }
+    get method() {
+        const method = this.controller[this.methodName];
+        if (typeof method == "function") {
+            return method;
+        }
+        throw new Error(`Action "${this.action}" references undefined method "${this.methodName}"`);
+    }
+    invokeWithEvent(event) {
+        const { target, currentTarget } = event;
+        try {
+            const { params } = this.action;
+            const actionEvent = Object.assign(event, { params });
+            this.method.call(this.controller, actionEvent);
+            this.context.logDebugActivity(this.methodName, { event, target, currentTarget, action: this.methodName });
+        }
+        catch (error) {
+            const { identifier, controller, element, index } = this;
+            const detail = { identifier, controller, element, index, event };
+            this.context.handleError(error, `invoking action "${this.action}"`, detail);
+        }
+    }
+    willBeInvokedByEvent(event) {
+        const eventTarget = event.target;
+        if (this.element === eventTarget) {
+            return true;
+        }
+        else if (eventTarget instanceof Element && this.element.contains(eventTarget)) {
+            return this.scope.containsElement(eventTarget);
+        }
+        else {
+            return this.scope.containsElement(this.action.element);
+        }
+    }
+    get controller() {
+        return this.context.controller;
+    }
+    get methodName() {
+        return this.action.methodName;
+    }
+    get element() {
+        return this.scope.element;
+    }
+    get scope() {
+        return this.context.scope;
+    }
+}
+
+class ElementObserver {
+    constructor(element, delegate) {
+        this.element = element;
+        this.started = false;
+        this.delegate = delegate;
+        this.elements = new Set;
+        this.mutationObserver = new MutationObserver((mutations) => this.processMutations(mutations));
+    }
+    start() {
+        if (!this.started) {
+            this.started = true;
+            this.mutationObserver.observe(this.element, { attributes: true, childList: true, subtree: true });
+            this.refresh();
+        }
+    }
+    stop() {
+        if (this.started) {
+            this.mutationObserver.takeRecords();
+            this.mutationObserver.disconnect();
+            this.started = false;
+        }
+    }
+    refresh() {
+        if (this.started) {
+            const matches = new Set(this.matchElementsInTree());
+            for (const element of Array.from(this.elements)) {
+                if (!matches.has(element)) {
+                    this.removeElement(element);
+                }
+            }
+            for (const element of Array.from(matches)) {
+                this.addElement(element);
+            }
+        }
+    }
+    processMutations(mutations) {
+        if (this.started) {
+            for (const mutation of mutations) {
+                this.processMutation(mutation);
+            }
+        }
+    }
+    processMutation(mutation) {
+        if (mutation.type == "attributes") {
+            this.processAttributeChange(mutation.target, mutation.attributeName);
+        }
+        else if (mutation.type == "childList") {
+            this.processRemovedNodes(mutation.removedNodes);
+            this.processAddedNodes(mutation.addedNodes);
+        }
+    }
+    processAttributeChange(node, attributeName) {
+        const element = node;
+        if (this.elements.has(element)) {
+            if (this.delegate.elementAttributeChanged && this.matchElement(element)) {
+                this.delegate.elementAttributeChanged(element, attributeName);
+            }
+            else {
+                this.removeElement(element);
+            }
+        }
+        else if (this.matchElement(element)) {
+            this.addElement(element);
+        }
+    }
+    processRemovedNodes(nodes) {
+        for (const node of Array.from(nodes)) {
+            const element = this.elementFromNode(node);
+            if (element) {
+                this.processTree(element, this.removeElement);
+            }
+        }
+    }
+    processAddedNodes(nodes) {
+        for (const node of Array.from(nodes)) {
+            const element = this.elementFromNode(node);
+            if (element && this.elementIsActive(element)) {
+                this.processTree(element, this.addElement);
+            }
+        }
+    }
+    matchElement(element) {
+        return this.delegate.matchElement(element);
+    }
+    matchElementsInTree(tree = this.element) {
+        return this.delegate.matchElementsInTree(tree);
+    }
+    processTree(tree, processor) {
+        for (const element of this.matchElementsInTree(tree)) {
+            processor.call(this, element);
+        }
+    }
+    elementFromNode(node) {
+        if (node.nodeType == Node.ELEMENT_NODE) {
+            return node;
+        }
+    }
+    elementIsActive(element) {
+        if (element.isConnected != this.element.isConnected) {
+            return false;
+        }
+        else {
+            return this.element.contains(element);
+        }
+    }
+    addElement(element) {
+        if (!this.elements.has(element)) {
+            if (this.elementIsActive(element)) {
+                this.elements.add(element);
+                if (this.delegate.elementMatched) {
+                    this.delegate.elementMatched(element);
+                }
+            }
+        }
+    }
+    removeElement(element) {
+        if (this.elements.has(element)) {
+            this.elements.delete(element);
+            if (this.delegate.elementUnmatched) {
+                this.delegate.elementUnmatched(element);
+            }
+        }
+    }
+}
+
+class AttributeObserver {
+    constructor(element, attributeName, delegate) {
+        this.attributeName = attributeName;
+        this.delegate = delegate;
+        this.elementObserver = new ElementObserver(element, this);
+    }
+    get element() {
+        return this.elementObserver.element;
+    }
+    get selector() {
+        return `[${this.attributeName}]`;
+    }
+    start() {
+        this.elementObserver.start();
+    }
+    stop() {
+        this.elementObserver.stop();
+    }
+    refresh() {
+        this.elementObserver.refresh();
+    }
+    get started() {
+        return this.elementObserver.started;
+    }
+    matchElement(element) {
+        return element.hasAttribute(this.attributeName);
+    }
+    matchElementsInTree(tree) {
+        const match = this.matchElement(tree) ? [tree] : [];
+        const matches = Array.from(tree.querySelectorAll(this.selector));
+        return match.concat(matches);
+    }
+    elementMatched(element) {
+        if (this.delegate.elementMatchedAttribute) {
+            this.delegate.elementMatchedAttribute(element, this.attributeName);
+        }
+    }
+    elementUnmatched(element) {
+        if (this.delegate.elementUnmatchedAttribute) {
+            this.delegate.elementUnmatchedAttribute(element, this.attributeName);
+        }
+    }
+    elementAttributeChanged(element, attributeName) {
+        if (this.delegate.elementAttributeValueChanged && this.attributeName == attributeName) {
+            this.delegate.elementAttributeValueChanged(element, attributeName);
+        }
+    }
+}
+
+class StringMapObserver {
+    constructor(element, delegate) {
+        this.element = element;
+        this.delegate = delegate;
+        this.started = false;
+        this.stringMap = new Map;
+        this.mutationObserver = new MutationObserver(mutations => this.processMutations(mutations));
+    }
+    start() {
+        if (!this.started) {
+            this.started = true;
+            this.mutationObserver.observe(this.element, { attributes: true, attributeOldValue: true });
+            this.refresh();
+        }
+    }
+    stop() {
+        if (this.started) {
+            this.mutationObserver.takeRecords();
+            this.mutationObserver.disconnect();
+            this.started = false;
+        }
+    }
+    refresh() {
+        if (this.started) {
+            for (const attributeName of this.knownAttributeNames) {
+                this.refreshAttribute(attributeName, null);
+            }
+        }
+    }
+    processMutations(mutations) {
+        if (this.started) {
+            for (const mutation of mutations) {
+                this.processMutation(mutation);
+            }
+        }
+    }
+    processMutation(mutation) {
+        const attributeName = mutation.attributeName;
+        if (attributeName) {
+            this.refreshAttribute(attributeName, mutation.oldValue);
+        }
+    }
+    refreshAttribute(attributeName, oldValue) {
+        const key = this.delegate.getStringMapKeyForAttribute(attributeName);
+        if (key != null) {
+            if (!this.stringMap.has(attributeName)) {
+                this.stringMapKeyAdded(key, attributeName);
+            }
+            const value = this.element.getAttribute(attributeName);
+            if (this.stringMap.get(attributeName) != value) {
+                this.stringMapValueChanged(value, key, oldValue);
+            }
+            if (value == null) {
+                const oldValue = this.stringMap.get(attributeName);
+                this.stringMap.delete(attributeName);
+                if (oldValue)
+                    this.stringMapKeyRemoved(key, attributeName, oldValue);
+            }
+            else {
+                this.stringMap.set(attributeName, value);
+            }
+        }
+    }
+    stringMapKeyAdded(key, attributeName) {
+        if (this.delegate.stringMapKeyAdded) {
+            this.delegate.stringMapKeyAdded(key, attributeName);
+        }
+    }
+    stringMapValueChanged(value, key, oldValue) {
+        if (this.delegate.stringMapValueChanged) {
+            this.delegate.stringMapValueChanged(value, key, oldValue);
+        }
+    }
+    stringMapKeyRemoved(key, attributeName, oldValue) {
+        if (this.delegate.stringMapKeyRemoved) {
+            this.delegate.stringMapKeyRemoved(key, attributeName, oldValue);
+        }
+    }
+    get knownAttributeNames() {
+        return Array.from(new Set(this.currentAttributeNames.concat(this.recordedAttributeNames)));
+    }
+    get currentAttributeNames() {
+        return Array.from(this.element.attributes).map(attribute => attribute.name);
+    }
+    get recordedAttributeNames() {
+        return Array.from(this.stringMap.keys());
+    }
+}
+
+function add(map, key, value) {
+    fetch(map, key).add(value);
+}
+function del(map, key, value) {
+    fetch(map, key).delete(value);
+    prune(map, key);
+}
+function fetch(map, key) {
+    let values = map.get(key);
+    if (!values) {
+        values = new Set();
+        map.set(key, values);
+    }
+    return values;
+}
+function prune(map, key) {
+    const values = map.get(key);
+    if (values != null && values.size == 0) {
+        map.delete(key);
+    }
+}
+
+class Multimap {
+    constructor() {
+        this.valuesByKey = new Map();
+    }
+    get keys() {
+        return Array.from(this.valuesByKey.keys());
+    }
+    get values() {
+        const sets = Array.from(this.valuesByKey.values());
+        return sets.reduce((values, set) => values.concat(Array.from(set)), []);
+    }
+    get size() {
+        const sets = Array.from(this.valuesByKey.values());
+        return sets.reduce((size, set) => size + set.size, 0);
+    }
+    add(key, value) {
+        add(this.valuesByKey, key, value);
+    }
+    delete(key, value) {
+        del(this.valuesByKey, key, value);
+    }
+    has(key, value) {
+        const values = this.valuesByKey.get(key);
+        return values != null && values.has(value);
+    }
+    hasKey(key) {
+        return this.valuesByKey.has(key);
+    }
+    hasValue(value) {
+        const sets = Array.from(this.valuesByKey.values());
+        return sets.some(set => set.has(value));
+    }
+    getValuesForKey(key) {
+        const values = this.valuesByKey.get(key);
+        return values ? Array.from(values) : [];
+    }
+    getKeysForValue(value) {
+        return Array.from(this.valuesByKey)
+            .filter(([key, values]) => values.has(value))
+            .map(([key, values]) => key);
+    }
+}
+
+class IndexedMultimap extends Multimap {
+    constructor() {
+        super();
+        this.keysByValue = new Map;
+    }
+    get values() {
+        return Array.from(this.keysByValue.keys());
+    }
+    add(key, value) {
+        super.add(key, value);
+        add(this.keysByValue, value, key);
+    }
+    delete(key, value) {
+        super.delete(key, value);
+        del(this.keysByValue, value, key);
+    }
+    hasValue(value) {
+        return this.keysByValue.has(value);
+    }
+    getKeysForValue(value) {
+        const set = this.keysByValue.get(value);
+        return set ? Array.from(set) : [];
+    }
+}
+
+class TokenListObserver {
+    constructor(element, attributeName, delegate) {
+        this.attributeObserver = new AttributeObserver(element, attributeName, this);
+        this.delegate = delegate;
+        this.tokensByElement = new Multimap;
+    }
+    get started() {
+        return this.attributeObserver.started;
+    }
+    start() {
+        this.attributeObserver.start();
+    }
+    stop() {
+        this.attributeObserver.stop();
+    }
+    refresh() {
+        this.attributeObserver.refresh();
+    }
+    get element() {
+        return this.attributeObserver.element;
+    }
+    get attributeName() {
+        return this.attributeObserver.attributeName;
+    }
+    elementMatchedAttribute(element) {
+        this.tokensMatched(this.readTokensForElement(element));
+    }
+    elementAttributeValueChanged(element) {
+        const [unmatchedTokens, matchedTokens] = this.refreshTokensForElement(element);
+        this.tokensUnmatched(unmatchedTokens);
+        this.tokensMatched(matchedTokens);
+    }
+    elementUnmatchedAttribute(element) {
+        this.tokensUnmatched(this.tokensByElement.getValuesForKey(element));
+    }
+    tokensMatched(tokens) {
+        tokens.forEach(token => this.tokenMatched(token));
+    }
+    tokensUnmatched(tokens) {
+        tokens.forEach(token => this.tokenUnmatched(token));
+    }
+    tokenMatched(token) {
+        this.delegate.tokenMatched(token);
+        this.tokensByElement.add(token.element, token);
+    }
+    tokenUnmatched(token) {
+        this.delegate.tokenUnmatched(token);
+        this.tokensByElement.delete(token.element, token);
+    }
+    refreshTokensForElement(element) {
+        const previousTokens = this.tokensByElement.getValuesForKey(element);
+        const currentTokens = this.readTokensForElement(element);
+        const firstDifferingIndex = zip(previousTokens, currentTokens)
+            .findIndex(([previousToken, currentToken]) => !tokensAreEqual(previousToken, currentToken));
+        if (firstDifferingIndex == -1) {
+            return [[], []];
+        }
+        else {
+            return [previousTokens.slice(firstDifferingIndex), currentTokens.slice(firstDifferingIndex)];
+        }
+    }
+    readTokensForElement(element) {
+        const attributeName = this.attributeName;
+        const tokenString = element.getAttribute(attributeName) || "";
+        return parseTokenString(tokenString, element, attributeName);
+    }
+}
+function parseTokenString(tokenString, element, attributeName) {
+    return tokenString.trim().split(/\s+/).filter(content => content.length)
+        .map((content, index) => ({ element, attributeName, content, index }));
+}
+function zip(left, right) {
+    const length = Math.max(left.length, right.length);
+    return Array.from({ length }, (_, index) => [left[index], right[index]]);
+}
+function tokensAreEqual(left, right) {
+    return left && right && left.index == right.index && left.content == right.content;
+}
+
+class ValueListObserver {
+    constructor(element, attributeName, delegate) {
+        this.tokenListObserver = new TokenListObserver(element, attributeName, this);
+        this.delegate = delegate;
+        this.parseResultsByToken = new WeakMap;
+        this.valuesByTokenByElement = new WeakMap;
+    }
+    get started() {
+        return this.tokenListObserver.started;
+    }
+    start() {
+        this.tokenListObserver.start();
+    }
+    stop() {
+        this.tokenListObserver.stop();
+    }
+    refresh() {
+        this.tokenListObserver.refresh();
+    }
+    get element() {
+        return this.tokenListObserver.element;
+    }
+    get attributeName() {
+        return this.tokenListObserver.attributeName;
+    }
+    tokenMatched(token) {
+        const { element } = token;
+        const { value } = this.fetchParseResultForToken(token);
+        if (value) {
+            this.fetchValuesByTokenForElement(element).set(token, value);
+            this.delegate.elementMatchedValue(element, value);
+        }
+        else {
+            this.delegate.elementMatchedNoValue(token);
+        }
+    }
+    tokenUnmatched(token) {
+        const { element } = token;
+        const { value } = this.fetchParseResultForToken(token);
+        if (value) {
+            this.fetchValuesByTokenForElement(element).delete(token);
+            this.delegate.elementUnmatchedValue(element, value);
+        }
+    }
+    fetchParseResultForToken(token) {
+        let parseResult = this.parseResultsByToken.get(token);
+        if (!parseResult) {
+            parseResult = this.parseToken(token);
+            this.parseResultsByToken.set(token, parseResult);
+        }
+        return parseResult;
+    }
+    fetchValuesByTokenForElement(element) {
+        let valuesByToken = this.valuesByTokenByElement.get(element);
+        if (!valuesByToken) {
+            valuesByToken = new Map;
+            this.valuesByTokenByElement.set(element, valuesByToken);
+        }
+        return valuesByToken;
+    }
+    parseToken(token) {
+        try {
+            const value = this.delegate.parseValueForToken(token);
+            return { value };
+        }
+        catch (error) {
+            return { error };
+        }
+    }
+}
+
+class BindingObserver {
+    constructor(context, delegate) {
+        this.context = context;
+        this.delegate = delegate;
+        this.bindingsByAction = new Map;
+    }
+    start() {
+        if (!this.valueListObserver) {
+            this.valueListObserver = new ValueListObserver(this.element, this.actionAttribute, this);
+            this.valueListObserver.start();
+        }
+    }
+    stop() {
+        if (this.valueListObserver) {
+            this.valueListObserver.stop();
+            delete this.valueListObserver;
+            this.disconnectAllActions();
+        }
+    }
+    get element() {
+        return this.context.element;
+    }
+    get identifier() {
+        return this.context.identifier;
+    }
+    get actionAttribute() {
+        return this.schema.actionAttribute;
+    }
+    get schema() {
+        return this.context.schema;
+    }
+    get bindings() {
+        return Array.from(this.bindingsByAction.values());
+    }
+    connectAction(action) {
+        const binding = new Binding(this.context, action);
+        const { controller } = binding.context;
+        const method = controller[action.methodName];
+        this.bindingsByAction.set(action, binding);
+        this.delegate.bindingConnected(binding);
+        if (typeof method != "function") {
+            this.context.handleWarning(`Action "${action.toString()}" references undefined method "${action.methodName}" on controller "${action.identifier}"`, `connecting action "${action.toString()}"`);
+        }
+    }
+    disconnectAction(action) {
+        const binding = this.bindingsByAction.get(action);
+        if (binding) {
+            this.bindingsByAction.delete(action);
+            this.delegate.bindingDisconnected(binding);
+        }
+    }
+    disconnectAllActions() {
+        this.bindings.forEach(binding => this.delegate.bindingDisconnected(binding));
+        this.bindingsByAction.clear();
+    }
+    parseValueForToken(token) {
+        const action = Action.forToken(token);
+        if (action.identifier == this.identifier) {
+            return action;
+        }
+    }
+    elementMatchedValue(element, action) {
+        this.connectAction(action);
+    }
+    elementUnmatchedValue(element, action) {
+        this.disconnectAction(action);
+    }
+    elementMatchedNoValue(token) {
+        const action = Action.forToken(token);
+        this.context.handleWarning(`Action "${token.content}" references undefined controller "${action.identifier}"`, `connecting action "${token.content}"`);
+    }
+}
+
+function readInheritableStaticArrayValues(constructor, propertyName) {
+    const ancestors = getAncestorsForConstructor(constructor);
+    return Array.from(ancestors.reduce((values, constructor) => {
+        getOwnStaticArrayValues(constructor, propertyName).forEach(name => values.add(name));
+        return values;
+    }, new Set));
+}
+function readInheritableStaticObjectPairs(constructor, propertyName) {
+    const ancestors = getAncestorsForConstructor(constructor);
+    return ancestors.reduce((pairs, constructor) => {
+        pairs.push(...getOwnStaticObjectPairs(constructor, propertyName));
+        return pairs;
+    }, []);
+}
+function getAncestorsForConstructor(constructor) {
+    const ancestors = [];
+    while (constructor) {
+        ancestors.push(constructor);
+        constructor = Object.getPrototypeOf(constructor);
+    }
+    return ancestors.reverse();
+}
+function getOwnStaticArrayValues(constructor, propertyName) {
+    const definition = constructor[propertyName];
+    return Array.isArray(definition) ? definition : [];
+}
+function getOwnStaticObjectPairs(constructor, propertyName) {
+    const definition = constructor[propertyName];
+    return definition ? Object.keys(definition).map(key => [key, definition[key]]) : [];
+}
+
+class TargetGuide {
+    constructor(scope, controller) {
+        this.scope = scope;
+        this.controller = controller;
+        this.definedTargets = readInheritableStaticArrayValues(this.controller.constructor, "targets");
+        this.searchForUndefinedTargets();
+    }
+    get identifier() {
+        return this.scope.identifier;
+    }
+    get targets() {
+        return this.scope.targets;
+    }
+    get registeredControllers() {
+        return this.controller.application.router.modules.map((c) => c.identifier);
+    }
+    controllerRegistered(controllerName) {
+        return this.registeredControllers.includes(controllerName);
+    }
+    targetDefined(targetName) {
+        return this.definedTargets.includes(targetName);
+    }
+    getAllTargets(element) {
+        const attribute = `data-${this.identifier}-target`;
+        const selector = `[${attribute}]`;
+        return Array.from(element.querySelectorAll(selector)).map((element) => {
+            const target = element.getAttribute(attribute);
+            return {
+                identifier: this.identifier,
+                target,
+                element,
+                attribute,
+                legacy: false
+            };
+        });
+    }
+    getAllLegacyTargets(element) {
+        const attribute = "data-target";
+        const selector = `[${attribute}]`;
+        return Array.from(element.querySelectorAll(selector)).map((element) => {
+            const value = element.getAttribute(attribute);
+            const parts = value ? value.split(".") : [];
+            return {
+                identifier: parts[0],
+                target: parts[1],
+                element,
+                attribute,
+                legacy: true
+            };
+        });
+    }
+    searchForUndefinedTargets() {
+        const { element } = this.scope;
+        const targets = [
+            ...this.getAllTargets(element),
+            ...this.getAllLegacyTargets(element)
+        ];
+        targets.forEach((descriptor) => {
+            const { identifier, attribute, target, legacy, element } = descriptor;
+            if (identifier && target) {
+                this.handleWarningForUndefinedTarget(descriptor);
+            }
+            else if (identifier && !target) {
+                this.controller.context.handleWarning(`The "${attribute}" attribute of the Element doesn't include a target. Please specify a target for the "${identifier}" controller.`, `connecting target for "${identifier}"`, { identifier, target, attribute, element });
+            }
+            else if (legacy && !target) {
+                this.controller.context.handleWarning(`The "${attribute}" attribute of the Element doesn't include a value. Please specify a controller and target value in the right format.`, `connecting target`, { identifier, target, attribute, element });
+            }
+        });
+    }
+    handleWarningForUndefinedTarget(descriptor) {
+        const { identifier, target, element, attribute } = descriptor;
+        if (identifier === this.identifier) {
+            if (!this.targetDefined(target)) {
+                this.controller.context.handleWarning(`Element references undefined target "${target}" for controller "${identifier}". Make sure you defined the target "${target}" in the "static targets" array of your controller.`, `connecting target "${identifier}.${target}"`, { identifier, target, element, attribute });
+            }
+        }
+        else {
+            if (!this.controllerRegistered(identifier)) {
+                this.controller.context.handleWarning(`Target "${target}" references undefined controller "${identifier}". Make sure you registered the "${identifier}" controller.`, `connecting target "${identifier}.${target}"`, { identifier, target, element, attribute });
+            }
+        }
+    }
+}
+
+class ValueObserver {
+    constructor(context, receiver) {
+        this.context = context;
+        this.receiver = receiver;
+        this.stringMapObserver = new StringMapObserver(this.element, this);
+        this.valueDescriptorMap = this.controller.valueDescriptorMap;
+        this.invokeChangedCallbacksForDefaultValues();
+    }
+    start() {
+        this.stringMapObserver.start();
+    }
+    stop() {
+        this.stringMapObserver.stop();
+    }
+    get element() {
+        return this.context.element;
+    }
+    get controller() {
+        return this.context.controller;
+    }
+    getStringMapKeyForAttribute(attributeName) {
+        if (attributeName in this.valueDescriptorMap) {
+            return this.valueDescriptorMap[attributeName].name;
+        }
+    }
+    stringMapKeyAdded(key, attributeName) {
+        const descriptor = this.valueDescriptorMap[attributeName];
+        if (!this.hasValue(key)) {
+            this.invokeChangedCallback(key, descriptor.writer(this.receiver[key]), descriptor.writer(descriptor.defaultValue));
+        }
+    }
+    stringMapValueChanged(value, name, oldValue) {
+        const descriptor = this.valueDescriptorNameMap[name];
+        if (value === null)
+            return;
+        if (oldValue === null) {
+            oldValue = descriptor.writer(descriptor.defaultValue);
+        }
+        this.invokeChangedCallback(name, value, oldValue);
+    }
+    stringMapKeyRemoved(key, attributeName, oldValue) {
+        const descriptor = this.valueDescriptorNameMap[key];
+        if (this.hasValue(key)) {
+            this.invokeChangedCallback(key, descriptor.writer(this.receiver[key]), oldValue);
+        }
+        else {
+            this.invokeChangedCallback(key, descriptor.writer(descriptor.defaultValue), oldValue);
+        }
+    }
+    invokeChangedCallbacksForDefaultValues() {
+        for (const { key, name, defaultValue, writer } of this.valueDescriptors) {
+            if (defaultValue != undefined && !this.controller.data.has(key)) {
+                this.invokeChangedCallback(name, writer(defaultValue), undefined);
+            }
+        }
+    }
+    invokeChangedCallback(name, rawValue, rawOldValue) {
+        const changedMethodName = `${name}Changed`;
+        const changedMethod = this.receiver[changedMethodName];
+        if (typeof changedMethod == "function") {
+            const descriptor = this.valueDescriptorNameMap[name];
+            const value = descriptor.reader(rawValue);
+            let oldValue = rawOldValue;
+            if (rawOldValue) {
+                oldValue = descriptor.reader(rawOldValue);
+            }
+            changedMethod.call(this.receiver, value, oldValue);
+        }
+    }
+    get valueDescriptors() {
+        const { valueDescriptorMap } = this;
+        return Object.keys(valueDescriptorMap).map(key => valueDescriptorMap[key]);
+    }
+    get valueDescriptorNameMap() {
+        const descriptors = {};
+        Object.keys(this.valueDescriptorMap).forEach(key => {
+            const descriptor = this.valueDescriptorMap[key];
+            descriptors[descriptor.name] = descriptor;
+        });
+        return descriptors;
+    }
+    hasValue(attributeName) {
+        const descriptor = this.valueDescriptorNameMap[attributeName];
+        const hasMethodName = `has${capitalize(descriptor.name)}`;
+        return this.receiver[hasMethodName];
+    }
+}
+
+class TargetObserver {
+    constructor(context, delegate) {
+        this.context = context;
+        this.delegate = delegate;
+        this.targetsByName = new Multimap;
+    }
+    start() {
+        if (!this.tokenListObserver) {
+            this.tokenListObserver = new TokenListObserver(this.element, this.attributeName, this);
+            this.tokenListObserver.start();
+        }
+    }
+    stop() {
+        if (this.tokenListObserver) {
+            this.disconnectAllTargets();
+            this.tokenListObserver.stop();
+            delete this.tokenListObserver;
+        }
+    }
+    tokenMatched({ element, content: name }) {
+        if (this.scope.containsElement(element)) {
+            this.connectTarget(element, name);
+        }
+    }
+    tokenUnmatched({ element, content: name }) {
+        this.disconnectTarget(element, name);
+    }
+    connectTarget(element, name) {
+        if (!this.targetsByName.has(name, element)) {
+            this.targetsByName.add(name, element);
+            this.delegate.targetConnected(element, name);
+        }
+    }
+    disconnectTarget(element, name) {
+        if (this.targetsByName.has(name, element)) {
+            this.targetsByName.delete(name, element);
+            this.delegate.targetDisconnected(element, name);
+        }
+    }
+    disconnectAllTargets() {
+        for (const name of this.targetsByName.keys) {
+            for (const element of this.targetsByName.getValuesForKey(name)) {
+                this.disconnectTarget(element, name);
+            }
+        }
+    }
+    get attributeName() {
+        return `data-${this.context.identifier}-target`;
+    }
+    get element() {
+        return this.context.element;
+    }
+    get scope() {
+        return this.context.scope;
+    }
+}
+
+class Context {
+    constructor(module, scope) {
+        this.logDebugActivity = (functionName, detail = {}) => {
+            const { identifier, controller, element } = this;
+            detail = Object.assign({ identifier, controller, element }, detail);
+            this.application.logDebugActivity(this.identifier, functionName, detail);
+        };
+        this.module = module;
+        this.scope = scope;
+        this.controller = new module.controllerConstructor(this);
+        this.targetGuide = new TargetGuide(this.scope, this.controller);
+        this.bindingObserver = new BindingObserver(this, this.dispatcher);
+        this.valueObserver = new ValueObserver(this, this.controller);
+        this.targetObserver = new TargetObserver(this, this);
+        try {
+            this.controller.initialize();
+            this.logDebugActivity("initialize");
+        }
+        catch (error) {
+            this.handleError(error, "initializing controller");
+        }
+    }
+    connect() {
+        this.bindingObserver.start();
+        this.valueObserver.start();
+        this.targetObserver.start();
+        try {
+            this.controller.connect();
+            this.logDebugActivity("connect");
+        }
+        catch (error) {
+            this.handleError(error, "connecting controller");
+        }
+    }
+    disconnect() {
+        try {
+            this.controller.disconnect();
+            this.logDebugActivity("disconnect");
+        }
+        catch (error) {
+            this.handleError(error, "disconnecting controller");
+        }
+        this.targetObserver.stop();
+        this.valueObserver.stop();
+        this.bindingObserver.stop();
+    }
+    get application() {
+        return this.module.application;
+    }
+    get identifier() {
+        return this.module.identifier;
+    }
+    get schema() {
+        return this.application.schema;
+    }
+    get dispatcher() {
+        return this.application.dispatcher;
+    }
+    get element() {
+        return this.scope.element;
+    }
+    get parentElement() {
+        return this.element.parentElement;
+    }
+    handleError(error, message, detail = {}) {
+        const { identifier, controller, element } = this;
+        detail = Object.assign({ identifier, controller, element }, detail);
+        this.application.handleError(error, `Error ${message}`, detail);
+    }
+    handleWarning(warning, message, detail = {}) {
+        const { identifier, controller, element } = this;
+        detail = Object.assign({ identifier, controller, element }, detail);
+        this.application.handleWarning(warning, `Warning ${message}`, detail);
+    }
+    targetConnected(element, name) {
+        this.invokeControllerMethod(`${name}TargetConnected`, element);
+    }
+    targetDisconnected(element, name) {
+        this.invokeControllerMethod(`${name}TargetDisconnected`, element);
+    }
+    invokeControllerMethod(methodName, ...args) {
+        const controller = this.controller;
+        if (typeof controller[methodName] == "function") {
+            controller[methodName](...args);
+        }
+    }
+}
+
+function bless(constructor) {
+    return shadow(constructor, getBlessedProperties(constructor));
+}
+function shadow(constructor, properties) {
+    const shadowConstructor = extend(constructor);
+    const shadowProperties = getShadowProperties(constructor.prototype, properties);
+    Object.defineProperties(shadowConstructor.prototype, shadowProperties);
+    return shadowConstructor;
+}
+function getBlessedProperties(constructor) {
+    const blessings = readInheritableStaticArrayValues(constructor, "blessings");
+    return blessings.reduce((blessedProperties, blessing) => {
+        const properties = blessing(constructor);
+        for (const key in properties) {
+            const descriptor = blessedProperties[key] || {};
+            blessedProperties[key] = Object.assign(descriptor, properties[key]);
+        }
+        return blessedProperties;
+    }, {});
+}
+function getShadowProperties(prototype, properties) {
+    return getOwnKeys(properties).reduce((shadowProperties, key) => {
+        const descriptor = getShadowedDescriptor(prototype, properties, key);
+        if (descriptor) {
+            Object.assign(shadowProperties, { [key]: descriptor });
+        }
+        return shadowProperties;
+    }, {});
+}
+function getShadowedDescriptor(prototype, properties, key) {
+    const shadowingDescriptor = Object.getOwnPropertyDescriptor(prototype, key);
+    const shadowedByValue = shadowingDescriptor && "value" in shadowingDescriptor;
+    if (!shadowedByValue) {
+        const descriptor = Object.getOwnPropertyDescriptor(properties, key).value;
+        if (shadowingDescriptor) {
+            descriptor.get = shadowingDescriptor.get || descriptor.get;
+            descriptor.set = shadowingDescriptor.set || descriptor.set;
+        }
+        return descriptor;
+    }
+}
+const getOwnKeys = (() => {
+    if (typeof Object.getOwnPropertySymbols == "function") {
+        return (object) => [
+            ...Object.getOwnPropertyNames(object),
+            ...Object.getOwnPropertySymbols(object)
+        ];
+    }
+    else {
+        return Object.getOwnPropertyNames;
+    }
+})();
+const extend = (() => {
+    function extendWithReflect(constructor) {
+        function extended() {
+            return Reflect.construct(constructor, arguments, new.target);
+        }
+        extended.prototype = Object.create(constructor.prototype, {
+            constructor: { value: extended }
+        });
+        Reflect.setPrototypeOf(extended, constructor);
+        return extended;
+    }
+    function testReflectExtension() {
+        const a = function () { this.a.call(this); };
+        const b = extendWithReflect(a);
+        b.prototype.a = function () { };
+        return new b;
+    }
+    try {
+        testReflectExtension();
+        return extendWithReflect;
+    }
+    catch (error) {
+        return (constructor) => class extended extends constructor {
+        };
+    }
+})();
+
+function blessDefinition(definition) {
+    return {
+        identifier: definition.identifier,
+        controllerConstructor: bless(definition.controllerConstructor)
+    };
+}
+
+class Module {
+    constructor(application, definition) {
+        this.application = application;
+        this.definition = blessDefinition(definition);
+        this.contextsByScope = new WeakMap;
+        this.connectedContexts = new Set;
+    }
+    get identifier() {
+        return this.definition.identifier;
+    }
+    get controllerConstructor() {
+        return this.definition.controllerConstructor;
+    }
+    get contexts() {
+        return Array.from(this.connectedContexts);
+    }
+    connectContextForScope(scope) {
+        const context = this.fetchContextForScope(scope);
+        this.connectedContexts.add(context);
+        context.connect();
+    }
+    disconnectContextForScope(scope) {
+        const context = this.contextsByScope.get(scope);
+        if (context) {
+            this.connectedContexts.delete(context);
+            context.disconnect();
+        }
+    }
+    fetchContextForScope(scope) {
+        let context = this.contextsByScope.get(scope);
+        if (!context) {
+            context = new Context(this, scope);
+            this.contextsByScope.set(scope, context);
+        }
+        return context;
+    }
+}
+
+class ClassMap {
+    constructor(scope) {
+        this.scope = scope;
+    }
+    has(name) {
+        return this.data.has(this.getDataKey(name));
+    }
+    get(name) {
+        return this.getAll(name)[0];
+    }
+    getAll(name) {
+        const tokenString = this.data.get(this.getDataKey(name)) || "";
+        return tokenize(tokenString);
+    }
+    getAttributeName(name) {
+        return this.data.getAttributeNameForKey(this.getDataKey(name));
+    }
+    getDataKey(name) {
+        return `${name}-class`;
+    }
+    get data() {
+        return this.scope.data;
+    }
+}
+
+class DataMap {
+    constructor(scope) {
+        this.scope = scope;
+    }
+    get element() {
+        return this.scope.element;
+    }
+    get identifier() {
+        return this.scope.identifier;
+    }
+    get(key) {
+        const name = this.getAttributeNameForKey(key);
+        return this.element.getAttribute(name);
+    }
+    set(key, value) {
+        const name = this.getAttributeNameForKey(key);
+        this.element.setAttribute(name, value);
+        return this.get(key);
+    }
+    has(key) {
+        const name = this.getAttributeNameForKey(key);
+        return this.element.hasAttribute(name);
+    }
+    delete(key) {
+        if (this.has(key)) {
+            const name = this.getAttributeNameForKey(key);
+            this.element.removeAttribute(name);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    getAttributeNameForKey(key) {
+        return `data-${this.identifier}-${dasherize(key)}`;
+    }
+}
+
+class Guide {
+    constructor(logger) {
+        this.warnedKeysByObject = new WeakMap;
+        this.logger = logger;
+    }
+    warn(object, key, message) {
+        let warnedKeys = this.warnedKeysByObject.get(object);
+        if (!warnedKeys) {
+            warnedKeys = new Set;
+            this.warnedKeysByObject.set(object, warnedKeys);
+        }
+        if (!warnedKeys.has(key)) {
+            warnedKeys.add(key);
+            this.logger.warn(message, object);
+        }
+    }
+}
+
+function attributeValueContainsToken(attributeName, token) {
+    return `[${attributeName}~="${token}"]`;
+}
+
+class TargetSet {
+    constructor(scope) {
+        this.scope = scope;
+    }
+    get element() {
+        return this.scope.element;
+    }
+    get identifier() {
+        return this.scope.identifier;
+    }
+    get schema() {
+        return this.scope.schema;
+    }
+    has(targetName) {
+        return this.find(targetName) != null;
+    }
+    find(...targetNames) {
+        return targetNames.reduce((target, targetName) => target
+            || this.findTarget(targetName)
+            || this.findLegacyTarget(targetName), undefined);
+    }
+    findAll(...targetNames) {
+        return targetNames.reduce((targets, targetName) => [
+            ...targets,
+            ...this.findAllTargets(targetName),
+            ...this.findAllLegacyTargets(targetName)
+        ], []);
+    }
+    findTarget(targetName) {
+        const selector = this.getSelectorForTargetName(targetName);
+        return this.scope.findElement(selector);
+    }
+    findAllTargets(targetName) {
+        const selector = this.getSelectorForTargetName(targetName);
+        return this.scope.findAllElements(selector);
+    }
+    getSelectorForTargetName(targetName) {
+        const attributeName = this.schema.targetAttributeForScope(this.identifier);
+        return attributeValueContainsToken(attributeName, targetName);
+    }
+    findLegacyTarget(targetName) {
+        const selector = this.getLegacySelectorForTargetName(targetName);
+        return this.deprecate(this.scope.findElement(selector), targetName);
+    }
+    findAllLegacyTargets(targetName) {
+        const selector = this.getLegacySelectorForTargetName(targetName);
+        return this.scope.findAllElements(selector).map(element => this.deprecate(element, targetName));
+    }
+    getLegacySelectorForTargetName(targetName) {
+        const targetDescriptor = `${this.identifier}.${targetName}`;
+        return attributeValueContainsToken(this.schema.targetAttribute, targetDescriptor);
+    }
+    deprecate(element, targetName) {
+        if (element) {
+            const { identifier } = this;
+            const attributeName = this.schema.targetAttribute;
+            const revisedAttributeName = this.schema.targetAttributeForScope(identifier);
+            this.guide.warn(element, `target:${targetName}`, `Please replace ${attributeName}="${identifier}.${targetName}" with ${revisedAttributeName}="${targetName}". ` +
+                `The ${attributeName} attribute is deprecated and will be removed in a future version of Stimulus.`);
+        }
+        return element;
+    }
+    get guide() {
+        return this.scope.guide;
+    }
+}
+
+class Scope {
+    constructor(schema, element, identifier, logger) {
+        this.targets = new TargetSet(this);
+        this.classes = new ClassMap(this);
+        this.data = new DataMap(this);
+        this.containsElement = (element) => {
+            return element.closest(this.controllerSelector) === this.element;
+        };
+        this.schema = schema;
+        this.element = element;
+        this.identifier = identifier;
+        this.guide = new Guide(logger);
+    }
+    findElement(selector) {
+        return this.element.matches(selector)
+            ? this.element
+            : this.queryElements(selector).find(this.containsElement);
+    }
+    findAllElements(selector) {
+        return [
+            ...this.element.matches(selector) ? [this.element] : [],
+            ...this.queryElements(selector).filter(this.containsElement)
+        ];
+    }
+    queryElements(selector) {
+        return Array.from(this.element.querySelectorAll(selector));
+    }
+    get controllerSelector() {
+        return attributeValueContainsToken(this.schema.controllerAttribute, this.identifier);
+    }
+}
+
+class ScopeObserver {
+    constructor(element, schema, delegate) {
+        this.element = element;
+        this.schema = schema;
+        this.delegate = delegate;
+        this.valueListObserver = new ValueListObserver(this.element, this.controllerAttribute, this);
+        this.scopesByIdentifierByElement = new WeakMap;
+        this.scopeReferenceCounts = new WeakMap;
+    }
+    start() {
+        this.valueListObserver.start();
+    }
+    stop() {
+        this.valueListObserver.stop();
+    }
+    get controllerAttribute() {
+        return this.schema.controllerAttribute;
+    }
+    parseValueForToken(token) {
+        const { element, content: identifier } = token;
+        const scopesByIdentifier = this.fetchScopesByIdentifierForElement(element);
+        let scope = scopesByIdentifier.get(identifier);
+        if (!scope) {
+            scope = this.delegate.createScopeForElementAndIdentifier(element, identifier);
+            scopesByIdentifier.set(identifier, scope);
+        }
+        return scope;
+    }
+    elementMatchedValue(element, value) {
+        const referenceCount = (this.scopeReferenceCounts.get(value) || 0) + 1;
+        this.scopeReferenceCounts.set(value, referenceCount);
+        if (referenceCount == 1) {
+            this.delegate.scopeConnected(value);
+        }
+    }
+    elementUnmatchedValue(element, value) {
+        const referenceCount = this.scopeReferenceCounts.get(value);
+        if (referenceCount) {
+            this.scopeReferenceCounts.set(value, referenceCount - 1);
+            if (referenceCount == 1) {
+                this.delegate.scopeDisconnected(value);
+            }
+        }
+    }
+    elementMatchedNoValue(token) { }
+    fetchScopesByIdentifierForElement(element) {
+        let scopesByIdentifier = this.scopesByIdentifierByElement.get(element);
+        if (!scopesByIdentifier) {
+            scopesByIdentifier = new Map;
+            this.scopesByIdentifierByElement.set(element, scopesByIdentifier);
+        }
+        return scopesByIdentifier;
+    }
+}
+
+class Router {
+    constructor(application) {
+        this.application = application;
+        this.scopeObserver = new ScopeObserver(this.element, this.schema, this);
+        this.scopesByIdentifier = new Multimap;
+        this.modulesByIdentifier = new Map;
+    }
+    get element() {
+        return this.application.element;
+    }
+    get schema() {
+        return this.application.schema;
+    }
+    get logger() {
+        return this.application.logger;
+    }
+    get controllerAttribute() {
+        return this.schema.controllerAttribute;
+    }
+    get modules() {
+        return Array.from(this.modulesByIdentifier.values());
+    }
+    get contexts() {
+        return this.modules.reduce((contexts, module) => contexts.concat(module.contexts), []);
+    }
+    start() {
+        this.scopeObserver.start();
+    }
+    stop() {
+        this.scopeObserver.stop();
+    }
+    loadDefinition(definition) {
+        this.unloadIdentifier(definition.identifier);
+        const module = new Module(this.application, definition);
+        this.connectModule(module);
+    }
+    unloadIdentifier(identifier) {
+        const module = this.modulesByIdentifier.get(identifier);
+        if (module) {
+            this.disconnectModule(module);
+        }
+    }
+    getContextForElementAndIdentifier(element, identifier) {
+        const module = this.modulesByIdentifier.get(identifier);
+        if (module) {
+            return module.contexts.find(context => context.element == element);
+        }
+    }
+    handleError(error, message, detail) {
+        this.application.handleError(error, message, detail);
+    }
+    createScopeForElementAndIdentifier(element, identifier) {
+        return new Scope(this.schema, element, identifier, this.logger);
+    }
+    scopeConnected(scope) {
+        const { identifier, element } = scope;
+        this.scopesByIdentifier.add(identifier, scope);
+        const module = this.modulesByIdentifier.get(identifier);
+        if (module) {
+            module.connectContextForScope(scope);
+        }
+        else {
+            this.application.handleWarning(`Element references undefined controller "${identifier}"`, `Warning connecting controller "${identifier}"`, { identifier, element });
+        }
+    }
+    scopeDisconnected(scope) {
+        this.scopesByIdentifier.delete(scope.identifier, scope);
+        const module = this.modulesByIdentifier.get(scope.identifier);
+        if (module) {
+            module.disconnectContextForScope(scope);
+        }
+    }
+    connectModule(module) {
+        this.modulesByIdentifier.set(module.identifier, module);
+        const scopes = this.scopesByIdentifier.getValuesForKey(module.identifier);
+        scopes.forEach(scope => module.connectContextForScope(scope));
+    }
+    disconnectModule(module) {
+        this.modulesByIdentifier.delete(module.identifier);
+        const scopes = this.scopesByIdentifier.getValuesForKey(module.identifier);
+        scopes.forEach(scope => module.disconnectContextForScope(scope));
+    }
+}
+
+const defaultSchema = {
+    controllerAttribute: "data-controller",
+    actionAttribute: "data-action",
+    targetAttribute: "data-target",
+    targetAttributeForScope: identifier => `data-${identifier}-target`
+};
+
+class Application {
+    constructor(element = document.documentElement, schema = defaultSchema) {
+        this.logger = console;
+        this.debug = false;
+        this.warnings = true;
+        this.logDebugActivity = (identifier, functionName, detail = {}) => {
+            if (this.debug) {
+                this.logFormattedMessage(identifier, functionName, detail);
+            }
+        };
+        this.element = element;
+        this.schema = schema;
+        this.dispatcher = new Dispatcher(this);
+        this.router = new Router(this);
+    }
+    static start(element, schema) {
+        const application = new Application(element, schema);
+        application.start();
+        return application;
+    }
+    async start() {
+        await domReady();
+        this.logDebugActivity("application", "starting");
+        this.dispatcher.start();
+        this.router.start();
+        this.logDebugActivity("application", "start");
+    }
+    stop() {
+        this.logDebugActivity("application", "stopping");
+        this.dispatcher.stop();
+        this.router.stop();
+        this.logDebugActivity("application", "stop");
+    }
+    register(identifier, controllerConstructor) {
+        this.load({ identifier, controllerConstructor });
+    }
+    load(head, ...rest) {
+        const definitions = Array.isArray(head) ? head : [head, ...rest];
+        definitions.forEach(definition => this.router.loadDefinition(definition));
+    }
+    unload(head, ...rest) {
+        const identifiers = Array.isArray(head) ? head : [head, ...rest];
+        identifiers.forEach(identifier => this.router.unloadIdentifier(identifier));
+    }
+    get controllers() {
+        return this.router.contexts.map(context => context.controller);
+    }
+    getControllerForElementAndIdentifier(element, identifier) {
+        const context = this.router.getContextForElementAndIdentifier(element, identifier);
+        return context ? context.controller : null;
+    }
+    handleWarning(warning, message, detail) {
+        if (this.warnings) {
+            this.logger.warn(`%s\n\n%s\n\n%o`, message, warning, detail);
+        }
+    }
+    handleError(error, message, detail) {
+        var _a;
+        this.logger.error(`%s\n\n%o\n\n%o`, message, error, detail);
+        (_a = window.onerror) === null || _a === void 0 ? void 0 : _a.call(window, message, "", 0, 0, error);
+    }
+    logFormattedMessage(identifier, functionName, detail = {}) {
+        const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const color = darkMode ? "#ffe000" : "#5D2F85";
+        detail = Object.assign({ application: this }, detail);
+        this.logger.groupCollapsed(`%c${identifier}%c #${functionName}`, `color: ${color}`, 'color: unset');
+        this.logger.log("details:", Object.assign({}, detail));
+        this.logger.groupEnd();
+    }
+}
+function domReady() {
+    return new Promise(resolve => {
+        if (document.readyState == "loading") {
+            document.addEventListener("DOMContentLoaded", () => resolve());
+        }
+        else {
+            resolve();
+        }
+    });
+}
+
+function ClassPropertiesBlessing(constructor) {
+    const classes = readInheritableStaticArrayValues(constructor, "classes");
+    return classes.reduce((properties, classDefinition) => {
+        return Object.assign(properties, propertiesForClassDefinition(classDefinition));
+    }, {});
+}
+function propertiesForClassDefinition(key) {
+    return {
+        [`${key}Class`]: {
+            get() {
+                const { classes } = this;
+                if (classes.has(key)) {
+                    return classes.get(key);
+                }
+                else {
+                    const attribute = classes.getAttributeName(key);
+                    throw new Error(`Missing attribute "${attribute}"`);
+                }
+            }
+        },
+        [`${key}Classes`]: {
+            get() {
+                return this.classes.getAll(key);
+            }
+        },
+        [`has${capitalize(key)}Class`]: {
+            get() {
+                return this.classes.has(key);
+            }
+        }
+    };
+}
+
+function TargetPropertiesBlessing(constructor) {
+    const targets = readInheritableStaticArrayValues(constructor, "targets");
+    return targets.reduce((properties, targetDefinition) => {
+        return Object.assign(properties, propertiesForTargetDefinition(targetDefinition));
+    }, {});
+}
+function propertiesForTargetDefinition(name) {
+    return {
+        [`${name}Target`]: {
+            get() {
+                const target = this.targets.find(name);
+                if (target) {
+                    return target;
+                }
+                else {
+                    throw new Error(`Missing target element "${name}" for "${this.identifier}" controller`);
+                }
+            }
+        },
+        [`${name}Targets`]: {
+            get() {
+                return this.targets.findAll(name);
+            }
+        },
+        [`has${capitalize(name)}Target`]: {
+            get() {
+                return this.targets.has(name);
+            }
+        }
+    };
+}
+
+function ValuePropertiesBlessing(constructor) {
+    const valueDefinitionPairs = readInheritableStaticObjectPairs(constructor, "values");
+    const propertyDescriptorMap = {
+        valueDescriptorMap: {
+            get() {
+                return valueDefinitionPairs.reduce((result, valueDefinitionPair) => {
+                    const valueDescriptor = parseValueDefinitionPair(valueDefinitionPair);
+                    const attributeName = this.data.getAttributeNameForKey(valueDescriptor.key);
+                    return Object.assign(result, { [attributeName]: valueDescriptor });
+                }, {});
+            }
+        }
+    };
+    return valueDefinitionPairs.reduce((properties, valueDefinitionPair) => {
+        return Object.assign(properties, propertiesForValueDefinitionPair(valueDefinitionPair));
+    }, propertyDescriptorMap);
+}
+function propertiesForValueDefinitionPair(valueDefinitionPair) {
+    const definition = parseValueDefinitionPair(valueDefinitionPair);
+    const { key, name, reader: read, writer: write } = definition;
+    return {
+        [name]: {
+            get() {
+                const value = this.data.get(key);
+                if (value !== null) {
+                    return read(value);
+                }
+                else {
+                    return definition.defaultValue;
+                }
+            },
+            set(value) {
+                if (value === undefined) {
+                    this.data.delete(key);
+                }
+                else {
+                    this.data.set(key, write(value));
+                }
+            }
+        },
+        [`has${capitalize(name)}`]: {
+            get() {
+                return this.data.has(key) || definition.hasCustomDefaultValue;
+            }
+        }
+    };
+}
+function parseValueDefinitionPair([token, typeDefinition]) {
+    return valueDescriptorForTokenAndTypeDefinition(token, typeDefinition);
+}
+function parseValueTypeConstant(constant) {
+    switch (constant) {
+        case Array: return "array";
+        case Boolean: return "boolean";
+        case Number: return "number";
+        case Object: return "object";
+        case String: return "string";
+    }
+}
+function parseValueTypeDefault(defaultValue) {
+    switch (typeof defaultValue) {
+        case "boolean": return "boolean";
+        case "number": return "number";
+        case "string": return "string";
+    }
+    if (Array.isArray(defaultValue))
+        return "array";
+    if (Object.prototype.toString.call(defaultValue) === "[object Object]")
+        return "object";
+}
+function parseValueTypeObject(typeObject) {
+    const typeFromObject = parseValueTypeConstant(typeObject.type);
+    if (typeFromObject) {
+        const defaultValueType = parseValueTypeDefault(typeObject.default);
+        if (typeFromObject !== defaultValueType) {
+            throw new Error(`Type "${typeFromObject}" must match the type of the default value. Given default value: "${typeObject.default}" as "${defaultValueType}"`);
+        }
+        return typeFromObject;
+    }
+}
+function parseValueTypeDefinition(typeDefinition) {
+    const typeFromObject = parseValueTypeObject(typeDefinition);
+    const typeFromDefaultValue = parseValueTypeDefault(typeDefinition);
+    const typeFromConstant = parseValueTypeConstant(typeDefinition);
+    const type = typeFromObject || typeFromDefaultValue || typeFromConstant;
+    if (type)
+        return type;
+    throw new Error(`Unknown value type "${typeDefinition}"`);
+}
+function defaultValueForDefinition(typeDefinition) {
+    const constant = parseValueTypeConstant(typeDefinition);
+    if (constant)
+        return defaultValuesByType[constant];
+    const defaultValue = typeDefinition.default;
+    if (defaultValue !== undefined)
+        return defaultValue;
+    return typeDefinition;
+}
+function valueDescriptorForTokenAndTypeDefinition(token, typeDefinition) {
+    const key = `${dasherize(token)}-value`;
+    const type = parseValueTypeDefinition(typeDefinition);
+    return {
+        type,
+        key,
+        name: camelize(key),
+        get defaultValue() { return defaultValueForDefinition(typeDefinition); },
+        get hasCustomDefaultValue() { return parseValueTypeDefault(typeDefinition) !== undefined; },
+        reader: readers[type],
+        writer: writers[type] || writers.default
+    };
+}
+const defaultValuesByType = {
+    get array() { return []; },
+    boolean: false,
+    number: 0,
+    get object() { return {}; },
+    string: ""
+};
+const readers = {
+    array(value) {
+        const array = JSON.parse(value);
+        if (!Array.isArray(array)) {
+            throw new TypeError("Expected array");
+        }
+        return array;
+    },
+    boolean(value) {
+        return !(value == "0" || value == "false");
+    },
+    number(value) {
+        return Number(value);
+    },
+    object(value) {
+        const object = JSON.parse(value);
+        if (object === null || typeof object != "object" || Array.isArray(object)) {
+            throw new TypeError("Expected object");
+        }
+        return object;
+    },
+    string(value) {
+        return value;
+    }
+};
+const writers = {
+    default: writeString,
+    array: writeJSON,
+    object: writeJSON
+};
+function writeJSON(value) {
+    return JSON.stringify(value);
+}
+function writeString(value) {
+    return `${value}`;
+}
+
+class Controller {
+    constructor(context) {
+        this.context = context;
+    }
+    get application() {
+        return this.context.application;
+    }
+    get scope() {
+        return this.context.scope;
+    }
+    get element() {
+        return this.scope.element;
+    }
+    get identifier() {
+        return this.scope.identifier;
+    }
+    get targets() {
+        return this.scope.targets;
+    }
+    get classes() {
+        return this.scope.classes;
+    }
+    get data() {
+        return this.scope.data;
+    }
+    initialize() {
+    }
+    connect() {
+    }
+    disconnect() {
+    }
+    dispatch(eventName, { target = this.element, detail = {}, prefix = this.identifier, bubbles = true, cancelable = true } = {}) {
+        const type = prefix ? `${prefix}:${eventName}` : eventName;
+        const event = new CustomEvent(type, { detail, bubbles, cancelable });
+        target.dispatchEvent(event);
+        return event;
+    }
+}
+Controller.blessings = [ClassPropertiesBlessing, TargetPropertiesBlessing, ValuePropertiesBlessing];
+Controller.targets = [];
+Controller.values = {};
+
+export { Application, AttributeObserver, Context, Controller, ElementObserver, IndexedMultimap, Multimap, StringMapObserver, TokenListObserver, ValueListObserver, add, defaultSchema, del, fetch, prune };