Feature/issue 855 prerender default to false optional puppeteer

greenwood.config.js

@@ -13,6 +13,7 @@ const FAVICON_HREF = '/assets/favicon.ico';
 export default {
   workspace: fileURLToPath(new URL('./www', import.meta.url)),
   mode: 'mpa',
+  prerender: true,
   optimization: 'inline',
   title: 'Greenwood',
   meta: [

packages/cli/package.json

@@ -23,6 +23,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "peerDependencies": {
+    "puppeteer": "^10.2.0"
+  },
   "dependencies": {
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.3.4",
@@ -40,7 +43,6 @@
     "node-html-parser": "^1.2.21",
     "postcss": "^8.3.11",
     "postcss-import": "^13.0.0",
-    "puppeteer": "^10.2.0",
     "rehype-raw": "^5.0.0",
     "rehype-stringify": "^8.0.0",
     "remark-frontmatter": "^2.0.0",
@@ -61,6 +63,7 @@
     "lit-redux-router": "~0.20.0",
     "lodash-es": "^4.17.20",
     "postcss-nested": "^4.1.2",
+    "puppeteer": "^10.2.0",
     "pwa-helpers": "^0.9.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

packages/cli/src/commands/build.js

@@ -2,16 +2,14 @@ import { bundleCompilation } from '../lifecycles/bundle.js';
 import { copyAssets } from '../lifecycles/copy.js';
 import { devServer } from '../lifecycles/serve.js';
 import fs from 'fs';
-import { generateCompilation } from '../lifecycles/compile.js';
 import { preRenderCompilation, staticRenderCompilation } from '../lifecycles/prerender.js';
 import { ServerInterface } from '../lib/server-interface.js';
 
-const runProductionBuild = async () => {
+const runProductionBuild = async (compilation) => {
 
   return new Promise(async (resolve, reject) => {
 
     try {
-      const compilation = await generateCompilation();
       const { prerender } = compilation.config;
       const port = compilation.config.devServer.port;
       const outputDir = compilation.context.outputDir;

packages/cli/src/commands/develop.js

@@ -1,13 +1,11 @@
-import { generateCompilation } from '../lifecycles/compile.js';
 import { ServerInterface } from '../lib/server-interface.js';
 import { devServer } from '../lifecycles/serve.js';
 
-const runDevServer = async () => {
+const runDevServer = async (compilation) => {
 
   return new Promise(async (resolve, reject) => {
 
     try {
-      const compilation = await generateCompilation();
       const { port } = compilation.config.devServer;
 
       (await devServer(compilation)).listen(port, () => {

packages/cli/src/commands/eject.js

@@ -1,12 +1,10 @@
 import fs from 'fs';
-import { generateCompilation } from '../lifecycles/compile.js';
 import path from 'path';
 import { fileURLToPath, URL } from 'url';
 
-const ejectConfiguration = async () => {
+const ejectConfiguration = async (compilation) => {
   return new Promise(async (resolve, reject) => {
     try {
-      const compilation = await generateCompilation();
       const configFilePath = fileURLToPath(new URL('../config', import.meta.url));
       const configFiles = fs.readdirSync(configFilePath);
 

packages/cli/src/commands/serve.js

@@ -1,12 +1,10 @@
-import { generateCompilation } from '../lifecycles/compile.js';
 import { prodServer } from '../lifecycles/serve.js';
 
-const runProdServer = async () => {
+const runProdServer = async (compilation) => {
 
   return new Promise(async (resolve, reject) => {
 
     try {
-      const compilation = await generateCompilation();
       const port = 8080;
 
       (await prodServer(compilation)).listen(port, () => {

packages/cli/src/index.js

@@ -5,15 +5,11 @@
 // https://github.com/ProjectEvergreen/greenwood/issues/141
 process.setMaxListeners(0);
 
+import { generateCompilation } from './lifecycles/compile.js';
 import program from 'commander';
 import fs from 'fs/promises';
 import { URL } from 'url';
 
-import { runDevServer } from './commands/develop.js';
-import { runProductionBuild } from './commands/build.js';
-import { runProdServer } from './commands/serve.js';
-import { ejectConfiguration } from './commands/eject.js';
-
 const greenwoodPackageJson = JSON.parse(await fs.readFile(new URL('../package.json', import.meta.url), 'utf-8'));
 let cmdOption = {};
 let command = '';
@@ -63,30 +59,68 @@ if (program.parse.length === 0) {
   program.help();
 }
 
-const run = async() => {  
+const run = async() => {
+  const compilation = await generateCompilation();
+
   try {
     console.info(`Running Greenwood with the ${command} command.`);
     process.env.__GWD_COMMAND__ = command;
-
+
+    // auto install puppeteer if user has enabled prerendering
+    if (compilation.config.prerender) {
+      try {
+        await import('puppeteer');
+      } catch (e) {
+        console.debug('puppeteer not detected', e);
+        console.debug('auto intalling puppeteer...');
+        const os = await import('os');
+        const spawn = (await import('child_process')).spawn;
+        const pkgMng = 'yarn'; // program.yarn ? 'yarn' : 'npm'; // default to npm
+        const command = pkgMng === 'yarn' ? 'add' : 'install';
+        const pkgCommand = os.platform() === 'win32' ? `${pkgMng}.cmd` : pkgMng;
+        const args = [command, 'puppeteer@^10.2.0'];
+
+        try {
+          await new Promise((resolve, reject) => {
+
+            const process = spawn(pkgCommand, args, { stdio: 'ignore' });
+
+            process.on('close', code => {
+              if (code !== 0) {
+                reject({
+                  command: `${pkgCommand} ${args.join(' ')}`
+                });
+                return;
+              }
+              console.debug('auto installation successful!');
+              resolve();
+            });
+          });
+        } catch (err) {
+          console.error('not able to handle installing puppeteer', err);
+        }
+      }
+    }
+
     switch (command) {
 
-      case 'build':   
-        await runProductionBuild();
+      case 'build':
+        await (await import('./commands/build.js')).runProductionBuild(compilation);
 
         break;
       case 'develop':
-        await runDevServer();
+        await (await import('./commands/develop.js')).runDevServer(compilation);
 
         break;
       case 'serve':
         process.env.__GWD_COMMAND__ = 'build';
-        
-        await runProductionBuild();
-        await runProdServer();
+
+        await (await import('./commands/build.js')).runProductionBuild(compilation);
+        await (await import('./commands/serve.js')).runProdServer(compilation);
 
         break;
       case 'eject':
-        await ejectConfiguration();
+        await (await import('./commands/eject.js')).ejectConfiguration(compilation);
 
         break;
       default: 

packages/cli/src/lifecycles/config.js

@@ -45,7 +45,7 @@ const defaultConfig = {
   meta: [],
   plugins: greenwoodPlugins,
   markdown: { plugins: [], settings: {} },
-  prerender: true,
+  prerender: false,
   pagesDirectory: 'pages',
   templatesDirectory: 'templates'
 };
@@ -176,7 +176,7 @@ const readAndMergeConfig = async() => {
           }
         }
 
-        // SPA should _not_ prerender if user has specified prerender should be true
+        // SPA mode should _not_ prerender unless user has chosen to set it to true
         if (prerender === undefined && mode === 'spa') {
           customConfig.prerender = false;
         }

packages/cli/test/cases/build.config.optimization-default/build.config-optimization-default.spec.js

@@ -75,13 +75,6 @@ describe('Build Greenwood With: ', function() {
           expect(preloadScriptTags.length).to.be.equal(1);
           expect(preloadScriptTags[0].href).to.match(/header.*.js/);
         });
-
-        it('should contain the expected content from <app-header> in the <body>', function() {
-          const header = dom.window.document.querySelectorAll('body header');
-
-          expect(header.length).to.be.equal(1);
-          expect(header[0].textContent).to.be.equal('This is the header component.');
-        });
       });
 
       describe('<link> tag and preloading', function() {

packages/cli/test/cases/build.config.optimization-inline/build.config-optimization-inline.spec.js

@@ -96,13 +96,6 @@ describe('Build Greenwood With: ', function() {
           // eslint-disable-next-line max-len
           expect(scriptTag.textContent).to.be.contain('class e extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML="\\n      <header>This is the header component.</header>\\n    "}}customElements.define("app-header",e);');
         });
-
-        it('should contain the expected content from <app-header> in the <body>', function() {
-          const header = dom.window.document.querySelectorAll('body header');
-
-          expect(header.length).to.be.equal(1);
-          expect(header[0].textContent).to.be.equal('This is the header component.');
-        });
       });
 
       // assume the second tag is for FooBar
@@ -139,22 +132,19 @@ describe('Build Greenwood With: ', function() {
         it('should contain two <style> tags with the expected CSS content inlined for theme.css and pages.css', function() {
           const styleTags = dom.window.document.querySelectorAll('head style');
 
-          // one for puppeteer
-          expect(styleTags.length).to.be.equal(3);
+          expect(styleTags.length).to.be.equal(2);
         });
 
         it('should contain the expected CSS content inlined for theme.css', function() {
           const styleTags = dom.window.document.querySelectorAll('head style');
 
-          // one for puppeteer
-          expect(styleTags[1].textContent).to.be.contain('*{font-family:Comic Sans,sans-serif;margin:0;padding:0}');
+          expect(styleTags[0].textContent).to.be.contain('*{font-family:Comic Sans,sans-serif;margin:0;padding:0}');
         });
 
         it('should contain the expected CSS content inlined for page.css', function() {
           const styleTags = dom.window.document.querySelectorAll('head style');
 
-          // one for puppeteer
-          expect(styleTags[2].textContent).to.be.contain('body{color:red}');
+          expect(styleTags[1].textContent).to.be.contain('body{color:red}');
         });
       });
     });

packages/cli/test/cases/build.config.optimization-none/build.config-optimization-none.spec.js

@@ -88,11 +88,10 @@ describe('Build Greenwood With: ', function() {
           expect(scriptTags.length).to.be.equal(1);
         });
 
-        it('should contain the expected content from <app-header> in the <body>', function() {
-          const header = dom.window.document.querySelectorAll('body header');
+        it('should contain the expected <app-header> in the <body>', function() {
+          const header = dom.window.document.querySelectorAll('body app-header');
 
           expect(header.length).to.be.equal(1);
-          expect(header[0].textContent).to.be.equal('This is the header component.');
         });
       });
 

packages/cli/test/cases/build.config.optimization-overrides/build.config-optimization-overrides.spec.js

@@ -76,11 +76,10 @@ describe('Build Greenwood With: ', function() {
         expect(scriptTags.length).to.be.equal(1);
       });
 
-      // one of these tags comes from puppeteer
       it('should have two <style> tags in the <head>', function() {
         const styleTags = dom.window.document.querySelectorAll('head style');
 
-        expect(styleTags.length).to.be.equal(2);
+        expect(styleTags.length).to.be.equal(1);
       });
 
       it('should have no <link> tags in the <head>', function() {
@@ -110,13 +109,6 @@ describe('Build Greenwood With: ', function() {
 
         expect(headerScriptTags.length).to.be.equal(0);
       });
-
-      it('should contain the expected content from <app-header> in the <body>', function() {
-        const headerScriptTags = dom.window.document.querySelectorAll('body header');
-
-        expect(headerScriptTags.length).to.be.equal(1);
-        expect(headerScriptTags[0].textContent).to.be.equal('This is the header component.');
-      });
     });
 
     describe('JavaScript <script> tag and inline optimization override for <app-footer>', function() {
@@ -143,13 +135,6 @@ describe('Build Greenwood With: ', function() {
 
         expect(footerScriptTags.length).to.be.equal(1);
       });
-
-      it('should contain the expected content from <app-footer> in the <body>', function() {
-        const footer = dom.window.document.querySelectorAll('body footer');
-
-        expect(footer.length).to.be.equal(1);
-        expect(footer[0].textContent).to.be.equal('This is the footer component.');
-      });
     });
 
     describe('CSS <link> tag and inline optimization override for theme.css', function() {

packages/cli/test/cases/build.config.optimization-static/build.config-optimization-static.spec.js

@@ -1,6 +1,6 @@
 /*
  * Use Case
- * Run Greenwood build command with static setting for optimization.
+ * Run Greenwood build command with static setting for optimization and adds prerender to true to validate with puppeteer.
  *
  * User Result
  * Should generate a Greenwood build that strips all <script> tags and files from the final HTML and output.
@@ -10,7 +10,8 @@
  *
  * User Config
  * {
- *   optimization: 'static'
+ *   optimization: 'static',
+ *   prerender: true
  * }
  *
  * Custom Workspace

packages/cli/test/cases/build.config.optimization-static/greenwood.config.js

@@ -1,3 +1,4 @@
 export default {
-  optimization: 'static'
+  optimization: 'static',
+  prerender: true
 };

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

@@ -1,16 +1,16 @@
 /*
  * Use Case
- * Run Greenwood build command with prerender config set to false.
+ * Run Greenwood build command with prerender config set to true.
  *
  * User Result
- * Should generate a Greenwood build with no puppeteer generated output.
+ * Should generate a Greenwood build with puppeteer generated output for Web Components.
  *
  * User Command
  * greenwood build
  *
  * User Config
  * {
- *   prerender: false
+ *   prerender: true
  * }
  *
  * User Workspace
@@ -31,7 +31,7 @@ import { fileURLToPath, URL } from 'url';
 const expect = chai.expect;
 
 describe('Build Greenwood With: ', function() {
-  const LABEL = 'Prerender Configuration turned off';
+  const LABEL = 'Prerender Configuration turned on';
   const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
   const outputPath = fileURLToPath(new URL('.', import.meta.url));
   let runner;
@@ -104,12 +104,13 @@ describe('Build Greenwood With: ', function() {
         expect(heading).to.equal('Welcome to Greenwood!');
       });
 
-      it('should not have any prerendered content from <app-header> component', function() {
+      it('should have prerendered content from <app-header> component', function() {
         const appHeader = dom.window.document.querySelectorAll('body app-header');
         const header = dom.window.document.querySelectorAll('body header');
 
         expect(appHeader.length).to.equal(1);
-        expect(header.length).to.equal(0);
+        expect(header.length).to.equal(1);
+        expect(header[0].textContent).to.equal('This is the header component.');
       });
     });
   });

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

@@ -1,3 +1,3 @@
 export default {
-  prerender: false
+  prerender: true
 };