Upgrade LIT to Node 18 and TypeScript 5.0

PiperOrigin-RevId: 552542051
PAIR-code · Jul 31, 2023 · 7b96a6d · 7b96a6d
1 parent 9767670
commit 7b96a6d
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 67 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -32,7 +32,7 @@ jobs:
     name: Build and test (Python ${{ matrix.python-version }}, Node ${{ matrix.node-version }})
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
         python-version: ["3.9"]
     defaults:
       run:

diff --git a/Dockerfile b/Dockerfile
@@ -18,7 +18,7 @@ FROM python:3.9-slim
 
 # Update Ubuntu packages and install basic utils
 RUN apt-get update
-RUN apt-get install -y wget curl gnupg2 gcc g++
+RUN apt-get install -y wget curl gnupg2 gcc g++ git
 
 # Install yarn
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -

diff --git a/lit_nlp/client/webpack/config.js b/lit_nlp/client/webpack/config.js
@@ -19,6 +19,7 @@ const glob = require('glob');
 const path = require('path');
 const webpack = require('webpack');
 const FileManagerPlugin = require('filemanager-webpack-plugin');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const TerserPlugin = require("terser-webpack-plugin");
 
 const GLOB_OPTIONS = {
@@ -63,13 +64,15 @@ module.exports = (env = {}) => {
    * bundles for each path in the `env.build` flag, described below.
    */
   const fileManagerParams = {
-    onEnd: {
-      copy: [{
-        source: resolveDir('../static'),
-        destination: resolveDir('../build/default/static')
-      }],
-      move: [],
-    },
+    events: {
+      onEnd: {
+        copy: [{
+          source: resolveDir('../static'),
+          destination: resolveDir('../build/default/static')
+        }],
+        move: []
+      }
+    }
   };
 
   // LIT's build commands (`yarn build`, `yarn watch`) accept an `env.build`
@@ -95,18 +98,20 @@ module.exports = (env = {}) => {
       ...glob.sync(resolveDir(`../../${path}/**/*.ts`), GLOB_OPTIONS)
     ];
 
-    fileManagerParams.onEnd.copy.push({
+    fileManagerParams.events.onEnd.copy.push({
       source: resolveDir('../static'),
       destination: resolveDir(`../../${path}/build/static`)
     });
 
-    fileManagerParams.onEnd.move.push({
+    fileManagerParams.events.onEnd.move.push({
       source: resolveDir(`../build/${moduleName}/main.js`),
       destination: resolveDir(`../../${path}/build/main.js`)
     });
 
-    fileManagerParams.onEnd.delete = fileManagerParams.onEnd.delete || [];
-    fileManagerParams.onEnd.delete.push(resolveDir(`../build/${moduleName}`));
+    fileManagerParams.events.onEnd.delete ??= [];
+    fileManagerParams.events.onEnd.delete.push(
+      resolveDir(`../build/${moduleName}`)
+    );
   }
 
   return {
@@ -140,11 +145,10 @@ module.exports = (env = {}) => {
       minimize: isProd,
       minimizer: [
         new TerserPlugin({
-          cache: true,
           parallel: true,
-          sourceMap: true,
           terserOptions: {
-            keep_classnames: true   // Required for LIT_TYPES_REGISTRY to work
+            keep_classnames: true,  // Required for LIT_TYPES_REGISTRY to work
+            sourceMap: true
           }
         })
       ]
@@ -162,7 +166,8 @@ module.exports = (env = {}) => {
       new webpack.DefinePlugin({
         PRODUCTION: isProd,
       }),
-      new FileManagerPlugin(fileManagerParams)
+      new FileManagerPlugin(fileManagerParams),
+      new NodePolyfillPlugin()
     ],
     watch: !isProd,
   };

diff --git a/lit_nlp/package.json b/lit_nlp/package.json
@@ -1,20 +1,20 @@
 {
   "name": "lit-client",
-  "version": "0.5.0",
+  "version": "1.0.0-rc1",
   "description": "Client app for LIT, the Learning Interpretability Tool",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "scripts": {
     "clean": "rm -rf ./client/build",
     "lint": "eslint -c ./.eslint.json 'client/**/*.ts'",
-    "build": "yarn clean && webpack --env.production --config ./client/webpack/config.js",
+    "build": "yarn clean && webpack --env production=production --config ./client/webpack/config.js",
     "watch": "yarn clean && webpack --config ./client/webpack/config.js --watch"
   },
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "@adobe/lit-mobx": "2.0.0-rc.4",
+    "@adobe/lit-mobx": "2.2.0",
     "@material/mwc-checkbox": "0.27.0",
     "@material/mwc-formfield": "0.27.0",
     "@material/mwc-icon": "0.27.0",
@@ -26,40 +26,36 @@
     "@material/mwc-textfield": "0.27.0",
     "d3": "5.16.0",
     "difflib": "0.2.4",
-    "lit": "2.0.0",
-    "marked": "4.0.12",
-    "megaplot": "github:PAIR-code/megaplot#dev",
+    "lit": "2.7.6",
+    "marked": "5.1.2",
+    "megaplot": "github:PAIR-code/megaplot#ca8210d",
     "mobx": "5.15.4",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "papaparse": "4.1.2",
     "scatter-gl": "0.0.13",
     "seedrandom": "3.0.5"
   },
   "devDependencies": {
     "@types/d3": "5.7.2",
     "@types/difflib": "0.2.0",
-    "@types/eslint": "^8.0.0",
+    "@types/eslint": "8.44.1",
     "@types/jasmine": "3.5.10",
-    "@types/marked": "4.0.3",
-    "@types/node": "14.0.13",
-    "@types/resize-observer-browser": "0.1.3",
-    "@types/seedrandom": "2.4.28",
-    "@typescript-eslint/eslint-plugin": "5.0.0",
-    "@typescript-eslint/parser": "5.0.0",
-    "copy-webpack-plugin": "5.1.1",
-    "css-loader": "3.4.2",
-    "eslint": "8.0.0",
+    "@types/marked": "5.0.1",
+    "@types/node": "20.4.5",
+    "@types/resize-observer-browser": "0.1.7",
+    "@types/seedrandom": "3.0.5",
+    "@typescript-eslint/eslint-plugin": "6.2.0",
+    "@typescript-eslint/parser": "6.2.0",
+    "eslint": "8.45.0",
     "eslint-plugin-node": "11.1.0",
-    "filemanager-webpack-plugin": "3.0.0-alpha.1",
-    "html-webpack-plugin": "4.0.3",
+    "filemanager-webpack-plugin": "8.0.0",
     "jasmine": "3.5.0",
-    "mini-css-extract-plugin": "0.9.0",
-    "style-loader": "1.1.3",
-    "ts-loader": "8.4.0",
-    "typescript": "4.7",
-    "webpack": "4.46.0",
-    "webpack-cli": "3.3.11",
-    "webpack-dev-server": "3.10.3",
-    "worker-loader": "2.0.0",
+    "mini-css-extract-plugin": "2.7.6",
+    "ts-loader": "9.4.4",
+    "typescript": "5.0",
+    "webpack": "5.88.2",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1",
     "yarn": "1.22.4"
   }
 }
diff --git a/lit_nlp/tsconfig.json b/lit_nlp/tsconfig.json
@@ -1,40 +1,41 @@
 {
   "compilerOptions": {
-    "outDir": "dist",
-    "target": "es5",
-    "module": "commonjs",
-    "lib": ["dom", "DOM.Iterable", "es2022"],
-    "types": ["node", "jasmine", "resize-observer-browser"],
-    "moduleResolution": "node",
     "allowJs": false,
-    "pretty": true,
-    "resolveJsonModule": true,
-    "sourceMap": false,
-    "skipLibCheck": true,
-    "removeComments": true,
-    "esModuleInterop": true,
-    "importsNotUsedAsValues": "preserve",
+    "allowUnreachableCode": false,
+    "declaration": false,
     "downlevelIteration": true,
-    "skipDefaultLibCheck": true,
-    "preserveConstEnums": false,
-    "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "noErrorTruncation": false,
-    "noEmitOnError": false,
-    "declaration": false,
-    "stripInternal": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "ignoreDeprecations": "5.0",
+    "importHelpers": true,
+    "importsNotUsedAsValues": "preserve",
     "inlineSourceMap": true,
     "inlineSources": true,
-    "importHelpers": true,
-    "allowUnreachableCode": false,
+    "lib": ["DOM", "DOM.Iterable", "es2022"],
+    "module": "es2015",
+    "moduleResolution": "bundler",
+    "noEmitOnError": false,
+    "noErrorTruncation": false,
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
     "noImplicitReturns": false,
     "noImplicitThis": true,
+    "outDir": "dist",
+    "preserveConstEnums": false,
+    "pretty": true,
+    "removeComments": true,
+    "resolveJsonModule": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "sourceMap": false,
     "strictBindCallApply": true,
     "strictFunctionTypes": true,
     "strictNullChecks": false,
-    "strictPropertyInitialization": false
+    "strictPropertyInitialization": false,
+    "stripInternal": true,
+    "target": "es2020",
+    "types": ["node", "lit", "jasmine", "resize-observer-browser"]
   },
   "include": ["./client", "./examples"],
   "compileOnSave": false