diff --git a/package.json b/package.json
index 5dfc4258d..ed9ea8837 100644
--- a/package.json
+++ b/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",
diff --git a/media/common.js b/src/common.ts
similarity index 73%
rename from media/common.js
rename to src/common.ts
index 282b310ab..b78fe8fae 100644
--- a/media/common.js
+++ b/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;
diff --git a/media/locatorsView.js b/src/locatorsView.script.ts
similarity index 75%
rename from media/locatorsView.js
rename to src/locatorsView.script.ts
index c7ba783a9..b6cbcb584 100644
--- a/media/locatorsView.js
+++ b/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') {
diff --git a/src/locatorsView.ts b/src/locatorsView.ts
index fbccfb38d..bd0f93c8b 100644
--- a/src/locatorsView.ts
+++ b/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
-
Playwright
diff --git a/media/settingsView.js b/src/settingsView.script.ts
similarity index 72%
rename from media/settingsView.js
rename to src/settingsView.script.ts
index 194189848..642469142 100644
--- a/media/settingsView.js
+++ b/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} 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('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)) {
+ 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) {
diff --git a/src/settingsView.ts b/src/settingsView.ts
index 4f51303ef..5960935a1 100644
--- a/src/settingsView.ts
+++ b/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 `
@@ -210,7 +209,6 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
-
Playwright