wip

package-lock.json

@@ -7,6 +7,9 @@
             "workspaces": [
                 "packages/*"
             ],
+            "dependencies": {
+                "nprogress": "^0.2.0"
+            },
             "devDependencies": {
                 "axios": "^0.21.1",
                 "brotli-size": "^4.0.0",
@@ -4986,6 +4989,11 @@
                 "node": ">=8"
             }
         },
+        "node_modules/nprogress": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+            "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+        },
         "node_modules/nwsapi": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
@@ -7395,6 +7403,7 @@
             }
         },
         "packages/ui": {
+            "name": "@alpinejs/ui",
             "version": "3.10.3-beta.0",
             "license": "MIT"
         }
@@ -11314,6 +11323,11 @@
                 "path-key": "^3.0.0"
             }
         },
+        "nprogress": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+            "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+        },
         "nwsapi": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",

package.json

@@ -21,5 +21,8 @@
         "jest": "jest test",
         "update-docs": "node ./scripts/update-docs.js",
         "release": "node ./scripts/release.js"
+    },
+    "dependencies": {
+        "nprogress": "^0.2.0"
     }
 }

packages/alpinejs/src/directives/index.js

@@ -2,7 +2,6 @@ import { directive } from '../directives'
 import { warn } from '../utils/warn'
 
 import './x-transition'
-import './x-modelable'
 import './x-teleport'
 import './x-destroy'
 import './x-ignore'
@@ -20,6 +19,7 @@ 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')

packages/navigate/src/bar.js

@@ -1,12 +1,30 @@
+import NProgress from 'nprogress'
 
+NProgress.configure({ minimum: 0.1 });
+NProgress.configure({ trickleSpeed: 200 });
+
+injectStyles()
+
+let inProgress = false
 export function showAndStartProgressBar() {
-    createBar()
+    inProgress = true
+    // Only show progress bar if it's been a little bit...
+    setTimeout(() => {
+        if (! inProgress) return
+        NProgress.start()
+    }, 150)
 
-    incrementBar()
+    // createBar()
+
+    // incrementBar()
 }
 
 export function finishAndHideProgressBar() {
-    finishProgressBar(); destroyBar()
+    inProgress = false
+    NProgress.done()
+    NProgress.remove()
+
+    // finishProgressBar(); destroyBar()
 }
 
 function createBar() {
@@ -56,3 +74,83 @@ function finishProgressBar(callback) {
 function destroyBar() {
     document.getElementById('alpine-progress-bar').remove()
 }
+
+function injectStyles() {
+    let style = document.createElement('style')
+    style.innerHTML = `/* Make clicks pass-through */
+    #nprogress {
+      pointer-events: none;
+    }
+
+    #nprogress .bar {
+    //   background: #FC70A9;
+      background: #29d;
+
+      position: fixed;
+      z-index: 1031;
+      top: 0;
+      left: 0;
+
+      width: 100%;
+      height: 2px;
+    }
+
+    /* Fancy blur effect */
+    #nprogress .peg {
+      display: block;
+      position: absolute;
+      right: 0px;
+      width: 100px;
+      height: 100%;
+      box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+      opacity: 1.0;
+
+      -webkit-transform: rotate(3deg) translate(0px, -4px);
+          -ms-transform: rotate(3deg) translate(0px, -4px);
+              transform: rotate(3deg) translate(0px, -4px);
+    }
+
+    /* Remove these to get rid of the spinner */
+    #nprogress .spinner {
+      display: block;
+      position: fixed;
+      z-index: 1031;
+      top: 15px;
+      right: 15px;
+    }
+
+    #nprogress .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+
+      border: solid 2px transparent;
+      border-top-color: #29d;
+      border-left-color: #29d;
+      border-radius: 50%;
+
+      -webkit-animation: nprogress-spinner 400ms linear infinite;
+              animation: nprogress-spinner 400ms linear infinite;
+    }
+
+    .nprogress-custom-parent {
+      overflow: hidden;
+      position: relative;
+    }
+
+    .nprogress-custom-parent #nprogress .spinner,
+    .nprogress-custom-parent #nprogress .bar {
+      position: absolute;
+    }
+
+    @-webkit-keyframes nprogress-spinner {
+      0%   { -webkit-transform: rotate(0deg); }
+      100% { -webkit-transform: rotate(360deg); }
+    }
+    @keyframes nprogress-spinner {
+      0%   { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    `
+    document.head.appendChild(style)
+}

packages/navigate/src/index.js

@@ -10,7 +10,7 @@ import { restoreScrollPosition, storeScrollInformationInHtmlBeforeNavigatingAway
 
 let enablePrefetch = true
 let enablePersist = true
-let showProgressBar = false
+let showProgressBar = true
 let restoreScroll = true
 let autofocus = false
 
@@ -33,17 +33,19 @@ export default function (Alpine) {
         fetchHtmlOrUsePrefetchedHtml(fromDestination, html => {
             restoreScroll && storeScrollInformationInHtmlBeforeNavigatingAway()
 
-            updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks()
-
             showProgressBar && finishAndHideProgressBar()
 
+            updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks()
+
             preventAlpineFromPickingUpDomChanges(Alpine, andAfterAllThis => {
                 enablePersist && storePersistantElementsForLater()
 
                 swapCurrentPageWithNewHtml(html, () => {
                     enablePersist && putPersistantElementsBack()
 
-                    hijackNewLinksOnThePage()
+                    // Added setTimeout here to detect a currently hovered prefetch link...
+                    // (hack for laracon)
+                    setTimeout(() => hijackNewLinksOnThePage())
 
                     restoreScroll && restoreScrollPosition()
 

packages/navigate/src/links.js

@@ -34,13 +34,18 @@ function initializeLinksForClicking() {
 }
 
 function initializeLinksForHovering() {
-    getLinks().forEach(el => {
-        el.addEventListener('mouseenter', e => {
-            handleLinkHover(el)
+    getLinks()
+        .filter(i => i.hasAttribute('wire:navigate.prefetch'))
+        .forEach(el => {
+            el.addEventListener('mouseenter', e => {
+                handleLinkHover(el)
+            })
         })
-    })
 }
 
 function getLinks() {
     return Array.from(document.links)
+        .filter(i => i.hasAttribute('wire:navigate')
+        || i.hasAttribute('wire:navigate.prefetch'))
 }
+

packages/navigate/src/scroll.js

@@ -3,7 +3,7 @@ export function storeScrollInformationInHtmlBeforeNavigatingAway() {
     document.body.setAttribute('data-scroll-x', document.body.scrollLeft)
     document.body.setAttribute('data-scroll-y', document.body.scrollTop)
 
-    document.querySelectorAll('[x-navigate\\:scroll]').forEach(el => {
+    document.querySelectorAll(['[x-navigate\\:scroll]', '[wire\\:scroll]']).forEach(el => {
         el.setAttribute('data-scroll-x', el.scrollLeft)
         el.setAttribute('data-scroll-y', el.scrollTop)
     })
@@ -16,7 +16,9 @@ export function restoreScrollPosition() {
         el.removeAttribute('data-scroll-y')
     }
 
-    scroll(document.body)
+    queueMicrotask(() => {
+        scroll(document.body)
 
-    document.querySelectorAll('[x-navigate\\:scroll]').forEach(scroll)
+        document.querySelectorAll(['[x-navigate\\:scroll]', '[wire\\:scroll]']).forEach(scroll)
+    })
 }