@ui5/webcomponents-base 0.0.0-5f8ce9393 → 0.0.0-6cb3eb0db

package/src/asset-registries/Themes.js

@@ -1,7 +1,7 @@
-import { fetchJsonOnce } from "../util/FetchHelper.js";
+import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 
-const themeURLs = new Map();
 const themeStyles = new Map();
+const loaders = new Map();
 const registeredPackages = new Set();
 const registeredThemes = new Set();
 
@@ -13,63 +13,66 @@ 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 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 three options: a string, an object with a "_" property or a 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")) {
-		// pure 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);
 };
 
 const getThemeProperties = async (packageName, themeName) => {
 	const style = themeStyles.get(`${packageName}_${themeName}`);
-	if (style) {
+	if (style !== undefined) { // it's valid for style to be an empty string
 		return style;
 	}
 
 	if (!registeredThemes.has(themeName)) {
 		const regThemesStr = [...registeredThemes.values()].join(", ");
-		console.warn(`You have requested a non-registered theme - falling back to sap_fiori_3. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
-		return themeStyles.get(`${packageName}_sap_fiori_3`);
+		console.warn(`You have requested a non-registered theme - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
+		return themeStyles.get(`${packageName}_${DEFAULT_THEME}`);
 	}
 
-	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 the ${packageName}/dist/Assets.js module to switch to additional themes`);
+	const loader = loaders.get(`${packageName}/${themeName}`);
+	if (!loader) {
+		// no themes for package
+		console.error(`Theme [${themeName}] not registered for package [${packageName}]`); /* eslint-disable-line */
+		return;
+	}
+	let data;
+	try {
+		data = await loader(themeName);
+	} catch (e) {
+		console.error(packageName, e.message); /* eslint-disable-line */
+		return;
 	}
-	return fetchJsonOnce(url);
+	const themeProps = data._ || data;
+
+	themeStyles.set(`${packageName}_${themeName}`, themeProps);
+	return themeProps;
 };
 
 const getRegisteredPackages = () => {
 	return registeredPackages;
 };
 
+const isThemeRegistered = theme => {
+	return registeredThemes.has(theme);
+};
+
 export {
+	registerThemePropertiesLoader,
 	registerThemeProperties,
 	getThemeProperties,
 	getRegisteredPackages,
+	isThemeRegistered,
 };

package/src/asset-registries/i18n.js

@@ -1,19 +1,31 @@
-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";
+import getLocale from "../locale/getLocale.js";
+import { attachLanguageChange } from "../locale/languageChange.js";
+import normalizeLocale from "../locale/normalizeLocale.js";
+import nextFallbackLocale from "../locale/nextFallbackLocale.js";
+import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
+import { getFetchDefaultLanguage } from "../config/Language.js";
+
+// contains package names for which the warning has been shown
+const warningShown = new Set();
+const reportedErrors = new Set();
 
 const bundleData = new Map();
-const bundleURLs = new Map();
+const bundlePromises = new Map();
+const loaders = 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
+ *
+ * @param {string} packageName for which package this loader can fetch data
+ * @param {function} loader async function that will be passed a localeId and should return a JSON object
+ * @param {Array} localeIds Array of locale IDs that this loader can handle
  */
-const setI18nBundleData = (packageName, data) => {
+const registerI18nLoader = (packageName, localeId, loader) => {
+	// register loader by key
+	const bundleKey = `${packageName}/${localeId}`;
+	loaders.set(bundleKey, loader);
+};
+
+const _setI18nBundleData = (packageName, data) => {
 	bundleData.set(packageName, data);
 };
 
@@ -22,13 +34,36 @@ const getI18nBundleData = 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
+ * @deprecated
  */
-const registerI18nBundle = (packageName, bundle) => {
-	bundleURLs.set(packageName, bundle);
+const registerI18nBundle = (_packageName, _bundle) => {
+	throw new Error("This method has been removed. Use `registerI18nLoader` instead.");
+};
+
+const _hasLoader = (packageName, localeId) => {
+	const bundleKey = `${packageName}/${localeId}`;
+	return loaders.has(bundleKey);
+};
+
+// load bundle over the network once
+const _loadMessageBundleOnce = (packageName, localeId) => {
+	const bundleKey = `${packageName}/${localeId}`;
+	const loadMessageBundle = loaders.get(bundleKey);
+
+	if (!bundlePromises.get(bundleKey)) {
+		bundlePromises.set(bundleKey, loadMessageBundle(localeId));
+	}
+
+	return bundlePromises.get(bundleKey);
+};
+
+const _showAssetsWarningOnce = packageName => {
+	if (!warningShown.has(packageName)) {
+		console.warn(`[${packageName}]: Message bundle assets are not configured. Falling back to English texts.`, /* eslint-disable-line */
+		` Add \`import "${packageName}/dist/Assets.js"\` in your bundle and make sure your build tool supports dynamic imports and JSON imports. See section "Assets" in the documentation for more information.`); /* eslint-disable-line */
+		warningShown.add(packageName);
+	}
 };
 
 /**
@@ -41,35 +76,46 @@ const registerI18nBundle = (packageName, bundle) => {
  * @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 ${packageName}/dist/Assets.js with a build tool that supports JSON imports.`); /* eslint-disable-line */
-		return;
-	}
-
-	const language = getLanguage();
+	const language = getLocale().getLanguage();
+	const region = getLocale().getRegion();
+	let localeId = normalizeLocale(language + (region ? `-${region}` : ``));
 
