Add language picker in settings and translate some header strings. fixes #170

.linguirc.json

@@ -1,5 +1,5 @@
 {
-	"compileNamespace": "es6",
+	"compileNamespace": "es",
 	"localeDir": "src/locales/",
 	"srcPathDirs": ["src/components"],
 	"format": "po",

src/components/Console.jsx

@@ -1,8 +1,5 @@
 import { h, Component } from 'preact';
-import { PureComponent } from 'preact-compat';
-
 import { Inspector, chromeDark } from 'react-inspector';
-
 import { Trans } from '@lingui/macro';
 
 class LogRow extends Component {
@@ -56,7 +53,7 @@ export class Console extends Component {
 						onDblClick={onConsoleHeaderDblClick}
 					>
 						<span class="code-wrap__header-label">
-							Console (<span>{logs.length}</span>)
+							<Trans>Console</Trans> (<span>{logs.length}</span>)
 						</span>
 						<div class="code-wrap__header-right-options">
 							<a

src/components/MainHeader.jsx

@@ -1,11 +1,15 @@
 import { h } from 'preact';
 import { Button } from './common';
+import { Trans, t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
 
 const DEFAULT_PROFILE_IMG =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
 
 export function MainHeader(props) {
 	return (
+		<I18n>
+			{({ i18n }) => (
 				<div class="main-header">
 					<input
 						type="text"
@@ -24,7 +28,8 @@ export function MainHeader(props) {
 						>
 							<svg style="width: 14px; height: 14px;">
 								<use xlinkHref="#play-icon" />
-					</svg>Run
+							</svg>
+							<Trans>Run</Trans>
 						</button>
 
 						{!this.props.isFileMode && (
@@ -33,12 +38,14 @@ export function MainHeader(props) {
 								data-event-category="ui"
 								data-event-action="addLibraryButtonClick"
 								class="btn--dark flex-v-center hint--rounded hint--bottom-left"
-						aria-label="Add a JS/CSS library"
+								aria-label={i18n._(t`Add a JS/CSS library`)}
 							>
-						Add library{' '}
+								<Trans>Add library</Trans>{' '}
 								<span
 									id="js-external-lib-count"
-							style={`display:${props.externalLibCount ? 'inline' : 'none'}`}
+									style={`display:${
+										props.externalLibCount ? 'inline' : 'none'
+									}`}
 									class="count-label"
 								>
 									{props.externalLibCount}
@@ -56,7 +63,8 @@ export function MainHeader(props) {
 								viewBox="0 0 24 24"
 							>
 								<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
-					</svg>New
+							</svg>
+							<Trans>New</Trans>
 						</button>
 						<button
 							id="saveBtn"
@@ -75,7 +83,7 @@ export function MainHeader(props) {
 							<svg class="btn-loader" width="15" height="15" stroke="#fff">
 								<use xlinkHref="#loader-icon" />
 							</svg>
-					Save
+							<Trans>Save</Trans>
 						</button>
 						<button
 							id="openItemsBtn"
@@ -94,7 +102,7 @@ export function MainHeader(props) {
 							<svg class="btn-loader" width="15" height="15" stroke="#fff">
 								<use xlinkHref="#loader-icon" />
 							</svg>
-					Open
+							<Trans>Open</Trans>
 						</button>
 						<Button
 							onClick={props.loginBtnHandler}
@@ -103,7 +111,7 @@ export function MainHeader(props) {
 							class="hide-on-login btn--dark flex  flex-v-center  hint--rounded  hint--bottom-left"
 							aria-label="Login/Signup"
 						>
-					Login/Signup
+							<Trans>Login</Trans>/<Trans>Signup</Trans>
 						</Button>
 						<Button
 							onClick={props.profileBtnHandler}
@@ -115,11 +123,15 @@ export function MainHeader(props) {
 							<img
 								id="headerAvatarImg"
 								width="20"
-						src={props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''}
+								src={
+									props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''
+								}
 								class="main-header__avatar-img"
 							/>
 						</Button>
 					</div>
 				</div>
+			)}
+		</I18n>
 	);
 }

src/components/Settings.jsx

@@ -320,6 +320,22 @@ export default class Settings extends Component {
 						stopped.
 					</div>
 				</p>
+
+				<p>
+					<label class="line">
+						Language
+						<select
+							data-setting="lang"
+							value={prefs.lang}
+							onChange={this.updateSetting.bind(this)}
+						>
+							<option value="en">English</option>
+							<option value="hi">Hindi</option>
+							<option value="ja">Japanese</option>
+							<option value="sa">Sanskrit</option>
+						</select>
+					</label>
+				</p>
 			</div>
 		);
 	}

src/components/app.jsx

@@ -64,13 +64,13 @@ import {
 	SHOW_KEYBOARD_SHORTCUTS_EVENT
 } from '../commands';
 import { commandPaletteService } from '../commandPaletteService';
-// import hiTranslations from '../locales/hi/messages';
+
 import { I18nProvider } from '@lingui/react';
-const hiTranslations = {};
+
 if (module.hot) {
 	require('preact/debug');
 }
-const catalogs = { hi: hiTranslations };
+
 const LocalStorageKeys = {
 	LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen',
 	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
@@ -130,7 +130,8 @@ export default class App extends Component {
 			lineWrap: true,
 			infiniteLoopTimeout: 1000,
 			layoutMode: 2,
-			isJs13kModeOn: false
+			isJs13kModeOn: false,
+			lang: 'en'
 		};
 		this.prefs = {};
 
@@ -253,6 +254,22 @@ export default class App extends Component {
 		});
 	}
 
+	getLanguageDefinition() {
+		console.log('🇯🇲 fetching defninition');
+		const { lang } = this.state.prefs;
+		if (!lang || lang === 'en') {
+			return {};
+		} else if (lang === 'hi') {
+			const def = require('../locales/hi/messages');
+
+			return { hi: def.default };
+		} else if (lang === 'ja') {
+			const def = require('../locales/ja/messages');
+
+			return { ja: def.default };
+		}
+	}
+
 	incrementUnsavedChanges() {
 		this.setState({ unsavedEditCount: this.state.unsavedEditCount + 1 });
 
@@ -1398,7 +1415,10 @@ export default class App extends Component {
 
 	render() {
 		return (
-			<I18nProvider language="hi" catalogs={catalogs}>
+			<I18nProvider
+				language={this.state.prefs.lang}
+				catalogs={this.getLanguageDefinition()}
+			>
 				<div class={this.getRootClasses()}>
 					<div class="main-container">
 						<MainHeader