fix: build process bundling of UI toolkit

cmoog · cmoog · commit 63c1bec295b4 · 2022-04-08T17:25:01.000-05:00
diff --git a/src/form.ts b/src/form.ts
@@ -93,13 +93,6 @@ async function getWebviewContent(
   webview: vscode.Webview,
   extensionUri: vscode.Uri
 ) {
-  const toolkitUri = getUri(webview, extensionUri, [
-    'node_modules',
-    '@vscode',
-    'webview-ui-toolkit',
-    'dist',
-    'toolkit.js',
-  ]);
   const bundlePath = getUri(webview, extensionUri, [
     'dist',
     'webview',
@@ -112,7 +105,6 @@ async function getWebviewContent(
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1.0">
-      <script type="module" src="${toolkitUri}"></script>
       <title>SQL Notebook New Connection</title>
     </head>
     <body>
diff --git a/webview/Form.tsx b/webview/Form.tsx
@@ -1,4 +1,11 @@
 import * as React from 'react';
+import {
+  VSCodeButton,
+  VSCodeTextField,
+  VSCodeDropdown,
+  VSCodeOption,
+  VSCodeCheckbox,
+} from '@vscode/webview-ui-toolkit/react';
 
 const Form: React.FC<{ handleSubmit: (form: HTMLFormElement) => void }> = ({
   handleSubmit,
@@ -28,11 +35,11 @@ const Form: React.FC<{ handleSubmit: (form: HTMLFormElement) => void }> = ({
         <label style={{ display: 'block', marginBottom: '3px' }}>
           Database Driver
         </label>
-        <vscode-dropdown name="driver" ref={dropdownRef}>
-          <vscode-option>mysql</vscode-option>
-          <vscode-option>postgres</vscode-option>
-          <vscode-option>mssql</vscode-option>
-        </vscode-dropdown>
+        <VSCodeDropdown name="driver" ref={dropdownRef}>
+          <VSCodeOption>mysql</VSCodeOption>
+          <VSCodeOption>postgres</VSCodeOption>
+          <VSCodeOption>mssql</VSCodeOption>
+        </VSCodeDropdown>
       </div>
       <TextOption label="Database Host" objectKey="host" />
       <TextOption label="Database Port" objectKey="port" />
@@ -47,21 +54,18 @@ const Form: React.FC<{ handleSubmit: (form: HTMLFormElement) => void }> = ({
       {showDriverConfig(driver)}
 
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        <vscode-button
+        <VSCodeButton
           appearance="secondary"
           onClick={() => {
             formRef.current?.reset();
             setDriver('mysql');
           }}
         >
           Clear
-        </vscode-button>
-        <vscode-button
-          type="submit"
-          onClick={() => handleSubmit(formRef.current!)}
-        >
+        </VSCodeButton>
+        <VSCodeButton onClick={() => handleSubmit(formRef.current!)}>
           Create
-        </vscode-button>
+        </VSCodeButton>
       </div>
     </form>
   );
@@ -93,22 +97,22 @@ function showDriverConfig(driver: string) {
     case 'mysql':
       return (
         <>
-          <vscode-checkbox name="multipleStatements" checked>
+          <VSCodeCheckbox name="multipleStatements" checked>
             Multiple statements
-          </vscode-checkbox>
+          </VSCodeCheckbox>
         </>
       );
     case 'postgres':
       return <></>;
     case 'mssql':
       return (
         <>
-          <vscode-checkbox name="encrypt" checked>
+          <VSCodeCheckbox name="encrypt" checked>
             Encrypt
-          </vscode-checkbox>
-          <vscode-checkbox name="trustServerCertificate" checked>
+          </VSCodeCheckbox>
+          <VSCodeCheckbox name="trustServerCertificate" checked>
             Trust Server Certificate
-          </vscode-checkbox>
+          </VSCodeCheckbox>
         </>
       );
   }
@@ -121,8 +125,8 @@ const TextOption: React.FC<{
   type?: string;
 }> = ({ objectKey, label, type }) => {
   return (
-    <vscode-text-field name={objectKey} type={type}>
+    <VSCodeTextField name={objectKey} type={type}>
       <span style={{ color: 'var(--vscode-editor-foreground)' }}>{label}</span>
-    </vscode-text-field>
+    </VSCodeTextField>
   );
 };
diff --git a/webview/main.tsx b/webview/main.tsx
@@ -2,23 +2,10 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import Form from './Form';
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'vscode-button': any;
-      'vscode-text-field': any;
-      'vscode-dropdown': any;
-      'vscode-option': any;
-      'vscode-checkbox': any;
-    }
-  }
-}
-
 // @ts-ignore
 const vscode = acquireVsCodeApi();
 
 function createConnection(config: any) {
-  // @ts-ignore
   vscode.postMessage({ type: 'create_connection', data: config });
 }
 
