npm - @ui5/webcomponents-base - Versions diffs - 0.0.0-cc312800a → 0.0.0-cf50976ce - Mend

@ui5/webcomponents-base 0.0.0-cc312800a → 0.0.0-cf50976ce

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (209) hide show

package/.eslintignore +3 -1
package/CHANGELOG.md +280 -0
package/README.md +53 -7
package/bundle.esm.js +13 -11
package/dist/Boot.js +34 -18
package/dist/CSP.js +59 -0
package/dist/CustomElementsRegistry.js +60 -4
package/dist/CustomElementsScope.js +20 -98
package/dist/CustomElementsScopeUtils.js +108 -0
package/dist/Device.js +22 -1
package/dist/EventProvider.js +19 -25
package/dist/FeaturesRegistry.js +4 -1
package/dist/FontFace.js +7 -95
package/dist/InitialConfiguration.js +31 -14
package/dist/Keys.js +62 -0
package/dist/ManagedStyles.js +83 -0
package/dist/Render.js +3 -1
package/dist/Runtimes.js +107 -0
package/dist/StaticAreaItem.js +15 -10
package/dist/SystemCSSVars.js +4 -25
package/dist/UI5Element.js +71 -60
package/dist/UI5ElementMetadata.js +18 -2
package/dist/asset-registries/Icons.js +26 -9
package/dist/asset-registries/Illustrations.js +30 -0
package/dist/asset-registries/LocaleData.js +18 -4
package/dist/asset-registries/Themes.js +6 -2
package/dist/asset-registries/i18n.js +3 -1
package/dist/assets/bundle.esm.83f057b4.js +43 -0
package/dist/assets-meta/IconCollectionsAlias.js +18 -0
package/dist/config/Icons.js +52 -0
package/dist/config/Theme.js +25 -0
package/dist/css/BusyIndicator.css +80 -0
package/dist/css/FontFace.css +66 -0
package/dist/css/OverrideFontFace.css +32 -0
package/dist/css/SystemCSSVars.css +17 -0
package/dist/delegate/ItemNavigation.js +75 -4
package/dist/delegate/ScrollEnablement.js +7 -1
package/dist/features/F6Navigation.js +110 -0
package/dist/features/OpenUI5Enablement.js +119 -0
package/dist/generated/AssetParameters.js +1 -1
package/dist/generated/VersionInfo.js +10 -0
package/dist/generated/css/BusyIndicator.css.js +5 -0
package/dist/generated/css/FontFace.css.js +5 -0
package/dist/generated/css/OverrideFontFace.css.js +5 -0
package/dist/generated/css/SystemCSSVars.css.js +5 -0
package/dist/i18nBundle.js +34 -3
package/dist/renderer/LitRenderer.js +39 -18
package/dist/renderer/directives/style-map.js +72 -0
package/dist/renderer/executeTemplate.js +19 -2
package/dist/sap/base/Log.js +241 -0
package/dist/sap/base/assert.js +8 -0
package/dist/sap/base/security/URLListValidator.js +148 -0
package/dist/sap/base/security/encodeCSS.js +14 -0
package/dist/sap/base/security/encodeXML.js +23 -0
package/dist/sap/base/security/sanitizeHTML.js +16 -0
package/dist/sap/base/strings/toHex.js +8 -0
package/dist/sap/base/util/now.js +7 -0
package/dist/sap/ui/thirdparty/caja-html-sanitizer.js +3585 -0
package/dist/theming/CustomStyle.js +23 -3
package/dist/theming/applyTheme.js +11 -10
package/dist/theming/getEffectiveLinksHrefs.js +27 -0
package/dist/theming/getEffectiveStyle.js +9 -0
package/dist/theming/getStylesString.js +4 -2
package/dist/theming/getThemeDesignerTheme.js +25 -5
package/dist/theming/preloadLinks.js +23 -0
package/dist/types/DOMReference.js +24 -0
package/dist/types/DataType.js +12 -0
package/dist/types/Float.js +4 -0
package/dist/types/Integer.js +4 -0
package/dist/types/InvisibleMessageMode.js +30 -0
package/dist/updateShadowRoot.js +9 -6
package/dist/util/AriaLabelHelper.js +6 -8
package/dist/util/Caret.js +1 -14
package/dist/util/ColorConversion.js +30 -2
package/dist/util/FocusableElements.js +13 -7
package/dist/util/HTMLSanitizer.js +7 -0
package/dist/util/InvisibleMessage.js +69 -0
package/dist/util/PopupUtils.js +1 -1
package/dist/util/TabbableElements.js +5 -1
package/dist/util/createLinkInHead.js +19 -0
package/dist/util/escapeRegex.js +10 -0
package/dist/util/generateHighlightedMarkup.js +42 -0
package/dist/util/getEffectiveScrollbarStyle.js +5 -0
package/dist/util/getNormalizedTarget.js +16 -0
package/dist/util/isDefaultSlotProvided.js +11 -0
package/dist/util/isNodeHidden.js +1 -1
package/dist/util/isNodeTabbable.js +4 -4
package/hash.txt +1 -1
package/index.js +1 -1
package/lib/generate-asset-parameters/index.js +8 -5
package/lib/generate-styles/index.js +26 -0
package/lib/generate-version-info/index.js +32 -0
package/package-scripts.js +36 -23
package/package.json +18 -9
package/src/Boot.js +34 -18
package/src/CSP.js +59 -0
package/src/CustomElementsRegistry.js +60 -4
package/src/CustomElementsScope.js +20 -98
package/src/CustomElementsScopeUtils.js +108 -0
package/src/Device.js +22 -1
package/src/EventProvider.js +19 -25
package/src/FeaturesRegistry.js +4 -1
package/src/FontFace.js +7 -95
package/src/InitialConfiguration.js +31 -14
package/src/Keys.js +62 -0
package/src/ManagedStyles.js +83 -0
package/src/Render.js +3 -1
package/src/Runtimes.js +107 -0
package/src/StaticAreaItem.js +15 -10
package/src/SystemCSSVars.js +4 -25
package/src/UI5Element.js +71 -60
package/src/UI5ElementMetadata.js +18 -2
package/src/asset-registries/Icons.js +26 -9
package/src/asset-registries/Illustrations.js +30 -0
package/src/asset-registries/LocaleData.js +18 -4
package/src/asset-registries/Themes.js +6 -2
package/src/asset-registries/i18n.js +3 -1
package/src/assets-meta/IconCollectionsAlias.js +18 -0
package/src/config/Icons.js +52 -0
package/src/config/Theme.js +25 -0
package/src/css/BusyIndicator.css +80 -0
package/src/css/FontFace.css +66 -0
package/src/css/OverrideFontFace.css +32 -0
package/src/css/SystemCSSVars.css +17 -0
package/src/delegate/ItemNavigation.js +75 -4
package/src/delegate/ScrollEnablement.js +7 -1
package/src/features/F6Navigation.js +110 -0
package/src/features/OpenUI5Enablement.js +119 -0
package/src/i18nBundle.js +34 -3
package/src/renderer/LitRenderer.js +39 -18
package/src/renderer/directives/style-map.js +72 -0
package/src/renderer/executeTemplate.js +19 -2
package/src/theming/CustomStyle.js +23 -3
package/src/theming/applyTheme.js +11 -10
package/src/theming/getEffectiveLinksHrefs.js +27 -0
package/src/theming/getEffectiveStyle.js +9 -0
package/src/theming/getStylesString.js +4 -2
package/src/theming/getThemeDesignerTheme.js +25 -5
package/src/theming/preloadLinks.js +23 -0
package/src/types/DOMReference.js +24 -0
package/src/types/DataType.js +12 -0
package/src/types/Float.js +4 -0
package/src/types/Integer.js +4 -0
package/src/types/InvisibleMessageMode.js +30 -0
package/src/updateShadowRoot.js +9 -6
package/src/util/AriaLabelHelper.js +6 -8
package/src/util/Caret.js +1 -14
package/src/util/ColorConversion.js +30 -2
package/src/util/FocusableElements.js +13 -7
package/src/util/HTMLSanitizer.js +7 -0
package/src/util/InvisibleMessage.js +69 -0
package/src/util/PopupUtils.js +1 -1
package/src/util/TabbableElements.js +5 -1
package/src/util/createLinkInHead.js +19 -0
package/src/util/escapeRegex.js +10 -0
package/src/util/generateHighlightedMarkup.js +42 -0
package/src/util/getEffectiveScrollbarStyle.js +5 -0
package/src/util/getNormalizedTarget.js +16 -0
package/src/util/isDefaultSlotProvided.js +11 -0
package/src/util/isNodeHidden.js +1 -1
package/src/util/isNodeTabbable.js +4 -4
package/used-modules.txt +10 -0
package/config/.eslintrc.js +0 -3
package/config/rollup.config.js +0 -1
package/dist/config/AssetsPath.js +0 -17
package/dist/isLegacyBrowser.js +0 -3
package/dist/renderer/ifDefined.js +0 -21
package/dist/renderer/scopeHTML.js +0 -32
package/dist/resources/bundle.esm.js +0 -121
package/dist/resources/bundle.esm.js.map +0 -1
package/dist/test-resources/assets/Themes.js +0 -17
package/dist/test-resources/elements/Child.js +0 -35
package/dist/test-resources/elements/Generic.js +0 -84
package/dist/test-resources/elements/GenericExt.js +0 -26
package/dist/test-resources/elements/NoShadowDOM.js +0 -13
package/dist/test-resources/elements/Parent.js +0 -41
package/dist/test-resources/elements/WithStaticArea.js +0 -76
package/dist/test-resources/pages/AllTestElements.html +0 -39
package/dist/test-resources/pages/Configuration.html +0 -18
package/dist/test-resources/pages/ConfigurationScript.html +0 -34
package/dist/test-resources/pages/assets/messagebundle_de.properties +0 -1
package/dist/test-resources/pages/assets/messagebundle_en.properties +0 -1
package/dist/test-resources/pages/assets/messagebundle_es.properties +0 -1
package/dist/test-resources/pages/assets/messagebundle_fr.properties +0 -1
package/dist/test-resources/pages/i18n.html +0 -35
package/dist/test-resources/specs/ConfigurationChange.spec.js +0 -27
package/dist/test-resources/specs/ConfigurationScript.spec.js +0 -63
package/dist/test-resources/specs/ConfigurationURL.spec.js +0 -47
package/dist/test-resources/specs/CustomTheme.spec.js +0 -27
package/dist/test-resources/specs/StaticArea.spec.js +0 -36
package/dist/test-resources/specs/Theming.spec.js +0 -33
package/dist/test-resources/specs/UI5ElementInvalidation.js +0 -242
package/dist/test-resources/specs/UI5ElementLifecycle.js +0 -98
package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js +0 -75
package/dist/test-resources/specs/UI5ElementMetadataExt.js +0 -42
package/dist/test-resources/specs/UI5ElementPropertyValidation.js +0 -14
package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js +0 -67
package/dist/test-resources/specs/UI5ElementShadowDOM.js +0 -24
package/dist/test-resources/specs/UI5ElementSlots.js +0 -36
package/dist/theming/createThemePropertiesStyleTag.js +0 -20
package/dist/util/encodeCSS.js +0 -24
package/dist/util/findNodeOwner.js +0 -35
package/src/config/AssetsPath.js +0 -17
package/src/isLegacyBrowser.js +0 -3
package/src/renderer/ifDefined.js +0 -21
package/src/renderer/scopeHTML.js +0 -32
package/src/theming/createThemePropertiesStyleTag.js +0 -20
package/src/util/encodeCSS.js +0 -24
package/src/util/findNodeOwner.js +0 -35

