[DO NOT MERGE] Rfc/issue 354 strict mode inline script poc

greenwood.config.js

@@ -6,6 +6,7 @@ const META_DESCRIPTION = 'A modern and performant static site generator supporti
 const FAVICON_HREF = '/assets/favicon.ico';
 
 module.exports = {
+  optimization: 'strict',
   workspace: path.join(__dirname, 'www'),
   title: 'Greenwood',
   meta: [

packages/cli/src/data/client.js

@@ -14,7 +14,7 @@ const backupQuery = client.query;
 
 client.query = (params) => {
   if (APOLLO_STATE) {
-    // __APOLLO_STATE__ defined, in "SSG" mode...
+    // __APOLLO_STATE__ defined, in production mode
     const queryHash = getQueryHash(params.query, params.variables);
     const cachePath = `/${queryHash}-cache.json`;
 
@@ -27,7 +27,7 @@ client.query = (params) => {
         };
       });
   } else {
-    // __APOLLO_STATE__ NOT defined, in "SPA" mode
+    // __APOLLO_STATE__ NOT defined, in development mode
     return backupQuery(params);
   }
 };

packages/cli/src/data/queries/config.gql

@@ -12,6 +12,7 @@ query {
       value,
       href
     },
+    optimization,
     publicPath,
     title,
     workspace

packages/cli/src/data/schema/config.js

@@ -23,6 +23,7 @@ const configTypeDefs = gql`
   type Config {
     devServer: DevServer,
     meta: [Meta],
+    optimization: String,
     publicPath: String,
     title: String,
     workspace: String

packages/cli/src/lifecycles/config.js

@@ -2,12 +2,15 @@ const fs = require('fs-extra');
 const path = require('path');
 const url = require('url');
 
+const optimizations = ['strict', 'spa'];
+
 let defaultConfig = {
   workspace: path.join(process.cwd(), 'src'),
   devServer: {
     port: 1984,
     host: 'localhost'
   },
+  optimization: 'spa',
   publicPath: '/',
   title: 'My App',
   meta: [],
@@ -25,7 +28,7 @@ module.exports = readAndMergeConfig = async() => {
 
       if (await fs.exists(path.join(process.cwd(), 'greenwood.config.js'))) {
         const userCfgFile = require(path.join(process.cwd(), 'greenwood.config.js'));
-        const { workspace, devServer, publicPath, title, meta, plugins, themeFile, markdown } = userCfgFile;
+        const { workspace, devServer, optimization, publicPath, title, meta, plugins, themeFile, markdown } = userCfgFile;
 
         // workspace validation
         if (workspace) {
@@ -72,6 +75,12 @@ module.exports = readAndMergeConfig = async() => {
           customConfig.meta = meta;
         }
 
+        if (typeof optimization === 'string' && optimizations.indexOf(optimization.toLowerCase()) >= 0) {
+          customConfig.optimization = optimization;
+        } else if (optimization) {
+          reject(`Error: provided optimization "${optimization}" is not supported.  Please use one of: ${optimizations.join(', ')}.`);
+        }
+
         if (plugins && plugins.length > 0) {
           const types = ['index', 'webpack'];
 

packages/cli/src/lifecycles/serialize.js

@@ -21,13 +21,27 @@ module.exports = serializeBuild = async (compilation) => {
 
         return await browserRunner.serialize(`http://127.0.0.1:${PORT}${route}`).then(async (content) => {
           const target = path.join(publicDir, route);
-          const html = content
-            .replace(polyfill, '')
-            .replace('<script></script>', `
-              <script data-state="apollo">
+          const optimization = compilation.config.optimization;
+          const isStrictOptimization = optimization === 'strict';
+          const apolloScript = isStrictOptimization
+            ? ''
+            : `<script data-state="apollo">
                 window.__APOLLO_STATE__ = true;
               </script> 
-            `);
+            `;
+
+          let html = content
+            .replace(polyfill, '')
+            .replace('<script></script>', apolloScript);
+
+          if (isStrictOptimization) { // no javascript
+            html = html.replace(/<script type="text\/javascript" src="\/index.*.bundle\.js"><\/script>/, ''); // main bundle
+            html = html.replace(/<script charset="utf-8" src="\/*.*.bundle\.js"><\/script>/, ''); // dynamic / import() bundles
+            html = html.replace(/<lit-route path="(.*)" component="(.*)" class="(.*)">(.*)<\/lit-route>/g, ''); // lit redux routes
+          } else if (optimization === 'spa') { // all the javascript, and async!
+            html = html.replace(/<script type="text\/javascript"/, '<script async="" type="text/javascript"');
+            html = html.replace(/<script charset="utf-8"/, '<script async="" charset="utf-8"'); // dynamic / import() bundles
+          }
 
           await fs.mkdirs(target, { recursive: true });
           await fs.writeFile(path.join(target, 'index.html'), html);

packages/cli/test/cases/build.config.error-mode/build.config.error-mode.spec.js

@@ -0,0 +1,44 @@
+/*
+ * Use Case
+ * Run Greenwood build command with a bad value for optimization in a custom config.
+ *
+ * User Result
+ * Should throw an error.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   optimization: 'lorumipsum'
+ * }
+ *
+ * User Workspace
+ * Greenwood default
+ */
+const expect = require('chai').expect;
+const TestBed = require('../../../../../test/test-bed');
+
+describe('Build Greenwood With: ', function() {
+  let setup;
+
+  before(async function() {
+    setup = new TestBed();
+    await setup.setupTestBed(__dirname);
+  });
+
+  describe('Custom Configuration with a bad value for Optimization', function() {
+    it('should throw an error that provided optimization is not valid', async function() {
+      try {
+        await setup.runGreenwoodCommand('build');
+      } catch (err) {
+        expect(err).to.contain('Error: provided optimization "loremipsum" is not supported.  Please use one of: strict, spa.');
+      }
+    });
+  });
+
+  after(function() {
+    setup.teardownTestBed();
+  });
+
+});

packages/cli/test/cases/build.config.error-mode/greenwood.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  optimization: 'loremipsum'
+};

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

