Modules 2.0

.eslintignore

@@ -1,2 +1,3 @@
 core/build/*.js
 node_modules
+packages/module/*.js

core/app.ts

@@ -31,11 +31,15 @@ import store from '@vue-storefront/core/store'
 
 import { enabledModules } from './modules-entry'
 
-// Will be deprecated in 1.8
+// 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'
+import { coreHooksExecutors } from '@vue-storefront/core/hooks'
+import { registerNewModules } from 'src/modules';
+
 function createRouter (): VueRouter {
   return new VueRouter({
     mode: 'history',
@@ -75,7 +79,7 @@ const createApp = async (ssrContext, config, storeCode = null): Promise<{app: Vu
   store.state.storeView = storeView
   // store.state.shipping.methods = shippingMethods
 
-  // to depreciate in near future
+  // @deprecated from 2.0
   once('__VUE_EXTEND__', () => {
     Vue.use(Vuelidate)
     Vue.use(VueLazyload, {attempt: 2, preLoad: 1.5})
@@ -112,10 +116,14 @@ const createApp = async (ssrContext, config, storeCode = null): Promise<{app: Vu
     ssrContext
   }
 
+  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()
+  // @deprecated from 2.0
   EventBus.$emit('application-after-init', app)
 
   return { app, router, store }

core/hooks.ts

@@ -0,0 +1,41 @@
+import { createListenerHook, createMutatorHook } from '@vue-storefront/module/hooks'
+
+const { hook: beforeStoreViewChangeHook, executor: beforeStoreViewChangeExecutor }: {
+  hook: (storeViewMutator: (storeView: any) => any) => void,
+  executor: any
+} = createMutatorHook()
+
+const { hook: afterStoreViewChangeHook, executor: afterStoreViewChangeExecutor }: {
+  hook: (storeViewListener: (storeView?: any) => void) => void,
+  executor: any
+} = createListenerHook()
+
+const { hook: afterAppInitHook, executor: afterAppInitExecutor }: {
+  hook: (appInitListener: () => void) => void,
+  executor: any
+} = createListenerHook()
+
+/** Only for internal usage in core */
+const coreHooksExecutors = {
+  afterAppInit: afterAppInitExecutor,
+  beforeStoreViewChange: beforeStoreViewChangeExecutor,
+  afterStoreViewChange: afterStoreViewChangeExecutor
+}
+
+const coreHooks = {
+  /** Hook is fired right after whole application is initialized. Modules are registered and theme setted up */
+  afterAppInit: afterAppInitHook,
+  /** Hook is fired directly before changing current storeView (multistrore)
+   * @param storeView Inside this function you have access to order object that you can access and modify. It should return order object.
+  */
+  beforeStoreViewChange: beforeStoreViewChangeHook,
+  /** Hook is fired right after storeView (multistore) is changed
+   * @param storeView current storeView
+  */
+  afterStoreViewChange: afterStoreViewChangeHook
+}
+
+export {
+  coreHooks,
+  coreHooksExecutors
+}

core/lib/module/index.ts

@@ -1,3 +1,4 @@
+// @deprecated from 2.0
 import { Module } from 'vuex'
 import { RouteConfig, NavigationGuard } from 'vue-router'
 import Vue from 'vue'
@@ -77,6 +78,7 @@ class VueStorefrontModule {
 
   public register (): VueStorefrontModuleConfig | void {
     if (!this._isRegistered) {
+      Logger.warn('The module you are registering is using outdated API that will soon be depreciated. Please check https://docs.vuestorefront.io to learn more.', 'module', this._c.key)()
       let areStoresUnique = true
       const VSF: VSF = {
         Vue,

core/lib/multistore.ts

@@ -8,6 +8,7 @@ import merge from 'lodash-es/merge'
 import { RouterManager } from '@vue-storefront/core/lib/router-manager'
 import VueRouter, { RouteConfig, RawLocation } from 'vue-router'
 import config from 'config'
+import { coreHooksExecutors } from '@vue-storefront/core/hooks'
 import { StorageManager } from '@vue-storefront/core/store/lib/storage-manager'
 
 export interface LocalizedRoute {
@@ -97,13 +98,14 @@ export function prepareStoreView (storeCode: string): StoreView {
   loadLanguageAsync(storeView.i18n.defaultLocale)
 
   if (storeViewHasChanged) {
+    storeView = coreHooksExecutors.beforeStoreViewChange(storeView)
     rootStore.state.storeView = storeView
   }
   if (storeViewHasChanged || StorageManager.currentStoreCode !== storeCode) {
     initializeSyncTaskStorage()
     StorageManager.currentStoreCode = storeView.storeCode
   }
-
+  coreHooksExecutors.afterStoreViewChange(storeView)
   return storeView
 }
 

core/mixins/composite.js

@@ -1,7 +1,7 @@
 import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus'
 import { Logger } from '@vue-storefront/core/lib/logger'
 
-// to be deprecated
+// @deprecated from 2.0
 export default {
   beforeCreated () {
     const eventName = this.$options.name.toLowerCase() + '-before-created'

core/modules-entry.ts

@@ -5,6 +5,8 @@ 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,

core/modules/cart/index.ts

@@ -1,12 +1,15 @@
-import { module } from './store'
-import { createModule } from '@vue-storefront/core/lib/module'
-import { beforeRegistration } from './hooks/beforeRegistration'
-import { afterRegistration } from './hooks/afterRegistration'
+import { StorefrontModule } from '@vue-storefront/module'
+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'
 
-export const KEY = 'cart'
-export const Cart = createModule({
-  key: KEY,
-  store: { modules: [{ key: KEY, module }] },
-  beforeRegistration,
-  afterRegistration
-})
+export const CartModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+  initCacheStorage('carts')
+
+  store.registerModule('cart', cartStore)
+
+  if (!isServer) store.dispatch('cart/load')
+  store.subscribe(cartCacheHandlerFactory(Vue))
+}

core/modules/cart/store/index.ts

@@ -4,7 +4,7 @@ import getters from './getters'
 import mutations from './mutations'
 import CartState from '../types/CartState'
 
-export const module: Module<CartState, any> = {
+export const cartStore: Module<CartState, any> = {
   namespaced: true,
   state: {
     isMicrocartOpen: false,