stimulus-use-actions 0.3.3 → 0.3.5

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) { /* ... */ }
 }
 ```
@@ -35,7 +37,7 @@ means:
 - Listeners are added on `connect()` and removed on `disconnect()`
 - Target elements can appear and disappear in the DOM at any time -- events are
   still captured
-- No need to call anything in `connect()` yourself
+- No need to call `super.connect()` -- actions bind automatically
 
 ### Keys
 
@@ -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
@@ -73,7 +76,11 @@ export default class extends Controller {
 
   connect() {
     useActions(this, {
-      buttonTargets: ["click->submit", "keyup->preview"],
+      buttonTargets: [
+        "click->submit",
+        "keyup->preview",
+      ],
+      element: "submit->save",
       window: "resize->reflow",
     })
   }
@@ -92,7 +99,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

@@ -78,6 +78,27 @@ function parseDescriptor(descriptor) {
   return { eventName, filter, methodName, options }
 }
 
+function camelize(str) {
+  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+}
+
+function typecast(value) {
+  try { return JSON.parse(value) } catch { return value }
+}
+
+function paramsForElement(element, identifier) {
+  const params = {}
+  const prefix = `data-${identifier}-`
+  const suffix = "-param"
+  for (const attr of element.attributes) {
+    if (attr.name.startsWith(prefix) && attr.name.endsWith(suffix)) {
+      const key = camelize(attr.name.slice(prefix.length, -suffix.length))
+      params[key] = typecast(attr.value)
+    }
+  }
+  return Object.freeze(params)
+}
+
 function bindDelegatedActions(controller) {
   const actions = controller.constructor.actions
   if (!actions || typeof actions !== "object") return []
@@ -100,39 +121,42 @@ 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) {
-        const handler = (event) => {
-          if (filter && event.key !== (KEY_MAP[filter] || filter)) return
-          if (options.includes("self") && event.target !== controller.element) return
-          if (options.includes("stop")) event.stopPropagation()
-          if (options.includes("prevent")) event.preventDefault()
-          controller[methodName](event)
-        }
-        controller.element.addEventListener(eventName, handler)
-        listeners.push({ target: controller.element, eventName, handler })
+        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
+          if (options.includes("self") && event.target !== matched) return false
+          return matched
+        }
+      }
+
+      const handler = (event) => {
+        const match = guard(event)
+        if (!match) return
+        if (filter && event.key !== (KEY_MAP[filter] || filter)) return
+        if (options.includes("stop")) event.stopPropagation()
+        if (options.includes("prevent")) event.preventDefault()
+        if (match instanceof Element) {
+          Object.defineProperty(event, "currentTarget", { value: match, configurable: true })
+          Object.defineProperty(event, "params", {
+            value: paramsForElement(match, identifier),
+            configurable: true,
+          })
         }
-        controller.element.addEventListener(eventName, handler)
-        listeners.push({ target: controller.element, eventName, handler })
+        controller[methodName](event)
       }
+      const capture = !isWindow && !isElement
+      listenTarget.addEventListener(eventName, handler, capture)
+      listeners.push({ target: listenTarget, eventName, handler, capture })
     })
   })
 
@@ -140,19 +164,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.3",
+  "version": "0.3.5",
   "description": "Stimulus mixin for declaring actions in the controller",
   "type": "module",
   "main": "index.js",