refactor: unify asset handling

docs/PublicModuleImports.md

@@ -111,7 +111,7 @@ As shown in the example above, it's recommended to load the webcomponents polyfi
 ### 2. Theming
 
 ```js
-import "@ui5/webcomponents/dist/ThemePropertiesProvider.js";
+import "@ui5/webcomponents/dist/json-imports/Themes.js";
 ```
 (for additional themes support)
 
@@ -154,7 +154,7 @@ setTheme("sap_belize_hcb");
 ### 3. Internationalization
 
 ```js
-import "@ui5/webcomponents/dist/MessageBundleAssets.js";
+import "@ui5/webcomponents/dist/json-imports/i18n.js";
 ```
 
 Some UI5 Web Components contain texts (such as placeholders, tooltips, messages) that need translation.
@@ -171,17 +171,15 @@ Example:
 </script>
 ```
 
-Note: importing the module above will produce the following warning message in the browser's console:
-> Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
+### Note: importing `import "@ui5/webcomponents/dist/json-imports/i18n.js"` or `import "@ui5/webcomponents/dist/json-imports/Themes.js"` will produce the following warning message in the browser's console:
+> Inefficient bundling detected: consider bundling i18n/theme proeprties imports as URLs instead of inlining them.
 > See rollup-plugin-url or webpack file-loader for more information.
-> Suggested pattern: "i18n\/.*\.json"
+> Suggested pattern: "assets\/.*\.json"
 
 What this means is that it's recommended to instruct your source code bundling software
-(some of the most popular being Webpack and Rollup) not to include all the internationalization files
-(files that match the <code>i18n\/.*\.json</code> pattern) in your applications's javascript bundle,
+(some of the most popular being Webpack and Rollup) not to include all the internationalization files or theming related files
+(files that match the <code>assets\/.*\.json</code> pattern) in your applications's javascript bundle,
 but rather to leave them out. At runtime, they will be fetched on demand, if ever requested.
-Currently there are very few texts that need translation in UI5 Web Components, but these may grow over time
-so it's always a good idea to implement the optimization, suggested above.
 
 [How to do it with Webpack](https://github.com/webpack-contrib/file-loader)
 
@@ -195,7 +193,7 @@ import url from "rollup-plugin-url";
 plugins.push(url({
 	limit: 0,
 	include: [
-		/.*i18n\/.*\.json/,
+		/.*assets\/.*\.json/,
 	],
 	emitFiles: true,
 	fileName: "[name].[hash][extname]",

packages/base/package.json

@@ -16,11 +16,12 @@
     "directory": "packages/base"
   },
   "scripts": {
-    "build": "npm-run-all --sequential clean lint copy:src",
+    "build": "npm-run-all --sequential clean lint copy:cldr copy:src",
     "dev": "yarn watch:src",
     "clean": "rimraf dist",
     "lint": "eslint .",
     "copy:src": "copy-and-watch \"src/**/*.js\" dist/",
+    "copy:cldr": "copy-and-watch \"../../node_modules/@ui5/webcomponents-core/dist/**/cldr/*.json\" dist/assets/cldr/",
     "watch:src": "copy-and-watch --watch \"src/**/*.js\" dist/"
   },
   "dependencies": {

packages/base/src/AssetRegistry.js

@@ -0,0 +1,9 @@
+import { registerI18nBundle } from "./asset-registries/i18n.js";
+import { registerCldr } from "./asset-registries/LocaleData.js";
+import { registerThemeProperties } from "./asset-registries/Themes.js";
+
+export {
+	registerCldr,
+	registerThemeProperties,
+	registerI18nBundle,
+};

packages/base/src/Theming.js

@@ -1,5 +1,5 @@
 import { addCustomCSS, getCustomCSS } from "./theming/CustomStyle.js";
-import { getThemeProperties } from "./theming/ThemeProperties.js";
+import { getThemeProperties } from "./asset-registries/Themes.js";
 import { injectThemeProperties } from "./theming/StyleInjection.js";
 
 const defaultTheme = "sap_fiori_3";

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

@@ -1,5 +1,5 @@
-import { registerModuleContent } from "./ResourceLoaderOverrides.js";
-import { fetchTextOnce } from "./util/FetchHelper.js";
+import { registerModuleContent } from "../ResourceLoaderOverrides.js";
+import { fetchTextOnce } from "../util/FetchHelper.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"];
 
@@ -59,7 +59,7 @@ const resolveMissingMappings = () => {
 	});
 };
 
-const fetchCldrData = async (language, region, script) => {
+const fetchCldr = async (language, region, script) => {
 	resolveMissingMappings();
 	const localeId = calcLocale(language, region, script);
 
@@ -76,18 +76,26 @@ const fetchCldrData = async (language, region, script) => {
 	}
 };
 
-const registerCldrUrl = (locale, url) => {
+const registerCldr = (locale, url) => {
 	cldrUrls[locale] = url;
 };
 
-const registerCldrData = (locale, data) => {
+const setCldrData = (locale, data) => {
 	cldrData[locale] = data;
 };
 
+const getCldrData = locale => {
+	return cldrData[locale];
+};
+
 const _registerMappingFunction = mappingFn => {
 	cldrMappingFn = mappingFn;
 };
 
 export {
-	fetchCldrData, registerCldrUrl, registerCldrData, _registerMappingFunction,
+	fetchCldr,
+	registerCldr,
+	setCldrData,
+	getCldrData,
+	_registerMappingFunction,
 };

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

@@ -0,0 +1,39 @@
+import { fetchJsonOnce } from "../util/FetchHelper.js";
+
+const themeURLs = new Map();
+const themeStyles = new Map();
+
+const registerThemeProperties = (packageName, themeName, style) => {
+	if (style._) {
+		// JSON object like ({"_": ":root"})
+		themeStyles.set(`${packageName}_${themeName}`, style._);
+	} else if (style.includes(":root")) {
+		// pure string
+		themeStyles.set(`${packageName}_${themeName}`, style);
+	} else {
+		// url for fetching
+		themeURLs.set(`${packageName}_${themeName}`, style);
+	}
+};
+
+const getThemeProperties = async (packageName, themeName) => {
+	const style = themeStyles.get(`${packageName}_${themeName}`);
+	if (style) {
+		return style;
+	}
+
+	const data = await fetchThemeProperties(packageName, themeName);
+	themeStyles.set(`${packageName}_${themeName}`, data._);
+	return data._;
+};
+
+const fetchThemeProperties = async (packageName, themeName) => {
+	const url = themeURLs.get(`${packageName}_${themeName}`);
+
+	if (!url) {
+		throw new Error(`You have to import @ui5/webcomponents/dist/json-imports/Themes module to use theme switching`);
+	}
+	return fetchJsonOnce(url);
+};
+
+export { registerThemeProperties, getThemeProperties };

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

@@ -0,0 +1,75 @@
+import "../shims/jquery-shim.js";
+import "../shims/Core-shim.js";
+import { getLanguage } from "../LocaleProvider.js";
+import { fetchJsonOnce } from "../util/FetchHelper.js";
+import { normalizeLocale, nextFallbackLocale } from "../util/normalizeLocale.js";
+
+const bundleData = new Map();
+const bundleURLs = new Map();
+
+/**
+ * Sets a map with texts and ID the are related to.
+ * @param {string} packageName package ID that the i18n bundle will be related to
+ * @param {Object} data an object with string locales as keys and text translataions as values
+ * @public
+ */
+const setI18nBundleData = (packageName, data) => {
+	bundleData.set(packageName, data);
+};
+
+const getI18nBundleData = packageName => {
+	return bundleData.get(packageName);
+};
+
+/**
+ * Registers a map of locale/url information, to be used by the <code>fetchI18nBundle</code> method.
+ * @param {string} packageName package ID that the i18n bundle will be related to
+ * @param {Object} bundle an object with string locales as keys and the URLs of where the corresponding locale can be fetched from, f.e {"en": "path/en.json", ...}
+ * @public
+ */
+const registerI18nBundle = (packageName, bundle) => {
+	bundleURLs.set(packageName, bundle);
+};
+
+/**
+ * This method preforms the asyncronous task of fething the actual text resources. It will fetch
+ * each text resource over the network once (even for multiple calls to the same method).
+ * It should be fully finished before the i18nBundle class is created in the webcomponents.
+ * This method uses the bundle URLs that are populated by the <code>registerI18nBundle</code> method.
+ * To simplify the usage, the synchronization of both methods happens internally for the same <code>bundleId</code>
+ * @param {packageName} packageName the node project package id
+ * @public
+ */
+const fetchI18nBundle = async packageName => {
+	const bundlesForPackage = bundleURLs.get(packageName);
+
+	if (!bundlesForPackage) {
+		console.warn(`Message bundle assets are not configured. Falling back to english texts.`, /* eslint-disable-line */
+		` You need to import @ui5/webcomponents/dist/json-imports/i18n.js with a build tool that supports JSON imports.`); /* eslint-disable-line */
+		return;
+	}
+
+	const language = getLanguage();
+
+	let localeId = normalizeLocale(language);
+	while (!bundlesForPackage[localeId]) {
+		localeId = nextFallbackLocale(localeId);
+	}
+
+	const bundleURL = bundlesForPackage[localeId];
+
+	if (typeof bundleURL === "object") { // inlined from build
+		setI18nBundleData(packageName, bundleURL);
+		return bundleURL;
+	}
+
+	const data = await fetchJsonOnce(bundleURL);
+	setI18nBundleData(packageName, data);
+};
+
+export {
+	fetchI18nBundle,
+	registerI18nBundle,
+	setI18nBundleData,
+	getI18nBundleData,
+};