浏览代码

fix: alpine defer issues

Ryan Chandler 4 年之前
父节点
当前提交
10d6c3b773
共有 9 个文件被更改,包括 13 次插入19 次删除
  1. 0 0
      dist/spruce.js
  2. 0 0
      dist/spruce.js.map
  3. 0 0
      dist/spruce.module.js
  4. 0 0
      dist/spruce.module.js.map
  5. 0 0
      dist/spruce.umd.js
  6. 0 0
      dist/spruce.umd.js.map
  7. 2 3
      examples/index.html
  8. 10 5
      src/index.js
  9. 1 11
      src/utils.js

文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.js


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.js.map


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.module.js


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.module.js.map


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.umd.js


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.umd.js.map


+ 2 - 3
examples/index.html

@@ -1,6 +1,6 @@
 <html>
     <head>
-        
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
     </head>
     <body>
         <div x-data>
@@ -17,8 +17,7 @@
         </div>
 
         <script src="../dist/spruce.umd.js"></script>
-        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
-        
+
         <script>
             Spruce.store('application', {
                 name: 'Application',

+ 10 - 5
src/index.js

@@ -1,4 +1,4 @@
-import { domReady, getMethods, checkForAlpine } from './utils'
+import { getMethods, checkForAlpine } from './utils'
 import { createObservable } from './observable'
 
 const Spruce = {
@@ -12,9 +12,7 @@ const Spruce = {
 
     disableReactivity: false,
 
-    async start() {
-        await domReady()
-
+    start() {
         this.attach()
 
         this.stores = createObservable(this.stores, {
@@ -136,6 +134,13 @@ const Spruce = {
 }
 
 window.Spruce = Spruce
-window.Spruce.start()
+
+const deferrer = window.deferLoadingAlpine || function (callback) { callback() }
+
+window.deferLoadingAlpine = function (callback) {
+    window.Spruce.start()
+
+    deferrer(callback)
+}
 
 export default Spruce

+ 1 - 11
src/utils.js

@@ -1,15 +1,5 @@
 import compareVersions from 'compare-versions'
 
-export const domReady = () => {
-    return new Promise(resolve => {
-        if (document.readyState == "loading") {
-            document.addEventListener("DOMContentLoaded", resolve)
-        } else {
-            resolve()
-        }
-    })
-}
-
 export const isNullOrUndefined = value => {
     return value === null || value === undefined
 }
@@ -23,7 +13,7 @@ export const isArray = _ => Array.isArray(_)
 export const getMethods = obj => {
     let methods = {}
 
-    Object.entries(obj).filter(([key, value]) => typeof value === 'function').forEach(([key, value]) => methods[key] = value)
+    Object.entries(obj).filter(([_, value]) => typeof value === 'function').forEach(([key, value]) => methods[key] = value)
 
     return methods
 }

部分文件因为文件数量过多而无法显示