(#85) migrate VSCode ext to use react

ChainMovers · Apr 17, 2024 · 3918f58 · 3918f58
1 parent 08f29f9
commit 3918f58
Show file tree

Hide file tree

Showing 51 changed files with 3,986 additions and 3,648 deletions.
diff --git a/typescript/vscode-extension/.gitignore b/typescript/vscode-extension/.gitignore
@@ -1,5 +1,6 @@
 out
 .vscode-test/
+webview-ui.svelte/
 
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 

diff --git a/typescript/vscode-extension/media/logo_128.png b/typescript/vscode-extension/media/logo_128.png
diff --git a/typescript/vscode-extension/package.json b/typescript/vscode-extension/package.json
@@ -2,6 +2,7 @@
  "name": "suibase",
  "displayName": "suibase",
  "description": "Streamline Sui Move development and testing.",
+ "icon": "media/logo_128.png",
  "version": "0.0.1",
  "repository": "https://github.com/ChainMovers/suibase",
  "engines": {
@@ -54,7 +55,7 @@
  {
  "id": "suibaseSidebar",
  "title": "Suibase",
- "icon": "media/dep.svg"
+ "icon": "media/logo_128.png"
  }
  ]
  },
@@ -63,7 +64,7 @@
  {
  "id": "explorerView",
  "name": "Suibase",
- "icon": "media/dep.svg",
+ "icon": "media/logo_128.svg",
  "contextualTitle": "Suibase",
  "type": "webview"
  }

diff --git a/typescript/vscode-extension/src/bases/BaseWebview.ts b/typescript/vscode-extension/src/bases/BaseWebview.ts
@@ -65,7 +65,7 @@ export class BaseWebview implements vscode.WebviewViewProvider {
  this.extensionUri = BaseWebview.context.extensionUri;
  this.extensionUris = [
  Uri.joinPath(BaseWebview.context.extensionUri, "out"),
- Uri.joinPath(BaseWebview.context.extensionUri, "webview-ui/public/build"),
+ Uri.joinPath(BaseWebview.context.extensionUri, "webview-ui/build"),
  Uri.joinPath(BaseWebview.context.extensionUri, "webview-ui/node_modules/@vscode/codicons/dist"),
  ];
  }
@@ -197,10 +197,10 @@ export class BaseWebview implements vscode.WebviewViewProvider {
  }
 
  // The CSS file from the Svelte build output
- const stylesUri = getUri(webview, this.extensionUri, ["webview-ui", "public", "build", "bundle.css"]);
+ const stylesUri = getUri(webview, this.extensionUri, ["webview-ui", "build", "assets", "index.css"]);
 
  // The JS file from the Svelte build output
