Webpack config improvements

README.md

@@ -1,6 +1,6 @@
 # Vue Storefront - headless PWA for eCommerce 
 <a href="https://travis-ci.org/DivanteLtd/vue-storefront"><img src="https://travis-ci.org/DivanteLtd/vue-storefront.svg?branch=master" alt="build:passed"></a> 
-![version](https://img.shields.io/badge/version-1.0%20RC-blue.svg) 
+![version](https://img.shields.io/badge/version-1.0-blue.svg) 
 ![version](https://img.shields.io/badge/node-v8.x-blue.svg) 
 ![Branch stable](https://img.shields.io/badge/stable%20branch-master-blue.svg) 
 ![Branch Develop](https://img.shields.io/badge/dev%20branch-develop-blue.svg)
@@ -350,11 +350,11 @@ Vue Storefront is a Community effort brought to You by our great Core Team and s
           >
         </a>
       </td>
-      <td align="center" valign="middle">
-        <a href="https://magedirect.co/">
+       <td align="center" valign="middle">
+        <a href="https://vendic.nl/">
           <img
-            src="https://user-images.githubusercontent.com/18116406/38415925-4a31e358-3993-11e8-9bee-b2b9af95d305.png"
-            alt="MageDirect"
+            src="https://divante.co/partners/Vue-Storefront/vendic-rood.png"
+            alt="Vendic"
             height="50"
           >
         </a>
@@ -387,6 +387,53 @@ Vue Storefront is a Community effort brought to You by our great Core Team and s
         </a>
       </td>
     </tr>
+    <tr>
+        <td align="center" valign="middle">
+        <a href="https://magedirect.co/">
+          <img
+            src="https://user-images.githubusercontent.com/18116406/38415925-4a31e358-3993-11e8-9bee-b2b9af95d305.png"
+            alt="MageDirect"
+            height="50"
+          >
+        </a>
+      </td>
+      <td align="center" valign="middle">
+        <a href="https://www.edmondscommerce.co.uk/">
+          <img
+            src="https://divante.co/partners/Vue-Storefront/edmonds-ecommerce.png"
+            alt="Edmonds Commerce"
+            height="50"
+          >
+        </a>
+      </td>
+      <td align="center" valign="middle">
+        <a href="https://www.kt-team.ru/">
+          <img
+            src="https://divante.co/partners/Vue-Storefront/kt.team.png"
+            alt="KT Team"
+            height="50"
+          >
+        </a>
+      </td>
+      <td align="center" valign="middle">
+        <a href="">
+          <img
+            src=""
+            alt=""
+            height="50"
+          >
+        </a>
+      </td>
+      <td align="center" valign="middle">
+        <a href="">
+          <img
+            src=""
+            alt=""
+            height="50"
+          >
+        </a>
+      </td>
+    </tr>
   </tbody>
 </table>
 

core/build/dev-server.js

@@ -16,17 +16,6 @@ module.exports = function setupDevServer (app, cb) {
   let template
 
   // modify client config to work with hot middleware
-
-  if(!clientConfig.hasOwnProperty('entry')) // multicompiler
-  {
-    for(let cc of clientConfig)
-    if(cc.hasOwnProperty('entry') && cc.entry.hasOwnProperty('app'))
-      {
-        clientConfig = cc;
-        break;
-      }
-    }
-
   clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
   clientConfig.output.filename = '[name].js'
   clientConfig.plugins.push(

core/build/webpack.base.config.js

@@ -48,6 +48,11 @@ module.exports = {
     app: './core/client-entry.js',
     vendor: ['vue', 'vue-router', 'vuex', 'vuex-router-sync']
   },
+  output: {
+    path: path.resolve(__dirname, '../../dist'),
+    publicPath: '/dist/',
+    filename: '[name].[hash].js'
+  },
   resolveLoader: {
     modules: [
       'node_modules',
@@ -99,11 +104,6 @@ module.exports = {
       'theme/extensions': themeExtensions
     }
   },
-  output: {
-    path: path.resolve(__dirname, '../../dist'),
-    publicPath: '/dist/',
-    filename: '[name].[hash].js'
-  },
   module: {
     rules: [
       {

core/build/webpack.client.config.js

@@ -2,13 +2,20 @@ const webpack = require('webpack')
 const merge = require('webpack-merge')
 const base = require('./webpack.base.config')
 const HTMLPlugin = require('html-webpack-plugin')
-const SWPrecachePlugin = require('sw-precache-webpack-plugin')
 const path = require('path')
 const fs = require('fs')
-const themeDirectory = require('./theme-path')
-const themedIndex = path.join(themeDirectory, 'index.template.html')
+const themeRoot = require('./theme-path')
+const themedIndex = path.join(themeRoot, 'index.template.html')
 
 const config = merge(base, {
+  entry: {
+    'service-worker-ext': themeRoot + '/service-worker-ext.js',
+  },
+  output: {
+    path: path.resolve(__dirname, '../../dist'),
+    publicPath: '/dist/',
+    filename: '[name].js'
+  },
   mode: 'development',
   resolve: {
     alias: {
@@ -27,98 +34,5 @@ const config = merge(base, {
   ]
 })
 
-if (process.env.NODE_ENV === 'production') {
-  config.plugins.push(
-    // auto generate service worker
-    new SWPrecachePlugin({
-      cacheId: 'vue-sfr',
-      filename: 'service-worker.js',
-      staticFileGlobsIgnorePatterns: [/\.map$/],
-      staticFileGlobs: [
-        'dist/**.*',
-        'assets/**.*',
-        'assets/ig/**.*',
-        'index.html',
-        '/'
-      ],
-      runtimeCaching: [
-        {
-          urlPattern: "^https://fonts\.googleapis\.com/", /** cache the html stub  */
-          handler: "cacheFirst"
-        },
-        {
-          urlPattern: "^https://fonts\.gstatic\.com/", /** cache the html stub  */
-          handler: "cacheFirst"
-        },
-        {
-          urlPattern: "^https://unpkg\.com/", /** cache the html stub  */
-          handler: "cacheFirst"
-        },
-        {
-        urlPattern: "/pwa.html", /** cache the html stub  */
-        handler: "fastest"
-      },{
-        urlPattern: "/", /** cache the html stub for homepage  */
-        handler: "fastest"
-      },
-      {
-        urlPattern: "/p/*", /** cache the html stub  */
-        handler: "fastest"
-      },
-      {
-        urlPattern: "/c/*", /** cache the html stub  */
-        handler: "fastest"
-      },
-      {
-        urlPattern: "/img/(.*)",
-        handler: "fastest"
-      },{
-        urlPattern: "/api/catalog/*",
-        handler: "fastest"
-      },{
-        urlPattern: "/api/*",
-        handler: "networkFirst"
-      },{
-        urlPattern: "/assets/logo.svg",
-        handler: "networkFirst"
-      },{
-        urlPattern: "/index.html",
-        handler: "fastest"
-      },{
-        urlPattern: "/assets/*",
-        handler: "fastest"
-      },{
-        urlPattern: "/assets/ig/(.*)",
-        handler: "fastest"
-      },{
-        urlPattern: "/dist/(.*)",
-        handler: "fastest"
-      },{
-        urlPattern: "/*/*", /** this is new product url format  */
-        handler: "networkFirst"
-      },
-      {
-        urlPattern: "/*/*/*", /** this is new product url format  */
-        handler: "networkFirst"
-      },
-      {
-        urlPattern: "/*", /** this is new category url format  */
-        handler: "networkFirst"
-      }],
-      "importScripts": ['/dist/core-service-worker.js'] /* custom logic */
-    })
-  )
-}
-
-const configSW = merge({}, base); // this is basicaly a work-around to compile the service workers extensions as they are not included nowhere but in service worker only
-
-configSW.entry = {
-  'core-service-worker': path.resolve(__dirname, '../service-worker/index.js')
-}
-configSW.output =  {
-  path: path.resolve(__dirname, '../../dist'),
-  publicPath: '/dist/',
-  filename: '[name].js'
-},
+module.exports = config;
 
-module.exports = [config, configSW];

core/build/webpack.prod.client.config.js

@@ -1,11 +1,83 @@
 const path = require('path')
-
+const merge = require('webpack-merge')
 const baseClientConfig = require('./webpack.client.config')
-
 const themeRoot = require('./theme-path')
 const extendedConfig = require(path.join(themeRoot, '/webpack.config.js'))
+const SWPrecachePlugin = require('sw-precache-webpack-plugin')
+
+const prodClientConfig = merge(baseClientConfig, {
+  plugins: [
+    // auto generate service worker
+    new SWPrecachePlugin({
+      cacheId: 'vue-sfr',
+      filename: 'service-worker.js',
+      staticFileGlobsIgnorePatterns: [/\.map$/],
+      staticFileGlobs: [
+        'dist/**.*',
+        'assets/**.*',
+        'assets/ig/**.*',
+        'index.html',
+        '/'
+      ],
+      runtimeCaching: [
+        {
+          urlPattern: "^https://fonts\.googleapis\.com/", /** cache the html stub  */
+          handler: "cacheFirst"
+        },
+        {
+          urlPattern: "^https://fonts\.gstatic\.com/", /** cache the html stub  */
+          handler: "cacheFirst"
+        },
+        {
+          urlPattern: "^https://unpkg\.com/", /** cache the html stub  */
+          handler: "cacheFirst"
+        },
+        {
+        urlPattern: "/pwa.html", /** cache the html stub  */
+        handler: "fastest"
+      },{
+        urlPattern: "/", /** cache the html stub for homepage  */
+        handler: "fastest"
+      },
+      {
+        urlPattern: "/p/*", /** cache the html stub  */
+        handler: "fastest"
+      },
+      {
+        urlPattern: "/c/*", /** cache the html stub  */
+        handler: "fastest"
+      },
+      {
+        urlPattern: "/img/(.*)",
+        handler: "fastest"
+      },{
+        urlPattern: "/api/catalog/*",
+        handler: "fastest"
+      },{
+        urlPattern: "/api/*",
+        handler: "networkFirst"
+      },{
+        urlPattern: "/assets/logo.svg",
+        handler: "networkFirst"
+      },{
+        urlPattern: "/index.html",
+        handler: "fastest"
+      },{
+        urlPattern: "/assets/*",
+        handler: "fastest"
+      },{
+        urlPattern: "/assets/ig/(.*)",
+        handler: "fastest"
+      },{
+        urlPattern: "/dist/(.*)",
+        handler: "fastest"
+      }],
+      "importScripts": ['/service-worker-ext.js'] /* custom logic */
+    })
+  ]
+})
 
-module.exports = extendedConfig(baseClientConfig, {
+module.exports = extendedConfig(prodClientConfig, {
   isClient: true,
   isDev: false
 })

doc/FAQ and Receipes.md

@@ -21,6 +21,7 @@ If you solved any new issues by yourself please let us know on [slack](http://vu
 * <a href="#how-to-modify-schema">How to add/remove/change field types in the ElasticSearch index</a>
 * <a href="#magento-extensions">How to integrate 3rd party Magento extensions?</a>
 * <a href="#multi-website">How to support Multistore / Multiwebsite setup</a>
+* <a href="#configurable-filters">How to deal with Category filters based on configurable_children</a>
 
 ### <a name="problem-docker-installer"></a>Problem starting docker while installing the vue-storefront
 
@@ -218,3 +219,7 @@ If the extensions are not playing with the User Interface, probably they will wo
 Currently, the Multi Website support is possible by setting up few separate instances of Vue Storefront configured to use other API endpoints + have few ElasticSearch indexes (each for one storeView). Magento2 API allows the user to simply add the: http://magento-store.example.com/store_code/V1 ... to the endpoitns so You can just switch the store view by changing store_code - from "default" to any kind of "en", "de" ... 
 2
 
+### <a name="configurable-filters"></a>How to deal with Category filters based on configurable_children
+
+If You like to have Category filter working with configurable products - You need to expand the `product.configurable_children.attrName` to `product.attrName_options` array. This is automatically done by [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) for all attributes set as `product.configurable_options` (by default: color, size). If You like to add additional fields like `manufacturer` to the filters You need to expand `product.manufacturer_options` field. The easiest way to do so is to set `config.product.expandConfigurableFilters` to `['manufacturer']` and re-run the `mage2vuestorefront` indexer.
+

doc/Upgrade notes.md

@@ -2,6 +2,18 @@
 
 We're trying to keep the upgrade process as easy as it's possible. Unfortunately sometimes manual code changes are required. Before pulling out the latest version, please take a look at the upgrade notes below:.
 
+## 1.0 -> 1.1 (currently on develop branch)
+
+### Modifications
+
+#### Plugins registration simplified
+
+Instead of exporting an object in `{theme}/plugins/index.js` just use `Vue.use(pugin)` directly in this file ( [docs](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Working%20with%20plugins.md) )
+
+### New features
+
+We added [`vue-progressbar`](https://github.com/hilongjw/vue-progressbar) to default theme which can be found in `App.vue` file
+
 ## 1.0RC-3 -> 1.0([release notes](https://github.com/DivanteLtd/vue-storefront/releases/tag/v1.0.0))
 This is official, stable release of Vue Storefront.
 

doc/Working with plugins.md

@@ -27,18 +27,14 @@ Currently there are two core plugins:
 
 ## Theme plugins
 
-Theme plugins works exactly like core plugins and are merged with them during webpack build process. 
-
-If you want to add new 3rd party plugin (e.g Vuetify) you need to export it in `src/{theme}/plugins/index.js` so it will be proceeded with `Vue.use()` in `core/app.js` file. Here is an example of  Vuetify registration in `core/plugins/index.js` file:
+It's a good practice to register theme plugins under `{theme}/plugins` folder.
 
 ````js
 import Vuetify from 'vuetify'
 // import other plugins
 
-export {
-  Vuetify
-  // other plugins
-}
+Vue.use(Vuetify)
+// other plugins
  ````
 
  If you want to make custom plugin for your theme create a directory for it in 'src/{theme}/plugins' (eg. `src/{theme}/plugins/custom_plugin`) and register it in `src/{theme}/plugins/index.js` like a 3rd party plugin in example above.