refactor: prefer usage of inlined language (#2820)

pskelin · web-flow · commit dc5f140c837f · 2021-02-17T13:20:05.000+02:00
diff --git a/docs/Configuration.md b/docs/Configuration.md
@@ -5,23 +5,23 @@
 
 There are several configuration settings that affect all UI5 Web Components globally.
 
-  Setting    |                     Values                      | Default value |                          Description
------------- | ----------------------------------------------- | ------------- | -------------------------------------------------------------
-[theme](#theme)        | sap_fiori_3, sap_fiori_3_dark, sap_fiori_3_hcb, sap_fiori_3_hcw, sap_belize, sap_belize_hcb, sap_belize_hcw | sap_fiori_3   | Visual theme
-language     | en, de, es, etc...                              | en            | Language to be used for translatable texts
-[RTL](#rtl) (**deprecated since 1.0.0-rc.8**)    | true, false                                     | false         | When true, sets global text direction to right-to-left
-[animationMode](#animationMode)  | full, basic, minimal, none  | full          | Defines different animation scenarios or levels
-calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian     | Default calendar type for date-related web components
-[noConflict](#noConflict)  | true, false | false                            | When set to true, all events will be fired with a "ui5-" prefix only
-[formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below		| Empty object | Allows to override locale-specific configuration
-[assetsPath](#assetsPath)| See the [Assets path](#assetsPath) section below		| Empty string | Allows to set the assets path at runtime
+                   Setting                    |                                                   Values                                                    | Default value |                                                                                   Description
+--------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+[theme](#theme)                               | sap_fiori_3, sap_fiori_3_dark, sap_fiori_3_hcb, sap_fiori_3_hcw, sap_belize, sap_belize_hcb, sap_belize_hcw | sap_fiori_3   | Visual theme
+language                                      | en, de, es, etc...                                                                                          | en            | Language to be used for translatable texts
+[animationMode](#animationMode)               | full, basic, minimal, none                                                                                  | full          | Defines different animation scenarios or levels
+calendarType                                  | Gregorian, Islamic, Buddhist, Japanese, Persian                                                             | Gregorian     | Default calendar type for date-related web components
+[noConflict](#noConflict)                     | true, false                                                                                                 | false         | When set to true, all events will be fired with a "ui5-" prefix only
+[formatSettings](#formatSettings)             | See the [Format settings](#formatSettings) section below                                                    | Empty object  | Allows to override locale-specific configuration
+[assetsPath](#assetsPath)                     | See the [Assets path](#assetsPath) section below                                                            | Empty string  | Allows to set the assets path at runtime
+[fetchDefaultLanguage](#fetchDefaultLanguage) | true, false                                                                                                 | false         | The default language is inlined at build time and will be used. Change this to `true` if you want the i18n to be always fetched from the network even for the default language.
 
 ### Content Density
 
 UI5 Web Components contain different content densities for certain controls that allow your app to adapt to the device in question, allowing you to display larger controls for touch-enabled devices, and a smaller more compact design for devices that are operated by mouse. Cosy size is the default density for all components. Compact size could be set by adding a class `ui5-content-density-compact` to an html element. It cascades all the way down and enforces compact density (smaller margins/paddings, smaller touch areas, etc).
 
-<a name="theme"></a>
 ### Theme
+<a name="theme"></a>
 The `theme` setting values above are the technical names of our themes.
 - The `sap_fiori_3` is known as `Quartz Light` and it`s the default theme.
 - The `sap_fiori_3_dark` is known as `Quartz Dark`.
@@ -50,8 +50,8 @@ applyDirection();
 ```
 
 
-<a name="animationMode"></a>
 ### Animation Mode
+<a name="animationMode"></a>
 
 Animation modes allow to specify different animation scenarios or levels.
  - When `full`, all animations run unrestricted.
@@ -85,8 +85,8 @@ The `noConflict` configuration setting allows certain control over this behavior
  You can still use them by listening to `ui5-selection-change` and `ui5-header-click`, but the names `selection-change` and `header-click` will be
  free for use by other UI components and libraries without name collision.
 
-<a name="formatSettings"></a>
 ### Format settings
+<a name="formatSettings"></a>
 
 For example, to force the first day of week to Sunday, no matter the locale:
 
@@ -98,12 +98,12 @@ For example, to force the first day of week to Sunday, no matter the locale:
 }
 ```
 
-  Setting    |                     Values                      | Default value |                          Description
------------- | ----------------------------------------------- | ------------- | -------------------------------------------------------------
-firstDayOfWeek | 0 (Sunday) through 6 (Saturday) | *Depends on locale*     | When set, overrides the locale's default value
+   Setting     |             Values              |    Default value    |                  Description
+-------------- | ------------------------------- | ------------------- | ----------------------------------------------
+firstDayOfWeek | 0 (Sunday) through 6 (Saturday) | *Depends on locale* | When set, overrides the locale's default value
 
-<a name="assetsPath"></a>
 ### Assets path
+<a name="assetsPath"></a>
 
 This configuration setting allows to set the path where asset files (most commonly `.json` ) that are to be fetched at runtime, are located. These are:
  - Icon collections
@@ -123,6 +123,24 @@ Example:
 </script>
 ```
 
+### Fetching the default language
+<a name="fetchDefaultLanguage"></a>
+
+All texts used by components are inlined during build time so that components look and feel normally when prototyping. The inlined text is decided at build time (`en` unless configured otherwise).
+
+Since the default language is inlined, it makes no sense to fetch it again from the network along with the normal assets for other locales, so the default behaviour is to use the inlined text.
+
+If for some reason it is necessary to fetch the default language text from the network as well, use this setting.
+
+Example:
+```html
+<script data-ui5-config type="application/json">
+{
+	"fetchDefaultLanguage": true
+}
+</script>
+```
+
 ## Configuration script
 
 In order to provide configuration settings, include the following ```<script>``` element in your HTML page:
diff --git a/packages/base/src/InitialConfiguration.js b/packages/base/src/InitialConfiguration.js
@@ -12,7 +12,7 @@ let initialConfig = {
 	calendarType: null,
 	noConflict: false, // no URL
 	formatSettings: {},
-	useDefaultLanguage: false,
+	fetchDefaultLanguage: false,
 	assetsPath: "",
 };
 
@@ -38,13 +38,13 @@ const getLanguage = () => {
 };
 
 /**
- * Returns if the default language, that is inlined build time,
- * should be used, instead of trying fetching the language over the network.
+ * Returns if the default language, that is inlined at build time,
+ * should be fetched over the network instead.
  * @returns {Boolean}
  */
-const getUseDefaultLanguage = () => {
+const getFetchDefaultLanguage = () => {
 	initConfiguration();
-	return initialConfig.useDefaultLanguage;
+	return initialConfig.fetchDefaultLanguage;
 };
 
 const getNoConflict = () => {
@@ -142,7 +142,7 @@ export {
 	getTheme,
 	getRTL,
 	getLanguage,
-	getUseDefaultLanguage,
+	getFetchDefaultLanguage,
 	getNoConflict,
 	getCalendarType,
 	getFormatSettings,
diff --git a/packages/base/src/asset-registries/i18n.js b/packages/base/src/asset-registries/i18n.js
@@ -3,7 +3,7 @@ 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 { getUseDefaultLanguage } from "../config/Language.js";
+import { getFetchDefaultLanguage } from "../config/Language.js";
 
 // contains package names for which the warning has been shown
 const warningShown = new Set();
@@ -84,14 +84,15 @@ const fetchI18nBundle = async packageName => {
 		localeId = nextFallbackLocale(localeId);
 	}
 
-	if (!_hasLoader(packageName, localeId)) {
-		_showAssetsWarningOnce(packageName);
+	// 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;
 	}
 
-	const useDefaultLanguage = getUseDefaultLanguage();
-	if (useDefaultLanguage && localeId === DEFAULT_LANGUAGE) {
-		_setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
+	if (!_hasLoader(packageName, localeId)) {
+		_showAssetsWarningOnce(packageName);
 		return;
 	}
 
diff --git a/packages/base/src/config/Language.js b/packages/base/src/config/Language.js
@@ -1,12 +1,12 @@
 import {
 	getLanguage as getConfiguredLanguage,
-	getUseDefaultLanguage as getConfiguredUseDefaultLanguage,
+	getFetchDefaultLanguage as getConfiguredFetchDefaultLanguage,
 } from "../InitialConfiguration.js";
 import { fireLanguageChange } from "../locale/languageChange.js";
 import { reRenderAllUI5Elements } from "../Render.js";
 
 let language;
-let useDefaultLanguage;
+let fetchDefaultLanguage;
 
 /**
  * Returns the currently configured language, or the browser language as a fallback
@@ -38,31 +38,31 @@ const setLanguage = async newLanguage => {
 };
 
 /**
- * Defines if the default language, that is inlined, should be used,
- * instead of fetching the language over the network.
- * <b>Note:</b> By default the language will be fetched.
+ * 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} useDefaultLanguage
+ * @param {Boolean} fetchDefaultLanguage
  */
-const setUseDefaultLanguage = useDefaultLang => {
-	useDefaultLanguage = useDefaultLang;
+const setFetchDefaultLanguage = fetchDefaultLang => {
+	fetchDefaultLanguage = fetchDefaultLang;
 };
 
 /**
- * Returns if the default language, that is inlined, should be used.
+ * Returns if the default language, that is inlined, should be fetched over the network.
  * @returns {Boolean}
  */
-const getUseDefaultLanguage = () => {
-	if (useDefaultLanguage === undefined) {
-		setUseDefaultLanguage(getConfiguredUseDefaultLanguage());
+const getFetchDefaultLanguage = () => {
+	if (fetchDefaultLanguage === undefined) {
+		setFetchDefaultLanguage(getConfiguredFetchDefaultLanguage());
 	}
 
-	return useDefaultLanguage;
+	return fetchDefaultLanguage;
 };
 
 export {
 	getLanguage,
 	setLanguage,
-	setUseDefaultLanguage,
-	getUseDefaultLanguage,
+	setFetchDefaultLanguage,
+	getFetchDefaultLanguage,
 };
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
@@ -22,7 +22,7 @@ import getLocaleData from "@ui5/webcomponents-localization/dist/locale/getLocale
 // const bg = "https://ui5.sap.com/resources/sap/ui/core/messagebundle_bg.properties";
 // registerI18nLoader("@ui5/webcomponents", "bg", async (localeId) => {
 // 	const props = await (await fetch(bg)).text();
-// 	return parse(props);;
+// 	return parse(props);
 // });
 // registerI18nLoader("@ui5/webcomponents", "fr", async (localeId) => {
 // 	return await (await fetch("fr")).json();
@@ -109,6 +109,7 @@ import { _getRegisteredNames as getIconNames } from  "@ui5/webcomponents-base/di
 import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
 import { attachDirectionChange } from "@ui5/webcomponents-base/dist/locale/directionChange.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import * as defaultTexts from "./dist/generated/i18n/i18n-defaults.js";
 
 const testAssets = {
 	configuration : {
@@ -133,6 +134,7 @@ const testAssets = {
 	detachThemeLoaded,
 	getIconNames,
 	renderFinished,
+	defaultTexts,
 };
 
 window["sap-ui-webcomponents-bundle"] = testAssets;
diff --git a/packages/main/test/pages/i18n-defaultLang.html b/packages/main/test/pages/i18n-defaultLang.html
@@ -10,10 +10,10 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
 
-	<!-- The "useDefaultLanguage" is enabled,
-		the configured default language won't be fetched over the network
+	<!-- The "fetchDefaultLanguage" is enabled,
+		the configured default language will be fetched over the network
 	-->
-	<script data-ui5-config type="application/json">{"useDefaultLanguage": true}</script>
+	<script data-ui5-config type="application/json">{"fetchDefaultLanguage": true}</script>
 
 	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
 	<script src="../../resources/bundle.esm.js" type="module"></script>
diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
@@ -810,10 +810,11 @@ describe("Date Picker Tests", () => {
 		browser.url("http://localhost:8080/test-resources/pages/DatePicker_test_page.html?sap-ui-language=en");
 		datepicker.root.setAttribute("primary-calendar-type", "Gregorian");
 		datepicker.id = "#dp13";
-		datepicker.openPicker();
 		datepicker.input.click();
 		browser.keys("May 3, 2100");
 		browser.keys("Enter");
+		// open picker after accepting the date
+		datepicker.openPicker();
 
 		const data = Array.from(datepicker.getDayPickerDatesRow(2));
 		assert.strictEqual(data[0].getAttribute("aria-label"), "Calendar Week 18", "First columnheader have Week number aria-label");
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -268,23 +268,23 @@ describe("MultiComboBox general interaction", () => {
 			const inivisbleTextId = invisibleText.getProperty("id");
 			let tokens = mcb.shadow$$(".ui5-multi-combobox-token");
 			let resourceBundleText = null;
-	
+
 			assert.strictEqual(tokens.length, 2, "should have two tokens");
 			assert.strictEqual(innerInput.getAttribute("aria-describedby"), inivisbleTextId, "aria-describedby reference is correct");
 			assert.strictEqual(invisibleText.getText(), "Contains 2 tokens", "aria-describedby text is correct");
-	
+
 			mcb.scrollIntoView();
 			innerInput.click();
 			innerInput.keys("Backspace");
 			innerInput.keys("Backspace");
 
 			tokens = mcb.shadow$$(".ui5-multi-combobox-token");
-	
+
 			resourceBundleText = browser.execute(() => {
 				const mcb = document.getElementById("mcb-compact");
-				return mcb.i18nBundle.getText("TOKENIZER_ARIA_CONTAIN_ONE_TOKEN");
+				return mcb.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
 			});
-			
+
 			assert.strictEqual(tokens.length, 1, "should have one token");
 			assert.strictEqual(invisibleText.getText(), resourceBundleText, "aria-describedby text is correct");
 
@@ -293,7 +293,7 @@ describe("MultiComboBox general interaction", () => {
 			tokens = mcb.shadow$$(".ui5-multi-combobox-token");
 			resourceBundleText = browser.execute(() => {
 				const mcb = document.getElementById("mcb-compact");
-				return mcb.i18nBundle.getText("TOKENIZER_ARIA_CONTAIN_TOKEN");
+				return mcb.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.TOKENIZER_ARIA_CONTAIN_TOKEN);
 			});
 
 			assert.strictEqual(tokens.length, 0, "should not have tokens");
diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js
@@ -144,7 +144,7 @@ describe("ARIA attributes", () => {
 
 		resourceBundleText = browser.execute(() => {
 			const mi = document.getElementById("no-tokens");
-			return mi.i18nBundle.getText("TOKENIZER_ARIA_CONTAIN_TOKEN");
+			return mi.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.TOKENIZER_ARIA_CONTAIN_TOKEN);
 		});
 
 		assert.strictEqual(mi.$$("ui5-token").length, 0, "should not have tokens");
@@ -156,7 +156,7 @@ describe("ARIA attributes", () => {
 
 		resourceBundleText = browser.execute(() => {
 			const mi = document.getElementById("no-tokens");
-			return mi.i18nBundle.getText("TOKENIZER_ARIA_CONTAIN_ONE_TOKEN");
+			return mi.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
 		});
 
 		assert.strictEqual(mi.$$("ui5-token").length, 1, "should have one token");
diff --git a/packages/tools/components-package/nps.js b/packages/tools/components-package/nps.js
@@ -70,7 +70,7 @@ const getScripts = (options) => {
 		test: {
 			// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
 			default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
-			run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
+			run: "cross-env WDIO_LOG_LEVEL=error wdio config/wdio.conf.js",
 			spec: "wdio run config/wdio.conf.js",
 		},
 		startWithScope: "nps scope.prepare scope.dev",
