Virtual Routes Support (#1799)

* add first test

* new VirtualRoutes mixin that handles routes. fetch tries to use VirtualRoutes. default config updated

* cover all basic use cases

* regex matching in routes

* covered all virtual routes tests

* added hack to fix config test on firefox

* removed formatting regex matches into string routes

* added support for "next" function

* added docs

* navigate now supports both hash and history routerModes

* waiting for networkidle in navigateToRoute helper

* promiseless implementation

* remove firefox workaround from catchPluginErrors test, since we no longer use promises

* updated docs

* updated docs for "alias" as well

* minor rephrasing

* removed non-legacy code from exact-match; updated navigateToRoute helper to infer router mode from page

* moved endsWith from router utils to general utils; added startsWith util; refactored makeExactMatcher to use both

* updated docs per feedback

* moved navigateToRoute helper into the virtual-routes test file

* moved navigateToRoute to top of file

* updated docs per pr comments

Author: illBeRoy

.eslintrc.js

@@ -41,7 +41,14 @@ module.exports = {
     'no-shadow': [
       'error',
       {
-        allow: ['Events', 'Fetch', 'Lifecycle', 'Render', 'Router'],
+        allow: [
+          'Events',
+          'Fetch',
+          'Lifecycle',
+          'Render',
+          'Router',
+          'VirtualRoutes',
+        ],
       },
     ],
     'no-unused-vars': ['error', { args: 'none' }],

docs/configuration.md

@@ -35,6 +35,7 @@ The config can also be defined as a function, in which case the first argument i
 - Type: `Object`
 
 Set the route alias. You can freely manage routing rules. Supports RegExp.
+Do note that order matters! If a route can be matched by multiple aliases, the one you declared first takes precedence.
 
 ```js
 window.$docsify = {
@@ -680,6 +681,91 @@ window.$docsify = {
 };
 ```
 
+## routes
+
+- Type: `Object`
+
+Define "virtual" routes that can provide content dynamically. A route is a map between the expected path, to either a string or a function. If the mapped value is a string, it is treated as markdown and parsed accordingly. If it is a function, it is expected to return markdown content.
+
+A route function receives up to three parameters:
+1. `route` - the path of the route that was requested (e.g. `/bar/baz`)
+2. `matched` - the [`RegExpMatchArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match) that was matched by the route (e.g. for `/bar/(.+)`, you get `['/bar/baz', 'baz']`)
+3. `next` - this is a callback that you may call when your route function is async
+
+Do note that order matters! Routes are matched the same order you declare them in, which means that in cases where you have overlapping routes, you might want to list the more specific ones first.
+
+```js
+window.$docsify = {
+  routes: {
+    // Basic match w/ return string
+    '/foo': '# Custom Markdown',
+
+    // RegEx match w/ synchronous function
+    '/bar/(.*)': function(route, matched) {
+      return '# Custom Markdown';
+    },
+
+    // RegEx match w/ asynchronous function
+    '/baz/(.*)': function(route, matched, next) {
+       // Requires `fetch` polyfill for legacy browsers (https://github.github.io/fetch/)
+      fetch('/api/users?id=12345')
+        .then(function(response) {
+          next('# Custom Markdown');
+        })
+        .catch(function(err) {
+          // Handle error...
+        });
+    }
+  }
+}
+```
+
+Other than strings, route functions can return a falsy value (`null` \ `undefined`) to indicate that they ignore the current request:
+
+```js
+window.$docsify = {
+  routes: {
+    // accepts everything other than dogs (synchronous)
+    '/pets/(.+)': function(route, matched) {
+      if (matched[0] === 'dogs') {
+        return null;
+      } else {
+        return 'I like all pets but dogs';
+      }
+    }
+
+    // accepts everything other than cats (asynchronous)
+    '/pets/(.*)': function(route, matched, next) {
+      if (matched[0] === 'cats') {
+        next();
+      } else {
+        // Async task(s)...
+        next('I like all pets but cats');
+      }
+    }
+  }
+}
+```
+
+Finally, if you have a specific path that has a real markdown file (and therefore should not be matched by your route), you can opt it out by returning an explicit `false` value:
+
+```js
+window.$docsify = {
+  routes: {
+    // if you look up /pets/cats, docsify will skip all routes and look for "pets/cats.md"
+    '/pets/cats': function(route, matched) {
+      return false;
+    }
+
+    // but any other pet should generate dynamic content right here
+    '/pets/(.+)': function(route, matched) {
+      const pet = matched[0];
+      return `your pet is ${pet} (but not a cat)`;
+    }
+  }
+}
+```
+
 ## subMaxLevel
 
 - Type: `Number`

src/core/Docsify.js

@@ -2,6 +2,7 @@ import { Router } from './router/index.js';
 import { Render } from './render/index.js';
 import { Fetch } from './fetch/index.js';
 import { Events } from './event/index.js';
+import { VirtualRoutes } from './virtual-routes/index.js';
 import initGlobalAPI from './global-api.js';
 
 import config from './config.js';
@@ -11,7 +12,10 @@ import { Lifecycle } from './init/lifecycle';
 /** @typedef {new (...args: any[]) => any} Constructor */
 
 // eslint-disable-next-line new-cap
-export class Docsify extends Fetch(Events(Render(Router(Lifecycle(Object))))) {
+export class Docsify extends Fetch(
+  // eslint-disable-next-line new-cap
+  Events(Render(VirtualRoutes(Router(Lifecycle(Object)))))
+) {
   constructor() {
     super();
 

src/core/config.js

@@ -33,6 +33,7 @@ export default function (vm) {
       notFoundPage: true,
       relativePath: false,
       repo: '',
+      routes: {},
       routerMode: 'hash',
       subMaxLevel: 0,
       themeColor: '',

src/core/fetch/index.js

@@ -96,25 +96,44 @@ export function Fetch(Base) {
         // Abort last request
 
         const file = this.router.getFile(path);
-        const req = request(file + qs, true, requestHeaders);
 
         this.isRemoteUrl = isExternal(file);
         // Current page is html
         this.isHTML = /\.html$/g.test(file);
 
-        // Load main content
-        req.then(
-          (text, opt) =>
-            this._renderMain(
-              text,
-              opt,
-              this._loadSideAndNav(path, qs, loadSidebar, cb)
-            ),
-          _ => {
-            this._fetchFallbackPage(path, qs, cb) ||
-              this._fetch404(file, qs, cb);
-          }
-        );
+        // create a handler that should be called if content was fetched successfully
+        const contentFetched = (text, opt) => {
+          this._renderMain(
+            text,
+            opt,
+            this._loadSideAndNav(path, qs, loadSidebar, cb)
+          );
+        };
+
+        // and a handler that is called if content failed to fetch
+        const contentFailedToFetch = _ => {
+          this._fetchFallbackPage(path, qs, cb) || this._fetch404(file, qs, cb);
+        };
+
+        // attempt to fetch content from a virtual route, and fallback to fetching the actual file
+        if (!this.isRemoteUrl) {
+          this.matchVirtualRoute(path).then(contents => {
+            if (typeof contents === 'string') {
+              contentFetched(contents);
+            } else {
+              request(file + qs, true, requestHeaders).then(
+                contentFetched,
+                contentFailedToFetch
+              );
+            }
+          });
+        } else {
+          // if the requested url is not local, just fetch the file
+          request(file + qs, true, requestHeaders).then(
+            contentFetched,
+            contentFailedToFetch
+          );
+        }
 
         // Load nav
         loadNavbar &&

src/core/router/history/hash.js

@@ -1,6 +1,7 @@
 import { noop } from '../../util/core';
 import { on } from '../../util/dom';
-import { parseQuery, cleanPath, replaceSlug, endsWith } from '../util';
+import { endsWith } from '../../util/str';
+import { parseQuery, cleanPath, replaceSlug } from '../util';
 import { History } from './base';
 
 function replaceHash(path) {

src/core/router/util.js

@@ -113,7 +113,3 @@ export function getPath(...args) {
 export const replaceSlug = cached(path => {
   return path.replace('#', '?id=');
 });
-
-export function endsWith(str, suffix) {
-  return str.indexOf(suffix, str.length - suffix.length) !== -1;
-}

src/core/util/str.js

@@ -0,0 +1,7 @@
+export function startsWith(str, prefix) {
+  return str.indexOf(prefix) === 0;
+}
+
+export function endsWith(str, suffix) {
+  return str.indexOf(suffix, str.length - suffix.length) !== -1;
+}

src/core/virtual-routes/exact-match.js

@@ -0,0 +1,21 @@
+import { startsWith, endsWith } from '../util/str';
+
+/**
+ * Adds beginning of input (^) and end of input ($) assertions if needed into a regex string
+ * @param {string} matcher the string to match
+ * @returns {string}
+ */
+export function makeExactMatcher(matcher) {
+  const matcherWithBeginningOfInput = startsWith(matcher, '^')
+    ? matcher
+    : `^${matcher}`;
+
+  const matcherWithBeginningAndEndOfInput = endsWith(
+    matcherWithBeginningOfInput,
+    '$'
+  )
+    ? matcherWithBeginningOfInput
+    : `${matcherWithBeginningOfInput}$`;
+
+  return matcherWithBeginningAndEndOfInput;
+}

src/core/virtual-routes/index.js

@@ -0,0 +1,93 @@
+import { makeExactMatcher } from './exact-match';
+import { createNextFunction } from './next';
+
+/** @typedef {import('../Docsify').Constructor} Constructor */
+
+/** @typedef {Record<string, string | VirtualRouteHandler>} VirtualRoutesMap */
+/** @typedef {(route: string, match: RegExpMatchArray | null) => string | void | Promise<string | void> } VirtualRouteHandler */
+
+/**
+ * @template {!Constructor} T
+ * @param {T} Base - The class to extend
+ */
+export function VirtualRoutes(Base) {
+  return class VirtualRoutes extends Base {
+    /**
+     * Gets the Routes object from the configuration
+     * @returns {VirtualRoutesMap}
+     */
+    routes() {
+      return this.config.routes || {};
+    }
+
+    /**
+     * Attempts to match the given path with a virtual route.
+     * @param {string} path the path of the route to match
+     * @returns {Promise<string | null>} resolves to string if route was matched, otherwise null
+     */
+    matchVirtualRoute(path) {
+      const virtualRoutes = this.routes();
+      const virtualRoutePaths = Object.keys(virtualRoutes);
+
+      let done = () => null;
+
+      /**
+       * This is a tail recursion that iterates over all the available routes.
+       * It can result in one of two ways:
+       * 1. Call itself (essentially reviewing the next route)
+       * 2. Call the "done" callback with the result (either the contents, or "null" if no match was found)
+       */
+      function asyncMatchNextRoute() {
+        const virtualRoutePath = virtualRoutePaths.shift();
+        if (!virtualRoutePath) {
+          return done(null);
+        }
+
+        const matcher = makeExactMatcher(virtualRoutePath);
+        const matched = path.match(matcher);
+
+        if (!matched) {
+          return asyncMatchNextRoute();
+        }
+
+        const virtualRouteContentOrFn = virtualRoutes[virtualRoutePath];
+
+        if (typeof virtualRouteContentOrFn === 'string') {
+          const contents = virtualRouteContentOrFn;
+          return done(contents);
+        }
+
+        if (typeof virtualRouteContentOrFn === 'function') {
+          const fn = virtualRouteContentOrFn;
+
+          const [next, onNext] = createNextFunction();
+          onNext(contents => {
+            if (typeof contents === 'string') {
+              return done(contents);
+            } else if (contents === false) {
+              return done(null);
+            } else {
+              return asyncMatchNextRoute();
+            }
+          });
+
+          if (fn.length <= 2) {
+            const returnedValue = fn(path, matched);
+            return next(returnedValue);
+          } else {
+            return fn(path, matched, next);
+          }
+        }
+
+        return asyncMatchNextRoute();
+      }
+
+      return {
+        then: function (cb) {
+          done = cb;
+          asyncMatchNextRoute();
+        },
+      };
+    }
+  };
+}

src/core/virtual-routes/next.js

@@ -0,0 +1,21 @@
+/** @typedef {((value: any) => void) => void} OnNext */
+/** @typedef {(value: any) => void} NextFunction */
+
+/**
+ * Creates a pair of a function and an event emitter.
+ * When the function is called, the event emitter calls the given callback with the value that was passed to the function.
+ * @returns {[NextFunction, OnNext]}
+ */
+export function createNextFunction() {
+  let storedCb = () => null;
+
+  function next(value) {
+    storedCb(value);
+  }
+
+  function onNext(cb) {
+    storedCb = cb;
+  }
+
+  return [next, onNext];
+}