fusionjs/fusion-plugin-i18n-react

Migrated to https://github.com/fusionjs/fusionjs

FUSION.JS

Modern framework for fast, powerful React apps

What is it?

fu·sion — noun

The process or result of joining two or more things together to form a single entity.

Fusion.js, Uber’s open source universal web framework, represents the fusion of the client and the server. It's geared for server-side rendering out of the box, and its plugin-driven architecture allows for complex frontend and backend logic to be encapsulated in a single plugin:

import App from 'fusion-react';
import Router from 'fusion-plugin-react-router';

export default () => {
  const app = new App(<div>...</div>);

  /*
  One line of code sets up everything you need for routing:
  - Server rendering
  - React Providers on both server and browser
  - Bundle splitting integration
  - Hot module reloading support
  */
  app.register(Router);

  return app;
}

We initially built Fusion.js to make our own websites easier to maintain, but were so impressed with the benefits that we decided to offer it to the community as an open source project!

Try it out

If you're interested in giving Fusion.js a shot, Overview and Core Concepts are great places to start.

Contributing

This is a monorepo of all open source Fusion.js packages maintained using Yarn v2. Take a look at CONTRIBUTING.md for info on how to develop in this repo.

License

MIT

fusion-plugin-i18n-react's Issues

Update dependencies

Fix flow types

Wrap translated text in Fragment instead of <span>

Currently the Translate component wraps around the translation <span>Bonjour</span> by default. Has any thought been given to using a React <Fragment> in instead of forcing the extra markup?

fusion-plugin-i18n-react/src/translate.js

Lines 25 to 28 in aacf2ff

	<span>
	{(context.i18n && context.i18n.translate(props.id, props.data)) ||
	props.id}
	</span>

Type of issue

Enhancement

Add Token dependencies to readme

Problem/Rationale

Documentation regarding Fusion API is out of date given recent changes to leverage new Dependency Injection architecture.

Solution/Change/Deliverable

Update documentation

Allow translation outside of React

Type of issue

feature

Description

Some internal Uber stakeholders rely on the ability to translate files from Redux actions. Currently there's no clean way to access the translation API from there.

Current behavior

Currently one needs to do something like this:

class Foo extends React.Component {
  doStuff() {
    this.props.doStuff(this.props.translate('foo'));
  }
  render() {
    return <button onClick={this.doStuff}>Click me</button>
  }
}
export default compose(
  withTranslations(['foo']),
  // ... other stuff
)(Foo)

Expected behavior

Some way to provide translations to actions without having to refactor all the components in an app

Migrate fusion-plugin-i18n-react to DI

fusion-cli should be a devDependency

I don't see any reason for having fusion-cli as a direct dependency rather than a devDependency, when it is only used for testing. We should move it to a devDependency

Plugin needs to export tokens for I18nLoader, etc

Migrate to new fusion-plugin api

Migrate fusion-plugin-i18n-react to createPlugin

Simplify custom provider

We don't need to call props.provides.from in both the constructor and in getChildContext.
We can simplify by only calling it in the constructor and referencing it in the getChildContext
function.

Greenkeep `fusion-plugin-i18n` to avoid duplicate, mismatched dependencies

Type of issue

Bug

Description

An app with a dependency on both fusion-plugin-i18n and fusion-plugin-i18n-react that are both on @latest may point to two different versions of fusion-plugin-i18n.

Normally we recommend folks only depend upon fusion-plugin-i18n-react is they need the React helpers. Otherwise, only use fusion-plugin-i18n. In some cases, we have seen folks depend upon both directly.

Current behavior

This may lead to translations not working as expected (e.g. showing translation keys on client side).

Expected behavior

When on @latest, these two dependencies should work as expected.

Steps to reproduce

1. Update to @latest for both fusion-plugin-i18n and fusion-plugin-i18n-react. As of writing this issue, v1.1.6 and v1.2.1 respectively.
2. Try to load translations in an app.
3. Translations may differ from server-side (works as expected) and client-side (shows translation keys only).

Your environment

• fusion-plugin-i18n-react version: v1.2.1 (and v1.1.6 for fusion-plugin-i18n)
• Node.js version (node --version): v8.12.0
• npm version (npm --version): v6.4.1
• Operating System: Mac OS X

Upgrade fusion-plugin-i18n to 0.4.1

Add initial implementation

Use Buildkite and Docker for CI

Fix issue caused by new version of rollup

Dynamic translations are not being loaded

In the browser-tests repo we have a translation loader that looks like:

if (__NODE__) {
    const MemoryTranslationsLoader = {
      from: () => ({
        locale: 'en-US',
        translations,
      }),
    };
    app.register(I18nLoaderToken, MemoryTranslationsLoader);
}

SSR translations work, but client-side dynamic translations are broken. If this is a bug with our implementation we would like to surface the an error message if possible.

Relevant browser-tests PR: fusionjs/browser-tests#56

withTranslations overwrites its child's context

Due to this line, the component that withTranslations wraps loses its context. This is very harmful when used in conjunction with plugins such as fusion-plugin-rpc-redux-react (HOC's created by withRPCRedux rely on context.store to be defined, and it doesn't check for it, resulting in a delayed error).

Client side translations broken in 1.2.0-1

Type of issue

Bug

Description

After upgrading from 1.1.1-1 to 1.2.1-0 translated strings are not loaded in the browser, instead the keys are displayed.

Current behavior

Translated strings not shown on client

Expected behavior

Translated strings shown on client

Your environment

• fusion-plugin-i18n-react version: 1.2.1-0

• Node.js version (node --version): v8.11.3

Update dependencies