Add x-cloak

src/component.js

@@ -48,6 +48,10 @@ export default class Component {
                         this.updateTextValue(el, output)
                         break;
 
+                    case 'cloak':
+                        el.removeAttribute('x-cloak')
+                        break;
+
                     default:
                         break;
                 }

src/utils.js

@@ -58,7 +58,7 @@ export function saferEvalNoReturn(expression, dataContext, additionalHelperVaria
 }
 
 export function isXAttr(attr) {
-    const xAttrRE = /x-(on|bind|data|text|model)/
+    const xAttrRE = /x-(on|bind|data|text|model|cloak)/
 
     return xAttrRE.test(attr.name)
 }
@@ -67,7 +67,7 @@ export function getXAttrs(el, type) {
     return Array.from(el.attributes)
         .filter(isXAttr)
         .map(attr => {
-            const typeMatch = attr.name.match(/x-(on|bind|data|text|model)/)
+            const typeMatch = attr.name.match(/x-(on|bind|data|text|model|cloak)/)
             const valueMatch = attr.name.match(/:([a-zA-Z\-]+)/)
             const modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
 

test/bind.spec.js

@@ -95,3 +95,17 @@ test('boolean attributes set to true are added to element', async () => {
     expect(document.querySelectorAll('input')[2].required).toBeTruthy()
     expect(document.querySelectorAll('input')[3].readOnly).toBeTruthy()
 })
+
+test('x-cloak is removed', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ hidden: true }">
+            <span x-cloak></span>
+        </div>
+    `
+
+    expect(document.querySelector('span').getAttribute('x-cloak')).not.toBeNull()
+
+    projectX.start()
+
+    expect(document.querySelector('span').getAttribute('x-cloak')).toBeNull()
+})