Fix webviews type errors and enforce svelte-check in CI

.github/workflows/build.yml

@@ -19,6 +19,7 @@ jobs:
       - run: npm ci
       - run: npm run build
       - run: npm run lint
+      - run: npm run check-webviews
       - run: npm run test
       - run: npm run create-package
       - name: Upload coverage to Coveralls

.vscode/settings.json

@@ -21,30 +21,5 @@
     "editor.tabSize": 4,
     "js/ts.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
     "html.format.unformatted": "wbr,%",
-    "js/ts.tsdk.path": "node_modules\\typescript\\lib",
-    "svelte.plugin.svelte.compilerWarnings": {
-        "a11y-aria-attributes": "ignore",
-        "a11y-incorrect-aria-attribute-type": "ignore",
-        "a11y-unknown-aria-attribute": "ignore",
-        "a11y-hidden": "ignore",
-        "a11y-misplaced-role": "ignore",
-        "a11y-unknown-role": "ignore",
-        "a11y-no-abstract-role": "ignore",
-        "a11y-no-redundant-roles": "ignore",
-        "a11y-role-has-required-aria-props": "ignore",
-        "a11y-accesskey": "ignore",
-        "a11y-autofocus": "ignore",
-        "a11y-misplaced-scope": "ignore",
-        "a11y-positive-tabindex": "ignore",
-        "a11y-invalid-attribute": "ignore",
-        "a11y-missing-attribute": "ignore",
-        "a11y-img-redundant-alt": "ignore",
-        "a11y-label-has-associated-control": "ignore",
-        "a11y-media-has-caption": "ignore",
-        "a11y-distracting-elements": "ignore",
-        "a11y-structure": "ignore",
-        "a11y-mouse-events-have-key-events": "ignore",
-        "a11y-missing-content": "ignore",
-        "a11y-click-events-have-key-events": "ignore"
-    },
+    "js/ts.tsdk.path": "node_modules\\typescript\\lib"
 }

package.json

