Chore/issue 532 esm upgrade (#707)

* WIP * init upgrade graphql plugin to ESM * fix linting * got develop command working for the website * build command WIP * migrate node module utils to async and refactor require to import.meta * pass linter * remove comment * www/ greenwood build command working * PostCSS working for both develop and build * PostCSS working for both develop and build * async prodServer support * fix serve task not resolving standard web assets * restore plugin analyzer * restore plugin analyzer * restore unified markdown functionality * fix missed merge conflict * restore include HTML plugin * restore polyfills plugin * PostCSS 8 deps upgrades * CLI build default spec passing via ESM * migrtate all CLI specs to ESM and enable eject * fix spec * migrate init package specs to ESM * migrate google and polyfills plugins and specs to ESM * migrate plugin-include-html to ESM * migrate plugin import CSS, JSON, and CommonJS and their specs to ESM * migrate plugin GraphQL and test cases to ESM * migrate plugin GraphQL and unit tests to ESM * migrate plugin typescript and specs to ESM * migrate plugin postcss specs to ESM * migrate plugin babel and default spec case to ESM * update package READMEs for ESM * update docs to demonstrate ESM usage * fix linting * handle path seperator to fix failing spec * bug/issue 532 esm upgrade with fix for windows (#814) * fix greenwood compilation for windows * serve and devekop commands working * default spec passing * proper URL to path handling for cross platform support * all specs passing wiht initial URL refactoring * refactor all specs to new standard URL usage * update docs * fix develop command * wip passing all specs on windows * all commands and tests passing on windows * update theme pack docs
ProjectEvergreen · Dec 9, 2021 · 7d6493f · 7d6493f
1 parent c3b5e21
commit 7d6493f
Show file tree

Hide file tree

Showing 287 changed files with 2,978 additions and 2,580 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,6 +1,6 @@
 **/.greenwood/**
 **/public/**
 **/node_modules/**
-!.eslintrc.js
+!.eslintrc.cjs
 !.mocharc.js
 packages/plugin-babel/test/cases/**/*main.js
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
diff --git a/.mocharc.js → .mocharc.cjs b/.mocharc.js → .mocharc.cjs
diff --git a/README.md b/README.md
@@ -35,12 +35,15 @@ npm install @greenwood/cli --save-dev
 yarn add @greenwood/cli --dev
 ```
 
-Then in your _package.json_, you can run the CLI like so:
-```javascript
-"scripts": {
-  "build": "greenwood build",
-  "start": "greenwood develop",
-  "serve": "greenwood serve"
+Then in your _package.json_, add the `type` field and `scripts` for the CLI, like so:
+```json
+{
+  "type": "module",
+  "scripts": {
+    "build": "greenwood build",
+    "start": "greenwood develop",
+    "serve": "greenwood serve"
+  }
 }
 ```
 

diff --git a/greenwood.config.js b/greenwood.config.js
@@ -1,17 +1,17 @@
-const path = require('path');
-const pluginGraphQL = require('@greenwood/plugin-graphql');
-const pluginIncludeHtml = require('@greenwood/plugin-include-html');
-const pluginImportCss = require('@greenwood/plugin-import-css');
-const pluginImportJson = require('@greenwood/plugin-import-json');
-const pluginPolyfills = require('@greenwood/plugin-polyfills');
-const pluginPostCss = require('@greenwood/plugin-postcss');
-const rollupPluginAnalyzer = require('rollup-plugin-analyzer');
+import { greenwoodPluginGraphQL } from '@greenwood/plugin-graphql';
+import { greenwoodPluginIncludeHTML } from '@greenwood/plugin-include-html';
+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 rollupPluginAnalyzer from 'rollup-plugin-analyzer';
+import { fileURLToPath, URL } from 'url';
 
 const META_DESCRIPTION = 'A modern and performant static site generator supporting Web Component based development';
 const FAVICON_HREF = '/assets/favicon.ico';
 
-module.exports = {
-  workspace: path.join(__dirname, 'www'),
+export default {
+  workspace: fileURLToPath(new URL('./www', import.meta.url)),
   mode: 'mpa',
   optimization: 'inline',
   title: 'Greenwood',
@@ -28,11 +28,11 @@ module.exports = {
     { name: 'google-site-verification', content: '4rYd8k5aFD0jDnN0CCFgUXNe4eakLP4NnA18mNnK5P0' }
   ],
   plugins: [
-    ...pluginGraphQL(),
-    ...pluginPolyfills(),
-    pluginPostCss(),
-    ...pluginImportJson(),
-    ...pluginImportCss(),
+    ...greenwoodPluginGraphQL(),
+    ...greenwoodPluginPolyfills(),
+    greenwoodPluginPostCss(),
+    ...greenwoodPluginImportJson(),
+    ...greenwoodPluginImportCss(),
     {
       type: 'rollup',
       name: 'rollup-plugin-analyzer',
@@ -47,7 +47,7 @@ module.exports = {
         ];
       }
     },
-    ...pluginIncludeHtml()
+    ...greenwoodPluginIncludeHTML()
   ],
   markdown: {
     plugins: [

diff --git a/nyc.config.js → nyc.config.cjs b/nyc.config.js → nyc.config.cjs
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "author": "Owen Buckley <[email protected]>",
   "license": "MIT",
   "main": "./packages/cli/src/index.js",
+  "type": "module",
   "workspaces": {
     "packages": [
       "packages/*",
@@ -42,7 +43,7 @@
     "glob-promise": "^3.4.0",
     "jsdom": "^14.0.0",
     "lerna": "^3.16.4",
-    "mocha": "^6.1.4",
+    "mocha": "^9.1.3",
     "nyc": "^14.0.0",
     "rimraf": "^2.6.3",
     "stylelint": "^13.8.0",

diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -16,11 +16,14 @@ yarn add @greenwood/cli --dev
 ```
 
 ## Usage
-Then in your _package.json_, you can run the CLI like so:
-```javascript
-"scripts": {
-  "build": "greenwood build",
-  "start": "greenwood develop"
+Then in your _package.json_, add the `type` field and `scripts` for the CLI like so:
+```json
+{
+  "type": "module",
+  "scripts": {
+    "build": "greenwood build",
+    "start": "greenwood develop"
+  }
 }
 ```
 

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -2,6 +2,7 @@
   "name": "@greenwood/cli",
   "version": "0.19.4",
   "description": "Greenwood CLI.",
+  "type": "module",
   "repository": "https://github.com/ProjectEvergreen/greenwood/tree/master/packages/cli",
   "author": "Owen Buckley <[email protected]>",
   "license": "MIT",
@@ -29,16 +30,16 @@
     "acorn": "^8.0.1",
     "acorn-walk": "^8.0.0",
     "commander": "^2.20.0",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.0.11",
     "es-module-shims": "^0.5.2",
     "front-matter": "^4.0.2",
     "koa": "^2.13.0",
     "livereload": "^0.9.1",
     "markdown-toc": "^1.2.0",
     "node-fetch": "^2.6.1",
     "node-html-parser": "^1.2.21",
-    "postcss": "^7.0.32",
-    "postcss-import": "^12.0.0",
+    "postcss": "^8.3.11",
+    "postcss-import": "^13.0.0",
     "puppeteer": "^10.2.0",
     "rehype-raw": "^5.0.0",
     "rehype-stringify": "^8.0.0",

diff --git a/packages/cli/src/commands/build.js b/packages/cli/src/commands/build.js
@@ -1,12 +1,12 @@
-const bundleCompilation = require('../lifecycles/bundle');
-const copyAssets = require('../lifecycles/copy');
-const { devServer } = require('../lifecycles/serve');
-const fs = require('fs');
-const generateCompilation = require('../lifecycles/compile');
-const { preRenderCompilation, staticRenderCompilation } = require('../lifecycles/prerender');
-const { ServerInterface } = require('../lib/server-interface');
+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';
 
-module.exports = runProductionBuild = async () => {
+const runProductionBuild = async () => {
 
   return new Promise(async (resolve, reject) => {
 
@@ -21,9 +21,9 @@ module.exports = runProductionBuild = async () => {
       }
 
       if (prerender) {
-        await new Promise((resolve, reject) => {
+        await new Promise(async (resolve, reject) => {
           try {
-            devServer(compilation).listen(port, async () => {
+            (await devServer(compilation)).listen(port, async () => {
               console.info(`Started local development server at localhost:${port}`);
 
               const servers = [...compilation.config.plugins.filter((plugin) => {
@@ -65,4 +65,6 @@ module.exports = runProductionBuild = async () => {
     }
   });
 
-};
+};
+
+export { runProductionBuild };
diff --git a/packages/cli/src/commands/develop.js b/packages/cli/src/commands/develop.js
@@ -1,16 +1,16 @@
-const generateCompilation = require('../lifecycles/compile');
-const { ServerInterface } = require('../lib/server-interface');
-const { devServer } = require('../lifecycles/serve');
+import { generateCompilation } from '../lifecycles/compile.js';
+import { ServerInterface } from '../lib/server-interface.js';
+import { devServer } from '../lifecycles/serve.js';
 
-module.exports = runDevServer = async () => {
+const runDevServer = async () => {
 
   return new Promise(async (resolve, reject) => {
 
     try {
       const compilation = await generateCompilation();
       const { port } = compilation.config.devServer;
 
-      devServer(compilation).listen(port, () => {
+      (await devServer(compilation)).listen(port, () => {
 
         console.info(`Started local development server at localhost:${port}`);
 
@@ -27,12 +27,14 @@ module.exports = runDevServer = async () => {
         })];
 
         return Promise.all(servers.map(async (server) => {
-          return server.start();
+          return await server.start();
         }));
       });
     } catch (err) {
       reject(err);
     }
 
   });
-};
+};
+
+export { runDevServer };
diff --git a/packages/cli/src/commands/eject.js b/packages/cli/src/commands/eject.js
@@ -1,15 +1,17 @@
-const fs = require('fs');
-const generateCompilation = require('../lifecycles/compile');
-const path = require('path');
+import fs from 'fs';
+import { generateCompilation } from '../lifecycles/compile.js';
+import path from 'path';
+import { fileURLToPath, URL } from 'url';
 
-module.exports = ejectConfiguration = async () => {
+const ejectConfiguration = async () => {
   return new Promise(async (resolve, reject) => {
     try {
       const compilation = await generateCompilation();
-      const configFilePaths = fs.readdirSync(path.join(__dirname, '../config'));
-
-      configFilePaths.forEach((configFile) => {
-        const from = path.join(__dirname, '../config', configFile);
+      const configFilePath = fileURLToPath(new URL('../config', import.meta.url));
+      const configFiles = fs.readdirSync(configFilePath);
+
+      configFiles.forEach((configFile) => {
+        const from = path.join(configFilePath, configFile);
         const to = `${compilation.context.projectDirectory}/${configFile}`;
 
         fs.copyFileSync(from, to);
@@ -24,4 +26,6 @@ module.exports = ejectConfiguration = async () => {
       reject(err);
     }
   });
-};
+};
+
+export { ejectConfiguration };
diff --git a/packages/cli/src/commands/serve.js b/packages/cli/src/commands/serve.js
@@ -1,20 +1,22 @@
-const generateCompilation = require('../lifecycles/compile');
-const { prodServer } = require('../lifecycles/serve');
+import { generateCompilation } from '../lifecycles/compile.js';
+import { prodServer } from '../lifecycles/serve.js';
 
-module.exports = runProdServer = async () => {
+const runProdServer = async () => {
 
   return new Promise(async (resolve, reject) => {
 
     try {
       const compilation = await generateCompilation();
       const port = 8080;
 
-      prodServer(compilation).listen(port, () => {
+      (await prodServer(compilation)).listen(port, () => {
         console.info(`Started production test server at localhost:${port}`);
       });
     } catch (err) {
       reject(err);
     }
 
   });
-};
+};
+
+export { runProdServer };
diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
@@ -1,9 +1,10 @@
 /* eslint-disable max-depth, no-loop-func */
-const fs = require('fs');
-const htmlparser = require('node-html-parser');
-const path = require('path');
-const postcss = require('postcss');
-const postcssImport = require('postcss-import');
+import fs from 'fs';
+import htmlparser from 'node-html-parser';
+import path from 'path';
+import postcss from 'postcss';
+import postcssImport from 'postcss-import';
+
 const tokenSuffix = 'scratch';
 const tokenNodeModules = 'node_modules';
 
@@ -506,7 +507,7 @@ function greenwoodHtmlPlugin(compilation) {
   };
 }
 
-module.exports = getRollupConfig = async (compilation) => {
+const getRollupConfig = async (compilation) => {
   const { scratchDir, outputDir } = compilation.context;
   const inputs = compilation.graph.map((page) => {
     return path.normalize(`${scratchDir}${page.outputPath}`);
@@ -570,4 +571,6 @@ module.exports = getRollupConfig = async (compilation) => {
     ]
   }];
 
-};
+};
+
+export { getRollupConfig };
diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js
@@ -5,13 +5,16 @@
 // https://github.com/ProjectEvergreen/greenwood/issues/141
 process.setMaxListeners(0);
 
-const program = require('commander');
-const runProductionBuild = require('./commands/build');
-const runDevServer = require('./commands/develop');
-const runProdServer = require('./commands/serve');
-const ejectConfiguration = require('./commands/eject');
-const greenwoodPackageJson = require('../package.json');
+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 = '';
 

diff --git a/packages/cli/src/lib/browser.js b/packages/cli/src/lib/browser.js
@@ -8,7 +8,7 @@
  * Wraps Puppeteer's interface to Headless Chrome to expose high level rendering
  * APIs that are able to handle web components and PWAs.
  */
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 class BrowserRunner {
 
@@ -84,4 +84,4 @@ class BrowserRunner {
   }
 }
 
-module.exports = BrowserRunner;
+export { BrowserRunner };