feat(framework): Create a global shared resources repo, share SVG Icons (#1869)

Author: vladitasev

packages/base/src/SVGIconRegistry.js

@@ -1,5 +1,7 @@
-const registry = new Map();
-const iconCollectionPromises = new Map();
+import getSharedResource from "./getSharedResource.js";
+
+const registry = getSharedResource("SVGIcons.registry", new Map());
+const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
 
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
 const DEFAULT_COLLECTION = "SAP-icons";

packages/base/src/StaticArea.js

@@ -1,16 +1,6 @@
-const getStaticAreaInstance = () => {
-	let staticArea = document.querySelector("ui5-static-area");
+import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
 
-	if (staticArea) {
-		return staticArea;
-	}
-
-	// Create static area if it is not present
-	const bodyElement = document.body;
-	staticArea = document.createElement("ui5-static-area");
-
-	return bodyElement.insertBefore(staticArea, bodyElement.firstChild);
-};
+const getStaticAreaInstance = () => getSingletonElementInstance("ui5-static-area");
 
 const removeStaticArea = () => {
 	getStaticAreaInstance().destroy();

packages/base/src/getSharedResource.js

@@ -0,0 +1,30 @@
+import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
+
+const getSharedResourcesInstance = () => getSingletonElementInstance("ui5-shared-resources", document.head);
+
+/**
+ * Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances.
+ * The data will be accessed via a singleton "ui5-shared-resources" HTML element in the "head" element of the page.
+ *
+ * @public
+ * @param namespace Unique ID of the resource, may contain "." to denote hierarchy
+ * @param initialValue Object or primitive that will be used as an initial value if the resource does not exist
+ * @returns {*}
+ */
+const getSharedResource = (namespace, initialValue) => {
+	const parts = namespace.split(".");
+	let current = getSharedResourcesInstance();
+
+	for (let i = 0; i < parts.length; i++) {
+		const part = parts[i];
+		const lastPart = i === parts.length - 1;
+		if (!Object.prototype.hasOwnProperty.call(current, part)) {
+			current[part] = lastPart ? initialValue : {};
+		}
+		current = current[part];
+	}
+
+	return current;
+};
+
+export default getSharedResource;

packages/base/src/util/getSingletonElementInstance.js

@@ -0,0 +1,13 @@
+const getSingletonElementInstance = (tag, parentElement = document.body) => {
+	let el = document.querySelector(tag);
+
+	if (el) {
+		return el;
+	}
+
+	el = document.createElement(tag);
+
+	return parentElement.insertBefore(el, parentElement.firstChild);
+};
+
+export default getSingletonElementInstance;