Merge pull request #234 from philippbosch/better-isxattr

Improve x-attributes regexp
alpinejs · Mar 7, 2020 · 98d26e1 · 98d26e1
2 parents 8ce8bfa + 99196b3
commit 98d26e1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/dist/alpine.js b/dist/alpine.js
@@ -121,15 +121,15 @@
 
     return new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`)(dataContext, ...Object.values(additionalHelperVariables));
   }
+  const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\b/;
   function isXAttr(attr) {
     const name = replaceAtAndColonWithStandardSyntax(attr.name);
-    const xAttrRE = /x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/;
     return xAttrRE.test(name);
   }
   function getXAttrs(el, type) {
     return Array.from(el.attributes).filter(isXAttr).map(attr => {
       const name = replaceAtAndColonWithStandardSyntax(attr.name);
-      const typeMatch = name.match(/x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/);
+      const typeMatch = name.match(xAttrRE);
       const valueMatch = name.match(/:([a-zA-Z\-:]+)/);
       const modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
       return {

diff --git a/src/utils.js b/src/utils.js
@@ -81,11 +81,10 @@ export function saferEvalNoReturn(expression, dataContext, additionalHelperVaria
     )
 }
 
+const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\b/
+
 export function isXAttr(attr) {
     const name = replaceAtAndColonWithStandardSyntax(attr.name)
-
-    const xAttrRE = /x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/
-
     return xAttrRE.test(name)
 }
 
@@ -95,7 +94,7 @@ export function getXAttrs(el, type) {
         .map(attr => {
             const name = replaceAtAndColonWithStandardSyntax(attr.name)
 
-            const typeMatch = name.match(/x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/)
+            const typeMatch = name.match(xAttrRE)
             const valueMatch = name.match(/:([a-zA-Z\-:]+)/)
             const modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
 

diff --git a/test/constructor.spec.js b/test/constructor.spec.js
@@ -34,7 +34,7 @@ test('auto-detect new components at the top level', async () => {
     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 })
 
-test('auto-detect newsted new components at the top level', async () => {
+test('auto-detect nested new components at the top level', async () => {
     var runObservers = []
 
     global.MutationObserver = class {
@@ -279,3 +279,19 @@ test('can clone an existing component to a new element', async () => {
 
     expect(document.querySelector('span').innerText).toEqual('bar')
 })
+
+test('x-attributes are matched exactly', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ showElement: false }">
+            <div id="el1" x-show="showElement" />
+            <div id="el2" xxx-show="showElement" />
+            <div id="el3" x-showabc="showElement" />
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.getElementById('el1').style.display).toEqual('none')
+    expect(document.getElementById('el2').style.display).not.toEqual('none')
+    await wait(() => { expect(document.getElementById('el3').style.display).not.toEqual('none') })
+})
diff --git a/test/on.spec.js b/test/on.spec.js
@@ -6,7 +6,7 @@ global.MutationObserver = class {
     observe() {}
 }
 
-test('data modified in event listener updates effected attribute bindings', async () => {
+test('data modified in event listener updates affected attribute bindings', async () => {
     document.body.innerHTML = `
         <div x-data="{ foo: 'bar' }">
             <button x-on:click="foo = 'baz'"></button>
@@ -24,7 +24,7 @@ test('data modified in event listener updates effected attribute bindings', asyn
     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 })
 
-test('nested data modified in event listener updates effected attribute bindings', async () => {
+test('nested data modified in event listener updates affected attribute bindings', async () => {
     document.body.innerHTML = `
         <div x-data="{ nested: { foo: 'bar' } }">
             <button x-on:click="nested.foo = 'baz'"></button>
@@ -161,7 +161,7 @@ test('.once modifier', async () => {
     expect(document.querySelector('span').getAttribute('foo')).toEqual('1')
 })
 
-test('.once modifier doest remove listener if false is returned', async () => {
+test('.once modifier does not remove listener if false is returned', async () => {
     document.body.innerHTML = `
         <div x-data="{ count: 0 }">
             <button x-on:click.once="return ++count === 2"></button>