-	let localeId = normalizeLocale(language);
-	while (!bundlesForPackage[localeId]) {
+	while (localeId !== DEFAULT_LANGUAGE && !_hasLoader(packageName, localeId)) {
 		localeId = nextFallbackLocale(localeId);
 	}
 
-	const bundleURL = bundlesForPackage[localeId];
+	// use default language unless configured to always fetch it from the network
+	const fetchDefaultLanguage = getFetchDefaultLanguage();
+	if (localeId === DEFAULT_LANGUAGE && !fetchDefaultLanguage) {
+		_setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
+		return;
+	}
 
-	if (typeof bundleURL === "object") { // inlined from build
-		setI18nBundleData(packageName, bundleURL);
-		return bundleURL;
+	if (!_hasLoader(packageName, localeId)) {
+		_showAssetsWarningOnce(packageName);
+		return;
 	}
 
-	const data = await fetchJsonOnce(bundleURL);
-	setI18nBundleData(packageName, data);
+	try {
+		const data = await _loadMessageBundleOnce(packageName, localeId);
+		_setI18nBundleData(packageName, data);
+	} catch (e) {
+		if (!reportedErrors.has(e.message)) {
+			reportedErrors.add(e.message);
+			console.error(e.message); /* eslint-disable-line */
+		}
+	}
 };
 
+// When the language changes dynamically (the user calls setLanguage), re-fetch all previously fetched bundles
+attachLanguageChange(() => {
+	const allPackages = [...bundleData.keys()];
+	return Promise.all(allPackages.map(fetchI18nBundle));
+});
+
 export {
+	registerI18nLoader,
 	fetchI18nBundle,
 	registerI18nBundle,
-	setI18nBundleData,
 	getI18nBundleData,
 };

package/src/config/AnimationMode.js

@@ -1,4 +1,5 @@
 import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js";
+import AnimationMode from "../types/AnimationMode.js";
 
 let animationMode;
 
@@ -10,4 +11,13 @@ const getAnimationMode = () => {
 	return animationMode;
 };
 
-export { getAnimationMode }; // eslint-disable-line
+const setAnimationMode = newAnimationMode => {
+	if (Object.values(AnimationMode).includes(newAnimationMode)) {
+		animationMode = newAnimationMode;
+	}
+};
+
+export {
+	getAnimationMode,
+	setAnimationMode,
+};

package/src/config/CalendarType.js

@@ -1,4 +1,4 @@
-import CalendarType from "@ui5/webcomponents-utils/dist/sap/ui/core/CalendarType.js";
+import CalendarType from "../types/CalendarType.js";
 import { getCalendarType as getConfiguredCalendarType } from "../InitialConfiguration.js";
 
 let calendarType;
@@ -8,12 +8,8 @@ const getCalendarType = () => {
 		calendarType = getConfiguredCalendarType();
 	}
 
-	if (calendarType) {
-		const type = Object.keys(CalendarType).find(calType => calType === calendarType);
-
-		if (type) {
-			return type;
-		}
+	if (CalendarType.isValid(calendarType)) {
+		return calendarType;
 	}
 
 	return CalendarType.Gregorian;

package/src/config/Language.js

@@ -1,7 +1,17 @@
-import { getLanguage as getConfiguredLanguage } from "../InitialConfiguration.js";
+import {
+	getLanguage as getConfiguredLanguage,
+	getFetchDefaultLanguage as getConfiguredFetchDefaultLanguage,
+} from "../InitialConfiguration.js";
+import { fireLanguageChange } from "../locale/languageChange.js";
+import { reRenderAllUI5Elements } from "../Render.js";
 
 let language;
+let fetchDefaultLanguage;
 
+/**
+ * Returns the currently configured language, or the browser language as a fallback
+ * @returns {String}
+ */
 const getLanguage = () => {
 	if (language === undefined) {
 		language = getConfiguredLanguage();
@@ -9,4 +19,50 @@ const getLanguage = () => {
 	return language;
 };
 
-export { getLanguage }; // eslint-disable-line
+/**
+ * Changes the current language, re-fetches all message bundles, updates all language-aware components
+ * and returns a promise that resolves when all rendering is done
+ *
+ * @param newLanguage
+ * @returns {Promise<void>}
+ */
+const setLanguage = async newLanguage => {
+	if (language === newLanguage) {
+		return;
+	}
+
+	language = newLanguage;
+
+	await fireLanguageChange(newLanguage);
+	await reRenderAllUI5Elements({ languageAware: true });
+};
+
+/**
+ * Defines if the default language, that is inlined, should be
+ * fetched over the network instead of using the inlined one.
+ * <b>Note:</b> By default the language will not be fetched.
+ *
+ * @param {Boolean} fetchDefaultLanguage
+ */
+const setFetchDefaultLanguage = fetchDefaultLang => {
+	fetchDefaultLanguage = fetchDefaultLang;
+};
+
+/**
+ * Returns if the default language, that is inlined, should be fetched over the network.
+ * @returns {Boolean}
+ */
+const getFetchDefaultLanguage = () => {
+	if (fetchDefaultLanguage === undefined) {
+		setFetchDefaultLanguage(getConfiguredFetchDefaultLanguage());
+	}
+
+	return fetchDefaultLanguage;
+};
+
+export {
+	getLanguage,
+	setLanguage,
+	setFetchDefaultLanguage,
+	getFetchDefaultLanguage,
+};

package/src/config/Theme.js

@@ -1,5 +1,5 @@
 import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
-import { _applyTheme } from "../Theming.js";
+import applyTheme from "../theming/applyTheme.js";
 
 let theme;
 
@@ -19,7 +19,7 @@ const setTheme = async newTheme => {
 	theme = newTheme;
 
 	// Update CSS Custom Properties
-	await _applyTheme(theme);
+	await applyTheme(theme);
 };
 
 export {