@ui5/webcomponents-base 0.0.0-323968e1b → 0.0.0-4180fe799

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-323968e1b",
+  "version": "0.0.0-4180fe799",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
-  "type": "module",
   "module": "index.js",
   "keywords": [
     "openui5",
@@ -16,28 +15,34 @@
     "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": {
-    "@ui5/webcomponents-utils": "0.0.0-323968e1b",
-    "css-vars-ponyfill": "^2.1.2",
-    "lit-html": "^1.0.0",
-    "regenerator-runtime": "0.12.1",
-    "url-search-params-polyfill": "^5.0.0"
+    "lit-html": "2.0.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-323968e1b",
-    "array-uniq": "^2.0.0",
-    "copy-and-watch": "^0.1.4",
-    "eslint": "^5.13.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "npm-run-all": "^4.1.5",
-    "path-exists-cli": "^1.0.0"
+    "@buxlabs/amd-to-es6": "0.16.1",
+    "@openui5/sap.ui.core": "1.94.0",
+    "@ui5/webcomponents-tools": "0.0.0-4180fe799",
+    "chromedriver": "95.0.0",
+    "clean-css": "^5.2.2",
+    "copy-and-watch": "^0.1.5",
+    "eslint": "^7.22.0",
+    "mkdirp": "^1.0.4",
+    "resolve": "^1.20.0"
   }
 }

package/src/AssetRegistry.js

@@ -1,9 +1,11 @@
-import { registerI18nBundle } from "./asset-registries/i18n.js";
-import { registerCldr } from "./asset-registries/LocaleData.js";
-import { registerThemeProperties } from "./asset-registries/Themes.js";
+import { registerI18nLoader } from "./asset-registries/i18n.js";
+import { registerLocaleDataLoader } from "./asset-registries/LocaleData.js";
+import { registerThemePropertiesLoader } from "./asset-registries/Themes.js";
+import { registerIconLoader } from "./asset-registries/Icons.js";
 
 export {
-	registerCldr,
-	registerThemeProperties,
-	registerI18nBundle,
+	registerI18nLoader,
+	registerLocaleDataLoader,
+	registerThemePropertiesLoader,
+	registerIconLoader,
 };

package/src/Boot.js

@@ -0,0 +1,43 @@
+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 { getFeature } from "./FeaturesRegistry.js";
+
+let booted = false;
+const eventProvider = new EventProvider();
+
+/**
+ * Attach a callback that will be executed on boot
+ * @public
+ * @param listener
+ */
+const attachBoot = listener => {
+	eventProvider.attachEvent("boot", listener);
+};
+
+const boot = async () => {
+	if (booted) {
+		return;
+	}
+
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support) {
+		await OpenUI5Support.init();
+	}
+
+	await whenDOMReady();
+	await applyTheme(getTheme());
+	OpenUI5Support && OpenUI5Support.attachListeners();
+	insertFontFace();
+	insertSystemCSSVars();
+	await eventProvider.fireEventAsync("boot");
+	booted = true;
+};
+
+export {
+	boot,
+	attachBoot,
+};

package/src/CSP.js

@@ -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

