Update to node 16.14.2, update all dependencies to latest minor version

.babelrc

@@ -40,7 +40,8 @@
         ],
         "@babel/plugin-proposal-nullish-coalescing-operator",
         "@babel/plugin-proposal-do-expressions",
-        "@babel/plugin-proposal-function-bind"
+        "@babel/plugin-proposal-function-bind",
+        ["@babel/plugin-proposal-private-methods", { "loose": true }]
       ],
       "presets": [
         "@babel/preset-env",
@@ -85,6 +86,7 @@
     ],
     "@babel/plugin-proposal-nullish-coalescing-operator",
     "@babel/plugin-proposal-do-expressions",
-    "@babel/plugin-proposal-function-bind"
+    "@babel/plugin-proposal-function-bind",
+    ["@babel/plugin-proposal-private-methods", { "loose": true }]
   ]
 }

.eslintrc

@@ -1,6 +1,6 @@
 {
 	"extends": ["airbnb", "prettier"],
-	"parser": "babel-eslint",
+	"parser": "@babel/eslint-parser",
 	"env": {
     "browser": true,
     "node": true,
@@ -69,7 +69,7 @@
     "react", "jsx-a11y", "import", "prettier"
   ],
   "settings": {
-    "import/parser": "babel-eslint",
+    "import/parser": "@babel/eslint-parser",
     "import/resolve": {
       "moduleDirectory": ["node_modules"]
     }

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: '12.x'
+        node-version: '16.x'
     - run: npm install
     - run: npm run test
     - run: npm run lint

.nvmrc

@@ -1 +1 @@
-12.16.1
+16.14.2

.travis.yml

@@ -1,7 +1,7 @@
 sudo: required
 language: node_js
 node_js:
- - "12.16.1"
+ - "16.14.2"
 
 cache:
   directories:

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12.16.1 as base
+FROM node:16.14.2 as base
 ENV APP_HOME=/usr/src/app \
   TERM=xterm
 RUN mkdir -p $APP_HOME

client/index.integration.test.jsx

@@ -3,14 +3,7 @@ import { rest } from 'msw';
 import React from 'react';
 import { Router, browserHistory } from 'react-router';
 
-import {
-  reduxRender,
-  act,
-  waitFor,
-  fireEvent,
-  screen,
-  within
-} from './test-utils';
+import { reduxRender, act, waitFor, screen, within } from './test-utils';
 import configureStore from './store';
 import routes from './routes';
 import * as Actions from './modules/User/actions';

client/jest.setup.js

@@ -1,4 +1,4 @@
-import '@babel/polyfill';
+import 'regenerator-runtime/runtime';
 
 // See: https://github.com/testing-library/jest-dom
 // eslint-disable-next-line import/no-extraneous-dependencies

client/modules/App/components/DevTools.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { createDevTools } from 'redux-devtools';
-import LogMonitor from 'redux-devtools-log-monitor';
-import DockMonitor from 'redux-devtools-dock-monitor';
+import { createDevTools } from '@redux-devtools/core';
+import { LogMonitor } from '@redux-devtools/log-monitor';
+import { DockMonitor } from '@redux-devtools/dock-monitor';
 
 const devTools = (
   <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-w">

client/modules/IDE/components/Console.jsx

@@ -7,11 +7,6 @@ import { bindActionCreators } from 'redux';
 import { useSelector, useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import { Console as ConsoleFeed } from 'console-feed';
-import {
-  CONSOLE_FEED_LIGHT_STYLES,
-  CONSOLE_FEED_DARK_STYLES,
-  CONSOLE_FEED_CONTRAST_STYLES
-} from '../../../styles/components/_console-feed.scss';
 import warnLightUrl from '../../../images/console-warn-light.svg?byUrl';
 import warnDarkUrl from '../../../images/console-warn-dark.svg?byUrl';
 import warnContrastUrl from '../../../images/console-warn-contrast.svg?byUrl';
@@ -42,6 +37,114 @@ import { useDidUpdate } from '../hooks/custom-hooks';
 import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
 import { listen } from '../../../utils/dispatcher';
 
+const CONSOLE_FEED_WITHOUT_ICONS = {
+  LOG_WARN_ICON: 'none',
+  LOG_ERROR_ICON: 'none',
+  LOG_DEBUG_ICON: 'none',
+  LOG_INFO_ICON: 'none'
+};
+
+const CONSOLE_FEED_LIGHT_STYLES = {
+  BASE_BACKGROUND_COLOR: '',
+  LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 97%)',
+  LOG_ERROR_COLOR: '#D11518',
+  LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)',
+  LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)',
+  LOG_WARN_COLOR: '#996B00',
+  LOG_WARN_BORDER: 'hsl(50, 100%, 88%)',
+  LOG_INFO_COLOR: '#4D4D4D',
+  LOG_DEBUG_COLOR: '#0071AD',
+  LOG_DEBUG_BACKGROUND: '#D6F1FF',
+  LOG_DEBUG_BORDER: '#C2EBFF',
+  LOG_COLOR: '#4D4D4D',
+  ARROW_COLOR: '#666',
+  OBJECT_NAME_COLOR: '#333',
+  OBJECT_VALUE_NULL_COLOR: '#747474',
+  OBJECT_VALUE_UNDEFINED_COLOR: '#747474',
+  OBJECT_VALUE_STRING_COLOR: '#47820A',
+  OBJECT_VALUE_REGEXP_COLOR: '#A06801',
+  OBJECT_VALUE_NUMBER_COLOR: '#333',
+  OBJECT_VALUE_BOOLEAN_COLOR: '#D52889',
+  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9',
+  LOG_AMOUNT_BACKGROUND: '#5276B7',
+  LOG_AMOUNT_COLOR: '#FFF',
+  LOG_WARN_AMOUNT_BACKGROUND: '#996B00',
+  LOG_ERROR_AMOUNT_BACKGROUND: '#D11518',
+  LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD'
+};
+
+const CONSOLE_FEED_DARK_STYLES = {
+  BASE_BACKGROUND_COLOR: '',
+  BASE_COLOR: 'white',
+  OBJECT_NAME_COLOR: 'white',
+  OBJECT_VALUE_NULL_COLOR: '#DE4A9B',
+  OBJECT_VALUE_UNDEFINED_COLOR: '#DE4A9B',
+  OBJECT_VALUE_REGEXP_COLOR: '#EE9900',
+  OBJECT_VALUE_STRING_COLOR: '#58a10b',
+  OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)',
+  OBJECT_VALUE_NUMBER_COLOR: 'white',
+  OBJECT_VALUE_BOOLEAN_COLOR: '#DE4A9B',
+  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#b58318',
+  LOG_ERROR_BACKGROUND: '#1F0000',
+  LOG_ERROR_COLOR: '#DF3A3D',
+  LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
+  LOG_WARN_COLOR: '#F5BC38',
+  LOG_INFO_COLOR: '#D9D9D9',
+  LOG_INFO_BORDER: '#4D4D4D',
+  LOG_COLOR: '#D9D9D9',
+  LOG_DEBUG_COLOR: '#0C99E2',
+  LOG_DEBUG_BACKGROUND: '#05232E',
+  LOG_DEBUG_BORDER: '#0C546E',
+  TABLE_BORDER_COLOR: 'grey',
+  TABLE_TH_BACKGROUND_COLOR: 'transparent',
+  TABLE_TH_HOVER_COLOR: 'grey',
+  TABLE_SORT_ICON_COLOR: 'grey',
+  TABLE_DATA_BACKGROUND_IMAGE: 'grey',
+  TABLE_DATA_BACKGROUND_SIZE: 'grey',
+  ARROW_COLOR: '#D9D9D9',
+  LOG_AMOUNT_BACKGROUND: '#5276B7',
+  LOG_AMOUNT_COLOR: '#333',
+  LOG_WARN_AMOUNT_BACKGROUND: '#996B00',
+  LOG_ERROR_AMOUNT_BACKGROUND: '#D11518',
+  LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD'
+};
+
+const CONSOLE_FEED_CONTRAST_STYLES = {
+  BASE_BACKGROUND_COLOR: '',
+  BASE_COLOR: 'white',
+  OBJECT_NAME_COLOR: 'white',
+  OBJECT_VALUE_NULL_COLOR: '#FFA9D9',
+  OBJECT_VALUE_UNDEFINED_COLOR: '#FFA9D9',
+  OBJECT_VALUE_REGEXP_COLOR: '#2DE9B6',
+  OBJECT_VALUE_STRING_COLOR: '#2DE9B6',
+  OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF',
+  OBJECT_VALUE_NUMBER_COLOR: '#FFA9D9',
+  OBJECT_VALUE_BOOLEAN_COLOR: '#FFA9D9',
+  OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#F5DC23',
+  LOG_ERROR_BACKGROUND: '#1F0000',
+  LOG_ERROR_COLOR: '#EA7B7D',
+  LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
+  LOG_WARN_COLOR: '#F5BC38',
+  LOG_INFO_COLOR: '#D9D9D9',
+  LOG_INFO_BORDER: '#4D4D4D',
+  LOG_COLOR: '#D9D9D9',
+  LOG_DEBUG_COLOR: '#38B6F5',
+  LOG_DEBUG_BACKGROUND: '#05232E',
+  LOG_DEBUG_BORDER: '#0C546E',
+  TABLE_BORDER_COLOR: 'grey',
+  TABLE_TH_BACKGROUND_COLOR: 'transparent',
+  TABLE_TH_HOVER_COLOR: 'grey',
+  TABLE_SORT_ICON_COLOR: 'grey',
+  TABLE_DATA_BACKGROUND_IMAGE: 'grey',
+  TABLE_DATA_BACKGROUND_SIZE: 'grey',
+  ARROW_COLOR: '#D9D9D9',
+  LOG_AMOUNT_BACKGROUND: '#5276B7',
+  LOG_AMOUNT_COLOR: '#333',
+  LOG_WARN_AMOUNT_BACKGROUND: '#966C08',
+  LOG_ERROR_AMOUNT_BACKGROUND: '#DD3134',
+  LOG_DEBUG_AMOUNT_BACKGROUND: '#097BB3'
+};
+
 const getConsoleFeedStyle = (theme, fontSize) => {
   const style = {
     BASE_FONT_FAMILY: 'Inconsolata, monospace'

client/modules/IDE/components/Editor.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import CodeMirror from 'codemirror';
 import emmet from '@emmetio/codemirror-plugin';
-import prettier from 'prettier';
+import prettier from 'prettier/standalone';
 import babelParser from 'prettier/parser-babel';
 import htmlParser from 'prettier/parser-html';
 import cssParser from 'prettier/parser-postcss';

client/utils/reduxFormUtils.js

@@ -16,8 +16,10 @@ export const domOnlyProps = ({
   ...domProps }) => domProps;
 /* eslint-enable */
 
-// eslint-disable-next-line max-len
-const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
+/* eslint-disable */
+const EMAIL_REGEX =
+  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
+/* eslint-enable */
 
 function validateNameEmail(formProps, errors) {
   if (!formProps.username) {

contributor_docs/installation.md

@@ -6,15 +6,15 @@ Follow these instructions to set up your development environment, which you need
 
 _Note_: The installation steps assume you are using a Unix-like shell. If you are using Windows, you will need to use `copy` instead of `cp`.
 
-1. Install Node.js. The recommended way is to Node through [nvm](https://github.com/nvm-sh/nvm). You can also install [node.js](https://nodejs.org/download/release/v12.16.1/) version 12.16.1 directly from the Node.js website.
+1. Install Node.js. The recommended way is to Node through [nvm](https://github.com/nvm-sh/nvm). You can also install [node.js](https://nodejs.org/download/release/v16.14.2/) version 16.14.2 directly from the Node.js website.
 2. [Fork](https://help.github.com/articles/fork-a-repo) the [p5.js Web Editor repository](https://github.com/processing/p5.js-web-editor) into your own GitHub account.
 3. [Clone](https://help.github.com/articles/cloning-a-repository/) your new fork of the repository from GitHub onto your local computer.
 
    ```
    $ git clone https://github.com/YOUR_USERNAME/p5.js-web-editor.git
    ```
 
-4. If you are using nvm, run `$ nvm use` to set your Node version to 12.16.1
+4. If you are using nvm, run `$ nvm use` to set your Node version to 16.14.2
 5. Navigate into the project folder and install all its necessary dependencies with npm.
 
    ```

index.js

@@ -7,7 +7,7 @@ if (process.env.NODE_ENV === 'production') {
   require('@babel/register')({
     presets: ["@babel/preset-env"]
   });
-  require('@babel/polyfill');
+  require('regenerator-runtime/runtime');
   //// in development, let .env values override those in the environment already (i.e. in docker-compose.yml)
   // so commenting this out makes the docker container work.
   // if (process.env.NODE_ENV === 'development') {