From b9f206163dff39598d7bdfff1fd76109c31e141f Mon Sep 17 00:00:00 2001 From: tkostuch Date: Fri, 27 Sep 2019 10:38:37 +0200 Subject: [PATCH 1/2] pass to registerModule all parameters as one object --- core/lib/modules.ts | 28 +++++++++++++------ core/modules/breadcrumbs/index.ts | 2 +- core/modules/cart/index.ts | 2 +- core/modules/catalog-next/index.ts | 2 +- core/modules/catalog/index.ts | 2 +- core/modules/checkout/index.ts | 2 +- core/modules/cms/index.ts | 2 +- core/modules/compare/index.ts | 2 +- core/modules/mailer/index.ts | 2 +- core/modules/newsletter/index.ts | 2 +- core/modules/notification/index.ts | 2 +- core/modules/order/index.ts | 2 +- core/modules/recently-viewed/index.ts | 2 +- core/modules/review/index.ts | 2 +- core/modules/url/index.ts | 2 +- core/modules/user/index.ts | 2 +- core/modules/wishlist/index.ts | 2 +- docs/guide/cookbook/module.md | 22 +++++++-------- packages/cli/boilerplates/module/src/index.ts | 2 +- src/modules/amp-renderer/index.ts | 2 +- src/modules/google-analytics/index.ts | 2 +- src/modules/google-tag-manager/index.ts | 2 +- src/modules/hotjar/index.ts | 2 +- src/modules/instant-checkout/index.ts | 3 +- src/modules/payment-backend-methods/index.ts | 2 +- src/modules/payment-cash-on-delivery/index.ts | 2 +- 26 files changed, 54 insertions(+), 45 deletions(-) diff --git a/core/lib/modules.ts b/core/lib/modules.ts index 6fdb8a865d..e5b5e8001a 100644 --- a/core/lib/modules.ts +++ b/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, - router: VueRouter, - moduleConfig: any, - appConfig: any): void -} +export type StorefrontModule = ( + options: { + app: Vue, + store: Store, + router: VueRouter, + moduleConfig: any, + appConfig: any + } +) => void let refs: any = {} -let registeredModules: any = [] +let registeredModules: StorefrontModule[] = [] function injectReferences (app: any, store: Store, router: VueRouter, config: any): void { refs.app = app @@ -21,7 +25,13 @@ function injectReferences (app: any, store: Store, 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) } } diff --git a/core/modules/breadcrumbs/index.ts b/core/modules/breadcrumbs/index.ts index 0301e9cace..5243571e58 100644 --- a/core/modules/breadcrumbs/index.ts +++ b/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) } diff --git a/core/modules/cart/index.ts b/core/modules/cart/index.ts index 655f35a11f..788cd316b6 100644 --- a/core/modules/cart/index.ts +++ b/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) diff --git a/core/modules/catalog-next/index.ts b/core/modules/catalog-next/index.ts index 2b8e5d4e61..0e0c4b4a5a 100644 --- a/core/modules/catalog-next/index.ts +++ b/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) } diff --git a/core/modules/catalog/index.ts b/core/modules/catalog/index.ts index 1a4731041c..9d57578722 100644 --- a/core/modules/catalog/index.ts +++ b/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') diff --git a/core/modules/checkout/index.ts b/core/modules/checkout/index.ts index 9d433c2a5b..c6ca55d0ac 100644 --- a/core/modules/checkout/index.ts +++ b/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) diff --git a/core/modules/cms/index.ts b/core/modules/cms/index.ts index b584cb6931..0e9853970f 100644 --- a/core/modules/cms/index.ts +++ b/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) diff --git a/core/modules/compare/index.ts b/core/modules/compare/index.ts index 1b36813a94..6a4ae61657 100644 --- a/core/modules/compare/index.ts +++ b/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) diff --git a/core/modules/mailer/index.ts b/core/modules/mailer/index.ts index 8715e84279..b052161b2e 100644 --- a/core/modules/mailer/index.ts +++ b/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) } diff --git a/core/modules/newsletter/index.ts b/core/modules/newsletter/index.ts index d1a7aa5032..991b482b6f 100644 --- a/core/modules/newsletter/index.ts +++ b/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) } diff --git a/core/modules/notification/index.ts b/core/modules/notification/index.ts index 569fb114d1..a619b90ab4 100644 --- a/core/modules/notification/index.ts +++ b/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) } diff --git a/core/modules/order/index.ts b/core/modules/order/index.ts index e4353ea623..fcabee6311 100644 --- a/core/modules/order/index.ts +++ b/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) { diff --git a/core/modules/recently-viewed/index.ts b/core/modules/recently-viewed/index.ts index cd13e7cc28..7538ef3c76 100644 --- a/core/modules/recently-viewed/index.ts +++ b/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) diff --git a/core/modules/review/index.ts b/core/modules/review/index.ts index d90d2fb0f2..cf72bfa12b 100644 --- a/core/modules/review/index.ts +++ b/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) } diff --git a/core/modules/url/index.ts b/core/modules/url/index.ts index 11b3a0eb36..8f4f45386f 100644 --- a/core/modules/url/index.ts +++ b/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) } diff --git a/core/modules/user/index.ts b/core/modules/user/index.ts index fe7e4e56b5..d2d1d6c0dc 100644 --- a/core/modules/user/index.ts +++ b/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) { diff --git a/core/modules/wishlist/index.ts b/core/modules/wishlist/index.ts index ca85283566..1183dd8d42 100644 --- a/core/modules/wishlist/index.ts +++ b/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) diff --git a/docs/guide/cookbook/module.md b/docs/guide/cookbook/module.md index de5fdad3af..3ec015afef 100644 --- a/docs/guide/cookbook/module.md +++ b/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 ... diff --git a/packages/cli/boilerplates/module/src/index.ts b/packages/cli/boilerplates/module/src/index.ts index 13a7ac3390..9dc90cd1d7 100644 --- a/packages/cli/boilerplates/module/src/index.ts +++ b/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) diff --git a/src/modules/amp-renderer/index.ts b/src/modules/amp-renderer/index.ts index 07b145308f..92d659b4ae 100644 --- a/src/modules/amp-renderer/index.ts +++ b/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) } diff --git a/src/modules/google-analytics/index.ts b/src/modules/google-analytics/index.ts index 1504d26871..ce7ccd9a82 100644 --- a/src/modules/google-analytics/index.ts +++ b/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, { diff --git a/src/modules/google-tag-manager/index.ts b/src/modules/google-tag-manager/index.ts index fe6d82f572..b50ab6cf3d 100644 --- a/src/modules/google-tag-manager/index.ts +++ b/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, { diff --git a/src/modules/hotjar/index.ts b/src/modules/hotjar/index.ts index d412b6113d..f2aadceab7 100644 --- a/src/modules/hotjar/index.ts +++ b/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) { diff --git a/src/modules/instant-checkout/index.ts b/src/modules/instant-checkout/index.ts index f3af2a906a..d19416d5ac 100644 --- a/src/modules/instant-checkout/index.ts +++ b/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 () {} diff --git a/src/modules/payment-backend-methods/index.ts b/src/modules/payment-backend-methods/index.ts index 2b890b7bcd..30b99085d1 100644 --- a/src/modules/payment-backend-methods/index.ts +++ b/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 diff --git a/src/modules/payment-cash-on-delivery/index.ts b/src/modules/payment-cash-on-delivery/index.ts index 7e166d4afa..c7507bb5e4 100644 --- a/src/modules/payment-cash-on-delivery/index.ts +++ b/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 = () => { From 8034bbad1ea066dac66c872665aa0432c5816e08 Mon Sep 17 00:00:00 2001 From: tkostuch Date: Fri, 27 Sep 2019 10:47:03 +0200 Subject: [PATCH 2/2] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d1980d684..53f3be6c6d 100644 --- a/CHANGELOG.md +++ b/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