Per-component CSS model

.eslintrc.json

@@ -1,5 +1,4 @@
 {
-    "parser": "babel-eslint",
     "plugins": ["markdown", "prettier"],
     "env": {
         "browser": true,
@@ -10,7 +9,7 @@
         "jest": true
     },
     "parserOptions": {
-        "ecmaVersion": 2017,
+        "ecmaVersion": 2020,
         "ecmaFeatures": {},
         "sourceType": "module",
         "experimentalObjectRestSpread": true

examples/blocks/src/streaming/streaming.js

@@ -90,6 +90,6 @@ window.addEventListener("DOMContentLoaded", async function () {
     // Add more rows every 50ms using the `update()` method on the `table` directly.
     (function postRow() {
         table.update(newRows());
-        setTimeout(postRow, 50);
+        setTimeout(postRow, 10);
     })();
 });

package.json

@@ -30,10 +30,9 @@
         "@babel/core": "^7.8.4",
         "@babel/preset-env": "^7.8.4",
         "@types/ws": "^7.2.2",
-        "@typescript-eslint/eslint-plugin": "^4.31.0",
+        "@typescript-eslint/eslint-plugin": "^5.33.1",
         "@typescript-eslint/parser": "^4.31.0",
         "arraybuffer-loader": "^1.0.2",
-        "babel-eslint": "^10.0.3",
         "babel-jest": "^25.1.0",
         "chalk": "^2.4.2",
         "cpy-cli": "^3.1.1",
@@ -45,10 +44,10 @@
         "dotenv": "^8.1.0",
         "esbuild": "^0.13.12",
         "esbuild-plugin-less": "^1.1.5",
-        "eslint": "^7.32.0",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-markdown": "^2.2.0",
-        "eslint-plugin-prettier": "^4.0.0",
+        "eslint": "^8.22.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-markdown": "^3.0.0",
+        "eslint-plugin-prettier": "^4.2.1",
         "fs-extra": "^8.1.0",
         "html-loader": "^0.5.1",
         "html-loader-jest": "^0.2.1",
@@ -71,12 +70,13 @@
         "octokit": "^1.7.2",
         "postcss": "^8",
         "postcss-loader": "^7",
-        "prettier": "^2.4.0",
+        "prettier": "^2.7.1",
         "puppeteer": "^13.1.3",
         "rimraf": "^2.6.2",
         "sinon": "^7.3.1",
         "style-loader": "^0.18.2",
         "term-img": "^4.1.0",
+        "tiny-glob": "^0.2.9",
         "ts-loader": "^6.2.0",
         "typedoc": "^0.22.7",
         "typedoc-plugin-markdown": "^3.11.6",

packages/perspective-workspace/src/js/workspace/workspace.js

@@ -350,11 +350,11 @@ export class PerspectiveWorkspace extends SplitPanel {
         if (master || this.mode === MODE.LINKED) {
             widget.viewer.addEventListener(
                 "perspective-select",
-                this.onPerspectiveSelect
+                this.onPerspectiveSelect.bind(this)
             );
             widget.viewer.addEventListener(
                 "perspective-click",
-                this.onPerspectiveSelect
+                this.onPerspectiveSelect.bind(this)
             );
             // TODO remove event listener
             this.masterPanel.addWidget(widget);
@@ -534,7 +534,7 @@ export class PerspectiveWorkspace extends SplitPanel {
         await viewer.restore({filter: newFilters});
     }
 
-    onPerspectiveSelect = async (event) => {
+    async onPerspectiveSelect(event) {
         const config = await event.target.save();
         // perspective-select is already handled for hypergrid
 
@@ -562,7 +562,7 @@ export class PerspectiveWorkspace extends SplitPanel {
                 this._filterViewer(widget.viewer, filters, candidates)
             );
         }
-    };
+    }
 
     async makeMaster(widget) {
         widget.master = true;
@@ -582,11 +582,11 @@ export class PerspectiveWorkspace extends SplitPanel {
         widget.viewer.restyleElement();
         widget.viewer.addEventListener(
             "perspective-click",
-            this.onPerspectiveSelect
+            this.onPerspectiveSelect.bind(this)
         );
         widget.viewer.addEventListener(
             "perspective-select",
-            this.onPerspectiveSelect
+            this.onPerspectiveSelect.bind(this)
         );
     }
 
@@ -605,11 +605,11 @@ export class PerspectiveWorkspace extends SplitPanel {
         widget.viewer.restyleElement();
         widget.viewer.removeEventListener(
             "perspective-click",
-            this.onPerspectiveSelect
+            this.onPerspectiveSelect.bind(this)
         );
         widget.viewer.removeEventListener(
             "perspective-select",
-            this.onPerspectiveSelect
+            this.onPerspectiveSelect.bind(this)
         );
     }
 
@@ -971,7 +971,7 @@ export class PerspectiveWorkspace extends SplitPanel {
         widget.viewer.addEventListener("perspective-config-update", updated);
         widget.viewer.addEventListener(
             "perspective-plugin-update",
-            this.workspaceUpdated
+            this.workspaceUpdated.bind(this)
         );
 
         widget.title.changed.connect(updated);
@@ -987,7 +987,7 @@ export class PerspectiveWorkspace extends SplitPanel {
             );
             widget.viewer.removeEventListener(
                 "perspective-plugin-update",
-                this.workspaceUpdated
+                this.workspaceUpdated.bind(this)
             );
             widget.title.changed.disconnect(updated);
         });
@@ -1021,7 +1021,7 @@ export class PerspectiveWorkspace extends SplitPanel {
         }
     }
 
-    workspaceUpdated = () => {
+    async workspaceUpdated() {
         if (!this._save) {
             this._save = debounce(
                 () =>
@@ -1031,5 +1031,5 @@ export class PerspectiveWorkspace extends SplitPanel {
             );
         }
         this._save();
-    };
+    }
 }