simplifies alpine for syncing props.

resources/public/js/alpine-vals.js

@@ -0,0 +1,29 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.directive('hx-val', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
+        var config = function(evt) {
+            evt.detail.parameters[value] = evaluate(expression); // add a new parameter into the request
+        }
+        el.addEventListener('htmx:configRequest', config);
+        cleanup(() => {
+            el.removeEventListener('htmx:configRequest', config);
+        })
+    })
+
+    Alpine.directive('dispatch', (el, { value, expression }, { evaluateLater, effect, cleanup, evaluate }) => {
+        let dependent_properties = evaluateLater(expression)
+    
+        effect(() => {
+            dependent_properties(props => {
+                el.dispatchEvent(
+                    new CustomEvent(value, {
+                        props,
+                        bubbles: true,
+                        // Allows events to pass the shadow DOM barrier.
+                        composed: true,
+                        cancelable: true,
+                    })
+                )
+            })
+        })
+    })
+})