@@ -26,12 +26,13 @@
     },
     "scripts": {
         "postinstall": "cd webviews && npm install",
-        "preversion": "npm run build && npm run lint && npm run test && npm run check-extraneous && npm run audit",
+        "preversion": "npm run build && npm run lint && npm run check-webviews && npm run test && npm run check-extraneous && npm run audit",
         "vscode:prepublish": "npm run build",
         "copy-schema": "cpx ./node_modules/brighterscript/bsconfig.schema.json ./dist -L",
         "build": "npm run copy-schema && tsc -p ./ && npm run build-webviews",
         "build-webviews": "cd ./webviews && npm run build && cd ..",
         "lint": "eslint \"./src/**/*.ts\"",
+        "check-webviews": "cd webviews && npm run check",
         "audit": "npm audit --audit-level=high || audit-ci --config ./audit-ci.jsonc && cd webviews && npm run audit",
         "watch": "npm run copy-schema && tsc -w -p ./",
         "watch-webviews": "cd ./webviews && npm run watch",

src/viewProviders/RceManagementViewContract.ts

@@ -0,0 +1,30 @@
+import type { DeviceStatus, DeviceType } from 'roku-deploy';
+
+/**
+ * Lives in its own file (rather than inside RceManagementViewProvider.ts) so the webview can import
+ * RceStateDevice without pulling the provider's extension-side import graph into its typecheck program.
+ */
+
+/* eslint-disable camelcase -- the RCE management api uses snake_case fields */
+/**
+ * The device fields the management webview renders - a projection of roku-deploy's RceDevice that
+ * leaves the instance's stream credentials behind (see projectDeviceForWebview).
+ */
+export interface RceStateDevice {
+    id: number;
+    name: string;
+    note?: string | null;
+    device_type: DeviceType;
+    status?: DeviceStatus;
+    serial_number?: string | null;
+    created_at: string;
+    last_snapshot_id?: number | null;
+    last_snapshot_name?: string | null;
+    snapshots?: number[];
+    firmware_version_id?: string | null;
+    running_device?: {
+        started_at?: string | null;
+        max_runtime: number;
+    } | null;
+}
+/* eslint-enable camelcase */

src/viewProviders/RceManagementViewProvider.ts

@@ -1,5 +1,5 @@
 import * as vscode from 'vscode';
-import type { RceDevice, DeviceRun, DeviceStatus, DeviceType, FirmwareVersion, RceDeviceConfig, RceManagementClient, Snapshot } from 'roku-deploy';
+import type { RceDevice, DeviceRun, FirmwareVersion, RceDeviceConfig, RceManagementClient, Snapshot } from 'roku-deploy';
 import { rokuDeploy } from 'roku-deploy';
 import { BaseWebviewViewProvider } from './BaseWebviewViewProvider';
 import { ViewProviderId } from './ViewProviderId';
@@ -9,6 +9,9 @@ import { WorkspaceStateKey } from './WorkspaceStateKey';
 import { VscodeCommand } from '../commands/VscodeCommand';
 import type { RceManager } from '../managers/RceManager';
 import type { RceFinder } from '../deviceDiscovery/RceFinder';
+import type { RceStateDevice } from './RceManagementViewContract';
+
+export type { RceStateDevice } from './RceManagementViewContract';
 
 export class RceManagementViewProvider extends BaseWebviewViewProvider {
     public readonly id = ViewProviderId.rceManagementView;
@@ -561,30 +564,6 @@ interface RceManagementViewState {
     error?: string;
 }
 
-/* eslint-disable camelcase -- the RCE management api uses snake_case fields */
-/**
- * The device fields the management webview renders - a projection of roku-deploy's RceDevice that
- * leaves the instance's stream credentials behind (see projectDeviceForWebview).
- */
-export interface RceStateDevice {
-    id: number;
-    name: string;
-    note?: string | null;
-    device_type: DeviceType;
-    status?: DeviceStatus;
-    serial_number?: string | null;
-    created_at: string;
-    last_snapshot_id?: number | null;
-    last_snapshot_name?: string | null;
-    snapshots?: number[];
-    firmware_version_id?: string | null;
-    running_device?: {
-        started_at?: string | null;
-        max_runtime: number;
-    } | null;
-}
-/* eslint-enable camelcase */
-
 interface RceDeviceDetailsPayload {
     snapshots: Snapshot[] | undefined;
     runs: DeviceRun[] | undefined;

webviews/src/shared/Loader.svelte

@@ -14,5 +14,5 @@
 </style>
 
 <div id="loaderContainer">
-    <vscode-progress-ring />
+    <vscode-progress-ring></vscode-progress-ring>
 </div>

webviews/src/shared/NumberField.svelte

@@ -43,4 +43,4 @@
     }
 </style>
 
-<vscode-text-field bind:this={self} {id} class={classProp} {title} {step} {value} on:input={onInputChange} type="number" />
+<vscode-text-field bind:this={self} {id} class={classProp} {title} {step} {value} on:input={onInputChange} type="number"></vscode-text-field>

webviews/src/shared/RceStreamView.svelte

@@ -311,7 +311,7 @@
             </div>
         {:else}
             <!-- svelte-ignore a11y-media-has-caption -->
-            <video id="rceStreamVideo" bind:this={rceVideoElement} autoplay playsinline muted={rceStreamMuted} />
+            <video id="rceStreamVideo" bind:this={rceVideoElement} autoplay playsinline muted={rceStreamMuted}></video>
         {/if}
     </div>
 {/if}

webviews/src/shared/vscode-ui-toolkit/VscodeCheckbox.svelte

@@ -19,6 +19,6 @@
 <label>
     <vscode-checkbox
         checked={value}
-        onChange={(e) => (value = e.srcElement.checked)} />
+        onChange={(e) => (value = e.srcElement.checked)}></vscode-checkbox>
     <div><slot /></div>
 </label>

webviews/src/views/RceManagementView/RceManagementView.svelte

@@ -2,8 +2,8 @@
     window.vscode = acquireVsCodeApi();
 
     import { onDestroy } from 'svelte';
-    import type { DeviceRun, FirmwareVersionOut, SnapshotOut } from 'roku-deploy';
-    import type { RceStateDevice } from '../../../../src/viewProviders/RceManagementViewProvider';
+    import type { DeviceRun, FirmwareVersion, Snapshot } from 'roku-deploy';
+    import type { RceStateDevice } from '../../../../src/viewProviders/RceManagementViewContract';
     import { ChevronRight, ChevronDown } from 'svelte-codicons';
     import { intermediary } from '../../ExtensionIntermediary';
     import Loader from '../../shared/Loader.svelte';
@@ -64,7 +64,7 @@
     //firmware choices offered when starting a device, filtered per device type at render time.
     //Like the runtime picks, firmware picks live outside DeviceDetailsState so a details refetch
     //does not reset them
-    let firmwareVersions: FirmwareVersionOut[] | undefined = undefined;
+    let firmwareVersions: FirmwareVersion[] | undefined = undefined;
     let selectedFirmwareIdByDeviceId: Record<number, string> = {};
 
     let expandedDeviceId: number | undefined = undefined;
@@ -346,7 +346,7 @@
      * snapshot once the list settles.
      */
     function resolveSelectedSnapshotId(
-        snapshots: SnapshotOut[] | undefined,
+        snapshots: Snapshot[] | undefined,
         preferredSnapshotId: number | undefined,
         latestRunSnapshotId: number | undefined,
         rememberedSnapshotId: number | undefined
@@ -447,7 +447,7 @@
         pickedFirmwareVersionId: string | undefined,
         detailsState: DeviceDetailsState | undefined,
         device: RceStateDevice,
-        firmwareOptions: FirmwareVersionOut[]
+        firmwareOptions: FirmwareVersion[]
     ): string | undefined {
         const availableFirmwareIds = firmwareOptions.map((firmwareVersion) => firmwareVersion.firmware_version_id);
         const selectedSnapshot = (detailsState?.snapshots ?? []).find((snapshot) => snapshot.id === detailsState?.selectedSnapshotId);
@@ -501,7 +501,7 @@
         }
     }
 
-    async function deleteSnapshot(device: RceStateDevice, snapshot: SnapshotOut) {
+    async function deleteSnapshot(device: RceStateDevice, snapshot: Snapshot) {
         deletingSnapshotId = snapshot.id;
         try {
             await intermediary.sendCommand(ViewProviderCommand.deleteRceSnapshot, {
@@ -591,7 +591,7 @@
 
     interface DeviceDetailsState {
         loading: boolean;
-        snapshots: SnapshotOut[] | undefined;
+        snapshots: Snapshot[] | undefined;
         runs: DeviceRun[] | undefined;
         lastUsedSnapshotId: number | undefined;
         error: string | undefined;
@@ -921,7 +921,7 @@
                 <vscode-toolbar-button icon="trash" title="Remove Account" on:click={() => runAccountCommand('removeAccount')}></vscode-toolbar-button>
             </div>
 
-            <vscode-divider />
+            <vscode-divider></vscode-divider>
 
             {#if stateError}
                 <div class="errorBanner">{stateError}</div>
@@ -941,12 +941,12 @@
 
             {#if showCreateDeviceForm}
                 <div id="createDeviceForm">
-                    <vscode-textfield placeholder="Name" value={newDeviceName} on:input={(event) => (newDeviceName = event.target.value)} />
+                    <vscode-textfield placeholder="Name" value={newDeviceName} on:input={(event) => (newDeviceName = event.target.value)}></vscode-textfield>
                     <vscode-single-select value={newDeviceType} on:change={(event) => (newDeviceType = event.target.value)}>
                         <vscode-option value="tv">tv</vscode-option>
                         <vscode-option value="stb">stb</vscode-option>
                     </vscode-single-select>
-                    <vscode-textfield placeholder="Note (optional)" value={newDeviceNote} on:input={(event) => (newDeviceNote = event.target.value)} />
+                    <vscode-textfield placeholder="Note (optional)" value={newDeviceNote} on:input={(event) => (newDeviceNote = event.target.value)}></vscode-textfield>
                     {#if createDeviceError}
                         <div class="errorBanner">{createDeviceError}</div>
                     {/if}
@@ -973,7 +973,7 @@
                             {#if runtime}
                                 <span class="deviceRuntime">{runtime.label}</span>
                                 <div class="runtimeBarTrack">
-                                    <div class="runtimeBarFill" style="width: {runtime.percent}%" />
+                                    <div class="runtimeBarFill" style="width: {runtime.percent}%"></div>
                                 </div>
                             {/if}
                         </div>
@@ -1048,8 +1048,8 @@
 
                     {#if snapshotFormDeviceId === device.id && device.status === 'running'}
                         <div class="snapshotForm">
-                            <vscode-textfield placeholder="Name" value={newSnapshotName} on:input={(event) => (newSnapshotName = event.target.value)} />
-                            <vscode-textfield placeholder="Note (optional)" value={newSnapshotNote} on:input={(event) => (newSnapshotNote = event.target.value)} />
+                            <vscode-textfield placeholder="Name" value={newSnapshotName} on:input={(event) => (newSnapshotName = event.target.value)}></vscode-textfield>
+                            <vscode-textfield placeholder="Note (optional)" value={newSnapshotNote} on:input={(event) => (newSnapshotNote = event.target.value)}></vscode-textfield>
                             {#if createSnapshotError}
                                 <div class="errorBanner">{createSnapshotError}</div>
                             {/if}
@@ -1095,8 +1095,8 @@
 
                                 {#if editingDeviceId === device.id}
                                     <div class="editFields">
-                                        <vscode-textfield placeholder="Name" value={editName} on:input={(event) => (editName = event.target.value)} />
-                                        <vscode-textfield placeholder="Note" value={editNote} on:input={(event) => (editNote = event.target.value)} />
+                                        <vscode-textfield placeholder="Name" value={editName} on:input={(event) => (editName = event.target.value)}></vscode-textfield>
+                                        <vscode-textfield placeholder="Note" value={editNote} on:input={(event) => (editNote = event.target.value)}></vscode-textfield>
                                         {#if editDeviceError}
                                             <div class="errorBanner">{editDeviceError}</div>
                                         {/if}
@@ -1180,7 +1180,7 @@
                         </div>
                     {/if}
 
-                    <vscode-divider />
+                    <vscode-divider></vscode-divider>
                 {/each}
             {/if}
         {/if}

webviews/src/views/RokuAppOverlaysView/RokuAppOverlaysView.svelte

@@ -322,13 +322,13 @@
                     {overlay.sourcePath}
                 </div>
                 <div class="checkbox">
-                    <vscode-checkbox id="{index}" on:change={onOverlayVisibleChange} checked={overlay.visible} />
+                    <vscode-checkbox id="{index}" on:change={onOverlayVisibleChange} checked={overlay.visible}></vscode-checkbox>
                 </div>
                 <div class="image">
-                    <img src="{overlay.imageData}" data-file="{overlay.sourcePath}"/>
+                    <img src="{overlay.imageData}" data-file="{overlay.sourcePath}" alt="{overlay.name}" />
                 </div>
                 <div class="label">
-                    <vscode-text-field id="{index}" on:input={onOverlayNameChange} value="{overlay.name}" />
+                    <vscode-text-field id="{index}" on:input={onOverlayNameChange} value="{overlay.name}"></vscode-text-field>
                 </div>
                 <div class="slider">
                     <input id="{index.toString()}" class="slider-input" type="range" min="0" max="100" value="{overlay.opacity * 100}" on:input={onOverlayOpacityChange}>
@@ -339,7 +339,7 @@
                     </vscode-button>
                 </div>
             </div>
-                <vscode-divider />
+                <vscode-divider></vscode-divider>
         {/each}
     {:else}
         <span style="padding:10px">

webviews/src/views/RokuAutomationView/AutoRunsEditor.svelte

@@ -354,7 +354,7 @@
                     {#each runs as run, index}
                         <tr>
                             <td colspan="5">
-                                <vscode-divider />
+                                <vscode-divider></vscode-divider>
                             </td>
                         </tr>
                         <tr class="run-row {dropTargetIndex === index ? 'run-row-dropzone' : ''}"

webviews/src/views/RokuAutomationView/RokuAutomationView.svelte

@@ -314,20 +314,20 @@
                     {/each}
                     </vscode-dropdown>
                 {:else if step.type === stepTypes.sendText.type}
-                    <vscode-text-field id="{index}" on:change={onStepValueChange} value="{step.value}" />
+                    <vscode-text-field id="{index}" on:change={onStepValueChange} value="{step.value}"></vscode-text-field>
                 {/if}
             </td>
             <td>
                 {#if currentRunningStep === -1}
                     <vscode-button id="{index}" appearance="icon" title="Delete step" aria-label="Delete step" on:click={deleteStep}><Trash /></vscode-button>
                 {:else if currentRunningStep === index}
-                    <vscode-progress-ring />
+                    <vscode-progress-ring></vscode-progress-ring>
                 {/if}
             </td>
         </tr>
         <tr>
             <td colspan="4">
-                <vscode-divider />
+                <vscode-divider></vscode-divider>
             </td>
         </tr>
     {/each}

webviews/src/views/RokuDeviceView/RokuDeviceView.svelte

@@ -414,8 +414,8 @@
         on:mousedown={onMouseDown}
         data-vscode-context={'{"preventDefaultContextMenuItems": true}'}>
 
-        <div class:hide={!mouseIsOverView} id="nodeSelectionCursor" style="left: {nodeSelectionCursorLeft}px; top: {nodeSelectionCursorTop}px;" />
-        <div class:hide={!focusedNode} id="nodeOutline" style="left: {nodeLeft}px; top: {nodeTop}px; width: {nodeWidth}px; height: {nodeHeight}px" />
+        <div class:hide={!mouseIsOverView} id="nodeSelectionCursor" style="left: {nodeSelectionCursorLeft}px; top: {nodeSelectionCursorTop}px;"></div>
+        <div class:hide={!focusedNode} id="nodeOutline" style="left: {nodeLeft}px; top: {nodeTop}px; width: {nodeWidth}px; height: {nodeHeight}px"></div>
 
         <!-- only show image if we have a url to avoid showing as broken image -->
         {#if screenshotUrl}

webviews/src/views/RokuFileSystemView/FileSystemEntry.svelte

@@ -61,7 +61,7 @@
         {:else if entry.type === 'fileSystem'}
             <Database />
         {:else}
-            <vscode-progress-ring />
+            <vscode-progress-ring></vscode-progress-ring>
         {/if}
     </vscode-data-grid-cell>
     {#if columnsToShow.name}

webviews/src/views/RokuReplView/RokuReplView.svelte

@@ -108,7 +108,7 @@
 <div id="container">
     {#if odcAvailable}
         <vscode-text-area id="replCode" placeholder="Enter your brightscript code here to run on your device. For example:
-return 1 + 1" rows="10" resize="both" on:input={onReplCodeChange} value={replCode} />
+return 1 + 1" rows="10" resize="both" on:input={onReplCodeChange} value={replCode}></vscode-text-area>
 
         <table>
             <tbody>
@@ -119,7 +119,7 @@ return 1 + 1" rows="10" resize="both" on:input={onReplCodeChange} value={replCod
                     <td>&nbsp;&nbsp;&nbsp;</td>
                     <td>
                         {#if loading}
-                            <vscode-progress-ring />
+                            <vscode-progress-ring></vscode-progress-ring>
                         {:else}
                             {replTimeTaken >= 0 ? `Last run took ${replTimeTaken}ms` : ''}
                         {/if}
@@ -129,7 +129,7 @@ return 1 + 1" rows="10" resize="both" on:input={onReplCodeChange} value={replCod
         </table>
 
         {#if !loading && (replResponse !== undefined || replError !== '')}
-            <vscode-divider />
+            <vscode-divider></vscode-divider>
             {#if replResponse !== undefined}
                 <strong id="replOutputHeader">Returned value:</strong>
                 <pre id="replOutput">{replResponse}</pre>

webviews/src/views/SceneGraphInspectorView/ColorField.svelte

@@ -50,4 +50,4 @@
 <div bind:this={self}
     style="background-color: {hexColor}; color: {textColor};"
     contenteditable="true"
-    bind:innerHTML={hexColor} />
+    bind:innerHTML={hexColor}></div>