Merge e0b05c9 into 33a317e

.github/workflows/test.yml

@@ -125,6 +125,9 @@ jobs:
       - name: Build core
         run: yarn build:core
 
+      - name: Build middleware
+        run: yarn build:middleware
+
       - name: Build api-client
         run: cd packages/${{ matrix.integration }}/api-client && yarn build
 

package.json

@@ -8,6 +8,7 @@
     "build:docs": "cd packages/core/docs && yarn build",
     "dev:docs": "cd packages/core/docs && yarn dev",
     "build:core": "cd packages/core/core && yarn build",
+    "build:middleware": "cd packages/core/middleware && yarn build",
     "build:ayc:api-client": "cd packages/about-you/api-client && yarn build",
     "build:ayc:composables": "cd packages/about-you/composables && yarn build",
     "build:ayc:theme": "cd packages/about-you/theme && yarn build",
@@ -28,7 +29,7 @@
     "dev:bp": "cd packages/boilerplate/theme && yarn dev",
     "build:ct:api-client": "cd packages/commercetools/api-client && yarn build",
     "build:ct:composables": "cd packages/commercetools/composables && yarn build",
-    "build:ct:tools": "yarn build:core && yarn build:ct:api-client && yarn build:ct:composables",
+    "build:ct:tools": "yarn build:core && yarn build:middleware && yarn build:ct:api-client && yarn build:ct:composables",
     "build:ct:theme": "cd packages/commercetools/theme && yarn build",
     "build:ct": "yarn build:core && yarn build:ct:tools && yarn build:ct:theme",
     "build:sp:tools": "yarn build:core && yarn build:sp:api-client && yarn build:sp:composables",

packages/commercetools/api-client/src/index.server.ts

@@ -58,29 +58,32 @@ const parseToken = (rawToken) => {
   }
 };
 
