botonic Developer Experience (DX) 3/3 (#1602)

* chore(dx): upgrade eslint_d to 10.1.3

otherwise, --config is ignored

* chore(dx): npm7 required to publish hidden files

* chore(dx): fix parserOptions.project error in eslint

it happens if eslint typescript parser gets the includes files from tsconfig from the dx/base-line folder instead of the main project
Now js & json in root folder only prettified and not eslinted, since they're actually not code but config. This also prevents

* chore(dx): don't eslint JS files

Temporary removed. See README.md

* chore: upgrade deprecated babel plugin

babel-plugin-add-module-exports->@babel/plugin-transform-modules-commonjs

* chore: upgrade dev deps

use caret to automatically upgrade minor versions

Author: dpinol

.gitignore

@@ -24,4 +24,4 @@ packages/botonic-cli/botonic-tmp*
 .botonic.json
 .vscode
 docs/website/package-lock.json
-tsconfig.tsbuildinfo
+*.tsbuildinfo

package-lock.json

@@ -4,8 +4,8 @@
     "@types/jest": "^26.0.23",
     "@types/node": "^15.3.0",
     "@types/rimraf": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "~4.26.0",
-    "@typescript-eslint/parser": "~4.25.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.0",
+    "@typescript-eslint/parser": "^4.26.0",
     "babel-eslint": "^10.1.0",
     "cloc": "^2.7.0",
     "eslint": "^7.26.0",

package.json

@@ -17,7 +17,7 @@ module.exports = {
   plugins: [
     require('@babel/plugin-proposal-object-rest-spread'),
     require('@babel/plugin-proposal-class-properties'),
-    require('babel-plugin-add-module-exports'),
+    require('@babel/plugin-transform-modules-commonjs'),
     require('@babel/plugin-transform-runtime')
   ]
 }

packages/babel.config.js

@@ -18,7 +18,7 @@ npm install -D @botonic/dx
 ```
 * Copy the contents of the `sample-config` folder to the root of your project 
   (Merge this package.json's scripts into your project ones)
-* These files just import the configuration maintained within this project. 
+* The files at `sample-config` just import the configuration maintained within this project. 
   To adapt them to your project needs, you just need to patch the specific options after importing the baseline.
   See instructions on each of these files.
 
@@ -72,3 +72,16 @@ there are no modifications in git files.
 ## npm
 This package must be published with npm 7. 
 With v6, there's no way to install hidden files (required for sample-config files)
+However, looks like "engines" restriction does not work. Also, npm 7 still has issues
+with our monorepo (hangs and spurious errors).
+
+### How to deploy with npm7
+So, so far it's recommended to:
+* Leave npm 6 globally installed
+* Install npm 7 locally in an empty project (`cd <project_with_npm7> && npm init && npm i npm`)
+* `cd botonic/packages/botonic-dx && <project_with_npm7>/node_modules/.bin/npm publish`
+
+
+# Future work
+.js files not yet processed with eslint because some rules require the typescript parser,
+which runs only on .ts files. It will be fixed by applying these rules only to .ts files.

packages/botonic-dx/README.md

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/dx",
-  "version": "0.19.0-alpha.9",
+  "version": "0.19.0-alpha.16",
   "description": "Continuous integration for botonic packages",
   "scripts": {},
   "author": "",
@@ -22,7 +22,8 @@
     "@types/node": "^15.12.1",
     "@typescript-eslint/eslint-plugin": "*",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.25.0",
+    "eslint": "^7.28.0",
+    "eslint_d": "^10.1.3",
     "eslint-config-prettier": "^7.2.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-filenames": "*",
@@ -35,21 +36,22 @@
     "eslint-plugin-react": "*",
     "eslint-plugin-react-hooks": "*",
     "eslint-plugin-simple-import-sort": "*",
-    "eslint_d": "^10.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-each": "^26.6.2",
     "jest-junit": "^12.0.0",
     "prettier": "^2.2.1",
-    "ts-jest": "^26.5.5",
+    "ts-jest": "^26.5.6",
     "ts-mockito": "^2.6.1",
     "ts-node": "^9.1.1",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4"
   },
+  "engines": {
+    "npm": ">=17.13.0"
+  },
   "files": [
     "README.md",
-    "baseline/.eslintrc*.js",
     "baseline/README.md",
     "baseline/babel.config.js",
     "baseline/jest.config.js",

packages/botonic-dx/package.json

@@ -7,8 +7,8 @@
     "##########  LINT": "",
     "lint": "npm run lint-core -- --fix && npm run prettier",
     "lint-ci": "npm run lint-core -- -c .eslintrc-ci.js && npm run prettier",
-    "lint-core": "eslint_d --cache --quiet  '*.md' './*.js' '*.js{,on}' '{src,tests}/**/*.[jt]{s,sx}'",
-    "prettier": "prettier --no-error-on-unmatched-pattern --write '**/*.md' '**/*.css' ",
+    "lint-core": "eslint_d --cache --quiet '{src,tests}/**/*.[t]{s,sx}'",
+    "prettier": "prettier --no-error-on-unmatched-pattern --write '**/*.md' '**/*.css' '.*.js' '*.js{,on}'",
 
     "########## DEBUG": "",
     "test": "jest",

packages/botonic-dx/sample-config/package.json

@@ -1,3 +1,10 @@
 {
   "extends": "@botonic/dx/baseline/tsconfig.eslint.json",
+  // include required to avoid this error (probably otherwise it uses baseline as root folder)
+  // Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
+  //  The file does not match your project config
+  "include": [
+    "src",
+    "tests"
+  ]
 }

packages/botonic-dx/sample-config/tsconfig.eslint.json

@@ -1,9 +1,10 @@
 {
   "extends": "@botonic/dx/baseline/tsconfig.tests.json",
   "include": [
-    "src"
+    "src",
+    "tests"
   ],
   "compilerOptions": {
-    "rootDir": "src",
+    "rootDir": ".",
   }
 }

packages/botonic-dx/sample-config/tsconfig.tests.json

@@ -14,10 +14,10 @@
     "typescript"
   ],
   "dependencies": {
-    "@typescript-eslint/parser": "~4.24.0"
+    "@typescript-eslint/parser": "^4.26.0"
   },
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": "~4.22.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.0",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.3.6",