TODO continue with these changes unstanged on the fix-validating-remote-content-2 branch

server.js

@@ -156,6 +156,39 @@ async function main() {
                       );
                     });
                   },
+                  function(hook, vm) {
+                    hook.init(() => {
+                      console.log('----------- plugin init')
+                    })
+
+                    hook.beforeEach((markdown, done) => {
+                      console.log('----------- plugin beforeEach start')
+                      setTimeout(() => {
+                        console.log('----------- plugin beforeEach end')
+                        done(markdown)
+                      }, 500)
+                    })
+
+                    hook.afterEach((html, done) => {
+                      console.log('----------- plugin afterEach start')
+                      setTimeout(() => {
+                        console.log('----------- plugin afterEach end')
+                        done(html)
+                      }, 500)
+                    })
+
+                    hook.doneEach(() => {
+                      console.log('----------- plugin doneEach')
+                    })
+
+                    hook.mounted(() => {
+                      console.log('----------- plugin mounted')
+                    })
+
+                    hook.ready(() => {
+                      console.log('----------- plugin ready')
+                    })
+                  }
                 ],
               };
             </script>

src/core/fetch/index.js

@@ -173,15 +173,27 @@ export function fetchMixin(proto) {
     const onlyCover = this._fetchCover();
 
     if (onlyCover) {
+      // FIXME This is super confusing. At this point, doneEach will be called, but
+      // the cover hasn't been rendered yet.
+      // TODO: Wait for cover to be fetched...
       done();
     } else {
       this._fetch(() => {
         // Scroll to the target item of the page, or to the top.
         $resetEvents();
 
+        // FIXME This also has a problem similar to the onlyCover branch in the
+        // previous FIXME: it waits for main content to be fetched, but not for
+        // navbar to be fetched, so doneEach can be called before things are
+        // *done* being fetched.
         done();
       });
     }
+
+    // FIXME: What is doneEach even for? The documentation says "Invoked each
+    // time after the data is fully loaded". The way it is being used here is
+    // confusing because at this point *something* may have been loaded, or
+    // nothing may have been loaded.
   };
 
   proto._fetchFallbackPage = function (path, qs, cb = noop) {
@@ -247,6 +259,7 @@ export function initFetch(vm) {
 
   // Server-Side Rendering
   if (vm.rendered) {
+    console.log('--------------------- Hmmmmmmmmmmmmmmmmmmmmmmmmm? 1');
     const activeEl = getAndActive(vm.router, '.sidebar-nav', true, true);
     if (loadSidebar && activeEl) {
       activeEl.parentNode.innerHTML += window.__SUB_SIDEBAR__;
@@ -257,6 +270,7 @@ export function initFetch(vm) {
     callHook(vm, 'doneEach');
     callHook(vm, 'ready');
   } else {
+    console.log('--------------------- Hmmmmmmmmmmmmmmmmmmmmmmmmm? 2');
     vm.$fetch(_ => callHook(vm, 'ready'));
   }
 }

src/core/init/lifecycle.js

@@ -18,6 +18,18 @@ export function initLifecycle(vm) {
   });
 }
 
+// FIXME!
+// FIXME!
+// FIXME! Hooks can be async (they need to call the second callback arg passed
+// to them, if they have to parameters). This allows plugins to be executed
+// in sequence even if they run async code. However! On the last hook function
+// of a particular type (for example the last afterEach hook), the next hook of
+// the next type (for example the first doneEach hook) will start executing
+// before the previous last hook of the last type completed (for example the
+// first doneEach hook will begin executing before the last afterEach hook
+// has completed). THIS IS BAD! Most people are probably not using async
+// hooks in order to encounter this, but if they do, it will be jarring!
+
 export function callHook(vm, hookName, markdownOrHtml, next = noop) {
   const queue = vm._hooks[hookName];
 

src/core/render/index.js

@@ -278,6 +278,7 @@ export function renderMixin(proto) {
     this._bindEventOnRendered(activeEl);
   };
 
+  // FIXME why is scroll behavior here? Also see the comments in eventMixin
   proto._bindEventOnRendered = function (activeEl) {
     const { autoHeader } = this.config;