/* Stimulus 2.0.0 Copyright © 2020 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: 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: eventTarget, eventName: eventName, eventOptions: 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"; } } 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 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); } 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) { try { this.method.call(this.controller, event); } catch (error) { const {identifier: identifier, controller: controller, element: element, index: index} = this; const detail = { identifier: identifier, controller: controller, element: element, index: index, event: 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 }); 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); } } } processMutations(mutations) { if (this.started) { for (const mutation of mutations) { this.processMutation(mutation); } } } processMutation(mutation) { const attributeName = mutation.attributeName; if (attributeName) { this.refreshAttribute(attributeName); } } refreshAttribute(attributeName) { 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); } if (value == null) { this.stringMap.delete(attributeName); this.stringMapKeyRemoved(key, attributeName); } else { this.stringMap.set(attributeName, value); } } } stringMapKeyAdded(key, attributeName) { if (this.delegate.stringMapKeyAdded) { this.delegate.stringMapKeyAdded(key, attributeName); } } stringMapValueChanged(value, key) { if (this.delegate.stringMapValueChanged) { this.delegate.stringMapValueChanged(value, key); } } stringMapKeyRemoved(key, attributeName) { if (this.delegate.stringMapKeyRemoved) { this.delegate.stringMapKeyRemoved(key, attributeName); } } 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 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 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: element, attributeName: attributeName, content: content, index: index }))); } function zip(left, right) { const length = Math.max(left.length, right.length); return Array.from({ length: 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: element} = token; const {value: value} = this.fetchParseResultForToken(token); if (value) { this.fetchValuesByTokenForElement(element).set(token, value); this.delegate.elementMatchedValue(element, value); } } tokenUnmatched(token) { const {element: element} = token; const {value: 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: value }; } catch (error) { return { error: 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); this.bindingsByAction.set(action, binding); this.delegate.bindingConnected(binding); } 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); } } 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; } } stringMapValueChanged(attributeValue, name) { this.invokeChangedCallbackForValue(name); } invokeChangedCallbacksForDefaultValues() { for (const {key: key, name: name, defaultValue: defaultValue} of this.valueDescriptors) { if (defaultValue != undefined && !this.controller.data.has(key)) { this.invokeChangedCallbackForValue(name); } } } invokeChangedCallbackForValue(name) { const methodName = `${name}Changed`; const method = this.receiver[methodName]; if (typeof method == "function") { const value = this.receiver[name]; method.call(this.receiver, value); } } get valueDescriptors() { const {valueDescriptorMap: valueDescriptorMap} = this; return Object.keys(valueDescriptorMap).map((key => valueDescriptorMap[key])); } } class Context { constructor(module, scope) { this.module = module; this.scope = scope; this.controller = new module.controllerConstructor(this); this.bindingObserver = new BindingObserver(this, this.dispatcher); this.valueObserver = new ValueObserver(this, this.controller); try { this.controller.initialize(); } catch (error) { this.handleError(error, "initializing controller"); } } connect() { this.bindingObserver.start(); this.valueObserver.start(); try { this.controller.connect(); } catch (error) { this.handleError(error, "connecting controller"); } } disconnect() { try { this.controller.disconnect(); } catch (error) { this.handleError(error, "disconnecting controller"); } 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: identifier, controller: controller, element: element} = this; detail = Object.assign({ identifier: identifier, controller: controller, element: element }, detail); this.application.handleError(error, `Error ${message}`, detail); } } 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)); } 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.data.get(this.getDataKey(name)); } getAttributeName(name) { return this.data.getAttributeNameForKey(this.getDataKey(name)); } getDataKey(name) { return `${name}-class`; } get data() { return this.scope.data; } } 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()}`)); } 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 = `data-${this.identifier}-target`; 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: identifier} = this; const attributeName = this.schema.targetAttribute; this.guide.warn(element, `target:${targetName}`, `Please replace ${attributeName}="${identifier}.${targetName}" with data-${identifier}-target="${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 => 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: 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); } } } 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) { this.scopesByIdentifier.add(scope.identifier, scope); const module = this.modulesByIdentifier.get(scope.identifier); if (module) { module.connectContextForScope(scope); } } 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", classAttribute: "data-class" }; class Application { constructor(element = document.documentElement, schema = defaultSchema) { this.logger = console; 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.dispatcher.start(); this.router.start(); } stop() { this.dispatcher.stop(); this.router.stop(); } register(identifier, controllerConstructor) { this.load({ identifier: identifier, controllerConstructor: 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; } handleError(error, message, detail) { this.logger.error(`%s\n\n%o\n\n%o`, message, error, detail); } } 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) => Object.assign(properties, propertiesForClassDefinition(classDefinition))), {}); } function propertiesForClassDefinition(key) { const name = `${key}Class`; return { [name]: { get() { const {classes: classes} = this; if (classes.has(key)) { return classes.get(key); } else { const attribute = classes.getAttributeName(key); throw new Error(`Missing attribute "${attribute}"`); } } }, [`has${capitalize(name)}`]: { get() { return this.classes.has(key); } } }; } function TargetPropertiesBlessing(constructor) { const targets = readInheritableStaticArrayValues(constructor, "targets"); return targets.reduce(((properties, targetDefinition) => 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 "${this.identifier}.${name}"`); } } }, [`${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) => Object.assign(properties, propertiesForValueDefinitionPair(valueDefinitionPair))), propertyDescriptorMap); } function propertiesForValueDefinitionPair(valueDefinitionPair) { const definition = parseValueDefinitionPair(valueDefinitionPair); const {type: type, key: key, name: name} = definition; const read = readers[type], write = writers[type] || writers.default; 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); } } }; } function parseValueDefinitionPair([token, typeConstant]) { const type = parseValueTypeConstant(typeConstant); return valueDescriptorForTokenAndType(token, type); } function parseValueTypeConstant(typeConstant) { switch (typeConstant) { case Array: return "array"; case Boolean: return "boolean"; case Number: return "number"; case Object: return "object"; case String: return "string"; } throw new Error(`Unknown value type constant "${typeConstant}"`); } function valueDescriptorForTokenAndType(token, type) { const key = `${dasherize(token)}-value`; return { type: type, key: key, name: camelize(key), get defaultValue() { return defaultValuesByType[type]; } }; } 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 parseFloat(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() {} } Controller.blessings = [ ClassPropertiesBlessing, TargetPropertiesBlessing, ValuePropertiesBlessing ]; Controller.targets = []; Controller.values = {}; export { Application, Context, Controller, defaultSchema };