issue/275 Add Support For Dynamic Imports (#286)

* task: add dynamic imports

* fix: shelf init

* fix: remove redundant async

* fix: change chunkfile naming

* fix: fix lint errors

* fix: test eslint import exception

* fix: add babel-eslint, update babel and eslintrc

* fix: babel deps all 7.8.3

* fix: update tests for additional script elem

* refactor babel-eslint implementation

* remove extra formatting

* update specs to reflect code splitting

* refactoring script testing

* enabling all smoke tests

* refactor script testing

* move webpack optimization to prod config

* rollback webpack optimization

Co-authored-by: Owen Buckley <[email protected]>

Author: hutchgrant

.eslintrc.js

@@ -1,7 +1,13 @@
+const path = require('path');
+
 module.exports = {
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module'
+    sourceType: 'module',
+    babelOptions: {
+      configFile: path.join(__dirname, './packages/cli/src/config/babel.config.js')
+    }
   },
   env: {
     browser: true,
@@ -141,7 +147,10 @@ module.exports = {
     'id-length': 0,
     'indent': [2, 2, {
       'VariableDeclarator': 1,
-      'SwitchCase': 1
+      'SwitchCase': 1,
+      'ignoredNodes': [
+        'TemplateLiteral'
+      ]
     }],
     'key-spacing': [2, {
       'beforeColon': false,
@@ -152,7 +161,6 @@ module.exports = {
     'max-nested-callbacks': [2, { 'maximum': 8 }],
     'new-cap': 2,
     'new-parens': 2,
-    'newline-after-var': 2,
     'no-array-constructor': 2,
     'no-continue': 0,
     'no-inline-comments': 0,

package.json

@@ -24,6 +24,7 @@
     "test:tdd": "yarn test --watch"
   },
   "devDependencies": {
+    "babel-eslint": "^10.0.3",
     "chai": "^4.2.0",
     "eslint": "^6.8.0",
     "jsdom": "^14.0.0",

packages/cli/package.json

@@ -25,10 +25,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/runtime": "^7.7.2",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/runtime": "^7.8.3",
     "@webcomponents/webcomponentsjs": "^2.3.0",
     "babel-loader": "^8.0.5",
     "chalk": "^2.4.2",

packages/cli/src/config/babel.config.js

@@ -31,9 +31,10 @@ module.exports = {
   // https://github.com/babel/babel/issues/8829#issuecomment-456524916
   plugins: [
     [
-      '@babel/plugin-transform-runtime', { 
-        regenerator: true 
-      }
+      '@babel/plugin-transform-runtime', {
+        regenerator: true
+      },
+      '@babel/plugin-syntax-dynamic-import'
     ]
   ]
 

packages/cli/src/config/webpack.config.common.js

@@ -12,12 +12,12 @@ const getUserWorkspaceDirectories = (source) => {
 const mapUserWorkspaceDirectories = (directoryPath, userWorkspaceDirectory) => {
   const directoryName = directoryPath.replace(`${userWorkspaceDirectory}/`, '');
   const userWorkspaceDirectoryRoot = userWorkspaceDirectory.split('/').slice(-1);
-  
+
   return new webpack.NormalModuleReplacementPlugin(
     // https://github.com/ProjectEvergreen/greenwood/issues/132
     new RegExp(`\\.\\.\\/${directoryName}.+$(?<!\.js)|${userWorkspaceDirectoryRoot}\\/${directoryName}.+$(?<!\.js)`),
     (resource) => {
-      
+
       // workaround to ignore cli/templates default imports when rewriting
       if (!new RegExp('\/cli\/templates').test(resource.content)) {
         resource.request = resource.request.replace(new RegExp(`\\.\\.\\/${directoryName}`), directoryPath);
@@ -87,6 +87,7 @@ module.exports = ({ config, context }) => {
     output: {
       path: path.join(context.publicDir, '.', config.publicPath),
       filename: '[name].[hash].bundle.js',
+      chunkFilename: '[name].[hash].bundle.js',
       publicPath: config.publicPath
     },
 

packages/cli/test/cases/build.config.meta/build.config.meta.spec.js

@@ -37,6 +37,8 @@ const expect = require('chai').expect;
 const runSmokeTest = require('../../../../../test/smoke-test');
 const TestBed = require('../../../../../test/test-bed');
 
+const mainBundleScriptRegex = /index.*.bundle\.js/;
+
 describe('Build Greenwood With: ', function() {
   const LABEL = 'Custom Meta Configuration and Nested Workspace';
   const meta = greenwoodConfig.meta;
@@ -80,10 +82,15 @@ describe('Build Greenwood With: ', function() {
         expect(title).to.be.equal('My Custom Greenwood App');
       });
 
-      it('should have one <script> tag in the <body>', function() {
-        const scriptTag = dom.window.document.querySelectorAll('body script');
+      it('should have one <script> tag in the <body> for the main bundle', function() {
+        const scriptTags = dom.window.document.querySelectorAll('body script');
+        const bundledScript = Array.prototype.slice.call(scriptTags).filter(script => {
+          const src = script.src.replace('file:///', '');
+
+          return mainBundleScriptRegex.test(src);
+        });
 
-        expect(scriptTag.length).to.be.equal(1);
+        expect(bundledScript.length).to.be.equal(1);
       });
 
       it('should have a router outlet tag in the <body>', function() {

packages/cli/test/cases/build.config.title/build.config.title.spec.js

@@ -27,6 +27,8 @@ const expect = require('chai').expect;
 const runSmokeTest = require('../../../../../test/smoke-test');
 const TestBed = require('../../../../../test/test-bed');
 
+const mainBundleScriptRegex = /index.*.bundle\.js/;
+
 describe('Build Greenwood With: ', function() {
   const LABEL = 'Custom Title Configuration and Default Workspace';
   let setup;
@@ -63,12 +65,17 @@ describe('Build Greenwood With: ', function() {
       });
 
       // rest of index smoke-test because <title></title> is changed for this case
-      it('should have one <script> tag in the <body>', function() {
-        const scriptTag = dom.window.document.querySelectorAll('body script');
+      it('should have one <script> tag in the <body> for the main bundle', function() {
+        const scriptTags = dom.window.document.querySelectorAll('body script');
+        const bundledScript = Array.prototype.slice.call(scriptTags).filter(script => {
+          const src = script.src.replace('file:///', '');
 
-        expect(scriptTag.length).to.be.equal(1);
-      });
+          return mainBundleScriptRegex.test(src);
+        });
 
+        expect(bundledScript.length).to.be.equal(1);
+      });
+      
       it('should have a router outlet tag in the <body>', function() {
         const outlet = dom.window.document.querySelectorAll('body eve-app');
 

packages/cli/test/cases/build.default.workspace-template-app/build.default.workspace-template-app.spec.js

@@ -22,6 +22,8 @@ const { JSDOM } = require('jsdom');
 const path = require('path');
 const TestBed = require('../../../../../test/test-bed');
 
+const mainBundleScriptRegex = /index.*.bundle\.js/;
+
 describe('Build Greenwood With: ', function() {
   const LABEL = 'Default Greenwood Configuration and Workspace w/Custom App Template';
   let setup;
@@ -55,10 +57,15 @@ describe('Build Greenwood With: ', function() {
         expect(title).to.be.equal('Greenwood App');
       });
 
-      it('should have one <script> tag in the <body>', function() {
-        const scriptTag = dom.window.document.querySelectorAll('body script');
+      it('should have one <script> tag in the <body> for the main bundle', function() {
+        const scriptTags = dom.window.document.querySelectorAll('body script');
+        const bundledScript = Array.prototype.slice.call(scriptTags).filter(script => {
+          const src = script.src.replace('file:///', '');
+
+          return mainBundleScriptRegex.test(src);
+        });
 
-        expect(scriptTag.length).to.be.equal(1);
+        expect(bundledScript.length).to.be.equal(1);
       });
 
       it('should have a router outlet tag in the <body>', function() {

test/smoke-test.js

@@ -12,6 +12,8 @@ const glob = require('glob-promise');
 const { JSDOM } = require('jsdom');
 const path = require('path');
 
+const mainBundleScriptRegex = /index.*.bundle\.js/;
+
 function publicDirectory(label) {
   describe(`Running Smoke Tests: ${label}`, function() {
     describe('Public Directory Generated Output', function() {
@@ -43,15 +45,15 @@ function defaultNotFound(label) {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, '404.html'));
       });
 
-      it('should have one bundle <script> tag in the <body>', function() {
+      it('should have one <script> tag in the <body> for the main bundle', function() {
         const scriptTags = dom.window.document.querySelectorAll('body script');
-        const bundleScripts = Array.prototype.slice.call(scriptTags).filter(script => {
-          const src = script.src;
+        const bundledScript = Array.prototype.slice.call(scriptTags).filter(script => {
+          const src = script.src.replace('file:///', '');
 
-          return src.indexOf('index.') >= 0 && src.indexOf('.bundle.js') >= 0;
+          return mainBundleScriptRegex.test(src);
         });
 
-        expect(bundleScripts.length).to.be.equal(1);
+        expect(bundledScript.length).to.be.equal(1);
       });
 
       it('should have a <title> tag in the <head>', function() {
@@ -86,15 +88,15 @@ function defaultIndex(label) {
         expect(title).to.be.equal('Greenwood App');
       });
 
-      it('should have one <script> tag for loading main JavaScript bundle at the end of the <body> tag', function() {
+      it('should have one <script> tag in the <body> for the main bundle', function() {
         const scriptTags = dom.window.document.querySelectorAll('body eve-app ~ script');
-        const bundleScripts = Array.prototype.slice.call(scriptTags).filter(script => {
-          const src = script.src;
+        const bundledScript = Array.prototype.slice.call(scriptTags).filter(script => {
+          const src = script.src.replace('file:///', '');
 
-          return src.indexOf('index') >= 0 && src.indexOf('bundle') >= 0;
+          return mainBundleScriptRegex.test(src);
         });
 
-        expect(bundleScripts.length).to.be.equal(1);
+        expect(bundledScript.length).to.be.equal(1);
       });
 
       it('should have a router outlet tag in the <body>', function() {
@@ -138,6 +140,7 @@ function defaultHelloPage(label) {
       it('should output a hello page directory', function() {
         expect(fs.existsSync(path.join(this.context.publicDir, './hello'))).to.be.true;
       });
+
       it('should output an index.html file within the default hello page directory', function() {
         expect(fs.existsSync(path.join(this.context.publicDir, './hello', './index.html'))).to.be.true;
       });

www/components/shelf/shelf.js

@@ -7,20 +7,22 @@ class shelf extends LitElement {
 
   static get properties() {
     return {
-      shelfList: {
-        type: Array
+      list: {
+        type: Function
       }
     };
   }
 
   constructor() {
     super();
     this.selectedIndex = '';
+    this.list = () => [];
     this.shelfList = [];
   }
 
-  connectedCallback() {
+  async connectedCallback() {
     super.connectedCallback();
+    this.shelfList = await this.list();
     this.collapseAll();
     this.expandRoute(window.location.pathname);
   }

www/templates/page-template.js

@@ -26,13 +26,13 @@ class PageTemplate extends LitElement {
     let list = [];
 
     if (url.indexOf('/about') >= 0) {
-      list = require('../components/shelf/about.json');
+      list = () => import(/* webpackChunkName: 'about' */ '../components/shelf/about.json').then(({ default: data }) => data);
     } else if (url.indexOf('/docs') >= 0) {
-      list = require('../components/shelf/documentation-list.json');
+      list = () => import(/* webpackChunkName: 'documentation-list' */ '../components/shelf/documentation-list.json').then(({ default: data }) => data);
     } else if (url.indexOf('/getting-started') >= 0) {
-      list = require('../components/shelf/getting-started-list.json');
+      list = () => import(/* webpackChunkName: 'getting-started' */ '../components/shelf/getting-started-list.json').then(({ default: data }) => data);
     } else if (url.indexOf('/plugins') >= 0) {
-      list = require('../components/shelf/plugins.json');
+      list = () => import(/* webpackChunkName: 'plugins' */ '../components/shelf/plugins.json').then(({ default: data }) => data);
     }
 
     this.shelfList = list;
@@ -48,7 +48,7 @@ class PageTemplate extends LitElement {
         <eve-header></eve-header>
         <div class='content-wrapper'>
           <div class="sidebar">
-            <eve-shelf .shelfList="${this.shelfList}"></eve-shelf>
+            <eve-shelf .list="${this.shelfList}"></eve-shelf>
           </div>
           <div class="content">
             <eve-container fluid>