projectfluent · stasm · Apr 6, 2020 · Apr 3, 2020 · Apr 3, 2020 · Apr 3, 2020
diff --git 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/...react/examples/change-language/.gitignore → fluent-react/example/.gitignore b/...react/examples/change-language/.gitignore → 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
@@ -0,0 +1,27 @@
+# @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
+your `fluent.js` clone install the build tools:
+
+    cd fluent.js/
+    npm install
+
+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:
+
+    cd fluent.js/fluent-react/example/
+    npm install
+    npm start
+
+Open http://localhost:1234 to see the example running.
diff --git a/fluent-react/example/package.json 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-react.tgz",
+    "react": "16.8.x",
+    "react-dom": "16.8.x"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.32",
+    "@types/react-dom": "^16.9.6",
+    "parcel-bundler": "1.12.x"
+  },
+  "engines": {
+    "node": ">=10.0.0",
+    "browsers": "Firefox >= 57"
+  }
+}
diff --git a/fluent-react/example/public/en-US.ftl b/fluent-react/example/public/en-US.ftl
@@ -0,0 +1,13 @@
+hello = Hello, { $userName }!
+hello-no-name = Hello, stranger!
+type-name =
+    .placeholder = Your name
+
+# $date (Date) - Current date, formatted as month and day.
+today-date = Today is {$date}.
+# $date (Date) - Current date, formatted as weekday.
+today-weekday = It's {$date}.
+
+sign-in-or-cancel = <signin>Sign in</signin> or <cancel>cancel</cancel>.
+clicked-sign-in = You are now signed in.
+clicked-cancel = OK, nevermind.
diff --git a/...act/examples/redux-sync/public/index.html → fluent-react/example/public/index.html b/...act/examples/redux-sync/public/index.html → fluent-react/example/public/index.html
@@ -3,10 +3,10 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Redux sync - a fluent-react example</title>
+    <title>@fluent/react Example</title>
   </head>
   <body>
     <div id="root"></div>
-    <script src="../src/index.js"></script>
+    <script src="../src/index.tsx"></script>
   </body>
 </html>
