stimulus-rails 1.2.1 → 1.2.2

data/app/assets/javascripts/stimulus.js

@@ -3,8 +3,8 @@
 //= link ./stimulus-loading.js
 
 /*
-Stimulus 3.2.1
-Copyright © 2022 Basecamp, LLC
+Stimulus 3.2.2
+Copyright © 2023 Basecamp, LLC
  */
 class EventListener {
     constructor(eventTarget, eventName, eventOptions) {
@@ -169,23 +169,23 @@ const defaultActionDescriptorFilters = {
         }
     },
 };
-const descriptorPattern = /^(?:(.+?)(?:\.(.+?))?(?:@(window|document))?->)?(.+?)(?:#([^:]+?))(?::(.+))?$/;
+const descriptorPattern = /^(?:(?:([^.]+?)\+)?(.+?)(?:\.(.+?))?(?:@(window|document))?->)?(.+?)(?:#([^:]+?))(?::(.+))?$/;
 function parseActionDescriptorString(descriptorString) {
     const source = descriptorString.trim();
     const matches = source.match(descriptorPattern) || [];
-    let eventName = matches[1];
-    let keyFilter = matches[2];
+    let eventName = matches[2];
+    let keyFilter = matches[3];
     if (keyFilter && !["keydown", "keyup", "keypress"].includes(eventName)) {
         eventName += `.${keyFilter}`;
         keyFilter = "";
     }
     return {
-        eventTarget: parseEventTarget(matches[3]),
+        eventTarget: parseEventTarget(matches[4]),
         eventName,
-        eventOptions: matches[6] ? parseEventOptions(matches[6]) : {},
-        identifier: matches[4],
-        methodName: matches[5],
-        keyFilter,
+        eventOptions: matches[7] ? parseEventOptions(matches[7]) : {},
+        identifier: matches[5],
+        methodName: matches[6],
+        keyFilter: matches[1] || keyFilter,
     };
 }
 function parseEventTarget(eventTargetName) {
@@ -226,6 +226,14 @@ function tokenize(value) {
     return value.match(/[^\s]+/g) || [];
 }
 
+function isSomething(object) {
+    return object !== null && object !== undefined;
+}
+function hasProperty(object, property) {
+    return Object.prototype.hasOwnProperty.call(object, property);
+}
+
+const allModifiers = ["meta", "ctrl", "alt", "shift"];
 class Action {
     constructor(element, index, descriptor, schema) {
         this.element = element;
@@ -246,25 +254,33 @@ class Action {
         const eventTarget = this.eventTargetName ? `@${this.eventTargetName}` : "";
         return `${this.eventName}${eventFilter}${eventTarget}->${this.identifier}#${this.methodName}`;
     }
-    isFilterTarget(event) {
+    shouldIgnoreKeyboardEvent(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) {
+        const filters = this.keyFilter.split("+");
+        if (this.keyFilterDissatisfied(event, filters)) {
             return true;
         }
-        const standardFilter = filteres.filter((key) => !modifiers.includes(key))[0];
+        const standardFilter = filters.filter((key) => !allModifiers.includes(key))[0];
         if (!standardFilter) {
             return false;
         }
-        if (!Object.prototype.hasOwnProperty.call(this.keyMappings, standardFilter)) {
+        if (!hasProperty(this.keyMappings, standardFilter)) {
             error(`contains unknown key filter: ${this.keyFilter}`);
         }
         return this.keyMappings[standardFilter].toLowerCase() !== event.key.toLowerCase();
     }
+    shouldIgnoreMouseEvent(event) {
+        if (!this.keyFilter) {
+            return false;
+        }
+        const filters = [this.keyFilter];
+        if (this.keyFilterDissatisfied(event, filters)) {
+            return true;
+        }
+        return false;
+    }
     get params() {
         const params = {};
         const pattern = new RegExp(`^data-${this.identifier}-(.+)-param$`, "i");
@@ -283,6 +299,10 @@ class Action {
     get keyMappings() {
         return this.schema.keyMappings;
     }
+    keyFilterDissatisfied(event, filters) {
+        const [meta, ctrl, alt, shift] = allModifiers.map((modifier) => filters.includes(modifier));
+        return event.metaKey !== meta || event.ctrlKey !== ctrl || event.altKey !== alt || event.shiftKey !== shift;
+    }
 }
 const defaultEventNames = {
     a: () => "click",
@@ -329,8 +349,9 @@ class Binding {
         return this.context.identifier;
     }
     handleEvent(event) {
-        if (this.willBeInvokedByEvent(event) && this.applyEventModifiers(event)) {
-            this.invokeWithEvent(event);
+        const actionEvent = this.prepareActionEvent(event);
+        if (this.willBeInvokedByEvent(event) && this.applyEventModifiers(actionEvent)) {
+            this.invokeWithEvent(actionEvent);
         }
     }
     get eventName() {
@@ -346,11 +367,12 @@ class Binding {
     applyEventModifiers(event) {
         const { element } = this.action;
         const { actionDescriptorFilters } = this.context.application;
+        const { controller } = this.context;
         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 });
+                passes = passes && filter({ name, value, event, element, controller });
             }
             else {
                 continue;
@@ -358,12 +380,13 @@ class Binding {
         }
         return passes;
     }
+    prepareActionEvent(event) {
+        return Object.assign(event, { params: this.action.params });
+    }
     invokeWithEvent(event) {
         const { target, currentTarget } = event;
         try {
-            const { params } = this.action;
-            const actionEvent = Object.assign(event, { params });
-            this.method.call(this.controller, actionEvent);
+            this.method.call(this.controller, event);
             this.context.logDebugActivity(this.methodName, { event, target, currentTarget, action: this.methodName });
         }
         catch (error) {
@@ -374,7 +397,10 @@ class Binding {
     }
     willBeInvokedByEvent(event) {
         const eventTarget = event.target;
-        if (event instanceof KeyboardEvent && this.action.isFilterTarget(event)) {
+        if (event instanceof KeyboardEvent && this.action.shouldIgnoreKeyboardEvent(event)) {
+            return false;
+        }
+        if (event instanceof MouseEvent && this.action.shouldIgnoreMouseEvent(event)) {
             return false;
         }
         if (this.element === eventTarget) {
@@ -464,8 +490,7 @@ class ElementObserver {
             this.processAddedNodes(mutation.addedNodes);
         }
     }
-    processAttributeChange(node, attributeName) {
-        const element = node;
+    processAttributeChange(element, attributeName) {
         if (this.elements.has(element)) {
             if (this.delegate.elementAttributeChanged && this.matchElement(element)) {
                 this.delegate.elementAttributeChanged(element, attributeName);
@@ -681,8 +706,8 @@ class IndexedMultimap extends Multimap {
 }
 
 class SelectorObserver {
-    constructor(element, selector, delegate, details = {}) {
-        this.selector = selector;
+    constructor(element, selector, delegate, details) {
+        this._selector = selector;
         this.details = details;
         this.elementObserver = new ElementObserver(element, this);
         this.delegate = delegate;
@@ -691,6 +716,13 @@ class SelectorObserver {
     get started() {
         return this.elementObserver.started;
     }
+    get selector() {
+        return this._selector;
+    }
+    set selector(selector) {
+        this._selector = selector;
+        this.refresh();
+    }
     start() {
         this.elementObserver.start();
     }
@@ -707,39 +739,61 @@ class SelectorObserver {
         return this.elementObserver.element;
     }
     matchElement(element) {
-        const matches = element.matches(this.selector);
-        if (this.delegate.selectorMatchElement) {
-            return matches && this.delegate.selectorMatchElement(element, this.details);
+        const { selector } = this;
+        if (selector) {
+            const matches = element.matches(selector);
+            if (this.delegate.selectorMatchElement) {
+                return matches && this.delegate.selectorMatchElement(element, this.details);
+            }
+            return matches;
+        }
+        else {
+            return false;
         }
-        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);
+        const { selector } = this;
+        if (selector) {
+            const match = this.matchElement(tree) ? [tree] : [];
+            const matches = Array.from(tree.querySelectorAll(selector)).filter((match) => this.matchElement(match));
+            return match.concat(matches);
+        }
+        else {
+            return [];
+        }
     }
     elementMatched(element) {
-        this.selectorMatched(element);
+        const { selector } = this;
+        if (selector) {
+            this.selectorMatched(element, selector);
+        }
     }
     elementUnmatched(element) {
-        this.selectorUnmatched(element);
+        const selectors = this.matchesByElement.getKeysForValue(element);
+        for (const selector of selectors) {
+            this.selectorUnmatched(element, selector);
+        }
     }
     elementAttributeChanged(element, _attributeName) {
-        const matches = this.matchElement(element);
-        const matchedBefore = this.matchesByElement.has(this.selector, element);
-        if (!matches && matchedBefore) {
-            this.selectorUnmatched(element);
+        const { selector } = this;
+        if (selector) {
+            const matches = this.matchElement(element);
+            const matchedBefore = this.matchesByElement.has(selector, element);
+            if (matches && !matchedBefore) {
+                this.selectorMatched(element, selector);
+            }
+            else if (!matches && matchedBefore) {
+                this.selectorUnmatched(element, selector);
+            }
         }
     }
-    selectorMatched(element) {
-        if (this.delegate.selectorMatched) {
-            this.delegate.selectorMatched(element, this.selector, this.details);
-            this.matchesByElement.add(this.selector, element);
-        }
+    selectorMatched(element, selector) {
+        this.delegate.selectorMatched(element, selector, this.details);
+        this.matchesByElement.add(selector, element);
     }
-    selectorUnmatched(element) {
-        this.delegate.selectorUnmatched(element, this.selector, this.details);
-        this.matchesByElement.delete(this.selector, element);
+    selectorUnmatched(element, selector) {
+        this.delegate.selectorUnmatched(element, selector, this.details);
+        this.matchesByElement.delete(selector, element);
     }
 }
 
@@ -1236,34 +1290,47 @@ function getOwnStaticObjectPairs(constructor, propertyName) {
 
 class OutletObserver {
     constructor(context, delegate) {
+        this.started = false;
         this.context = context;
         this.delegate = delegate;
         this.outletsByName = new Multimap();
         this.outletElementsByName = new Multimap();
         this.selectorObserverMap = new Map();
+        this.attributeObserverMap = new Map();
     }
     start() {
-        if (this.selectorObserverMap.size === 0) {
+        if (!this.started) {
             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.setupSelectorObserverForOutlet(outletName);
+                this.setupAttributeObserverForOutlet(outletName);
             });
-            this.selectorObserverMap.forEach((observer) => observer.start());
+            this.started = true;
+            this.dependentContexts.forEach((context) => context.refresh());
         }
-        this.dependentContexts.forEach((context) => context.refresh());
+    }
+    refresh() {
+        this.selectorObserverMap.forEach((observer) => observer.refresh());
+        this.attributeObserverMap.forEach((observer) => observer.refresh());
     }
     stop() {
-        if (this.selectorObserverMap.size > 0) {
+        if (this.started) {
+            this.started = false;
             this.disconnectAllOutlets();
+            this.stopSelectorObservers();
+            this.stopAttributeObservers();
+        }
+    }
+    stopSelectorObservers() {
+        if (this.selectorObserverMap.size > 0) {
             this.selectorObserverMap.forEach((observer) => observer.stop());
             this.selectorObserverMap.clear();
         }
     }
-    refresh() {
-        this.selectorObserverMap.forEach((observer) => observer.refresh());
+    stopAttributeObservers() {
+        if (this.attributeObserverMap.size > 0) {
+            this.attributeObserverMap.forEach((observer) => observer.stop());
+            this.attributeObserverMap.clear();
+        }
     }
     selectorMatched(element, _selector, { outletName }) {
         const outlet = this.getOutlet(element, outletName);
@@ -1278,8 +1345,33 @@ class OutletObserver {
         }
     }
     selectorMatchElement(element, { outletName }) {
-        return (this.hasOutlet(element, outletName) &&
-            element.matches(`[${this.context.application.schema.controllerAttribute}~=${outletName}]`));
+        const selector = this.selector(outletName);
+        const hasOutlet = this.hasOutlet(element, outletName);
+        const hasOutletController = element.matches(`[${this.schema.controllerAttribute}~=${outletName}]`);
+        if (selector) {
+            return hasOutlet && hasOutletController && element.matches(selector);
+        }
+        else {
+            return false;
+        }
+    }
+    elementMatchedAttribute(_element, attributeName) {
+        const outletName = this.getOutletNameFromOutletAttributeName(attributeName);
+        if (outletName) {
+            this.updateSelectorObserverForOutlet(outletName);
+        }
+    }
+    elementAttributeValueChanged(_element, attributeName) {
+        const outletName = this.getOutletNameFromOutletAttributeName(attributeName);
+        if (outletName) {
+            this.updateSelectorObserverForOutlet(outletName);
+        }
+    }
+    elementUnmatchedAttribute(_element, attributeName) {
+        const outletName = this.getOutletNameFromOutletAttributeName(attributeName);
+        if (outletName) {
+            this.updateSelectorObserverForOutlet(outletName);
+        }
     }
     connectOutlet(outlet, element, outletName) {
         var _a;
@@ -1307,9 +1399,33 @@ class OutletObserver {
             }
         }
     }
+    updateSelectorObserverForOutlet(outletName) {
+        const observer = this.selectorObserverMap.get(outletName);
+        if (observer) {
+            observer.selector = this.selector(outletName);
+        }
+    }
+    setupSelectorObserverForOutlet(outletName) {
+        const selector = this.selector(outletName);
+        const selectorObserver = new SelectorObserver(document.body, selector, this, { outletName });
+        this.selectorObserverMap.set(outletName, selectorObserver);
+        selectorObserver.start();
+    }
+    setupAttributeObserverForOutlet(outletName) {
+        const attributeName = this.attributeNameForOutletName(outletName);
+        const attributeObserver = new AttributeObserver(this.scope.element, attributeName, this);
+        this.attributeObserverMap.set(outletName, attributeObserver);
+        attributeObserver.start();
+    }
     selector(outletName) {
         return this.scope.outlets.getSelectorForOutletName(outletName);
     }
+    attributeNameForOutletName(outletName) {
+        return this.scope.schema.outletAttributeForScope(this.identifier, outletName);
+    }
+    getOutletNameFromOutletAttributeName(attributeName) {
+        return this.outletDefinitions.find((outletName) => this.attributeNameForOutletName(outletName) === attributeName);
+    }
     get outletDependencies() {
         const dependencies = new Multimap();
         this.router.modules.forEach((module) => {
@@ -1341,6 +1457,9 @@ class OutletObserver {
     get scope() {
         return this.context.scope;
     }
+    get schema() {
+        return this.context.schema;
+    }
     get identifier() {
         return this.context.identifier;
     }
@@ -1828,6 +1947,9 @@ class ScopeObserver {
     }
     parseValueForToken(token) {
         const { element, content: identifier } = token;
+        return this.parseValueForElementAndIdentifier(element, identifier);
+    }
+    parseValueForElementAndIdentifier(element, identifier) {
         const scopesByIdentifier = this.fetchScopesByIdentifierForElement(element);
         let scope = scopesByIdentifier.get(identifier);
         if (!scope) {
@@ -1899,7 +2021,7 @@ class Router {
         this.connectModule(module);
         const afterLoad = definition.controllerConstructor.afterLoad;
         if (afterLoad) {
-            afterLoad(definition.identifier, this.application);
+            afterLoad.call(definition.controllerConstructor, definition.identifier, this.application);
         }
     }
     unloadIdentifier(identifier) {
@@ -1914,6 +2036,15 @@ class Router {
             return module.contexts.find((context) => context.element == element);
         }
     }
+    proposeToConnectScopeForElementAndIdentifier(element, identifier) {
+        const scope = this.scopeObserver.parseValueForElementAndIdentifier(element, identifier);
+        if (scope) {
+            this.scopeObserver.elementMatchedValue(scope.element, scope);
+        }
+        else {
+            console.error(`Couldn't find or create scope for identifier: "${identifier}" and element:`, element);
+        }
+    }
     handleError(error, message, detail) {
         this.application.handleError(error, message, detail);
     }
@@ -1952,7 +2083,7 @@ const defaultSchema = {
     targetAttribute: "data-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]))),
+    keyMappings: Object.assign(Object.assign({ enter: "Enter", tab: "Tab", esc: "Escape", space: " ", up: "ArrowUp", down: "ArrowDown", left: "ArrowLeft", right: "ArrowRight", home: "Home", end: "End", page_up: "PageUp", page_down: "PageDown" }, 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 })), {});
@@ -2078,22 +2209,32 @@ function OutletPropertiesBlessing(constructor) {
         return Object.assign(properties, propertiesForOutletDefinition(outletDefinition));
     }, {});
 }
+function getOutletController(controller, element, identifier) {
+    return controller.application.getControllerForElementAndIdentifier(element, identifier);
+}
+function getControllerAndEnsureConnectedScope(controller, element, outletName) {
+    let outletController = getOutletController(controller, element, outletName);
+    if (outletController)
+        return outletController;
+    controller.application.router.proposeToConnectScopeForElementAndIdentifier(element, outletName);
+    outletController = getOutletController(controller, element, outletName);
+    if (outletController)
+        return outletController;
+}
 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) {
+                const outletElement = this.outlets.find(name);
+                const selector = this.outlets.getSelectorForOutletName(name);
+                if (outletElement) {
+                    const outletController = getControllerAndEnsureConnectedScope(this, outletElement, name);
+                    if (outletController)
                         return outletController;
-                    }
-                    else {
-                        throw new Error(`Missing "data-controller=${name}" attribute on outlet element for "${this.identifier}" controller`);
-                    }
+                    throw new Error(`The provided outlet element is missing an outlet controller "${name}" instance for host controller "${this.identifier}"`);
                 }
-                throw new Error(`Missing outlet element "${name}" for "${this.identifier}" controller`);
+                throw new Error(`Missing outlet element "${name}" for host controller "${this.identifier}". Stimulus couldn't find a matching outlet element using selector "${selector}".`);
             },
         },
         [`${camelizedName}Outlets`]: {
@@ -2101,14 +2242,11 @@ function propertiesForOutletDefinition(name) {
                 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);
-                        }
+                        .map((outletElement) => {
+                        const outletController = getControllerAndEnsureConnectedScope(this, outletElement, name);
+                        if (outletController)
+                            return outletController;
+                        console.warn(`The provided outlet element is missing an outlet controller "${name}" instance for host controller "${this.identifier}"`, outletElement);
                     })
                         .filter((controller) => controller);
                 }
@@ -2117,12 +2255,13 @@ function propertiesForOutletDefinition(name) {
         },
         [`${camelizedName}OutletElement`]: {
             get() {
-                const outlet = this.outlets.find(name);
-                if (outlet) {
-                    return outlet;
+                const outletElement = this.outlets.find(name);
+                const selector = this.outlets.getSelectorForOutletName(name);
+                if (outletElement) {
+                    return outletElement;
                 }
                 else {
-                    throw new Error(`Missing outlet element "${name}" for "${this.identifier}" controller`);
+                    throw new Error(`Missing outlet element "${name}" for host controller "${this.identifier}". Stimulus couldn't find a matching outlet element using selector "${selector}".`);
                 }
             },
         },
@@ -2254,51 +2393,67 @@ function parseValueTypeDefault(defaultValue) {
         return "object";
 }
 function parseValueTypeObject(payload) {
-    const typeFromObject = parseValueTypeConstant(payload.typeObject.type);
-    if (!typeFromObject)
-        return;
-    const defaultValueType = parseValueTypeDefault(payload.typeObject.default);
-    if (typeFromObject !== defaultValueType) {
-        const propertyPath = payload.controller ? `${payload.controller}.${payload.token}` : payload.token;
-        throw new Error(`The specified default value for the Stimulus Value "${propertyPath}" must match the defined type "${typeFromObject}". The provided default value of "${payload.typeObject.default}" is of type "${defaultValueType}".`);
-    }
-    return typeFromObject;
+    const { controller, token, typeObject } = payload;
+    const hasType = isSomething(typeObject.type);
+    const hasDefault = isSomething(typeObject.default);
+    const fullObject = hasType && hasDefault;
+    const onlyType = hasType && !hasDefault;
+    const onlyDefault = !hasType && hasDefault;
+    const typeFromObject = parseValueTypeConstant(typeObject.type);
+    const typeFromDefaultValue = parseValueTypeDefault(payload.typeObject.default);
+    if (onlyType)
+        return typeFromObject;
+    if (onlyDefault)
+        return typeFromDefaultValue;
+    if (typeFromObject !== typeFromDefaultValue) {
+        const propertyPath = controller ? `${controller}.${token}` : token;
+        throw new Error(`The specified default value for the Stimulus Value "${propertyPath}" must match the defined type "${typeFromObject}". The provided default value of "${typeObject.default}" is of type "${typeFromDefaultValue}".`);
+    }
+    if (fullObject)
+        return typeFromObject;
 }
 function parseValueTypeDefinition(payload) {
-    const typeFromObject = parseValueTypeObject({
-        controller: payload.controller,
-        token: payload.token,
-        typeObject: payload.typeDefinition,
-    });
-    const typeFromDefaultValue = parseValueTypeDefault(payload.typeDefinition);
-    const typeFromConstant = parseValueTypeConstant(payload.typeDefinition);
+    const { controller, token, typeDefinition } = payload;
+    const typeObject = { controller, token, typeObject: typeDefinition };
+    const typeFromObject = parseValueTypeObject(typeObject);
+    const typeFromDefaultValue = parseValueTypeDefault(typeDefinition);
+    const typeFromConstant = parseValueTypeConstant(typeDefinition);
     const type = typeFromObject || typeFromDefaultValue || typeFromConstant;
     if (type)
         return type;
-    const propertyPath = payload.controller ? `${payload.controller}.${payload.typeDefinition}` : payload.token;
-    throw new Error(`Unknown value type "${propertyPath}" for "${payload.token}" value`);
+    const propertyPath = controller ? `${controller}.${typeDefinition}` : token;
+    throw new Error(`Unknown value type "${propertyPath}" for "${token}" value`);
 }
 function defaultValueForDefinition(typeDefinition) {
     const constant = parseValueTypeConstant(typeDefinition);
     if (constant)
         return defaultValuesByType[constant];
-    const defaultValue = typeDefinition.default;
-    if (defaultValue !== undefined)
-        return defaultValue;
+    const hasDefault = hasProperty(typeDefinition, "default");
+    const hasType = hasProperty(typeDefinition, "type");
+    const typeObject = typeDefinition;
+    if (hasDefault)
+        return typeObject.default;
+    if (hasType) {
+        const { type } = typeObject;
+        const constantFromType = parseValueTypeConstant(type);
+        if (constantFromType)
+            return defaultValuesByType[constantFromType];
+    }
     return typeDefinition;
 }
 function valueDescriptorForTokenAndTypeDefinition(payload) {
-    const key = `${dasherize(payload.token)}-value`;
+    const { token, typeDefinition } = payload;
+    const key = `${dasherize(token)}-value`;
     const type = parseValueTypeDefinition(payload);
     return {
         type,
         key,
         name: camelize(key),
         get defaultValue() {
-            return defaultValueForDefinition(payload.typeDefinition);
+            return defaultValueForDefinition(typeDefinition);
         },
         get hasCustomDefaultValue() {
-            return parseValueTypeDefault(payload.typeDefinition) !== undefined;
+            return parseValueTypeDefault(typeDefinition) !== undefined;
         },
         reader: readers[type],
         writer: writers[type] || writers.default,
@@ -2327,7 +2482,7 @@ const readers = {
         return !(value == "0" || String(value).toLowerCase() == "false");
     },
     number(value) {
-        return Number(value);
+        return Number(value.replace(/_/g, ""));
     },
     object(value) {
         const object = JSON.parse(value);
@@ -2392,7 +2547,7 @@ class Controller {
     }
     disconnect() {
     }
-    dispatch(eventName, { target = this.element, detail = {}, prefix = this.identifier, bubbles = true, cancelable = true } = {}) {
+    dispatch(eventName, { target = this.element, detail = {}, prefix = this.identifier, bubbles = true, cancelable = true, } = {}) {
         const type = prefix ? `${prefix}:${eventName}` : eventName;
         const event = new CustomEvent(type, { detail, bubbles, cancelable });
         target.dispatchEvent(event);