首頁 探索 說明
註冊 登入
oleg
/
alpine
镜像来自 https://github.com/alpinejs/alpine.git
1
0
複刻 0
檔案 問題管理 0 Wiki
瀏覽代碼

wip

Caleb Porzio 2 年之前
父節點
76fac57450
當前提交
bf6e4b57f5
共有 7 個文件被更改，包括 54 次插入 和 32 次删除
分割檢視 顯示文件統計
  1. 32 3
      index.html
  2. 1 2
      packages/alpinejs/src/directives/index.js
  3. 0 6
      packages/alpinejs/src/directives/x-destroy.js
  4. 1 1
      packages/alpinejs/src/directives/x-for.js
  5. 2 2
      packages/alpinejs/src/scheduler.js
  6. 4 4
      packages/alpinejs/src/utils/error.js
  7. 14 14
      tests/cypress/integration/plugins/morph.spec.js

+ 32 - 3
index.html
查看文件 

@@ -1,13 +1,42 @@
 
 <html>
 
-    <script src="./packages/intersect/dist/cdn.js" defer></script>
 
+    <!-- <script src="./packages/intersect/dist/cdn.js" defer></script>
 
     <script src="./packages/morph/dist/cdn.js" defer></script>
 
     <script src="./packages/history/dist/cdn.js"></script>
 
     <script src="./packages/persist/dist/cdn.js"></script>
 
     <script src="./packages/focus/dist/cdn.js"></script>
 
     <script src="./packages/mask/dist/cdn.js"></script>
 
-    <script src="./packages/ui/dist/cdn.js" defer></script>
 
+    <script src="./packages/ui/dist/cdn.js" defer></script> -->
 
     <script src="./packages/alpinejs/dist/cdn.js" defer></script>
 
-    <script src="//cdn.tailwindcss.com"></script>
 
+    <!-- <script src="//cdn.tailwindcss.com"></script> -->
 
 
     <!-- Play around here... -->
 
+
 
+    <div x-data>
 
+        <div id="thing" x-yo>i do not belong here...</div>
 
+
 
+        <br>
 
+        <br>
 
+        <br>
 
+        <br>
 
+
 
+        <button @click="document.getElementById('thing').remove()">remove</button>
 
+    </div>
 
+
 
+    <script>
 
+        document.addEventListener('alpine:init', () => {
 
+            Alpine.directive('yo', (el, {}, { cleanup }) => {
 
+                cleanup(() => {
 
+                    console.log('removed')
 
+                })
 
+            })
 
+        })
 
+    </script>
 
+
 
+    <div x-data="{ users: [{ name: 'lebowski' }] }">
 
+        <template x-for="(user, idx) in users">
 
+            <span x-text="users[idx].name" x-yo></span>
 
+        </template>
 
+
 
+        <button @click="users = []">Reset</button>
 
+    </div>
 
 </html>

+ 1 - 2
packages/alpinejs/src/directives/index.js
查看文件 

@@ -2,8 +2,8 @@ import { directive } from '../directives'
 
 import { warn } from '../utils/warn'
 
 
 import './x-transition'
 
+import './x-modelable'
 
 import './x-teleport'
 
-import './x-destroy'
 
 import './x-ignore'
 
 import './x-effect'
 
 import './x-model'
 
@@ -19,7 +19,6 @@ import './x-ref'
 
 import './x-if'
 
 import './x-id'
 
 import './x-on'
 
-import './x-modelable'
 
 
 // Register warnings for people using plugin syntaxes and not loading the plugin itself:
 
 warnMissingPluginDirective('Collapse', 'collapse', 'collapse')

+ 0 - 6
packages/alpinejs/src/directives/x-destroy.js
查看文件 

@@ -1,6 +0,0 @@
 
-import { directive } from "../directives";
 
-import { skipDuringClone } from "../clone";
 
-
 
-directive('destroy', skipDuringClone((el, { expression }, { evaluate, cleanup }) => {
 
-    cleanup(() => evaluate(expression, {}, false))
 
-}))

