feat: add dynamic imports for .json assets

packages/base/bundle.esm.js

@@ -1,4 +1,4 @@
-import { registerThemeProperties } from "./dist/AssetRegistry.js";
+import { registerThemePropertiesLoader } from "./dist/AssetRegistry.js";
 
 // ESM bundle targets browsers with native support
 import "./dist/features/OpenUI5Support.js";
@@ -20,11 +20,10 @@ import { isIE } from "./dist/Device.js";
 window.isIE = isIE; // attached to the window object for testing purposes
 
 // used for tests - to register a custom theme
-window.registerThemeProperties = registerThemeProperties;
+window.registerThemePropertiesLoader = registerThemePropertiesLoader;
 
 // i18n
-import "./dist/features/PropertiesFormatSupport.js";
-import { registerI18nBundle, fetchI18nBundle, getI18nBundle } from "./dist/i18nBundle.js";
+import { registerI18nLoader, fetchI18nBundle, getI18nBundle } from "./dist/i18nBundle.js";
 
 // Note: keep in sync with rollup.config value for IIFE
 import { getAnimationMode } from "./dist/config/AnimationMode.js";
@@ -48,7 +47,7 @@ window["sap-ui-webcomponents-bundle"] = {
 		getFirstDayOfWeek,
 	},
 	getIconNames,
-	registerI18nBundle,
+	registerI18nLoader,
 	fetchI18nBundle,
 	getI18nBundle,
 	renderFinished,

packages/base/src/AssetRegistry.js

@@ -1,12 +1,11 @@
-import { registerI18nBundle } from "./asset-registries/i18n.js";
-import { registerCldr, _registerMappingFunction as registerCldrMappingFunction } from "./asset-registries/LocaleData.js";
-import { registerThemeProperties } from "./asset-registries/Themes.js";
-import { registerAssetPathMappingFunction } from "./util/EffectiveAssetPath.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,
-	registerCldrMappingFunction,
-	registerThemeProperties,
-	registerI18nBundle,
-	registerAssetPathMappingFunction,
+	registerI18nLoader,
+	registerLocaleDataLoader,
+	registerThemePropertiesLoader,
+	registerIconLoader,
 };

packages/base/src/util/parseProperties.js → packages/base/src/PropertiesFileFormat.js

@@ -15,6 +15,12 @@ const mEscapes = {
 	"\\t": "\t",
 };
 
