refactor(framework): fetch default language (#2175)

ilhan007 · ilhan007 · commit 72ab9b88a8ee · 2020-09-14T10:39:07.000+03:00
After the change all languages would be fetched over the network, including the defaultLanguage, that we have inlined. This will be the default behaviour. However, there is a new configuration option to stop fetching the default language, called "useDefaultLanguage". When the "useDefaultLanguage" is enabled, the inlined texts will be used instead. Related to: #2169
diff --git a/packages/base/src/InitialConfiguration.js b/packages/base/src/InitialConfiguration.js
@@ -12,6 +12,7 @@ let initialConfig = {
 	calendarType: null,
 	noConflict: false, // no URL
 	formatSettings: {},
+	useDefaultLanguage: false,
 };
 
 /* General settings */
@@ -35,6 +36,16 @@ const getLanguage = () => {
 	return initialConfig.language;
 };
 
+/**
+ * Returns if the default language, that is inlined build time,
+ * should be used, instead of trying fetching the language over the network.
+ * @returns {Boolean}
+ */
+const getUseDefaultLanguage = () => {
+	initConfiguration();
+	return initialConfig.useDefaultLanguage;
+};
+
 const getNoConflict = () => {
 	initConfiguration();
 	return initialConfig.noConflict;
@@ -125,6 +136,7 @@ export {
 	getTheme,
 	getRTL,
 	getLanguage,
+	getUseDefaultLanguage,
 	getNoConflict,
 	getCalendarType,
 	getFormatSettings,
diff --git a/packages/base/src/asset-registries/i18n.js b/packages/base/src/asset-registries/i18n.js
@@ -5,6 +5,7 @@ import { fetchTextOnce } from "../util/FetchHelper.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";
 
 const bundleData = new Map();
 const bundleURLs = new Map();
@@ -58,13 +59,14 @@ const fetchI18nBundle = async packageName => {
 
 	const language = getLocale().getLanguage();
 	const region = getLocale().getRegion();
-
+	const useDefaultLanguage = getUseDefaultLanguage();
 	let localeId = normalizeLocale(language + (region ? `-${region}` : ``));
+
 	while (localeId !== DEFAULT_LANGUAGE && !bundlesForPackage[localeId]) {
 		localeId = nextFallbackLocale(localeId);
 	}
 
-	if (!bundlesForPackage[localeId]) {
+	if (useDefaultLanguage && localeId === DEFAULT_LANGUAGE) {
 		setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
 		return;
 	}
diff --git a/packages/base/src/config/Language.js b/packages/base/src/config/Language.js
@@ -1,8 +1,12 @@
-import { getLanguage as getConfiguredLanguage } from "../InitialConfiguration.js";
+import {
+	getLanguage as getConfiguredLanguage,
+	getUseDefaultLanguage as getConfiguredUseDefaultLanguage,
+} from "../InitialConfiguration.js";
 import { fireLanguageChange } from "../locale/languageChange.js";
 import RenderScheduler from "../RenderScheduler.js";
 
 let language;
+let useDefaultLanguage;
 
 /**
  * Returns the currently configured language, or the browser language as a fallback
@@ -35,7 +39,32 @@ const setLanguage = async newLanguage => {
 	return RenderScheduler.whenFinished();
 };
 
+/**
+ * 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.
+ *
+ * @param {Boolean} useDefaultLanguage
+ */
+const setUseDefaultLanguage = useDefaultLang => {
+	useDefaultLanguage = useDefaultLang;
+};
+
+/**
+ * Returns if the default language, that is inlined, should be used.
+ * @returns {Boolean}
+ */
+const getUseDefaultLanguage = () => {
+	if (useDefaultLanguage === undefined) {
+		setUseDefaultLanguage(getConfiguredUseDefaultLanguage());
+	}
+
+	return useDefaultLanguage;
+};
+
 export {
 	getLanguage,
 	setLanguage,
+	setUseDefaultLanguage,
+	getUseDefaultLanguage,
 };
diff --git a/packages/main/test/pages/i18n-defaultLang.html b/packages/main/test/pages/i18n-defaultLang.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/html">
+
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+
+	<title>i18n default language test page</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<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
+	-->
+	<script data-ui5-config type="application/json">{"useDefaultLanguage": true}</script>
+
+	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../resources/bundle.es5.js"></script>
+</head>
+	<body style="background-color: var(--sapBackgroundColor);">
+
+	<ui5-textarea
+		maxlength="20"
+		placeholder="Max length"
+		show-exceeded-text
+	></ui5-textarea>
+</body>
+</html>
diff --git a/packages/tools/lib/generate-json-imports/i18n.js b/packages/tools/lib/generate-json-imports/i18n.js
@@ -1,21 +1,18 @@
 const fs = require("fs");
 const path = require('path');
 const mkdirp = require("mkdirp");
-const assets = require("../../assets-meta.js");
 
 const packageName = JSON.parse(fs.readFileSync("package.json")).name;
 
 const inputFolder = path.normalize(process.argv[2]);
 const outputFile = path.normalize(`${process.argv[3]}/i18n.js`);
 
-const defaultLanguage = assets.languages.default;
-
 // All languages present in the file system
 const files = fs.readdirSync(inputFolder);
 const languages = files.map(file => {
-  const matches = file.match(/messagebundle_(.+?).json$/);
-  return matches ? matches[1] : undefined;
-}).filter(key => !!key && key !== defaultLanguage);
+	const matches = file.match(/messagebundle_(.+?).json$/);
+	return matches ? matches[1] : undefined;
+}).filter(key => !!key);
 
 let content;
 
@@ -25,14 +22,14 @@ if (languages.length === 0) {
 // There is i18n - generate the full file
 } else {
 
-  // Keys for the array
-  const languagesKeysString = languages.map(key => `${key},`).join("\n\t");
+// Keys for the array
+const languagesKeysString = languages.map(key => `${key},`).join("\n\t");
 
-  // Actual imports for json assets
-  const assetsImportsString = languages.map(key => `import ${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
+// Actual imports for json assets
+const assetsImportsString = languages.map(key => `import ${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
 
-  // Resulting file content
-  content = `import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+// Resulting file content
+content = `import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
 
 ${assetsImportsString}
 
