feat(global-middlewares): register global middlewares in plugin options

Author: iodsfx3d

.editorconfig

@@ -1,5 +1,6 @@
-[*.{js,jsx,ts,tsx}]
+[*.{js,jsx,ts,tsx,json,yml}]
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true
 insert_final_newline = true
+end_of_line = lf

.travis.yml

@@ -5,7 +5,7 @@ cache:
     - node_modules
 branches:
   only:
-    - master # trigger release only for PRs and changes pushed to master branch
+    - master
 notifications:
   email: false
 node_js:
@@ -15,7 +15,7 @@ before_install:
 before_script:
   - npm prune
 script:
-  - npm run test
   - npm run build
 after_success:
-  - npm run semantic-release
+  - bash <(curl -s https://codecov.io/bash)
+  - npm run semantic-release

README.md

@@ -1,14 +1,16 @@
 # vue-router-middleware-plugin
 
-[![npm version](https://badge.fury.io/js/vue-router-middleware-plugin.svg)](https://badge.fury.io/js/vue-router-middleware-plugin) 
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d1ab723bcfaa460aa9d12ccc7a54bf65)](https://www.codacy.com/manual/dsfx3d/vue-router-middleware-plugin?utm_source=github.com&utm_medium=referral&utm_content=dsfx3d/vue-router-middleware-plugin&utm_campaign=Badge_Grade)
 [![Build Status](https://travis-ci.org/dsfx3d/vue-router-middleware-plugin.svg?branch=master)](https://travis-ci.org/dsfx3d/vue-router-middleware-plugin)
+[![npm version](https://badge.fury.io/js/vue-router-middleware-plugin.svg)](https://badge.fury.io/js/vue-router-middleware-plugin)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d1ab723bcfaa460aa9d12ccc7a54bf65)](https://www.codacy.com/manual/dsfx3d/vue-router-middleware-plugin?utm_source=github.com&utm_medium=referral&utm_content=dsfx3d/vue-router-middleware-plugin&utm_campaign=Badge_Grade)
+![vue-router-middleware-plugin](https://badgen.net/bundlephobia/min/vue-router-middleware-plugin)
+![vue-router-middleware-plugin](https://badgen.net/bundlephobia/minzip/vue-router-middleware-plugin)
 
-> **Please Note:** Due to the very limited scope of this module, I do not anticipate needing to make very many changes to it.  Expect long stretches of zero updates—that does not mean that the module is outdated.
+> **Please Note:** Due to the very limited scope of this module, I do not anticipate need to making many changes to it.  Expect long stretches of zero updates—that does not mean that the module is outdated.
 
-A vue.js plugin to implement a middleware pipeline between your routes.
+A vue.js plugin to implement a middleware pipeline for vue-router.
 
-It can be utilized for many use cases like protecting a route or to request an API to populate the store before a route is loaded.
+It can have many use cases like protecting a route or to request an API to populate the store before a route is loaded.
 The plugin utilizes [vue-router navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards.html) to implement easy to use, readable and more organized middlewares for your routes.
 
 ## Installation
@@ -27,70 +29,140 @@ yarn add vue-router-middleware-plugin
 
 ## Usage
 
+Create a middleware, `auth.js`
+
+```javascript
+import store from '~/store'
+
+export default ({ to, from, next }) => {
+  if (store.getters.isLoggedIn) {
+    next()
+  } else {
+    next('/login')
+  }
+}
+```
+
 Register the plugin in your application.
 
 ```javascript
 import Vue from 'vue'
 import MiddlewarePlugin from 'vue-router-middleware-plugin'
-/* vue-router is required */
 import router from '~/router'
+import AuthMiddleware from '~router/middlewares/auth'
+import LoggerMiddleware from '~router/middlewares/logger'
 
 Vue.use(MiddlewarePlugin, router)
+
+// OR register a globabl middleware
+
+Vue.use(MiddlewarePlugin, { router, middleware: AuthMiddleware })
+
+// OR register multiple globabl middlewares
+
+Vue.use(MiddlewarePlugin, { router, middleware: [AuthMiddleware, LoggerMiddleware] })
 ```
 
-Create a middleware, `auth-example.js`
+> **Note:**: As the name suggests a global middleware will be resolved before each route.
+
+Attach route middlewares in `router.js`
 
 ```javascript
-import store from '~/store'
+import ExampleMiddleware from './middlewares/example'
+import AnotherMiddleware from './middlewares/another'
 
-export default ({ to, from, next }) => {
-  if (store.getters.isLoggedIn) {
-    next()
-  } else {
-    next('/login')
-  }
-}
+.
+.
+.
+const routes = [
+  {
+    path: '/dashboard',
+    component: DashboardView,
+    meta: {
+      // attavh a middleware to a route
+      middleware: ExampleMiddleware
+    }
+  },
+  {
+    path: '/profile',
+    component: ProfileView,
+    meta: {
+      // you may also use an array for multiple middlewares
+      middleware: [ExampleMiddleware, AnotherMiddleware]
+    }
+  },
+  .
+  .
+  .
+]
+```
+
+> **Note**: Global middlewares have precedence over route middlewares
+
+If the user tries to access `/profile` route, the attached middlewares will be resolved in a synchronous order:
+
+```bash
+AuthMiddleware > LoggerMiddleware > ExampleMiddleware > AnotherMiddleware
 ```
 
-Attach the middleware to the routes in `router.js`
+`AuthMiddleware` and `LoggerMiddleware` will be resolved before profile route middlewares because they are global middlewares.
+
+Ignore global middlewares in `router.js`
 
 ```javascript
-import AuthExampleMiddleware from './middlewares/auth-example'
+import AuthMiddleware from './middlewares/auth'
+import LoggerMiddleware from './middlewares/logger'
+import ExampleMiddleware from './middlewares/example'
 import AnotherMiddleware from './middlewares/another'
 
 .
 .
 .
 const routes = [
+  .
+  .
+  .
   {
     path: '/login',
-    component: LoginView
+    component: LoginView,
+    meta: {
+      middleware: {
+        ignore: AuthMiddleware
+      }
+    }
   },
   {
-    path: '/dashboard',
-    component: DashboardView,
+    path: '/register',
+    component: RegisterView,
     meta: {
-      /* Attach a middleware to a route */
-      middleware: AuthExampleMiddleware
+      // you may also attach a middleware to this route
+      middleware: {
+        ignore: AuthMiddleware
+        attach: AnotherMiddleware
+      }
     }
   },
+
   {
-    path: '/profile',
-    component: ProfileView,
-    /* You can also attach multiple middlewares to a route */
+    path: '/about',
+    component: AboutView,
     meta: {
-      middleware: [AuthExampleMiddleware, AnotherMiddleware]
+      // you may also use an array for multiple middlewares
+      middleware: {
+        ignore: [AuthMiddleware, LoggerMiddleware]
+        attach: [ExampleMiddleware, AnotherMiddleware]
+      }
     }
   }
 ]
 
 ```
 
-If the user tries to access `/profile` route, the attached middlewares will be resolved in a synchronous order. i.e. `AuthExampleMiddleware` will be resolved first and `AnotherMiddleware` afterwards.
-
 ## Roadmap
 
-* **v1.1.0** - Global Middlewares 
+- [x] **v1.0.0** - Route Middlewares
+- [x] **v1.1.0** - Global Middlewares
+- [ ] **v1.2.0** - Auto importing middlewares.
 
 ## Contributing
 

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  'coverageThreshold': {
+    'global': {
+      'branches': 100,
+      'functions': 100,
+      'lines': 100,
+      'statements': 100
+    }
+  }
+}

package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "type-check": "tslint-config-prettier-check ./tslint.json",
     "type-check:watch": "tsc --noEmit --watch",
+    "prebuild": "npm run precommit",
     "build": "npm run build:types && npm run build:js",
     "build:types": "tsc --emitDeclarationOnly",
     "build:js": "babel src --out-dir build --extensions \".ts,.tsx\" --source-maps inline",

src/helpers/middlewarePipeline.ts

@@ -1,27 +1,24 @@
-import { Middleware, MiddlewarePipeline } from '../types/MiddlewareTypes'
+import { InvalidPipelinePayload } from '../lib/Exceptions/InvalidPipelinePayloads'
+import { Middleware } from '../types/MiddlewareTypes'
 import { RouteContext, RouteResolver } from '../types/VueTypes'
 
-export const middlewarePipeline: MiddlewarePipeline = (
+export const middlewarePipeline = (
   context: RouteContext,
-  middleware: Middleware[] | Middleware,
+  middlewares: Middleware[],
   index = 0
 ) => {
-  if (Array.isArray(middleware) && index === middleware.length) {
+  if (!Array.isArray(middlewares)) {
+    throw new InvalidPipelinePayload()
+  }
+
+  if (index === middlewares.length) {
     return context.next
   }
 
-  let nextContext: RouteContext
-  // tslint:disable-next-line: variable-name
-  let thisMiddleware: Middleware
+  const thisMiddleware = middlewares[index]
+  const nextMiddleware = middlewarePipeline(context, middlewares, index + 1)
+  const thisContext = { ...context, next: nextMiddleware as RouteResolver }
 
-  if (Array.isArray(middleware)) {
-    thisMiddleware = middleware[index]
-    const nextMiddleware = middlewarePipeline(context, middleware, index + 1)
-    nextContext = { ...context, next: nextMiddleware as RouteResolver }
-  } else {
-    thisMiddleware = middleware
-    nextContext = context
-  }
-  const nextResolver = () => thisMiddleware(nextContext)
+  const nextResolver = () => thisMiddleware(thisContext)
   return nextResolver
 }

src/helpers/returnMiddlewareArray.ts

@@ -0,0 +1,31 @@
+import { NotAMiddleware } from '../lib/Exceptions/NotAMiddleware'
+
+export const retuenMiddlewareArray = (
+  x: any | any[],
+  arr: any[] = []
+): any[] => {
+  if (!Array.isArray(arr)) {
+    throw new NotAMiddleware()
+  } else {
+    const allMiddlewares = (arr as []).every(a => typeof a === 'function')
+    if (!allMiddlewares) {
+      throw new NotAMiddleware()
+    }
+  }
+
+  if (Array.isArray(x) && x.length) {
+    const allMiddlewares = x.every(_x => typeof _x === 'function')
+    if (allMiddlewares) {
+      return [...arr, ...x]
+    }
+    throw new NotAMiddleware()
+  }
+
+  if (typeof x === 'function') {
+    arr.push(x)
+  } else {
+    throw new NotAMiddleware()
+  }
+
+  return arr
+}

src/install.ts

@@ -1,5 +1,7 @@
 import { middlewarePipeline } from './helpers/middlewarePipeline'
+import { retuenMiddlewareArray } from './helpers/returnMiddlewareArray'
 import { OptionsMissingPluginError } from './lib/Exceptions/OptionsMissingPluginError'
+import { Middleware } from './types/MiddlewareTypes'
 import { Install, PluginOptions } from './types/PluginTypes'
 import {
   Route,
@@ -14,10 +16,20 @@ export const install: Install<Router | PluginOptions> = (
   vue: Vue,
   options?: Router | PluginOptions
 ) => {
-  const router: Router =
-    options && (options as PluginOptions).router
-      ? (options as PluginOptions).router
-      : (options as Router)
+  let router: Router
+  let middlewares: Middleware[] = []
+
+  if (options && (options as PluginOptions).router) {
+    const { router: _router, middleware } = options as PluginOptions
+    router = _router
+
+    /* istanbul ignore if */
+    if (middleware !== undefined) {
+      middlewares = retuenMiddlewareArray(middleware)
+    }
+  } else {
+    router = options as Router
+  }
 
   /* istanbul ignore else */
   if (router === undefined) {
@@ -28,15 +40,35 @@ export const install: Install<Router | PluginOptions> = (
       from: Route,
       next: RouteResolver
     ) => {
-      if (!to.meta.middleware) {
-        next()
-      } else {
+      if ('middleware' in to.meta) {
+        if (typeof to.meta.middleware === 'object') {
+          let ignores: Middleware[] = []
+          if ('attach' in to.meta.middleware) {
+            middlewares = retuenMiddlewareArray(
+              to.meta.middleware.attach,
+              middlewares
+            )
+          }
+          if ('ignore' in to.meta.middleware) {
+            ignores = retuenMiddlewareArray(to.meta.middleware.ignore)
+          }
+
+          middlewares = middlewares.filter(
+            middleware => !ignores.includes(middleware)
+          )
+        } else {
+          middlewares = retuenMiddlewareArray(to.meta.middleware, middlewares)
+        }
+      }
+      if (middlewares.length) {
         const context: RouteContext = { to, from, next }
         const routeResolver = middlewarePipeline(
           context,
-          to.meta.middleware
+          middlewares
         ) as RouteResolver
         routeResolver()
+      } else {
+        next()
       }
     }
 

src/lib/Exceptions/BasePluginError.ts

@@ -2,7 +2,7 @@
 
 export class BasePluginError extends Error {
   protected static readonly _MESSAGE_: string = 'unexpected error'
-  protected static readonly _NAME_: string = '[better-vue-router-middleware]'
+  protected static readonly _NAME_: string = '[vue-router-middleware-plugin]'
 
   constructor(message: string = BasePluginError._MESSAGE_) {
     super(message)