Allow debouncing/throttling x-model when using x-modelable

packages/alpinejs/src/directives/x-model.js

@@ -3,9 +3,10 @@ import { directive } from '../directives'
 import { mutateDom } from '../mutation'
 import { nextTick } from '../nextTick'
 import bind, { safeParseBoolean } from '../utils/bind'
-import on from '../utils/on'
+import on, { addDebounceOrThrottle } from '../utils/on'
 import { isCloning } from '../clone'
 
+
 directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     let scopeTarget = el
 
@@ -106,7 +107,11 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
         set(value) {
             setValue(value)
         },
-    }
+
+        // Allow for Modifiers such as debounce to be respected by modelable
+        setWithModifiers: addDebounceOrThrottle(modifiers, setValue),
+    };
+
 
     el._x_forceModelUpdate = (value) => {
         // If nested model key is undefined, set the default value to empty string.

packages/alpinejs/src/directives/x-modelable.js

@@ -21,7 +21,7 @@ directive('modelable', (el, { expression }, { effect, evaluateLater, cleanup })
         el._x_removeModelListeners['default']()
 
         let outerGet = el._x_model.get
-        let outerSet = el._x_model.set
+        let outerSet = el._x_model.setWithModifiers
 
         let releaseEntanglement = entangle(
             {

packages/alpinejs/src/utils/on.js

@@ -22,18 +22,7 @@ export default function on (el, event, modifiers, callback) {
     // By wrapping the handler with debounce & throttle first, we ensure that the wrapping logic itself is not
     // throttled/debounced, only the user's callback is. This way, if the user expects
     // `e.preventDefault()` to happen, it'll still happen even if their callback gets throttled.
-    if (modifiers.includes('debounce')) {
-        let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
-        let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
-
-        handler = debounce(handler, wait)
-    }
-    if (modifiers.includes('throttle')) {
-        let nextModifier = modifiers[modifiers.indexOf('throttle')+1] || 'invalid-wait'
-        let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
-
-        handler = throttle(handler, wait)
-    }
+    handler = addDebounceOrThrottle(modifiers, handler);
 
     if (modifiers.includes('prevent')) handler = wrapHandler(handler, (next, e) => { e.preventDefault(); next(e) })
     if (modifiers.includes('stop')) handler = wrapHandler(handler, (next, e) => { e.stopPropagation(); next(e) })
@@ -84,6 +73,22 @@ export default function on (el, event, modifiers, callback) {
     }
 }
 
+export function addDebounceOrThrottle(modifiers, handler){
+    if (modifiers.includes('debounce')) {
+        let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
+        let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
+
+        handler = debounce(handler, wait)
+    }
+    if (modifiers.includes('throttle')) {
+        let nextModifier = modifiers[modifiers.indexOf('throttle')+1] || 'invalid-wait'
+        let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
+
+        handler = throttle(handler, wait)
+    }
+    return handler;
+}
+
 function dotSyntax(subject) {
     return subject.replace(/-/g, ".")
 }

tests/cypress/integration/directives/x-modelable.spec.js

@@ -68,3 +68,52 @@ test('x-modelable removes the event listener used by corresponding x-model',
         get('h2').should(haveText('foo'))
     }
 )
+
+
+test('x-modelable works with .debounce modifier',
+    html`
+        <div x-data="{ outer: 'foo' }">
+            <div x-data="{ inner: 'bar' }" x-modelable="inner" x-model.debounce="outer">
+                <h1 x-text="outer"></h1>
+                <h2 x-text="inner"></h2>
+
+                <button @click="inner = 'bob'" id="1">change inner</button>
+                <button @click="inner = 'lob'" id="2">change inner</button>
+            </div>
+        </div>
+    `,
+    ({ get }) => {
+        get('h1').should(haveText('foo'))
+        get('h2').should(haveText('foo'))
+        get('#1').click()
+        get('h1').should(haveText('bob'))
+        get('h2').should(haveText('bob'))
+        get('#2').click()
+        get('h1').should(haveText('bob'))
+        get('h2').should(haveText('lob'))
+    }
+)
+
+test('x-modelable works with .throttle modifier',
+    html`
+        <div x-data="{ outer: 'foo' }">
+            <div x-data="{ inner: 'bar' }" x-modelable="inner" x-model.throttle="outer">
+                <h1 x-text="outer"></h1>
+                <h2 x-text="inner"></h2>
+
+                <button @click="inner = 'bob'" id="1">change inner</button>
+                <button @click="inner = 'lob'" id="2">change inner</button>
+            </div>
+        </div>
+    `,
+    ({ get }) => {
+        get('h1').should(haveText('foo'))
+        get('h2').should(haveText('foo'))
+        get('#1').click()
+        get('h1').should(haveText('bob'))
+        get('h2').should(haveText('bob'))
+        get('#2').click()
+        get('h1').should(haveText('bob'))
+        get('h2').should(haveText('lob'))
+    }
+)