ENYO-6104: Add i18n to starter theme

README.md

@@ -24,10 +24,13 @@ Most of the components in the starter theme are built from base components provi
 * `ToggleIcon` - an `Icon` with `ui/Toggleable` behavior
 * `ToggleItem` - an `Item` with `ui/Toggleable` behavior
 
+There is also an internal implementation for `$L` (an `ilib` translation module) that can be used by theme components to provide translations.
+
 ### Behaviors
 
 The Enact framework has several modules that provide various behaviors.  The starter theme applies the following behaviors to the wrapped app by default:
 
+* Internationalization/localization - uses the [iLib](http://github.com/iLib-js/iLib) library to provide localized rendering
 * Resolution independence - makes sure components are the same size (relative or not) on different screen resolutions
 * Spotlight - spatial navigation with pointer or other input devices
 
@@ -55,9 +58,9 @@ git clone https://github.com/enactjs/my-theme.git uranium
 
 ### Rename
 
-Globally replace instances of `my-theme` with the package name of your theme and instances of `MyTheme` with the name of your theme.
+Globally replace instances of `my-theme` with the package name of your theme, instances of `MyTheme` with the name of your theme, and instances of `ILIB_MY_THEME_PATH`.
 
-Following the "uranium" example, use `uranium` and `Uranium`, respectively.
+Following the "uranium" example, use `uranium` and `Uranium`, and `ILIB_URANIUM_PATH` respectively.
 
 Theme developers may also want to change the name of the default skin as part of the rename process.  Globally replace `my-skin` with something else, such as `proton`, and update the `variables-my-skin.less` and `colors-my-skin.less` file names as appropriate.
 

ThemeDecorator/ThemeDecorator.js

@@ -5,8 +5,9 @@
  */
 
 import {addAll} from '@enact/core/keymap';
-import kind from '@enact/core/kind';
 import hoc from '@enact/core/hoc';
+import I18nDecorator from '@enact/i18n/I18nDecorator';
+import kind from '@enact/core/kind';
 import React from 'react';
 import {ResolutionDecorator} from '@enact/ui/resolution';
 import {FloatingLayerDecorator} from '@enact/ui/FloatingLayer';
@@ -25,6 +26,7 @@ import css from './ThemeDecorator.module.less';
  */
 const defaultConfig = {
 	float: true,
+	i18n: true,
 	noAutoFocus: false,
 	ri: {
 		screenTypes
@@ -53,13 +55,14 @@ const defaultConfig = {
  * @public
  */
 const ThemeDecorator = hoc(defaultConfig, (config, Wrapped) => {
-	const {float, noAutoFocus, ri, skin, spotlight} = config;
+	const {float, i18n, noAutoFocus, ri, skin, spotlight} = config;
 
 	const bgClassName = 'enact-fit';
 
 	let App = Wrapped;
 	if (float) App = FloatingLayerDecorator({wrappedClassName: bgClassName}, App);
 	if (ri) App = ResolutionDecorator(ri, App);
+	if (i18n) App = I18nDecorator(App);
 	if (spotlight) App = SpotlightRootDecorator({noAutoFocus}, App);
 	if (skin) App = Skinnable({defaultSkin: 'my-skin'}, App);
 

internal/$L/$L.js

@@ -0,0 +1,98 @@
+/* global ILIB_MY_THEME_PATH */
+
+import {getIStringFromBundle} from '@enact/i18n/src/resBundle';
+import ResBundle from 'ilib/lib/ResBundle';
+
+// The ilib.ResBundle for the active locale used by $L
+let resBundle;
+
+/**
+ * Returns the current ilib.ResBundle
+ *
+ * @returns {ilib.ResBundle} Current ResBundle
+ */
+function getResBundle () {
+	return resBundle;
+}
+
+/**
+ * Creates a new ilib.ResBundle for string translation
+ *
+ * @param  {ilib.Locale} locale Locale for ResBundle
+ *
+ * @returns {Promise|ResBundle} Resolves with a new ilib.ResBundle
+ */
+function createResBundle (options) {
+	let opts = options;
+
+	if (typeof ILIB_MY_THEME_PATH !== 'undefined') {
+		opts = {
+			loadParams: {
+				root: ILIB_MY_THEME_PATH
+			},
+			...options
+		};
+	}
+
+	if (!opts.onLoad) return;
+
+	// eslint-disable-next-line no-new
+	new ResBundle({
+		...opts,
+		onLoad: (bundle) => {
+			opts.onLoad(bundle || null);
+		}
+	});
+}
+
+/**
+ * Deletes the current bundle object of strings and clears the cache.
+ * @returns {undefined}
+ */
+function clearResBundle () {
+	delete ResBundle.strings;
+	delete ResBundle.sysres;
+	resBundle = null;
+}
+
+/**
+ * Set the locale for the strings that $L loads. This may reload the
+ * string resources if necessary.
+ *
+ * @param {string} spec the locale specifier
+ * @returns {ilib.ResBundle} Current ResBundle
+ */
+function setResBundle (bundle) {
+	return (resBundle = bundle);
+}
+
+function toIString (str) {
+	let rb = getResBundle();
+
+	if (!rb) {
+		createResBundle({sync: true, onLoad: setResBundle});
+	}
+
+	return getIStringFromBundle(str, rb);
+}
+
+/**
+ * Maps a string or key/value object to a translated string for the current locale.
+ *
+ * @function
+ * @memberof i18n/$L
+ * @param  {String|Object} str Source string
+ *
+ * @returns {String} The translated string
+ */
+function $L (str) {
+	return String(toIString(str));
+}
+
+export default $L;
+export {
+	$L,
+	clearResBundle,
+	createResBundle,
+	setResBundle
+};

internal/$L/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "$L.js"
+}

package.json

@@ -37,5 +37,11 @@
     "prop-types": "^15.6.2",
     "ramda": "^0.25.0",
     "react": "^16.0.0"
+  },
+  "peerDependencies": {
+    "ilib": "^14.2.0"
+  },
+  "devDependencies": {
+    "ilib": "^14.2.0"
   }
 }

resources/ilibmanifest.json

@@ -0,0 +1,3 @@
+{
+	"files": []
+}