From dc86c72649b54bb9d44c9b4f12776071efb6677f Mon Sep 17 00:00:00 2001 From: bendera Date: Fri, 26 Dec 2025 18:45:42 +0100 Subject: [PATCH 1/2] Standardize warnings --- dev/vscode-table/561-col-runtime-error.html | 52 +++++++++++++++++++ src/includes/VscElement.ts | 21 ++++++-- src/includes/helpers.ts | 4 ++ .../vscode-select/vscode-select-base.ts | 8 +-- src/vscode-icon/vscode-icon.ts | 5 +- 5 files changed, 78 insertions(+), 12 deletions(-) create mode 100644 dev/vscode-table/561-col-runtime-error.html diff --git a/dev/vscode-table/561-col-runtime-error.html b/dev/vscode-table/561-col-runtime-error.html new file mode 100644 index 000000000..c543f5e17 --- /dev/null +++ b/dev/vscode-table/561-col-runtime-error.html @@ -0,0 +1,52 @@ + + + + + + VSCode Elements + + + + + + + +

Component demo

+
+ + + + col 1 + col 2 + col 3 + + + + cell 1.1 + cell 2.1 + cell 3.1 + + + cell 1.2 + cell 2.2 + cell 3.2 + + + + +
+ + diff --git a/src/includes/VscElement.ts b/src/includes/VscElement.ts index d2a6e7675..58ae20e0a 100644 --- a/src/includes/VscElement.ts +++ b/src/includes/VscElement.ts @@ -3,11 +3,27 @@ import {LitElement} from 'lit'; const VERSION = '2.4.0'; const CONFIG_KEY = '__vscodeElements_disableRegistryWarning__'; +const warn = (message: string, componentInstance?: VscElement) => { + const prefix = '[VSCode Elements] '; + + if (componentInstance) { + // eslint-disable-next-line no-console + console.warn(`${prefix}${message}\n%o`, componentInstance); + } else { + // eslint-disable-next-line no-console + console.warn(`${message}\n%o`, componentInstance); + } +}; + export class VscElement extends LitElement { /** VSCode Elements version */ get version(): string { return VERSION; } + + warn(message: string) { + warn(message, this); + } } type CustomElementClass = Omit; @@ -48,9 +64,8 @@ export const customElement = (tagName: string) => { message += `is already registered by the same version of VSCode Elements (${VERSION}).`; } - // eslint-disable-next-line no-console - console.warn( - `[VSCode Elements] ${tagName} ${message}\nTo suppress this warning, set window.${CONFIG_KEY} to true` + warn( + `The custom element "${tagName}" ${message}\nTo suppress this warning, set window.${CONFIG_KEY} to true` ); }; }; diff --git a/src/includes/helpers.ts b/src/includes/helpers.ts index 8be5b1021..63c80e69c 100644 --- a/src/includes/helpers.ts +++ b/src/includes/helpers.ts @@ -28,3 +28,7 @@ export function getDefaultEditorFontStack() { return 'monospace'; } } + +export function logMessage(msg: string) { + return `[VSCode Elements] ${msg}`; +} diff --git a/src/includes/vscode-select/vscode-select-base.ts b/src/includes/vscode-select/vscode-select-base.ts index bcada40d5..66ce7ead0 100644 --- a/src/includes/vscode-select/vscode-select-base.ts +++ b/src/includes/vscode-select/vscode-select-base.ts @@ -91,14 +91,10 @@ export class VscodeSelectBase extends VscElement { let fm: FilterMethod; if (validValues.includes(val as FilterMethod)) { - // this._filter = val as FilterMethod; fm = val; } else { - // this._filter = 'fuzzy'; - // eslint-disable-next-line no-console - console.warn( - `[VSCode Webview Elements] Invalid filter: "${val}", fallback to default. Valid values are: "contains", "fuzzy", "startsWith", "startsWithPerm".`, - this + this.warn( + `Invalid filter: "${val}", fallback to default. Valid values are: "contains", "fuzzy", "startsWith", "startsWithPerm".` ); fm = 'fuzzy'; } diff --git a/src/vscode-icon/vscode-icon.ts b/src/vscode-icon/vscode-icon.ts index da6d92159..a0abb3b84 100644 --- a/src/vscode-icon/vscode-icon.ts +++ b/src/vscode-icon/vscode-icon.ts @@ -86,12 +86,11 @@ export class VscodeIcon extends VscElement { if (!linkElement) { let msg = - '[VSCode Elements] To use the Icon component, the codicons.css file must be included in the page with the id `vscode-codicon-stylesheet`! '; + 'To use the Icon component, the codicons.css file must be included in the page with the id "vscode-codicon-stylesheet"! '; msg += 'See https://vscode-elements.github.io/components/icon/ for more details.'; - // eslint-disable-next-line no-console - console.warn(msg); + this.warn(msg); } return {nonce, href}; From 67e97d9fc5e6ad4b532697e0712ef22b43225dc0 Mon Sep 17 00:00:00 2001 From: bendera Date: Fri, 26 Dec 2025 18:45:52 +0100 Subject: [PATCH 2/2] Prevent runtime error --- src/vscode-table/vscode-table.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/vscode-table/vscode-table.ts b/src/vscode-table/vscode-table.ts index c8ffa308a..2ff07ca14 100644 --- a/src/vscode-table/vscode-table.ts +++ b/src/vscode-table/vscode-table.ts @@ -74,6 +74,13 @@ export class VscodeTable extends VscElement { */ @property({type: Array}) set columns(val: string[]) { + if (!Array.isArray(val)) { + this.warn('Invalid value for "columns": expected an array.'); + this._columns = []; + + return; + } + this._columns = val; if (this.isConnected) {