+/**
+ * Parses a .properties format
+ * @param {string} sText the contents a of a .properties file
+ * @returns a object with key/value pairs parsed from the .properties file format
+ * @public
+ */
 const parseProperties = sText => {
 	const properties = {},
 		aLines = sText.split(rLines);

packages/base/src/asset-registries/Icons.js

@@ -1,19 +1,26 @@
 import { registerIcon, registerCollectionPromise } from "../SVGIconRegistry.js";
-import { fetchJsonOnce } from "../util/FetchHelper.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
 
+/**
+ * @deprecated
+ */
 const registerIconBundle = async (collectionName, bundleData) => {
+	throw new Error("This method has been removed. Use `registerIconLoader` instead.");
+};
+
+const registerIconLoader = async (collectionName, loader) => {
 	let resolveFn;
 	const collectionFetched = new Promise(resolve => {
 		resolveFn = resolve;
 	});
 	registerCollectionPromise(collectionName, collectionFetched);
 
-	if (typeof bundleData !== "object") { // not inlined from build -> fetch it
-		bundleData = await fetchJsonOnce(getEffectiveAssetPath(bundleData));
+	try {
+		const iconData = await loader();
+		fillRegistry(iconData);
+		resolveFn();
+	} catch (e) {
+		console.error(e.message); /* eslint-disable-line */
 	}
-	fillRegistry(bundleData);
-	resolveFn();
 };
 
 const fillRegistry = bundleData => {
@@ -29,4 +36,4 @@ const fillRegistry = bundleData => {
 	});
 };
 
-export { registerIconBundle }; // eslint-disable-line
+export { registerIconBundle, registerIconLoader }; // eslint-disable-line

packages/base/src/asset-registries/LocaleData.js

@@ -1,17 +1,12 @@
-import { fetchJsonOnce } from "../util/FetchHelper.js";
 import { attachLanguageChange } from "../locale/languageChange.js";
 import getLocale from "../locale/getLocale.js";
-import { getFeature } from "../FeaturesRegistry.js";
 import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "../generated/AssetParameters.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
-
-const resources = new Map();
-const cldrData = {};
-const cldrUrls = {};
+import { getFeature } from "../FeaturesRegistry.js";
 
-// 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();
 
 const M_ISO639_OLD_TO_NEW = {
 	"iw": "he",
@@ -50,73 +45,67 @@ const calcLocale = (language, region, script) => {
 	return localeId;
 };
 
+// internal set data
+const setLocaleData = (localeId, content) => {
+	localeDataMap.set(localeId, content);
+};
 
-const resolveMissingMappings = () => {
-	if (!cldrMappingFn) {
-		return;
+// external getSync
+const getLocaleData = localeId => {
+	const content = localeDataMap.get(localeId);
+	if (!content) {
+		throw new Error(`CLDR data for locale ${localeId} is not loaded!`);
 	}
 
-	const missingLocales = SUPPORTED_LOCALES.filter(locale => !cldrData[locale] && !cldrUrls[locale]);
-	missingLocales.forEach(locale => {
-		cldrUrls[locale] = cldrMappingFn(locale);
-	});
+	return content;
 };
 
-const registerModuleContent = (moduleName, content) => {
-	resources.set(moduleName, content);
-};
-
-const getModuleContent = moduleName => {
-	const moduleContent = resources.get(moduleName);
-	if (moduleContent) {
-		return moduleContent;
-	}
+// load bundle over the network once
+const _loadCldrOnce = localeId => {
+	const loadCldr = loaders.get(localeId);
 
-	const missingModule = moduleName.match(/sap\/ui\/core\/cldr\/(\w+)\.json/);
-	if (missingModule) {
-		throw new Error(`CLDR data for locale ${missingModule[1]} is not loaded!`);
+	if (!cldrPromises.get(localeId)) {
+		cldrPromises.set(localeId, loadCldr(localeId));
 	}
 
-	throw new Error(`Unknown module ${moduleName}`);
+	return cldrPromises.get(localeId);
 };
 
+// external getAsync
 const fetchCldr = async (language, region, script) => {
-	resolveMissingMappings();
 	const localeId = calcLocale(language, region, script);
 
-	let cldrObj = cldrData[localeId];
-	const url = cldrUrls[localeId];
-
+	// reuse OpenUI5 CLDR if present
 	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (!cldrObj && OpenUI5Support) {
-		cldrObj = OpenUI5Support.getLocaleDataObject();
+	if (OpenUI5Support) {
+		const cldrContent = OpenUI5Support.getLocaleDataObject();
+		if (cldrContent) {
+			// only if openui5 actually returned valid content
+			setLocaleData(localeId, cldrContent);
+			return;
+		}
 	}
 
-	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(getEffectiveAssetPath(url));
-		registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrContent);
+	// 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 registerCldr = (locale, url) => {
-	cldrUrls[locale] = url;
-};
-
-const setCldrData = (locale, data) => {
-	cldrData[locale] = data;
+const registerLocaleDataLoader = (localeId, loader) => {
+	loaders.set(localeId, loader);
 };
 
-const getCldrData = locale => {
-	return cldrData[locale];
-};
-
-const _registerMappingFunction = mappingFn => {
-	cldrMappingFn = mappingFn;
-};
+// 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();
+});
 
 // When the language changes dynamically (the user calls setLanguage),
 // re-fetch the required CDRD data.
@@ -126,10 +115,7 @@ attachLanguageChange(() => {
 });
 
 export {
+	registerLocaleDataLoader,
 	fetchCldr,
-	registerCldr,
-	setCldrData,
-	getCldrData,
-	getModuleContent,
-	_registerMappingFunction,
+	getLocaleData,
 };

packages/base/src/asset-registries/Themes.js

@@ -1,10 +1,7 @@
-import { fetchJsonOnce, fetchTextOnce } from "../util/FetchHelper.js";
 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
-import getFileExtension from "../util/getFileExtension.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
 
-const themeURLs = new Map();
 const themeStyles = new Map();
+const loaders = new Map();
 const registeredPackages = new Set();
 const registeredThemes = new Set();
 
@@ -16,29 +13,19 @@ const registeredThemes = new Set();
  * Example usage:
  *  1) Pass the CSS Vars as a string directly.
  *  registerThemeProperties("my-package", "my_theme", ":root{--var1: red;}");
- *  2) Pass the CSS Vars as an object directly
- *  registerThemeProperties("my-package", "my_theme", {"_": ":root{--var1: red;}"});
- *  3) Pass a URL to a CSS file, containing the CSS Vars. Will be fetched on demand, not upon registration.
- *  registerThemeProperties("my-package", "my_theme", "http://url/to/my/theme.css");
- *  4) Pass a URL to a JSON file, containing the CSS Vars in its "_" property. Will be fetched on demand, not upon registration.
- *  registerThemeProperties("my-package", "my_theme", "http://url/to/my/theme.json");
  *
  * @public
  * @param packageName - the NPM package for which CSS Vars are registered
  * @param themeName - the theme which the CSS Vars implement
- * @param style - can be one of four options: a string, an object with a "_" property, URL to a CSS file, or URL to a JSON file with a "_" property
+ * @param style - the style content directly
+ * @deprecated
  */
-const registerThemeProperties = (packageName, themeName, style) => {
-	if (style._) {
-		// JSON object like ({"_": ":root"})
-		themeStyles.set(`${packageName}_${themeName}`, style._);
-	} else if (style.includes(":root") || style === "") {
-		// pure string, including empty string
-		themeStyles.set(`${packageName}_${themeName}`, style);
-	} else {
-		// url for fetching
-		themeURLs.set(`${packageName}_${themeName}`, style);
-	}
+const registerThemeProperties = (_packageName, _themeName, _style) => {
+	throw new Error("`registerThemeProperties` has been depracated. Use `registerThemePropertiesLoader` instead.");
+};
+
+const registerThemePropertiesLoader = (packageName, themeName, loader) => {
+	loaders.set(`${packageName}/${themeName}`, loader);
 	registeredPackages.add(packageName);
 	registeredThemes.add(themeName);
 };
@@ -55,23 +42,25 @@ const getThemeProperties = async (packageName, themeName) => {
 		return themeStyles.get(`${packageName}_${DEFAULT_THEME}`);
 	}
 
-	const data = await fetchThemeProperties(packageName, themeName);
+	const loader = loaders.get(`${packageName}/${themeName}`);
+	if (!loader) {
+		// no themes for package
+		console.error(`Theme [${themeName}] not registered for package [${pacakgeName}]`); /* eslint-disable-line */
+		return;
+	}
+	let data;
+	try {
+		data = await loader(themeName);
+	} catch (e) {
+		console.error(packageName, e.message); /* eslint-disable-line */
+		return;
+	}
 	const themeProps = data._ || data;
 
 	themeStyles.set(`${packageName}_${themeName}`, themeProps);
 	return themeProps;
 };
 
-const fetchThemeProperties = async (packageName, themeName) => {
-	const url = themeURLs.get(`${packageName}_${themeName}`);
-
-	if (!url) {
-		throw new Error(`You have to import the ${packageName}/dist/Assets.js module to switch to additional themes`);
-	}
-
-	return getFileExtension(url) === ".css" ? fetchTextOnce(url) : fetchJsonOnce(getEffectiveAssetPath(url));
-};
-
 const getRegisteredPackages = () => {
 	return registeredPackages;
 };
@@ -81,6 +70,7 @@ const isThemeRegistered = theme => {
 };
 
 export {
+	registerThemePropertiesLoader,
 	registerThemeProperties,
 	getThemeProperties,
 	getRegisteredPackages,