package/dist/util/createLinkInHead.js ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * Creates a <link> tag in the <head> tag
+ * @param href - the CSS
+ * @param attributes - optional attributes to add to the tag
+ * @returns {HTMLElement}
+ */
+const createLinkInHead = (href, attributes = {}) => {
+	const link = document.createElement("link");
+	link.type = "text/css";
+	link.rel = "stylesheet";
+	Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
+	link.href = href;
+	document.head.appendChild(link);
+	return link;
+};
+export default createLinkInHead;

package/dist/util/escapeRegex.js ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * Escape a regular expression text so that it can be used in a regular expression.
+ * @param {string} text The string to be interpreted literally
+ * @returns Regular expression string to pass to regex
+ */
+function escapeRegex(text) {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+export default escapeRegex;

package/dist/util/generateHighlightedMarkup.js ADDED Viewed

@@ -0,0 +1,42 @@
+import escapeRegex from "./escapeRegex.js";
+import encodeXML from "../sap/base/security/encodeXML.js";
+// utility to replace all occurances of a string
+function replaceAll(text, find, replace, caseInsensitive) {
+	return text.replace(new RegExp(escapeRegex(find), `${caseInsensitive ? "i" : ""}g`), replace);
+}
+/**
+ * Generate markup for a raw string where a particular text is wrapped with some tag, by default `<b>` (bold) tag.
+ * All inputs to this function are considered literal text, and special characters will always be escaped.
+ * @param {string} text The text to add highlighting to
+ * @param {string} textToHighlight The text which should be highlighted
+ * @return {string} the markup HTML which contains all occurrances of the input text surrounded with a `<b>` tag.
+ */
+function generateHighlightedMarkup(text, textToHighlight) {
+	if (!text || !textToHighlight) {
+		return text;
+	}
+	// a token is some string that does not appear in either of the input strings
+	// repeat the token until it does not appear in the string
+	const makeToken = t => {
+		const [s, e] = t.split("");
+		while (text.indexOf(t) >= 0 || textToHighlight.indexOf(t) >= 0) {
+			t = `${s}${t}${e}`;
+		}
+		return t;
+	};
+	// It doesn't matter what characters are used as long as all 4 of them are unique
+	// And also that encodeXML will not change these characters
+	const openToken = makeToken("12");
+	const closeToken = makeToken("34");
+	// wrap every occurance of the textToHighlight using the open/close tokens (instead of markup at this point)
+	let result = encodeXML(replaceAll(text, textToHighlight, match => `${openToken}${match}${closeToken}`, true));
+	// now replace the open and close tokens with the markup that we expect
+	[[openToken, "<b>"], [closeToken, "</b>"]].forEach(([find, replace]) => {
+		result = replaceAll(result, find, replace);
+	});
+	return result;
+}
+export default generateHighlightedMarkup;

package/dist/util/getEffectiveScrollbarStyle.js ADDED Viewed

@@ -0,0 +1,5 @@
+const NO_SCROLLBAR_STYLE_CLASS = "ui5-content-native-scrollbars";
+const getEffectiveScrollbarStyle = () => document.body.classList.contains(NO_SCROLLBAR_STYLE_CLASS);
+export default getEffectiveScrollbarStyle;

package/dist/util/getNormalizedTarget.js ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * Returns the normalized event target in cases when it has shadow root.
+ * @param {Object} target The original event target
+ * @returns {Object} The normalized target
+ */
+const getNormalizedTarget = target => {
+	let element = target;
+	if (target.shadowRoot && target.shadowRoot.activeElement) {
+		element = target.shadowRoot.activeElement;
+	}
+	return element;
+};
+export default getNormalizedTarget;

package/dist/util/isDefaultSlotProvided.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { getSlotName } from "./SlotsHelper.js";
+const isDefaultSlotProvided = element => {
+	return Array.from(element.childNodes).filter(node => {
+		return node.nodeType !== Node.COMMENT_NODE
+		&& getSlotName(node) === "default"
+		&& (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0);
+	}).length > 0;
+};
+export default isDefaultSlotProvided;

package/dist/util/isNodeHidden.js CHANGED Viewed

@@ -3,7 +3,7 @@ const isNodeHidden = node => {
 		return false;
 	}
-	return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || node.style.visibility === "hidden";
+	return (node.offsetWidth <= 0 && node.offsetHeight <= 0) || (node.style && node.style.visibility === "hidden");
 };
 export default isNodeHidden;

