pass to registerModule all parameters as one object

CHANGELOG.md

@@ -172,6 +172,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Pass `RouteManager` as proxy for router.addRoutes - @gibkigonzo (#3479)
 - Added generic types to hooks - @gibkigonzo
 - Change sku to string when checking products equality - @gibkigonzo (#3606)
+- Pass to `registerModule` all parameters as one object - @gibkigonzo (#3634)
 
 ## [1.10.3] - 2019.09.18
 

core/lib/modules.ts

@@ -1,16 +1,20 @@
 import { Store } from 'vuex'
 import VueRouter from 'vue-router'
+import Vue from 'vue'
+import RootState from '@vue-storefront/core/types/RootState'
 
-export interface StorefrontModule { (
-  app: any,
-  store: Store<any>,
-  router: VueRouter,
-  moduleConfig: any,
-  appConfig: any): void
-}
+export type StorefrontModule = (
+  options: {
+    app: Vue,
+    store: Store<RootState>,
+    router: VueRouter,
+    moduleConfig: any,
+    appConfig: any
+  }
+) => void
 
 let refs: any = {}
-let registeredModules: any = []
+let registeredModules: StorefrontModule[] = []
 
 function injectReferences (app: any, store: Store<any>, router: VueRouter, config: any): void {
   refs.app = app
@@ -21,7 +25,13 @@ function injectReferences (app: any, store: Store<any>, router: VueRouter, confi
 
 function registerModule (module: StorefrontModule, config?: any) {
   if (!registeredModules.includes(module)) {
-    module(refs.app, refs.store, refs.router, config, refs.config)
+    module({
+      app: refs.app,
+      store: refs.store,
+      router: refs.router,
+      appConfig: refs.config,
+      moduleConfig: config
+    })
     registeredModules.push(module)
   }
 }

core/modules/breadcrumbs/index.ts

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

core/modules/cart/index.ts

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

core/modules/catalog-next/index.ts

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

core/modules/catalog/index.ts

@@ -11,7 +11,7 @@ import { filterChangedProduct, productAfterCustomoptions, productAfterBundleopti
 import { isServer } from '@vue-storefront/core/helpers'
 import uniq from 'lodash-es/uniq'
 
-export const CatalogModule: StorefrontModule = async function (app, store, router, moduleConfig, appConfig) {
+export const CatalogModule: StorefrontModule = async function ({store, router, appConfig}) {
   StorageManager.init('categories')
   StorageManager.init('attributes')
   StorageManager.init('products')

core/modules/checkout/index.ts

@@ -5,7 +5,7 @@ import { shippingModule } from './store/shipping'
 import * as types from './store/checkout/mutation-types'
 import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
 
-export const CheckoutModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const CheckoutModule: StorefrontModule = function ({store}) {
   StorageManager.init('checkout')
 
   store.registerModule('shipping', shippingModule)

core/modules/cms/index.ts

@@ -5,7 +5,7 @@ import cmsPersistPlugin from './store/cmsPersistPlugin'
 import { StorefrontModule } from '@vue-storefront/core/lib/modules';
 import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
 
-export const CmsModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const CmsModule: StorefrontModule = function ({store}) {
   StorageManager.init('cms')
   store.registerModule('cmsPage', cmsPageModule)
   store.registerModule('cmsBlock', cmsBlockModule)

core/modules/compare/index.ts

@@ -4,7 +4,7 @@ import cachePersistPlugin from './store/plugin'
 import { StorefrontModule } from '@vue-storefront/core/lib/modules';
 import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
 
-export const CompareModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const CompareModule: StorefrontModule = function ({store}) {
   StorageManager.init('compare')
   store.registerModule('compare', compareStore)
   store.subscribe(cachePersistPlugin)

core/modules/mailer/index.ts

@@ -1,6 +1,6 @@
 import { StorefrontModule } from '@vue-storefront/core/lib/modules'
 import { mailerStore } from './store'
 
-export const MailerModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const MailerModule: StorefrontModule = function ({store}) {
   store.registerModule('mailer', mailerStore)
 }

core/modules/newsletter/index.ts

@@ -2,7 +2,7 @@ import { newsletterStore } from './store'
 import { StorefrontModule } from '@vue-storefront/core/lib/modules';
 import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
 
-export const NewsletterModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const NewsletterModule: StorefrontModule = function ({store}) {
   StorageManager.init('newsletter')
   store.registerModule('newsletter', newsletterStore)
 }

core/modules/notification/index.ts

@@ -1,6 +1,6 @@
 import { notificationStore } from './store'
 import { StorefrontModule } from '@vue-storefront/core/lib/modules';
 
-export const NotificationModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const NotificationModule: StorefrontModule = function ({store}) {
   store.registerModule('notification', notificationStore)
 }

core/modules/order/index.ts

@@ -10,7 +10,7 @@ import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
 import { isServer } from '@vue-storefront/core/helpers'
 import { StorefrontModule } from '@vue-storefront/core/lib/modules';
 
-export const OrderModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const OrderModule: StorefrontModule = function ({store}) {
   StorageManager.init('orders')
 
   if (!isServer) {

core/modules/recently-viewed/index.ts

@@ -6,7 +6,7 @@ import { isServer } from '@vue-storefront/core/helpers'
 
 export const cacheStorage = StorageManager.init('recently-viewed')
 
-export const RecentlyViewedModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const RecentlyViewedModule: StorefrontModule = function ({store}) {
   store.registerModule('recently-viewed', recentlyViewedStore)
   store.subscribe(plugin)
 

core/modules/review/index.ts

@@ -1,6 +1,6 @@
 import { StorefrontModule } from '@vue-storefront/core/lib/modules'
 import { reviewStore } from './store'
 
-export const ReviewModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ReviewModule: StorefrontModule = function ({store}) {
   store.registerModule('review', reviewStore)
 }

core/modules/url/index.ts

@@ -5,7 +5,7 @@ import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
 
 export const cacheStorage = StorageManager.init('url')
 
-export const UrlModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const UrlModule: StorefrontModule = function ({store, router}) {
   store.registerModule('url', urlStore)
   router.beforeEach(beforeEachGuard)
 }

core/modules/user/index.ts

@@ -5,7 +5,7 @@ import { isServer } from '@vue-storefront/core/helpers'
 import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus'
 import * as types from './store/mutation-types'
 
-export const UserModule: StorefrontModule = async function (app, store, router, moduleConfig, appConfig) {
+export const UserModule: StorefrontModule = async function ({store}) {
   StorageManager.init('user')
   store.registerModule('user', userStore)
   if (!isServer) {

core/modules/wishlist/index.ts

@@ -3,7 +3,7 @@ import { wishlistStore } from './store'
 import whishListPersistPlugin from './store/whishListPersistPlugin'
 import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
 
-export const WishlistModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const WishlistModule: StorefrontModule = function ({store}) {
   StorageManager.init('wishlist')
   store.registerModule('wishlist', wishlistStore)
   store.subscribe(whishListPersistPlugin)

docs/guide/cookbook/module.md

@@ -46,7 +46,7 @@ touch index.ts
 ```bash
 import { StorefrontModule } from '@vue-storefront/core/lib/modules';
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
 
 }
 ```
@@ -70,7 +70,7 @@ Judging by this signature, you can access `store`, `router`, `config`s from your
 ```bash
 import { StorefrontModule } from '@vue-storefront/core/lib/modules';
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
 	console.log('Hello World and VSF!'); # Any punch line allowed!
 }
 ```
@@ -227,7 +227,7 @@ const exampleModuleStore = {
   }
 }
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
 // abridged ...
 ```
 `namespaced` with `true` value means this `store` is encapsulated inside a module and not registered to global store.
@@ -245,7 +245,7 @@ const exampleModuleStore = {
   }
 }
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
   store.registerModule('example-module', exampleModuleStore);
 }
 
@@ -274,7 +274,7 @@ const exampleModuleStore = {
   plugins: ['examplePlugin']
 }
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
   store.registerModule('example-module', exampleModuleStore);
 }
 ```
@@ -322,13 +322,13 @@ const newProductModule = {
   }
 }
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
 // abridged ...
 ```
 
 4. Run `extendStore` helper method to override or add to existing store `product` as follows : 
 ```ts{4}
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
   store.registerModule('example-module', exampleModuleStore);
 
   extendStore('product', newProductModule);
@@ -399,7 +399,7 @@ const examplePlugin = store => {
 
 const exampleRoutes = [{ name: 'liked', path: '/liked', component: Liked, alias: '/liked.html' }]; // compose the router we will use
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
   store.registerModule('example-module', exampleModuleStore);
 
   extendStore('product', newProductModule);
@@ -443,7 +443,7 @@ const examplePlugin = store => {
 ```ts{11-13}
 // ...abridged
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
   store.registerModule('example-module', exampleModuleStore);
 
   extendStore('product', newProductModule);
@@ -492,7 +492,7 @@ vi index.ts # of course you can open it with other editors!
 ```ts{8-12,17}
 // ...abridged
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
   store.registerModule('example-module', exampleModuleStore);
   // ... abridged ...
 
@@ -556,7 +556,7 @@ vi index.ts # of course you can open it with other editors!
 ```ts{4}
 // ... abridged 
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({app, store, router, moduleConfig, appConfig}) {
   console.log(appConfig.products.defaultFilters); //  "products": {"defaultFilters": ["color", "size", "price", "erin_recommends"]}
 
 // abridged ...

packages/cli/boilerplates/module/src/index.ts

@@ -3,7 +3,7 @@ import { coreHooks } from '@vue-storefront/core/hooks'
 import { extendStore } from '@vue-storefront/core/helpers'
 import { ExampleStore, ExtendProductStore } from './store'
 
-export const ExampleModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const ExampleModule: StorefrontModule = function ({store}) {
   // You can access config passed to registerModule via moduleConfig variable
   // This is how you register new Vuex modules
   store.registerModule('example', ExampleStore)

src/modules/amp-renderer/index.ts

@@ -10,7 +10,7 @@ const ampRendererStore = {
   }
 }
 
-export const AmpRendererModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const AmpRendererModule: StorefrontModule = function ({store, router}) {
   store.registerModule('amp-renderer', ampRendererStore)
   setupMultistoreRoutes(config, router, moduleRoutes, 10)
 }

src/modules/google-analytics/index.ts

@@ -11,7 +11,7 @@ const googleAnalyticsStore = {
   }
 }
 
-export const GoogleAnalyticsModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const GoogleAnalyticsModule: StorefrontModule = function ({store, router, appConfig}) {
   if (appConfig.analytics.id && !isServer) {
     once('__VUE_EXTEND_ANALYTICS__', () => {
       Vue.use(VueAnalytics, {

src/modules/google-tag-manager/index.ts

@@ -10,7 +10,7 @@ import { afterRegistration, isEnabled } from './hooks/afterRegistration'
 
 export const KEY = 'google-tag-manager'
 
-export const GoogleTagManagerModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const GoogleTagManagerModule: StorefrontModule = function ({store, router, appConfig}) {
   if (isEnabled(appConfig.googleTagManager.id)) {
     once('__VUE_EXTEND_GTM__', () => {
       Vue.use(VueGtm, {

src/modules/hotjar/index.ts

@@ -22,7 +22,7 @@ const hotjarSnippet = (hjid) => (function (h, o, t, j, a, r) {
   a.appendChild(r);
 })(window as any, document, '//static.hotjar.com/c/hotjar-', '.js?sv=');
 
-export const HotjarModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const HotjarModule: StorefrontModule = function ({store, appConfig}) {
   store.registerModule('hotjar', hotjarStore)
 
   if (!isServer && appConfig.hotjar && appConfig.hotjar.id) {

src/modules/instant-checkout/index.ts

@@ -1,4 +1,3 @@
 import { StorefrontModule } from '@vue-storefront/core/lib/modules';
 
-export const InstantCheckoutModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
-}
+export const InstantCheckoutModule: StorefrontModule = function () {}

src/modules/payment-backend-methods/index.ts

@@ -15,7 +15,7 @@ const PaymentBackendMethodsStore = {
   }
 }
 
-export const PaymentBackendMethodsModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const PaymentBackendMethodsModule: StorefrontModule = function ({store}) {
   store.registerModule('payment-backend-methods', PaymentBackendMethodsStore)
 
   let correctPaymentMethod = false

src/modules/payment-cash-on-delivery/index.ts

@@ -4,7 +4,7 @@ import Vue from 'vue';
 import InfoComponent from './components/Info.vue'
 import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus'
 
-export const PaymentCashOnDeliveryModule: StorefrontModule = function (app, store, router, moduleConfig, appConfig) {
+export const PaymentCashOnDeliveryModule: StorefrontModule = function ({store}) {
   // Place the order. Payload is empty as we don't have any specific info to add for this payment method '{}'
   let correctPaymentMethod = false
   const placeOrder = () => {