-const tokenExtension: ApiClientExtension = (req, res) => {
-  const rawCurrentToken = req.cookies['vsf-commercetools-token'];
-  const currentToken = parseToken(rawCurrentToken);
+const tokenExtension: ApiClientExtension = {
+  name: 'tokenExtension',
+  hooks: (req, res) => {
+    const rawCurrentToken = req.cookies['vsf-commercetools-token'];
+    const currentToken = parseToken(rawCurrentToken);
 
-  return {
-    beforeCreate: (config) => ({
-      ...config,
-      auth: {
-        onTokenChange: (newToken) => {
-          if (!currentToken || currentToken.access_token !== newToken.access_token) {
-            res.cookie('vsf-commercetools-token', JSON.stringify(newToken));
+    return {
+      beforeCreate: ({ configuration }) => ({
+        ...configuration,
+        auth: {
+          onTokenChange: (newToken) => {
+            if (!currentToken || currentToken.access_token !== newToken.access_token) {
+              res.cookie('vsf-commercetools-token', JSON.stringify(newToken));
+            }
+          },
+          onTokenRead: () => {
+            res.cookie('vsf-commercetools-token', rawCurrentToken);
+            return currentToken;
+          },
+          onTokenRemove: () => {
+            delete req.cookies['vsf-commercetools-token'];
           }
-        },
-        onTokenRead: () => {
-          res.cookie('vsf-commercetools-token', rawCurrentToken);
-          return currentToken;
-        },
-        onTokenRemove: () => {
-          delete req.cookies['vsf-commercetools-token'];
         }
-      }
-    })
-  };
+      })
+    };
+  }
 };
 
 const { createApiClient } = apiClientFactory({

packages/commercetools/composables/nuxt/index.js

@@ -1,5 +1,4 @@
 import path from 'path';
-import { createMiddleware } from '@vue-storefront/core/server';
 
 const mapI18nSettings = (i18n) => ({
   locale: i18n.defaultLocale,
@@ -18,8 +17,6 @@ const getMissingFields = (options) =>
     .filter(o => options[o] === undefined);
 
 export default function (moduleOptions) {
-  const { middleware } = createMiddleware(moduleOptions);
-
   const options = isNuxtI18nUsed(moduleOptions)
     ? { ...moduleOptions, ...mapI18nSettings(this.options.i18n) }
     : moduleOptions;
@@ -39,7 +36,4 @@ export default function (moduleOptions) {
     options
   });
 
-  if (moduleOptions.apiMiddleware !== false) {
-    this.addServerMiddleware(middleware);
-  }
 }

packages/commercetools/theme/middleware.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  integrations: {
+    ct: {
+      location: '@vue-storefront/commercetools-api/server',
+      configuration: {
+        api: {
+          uri: 'https://api.commercetools.com/vsf-ct-dev/graphql',
+          authHost: 'https://auth.sphere.io',
+          projectKey: 'vsf-ct-dev',
+          clientId: 'RT4iJGDbDzZe4b2E6RyeNe9s',
+          clientSecret: '5eBt3yfZJWw1j7V6kXjfKXpuFP-YQXpg',
+          scopes: [
+            'manage_products:vsf-ct-dev',
+            'create_anonymous_token:vsf-ct-dev',
+            'manage_my_profile:vsf-ct-dev',
+            'manage_customer_groups:vsf-ct-dev',
+            'view_categories:vsf-ct-dev',
+            'introspect_oauth_tokens:vsf-ct-dev',
+            'manage_my_payments:vsf-ct-dev',
+            'manage_my_orders:vsf-ct-dev',
+            'manage_my_shopping_lists:vsf-ct-dev',
+            'view_published_products:vsf-ct-dev'
+          ]
+        },
+        currency: 'USD',
+        country: 'US'
+      }
+    }
+  }
+};

packages/commercetools/theme/middleware.js

@@ -0,0 +1,8 @@
+const { createServer } = require('@vue-storefront/middleware');
+const { integrations } = require('./middleware.config');
+
+const app = createServer({ integrations });
+
+app.listen(8181, () => {
+  console.log('Middleware started');
+});

packages/commercetools/theme/nuxt.config.js

@@ -81,25 +81,6 @@ export default {
     ['@vue-storefront/nuxt-theme'],
     project-only-end */
     ['@vue-storefront/commercetools/nuxt', {
-      api: {
-        uri: 'https://api.commercetools.com/vsf-ct-dev/graphql',
-        authHost: 'https://auth.sphere.io',
-        projectKey: 'vsf-ct-dev',
-        clientId: 'RT4iJGDbDzZe4b2E6RyeNe9s',
-        clientSecret: '5eBt3yfZJWw1j7V6kXjfKXpuFP-YQXpg',
-        scopes: [
-          'manage_products:vsf-ct-dev',
-          'create_anonymous_token:vsf-ct-dev',
-          'manage_my_profile:vsf-ct-dev',
-          'manage_customer_groups:vsf-ct-dev',
-          'view_categories:vsf-ct-dev',
-          'introspect_oauth_tokens:vsf-ct-dev',
-          'manage_my_payments:vsf-ct-dev',
-          'manage_my_orders:vsf-ct-dev',
-          'manage_my_shopping_lists:vsf-ct-dev',
-          'view_published_products:vsf-ct-dev'
-        ]
-      },
       i18n: {
         useNuxtI18nConfig: true
       }
@@ -109,14 +90,7 @@ export default {
     'nuxt-i18n',
     'cookie-universal-nuxt',
     'vue-scrollto/nuxt',
-    ['@vue-storefront/middleware/nuxt', {
-      integrations: {
-        ct: {
-          api: '@vue-storefront/commercetools-api/server',
-          module: '@vue-storefront/commercetools/nuxt'
-        }
-      }
-    }]
+    '@vue-storefront/middleware/nuxt'
   ],
   i18n: {
     currency: 'USD',

packages/commercetools/theme/package.json

@@ -20,6 +20,7 @@
     "@vue-storefront/commercetools": "^1.1.2",
     "@vue-storefront/nuxt": "^2.2.1",
     "@vue-storefront/nuxt-theme": "^2.2.1",
+    "@vue-storefront/middleware": "^2.2.1",
     "cookie-universal-nuxt": "^2.1.3",
     "core-js": "^2.6.5",
     "nuxt": "^2.13.3",

packages/core/core/__tests__/factories/apiClientFactory.spec.ts

@@ -48,11 +48,12 @@ describe('[CORE - factories] apiClientFactory', () => {
   });
 
   it('Should run given extensions', () => {
-    const extensionFns = {
-      beforeCreate: jest.fn(a => a),
-      afterCreate: jest.fn(a => a)
+    const beforeCreate = jest.fn(a => a);
+    const afterCreate = jest.fn(a => a);
+    const extension = {
+      name: 'extTest',
+      hooks: () => ({ beforeCreate, afterCreate })
     };
-    const extension = () => extensionFns;
 
     const params = {
       onCreate: jest.fn((config) => ({ config })),
@@ -61,10 +62,11 @@ describe('[CORE - factories] apiClientFactory', () => {
     };
 
     const { createApiClient } = apiClientFactory<any, any>(params as any);
+    const extensions = (createApiClient as any)._predefinedExtensions;
 
-    createApiClient.bind({ middleware: { req: null, res: null } })({});
+    createApiClient.bind({ middleware: { req: null, res: null, extensions } })({});
 
-    expect(extensionFns.beforeCreate).toHaveBeenCalled();
-    expect(extensionFns.afterCreate).toHaveBeenCalled();
+    expect(beforeCreate).toHaveBeenCalled();
+    expect(afterCreate).toHaveBeenCalled();
   });
 });

packages/core/core/package.json

@@ -7,10 +7,8 @@
   "mainServer": "server/index.js",
   "types": "lib/src/index.d.ts",
   "scripts": {
-    "build:client": "rollup -c rollup-client.config.js",
-    "build:server": "rollup -c rollup-server.config.js",
-    "build": "yarn build:client && yarn build:server",
-    "dev": "rollup -c rollup-client.config.js -w",
+    "build": "rimraf lib && rollup -c rollup.config.js",
+    "dev": "rimraf lib && rollup -c rollup.config.js -w",
     "prepublish": "yarn build"
   },
   "dependencies": {

packages/core/core/src/factories/apiClientFactory.ts

@@ -1,37 +1,41 @@
-import { ApiClientFactoryParams, ApiClientConfig, ApiInstance, ApiClientFactory } from './../types';
+import { ApiClientFactoryParams, ApiClientConfig, ApiInstance, ApiClientFactory, ApiClientExtension } from './../types';
 import { applyContextToApi } from './../utils/context';
 import { Logger } from './../utils';
 
+const isFn = (x) => typeof x === 'function';
+
 const apiClientFactory = <ALL_SETTINGS extends ApiClientConfig, ALL_FUNCTIONS>(factoryParams: ApiClientFactoryParams<ALL_SETTINGS, ALL_FUNCTIONS>): ApiClientFactory => {
   function createApiClient (config: any, customApi: any = {}): ApiInstance {
-    const extensions = factoryParams.extensions && this && this.middleware
-    // eslint-disable-next-line
-    ? Object.values(factoryParams.extensions).map((extensionFn) => extensionFn(this.middleware.req, this.middleware.res))
-      : [];
+    const rawExtensions: ApiClientExtension[] = this?.middleware?.extensions || [];
+    const lifecycles = Object.values(rawExtensions)
+      .filter(ext => isFn(ext.hooks))
+      .map(({ hooks }) => hooks(this?.middleware?.req, this?.middleware?.res));
+    const extendedApis = Object.keys(rawExtensions)
+      .reduce((prev, curr) => ({ ...prev, ...rawExtensions[curr].extendApiMethods }), customApi);
 
-    const _config = extensions
-      .filter(ext => ext.beforeCreate)
-      .reduce((prev, curr) => curr.beforeCreate(prev), config);
+    const _config = lifecycles
+      .filter(ext => isFn(ext.beforeCreate))
+      .reduce((prev, curr) => curr.beforeCreate({ configuration: prev }), config);
 
     const settings = factoryParams.onCreate ? factoryParams.onCreate(_config) : { config, client: config.client };
 
     Logger.debug('apiClientFactory.create', settings);
 
-    settings.config = extensions
-      .filter(ext => ext.afterCreate)
-      .reduce((prev, curr) => curr.afterCreate(prev), settings.config);
+    settings.config = lifecycles
+      .filter(ext => isFn(ext.afterCreate))
+      .reduce((prev, curr) => curr.afterCreate({ configuration: prev }), settings.config);
 
     const extensionHooks = {
-      before: (args) => extensions
-        .filter(e => e.beforeCall)
-        .reduce((prev, e) => e.beforeCall(prev), args),
-      after: (resp) => extensions
-        .filter(e => e.afterCall)
-        .reduce((prev, e) => e.afterCall(prev), resp)
+      before: (params) => lifecycles
+        .filter(e => isFn(e.beforeCall))
+        .reduce((args, e) => e.beforeCall({ ...params, configuration: settings.config, args}), params.args),
+      after: (params) => lifecycles
+        .filter(e => isFn(e.afterCall))
+        .reduce((response, e) => e.afterCall({ ...params, configuration: settings.config, response }), params.response)
     };
 
     const api = applyContextToApi(
-      { ...factoryParams.api, ...customApi },
+      { ...factoryParams.api, ...extendedApis },
       settings,
       extensionHooks
     );
@@ -43,6 +47,8 @@ const apiClientFactory = <ALL_SETTINGS extends ApiClientConfig, ALL_FUNCTIONS>(f
     };
   }
 
+  (createApiClient as any)._predefinedExtensions = factoryParams.extensions || [];
+
   return { createApiClient };
 };