refactor(base): improve bundle size (#161)

- configuration set from url or json script
- locale is required for all controls that need it,
not on central level as it used to be
- new module LocaleProvider is added - it returns the set
locale from the configuration or locale based on browser
- all compatibility core-shim and jquery levels are moved to
Calendar and DatePicker

Author: MapTo0

packages/base/src/sap/ui/webcomponents/base/Bootstrap.js

@@ -1,6 +1,3 @@
-import "./shims/Core-shim";
-import "./shims/jquery-shim";
-
 import whenDOMReady from "./util/whenDOMReady";
 import EventEnrichment from "./events/EventEnrichment";
 import { insertIconFontFace } from "./IconFonts";

packages/base/src/sap/ui/webcomponents/base/Configuration.js

@@ -1,15 +1,4 @@
-import { isAndroid } from "@ui5/webcomponents-core/dist/sap/ui/Device";
 import CalendarType from "@ui5/webcomponents-core/dist/sap/ui/core/CalendarType";
-import Locale from "./Locale";
-import {
-	setConfiguration,
-	getFormatLocale,
-	getLegacyDateFormat,
-	getLegacyDateCalendarCustomizing,
-	getCustomLocaleData,
-} from "./FormatSettings";
-
-let LocaleData;
 
 const getDesigntimePropertyAsArray = sValue => {
 	const m = /\$([-a-z0-9A-Z._]+)(?::([^$]*))?\$/.exec(sValue);
@@ -18,32 +7,10 @@ const getDesigntimePropertyAsArray = sValue => {
 
 const supportedLanguages = getDesigntimePropertyAsArray("$core-i18n-locales:,ar,bg,ca,cs,da,de,el,en,es,et,fi,fr,hi,hr,hu,it,iw,ja,ko,lt,lv,nl,no,pl,pt,ro,ru,sh,sk,sl,sv,th,tr,uk,vi,zh_CN,zh_TW$");
 
-const detectLanguage = () => {
-	const browserLanguages = navigator.languages;
-
-	const navigatorLanguage = () => {
-		if (isAndroid()) {
-			// on Android, navigator.language is hardcoded to 'en', so check UserAgent string instead
-			const match = navigator.userAgent.match(/\s([a-z]{2}-[a-z]{2})[;)]/i);
-			if (match) {
-				return match[1];
-			}
-			// okay, we couldn't find a language setting. It might be better to fallback to 'en' instead of having no language
-		}
-		return navigator.language;
-	};
-
-	const rawLocale = (browserLanguages && browserLanguages[0]) || navigatorLanguage() || navigator.userLanguage || navigator.browserLanguage;
-
-	return rawLocale || "en";
-};
-
-const language = detectLanguage();
-
 const CONFIGURATION = {
 	theme: "sap_fiori_3",
 	rtl: null,
-	language: new Locale(language),
+	language: null,
 	compactSize: false,
 	supportedLanguages,
 	calendarType: null,
@@ -52,8 +19,6 @@ const CONFIGURATION = {
 	"xx-wc-no-conflict": false, // no URL
 };
 
-setConfiguration(CONFIGURATION);
-
 /* General settings */
 const getTheme = () => {
 	return CONFIGURATION.theme;
@@ -64,7 +29,7 @@ const getRTL = () => {
 };
 
 const getLanguage = () => {
-	return CONFIGURATION.language.sLocaleId;
+	return CONFIGURATION.language;
 };
 
 const getCompactSize = () => {
@@ -94,13 +59,6 @@ const getCalendarType = () => {
 		}
 	}
 
-	/* In order to have a locale based calendar type - LocaleData should be injected to the configuration
-		- check #injectLocaleData
-	*/
-	if (LocaleData) {
-		return LocaleData.getInstance(getLocale()).getPreferredCalendarType();
-	}
-
 	return CalendarType.Gregorian;
 };
 
@@ -110,15 +68,6 @@ const getLocale = () => {
 	return CONFIGURATION.language;
 };
 
-const getFormatSettings = () => {
-	return {
-		getFormatLocale,
-		getLegacyDateFormat,
-		getLegacyDateCalendarCustomizing,
-		getCustomLocaleData,
-	};
-};
-
 const _setTheme = themeName => {
 	CONFIGURATION.theme = themeName;
 };
@@ -130,39 +79,6 @@ const booleanMapping = new Map([
 
 let runtimeConfig = {};
 
-const convertToLocaleOrNull = lang => {
-	try {
-		if (lang && typeof lang === "string") {
-			return new Locale(lang);
-		}
-	} catch (e) {
-		// ignore
-	}
-};
-
-const check = (condition, sMessage) => {
-	if (!condition) {
-		throw new Error(sMessage);
-	}
-};
-
-const getLanguageTag = () => {
-	return CONFIGURATION.language.toString();
-};
-
-const setLanguage = newLanguage => {
-	const locale = convertToLocaleOrNull(newLanguage);
-
-	check(locale, "Configuration.setLanguage: newLanguage must be a valid BCP47 language tag");
-
-	if (locale.toString() !== getLanguageTag()) {
-		CONFIGURATION.language = locale;
-		CONFIGURATION.derivedRTL = Locale._impliesRTL(locale);
-	}
-
-	return CONFIGURATION;
-};
-
 const parseConfigurationScript = () => {
 	const configScript = document.querySelector("[data-id='sap-ui-config']");
 	let configJSON;
@@ -202,18 +118,10 @@ const parseURLParameters = () => {
 
 const applyConfigurations = () => {
 	Object.keys(runtimeConfig).forEach(key => {
-		if (key === "language") {
-			setLanguage(runtimeConfig[key]);
-		} else {
-			CONFIGURATION[key] = runtimeConfig[key];
-		}
+		CONFIGURATION[key] = runtimeConfig[key];
 	});
 };
 
-const injectLocaleData = localeData => {
-	LocaleData = localeData;
-};
-
 parseConfigurationScript();
 parseURLParameters();
 applyConfigurations();
@@ -227,9 +135,7 @@ export {
 	getWCNoConflict,
 	getCalendarType,
 	getLocale,
-	getFormatSettings,
 	_setTheme,
 	getSupportedLanguages,
 	getOriginInfo,
-	injectLocaleData,
 };

packages/base/src/sap/ui/webcomponents/base/FormatSettings.js

@@ -1,10 +1,11 @@
 import Locale from "./Locale";
+import { getLocale } from "./LocaleProvider";
 
 const mSettings = {};
 
 const getFormatLocale = () => {
 	const fallback = () => {
-		let oLocale = SETTINGS.configuration.language;
+		let oLocale = getLocale();
 		// if any user settings have been defined, add the private use subtag "sapufmt"
 		if (!Object.keys(mSettings).length === 0) {
 			// TODO move to Locale/LocaleData
@@ -19,7 +20,8 @@ const getFormatLocale = () => {
 		return oLocale;
 	};
 
-	return SETTINGS.configuration.formatLocale || fallback();
+	// we do not support setting of locale, so we just leave the default behaviour
+	return fallback();
 };
 
 const SETTINGS = {

packages/base/src/sap/ui/webcomponents/base/LocaleDataConfigurationProvider.js

@@ -0,0 +1,48 @@
+import Locale from "./Locale";
+import { getLanguage as getConfigLanguage } from "./Configuration";
+
+const convertToLocaleOrNull = lang => {
+	try {
+		if (lang && typeof lang === "string") {
+			return new Locale(lang);
+		}
+	} catch (e) {
+		// ignore
+	}
+};
+
+/**
+ * Detects the language based on locale of the browser
+ */
+const detectLanguage = () => {
+	const browserLanguages = navigator.languages;
+
+	const navigatorLanguage = () => {
+		return navigator.language;
+	};
+
+	const rawLocale = (browserLanguages && browserLanguages[0]) || navigatorLanguage() || navigator.userLanguage || navigator.browserLanguage;
+
+	return rawLocale || "en";
+};
+
+/**
+ * Returns the locale based on the configured language Configuration#getLanguage
+ * If no language has been configured - a new locale based on browser language is returned
+ */
+const getLocale = () => {
+	if (getConfigLanguage()) {
+		return new Locale(getConfigLanguage());
+	}
+
+	return convertToLocaleOrNull(detectLanguage());
+};
+
+/**
+ * Returns the language of #getLocale return value
+ */
+const getLanguage = () => {
+	return getLocale().sLanguage;
+};
+
+export { getLocale, getLanguage };

packages/base/src/sap/ui/webcomponents/base/LocaleProvider.js

@@ -1,5 +1,5 @@
 import ResourceBundle from "@ui5/webcomponents-core/dist/sap/base/i18n/ResourceBundle";
-import { getLanguage } from "./Configuration";
+import { getLanguage } from "./LocaleProvider";
 import { registerModuleContent } from "./ResourceLoaderOverrides";
 import { fetchJsonOnce } from "./util/FetchHelper";
 

packages/base/src/sap/ui/webcomponents/base/ResourceBundle.js

@@ -5,6 +5,9 @@ const resources = new Map();
 // date formatters from the core do not know about this new mechanism of fetching assets,
 // but we can use the sap.ui.loader._.getModuleContent as a hook and provide the preloaded data,
 // so that a sync request via jQuery is never triggered.
+window.sap = window.sap || {};
+window.sap.ui = window.sap.ui || {};
+
 sap.ui.loader = sap.ui.loader || {};
 sap.ui.loader._ = sap.ui.loader._ || {};
 const getModulecontentOrig = sap.ui.loader._.getModuleContent;

packages/base/src/sap/ui/webcomponents/base/ResourceLoaderOverrides.js

@@ -1,4 +1,3 @@
-import "../LocaleDataConfigurationProvider";
 import UniversalDate from "@ui5/webcomponents-core/dist/sap/ui/core/date/UniversalDate";
 import Locale from "@ui5/webcomponents-core/dist/sap/ui/core/Locale";
 import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData";

packages/base/src/sap/ui/webcomponents/base/dates/CalendarUtils.js

@@ -1,10 +1,12 @@
 import { inject as injectCore } from "@ui5/webcomponents-core/dist/sap/ui/core/Core";
 import * as Configuration from "../Configuration";
+import * as FormatSettings from "../FormatSettings";
 
 /**
  * Shim for the OpenUI5 core
  * @deprecated - do not add new functionality
  */
+
 const Core = {
 	/**
 	 * @deprecated - must be here for compatibility
@@ -18,13 +20,14 @@ const Core = {
 	 */
 	getLibraryResourceBundle() {
 	},
+
+	getFormatSettings() {
+		return FormatSettings;
+	},
 };
 
-if (!window.sap) {
-	window.sap = {
-		ui: {},
-	};
-}
+window.sap = window.sap || {};
+window.sap.ui = window.sap.ui || {};
 
 /**
  * @deprecated

packages/base/src/sap/ui/webcomponents/base/shims/Core-shim.js

@@ -71,9 +71,6 @@ var jQuery = {
 		// Return the modified object
 		return target;
 	},
-	isEmptyObject: function(obj) {
-		return Object.keys(obj).length === 0;
-	},
 	ajaxSettings: {
 		converters: {
 			"text json": (data) => JSON.parse( data + "" )