V2

package.json

@@ -54,7 +54,7 @@
     {
       "path": "lib/index.js",
       "import": "{controller, attr, target, targets}",
-      "limit": "2.5kb"
+      "limit": "3.0kb"
     },
     {
       "path": "lib/abilities.js",

src/actionable.ts

@@ -0,0 +1,58 @@
+import type {CustomElementClass, CustomElement} from './custom-element.js'
+import type {ControllableClass} from './controllable.js'
+import {registerTag, observeElementForTags, parseElementTags} from './tag-observer.js'
+import {controllable, attachShadowCallback} from './controllable.js'
+import {createAbility} from './ability.js'
+
+const parseActionAttribute = (tag: string): [tagName: string, event: string, method: string] => {
+  const eventSep = tag.lastIndexOf(':')
+  const methodSep = Math.max(0, tag.lastIndexOf('#')) || tag.length
+  return [tag.slice(eventSep + 1, methodSep), tag.slice(0, eventSep), tag.slice(methodSep + 1) || 'handleEvent']
+}
+registerTag(
+  'data-action',
+  parseActionAttribute,
+  (el: Element, controller: Element | ShadowRoot, tag: string, event: string) => {
+    el.addEventListener(event, handleEvent)
+  }
+)
+
+const actionables = new WeakSet<CustomElement>()
+// Bind a single function to all events to avoid anonymous closure performance penalty.
+function handleEvent(event: Event) {
+  const el = event.currentTarget as Element
+  for (const [tag, type, method] of parseElementTags(el, 'data-action', parseActionAttribute)) {
+    if (event.type === type) {
+      type EventDispatcher = CustomElement & Record<string, (ev: Event) => unknown>
+      const controller = el.closest<EventDispatcher>(tag)!
+      if (actionables.has(controller) && typeof controller[method] === 'function') {
+        controller[method](event)
+      }
+      const root = el.getRootNode()
+      if (root instanceof ShadowRoot) {
+        const shadowController = root.host as EventDispatcher
+        if (shadowController.matches(tag) && actionables.has(shadowController)) {
+          if (typeof shadowController[method] === 'function') {
+            shadowController[method](event)
+          }
+        }
+      }
+    }
+  }
+}
+
+export const actionable = createAbility(
+  <T extends CustomElementClass>(Class: T): T & ControllableClass =>
+    class extends controllable(Class) {
+      constructor() {
+        super()
+        actionables.add(this)
+        observeElementForTags(this)
+      }
+
+      [attachShadowCallback](root: ShadowRoot) {
+        super[attachShadowCallback]?.(root)
+        observeElementForTags(root)
+      }
+    }
+)

src/attrable.ts

@@ -0,0 +1,130 @@
+import type {CustomElementClass} from './custom-element.js'
+import type {ControllableClass} from './controllable.js'
+import {controllable} from './controllable.js'
+import {dasherize, mustDasherize} from './dasherize.js'
+import {createMark} from './mark.js'
+import {createAbility} from './ability.js'
+
+const attrChangedCallback = Symbol()
+const serializeAttributeName = Symbol()
+
+export interface Attrable {
+  [key: PropertyKey]: unknown
+  [serializeAttributeName](name: PropertyKey): string
+  [attrChangedCallback](changed: Map<PropertyKey, unknown>): void
+}
+
+export interface AttrableClass {
+  new (): Attrable
+}
+
+export const deprecatedDataPrefixedAttrs = createAbility(
+  <T extends CustomElementClass>(Class: T): T =>
+    class extends controllable(Class) {
+      [serializeAttributeName](name: PropertyKey) {
+        return `data-${dasherize(name)}`
+      }
+    }
+)
+
+const Identity = (v: unknown) => v
+let setFromMutation = false
+const attrs = new WeakMap<Element, Map<string, PropertyKey>>()
+
+const handleMutations = (mutations: MutationRecord[]) => {
+  for (const mutation of mutations) {
+    if (mutation.type === 'attributes') {
+      const name = mutation.attributeName!
+      const el = mutation.target as Element & {[key: PropertyKey]: unknown}
+      const key = attrs.get(el)?.get(name)
+      if (key) {
+        setFromMutation = true
+        el[key] = el.getAttribute(name)
+        setFromMutation = false
+      }
+    }
+  }
+}
+const observer = new MutationObserver(handleMutations)
+
+const [attr, getAttr, initializeAttrs] = createMark<Element & Attrable>(
+  ({name}) => mustDasherize(name, '@attr'),
+  (instance: Element & Attrable, {name, kind, access}) => {
+    let cast: typeof Identity | typeof Boolean | typeof Number | typeof String = Identity
+    let initialValue: unknown
+    if (access.get) {
+      initialValue = access.get.call(instance)
+    } else if ('value' in access && kind !== 'method') {
+      initialValue = access.value
+    }
+    let value = initialValue
+    const attributeName = instance[serializeAttributeName](name)
+    const setCallback = (kind === 'method' ? access.value : access.set) || Identity
+    const getCallback = access.get || (() => value)
+    if (!attrs.get(instance)) attrs.set(instance, new Map())
+    attrs.get(instance)!.set(attributeName, name)
+    if (typeof value === 'number') {
+      cast = Number
+    } else if (typeof value === 'boolean') {
+      cast = Boolean
+    } else if (typeof value === 'string') {
+      cast = String
+    }
+    const queue = new Map()
+    const requestAttrChanged = async (newValue: unknown) => {
+      queue.set(name, newValue)
+      if (queue.size > 1) return
+      await Promise.resolve()
+      const changed = new Map(queue)
+      queue.clear()
+      instance[attrChangedCallback](changed)
+    }
+    return {
+      get() {
+        const has = instance.hasAttribute(attributeName)
+        if (has) {
+          return cast === Boolean ? has : cast(instance.getAttribute(attributeName))
+        }
+        return cast(getCallback.call(instance))
+      },
+      set(newValue: unknown) {
+        const isInitial = newValue === null
+        if (isInitial) newValue = initialValue
+        const same = Object.is(value, newValue)
+        value = newValue
+        setCallback.call(instance, value)
+        if (setFromMutation || same || isInitial) return
+        requestAttrChanged(newValue)
+      }
+    }
+  }
+)
+
+export {attr, getAttr, attrChangedCallback}
+export const attrable = createAbility(
+  <T extends CustomElementClass>(Class: T): T & ControllableClass & AttrableClass =>
+    class extends controllable(Class) {
+      [key: PropertyKey]: unknown
+      constructor() {
+        super()
+        initializeAttrs(this)
+        const attributeFilter = Array.from(getAttr(this)).map(name => this[serializeAttributeName](name))
+        observer.observe(this, {attributeFilter})
+      }
+
+      [serializeAttributeName](name: PropertyKey) {
+        return dasherize(name)
+      }
+
+      [attrChangedCallback](changed: Map<PropertyKey, unknown>) {
+        if (!this.isConnected) return
+        for (const [name, value] of changed) {
+          if (typeof value === 'boolean') {
+            this.toggleAttribute(this[serializeAttributeName](name), value)
+          } else {
+            this.setAttribute(this[serializeAttributeName](name), String(value))
+          }
+        }
+      }
+    }
+)