From cc3c26c1dd85f1e05c33c9bc2091d2d2a3076af0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Fri, 3 Apr 2020 18:20:50 +0200 Subject: [PATCH 1/9] Remove old examples --- fluent-react/examples/README.md | 19 ----- .../examples/async-messages/.gitignore | 2 - .../examples/async-messages/package.json | 24 ------ .../examples/async-messages/public/en-US.ftl | 1 - .../examples/async-messages/public/index.html | 12 --- .../examples/async-messages/public/pl.ftl | 1 - .../examples/async-messages/src/App.js | 12 --- .../examples/async-messages/src/index.js | 12 --- .../examples/async-messages/src/l10n.js | 74 ------------------- .../examples/change-language/.gitignore | 2 - .../examples/change-language/package.json | 23 ------ .../change-language/public/index.html | 12 --- .../examples/change-language/src/App.js | 28 ------- .../examples/change-language/src/index.js | 12 --- .../examples/change-language/src/l10n.js | 66 ----------------- .../examples/fallback-sync/.gitignore | 2 - .../examples/fallback-sync/package.json | 23 ------ .../examples/fallback-sync/public/index.html | 12 --- .../examples/fallback-sync/src/App.js | 28 ------- .../examples/fallback-sync/src/index.js | 13 ---- .../examples/fallback-sync/src/l10n.js | 19 ----- fluent-react/examples/hello-world/.gitignore | 2 - .../examples/hello-world/package.json | 23 ------ .../examples/hello-world/public/index.html | 12 --- fluent-react/examples/hello-world/src/App.js | 17 ----- .../examples/hello-world/src/index.js | 13 ---- fluent-react/examples/hello-world/src/l10n.js | 28 ------- fluent-react/examples/higher-order/.gitignore | 2 - .../examples/higher-order/package.json | 23 ------ .../examples/higher-order/public/index.html | 12 --- fluent-react/examples/higher-order/src/App.js | 19 ----- .../examples/higher-order/src/index.js | 13 ---- .../examples/higher-order/src/l10n.js | 28 ------- fluent-react/examples/html-markup/.gitignore | 2 - .../examples/html-markup/package.json | 23 ------ .../examples/html-markup/public/index.html | 20 ----- fluent-react/examples/html-markup/src/App.js | 29 -------- .../examples/html-markup/src/index.js | 13 ---- fluent-react/examples/html-markup/src/l10n.js | 36 --------- fluent-react/examples/redux-async/.gitignore | 2 - .../examples/redux-async/package.json | 28 ------- .../examples/redux-async/public/en-US.ftl | 3 - .../examples/redux-async/public/index.html | 12 --- .../examples/redux-async/public/pl.ftl | 3 - fluent-react/examples/redux-async/src/App.js | 39 ---------- .../examples/redux-async/src/actions.js | 49 ------------ .../examples/redux-async/src/index.js | 16 ---- fluent-react/examples/redux-async/src/l10n.js | 35 --------- .../examples/redux-async/src/reducer.js | 27 ------- .../examples/redux-async/src/store.js | 14 ---- fluent-react/examples/redux-sync/.gitignore | 2 - fluent-react/examples/redux-sync/package.json | 27 ------- .../examples/redux-sync/public/index.html | 12 --- fluent-react/examples/redux-sync/src/App.js | 36 --------- .../examples/redux-sync/src/actions.js | 38 ---------- fluent-react/examples/redux-sync/src/index.js | 16 ---- fluent-react/examples/redux-sync/src/l10n.js | 34 --------- .../examples/redux-sync/src/reducer.js | 19 ----- fluent-react/examples/redux-sync/src/store.js | 13 ---- fluent-react/examples/text-input/.gitignore | 2 - fluent-react/examples/text-input/package.json | 23 ------ .../examples/text-input/public/index.html | 12 --- fluent-react/examples/text-input/src/App.js | 49 ------------ fluent-react/examples/text-input/src/index.js | 13 ---- fluent-react/examples/text-input/src/l10n.js | 32 -------- 65 files changed, 1268 deletions(-) delete mode 100644 fluent-react/examples/README.md delete mode 100644 fluent-react/examples/async-messages/.gitignore delete mode 100644 fluent-react/examples/async-messages/package.json delete mode 100644 fluent-react/examples/async-messages/public/en-US.ftl delete mode 100644 fluent-react/examples/async-messages/public/index.html delete mode 100644 fluent-react/examples/async-messages/public/pl.ftl delete mode 100644 fluent-react/examples/async-messages/src/App.js delete mode 100644 fluent-react/examples/async-messages/src/index.js delete mode 100644 fluent-react/examples/async-messages/src/l10n.js delete mode 100644 fluent-react/examples/change-language/.gitignore delete mode 100644 fluent-react/examples/change-language/package.json delete mode 100644 fluent-react/examples/change-language/public/index.html delete mode 100644 fluent-react/examples/change-language/src/App.js delete mode 100644 fluent-react/examples/change-language/src/index.js delete mode 100644 fluent-react/examples/change-language/src/l10n.js delete mode 100644 fluent-react/examples/fallback-sync/.gitignore delete mode 100644 fluent-react/examples/fallback-sync/package.json delete mode 100644 fluent-react/examples/fallback-sync/public/index.html delete mode 100644 fluent-react/examples/fallback-sync/src/App.js delete mode 100644 fluent-react/examples/fallback-sync/src/index.js delete mode 100644 fluent-react/examples/fallback-sync/src/l10n.js delete mode 100644 fluent-react/examples/hello-world/.gitignore delete mode 100644 fluent-react/examples/hello-world/package.json delete mode 100644 fluent-react/examples/hello-world/public/index.html delete mode 100644 fluent-react/examples/hello-world/src/App.js delete mode 100644 fluent-react/examples/hello-world/src/index.js delete mode 100644 fluent-react/examples/hello-world/src/l10n.js delete mode 100644 fluent-react/examples/higher-order/.gitignore delete mode 100644 fluent-react/examples/higher-order/package.json delete mode 100644 fluent-react/examples/higher-order/public/index.html delete mode 100644 fluent-react/examples/higher-order/src/App.js delete mode 100644 fluent-react/examples/higher-order/src/index.js delete mode 100644 fluent-react/examples/higher-order/src/l10n.js delete mode 100644 fluent-react/examples/html-markup/.gitignore delete mode 100644 fluent-react/examples/html-markup/package.json delete mode 100644 fluent-react/examples/html-markup/public/index.html delete mode 100644 fluent-react/examples/html-markup/src/App.js delete mode 100644 fluent-react/examples/html-markup/src/index.js delete mode 100644 fluent-react/examples/html-markup/src/l10n.js delete mode 100644 fluent-react/examples/redux-async/.gitignore delete mode 100644 fluent-react/examples/redux-async/package.json delete mode 100644 fluent-react/examples/redux-async/public/en-US.ftl delete mode 100644 fluent-react/examples/redux-async/public/index.html delete mode 100644 fluent-react/examples/redux-async/public/pl.ftl delete mode 100644 fluent-react/examples/redux-async/src/App.js delete mode 100644 fluent-react/examples/redux-async/src/actions.js delete mode 100644 fluent-react/examples/redux-async/src/index.js delete mode 100644 fluent-react/examples/redux-async/src/l10n.js delete mode 100644 fluent-react/examples/redux-async/src/reducer.js delete mode 100644 fluent-react/examples/redux-async/src/store.js delete mode 100644 fluent-react/examples/redux-sync/.gitignore delete mode 100644 fluent-react/examples/redux-sync/package.json delete mode 100644 fluent-react/examples/redux-sync/public/index.html delete mode 100644 fluent-react/examples/redux-sync/src/App.js delete mode 100644 fluent-react/examples/redux-sync/src/actions.js delete mode 100644 fluent-react/examples/redux-sync/src/index.js delete mode 100644 fluent-react/examples/redux-sync/src/l10n.js delete mode 100644 fluent-react/examples/redux-sync/src/reducer.js delete mode 100644 fluent-react/examples/redux-sync/src/store.js delete mode 100644 fluent-react/examples/text-input/.gitignore delete mode 100644 fluent-react/examples/text-input/package.json delete mode 100644 fluent-react/examples/text-input/public/index.html delete mode 100644 fluent-react/examples/text-input/src/App.js delete mode 100644 fluent-react/examples/text-input/src/index.js delete mode 100644 fluent-react/examples/text-input/src/l10n.js diff --git a/fluent-react/examples/README.md b/fluent-react/examples/README.md deleted file mode 100644 index 25367a71b..000000000 --- a/fluent-react/examples/README.md +++ /dev/null @@ -1,19 +0,0 @@ -# fluent-react examples - -These tiny React apps demonstrate how `fluent-react` can integrate with React. -To run each example, `cd` into that folder and run the following commands: - - npm install - npm start - -__Note__: Because these examples require your local version of `fluent-react`, -you need to build that first. - -In the root of this git repository (`fluent.js/`), run: - - npm install - -Then in `fluent.js/fluent-react/`, run: - - npm install - make diff --git a/fluent-react/examples/async-messages/.gitignore b/fluent-react/examples/async-messages/.gitignore deleted file mode 100644 index ba70f3893..000000000 --- a/fluent-react/examples/async-messages/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.cache -dist diff --git a/fluent-react/examples/async-messages/package.json b/fluent-react/examples/async-messages/package.json deleted file mode 100644 index 33c807d54..000000000 --- a/fluent-react/examples/async-messages/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "fluent-react-example-async-messages", - "version": "0.1.0", - "private": true, - "scripts": { - "start": "parcel serve public/index.html", - "build": "parcel build public/index.html" - }, - "dependencies": { - "delay": "^2.0.0", - "fluent": "^0.8.0", - "fluent-langneg": "^0.1.0", - "fluent-react": "file:../../", - "react": "^16.3.2", - "react-dom": "^16.3.3" - }, - "devDependencies": { - "parcel-bundler": "^1.9.7" - }, - "engines": { - "node": ">=10.0.0", - "browsers": "Firefox >= 57" - } -} diff --git a/fluent-react/examples/async-messages/public/en-US.ftl b/fluent-react/examples/async-messages/public/en-US.ftl deleted file mode 100644 index f0fd75d00..000000000 --- a/fluent-react/examples/async-messages/public/en-US.ftl +++ /dev/null @@ -1 +0,0 @@ -title = Hello, world! diff --git a/fluent-react/examples/async-messages/public/index.html b/fluent-react/examples/async-messages/public/index.html deleted file mode 100644 index 3ad23b31c..000000000 --- a/fluent-react/examples/async-messages/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Async messages - a fluent-react example - - -
- - - diff --git a/fluent-react/examples/async-messages/public/pl.ftl b/fluent-react/examples/async-messages/public/pl.ftl deleted file mode 100644 index d7a365eb9..000000000 --- a/fluent-react/examples/async-messages/public/pl.ftl +++ /dev/null @@ -1 +0,0 @@ -title = Witaj świecie! diff --git a/fluent-react/examples/async-messages/src/App.js b/fluent-react/examples/async-messages/src/App.js deleted file mode 100644 index 104da4098..000000000 --- a/fluent-react/examples/async-messages/src/App.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Localized } from 'fluent-react/compat'; - -export default function App() { - return ( -
- -

Something went wrong.

- -
- ); -} diff --git a/fluent-react/examples/async-messages/src/index.js b/fluent-react/examples/async-messages/src/index.js deleted file mode 100644 index a7be9495e..000000000 --- a/fluent-react/examples/async-messages/src/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import { AppLocalizationProvider } from './l10n'; -import App from './App'; - -ReactDOM.render( - - - , - document.getElementById('root') -); diff --git a/fluent-react/examples/async-messages/src/l10n.js b/fluent-react/examples/async-messages/src/l10n.js deleted file mode 100644 index 8ba39a995..000000000 --- a/fluent-react/examples/async-messages/src/l10n.js +++ /dev/null @@ -1,74 +0,0 @@ -import React, { Component } from 'react'; -import delay from 'delay'; - -import { FluentBundle } from 'fluent/compat'; -import { LocalizationProvider } from 'fluent-react/compat'; -import { negotiateLanguages } from 'fluent-langneg/compat'; - -// Hand off handling FTL assets to Parcel. -import ftl from '../public/*.ftl'; - -async function fetchMessages(locale) { - const response = await fetch(ftl[locale]); - const messages = await response.text(); - - await delay(1000); - return { [locale]: messages }; -} - -async function createMessagesGenerator(currentLocales) { - const fetched = await Promise.all( - currentLocales.map(fetchMessages) - ); - const messages = fetched.reduce( - (obj, cur) => Object.assign(obj, cur) - ); - - return function* generateBundles() { - for (const locale of currentLocales) { - const bundle = new FluentBundle(locale); - bundle.addMessages(messages[locale]); - yield bundle; - } - } -} - -export class AppLocalizationProvider extends Component { - constructor(props) { - super(props); - - const { userLocales } = props; - - const currentLocales = negotiateLanguages( - userLocales, - ['en-US', 'pl'], - { defaultLocale: 'en-US' } - ); - - this.state = { - currentLocales, - }; - } - - async componentWillMount() { - const { currentLocales } = this.state; - const generateBundles = await createMessagesGenerator(currentLocales); - this.setState({ bundles: generateBundles() }); - } - - render() { - const { children } = this.props; - const { bundles } = this.state; - - if (!bundles) { - // Show a loader. - return
…
; - } - - return ( - - {children} - - ); - } -} diff --git a/fluent-react/examples/change-language/.gitignore b/fluent-react/examples/change-language/.gitignore deleted file mode 100644 index ba70f3893..000000000 --- a/fluent-react/examples/change-language/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.cache -dist diff --git a/fluent-react/examples/change-language/package.json b/fluent-react/examples/change-language/package.json deleted file mode 100644 index a9754cf8d..000000000 --- a/fluent-react/examples/change-language/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "fluent-react-example-change-language", - "version": "0.1.0", - "private": true, - "scripts": { - "start": "parcel serve public/index.html", - "build": "parcel build public/index.html" - }, - "dependencies": { - "fluent": "^0.8.0", - "fluent-langneg": "^0.1.0", - "fluent-react": "file:../../", - "react": "^16.3.2", - "react-dom": "^16.3.3" - }, - "devDependencies": { - "parcel-bundler": "^1.9.7" - }, - "engines": { - "node": ">=10.0.0", - "browsers": "Firefox >= 57" - } -} diff --git a/fluent-react/examples/change-language/public/index.html b/fluent-react/examples/change-language/public/index.html deleted file mode 100644 index a33b4923d..000000000 --- a/fluent-react/examples/change-language/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Change language - a fluent-react example - - -
- - - diff --git a/fluent-react/examples/change-language/src/App.js b/fluent-react/examples/change-language/src/App.js deleted file mode 100644 index 5d4756640..000000000 --- a/fluent-react/examples/change-language/src/App.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { Localized } from 'fluent-react/compat'; - -export default function App(props) { - const { currentLocales, handleLocaleChange } = props; - - const [current] = currentLocales; - const available = ['en-US', 'pl']; - const next = available[(available.indexOf(current) + 1) % available.length]; - - return ( -
- -

Hello, world!

- - - -

{'Current locale: { $locale }'}

- - - - - -
- ); -} diff --git a/fluent-react/examples/change-language/src/index.js b/fluent-react/examples/change-language/src/index.js deleted file mode 100644 index a7be9495e..000000000 --- a/fluent-react/examples/change-language/src/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import { AppLocalizationProvider } from './l10n'; -import App from './App'; - -ReactDOM.render( - - - , - document.getElementById('root') -); diff --git a/fluent-react/examples/change-language/src/l10n.js b/fluent-react/examples/change-language/src/l10n.js deleted file mode 100644 index 0094672e1..000000000 --- a/fluent-react/examples/change-language/src/l10n.js +++ /dev/null @@ -1,66 +0,0 @@ -import React, { cloneElement, Children, Component } from 'react'; - -import { FluentBundle } from 'fluent/compat'; -import { LocalizationProvider } from 'fluent-react/compat'; -import { negotiateLanguages } from 'fluent-langneg/compat'; - -const MESSAGES_ALL = { - 'pl': ` -title = Witaj świecie! -current = Bieżący język: { $locale } -change = Zmień na { $locale } - `, - 'en-US': ` -title = Hello, world! -current = Current locale: { $locale } -change = Change to { $locale } - `, -}; - -function* generateBundles(currentLocales) { - for (const locale of currentLocales) { - const bundle = new FluentBundle(locale); - bundle.addMessages(MESSAGES_ALL[locale]); - yield bundle; - } -} - -export class AppLocalizationProvider extends Component { - constructor(props) { - super(props); - - const { userLocales } = props; - - const currentLocales = negotiateLanguages( - userLocales, - ['en-US', 'pl'], - { defaultLocale: 'en-US' } - ); - - this.state = { - currentLocales - }; - } - - handleLocaleChange(locale) { - this.setState({ - currentLocales: [locale] - }); - } - - render() { - const { currentLocales } = this.state; - const child = Children.only(this.props.children); - - const l10nProps = { - currentLocales, - handleLocaleChange: locale => this.handleLocaleChange(locale) - }; - - return ( - - { cloneElement(child, l10nProps) } - - ); - } -} diff --git a/fluent-react/examples/fallback-sync/.gitignore b/fluent-react/examples/fallback-sync/.gitignore deleted file mode 100644 index ba70f3893..000000000 --- a/fluent-react/examples/fallback-sync/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.cache -dist diff --git a/fluent-react/examples/fallback-sync/package.json b/fluent-react/examples/fallback-sync/package.json deleted file mode 100644 index 459d5f0d2..000000000 --- a/fluent-react/examples/fallback-sync/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "fluent-react-example-fallback-sync", - "version": "0.1.0", - "private": true, - "scripts": { - "start": "parcel serve public/index.html", - "build": "parcel build public/index.html" - }, - "dependencies": { - "fluent": "^0.8.0", - "fluent-langneg": "^0.1.0", - "fluent-react": "file:../../", - "react": "^16.3.2", - "react-dom": "^16.3.3" - }, - "devDependencies": { - "parcel-bundler": "^1.9.7" - }, - "engines": { - "node": ">=10.0.0", - "browsers": "Firefox >= 57" - } -} diff --git a/fluent-react/examples/fallback-sync/public/index.html b/fluent-react/examples/fallback-sync/public/index.html deleted file mode 100644 index ec560fd46..000000000 --- a/fluent-react/examples/fallback-sync/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Fallback Sync - a fluent-react example - - -
- - - diff --git a/fluent-react/examples/fallback-sync/src/App.js b/fluent-react/examples/fallback-sync/src/App.js deleted file mode 100644 index 16fcec3ea..000000000 --- a/fluent-react/examples/fallback-sync/src/App.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { Localized } from 'fluent-react/compat'; - -export default function App() { - return ( -
-

- This example is hardcoded to use ['pl', 'en-US']. -

- - -

Foo

- - - -

Bar

- - - -

Baz is missing from all locales

- - - -

{'Qux is like { $baz }: missing from all locales.'}

- -
- ); -} diff --git a/fluent-react/examples/fallback-sync/src/index.js b/fluent-react/examples/fallback-sync/src/index.js deleted file mode 100644 index 88e0fb083..000000000 --- a/fluent-react/examples/fallback-sync/src/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { LocalizationProvider } from 'fluent-react/compat'; - -import { generateBundles } from './l10n'; -import App from './App'; - -ReactDOM.render( - - - , - document.getElementById('root') -); diff --git a/fluent-react/examples/fallback-sync/src/l10n.js b/fluent-react/examples/fallback-sync/src/l10n.js deleted file mode 100644 index 64d77dee7..000000000 --- a/fluent-react/examples/fallback-sync/src/l10n.js +++ /dev/null @@ -1,19 +0,0 @@ -import { FluentBundle } from 'fluent/compat'; - -const MESSAGES_ALL = { - 'pl': ` -foo = Foo po polsku - `, - 'en-US': ` -foo = Foo in English -bar = Bar in English - `, -}; - -export function* generateBundles() { - for (const locale of ['pl', 'en-US']) { - const bundle = new FluentBundle(locale); - bundle.addMessages(MESSAGES_ALL[locale]); - yield bundle; - } -} diff --git a/fluent-react/examples/hello-world/.gitignore b/fluent-react/examples/hello-world/.gitignore deleted file mode 100644 index ba70f3893..000000000 --- a/fluent-react/examples/hello-world/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.cache -dist diff --git a/fluent-react/examples/hello-world/package.json b/fluent-react/examples/hello-world/package.json deleted file mode 100644 index 2f5b384b5..000000000 --- a/fluent-react/examples/hello-world/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "fluent-react-example-hello-world", - "version": "0.1.0", - "private": true, - "scripts": { - "start": "parcel serve public/index.html", - "build": "parcel build public/index.html" - }, - "dependencies": { - "fluent": "^0.8.0", - "fluent-langneg": "^0.1.0", - "fluent-react": "file:../../", - "react": "^16.3.2", - "react-dom": "^16.3.3" - }, - "devDependencies": { - "parcel-bundler": "^1.9.7" - }, - "engines": { - "node": ">=10.0.0", - "browsers": "Firefox >= 57" - } -} diff --git a/fluent-react/examples/hello-world/public/index.html b/fluent-react/examples/hello-world/public/index.html deleted file mode 100644 index b09381573..000000000 --- a/fluent-react/examples/hello-world/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Hello world - a fluent-react example - - -
- - - diff --git a/fluent-react/examples/hello-world/src/App.js b/fluent-react/examples/hello-world/src/App.js deleted file mode 100644 index 6632300c7..000000000 --- a/fluent-react/examples/hello-world/src/App.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Localized } from 'fluent-react/compat'; - -export default function App() { - return ( -
- -

Hello, world!

- - -

- {'Today is { DATETIME($date, month: "long", day: "numeric") }.'} -

- -
- ); -} diff --git a/fluent-react/examples/hello-world/src/index.js b/fluent-react/examples/hello-world/src/index.js deleted file mode 100644 index f5205ea57..000000000 --- a/fluent-react/examples/hello-world/src/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { LocalizationProvider } from 'fluent-react/compat'; - -import { generateBundles } from './l10n'; -import App from './App'; - -ReactDOM.render( - - - , - document.getElementById('root') -); diff --git a/fluent-react/examples/hello-world/src/l10n.js b/fluent-react/examples/hello-world/src/l10n.js deleted file mode 100644 index 1393707df..000000000 --- a/fluent-react/examples/hello-world/src/l10n.js +++ /dev/null @@ -1,28 +0,0 @@ -import { FluentBundle } from 'fluent/compat'; -import { negotiateLanguages } from 'fluent-langneg/compat'; - -const MESSAGES_ALL = { - 'pl': ` -title = Witaj świecie! -today-is = Dziś jest { DATETIME($date, month: "long", day: "numeric") }. - `, - 'en-US': ` -title = Hello, world! -today-is = Today is { DATETIME($date, month: "long", day: "numeric") }. - `, -}; - -export function* generateBundles(userLocales) { - // Choose locales that are best for the user. - const currentLocales = negotiateLanguages( - userLocales, - ['en-US', 'pl'], - { defaultLocale: 'en-US' } - ); - - for (const locale of currentLocales) { - const bundle = new FluentBundle(locale); - bundle.addMessages(MESSAGES_ALL[locale]); - yield bundle; - } -} diff --git a/fluent-react/examples/higher-order/.gitignore b/fluent-react/examples/higher-order/.gitignore deleted file mode 100644 index ba70f3893..000000000 --- a/fluent-react/examples/higher-order/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.cache -dist diff --git a/fluent-react/examples/higher-order/package.json b/fluent-react/examples/higher-order/package.json deleted file mode 100644 index deef89cba..000000000 --- a/fluent-react/examples/higher-order/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "fluent-react-example-higher-order", - "version": "0.1.0", - "private": true, - "scripts": { - "start": "parcel serve public/index.html", - "build": "parcel build public/index.html" - }, - "dependencies": { - "fluent": "^0.8.0", - "fluent-langneg": "^0.1.0", - "fluent-react": "file:../../", - "react": "^16.3.2", - "react-dom": "^16.3.3" - }, - "devDependencies": { - "parcel-bundler": "^1.9.7" - }, - "engines": { - "node": ">=10.0.0", - "browsers": "Firefox >= 57" - } -} diff --git a/fluent-react/examples/higher-order/public/index.html b/fluent-react/examples/higher-order/public/index.html deleted file mode 100644 index 1f6f68b36..000000000 --- a/fluent-react/examples/higher-order/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Higher-order component - a fluent-react example - - -
- - - diff --git a/fluent-react/examples/higher-order/src/App.js b/fluent-react/examples/higher-order/src/App.js deleted file mode 100644 index 347ad50be..000000000 --- a/fluent-react/examples/higher-order/src/App.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { Localized, withLocalization } from 'fluent-react/compat'; - -function App(props) { - function showAlert() { - const { getString } = props; - alert(getString('hello')); - } - - return ( -
- - - -
- ); -} - -export default withLocalization(App); diff --git a/fluent-react/examples/higher-order/src/index.js b/fluent-react/examples/higher-order/src/index.js deleted file mode 100644 index f5205ea57..000000000 --- a/fluent-react/examples/higher-order/src/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { LocalizationProvider } from 'fluent-react/compat'; - -import { generateBundles } from './l10n'; -import App from './App'; - -ReactDOM.render( - - - , - document.getElementById('root') -); diff --git a/fluent-react/examples/higher-order/src/l10n.js b/fluent-react/examples/higher-order/src/l10n.js deleted file mode 100644 index f6fba26fc..000000000 --- a/fluent-react/examples/higher-order/src/l10n.js +++ /dev/null @@ -1,28 +0,0 @@ -import { FluentBundle } from 'fluent/compat'; -import { negotiateLanguages } from 'fluent-langneg/compat'; - -const MESSAGES_ALL = { - 'pl': ` -hello = Witaj świecie! -button-show-alert = Kliknij mnie - `, - 'en-US': ` -hello = Hello, world! -button-show-alert = Click me - `, -}; - -export function* generateBundles(userLocales) { - // Choose locales that are best for the user. - const currentLocales = negotiateLanguages( - userLocales, - ['en-US', 'pl'], - { defaultLocale: 'en-US' } - ); - - for (const locale of currentLocales) { - const bundle = new FluentBundle(locale); - bundle.addMessages(MESSAGES_ALL[locale]); - yield bundle; - } -} diff --git a/fluent-react/examples/html-markup/.gitignore b/fluent-react/examples/html-markup/.gitignore deleted file mode 100644 index ba70f3893..000000000 --- a/fluent-react/examples/html-markup/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.cache -dist diff --git a/fluent-react/examples/html-markup/package.json b/fluent-react/examples/html-markup/package.json deleted file mode 100644 index 317a15452..000000000 --- a/fluent-react/examples/html-markup/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "fluent-react-example-html-markup", - "version": "0.1.0", - "private": true, - "scripts": { - "start": "parcel serve public/index.html", - "build": "parcel build public/index.html" - }, - "dependencies": { - "fluent": "^0.8.0", - "fluent-langneg": "^0.1.0", - "fluent-react": "file:../../", - "react": "^16.3.2", - "react-dom": "^16.3.3" - }, - "devDependencies": { - "parcel-bundler": "^1.9.7" - }, - "engines": { - "node": ">=10.0.0", - "browsers": "Firefox >= 57" - } -} diff --git a/fluent-react/examples/html-markup/public/index.html b/fluent-react/examples/html-markup/public/index.html deleted file mode 100644 index 467ff44f5..000000000 --- a/fluent-react/examples/html-markup/public/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - HTML Markup in translations - a fluent-react example - - - -
- - - diff --git a/fluent-react/examples/html-markup/src/App.js b/fluent-react/examples/html-markup/src/App.js deleted file mode 100644 index e85c1a00c..000000000 --- a/fluent-react/examples/html-markup/src/App.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { Localized, withLocalization } from 'fluent-react/compat'; - -function App(props) { - function showAlert(id) { - const { getString } = props; - alert(getString(id)); - } - - return ( -
- showAlert('clicked-sign-in')}>} - cancel={} - > -

{'Sign in or cancel.'}

- - - } - button={} - > -

{'My name is and .'}

- -
- ); -} - -export default withLocalization(App); diff --git a/fluent-react/examples/html-markup/src/index.js b/fluent-react/examples/html-markup/src/index.js deleted file mode 100644 index f5205ea57..000000000 --- a/fluent-react/examples/html-markup/src/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { LocalizationProvider } from 'fluent-react/compat'; - -import { generateBundles } from './l10n'; -import App from './App'; - -ReactDOM.render( - - - , - document.getElementById('root') -); diff --git a/fluent-react/examples/html-markup/src/l10n.js b/fluent-react/examples/html-markup/src/l10n.js deleted file mode 100644 index 4b2358acc..000000000 --- a/fluent-react/examples/html-markup/src/l10n.js +++ /dev/null @@ -1,36 +0,0 @@ -import { FluentBundle } from 'fluent/compat'; -import { negotiateLanguages } from 'fluent-langneg/compat'; - -const MESSAGES_ALL = { - 'pl': ` -sign-in-or-cancel = Zaloguj albo anuluj. -clicked-sign-in = Brawo! -clicked-cancel = OK, nieważne. - -agree-prompt = Nazywam się i . -agree-alert = Fajnie, zgadzamy się. - `, - 'en-US': ` -sign-in-or-cancel = Sign in or cancel. -clicked-sign-in = You are now signed in. -clicked-cancel = OK, nevermind. - -agree-prompt = My name is and . -agree-alert = Cool, agreed. - `, -}; - -export function* generateBundles(userLocales) { - // Choose locales that are best for the user. - const currentLocales = negotiateLanguages( - userLocales, - ['en-US', 'pl'], - { defaultLocale: 'en-US' } - ); - - for (const locale of currentLocales) { - const bundle = new FluentBundle(locale); - bundle.addMessages(MESSAGES_ALL[locale]); - yield bundle; - } -} diff --git a/fluent-react/examples/redux-async/.gitignore b/fluent-react/examples/redux-async/.gitignore deleted file mode 100644 index ba70f3893..000000000 --- a/fluent-react/examples/redux-async/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.cache -dist diff --git a/fluent-react/examples/redux-async/package.json b/fluent-react/examples/redux-async/package.json deleted file mode 100644 index 4c33ef050..000000000 --- a/fluent-react/examples/redux-async/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "fluent-react-example-with-redux", - "version": "0.1.0", - "private": true, - "scripts": { - "start": "parcel serve public/index.html", - "build": "parcel build public/index.html" - }, - "dependencies": { - "delay": "^2.0.0", - "fluent": "^0.8.0", - "fluent-langneg": "^0.1.0", - "fluent-react": "file:../../", - "react": "^16.3.2", - "react-dom": "^16.3.3", - "react-redux": "^5.0.6", - "redux": "^3.7.2", - "redux-logger": "^3.0.6", - "redux-thunk": "^2.2.0" - }, - "devDependencies": { - "parcel-bundler": "^1.9.7" - }, - "engines": { - "node": ">=10.0.0", - "browsers": "Firefox >= 57" - } -} diff --git a/fluent-react/examples/redux-async/public/en-US.ftl b/fluent-react/examples/redux-async/public/en-US.ftl deleted file mode 100644 index 31e5f22db..000000000 --- a/fluent-react/examples/redux-async/public/en-US.ftl +++ /dev/null @@ -1,3 +0,0 @@ -title = Hello, world! -current = Current locale: { $locale } -change = Change to { $locale } diff --git a/fluent-react/examples/redux-async/public/index.html b/fluent-react/examples/redux-async/public/index.html deleted file mode 100644 index 54f3e4717..000000000 --- a/fluent-react/examples/redux-async/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Redux async- a fluent-react example - - -
- - - diff --git a/fluent-react/examples/redux-async/public/pl.ftl b/fluent-react/examples/redux-async/public/pl.ftl deleted file mode 100644 index 130acfc23..000000000 --- a/fluent-react/examples/redux-async/public/pl.ftl +++ /dev/null @@ -1,3 +0,0 @@ -title = Witaj świecie! -current = Bieżący język: { $locale } -change = Zmień na { $locale } diff --git a/fluent-react/examples/redux-async/src/App.js b/fluent-react/examples/redux-async/src/App.js deleted file mode 100644 index 0463d6898..000000000 --- a/fluent-react/examples/redux-async/src/App.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { connect} from 'react-redux'; -import { Localized } from 'fluent-react/compat'; - -import { changeLocales } from './actions'; - -function App(props) { - const { currentLocales, isFetching, changeLocales } = props; - - const [current] = currentLocales; - const available = ['en-US', 'pl']; - const next = available[(available.indexOf(current ) + 1) % available.length]; - - return ( -
- -

Hello, world!

- - - -

{'Current locale: { $locale }'}

- - - - - -
- ); -} - -const mapStateToProps = state => ({ - currentLocales: state.currentLocales, - isFetching: state.isFetching -}); -const mapDispatchToProps = { changeLocales }; - -export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/fluent-react/examples/redux-async/src/actions.js b/fluent-react/examples/redux-async/src/actions.js deleted file mode 100644 index b0e4d240e..000000000 --- a/fluent-react/examples/redux-async/src/actions.js +++ /dev/null @@ -1,49 +0,0 @@ -import { FluentBundle } from 'fluent/compat'; -import { negotiateLanguages } from 'fluent-langneg/compat'; -import delay from 'delay'; - -// Hand off handling FTL assets to Parcel. -import ftl from "../public/*.ftl"; - -async function fetchMessages(locale) { - const response = await fetch(ftl[locale]); - const messages = await response.text(); - - await delay(1000); - return { [locale]: messages }; -} - -export function changeLocales(userLocales) { - return async function(dispatch) { - dispatch({ type: 'CHANGE_LOCALES_REQUEST' }); - - const currentLocales = negotiateLanguages( - userLocales, - ['en-US', 'pl'], - { defaultLocale: 'en-US' } - ); - - const fetched = await Promise.all( - currentLocales.map(fetchMessages) - ); - - const messages = fetched.reduce( - (obj, cur) => Object.assign(obj, cur) - ); - - const generateBundles = function* () { - for (const locale of currentLocales) { - const bundle = new FluentBundle(locale); - bundle.addMessages(messages[locale]); - yield bundle; - } - } - - dispatch({ - type: 'CHANGE_LOCALES_RESPONSE', - userLocales, - currentLocales, - bundles: generateBundles() - }); - }; -} diff --git a/fluent-react/examples/redux-async/src/index.js b/fluent-react/examples/redux-async/src/index.js deleted file mode 100644 index 0681013db..000000000 --- a/fluent-react/examples/redux-async/src/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { Provider } from 'react-redux'; - -import store from './store'; -import AppLocalizationProvider from './l10n'; -import App from './App'; - -ReactDOM.render( - - - - - , - document.getElementById('root') -); diff --git a/fluent-react/examples/redux-async/src/l10n.js b/fluent-react/examples/redux-async/src/l10n.js deleted file mode 100644 index 3d39c48f8..000000000 --- a/fluent-react/examples/redux-async/src/l10n.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; - -import { LocalizationProvider } from 'fluent-react/compat'; - -import { changeLocales } from './actions'; - - -class AppLocalizationProvider extends Component { - componentWillMount() { - this.props.changeLocales(navigator.languages); - } - - render() { - const { bundles, children } = this.props; - - if (!bundles) { - // Show a loader - return
…
; - } - - return ( - - {children} - - ); - } -} - -const mapStateToProps = state => ({ bundles: state.bundles }); -const mapDispatchToProps = { changeLocales }; - -export default connect(mapStateToProps, mapDispatchToProps)( - AppLocalizationProvider -); diff --git a/fluent-react/examples/redux-async/src/reducer.js b/fluent-react/examples/redux-async/src/reducer.js deleted file mode 100644 index 33aac9863..000000000 --- a/fluent-react/examples/redux-async/src/reducer.js +++ /dev/null @@ -1,27 +0,0 @@ -export default function reducer(state = { - isFetching: false, - userLocales: ['en-US'], - currentLocales: ['en-US'], - bundles: null -}, action) { - switch (action.type) { - case 'CHANGE_LOCALES_REQUEST': { - return { - ...state, - isFetching: true - }; - } - case 'CHANGE_LOCALES_RESPONSE': { - const { userLocales, currentLocales, bundles } = action; - return { - ...state, - isFetching: false, - userLocales, - currentLocales, - bundles - }; - } - default: - return state; - } -} diff --git a/fluent-react/examples/redux-async/src/store.js b/fluent-react/examples/redux-async/src/store.js deleted file mode 100644 index f1701b5a7..000000000 --- a/fluent-react/examples/redux-async/src/store.js +++ /dev/null @@ -1,14 +0,0 @@ -import { createStore, applyMiddleware } from 'redux'; -import thunk from 'redux-thunk'; -import { createLogger } from 'redux-logger'; - -import reducer from './reducer'; - -const middlewares = process.env.NODE_ENV === 'development' ? - [thunk, createLogger()] : - [thunk]; - -export default createStore( - reducer, - applyMiddleware(...middlewares) -); diff --git a/fluent-react/examples/redux-sync/.gitignore b/fluent-react/examples/redux-sync/.gitignore deleted file mode 100644 index ba70f3893..000000000 --- a/fluent-react/examples/redux-sync/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.cache -dist diff --git a/fluent-react/examples/redux-sync/package.json b/fluent-react/examples/redux-sync/package.json deleted file mode 100644 index c441cb68a..000000000 --- a/fluent-react/examples/redux-sync/package.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "name": "fluent-react-example-with-redux", - "version": "0.1.0", - "private": true, - "scripts": { - "start": "parcel serve public/index.html", - "build": "parcel build public/index.html" - }, - "dependencies": { - "delay": "^2.0.0", - "fluent": "^0.8.0", - "fluent-langneg": "^0.1.0", - "fluent-react": "file:../../", - "react": "^16.3.2", - "react-dom": "^16.3.3", - "react-redux": "^5.0.6", - "redux": "^3.7.2", - "redux-logger": "^3.0.6" - }, - "devDependencies": { - "parcel-bundler": "^1.9.7" - }, - "engines": { - "node": ">=10.0.0", - "browsers": "Firefox >= 57" - } -} diff --git a/fluent-react/examples/redux-sync/public/index.html b/fluent-react/examples/redux-sync/public/index.html deleted file mode 100644 index d9767e9a0..000000000 --- a/fluent-react/examples/redux-sync/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Redux sync - a fluent-react example - - -
- - - diff --git a/fluent-react/examples/redux-sync/src/App.js b/fluent-react/examples/redux-sync/src/App.js deleted file mode 100644 index a3681f3bb..000000000 --- a/fluent-react/examples/redux-sync/src/App.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { connect} from 'react-redux'; -import { Localized } from 'fluent-react/compat'; - -import { changeLocales } from './actions'; - -function App(props) { - const { currentLocales, changeLocales } = props; - - const [current] = currentLocales; - const available = ['en-US', 'pl']; - const next = available[(available.indexOf(current ) + 1) % available.length]; - - return ( -
- -

Hello, world!

- - - -

{'Current locale: { $locale }'}

- - - - - -
- ); -} - -const mapStateToProps = state => ({ currentLocales: state.currentLocales }); -const mapDispatchToProps = { changeLocales }; - -export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/fluent-react/examples/redux-sync/src/actions.js b/fluent-react/examples/redux-sync/src/actions.js deleted file mode 100644 index 5a122cf83..000000000 --- a/fluent-react/examples/redux-sync/src/actions.js +++ /dev/null @@ -1,38 +0,0 @@ -import { FluentBundle } from 'fluent/compat'; -import { negotiateLanguages } from 'fluent-langneg/compat'; - -const MESSAGES_ALL = { - 'pl': ` -title = Witaj świecie! -current = Bieżący język: { $locale } -change = Zmień na { $locale } - `, - 'en-US': ` -title = Hello, world! -current = Current locale: { $locale } -change = Change to { $locale } - `, -}; - -export function changeLocales(userLocales) { - const currentLocales = negotiateLanguages( - userLocales, - ['en-US', 'pl'], - { defaultLocale: 'en-US' } - ); - - const generateBundles = function* () { - for (const locale of currentLocales) { - const bundle = new FluentBundle(locale); - bundle.addMessages(MESSAGES_ALL[locale]); - yield bundle; - } - } - - return { - type: 'CHANGE_LOCALES', - userLocales, - currentLocales, - bundles: generateBundles() - }; -} diff --git a/fluent-react/examples/redux-sync/src/index.js b/fluent-react/examples/redux-sync/src/index.js deleted file mode 100644 index 0681013db..000000000 --- a/fluent-react/examples/redux-sync/src/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { Provider } from 'react-redux'; - -import store from './store'; -import AppLocalizationProvider from './l10n'; -import App from './App'; - -ReactDOM.render( - - - - - , - document.getElementById('root') -); diff --git a/fluent-react/examples/redux-sync/src/l10n.js b/fluent-react/examples/redux-sync/src/l10n.js deleted file mode 100644 index b68c665fd..000000000 --- a/fluent-react/examples/redux-sync/src/l10n.js +++ /dev/null @@ -1,34 +0,0 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; - -import { LocalizationProvider } from 'fluent-react/compat'; - -import { changeLocales } from './actions'; - -class AppLocalizationProvider extends Component { - componentWillMount() { - this.props.changeLocales(navigator.languages); - } - - render() { - const { bundles, children } = this.props; - - if (!bundles) { - // Show a loader - return
…
; - } - - return ( - - {children} - - ); - } -} - -const mapStateToProps = state => ({ bundles: state.bundles }); -const mapDispatchToProps = { changeLocales }; - -export default connect(mapStateToProps, mapDispatchToProps)( - AppLocalizationProvider -); diff --git a/fluent-react/examples/redux-sync/src/reducer.js b/fluent-react/examples/redux-sync/src/reducer.js deleted file mode 100644 index 20dd93c19..000000000 --- a/fluent-react/examples/redux-sync/src/reducer.js +++ /dev/null @@ -1,19 +0,0 @@ -export default function reducer(state = { - userLocales: ['en-US'], - currentLocales: ['en-US'], - bundles: null -}, action) { - switch (action.type) { - case 'CHANGE_LOCALES': { - const { userLocales, currentLocales, bundles } = action; - return { - ...state, - userLocales, - currentLocales, - bundles - }; - } - default: - return state; - } -} diff --git a/fluent-react/examples/redux-sync/src/store.js b/fluent-react/examples/redux-sync/src/store.js deleted file mode 100644 index 68f500cd1..000000000 --- a/fluent-react/examples/redux-sync/src/store.js +++ /dev/null @@ -1,13 +0,0 @@ -import { createStore, applyMiddleware } from 'redux'; -import { createLogger } from 'redux-logger'; - -import reducer from './reducer'; - -const middlewares = process.env.NODE_ENV === 'development' ? - [createLogger()] : - []; - -export default createStore( - reducer, - applyMiddleware(...middlewares) -); diff --git a/fluent-react/examples/text-input/.gitignore b/fluent-react/examples/text-input/.gitignore deleted file mode 100644 index ba70f3893..000000000 --- a/fluent-react/examples/text-input/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.cache -dist diff --git a/fluent-react/examples/text-input/package.json b/fluent-react/examples/text-input/package.json deleted file mode 100644 index 1baff8eb7..000000000 --- a/fluent-react/examples/text-input/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "fluent-react-example-text-input", - "version": "0.1.0", - "private": true, - "scripts": { - "start": "parcel serve public/index.html", - "build": "parcel build public/index.html" - }, - "dependencies": { - "fluent": "^0.8.0", - "fluent-langneg": "^0.1.0", - "fluent-react": "file:../../", - "react": "^16.3.2", - "react-dom": "^16.3.3" - }, - "devDependencies": { - "parcel-bundler": "^1.9.7" - }, - "engines": { - "node": ">=10.0.0", - "browsers": "Firefox >= 57" - } -} diff --git a/fluent-react/examples/text-input/public/index.html b/fluent-react/examples/text-input/public/index.html deleted file mode 100644 index f34d4fe85..000000000 --- a/fluent-react/examples/text-input/public/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Text input - a fluent-react example - - -
- - - diff --git a/fluent-react/examples/text-input/src/App.js b/fluent-react/examples/text-input/src/App.js deleted file mode 100644 index bc47f36f5..000000000 --- a/fluent-react/examples/text-input/src/App.js +++ /dev/null @@ -1,49 +0,0 @@ -import React, { Component } from 'react'; -import { Localized } from 'fluent-react/compat'; - -function Header(props) { - const { children } = props; - return ( -

{children}

- ); -} - -export default class App extends Component { - constructor(props) { - super(props); - this.state = { - name: '' - }; - } - - handleNameChange(name) { - this.setState({ name }); - } - - render() { - const { name } = this.state; - - return ( -
- { name ? - -
{'Hello, { $username }!'}
- - : - -
Hello, stranger!
- - } - - - this.handleNameChange(evt.target.value)} - value={name} - /> - -
- ); - } -} diff --git a/fluent-react/examples/text-input/src/index.js b/fluent-react/examples/text-input/src/index.js deleted file mode 100644 index f5205ea57..000000000 --- a/fluent-react/examples/text-input/src/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { LocalizationProvider } from 'fluent-react/compat'; - -import { generateBundles } from './l10n'; -import App from './App'; - -ReactDOM.render( - - - , - document.getElementById('root') -); diff --git a/fluent-react/examples/text-input/src/l10n.js b/fluent-react/examples/text-input/src/l10n.js deleted file mode 100644 index f19cf8dda..000000000 --- a/fluent-react/examples/text-input/src/l10n.js +++ /dev/null @@ -1,32 +0,0 @@ -import { FluentBundle } from 'fluent/compat'; -import { negotiateLanguages } from 'fluent-langneg/compat'; - -const MESSAGES_ALL = { - 'pl': ` -hello = Cześć { $username }! -hello-no-name = Witaj nieznajomy! -type-name = - .placeholder = Twoje imię - `, - 'en-US': ` -hello = Hello, { $username }! -hello-no-name = Hello, stranger! -type-name = - .placeholder = Your name - `, -}; - -export function* generateBundles(userLocales) { - // Choose locales that are best for the user. - const currentLocales = negotiateLanguages( - userLocales, - ['en-US', 'pl'], - { defaultLocale: 'en-US' } - ); - - for (const locale of currentLocales) { - const bundle = new FluentBundle(locale); - bundle.addMessages(MESSAGES_ALL[locale]); - yield bundle; - } -} From d5ebdb413c55ca69a97119ca6324fa831cfed029 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Fri, 3 Apr 2020 18:20:14 +0200 Subject: [PATCH 2/9] Add a single example --- fluent-react/example/.gitignore | 2 + fluent-react/example/package.json | 25 +++++++ fluent-react/example/public/index.html | 12 ++++ fluent-react/example/src/App.js | 46 +++++++++++++ fluent-react/example/src/Hello.js | 42 ++++++++++++ fluent-react/example/src/Prompt.js | 25 +++++++ fluent-react/example/src/index.js | 12 ++++ fluent-react/example/src/l10n.js | 90 ++++++++++++++++++++++++++ 8 files changed, 254 insertions(+) create mode 100644 fluent-react/example/.gitignore create mode 100644 fluent-react/example/package.json create mode 100644 fluent-react/example/public/index.html create mode 100644 fluent-react/example/src/App.js create mode 100644 fluent-react/example/src/Hello.js create mode 100644 fluent-react/example/src/Prompt.js create mode 100644 fluent-react/example/src/index.js create mode 100644 fluent-react/example/src/l10n.js diff --git a/fluent-react/example/.gitignore b/fluent-react/example/.gitignore new file mode 100644 index 000000000..ba70f3893 --- /dev/null +++ b/fluent-react/example/.gitignore @@ -0,0 +1,2 @@ +.cache +dist diff --git a/fluent-react/example/package.json b/fluent-react/example/package.json new file mode 100644 index 000000000..fa334f1db --- /dev/null +++ b/fluent-react/example/package.json @@ -0,0 +1,25 @@ +{ + "name": "fluent-react-example", + "version": "0.1.0", + "private": true, + "scripts": { + "start": "parcel serve public/index.html", + "build": "parcel build public/index.html" + }, + "dependencies": { + "@fluent/bundle": "0.15.x", + "@fluent/langneg": "0.4.x", + "@fluent/react": "file:../", + "fluent": "^0.13.0", + "fluent-react": "^0.9.0", + "react": "^16.13.1", + "react-dom": "16.8.x" + }, + "devDependencies": { + "parcel-bundler": "^1.9.7" + }, + "engines": { + "node": ">=10.0.0", + "browsers": "Firefox >= 57" + } +} diff --git a/fluent-react/example/public/index.html b/fluent-react/example/public/index.html new file mode 100644 index 000000000..187d75c5b --- /dev/null +++ b/fluent-react/example/public/index.html @@ -0,0 +1,12 @@ + + + + + + @fluent/react Example + + +
+ + + diff --git a/fluent-react/example/src/App.js b/fluent-react/example/src/App.js new file mode 100644 index 000000000..d8328301f --- /dev/null +++ b/fluent-react/example/src/App.js @@ -0,0 +1,46 @@ +import React from "react"; +import { Localized } from "@fluent/react"; +import { FluentDateTime } from "@fluent/bundle"; +import { Hello } from "./Hello"; +import { LocalizedSignIn } from "./Prompt"; + +export function App(props) { + let date = new Date(); + return <> + + + +

+ {"Today is {$date}."} +

+ + + +

+ {"It's {$date}."} +

+ + + + + +

{"Change locale: "}

+ + ; +} diff --git a/fluent-react/example/src/Hello.js b/fluent-react/example/src/Hello.js new file mode 100644 index 000000000..7e0a6efbe --- /dev/null +++ b/fluent-react/example/src/Hello.js @@ -0,0 +1,42 @@ +import React, { Component } from "react"; +import { Localized } from "@fluent/react"; + +export class Hello extends Component { + constructor(props) { + super(props); + this.state = { + userName: '' + }; + } + + handleNameChange(userName) { + this.setState({ userName }); + } + + render() { + const { userName } = this.state; + + return ( +
+ { userName ? + +

{'Hello, { $userName }!'}

+ + : + +

Hello, stranger!

+ + } + + + this.handleNameChange(evt.target.value)} + value={userName} + /> + +
+ ); + } +} diff --git a/fluent-react/example/src/Prompt.js b/fluent-react/example/src/Prompt.js new file mode 100644 index 000000000..12edad6ab --- /dev/null +++ b/fluent-react/example/src/Prompt.js @@ -0,0 +1,25 @@ +import React from "react"; +import { Localized, withLocalization } from "@fluent/react"; + +function SignIn(props) { + function showAlert(id) { + const { getString } = props; + alert(getString(id)); + } + + return ( +
+ showAlert('clicked-sign-in')}>, + cancel: + }} + > +