package/dist/util/isNodeTabbable.js CHANGED Viewed

@@ -15,14 +15,14 @@ const isNodeTabbable = node => {
 		return false;
 	}
-	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
-		return !node.disabled;
-	}
 	const tabIndex = node.getAttribute("tabindex");
 	if (tabIndex !== null && tabIndex !== undefined) {
 		return parseInt(tabIndex) >= 0;
 	}
+	if (nodeName === "a" || /input|select|textarea|button|object/.test(nodeName)) {
+		return !node.disabled;
+	}
 };
 export default isNodeTabbable;

package/hash.txt CHANGED Viewed

	@@ -1 +1 @@
1	- ~~WeIr8BhWti5PEgIpG30j/drpLD4~~=
1	+ XeoUDYYqmjUwnJg4dGNgbPltSMo=

package/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import UI5Element from "./src/UI5Element.js";
+import UI5Element from "./dist/UI5Element.js";
 export default UI5Element;
 export { UI5Element };

package/lib/generate-asset-parameters/index.js CHANGED Viewed

@@ -1,6 +1,4 @@
-const fs = require('fs');
-const path = require('path');
-const mkdirp = require('mkdirp');
+const fs = require('fs').promises;
 const assets = require('@ui5/webcomponents-tools/assets-meta.js');
 const fileContent = `const assetParameters = ${JSON.stringify(assets)};
@@ -17,6 +15,11 @@ export {
 	SUPPORTED_LOCALES,
 };`;
