0.20.0 release branch (ESM migration)

.c8rc.json

@@ -0,0 +1,32 @@
+{
+  "all": true,
+
+  "include": [
+    "packages/*/src/**/**/*.js"
+  ],
+
+  "exclude": [
+    "packages/cli/src/lib/*-interface.js"
+  ],
+
+  "reporter": [
+    "cobertura",
+    "html",
+    "text",
+    "text-summary"
+  ],
+
+  "checkCoverage": true,
+
+  "statements": 85,
+  "branches": 85,
+  "functions": 90,
+  "lines": 85,
+
+  "watermarks": {
+    "statements": [75, 85],
+    "branches": [75, 85],
+    "functions": [75, 85],
+    "lines": [75, 85]
+  }
+}

.eslintignore

@@ -1,6 +1,6 @@
 **/.greenwood/**
 **/public/**
 **/node_modules/**
-!.eslintrc.js
+!.eslintrc.cjs
 !.mocharc.js
 packages/plugin-babel/test/cases/**/*main.js

.github/workflows/ci-win.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [14]
+        node: [14, 16]
 
     steps:
     - uses: actions/checkout@v1

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [14]
+        node: [14, 16]
 
     steps:
     - uses: actions/checkout@v1

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"
+  }
 }
 ```
 

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: [

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.19.4",
+  "version": "0.20.0-alpha.1",
   "packages": [
     "packages/*",
     "www"

package.json

@@ -6,6 +6,7 @@
   "author": "Owen Buckley <owen@thegreenhouse.io>",
   "license": "MIT",
   "main": "./packages/cli/src/index.js",
+  "type": "module",
   "workspaces": {
     "packages": [
       "packages/*",
@@ -19,7 +20,7 @@
     "build": "cross-env __GWD_ROLLUP_MODE__=strict node . build",
     "serve": "node . serve",
     "develop": "node . develop",
-    "test": "cross-env BROWSERSLIST_IGNORE_OLD_DATA=true __GWD_ROLLUP_MODE__=strict nyc mocha",
+    "test": "cross-env BROWSERSLIST_IGNORE_OLD_DATA=true __GWD_ROLLUP_MODE__=strict c8 mocha",
     "test:tdd": "yarn test --watch",
     "lint:js": "eslint \"*.js\" \"./packages/**/**/*.js\" \"./test/*.js\" \"./www/**/**/*.js\"",
     "lint:ts": "eslint \"./packages/**/**/*.ts\"",
@@ -34,6 +35,7 @@
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
     "babel-eslint": "^10.1.0",
+    "c8": "^7.10.0",
     "chai": "^4.2.0",
     "cross-env": "^7.0.3",
     "eslint": "^6.8.0",
@@ -42,8 +44,7 @@
     "glob-promise": "^3.4.0",
     "jsdom": "^14.0.0",
     "lerna": "^3.16.4",
-    "mocha": "^6.1.4",
-    "nyc": "^14.0.0",
+    "mocha": "^9.1.3",
     "rimraf": "^2.6.3",
     "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",

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"
+  }
 }
 ```
 

packages/cli/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@greenwood/cli",
-  "version": "0.19.4",
+  "version": "0.20.0-alpha.1",
   "description": "Greenwood CLI.",
+  "type": "module",
   "repository": "https://github.com/ProjectEvergreen/greenwood/tree/master/packages/cli",
   "author": "Owen Buckley <owen@thegreenhouse.io>",
   "license": "MIT",
@@ -11,7 +12,7 @@
     "Web Components"
   ],
   "engines": {
-    "node": ">=12.x"
+    "node": ">=14"
   },
   "bin": {
     "greenwood": "./src/index.js"
@@ -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",

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 };

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 };

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 };