- const scriptUri = getUri(webview, this.extensionUri, ["webview-ui", "public", "build", "bundle.js"]);
+ const scriptUri = getUri(webview, this.extensionUri, ["webview-ui", "build", "assets", "index.js"]);
 
  // The icon library being used.
  const iconsUri = getUri(webview, this.extensionUri, [
@@ -222,20 +222,20 @@ export class BaseWebview implements vscode.WebviewViewProvider {
  <!DOCTYPE html>
  <html lang="en">
  <head>
- <title>Hello World</title>
+ <title>Webview-UI</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Security-Policy" content="default-src ${cspSource}; connect-src http://localhost:*; font-src ${cspSource}; style-src ${cspSource} 'unsafe-inline'; img-src ${cspSource}; script-src ${cspSource} 'strict-dynamic' 'nonce-${nonce}'"> 
  
  <link rel="stylesheet" type="text/css" href="${stylesUri}">
- <link rel="stylesheet" type="text/css" href="${iconsUri}" /> 
-
+ <link rel="stylesheet" type="text/css" href="${iconsUri}" />
+ </head>
+ <body>
  <script nonce="${nonce}">
  var suibase_view_key = '${this.key}';
  </script>
- <script defer nonce="${nonce}" src="${scriptUri}"></script>
- </head>
- <body>
+ <div id="root"></div>
+ <script type="module" nonce="${nonce}" src="${scriptUri}"></script>
  </body>
  </html>
  `;

diff --git a/typescript/vscode-extension/src/common/SuibaseData.ts b/typescript/vscode-extension/src/common/SuibaseData.ts
@@ -13,7 +13,8 @@ export class SuibaseGlobalStates {
 
  public uiSelectedContext: string = "DSUI";
  public uiSelectedContextCallback: (newUiSelectedContext: string) => void = (
- newUiSelectedContext: string
+ // eslint-disable-next-line
+ _newUiSelectedContext: string
  ) => {};
 
  public serialize(): string {

diff --git a/typescript/vscode-extension/webview-ui/.eslintrc.cjs b/typescript/vscode-extension/webview-ui/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:react-hooks/recommended',
+ ],
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
+ parser: '@typescript-eslint/parser',
+ plugins: ['react-refresh'],
+ rules: {
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+}
diff --git a/typescript/vscode-extension/webview-ui/.gitignore b/typescript/vscode-extension/webview-ui/.gitignore
@@ -1,8 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-/public/build/
 dist
 dist-ssr
-build
-build-ssr
+*.local
 
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/typescript/vscode-extension/webview-ui/README.md b/typescript/vscode-extension/webview-ui/README.md
@@ -1,10 +1,30 @@
-# `webview-ui` Directory
+# React + TypeScript + Vite
 
-This directory contains all of the code that will be executed within the webview context. It can be thought of as the place where all the "frontend" code of a webview is contained.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-Types of content that can be contained here:
+Currently, two official plugins are available:
 
-- Frontend framework code (i.e. Svelte, Vue, SolidJS, React, etc.)
-- JavaScript files
-- CSS files
-- Assets / resources (i.e. images, illustrations, etc.)
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+ // other rules...
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ project: ['./tsconfig.json', './tsconfig.node.json'],
+ tsconfigRootDir: __dirname,
+ },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/typescript/vscode-extension/webview-ui/build/assets/index.css b/typescript/vscode-extension/webview-ui/build/assets/index.css
diff --git a/typescript/vscode-extension/webview-ui/build/assets/index.js b/typescript/vscode-extension/webview-ui/build/assets/index.js
diff --git a/typescript/vscode-extension/webview-ui/build/index.html b/typescript/vscode-extension/webview-ui/build/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Dev Root</title>
+ <script nonce="${nonce}">
+ var suibase_view_key = '${this.key}';
+ </script>
+
+ <script type="module" crossorigin src="/assets/index.js"></script>
+ <link rel="stylesheet" crossorigin href="/assets/index.css">
+ </head>
+ <body>
+ <div id="root"></div>
+ </body>
+</html>
diff --git a/typescript/vscode-extension/webview-ui/build/vite.svg b/typescript/vscode-extension/webview-ui/build/vite.svg
diff --git a/typescript/vscode-extension/webview-ui/index.html b/typescript/vscode-extension/webview-ui/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Dev Root</title>
+ <script nonce="${nonce}">
+ var suibase_view_key = '${this.key}';
+ </script>
+
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>
diff --git a/typescript/vscode-extension/webview-ui/package.json b/typescript/vscode-extension/webview-ui/package.json
@@ -1,37 +1,32 @@
 {
- "name": "suibase",
- "version": "0.0.1",
+ "name": "webview-ui",
  "private": true,
+ "version": "0.0.0",
+ "type": "module",
  "scripts": {
- "build": "rollup -c",
- "dev": "rollup -c -w",
- "start": "sirv public --no-clear",
- "check": "svelte-check --tsconfig ./tsconfig.json"
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview"
  },
  "dependencies": {
  "@vscode/codicons": "^0.0.33",
- "@vscode/webview-ui-toolkit": "^1.4.0",
- "async-mutex": "^0.4.1",
- "await-to-js": "^3.0.0",
- "dayjs": "^1.11.10",
- "sirv-cli": "^2.0.2",
- "svelte-preprocess-react": "^0.17.0"
+ "@estruyf/vscode": "^1.1.0",
+ "@vscode/webview-ui-toolkit": "^1.2.2",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
  },
  "devDependencies": {
- "@rollup/plugin-commonjs": "^17.1.0",
- "@rollup/plugin-node-resolve": "^11.2.1",
- "@rollup/plugin-typescript": "^8.5.0",
- "@tsconfig/svelte": "^2.0.1",
- "@types/vscode-webview": "^1.57.5",
- "rollup": "^2.79.1",
- "rollup-plugin-css-only": "^3.1.0",
- "rollup-plugin-livereload": "^2.0.5",
- "rollup-plugin-svelte": "^7.2.0",
- "rollup-plugin-terser": "^7.0.2",
- "svelte": "^4.2.14",
- "svelte-check": "^3.6.9",
- "svelte-preprocess": "^5.1.3",
- "tslib": "^2.6.2",
- "typescript": "^5.4.5"
+ "@types/react": "^18.2.66",
+ "@types/react-dom": "^18.2.22",
+ "@types/vscode-webview": "^1.57.0",
+ "@typescript-eslint/eslint-plugin": "^7.2.0",
+ "@typescript-eslint/parser": "^7.2.0",
+ "@vitejs/plugin-react": "^4.2.1",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.6",
+ "typescript": "^5.2.2",
+ "vite": "^5.2.0"
  }
-}
+}