Route Based Code Splitting

.eslintignore

@@ -0,0 +1 @@
+node_modules/

package.json

@@ -24,12 +24,14 @@
     "test:tdd": "yarn clean && mocha --watch ./packages/**/test/**/**/*.spec.js --timeout 15000"
   },
   "devDependencies": {
+    "babel-eslint": "^10.0.3",
     "chai": "^4.2.0",
     "eslint": "^5.15.3",
     "jsdom": "^14.0.0",
     "lerna": "^3.16.4",
     "mocha": "^6.1.4",
     "nyc": "^14.0.0",
     "rimraf": "^2.6.3"
-  }
-}
+  },
+  "dependencies": {}
+}

packages/cli/package.json

@@ -29,6 +29,7 @@
     "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.6.0",
     "@babel/runtime": "^7.7.2",
+    "@greenwood/cli": "^0.4.2",
     "@webcomponents/webcomponentsjs": "^2.3.0",
     "babel-loader": "^8.0.5",
     "chalk": "^2.4.2",

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

@@ -1,8 +1,8 @@
 module.exports = {
-  
+
   // https://github.com/babel/babel/issues/9937#issuecomment-489352549
   sourceType: 'unambiguous',
-  
+
   // https://github.com/babel/babel/issues/8731#issuecomment-426522500
   ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/],
 
