Skip to content

Commit

Permalink
refactoring out page bundles in strict mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@thescientist13
thescientist13 committed Aug 2, 2020
1 parent 7288ebe commit 78afc28
Show file tree
Hide file tree
Showing 8 changed files with 93 additions and 83 deletions.
17 changes: 11 additions & 6 deletions packages/cli/src/lifecycles/serialize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"');
}
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/cases/build.config.mode/build.config.mode.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
});
Expand Down
11 changes: 3 additions & 8 deletions ...est/cases/build.data.graph-custom-frontmatter/build.data.graph-custom-frontmatter.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down
30 changes: 8 additions & 22 deletions packages/cli/test/cases/build.data.graph/build.data.graph.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down
33 changes: 20 additions & 13 deletions packages/plugin-google-analytics/test/cases/default/default.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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);
});
});

Expand Down
38 changes: 29 additions & 9 deletions packages/plugin-google-analytics/test/cases/option-anonymous/option-anonymous.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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);
});
});

Expand Down
8 changes: 7 additions & 1 deletion packages/plugin-polyfills/test/cases/default/default.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
});

});
});

Expand Down
37 changes: 14 additions & 23 deletions test/smoke-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down

0 comments on commit 78afc28

Please sign in to comment.