-mkdirp.sync("dist/generated/");
-fs.writeFileSync("dist/generated/AssetParameters.js", fileContent);
+const generate = async () => {
+	await fs.mkdir("dist/generated/", { recursive: true });
+	return fs.writeFile("dist/generated/AssetParameters.js", fileContent);
+}
+generate().then(() => {
+	console.log("Assets parameters generated.");
+});

package/lib/generate-styles/index.js ADDED Viewed

@@ -0,0 +1,26 @@
+const fs = require('fs').promises;
+const path = require('path');
+const CleanCSS = require('clean-css');
+const generate = async () => {
+	await fs.mkdir("dist/generated/css/", {recursive: true});
+	const files = (await fs.readdir("src/css/")).filter(file => file.endsWith(".css"));
+	const filesPromises = files.map(async file => {
+		let content = await fs.readFile(path.join("src/css/", file));
+		const res = new CleanCSS().minify(`${content}`);
+		content = `export default {
+	packageName: "@ui5/webcomponents-base",
+	fileName: "${file}",
+	content: \`${res.styles}\`
+};`;
+		return fs.writeFile(path.join("dist/generated/css/", `${file}.js`), content);
+	});
+	return Promise.all(filesPromises);
+};
+generate().then(() => {
+	console.log("Styles files generated.");
+});

