From dffec178fd85a67040a768e0735692734a5a5ba8 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Thu, 6 Feb 2025 17:26:05 +0200 Subject: [PATCH] chore: warn when scoping suffix is set too late (#10781) chore: log warning when using scoping suffix --- packages/base/src/CustomElementsRegistry.ts | 5 +++++ packages/base/src/CustomElementsScopeUtils.ts | 10 +++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/base/src/CustomElementsRegistry.ts b/packages/base/src/CustomElementsRegistry.ts index 7961c76de36b..97b2294d41f0 100644 --- a/packages/base/src/CustomElementsRegistry.ts +++ b/packages/base/src/CustomElementsRegistry.ts @@ -19,6 +19,10 @@ const isTagRegistered = (tag: string) => { return Definitions.has(tag); }; +const hasRegisteredTags = () => { + return Definitions.size > 0; +}; + const getAllRegisteredTags = () => { return [...Definitions.values()]; }; @@ -93,6 +97,7 @@ const displayFailedRegistrations = () => { export { registerTag, isTagRegistered, + hasRegisteredTags, getAllRegisteredTags, recordTagRegistrationFailure, }; diff --git a/packages/base/src/CustomElementsScopeUtils.ts b/packages/base/src/CustomElementsScopeUtils.ts index 31a6f1f9254e..1518d0a6fb7f 100644 --- a/packages/base/src/CustomElementsScopeUtils.ts +++ b/packages/base/src/CustomElementsScopeUtils.ts @@ -1,3 +1,4 @@ +import { hasRegisteredTags } from "./CustomElementsRegistry.js"; import VersionInfo from "./generated/VersionInfo.js"; let suf: string; @@ -16,7 +17,9 @@ const tagsCache = new Map(); // true/false means the tag should /** * Sets the suffix to be used for custom elements scoping, f.e. pass "demo" to get tags such as "ui5-button-demo". - * Note: by default all tags starting with "ui5-" will be scoped, unless you change this by calling "setCustomElementsScopingRules" + * + * **Note:** By default all tags starting with "ui5-" will be scoped, unless you change this by calling "setCustomElementsScopingRules" + * **Note:** Setting the scoping suffix must be done before importing any components. * * @public * @param suffix The scoping suffix @@ -26,6 +29,11 @@ const setCustomElementsScopingSuffix = (suffix: string) => { throw new Error("Only alphanumeric characters and dashes allowed for the scoping suffix"); } + if (hasRegisteredTags()) { + // eslint-disable-next-line no-console + console.warn("Setting the scoping suffix must be done before importing any components. For proper usage, read the scoping section: https://github.com/SAP/ui5-webcomponents/blob/main/docs/2-advanced/06-scoping.md."); + } + suf = suffix; };