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};
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) {