@ui5/webcomponents-base 0.31.21 → 0.31.25

package/dist/theming/CustomStyle.js

@@ -1,7 +1,8 @@
 import { reRenderAllUI5Elements } from "../Render.js";
+import getSharedResource from "../getSharedResource.js";
 import EventProvider from "../EventProvider.js";
 
-const eventProvider = new EventProvider();
+const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider());
 const CUSTOM_CSS_CHANGE = "CustomCSSChange";
 
 const attachCustomCSSChange = listener => {
@@ -16,14 +17,33 @@ const fireCustomCSSChange = tag => {
 	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
 };
 
-const customCSSFor = {};
+const customCSSFor = getSharedResource("CustomStyle.customCSSFor", {});
+
+// Listen to the eventProvider, in case other copies of this CustomStyle module fire this
+// event, and this copy would therefore need to reRender the ui5 webcomponents; but
+// don't reRender if it was this copy that fired the event to begin with.
+let skipRerender;
+attachCustomCSSChange(tag => {
+	if (!skipRerender) {
+		reRenderAllUI5Elements({ tag });
+	}
+});
 
 const addCustomCSS = (tag, css) => {
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
 	customCSSFor[tag].push(css);
-	fireCustomCSSChange(tag);
+
+	skipRerender = true;
+	try {
+		// The event is fired and the attached event listeners are all called synchronously
+		// The skipRerender flag will be used to avoid calling reRenderAllUI5Elements twice when it is this copy
+		// of CustomStyle.js which is firing the `CustomCSSChange` event.
+		fireCustomCSSChange(tag);
+	} finally {
+		skipRerender = false;
+	}
 
 	return reRenderAllUI5Elements({ tag });
 };

package/dist/util/encodeXML.js

@@ -0,0 +1,35 @@
+const fnToHex = (iChar, iLength) => {
+	let sHex = iChar.toString(16);
+	if (iLength) {
+		sHex = sHex.padStart(iLength, "0");
+	}
+	return sHex;
+};
+
+const rHtml = /[\x00-\x2b\x2f\x3a-\x40\x5b-\x5e\x60\x7b-\xff\u2028\u2029]/g, // eslint-disable-line no-control-regex
+	rHtmlReplace = /[\x00-\x08\x0b\x0c\x0e-\x1f\x7f-\x9f]/, // eslint-disable-line no-control-regex
+	mHtmlLookup = {
+		"<": "&lt;",
+		">": "&gt;",
+		"&": "&amp;",
+		"\"": "&quot;",
+	};
+
+const fnHtml = sChar => {
+	let sEncoded = mHtmlLookup[sChar];
+	if (!sEncoded) {
+		if (rHtmlReplace.test(sChar)) {
+			sEncoded = "&#xfffd;";
+		} else {
+			sEncoded = `&#x${fnToHex(sChar.charCodeAt(0))};`;
+		}
+		mHtmlLookup[sChar] = sEncoded;
+	}
+	return sEncoded;
+};
+
+const fnEncodeXML = sString => {
+	return sString.replace(rHtml, fnHtml);
+};
+
+export default fnEncodeXML;

package/dist/util/escapeRegex.js

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

@@ -0,0 +1,42 @@
+import escapeRegex from "./escapeRegex.js";
+import encodeXML from "./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/hash.txt

@@ -0,0 +1 @@
+iI/oElKbZhsMENntu1dXYTFaBg0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.31.21",
+  "version": "0.31.25",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -27,9 +27,9 @@
     "lit-html": "^1.0.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.31.21",
+    "@ui5/webcomponents-tools": "0.31.25",
     "array-uniq": "^2.0.0",
-    "chromedriver": "88.0.0",
+    "chromedriver": "96.0.0",
     "copy-and-watch": "^0.1.4",
     "eslint": "^5.13.0",
     "eslint-config-airbnb-base": "^13.1.0",

package/src/i18nBundle.js

@@ -39,7 +39,6 @@ const getI18nBundle = packageName => {
 	if (I18nBundleInstances.has(packageName)) {
 		return I18nBundleInstances.get(packageName);
 	}
-
 	const i18nBundle = new I18nBundle(packageName);
 	I18nBundleInstances.set(packageName, i18nBundle);
 	return i18nBundle;

package/src/theming/CustomStyle.js

@@ -1,7 +1,8 @@
 import { reRenderAllUI5Elements } from "../Render.js";
+import getSharedResource from "../getSharedResource.js";
 import EventProvider from "../EventProvider.js";
 
-const eventProvider = new EventProvider();
+const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider());
 const CUSTOM_CSS_CHANGE = "CustomCSSChange";
 
 const attachCustomCSSChange = listener => {
@@ -16,14 +17,33 @@ const fireCustomCSSChange = tag => {
 	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
 };
 
-const customCSSFor = {};
+const customCSSFor = getSharedResource("CustomStyle.customCSSFor", {});
+
+// Listen to the eventProvider, in case other copies of this CustomStyle module fire this
+// event, and this copy would therefore need to reRender the ui5 webcomponents; but
+// don't reRender if it was this copy that fired the event to begin with.
+let skipRerender;
+attachCustomCSSChange(tag => {
+	if (!skipRerender) {
+		reRenderAllUI5Elements({ tag });
+	}
+});
 
 const addCustomCSS = (tag, css) => {
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
 	customCSSFor[tag].push(css);
-	fireCustomCSSChange(tag);
+
+	skipRerender = true;
+	try {
+		// The event is fired and the attached event listeners are all called synchronously
+		// The skipRerender flag will be used to avoid calling reRenderAllUI5Elements twice when it is this copy
+		// of CustomStyle.js which is firing the `CustomCSSChange` event.
+		fireCustomCSSChange(tag);
+	} finally {
+		skipRerender = false;
+	}
 
 	return reRenderAllUI5Elements({ tag });
 };

package/src/util/encodeXML.js

@@ -0,0 +1,35 @@
+const fnToHex = (iChar, iLength) => {
+	let sHex = iChar.toString(16);
+	if (iLength) {
+		sHex = sHex.padStart(iLength, "0");
+	}
+	return sHex;
+};
+
+const rHtml = /[\x00-\x2b\x2f\x3a-\x40\x5b-\x5e\x60\x7b-\xff\u2028\u2029]/g, // eslint-disable-line no-control-regex
+	rHtmlReplace = /[\x00-\x08\x0b\x0c\x0e-\x1f\x7f-\x9f]/, // eslint-disable-line no-control-regex
+	mHtmlLookup = {
+		"<": "&lt;",
+		">": "&gt;",
+		"&": "&amp;",
+		"\"": "&quot;",
+	};
+
+const fnHtml = sChar => {
+	let sEncoded = mHtmlLookup[sChar];
+	if (!sEncoded) {
+		if (rHtmlReplace.test(sChar)) {
+			sEncoded = "&#xfffd;";
+		} else {
+			sEncoded = `&#x${fnToHex(sChar.charCodeAt(0))};`;
+		}
+		mHtmlLookup[sChar] = sEncoded;
+	}
+	return sEncoded;
+};
+
+const fnEncodeXML = sString => {
+	return sString.replace(rHtml, fnHtml);
+};
+
+export default fnEncodeXML;

package/src/util/escapeRegex.js

@@ -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/src/util/generateHighlightedMarkup.js

@@ -0,0 +1,42 @@
+import escapeRegex from "./escapeRegex.js";
+import encodeXML from "./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;