package/lib/generate-version-info/index.js ADDED Viewed

@@ -0,0 +1,32 @@
+const fs = require('fs').promises;
+const generate = async () => {
+	const version = JSON.parse(await fs.readFile("package.json")).version;
+	// Parse version
+	const matches = version.match(/^([0-9]+)\.([0-9]+)\.([0-9]+)(.*)$/);
+	if (!matches) {
+		throw new Error("Unsupported version format");
+	}
+	const isNext = version.match(/[a-f0-9]{9}$/);
+	const buildTime = Math.floor(new Date().getTime() / 1000);
+	const fileContent = `const VersionInfo = {
+	version: "${version}",
+	major: ${matches[1]},
+	minor: ${matches[2]},
+	patch: ${matches[3]},
+	suffix: "${matches[4]}",
+	isNext: ${isNext ? "true" : "false"},
+	buildTime: ${buildTime},
+};
+export default VersionInfo;`;
+	await fs.mkdir("dist/generated/", { recursive: true });
+	await fs.writeFile("dist/generated/VersionInfo.js", fileContent);
+}
+generate().then(() => {
+	console.log("Version info file generated.");
+});

package/package-scripts.js CHANGED Viewed

@@ -1,40 +1,53 @@
 const resolve = require("resolve");
+const path = require("path");
 const assetParametersScript = resolve.sync("@ui5/webcomponents-base/lib/generate-asset-parameters/index.js");
