@excom/service-worker 0.1.0

package/.rush/temp/chunked-rush-logs/service-worker.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/service-worker.build_docs.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/chunked-rush-logs/service-worker.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 36.01658100000009
+}

package/.rush/temp/operation/build_docs/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/.rush/temp/operation/build_docs/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/operation/build_docs/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 39.918969999999945
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 106.58452799999986
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,3 @@
+{
+  "../../packages/service-worker": "../../packages/service-worker:CAW4rIBJAvF1JRyDvlLmOCQFV0F55i1bqdXVJbjgKa4=:"
+}

package/config/rig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@excom/heft-rig",
+  "rigProfile": "default"
+}

package/index.ts

@@ -0,0 +1,17 @@
+import { ServiceWorker } from "./service-worker";
+
+ServiceWorker.define();
+
+export { ServiceWorker };
+
+type T_HTMLServiceWorkerElement = typeof ServiceWorker.CustomElement;
+declare global {
+  interface HTMLServiceWorkerElement extends T_HTMLServiceWorkerElement {}
+  interface Window {
+    HTMLServiceWorkerElement: HTMLServiceWorkerElement;
+  }
+  interface HTMLElementTagNameMap {
+    "service-worker": HTMLServiceWorkerElement;
+  }
+}
+export type { HTMLServiceWorkerElement };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@excom/service-worker",
+  "version": "0.1.0",
+  "description": "<service-worker> custom element",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@excom/neutron": "^0.1.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0",
+    "@excom/kit-utils": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/service-worker"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/service-worker/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "service-worker",
+    "neutron",
+    "custom-elements"
+  ],
+  "excom": {
+    "packageType": "kit-element"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "dev": "node node_modules/@excom/heft-rig/scripts/vite-dev.mjs",
+    "preview": "node node_modules/@excom/heft-rig/scripts/vite-preview.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs",
+    "build:docs": "node node_modules/@excom/heft-rig/scripts/build-docs.mjs"
+  }
+}

package/rush-logs/service-worker.apply-exports.cache.log

@@ -0,0 +1 @@
+Caching has been disabled for this project's "apply-exports" command.

package/rush-logs/service-worker.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/service-worker.build_docs.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:docs" command, so caching has been disabled.

package/rush-logs/service-worker.build_docs.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/rush-logs/service-worker.build_package-metas.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:package-metas" command, so caching has been disabled.

package/rush-logs/service-worker.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/service-worker.ts