@@ -83,7 +83,7 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('should have one <script> tag in the <body> for the main bundle', function() {
-        const scriptTags = dom.window.document.querySelectorAll('body script');
+        const scriptTags = dom.window.document.querySelectorAll('body > script');
         const bundledScript = Array.prototype.slice.call(scriptTags).filter(script => {
           const src = script.src.replace('file:///', '');
 
@@ -93,6 +93,32 @@ describe('Build Greenwood With: ', function() {
         expect(bundledScript.length).to.be.equal(1);
       });
 
+      it('should have one <script> tag in the <body> for the main bundle loaded with async', 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(bundledScript[0].getAttribute('async')).to.be.equal('');
+      });
+
+      it('should have one <script> tag for Apollo state', function() {
+        const scriptTags = dom.window.document.querySelectorAll('script');
+        const bundleScripts = Array.prototype.slice.call(scriptTags).filter(script => {
+          return script.getAttribute('data-state') === 'apollo';
+        });
+
+        expect(bundleScripts.length).to.be.equal(1);
+      });
+
+      it('should have only one <script> tag in the <head>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('head > script');
+
+        expect(scriptTags.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.config.mode/build.config.mode.spec.js

@@ -0,0 +1,95 @@
+/*
+ * Use Case
+ * Run Greenwood with optimization setting in Greenwood config set to strict.
+ *
+ * User Result
+ * Should generate a bare bones Greenwood build with bundle JavaScript and routes.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   optimization: 'spa'
+ * }
+ *
+ * User Workspace
+ * Greenwood default w/ nested page
+ *  src/
+ *   pages/
+ *     about/
+ *       index.md
+ *     hello.md
+ *     index.md
+ */
+const { JSDOM } = require('jsdom');
+const path = require('path');
+const expect = require('chai').expect;
+const runSmokeTest = require('../../../../../test/smoke-test');
+const TestBed = require('../../../../../test/test-bed');
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Custom Mode';
+  let setup;
+
+  before(async function() {
+    setup = new TestBed();
+    this.context = await setup.setupTestBed(__dirname);
+  });
+
+  describe(LABEL, function() {
+
+    before(async function() {
+      await setup.runGreenwoodCommand('build');
+    });
+
+    runSmokeTest(['public', 'not-found', 'hello'], LABEL);
+
+    describe('Strict', function() {
+      let dom;
+
+      beforeEach(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
+      });
+
+      it('should have no <script> tag in the <body>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('body > script');
+
+        expect(scriptTags.length).to.be.equal(0);
+      });
+
+      it('should have no <script> tags in the <head>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('head > script');
+
+        expect(scriptTags.length).to.be.equal(0);
+      });
+
+      it('should have no <script> tags for Apollo state', function() {
+        const scriptTags = dom.window.document.querySelectorAll('script');
+        const bundleScripts = Array.prototype.slice.call(scriptTags).filter(script => {
+          return script.getAttribute('data-state') === 'apollo';
+        });
+
+        expect(bundleScripts.length).to.be.equal(0);
+      });
+
+      it('should have a router outlet tag in the <body>', function() {
+        const outlet = dom.window.document.querySelectorAll('body eve-app');
+
+        expect(outlet.length).to.be.equal(1);
+      });
+
+      it('should have only 2 route tags in the <body>', function() {
+        const routes = dom.window.document.querySelectorAll('body lit-route');
+
+        expect(routes.length).to.be.equal(2);
+      });
+    });
+
+  });
+
+  after(function() {
+    setup.teardownTestBed();
+  });
+
+});

packages/cli/test/cases/build.config.mode/greenwood.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  optimization: 'strict'
+};

packages/cli/test/cases/build.config.mode/src/pages/hello.md

@@ -0,0 +1,7 @@
+---
+label: 'hello'
+title: 'Hello Page'
+---
+### Hello World
+
+This is an example page built by Greenwood.  Make your own in _src/pages_!

packages/cli/test/cases/build.config.mode/src/pages/index.md

@@ -0,0 +1,3 @@
+### Greenwood
+
+This is the home page built by Greenwood. Make your own pages in src/pages/index.js!

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

@@ -64,9 +64,8 @@ describe('Build Greenwood With: ', function() {
         expect(title).to.be.equal(configTitle);
       });
 
-      // rest of index smoke-test because <title></title> is changed for this case
       it('should have one <script> tag in the <body> for the main bundle', function() {
-        const scriptTags = dom.window.document.querySelectorAll('body script');
+        const scriptTags = dom.window.document.querySelectorAll('body > script');
         const bundledScript = Array.prototype.slice.call(scriptTags).filter(script => {
           const src = script.src.replace('file:///', '');
 
@@ -75,6 +74,32 @@ describe('Build Greenwood With: ', function() {
 
         expect(bundledScript.length).to.be.equal(1);
       });
+
+      it('should have one <script> tag in the <body> for the main bundle loaded with async', 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(bundledScript[0].getAttribute('async')).to.be.equal('');
+      });
+
+      it('should have one <script> tag for Apollo state', function() {
+        const scriptTags = dom.window.document.querySelectorAll('script');
+        const bundleScripts = Array.prototype.slice.call(scriptTags).filter(script => {
+          return script.getAttribute('data-state') === 'apollo';
+        });
+
+        expect(bundleScripts.length).to.be.equal(1);
+      });
+
+      it('should have only one <script> tag in the <head>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('head > script');
+
+        expect(scriptTags.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');