-const serve = resolve.sync("@ui5/webcomponents-tools/lib/serve/index.js");
-const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
-const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
-const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date."`;
+const stylesScript = resolve.sync("@ui5/webcomponents-base/lib/generate-styles/index.js");
+const versionScript = resolve.sync("@ui5/webcomponents-base/lib/generate-version-info/index.js");
+const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js");
+const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js");
+const LIB = path.join(__dirname, `../tools/lib/`);
+const viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
+const eslintConfig = `--config ${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}`;
 const scripts = {
 	clean: "rimraf dist && rimraf .port",
-	lint: "eslint . --config config/.eslintrc.js",
-	prepare: "nps clean copy generateAssetParameters",
+	lint: `eslint . ${eslintConfig}`,
+	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles",
+	integrate: {
+		default: "nps integrate.copy-used-modules integrate.replace-amd integrate.amd-to-es6 integrate.esm-abs-to-rel integrate.third-party",
+		"copy-used-modules": `node "${copyUsedModules}" ./used-modules.txt dist/`,
+		"replace-amd": "replace-in-file sap.ui.define define dist/**/*.js",
+		"amd-to-es6": "amdtoes6 --src=dist/ --replace --glob=**/*.js",
+		"esm-abs-to-rel": `node "${esmAbsToRel}" dist/ dist/`,
+		"third-party": {
+			default: "nps integrate.third-party.copy integrate.third-party.fix",
+			copy: "mkdirp dist/sap/ui/thirdparty/ && copy-and-watch ../../node_modules/@openui5/sap.ui.core/src/sap/ui/thirdparty/caja-html-sanitizer.js dist/sap/ui/thirdparty/",
+			fix: "replace-in-file 240 xA0 dist/sap/ui/thirdparty/caja-html-sanitizer.js"
+		},
+	},
 	build: {
-		default: `${UP_TO_DATE} || nps lint prepare build.bundle hash`,
-		bundle: "rollup --config config/rollup.config.js",
+		default: `nps lint prepare build.bundle`,
+		bundle: `vite build ${viteConfig}`,
 	},
 	copy: {
-		default: "nps copy.src copy.test",
-		src: `copy-and-watch "src/**/*.js" dist/`,
-		test: `copy-and-watch "test/**/*.*" dist/test-resources`,
+		default: "nps copy.src",
+		src: `copy-and-watch "src/**/*.{js,css}" dist/`,
 	},
 	generateAssetParameters: `node "${assetParametersScript}"`,
+	generateVersionInfo: `node "${versionScript}"`,
+	generateStyles: `node "${stylesScript}"`,
 	watch: {
-		default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle"',
+		default: 'concurrently "nps watch.src" "nps watch.styles"',
+		withBundle: 'concurrently "nps watch.src" "nps watch.bundle" "nps watch.styles"',
 		src: 'nps "copy.src --watch --skip-initial-copy"',
-		test: 'nps "copy.test --watch --skip-initial-copy"',
-		bundle: "rollup --config config/rollup.config.js -w --environment DEV",
-	},
-	dev: 'concurrently "nps serve" "nps watch"',
-	start: "nps prepare dev",
-	serve: `node "${serve}" --dir="dist/" --port=9191 --packageName="@ui5/webcomponents-base"`,
-	test: {
-		// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
-		default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
-		run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
+		bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
+		styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
 	},
-	hash: `node "${generateHash}" dist/ hash.txt`,
+	start: "nps prepare watch.withBundle",
+	test: `node "${LIB}/test-runner/test-runner.js"`,
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-cc312800a",
+  "version": "0.0.0-cf50976ce",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -15,26 +15,35 @@
     "url": "https://github.com/SAP/ui5-webcomponents.git",
     "directory": "packages/base"
   },
+  "exports": {
+    ".": "./index.js",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./bundle.esm.js": "./bundle.esm.js",
+    "./*": "./dist/*"
+  },
   "scripts": {
     "clean": "nps clean",
     "lint": "nps lint",
     "start": "nps start",
     "build": "nps build",
     "test": "nps test",
-    "hash": "nps hash",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "lit-html": "^1.3.0"
+    "lit-html": "^2.0.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-cc312800a",
-    "array-uniq": "^2.0.0",
-    "chromedriver": "89.0.0",
+    "@buxlabs/amd-to-es6": "0.16.1",
+    "@openui5/sap.ui.core": "1.101.0",
+    "@ui5/webcomponents-tools": "0.0.0-cf50976ce",
+    "chromedriver": "104.0.0",
+    "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
+    "cross-env": "^7.0.3",
     "eslint": "^7.22.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "npm-run-all": "^4.1.5",
-    "path-exists-cli": "^1.0.0"
+    "mkdirp": "^1.0.4",
+    "replace-in-file": "^6.3.5",
+    "resolve": "^1.20.0"
   }
 }

