Modules rewrite, storage refactor, huge clenup

CHANGELOG.md

@@ -40,7 +40,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added configuration for max attempt task & cart by pass - @cnviradiya (#3193)
 - Added catching of errors when ES is down - @qiqqq
 - Added debounce for updating quantity method in the cart - @andrzejewsky (#3191)
-
+- New modules API and rewrite - @filrak, @JCown (#3144)
 ## [1.10.0-rc.2] - UNRELEASED
 
 ### Fixed

config/default.json

@@ -348,7 +348,7 @@
         "claims": "LOCALSTORAGE",
         "syncTasks": "LOCALSTORAGE",
         "ordersHistory": "LOCALSTORAGE",
-        "checkoutFieldValues": "LOCALSTORAGE"
+        "checkout": "LOCALSTORAGE"
       }
     },
     "reviews": {

core/app.ts

@@ -31,9 +31,6 @@ import store from '@vue-storefront/core/store'
 
 import { enabledModules } from './modules-entry'
 
-// Will be deprecated in 2.0
-import { registerExtensions } from '@vue-storefront/core/compatibility/lib/extensions'
-import { registerExtensions as extensions } from 'src/extensions'
 import globalConfig from 'config'
 
 import { injectReferences } from '@vue-storefront/module'
@@ -119,7 +116,6 @@ const createApp = async (ssrContext, config, storeCode = null): Promise<{app: Vu
   injectReferences(app, store, router, globalConfig)
   registerNewModules()
   registerModules(enabledModules, appContext)
-  registerExtensions(extensions, app, router, store, config, ssrContext)
   registerTheme(globalConfig.theme, app, router, store, globalConfig, ssrContext)
 
   coreHooksExecutors.afterAppInit()

core/build/webpack.base.config.ts

@@ -119,7 +119,8 @@ export default {
       // Backward compatible
       '@vue-storefront/core/store/lib/multistore': path.resolve(__dirname, '../lib/multistore.ts'),
       'src/modules/order-history/components/UserOrders': path.resolve(__dirname, '../../core/modules/order/components/UserOrdersHistory'),
-      '@vue-storefront/core/modules/social-share/components/WebShare': path.resolve(__dirname, '../../src/themes/default/components/theme/WebShare.vue')
+      '@vue-storefront/core/modules/social-share/components/WebShare': path.resolve(__dirname, '../../src/themes/default/components/theme/WebShare.vue'),
+      '@vue-storefront/core/helpers/initCacheStorage': path.resolve(__dirname, '../store/lib/storage-manager.ts')
     }
   },
   module: {

core/lib/search.ts

@@ -53,7 +53,7 @@ export const quickSearchByQuery = async ({ query = {}, start = 0, size = 50, ent
       Request.groupId = rootStore.state.user.groupId
     }
 
-    const cache = StorageManager.get('elasticCacheCollection') // switch to appcache?
+    const cache = StorageManager.get('elasticCache') // switch to appcache?
     let servedFromCache = false
     const cacheKey = sha3_224(JSON.stringify(Request))
     const benchmarkTime = new Date()

core/lib/sync/index.ts

@@ -11,7 +11,7 @@ import { StorageManager } from '@vue-storefront/core/store/lib/storage-manager'
 
 /** Syncs given task. If user is offline requiest will be sent to the server after restored connection */
 async function queue (task) {
-  const tasksCollection = StorageManager.get('syncTaskCollection')
+  const tasksCollection = StorageManager.get('syncTasks')
   task = _prepareTask(task)
   Logger.info('Sync task queued ' + task.url, 'sync', { task })()
   return new Promise((resolve, reject) => {
@@ -50,7 +50,7 @@ async function execute (task): Promise<Task> { // not offline task
 
 /** Clear sync tasks that were not transmitted yet */
 function clearNotTransmited () {
-  const syncTaskCollection = StorageManager.get('syncTaskCollection')
+  const syncTaskCollection = StorageManager.get('syncTasks')
   syncTaskCollection.iterate((task, id, iterationNumber) => {
     if (!task.transmited) {
       syncTaskCollection.removeItem(id)

core/lib/sync/task.ts

@@ -180,19 +180,15 @@ export function initializeSyncTaskStorage () {
   const storeView = currentStoreView()
   const dbNamePrefix = storeView.storeCode ? storeView.storeCode + '-' : ''
 
-  StorageManager.set('syncTaskCollection', new UniversalStorage(localForage.createInstance({
-    name: dbNamePrefix + 'shop',
-    storeName: 'syncTasks',
-    driver: localForage[config.localForage.defaultDrivers['syncTasks']]
-  })))
+  StorageManager.init('syncTasks')
 }
 
 export function registerSyncTaskProcessor () {
   const mutex = {}
   EventBus.$on('sync/PROCESS_QUEUE', async data => {
     if (onlineHelper.isOnline) {
       // event.data.config - configuration, endpoints etc
-      const syncTaskCollection = StorageManager.get('syncTaskCollection')
+      const syncTaskCollection = StorageManager.get('syncTasks')
       const currentUserToken = rootStore.getters['user/getUserToken']
       const currentCartToken = rootStore.getters['cart/getCartToken']
 

core/modules-entry.ts

@@ -1,16 +1,8 @@
 
 import { VueStorefrontModule } from '@vue-storefront/core/lib/module'
-import { Cms } from './modules/cms'
-import { Order } from './modules/order'
-import { User } from './modules/user'
 import { registerModules } from 'src/modules'
-import { Breadcrumbs } from './modules/breadcrumbs'
 
 // @deprecated from 2.0,  use registerModule instead
 export const enabledModules: VueStorefrontModule[] = [
-  Breadcrumbs,
-  Cms,
-  Order,
-  User,
   ...registerModules
 ]

core/modules/breadcrumbs/index.ts

@@ -1,10 +1,6 @@
-import { module } from './store'
-import { createModule } from '@vue-storefront/core/lib/module'
+import { breadcrumbsStore } from './store'
+import { StorefrontModule } from '@vue-storefront/module'
 
-export const KEY = 'breadcrumbs'
-export const Breadcrumbs = createModule({
-  key: KEY,
-  store: { modules: [
-    { key: KEY, module: module }
-  ] }
-})
+export const BreadcrumbsModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+  store.registerModule('breadcrumbs', breadcrumbsStore)
+}

core/modules/breadcrumbs/store/index.ts

@@ -1,5 +1,5 @@
 
-export const module = {
+export const breadcrumbsStore = {
   namespaced: true,
   state: {
     routes: [],

core/modules/cart/helpers/cartCacheHandler.ts

@@ -14,19 +14,19 @@ export function cartCacheHandlerFactory (Vue) {
       type.endsWith(types.CART_DEL_NON_CONFIRMED_ITEM) ||
       type.endsWith(types.CART_UPD_ITEM_PROPS)
     ) {
-      return StorageManager.get('cartsCollection').setItem('current-cart', state.cart.cartItems).catch((reason) => {
+      return StorageManager.get('cart').setItem('current-cart', state.cart.cartItems).catch((reason) => {
         console.error(reason) // it doesn't work on SSR
       }) // populate cache
     } else if (
       type.endsWith(types.CART_LOAD_CART_SERVER_TOKEN)
     ) {
-      return StorageManager.get('cartsCollection').setItem('current-cart-token', state.cart.cartServerToken).catch((reason) => {
+      return StorageManager.get('cart').setItem('current-cart-token', state.cart.cartServerToken).catch((reason) => {
         console.error(reason)
       })
     } else if (
       type.endsWith(types.CART_SET_ITEMS_HASH)
     ) {
-      return StorageManager.get('cartsCollection').setItem('current-cart-hash', state.cart.cartItemsHash).catch((reason) => {
+      return StorageManager.get('cart').setItem('current-cart-hash', state.cart.cartItemsHash).catch((reason) => {
         console.error(reason)
       })
     }

core/modules/cart/index.ts

@@ -3,10 +3,10 @@ import { cartStore } from './store'
 import { cartCacheHandlerFactory } from './helpers/cartCacheHandler';
 import { isServer } from '@vue-storefront/core/helpers'
 import Vue from 'vue'
-import { initCacheStorage } from '@vue-storefront/core/helpers/initCacheStorage'
+import { StorageManager } from '@vue-storefront/core/store/lib/storage-manager'
 
 export const CartModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
-  initCacheStorage('carts')
+  StorageManager.init('cart')
 
   store.registerModule('cart', cartStore)
 

core/modules/cart/store/actions.ts

@@ -241,11 +241,11 @@ const actions: ActionTree<CartState, RootState> = {
       let paymentMethod = rootGetters['payment/paymentMethods'].find(item => item.default)
       commit(types.CART_UPD_PAYMENT, paymentMethod)
     }
-    const storedItems = await StorageManager.get('cartsCollection').getItem('current-cart')
+    const storedItems = await StorageManager.get('cart').getItem('current-cart')
     commit(types.CART_LOAD_CART, storedItems)
     if (config.cart.synchronize) {
-      const token = await StorageManager.get('cartsCollection').getItem('current-cart-token')
-      const hash = await StorageManager.get('cartsCollection').getItem('current-cart-hash')
+      const token = await StorageManager.get('cart').getItem('current-cart-token')
+      const hash = await StorageManager.get('cart').getItem('current-cart-hash')
       if (hash) {
         commit(types.CART_SET_ITEMS_HASH, hash)
         Logger.info('Cart hash received from cache.', 'cache', hash)()
@@ -503,7 +503,7 @@ const actions: ActionTree<CartState, RootState> = {
   },
   /** authorize the cart after user got logged in using the current cart token */
   authorize ({ dispatch }) {
-    StorageManager.get('usersCollection').getItem('last-cart-bypass-ts', (err, lastCartBypassTs) => {
+    StorageManager.get('user').getItem('last-cart-bypass-ts', (err, lastCartBypassTs) => {
       if (err) {
         Logger.error(err, 'cart')()
       }

core/modules/cart/test/unit/helpers/cartCacheHandler.spec.ts

@@ -4,7 +4,7 @@ import Vuex from 'vuex'
 import * as types from '../../../store/mutation-types'
 
 const StorageManager = {
-  cartsCollection: {
+  cart: {
     setItem: jest.fn()
   },
   get (key) {
@@ -40,11 +40,11 @@ describe('Cart afterRegistration', () => {
       }
     };
 
-    StorageManager.get('cartsCollection').setItem.mockImplementationOnce(() => Promise.resolve('foo'));
+    StorageManager.get('cart').setItem.mockImplementationOnce(() => Promise.resolve('foo'));
 
     await cartCacheHandlerFactory(Vue)({ type: mutationType }, stateMock);
 
-    expect(StorageManager.get('cartsCollection').setItem)
+    expect(StorageManager.get('cart').setItem)
       .toBeCalledWith('current-cart', stateMock.cart.cartItems);
   });
 
@@ -57,7 +57,7 @@ describe('Cart afterRegistration', () => {
 
     const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementationOnce(() => {});
 
-    StorageManager.get('cartsCollection').setItem.mockImplementationOnce(() => Promise.reject('foo'));
+    StorageManager.get('cart').setItem.mockImplementationOnce(() => Promise.reject('foo'));
 
     await cartCacheHandlerFactory(Vue)({ type: types.CART_LOAD_CART }, stateMock);
 
@@ -71,11 +71,11 @@ describe('Cart afterRegistration', () => {
       }
     };
 
-    StorageManager.get('cartsCollection').setItem.mockImplementationOnce(() => Promise.resolve('foo'));
+    StorageManager.get('cart').setItem.mockImplementationOnce(() => Promise.resolve('foo'));
 
     await cartCacheHandlerFactory(Vue)({ type: types.CART_LOAD_CART_SERVER_TOKEN }, stateMock);
 
-    expect(StorageManager.get('cartsCollection').setItem)
+    expect(StorageManager.get('cart').setItem)
       .toBeCalledWith('current-cart-token', stateMock.cart.cartServerToken);
   });
 
@@ -88,7 +88,7 @@ describe('Cart afterRegistration', () => {
 
     const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementationOnce(() => {});
 
-    StorageManager.get('cartsCollection').setItem.mockImplementationOnce(() => Promise.reject('foo'));
+    StorageManager.get('cart').setItem.mockImplementationOnce(() => Promise.reject('foo'));
 
     await cartCacheHandlerFactory(Vue)({ type: types.CART_LOAD_CART_SERVER_TOKEN }, stateMock);
 
@@ -104,7 +104,7 @@ describe('Cart afterRegistration', () => {
 
     const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementationOnce(() => {});
 
-    StorageManager.get('cartsCollection').setItem.mockImplementationOnce(() => Promise.reject('foo'));
+    StorageManager.get('cart').setItem.mockImplementationOnce(() => Promise.reject('foo'));
 
     await cartCacheHandlerFactory(Vue)({ type: 'bar' }, stateMock);
 

core/modules/cart/test/unit/index.spec.ts

@@ -4,7 +4,7 @@ jest.mock('../../store', () => ({}));
 jest.mock('@vue-storefront/module', () => ({ createModule: jest.fn(() => ({ module: 'cart' })) }));
 jest.mock('../../helpers/cartCacheHandler', () => ({ cartCacheHandlerFactory: jest.fn() }))
 jest.mock('@vue-storefront/core/helpers', () => ({ isServer: false }))
-jest.mock('@vue-storefront/core/helpers/initCacheStorage', () => ({ initCacheStorage: jest.fn() }));
+jest.mock('@vue-storefront/core/store/lib/storage-manager', () => ({ initCacheStorage: jest.fn() }));
 
 describe('Cart Module', () => {
   it('can be initialized', () => {

core/modules/catalog-next/index.ts

@@ -1,10 +1,6 @@
 import { categoryModule } from './store/category'
-import { createModule } from '@vue-storefront/core/lib/module'
+import { StorefrontModule } from '@vue-storefront/module';
 
-export const KEY = 'catalog-next'
-export default createModule({
-  key: KEY,
-  store: { modules: [
-    { key: 'category-next', module: categoryModule }
-  ] }
-})
+export const CatalogNextModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+  store.registerModule('category-next', categoryModule)
+}

core/modules/catalog/index.ts

@@ -4,26 +4,13 @@ import { attributeModule } from './store/attribute'
 import { stockModule } from './store/stock'
 import { taxModule } from './store/tax'
 import { categoryModule } from './store/category'
-import * as localForage from 'localforage'
-import UniversalStorage from '@vue-storefront/core/store/lib/storage'
-import { currentStoreView } from '@vue-storefront/core/lib/multistore'
-import Vue from 'vue'
-import { initCacheStorage } from '@vue-storefront/core/helpers/initCacheStorage'
 import { StorageManager } from '@vue-storefront/core/store/lib/storage-manager'
 
 export const CatalogModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
-  const storeView = currentStoreView()
-  const dbNamePrefix = storeView.storeCode ? storeView.storeCode + '-' : ''
-
-  initCacheStorage('categories')
-  initCacheStorage('attributes')
-  initCacheStorage('products')
-
-  StorageManager.set('elasticCacheCollection', new UniversalStorage(localForage.createInstance({
-    name: dbNamePrefix + 'shop',
-    storeName: 'elasticCache',
-    driver: localForage[appConfig.localForage.defaultDrivers['elasticCache']]
-  }), true, appConfig.server.elasticCacheQuota))
+  StorageManager.init('categories')
+  StorageManager.init('attributes')
+  StorageManager.init('products')
+  StorageManager.init('elasticCache', true, appConfig.server.elasticCacheQuota)
 
   store.registerModule('product', productModule)
   store.registerModule('attribute', attributeModule)

core/modules/catalog/store/attribute/mutations.ts

@@ -22,7 +22,7 @@ const mutations: MutationTree<AttributeState> = {
       attrHashByCode[attr.attribute_code] = attr
       attrHashById[attr.attribute_id] = attr
 
-      const attrCollection = StorageManager.get('attributesCollection')
+      const attrCollection = StorageManager.get('attributes')
       try {
         attrCollection.setItem(entityKeyName('attribute_code', attr.attribute_code.toLowerCase()), attr).catch((reason) => {
           Logger.error(reason, 'mutations') // it doesn't work on SSR

core/modules/catalog/store/category/actions.ts

@@ -194,7 +194,7 @@ const actions: ActionTree<CategoryState, RootState> = {
         if (skipCache || isServer) {
           fetchCat({ key, value })
         } else {
-          const catCollection = StorageManager.get('categoriesCollection')
+          const catCollection = StorageManager.get('categories')
           // Check if category does not exist in the store AND we haven't recursively reached Default category (id=1)
           catCollection.getItem(entityKeyName(key, value), setcat)
         }

core/modules/catalog/store/category/mutations.ts

@@ -32,7 +32,7 @@ const mutations: MutationTree<CategoryState> = {
       }
       catSlugSetter(category)
       if (categories.includeFields == null) {
-        const catCollection = StorageManager.get('categoriesCollection')
+        const catCollection = StorageManager.get('categories')
         try {
           catCollection.setItem(entityKeyName('slug', category.slug.toLowerCase()), category).catch((reason) => {
             Logger.error(reason, 'category') // it doesn't work on SSR