refactor: updated eslint devDepencencies

.eslintrc.js

@@ -6,7 +6,8 @@ module.exports = {
     es6: true,
     browser: true,
   },
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
+  // TODO: Check for "Note: The parserOptions described in the official documentation are for the default parser and are not necessarily supported by @babel/eslint-parser. Please see the section directly below for supported parserOptions.": https://www.npmjs.com/package/@babel/eslint-parser
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
@@ -17,8 +18,9 @@ module.exports = {
     },
   },
   globals: {},
-  plugins: ['prettier'],
-  extends: ['eslint-config-prettier'].map(require.resolve),
+  plugins: ['@babel', 'prettier'],
+  extends: ['plugin:prettier/recommended'],
+  // TODO: Check for "ESLint rules relating to code formatting", compare to "This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect potential bugs. (If another active ESLint rule disagrees with prettier about how code should be formatted, it will be impossible to avoid lint errors.)", source: https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
   rules: {
     'prettier/prettier': 'error',
     'block-scoped-var': 0,
@@ -27,7 +29,7 @@ module.exports = {
     curly: [2, 'all'],
     'dot-notation': [1, { allowKeywords: true }],
     eqeqeq: [2, 'allow-null'],
-    'global-strict': [0, 'never'],
+    'strict': [0, 'never'],
     'guard-for-in': 2,
     'key-spacing': 0,
     'new-cap': 0,
@@ -49,9 +51,9 @@ module.exports = {
     'no-irregular-whitespace': 1,
     'no-iterator': 2,
     'no-loop-func': 2,
-    'no-mixed-requires': 0,
+    'node/no-mixed-requires': 0,
     'no-multi-str': 2,
-    'no-native-reassign': 2,
+    'no-global-assign': 2,
     'no-new': 2,
     'no-param-reassign': 1,
     'no-proto': 2,

.husky/.gitignore

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

babel.config.js

@@ -10,6 +10,8 @@ module.exports = {
     ],
   ],
   plugins: [
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
     /**
      * 1. Helps with our Web Component Preact renderer
      */

package.json

@@ -11,13 +11,22 @@
   },
   "dependencies": {
     "@auto-it/released": "^10.27.0",
+    "@babel/core": "^7.13.14",
+    "@babel/eslint-parser": "^7.13.14",
+    "@babel/eslint-plugin": "^7.13.15",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-decorators": "^7.13.5",
     "@babel/plugin-syntax-jsx": "^7.12.13",
+    "@babel/plugin-transform-react-jsx": "^7.13.12",
+    "@babel/preset-env": "^7.13.12",
     "auto": "^10.27.0",
     "babel-eslint": "^10.0.2",
-    "eslint": "^6.1.0",
-    "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-prettier": "^3.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "lerna": "4.0.0",
     "prettier": "^2.8.1",
     "pretty-quick": "^3.1.3"

packages/cli/.babelrc

@@ -0,0 +1 @@
+{ "extends": "../../babel.config.js" }

packages/cli/bin/inquiries/starterkit.js

@@ -10,7 +10,8 @@ const starterkitSetup = [
     message: 'What initial patterns do you want included in your project?',
     choices: [
       {
-        name: 'Handlebars base patterns (some basic patterns to get started with)',
+        name:
+          'Handlebars base patterns (some basic patterns to get started with)',
         value: '@pattern-lab/starterkit-handlebars-vanilla',
       },
       {

packages/cli/bin/scaffold.js

@@ -1,7 +1,7 @@
 'use strict';
 const path = require('path');
 const execa = require('execa');
-const fs = require('fs-extra');
+const fs = require('fs');
 const wrapAsync = require('./utils').wrapAsync;
 const mkdirsAsync = require('./utils').mkdirsAsync;
 
@@ -18,7 +18,6 @@ const scaffold = (projectDir, sourceDir, publicDir, exportDir) =>
   wrapAsync(function* () {
     const projectPath = path.join(process.cwd(), projectDir);
     if (!fs.existsSync(path.join(projectPath, 'package.json'))) {
-      fs.ensureDirSync(projectPath);
       execa.sync('npm', ['init', '-y'], {
         cwd: projectPath,
       });

packages/cli/package.json

@@ -24,9 +24,9 @@
   },
   "devDependencies": {
     "dos2unix-cli": "^1.0.1",
-    "eslint": "4.18.2",
-    "eslint-config-prettier": "2.9.0",
-    "eslint-plugin-prettier": "2.6.0",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.1.0",
+    "eslint-plugin-prettier": "3.3.1",
     "prettier": "2.8.1",
     "proxyquire": "2.1.3",
     "tap": "14.11.0"

packages/core/.babelrc

@@ -0,0 +1 @@
+{ "extends": "../../babel.config.js" }

packages/core/package.json

@@ -22,12 +22,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",
+    "@babel/eslint-parser": "^7.13.14",
+    "@babel/eslint-plugin": "^7.13.15",
     "@babel/plugin-proposal-decorators": "^7.13.5",
     "@babel/plugin-syntax-jsx": "^7.12.13",
-    "babel-eslint": "^10.0.2",
-    "eslint": "^6.1.0",
-    "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-prettier": "^3.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "jsdoc-to-markdown": "6.0.1",
     "prettier": "^2.8.1",
     "rewire": "2.5.2",

packages/core/src/lib/server.js

@@ -36,30 +36,6 @@ const server = (patternlab) => {
             patternlab.config.paths.public.root
           )
         );
-        defaults.assets = [
-          path.resolve(
-            path.join(
-              process.cwd(),
-              patternlab.config.paths.source.js,
-              '**',
-              '*.js' // prevent preprocessors like typescript from reloading
-            )
-          ),
-          path.resolve(
-            path.join(process.cwd(), patternlab.config.paths.source.images)
-          ),
-          path.resolve(
-            path.join(process.cwd(), patternlab.config.paths.source.fonts)
-          ),
-          path.resolve(
-            path.join(
-              process.cwd(),
-              patternlab.config.paths.source.css,
-              '**',
-              '*.css' // prevent preprocessors from reloading
-            )
-          ),
-        ];
 
         // allow for overrides should they exist inside patternlab-config.json
         const liveServerConfig = Object.assign(

packages/core/test/files/_meta/_head.html

@@ -20,4 +20,5 @@
     {{{ patternLabHead }}}
     <!-- End Pattern Lab -->
   </head>
-  <body class="{{ bodyClass }}">
+  <body class="{{ bodyClass }}"></body>
+</html>

packages/core/test/pattern_engines_tests.js

@@ -28,8 +28,9 @@ var engineNames = Object.keys(patternEngines);
 tap.test(
   'getEngineNameForPattern returns "mustache" from test pattern',
   function (test) {
-    var engineName =
-      patternEngines.getEngineNameForPattern(mustacheTestPattern);
+    var engineName = patternEngines.getEngineNameForPattern(
+      mustacheTestPattern
+    );
     test.equal(engineName, 'mustache');
     test.end();
   }

packages/development-edition-engine-react/source/_meta/_head.html

@@ -20,4 +20,5 @@
     {{{ patternLabHead }}}
     <!-- End Pattern Lab -->
   </head>
-  <body class="{{ bodyClass }}">
+  <body class="{{ bodyClass }}"></body>
+</html>

packages/edition-node-gulp/gulpfile.js

@@ -27,7 +27,6 @@ function serve() {
   return patternlab.server
     .serve({
       cleanPublic: config.cleanPublic,
-      watch: true,
     })
     .then(() => {
       // do something else when this promise resolves

packages/live-server/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  env: {
+    node: true,
+  },
+  rules: {
+    quotes: 0,
+    curly: 0,
+    strict: 0,
+    'node/no-process-exit': 0,
+    eqeqeq: 1,
+    'no-unused-vars': 1,
+    'no-shadow': 1,
+  },
+};

packages/live-server/package.json

@@ -28,7 +28,7 @@
     "serve-index": "1.9.1"
   },
   "devDependencies": {
-    "eslint": "4.18.2",
+    "eslint": "7.32.0",
     "jshint": "2.12.0",
     "mocha": "4.0.1",
     "supertest": "3.0.0"
@@ -51,19 +51,5 @@
   },
   "preferGlobal": true,
   "license": "MIT",
-  "eslintConfig": {
-    "env": {
-      "node": true
-    },
-    "rules": {
-      "quotes": 0,
-      "curly": 0,
-      "strict": 0,
-      "no-process-exit": 0,
-      "eqeqeq": 1,
-      "no-unused-vars": 1,
-      "no-shadow": 1
-    }
-  },
   "gitHead": "80f62be442223e09bafb30d0529cbd768e03f2ac"
 }

packages/plugin-tab/package.json

@@ -21,7 +21,7 @@
   "license": "MIT",
   "homepage": "https://github.com/pattern-lab/patternlab-node/tree/master/packages/plugin-tab",
   "devDependencies": {
-    "eslint": "4.18.2"
+    "eslint": "7.32.0"
   },
   "publishConfig": {
     "access": "public"

packages/uikit-workshop/src/html/index.html

@@ -28,6 +28,7 @@
     <!-- the template for the modal slider -->
     <!-- prettier-ignore -->
     <script type="text/x-handlebars-template" class="pl-js-panel-template-base">
+
       ${require('./partials/base-template.html') }
     </script>
 

packages/uikit-workshop/src/scripts/actions/app.js

@@ -9,15 +9,17 @@ export const UPDATE_CURRENT_URL = 'UPDATE_CURRENT_URL';
 export const UPDATE_CURRENT_PATTERN = 'UPDATE_CURRENT_PATTERN';
 export const IS_VIEWALL_PAGE = 'IS_VIEWALL_PAGE';
 
-export const updateCurrentPattern =
-  (currentPattern) => (dispatch, getState) => {
-    if (getState().app.currentPattern !== currentPattern) {
-      dispatch({
-        type: UPDATE_CURRENT_PATTERN,
-        currentPattern,
-      });
-    }
-  };
+export const updateCurrentPattern = (currentPattern) => (
+  dispatch,
+  getState
+) => {
+  if (getState().app.currentPattern !== currentPattern) {
+    dispatch({
+      type: UPDATE_CURRENT_PATTERN,
+      currentPattern,
+    });
+  }
+};
 
 export const updateCurrentUrl = (currentUrl) => (dispatch, getState) => {
   if (getState().app.currentUrl !== currentUrl) {
@@ -73,15 +75,17 @@ export const updateDrawerState = (opened) => (dispatch, getState) => {
   }
 };
 
-export const updateDrawerAnimationState =
-  (drawerIsAnimating) => (dispatch, getState) => {
-    if (getState().app.drawerIsAnimating !== drawerIsAnimating) {
-      dispatch({
-        type: UPDATE_DRAWER_ANIMATION_STATE,
-        drawerIsAnimating,
-      });
-    }
-  };
+export const updateDrawerAnimationState = (drawerIsAnimating) => (
+  dispatch,
+  getState
+) => {
+  if (getState().app.drawerIsAnimating !== drawerIsAnimating) {
+    dispatch({
+      type: UPDATE_DRAWER_ANIMATION_STATE,
+      drawerIsAnimating,
+    });
+  }
+};
 
 export const updateDrawerHeight = (height) => (dispatch, getState) => {
   if (getState().app.drawerHeight !== height) {

packages/uikit-workshop/webpack.config.js

@@ -74,6 +74,7 @@ module.exports = function (apiConfig) {
           ],
         ],
         plugins: [
+          // TODO: From what I understand, we should even also be able to move those to the babel.config.js in root, to align both linting and building here
           '@babel/plugin-proposal-optional-chaining',
           ['@babel/plugin-proposal-decorators', { legacy: true }],
           ['@babel/plugin-proposal-class-properties', { loose: true }],