Merge pull request alpinejs#667 from danprince/fix-numeric-attributes

fixes numeric attributes and adds test

src/utils.js

@@ -130,11 +130,11 @@ function sortDirectives(directives) {
     })
 }
 
-function parseHtmlAttribute({ name, value }) {
+export function parseHtmlAttribute({ name, value }) {
     const normalizedName = replaceAtAndColonWithStandardSyntax(name)
 
     const typeMatch = normalizedName.match(xAttrRE)
-    const valueMatch = normalizedName.match(/:([a-zA-Z\-:]+)/)
+    const valueMatch = normalizedName.match(/:([a-zA-Z0-9\-:]+)/)
     const modifiers = normalizedName.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
 
     return {

test/bind.spec.js

@@ -495,3 +495,17 @@ test('.camel modifier correctly sets name of attribute', async () => {
 
     expect(document.querySelector('svg').getAttribute('viewBox')).toEqual('0 0 42 42')
 })
+
+
+test('attribute binding names can contain numbers', async () => {
+    document.body.innerHTML = `
+        <svg x-data>
+            <line x1="1" y1="2" :x2="3" x-bind:y2="4" />
+        </svg>
+    `;
+
+    Alpine.start();
+
+    expect(document.querySelector('line').getAttribute('x2')).toEqual('3');
+    expect(document.querySelector('line').getAttribute('y2')).toEqual('4');
+})

test/utils.spec.js

@@ -1,7 +1,18 @@
-import { arrayUnique } from '../src/utils'
+import { arrayUnique, parseHtmlAttribute } from '../src/utils'
 
 test('utils/arrayUnique', () => {
     const arrayMock = [1, 1, 2, 3, 1, 'a', 'b', 'c', 'b']
     const expected = arrayUnique(arrayMock)
     expect(expected).toEqual([1, 2, 3, 'a', 'b', 'c'])
 })
+
+test('utils/parseHtmlAttribute', () => {
+    const attribute = { name: ':x1', value: 'x' };
+    const expected = parseHtmlAttribute(attribute);
+    expect(expected).toEqual({
+        type: 'bind',
+        value: 'x1',
+        modifiers: [],
+        expression: 'x'
+    });
+})