{'Sign in or cancel.'}

+ +
+ ); +} + +export const LocalizedSignIn = withLocalization(SignIn); diff --git a/fluent-react/example/src/index.js b/fluent-react/example/src/index.js new file mode 100644 index 000000000..e6359fa89 --- /dev/null +++ b/fluent-react/example/src/index.js @@ -0,0 +1,12 @@ +import React from "react"; +import ReactDOM from "react-dom"; + +import { AppLocalizationProvider } from "./l10n"; +import { App } from "./App"; + +ReactDOM.render( + + + , + document.getElementById("root") +); diff --git a/fluent-react/example/src/l10n.js b/fluent-react/example/src/l10n.js new file mode 100644 index 000000000..12d37d145 --- /dev/null +++ b/fluent-react/example/src/l10n.js @@ -0,0 +1,90 @@ +import React, { Children, cloneElement, useEffect, useState } from "react"; + +import { negotiateLanguages } from "@fluent/langneg"; +import { FluentBundle, FluentResource } from "@fluent/bundle"; +import { ReactLocalization, LocalizationProvider } from "@fluent/react"; + +const MESSAGES_ALL = { + "pl": ` +hello = Cześć { $userName }! +hello-no-name = Witaj nieznajomy! +type-name = + .placeholder = Twoje imię + +today-date = Dziś jest {$date}. +current = Bieżący język: { $locale } +change = Zmień na { $locale } + +sign-in-or-cancel = Zaloguj albo anuluj. +clicked-sign-in = Brawo! +clicked-cancel = OK, nieważne. +`, + "en-US": ` +hello = Hello, { $userName }! +hello-no-name = Hello, stranger! +type-name = + .placeholder = Your name + +today-date = Today is {$date}. +today-time = It's {$date}. +change-locale = Change language: + +sign-in-or-cancel = Sign in or cancel. +clicked-sign-in = You are now signed in. +clicked-cancel = OK, nevermind. +`, +}; + +export function* generateBundles(currentLocales) { + for (let locale of currentLocales) { + let bundle = new FluentBundle(locale); + bundle.addResource(new FluentResource(MESSAGES_ALL[locale])); + yield bundle; + } +} + +const DEFAULT_LOCALE = "en-US"; +const AVAILABLE_LOCALES = { + "en-US": "English", + "pl": "Polish", +}; + +export function AppLocalizationProvider(props) { + let [currentLocales, setCurrentLocales] = useState([DEFAULT_LOCALE]); + let [l10n, setL10n] = useState(new ReactLocalization([])); + + useEffect(() => { + changeLocales(navigator.languages); + }, []); + + function changeLocales(userLocales) { + let currentLocales = negotiateLanguages( + userLocales, + Object.keys(AVAILABLE_LOCALES), + { defaultLocale: DEFAULT_LOCALE } + ); + setCurrentLocales(currentLocales); + + let bundles = generateBundles(currentLocales); + setL10n(new ReactLocalization(bundles)); + } + + return + { cloneElement( + Children.only(props.children), + {LocaleSelect: } + )} + ; +} + +function LocaleSelect(props) { + return ; +} From 999357eadf001151d8bd75e368ba622bcade9140 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Fri, 3 Apr 2020 18:51:42 +0200 Subject: [PATCH 3/9] Fetch localization files asynchronously --- fluent-react/example/public/en-US.ftl | 12 +++++ fluent-react/example/public/pl.ftl | 12 +++++ fluent-react/example/src/l10n.js | 67 +++++++++++---------------- 3 files changed, 51 insertions(+), 40 deletions(-) create mode 100644 fluent-react/example/public/en-US.ftl create mode 100644 fluent-react/example/public/pl.ftl diff --git a/fluent-react/example/public/en-US.ftl b/fluent-react/example/public/en-US.ftl new file mode 100644 index 000000000..67b2c8649 --- /dev/null +++ b/fluent-react/example/public/en-US.ftl @@ -0,0 +1,12 @@ +hello = Hello, { $userName }! +hello-no-name = Hello, stranger! +type-name = + .placeholder = Your name + +today-date = Today is {$date}. +today-time = It's {$date}. +change-locale = Change language: + +sign-in-or-cancel = Sign in or cancel. +clicked-sign-in = You are now signed in. +clicked-cancel = OK, nevermind. diff --git a/fluent-react/example/public/pl.ftl b/fluent-react/example/public/pl.ftl new file mode 100644 index 000000000..74fd5a0fe --- /dev/null +++ b/fluent-react/example/public/pl.ftl @@ -0,0 +1,12 @@ +hello = Cześć { $userName }! +hello-no-name = Witaj nieznajomy! +type-name = + .placeholder = Twoje imię + +today-date = Dziś jest {$date}. +current = Bieżący język: { $locale } +change = Zmień na { $locale } + +sign-in-or-cancel = Zaloguj albo anuluj. +clicked-sign-in = Brawo! +clicked-cancel = OK, nieważne. diff --git a/fluent-react/example/src/l10n.js b/fluent-react/example/src/l10n.js index 12d37d145..2d3801629 100644 --- a/fluent-react/example/src/l10n.js +++ b/fluent-react/example/src/l10n.js @@ -4,60 +4,39 @@ import { negotiateLanguages } from "@fluent/langneg"; import { FluentBundle, FluentResource } from "@fluent/bundle"; import { ReactLocalization, LocalizationProvider } from "@fluent/react"; -const MESSAGES_ALL = { - "pl": ` -hello = Cześć { $userName }! -hello-no-name = Witaj nieznajomy! -type-name = - .placeholder = Twoje imię +// Parcel decorates filenames with cache-busting hashes. +import ftl from '../public/*.ftl'; -today-date = Dziś jest {$date}. -current = Bieżący język: { $locale } -change = Zmień na { $locale } - -sign-in-or-cancel = Zaloguj albo anuluj. -clicked-sign-in = Brawo! -clicked-cancel = OK, nieważne. -`, - "en-US": ` -hello = Hello, { $userName }! -hello-no-name = Hello, stranger! -type-name = - .placeholder = Your name - -today-date = Today is {$date}. -today-time = It's {$date}. -change-locale = Change language: - -sign-in-or-cancel = Sign in or cancel. -clicked-sign-in = You are now signed in. -clicked-cancel = OK, nevermind. -`, +const DEFAULT_LOCALE = "en-US"; +const AVAILABLE_LOCALES = { + "en-US": "English", + "pl": "Polish", }; -export function* generateBundles(currentLocales) { - for (let locale of currentLocales) { +async function fetchMessages(locale) { + let response = await fetch(ftl[locale]); + let messages = await response.text(); + return [locale, messages]; +} + +function* lazilyParsedBundles(fetchedMessages) { + for (let [locale, messages] of fetchedMessages) { + let resource = new FluentResource(messages); let bundle = new FluentBundle(locale); - bundle.addResource(new FluentResource(MESSAGES_ALL[locale])); + bundle.addResource(resource); yield bundle; } } -const DEFAULT_LOCALE = "en-US"; -const AVAILABLE_LOCALES = { - "en-US": "English", - "pl": "Polish", -}; - export function AppLocalizationProvider(props) { let [currentLocales, setCurrentLocales] = useState([DEFAULT_LOCALE]); - let [l10n, setL10n] = useState(new ReactLocalization([])); + let [l10n, setL10n] = useState(null); useEffect(() => { changeLocales(navigator.languages); }, []); - function changeLocales(userLocales) { + async function changeLocales(userLocales) { let currentLocales = negotiateLanguages( userLocales, Object.keys(AVAILABLE_LOCALES), @@ -65,10 +44,18 @@ export function AppLocalizationProvider(props) { ); setCurrentLocales(currentLocales); - let bundles = generateBundles(currentLocales); + let fetchedMessages = await Promise.all( + currentLocales.map(fetchMessages) + ); + + let bundles = lazilyParsedBundles(fetchedMessages); setL10n(new ReactLocalization(bundles)); } + if (l10n === null) { + return
Loading…
; + } + return { cloneElement( Children.only(props.children), From 79024fca8257570c37ade020349a1699b4ac854b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Fri, 3 Apr 2020 18:54:24 +0200 Subject: [PATCH 4/9] Rewrite Hello.ts to use hooks --- fluent-react/example/src/Hello.js | 57 ++++++++++++------------------- 1 file changed, 22 insertions(+), 35 deletions(-) diff --git a/fluent-react/example/src/Hello.js b/fluent-react/example/src/Hello.js index 7e0a6efbe..3355ac533 100644 --- a/fluent-react/example/src/Hello.js +++ b/fluent-react/example/src/Hello.js @@ -1,42 +1,29 @@ -import React, { Component } from "react"; +import React, { useState } from "react"; import { Localized } from "@fluent/react"; -export class Hello extends Component { - constructor(props) { - super(props); - this.state = { - userName: '' - }; - } - - handleNameChange(userName) { - this.setState({ userName }); - } - - render() { - const { userName } = this.state; +export function Hello() { + let [userName, setUserName] = useState(""); return ( -
- { userName ? - -

{'Hello, { $userName }!'}

- - : - -

Hello, stranger!

- - } +
+ {userName ? + +

{'Hello, { $userName }!'}

+ + : + +

Hello, stranger!

+ + } - - this.handleNameChange(evt.target.value)} - value={userName} - /> - -
+ + setUserName(evt.target.value)} + value={userName} + /> + +
); - } } From 273f3064b8c08001501961d795f58308fd2fd69e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Fri, 3 Apr 2020 18:57:50 +0200 Subject: [PATCH 5/9] Update deps --- fluent-react/example/package.json | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/fluent-react/example/package.json b/fluent-react/example/package.json index fa334f1db..5d426f9f7 100644 --- a/fluent-react/example/package.json +++ b/fluent-react/example/package.json @@ -10,13 +10,11 @@ "@fluent/bundle": "0.15.x", "@fluent/langneg": "0.4.x", "@fluent/react": "file:../", - "fluent": "^0.13.0", - "fluent-react": "^0.9.0", - "react": "^16.13.1", + "react": "16.8.x", "react-dom": "16.8.x" }, "devDependencies": { - "parcel-bundler": "^1.9.7" + "parcel-bundler": "1.12.x" }, "engines": { "node": ">=10.0.0", From dd699fd818dd60ea6a60312ac556379b39011ddb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Mon, 6 Apr 2020 12:32:22 +0200 Subject: [PATCH 6/9] Rewrite the example into TypeScript --- fluent-react/example/package.json | 2 + fluent-react/example/public/en-US.ftl | 1 - fluent-react/example/public/index.html | 2 +- fluent-react/example/public/pl.ftl | 1 - fluent-react/example/src/{App.js => App.tsx} | 14 ++---- .../example/src/{Hello.js => Hello.tsx} | 0 .../example/src/{Prompt.js => SignIn.tsx} | 6 +-- .../example/src/{index.js => index.tsx} | 0 .../example/src/{l10n.js => l10n.tsx} | 50 +++++++++---------- fluent-react/example/tsconfig.json | 7 +++ 10 files changed, 43 insertions(+), 40 deletions(-) rename fluent-react/example/src/{App.js => App.tsx} (68%) rename fluent-react/example/src/{Hello.js => Hello.tsx} (100%) rename fluent-react/example/src/{Prompt.js => SignIn.tsx} (76%) rename fluent-react/example/src/{index.js => index.tsx} (100%) rename fluent-react/example/src/{l10n.js => l10n.tsx} (56%) create mode 100644 fluent-react/example/tsconfig.json diff --git a/fluent-react/example/package.json b/fluent-react/example/package.json index 5d426f9f7..350ff5590 100644 --- a/fluent-react/example/package.json +++ b/fluent-react/example/package.json @@ -14,6 +14,8 @@ "react-dom": "16.8.x" }, "devDependencies": { + "@types/react": "^16.9.32", + "@types/react-dom": "^16.9.6", "parcel-bundler": "1.12.x" }, "engines": { diff --git a/fluent-react/example/public/en-US.ftl b/fluent-react/example/public/en-US.ftl index 67b2c8649..84937b89b 100644 --- a/fluent-react/example/public/en-US.ftl +++ b/fluent-react/example/public/en-US.ftl @@ -5,7 +5,6 @@ type-name = today-date = Today is {$date}. today-time = It's {$date}. -change-locale = Change language: sign-in-or-cancel = Sign in or cancel. clicked-sign-in = You are now signed in. diff --git a/fluent-react/example/public/index.html b/fluent-react/example/public/index.html index 187d75c5b..d6d65308f 100644 --- a/fluent-react/example/public/index.html +++ b/fluent-react/example/public/index.html @@ -7,6 +7,6 @@
- + diff --git a/fluent-react/example/public/pl.ftl b/fluent-react/example/public/pl.ftl index 74fd5a0fe..60a414b7f 100644 --- a/fluent-react/example/public/pl.ftl +++ b/fluent-react/example/public/pl.ftl @@ -5,7 +5,6 @@ type-name = today-date = Dziś jest {$date}. current = Bieżący język: { $locale } -change = Zmień na { $locale } sign-in-or-cancel = Zaloguj albo anuluj. clicked-sign-in = Brawo! diff --git a/fluent-react/example/src/App.js b/fluent-react/example/src/App.tsx similarity index 68% rename from fluent-react/example/src/App.js rename to fluent-react/example/src/App.tsx index d8328301f..b9ae8b0b8 100644 --- a/fluent-react/example/src/App.js +++ b/fluent-react/example/src/App.tsx @@ -1,10 +1,10 @@ -import React from "react"; +import React, { ReactNode, ReactElement } from "react"; import { Localized } from "@fluent/react"; import { FluentDateTime } from "@fluent/bundle"; import { Hello } from "./Hello"; -import { LocalizedSignIn } from "./Prompt"; +import { LocalizedSignIn } from "./SignIn"; -export function App(props) { +export function App() { let date = new Date(); return <> @@ -12,7 +12,7 @@ export function App(props) { - - -

{"Change locale: "}

- ; } diff --git a/fluent-react/example/src/Hello.js b/fluent-react/example/src/Hello.tsx similarity index 100% rename from fluent-react/example/src/Hello.js rename to fluent-react/example/src/Hello.tsx diff --git a/fluent-react/example/src/Prompt.js b/fluent-react/example/src/SignIn.tsx similarity index 76% rename from fluent-react/example/src/Prompt.js rename to fluent-react/example/src/SignIn.tsx index 12edad6ab..97a2f4ea6 100644 --- a/fluent-react/example/src/Prompt.js +++ b/fluent-react/example/src/SignIn.tsx @@ -1,8 +1,8 @@ import React from "react"; -import { Localized, withLocalization } from "@fluent/react"; +import { Localized, withLocalization, WithLocalizationProps } from "@fluent/react"; -function SignIn(props) { - function showAlert(id) { +function SignIn(props: WithLocalizationProps) { + function showAlert(id: string) { const { getString } = props; alert(getString(id)); } diff --git a/fluent-react/example/src/index.js b/fluent-react/example/src/index.tsx similarity index 100% rename from fluent-react/example/src/index.js rename to fluent-react/example/src/index.tsx diff --git a/fluent-react/example/src/l10n.js b/fluent-react/example/src/l10n.tsx similarity index 56% rename from fluent-react/example/src/l10n.js rename to fluent-react/example/src/l10n.tsx index 2d3801629..16e1172dd 100644 --- a/fluent-react/example/src/l10n.js +++ b/fluent-react/example/src/l10n.tsx @@ -1,11 +1,11 @@ -import React, { Children, cloneElement, useEffect, useState } from "react"; +import React, { Children, useEffect, useState, ReactNode } from "react"; import { negotiateLanguages } from "@fluent/langneg"; import { FluentBundle, FluentResource } from "@fluent/bundle"; import { ReactLocalization, LocalizationProvider } from "@fluent/react"; // Parcel decorates filenames with cache-busting hashes. -import ftl from '../public/*.ftl'; +const ftl = require("../public/*.ftl"); const DEFAULT_LOCALE = "en-US"; const AVAILABLE_LOCALES = { @@ -13,13 +13,13 @@ const AVAILABLE_LOCALES = { "pl": "Polish", }; -async function fetchMessages(locale) { +async function fetchMessages(locale: string): Promise<[string, string]> { let response = await fetch(ftl[locale]); let messages = await response.text(); return [locale, messages]; } -function* lazilyParsedBundles(fetchedMessages) { +function* lazilyParsedBundles(fetchedMessages: Array<[string, string]>) { for (let [locale, messages] of fetchedMessages) { let resource = new FluentResource(messages); let bundle = new FluentBundle(locale); @@ -28,15 +28,19 @@ function* lazilyParsedBundles(fetchedMessages) { } } -export function AppLocalizationProvider(props) { +interface AppLocalizationProviderProps { + children: ReactNode; +} + +export function AppLocalizationProvider(props: AppLocalizationProviderProps) { let [currentLocales, setCurrentLocales] = useState([DEFAULT_LOCALE]); - let [l10n, setL10n] = useState(null); + let [l10n, setL10n] = useState(null); useEffect(() => { - changeLocales(navigator.languages); + changeLocales(navigator.languages as Array); }, []); - async function changeLocales(userLocales) { + async function changeLocales(userLocales: Array) { let currentLocales = negotiateLanguages( userLocales, Object.keys(AVAILABLE_LOCALES), @@ -56,22 +60,18 @@ export function AppLocalizationProvider(props) { return
Loading…
; } - return - { cloneElement( - Children.only(props.children), - {LocaleSelect: } - )} - ; -} + return <> + + {Children.only(props.children)} + -function LocaleSelect(props) { - return ; +
+ + ; } diff --git a/fluent-react/example/tsconfig.json b/fluent-react/example/tsconfig.json new file mode 100644 index 000000000..a40a15d27 --- /dev/null +++ b/fluent-react/example/tsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "strict": true, + "jsx": "react", + } +} From 487f49180c3f305a90825a3858eb569db9d15c26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Mon, 6 Apr 2020 13:16:54 +0200 Subject: [PATCH 7/9] Add a README --- fluent-react/example/README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 fluent-react/example/README.md diff --git a/fluent-react/example/README.md b/fluent-react/example/README.md new file mode 100644 index 000000000..b06f7b83e --- /dev/null +++ b/fluent-react/example/README.md @@ -0,0 +1,25 @@ +# @fluent/react Example + +This tiny React app demonstrates how `@fluent/react` can integrate with React. + +## Running + +The example app requires a local build of `@fluent/react`. In the root of the +`fluent.js` clone install the build tools: + + cd fluent.js/ + npm install + +Then build `@fluent/react`: + + cd fluent.js/fluent-react/ + npm install + make + +Finally, change back to this directory, and build the example: + + cd fluent.js/fluent-react/example/ + npm install + npm start + +Open http://localhost:1234 to see the example running. From 42d1ba9ff1173fc7625f6224797e711ba294a56a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Mon, 6 Apr 2020 15:12:23 +0200 Subject: [PATCH 8/9] Document using npm pack --- fluent-react/.npmignore | 2 +- fluent-react/example/.gitignore | 1 + fluent-react/example/README.md | 8 +++++--- fluent-react/example/package.json | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/fluent-react/.npmignore b/fluent-react/.npmignore index d8caf6300..8a6c92eba 100644 --- a/fluent-react/.npmignore +++ b/fluent-react/.npmignore @@ -1,7 +1,7 @@ .nyc_output coverage esm/.compiled -examples +example src test makefile diff --git a/fluent-react/example/.gitignore b/fluent-react/example/.gitignore index ba70f3893..9f10b5e9c 100644 --- a/fluent-react/example/.gitignore +++ b/fluent-react/example/.gitignore @@ -1,2 +1,3 @@ .cache dist +*.tgz diff --git a/fluent-react/example/README.md b/fluent-react/example/README.md index b06f7b83e..acc458471 100644 --- a/fluent-react/example/README.md +++ b/fluent-react/example/README.md @@ -4,17 +4,19 @@ This tiny React app demonstrates how `@fluent/react` can integrate with React. ## Running -The example app requires a local build of `@fluent/react`. In the root of the -`fluent.js` clone install the build tools: +The example app requires a local build of `@fluent/react`. In the root of +your `fluent.js` clone install the build tools: cd fluent.js/ npm install -Then build `@fluent/react`: +Then build and package `@fluent/react`: cd fluent.js/fluent-react/ npm install make + npm pack + mv fluent-react-*.tgz example/fluent-react.tgz Finally, change back to this directory, and build the example: diff --git a/fluent-react/example/package.json b/fluent-react/example/package.json index 350ff5590..6cde412ce 100644 --- a/fluent-react/example/package.json +++ b/fluent-react/example/package.json @@ -9,7 +9,7 @@ "dependencies": { "@fluent/bundle": "0.15.x", "@fluent/langneg": "0.4.x", - "@fluent/react": "file:../", + "@fluent/react": "file:fluent-react.tgz", "react": "16.8.x", "react-dom": "16.8.x" }, From 4deb00cdcb8446c14d81ccf4fe32619afa700dc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sta=C5=9B=20Ma=C5=82olepszy?= Date: Mon, 6 Apr 2020 18:50:13 +0200 Subject: [PATCH 9/9] Keep current date in App's state --- fluent-react/example/public/en-US.ftl | 4 +++- fluent-react/example/public/pl.ftl | 6 +++++- fluent-react/example/src/App.tsx | 9 ++++----- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/fluent-react/example/public/en-US.ftl b/fluent-react/example/public/en-US.ftl index 84937b89b..f37f9eb0f 100644 --- a/fluent-react/example/public/en-US.ftl +++ b/fluent-react/example/public/en-US.ftl @@ -3,8 +3,10 @@ hello-no-name = Hello, stranger! type-name = .placeholder = Your name +# $date (Date) - Current date, formatted as month and day. today-date = Today is {$date}. -today-time = It's {$date}. +# $date (Date) - Current date, formatted as weekday. +today-weekday = It's {$date}. sign-in-or-cancel = Sign in or cancel. clicked-sign-in = You are now signed in. diff --git a/fluent-react/example/public/pl.ftl b/fluent-react/example/public/pl.ftl index 60a414b7f..646d96617 100644 --- a/fluent-react/example/public/pl.ftl +++ b/fluent-react/example/public/pl.ftl @@ -3,8 +3,12 @@ hello-no-name = Witaj nieznajomy! type-name = .placeholder = Twoje imię +# $date (Date) - Current date, formatted as month and day. today-date = Dziś jest {$date}. -current = Bieżący język: { $locale } + +# Commented out to demonstrate fallback. +# $date (Date) - Current date, formatted as weekday. +# today-weekday = Jest {$date}. sign-in-or-cancel = Zaloguj albo anuluj. clicked-sign-in = Brawo! diff --git a/fluent-react/example/src/App.tsx b/fluent-react/example/src/App.tsx index b9ae8b0b8..2d68cc4f5 100644 --- a/fluent-react/example/src/App.tsx +++ b/fluent-react/example/src/App.tsx @@ -1,11 +1,11 @@ -import React, { ReactNode, ReactElement } from "react"; +import React, { useState } from "react"; import { Localized } from "@fluent/react"; import { FluentDateTime } from "@fluent/bundle"; import { Hello } from "./Hello"; import { LocalizedSignIn } from "./SignIn"; export function App() { - let date = new Date(); + let [date] = useState(() => new Date()); return <> @@ -24,11 +24,10 @@ export function App() {