Add .dot modifier (#1906)

* Add .dot modifier for "." separated events

* Revert "Add .dot modifier for "." separated events"

This reverts commit 9eb457bb17f4befa11569e0f49ca0d1033444746.

* Add .dot modifier

packages/alpinejs/src/utils/on.js

@@ -10,6 +10,7 @@ export default function on (el, event, modifiers, callback) {
     // handler more flexibly in a "middleware" style.
     let wrapHandler = (callback, wrapper) => (e) => wrapper(callback, e)
 
+    if (modifiers.includes("dot")) event = dotSyntax(event);
     if (modifiers.includes('camel')) event = camelCase(event)
     if (modifiers.includes('passive')) options.passive = true
     if (modifiers.includes('window')) listenerTarget = window
@@ -70,6 +71,10 @@ export default function on (el, event, modifiers, callback) {
     }
 }
 
+function dotSyntax(subject) {
+    return subject.replace(/-/g, ".");
+}
+  
 function camelCase(subject) {
     return subject.toLowerCase().replace(/-(\w)/g, (match, char) => char.toUpperCase())
 }

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

@@ -422,3 +422,33 @@ test('.camel modifier correctly binds event listener with namespace',
         get('span').should(haveText('baz'))
     }
 )
+
+test('.dot modifier correctly binds event listener',
+    html`
+        <div x-data="{ foo: 'bar' }" x-on:event-name.dot="foo = 'baz'">
+            <button x-on:click="$dispatch('event.name')"></button>
+
+            <span x-text="foo"></span>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('bar'))
+        get('button').click()
+        get('span').should(haveText('baz'))
+    }
+)
+
+test('.dot modifier correctly binds event listener with namespace',
+    html`
+        <div x-data="{ foo: 'bar' }" x-on:ns:event-name.dot="foo = 'baz'">
+            <button x-on:click="$dispatch('ns:event.name')"></button>
+
+            <span x-text="foo"></span>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('bar'))
+        get('button').click()
+        get('span').should(haveText('baz'))
+    }
+)