[infoview] Port to React

This is prerequisite to implement / fix effectively #143 and #216 for example; the current Info View rendering using strings doesn't scale anymore to the kind of DOM manipulation we need. Why React? That was a careful choice for many reasons, in particular seems like the best fit for our use case (so far); moreover, 3rd party package support is the best.
ejgallego · Jan 27, 2023 · 8197680 · 8197680
1 parent 6c85ee5
commit 8197680
Show file tree

Hide file tree

Showing 12 changed files with 460 additions and 189 deletions.
diff --git a/editor/code/esbuild.mjs b/editor/code/esbuild.mjs
@@ -60,6 +60,6 @@ function viewBuild(file) {
     .catch(() => process.exit(1));
 }
 
-var infoView = viewBuild("./views/info/index.ts");
+var infoView = viewBuild("./views/info/index.tsx");
 
 await Promise.all[(client, infoView)];
diff --git a/editor/code/lib/types.ts b/editor/code/lib/types.ts
@@ -1,5 +1,7 @@
-import { VersionedTextDocumentIdentifier } from "vscode-languageclient";
-import { Position } from "vscode";
+import {
+  VersionedTextDocumentIdentifier,
+  Position,
+} from "vscode-languageserver-types";
 
 export interface Hyp<Pp> {
   names: Pp;

diff --git a/editor/code/package-lock.json b/editor/code/package-lock.json
diff --git a/editor/code/package.json b/editor/code/package.json
@@ -173,16 +173,21 @@
   },
   "devDependencies": {
     "@types/node": "^16.11.7",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
     "@types/throttle-debounce": "^5.0.0",
-    "@types/vscode-webview": "^1.57.1",
     "@types/vscode": "^1.73.0",
+    "@types/vscode-webview": "^1.57.1",
     "esbuild": "^0.16.13",
     "prettier": "^2.8.1",
     "typescript": "^4.9.4"
   },
   "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "throttle-debounce": "^5.0.0",
-    "vscode-languageclient": "^8.0.2"
+    "vscode-languageclient": "^8.0.2",
+    "vscode-languageserver-types": "^3.17.2"
   },
   "main": "./out/src/client.js",
   "scripts": {

diff --git a/editor/code/src/goals.ts b/editor/code/src/goals.ts
@@ -57,7 +57,7 @@ export class InfoPanel {
         <title>Coq's info panel</title>
     </head>
     <body>
-    <div id="coq-info-body">
+    <div id="root">
     </div>
     </body>
     </html>`;