Update for VSF 1.11

.docker/frontend/modules.ts

@@ -1,54 +1,53 @@
-import { extendModule } from '@vue-storefront/core/lib/module'
 import { VueStorefrontModule } from '@vue-storefront/core/lib/module'
-import { Catalog } from '@vue-storefront/core/modules/catalog'
-import { Cart } from '@vue-storefront/core/modules/cart'
-import { Checkout } from '@vue-storefront/core/modules/checkout'
-import { Compare } from '@vue-storefront/core/modules/compare'
-import { Review } from '@vue-storefront/core/modules/review'
-import { Mailer } from '@vue-storefront/core/modules/mailer'
-import { Wishlist } from '@vue-storefront/core/modules/wishlist'
-import { Notification } from '@vue-storefront/core/modules/notification'
-import { RecentlyViewed } from '@vue-storefront/core/modules/recently-viewed'
-import { Homepage } from './homepage'
-import { Claims } from './claims'
-import { PromotedOffers } from './promoted-offers'
-import { Ui } from './ui-store'
-import { AmpRenderer } from './amp-renderer'
-import { PaymentBackendMethods } from './payment-backend-methods'
-import { PaymentCashOnDelivery } from './payment-cash-on-delivery'
-import { RawOutputExample } from './raw-output-example'
-import { Magento2CMS } from './magento-2-cms'
-import { Url } from '@vue-storefront/core/modules/url'
-import { InstantCheckout } from './instant-checkout'
-import { Storyblok } from './vsf-storyblok-module'
-import { forStoryblok } from './vsf-storyblok-module/mappingFallback'
-import { extendMappingFallback } from './vsf-mapping-fallback'
-import { forCategory, forProduct, tap } from './vsf-mapping-fallback/builtin'
+import { CatalogModule } from '@vue-storefront/core/modules/catalog'
+import { CatalogNextModule } from '@vue-storefront/core/modules/catalog-next'
+import { CartModule } from '@vue-storefront/core/modules/cart'
+import { CheckoutModule } from '@vue-storefront/core/modules/checkout'
+import { CompareModule } from '@vue-storefront/core/modules/compare'
+import { WishlistModule } from '@vue-storefront/core/modules/wishlist'
+import { NotificationModule } from '@vue-storefront/core/modules/notification'
+import { UrlModule } from '@vue-storefront/core/modules/url'
+import { BreadcrumbsModule } from '@vue-storefront/core/modules/breadcrumbs'
+import { UserModule } from '@vue-storefront/core/modules/user'
+import { CmsModule } from '@vue-storefront/core/modules/cms'
+import { GoogleTagManagerModule } from './google-tag-manager';
+import { AmpRendererModule } from './amp-renderer';
+import { PaymentBackendMethodsModule } from './payment-backend-methods'
+import { PaymentCashOnDeliveryModule } from './payment-cash-on-delivery'
+import { NewsletterModule } from '@vue-storefront/core/modules/newsletter'
+import { StoryblokModule } from './vsf-storyblok-module'
 