+ 1 - 1
packages/alpinejs/src/directives/x-for.js
查看文件 

@@ -140,7 +140,7 @@ function loop(el, iteratorNames, evaluateItems, evaluateKey) {
 
             if (!! lookup[key]._x_effects) {
 
                 lookup[key]._x_effects.forEach(dequeueJob)
 
             }
 
-            
+
 
             lookup[key].remove()
 
 
             lookup[key] = null

+ 2 - 2
packages/alpinejs/src/scheduler.js
查看文件 

@@ -6,10 +6,10 @@ let queue = []
 
 export function scheduler (callback) { queueJob(callback) }
 
 
 function queueJob(job) {
 
-    // if (! queue.includes(job)) queue.push(job)
 
+    if (! queue.includes(job)) queue.push(job)
 
     job()
 
 
-    // queueFlush()
 
+    queueFlush()
 
 }
 
 export function dequeueJob(job) {
 
     let index = queue.indexOf(job)

+ 4 - 4
packages/alpinejs/src/utils/error.js
查看文件 

@@ -1,9 +1,9 @@
 
 export function tryCatch(el, expression, callback, ...args) {
 
-    // try {
 
+    try {
 
         return callback(...args)
 
-    // } catch (e) {
 
-    //     handleError( e, el, expression )
 
-    // }
 
+    } catch (e) {
 
+        handleError( e, el, expression )
 
+    }
 
 }
 
 
 export function handleError(error, el, expression = undefined) {

+ 14 - 14
tests/cypress/integration/plugins/morph.spec.js
查看文件 

@@ -356,22 +356,22 @@ test('can morph table tr',
 
     },
 
 )
 
 
-test.only('can morph with conditional markers',
 
+test('can morph with conditional markers',
 
     [html`
 
         <main>
 
-            <!-- __IF__ -->
 
+            <!-- __BLOCK__ -->
 
             <div>foo<input></div>
 
-            <!-- __ENDIF__ -->
 
+            <!-- __ENDBLOCK__ -->
 
             <div>bar<input></div>
 
         </main>
 
     `],
 
     ({ get }, reload, window, document) => {
 
         let toHtml = html`
 
         <main>
 
-            <!-- __IF__ -->
 
+            <!-- __BLOCK__ -->
 
             <div>foo<input></div>
 
             <div>baz<input></div>
 
-            <!-- __ENDIF__ -->
 
+            <!-- __ENDBLOCK__ -->
 
             <div>bar<input></div>
 
         </main>
 
         `
 
@@ -387,26 +387,26 @@ test.only('can morph with conditional markers',
 
     },
 
 )
 
 
-test.only('can morph with flat-nested conditional markers',
 
+test('can morph with flat-nested conditional markers',
 
     [html`
 
         <main>
 
-            <!-- __IF__ -->
 
+            <!-- __BLOCK__ -->
 
             <div>foo<input></div>
 
-            <!-- __IF__ -->
 
-            <!-- __ENDIF__ -->
 
-            <!-- __ENDIF__ -->
 
+            <!-- __BLOCK__ -->
 
+            <!-- __ENDBLOCK__ -->
 
+            <!-- __ENDBLOCK__ -->
 
             <div>bar<input></div>
 
         </main>
 
     `],
 
     ({ get }, reload, window, document) => {
 
         let toHtml = html`
 
         <main>
 
-            <!-- __IF__ -->
 
+            <!-- __BLOCK__ -->
 
             <div>foo<input></div>
 
-            <!-- __IF__ -->
 
-            <!-- __ENDIF__ -->
 
+            <!-- __BLOCK__ -->
 
+            <!-- __ENDBLOCK__ -->
 
             <div>baz<input></div>
 
-            <!-- __ENDIF__ -->
 
+            <!-- __ENDBLOCK__ -->
 
             <div>bar<input></div>
 
         </main>
 
         `