stimulus-use-actions 0.3.2 → 0.3.4

package/README.md

@@ -20,11 +20,13 @@ export default class extends Controller {
   static actions = {
     field: "input->update",
     checkbox: "change->rerender",
+    element: "submit->save",
     window: "resize->layout",
   }
 
   update(event) { /* ... */ }
   rerender(event) { /* ... */ }
+  save(event) { /* ... */ }
   layout(event) { /* ... */ }
 }
 ```
@@ -45,6 +47,7 @@ Each key in `static actions` is a **target name** matching an entry in
 | Key       | Listens on          | Matches events from                          |
 | --------- | ------------------- | -------------------------------------------- |
 | `field`   | controller element  | descendants with `data-<id>-target="field"`  |
+| `element` | controller element  | the controller element itself                |
 | `window`  | `window`            | the window itself                            |
 
 ### Values
@@ -74,6 +77,7 @@ export default class extends Controller {
   connect() {
     useActions(this, {
       buttonTargets: ["click->submit", "keyup->preview"],
+      element: "submit->save",
       window: "resize->reflow",
     })
   }
@@ -92,7 +96,7 @@ observer.
 
 - **controller** -- your Stimulus controller instance (`this`)
 - **actions** -- map of target keys to action descriptors
-  - Keys: `<name>Target`, `<name>Targets`, or `window`
+  - Keys: `<name>Target`, `<name>Targets`, `element`, or `window`
   - Values: a string or array of `"event->method"` strings
   - Event inference (e.g. `"submit"` without `click->`) is supported here --
     Stimulus infers the default event for the element

package/index.js

@@ -87,8 +87,9 @@ function bindDelegatedActions(controller) {
   Object.entries(actions).forEach(([key, descriptors]) => {
     const descriptorList = Array.isArray(descriptors) ? descriptors : [descriptors]
     const isWindow = key === "window"
+    const isElement = key === "element"
     let targetName
-    if (!isWindow) {
+    if (!isWindow && !isElement) {
       if (key.endsWith("Targets")) targetName = key.slice(0, -7)
       else if (key.endsWith("Target")) targetName = key.slice(0, -6)
       else targetName = key
@@ -99,29 +100,33 @@ function bindDelegatedActions(controller) {
       if (!parsed) return
       const { eventName, filter, methodName, options } = parsed
 
+      let listenTarget, guard
       if (isWindow) {
-        const handler = (event) => {
-          if (filter && event.key !== (KEY_MAP[filter] || filter)) return
-          if (options.includes("stop")) event.stopPropagation()
-          if (options.includes("prevent")) event.preventDefault()
-          controller[methodName](event)
-        }
-        window.addEventListener(eventName, handler)
-        listeners.push({ target: window, eventName, handler })
+        listenTarget = window
+        guard = () => true
+      } else if (isElement) {
+        listenTarget = controller.element
+        guard = (event) => !options.includes("self") || event.target === controller.element
       } else {
         const selector = `[data-${identifier}-target~="${targetName}"]`
-        const handler = (event) => {
+        listenTarget = controller.element
+        guard = (event) => {
           const matched = event.target.closest(selector)
-          if (!matched || !controller.element.contains(matched)) return
-          if (filter && event.key !== (KEY_MAP[filter] || filter)) return
-          if (options.includes("self") && event.target !== matched) return
-          if (options.includes("stop")) event.stopPropagation()
-          if (options.includes("prevent")) event.preventDefault()
-          controller[methodName](event)
+          if (!matched || !controller.element.contains(matched)) return false
+          return !options.includes("self") || event.target === matched
         }
-        controller.element.addEventListener(eventName, handler)
-        listeners.push({ target: controller.element, eventName, handler })
       }
+
+      const handler = (event) => {
+        if (!guard(event)) return
+        if (filter && event.key !== (KEY_MAP[filter] || filter)) return
+        if (options.includes("stop")) event.stopPropagation()
+        if (options.includes("prevent")) event.preventDefault()
+        controller[methodName](event)
+      }
+      const capture = !isWindow && !isElement
+      listenTarget.addEventListener(eventName, handler, capture)
+      listeners.push({ target: listenTarget, eventName, handler, capture })
     })
   })
 
@@ -129,19 +134,25 @@ function bindDelegatedActions(controller) {
 }
 
 function unbindDelegatedActions(listeners) {
-  listeners.forEach(({ target, eventName, handler }) => {
-    target.removeEventListener(eventName, handler)
+  listeners.forEach(({ target, eventName, handler, capture }) => {
+    target.removeEventListener(eventName, handler, capture)
   })
 }
 
 export class Controller extends StimulusController {
-  connect() {
-    super.connect()
-    this._useActionListeners = bindDelegatedActions(this)
-  }
-  disconnect() {
-    super.disconnect()
-    unbindDelegatedActions(this._useActionListeners)
+  initialize() {
+    super.initialize()
     this._useActionListeners = []
+    const userConnect = this.connect
+    const userDisconnect = this.disconnect
+    this.connect = () => {
+      userConnect.call(this)
+      this._useActionListeners = bindDelegatedActions(this)
+    }
+    this.disconnect = () => {
+      unbindDelegatedActions(this._useActionListeners)
+      this._useActionListeners = []
+      userDisconnect.call(this)
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stimulus-use-actions",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Stimulus mixin for declaring actions in the controller",
   "type": "module",
   "main": "index.js",