-extendMappingFallback(
-  forProduct, forCategory, forStoryblok, tap
+import { registerModule } from '@vue-storefront/core/lib/modules'
+
+import { extendMappingFallback } from './vsf-mapping-fallback' 
+import { forProduct, forCategory, tap } from './vsf-mapping-fallback/builtin'
+import { forStoryblok } from './vsf-storyblok-module/mappingFallback' 
+
+const extendUrlModule = extendMappingFallback(
+  tap, forProduct, forCategory, forStoryblok
 )
 
-export const registerModules: VueStorefrontModule[] = [
-  Checkout,
-  Catalog,
-  Cart,
-  Compare,
-  Review,
-  Mailer,
-  Wishlist,
-  Notification,
-  Ui,
-  RecentlyViewed,
-  Homepage,
-  Claims,
-  PromotedOffers,
-  Magento2CMS,
-  PaymentBackendMethods,
-  PaymentCashOnDelivery,
-  RawOutputExample,
-  AmpRenderer,
-  InstantCheckout,
-  Url,
-  Storyblok
-]
+// TODO:distributed across proper pages BEFORE 1.11
+export function registerClientModules () {
+  registerModule(UrlModule)
+  registerModule(extendUrlModule)
+  registerModule(CatalogModule)
+  registerModule(CheckoutModule) // To Checkout
+  registerModule(CartModule)
+  registerModule(PaymentBackendMethodsModule)
+  registerModule(PaymentCashOnDeliveryModule)
+  registerModule(WishlistModule) // Trigger on wishlist icon click
+  registerModule(NotificationModule)
+  registerModule(UserModule) // Trigger on user icon click
+  registerModule(CatalogNextModule)
+  registerModule(CompareModule)
+  registerModule(BreadcrumbsModule)
+  registerModule(GoogleTagManagerModule)
+  registerModule(AmpRendererModule)
+  registerModule(CmsModule)
+  registerModule(NewsletterModule)
+  registerModule(StoryblokModule)
+}
+
+// Deprecated API, will be removed in 2.0
+export const registerModules: VueStorefrontModule[] = []

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 0,
     'no-console': 1,
+    'prefer-const': 2,
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     'no-restricted-imports': [2, { 'paths': ['lodash-es'] }],

Makefile

@@ -20,5 +20,8 @@ start-ui:
 
 start: build-api start-api build-ui start-ui
 
-submodules:
-	git submodule update --init
+start-db:
+	docker-compose up -d elasticsearch redis
+
+e2e:
+	yarn e2e

README.md

@@ -1,6 +1,6 @@
-# vsf-storyblok-sync [![Build Status](https://travis-ci.org/kodbruket/vsf-storyblok-sync.svg?branch=master)](https://travis-ci.org/kodbruket/vsf-storyblok-sync)
+# vsf-storyblok-sync ![VSF 1.11.1][vsf badge] ![Build Status][build badge]
 
-![Demo gif](demo.gif)
+![Demo gif](.github/demo.gif)
 
 > Example usage in Storyblok with demo components
 
@@ -12,19 +12,17 @@ Copy `packages/vsf-storyblok-module` to `vue-storefront/src/modules`.
 
 Add the following to `vue-storefront/src/modules/index.ts`
 
-```
-import { extendModule } from '@vue-storefront/core/lib/module'
-...
-import { Storyblok, urlExtend } from './vsf-storyblok-module';
-
-extendModule(urlExtend)
+```js
+import { StoryblokModule } from './vsf-storyblok-module';
 
-export const registerModules: VueStorefrontModule[] = [
+export function registerClientModules () {
   ...
-  Storyblok
-]
+  registerModule(StoryblokModule)
+}
 ```
 
+> **Note:** To get routing working you can use this module: https://github.com/kodbruket/vsf-mapping-fallback/
+
 ### Config
 
 ```
@@ -44,11 +42,11 @@ Notable paths:
 
 ### Built in components
 
-#### `<sb-router-link />`
+#### `<sb-link />`
 
 To be used with the `Weblink/Storylink` field type (https://www.storyblok.com/docs/terminology/field-type)
 
-`<sb-router-link :link="item.link">{{ item.title }}</sb-router-link>`
+`<sb-link :link="item.link">{{ item.title }}</sb-link>`
 
 #### `<sb-img />`
 
@@ -144,17 +142,18 @@ Follow the Storyblok documentation to enable it: https://www.storyblok.com/docs/
 
 ## Development
 
-```
-git clone --recurse-submodules http://github.com/kodbruket/vsf-storyblok-sync.git
+```sh
+git clone http://github.com/kodbruket/vsf-storyblok-sync.git
+cd vsf-storyblok-sync
+make submodules
 docker-compose up
 ```
 
 Visit http://localhost:3000/ci to see it in action
 
-### Seed products
+### Run full e2e suite
 
-```
-docker-compose exec storefront-api yarn mage2vs import
-docker-compose exec storefront-api yarn restore
-docker-compose exec storefront-api yarn migrate
-```
+`make start-db submodules bundle start e2e`
+
+[build badge]: https://github.com/kodbruket/vsf-storyblok-sync/workflows/Tests/badge.svg
+[vsf badge]: https://img.shields.io/badge/VSF-1.11.1-brightgreen

docker-compose.yml

@@ -44,7 +44,6 @@ services:
       - './.docker/vue-storefront-api/var:/var/www/var:delegated'
       # Development
       - './.docker/api/config.json:/var/www/config/local.json'
-      - './.docker/api/db.js:/var/www/src/db.js'
       - './.docker/api/tsconfig.json:/var/www/tsconfig.json'
       # Module
       - './packages/vsf-storyblok-extension:/var/www/src/api/extensions/vsf-storyblok-extension:delegated'
@@ -75,12 +74,12 @@ services:
       - './.docker/vue-storefront/var:/var/www/var:delegated'
       # Development
       - './.docker/frontend/config.json:/var/www/config/local.json'
-      - './.docker/frontend/modules.ts:/var/www/src/modules/index.ts'
-      - './.docker/frontend/tsconfig.json:/var/www/tsconfig.json'
-      - './.docker/vsf-mapping-fallback:/var/www/src/modules/vsf-mapping-fallback'
+      - './.docker/frontend/modules.ts:/var/www/src/modules/client.ts'
+      - './tsconfig.json:/var/www/tsconfig.json'
       - './theme/components/storyblok:/var/www/src/themes/default/components/storyblok'
       - './theme/head.js:/var/www/src/themes/default/head.js'
       - './theme/index.js:/var/www/src/themes/default/index.js'
+      - './.docker/vsf-mapping-fallback:/var/www/src/modules/vsf-mapping-fallback'
       # Module
       - './packages/vsf-storyblok-module:/var/www/src/modules/vsf-storyblok-module:delegated'
     healthcheck: