chore: turn <script> files into Typescript

package.json

@@ -174,7 +174,7 @@
     }
   },
   "scripts": {
-    "esbuild": "esbuild ./src/babelBundle.ts ./src/extension.ts ./src/oopReporter.ts ./src/debugTransform.ts ./src/playwrightFinder.ts --bundle --outdir=out --external:vscode --external:./babelBundle --external:./debugTransform --external:./oopReporter --external:./playwrightFinder --format=cjs --platform=node --target=ES2019",
+    "esbuild": "esbuild ./src/babelBundle.ts ./src/extension.ts ./src/oopReporter.ts ./src/debugTransform.ts ./src/playwrightFinder.ts ./src/*.script.ts --bundle --outdir=out --external:vscode --external:./babelBundle --external:./debugTransform --external:./oopReporter --external:./playwrightFinder --external:./*.script.ts --format=cjs --platform=node --target=ES2019",
     "build": "npm run esbuild -- --minify",
     "watch": "npm run esbuild -- --sourcemap --watch",
     "l10n": "npx @vscode/l10n-dev export -o ./l10n ./src",

media/common.js → src/common.ts

@@ -14,38 +14,32 @@
  * limitations under the License.
  */
 
-// @ts-check
+declare global {
+  function acquireVsCodeApi(): { postMessage(msg: any): void };
+}
 
-// @ts-ignore
-const vscode = acquireVsCodeApi();
+export const vscode = acquireVsCodeApi();
 
-/**
-@typedef {{
-  configFile: string,
-}} Config
+export interface Config {
+  configFile: string;
+}
 
-@typedef {{
-  name: string,
-  enabled: boolean
-}} ProjectEntry
+export interface ProjectEntry {
+  name: string;
+  enabled: boolean;
+}
 
-@typedef {{
-  command: string,
-  text: string,
-  svg: string,
-  title?: string,
-  location?: string,
-  hidden?: boolean,
-  disabled?: boolean
-}} ActionDescriptor
-*/
+export interface ActionDescriptor {
+  command: string;
+  text: string;
+  svg: string;
+  title?: string;
+  location?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+}
 
-/**
- * @param {ActionDescriptor} action
- * @param {{ omitText?: boolean }=} options
- * @returns {HTMLElement|null}
- */
-function createAction(action, options) {
+export function createAction(action: ActionDescriptor, options?: { omitText?: boolean }): HTMLElement | null {
   const actionElement = document.createElement('div');
   actionElement.classList.add('action');
   if (action.hidden)
@@ -69,5 +63,3 @@ function createAction(action, options) {
   actionElement.appendChild(label);
   return actionElement;
 }
-
-globalThis.createAction = createAction;

media/locatorsView.js → src/locatorsView.script.ts

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
+import { createAction, vscode } from './common';
+
 // @ts-check
-const locatorInput = /** @type {HTMLInputElement} */(document.getElementById('locator'));
-const ariaTextArea = /** @type {HTMLTextAreaElement} */(document.getElementById('ariaSnapshot'));
+const locatorInput = document.getElementById('locator') as HTMLInputElement;
+const ariaTextArea = document.getElementById('ariaSnapshot') as HTMLTextAreaElement;
 
 locatorInput.addEventListener('input', () => {
   vscode.postMessage({ method: 'locatorChanged', params: { locator: locatorInput.value } });
@@ -27,10 +29,10 @@ ariaTextArea.addEventListener('input', () => {
 });
 
 window.addEventListener('message', event => {
-  const locatorError = /** @type {HTMLElement} */(document.getElementById('locatorError'));
-  const ariaSnapshotError = /** @type {HTMLElement} */(document.getElementById('ariaSnapshotError'));
-  const ariaSection = /** @type {HTMLElement} */(document.getElementById('ariaSection'));
-  const actionsElement = /** @type {HTMLElement} */(document.getElementById('actions'));
+  const locatorError = document.getElementById('locatorError')!;
+  const ariaSnapshotError = document.getElementById('ariaSnapshotError')!;
+  const ariaSection = document.getElementById('ariaSection')!;
+  const actionsElement = document.getElementById('actions')!;
 
   const { method, params } = event.data;
   if (method === 'update') {

src/locatorsView.ts

@@ -112,8 +112,7 @@ export class LocatorsView extends DisposableBase implements vscodeTypes.WebviewV
 
 function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Uri, webview: vscodeTypes.Webview) {
   const style = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'media', 'common.css'));
-  const script = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'media', 'locatorsView.js'));
-  const commonScript = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'media', 'common.js'));
+  const script = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'out', 'locatorsView.script.js'));
   const nonce = getNonce();
 
   return `
@@ -124,7 +123,6 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
       <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="${style}" rel="stylesheet">
-      <script nonce="${nonce}" src="${commonScript}"></script>
       <title>Playwright</title>
     </head>
     <body class="locators-view">

media/settingsView.js → src/settingsView.script.ts

@@ -14,19 +14,15 @@
  * limitations under the License.
  */
 
-// @ts-check
+import { Config, createAction, ProjectEntry, vscode } from './common';
 
-/** @type {Config} */
-let selectConfig;
+let selectConfig: Config;
 
-const selectAllButton = /** @type {HTMLAnchorElement} */ (document.getElementById('selectAll'));
-const unselectAllButton = /** @type {HTMLAnchorElement} */ (document.getElementById('unselectAll'));
+const selectAllButton = document.getElementById('selectAll') as HTMLAnchorElement;
+const unselectAllButton = document.getElementById('unselectAll') as HTMLAnchorElement;
 
-/**
- * @param {Array<ProjectEntry>} projects
- */
-function updateProjects(projects) {
-  const projectsElement = /** @type {HTMLElement}*/ (document.getElementById('projects'));
+function updateProjects(projects: ProjectEntry[]) {
+  const projectsElement = document.getElementById('projects') as HTMLElement;
   projectsElement.textContent = '';
   for (const project of projects) {
     const { name, enabled } = project;
@@ -50,10 +46,7 @@ function updateProjects(projects) {
   unselectAllButton.hidden = !allEnabled;
 }
 
-/**
- * @param {boolean} enabled
- */
-function setAllProjectsEnabled(enabled) {
+function setAllProjectsEnabled(enabled: boolean) {
   vscode.postMessage({ method: 'setAllProjectsEnabled', params: { configFile: selectConfig.configFile, enabled } });
 }
 selectAllButton.addEventListener('click', () => setAllProjectsEnabled(true));
@@ -64,31 +57,31 @@ for (const input of Array.from(document.querySelectorAll('input[type=checkbox]')
     vscode.postMessage({ method: 'toggle', params: { setting: input.getAttribute('setting') } });
   });
 }
-for (const select of Array.from(document.querySelectorAll('select[setting]'))) {
+for (const select of Array.from(document.querySelectorAll<HTMLSelectElement>('select[setting]'))) {
   select.addEventListener('change', event => {
-    vscode.postMessage({ method: 'set', params: { setting: select.getAttribute('setting'), value: /** @type {HTMLSelectElement} */(select).value } });
+    vscode.postMessage({ method: 'set', params: { setting: select.getAttribute('setting'), value: select.value } });
   });
 }
 
 window.addEventListener('message', event => {
-  const actionsElement = /** @type {HTMLElement} */(document.getElementById('actions'));
-  const configToolbarElement = /** @type {HTMLElement} */(document.getElementById('configToolbar'));
-  const rareActionsElement = /** @type {HTMLElement} */(document.getElementById('rareActions'));
-  const modelSelector = /** @type {HTMLElement} */(document.getElementById('model-selector'));
+  const actionsElement = document.getElementById('actions')!;
+  const configToolbarElement = document.getElementById('configToolbar')!;
+  const rareActionsElement = document.getElementById('rareActions')!;
+  const modelSelector = document.getElementById('model-selector')!;
 
   const { method, params } = event.data;
   if (method === 'settings') {
-    for (const [key, value] of Object.entries(params.settings)) {
-      const input = /** @type {HTMLInputElement} */ (document.querySelector('input[setting=' + key + ']'));
+    for (const [key, value] of Object.entries(params.settings as Record<string, string | boolean>)) {
+      const input = document.querySelector('input[setting=' + key + ']') as HTMLInputElement;
       if (input) {
         if (typeof value === 'boolean')
           input.checked = value;
         else
           input.value = value;
       }
-      const select = /** @type {HTMLSelectElement} */ (document.querySelector('select[setting=' + key + ']'));
+      const select = document.querySelector('select[setting=' + key + ']') as HTMLSelectElement;
       if (select)
-        select.value = value;
+        select.value = value as string;
     }
   } else if (method === 'actions') {
     actionsElement.textContent = '';
@@ -107,7 +100,7 @@ window.addEventListener('message', event => {
     }
   } else if (method === 'models') {
     const { configs, showModelSelector } = params;
-    const select = /** @type {HTMLSelectElement} */ (document.getElementById('models'));
+    const select = document.getElementById('models') as HTMLSelectElement;
     select.textContent = '';
     const configsMap = new Map();
     for (const config of configs) {

src/settingsView.ts

@@ -199,8 +199,7 @@ export class SettingsView extends DisposableBase implements vscodeTypes.WebviewV
 
 function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Uri, webview: vscodeTypes.Webview) {
   const style = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'media', 'common.css'));
-  const commonScript = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'media', 'common.js'));
-  const script = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'media', 'settingsView.js'));
+  const script = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, 'out', 'settingsView.script.js'));
   const nonce = getNonce();
 
   return `<!DOCTYPE html>
@@ -210,7 +209,6 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
       <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="${style}" rel="stylesheet">
-      <script src="${commonScript}" nonce="${nonce}"></script>
       <title>Playwright</title>
     </head>
     <body class="settings-view">