@@ -12,12 +12,12 @@ module.exports = {
       // https://babeljs.io/docs/en/babel-preset-env
       '@babel/preset-env',
       {
-        
+
         // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
         useBuiltIns: 'entry',
-        
+
         // https://babeljs.io/docs/en/babel-preset-env#corejs
-        corejs: { 
+        corejs: {
           version: 3,
           proposals: true
         },
@@ -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].bundle.js',
       publicPath: config.publicPath
     },
 

packages/cli/src/lifecycles/scaffold.js

@@ -54,7 +54,7 @@ const writePageComponentsFromTemplate = async (compilation) => {
     let relPageDir = file.filePath.substring(context.pagesDir.length, file.filePath.length);
     let pagePath = '';
     const pathLastBackslash = relPageDir.lastIndexOf('/');
-    
+
     pagePath = path.join(context.scratchDir, file.fileName); // non-nested default
 
     if (pathLastBackslash !== 0) {
@@ -89,30 +89,21 @@ const writePageComponentsFromTemplate = async (compilation) => {
 
 };
 
-const writeListImportFile = async (compilation) => {
-  const importList = compilation.graph.map(file => {
-    return `import ${file.relativeExpectedPath};\n`;
-  });
-
-  // Create app directory so that app-template relative imports are correct
-  const appDir = path.join(compilation.context.scratchDir, 'app');
-
-  await fs.ensureDir(appDir);
-  return await fs.writeFile(path.join(appDir, './list.js'), importList.join(''));
-};
-
 const writeRoutes = async(compilation) => {
   return new Promise(async (resolve, reject) => {
     try {
       let data = await fs.readFile(compilation.context.appTemplatePath, 'utf8');
 
       const routes = compilation.graph.map(file => {
-        return `<lit-route path="${file.route}" component="eve-${file.label}"></lit-route>\n\t\t\t\t`;
+        return `<lit-route path="${file.route}" component="eve-${file.label}" .resolve="\${() => import(${file.relativeExpectedPath})}" loading="eve-loading"></lit-route>\n\t\t\t\t`;
       });
 
       const result = data.toString().replace(/MYROUTES/g, routes.join(''));
+      // Create app directory so that app-template relative imports are correct
+      const appDir = path.join(compilation.context.scratchDir, 'app');
 
-      await fs.writeFile(path.join(compilation.context.scratchDir, 'app', './app.js'), result);
+      await fs.ensureDir(appDir);
+      await fs.writeFile(path.join(appDir, './app.js'), result);
 
       resolve();
     } catch (err) {
@@ -145,9 +136,6 @@ module.exports = generateScaffolding = async (compilation) => {
       console.log('Generate pages from templates...');
       await writePageComponentsFromTemplate(compilation);
 
-      console.log('Writing imports for md...');
-      await writeListImportFile(compilation);
-
       console.log('Writing Lit routes...');
       await writeRoutes(compilation);
 

packages/cli/src/templates/app-template.js

@@ -13,7 +13,6 @@ const store = createStore(
   compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk)));
 
 import '../index/index.js';
-import './list';
 
 connectRouter(store);
 

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

@@ -13,7 +13,6 @@ const store = createStore(
   compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk)));
 
 import '../index/index.js';
-import './list';
 
 connectRouter(store);
 

www/components/loading/loading.js

@@ -0,0 +1,25 @@
+import { html, LitElement } from 'lit-element';
+import './spinner';
+
+class loading extends LitElement {
+  render() {
+    return html`
+      <style>
+        div {
+          padding-top:50px;
+          height: calc(100vh - 110px);
+        }
+        h1 {
+          padding: 30px;
+          text-align:center;
+        }
+      </style>
+      <div>
+        <eve-spinner size="100px"></eve-spinner>
+        <h1>Loading...</h1>
+      </div>
+    `;
+  }
+}
+
+customElements.define('eve-loading', loading);

www/components/loading/spinner.js

@@ -0,0 +1,38 @@
+import { html, LitElement } from 'lit-element';
+
+class spinner extends LitElement {
+
+  static get properties() {
+    return {
+      size: {
+        type: String
+      }
+    };
+  }
+
+  render() {
+    return html`
+      <style>
+        .spinner {
+          width: ${this.size};
+          padding: 10px;
+          margin-left:auto;
+          margin-right:auto;
+        }
+      </style>
+      <div class="spinner">
+        <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="${this.size}"
+         height="${this.size}" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+          <path fill="#000"
+          d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
+          transform="rotate(190.358 25 25)">
+          <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
+          </path>
+        </svg>
+      </div>
+    `;
+  }
+}
+
+customElements.define('eve-spinner', spinner);

www/templates/app-template.js

@@ -0,0 +1,35 @@
+import { html, LitElement } from 'lit-element';
+import { connectRouter } from 'lit-redux-router';
+import { applyMiddleware, createStore, compose as origCompose, combineReducers } from 'redux';
+import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';
+import thunk from 'redux-thunk';
+import '../components/header/header';
+import '../components/footer/footer';
+import '../components/loading/loading';
+
+// eslint-disable-next-line no-underscore-dangle
+const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || origCompose;
+
+// eslint-disable-next-line
+const store = createStore(
+  (state, action) => state, // eslint-disable-line
+  compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk)));
+
+import '../index/index.js';
+
+connectRouter(store);
+
+class AppComponent extends LitElement {
+  render() {
+    return html`
+      <div class='wrapper'>
+        <eve-header></eve-header>
+        MYROUTES
+        <lit-route><h1>404 Not found</h1></lit-route>
+        <eve-footer></eve-footer>
+      </div>
+    `;
+  }
+}
+
+customElements.define('eve-app', AppComponent);

www/templates/home-template.js

@@ -19,17 +19,13 @@ class HomeTemplate extends LitElement {
         ${homeCss}
       </style>
       METAELEMENT
-      <div class='wrapper'>
-        <eve-header></eve-header>
-        <eve-banner></eve-banner>
-        <div class='content-wrapper'>
-        <eve-container fluid>
+      <eve-banner></eve-banner>
+      <div class='content-wrapper'>
+      <eve-container fluid>
           <div class='page-template content single-column'>
             <entry></entry>
           </div>
         </eve-container>
-        </div>
-        <eve-footer></eve-footer>
       </div>
     `;
   }

www/templates/page-template.js

@@ -1,7 +1,4 @@
 import { html, LitElement } from 'lit-element';
-import Prism from 'prismjs'; // eslint-disable-line no-unused-vars
-import '../components/header/header';
-import '../components/footer/footer';
 import '@evergreen-wc/eve-container';
 import '../components/shelf/shelf';
 import '../components/scroll/scroll';
@@ -44,8 +41,6 @@ class PageTemplate extends LitElement {
         ${pageCss}
       </style>
       METAELEMENT
-      <div class='wrapper'>
-        <eve-header></eve-header>
         <div class='content-wrapper'>
           <div class="sidebar">
             <eve-shelf .shelfList="${this.shelfList}"></eve-shelf>
@@ -58,8 +53,6 @@ class PageTemplate extends LitElement {
             </eve-container>
           </div>
         </div>
-        <eve-footer></eve-footer>
-      </div>
     `;
   }
 }