WIP - Stencil 3244

.eslintignore

@@ -1,3 +1,3 @@
-/assets/js/bundle.js
-webpack.conf.js
+/assets/dist
 stencil.conf.js
+webpack.conf.js

.eslintrc

@@ -1,4 +1,5 @@
 {
+    "parser": "babel-eslint",
     "rules": {
         "indent": [
             2,

assets/js/app.js

@@ -1,70 +1,51 @@
-import 'babel-polyfill';
+__webpack_public_path__ = window.__webpack_public_path__; // eslint-disable-line
 
+import 'babel-polyfill';
 import $ from 'jquery';
-import account from './theme/account';
-import auth from './theme/auth';
-import blog from './theme/blog';
-import brand from './theme/brand';
-import cart from './theme/cart';
-import category from './theme/category';
-import contactUs from './theme/contact-us';
-import compare from './theme/compare';
-import errors from './theme/errors';
-import errors404 from './theme/404-error';
-import giftCertificate from './theme/gift-certificate';
 import Global from './theme/global';
-import home from './theme/home';
-import orderComplete from './theme/order-complete';
-import rss from './theme/rss';
-import page from './theme/page';
-import product from './theme/product';
-import search from './theme/search';
-import sitemap from './theme/sitemap';
-import subscribe from './theme/subscribe';
-import wishlist from './theme/wishlist';
 
 const pageClasses = {
-    'pages/account/orders/all': account,
-    'pages/account/orders/details': account,
-    'pages/account/addresses': account,
-    'pages/account/add-address': account,
-    'pages/account/add-return': account,
-    'pages/account/add-wishlist': wishlist,
-    'pages/account/recent-items': account,
-    'pages/account/download-item': account,
-    'pages/account/edit': account,
-    'pages/account/inbox': account,
-    'pages/account/return-saved': account,
-    'pages/account/returns': account,
-    'pages/auth/login': auth,
-    'pages/auth/account-created': auth,
-    'pages/auth/create-account': auth,
-    'pages/auth/new-password': auth,
-    'pages/auth/forgot-password': auth,
-    'pages/blog': blog,
-    'pages/blog-post': blog,
-    'pages/brand': brand,
-    'pages/brands': brand,
-    'pages/cart': cart,
-    'pages/category': category,
-    'pages/compare': compare,
-    'pages/contact-us': contactUs,
-    'pages/errors': errors,
-    'pages/errors/404': errors404,
-    'pages/gift-certificate/purchase': giftCertificate,
-    'pages/gift-certificate/balance': giftCertificate,
-    'pages/gift-certificate/redeem': giftCertificate,
-    'pages/home': home,
-    'pages/order-complete': orderComplete,
-    'pages/page': page,
-    'pages/product': product,
-    'pages/amp/product-options': product,
-    'pages/search': search,
-    'pages/rss': rss,
-    'pages/sitemap': sitemap,
-    'pages/subscribed': subscribe,
-    'pages/account/wishlist-details': wishlist,
-    'pages/account/wishlists': wishlist,
+    'pages/account/orders/all': () => import('./theme/account'),
+    'pages/account/orders/details': () => import('./theme/account'),
+    'pages/account/addresses': () => import('./theme/account'),
+    'pages/account/add-address': () => import('./theme/account'),
+    'pages/account/add-return': () => import('./theme/account'),
+    'pages/account/add-wishlist': () => import('./theme/wishlist'),
+    'pages/account/recent-items': () => import('./theme/account'),
+    'pages/account/download-item': () => import('./theme/account'),
+    'pages/account/edit': () => import('./theme/account'),
+    'pages/account/inbox': () => import('./theme/account'),
+    'pages/account/return-saved': () => import('./theme/account'),
+    'pages/account/returns': () => import('./theme/account'),
+    'pages/auth/login': () => import('./theme/auth'),
+    'pages/auth/account-created': () => import('./theme/auth'),
+    'pages/auth/create-account': () => import('./theme/auth'),
+    'pages/auth/new-password': () => import('./theme/auth'),
+    'pages/auth/forgot-password': () => import('./theme/auth'),
+    'pages/blog': () => import('./theme/blog'),
+    'pages/blog-post': () => import('./theme/blog'),
+    'pages/brand': () => import('./theme/brand'),
+    'pages/brands': () => import('./theme/brand'),
+    'pages/cart': () => import('./theme/cart'),
+    'pages/category': () => import('./theme/category'),
+    'pages/compare': () => import('./theme/compare'),
+    'pages/contact-us': () => import('./theme/contact-us'),
+    'pages/errors': () => import('./theme/errors'),
+    'pages/errors/404': () => import('./theme/404-error'),
+    'pages/gift-certificate/purchase': () => import('./theme/gift-certificate'),
+    'pages/gift-certificate/balance': () => import('./theme/gift-certificate'),
+    'pages/gift-certificate/redeem': () => import('./theme/gift-certificate'),
+    'pages/home': () => import('./theme/home'),
+    'pages/order-complete': () => import('./theme/order-complete'),
+    'pages/page': () => import('./theme/page'),
+    'pages/product': () => import('./theme/product'),
+    'pages/amp/product-options': () => import('./theme/product'),
+    'pages/search': () => import('./theme/search'),
+    'pages/rss': () => import('./theme/rss'),
+    'pages/sitemap': () => import('./theme/sitemap'),
+    'pages/subscribed': () => import('./theme/subscribe'),
+    'pages/account/wishlist-details': () => import('./theme/wishlist'),
+    'pages/account/wishlists': () => import('./theme/wishlist'),
 };
 
 /**
@@ -80,11 +61,16 @@ window.stencilBootstrap = function stencilBootstrap(templateFile, contextJSON =
 
     return {
         load() {
-            $(() => {
-                let pageClass;
+            $(async () => {
                 let globalClass;
+                let pageClass;
+                let PageClass;
+
                 // Finds the appropriate class from the pageType.
-                const PageClass = pageClasses[templateFile];
+                const templatePath = pageClasses[templateFile];
+                if (typeof templatePath === 'function') {
+                    PageClass = (await templatePath()).default;
+                }
 
                 if (loadGlobal) {
                     globalClass = new Global();

browserlist

@@ -0,0 +1,8 @@
+# See https://support.bigcommerce.com/articles/Public/Themes-Supported-Browsers/
+last 1 Chrome versions
+last 1 Firefox versions
+Explorer 11
+last 1 Safari versions
+last 1 Edge versions
+last 1 ChromeAndroid versions
+last 1 iOS versions

package.json

@@ -9,13 +9,21 @@
     "@bigcommerce/citadel": "^2.11.5",
     "@bigcommerce/stencil-utils": "1.0.5",
     "async": "^1.5.2",
-    "babel-core": "6.7.4",
-    "babel-eslint": "4.1.0",
-    "babel-loader": "6.2.4",
-    "babel-polyfill": "^6.8.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-es2015-loose": "^7.0.0",
-    "es6-shim": "0.35.0",
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.3.2",
+    "babel-plugin-dynamic-import-webpack": "^1.0.1",
+    "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-regenerator": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-env": "^1.2.2",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-es2017": "^6.22.0",
+    "clean-webpack-plugin": "^0.1.16",
+    "core-js": "^2.4.1",
+    "es6-shim": "^0.35.3",
     "eslint-config-airbnb": "^6.0.2",
     "fastclick": "^1.0.6",
     "foundation-sites": "^5.5.3",
@@ -37,14 +45,16 @@
     "karma-phantomjs-launcher": "1.0.0",
     "karma-sourcemap-loader": "0.3.7",
     "karma-verbose-reporter": "0.0.2",
-    "karma-webpack": "1.7.0",
+    "karma-webpack": "^2.0.2",
     "lazysizes": "3.0.0",
     "load-grunt-config": "0.17.1",
     "lodash": "^3.5.0",
+    "lodash-webpack-plugin": "^0.11.2",
     "nod-validate": "^2.0.12",
     "pace": "hubspot/pace#a03f1f1de62c9cea6c88b2267b8d7a83858b6cb6",
+    "regenerator-runtime": "^0.10.3",
     "slick-carousel": "1.5.5",
     "time-grunt": "^1.2.2",
-    "webpack": "^1.14.0"
+    "webpack": "^2.2.1"
   }
 }

stencil.conf.js

@@ -1,16 +1,6 @@
-var Path = require('path');
 var webpack = require('webpack');
 var webpackConfig = require('./webpack.conf.js');
 
-webpackConfig.context = __dirname;
-webpackConfig.entry = {
-    'theme-bundle': './assets/js/app.js',
-};
-webpackConfig.output = {
-    path: Path.join(__dirname, '/assets/dist'),
-    filename: '[name].js',
-};
-
 /**
  * Watch options for the core watcher
  * @type {{files: string[], ignored: string[]}}
@@ -27,57 +17,60 @@ var watchOptions = {
         '/assets/scss',
         '/assets/less',
         '/assets/css',
+        '/assets/dist',
     ]
 };
 
 /**
- * Hook into the stencil-cli browsersync instance for rapid development of themes.
  * Watch any custom files and trigger a rebuild
- * @param {Object} Bs
  */
-function development(Bs) {
-    var compiler = webpack(webpackConfig);
-
+function development() {
     // Rebuild the bundle once at bootup
-    compiler.watch({}, err => {
+    webpack(webpackConfig).watch({}, err => {
         if (err) {
             console.error(err.message, err.details);
         }
 
-        Bs.reload();
+        process.send('reload');
     });
 }
 
-/**
-
-*/
 /**
  * Hook into the `stencil bundle` command and build your files before they are packaged as a .zip
- * Be sure to call the `done()` callback when finished
- * @param {function} done
  */
-function production(done) {
-    var compiler;
-
+function production() {
+    webpackConfig.watch = false;
     webpackConfig.devtool = false;
-    webpackConfig.plugins.push(new webpack.optimize.DedupePlugin());
     webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
-        comments: false
+        comments: false,
+        compress: {
+            warnings: true,
+        },
+        sourceMap: true,
     }));
 
-    compiler = webpack(webpackConfig);
-
-    compiler.run(err => {
+    webpack(webpackConfig).run(err => {
         if (err) {
-            throw err;
+            console.error(err.message, err.details);
         }
 
-        done();
+        process.send('done');
     });
 }
 
-module.exports = {
-    watchOptions: watchOptions,
-    development: development,
-    production: production,
-};
+if (process.send) {
+    // running as a forked worker
+    process.on('message', message => {
+        if (message === 'development') {
+            development();
+        }
+
+        if (message === 'production') {
+            production();
+        }
+    });
+
+    process.send('ready');
+}
+
+module.exports = { watchOptions };

templates/layout/amp-iframe.html

@@ -24,7 +24,10 @@
 
         {{#block "page"}} {{/block}}
 
-        <script src="{{cdn 'assets/dist/theme-bundle.js'}}"></script>
+        <script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
+        <script src="{{cdn 'assets/dist/theme-bundle.vendor.js'}}"></script>
+        <script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
+
         <script>
             // Exported in app.js
             window.stencilBootstrap("{{template_file}}", {{ jsContext }}, false).load();

templates/layout/base.html

@@ -32,7 +32,11 @@
         {{> components/common/body }}
         {{> components/common/footer }}
 
-        <script src="{{cdn 'assets/dist/theme-bundle.js'}}"></script>
+
+        <script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
+        <script src="{{cdn 'assets/dist/theme-bundle.vendor.js'}}"></script>
+        <script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
+
         <script>
             // Exported in app.js
             window.stencilBootstrap("{{template_file}}", {{jsContext}}).load();