Update I18n modules to support loading automatically bundled CLDR data

package.json

@@ -44,6 +44,7 @@
     "@types/cldrjs": "0.4.20",
     "@types/globalize": "0.0.34",
     "@webcomponents/webcomponentsjs": "1.1.0",
+    "cldr-core": "36.0.0",
     "cldrjs": "0.5.0",
     "cross-fetch": "3.0.2",
     "css-select-umd": "1.3.0-rc0",
@@ -52,6 +53,7 @@
     "immutable": "3.8.2",
     "intersection-observer": "0.4.2",
     "pepjs": "0.4.2",
+    "requirejs-text": "2.0.15",
     "resize-observer-polyfill": "1.5.0",
     "tslib": "1.9.3",
     "web-animations-js": "2.3.1",
@@ -71,7 +73,7 @@
     "benchmark": "^1.0.0",
     "bootstrap": "^3.3.7",
     "chromedriver": "2.40.0",
-    "cldr-data": "32.0.1",
+    "cldr-data": "36.0.0",
     "codecov": "~3.0.4",
     "cpx": "~1.5.0",
     "husky": "~0.14.3",

src/core/decorators/inject.ts

@@ -33,6 +33,26 @@ export interface InjectConfig {
 	getProperties: GetProperties;
 }
 
+export function getInjector(instance: WidgetBase & { own: Function }, name: RegistryLabel) {
+	const injectorItem = instance.registry.getInjector(name);
+	if (injectorItem) {
+		const { injector, invalidator } = injectorItem;
+		const registeredInjectors = registeredInjectorsMap.get(instance) || [];
+		if (registeredInjectors.length === 0) {
+			registeredInjectorsMap.set(instance, registeredInjectors);
+		}
+		if (registeredInjectors.indexOf(injectorItem) === -1) {
+			instance.own(
+				invalidator.on('invalidate', () => {
+					instance.invalidate();
+				})
+			);
+			registeredInjectors.push(injectorItem);
+		}
+		return injector;
+	}
+}
+
 /**
  * Decorator retrieves an injector from an available registry using the name and
  * calls the `getProperties` function with the payload from the injector
@@ -41,23 +61,10 @@ export interface InjectConfig {
  * @param InjectConfig the inject configuration
  */
 export function inject({ name, getProperties }: InjectConfig) {
-	return handleDecorator((target, propertyKey) => {
+	return handleDecorator((target) => {
 		beforeProperties(function(this: WidgetBase & { own: Function }, properties: any) {
-			const injectorItem = this.registry.getInjector(name);
-			if (injectorItem) {
-				const { injector, invalidator } = injectorItem;
-				const registeredInjectors = registeredInjectorsMap.get(this) || [];
-				if (registeredInjectors.length === 0) {
-					registeredInjectorsMap.set(this, registeredInjectors);
-				}
-				if (registeredInjectors.indexOf(injectorItem) === -1) {
-					this.own(
-						invalidator.on('invalidate', () => {
-							this.invalidate();
-						})
-					);
-					registeredInjectors.push(injectorItem);
-				}
+			const injector = getInjector(this, name);
+			if (injector) {
 				return getProperties(injector(), properties);
 			}
 		})(target);

src/core/middleware/i18n.ts

@@ -1,12 +1,10 @@
-/* tslint:disable:interface-name */
-import i18nCore, { Bundle, formatMessage, getCachedMessages, Messages } from '../../i18n/i18n';
-import { create, invalidator, getRegistry } from '../vdom';
+import { localizeBundle, Bundle, Messages, setLocale, getCurrentLocale } from '../../i18n/i18n';
+import { create, invalidator, getRegistry, diffProperty } from '../vdom';
 import injector from './injector';
-import Map from '../../shim/Map';
 import Injector from '../Injector';
 import Registry from '../Registry';
 import { I18nProperties, LocalizedMessages, LocaleData } from '../interfaces';
-export { LocalizedMessages, I18nProperties, LocaleData } from './../interfaces';
+import { isThenable } from '../../shim/Promise';
 
 export const INJECTOR_KEY = '__i18n_injector';
 
@@ -19,96 +17,74 @@ export function registerI18nInjector(localeData: LocaleData, registry: Registry)
 	return injector;
 }
 
-const factory = create({ invalidator, injector, getRegistry }).properties<I18nProperties>();
+const factory = create({ invalidator, injector, getRegistry, diffProperty }).properties<I18nProperties>();
 
-export const i18n = factory(({ properties, middleware: { invalidator, injector, getRegistry } }) => {
+export const i18n = factory(({ properties, middleware: { invalidator, injector, getRegistry, diffProperty } }) => {
 	const i18nInjector = injector.get(INJECTOR_KEY);
 	if (!i18nInjector) {
 		const registry = getRegistry();
 		if (registry) {
 			registerI18nInjector({}, registry.base);
 		}
 	}
-	injector.subscribe(INJECTOR_KEY);
 
-	function getLocaleMessages(bundle: Bundle<Messages>): Messages | void {
-		let { locale } = properties();
-		if (!locale) {
-			const injectedLocale = injector.get<Injector<LocaleData>>(INJECTOR_KEY);
-			if (injectedLocale) {
-				locale = injectedLocale.get().locale;
+	diffProperty('locale', properties, (current, next) => {
+		const localeDataInjector = injector.get<Injector<LocaleData | undefined>>(INJECTOR_KEY);
+		let injectedLocale: string | undefined;
+		if (localeDataInjector) {
+			const injectLocaleData = localeDataInjector.get();
+			if (injectLocaleData) {
+				injectedLocale = injectLocaleData.locale;
 			}
 		}
-		locale = locale || i18nCore.locale;
-		const localeMessages = getCachedMessages(bundle, locale);
-
-		if (localeMessages) {
-			return localeMessages;
+		if (next.locale && current.locale !== next.locale) {
+			const result = setLocale({ locale: next.locale, local: true });
+			if (isThenable(result)) {
+				result.then(() => {
+					invalidator();
+				});
+				return current.locale || injectedLocale;
+			}
 		}
-
-		i18nCore(bundle, locale).then(() => {
+		if (current.locale !== next.locale) {
 			invalidator();
-		});
-	}
-
-	function resolveBundle<T extends Messages>(bundle: Bundle<T>): Bundle<T> {
-		let { i18nBundle } = properties();
-		if (i18nBundle) {
-			if (i18nBundle instanceof Map) {
-				i18nBundle = i18nBundle.get(bundle);
-
-				if (!i18nBundle) {
-					return bundle;
-				}
-			}
-
-			return i18nBundle as Bundle<T>;
 		}
-		return bundle;
-	}
+		return next.locale || injectedLocale;
+	});
 
-	function getBlankMessages<T extends Messages>(bundle: Bundle<T>): T {
-		const blank = {} as Messages;
-		return Object.keys(bundle.messages).reduce((blank, key) => {
-			blank[key] = '';
-			return blank;
-		}, blank) as T;
-	}
+	injector.subscribe(INJECTOR_KEY);
 
 	return {
-		localize<T extends Messages>(bundle: Bundle<T>, useDefaults = false): LocalizedMessages<T> {
-			let { locale } = properties();
-			bundle = resolveBundle(bundle);
-			const messages = getLocaleMessages(bundle);
-			const isPlaceholder = !messages;
-			if (!locale) {
-				const injectedLocale = injector.get<Injector<LocaleData>>(INJECTOR_KEY);
-				if (injectedLocale) {
-					locale = injectedLocale.get().locale;
+		localize<T extends Messages>(bundle: Bundle<T>): LocalizedMessages<T> {
+			let { locale = getCurrentLocale(), i18nBundle } = properties();
+			if (i18nBundle) {
+				if (i18nBundle instanceof Map) {
+					bundle = i18nBundle.get(bundle) || bundle;
+				} else {
+					bundle = i18nBundle as Bundle<T>;
 				}
 			}
-
-			const format =
-				isPlaceholder && !useDefaults
-					? () => ''
-					: (key: keyof T, options?: any) => formatMessage(bundle, key as string, options, locale);
-
-			return Object.create({
-				format,
-				isPlaceholder,
-				messages: messages || (useDefaults ? bundle.messages : getBlankMessages(bundle))
-			});
+			return localizeBundle(bundle, { locale, invalidator });
 		},
 		set(localeData?: LocaleData) {
-			const currentLocale = injector.get<Injector<LocaleData | undefined>>(INJECTOR_KEY);
-			if (currentLocale) {
-				currentLocale.set(localeData);
+			const localeDataInjector = injector.get<Injector<LocaleData | undefined>>(INJECTOR_KEY);
+			if (localeDataInjector) {
+				if (localeData && localeData.locale) {
+					const result = setLocale({ locale: localeData.locale });
+					if (isThenable(result)) {
+						result.then(() => {
+							localeDataInjector.set(localeData);
+						});
+						return;
+					}
+				}
+				localeDataInjector.set(localeData);
 			}
 		},
 		get() {
-			const currentLocale = injector.get<Injector<LocaleData | undefined>>(INJECTOR_KEY);
-			if (currentLocale) {
-				return currentLocale.get();
+			const localeDataInjector = injector.get<Injector<LocaleData | undefined>>(INJECTOR_KEY);
+			if (localeDataInjector) {
+				return localeDataInjector.get();
 			}
 		}
 	};