diff --git a/fluent-react/example/public/pl.ftl b/fluent-react/example/public/pl.ftl
@@ -0,0 +1,15 @@
+hello = Cześć { $userName }!
+hello-no-name = Witaj nieznajomy!
+type-name =
+    .placeholder = Twoje imię
+
+# $date (Date) - Current date, formatted as month and day.
+today-date = Dziś jest {$date}.
+
+# Commented out to demonstrate fallback.
+# $date (Date) - Current date, formatted as weekday.
+# today-weekday = Jest {$date}.
+
+sign-in-or-cancel = <signin>Zaloguj</signin> albo <cancel>anuluj</cancel>.
+clicked-sign-in = Brawo!
+clicked-cancel = OK, nieważne.
diff --git a/fluent-react/example/src/App.tsx b/fluent-react/example/src/App.tsx
@@ -0,0 +1,41 @@
+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] = useState(() => new Date());
+    return <>
+        <Hello />
+
+        <Localized
+            id="today-date"
+            vars={{
+                date: new FluentDateTime(date.getTime(), {
+                    month: "long",
+                    day: "numeric",
+                })
+            }}
+        >
+            <p>
+                {"Today is {$date}."}
+            </p>
+        </Localized>
+
+        <Localized
+            id="today-weekday"
+            vars={{
+                date: new FluentDateTime(date.getTime(), {
+                    weekday: "long",
+                })
+            }}
+        >
+            <p>
+                {"It's {$date}."}
+            </p>
+        </Localized>
+
+        <LocalizedSignIn />
+    </>;
+}
diff --git a/fluent-react/example/src/Hello.tsx b/fluent-react/example/src/Hello.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { Localized } from "@fluent/react";
+
+export function Hello() {
+    let [userName, setUserName] = useState("");
+
+    return (
+        <div>
+            {userName ?
+                <Localized id="hello" vars={{ userName }}>
+                    <h1>{'Hello, { $userName }!'}</h1>
+                </Localized>
+                :
+                <Localized id="hello-no-name">
+                    <h1>Hello, stranger!</h1>
+                </Localized>
+            }
+
+            <Localized id="type-name" attrs={{ placeholder: true }}>
+                <input
+                    type="text"
+                    placeholder="Type your name"
+                    onChange={evt => setUserName(evt.target.value)}
+                    value={userName}
+                />
+            </Localized>
+        </div>
+    );
+}
diff --git a/fluent-react/example/src/SignIn.tsx b/fluent-react/example/src/SignIn.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Localized, withLocalization, WithLocalizationProps } from "@fluent/react";
+
+function SignIn(props: WithLocalizationProps) {
+  function showAlert(id: string) {
+    const { getString } = props;
+    alert(getString(id));
+  }
+
+  return (
+    <div>
+      <Localized
+        id="sign-in-or-cancel"
+        elems={{
+          signin: <button onClick={() => showAlert('clicked-sign-in')}></button>,
+          cancel: <button className="text" onClick={() => showAlert('clicked-cancel')}></button>
+        }}
+      >
+        <p>{'<signin>Sign in</signin> or <cancel>cancel</cancel>.'}</p>
+      </Localized>
+    </div>
+  );
+}
+
+export const LocalizedSignIn = withLocalization(SignIn);
diff --git a/fluent-react/example/src/index.tsx b/fluent-react/example/src/index.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { AppLocalizationProvider } from "./l10n";
+import { App } from "./App";
+
+ReactDOM.render(
+    <AppLocalizationProvider>
+        <App />
+    </AppLocalizationProvider>,
+    document.getElementById("root")
+);
diff --git a/fluent-react/example/src/l10n.tsx b/fluent-react/example/src/l10n.tsx
@@ -0,0 +1,77 @@
+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.
+const ftl = require("../public/*.ftl");
+
+const DEFAULT_LOCALE = "en-US";
+const AVAILABLE_LOCALES = {
+    "en-US": "English",
+    "pl": "Polish",
+};
+
+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: Array<[string, string]>) {
+    for (let [locale, messages] of fetchedMessages) {
+        let resource = new FluentResource(messages);
+        let bundle = new FluentBundle(locale);
+        bundle.addResource(resource);
+        yield bundle;
+    }
+}
+
+interface AppLocalizationProviderProps {
+  children: ReactNode;
+}
+
+export function AppLocalizationProvider(props: AppLocalizationProviderProps) {
+    let [currentLocales, setCurrentLocales] = useState([DEFAULT_LOCALE]);
+    let [l10n, setL10n] = useState<ReactLocalization | null>(null);
+
+    useEffect(() => {
+        changeLocales(navigator.languages as Array<string>);
+    }, []);
+
+    async function changeLocales(userLocales: Array<string>) {
+        let currentLocales = negotiateLanguages(
+            userLocales,
+            Object.keys(AVAILABLE_LOCALES),
+            { defaultLocale: DEFAULT_LOCALE }
+        );
+        setCurrentLocales(currentLocales);
+
+        let fetchedMessages = await Promise.all(
+            currentLocales.map(fetchMessages)
+        );
+
+        let bundles = lazilyParsedBundles(fetchedMessages);
+        setL10n(new ReactLocalization(bundles));
+    }
+
+    if (l10n === null) {
+        return <div>Loading…</div>;
+    }
+
+    return <>
+        <LocalizationProvider l10n={l10n}>
+            {Children.only(props.children)}
+        </LocalizationProvider>
+
+        <hr />
+        <select
+            onChange={event => changeLocales([event.target.value])}
+            value={currentLocales[0]}>
+            {Object.entries(AVAILABLE_LOCALES).map(
+                ([code, name]) => <option key={code} value={code}>{name}</option>
+            )}
+        </select>
+    </>;
+}
diff --git a/fluent-react/example/tsconfig.json b/fluent-react/example/tsconfig.json
@@ -0,0 +1,7 @@
+{
+    "compilerOptions": {
+        "esModuleInterop": true,
+        "strict": true,
+        "jsx": "react",
+    }
+}
diff --git a/fluent-react/examples/README.md b/fluent-react/examples/README.md
diff --git a/fluent-react/examples/async-messages/.gitignore b/fluent-react/examples/async-messages/.gitignore
diff --git a/fluent-react/examples/async-messages/package.json b/fluent-react/examples/async-messages/package.json
diff --git a/fluent-react/examples/async-messages/public/en-US.ftl b/fluent-react/examples/async-messages/public/en-US.ftl
diff --git a/fluent-react/examples/async-messages/public/index.html b/fluent-react/examples/async-messages/public/index.html
diff --git a/fluent-react/examples/async-messages/public/pl.ftl b/fluent-react/examples/async-messages/public/pl.ftl
diff --git a/fluent-react/examples/async-messages/src/App.js b/fluent-react/examples/async-messages/src/App.js
diff --git a/fluent-react/examples/async-messages/src/index.js b/fluent-react/examples/async-messages/src/index.js
-Original file line number
+Diff line change
@@ -1,2 +1,3 @@
     .cache
     dist
+    *.tgz