@@ -0,0 +1,39 @@
+import setToArray from "./util/setToArray.js";
+
+const Definitions = new Set();
+const Failures = new Set();
+let failureTimeout;
+
+const registerTag = tag => {
+	Definitions.add(tag);
+};
+
+const isTagRegistered = tag => {
+	return Definitions.has(tag);
+};
+
+const getAllRegisteredTags = () => {
+	return setToArray(Definitions);
+};
+
+const recordTagRegistrationFailure = tag => {
+	Failures.add(tag);
+	if (!failureTimeout) {
+		failureTimeout = setTimeout(() => {
+			displayFailedRegistrations();
+			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();
+};
+
+export {
+	registerTag,
+	isTagRegistered,
+	getAllRegisteredTags,
+	recordTagRegistrationFailure,
+};

package/src/CustomElementsScope.js

@@ -0,0 +1,108 @@
+let suf;
+let rulesObj = {
+	include: [/^ui5-/],
+	exclude: [],
+};
+const tagsCache = new Map(); // true/false means the tag should/should not be cached, undefined means not known yet.
+
+/**
+ * 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"
+ *
+ * @public
+ * @param suffix The scoping suffix
+ */
+const setCustomElementsScopingSuffix = suffix => {
+	if (!suffix.match(/^[a-zA-Z0-9_-]+$/)) {
+		throw new Error("Only alphanumeric characters and dashes allowed for the scoping suffix");
+	}
+
+	suf = suffix;
+};
+
+/**
+ * Returns the currently set scoping suffix, or undefined if not set.
+ *
+ * @public
+ * @returns {String|undefined}
+ */
+const getCustomElementsScopingSuffix = () => {
+	return suf;
+};
+
+/**
+ * Sets the rules, governing which custom element tags to scope and which not, f.e.
+ * setCustomElementsScopingRules({include: [/^ui5-/]}, exclude: [/^ui5-mylib-/, /^ui5-carousel$/]);
+ * will scope all elements starting with "ui5-" but not the ones starting with "ui5-mylib-" and not "ui5-carousel".
+ *
+ * @public
+ * @param rules Object with "include" and "exclude" properties, both arrays of regular expressions. Note that "include"
+ * rules are applied first and "exclude" rules second.
+ */
+const setCustomElementsScopingRules = rules => {
+	if (!rules || !rules.include) {
+		throw new Error(`"rules" must be an object with at least an "include" property`);
+	}
+
+	if (!Array.isArray(rules.include) || rules.include.some(rule => !(rule instanceof RegExp))) {
+		throw new Error(`"rules.include" must be an array of regular expressions`);
+	}
+
+	if (rules.exclude && (!Array.isArray(rules.exclude) || rules.exclude.some(rule => !(rule instanceof RegExp)))) {
+		throw new Error(`"rules.exclude" must be an array of regular expressions`);
+	}
+
+	rules.exclude = rules.exclude || [];
+	rulesObj = rules;
+	tagsCache.clear(); // reset the cache upon setting new rules
+};
+
+/**
+ * Returns the rules, governing which custom element tags to scope and which not. By default, all elements
+ * starting with "ui5-" are scoped. The default rules are: {include: [/^ui5-/]}.
+ *
+ * @public
+ * @returns {Object}
+ */
+const getCustomElementsScopingRules = () => {
+	return rulesObj;
+};
+
+/**
+ * Determines whether custom elements with the given tag should be scoped or not.
+ * The tag is first matched against the "include" rules and then against the "exclude" rules and the
+ * result is cached until new rules are set.
+ *
+ * @public
+ * @param tag
+ */
+const shouldScopeCustomElement = tag => {
+	if (!tagsCache.has(tag)) {
+		const result = rulesObj.include.some(rule => tag.match(rule)) && !rulesObj.exclude.some(rule => tag.match(rule));
+		tagsCache.set(tag, result);
+	}
+
+	return tagsCache.get(tag);
+};
+
+/**
+ * Returns the currently set scoping suffix, if any and if the tag should be scoped, or undefined otherwise.
+ *
+ * @public
+ * @param tag
+ * @returns {String}
+ */
+const getEffectiveScopingSuffixForTag = tag => {
+	if (shouldScopeCustomElement(tag)) {
+		return getCustomElementsScopingSuffix();
+	}
+};
+
+export {
+	setCustomElementsScopingSuffix,
+	getCustomElementsScopingSuffix,
+	setCustomElementsScopingRules,
+	getCustomElementsScopingRules,
+	shouldScopeCustomElement,
+	getEffectiveScopingSuffixForTag,
+};

package/src/DOMObserver.js

@@ -0,0 +1,65 @@
+const observers = new WeakMap(); // We want just one observer per node, store them here -> DOM nodes are keys
+
+/**
+ * Default implementation with MutationObserver for browsers with native support
+ */
+let _createObserver = (node, callback, options) => {
+	const observer = new MutationObserver(callback);
+	observer.observe(node, options);
+	return observer;
+};
+
+/**
+ * Default implementation with MutationObserver for browsers with native support
+ */
+let _destroyObserver = observer => {
+	observer.disconnect();
+};
+
+/**
+ * Allows to create an alternative DOM observer implementation
+ * @param createFn
+ */
+const setCreateObserverCallback = createFn => {
+	if (typeof createFn === "function") {
+		_createObserver = createFn;
+	}
+};
+
+/**
+ * Allows to create an alternative DOM observer implementation
+ * @param destroyFn
+ */
+const setDestroyObserverCallback = destroyFn => {
+	if (typeof destroyFn === "function") {
+		_destroyObserver = destroyFn;
+	}
+};
+
+/**
+ * @param node
+ * @param callback
+ * @param options
+ */
+const observeDOMNode = (node, callback, options) => {
+	const observer = _createObserver(node, callback, options);
+	observers.set(node, observer);
+};
+
+/**
+ * @param node
+ */
+const unobserveDOMNode = node => {
+	const observer = observers.get(node);
+	if (observer) {
+		_destroyObserver(observer);
+		observers.delete(node);
+	}
+};
+
+export {
+	setCreateObserverCallback,
+	setDestroyObserverCallback,
+	observeDOMNode,
+	unobserveDOMNode,
+};