5 éve · f11a3bab22
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 
				     <head>
			
 
				         <style>
			
 
				             .hidden { display: none; }
			
 
				+            [x-cloak] { display: none; }
			
 
				         </style>
			
 
				 
			
 
				         <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
			
@@ -28,9 +29,9 @@
 
				             <button x-on:click="open = true">Open Dropdown</button>
			
 
				 
			
 
				             <ul
			
 
				-                class="hidden"
			
 
				                 x-bind:class="{ 'hidden': ! open }"
			
 
				                 x-on:click.away="open = false"
			
 
				+                x-cloak
			
 
				             >
			
 
				                 Dropdown Body
			
 
				             </ul>
			
--- a/src/component.js
+++ b/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;
			
 
				                 }
			
--- a/src/utils.js
+++ b/src/utils.js
@@ -59,7 +59,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)
			
 
				 }
			
@@ -68,7 +68,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) || []
			
 
				 
			
--- a/test/cloak.spec.js
+++ b/test/cloak.spec.js
@@ -0,0 +1,16 @@
 
				+import projectX from 'projectX'
			
 
				+import { wait } from 'dom-testing-library'
			
 
				+
			
 
				+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()
			
 
				+
			
 
				+    await wait(() => { expect(document.querySelector('span').getAttribute('x-cloak')).toBeNull() })
			
 
				+})