@@ -0,0 +1,217 @@
+import {
+  ConstructorType,
+  Neutron,
+  TEvent,
+  TokenList,
+} from "@excom/neutron";
+
+const SW_EVENTS = ["message", "messageerror", "controllerchange"];
+
+export type ServiceWorkerMessageEvent = TEvent & {
+  type: "message";
+  detail: unknown;
+};
+
+export type ServiceWorkerMessageErrorEvent = TEvent & {
+  type: "messageerror";
+  detail: unknown;
+};
+
+export type ServiceWorkerControllerChangeEvent = TEvent & {
+  type: "controllerchange";
+  detail: void;
+};
+
+/** What this element knows about `navigator.serviceWorker`. */
+export interface ServiceWorkerProvision {
+  /** The Service Worker API is available. */
+  isSupported: boolean;
+  /** `navigator.serviceWorker.ready` has resolved. */
+  isReady: boolean;
+  /** A worker currently controls this page (`navigator.serviceWorker.controller`). */
+  hasController: boolean;
+  /** The ready registration's scope; `null` until `ready` resolves. */
+  scope: string | null;
+}
+
+const hasController = () => !!navigator.serviceWorker?.controller;
+
+/**
+ * Observes an already-registered Service Worker. This element does **not**
+ * register a Service Worker itself — your app must call
+ * `navigator.serviceWorker.register(...)` separately; this element only
+ * reports on `navigator.serviceWorker` and, optionally, relays its events
+ * onto itself as plain DOM events for Quark / `<event-handler>` to react
+ * to.
+ *
+ * `.provision` holds `{ isSupported, isReady, hasController, scope }`, kept
+ * current on connect, when `ready` resolves, and on every
+ * `controllerchange` — whether or not that event is relayed.
+ *
+ * @summary Observes `navigator.serviceWorker` — does not register a SW.
+ *
+ * @fires message - Relayed verbatim from `navigator.serviceWorker`'s
+ *   `message` event when `message` is included in `relay-events`. Not
+ *   tag-prefixed. `event.detail` is `event.data` from the original
+ *   message.
+ * @type ServiceWorkerMessageEvent
+ * @fires messageerror - Relayed verbatim from `navigator.serviceWorker`'s
+ *   `messageerror` event when `messageerror` is included in
+ *   `relay-events`. Not tag-prefixed.
+ * @type ServiceWorkerMessageErrorEvent
+ * @fires controllerchange - Relayed verbatim from
+ *   `navigator.serviceWorker`'s `controllerchange` event when
+ *   `controllerchange` is included in `relay-events`. Not tag-prefixed.
+ * @type ServiceWorkerControllerChangeEvent
+ */
+export const ServiceWorker = Neutron({
+  tag: "service-worker",
+  reflectDefaultProps: ["isMounted"],
+  props: {
+    // options
+    /**
+     * @option
+     * Space-separated `navigator.serviceWorker` events to relay onto this
+     * element. Bare attribute (no value) relays all three. Event names
+     * are relayed as-is — not prefixed with the tag.
+     * @values message | messageerror | controllerchange
+     */
+    relayEvents: TokenList,
+    // state
+    /**
+     * @state
+     * `navigator.serviceWorker.ready` has resolved — an active worker is
+     * controlling the page.
+     */
+    isReady: Boolean,
+    /**
+     * @state
+     * The Service Worker API is available (`'serviceWorker' in
+     * navigator`).
+     */
+    isSupported: Boolean,
+    /**
+     * @provision
+     * `{ isSupported, isReady, hasController, scope }` — set on connect,
+     * when `ready` resolves (`scope` comes from the registration), and on
+     * every `controllerchange`. Not reflected as an attribute.
+     * @type ServiceWorkerProvision
+     */
+    provision: Object as unknown as ConstructorType<ServiceWorkerProvision>,
+    // private
+    swContainer: Object as unknown as typeof ServiceWorkerContainer,
+  },
+})
+  .defineMethods({
+    messageCallback: (_, event: MessageEvent) => ({
+      emit: [event.type, { detail: event.data }],
+    }),
+    // Method so it reads the element when `ready` settles, and no-ops if
+    // the element has since left the document.
+    readyCallback: (
+      { isConnected, isSupported, provision },
+      registration?: ServiceWorkerRegistration
+    ) =>
+      isConnected && {
+        isReady: true,
+        provision: {
+          isSupported: !!isSupported,
+          isReady: true,
+          hasController: hasController(),
+          scope: registration?.scope ?? provision?.scope ?? null,
+        },
+      },
+    // Internal `controllerchange` listener, independent of `relay-events`
+    _handleControllerChange: ({ isSupported, isReady, provision }) => ({
+      provision: {
+        isSupported: !!isSupported,
+        isReady: !!isReady,
+        hasController: hasController(),
+        scope: provision?.scope ?? null,
+      },
+    }),
+    /**
+     * Apply `relay-events` to `navigator.serviceWorker`: drop the
+     * `previous` names (or all three when relaying stops) and add the
+     * current set. Also on a real reconnect, since `onDisconnected`
+     * removes them.
+     */
+    // @ts-expect-error - TODO: method typing
+    _applyRelay: ({ relayEvents, messageCallback }, previous?: string[]) => {
+      if (!navigator.serviceWorker) return;
+      previous?.forEach((eventName) =>
+        navigator.serviceWorker.removeEventListener(eventName, messageCallback)
+      );
+      if (!relayEvents) {
+        SW_EVENTS.forEach((eventName) =>
+          navigator.serviceWorker.removeEventListener(
+            eventName,
+            messageCallback
+          )
+        );
+      } else {
+        // Add the current set. Bare `relay-events` (no value) means all.
+        const events = relayEvents?.length > 0 ? relayEvents : SW_EVENTS;
+        events.forEach((eventName) =>
+          navigator.serviceWorker.addEventListener(eventName, messageCallback)
+        );
+      }
+    },
+  })
+  .onConnected(
+    ({
+      readyCallback,
+      _handleControllerChange,
+      isMoving,
+      wasMounted,
+      isReady,
+      provision,
+    }) => {
+      if (isMoving) return;
+      if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.ready.then(readyCallback);
+        return [
+          {
+            isSupported: true,
+            swContainer: navigator.serviceWorker,
+            // Tracked by Neutron: dropped on disconnect, restored on reconnect
+            addListener: [
+              "controllerchange",
+              _handleControllerChange,
+              { target: navigator.serviceWorker },
+            ],
+            provision: {
+              isSupported: true,
+              isReady: !!isReady,
+              hasController: hasController(),
+              scope: provision?.scope ?? null,
+            },
+          },
+          /* Relay listeners are plain `navigator.serviceWorker` listeners,
+             removed in `onDisconnected`. Re-apply after a real reconnect
+             (first mount applies them via `relayEvents`). */
+          ...(wasMounted ? [{ _applyRelay: [] }] : []),
+        ];
+      }
+      return {
+        provision: {
+          isSupported: false,
+          isReady: false,
+          hasController: false,
+          scope: null,
+        },
+      };
+    }
+  )
+  .onPropChanged("relayEvents", (_, previous) => ({
+    _applyRelay: [previous?.relayEvents],
+  }))
+  .onDisconnected(({ messageCallback, isMoving }) => {
+    if (isMoving) return;
+    // Drop relay listeners. Neutron removes the tracked `controllerchange`.
+    if (navigator.serviceWorker) {
+      SW_EVENTS.forEach((eventName) =>
+        navigator.serviceWorker.removeEventListener(eventName, messageCallback)
+      );
+    }
+  });

