@ui5/webcomponents-base 0.0.0-306572ffa → 0.0.0-35e2c9666

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

@@ -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/master/docs/2-advanced/03-scoping.md.`;
+
+	console.warn(message); // eslint-disable-line
 };
 
 export {

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,
+};