Home Explore Help
Register Sign In
oleg
/
alpine
mirror of https://github.com/alpinejs/alpine.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #5 from dmitrybubyakin/master

Add x-cloak
Caleb Porzio 5 years ago
parent
d2f5d66c91 9e85814cba
commit
f11a3bab22
4 changed files with 24 additions and 3 deletions
Unified View Show Diff Stats
  1. 2 1
      index.html
  2. 4 0
      src/component.js
  3. 2 2
      src/utils.js
  4. 16 0
      test/cloak.spec.js

+ 2 - 1
index.html
View File 

@@ -2,6 +2,7 @@
 
     <head>
 
     <head>
 
         <style>
 
         <style>
 
             .hidden { display: none; }
 
             .hidden { display: none; }
 
+            [x-cloak] { display: none; }
 
         </style>
 
         </style>
 
 
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
 
         <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>
 
             <button x-on:click="open = true">Open Dropdown</button>
 
 
 
             <ul
 
             <ul
 
-                class="hidden"
 
                 x-bind:class="{ 'hidden': ! open }"
 
                 x-bind:class="{ 'hidden': ! open }"
 
                 x-on:click.away="open = false"
 
                 x-on:click.away="open = false"
 
+                x-cloak
 
             >
 
             >
 
                 Dropdown Body
 
                 Dropdown Body
 
             </ul>
 
             </ul>

+ 4 - 0
src/component.js
View File 

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

+ 2 - 2
src/utils.js
View File 

@@ -59,7 +59,7 @@ export function saferEvalNoReturn(expression, dataContext, additionalHelperVaria
 
 }
 
 }
 
 
 
 export function isXAttr(attr) {
 
 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)
 
     return xAttrRE.test(attr.name)
 
 }
 
 }
 
@@ -68,7 +68,7 @@ export function getXAttrs(el, type) {
 
     return Array.from(el.attributes)
 
     return Array.from(el.attributes)
 
         .filter(isXAttr)
 
         .filter(isXAttr)
 
         .map(attr => {
 
         .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 valueMatch = attr.name.match(/:([a-zA-Z\-]+)/)
 
             const modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []
 
             const modifiers = attr.name.match(/\.[^.\]]+(?=[^\]]*$)/g) || []

+ 16 - 0
test/cloak.spec.js
View File 

@@ -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() })
 
+})