package/support/custom-elements.json

@@ -0,0 +1,162 @@
+{
+  "schemaVersion": "1.0.0",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "service-worker.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "ServiceWorker",
+          "customElement": true,
+          "tagName": "service-worker",
+          "summary": "Observes `navigator.serviceWorker` — does not register a SW.",
+          "description": "What this element knows about `navigator.serviceWorker`.",
+          "attributes": [
+            {
+              "name": "relay-events",
+              "type": {
+                "text": "tokenlist"
+              },
+              "description": "Space-separated `navigator.serviceWorker` events to relay onto this element. Bare attribute (no value) relays all three. Event names are relayed as-is — not prefixed with the tag.",
+              "fieldName": "relayEvents",
+              "values": [
+                "message",
+                "messageerror",
+                "controllerchange"
+              ]
+            },
+            {
+              "name": "is-ready",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "`navigator.serviceWorker.ready` has resolved — an active worker is controlling the page.",
+              "fieldName": "isReady"
+            },
+            {
+              "name": "is-supported",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The Service Worker API is available (`'serviceWorker' in navigator`).",
+              "fieldName": "isSupported"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "relayEvents",
+              "type": {
+                "text": "tokenlist"
+              },
+              "privacy": "public",
+              "readonly": false,
+              "description": "Space-separated `navigator.serviceWorker` events to relay onto this element. Bare attribute (no value) relays all three. Event names are relayed as-is — not prefixed with the tag.",
+              "_neutron": {
+                "surface": "option"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isReady",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "readonly": true,
+              "description": "`navigator.serviceWorker.ready` has resolved — an active worker is controlling the page.",
+              "_neutron": {
+                "surface": "state"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isSupported",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "readonly": true,
+              "description": "The Service Worker API is available (`'serviceWorker' in navigator`).",
+              "_neutron": {
+                "surface": "state"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "provision",
+              "type": {
+                "text": "ServiceWorkerProvision",
+                "expanded": "{ isSupported: boolean; isReady: boolean; hasController: boolean; scope: string | null; }"
+              },
+              "privacy": "public",
+              "readonly": false,
+              "description": "`{ isSupported, isReady, hasController, scope }` — set on connect, when `ready` resolves (`scope` comes from the registration), and on every `controllerchange`. Not reflected as an attribute.",
+              "_neutron": {
+                "surface": "option"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "message",
+              "description": "Relayed verbatim from `navigator.serviceWorker`'s `message` event when `message` is included in `relay-events`. Not tag-prefixed. `event.detail` is `event.data` from the original message.",
+              "type": {
+                "text": "ServiceWorkerMessageEvent",
+                "expanded": "CustomEvent & { type: \"message\"; detail: unknown; bubbles: true; cancelable: true; composed: true }"
+              }
+            },
+            {
+              "name": "messageerror",
+              "description": "Relayed verbatim from `navigator.serviceWorker`'s `messageerror` event when `messageerror` is included in `relay-events`. Not tag-prefixed.",
+              "type": {
+                "text": "ServiceWorkerMessageErrorEvent",
+                "expanded": "CustomEvent & { type: \"messageerror\"; detail: unknown; bubbles: true; cancelable: true; composed: true }"
+              }
+            },
+            {
+              "name": "controllerchange",
+              "description": "Relayed verbatim from `navigator.serviceWorker`'s `controllerchange` event when `controllerchange` is included in `relay-events`. Not tag-prefixed.",
+              "type": {
+                "text": "ServiceWorkerControllerChangeEvent",
+                "expanded": "CustomEvent & { type: \"controllerchange\"; detail: void; bubbles: true; cancelable: true; composed: true }"
+              }
+            }
+          ],
+          "_neutron": {
+            "provisions": [
+              {
+                "name": "provision",
+                "type": {
+                  "text": "ServiceWorkerProvision",
+                  "expanded": "{ isSupported: boolean; isReady: boolean; hasController: boolean; scope: string | null; }"
+                },
+                "description": "`{ isSupported, isReady, hasController, scope }` — set on connect, when `ready` resolves (`scope` comes from the registration), and on every `controllerchange`. Not reflected as an attribute.",
+                "fieldName": "provision"
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ServiceWorker",
+          "declaration": {
+            "name": "ServiceWorker",
+            "module": "service-worker.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "service-worker",
+          "declaration": {
+            "name": "ServiceWorker",
+            "module": "service-worker.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/support/demos/simple.html

@@ -0,0 +1,3 @@
+<div>
+  <service-worker></service-worker>
+</div>

package/support/dist-docs/service-worker.md

@@ -0,0 +1,111 @@
+# service-worker
+
+Observes `navigator.serviceWorker` and optionally relays its events — zero app JS required.
+
+
+```html
+<div>
+  <service-worker></service-worker>
+</div>
+```
+
+
+## Features
+
+- **Observation only** Reports on an existing Service Worker; never registers one
+- **Support detection** `is-supported` reflects API availability
+- **Ready state** `is-ready` reflects once an active worker controls the page
+- **Event relay** `relay-events` forwards `message` / `messageerror` / `controllerchange` as plain DOM events
+- **Bindable state** `.provision` is `{ isSupported, isReady, hasController, scope }` — kept current on connect, `ready`, and every `controllerchange`; read it from Quark with `prop("provision")`
+
+## Installation
+
+
+`@excom/service-worker` v0.1.0
+
+```bash
+pnpm add @excom/service-worker
+```
+
+```bash
+npm install @excom/service-worker
+```
+
+```bash
+yarn add @excom/service-worker
+```
+
+### Import
+
+```ts
+import "@excom/service-worker";
+```
+
+
+
+## Usage
+
+This element only *observes* an already-registered Service Worker — it does not call `navigator.serviceWorker.register(...)` itself. Register your Service Worker separately (in app code, or your build tool), then drop this element anywhere to expose its state as attributes and, optionally, relay its events.
+
+```html
+<service-worker relay-events></service-worker>
+<event-handler listen-for="message" fire-event="sw-message-received">
+  ...
+</event-handler>
+```
+
+Relayed events (`message`, `messageerror`, `controllerchange`) are dispatched with their original names — they are **not** prefixed with `service-worker-`.
+
+### API Reference
+
+
+#### Attributes
+
+| Name | Surface | Type | Default | Values | Description |
+| --- | --- | --- | --- | --- | --- |
+| `relay-events` | option | `tokenlist` |  | `"message"` \| `"messageerror"` \| `"controllerchange"` | Space-separated `navigator.serviceWorker` events to relay onto this element. Bare attribute (no value) relays all three. Event names are relayed as-is — not prefixed with the tag. |
+| `is-ready` | state | `boolean` |  |  | `navigator.serviceWorker.ready` has resolved — an active worker is controlling the page. |
+| `is-supported` | state | `boolean` |  |  | The Service Worker API is available (`'serviceWorker' in navigator`). |
+
+#### Provision
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `provision` | `ServiceWorkerProvision` (`{ isSupported: boolean; isReady: boolean; hasController: boolean; scope: string \| null; }`) | `{ isSupported, isReady, hasController, scope }` — set on connect, when `ready` resolves (`scope` comes from the registration), and on every `controllerchange`. Not reflected as an attribute. |
+
+#### Fires
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `message` | `ServiceWorkerMessageEvent` (`CustomEvent & { type: "message"; detail: unknown; bubbles: true; cancelable: true; composed: true }`) | Relayed verbatim from `navigator.serviceWorker`'s `message` event when `message` is included in `relay-events`. Not tag-prefixed. `event.detail` is `event.data` from the original message. |
+| `messageerror` | `ServiceWorkerMessageErrorEvent` (`CustomEvent & { type: "messageerror"; detail: unknown; bubbles: true; cancelable: true; composed: true }`) | Relayed verbatim from `navigator.serviceWorker`'s `messageerror` event when `messageerror` is included in `relay-events`. Not tag-prefixed. |
+| `controllerchange` | `ServiceWorkerControllerChangeEvent` (`CustomEvent & { type: "controllerchange"; detail: void; bubbles: true; cancelable: true; composed: true }`) | Relayed verbatim from `navigator.serviceWorker`'s `controllerchange` event when `controllerchange` is included in `relay-events`. Not tag-prefixed. |
+
+
+
+### Examples
+
+#### Support / mount / ready state
+
+`is-supported`, `is-mounted` (reflected by default), and `is-ready` are all plain attributes — style or branch on them with CSS. `is-ready` needs an app-registered Service Worker to ever resolve, so it will likely stay unset in this docs site.
+
+
+```html
+<div>
+  <service-worker></service-worker>
+</div>
+```
+
+
+#### Relay messages from your Service Worker
+
+Relaying `message` / `messageerror` / `controllerchange` requires a Service Worker that your app has already registered and that is actively posting messages — this is not runnable in this docs site, but works like so once wired up:
+
+```html
+<service-worker relay-events="message"></service-worker>
+<script>
+  document
+    .querySelector("service-worker")
+    .addEventListener("message", (e) => console.log(e.detail));
+</script>
+```

package/support/docs/INTERNAL.md

@@ -0,0 +1,13 @@
+# Internal notes
+
+## TODO: re-listen on reconnect
+
+`onDisconnected` removes the `navigator.serviceWorker` listeners added for
+`relay-events`, but if the element is later reconnected (moved in the DOM
+counts as a disconnect + connect unless `isMoving` is set), `onConnected`
+never re-attaches them — only `onPropChanged("relayEvents", ...)` does, and
+that only fires on an actual attribute change, not on reconnect.
+
+Fix: either re-run the `relayEvents` listener setup from `onConnected` (skip
+when `wasMounted` is true, mirroring the `swContainer` re-detection guard),
+or track listener state independently of the prop-change handler.