From 78afc2887c2cef643f8e25342880877847888711 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sun, 2 Aug 2020 09:35:43 -0400
Subject: [PATCH] refactoring out page bundles in strict mode

---
 packages/cli/src/lifecycles/serialize.js      | 17 ++++++---
 .../build.config.mode.spec.js                 |  2 +-
 ...uild.data.graph-custom-frontmatter.spec.js | 11 ++----
 .../build.data.graph/build.data.graph.spec.js | 30 ++++-----------
 .../test/cases/default/default.spec.js        | 33 +++++++++-------
 .../option-anonymous/option-anonymous.spec.js | 38 ++++++++++++++-----
 .../test/cases/default/default.spec.js        |  8 +++-
 test/smoke-test.js                            | 37 +++++++-----------
 8 files changed, 93 insertions(+), 83 deletions(-)

diff --git a/packages/cli/src/lifecycles/serialize.js b/packages/cli/src/lifecycles/serialize.js
index dcf400f29..a53bc444b 100644
--- a/packages/cli/src/lifecycles/serialize.js
+++ b/packages/cli/src/lifecycles/serialize.js
@@ -22,16 +22,21 @@ 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 mode = compilation.config.mode;
-          let html = content
-            .replace(polyfill, '')
-            .replace('<script></script>', `
-              <script data-state="apollo">
+          const isStrictMode = mode === 'strict';
+          const apolloScript = isStrictMode
+            ? ''
+            : `<script data-state="apollo">
                 window.__APOLLO_STATE__ = true;
               </script> 
-            `);
+            `;
+          
+          let html = content
+            .replace(polyfill, '')
+            .replace('<script></script>', apolloScript);
 
-          if (mode === 'strict') { // no javascript
+          if (isStrictMode) { // no javascript
             html = html.replace(/<script type="text\/javascript" src="\/index.*.bundle\.js"><\/script>/, '');
+            html = html.replace(/<script charset="utf-8" src="\/*.*.bundle\.js"><\/script>/, '');
           } else if (mode === 'spa') { // all the javascript, and async!
             html = html.replace(/<script type="text\/javascript"/, '<script async="true" type="text/javascript"');
           }
diff --git a/packages/cli/test/cases/build.config.mode/build.config.mode.spec.js b/packages/cli/test/cases/build.config.mode/build.config.mode.spec.js
index c6c4091b2..d7bfccbe6 100644
--- a/packages/cli/test/cases/build.config.mode/build.config.mode.spec.js
+++ b/packages/cli/test/cases/build.config.mode/build.config.mode.spec.js
@@ -77,7 +77,7 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('should have one <script> tag for Apollo state', function() {
-        const scriptTags = dom.window.document.querySelectorAll('script');
+        const scriptTags = dom.window.document.querySelectorAll('head > script');
         const bundleScripts = Array.prototype.slice.call(scriptTags).filter(script => {
           return script.getAttribute('data-state') === 'apollo';
         });
diff --git a/packages/cli/test/cases/build.data.graph-custom-frontmatter/build.data.graph-custom-frontmatter.spec.js b/packages/cli/test/cases/build.data.graph-custom-frontmatter/build.data.graph-custom-frontmatter.spec.js
index d4cb63f9a..4a9756b7f 100644
--- a/packages/cli/test/cases/build.data.graph-custom-frontmatter/build.data.graph-custom-frontmatter.spec.js
+++ b/packages/cli/test/cases/build.data.graph-custom-frontmatter/build.data.graph-custom-frontmatter.spec.js
@@ -29,7 +29,6 @@ const TestBed = require('../../../../../test/test-bed');
 
 describe('Build Greenwood With: ', function() {
   const LABEL = 'Data from GraphQL and using Custom Frontmatter Data';
-  const apolloStateRegex = /window.__APOLLO_STATE__ = true/;
   let setup;
 
   before(async function() {
@@ -67,15 +66,11 @@ describe('Build Greenwood With: ', function() {
           expect(cache).to.not.be.undefined;
         });
       });
-
-      it('should have one window.__APOLLO_STATE__ <script> with (approximated) expected state', () => {
+      
+      it('should have no <script> tags in the <head>', () => {
         const scriptTags = dom.window.document.querySelectorAll('head > script');
-        const apolloScriptTags = Array.prototype.slice.call(scriptTags).filter(script => {
-          return script.getAttribute('data-state') === 'apollo';
-        });
 
-        expect(apolloScriptTags.length).to.be.equal(1);
-        expect(apolloScriptTags[0].innerHTML).to.match(apolloStateRegex);
+        expect(scriptTags.length).to.be.equal(0);
       });
 
       it('should have expected blog posts links in the <body> tag when using ChildrenQuery', function() {
diff --git a/packages/cli/test/cases/build.data.graph/build.data.graph.spec.js b/packages/cli/test/cases/build.data.graph/build.data.graph.spec.js
index f9801d9c7..594dc402d 100644
--- a/packages/cli/test/cases/build.data.graph/build.data.graph.spec.js
+++ b/packages/cli/test/cases/build.data.graph/build.data.graph.spec.js
@@ -36,7 +36,6 @@ const TestBed = require('../../../../../test/test-bed');
 
 describe('Build Greenwood With: ', function() {
   const LABEL = 'Data from GraphQL';
-  const apolloStateRegex = /window.__APOLLO_STATE__ = true/;
   let setup;
 
   before(async function() {
@@ -87,15 +86,10 @@ describe('Build Greenwood With: ', function() {
         });
       });
 
-      it('should have one window.__APOLLO_STATE__ <script> with (approximated) expected state', () => {
+      it('should have no <script> tags in the <head>', () => {
         const scriptTags = dom.window.document.querySelectorAll('head > script');
-        const apolloScriptTags = Array.prototype.slice.call(scriptTags).filter(script => {
-          return script.getAttribute('data-state') === 'apollo';
-        });
-        const innerHTML = apolloScriptTags[0].innerHTML;
 
-        expect(apolloScriptTags.length).to.equal(1);
-        expect(innerHTML).to.match(apolloStateRegex);
+        expect(scriptTags.length).to.be.equal(0);
       });
 
       it('should have a <header> tag in the <body>', function() {
@@ -130,14 +124,10 @@ describe('Build Greenwood With: ', function() {
         expect(fs.existsSync(path.join(this.context.publicDir, 'blog', 'index.html'))).to.be.true;
       });
 
-      it('should have one window.__APOLLO_STATE__ <script> with (approximated) expected state', () => {
-        const scriptTags = dom.window.document.querySelectorAll('head > script');
-        const apolloScriptTags = Array.prototype.slice.call(scriptTags).filter(script => {
-          return script.getAttribute('data-state') === 'apollo';
-        });
+      it('should have no <script> tags in the <head>', () => {
+        const scriptTags = dom.window.document.querySelectorAll('body ~ script');
 
-        expect(apolloScriptTags.length).to.be.equal(1);
-        expect(apolloScriptTags[0].innerHTML).to.match(apolloStateRegex);
+        expect(scriptTags.length).to.be.equal(0);
       });
 
       it('should have a <header> tag in the <body>', function() {
@@ -195,14 +185,10 @@ describe('Build Greenwood With: ', function() {
         expect(fs.existsSync(path.join(this.context.publicDir, 'blog', 'first-post', 'index.html'))).to.be.true;
       });
 
-      it('should have one window.__APOLLO_STATE__ <script> with (approximated) expected state', () => {
-        const scriptTags = dom.window.document.querySelectorAll('head > script');
-        const apolloScriptTags = Array.prototype.slice.call(scriptTags).filter(script => {
-          return script.getAttribute('data-state') === 'apollo';
-        });
+      it('should have no <script> tags in the <head>', () => {
+        const scriptTags = dom.window.document.querySelectorAll('body > script');
 
-        expect(apolloScriptTags.length).to.be.equal(1);
-        expect(apolloScriptTags[0].innerHTML).to.match(apolloStateRegex);
+        expect(scriptTags.length).to.be.equal(0);
       });
 
       it('should have a <header> tag in the <body>', function() {
diff --git a/packages/plugin-google-analytics/test/cases/default/default.spec.js b/packages/plugin-google-analytics/test/cases/default/default.spec.js
index 69514f7e1..45ba9e6a0 100644
--- a/packages/plugin-google-analytics/test/cases/default/default.spec.js
+++ b/packages/plugin-google-analytics/test/cases/default/default.spec.js
@@ -45,28 +45,33 @@ describe('Build Greenwood With: ', function() {
       await setup.runGreenwoodCommand('build');
     });
 
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
+    runSmokeTest(['public', 'not-found', 'hello'], LABEL);
 
     describe('Initialization script', function() {
-      let inlineScript = [];
       let scriptSrcTags = [];
+      let inlineScripts = [];
+      let dom;
 
       beforeEach(async function() {
-        const dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
-        const scriptTags = dom.window.document.querySelectorAll('head script');
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
 
-        inlineScript = Array.prototype.slice.call(scriptTags).filter(script => {
-          return !script.src && !script.getAttribute('data-state');
-        });
+        const headTags = dom.window.document.querySelectorAll('head script');
 
-        scriptSrcTags = Array.prototype.slice.call(scriptTags).filter(script => {
+        inlineScripts = Array.prototype.slice.call(headTags).filter(script => {
+          return !script.src;
+        });
+        
+        scriptSrcTags = Array.prototype.slice.call(headTags).filter(script => {
           return script.src && script.src.indexOf('google') >= 0;
         });
+      });
 
+      it('should be one inline <script> tag in the <head>', function() {
+        expect(inlineScripts.length).to.be.equal(1);
       });
 
-      it('should be one inline <script> tag', function() {
-        expect(inlineScript.length).to.be.equal(1);
+      it('should be one <script> tag in the <head>', function() {
+        expect(scriptSrcTags.length).to.be.equal(1);
       });
 
       it('should have the expected code with users analyicsId', function() {
@@ -87,11 +92,13 @@ describe('Build Greenwood With: ', function() {
             gtag('config', '${mockAnalyticsId}');
         `;
 
-        expect(inlineScript[0].textContent).to.contain(expectedContent);
+        expect(inlineScripts[0].textContent).to.contain(expectedContent);
       });
 
-      it('should only have one external Google script tag', function() {
-        expect(scriptSrcTags.length).to.be.equal(1);
+      it('should not add any <script> tags to the body', function() {
+        const bodyTags = dom.window.document.querySelectorAll('body script');
+
+        expect(bodyTags.length).to.be.equal(0);
       });
     });
 
diff --git a/packages/plugin-google-analytics/test/cases/option-anonymous/option-anonymous.spec.js b/packages/plugin-google-analytics/test/cases/option-anonymous/option-anonymous.spec.js
index 186b671d5..5c4e95d5e 100644
--- a/packages/plugin-google-analytics/test/cases/option-anonymous/option-anonymous.spec.js
+++ b/packages/plugin-google-analytics/test/cases/option-anonymous/option-anonymous.spec.js
@@ -46,23 +46,37 @@ describe('Build Greenwood With: ', function() {
       await setup.runGreenwoodCommand('build');
     });
 
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
+    runSmokeTest(['public', 'not-found', 'hello'], LABEL);
 
     describe('Initialization script', function() {
-      let inlineScript;
+      let scriptSrcTags = [];
+      let inlineScripts = [];
+      let dom;
 
       beforeEach(async function() {
-        const dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
-        const scriptTags = dom.window.document.querySelectorAll('head script');
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
+      });
+
+      it('should be one inline <script> tag in the <head>', function() {
+        const headTags = dom.window.document.querySelectorAll('head script');
+
+        inlineScripts = Array.prototype.slice.call(headTags).filter(script => {
+          return !script.src;
+        });
 
-        inlineScript = Array.prototype.slice.call(scriptTags).filter(script => {
-          return !script.src && !script.getAttribute('data-state');
+        scriptSrcTags = Array.prototype.slice.call(headTags).filter(script => {
+          return script.src && script.src.indexOf('google') >= 0;
         });
 
+        expect(scriptSrcTags.length).to.be.equal(1);
       });
 
-      it('should be one inline <script> tag', function() {
-        expect(inlineScript.length).to.be.equal(1);
+      it('should be one inline <script> tag in the <head>', function() {
+        expect(inlineScripts.length).to.be.equal(1);
+      });
+
+      it('should be one <script> tag in the <head>', function() {
+        expect(scriptSrcTags.length).to.be.equal(1);
       });
 
       it('should have the expected code with users analyicsId', function() {
@@ -75,7 +89,13 @@ describe('Build Greenwood With: ', function() {
             gtag('config', '${mockAnalyticsId}');
         `;
 
-        expect(inlineScript[0].textContent).to.contain(expectedContent);
+        expect(inlineScripts[0].textContent).to.contain(expectedContent);
+      });
+
+      it('should not add more <script> tags to the body', function() {
+        const bodyTags = dom.window.document.querySelectorAll('body script');
+
+        expect(bodyTags.length).to.be.equal(0);
       });
     });
 
diff --git a/packages/plugin-polyfills/test/cases/default/default.spec.js b/packages/plugin-polyfills/test/cases/default/default.spec.js
index ee963f8e3..4bf72c6be 100644
--- a/packages/plugin-polyfills/test/cases/default/default.spec.js
+++ b/packages/plugin-polyfills/test/cases/default/default.spec.js
@@ -46,7 +46,7 @@ describe('Build Greenwood With: ', function() {
       await setup.runGreenwoodCommand('build');
     });
 
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
+    runSmokeTest(['public', 'not-found', 'hello'], LABEL);
 
     describe('Script tag in the <head> tag', function() {
       let dom;
@@ -65,6 +65,12 @@ describe('Build Greenwood With: ', function() {
         expect(polyfillScriptTags.length).to.be.equal(1);
       });
 
+      it('should not add more <script> tags to the <body>', function() {
+        const bodyTags = dom.window.document.querySelectorAll('body script');
+
+        expect(bodyTags.length).to.be.equal(0);
+      });
+
     });
   });
 
diff --git a/test/smoke-test.js b/test/smoke-test.js
index 73700edcb..eda7d4fbf 100644
--- a/test/smoke-test.js
+++ b/test/smoke-test.js
@@ -12,8 +12,6 @@ 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() {
@@ -45,15 +43,16 @@ function defaultNotFound(label) {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, '404.html'));
       });
 
-      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:///', '');
+      it('should have one <script> tag in the <body>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('body > script');
 
-          return mainBundleScriptRegex.test(src);
-        });
+        expect(scriptTags.length).to.be.equal(1);
+      });
+      
+      it('should have no <script> tags in the <head>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('body > head');
 
-        expect(bundledScript.length).to.be.equal(1);
+        expect(scriptTags.length).to.be.equal(0);
       });
 
       it('should have a <title> tag in the <head>', function() {
@@ -88,24 +87,16 @@ function defaultIndex(label) {
         expect(title).to.be.equal('My App');
       });
 
-      it('should have one <script> tag in the <body> for the main bundle', function() {
-        const scriptTags = dom.window.document.querySelectorAll('body app-root ~ script');
-        const bundledScript = Array.prototype.slice.call(scriptTags).filter(script => {
-          const src = script.src.replace('file:///', '');
-
-          return mainBundleScriptRegex.test(src);
-        });
+      it('should have no <script> tag in the <body>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('body > script');
 
-        expect(bundledScript.length).to.be.equal(0);
+        expect(scriptTags.length).to.be.equal(0);
       });
       
-      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';
-        });
+      it('should have no <script> tags in the <head>', function() {
+        const scriptTags = dom.window.document.querySelectorAll('head > script');
 
-        expect(bundleScripts.length).to.be.equal(1);
+        expect(scriptTags.length).to.be.equal(0);
       });
 
       it('should have a router outlet tag in the <body>', function() {