DON'T MERGE (yet): Added I18n support: German and Dutch languages

package.json

@@ -12,7 +12,8 @@
  "lint": "eslint src",
  "test": "jest ./tests",
  "test:e2e": "cypress run",
- "deploy": "npm run build && firebase deploy"
+ "deploy": "npm run build && firebase deploy",
+ "i18n": "i18nline synch"
  },
  "eslintConfig": {
  "extends": "eslint-config-synacor"
@@ -31,8 +32,10 @@
  "preact-render-spy": "^1.2.1"
  },
  "dependencies": {
+ "i18nline": "^2.0.1",
  "preact": "^8.2.6",
  "preact-compat": "^3.17.0",
+ "preact-i18nline": "^2.0.0",
  "preact-router": "^2.5.7"
  },
  "jest": {
@@ -58,5 +61,11 @@
  "^create-react-class$": "preact-compat/lib/create-react-class",
  "^react-addons-css-transition-group$": "preact-css-transition-group"
  }
+ },
+ "i18n": {
+ "autoTranslateTags": [
+ "h1",
+ "Link"
+ ]
  }
 }

preact.config.js

@@ -0,0 +1,16 @@
+export default (config, env, helpers) => {
+ // Use Preact CLI's helpers object to get the babel-loader
+ let babel = helpers.getLoadersByName(config, 'babel-loader')[0].rule;
+ // Update the loader config to include preact-i18nline
+ babel.loader = [
+ { // create an entry for the old loader
+ loader: babel.loader,
+ options: babel.options
+ },
+ { // add the preact-i18nline webpack loader
+ loader: 'preact-i18nline/webpack-loader'
+ }
+ ];
+ // remove the old loader options
+ delete babel.options;
+};

src/components/LanguagePicker/index.js

@@ -0,0 +1,29 @@
+import { h, Component } from 'preact';
+import I18n from 'i18nline';
+import style from './style';
+
+const locales = () => [
+ { k: 'en', v: I18n.t('English') },
+ { k: 'de', v: I18n.t('German') },
+ { k: 'nl', v: I18n.t('Dutch') }
+];
+
+const alphabetic = (x,y) => (x.v < y.v ? -1 : x.v > y.v ? 1 : 0);
+
+export default class LanguagePicker extends Component {
+ changeListener = (e) => {
+ const lang = e.target.options[e.target.selectedIndex].value;
+ this.props.changeLocale && this.props.changeLocale(lang, e);
+ e.preventDefault();
+ }
+
+ render (props) {
+ return (
+ <select class={style.languagePicker} onChange={this.changeListener}>
+ {locales().sort(alphabetic).map(x => (
+ <option selected={x.k === (props.locale || props.defaultLocale)} value={x.k}>{x.v}</option>
+ ))}
+ </select>
+ );
+ }
+}

src/components/LanguagePicker/style.css

@@ -0,0 +1,4 @@
+.languagePicker {
+ margin: auto 20px auto auto;
+ width: 100px;
+}

src/components/app.js

@@ -1,20 +1,37 @@
 import { h, Component } from 'preact';
 import { Router } from 'preact-router';
+import I18n from '../i18n';
 import Header from './header';