package/src/Boot.js CHANGED Viewed

@@ -1,40 +1,56 @@
-import EventProvider from "./EventProvider.js";
 import whenDOMReady from "./util/whenDOMReady.js";
 import insertFontFace from "./FontFace.js";
 import insertSystemCSSVars from "./SystemCSSVars.js";
 import { getTheme } from "./config/Theme.js";
 import applyTheme from "./theming/applyTheme.js";
+import { registerCurrentRuntime } from "./Runtimes.js";
 import { getFeature } from "./FeaturesRegistry.js";
-let booted = false;
-const eventProvider = new EventProvider();
+let bootPromise;
 /**
  * Attach a callback that will be executed on boot
  * @public
  * @param listener
  */
-const attachBoot = listener => {
-	eventProvider.attachEvent("boot", listener);
+const attachBoot = async listener => {
+	await boot();
+	listener();
 };
 const boot = async () => {
-	if (booted) {
-		return;
+	if (bootPromise) {
+		return bootPromise;
 	}
-	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (OpenUI5Support) {
-		await OpenUI5Support.init();
-	}
+	/* eslint-disable no-alert, no-async-promise-executor */
+	/*
+		Note(since we disable eslint rule):
+		If an async executor function throws an error, the error will be lost and won't cause the newly-constructed Promise to reject.
+		This could make it difficult to debug and handle some errors.
+	*/
+	bootPromise = new Promise(async resolve => {
+		registerCurrentRuntime();
+		const OpenUI5Support = getFeature("OpenUI5Support");
+		const F6Navigation = getFeature("F6Navigation");
+		if (OpenUI5Support) {
+			await OpenUI5Support.init();
+		} else if (F6Navigation) {
+			F6Navigation.init();
+		}
+		await whenDOMReady();
+		await applyTheme(getTheme());
+		OpenUI5Support && OpenUI5Support.attachListeners();
+		insertFontFace();
+		insertSystemCSSVars();
+		resolve();
+	});
+	/* eslint-enable no-alert, no-async-promise-executor */
-	await whenDOMReady();
-	await applyTheme(getTheme());
-	OpenUI5Support && OpenUI5Support.attachListeners();
-	insertFontFace();
-	insertSystemCSSVars();
-	await eventProvider.fireEventAsync("boot");
-	booted = true;
+	return bootPromise;
 };
 export {

package/src/CSP.js ADDED Viewed

@@ -0,0 +1,59 @@
+const roots = new Map();
+let useLinks = false;
+let preloadLinks = true;
+/**
+ * Use this function to provide the path to the directory where the css resources for the given package will be served from
+ *
+ * @public
+ * @param packageName name of the package that is being configured
+ * @param root path, accessible by the server that will serve the css resources
+ */
+const setPackageCSSRoot = (packageName, root) => {
+	roots.set(packageName, root);
+};
+const getUrl = (packageName, path) => {
+	return `${roots.get(packageName)}${path}`;
+};
+/**
+ * Call this function to enable or disable the usage of <link> tags instead of <style> tags to achieve CSP compliance
+ * Example: "setUseLinks(true)" will unconditionally use <link> tags for all browsers;
+ * Example: "setUseLinks(!document.adoptedStyleSheets) will only enable the usage of <link> tags for browsers that do not support constructable stylesheets.
+ *
+ * @public
+ * @param use whether links will be used
+ */
+const setUseLinks = use => {
+	useLinks = use;
+};
+/**
+ * Call this function to enable or disable the preloading of <link> tags.
+ * Note: only taken into account when <link> tags are being used.
+ * Note: links are being preloaded by default, so call "setPreloadLinks(false)" to opt out of this.
+ *
+ * @public
+ * @param preload
+ */
+const setPreloadLinks = preload => {
+	preloadLinks = preload;
+};
+const shouldUseLinks = () => {
+	return useLinks;
+};
+const shouldPreloadLinks = () => {
+	return preloadLinks;
+};
+export {
+	setPackageCSSRoot,
+	getUrl,
+	setUseLinks,
+	setPreloadLinks,
+	shouldUseLinks,
+	shouldPreloadLinks,
+};

package/src/CustomElementsRegistry.js CHANGED Viewed

@@ -1,11 +1,18 @@
 import setToArray from "./util/setToArray.js";
+import getSharedResource from "./getSharedResource.js";
+import { getCurrentRuntimeIndex, compareRuntimes, getAllRuntimes } from "./Runtimes.js";
+const Tags = getSharedResource("Tags", new Map());
 const Definitions = new Set();
-const Failures = new Set();
+let Failures = {};
 let failureTimeout;
+const UNKNOWN_RUNTIME = "unknown";
 const registerTag = tag => {
 	Definitions.add(tag);
+	Tags.set(tag, getCurrentRuntimeIndex());
 };
 const isTagRegistered = tag => {
@@ -17,18 +24,67 @@ const getAllRegisteredTags = () => {
 };
 const recordTagRegistrationFailure = tag => {
-	Failures.add(tag);
+	let tagRegRuntimeIndex = Tags.get(tag);
+	if (tagRegRuntimeIndex === undefined) {
+		tagRegRuntimeIndex = UNKNOWN_RUNTIME; // If the tag is taken, but not registered in Tags, then a version before 1.1.0 defined it => use the "unknown" key
+	}
+	Failures[tagRegRuntimeIndex] = Failures[tagRegRuntimeIndex] || new Set();
+	Failures[tagRegRuntimeIndex].add(tag);
 	if (!failureTimeout) {
 		failureTimeout = setTimeout(() => {
 			displayFailedRegistrations();
+			Failures = {};
 			failureTimeout = undefined;
 		}, 1000);
 	}
 };
 const displayFailedRegistrations = () => {
-	console.warn(`The following tags have already been defined by a different UI5 Web Components version: ${setToArray(Failures).join(", ")}`); // eslint-disable-line
-	Failures.clear();
+	const allRuntimes = getAllRuntimes();
+	const currentRuntimeIndex = getCurrentRuntimeIndex();
+	const currentRuntime = allRuntimes[currentRuntimeIndex];
+	let message = `Multiple UI5 Web Components instances detected.`;
+	if (allRuntimes.length > 1) {
+		message = `${message}\nLoading order (versions before 1.1.0 not listed): ${allRuntimes.map(runtime => `\n${runtime.description}`).join("")}`;
+	}
+	Object.keys(Failures).forEach(otherRuntimeIndex => {
+		let comparison;
+		let otherRuntime;
+		if (otherRuntimeIndex === UNKNOWN_RUNTIME) { // version < 1.1.0 defined the tag
+			comparison = 1; // the current runtime is considered newer
+			otherRuntime = {
+				description: `Older unknown runtime`,
+			};
+		} else {
+			comparison = compareRuntimes(currentRuntimeIndex, otherRuntimeIndex);
+			otherRuntime = allRuntimes[otherRuntimeIndex];
+		}
+		let compareWord;
+		if (comparison > 0) {
+			compareWord = "an older";
+		} else if (comparison < 0) {
+			compareWord = "a newer";
+		} else {
+			compareWord = "the same";
+		}
+		message = `${message}\n\n"${currentRuntime.description}" failed to define ${Failures[otherRuntimeIndex].size} tag(s) as they were defined by a runtime of ${compareWord} version "${otherRuntime.description}": ${setToArray(Failures[otherRuntimeIndex]).sort().join(", ")}.`;
+		if (comparison > 0) {
+			message = `${message}\nWARNING! If your code uses features of the above web components, unavailable in ${otherRuntime.description}, it might not work as expected!`;
+		} else {
+			message = `${message}\nSince the above web components were defined by the same or newer version runtime, they should be compatible with your code.`;
+		}
+	});
+	message = `${message}\n\nTo prevent other runtimes from defining tags that you use, consider using scoping or have third-party libraries use scoping: https://github.com/SAP/ui5-webcomponents/blob/main/docs/2-advanced/03-scoping.md.`;
+	console.warn(message); // eslint-disable-line
 };
 export {