1.0

.eslintrc.json

@@ -19,7 +19,6 @@
     "license-header"
   ],
   "rules": {
-    "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": ["error", {
       "varsIgnorePattern": "_"

.github/workflows/publish.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
           cache: npm
 

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: npm
 
       - run: npm ci

.nvmrc

@@ -1 +1 @@
-v16.0.0
+v18.0.0

package.json

@@ -42,21 +42,22 @@
     "prepack": "npm run build"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-decorators": "^7.22.5",
-    "@babel/plugin-transform-runtime": "^7.22.5",
-    "@babel/plugin-transform-typescript": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@open-wc/testing": "^3.2.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.60.0",
-    "@web/dev-server-rollup": "^0.5.1",
-    "@web/test-runner": "^0.16.1",
-    "eslint": "^8.43.0",
-    "eslint-plugin-import": "^2.27.5",
+    "@babel/plugin-proposal-decorators": "^7.23.2",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/plugin-transform-typescript": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@open-wc/testing": "^4.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@types/jest": "^29.5.7",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@web/dev-server-rollup": "^0.6.0",
+    "@web/test-runner": "^0.18.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-license-header": "^0.6.0",
-    "prettier": "2.8.8",
-    "sinon": "^15.2.0",
-    "typescript": "<5.1.0"
+    "prettier": "^3.0.3",
+    "sinon": "^17.0.1",
+    "typescript": "^5.2.2"
   }
 }

src/actionable.ts

@@ -48,7 +48,7 @@ const handleEvent = (event: Event) => {
             continue;
         }
 
-        type EventDispatcher = HTMLElement & Record<string, (ev: Event) => unknown>;
+        type EventDispatcher = Component & Record<string, (ev: Event) => unknown>;
         const component = element.closest<EventDispatcher>(action.component);
         if (!component || typeof component[action.method] !== 'function') {
             continue;
@@ -58,29 +58,36 @@ const handleEvent = (event: Event) => {
     }
 };
 
-const bindElements = (component: Component, root: Element) => {
-    for (const element of root.querySelectorAll(`[${component.tagName.toLowerCase()}-action]`)) {
+export const initializeActionable = (component: Component, root: Element) => {
+    const componentTagName = component.tagName.toLowerCase();
+    for (const element of root.querySelectorAll(`[${componentTagName}-action]`)) {
         bindActions(component, element);
     }
 
-    if (root instanceof Element && root.hasAttribute(`${component.tagName.toLowerCase()}-action`)) {
+    if (root instanceof Element && root.hasAttribute(`${componentTagName}-action`)) {
         bindActions(component, root);
     }
 };
 
-const observeElements = (component: Component) => {
-    const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-            if (mutation.type === 'attributes' && mutation.target instanceof Element) {
-                bindElements(component, mutation.target);
-            } else if (mutation.type === 'childList' && mutation.addedNodes.length) {
-                for (const node of mutation.addedNodes) {
-                    if (node instanceof Element) {
-                        bindElements(component, node);
-                    }
+export const observeActionable = (component: Component) => {
+    const handleMutation = (mutation: MutationRecord) => {
+        const { type, target, addedNodes } = mutation;
+
+        if (type === 'attributes' && target instanceof Element) {
+            initializeActionable(component, target);
+        } else if (type === 'childList' && addedNodes.length) {
+            for (const node of addedNodes) {
+                if (node instanceof Element) {
+                    initializeActionable(component, node);
                 }
             }
         }
+    };
+
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            handleMutation(mutation);
+        }
     });
 
     observer.observe(component, {
@@ -90,22 +97,22 @@ const observeElements = (component: Component) => {
     });
 };
 
-const initializeActionable = (component: Component): void => {
-    bindElements(component, component);
-    observeElements(component);
+type ActionableDecorator<C extends ComponentConstructor> = {
+    (target: ComponentConstructor, context: ClassDecoratorContext<C>): any;
 };
 
-export function actionable(...args: any[]): any {
-    const [component, context] = args as [ComponentConstructor, ClassDecoratorContext];
-
-    if (context.kind !== 'class') {
-        throw new TypeError('The @actionable decorator is for use on classes only.');
-    }
+export const actionable = <C extends ComponentConstructor>(): ActionableDecorator<C> => {
+    return (target) => {
+        return class extends target {
+            constructor(...args: any[]) {
+                super(args);
+                initializeActionable(this, this);
+            }
 
-    return class extends component {
-        mountCallback() {
-            initializeActionable(this);
-            super.mountCallback();
-        }
+            connectedCallback() {
+                super.connectedCallback?.();
+                observeActionable(this);
+            }
+        };
     };
-}
+};