+import LanguagePicker from './LanguagePicker';
 import Home from '../routes/home';
 import New from '../routes/new';
 import Best from '../routes/best';
 import Item from '../routes/item';
 
 if (module.hot) {
  require('preact/debug');
+ ((typeof window === 'object') && window || global).I18n = I18n;
 }
 
 export default class App extends Component {
+ localeChanged = (locale) => {
+ this.setState({ locale });
+ }
+
+ componentDidMount() {
+ I18n.on('change', this.localeChanged);
+ }
+
+ componentWillUnmount() {
+ I18n.removeListener('change', this.localeChanged);
+ }
+
  render() {
  return (
  <div id="app">
- <Header />
+ <Header>
+ <LanguagePicker {...I18n} />
+ </Header>
  <Router>
  <Home path="/:page?" />
  <New path="/new/:page?" />

src/components/header/index.js

@@ -1,5 +1,6 @@
 import { h, Component } from 'preact';
 import { Link } from 'preact-router/match';
+import I18n from 'i18nline/lib/i18n';
 import style from './style';
 
 export default class Header extends Component {
@@ -8,10 +9,11 @@ export default class Header extends Component {
  <header class={style.header}>
  <h1>Preact HNPWA</h1>
  <nav>
- <Link activeClassName={style.active} href="/">Top</Link>
- <Link activeClassName={style.active} href="/new">New</Link>
- <Link activeClassName={style.active} href="/best">Best</Link>
+ <Link translate="yes" activeClassName={style.active} href="/">Top</Link>
+ <Link translate="yes" activeClassName={style.active} href="/new">New</Link>
+ <Link translate="yes" activeClassName={style.active} href="/best">Best</Link>
  </nav>
+ {this.props.children}
  </header>
  );
  }

src/i18n/de.json

@@ -0,0 +1,14 @@
+{
+ "de": {
+ "best_e9c34252": "Beste",
+ "comments_count_0_no_comments_comments_count_1_1_co_56eb6f20": "%{comments_count_0_no_comments} %{comments_count_1_1_comment} %{comments_count_1_comments_count_comments}",
+ "dutch_6d05cee5": "Niederländisch",
+ "english_c60612e2": "Englisch",
+ "german_3ec99bbb": "Deutsch",
+ "item_title_item_domain_2ba8bfc4": "* %{item_title} **(%{item_domain})** *",
+ "more_cf9cc661": "Mehr",
+ "new_13daf639": "Neu",
+ "preact_hnpwa_f9c867d6": "Preact HNPWA",
+ "top_66e0adb6": "Top"
+ }
+}

src/i18n/default.json

@@ -0,0 +1,14 @@
+{
+ "en": {
+ "best_e9c34252": "Best",
+ "comments_count_0_no_comments_comments_count_1_1_co_56eb6f20": "%{comments_count_0_no_comments} %{comments_count_1_1_comment} %{comments_count_1_comments_count_comments}",
+ "dutch_6d05cee5": "Dutch",
+ "english_c60612e2": "English",
+ "german_3ec99bbb": "German",
+ "item_title_item_domain_2ba8bfc4": "* %{item_title} **(%{item_domain})** *",
+ "more_cf9cc661": "More",
+ "new_13daf639": "New",
+ "preact_hnpwa_f9c867d6": "Preact HNPWA",
+ "top_66e0adb6": "Top"
+ }
+}

src/i18n/en.json

@@ -0,0 +1,14 @@
+{
+ "en": {
+ "best_e9c34252": "Best",
+ "comments_count_0_no_comments_comments_count_1_1_co_56eb6f20": "%{comments_count_0_no_comments} %{comments_count_1_1_comment} %{comments_count_1_comments_count_comments}",
+ "dutch_6d05cee5": "Dutch",
+ "english_c60612e2": "English",
+ "german_3ec99bbb": "German",
+ "item_title_item_domain_2ba8bfc4": "* %{item_title} **(%{item_domain})** *",
+ "more_cf9cc661": "More",
+ "new_13daf639": "New",
+ "preact_hnpwa_f9c867d6": "Preact HNPWA",
+ "top_66e0adb6": "Top"
+ }
+}

src/i18n/nl.json

@@ -0,0 +1,14 @@
+{
+ "nl": {
+ "best_e9c34252": "Beste",
+ "comments_count_0_no_comments_comments_count_1_1_co_56eb6f20": "%{comments_count_0_no_comments} %{comments_count_1_1_comment} %{comments_count_1_comments_count_comments}",
+ "dutch_6d05cee5": "Nederlands",
+ "english_c60612e2": "Engels",
+ "german_3ec99bbb": "Duits",
+ "item_title_item_domain_2ba8bfc4": "* %{item_title} **(%{item_domain})** *",
+ "more_cf9cc661": "Meer",
+ "new_13daf639": "Nieuw",
+ "preact_hnpwa_f9c867d6": "Preact HNPWA",
+ "top_66e0adb6": "Top"
+ }
+}