@wcstack/state 1.11.0 → 1.12.0

package/dist/index.esm.js

@@ -59,7 +59,7 @@ function setConfig(partialConfig) {
     }
 }
 
-var version$1 = "1.11.0";
+var version$1 = "1.12.0";
 var pkg = {
 	version: version$1};
 
@@ -137,6 +137,8 @@ const WEBCOMPONENT_STATE_READY_CALLBACK_NAME = "$stateReadyCallback";
 const STATE_BINDABLES_NAME = "$bindables";
 const STATE_COMMAND_TOKENS_NAME = "$commandTokens";
 const STATE_COMMAND_NAMESPACE_NAME = "$command";
+const STATE_EVENT_TOKENS_NAME = "$eventTokens";
+const STATE_ON_NAME = "$on";
 const DCC_DEFINITION_ATTRIBUTE = "data-wc-definition";
 
 const _cache$4 = new Map();
@@ -1485,6 +1487,15 @@ function parseBindTextsForElement(bindText) {
         else {
             const stateResult = parseStatePart(statePart);
             const propResult = parsePropPart(propPart);
+            // eventToken.<prop>: <name> は要素 dispatch を state へ流す pub/sub 配線。
+            // 値適用ではないため bindingType 'event' として listener attach 経路に乗せる。
+            if (propResult.propSegments[0] === 'eventToken') {
+                return {
+                    ...propResult,
+                    ...stateResult,
+                    bindingType: 'event',
+                };
+            }
             if (propResult.propSegments[0].startsWith('on')) {
                 return {
                     ...propResult,
@@ -1693,6 +1704,106 @@ function processDeferredNode(entry) {
     return result.bindings;
 }
 
+const _cache$3 = new WeakMap();
+const _cacheNullListIndex$1 = new WeakMap();
+class StateAddress {
+    pathInfo;
+    listIndex;
+    _parentAddress;
+    constructor(pathInfo, listIndex) {
+        this.pathInfo = pathInfo;
+        this.listIndex = listIndex;
+    }
+    get parentAddress() {
+        if (typeof this._parentAddress !== 'undefined') {
+            return this._parentAddress;
+        }
+        const parentPathInfo = this.pathInfo.parentPathInfo;
+        if (parentPathInfo === null) {
+            return null;
+        }
+        const lastSegment = this.pathInfo.segments[this.pathInfo.segments.length - 1];
+        let parentListIndex = null;
+        if (lastSegment === WILDCARD) {
+            parentListIndex = this.listIndex?.parentListIndex ?? null;
+        }
+        else {
+            parentListIndex = this.listIndex;
+        }
+        return this._parentAddress = createStateAddress(parentPathInfo, parentListIndex);
+    }
+}
+function createStateAddress(pathInfo, listIndex) {
+    if (listIndex === null) {
+        let cached = _cacheNullListIndex$1.get(pathInfo);
+        if (typeof cached !== "undefined") {
+            return cached;
+        }
+        cached = new StateAddress(pathInfo, null);
+        _cacheNullListIndex$1.set(pathInfo, cached);
+        return cached;
+    }
+    else {
+        let cacheByPathInfo = _cache$3.get(listIndex);
+        if (typeof cacheByPathInfo === "undefined") {
+            cacheByPathInfo = new WeakMap();
+            _cache$3.set(listIndex, cacheByPathInfo);
+        }
+        let cached = cacheByPathInfo.get(pathInfo);
+        if (typeof cached !== "undefined") {
+            return cached;
+        }
+        cached = new StateAddress(pathInfo, listIndex);
+        cacheByPathInfo.set(pathInfo, cached);
+        return cached;
+    }
+}
+
+// command-token / event-token が共有する pub/sub プリミティブ。
+// _subscribers は Set のため挿入順を保持する。
+// emit() は subscribe() された順に呼び出され、戻り値配列も同じ順序で返る。
+//
+// 「誰が subscribe し誰が emit するか」だけが command / event の違い:
+//   - command-token: element が subscribe / state が emit
+//   - event-token:   state(`$on`) が subscribe / element(listener) が emit
+class Token {
+    _name;
+    _subscribers = new Set();
+    constructor(name) {
+        this._name = name;
+    }
+    get name() {
+        return this._name;
+    }
+    get size() {
+        return this._subscribers.size;
+    }
+    subscribe(fn) {
+        this._subscribers.add(fn);
+        return () => {
+            this._subscribers.delete(fn);
+        };
+    }
+    unsubscribe(fn) {
+        return this._subscribers.delete(fn);
+    }
+    emit(...args) {
+        const results = [];
+        for (const fn of this._subscribers) {
+            results.push(fn(...args));
+        }
+        return results;
+    }
+}
+
+// CommandToken は共有 pub/sub プリミティブ Token の薄い特化。
+// instanceof による型判別を成立させるため独立クラスとして維持する。
+class CommandToken extends Token {
+}
+function isCommandToken(value) {
+    return value instanceof CommandToken;
+}
+
 const loopContextByNode = new WeakMap();
 function getLoopContextByNode(node) {
     let paramNode = node;
@@ -1721,13 +1832,18 @@ const connectedCallbackSymbol = Symbol("$$connectedCallback");
 const disconnectedCallbackSymbol = Symbol("$$disconnectedCallback");
 const updatedCallbackSymbol = Symbol("$$updatedCallback");
 
+// onclick: $command.<name> のように、DOM イベントから command token を直接 emit する形式かを判定する。
+// 右辺が $command 名前空間配下のパス（$command.<token>）のときに true。
+function isCommandTokenPath(statePathName) {
+    return statePathName.startsWith(STATE_COMMAND_NAMESPACE_NAME + ".");
+}
 const handlerByHandlerKey$3 = new Map();
 const bindingSetByHandlerKey$3 = new Map();
 function getHandlerKey$3(binding) {
     const modifierKey = binding.propModifiers.filter(m => m === 'prevent' || m === 'stop').sort().join(',');
     return `${binding.stateName}::${binding.statePathName}::${modifierKey}`;
 }
-const stateEventHandlerFunction = (stateName, handlerName, modifiers) => (event) => {
+const stateEventHandlerFunction = (stateName, handlerName, modifiers, statePathInfo) => (event) => {
     if (modifiers.includes('prevent'))
         event.preventDefault();
     if (modifiers.includes('stop'))
@@ -1739,13 +1855,23 @@ const stateEventHandlerFunction = (stateName, handlerName, modifiers) => (event)
         raiseError(`State element with name "${stateName}" not found for event handler.`);
     }
     const loopContext = getLoopContextByNode(node);
+    const isCommand = isCommandTokenPath(handlerName);
     stateElement.createStateAsync("writable", async (state) => {
         state[setLoopContextSymbol](loopContext, () => {
+            const indexes = loopContext?.listIndex.indexes ?? [];
+            if (isCommand) {
+                // command token を解決して emit。引数はハンドラ呼び出しと同じく (event, ...listIndexes) を透過する。
+                const token = state[getByAddressSymbol](createStateAddress(statePathInfo, null));
+                if (!isCommandToken(token)) {
+                    raiseError(`Event binding "${handlerName}" did not resolve to a CommandToken. Declare the name in $commandTokens and reference it as $command.<name>.`);
+                }
+                return token.emit(event, ...indexes);
+            }
             const handler = state[handlerName];
             if (typeof handler !== "function") {
                 raiseError(`Handler "${handlerName}" is not a function on state "${stateName}".`);
             }
-            return Reflect.apply(handler, state, [event, ...(loopContext?.listIndex.indexes ?? [])]);
+            return Reflect.apply(handler, state, [event, ...indexes]);
         });
     });
 };
@@ -1756,7 +1882,7 @@ function attachEventHandler(binding) {
     const key = getHandlerKey$3(binding);
     let stateEventHandler = handlerByHandlerKey$3.get(key);
     if (typeof stateEventHandler === "undefined") {
-        stateEventHandler = stateEventHandlerFunction(binding.stateName, binding.statePathName, binding.propModifiers);
+        stateEventHandler = stateEventHandlerFunction(binding.stateName, binding.statePathName, binding.propModifiers, binding.statePathInfo);
         handlerByHandlerKey$3.set(key, stateEventHandler);
     }
     const eventName = binding.propName.slice(2);
@@ -1772,6 +1898,129 @@ function attachEventHandler(binding) {
     return true;
 }
 
+// EventToken は共有 pub/sub プリミティブ Token の薄い特化（element→state 方向）。
+// instanceof による型判別を成立させるため独立クラスとして維持する。
+class EventToken extends Token {
+}
+
+const registryByStateElement$1 = new WeakMap();
+function getOrCreateEventToken(stateElement, name) {
+    let registry = registryByStateElement$1.get(stateElement);
+    if (typeof registry === "undefined") {
+        registry = new Map();
+        registryByStateElement$1.set(stateElement, registry);
+    }
+    let token = registry.get(name);
+    if (typeof token === "undefined") {
+        token = new EventToken(name);
+        registry.set(name, token);
+    }
+    return token;
+}
+function clearEventTokenRegistry(stateElement) {
+    registryByStateElement$1.delete(stateElement);
+}
+
+/**
+ * eventToken.<propertyName>: <eventTokenName> バインディングの attach ハンドラ。
+ *
+ * command-token の双対（element→state）。要素が dispatch する CustomEvent を受けて
+ * event-token を emit し、state 側の `$on` ハンドラ群へ pub/sub で配送する。
+ *
+ * 設計（MVP スコープ: wc-bindable カスタム要素のみ）:
+ *   - キーは生イベント名ではなく **wcBindable property 名**。実 DOM イベント名は
+ *     wcBindable.properties[].event から解決する（command-token が wcBindable.commands で
+ *     検証するのと対称。コロンを含む namespaced event 名と binding 構文の `:` 衝突も回避）。
+ *   - <prop> が wcBindable.properties に宣言されていることは attach 時に検証する
+ *     （要素クラス参照のみで DOM 接続に非依存。fail-fast / typo 耐性）。
+ *   - <eventTokenName> が $eventTokens に宣言されていることは **発火時** に検証する
+ *     （state 解決が必要なため。詳細は下記の fire-time 解決の注記を参照）。
+ *   - subscriber 引数規約は `(state, event, ...listIndexes)`。
+ *   - modifier `#prevent` / `#stop` は既存イベント binding と同等にサポート。
+ *
+ * token はイベント発火ごとに registry から解決する（getOrCreateEventToken）。これにより
+ * state の再 set で registry が作り直されても最新の subscriber 群へ配送できる。
+ *
+ * state element の解決と `$eventTokens` 検証は **発火時** に行う（attach 時ではない）。
+ * 構造ブロック（for/if）や SSR hydration では、binding 初期化時にノードが detached な
+ * DocumentFragment / wrapper 上にあり、その時点では element.getRootNode() から state を
+ * 解決できないため。onclick / two-way ハンドラと同じく fire-time 解決に揃えている。
+ */
+const listenerByBinding = new WeakMap();
+function getWcBindable$1(element) {
+    const customTagName = getCustomElement(element);
+    if (customTagName === null) {
+        return null;
+    }
+    // attach 側で未定義要素は whenDefined 後に再試行するため、ここに来る時点で customClass は定義済み。
+    const customClass = customElements.get(customTagName);
+    const bindable = customClass?.wcBindable;
+    if (bindable?.protocol === "wc-bindable" && bindable?.version === 1) {
+        return bindable;
+    }
+    return null;
+}
+function attachEventTokenHandler(binding) {
+    if (binding.propSegments[0] !== "eventToken") {
+        return false;
+    }
+    const element = binding.node;
+    // カスタム要素が未定義なら定義後に再試行（wcBindable が必要なため）。
+    const customTagName = getCustomElement(element);
+    if (customTagName !== null && customElements.get(customTagName) === undefined) {
+        customElements.whenDefined(customTagName).then(() => {
+            attachEventTokenHandler(binding);
+        });
+        return true;
+    }
+    // 再評価で二重 attach しない。
+    if (listenerByBinding.has(binding)) {
+        return true;
+    }
+    const propertyName = binding.propSegments[1];
+    if (typeof propertyName !== "string" || propertyName.length === 0) {
+        raiseError(`eventToken binding requires a property name (e.g., "eventToken.error").`);
+    }
+    const bindable = getWcBindable$1(element);
+    if (bindable === null) {
+        raiseError(`eventToken binding requires a wc-bindable custom element. <${element.tagName.toLowerCase()}> is not wc-bindable.`);
+    }
+    const propDesc = bindable.properties.find((p) => p.name === propertyName);
+    if (typeof propDesc === "undefined") {
+        raiseError(`Property "${propertyName}" is not declared in wcBindable.properties of <${element.tagName.toLowerCase()}>.`);
+    }
+    const eventName = propDesc.event;
+    const tokenName = binding.statePathName;
+    const stateName = binding.stateName;
+    const modifiers = binding.propModifiers;
+    const handler = (event) => {
+        if (modifiers.includes("prevent"))
+            event.preventDefault();
+        if (modifiers.includes("stop"))
+            event.stopPropagation();
+        // state は発火時の live root から解決する（attach 時は detached の可能性があるため）。
+        const rootNode = element.getRootNode();
+        const stateElement = getStateElementByName(rootNode, stateName);
+        if (stateElement === null) {
+            raiseError(`State element with name "${stateName}" not found for eventToken handler.`);
+        }
+        if (!stateElement.eventTokenNames.has(tokenName)) {
+            raiseError(`eventToken "${tokenName}" is not declared in $eventTokens of state "${stateName}".`);
+        }
+        const loopContext = getLoopContextByNode(element);
+        stateElement.createStateAsync("writable", async (state) => {
+            state[setLoopContextSymbol](loopContext, () => {
+                const indexes = loopContext?.listIndex.indexes ?? [];
+                const token = getOrCreateEventToken(stateElement, tokenName);
+                return token.emit(state, event, ...indexes);
+            });
+        });
+    };
+    element.addEventListener(eventName, handler);
+    listenerByBinding.set(binding, { eventName, handler });
+    return true;
+}
+
 const CHECK_TYPES = new Set(['radio', 'checkbox']);
 const DEFAULT_VALUE_PROP_NAMES = new Set(['value', 'valueAsNumber', 'valueAsDate']);
 function isPossibleTwoWay(node, propName) {
@@ -1937,19 +2186,19 @@ function setLastListValueByAbsoluteStateAddress(address, value) {
     lastListValueByAbsoluteStateAddress.set(address, value);
 }
 
-const _cache$3 = new WeakMap();
+const _cache$2 = new WeakMap();
 function getAbsolutePathInfo(stateElement, pathInfo) {
-    if (_cache$3.has(stateElement)) {
-        const pathMap = _cache$3.get(stateElement);
+    if (_cache$2.has(stateElement)) {
+        const pathMap = _cache$2.get(stateElement);
         if (pathMap.has(pathInfo)) {
             return pathMap.get(pathInfo);
         }
     }
     else {
-        _cache$3.set(stateElement, new WeakMap());
+        _cache$2.set(stateElement, new WeakMap());
     }
     const absolutePathInfo = Object.freeze(new AbsolutePathInfo(stateElement, pathInfo));
-    _cache$3.get(stateElement).set(pathInfo, absolutePathInfo);
+    _cache$2.get(stateElement).set(pathInfo, absolutePathInfo);
     return absolutePathInfo;
 }
 class AbsolutePathInfo {
@@ -1970,8 +2219,8 @@ class AbsolutePathInfo {
     }
 }
 
-const _cache$2 = new WeakMap();
-const _cacheNullListIndex$1 = new WeakMap();
+const _cache$1 = new WeakMap();
+const _cacheNullListIndex = new WeakMap();
 class AbsoluteStateAddress {
     absolutePathInfo;
     listIndex;
@@ -2001,19 +2250,19 @@ class AbsoluteStateAddress {
 }
 function createAbsoluteStateAddress(absolutePathInfo, listIndex) {
     if (listIndex === null) {
-        let cached = _cacheNullListIndex$1.get(absolutePathInfo);
+        let cached = _cacheNullListIndex.get(absolutePathInfo);
         if (typeof cached !== "undefined") {
             return cached;
         }
         cached = new AbsoluteStateAddress(absolutePathInfo, null);
-        _cacheNullListIndex$1.set(absolutePathInfo, cached);
+        _cacheNullListIndex.set(absolutePathInfo, cached);
         return cached;
     }
     else {
-        let cacheByAbsolutePathInfo = _cache$2.get(listIndex);
+        let cacheByAbsolutePathInfo = _cache$1.get(listIndex);
         if (typeof cacheByAbsolutePathInfo === "undefined") {
             cacheByAbsolutePathInfo = new WeakMap();
-            _cache$2.set(listIndex, cacheByAbsolutePathInfo);
+            _cache$1.set(listIndex, cacheByAbsolutePathInfo);
         }
         let cached = cacheByAbsolutePathInfo.get(absolutePathInfo);
         if (typeof cached !== "undefined") {
@@ -2189,41 +2438,6 @@ function applyChangeToClass(binding, _context, newValue) {
     element.classList.toggle(className, newValue);
 }
 
-// _subscribers は Set のため挿入順を保持する。
-// emit() は subscribe() された順に呼び出され、戻り値配列も同じ順序で返る。
-class CommandToken {
-    _name;
-    _subscribers = new Set();
-    constructor(name) {
-        this._name = name;
-    }
-    get name() {
-        return this._name;
-    }
-    get size() {
-        return this._subscribers.size;
-    }
-    subscribe(fn) {
-        this._subscribers.add(fn);
-        return () => {
-            this._subscribers.delete(fn);
-        };
-    }
-    unsubscribe(fn) {
-        return this._subscribers.delete(fn);
-    }
-    emit(...args) {
-        const results = [];
-        for (const fn of this._subscribers) {
-            results.push(fn(...args));
-        }
-        return results;
-    }
-}
-function isCommandToken(value) {
-    return value instanceof CommandToken;
-}
-
 /**
  * command.<methodName>: <commandToken-path> バインディングの適用ハンドラ。
  *
@@ -2306,61 +2520,6 @@ function applyChangeToCommand(binding, _context, newValue) {
     subscribedBindings.set(binding, { token, unsubscribe, elementRef });
 }
 
-const _cache$1 = new WeakMap();
-const _cacheNullListIndex = new WeakMap();
-class StateAddress {
-    pathInfo;
-    listIndex;
-    _parentAddress;
-    constructor(pathInfo, listIndex) {
-        this.pathInfo = pathInfo;
-        this.listIndex = listIndex;
-    }
-    get parentAddress() {
-        if (typeof this._parentAddress !== 'undefined') {
-            return this._parentAddress;
-        }
-        const parentPathInfo = this.pathInfo.parentPathInfo;
-        if (parentPathInfo === null) {
-            return null;
-        }
-        const lastSegment = this.pathInfo.segments[this.pathInfo.segments.length - 1];
-        let parentListIndex = null;
-        if (lastSegment === WILDCARD) {
-            parentListIndex = this.listIndex?.parentListIndex ?? null;
-        }
-        else {
-            parentListIndex = this.listIndex;
-        }
-        return this._parentAddress = createStateAddress(parentPathInfo, parentListIndex);
-    }
-}
-function createStateAddress(pathInfo, listIndex) {
-    if (listIndex === null) {
-        let cached = _cacheNullListIndex.get(pathInfo);
-        if (typeof cached !== "undefined") {
-            return cached;
-        }
-        cached = new StateAddress(pathInfo, null);
-        _cacheNullListIndex.set(pathInfo, cached);
-        return cached;
-    }
-    else {
-        let cacheByPathInfo = _cache$1.get(listIndex);
-        if (typeof cacheByPathInfo === "undefined") {
-            cacheByPathInfo = new WeakMap();
-            _cache$1.set(listIndex, cacheByPathInfo);
-        }
-        let cached = cacheByPathInfo.get(pathInfo);
-        if (typeof cached !== "undefined") {
-            return cached;
-        }
-        cached = new StateAddress(pathInfo, listIndex);
-        cacheByPathInfo.set(pathInfo, cached);
-        return cached;
-    }
-}
-
 const indexBindingsByContent = new WeakMap();
 function getIndexBindingsByContent(content) {
     return indexBindingsByContent.get(content) ?? [];
@@ -3856,6 +4015,10 @@ function _initializeBindings(allBindings) {
         if (attachEventHandler(binding)) {
             continue;
         }
+        // event token (element → state)
+        if (attachEventTokenHandler(binding)) {
+            continue;
+        }
         // two-way binding
         attachTwowayEventHandler(binding);
         // radio binding
@@ -4383,6 +4546,8 @@ function collectBindingsFromLiveNodes(nodes) {
         replaceToReplaceNode(binding);
         if (attachEventHandler(binding))
             continue;
+        if (attachEventTokenHandler(binding))
+            continue;
         attachTwowayEventHandler(binding);
         attachRadioEventHandler(binding);
         attachCheckboxEventHandler(binding);
@@ -4622,6 +4787,9 @@ async function hydrateBindings(root) {
         if (attachEventHandler(binding)) {
             continue;
         }
+        if (attachEventTokenHandler(binding)) {
+            continue;
+        }
         attachTwowayEventHandler(binding);
         attachRadioEventHandler(binding);
         attachCheckboxEventHandler(binding);
@@ -5353,6 +5521,67 @@ function clearCommandNamespace(stateElement) {
     namespaceProxyByStateElement.delete(stateElement);
 }
 
+/**
+ * `$eventTokens: ["a", "b", ...]` 配列宣言を解析し、宣言された名前群を Set で返す。
+ *
+ * event-token は command-token の双対（element→state 方向）。要素が dispatch する
+ * イベントを `eventToken.<prop>: <name>` で token に流し、state 側は `$on` マップで受ける。
+ * ここで宣言された名前のみが `eventToken.X` / `$on` の有効なチャネル名になる（typo 耐性）。
+ *
+ * 対応している宣言形式は **オブジェクトリテラル** のみ。
+ */
+function processEventTokensDeclaration(state) {
+    const names = new Set();
+    const declared = state[STATE_EVENT_TOKENS_NAME];
+    if (typeof declared === "undefined") {
+        return names;
+    }
+    if (!Array.isArray(declared)) {
+        raiseError(`${STATE_EVENT_TOKENS_NAME} must be an array of strings.`);
+    }
+    for (const name of declared) {
+        if (typeof name !== "string" || name.length === 0) {
+            raiseError(`${STATE_EVENT_TOKENS_NAME} entries must be non-empty strings.`);
+        }
+        if (names.has(name)) {
+            raiseError(`${STATE_EVENT_TOKENS_NAME} entry "${name}" is duplicated.`);
+        }
+        names.add(name);
+    }
+    return names;
+}
+
+/**
+ * `$on: { <name>: (state, event, ...listIndexes) => {...} }` マップを解析し、
+ * 各ハンドラを対応する event-token に subscribe する（state 側の受信配線）。
+ *
+ * - `$on` のキーは `$eventTokens` で宣言済みでなければならない（typo 耐性）。
+ * - 各値は関数でなければならない。
+ * - 引数規約は `(state, event, ...listIndexes)`。`this` 束縛は行わず引数で state を渡すため
+ *   アロー関数で書ける（command-token の emit 規約と対称）。
+ *
+ * `$eventTokens` で宣言されたが `$on` に対応が無い token は subscriber ゼロ（emit は no-op）。
+ */
+function processOnDeclaration(stateElement, state, eventTokenNames) {
+    const declared = state[STATE_ON_NAME];
+    if (typeof declared === "undefined") {
+        return;
+    }
+    if (typeof declared !== "object" || declared === null) {
+        raiseError(`${STATE_ON_NAME} must be an object mapping event-token names to handler functions.`);
+    }
+    for (const [name, handler] of Object.entries(declared)) {
+        if (!eventTokenNames.has(name)) {
+            raiseError(`${STATE_ON_NAME} entry "${name}" is not declared in $eventTokens.`);
+        }
+        if (typeof handler !== "function") {
+            raiseError(`${STATE_ON_NAME} entry "${name}" must be a function.`);
+        }
+        const token = getOrCreateEventToken(stateElement, name);
+        token.subscribe(handler);
+    }
+}
+
 function getterFn(name) {
     return function () {
         const stateEl = this.stateElement;
@@ -7184,6 +7413,7 @@ class State extends HTMLElement {
     _boundComponentStateProp = null;
     _bindableEventMap = {};
     _commandTokenNames = new Set();
+    _eventTokenNames = new Set();
     constructor() {
         super();
         this._initializePromise = new Promise((resolve) => {
@@ -7207,7 +7437,11 @@ class State extends HTMLElement {
     }
     set _state(value) {
         this._commandTokenNames = processCommandTokensDeclaration(value);
+        this._eventTokenNames = processEventTokensDeclaration(value);
         this.__state = value;
+        // 再 set 時に二重 subscribe しないよう registry をクリアしてから $on を配線し直す。
+        clearEventTokenRegistry(this);
+        processOnDeclaration(this, value, this._eventTokenNames);
         this._listPaths.clear();
         this._elementPaths.clear();
         this._getterPaths.clear();
@@ -7421,6 +7655,7 @@ class State extends HTMLElement {
             setStateElementByName(this.rootNode, this._name, null);
             clearCommandTokenRegistry(this);
             clearCommandNamespace(this);
+            clearEventTokenRegistry(this);
             this._rootNode = null;
         }
     }
@@ -7469,6 +7704,9 @@ class State extends HTMLElement {
     get commandTokenNames() {
         return this._commandTokenNames;
     }
+    get eventTokenNames() {
+        return this._eventTokenNames;
+    }
     setBindableEventMap(map) {
         this._bindableEventMap = map;
     }