Switch from @vscode/webview-ui-toolkit to @vscode-elements/react-elements

.esbuild.config.js

@@ -10,7 +10,7 @@ esbuild
         tsconfig: "./tsconfig.json",
         bundle: true,
         external: ["vscode"],
-        sourcemap: false,
+        sourcemap: minify ? false : "both",
         minify,
         watch,
         platform: "node",
@@ -25,7 +25,7 @@ esbuild
         tsconfig: "./tsconfig.json",
         bundle: true,
         external: ["vscode"],
-        sourcemap: false,
+        sourcemap: minify ? false : "both",
         minify,
         watch,
         platform: "browser",

.vscode/launch.json

@@ -5,13 +5,20 @@
 {
     "version": "0.2.0",
     "configurations": [
+        {
+            "command": "npm run test",
+            "name": "Debug Tests",
+            "request": "launch",
+            "type": "node-terminal"
+        },
         {
             "name": "Run Extension",
             "type": "extensionHost",
+            "debugWebviews": true,
             "request": "launch",
             "runtimeExecutable": "${execPath}",
             "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
-            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+            "outFiles": ["${workspaceFolder}/dist/**/*.js","${workspaceFolder}/dist/**/*.js.map"],
             "preLaunchTask": "npm: compile"
         }
     ]

media/editor/components.tsx

@@ -1,4 +1,4 @@
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
+import { VscodeTextfield } from "@vscode-elements/react-elements";
 import React, { useEffect, useRef, useState } from "react";
 import { useGlobalHandler } from "./useHelpers";
 
@@ -21,8 +21,8 @@ export const EditableField: React.FC<EditableFieldsProps> = props => {
             onEditingStateChanged(editing);
         }
     }, [editing, onEditingStateChanged]);
