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

package/src/UI5ElementMetadata.js

@@ -1,6 +1,8 @@
 import DataType from "./types/DataType.js";
 import isDescendantOf from "./util/isDescendantOf.js";
 import { camelToKebabCase } from "./util/StringHelper.js";
+import { getSlottedElements } from "./util/SlotsHelper.js";
+import { getEffectiveScopingSuffixForTag } from "./CustomElementsScope.js";
 
 /**
  *
@@ -12,6 +14,50 @@ class UI5ElementMetadata {
 		this.metadata = metadata;
 	}
 
+	getInitialState() {
+		if (Object.prototype.hasOwnProperty.call(this, "_initialState")) {
+			return this._initialState;
+		}
+
+		const initialState = {};
+		const slotsAreManaged = this.slotsAreManaged();
+
+		// Initialize properties
+		const props = this.getProperties();
+		for (const propName in props) { // eslint-disable-line
+			const propType = props[propName].type;
+			const propDefaultValue = props[propName].defaultValue;
+
+			if (propType === Boolean) {
+				initialState[propName] = false;
+
+				if (propDefaultValue !== undefined) {
+					console.warn("The 'defaultValue' metadata key is ignored for all booleans properties, they would be initialized with 'false' by default"); // eslint-disable-line
+				}
+			} else if (props[propName].multiple) {
+				initialState[propName] = [];
+			} else if (propType === Object) {
+				initialState[propName] = "defaultValue" in props[propName] ? props[propName].defaultValue : {};
+			} else if (propType === String) {
+				initialState[propName] = "defaultValue" in props[propName] ? props[propName].defaultValue : "";
+			} else {
+				initialState[propName] = propDefaultValue;
+			}
+		}
+
+		// Initialize slots
+		if (slotsAreManaged) {
+			const slots = this.getSlots();
+			for (const [slotName, slotData] of Object.entries(slots)) { // eslint-disable-line
+				const propertyName = slotData.propertyName || slotName;
+				initialState[propertyName] = [];
+			}
+		}
+
+		this._initialState = initialState;
+		return initialState;
+	}
+
 	/**
 	 * Only intended for use by UI5Element.js
 	 * @protected
@@ -32,12 +78,44 @@ class UI5ElementMetadata {
 		return validateSingleSlot(value, slotData);
 	}
 
+	/**
+	 * Returns the tag of the UI5 Element without the scope
+	 * @public
+	 */
+	getPureTag() {
+		return this.metadata.tag;
+	}
+
 	/**
 	 * Returns the tag of the UI5 Element
 	 * @public
 	 */
 	getTag() {
-		return this.metadata.tag;
+		const pureTag = this.metadata.tag;
+		const suffix = getEffectiveScopingSuffixForTag(pureTag);
+		if (!suffix) {
+			return pureTag;
+		}
+
+		return `${pureTag}-${suffix}`;
+	}
+
+	/**
+	 * Used to get the tag we need to register for backwards compatibility
+	 * @public
+	 */
+	getAltTag() {
+		const pureAltTag = this.metadata.altTag;
+		if (!pureAltTag) {
+			return;
+		}
+
+		const suffix = getEffectiveScopingSuffixForTag(pureAltTag);
+		if (!suffix) {
+			return pureAltTag;
+		}
+
+		return `${pureAltTag}-${suffix}`;
 	}
 
 	/**
@@ -48,7 +126,7 @@ class UI5ElementMetadata {
 	 */
 	hasAttribute(propName) {
 		const propData = this.getProperties()[propName];
-		return propData.type !== Object && !propData.noAttribute;
+		return propData.type !== Object && !propData.noAttribute && !propData.multiple;
 	}
 
 	/**
@@ -77,6 +155,15 @@ class UI5ElementMetadata {
 		return this.metadata.slots || {};
 	}
 
+	/**
+	 * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text
+	 * @returns {boolean}
+	 */
+	canSlotText() {
+		const defaultSlot = this.getSlots().default;
+		return defaultSlot && defaultSlot.type === Node;
+	}
+
 	/**
 	 * Determines whether this UI5 Element supports any slots
 	 * @public
@@ -85,6 +172,22 @@ class UI5ElementMetadata {
 		return !!Object.entries(this.getSlots()).length;
 	}
 
+	/**
+	 * Determines whether this UI5 Element supports any slots with "individualSlots: true"
+	 * @public
+	 */
+	hasIndividualSlots() {
+		return this.slotsAreManaged() && Object.entries(this.getSlots()).some(([_slotName, slotData]) => slotData.individualSlots);
+	}
+
+	/**
+	 * Determines whether this UI5 Element needs to invalidate if children are added/removed/changed
+	 * @public
+	 */
+	slotsAreManaged() {
+		return !!this.metadata.managedSlots;
+	}
+
 	/**
 	 * Returns an object with key-value pairs of properties and their metadata definitions
 	 * @public
@@ -100,6 +203,90 @@ class UI5ElementMetadata {
 	getEvents() {
 		return this.metadata.events || {};
 	}
+
+	/**
+	 * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change)
+	 * @returns {boolean}
+	 */
+	isLanguageAware() {
+		return !!this.metadata.languageAware;
+	}
+
+	/**
+	 * Determines whether this UI5 Element has any theme dependant carachteristics.
+	 * @returns {boolean}
+	 */
+	 isThemeAware() {
+		return !!this.metadata.themeAware;
+	}
+
+	/**
+	 * Matches a changed entity (property/slot) with the given name against the "invalidateOnChildChange" configuration
+	 * and determines whether this should cause and invalidation
+	 *
+	 * @param slotName the name of the slot in which a child was changed
+	 * @param type the type of change in the child: "property" or "slot"
+	 * @param name the name of the property/slot that changed
+	 * @returns {boolean}
+	 */
+	shouldInvalidateOnChildChange(slotName, type, name) {
+		const config = this.getSlots()[slotName].invalidateOnChildChange;
+
+		// invalidateOnChildChange was not set in the slot metadata - by default child changes do not affect the component
+		if (config === undefined) {
+			return false;
+		}
+
+		// The simple format was used: invalidateOnChildChange: true/false;
+		if (typeof config === "boolean") {
+			return config;
+		}
+
+		// The complex format was used: invalidateOnChildChange: { properties, slots }
+		if (typeof config === "object") {
+			// A property was changed
+			if (type === "property") {
+				// The config object does not have a properties field
+				if (config.properties === undefined) {
+					return false;
+				}
+
+				// The config object has the short format: properties: true/false
+				if (typeof config.properties === "boolean") {
+					return config.properties;
+				}
+
+				// The config object has the complex format: properties: [...]
+				if (Array.isArray(config.properties)) {
+					return config.properties.includes(name);
+				}
+
+				throw new Error("Wrong format for invalidateOnChildChange.properties: boolean or array is expected");
+			}
+
+			// A slot was changed
+			if (type === "slot") {
+				// The config object does not have a slots field
+				if (config.slots === undefined) {
+					return false;
+				}
+
+				// The config object has the short format: slots: true/false
+				if (typeof config.slots === "boolean") {
+					return config.slots;
+				}
+
+				// The config object has the complex format: slots: [...]
+				if (Array.isArray(config.slots)) {
+					return config.slots.includes(name);
+				}
+
+				throw new Error("Wrong format for invalidateOnChildChange.slots: boolean or array is expected");
+			}
+		}
+
+		throw new Error("Wrong format for invalidateOnChildChange: boolean or object is expected");
+	}
 }
 
 const validateSingleProperty = (value, propData) => {
@@ -120,23 +307,7 @@ const validateSingleProperty = (value, propData) => {
 };
 
 const validateSingleSlot = (value, slotData) => {
-	if (value === null) {
-		return value;
-	}
-
-	const getSlottedNodes = el => {
-		const isTag = el instanceof HTMLElement;
-		const isSlot = isTag && el.localName === "slot";
-
-		if (isSlot) {
-			return el.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement);
-		}
-
-		return [el];
-	};
-
-	const slottedNodes = getSlottedNodes(value);
-	slottedNodes.forEach(el => {
+	value && getSlottedElements(value).forEach(el => {
 		if (!(el instanceof slotData.type)) {
 			throw new Error(`${el} is not of type ${slotData.type}`);
 		}

package/src/asset-registries/Icons.js

@@ -1,24 +1,139 @@
-import { registerIcon, registerCollectionPromise } from "../SVGIconRegistry.js";
-import { fetchJsonOnce } from "../util/FetchHelper.js";
+import getSharedResource from "../getSharedResource.js";
+import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
+import { isTheme } from "../config/Theme.js";
 
+const loaders = new Map();
+const registry = getSharedResource("SVGIcons.registry", new Map());
+const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
+
+const ICON_NOT_FOUND = "ICON_NOT_FOUND";
+
+/**
+ * @deprecated
+ */
 const registerIconBundle = async (collectionName, bundleData) => {
-	let resolveFn;
-	const collectionFetched = new Promise(resolve => {
-		resolveFn = resolve;
-	});
-	registerCollectionPromise(collectionName, collectionFetched);
+	throw new Error("This method has been removed. Use `registerIconLoader` instead.");
+};
+
+const registerIconLoader = async (collectionName, loader) => {
+	loaders.set(collectionName, loader);
+};
 
-	if (typeof bundleData !== "object") { // not inlined from build -> fetch it
-		bundleData = await fetchJsonOnce(bundleData);
+const _loadIconCollectionOnce = async collectionName => {
+	if (!iconCollectionPromises.has(collectionName)) {
+		if (!loaders.has(collectionName)) {
+			throw new Error(`No loader registered for the ${collectionName} icons collection. Probably you forgot to import the "AllIcons.js" module for the respective package.`);
+		}
+		const loadIcons = loaders.get(collectionName);
+		iconCollectionPromises.set(collectionName, loadIcons(collectionName));
 	}
-	fillRegistry(bundleData);
-	resolveFn();
+
+	return iconCollectionPromises.get(collectionName);
 };
 
-const fillRegistry = bundleData => {
+const _fillRegistry = bundleData => {
 	Object.keys(bundleData.data).forEach(iconName => {
-		registerIcon(iconName, { pathData: bundleData.data[iconName], accData: bundleData.accData[iconName], collection: bundleData.collection });
+		const iconData = bundleData.data[iconName];
+
+		registerIcon(iconName, {
+			pathData: iconData.path,
+			ltr: iconData.ltr,
+			accData: iconData.acc,
+			collection: bundleData.collection,
+			packageName: bundleData.packageName,
+		 });
 	});
 };
 
-export { registerIconBundle }; // eslint-disable-line
+// set
+const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
+	if (!collection) {
+		collection = _getDefaultCollection();
+	}
+
+	const key = `${collection}/${name}`;
+	registry.set(key, {
+		pathData,
+		ltr,
+		accData,
+		packageName,
+	});
+};
+
+const _parseName = name => {
+	// silently support ui5-compatible URIs
+	if (name.startsWith("sap-icon://")) {
+		name = name.replace("sap-icon://", "");
+	}
+
+	let collection;
+	[name, collection] = name.split("/").reverse();
+	collection = collection || _getDefaultCollection();
+
+	// Normalize collection name.
+	// - resolve `SAP-icons-TNT` to `tnt`.
+	// - resolve `BusinessSuiteInAppSymbols` to `business-suite`.
+	// - resolve `horizon` to `SAP-icons-v5`,
+	// Note: aliases can be made as a feature, if more collections need it or more aliases are needed.
+	collection = _normalizeCollection(collection);
+	name = name.replace("icon-", "");
+
+	const registryKey = `${collection}/${name}`;
+	return { name, collection, registryKey };
+};
+
+const getIconDataSync = nameProp => {
+	const { registryKey } = _parseName(nameProp);
+	return registry.get(registryKey);
+};
+
+const getIconData = async nameProp => {
+	const { collection, registryKey } = _parseName(nameProp);
+
+	let iconData = ICON_NOT_FOUND;
+	try {
+		iconData = await _loadIconCollectionOnce(collection);
+	} catch (e) {
+		console.error(e.message); /* eslint-disable-line */
+	}
+
+	if (iconData === ICON_NOT_FOUND) {
+		return iconData;
+	}
+
+	if (!registry.has(registryKey)) {
+		// not filled by another await. many getters will await on the same loader, but fill only once
+		_fillRegistry(iconData);
+	}
+	return registry.get(registryKey);
+};
+
+// test page usage only
+const _getRegisteredNames = async () => {
+	// fetch one icon of each collection to trigger the bundle load
+	await getIconData("edit");
+	await getIconData("tnt/arrow");
+	await getIconData("business-suite/3d");
+	return Array.from(registry.keys());
+};
+
+const _getDefaultCollection = () => {
+	return isTheme("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
+};
+
+const _normalizeCollection = collectionName => {
+	if (IconCollectionsAlias[collectionName]) {
+		return IconCollectionsAlias[collectionName];
+	}
+
+	return collectionName;
+};
+
+export {
+	registerIconBundle,
+	registerIconLoader,
+	getIconData,
+	getIconDataSync,
+	registerIcon,
+	_getRegisteredNames,
+};

package/src/asset-registries/Illustrations.js

@@ -0,0 +1,30 @@
+import getSharedResource from "../getSharedResource.js";
+
+const registry = getSharedResource("SVGIllustration.registry", new Map());
+const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
+
+const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title, subtitle } = {}) => { // eslint-disable-line
+	registry.set(`${set}/${name}`, {
+		dialogSvg,
+		sceneSvg,
+		spotSvg,
+		title,
+		subtitle,
+	});
+};
+
+const getIllustrationDataSync = nameProp => {
+	let set = "fiori";
+
+	if (nameProp.startsWith("Tnt")) {
+		set = "tnt";
+		nameProp = nameProp.replace(/^Tnt/, "");
+	}
+
+	return registry.get(`${set}/${nameProp}`) || ILLUSTRATION_NOT_FOUND;
+};
+
+export {
+	getIllustrationDataSync,
+	registerIllustration,
+};

package/src/asset-registries/LocaleData.js

@@ -1,14 +1,13 @@
-import { registerModuleContent } from "../ResourceLoaderOverrides.js";
-import { fetchJsonOnce } from "../util/FetchHelper.js";
+import { attachLanguageChange } from "../locale/languageChange.js";
+import getLocale from "../locale/getLocale.js";
+import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "../generated/AssetParameters.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
-const supportedLocales = ["ar", "ar_EG", "ar_SA", "bg", "ca", "cs", "da", "de", "de_AT", "de_CH", "el", "el_CY", "en", "en_AU", "en_GB", "en_HK", "en_IE", "en_IN", "en_NZ", "en_PG", "en_SG", "en_ZA", "es", "es_AR", "es_BO", "es_CL", "es_CO", "es_MX", "es_PE", "es_UY", "es_VE", "et", "fa", "fi", "fr", "fr_BE", "fr_CA", "fr_CH", "fr_LU", "he", "hi", "hr", "hu", "id", "it", "it_CH", "ja", "kk", "ko", "lt", "lv", "ms", "nb", "nl", "nl_BE", "pl", "pt", "pt_PT", "ro", "ru", "ru_UA", "sk", "sl", "sr", "sv", "th", "tr", "uk", "vi", "zh_CN", "zh_HK", "zh_SG", "zh_TW"];
-
-const cldrData = {};
-const cldrUrls = {};
-
-// externally configurable mapping function for resolving (localeId -> URL)
-// default implementation - ui5 CDN
-let cldrMappingFn = locale => `https://ui5.sap.com/1.60.2/resources/sap/ui/core/cldr/${locale}.json`;
+const localeDataMap = new Map();
+const loaders = new Map();
+const cldrPromises = new Map();
+const reportedErrors = new Set();
+let warningShown = false;
 
 const M_ISO639_OLD_TO_NEW = {
 	"iw": "he",
@@ -17,6 +16,22 @@ const M_ISO639_OLD_TO_NEW = {
 	"sh": "sr",
 };
 
+const DEV_MODE = false;
+
+const _showAssetsWarningOnce = localeId => {
+	if (warningShown) {
+		return;
+	}
+
+	if (!DEV_MODE) {
+		console.warn(`[LocaleData] Supported locale "${localeId}" not configured, import the "Assets.js" module from the webcomponents package you are using.`); /* eslint-disable-line */
+	} else {
+		console.warn(`[LocaleData] Note: in dev mode, CLDR assets might be disabled for performance reasons. Try running "ENABLE_CLDR=1 yarn start" to test CLDR assets.`); /* eslint-disable-line */
+	}
+
+	warningShown = true;
+};
+
 const calcLocale = (language, region, script) => {
 	// normalize language and handle special cases
 	language = (language && M_ISO639_OLD_TO_NEW[language]) || language;
@@ -35,67 +50,110 @@ const calcLocale = (language, region, script) => {
 
 	// try language + region
 	let localeId = `${language}_${region}`;
-	if (!supportedLocales.includes(localeId)) {
-		// fallback to language only
-		localeId = language;
+	if (SUPPORTED_LOCALES.includes(localeId)) {
+		if (loaders.has(localeId)) {
+			// supported and has loader
+			return localeId;
+		}
+
+		// supported, no loader - fallback to default and warn
+		_showAssetsWarningOnce(localeId);
+		return DEFAULT_LOCALE;
 	}
-	if (!supportedLocales.includes(localeId)) {
-		// fallback to english
-		localeId = "en";
+
+	// not supported, try language only
+	localeId = language;
+	if (SUPPORTED_LOCALES.includes(localeId)) {
+		if (loaders.has(localeId)) {
+			// supported and has loader
+			return localeId;
+		}
+
+		// supported, no loader - fallback to default and warn
+		_showAssetsWarningOnce(localeId);
+		return DEFAULT_LOCALE;
 	}
 
-	return localeId;
+	// not supported - fallback to default locale
+	return DEFAULT_LOCALE;
 };
 
+// internal set data
+const setLocaleData = (localeId, content) => {
+	localeDataMap.set(localeId, content);
+};
 
-const resolveMissingMappings = () => {
-	if (!cldrMappingFn) {
-		return;
+// external getSync
+const getLocaleData = localeId => {
+	// if there is no loader, the default fallback was fetched and a warning was given - use default locale instead
+	if (!loaders.has(localeId)) {
+		localeId = DEFAULT_LOCALE;
+	}
+
+	const content = localeDataMap.get(localeId);
+	if (!content) {
+		throw new Error(`CLDR data for locale ${localeId} is not loaded!`);
+	}
+
+	return content;
+};
+
+// load bundle over the network once
+const _loadCldrOnce = localeId => {
+	const loadCldr = loaders.get(localeId);
+
+	if (!cldrPromises.get(localeId)) {
+		cldrPromises.set(localeId, loadCldr(localeId));
 	}
 
-	const missingLocales = supportedLocales.filter(locale => !cldrData[locale] && !cldrUrls[locale]);
-	missingLocales.forEach(locale => {
-		cldrUrls[locale] = cldrMappingFn(locale);
-	});
+	return cldrPromises.get(localeId);
 };
 
+// external getAsync
 const fetchCldr = async (language, region, script) => {
-	resolveMissingMappings();
 	const localeId = calcLocale(language, region, script);
 
-	const cldrObj = cldrData[localeId];
-	const url = cldrUrls[localeId];
-
-	if (cldrObj) {
-		// inlined from build or fetched independently
-		registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrObj);
-	} else if (url) {
-		// fetch it
-		const cldrContent = await fetchJsonOnce(url);
-		registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrContent);
+	// reuse OpenUI5 CLDR if present
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support) {
+		const cldrContent = OpenUI5Support.getLocaleDataObject();
+		if (cldrContent) {
+			// only if openui5 actually returned valid content
+			setLocaleData(localeId, cldrContent);
+			return;
+		}
 	}
-};
 
-const registerCldr = (locale, url) => {
-	cldrUrls[locale] = url;
+	// fetch it
+	try {
+		const cldrContent = await _loadCldrOnce(localeId);
+		setLocaleData(localeId, cldrContent);
+	} catch (e) {
+		if (!reportedErrors.has(e.message)) {
+			reportedErrors.add(e.message);
+			console.error(e.message); /* eslint-disable-line */
+		}
+	}
 };
 
-const setCldrData = (locale, data) => {
-	cldrData[locale] = data;
+const registerLocaleDataLoader = (localeId, loader) => {
+	loaders.set(localeId, loader);
 };
 
-const getCldrData = locale => {
-	return cldrData[locale];
-};
+// register default loader for "en" from ui5 CDN (dev workflow without assets)
+registerLocaleDataLoader("en", async runtimeLocaleId => {
+	return (await fetch(`https://ui5.sap.com/1.60.2/resources/sap/ui/core/cldr/en.json`)).json();
+});
 
-const _registerMappingFunction = mappingFn => {
-	cldrMappingFn = mappingFn;
-};
+// When the language changes dynamically (the user calls setLanguage),
+// re-fetch the required CDRD data.
+attachLanguageChange(() => {
+	const locale = getLocale();
+	return fetchCldr(locale.getLanguage(), locale.getRegion(), locale.getScript());
+});
 
 export {
+	registerLocaleDataLoader,
 	fetchCldr,
-	registerCldr,
-	setCldrData,
-	getCldrData,
-	_registerMappingFunction,
+	getLocaleData,
 };