Merge pull request #2875 from zimme/zimme/process-vsf-packages-with-w…

…ebpack

Process (scoped) packages prefixed with vsf- through webpack

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added `syncTasks` cleanup, `elasticCacheQuota` lowered to 3096KB - @pkarw (#2729)
 - Added back-button on orde detail page [#2819]
 - Added Elastic Search Suggestions in the Search Response - @jpetar (#2853)
+- npm packages with the prefix `vsf-` will be processed by webpack during build, this also works for scoped packages i.e. `@example/vsf-` - @zimme (#2271, #2395)
 - Added back to top functionality - @vishal-7037 (#2866)
 
 ### Fixed
@@ -105,7 +106,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Offline orders with out of stock products don't stack anymore and get canceled after going back to online - @lukeromanowicz (#2740)
 - Build ServiceWorker on Docker - @patzick (#2793)
 - Product image load after comming back to online - @patzick (#2573)
-- Insufficent validation for city field in checkout address - @lromanowicz (#2653) 
+- Insufficent validation for city field in checkout address - @lromanowicz (#2653)
 - Incorrect hover activity on the 'filter by categories' in the search view on mobile - @idodidodi (#2783)
 - Unit tests written in JavaScript now support async/await functions and dynamic import - @michaelKurowski, @lukeromanowicz (#2851)
 

core/build/webpack.base.config.ts

@@ -125,7 +125,7 @@ export default {
         enforce: 'pre',
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
-        exclude: [/node_modules/, /test/]
+        exclude: [/node_modules(?!\/(\@.*\/)?vsf-)/, /test/]
       },
       {
         test: /\.vue$/,
@@ -139,17 +139,19 @@ export default {
         test: /\.ts$/,
         loader: 'ts-loader',
         options: {
-          appendTsSuffixTo: [/\.vue$/]
+          appendTsSuffixTo: [/\.vue$/],
+          allowTsInNodeModules: true
         },
-        exclude: /node_modules/
+        exclude: /node_modules(?!\/(\@.*\/)?vsf-)/
       },
       {
         test: /\.js$/,
         loader: 'babel-loader',
         include: [
           path.resolve(__dirname, '../../node_modules/@vue-storefront'),
           path.resolve(__dirname, '../../src'),
-          path.resolve(__dirname, '../../core')
+          path.resolve(__dirname, '../../core'),
+          /node_modules\/(\@.*\/)?vsf-.*/
         ]
       },
       {
@@ -196,7 +198,7 @@ export default {
       },
       {
         test: /\.(graphqls|gql)$/,
-        exclude: /node_modules/,
+        exclude: /node_modules(?!\/(\@.*\/)?vsf-)/,
         loader: ['graphql-tag/loader']
       }
     ]

docs/guide/modules/introduction.md

@@ -16,10 +16,10 @@
 - [Adding new features as VS modules](#adding-new-features-as-vs-modules)
 - [Extending and overriding Vue Storefront modules](#extending-and-overriding-vue-storefront-modules)
 - [Creating third party modules](#Creating-3rd-party-modules)
-  
+
 # What are VS modules?
 
-You can think about each module as a one, independent feature available in Vue Storefront with all it's logic and dependencys inside. This 'one feature' however is a common denominator that links all the features inside. For example common denominator for adding product to the cart, receiving list of items that are in a cart or applying a cart coupon is obviously a `cart` and `cart` is not a feature of anything bigger than itself (it's common denominator is a shop) so it should be a module. Wishlist, Reviews or Newsletter are also a good examples of modules as we intuitively think about them as a standalone features. 
+You can think about each module as a one, independent feature available in Vue Storefront with all it's logic and dependencys inside. This 'one feature' however is a common denominator that links all the features inside. For example common denominator for adding product to the cart, receiving list of items that are in a cart or applying a cart coupon is obviously a `cart` and `cart` is not a feature of anything bigger than itself (it's common denominator is a shop) so it should be a module. Wishlist, Reviews or Newsletter are also a good examples of modules as we intuitively think about them as a standalone features.
 
 # Motivation
 
@@ -102,7 +102,7 @@ Entry point for vue-router. You can provide additional routes and [navigation gu
 
 Function that'll be called before registering the module both on server and client side. You have access to VSF object here.
 
-The `VSF` object is an instance of your Vue Storefront shop. It contains following properties 
+The `VSF` object is an instance of your Vue Storefront shop. It contains following properties
 ````js
     Vue?: VueConstructor,
     config?: Object,
@@ -113,7 +113,7 @@ The `VSF` object is an instance of your Vue Storefront shop. It contains followi
 
 Function that'll be called after registering the module both on server and client side. You have access to VSF object here.
 
-The `VSF` object is an instance of your Vue Storefront shop. It contains following properties 
+The `VSF` object is an instance of your Vue Storefront shop. It contains following properties
 ````js
     Vue?: VueConstructor,
     config?: Object,
@@ -277,7 +277,7 @@ export const registerModules: VueStorefrontModule[] = [Cart]
 
 ## Creating third party modules
 
-If you want to create third party module just copy the `src/modules/module-template` raw code to your repo. Don't use any transpilation and build tools since it prevents proper tree shaking and optimization. Building is handled by Vue Storefront build tools. Package name needs to start with `vsf-` prefix to be included into Vue Storefront build process.
+If you want to create third party module just copy the `src/modules/module-template` raw code to your repo. Don't use any transpilation and build tools since it prevents proper tree shaking and optimization. Building is handled by Vue Storefront build tools. Package name needs to start with `vsf-` prefix to be included into Vue Storefront build process. Scoped package names also work i.e. `@example/vsf-`
 
 ## Contributions