stimulus-rails 1.1.0 → 1.2.0

data/app/assets/javascripts/stimulus.js

@@ -3,7 +3,7 @@
 //= link ./stimulus-loading.js
 
 /*
-Stimulus 3.1.0
+Stimulus 3.2.0
 Copyright © 2022 Basecamp, LLC
  */
 class EventListener {
@@ -36,6 +36,9 @@ class EventListener {
             }
         }
     }
+    hasBindings() {
+        return this.unorderedBindings.size > 0;
+    }
     get bindings() {
         return Array.from(this.unorderedBindings).sort((left, right) => {
             const leftIndex = left.index, rightIndex = right.index;
@@ -54,7 +57,7 @@ function extendEvent(event) {
             stopImmediatePropagation() {
                 this.immediatePropagationStopped = true;
                 stopImmediatePropagation.call(this);
-            }
+            },
         });
     }
 }
@@ -62,34 +65,50 @@ function extendEvent(event) {
 class Dispatcher {
     constructor(application) {
         this.application = application;
-        this.eventListenerMaps = new Map;
+        this.eventListenerMaps = new Map();
         this.started = false;
     }
     start() {
         if (!this.started) {
             this.started = true;
-            this.eventListeners.forEach(eventListener => eventListener.connect());
+            this.eventListeners.forEach((eventListener) => eventListener.connect());
         }
     }
     stop() {
         if (this.started) {
             this.started = false;
-            this.eventListeners.forEach(eventListener => eventListener.disconnect());
+            this.eventListeners.forEach((eventListener) => eventListener.disconnect());
         }
     }
     get eventListeners() {
-        return Array.from(this.eventListenerMaps.values())
-            .reduce((listeners, map) => listeners.concat(Array.from(map.values())), []);
+        return Array.from(this.eventListenerMaps.values()).reduce((listeners, map) => listeners.concat(Array.from(map.values())), []);
     }
     bindingConnected(binding) {
         this.fetchEventListenerForBinding(binding).bindingConnected(binding);
     }
-    bindingDisconnected(binding) {
+    bindingDisconnected(binding, clearEventListeners = false) {
         this.fetchEventListenerForBinding(binding).bindingDisconnected(binding);
+        if (clearEventListeners)
+            this.clearEventListenersForBinding(binding);
     }
     handleError(error, message, detail = {}) {
         this.application.handleError(error, `Error ${message}`, detail);
     }
+    clearEventListenersForBinding(binding) {
+        const eventListener = this.fetchEventListenerForBinding(binding);
+        if (!eventListener.hasBindings()) {
+            eventListener.disconnect();
+            this.removeMappedEventListenerFor(binding);
+        }
+    }
+    removeMappedEventListenerFor(binding) {
+        const { eventTarget, eventName, eventOptions } = binding;
+        const eventListenerMap = this.fetchEventListenerMapForEventTarget(eventTarget);
+        const cacheKey = this.cacheKey(eventName, eventOptions);
+        eventListenerMap.delete(cacheKey);
+        if (eventListenerMap.size == 0)
+            this.eventListenerMaps.delete(eventTarget);
+    }
     fetchEventListenerForBinding(binding) {
         const { eventTarget, eventName, eventOptions } = binding;
         return this.fetchEventListener(eventTarget, eventName, eventOptions);
@@ -114,30 +133,53 @@ class Dispatcher {
     fetchEventListenerMapForEventTarget(eventTarget) {
         let eventListenerMap = this.eventListenerMaps.get(eventTarget);
         if (!eventListenerMap) {
-            eventListenerMap = new Map;
+            eventListenerMap = new Map();
             this.eventListenerMaps.set(eventTarget, eventListenerMap);
         }
         return eventListenerMap;
     }
     cacheKey(eventName, eventOptions) {
         const parts = [eventName];
-        Object.keys(eventOptions).sort().forEach(key => {
+        Object.keys(eventOptions)
+            .sort()
+            .forEach((key) => {
             parts.push(`${eventOptions[key] ? "" : "!"}${key}`);
         });
         return parts.join(":");
     }
 }
 
-const descriptorPattern = /^((.+?)(@(window|document))?->)?(.+?)(#([^:]+?))(:(.+))?$/;
+const defaultActionDescriptorFilters = {
+    stop({ event, value }) {
+        if (value)
+            event.stopPropagation();
+        return true;
+    },
+    prevent({ event, value }) {
+        if (value)
+            event.preventDefault();
+        return true;
+    },
+    self({ event, value, element }) {
+        if (value) {
+            return element === event.target;
+        }
+        else {
+            return true;
+        }
+    },
+};
+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]
+        eventTarget: parseEventTarget(matches[3]),
+        eventName: matches[1],
+        eventOptions: matches[6] ? parseEventOptions(matches[6]) : {},
+        identifier: matches[4],
+        methodName: matches[5],
+        keyFilter: matches[2],
     };
 }
 function parseEventTarget(eventTargetName) {
@@ -149,7 +191,9 @@ function parseEventTarget(eventTargetName) {
     }
 }
 function parseEventOptions(eventOptions) {
-    return eventOptions.split(":").reduce((options, token) => Object.assign(options, { [token.replace(/^!/, "")]: !/^!/.test(token) }), {});
+    return eventOptions
+        .split(":")
+        .reduce((options, token) => Object.assign(options, { [token.replace(/^!/, "")]: !/^!/.test(token) }), {});
 }
 function stringifyEventTarget(eventTarget) {
     if (eventTarget == window) {
@@ -163,6 +207,9 @@ function stringifyEventTarget(eventTarget) {
 function camelize(value) {
     return value.replace(/(?:[_-])([a-z0-9])/g, (_, char) => char.toUpperCase());
 }
+function namespaceCamelize(value) {
+    return camelize(value.replace(/--/g, "-").replace(/__/g, "_"));
+}
 function capitalize(value) {
     return value.charAt(0).toUpperCase() + value.slice(1);
 }
@@ -174,7 +221,7 @@ function tokenize(value) {
 }
 
 class Action {
-    constructor(element, index, descriptor) {
+    constructor(element, index, descriptor, schema) {
         this.element = element;
         this.index = index;
         this.eventTarget = descriptor.eventTarget || element;
@@ -182,17 +229,39 @@ class Action {
         this.eventOptions = descriptor.eventOptions || {};
         this.identifier = descriptor.identifier || error("missing identifier");
         this.methodName = descriptor.methodName || error("missing method name");
+        this.keyFilter = descriptor.keyFilter || "";
+        this.schema = schema;
     }
-    static forToken(token) {
-        return new this(token.element, token.index, parseActionDescriptorString(token.content));
+    static forToken(token, schema) {
+        return new this(token.element, token.index, parseActionDescriptorString(token.content), schema);
     }
     toString() {
-        const eventNameSuffix = this.eventTargetName ? `@${this.eventTargetName}` : "";
-        return `${this.eventName}${eventNameSuffix}->${this.identifier}#${this.methodName}`;
+        const eventFilter = this.keyFilter ? `.${this.keyFilter}` : "";
+        const eventTarget = this.eventTargetName ? `@${this.eventTargetName}` : "";
+        return `${this.eventName}${eventFilter}${eventTarget}->${this.identifier}#${this.methodName}`;
+    }
+    isFilterTarget(event) {
+        if (!this.keyFilter) {
+            return false;
+        }
+        const filteres = this.keyFilter.split("+");
+        const modifiers = ["meta", "ctrl", "alt", "shift"];
+        const [meta, ctrl, alt, shift] = modifiers.map((modifier) => filteres.includes(modifier));
+        if (event.metaKey !== meta || event.ctrlKey !== ctrl || event.altKey !== alt || event.shiftKey !== shift) {
+            return true;
+        }
+        const standardFilter = filteres.filter((key) => !modifiers.includes(key))[0];
+        if (!standardFilter) {
+            return false;
+        }
+        if (!Object.prototype.hasOwnProperty.call(this.keyMappings, standardFilter)) {
+            error(`contains unkown key filter: ${this.keyFilter}`);
+        }
+        return this.keyMappings[standardFilter].toLowerCase() !== event.key.toLowerCase();
     }
     get params() {
         const params = {};
-        const pattern = new RegExp(`^data-${this.identifier}-(.+)-param$`);
+        const pattern = new RegExp(`^data-${this.identifier}-(.+)-param$`, "i");
         for (const { name, value } of Array.from(this.element.attributes)) {
             const match = name.match(pattern);
             const key = match && match[1];
@@ -205,15 +274,18 @@ class Action {
     get eventTargetName() {
         return stringifyEventTarget(this.eventTarget);
     }
+    get keyMappings() {
+        return this.schema.keyMappings;
+    }
 }
 const defaultEventNames = {
-    "a": e => "click",
-    "button": e => "click",
-    "form": e => "submit",
-    "details": e => "toggle",
-    "input": e => e.getAttribute("type") == "submit" ? "click" : "input",
-    "select": e => "change",
-    "textarea": e => "input"
+    a: () => "click",
+    button: () => "click",
+    form: () => "submit",
+    details: () => "toggle",
+    input: (e) => (e.getAttribute("type") == "submit" ? "click" : "input"),
+    select: () => "change",
+    textarea: () => "input",
 };
 function getDefaultEventNameForElement(element) {
     const tagName = element.tagName.toLowerCase();
@@ -251,9 +323,7 @@ class Binding {
         return this.context.identifier;
     }
     handleEvent(event) {
-        if (this.willBeInvokedByEvent(event) && this.shouldBeInvokedPerSelf(event)) {
-            this.processStopPropagation(event);
-            this.processPreventDefault(event);
+        if (this.willBeInvokedByEvent(event) && this.applyEventModifiers(event)) {
             this.invokeWithEvent(event);
         }
     }
@@ -267,15 +337,20 @@ class Binding {
         }
         throw new Error(`Action "${this.action}" references undefined method "${this.methodName}"`);
     }
-    processStopPropagation(event) {
-        if (this.eventOptions.stop) {
-            event.stopPropagation();
-        }
-    }
-    processPreventDefault(event) {
-        if (this.eventOptions.prevent) {
-            event.preventDefault();
+    applyEventModifiers(event) {
+        const { element } = this.action;
+        const { actionDescriptorFilters } = this.context.application;
+        let passes = true;
+        for (const [name, value] of Object.entries(this.eventOptions)) {
+            if (name in actionDescriptorFilters) {
+                const filter = actionDescriptorFilters[name];
+                passes = passes && filter({ name, value, event, element });
+            }
+            else {
+                continue;
+            }
         }
+        return passes;
     }
     invokeWithEvent(event) {
         const { target, currentTarget } = event;
@@ -291,16 +366,11 @@ class Binding {
             this.context.handleError(error, `invoking action "${this.action}"`, detail);
         }
     }
-    shouldBeInvokedPerSelf(event) {
-        if (this.action.eventOptions.self === true) {
-            return this.action.element === event.target;
-        }
-        else {
-            return true;
-        }
-    }
     willBeInvokedByEvent(event) {
         const eventTarget = event.target;
+        if (event instanceof KeyboardEvent && this.action.isFilterTarget(event)) {
+            return false;
+        }
         if (this.element === eventTarget) {
             return true;
         }
@@ -331,7 +401,7 @@ class ElementObserver {
         this.element = element;
         this.started = false;
         this.delegate = delegate;
-        this.elements = new Set;
+        this.elements = new Set();
         this.mutationObserver = new MutationObserver((mutations) => this.processMutations(mutations));
     }
     start() {
@@ -514,95 +584,6 @@ class AttributeObserver {
     }
 }
 
-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);
 }
@@ -655,7 +636,7 @@ class Multimap {
     }
     hasValue(value) {
         const sets = Array.from(this.valuesByKey.values());
-        return sets.some(set => set.has(value));
+        return sets.some((set) => set.has(value));
     }
     getValuesForKey(key) {
         const values = this.valuesByKey.get(key);
@@ -663,15 +644,15 @@ class Multimap {
     }
     getKeysForValue(value) {
         return Array.from(this.valuesByKey)
-            .filter(([key, values]) => values.has(value))
-            .map(([key, values]) => key);
+            .filter(([_key, values]) => values.has(value))
+            .map(([key, _values]) => key);
     }
 }
 
 class IndexedMultimap extends Multimap {
     constructor() {
         super();
-        this.keysByValue = new Map;
+        this.keysByValue = new Map();
     }
     get values() {
         return Array.from(this.keysByValue.keys());
@@ -693,11 +674,163 @@ class IndexedMultimap extends Multimap {
     }
 }
 
+class SelectorObserver {
+    constructor(element, selector, delegate, details = {}) {
+        this.selector = selector;
+        this.details = details;
+        this.elementObserver = new ElementObserver(element, this);
+        this.delegate = delegate;
+        this.matchesByElement = new Multimap();
+    }
+    get started() {
+        return this.elementObserver.started;
+    }
+    start() {
+        this.elementObserver.start();
+    }
+    pause(callback) {
+        this.elementObserver.pause(callback);
+    }
+    stop() {
+        this.elementObserver.stop();
+    }
+    refresh() {
+        this.elementObserver.refresh();
+    }
+    get element() {
+        return this.elementObserver.element;
+    }
+    matchElement(element) {
+        const matches = element.matches(this.selector);
+        if (this.delegate.selectorMatchElement) {
+            return matches && this.delegate.selectorMatchElement(element, this.details);
+        }
+        return matches;
+    }
+    matchElementsInTree(tree) {
+        const match = this.matchElement(tree) ? [tree] : [];
+        const matches = Array.from(tree.querySelectorAll(this.selector)).filter((match) => this.matchElement(match));
+        return match.concat(matches);
+    }
+    elementMatched(element) {
+        this.selectorMatched(element);
+    }
+    elementUnmatched(element) {
+        this.selectorUnmatched(element);
+    }
+    elementAttributeChanged(element, _attributeName) {
+        const matches = this.matchElement(element);
+        const matchedBefore = this.matchesByElement.has(this.selector, element);
+        if (!matches && matchedBefore) {
+            this.selectorUnmatched(element);
+        }
+    }
+    selectorMatched(element) {
+        if (this.delegate.selectorMatched) {
+            this.delegate.selectorMatched(element, this.selector, this.details);
+            this.matchesByElement.add(this.selector, element);
+        }
+    }
+    selectorUnmatched(element) {
+        this.delegate.selectorUnmatched(element, this.selector, this.details);
+        this.matchesByElement.delete(this.selector, element);
+    }
+}
+
+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());
+    }
+}
+
 class TokenListObserver {
     constructor(element, attributeName, delegate) {
         this.attributeObserver = new AttributeObserver(element, attributeName, this);
         this.delegate = delegate;
-        this.tokensByElement = new Multimap;
+        this.tokensByElement = new Multimap();
     }
     get started() {
         return this.attributeObserver.started;
@@ -732,10 +865,10 @@ class TokenListObserver {
         this.tokensUnmatched(this.tokensByElement.getValuesForKey(element));
     }
     tokensMatched(tokens) {
-        tokens.forEach(token => this.tokenMatched(token));
+        tokens.forEach((token) => this.tokenMatched(token));
     }
     tokensUnmatched(tokens) {
-        tokens.forEach(token => this.tokenUnmatched(token));
+        tokens.forEach((token) => this.tokenUnmatched(token));
     }
     tokenMatched(token) {
         this.delegate.tokenMatched(token);
@@ -748,8 +881,7 @@ class TokenListObserver {
     refreshTokensForElement(element) {
         const previousTokens = this.tokensByElement.getValuesForKey(element);
         const currentTokens = this.readTokensForElement(element);
-        const firstDifferingIndex = zip(previousTokens, currentTokens)
-            .findIndex(([previousToken, currentToken]) => !tokensAreEqual(previousToken, currentToken));
+        const firstDifferingIndex = zip(previousTokens, currentTokens).findIndex(([previousToken, currentToken]) => !tokensAreEqual(previousToken, currentToken));
         if (firstDifferingIndex == -1) {
             return [[], []];
         }
@@ -764,7 +896,10 @@ class TokenListObserver {
     }
 }
 function parseTokenString(tokenString, element, attributeName) {
-    return tokenString.trim().split(/\s+/).filter(content => content.length)
+    return tokenString
+        .trim()
+        .split(/\s+/)
+        .filter((content) => content.length)
         .map((content, index) => ({ element, attributeName, content, index }));
 }
 function zip(left, right) {
@@ -779,8 +914,8 @@ class ValueListObserver {
     constructor(element, attributeName, delegate) {
         this.tokenListObserver = new TokenListObserver(element, attributeName, this);
         this.delegate = delegate;
-        this.parseResultsByToken = new WeakMap;
-        this.valuesByTokenByElement = new WeakMap;
+        this.parseResultsByToken = new WeakMap();
+        this.valuesByTokenByElement = new WeakMap();
     }
     get started() {
         return this.tokenListObserver.started;
@@ -827,7 +962,7 @@ class ValueListObserver {
     fetchValuesByTokenForElement(element) {
         let valuesByToken = this.valuesByTokenByElement.get(element);
         if (!valuesByToken) {
-            valuesByToken = new Map;
+            valuesByToken = new Map();
             this.valuesByTokenByElement.set(element, valuesByToken);
         }
         return valuesByToken;
@@ -847,7 +982,7 @@ class BindingObserver {
     constructor(context, delegate) {
         this.context = context;
         this.delegate = delegate;
-        this.bindingsByAction = new Map;
+        this.bindingsByAction = new Map();
     }
     start() {
         if (!this.valueListObserver) {
@@ -890,11 +1025,11 @@ class BindingObserver {
         }
     }
     disconnectAllActions() {
-        this.bindings.forEach(binding => this.delegate.bindingDisconnected(binding));
+        this.bindings.forEach((binding) => this.delegate.bindingDisconnected(binding, true));
         this.bindingsByAction.clear();
     }
     parseValueForToken(token) {
-        const action = Action.forToken(token);
+        const action = Action.forToken(token, this.schema);
         if (action.identifier == this.identifier) {
             return action;
         }
@@ -977,19 +1112,20 @@ class ValueObserver {
                 changedMethod.call(this.receiver, value, oldValue);
             }
             catch (error) {
-                if (!(error instanceof TypeError))
-                    throw error;
-                throw new TypeError(`Stimulus Value "${this.context.identifier}.${descriptor.name}" - ${error.message}`);
+                if (error instanceof TypeError) {
+                    error.message = `Stimulus Value "${this.context.identifier}.${descriptor.name}" - ${error.message}`;
+                }
+                throw error;
             }
         }
     }
     get valueDescriptors() {
         const { valueDescriptorMap } = this;
-        return Object.keys(valueDescriptorMap).map(key => valueDescriptorMap[key]);
+        return Object.keys(valueDescriptorMap).map((key) => valueDescriptorMap[key]);
     }
     get valueDescriptorNameMap() {
         const descriptors = {};
-        Object.keys(this.valueDescriptorMap).forEach(key => {
+        Object.keys(this.valueDescriptorMap).forEach((key) => {
             const descriptor = this.valueDescriptorMap[key];
             descriptors[descriptor.name] = descriptor;
         });
@@ -1006,7 +1142,7 @@ class TargetObserver {
     constructor(context, delegate) {
         this.context = context;
         this.delegate = delegate;
-        this.targetsByName = new Multimap;
+        this.targetsByName = new Multimap();
     }
     start() {
         if (!this.tokenListObserver) {
@@ -1061,6 +1197,155 @@ class TargetObserver {
     }
 }
 
+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 OutletObserver {
+    constructor(context, delegate) {
+        this.context = context;
+        this.delegate = delegate;
+        this.outletsByName = new Multimap();
+        this.outletElementsByName = new Multimap();
+        this.selectorObserverMap = new Map();
+    }
+    start() {
+        if (this.selectorObserverMap.size === 0) {
+            this.outletDefinitions.forEach((outletName) => {
+                const selector = this.selector(outletName);
+                const details = { outletName };
+                if (selector) {
+                    this.selectorObserverMap.set(outletName, new SelectorObserver(document.body, selector, this, details));
+                }
+            });
+            this.selectorObserverMap.forEach((observer) => observer.start());
+        }
+        this.dependentContexts.forEach((context) => context.refresh());
+    }
+    stop() {
+        if (this.selectorObserverMap.size > 0) {
+            this.disconnectAllOutlets();
+            this.selectorObserverMap.forEach((observer) => observer.stop());
+            this.selectorObserverMap.clear();
+        }
+    }
+    refresh() {
+        this.selectorObserverMap.forEach((observer) => observer.refresh());
+    }
+    selectorMatched(element, _selector, { outletName }) {
+        const outlet = this.getOutlet(element, outletName);
+        if (outlet) {
+            this.connectOutlet(outlet, element, outletName);
+        }
+    }
+    selectorUnmatched(element, _selector, { outletName }) {
+        const outlet = this.getOutletFromMap(element, outletName);
+        if (outlet) {
+            this.disconnectOutlet(outlet, element, outletName);
+        }
+    }
+    selectorMatchElement(element, { outletName }) {
+        return (this.hasOutlet(element, outletName) &&
+            element.matches(`[${this.context.application.schema.controllerAttribute}~=${outletName}]`));
+    }
+    connectOutlet(outlet, element, outletName) {
+        var _a;
+        if (!this.outletElementsByName.has(outletName, element)) {
+            this.outletsByName.add(outletName, outlet);
+            this.outletElementsByName.add(outletName, element);
+            (_a = this.selectorObserverMap.get(outletName)) === null || _a === void 0 ? void 0 : _a.pause(() => this.delegate.outletConnected(outlet, element, outletName));
+        }
+    }
+    disconnectOutlet(outlet, element, outletName) {
+        var _a;
+        if (this.outletElementsByName.has(outletName, element)) {
+            this.outletsByName.delete(outletName, outlet);
+            this.outletElementsByName.delete(outletName, element);
+            (_a = this.selectorObserverMap
+                .get(outletName)) === null || _a === void 0 ? void 0 : _a.pause(() => this.delegate.outletDisconnected(outlet, element, outletName));
+        }
+    }
+    disconnectAllOutlets() {
+        for (const outletName of this.outletElementsByName.keys) {
+            for (const element of this.outletElementsByName.getValuesForKey(outletName)) {
+                for (const outlet of this.outletsByName.getValuesForKey(outletName)) {
+                    this.disconnectOutlet(outlet, element, outletName);
+                }
+            }
+        }
+    }
+    selector(outletName) {
+        return this.scope.outlets.getSelectorForOutletName(outletName);
+    }
+    get outletDependencies() {
+        const dependencies = new Multimap();
+        this.router.modules.forEach((module) => {
+            const constructor = module.definition.controllerConstructor;
+            const outlets = readInheritableStaticArrayValues(constructor, "outlets");
+            outlets.forEach((outlet) => dependencies.add(outlet, module.identifier));
+        });
+        return dependencies;
+    }
+    get outletDefinitions() {
+        return this.outletDependencies.getKeysForValue(this.identifier);
+    }
+    get dependentControllerIdentifiers() {
+        return this.outletDependencies.getValuesForKey(this.identifier);
+    }
+    get dependentContexts() {
+        const identifiers = this.dependentControllerIdentifiers;
+        return this.router.contexts.filter((context) => identifiers.includes(context.identifier));
+    }
+    hasOutlet(element, outletName) {
+        return !!this.getOutlet(element, outletName) || !!this.getOutletFromMap(element, outletName);
+    }
+    getOutlet(element, outletName) {
+        return this.application.getControllerForElementAndIdentifier(element, outletName);
+    }
+    getOutletFromMap(element, outletName) {
+        return this.outletsByName.getValuesForKey(outletName).find((outlet) => outlet.element === element);
+    }
+    get scope() {
+        return this.context.scope;
+    }
+    get identifier() {
+        return this.context.identifier;
+    }
+    get application() {
+        return this.context.application;
+    }
+    get router() {
+        return this.application.router;
+    }
+}
+
 class Context {
     constructor(module, scope) {
         this.logDebugActivity = (functionName, detail = {}) => {
@@ -1074,6 +1359,7 @@ class Context {
         this.bindingObserver = new BindingObserver(this, this.dispatcher);
         this.valueObserver = new ValueObserver(this, this.controller);
         this.targetObserver = new TargetObserver(this, this);
+        this.outletObserver = new OutletObserver(this, this);
         try {
             this.controller.initialize();
             this.logDebugActivity("initialize");
@@ -1086,6 +1372,7 @@ class Context {
         this.bindingObserver.start();
         this.valueObserver.start();
         this.targetObserver.start();
+        this.outletObserver.start();
         try {
             this.controller.connect();
             this.logDebugActivity("connect");
@@ -1094,6 +1381,9 @@ class Context {
             this.handleError(error, "connecting controller");
         }
     }
+    refresh() {
+        this.outletObserver.refresh();
+    }
     disconnect() {
         try {
             this.controller.disconnect();
@@ -1102,6 +1392,7 @@ class Context {
         catch (error) {
             this.handleError(error, "disconnecting controller");
         }
+        this.outletObserver.stop();
         this.targetObserver.stop();
         this.valueObserver.stop();
         this.bindingObserver.stop();
@@ -1135,6 +1426,12 @@ class Context {
     targetDisconnected(element, name) {
         this.invokeControllerMethod(`${name}TargetDisconnected`, element);
     }
+    outletConnected(outlet, element, name) {
+        this.invokeControllerMethod(`${namespaceCamelize(name)}OutletConnected`, outlet, element);
+    }
+    outletDisconnected(outlet, element, name) {
+        this.invokeControllerMethod(`${namespaceCamelize(name)}OutletDisconnected`, outlet, element);
+    }
     invokeControllerMethod(methodName, ...args) {
         const controller = this.controller;
         if (typeof controller[methodName] == "function") {
@@ -1143,37 +1440,6 @@ class Context {
     }
 }
 
-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]]) : [];
-}
-
 function bless(constructor) {
     return shadow(constructor, getBlessedProperties(constructor));
 }
@@ -1217,10 +1483,7 @@ function getShadowedDescriptor(prototype, properties, key) {
 }
 const getOwnKeys = (() => {
     if (typeof Object.getOwnPropertySymbols == "function") {
-        return (object) => [
-            ...Object.getOwnPropertyNames(object),
-            ...Object.getOwnPropertySymbols(object)
-        ];
+        return (object) => [...Object.getOwnPropertyNames(object), ...Object.getOwnPropertySymbols(object)];
     }
     else {
         return Object.getOwnPropertyNames;
@@ -1232,16 +1495,18 @@ const extend = (() => {
             return Reflect.construct(constructor, arguments, new.target);
         }
         extended.prototype = Object.create(constructor.prototype, {
-            constructor: { value: extended }
+            constructor: { value: extended },
         });
         Reflect.setPrototypeOf(extended, constructor);
         return extended;
     }
     function testReflectExtension() {
-        const a = function () { this.a.call(this); };
+        const a = function () {
+            this.a.call(this);
+        };
         const b = extendWithReflect(a);
         b.prototype.a = function () { };
-        return new b;
+        return new b();
     }
     try {
         testReflectExtension();
@@ -1256,7 +1521,7 @@ const extend = (() => {
 function blessDefinition(definition) {
     return {
         identifier: definition.identifier,
-        controllerConstructor: bless(definition.controllerConstructor)
+        controllerConstructor: bless(definition.controllerConstructor),
     };
 }
 
@@ -1264,8 +1529,8 @@ class Module {
     constructor(application, definition) {
         this.application = application;
         this.definition = blessDefinition(definition);
-        this.contextsByScope = new WeakMap;
-        this.connectedContexts = new Set;
+        this.contextsByScope = new WeakMap();
+        this.connectedContexts = new Set();
     }
     get identifier() {
         return this.definition.identifier;
@@ -1363,13 +1628,13 @@ class DataMap {
 
 class Guide {
     constructor(logger) {
-        this.warnedKeysByObject = new WeakMap;
+        this.warnedKeysByObject = new WeakMap();
         this.logger = logger;
     }
     warn(object, key, message) {
         let warnedKeys = this.warnedKeysByObject.get(object);
         if (!warnedKeys) {
-            warnedKeys = new Set;
+            warnedKeys = new Set();
             this.warnedKeysByObject.set(object, warnedKeys);
         }
         if (!warnedKeys.has(key)) {
@@ -1400,15 +1665,13 @@ class TargetSet {
         return this.find(targetName) != null;
     }
     find(...targetNames) {
-        return targetNames.reduce((target, targetName) => target
-            || this.findTarget(targetName)
-            || this.findLegacyTarget(targetName), undefined);
+        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)
+            ...this.findAllLegacyTargets(targetName),
         ], []);
     }
     findTarget(targetName) {
@@ -1429,7 +1692,7 @@ class TargetSet {
     }
     findAllLegacyTargets(targetName) {
         const selector = this.getLegacySelectorForTargetName(targetName);
-        return this.scope.findAllElements(selector).map(element => this.deprecate(element, targetName));
+        return this.scope.findAllElements(selector).map((element) => this.deprecate(element, targetName));
     }
     getLegacySelectorForTargetName(targetName) {
         const targetDescriptor = `${this.identifier}.${targetName}`;
@@ -1450,6 +1713,56 @@ class TargetSet {
     }
 }
 
+class OutletSet {
+    constructor(scope, controllerElement) {
+        this.scope = scope;
+        this.controllerElement = controllerElement;
+    }
+    get element() {
+        return this.scope.element;
+    }
+    get identifier() {
+        return this.scope.identifier;
+    }
+    get schema() {
+        return this.scope.schema;
+    }
+    has(outletName) {
+        return this.find(outletName) != null;
+    }
+    find(...outletNames) {
+        return outletNames.reduce((outlet, outletName) => outlet || this.findOutlet(outletName), undefined);
+    }
+    findAll(...outletNames) {
+        return outletNames.reduce((outlets, outletName) => [...outlets, ...this.findAllOutlets(outletName)], []);
+    }
+    getSelectorForOutletName(outletName) {
+        const attributeName = this.schema.outletAttributeForScope(this.identifier, outletName);
+        return this.controllerElement.getAttribute(attributeName);
+    }
+    findOutlet(outletName) {
+        const selector = this.getSelectorForOutletName(outletName);
+        if (selector)
+            return this.findElement(selector, outletName);
+    }
+    findAllOutlets(outletName) {
+        const selector = this.getSelectorForOutletName(outletName);
+        return selector ? this.findAllElements(selector, outletName) : [];
+    }
+    findElement(selector, outletName) {
+        const elements = this.scope.queryElements(selector);
+        return elements.filter((element) => this.matchesElement(element, selector, outletName))[0];
+    }
+    findAllElements(selector, outletName) {
+        const elements = this.scope.queryElements(selector);
+        return elements.filter((element) => this.matchesElement(element, selector, outletName));
+    }
+    matchesElement(element, selector, outletName) {
+        const controllerAttribute = element.getAttribute(this.scope.schema.controllerAttribute) || "";
+        return element.matches(selector) && controllerAttribute.split(" ").includes(outletName);
+    }
+}
+
 class Scope {
     constructor(schema, element, identifier, logger) {
         this.targets = new TargetSet(this);
@@ -1462,16 +1775,15 @@ class Scope {
         this.element = element;
         this.identifier = identifier;
         this.guide = new Guide(logger);
+        this.outlets = new OutletSet(this.documentScope, element);
     }
     findElement(selector) {
-        return this.element.matches(selector)
-            ? this.element
-            : this.queryElements(selector).find(this.containsElement);
+        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)
+            ...(this.element.matches(selector) ? [this.element] : []),
+            ...this.queryElements(selector).filter(this.containsElement),
         ];
     }
     queryElements(selector) {
@@ -1480,6 +1792,14 @@ class Scope {
     get controllerSelector() {
         return attributeValueContainsToken(this.schema.controllerAttribute, this.identifier);
     }
+    get isDocumentScope() {
+        return this.element === document.documentElement;
+    }
+    get documentScope() {
+        return this.isDocumentScope
+            ? this
+            : new Scope(this.schema, document.documentElement, this.identifier, this.guide.logger);
+    }
 }
 
 class ScopeObserver {
@@ -1488,8 +1808,8 @@ class ScopeObserver {
         this.schema = schema;
         this.delegate = delegate;
         this.valueListObserver = new ValueListObserver(this.element, this.controllerAttribute, this);
-        this.scopesByIdentifierByElement = new WeakMap;
-        this.scopeReferenceCounts = new WeakMap;
+        this.scopesByIdentifierByElement = new WeakMap();
+        this.scopeReferenceCounts = new WeakMap();
     }
     start() {
         this.valueListObserver.start();
@@ -1529,7 +1849,7 @@ class ScopeObserver {
     fetchScopesByIdentifierForElement(element) {
         let scopesByIdentifier = this.scopesByIdentifierByElement.get(element);
         if (!scopesByIdentifier) {
-            scopesByIdentifier = new Map;
+            scopesByIdentifier = new Map();
             this.scopesByIdentifierByElement.set(element, scopesByIdentifier);
         }
         return scopesByIdentifier;
@@ -1540,8 +1860,8 @@ class Router {
     constructor(application) {
         this.application = application;
         this.scopeObserver = new ScopeObserver(this.element, this.schema, this);
-        this.scopesByIdentifier = new Multimap;
-        this.modulesByIdentifier = new Map;
+        this.scopesByIdentifier = new Multimap();
+        this.modulesByIdentifier = new Map();
     }
     get element() {
         return this.application.element;
@@ -1571,6 +1891,10 @@ class Router {
         this.unloadIdentifier(definition.identifier);
         const module = new Module(this.application, definition);
         this.connectModule(module);
+        const afterLoad = definition.controllerConstructor.afterLoad;
+        if (afterLoad) {
+            afterLoad(definition.identifier, this.application);
+        }
     }
     unloadIdentifier(identifier) {
         const module = this.modulesByIdentifier.get(identifier);
@@ -1581,7 +1905,7 @@ class Router {
     getContextForElementAndIdentifier(element, identifier) {
         const module = this.modulesByIdentifier.get(identifier);
         if (module) {
-            return module.contexts.find(context => context.element == element);
+            return module.contexts.find((context) => context.element == element);
         }
     }
     handleError(error, message, detail) {
@@ -1607,12 +1931,12 @@ class Router {
     connectModule(module) {
         this.modulesByIdentifier.set(module.identifier, module);
         const scopes = this.scopesByIdentifier.getValuesForKey(module.identifier);
-        scopes.forEach(scope => module.connectContextForScope(scope));
+        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));
+        scopes.forEach((scope) => module.disconnectContextForScope(scope));
     }
 }
 
@@ -1620,8 +1944,13 @@ const defaultSchema = {
     controllerAttribute: "data-controller",
     actionAttribute: "data-action",
     targetAttribute: "data-target",
-    targetAttributeForScope: identifier => `data-${identifier}-target`
+    targetAttributeForScope: (identifier) => `data-${identifier}-target`,
+    outletAttributeForScope: (identifier, outlet) => `data-${identifier}-${outlet}-outlet`,
+    keyMappings: Object.assign(Object.assign({ enter: "Enter", tab: "Tab", esc: "Escape", space: " ", up: "ArrowUp", down: "ArrowDown", left: "ArrowLeft", right: "ArrowRight", home: "Home", end: "End" }, objectFromEntries("abcdefghijklmnopqrstuvwxyz".split("").map((c) => [c, c]))), objectFromEntries("0123456789".split("").map((n) => [n, n]))),
 };
+function objectFromEntries(array) {
+    return array.reduce((memo, [k, v]) => (Object.assign(Object.assign({}, memo), { [k]: v })), {});
+}
 
 class Application {
     constructor(element = document.documentElement, schema = defaultSchema) {
@@ -1636,9 +1965,10 @@ class Application {
         this.schema = schema;
         this.dispatcher = new Dispatcher(this);
         this.router = new Router(this);
+        this.actionDescriptorFilters = Object.assign({}, defaultActionDescriptorFilters);
     }
     static start(element, schema) {
-        const application = new Application(element, schema);
+        const application = new this(element, schema);
         application.start();
         return application;
     }
@@ -1658,9 +1988,12 @@ class Application {
     register(identifier, controllerConstructor) {
         this.load({ identifier, controllerConstructor });
     }
+    registerActionOption(name, filter) {
+        this.actionDescriptorFilters[name] = filter;
+    }
     load(head, ...rest) {
         const definitions = Array.isArray(head) ? head : [head, ...rest];
-        definitions.forEach(definition => {
+        definitions.forEach((definition) => {
             if (definition.controllerConstructor.shouldLoad) {
                 this.router.loadDefinition(definition);
             }
@@ -1668,10 +2001,10 @@ class Application {
     }
     unload(head, ...rest) {
         const identifiers = Array.isArray(head) ? head : [head, ...rest];
-        identifiers.forEach(identifier => this.router.unloadIdentifier(identifier));
+        identifiers.forEach((identifier) => this.router.unloadIdentifier(identifier));
     }
     get controllers() {
-        return this.router.contexts.map(context => context.controller);
+        return this.router.contexts.map((context) => context.controller);
     }
     getControllerForElementAndIdentifier(element, identifier) {
         const context = this.router.getContextForElementAndIdentifier(element, identifier);
@@ -1690,7 +2023,7 @@ class Application {
     }
 }
 function domReady() {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         if (document.readyState == "loading") {
             document.addEventListener("DOMContentLoaded", () => resolve());
         }
@@ -1718,18 +2051,85 @@ function propertiesForClassDefinition(key) {
                     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 OutletPropertiesBlessing(constructor) {
+    const outlets = readInheritableStaticArrayValues(constructor, "outlets");
+    return outlets.reduce((properties, outletDefinition) => {
+        return Object.assign(properties, propertiesForOutletDefinition(outletDefinition));
+    }, {});
+}
+function propertiesForOutletDefinition(name) {
+    const camelizedName = namespaceCamelize(name);
+    return {
+        [`${camelizedName}Outlet`]: {
+            get() {
+                const outlet = this.outlets.find(name);
+                if (outlet) {
+                    const outletController = this.application.getControllerForElementAndIdentifier(outlet, name);
+                    if (outletController) {
+                        return outletController;
+                    }
+                    else {
+                        throw new Error(`Missing "data-controller=${name}" attribute on outlet element for "${this.identifier}" controller`);
+                    }
+                }
+                throw new Error(`Missing outlet element "${name}" for "${this.identifier}" controller`);
+            },
+        },
+        [`${camelizedName}Outlets`]: {
+            get() {
+                const outlets = this.outlets.findAll(name);
+                if (outlets.length > 0) {
+                    return outlets
+                        .map((outlet) => {
+                        const controller = this.application.getControllerForElementAndIdentifier(outlet, name);
+                        if (controller) {
+                            return controller;
+                        }
+                        else {
+                            console.warn(`The provided outlet element is missing the outlet controller "${name}" for "${this.identifier}"`, outlet);
+                        }
+                    })
+                        .filter((controller) => controller);
+                }
+                return [];
+            },
+        },
+        [`${camelizedName}OutletElement`]: {
+            get() {
+                const outlet = this.outlets.find(name);
+                if (outlet) {
+                    return outlet;
+                }
+                else {
+                    throw new Error(`Missing outlet element "${name}" for "${this.identifier}" controller`);
+                }
+            },
+        },
+        [`${camelizedName}OutletElements`]: {
+            get() {
+                return this.outlets.findAll(name);
+            },
+        },
+        [`has${capitalize(camelizedName)}Outlet`]: {
+            get() {
+                return this.outlets.has(name);
+            },
+        },
     };
 }
 
@@ -1750,18 +2150,18 @@ function propertiesForTargetDefinition(name) {
                 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);
-            }
-        }
+            },
+        },
     };
 }
 
@@ -1775,8 +2175,8 @@ function ValuePropertiesBlessing(constructor) {
                     const attributeName = this.data.getAttributeNameForKey(valueDescriptor.key);
                     return Object.assign(result, { [attributeName]: valueDescriptor });
                 }, {});
-            }
-        }
+            },
+        },
     };
     return valueDefinitionPairs.reduce((properties, valueDefinitionPair) => {
         return Object.assign(properties, propertiesForValueDefinitionPair(valueDefinitionPair));
@@ -1803,13 +2203,13 @@ function propertiesForValueDefinitionPair(valueDefinitionPair, controller) {
                 else {
                     this.data.set(key, write(value));
                 }
-            }
+            },
         },
         [`has${capitalize(name)}`]: {
             get() {
                 return this.data.has(key) || definition.hasCustomDefaultValue;
-            }
-        }
+            },
+        },
     };
 }
 function parseValueDefinitionPair([token, typeDefinition], controller) {
@@ -1821,18 +2221,26 @@ function parseValueDefinitionPair([token, typeDefinition], controller) {
 }
 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";
+        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";
+        case "boolean":
+            return "boolean";
+        case "number":
+            return "number";
+        case "string":
+            return "string";
     }
     if (Array.isArray(defaultValue))
         return "array";
@@ -1854,7 +2262,7 @@ function parseValueTypeDefinition(payload) {
     const typeFromObject = parseValueTypeObject({
         controller: payload.controller,
         token: payload.token,
-        typeObject: payload.typeDefinition
+        typeObject: payload.typeDefinition,
     });
     const typeFromDefaultValue = parseValueTypeDefault(payload.typeDefinition);
     const typeFromConstant = parseValueTypeConstant(payload.typeDefinition);
@@ -1880,18 +2288,26 @@ function valueDescriptorForTokenAndTypeDefinition(payload) {
         type,
         key,
         name: camelize(key),
-        get defaultValue() { return defaultValueForDefinition(payload.typeDefinition); },
-        get hasCustomDefaultValue() { return parseValueTypeDefault(payload.typeDefinition) !== undefined; },
+        get defaultValue() {
+            return defaultValueForDefinition(payload.typeDefinition);
+        },
+        get hasCustomDefaultValue() {
+            return parseValueTypeDefault(payload.typeDefinition) !== undefined;
+        },
         reader: readers[type],
-        writer: writers[type] || writers.default
+        writer: writers[type] || writers.default,
     };
 }
 const defaultValuesByType = {
-    get array() { return []; },
+    get array() {
+        return [];
+    },
     boolean: false,
     number: 0,
-    get object() { return {}; },
-    string: ""
+    get object() {
+        return {};
+    },
+    string: "",
 };
 const readers = {
     array(value) {
@@ -1916,12 +2332,12 @@ const readers = {
     },
     string(value) {
         return value;
-    }
+    },
 };
 const writers = {
     default: writeString,
     array: writeJSON,
-    object: writeJSON
+    object: writeJSON,
 };
 function writeJSON(value) {
     return JSON.stringify(value);
@@ -1937,6 +2353,9 @@ class Controller {
     static get shouldLoad() {
         return true;
     }
+    static afterLoad(_identifier, _application) {
+        return;
+    }
     get application() {
         return this.context.application;
     }
@@ -1952,6 +2371,9 @@ class Controller {
     get targets() {
         return this.scope.targets;
     }
+    get outlets() {
+        return this.scope.outlets;
+    }
     get classes() {
         return this.scope.classes;
     }
@@ -1971,8 +2393,14 @@ class Controller {
         return event;
     }
 }
-Controller.blessings = [ClassPropertiesBlessing, TargetPropertiesBlessing, ValuePropertiesBlessing];
+Controller.blessings = [
+    ClassPropertiesBlessing,
+    TargetPropertiesBlessing,
+    ValuePropertiesBlessing,
+    OutletPropertiesBlessing,
+];
 Controller.targets = [];
+Controller.outlets = [];
 Controller.values = {};
 
-export { Application, AttributeObserver, Context, Controller, ElementObserver, IndexedMultimap, Multimap, StringMapObserver, TokenListObserver, ValueListObserver, add, defaultSchema, del, fetch, prune };
+export { Application, AttributeObserver, Context, Controller, ElementObserver, IndexedMultimap, Multimap, SelectorObserver, StringMapObserver, TokenListObserver, ValueListObserver, add, defaultSchema, del, fetch, prune };