Upgrade dependencies (#300)

* Upgrade dependencies

* Changeset

* Updating tests for newer versions of yeoman

* Formatting fixes

.changeset/popular-news-admire.md

@@ -0,0 +1,31 @@
+---
+"create-single-spa": major
+"generator-single-spa": major
+"webpack-config-single-spa": major
+"single-spa-web-server-utils": patch
+"single-spa-welcome": patch
+"webpack-config-single-spa-ts": patch
+---
+
+Breaking Changes
+
+- NodeJS >= 12.13.0 now required, as we're using [style-loader@3](https://github.com/webpack-contrib/style-loader/releases/tag/v3.0.0) in webpack-config-single-spa
+
+Projects generated by single-spa
+
+- New projects use Jest 27 (https://jestjs.io/blog/2021/05/25/jest-27#miscellaneous-breaking-changes), including jest-util and babel-jest
+- Newly generated projects use React 17 types
+- Newly generated projects now use concurrently 6. See https://github.com/kimmobrunfeldt/concurrently/releases/tag/v6.0.0
+- Newly generated root configs and util modules now execute `git init` during creation
+- Newly generated projects now use eslint-config-prettier 8. See https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
+
+Internal changes
+
+- Upgrade yargs to 17 in create-single-spa, which parses the CLI args. See https://github.com/yargs/yargs/releases/tag/v17.0.0
+- Upgrade yeoman-environment to v3 and yeoman-generator to v5. This comes with changes to how packages are installed by yeoman, but those changes don't apply to create-single-spa because only committed package.jsons result in yeoman-environment installs. Manually installing dependencies the old way via yeoman-generator.
+
+Maintenance
+
+- Upgrade to jest 27 (https://jestjs.io/blog/2021/05/25/jest-27#miscellaneous-breaking-changes), including jest-util and babel-jest
+- Upgrade create-single-spa to husky 6. Upgrade newly generated projects to use husky 6
+- Add `scripts/update-dependencies.sh` script for maintainers to easily upgrade all dependencies at once

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpx pretty-quick --staged

CONTRIBUTING.md

@@ -40,3 +40,12 @@ git push
 ```
 
 Then create a github release for the tag you created (v2.0.0 in the example). Copy + paste the changelogs from changelog.md in each package that was changed into the global release notes.
+
+## Upgrading dependencies
+
+Run the following:
+
+```sh
+./scripts/upgrade-dependencies.sh
+pnpm install
+```

package.json

@@ -2,28 +2,24 @@
   "name": "root",
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.0",
-    "@changesets/cli": "^2.14.1",
-    "@types/jest": "^26.0.16",
-    "husky": "^4.3.8",
-    "jest": "^26.6.3",
-    "jest-cli": "^26.6.3",
-    "jest-util": "^26.6.2",
+    "@changesets/cli": "^2.16.0",
+    "@types/jest": "^26.0.23",
+    "husky": "^6.0.0",
+    "jest": "^27.0.5",
+    "jest-cli": "^27.0.5",
+    "jest-util": "^27.0.2",
     "mkdirp": "^1.0.4",
     "nixt": "^0.5.1",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
+    "prettier": "^2.3.2",
+    "pretty-quick": "^3.1.1",
     "rimraf": "^3.0.2"
   },
   "scripts": {
     "clean-tests": "rimraf tests/fixtures",
     "test": "pnpm run clean-tests && pnpm run test:e2e",
     "test:e2e": "jest",
-    "format": "prettier . --write"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
+    "format": "prettier . --write",
+    "prepare": "husky install"
   },
   "license": "MIT"
 }

packages/create-single-spa/bin/create-single-spa.js

@@ -10,13 +10,11 @@ env.registerStub(require("generator-single-spa"), "single-spa");
 env.run("single-spa " + argv._.join(" "), argv);
 
 function checkNodeVersion() {
-  const minVersion = "10.4.0";
+  const minVersion = "12.13.0";
   const [minMajor, minMinor, minPatch] = minVersion.split(".").map(Number);
-  const [
-    currentMajor,
-    currentMinor,
-    currentPatch,
-  ] = process.versions.node.split(".").map(Number);
+  const [currentMajor, currentMinor, currentPatch] = process.versions.node
+    .split(".")
+    .map(Number);
 
   let validVersion = true;
 

packages/create-single-spa/package.json

@@ -9,7 +9,7 @@
   "license": "MIT",
   "dependencies": {
     "generator-single-spa": "workspace:*",
-    "yargs": "^16.2.0",
-    "yeoman-environment": "^2.10.3"
+    "yargs": "^17.0.1",
+    "yeoman-environment": "^3.4.1"
   }
 }

packages/generator-single-spa/package.json

@@ -14,16 +14,15 @@
   "main": "src/generator-single-spa.js",
   "license": "MIT",
   "dependencies": {
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.1",
     "command-exists": "^1.2.9",
-    "ejs": "^3.1.5",
-    "lodash": "^4.17.20",
-    "yeoman-generator": "^4.12.0"
+    "ejs": "^3.1.6",
+    "lodash": "^4.17.21",
+    "yeoman-generator": "^5.3.0"
   },
   "devDependencies": {
-    "jest": "^26.6.3",
-    "yeoman-assert": "^3.1.1",
-    "yeoman-test": "^3.0.0"
+    "jest": "^27.0.5",
+    "yeoman-test": "^6.1.0"
   },
   "jest": {
     "testPathIgnorePatterns": [

packages/generator-single-spa/src/common-templates/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+<%= packageManager %> exec pretty-quick --staged && <%= packageManager %> exec concurrently <%= packageManager %>:test <%= packageManager %>:lint

packages/generator-single-spa/src/common-templates/typescript/react.package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@types/react": "^16.9.32",
-    "@types/react-dom": "^16.9.6"
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8"
   }
 }

packages/generator-single-spa/src/common-templates/typescript/typescript.package.json

@@ -1,13 +1,13 @@
 {
   "devDependencies": {
-    "@babel/preset-typescript": "^7.12.7",
+    "@babel/preset-typescript": "^7.14.5",
     "eslint-config-ts-important-stuff": "^1.1.0",
-    "typescript": "^4.1.2",
-    "webpack-config-single-spa-ts": "^2.0.0",
-    "ts-config-single-spa": "^2.0.0"
+    "typescript": "^4.3.4",
+    "webpack-config-single-spa-ts": "^2.2.2",
+    "ts-config-single-spa": "^2.0.1"
   },
   "dependencies": {
-    "@types/jest": "^26.0.16",
+    "@types/jest": "^26.0.23",
     "@types/systemjs": "^6.1.0",
     "@types/webpack-env": "^1.16.0"
   }

packages/generator-single-spa/src/generator-single-spa.js

@@ -1,5 +1,12 @@
 const path = require("path");
 const Generator = require("yeoman-generator");
+
+// https://github.com/yeoman/generator/releases/tag/v5.0.0
+Object.assign(
+  Generator.prototype,
+  require("yeoman-generator/lib/actions/install")
+);
+
 const SingleSpaReactGenerator = require("./react/generator-single-spa-react");
 const SingleSpaRootConfigGenerator = require("./root-config/generator-root-config");
 const SingleSpaVueGenerator = require("./vue/generator-single-spa-vue");

packages/generator-single-spa/src/react/generator-single-spa-react.js

@@ -141,6 +141,12 @@ module.exports = class SingleSpaReactGenerator extends PnpmGenerator {
       this.destinationPath(".gitignore"),
       this.options
     );
+    this.fs.copyTpl(
+      this.templatePath(`../../common-templates/.husky/pre-commit`),
+      this.destinationPath(`.husky/pre-commit`),
+      this.options
+    );
+
     if (this.options.typescript) {
       this.fs.copyTpl(
         this.templatePath(

packages/generator-single-spa/src/react/templates/jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   rootDir: "src",
+  testEnvironment: "jsdom",
   transform: {
     "^.+\\.(j|t)sx?$": "babel-jest",
   },

packages/generator-single-spa/src/react/templates/react.package.json

@@ -10,44 +10,40 @@
     "check-format": "prettier --check .",
     "test": "cross-env BABEL_ENV=test jest",
     "watch-tests": "cross-env BABEL_ENV=test jest --watch",
+    "prepare": "husky install",
     "coverage": "cross-env BABEL_ENV=test jest --coverage"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && concurrently <%= packageManager %>:test <%= packageManager %>:lint"
-    }
-  },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.7",
-    "@babel/preset-react": "^7.12.7",
-    "@babel/runtime": "^7.12.5",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "babel-jest": "^26.6.3",
-    "concurrently": "^5.3.0",
+    "@babel/core": "^7.14.6",
+    "@babel/eslint-parser": "^7.14.7",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/runtime": "^7.14.6",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "babel-jest": "^27.0.5",
+    "concurrently": "^6.2.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.15.0",
-    "eslint-config-prettier": "^7.0.0",
+    "eslint": "^7.29.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-important-stuff": "^3.0.0",
-    "eslint-plugin-prettier": "^3.2.0",
-    "husky": "^4.3.5",
+    "eslint-plugin-prettier": "^3.4.0",
+    "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
-    "jest-cli": "^26.6.3",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
-    "webpack": "^5.8.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-config-single-spa-react": "^2.0.0",
+    "jest": "^27.0.5",
+    "jest-cli": "^27.0.5",
+    "prettier": "^2.3.2",
+    "pretty-quick": "^3.1.1",
+    "webpack": "^5.40.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-config-single-spa-react": "^2.2.2",
     "webpack-dev-server": "^4.0.0-beta.0",
-    "webpack-merge": "^5.4.0"
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "single-spa-react": "^4.0.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "single-spa-react": "^4.2.0"
   }
 }

packages/generator-single-spa/src/react/templates/typescript/typescript-react.package.json

@@ -1,7 +1,7 @@
 {
   "devDependencies": {
-    "@types/testing-library__jest-dom": "^5.9.5",
+    "@types/testing-library__jest-dom": "^5.14.0",
     "eslint-config-ts-react-important-stuff": "^3.0.0",
-    "webpack-config-single-spa-react-ts": "^2.0.0"
+    "webpack-config-single-spa-react-ts": "^2.2.2"
   }
 }

packages/generator-single-spa/src/root-config/generator-root-config.js

@@ -108,6 +108,12 @@ module.exports = class SingleSpaRootConfigGenerator extends PnpmGenerator {
       this.options
     );
 
+    this.fs.copyTpl(
+      this.templatePath(`../../common-templates/.husky/pre-commit`),
+      this.destinationPath(`.husky/pre-commit`),
+      this.options
+    );
+
     this.fs.copyTpl(
       this.templatePath(".eslintrc.ejs"),
       this.destinationPath(".eslintrc"),
@@ -183,6 +189,15 @@ module.exports = class SingleSpaRootConfigGenerator extends PnpmGenerator {
         },
       });
     }
+
+    const childGitInitProcess = this.spawnCommandSync("git", ["init"]);
+    if (childGitInitProcess.error) {
+      console.log(chalk.red("\n************"));
+      console.log(chalk.red("Cannot initialize git repository"));
+      console.log(chalk.red("************\n"));
+    } else {
+      console.log(chalk.green("\nInitialized git repository\n"));
+    }
   }
   install() {
     if (!this.skipInstall) {

packages/generator-single-spa/src/root-config/templates/root-config.package.json

@@ -6,41 +6,37 @@
     "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
     "format": "prettier --write .",
     "check-format": "prettier --check .",
+    "prepare": "husky install",
     "build": "webpack --mode=production"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && concurrently <%= packageManager %>:test <%= packageManager %>:lint"
-    }
-  },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.7",
-    "@babel/runtime": "^7.12.5",
-    "concurrently": "^5.3.0",
+    "@babel/core": "^7.14.6",
+    "@babel/eslint-parser": "^7.14.7",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/runtime": "^7.14.6",
+    "concurrently": "^6.2.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.15.0",
+    "eslint": "^7.29.0",
     "eslint-config-important-stuff": "^1.1.0",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-prettier": "^3.2.0",
-    "html-webpack-plugin": "^5.3.1",
-    "husky": "^4.3.5",
-    "jest": "^26.6.3",
-    "jest-cli": "^26.6.3",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0",
-    "serve": "^11.3.2",
-    "webpack": "^5.8.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-config-single-spa": "^2.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "html-webpack-plugin": "^5.3.2",
+    "husky": "^6.0.0",
+    "jest": "^27.0.5",
+    "jest-cli": "^27.0.5",
+    "prettier": "^2.3.2",
+    "pretty-quick": "^3.1.1",
+    "serve": "^12.0.0",
+    "webpack": "^5.40.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-config-single-spa": "^2.2.1",
     "webpack-dev-server": "^4.0.0-beta.0",
-    "webpack-merge": "^5.5.0"
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@types/jest": "^26.0.16",
+    "@types/jest": "^26.0.23",
     "@types/systemjs": "^6.1.0",
-    "single-spa": "^5.8.2"
+    "single-spa": "^5.9.3"
   }
 }

packages/generator-single-spa/src/svelte/generator-single-spa-svelte.js

@@ -92,6 +92,11 @@ module.exports = class SingleSpaSvelteGenerator extends PnpmGenerator {
       this.destinationPath(`.gitignore`),
       this.options
     );
+    this.fs.copyTpl(
+      this.templatePath(`../../common-templates/.husky/pre-commit`),
+      this.destinationPath(`.husky/pre-commit`),
+      this.options
+    );
     this.fs.copyTpl(
       this.templatePath(`.prettierignore`),
       this.destinationPath(`.prettierignore`),