Node v18. Upgrade frontend dependencies and resolve vulns (#2380)

* Migrate from node 12 to node 18

* update all packages from npm outdated

* next round of updates

* fix most vulnerabilities

* remaining vulnerabilites

* remove unused dependencies

.devcontainer/docker-compose.yml

@@ -11,7 +11,7 @@ services:
         # Use -bullseye variants on local arm64/Apple Silicon.
         VARIANT: 3.9-bullseye
         # Optional Node.js version to install
-        NODE_VERSION: "12"
+        NODE_VERSION: "18"
 
     volumes:
       - ..:/workspace:cached  

.eslintrc

@@ -4,7 +4,7 @@
     "browser": true,
     "es6": true
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 8,
     "sourceType": "module"

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
       - name: set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: '18.x'
 
       - name: set up Python
         uses: actions/setup-python@v2

.github/workflows/web_tests.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.x]
         # TODO: Add 14.x, 16.x.
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 

README.md

@@ -23,9 +23,9 @@ For a one-click setup that leverages devcontainers, check out the devcontainer
     1. node and npm.
     1. Gulp: `npm install --global gulp-cli`
     1. Python virtual environment: `sudo apt install python3.9-venv`
-1. We recommend using an older node version, e.g. node 12
+1. We recommend using an older node version, e.g. node 18
     1. Use `node -v` to check the default node version
-    2. `nvm use 12` to switch to node 12
+    2. `nvm use 18` to switch to node 18
 1. `cd chromium-dashboard`
 1. Install JS an python dependencies: `npm run setup`
     1. Note: Whenever we make changes to package.json or requirements.txt, you will need to run `npm run clean-setup`.

client-src/elements/chromedash-roadmap-milestone-card.js

@@ -1,6 +1,6 @@
 import {LitElement, html, nothing} from 'lit';
 import {ROADMAP_MILESTONE_CARD_CSS} from
-'../sass/elements/chromedash-roadmap-milestone-card-css.js';
+  '../sass/elements/chromedash-roadmap-milestone-card-css.js';
 
 const REMOVED_STATUS = ['Removed'];
 const DEPRECATED_STATUS = ['Deprecated', 'No longer pursuing'];

gulpfile.babel.js

@@ -1,28 +1,23 @@
 'use strict';
 
-const path = require('path');
-const gulp = require('gulp');
-const babel = require("gulp-babel");
-const concat = require('gulp-concat');
-const del = require('del');
-const uglifyEs = require('gulp-uglify-es');
+import gulp from 'gulp';
+import babel from 'gulp-babel';
+import dartSass from 'sass';
+import gulpSass from 'gulp-sass';
+const sass = gulpSass( dartSass );
+import concat from 'gulp-concat';
+import { deleteAsync } from 'del';
+import uglifyEs from 'gulp-uglify-es';
 const uglify = uglifyEs.default;