-    const pushChange = () => {
-        props.onChange((inputRef?.current as unknown as HTMLInputElement).value);
+    const pushChange = (e: Event) => {
+        props.onChange((e.target as unknown as HTMLInputElement).value);
         setEditing(false);
     };
 
@@ -58,7 +58,7 @@ export const EditableField: React.FC<EditableFieldsProps> = props => {
         <div {...rest} onDoubleClick={editing ? undefined : toggleEdit}>
             {!editing && rawDisplayValue}
             {editing && (
-                <VSCodeTextField
+                <VscodeTextfield
                     ref={inputRef}
                     value={props.value}
                     onChange={pushChange}

media/editor/detailView.tsx

@@ -1,11 +1,5 @@
 import React, { useState } from "react";
-import {
-    VSCodeTextField,
-    VSCodeCheckbox,
-    VSCodeDivider,
-    VSCodeDropdown,
-    VSCodeOption
-} from "@vscode/webview-ui-toolkit/react";
+import { VscodeCheckbox, VscodeSingleSelect, VscodeOption, VscodeDivider, VscodeTextfield } from "@vscode-elements/react-elements";
 import { DmiState, Dirs, DirNames, Dmi } from "../../shared/dmi";
 import { EditableField } from "./components";
 import { Image } from "image-js";
@@ -281,62 +275,62 @@ export const StateDetailView: React.FC<StateDetailViewProps> = props => {
     return (
         <div onClick={() => selectedFrame !== null && setSelectedFrame(null)}>
             <div className="stateProperties">
-                <VSCodeTextField
+                <VscodeTextfield
                     value={state.name}
                     onChange={e => updateName((e.target as HTMLInputElement).value)}
                 >
                     State name
-                </VSCodeTextField>
+                </VscodeTextfield>
                 <div>
                     <label>Directions</label>
-                    <VSCodeDropdown
+                    <VscodeSingleSelect
                         style={{ marginLeft: "1em" }}
                         value={state.dirs.toString()}
                         onChange={change_dir_count}
                     >
-                        <VSCodeOption value="1">1</VSCodeOption>
-                        <VSCodeOption value="4">4</VSCodeOption>
-                        <VSCodeOption value="8">8</VSCodeOption>
-                    </VSCodeDropdown>
+                        <VscodeOption value="1">1</VscodeOption>
+                        <VscodeOption value="4">4</VscodeOption>
+                        <VscodeOption value="8">8</VscodeOption>
+                    </VscodeSingleSelect>
                 </div>
                 <div>
-                    <VSCodeCheckbox checked={state.movement} onChange={toggleMovement}>
+                    <VscodeCheckbox checked={state.movement} onChange={toggleMovement}>
                         Movement state
-                    </VSCodeCheckbox>
+                    </VscodeCheckbox>
                 </div>
                 <div>
-                    <VSCodeCheckbox checked={state.rewind} onChange={toggleRewind}>
+                    <VscodeCheckbox checked={state.rewind} onChange={toggleRewind}>
                         Rewind animation
-                    </VSCodeCheckbox>
+                    </VscodeCheckbox>
                 </div>
                 <div>
-                    <VSCodeTextField
+                    <VscodeTextfield
                         disabled={state.loop === 0}
                         value={state.loop !== 0 ? state.loop.toString() : "∞"}
                         onChange={e => updateLoopCount((e.target as HTMLInputElement).value)}
                     >
                         Loop count
-                    </VSCodeTextField>
-                    <VSCodeCheckbox
+                    </VscodeTextfield>
+                    <VscodeCheckbox
                         style={{ marginLeft: "1em" }}
                         checked={state.loop === 0}
                         onChange={toggleInfiniteLoop}
                     >
                         Loop infinitely
-                    </VSCodeCheckbox>
+                    </VscodeCheckbox>
                 </div>
                 <div>
-                    <VSCodeTextField
+                    <VscodeTextfield
                         value={state.framecount.toString()}
                         onChange={e => updateFrameCount((e.target as HTMLInputElement).value)}
                     >
                         Frames
-                    </VSCodeTextField>
+                    </VscodeTextfield>
                 </div>
             </div>
-            <VSCodeDivider />
+            <VscodeDivider />
             <div className="directionalDetailPreview">{previewGrid()}</div>
-            <VSCodeDivider />
+            <VscodeDivider />
             <div style={dynamicStyle}>
                 <div className="frameGrid">
                     <div className="gridHeader">Delay</div>

media/editor/dmiEditor.tsx

@@ -8,7 +8,7 @@ import {
     MessageType,
     ReadyResponseMessage
 } from "../../shared/messaging";
-import { VSCodeButton, VSCodeDivider, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton, VscodeDivider, VscodeTextfield, VscodeIcon } from "@vscode-elements/react-elements";
 import { StateDetailView } from "./detailView";
 import { StateList } from "./listView";
 
@@ -147,47 +147,38 @@ const Editor: React.FC = () => {
     const sizeDisplay = (
         <>
             <div>Width</div>
-            <VSCodeTextField
+            <VscodeTextfield
                 value={dmi.width.toString()}
-                size={3}
+                style={{width:'3em'}}
                 name="width"
                 onChange={e => changeWidth((e.target as HTMLInputElement).value)}
             />
             <div>Height</div>
-            <VSCodeTextField
+            <VscodeTextfield
                 value={dmi.height.toString()}
-                size={3}
+                style={{width:'3em'}}
                 name="height"
                 onChange={e => changeHeight((e.target as HTMLInputElement).value)}
             />
         </>
     );
+
     const zoomDisplay = (
         <div>
-            <VSCodeButton appearance="icon" onClick={() => saveZoom(zoom + 1)}>
-                <span className="codicon codicon-zoom-in" />
-            </VSCodeButton>
-            <VSCodeButton appearance="icon" onClick={() => saveZoom(Math.max(1, zoom - 1))}>
-                <span className="codicon codicon-zoom-out" />
-            </VSCodeButton>
+            <VscodeButton icon="zoom-in" onClick={() => saveZoom(zoom + 1)}/>
+            <VscodeButton icon="zoom-out" onClick={() => saveZoom(Math.max(1, zoom - 1))}/>
         </div>
     );
+
+    const backgroundDisplayButton = (<VscodeButton icon="color-mode" onClick={toggleBackground} />);
+
     const dirDisplay = (
         <div>
-            <VSCodeButton appearance="icon" onClick={() => cycleDirection(true)}>
-                <span className="codicon codicon-debug-step-back" />
-            </VSCodeButton>
-            <VSCodeButton appearance="icon" onClick={() => cycleDirection(false)}>
-                <span className="codicon codicon-debug-step-over" />
-            </VSCodeButton>
+            <VscodeButton icon="debug-step-back" onClick={() => cycleDirection(true)}/>
+            <VscodeButton icon="debug-step-over" onClick={() => cycleDirection(false)}/>
         </div>
     );
-    const backgroundDisplay = (
-        <VSCodeButton appearance="icon" onClick={toggleBackground}>
-            <span className="codicon codicon-color-mode" />
-        </VSCodeButton>
-    );
-    const infoBarElements = [sizeDisplay, zoomDisplay, backgroundDisplay];
+    const infoBarElements = [sizeDisplay, zoomDisplay, backgroundDisplayButton];
 
     let mainContent = null;
     if (openStateIndex != null) {
@@ -199,7 +190,7 @@ const Editor: React.FC = () => {
         );
         //Close state view button
         infoBarElements.push(
-            <VSCodeButton onClick={() => setOpenStateIndex(null)}>Close</VSCodeButton>
+            <VscodeButton onClick={() => setOpenStateIndex(null)}>Close</VscodeButton>
         );
     } else {
         mainContent = (
@@ -215,23 +206,23 @@ const Editor: React.FC = () => {
         infoBarElements.push(dirDisplay);
         //Search bar
         infoBarElements.push(
-            <VSCodeTextField
+            <VscodeTextfield
                 value={searchText}
                 onInput={e => setSearchText((e.target as HTMLInputElement).value)}
             >
-                <span slot="start" className="codicon codicon-search"></span>
-            </VSCodeTextField>
+                <VscodeIcon slot="content-before" name="search" title="search"></VscodeIcon>
+            </VscodeTextfield>
         );
     }
 
     return (
         <div className="editor" style={dynamicStyle} onContextMenu={e => e.preventDefault()}>
             <div className="infoBar">
-                {infoBarElements.map(e => (
-                    <div className="infoBarSection">{e}</div>
+                {infoBarElements.map((e,i) => (
+                    <div key={`info${i}`} className="infoBarSection">{e}</div>
                 ))}
             </div>
-            <VSCodeDivider />
+            <VscodeDivider />
             {mainContent}
         </div>
     );

media/editor/listView.tsx

@@ -1,4 +1,4 @@
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
+import { VscodeButton } from '@vscode-elements/react-elements';
 import React, { useEffect, useState } from "react";
 import { DmiState, Dirs, Dmi } from "../../shared/dmi";
 import { EditableField } from "./components";
@@ -311,7 +311,7 @@ export const StateList: React.FC<StateListProps> = props => {
                     />
                 ))}
             </div>
-            <VSCodeButton onClick={() => addFreshState()}>Add new state</VSCodeButton>
+            <VscodeButton onClick={() => addFreshState()}>Add new state</VscodeButton>
         </>
     );
 };