feat(responseMiddleware): add responseMiddleware (both client and server side) to perform actions to payload, uniformly

Author: ezypeeze

lib/module.js

@@ -8,6 +8,7 @@ const DEFAULT_MODULE_OPTIONS = {
     debug: process.env.NODE_ENV !== 'production',
     noContentStatusOnEmpty: true,
     clientSideApiHandler: '~/api_handler',
+    responseMiddleware: null,
     successHandler: function (result) {
         return result;
     },
@@ -48,6 +49,8 @@ const DEFAULT_MODULE_OPTIONS = {
 
 module.exports = function NeoModule(moduleOptions) {
     moduleOptions = _.merge(DEFAULT_MODULE_OPTIONS, moduleOptions);
+    moduleOptions.aliasKey = /^[~|@]/g;
+    moduleOptions.srcDir   = this.options.srcDir;
 
     // Globalize http errors exceptions
     moduleOptions.httpErrors && require('./utility/http_errors');
@@ -66,6 +69,7 @@ module.exports = function NeoModule(moduleOptions) {
         src: path.resolve(__dirname, 'plugins', 'api.template.js'),
         options: {
             apiHandlerFile: moduleOptions.clientSideApiHandler,
+            responseMiddlewareFile: moduleOptions.responseMiddleware,
             controllers: JSON.stringify(controllerMappingClientSide(moduleOptions.directory)),
             apiConfig: JSON.stringify(moduleOptions)
         }

lib/plugins/api.template.js

@@ -1,5 +1,20 @@
 import Vue from 'vue';
 import ApiHandler from '<%= options.apiHandlerFile %>';
+<% if (options.responseMiddlewareFile) { %>
+import ResponseMiddleware from '<%= options.responseMiddlewareFile %>';
+<% } else { %>
+const ResponseMiddleware = null;
+<% } %>
+
+/**
+ * Runs possible middleware for the response
+ *
+ * @param result
+ * @returns {Function}
+ */
+function runResponseMiddleware(result) {
+    return ResponseMiddleware && ResponseMiddleware(result) || Promise.resolve(result);
+}
 
 /**
  * Inject given params into path (express-like)
@@ -40,7 +55,7 @@ function generateAPI(controllerMapping) {
                     context.verb,
                     values || {},
                     <%= options.apiConfig %>
-                );
+                ).then(runResponseMiddleware);
             }
         } else if (typeof controllerMapping[key] === 'object') {
             api[key] = generateAPI(controllerMapping[key]);

lib/utility/controllers.js

@@ -118,6 +118,14 @@ function controllerMappingClientSide(directory) {
  * @returns {Object}
  */
 function controllerMappingServerSide(directory, req, options) {
+    let ResponseMiddleware = options.responseMiddleware
+        ? require(options.responseMiddleware.replace(options.aliasKey, options.srcDir))
+        : null;
+
+    ResponseMiddleware = ResponseMiddleware && ResponseMiddleware.default
+        ? ResponseMiddleware.default
+        : ResponseMiddleware;
+
     return controllerMapping(options.directory, function (ControllerClass, actionName) {
         return function (params, body, query) {
             try {
@@ -129,6 +137,9 @@ function controllerMappingServerSide(directory, req, options) {
                     .then(function (result) {
                         return options.successHandler(result);
                     })
+                    .then(function (result) {
+                        return ResponseMiddleware && ResponseMiddleware(result) || Promise.resolve(result);
+                    })
                     .catch(function (err) {
                         return options.errorHandler(err, req);
                     });

tests/api.flow.test.js

@@ -40,8 +40,10 @@ test('Test hybrid api data flow server side.', async (t) => {
     const window           = await nuxt.renderAndGetWindow(URL('/'));
     const path             = window.document.querySelector('.index span.path');
     const okay             = window.document.querySelector('.index span.okay');
+    const resMiddle        = window.document.querySelector('.index span.response-middleware');
 
     t.is(okay.textContent, "It's okay!");
+    t.is(resMiddle.textContent, "It's okay!");
 
     // Since it accessed to controller on server side, the request path should be '/' which was what we rendered above
     t.is(path.textContent, '/');
@@ -54,11 +56,13 @@ test('Test hybrid api data flow client side', async (t) => {
     const okay       = window.document.querySelector('.index span.okay');
     const idParam    = window.document.querySelector('.index span.id-param');
     const changePath = window.document.querySelector('.index .change-path');
+    const resMiddle  = window.document.querySelector('.index span.response-middleware');
 
     changePath.dispatchEvent(clickEvent);
     await new Promise(resolve => setTimeout(resolve, 1000)); // wait for API request
 
     t.is(path.textContent, '/api/v2/users/1');
     t.is(okay.textContent, "It's okay!");
     t.is(idParam.textContent, '1');
+    t.is(resMiddle.textContent, "It's okay!");
 });

tests/fixtures/nuxt.config.js

@@ -5,7 +5,8 @@ module.exports = {
     modules: [
         [LIB_DIR + '/module', {
             directory: TEST_DIR + '/fixtures/api',
-            debug: true
+            debug: true,
+            responseMiddleware: '~/response_middleware'
         }]
     ],
 

tests/fixtures/pages/index.vue

@@ -4,6 +4,8 @@
         <span class="id-param">{{ data.params && data.params.id }}</span>
         <span class="okay" v-if="data.ok">It's okay!</span>
         <span class="okay" v-else>It's not okay...</span>
+        <span class="response-middleware" v-if="data.response_middleware">It's okay!</span>
+        <span class="response-middleware" v-else>It's not okay...</span>
 
         <button class="change-path" @click="handleClick">Change Path</button>
     </div>

tests/fixtures/response_middleware.js

@@ -0,0 +1,5 @@
+export default function (result) {
+    result.response_middleware = true;
+
+    return result;
+}