Upgrade node to 16.13 (#163)

* Updated base packages and regenerated package-lock

* Added babel plugin to eslint, cleaned up webpack config

* Version requirements for node/npm in README

* Readded compass and css, removed by mistake

* Fixed jest testing

* Fixing lint issues.

* Moved import to use webapp redux package

* Fixed final jest issue

* Modified packages and rebuild packagelock for node 16.14

* Add src and mattermost-redux alias

* Update README.md

Co-authored-by: Michael Kochell <6913320+mickmister@users.noreply.github.com>

* Adding nvm and removing the default type from the package

* Delete root package-lock.json

* Pinned to webapp v7, rebuild package log

* fixed imports with TS

* change tsconfig location pointer

* updates for vscode-eslint to work with tsconfig subpath

* don't import webapp for tests

* remove "v" from .nvmrc

---------

Co-authored-by: Michael Kochell <6913320+mickmister@users.noreply.github.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

.gitignore

@@ -3,8 +3,5 @@ dist/
 # Mac
 .DS_Store
 
-# VSCode
-.vscode/
-
 # Jetbrains
 .idea/

.nvmrc

@@ -1 +1 @@
-14.21.1
+16.13.1

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "eslint.workingDirectories": [
+        "webapp"
+    ]
+}

README.md

@@ -4,6 +4,8 @@ This plugin serves as a starting point for writing a Mattermost plugin. Feel fre
 
 To learn more about plugins, see [our plugin documentation](https://developers.mattermost.com/extend/plugins/).
 
+This template requires node v16 and npm v8. You can download and install nvm to manage your node versions by following the instructions [here](https://github.com/nvm-sh/nvm). Once you've setup the project simply run `nvm i` within the root folder to use the suggested version of node.
+
 ## Getting Started
 Use GitHub's template feature to make a copy of this repository by clicking the "Use this template" button.
 

webapp/.eslintrc.json

@@ -1,10 +1,33 @@
 {
+   "settings": {
+      "import/resolver": {
+         "typescript": {
+            "project": "./tsconfig.json"
+         }
+       },
+      "react": {
+         "version": "16.14.0"
+      }
+   },
    "extends": [
       "eslint:recommended",
-      "plugin:react-hooks/recommended"
+      "plugin:react-hooks/recommended",
+      "plugin:import/recommended",
+      "plugin:import/typescript",
+      "plugin:jest/recommended"
+   ],
+   "parser": "@typescript-eslint/parser",
+   "plugins": [
+      "jest",
+      "react",
+      "import",
+      "babel",
+      "cypress",
+      "no-only-tests",
+      "@typescript-eslint"
    ],
    "parserOptions": {
-    "ecmaVersion": 8,
+      "ecmaVersion": "latest",
       "sourceType": "module",
       "ecmaFeatures": {
          "jsx": true,
@@ -13,11 +36,6 @@
          "experimentalObjectRestSpread": true
       }
    },
-  "parser": "babel-eslint",
-  "plugins": [
-    "react",
-    "import"
-  ],
    "env": {
       "browser": true,
       "node": true,
@@ -25,18 +43,6 @@
       "es6": true,
       "jest": true
    },
-  "globals": {
-    "jest": true,
-    "describe": true,
-    "it": true,
-    "expect": true,
-    "before": true,
-    "after": true,
-    "beforeEach": true
-  },
-  "settings": {
-    "import/resolver": "webpack"
-  },
    "rules": {
       "array-bracket-spacing": [
          2,
@@ -632,7 +638,10 @@
    },
    "overrides": [
       {
-      "files": ["**/*.tsx", "**/*.ts"],
+         "files": [
+            "**/*.tsx",
+            "**/*.ts"
+         ],
          "extends": "plugin:@typescript-eslint/recommended",
          "rules": {
             "@typescript-eslint/ban-ts-ignore": 0,
@@ -660,7 +669,10 @@
             "react/jsx-filename-extension": [
                1,
                {
-            "extensions": [".jsx", ".tsx"]
+                  "extensions": [
+                     ".jsx",
+                     ".tsx"
+                  ]
                }
             ]
          }

webapp/package.json

@@ -13,62 +13,73 @@
     "check-types": "tsc"
   },
   "devDependencies": {
-    "@babel/cli": "7.10.4",
+    "@babel/cli": "7.16.8",
-    "@babel/core": "7.10.4",
+    "@babel/core": "7.16.12",
-    "@babel/plugin-proposal-class-properties": "7.10.4",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "7.16.7",
-    "@babel/plugin-proposal-optional-chaining": "7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "7.16.7",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/polyfill": "7.10.4",
+    "@babel/preset-env": "7.16.11",
-    "@babel/preset-env": "7.10.4",
+    "@babel/preset-react": "7.16.7",
-    "@babel/preset-react": "7.10.4",
+    "@babel/preset-typescript": "7.16.7",
-    "@babel/preset-typescript": "7.10.4",
+    "@babel/runtime": "7.16.7",
-    "@babel/runtime": "7.10.4",
+    "@emotion/babel-preset-css-prop": "11.2.0",
-    "@emotion/babel-preset-css-prop": "10.0.27",
+    "@emotion/core": "10.3.1",
-    "@emotion/core": "10.0.28",
+    "@mattermost/types": "6.7.0-0",
-    "@types/enzyme": "3.10.5",
+    "@testing-library/jest-dom": "5.16.1",
-    "@types/jest": "26.0.4",
+    "@types/babel__core": "7.1.18",
-    "@types/node": "14.0.20",
+    "@types/babel__template": "7.4.1",
-    "@types/react": "16.9.41",
+    "@types/enzyme": "3.10.11",
-    "@types/react-dom": "16.9.8",
+    "@types/jest": "27.4.0",
-    "@types/react-intl": "3.0.0",
+    "@types/node": "17.0.12",
-    "@types/react-redux": "7.1.9",
+    "@types/react": "16.14.26",
+    "@types/react-dom": "17.0.11",
+    "@types/react-redux": "7.1.22",
     "@types/react-router-dom": "5.1.5",
     "@types/react-transition-group": "4.4.0",
-    "@typescript-eslint/eslint-plugin": "3.6.0",
+    "@typescript-eslint/eslint-plugin": "5.10.1",
-    "@typescript-eslint/parser": "3.6.0",
+    "@typescript-eslint/parser": "5.10.1",
+    "@typescript-eslint/typescript-estree": "5.52.0",
     "babel-eslint": "10.1.0",
-    "babel-jest": "26.1.0",
+    "babel-loader": "8.2.2",
-    "babel-loader": "8.1.0",
+    "babel-plugin-formatjs": "10.3.7",
-    "babel-plugin-typescript-to-proptypes": "1.3.2",
+    "babel-plugin-typescript-to-proptypes": "2.0.0",
-    "css-loader": "3.6.0",
+    "css-loader": "6.5.1",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.2",
+    "enzyme-adapter-react-16": "1.15.6",
-    "enzyme-to-json": "3.5.0",
+    "enzyme-to-json": "3.6.2",
-    "eslint": "7.4.0",
+    "eslint": "8.8.0",
-    "eslint-import-resolver-webpack": "0.12.2",
+    "eslint-import-resolver-alias": "1.1.2",
-    "eslint-plugin-import": "2.22.0",
+    "eslint-import-resolver-typescript": "2.7.1",
-    "eslint-plugin-react": "7.20.3",
+    "eslint-import-resolver-webpack": "0.13.2",
-    "eslint-plugin-react-hooks": "4.0.6",
+    "eslint-plugin-babel": "5.3.1",
-    "file-loader": "6.0.0",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-header": "3.1.1",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jest": "26.5.3",
+    "eslint-plugin-mattermost": "github:mattermost/eslint-plugin-mattermost",
+    "eslint-plugin-no-only-tests": "2.6.0",
+    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "file-loader": "6.2.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.1.0",
+    "isomorphic-fetch": "3.0.0",
-    "jest-canvas-mock": "2.2.0",
+    "jest": "27.4.7",
-    "jest-junit": "11.0.1",
+    "jest-canvas-mock": "2.3.1",
-    "mattermost-webapp": "github:mattermost/mattermost-webapp#23f5f93d9f12a7e2b5623e5cee6814366abd9a0f",
+    "jest-junit": "13.0.0",
-    "node-sass": "4.14.1",
+    "sass": "1.52.3",
-    "sass-loader": "9.0.2",
+    "sass-loader": "13.0.0",
-    "style-loader": "1.2.1",
+    "style-loader": "3.3.1",
-    "webpack": "4.43.0",
+    "webpack": "5.75.0",
-    "webpack-cli": "3.3.12"
+    "webpack-cli": "5.0.1"
   },
   "dependencies": {
-    "core-js": "3.6.5",
+    "@mattermost/webapp": "github:mattermost/mattermost-webapp",
-    "mattermost-redux": "5.27.0",
+    "core-js": "3.22.8",
-    "react": "16.13.1",
+    "react": "^16.14.0",
-    "react-redux": "7.2.0",
+    "react-redux": "8.0.2",
-    "redux": "4.0.5",
+    "redux": "4.2.0",
-    "typescript": "3.9.6"
+    "typescript": "4.6.4"
   },
   "jest": {
     "snapshotSerializers": [

webapp/src/index.tsx

@@ -1,11 +1,10 @@
 import {Store, Action} from 'redux';
 
-import {GlobalState} from 'mattermost-redux/types/store';
+import {GlobalState} from '@mattermost/types/lib/store';
 
-import manifest from './manifest';
+import {manifest} from '@/manifest';
 
-// eslint-disable-next-line import/no-unresolved
+import {PluginRegistry} from '@/types/mattermost-webapp';
-import {PluginRegistry} from './types/mattermost-webapp';
 
 export default class Plugin {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
@@ -16,7 +15,7 @@ export default class Plugin {
 
 declare global {
     interface Window {
-        registerPlugin(id: string, plugin: Plugin): void
+        registerPlugin(pluginId: string, plugin: Plugin): void
     }
 }
 

webapp/src/manifest.test.tsx

@@ -1,4 +1,4 @@
-import manifest, {id, version} from './manifest';
+import {manifest} from './manifest';
 
 test('Plugin manifest, id and version are defined', () => {
     expect(manifest).toBeDefined();
@@ -8,6 +8,6 @@ test('Plugin manifest, id and version are defined', () => {
 
 // To ease migration, verify separate export of id and version.
 test('Plugin id and version are defined', () => {
-    expect(id).toBeDefined();
+    expect(manifest.id).toBeDefined();
-    expect(version).toBeDefined();
+    expect(manifest.version).toBeDefined();
 });

webapp/src/manifest.ts

@@ -1,5 +1,3 @@
-import manifest from '../../plugin.json';
+import manifest from '@/../../plugin.json';
 
-export default manifest;
+export {manifest};
-export const id = manifest.id;
-export const version = manifest.version;

webapp/tests/setup.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import 'mattermost-webapp/tests/setup';
+// import '@mattermost/webapp/tests/setup';
+
+export {};

webapp/tsconfig.json

@@ -1,6 +1,11 @@
 {
   "compilerOptions": {
     "target": "esnext",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"],
+      "mattermost-redux/*": ["../node_modules/@mattermost/webapp/packages/mattermost-redux/src/*"],
+    },
     "lib": [
       "dom",
       "dom.iterable",
@@ -19,12 +24,11 @@
     "isolatedModules": true,
     "noEmit": true,
     "experimentalDecorators": true,
-    "jsx": "react",
+    "jsx": "react"
-    "baseUrl": "./src",
-    "typeRoots": [ "./src/types", "./node_modules/@types"],
   },
   "include": [
-    "src"
+    "src",
+    "tests"
   ],
   "exclude": [
     "dist",

webapp/webpack.config.js

@@ -5,12 +5,7 @@ const path = require('path');
 const PLUGIN_ID = require('../plugin.json').id;
 
 const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
-let mode = 'production';
+const isDev = NPM_TARGET === 'debug' || NPM_TARGET === 'debug:watch';
-let devtool = '';
-if (NPM_TARGET === 'debug' || NPM_TARGET === 'debug:watch') {
-    mode = 'development';
-    devtool = 'source-map';
-}
 
 const plugins = [];
 if (NPM_TARGET === 'build:watch' || NPM_TARGET === 'debug:watch') {
@@ -34,11 +29,15 @@ if (NPM_TARGET === 'build:watch' || NPM_TARGET === 'debug:watch') {
     });
 }
 
-module.exports = {
+const config = {
     entry: [
         './src/index.tsx',
     ],
     resolve: {
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+            'mattermost-redux': path.resolve(__dirname, 'node_modules/@mattermost/webapp/packages/mattermost-redux/src'),
+        },
         modules: [
             'src',
             'node_modules',
@@ -94,7 +93,12 @@ module.exports = {
         publicPath: '/',
         filename: 'main.js',
     },
-    devtool,
+    mode: (isDev) ? 'eval-source-map' : 'production',
-    mode,
     plugins,
 };
+
+if (isDev) {
+    Object.assign(config, {devtool: 'eval-source-map'});
+}
+
+module.exports = config;