Merge pull request #306 from h5bp/esm-modules

ESM + Tests + Making Everything Green

Author: roblarsen

.eslintrc.js renamed to .eslintrc.cjs

@@ -0,0 +1,22 @@
+name: Tests and coverage
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "npm"
+      - run: npm install
+      - run: npm run coverage
+      - uses: codecov/codecov-action@v3

.github/workflows/coverage.yaml

@@ -14,20 +14,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Get npm cache directory
-        id: npm-cache
-        run: |
-          echo "::set-output name=dir::$(npm config get cache)"
-      - uses: actions/cache@v3
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: "16.x"
-      - run: npm ci
+      - run: npm install
       - run: npm run lint

.github/workflows/coveralls.yml

@@ -1,6 +1,6 @@
 # Create HTML5 Boilerplate
 
-[![Coverage Status](https://coveralls.io/repos/github/h5bp/create-html5-boilerplate/badge.svg?branch=master)](https://coveralls.io/github/h5bp/create-html5-boilerplate?branch=master)
+[![codecov](https://codecov.io/gh/h5bp/create-html5-boilerplate/branch/master/graph/badge.svg?token=H8V43VURZJ)](https://codecov.io/gh/h5bp/create-html5-boilerplate)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![Total alerts](https://img.shields.io/lgtm/alerts/g/h5bp/create-html5-boilerplate.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/h5bp/create-html5-boilerplate/alerts/)
 

.github/workflows/lint.yml

@@ -1,2 +1,5 @@
 #!/usr/bin/env node
-require("./lib/cli")(process.argv.slice(2)).catch(console.error);
+// eslint-disable-next-line import/extensions
+import cli from "./lib/cli.js";
+
+cli(process.argv.slice(2)).catch(console.error);

README.md

@@ -0,0 +1,8 @@
+export default {
+  transform: {},
+  moduleNameMapper: {
+    chalk: "chalk/source/index.js",
+    "#ansi-styles": "chalk/source/vendor/ansi-styles/index.js",
+    "#supports-color": "chalk/source/vendor/supports-color/index.js",
+  },
+};

index.js

@@ -1,25 +1,24 @@
-const yargsParser = require("yargs-parser");
-const path = require("path");
-const chalk = require("chalk");
-const inquirer = require("inquirer");
-const fuzzy = require("fuzzy");
-const ora = require("ora");
-const { extract } = require("pacote");
-const glob = require("fast-glob");
-const fs = require("fs-extra");
-const os = require("os");
+import yargsParser from "yargs-parser";
+import path from "path";
+import chalk from "chalk";
+import inquirer from "inquirer";
+import fuzzy from "fuzzy";
+import ora from "ora";
+import pacote from "pacote";
+import glob from "fast-glob";
+import fs from "fs-extra";
+import os from "os";
+import elapsed from "elapsed-time-logger";
+import compareVersions from "compare-versions";
+import inqurerAutocompletePrompt from "inquirer-autocomplete-prompt";
+
+const extract = (a, b, c) => pacote.extract(a, b, c);
 
 const packageName = "html5-boilerplate";
 const tempDir = `${os.tmpdir()}/${packageName}-staging`;
-const elapsed = require("elapsed-time-logger");
-const compareVersions = require("compare-versions");
-const langsList = require("./countries.json");
 
 let spinner;
-inquirer.registerPrompt(
-  "autocomplete",
-  require("inquirer-autocomplete-prompt")
-);
+inquirer.registerPrompt("autocomplete", inqurerAutocompletePrompt);
 
 const checkFolder = async (targetDir, argv) => {
   const folderExists = await fs.pathExists(targetDir);
@@ -58,6 +57,10 @@ const onLoad = async (targetDir, version, argv) => {
   if (skipPrompts) {
     return;
   }
+  const langsList = JSON.parse(
+    await fs.readFile(new URL("./countries.json", import.meta.url))
+  );
+
   const langListMap = {};
   const langListOut = [];
   /* istanbul ignore if */
@@ -118,7 +121,7 @@ const onLoad = async (targetDir, version, argv) => {
   }
 };
 
-module.exports = async (argvs) => {
+export default async function CreateHtml5BoilerplateCLI(argvs) {
   const argv = yargsParser(argvs, {
     alias: { release: ["r"], yes: ["y"] },
   });
@@ -165,4 +168,4 @@ module.exports = async (argvs) => {
   } finally {
     await fs.remove(tempDir);
   }
-};
+}

jest.config.js

@@ -14,14 +14,15 @@
   "license": "MIT",
   "author": "@h5bp",
   "main": "index.js",
+  "type": "module",
   "bin": {
     "create-html5-boilerplate": "./index.js"
   },
   "scripts": {
-    "test": "jest",
+    "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js",
     "lint": "eslint lib/cli.js",
     "format": "prettier --write \"./cli.js\" \"tests/*.js\"",
-    "coverage": "jest --coverage --collectCoverageOnlyFrom ./lib/cli.js",
+    "coverage": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --coverage --collectCoverageOnlyFrom ./lib/cli.js",
     "semantic-release": "semantic-release"
   },
   "files": [