Merge pull request #65 from keyurshah/allow-colons-in-event-name

allow colons in event names

src/utils.js

@@ -80,7 +80,7 @@ export function getXAttrs(el, type) {
             const name = replaceAtAndColonWithStandardSyntax(attr.name)
 
             const typeMatch = name.match(/x-(on|bind|data|text|html|model|if|show|cloak|transition|ref)/)
-            const valueMatch = name.match(/:([a-zA-Z\-]+)/)
+            const valueMatch = name.match(/:([a-zA-Z\-:]+)/)
             const modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
 
             return {

test/on.spec.js

@@ -223,3 +223,24 @@ test('supports short syntax', async () => {
 
     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 })
+
+
+test('event with colon', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar' }">
+            <div x-on:my:event.document="foo = 'baz'"></div>
+
+            <span x-bind:foo="foo"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
+
+    var event = new CustomEvent('my:event');
+
+    document.dispatchEvent(event);
+
+    await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
+})