Feature/issue 954 puppeteer plugin

.c8rc.json

@@ -20,7 +20,7 @@
 
   "statements": 80,
   "branches": 85,
-  "functions": 90,
+  "functions": 85,
   "lines": 80,
 
   "watermarks": {

greenwood.config.js

@@ -4,6 +4,7 @@ import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
 import { greenwoodPluginImportJson } from '@greenwood/plugin-import-json';
 import { greenwoodPluginPolyfills } from '@greenwood/plugin-polyfills';
 import { greenwoodPluginPostCss } from '@greenwood/plugin-postcss';
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 import rollupPluginAnalyzer from 'rollup-plugin-analyzer';
 import { fileURLToPath, URL } from 'url';
 
@@ -33,7 +34,8 @@ export default {
         ];
       }
     },
-    ...greenwoodPluginIncludeHTML()
+    ...greenwoodPluginIncludeHTML(),
+    ...greenwoodPluginRendererPuppeteer()
   ],
   markdown: {
     plugins: [

packages/cli/package.json

@@ -23,18 +23,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {
-    "puppeteer": "^13.5.2"
-  },
-  "peerDependenciesMeta": {
-    "puppeteer": {
-      "optional": true
-    }
-  },
   "dependencies": {
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.3.4",
-    "@webcomponents/webcomponentsjs": "^2.6.0",
     "acorn": "^8.0.1",
     "acorn-walk": "^8.0.0",
     "commander": "^2.20.0",
@@ -56,7 +47,7 @@
     "rollup": "^2.58.0",
     "rollup-plugin-terser": "^7.0.0",
     "unified": "^9.2.0",
-    "wc-compiler": "~0.3.1"
+    "wc-compiler": "~0.4.0"
   },
   "devDependencies": {
     "@babel/runtime": "^7.10.4",
@@ -70,7 +61,6 @@
     "lit-redux-router": "~0.20.0",
     "lodash-es": "^4.17.20",
     "postcss-nested": "^4.1.2",
-    "puppeteer": "^13.5.2",
     "pwa-helpers": "^0.9.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

packages/cli/src/commands/build.js

@@ -1,8 +1,7 @@
 import { bundleCompilation } from '../lifecycles/bundle.js';
 import { copyAssets } from '../lifecycles/copy.js';
-import { getDevServer } from '../lifecycles/serve.js';
 import fs from 'fs';
-import { preRenderCompilationCustom, preRenderCompilationDefault, staticRenderCompilation } from '../lifecycles/prerender.js';
+import { preRenderCompilationWorker, preRenderCompilationCustom, staticRenderCompilation } from '../lifecycles/prerender.js';
 import { ServerInterface } from '../lib/server-interface.js';
 
 const runProductionBuild = async (compilation) => {
@@ -11,8 +10,10 @@ const runProductionBuild = async (compilation) => {
 
     try {
       const { prerender } = compilation.config;
-      const port = compilation.config.devServer.port;
       const outputDir = compilation.context.outputDir;
+      const defaultPrerender = (compilation.config.plugins.filter(plugin => plugin.type === 'renderer' && plugin.isGreenwoodDefaultPlugin) || []).length === 1
+        ? compilation.config.plugins.filter(plugin => plugin.type === 'renderer')[0].provider(compilation)
+        : {};
       const customPrerender = (compilation.config.plugins.filter(plugin => plugin.type === 'renderer' && !plugin.isGreenwoodDefaultPlugin) || []).length === 1
         ? compilation.config.plugins.filter(plugin => plugin.type === 'renderer')[0].provider(compilation)
         : {};
@@ -22,45 +23,40 @@ const runProductionBuild = async (compilation) => {
       }
 
       if (prerender || customPrerender.prerender) {
-        if (customPrerender.prerender) {
+        // start any servers if needed
+        const servers = [...compilation.config.plugins.filter((plugin) => {
+          return plugin.type === 'server';
+        }).map((plugin) => {
+          const provider = plugin.provider(compilation);
+
+          if (!(provider instanceof ServerInterface)) {
+            console.warn(`WARNING: ${plugin.name}'s provider is not an instance of ServerInterface.`);
+          }
+
+          return provider;
+        })];
+
+        await Promise.all(servers.map(async (server) => {
+          await server.start();
+
+          return Promise.resolve(server);
+        }));
+
+        if (customPrerender.workerUrl) {
+          await preRenderCompilationWorker(compilation, customPrerender);
+        } else if (customPrerender.customUrl) {
           await preRenderCompilationCustom(compilation, customPrerender);
+        } else if (defaultPrerender && prerender) {
+          await preRenderCompilationWorker(compilation, defaultPrerender);
         } else {
-          await new Promise(async (resolve, reject) => {
-            try {
-              (await getDevServer(compilation)).listen(port, async () => {
-                console.info(`Started prerender server at localhost:${port}`);
-
-                const servers = [...compilation.config.plugins.filter((plugin) => {
-                  return plugin.type === 'server';
-                }).map((plugin) => {
-                  const provider = plugin.provider(compilation);
-
-                  if (!(provider instanceof ServerInterface)) {
-                    console.warn(`WARNING: ${plugin.name}'s provider is not an instance of ServerInterface.`);
-                  }
-
-                  return provider;
-                })];
-
-                await Promise.all(servers.map(async (server) => {
-                  server.start();
-
-                  return Promise.resolve(server);
-                }));
-
-                await preRenderCompilationDefault(compilation);
-
-                resolve();
-              });
-            } catch (e) {
-              reject(e);
-            }
-          });
+          reject('This is an unhandled pre-rendering case!  Please report.');
         }
       } else {
         await staticRenderCompilation(compilation);
       }
 
+      console.info('success, done generating all pages!');
+
       await bundleCompilation(compilation);
       await copyAssets(compilation);
 

packages/cli/src/index.js

@@ -7,7 +7,6 @@ process.setMaxListeners(0);
 
 import { generateCompilation } from './lifecycles/compile.js';
 import fs from 'fs';
-import path from 'path';
 import program from 'commander';
 import { URL } from 'url';
 
@@ -60,40 +59,6 @@ if (program.parse.length === 0) {
   program.help();
 }
 
-// auto install puppeteer if user has enabled prerendering and not installed it already
-async function checkForPuppeteer(compilation) {
-  if (compilation.config.prerender && !fs.existsSync(path.join(process.cwd(), '/node_modules/puppeteer'))) {
-    const puppeteerVersion = greenwoodPackageJson.peerDependencies.puppeteer;
-    console.log('prerender configuration detected but puppeteer is not detected.');
-    console.log(`attempting to auto-install puppeteer@${puppeteerVersion} ...`);
-
-    try {
-      await new Promise(async (resolve, reject) => {
-        const os = await import('os');
-        const spawn = (await import('child_process')).spawn;
-        const pkgMng = fs.existsSync(path.join(process.cwd(), 'yarn.lock')) ? 'yarn' : 'npm';
-        const command = pkgMng === 'yarn' ? 'add' : 'install';
-        const commandFlags = pkgMng === 'yarn' ? '--dev' : '--save-dev';
-        const pkgCommand = os.platform() === 'win32' ? `${pkgMng}.cmd` : pkgMng;
-        const args = [command, `puppeteer@${puppeteerVersion}`, commandFlags];
-        const childProcess = spawn(pkgCommand, args, { stdio: 'ignore' });
-
-        childProcess.on('close', code => {
-          if (code !== 0) {
-            reject();
-            return;
-          }
-          console.log('auto installation successful!');
-          resolve();
-        });
-      });
-    } catch (e) {
-      console.error(`Sorry, we were unable to auto-install puppeteer@${puppeteerVersion}.`);
-      console.log('Please visit our website for more information on self-installation: https://www.greenwoodjs.io/docs/configuration/#prerender');
-    }
-  }
-}
-
 const run = async() => {
   const compilation = await generateCompilation();
 
@@ -104,7 +69,6 @@ const run = async() => {
     switch (command) {
 
       case 'build':
-        await checkForPuppeteer(compilation);
         await (await import('./commands/build.js')).runProductionBuild(compilation);
 
         break;
@@ -115,7 +79,6 @@ const run = async() => {
       case 'serve':
         process.env.__GWD_COMMAND__ = 'build';
 
-        await checkForPuppeteer(compilation);
         await (await import('./commands/build.js')).runProductionBuild(Object.assign({}, compilation));
         await (await import('./commands/serve.js')).runProdServer(compilation);
 

packages/cli/src/lib/ssr-route-worker.js

@@ -1,34 +1,42 @@
 // https://github.com/nodejs/modules/issues/307#issuecomment-858729422
 import { pathToFileURL } from 'url';
 import { workerData, parentPort } from 'worker_threads';
-import { renderToString } from 'wc-compiler';
+import { renderToString, renderFromHTML } from 'wc-compiler';
 
-async function executeRouteModule({ modulePath, compilation, route, label, id }) {
-  const moduleURL = pathToFileURL(modulePath);
-  const module = await import(moduleURL).then(module => module);
-  const { getFrontmatter = null, getBody = null, getTemplate = null } = module;
+async function executeRouteModule({ modulePath, compilation, route, label, id, prerender, htmlContents, scripts }) {
   const parsedCompilation = JSON.parse(compilation);
   const data = {
     template: null,
     body: null,
-    frontmatter: null
+    frontmatter: null,
+    html: null
   };
 
-  if (getFrontmatter) {
-    data.frontmatter = await getFrontmatter(parsedCompilation, route, label, id);
-  }
+  if (prerender) {
+    const scriptURLs = JSON.parse(scripts).map(scriptFile => new URL(scriptFile));
+    const { html } = await renderFromHTML(htmlContents, scriptURLs);
 
-  if (getTemplate) {
-    data.template = await getTemplate(parsedCompilation, route);
-  }
+    data.html = html;
+  } else {
+    const module = await import(pathToFileURL(modulePath)).then(module => module);
+    const { getTemplate = null, getBody = null, getFrontmatter = null } = module;
 
-  if (module.default) {
-    const { html } = await renderToString(moduleURL);
+    if (module.default) {
+      const { html } = await renderToString(pathToFileURL(modulePath));
 
-    data.body = html;
-  } else {
-    if (getBody) {
-      data.body = await getBody(parsedCompilation, route);
+      data.body = html;
+    } else {
+      if (getBody) {
+        data.body = await getBody(parsedCompilation, route);
+      }
+    }
+
+    if (getTemplate) {
+      data.template = await getTemplate(parsedCompilation, route);
+    }
+
+    if (getFrontmatter) {
+      data.frontmatter = await getFrontmatter(parsedCompilation, route, label, id);
     }
   }