-const gulpLoadPlugins = require('gulp-load-plugins');
-const eslintIfFixed = require('gulp-eslint-if-fixed');
-const $ = gulpLoadPlugins();
-const rollup = require('rollup');
-const rollupResolve = require('rollup-plugin-node-resolve');
-const rollupLitCss = require('rollup-plugin-lit-css');
-const rollupBabel = require('rollup-plugin-babel');
-const rollupMinify = require('rollup-plugin-babel-minify');
-
-function minifyHtml() {
-  return $.minifyHtml({
-    quotes: true,
-    empty: true,
-    spare: true
-  }).on('error', console.log.bind(console));
-}
+import rename from 'gulp-rename';
+import license from 'gulp-license';
+import eslint from 'gulp-eslint';
+import eslintIfFixed from 'gulp-eslint-if-fixed';
+import autoPrefixer from 'gulp-autoprefixer';
+import { rollup } from 'rollup';
+import rollupResolve from '@rollup/plugin-node-resolve';
+import rollupBabel from '@rollup/plugin-node-resolve';
+import rollupMinify from 'rollup-plugin-babel-minify';
 
 function uglifyJS() {
   return uglify({
@@ -30,8 +25,8 @@ function uglifyJS() {
   });
 }
 
-function license() {
-  return $.license('Apache2', {
+function addLicense() {
+  return license('Apache2', {
     organization: 'Copyright (c) 2016 The Google Inc. All rights reserved.',
     tiny: true
   });
@@ -42,9 +37,9 @@ gulp.task('lint', () => {
     'client-src/js-src/*.js',
     'client-src/elements/*.js',
   ])
-    .pipe($.eslint())
-    .pipe($.eslint.format())
-    .pipe($.eslint.failAfterError());
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failAfterError());
 });
 
 gulp.task('lint-fix', () => {
@@ -52,10 +47,10 @@ gulp.task('lint-fix', () => {
     'client-src/js-src/*.js',
     'client-src/elements/*.js',
   ], {base: './'})
-    .pipe($.eslint({fix:true}))
-    .pipe($.eslint.format())
+    .pipe(eslint({fix:true}))
+    .pipe(eslint.format())
     .pipe(eslintIfFixed('./'))
-    .pipe($.eslint.failAfterError());
+    .pipe(eslint.failAfterError());
 });
 
 // Compile and automatically prefix stylesheets
@@ -69,11 +64,11 @@ gulp.task('styles', () => {
   return gulp.src([
     'client-src/sass/**/*.scss'
   ])
-    .pipe($.sass({
+    .pipe(sass({
       outputStyle: 'compressed',
       precision: 10
-    }).on('error', $.sass.logError))
-    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
+    }).on('error', sass.logError))
+    .pipe(autoPrefixer(AUTOPREFIXER_BROWSERS))
     .pipe(gulp.dest('static/css'));
 });
 
@@ -86,10 +81,9 @@ gulp.task('css', function() {
 });
 
 gulp.task('rollup', () => {
-  return rollup.rollup({
+  return rollup({
     input: 'client-src/components.js',
     plugins: [
-      rollupLitCss({include: []}),
       rollupResolve(),
       rollupBabel({
         plugins: ["@babel/plugin-syntax-dynamic-import"]
@@ -113,14 +107,14 @@ gulp.task('js', () => {
   ])
     .pipe(babel()) // Defaults are in .babelrc
     .pipe(uglifyJS())
-    .pipe(license()) // Add license to top.
-    .pipe($.rename({suffix: '.min'}))
+    .pipe(addLicense()) // Add license to top.
+    .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest('static/js'));
 });
 
 // Clean generated files
 gulp.task('clean', () => {
-  return del([
+  return deleteAsync([
     'static/css/',
     'static/dist',
     'static/js/',

package.json

@@ -3,8 +3,9 @@
   "description": "Chrome platform status - chromestatus.com",
   "homepage": "https://www.chromestatus.com",
   "private": true,
+  "type": "module",
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=18.0.0"
   },
   "scripts": {
     "setup": "npm ci; python3.9 -m venv cs-env; npm run deps",
@@ -43,53 +44,49 @@
     "url": "https://github.com/GoogleChrome/chromium-dashboard/issues"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/core": "^7.19.6",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/eslint-plugin": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.19.4",
     "@babel/register": "^7.18.9",
     "@open-wc/testing": "^3.1.6",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
     "@shoelace-style/shoelace": "^2.0.0-beta.83",
-    "@web/test-runner": "^0.14.0",
-    "@web/test-runner-playwright": "^0.8.10",
+    "@web/test-runner": "^0.15.0",
+    "@web/test-runner-playwright": "^0.9.0",
     "acorn": ">=8.8.1",
-    "babel-eslint": "^10.0.3",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/eslint-plugin": "^7.19.1",
     "color-string": ">=1.9.0",
-    "del": "^3.0.0",
+    "del": "^7.0.0",
     "dot-prop": ">=7.2.0",
-    "eslint": "^5.2.0",
+    "eslint": "^8.25.0",
     "eslint-config-google": "^0.14.0",
     "glob-parent": ">=6.0.2",
-    "gulp": "^4.0.0",
+    "gulp": "^4.0.2",
     "gulp-autoprefixer": "^8.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-concat": "^2.6.1",
     "gulp-eslint": "^6.0.0",
     "gulp-eslint-if-fixed": "^1.0.0",
     "gulp-license": "^1.1.0",
-    "gulp-load-plugins": "^2.0.8",
-    "gulp-minify-html": "^1.0.6",
     "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.0.1",
+    "gulp-sass": "^5.1.0",
     "gulp-uglify-es": "^3.0.0",
-    "gulp-util": "^3.0.7",
-    "http2-push-manifest": "^1.0.0",
     "ini": ">=3.0.1",
     "kind-of": ">=6.0.3",
-    "lit-analyzer": "^1.1.9",
+    "lit-analyzer": "^0.0.6",
     "lodash": ">=4.17.21",
     "lodash.template": ">=4.5.0",
     "minimist": ">=1.2.7",
     "path-parse": ">=1.0.7",
     "regenerator-runtime": "^0.13.10",
-    "rollup": "^1.32.1",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-babel-minify": "^9.1.0",
-    "rollup-plugin-lit-css": "^2.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup": "^3.2.3",
+    "rollup-plugin-babel-minify": "^10.0.0",
     "sinon": "^14.0.1",
-    "sw-precache": "^5.2.1",
-    "sw-toolbox": "^3.6.0",
     "tar": ">=3.2.3",
     "trim-newlines": ">=4.0.2"
   },
@@ -99,9 +96,12 @@
     "@polymer/iron-iconset-svg": "^3.0.1",
     "lit": "^2",
     "node-fetch": ">=3.2.10",
-    "node-sass": ">=7.0.3",
+    "sass": ">=1.55.0",
     "page": "^1.11.6",
     "urijs": ">=1.19.11",
     "yargs-parser": ">=21.1.1"
+  },
+  "overrides": {
+    "glob-parent@<5.1.2": ">=5.1.2"
   }
 }