fusionjs/fusionjs

Modern framework for fast, powerful React apps

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

fusionjs's Issues

[fusion-plugin-i18n-react#172] Allow translation outside of React

This issue was migrated from fusionjs/fusion-plugin-i18n-react#172 and was originally reported by @lhorie.

---

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

Update api of ProviderPlugin to support a custom provider passed

`getDerivedStateFromProps` nulls state

Type of issue

Bug

Description

Current behavior

Returning null from getDerivedStateFromProps sets this.state to null.

Expected behavior

Returning null from getDerivedStateFromProps should not change state.

Steps to reproduce

class MyComponent extends React.Component {
  state = {
    email: '[email protected]'
  }

  static getDerivedStateFromProps() { return null; }

  render() {
    return (<div>{this.state.email}</div>); // should be '[email protected]'
  }
}

Your environment

• fusion-react version: 1.2.1 (issue does not exist in v1.1.0)

Provide React.Context for usage with Hooks.

Type of issue

Feature request

Description

Use React.createContext for client context provider.

Current behavior

Currently, context is Provided via getChildContext. But there is a workaround, you can use ProviderPlugin to use custom provider which can solve the issue.

Expected behavior

Use React 16.3 context, and expose this context from package.
So, that you can use useContext to create hooks for accessing plugin-provided values to allow usage without HOCs.

Add plugin/hoc shorthand

Type of issue

Feature request

Description

The current pattern for creating provider/HOC pairs is not optimal: Current solution:

export const Plugin = ProviderPlugin.create('console', plugin);
export const HOC = ProvidedHOC.create('console');

It would be nice if they could be specified using a single method such as:

const {hoc, provider} = createHOCPluginPair('console', plugin);

The big benefit here is that it can be typed such that hoc actually contains type information about console. In the current solution the type information is lost when ProvidedHOC.create is called.

Add support for overriding the render function

It can be useful to overwrite the render function for testing. For example, you may want to swap out the renderer enzyme shallow rendering.

[fusion-plugin-service-worker#133] A config to specify service-workers only on particular routes

This issue was migrated from fusionjs/fusion-plugin-service-worker#133 and was originally reported by @matthewharwood.

---

Type of issue

Feature

Description

Servicer workers are the new hotness. However, introducing them to an entire web app can be too spicy. It would be great if to test the SW, we could apply it only on particular routes, instead of an entire app. This feature could be through a configuration when registering the service worker. Maybe, the configuration could accept a whitelist of certain routes that the webapp has.

Support react 15

We might as well broaden our supported version range of react since we don't necessarily depend on any react 16 apis.

Pass resolved object from `sideEffect` to `prepared` component instance as props.

Type of issue

Feature request

Description

It would be nice to be able to use the sideEffect passed to prepared to asynchronously fetch data for a component.

I envision something like:

// Fetch username by user id
const hoc = prepared(async (props) => {
  const userResponse = await fetch(`/users/${props.userId}.json`);
  const { username } = userResponse.json();

  return { username };
})();

const Username = ({ username }) => <h1>{username}</h1>;

export default hoc(Username);

Current behavior

The value of a resolved promise returned by sideEffect goes nowhere.

Expected behavior

If sideEffect returns a promise that resolves to an object, it extends its component instance's props, e.g: const instanceProps = { ...sideEffectObject, ...elementProps }.

Steps to reproduce

1. Create a hoc using prepared.
2. Return a promise that resolves an object value, e.g: prepared(() => Promise.resolve({ test: true }))
3. Observe that the returned object's properties are not passed to the enhanced component.

Your environment

• fusion-react version: v1.1.0

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

• npm version (npm --version): 5.6.0

• Operating System: MacOS 10.13.6

[fusion-react#247] Portals support

Currently, client-side prepare is needed to support prepared({defer: false}) (though worth noting that it isn't needed for split().

To support hooks, a custom tree traversal was replaced with react-dom/renderToString.

However, this is problematic with Portals, because portals aren't supported in react-dom/renderToString.

Short/medium term options

• Userland workaround with conditional Portal rendering via context.__IS_PREPARE__
• Replace react-dom/renderToString in prepare with a custom, but hooks-supporting tree traversal such as https://github.com/FormidableLabs/react-ssr-prepass or https://github.com/Ephem/react-lightyear
• Change the API of prepared so that for ({defer: false}), there must be a unique ID and/or it must be serializable/deserializable, allowing for removal of client-side prepare entirely. Or provide an easy way for serialization on the server and synchronous hydration on the client.

Long-term options

• Remove prepared and split entirely in favor of vanilla React Suspense APIs (e.g. React.lazy).

Fix flow types

[fusion-plugin-universal-events#148] Use navigator.sendBeacon when available

This issue was migrated from fusionjs/fusion-plugin-universal-events#148 and was originally reported by @rtsao.

---

It appears navigator.sendBeacon is fairly well supported across browsers: https://caniuse.com/#feat=beacon

Perhaps this API should be used when possible.

Add docs for Provider/HOC stuff

Pass `ctx` as prop to provider component

[fusion-react#166] Add option to specify chunkname when using split.

Type of issue

Feature request

Description

Currently we use a comment syntax to add chunk names to import to add naming to imports when used with split.
This works well, but it leaks implementation details about fusion and will also break if fusion were to replace webpack.

[fusion-test-utils#189] Reduce API opaque-ness and embrace Jest

This issue was migrated from fusionjs/fusion-test-utils#189 and was originally reported by @schnerd.

---

The fusion test environment heavily leverages Jest, which is great. However it does so in a way which is opaque to developers and leads to confusion.

Most developers know that fusion is using Jest internally. So they end up using other useful Jest globals like describe(), beforeAll() etc.

• With that in mind, it makes sense that they'd expect the test() exported from this package to behave like Jest's test() global. And it should! Internally Fusion's test() is just a thin wrapper around Jest's it(). However, test is missing useful helpers like test.only, test.skip, etc. I just sat with a developer who was trying to use these for 10-15 minutes, only to realize they don't exist on fusion's wrapper implementation.
• There's also the mockFunction export which is just a wrapper around jest.fn() without any extra logic. The documentation for mockFunction in README.md is super short and doesn't describe anywhere near the amount of behavior that jest.fn() is capable of.
• assert.matchSnapshot seems to be another unnecessary wrapper around jests matchSnapshot functionality.

It's possible that some of these decisions may have been made in the spirit of trying to keep the Jest dependency hidden in case we want to switch to something else in the future. But I think this ship has sailed considering engineers are already leveraging other jest globals like describe/beforeEach/etc, and mockFunction just returns a jest.fn anyway with all it associated behavior in tact.

In the spirit of turning this into a more concrete request, I'm hoping we can:

• Get rid of Fusion's test export and the assert callback – embrace Jest's test, expect and toMatchSnapshot.
• Get rid of mockFunction and encourage users to use jest.fn().
• Moving forward, more clearly call out in documentation that the full Jest environment is available in tests, and link out to Jest docs where appropriate.

Missing support for getDerivedStateFromProps

Description

Recently many libraries have started breaking with Fusion.js due to getDerivedStateFromProps usage not being called by prepare.

Current behavior

• Clone and setup this repository: https://github.com/IcculusC/fusion-material-ui-bug-lab
• Notice that an error occurs:

• The following server warning also appears: Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.statedirectly or define astate = {}; class property with the desired state in the TransitionGroup component.

Expected behavior

The application should work as expected.

Your environment

• fusion-react version: 1.2.0

Use buildkite for CI

Add initial implementation

[fusion-plugin-i18n-react#220] fusion-cli should be a devDependency

This issue was migrated from fusionjs/fusion-plugin-i18n-react#220 and was originally reported by @ganemone.

---

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

Migrate fusion-create to createPlugin

Uncaught ReferenceError: process is not defined - koa-bodyparser

Type of issue

Bug

Description

I've wrote HTTP endpoints manually by using a plugin middleware. When I import 'koa-bodyparser' in the middleware, the code compiles successfully but it gives 'Uncaught ReferenceError: process is not defined' error on the browser console. Actions on the front end doesn't work but when I request from Post Man the response is not sent back but I can see request body in server logs.

Your environment

Development

• fusion-react version: 1.3.4

• Node.js version: 8.11.2

• npm version: 5.6.0

• Operating System: macOS Mojave

• Browser version: Chrome 70.0.3538.102

Screenshot:

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (config:base). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

[fusion-plugin-service-worker#144] Service worker should unregister itself on js uncaught exception

This issue was migrated from fusionjs/fusion-plugin-service-worker#144 and was originally reported by @cdlewis.

---

I think it would be helpful to have the service worker attempt to unregister itself if there's a JS error. Helps stop people from shooting themselves in the foot. I'm open to taking this assuming it's possible / you agree it would be helpful.

Update dependencies

[fusion-test-utils#200] Add "template" field to mocked context

This issue was migrated from fusionjs/fusion-test-utils#200 and was originally reported by @slonoed.

---

Fusion context for SSR should have template field
https://github.com/fusionjs/fusion-core/blob/198d49db78ece6dcdb5f84e528392ab31a0eeb9f/src/types.js#L33

Unable to disable server side rendering (react component using window fails)

Type of issue

bug

Description

The example in the readme to disable SSR doesn't seem to actually disable it since window is still trying to be called from the server side.

Current behavior

2018-02-21T02:56:17.763Z - fatal: window is not defined stack=ReferenceError: window is not defined
    at Project._onResize (/Users/chr/code/tools-monorepo/jetson/src/components/project.js:58:1)
    at Project.componentWillMount (/Users/chr/code/tools-monorepo/jetson/src/components/project.js:49:1)
    at renderCompositeElementInstance (/Users/chr/code/tools-monorepo/node_modules/fusion-react-async/src/prepare.js:19:14)
    at prepareCompositeElement.then.prepareConfig (/Users/chr/code/tools-monorepo/node_modules/fusion-react-async/src/prepare.js:56:12)
    at <anonymous>

Expected behavior

Function should run in client side

Steps to reproduce

1. Follow the disable server side rendering example
2. Implement a basic window function, like an event listener
3. Run function at runtime

Your environment

• fusion-react version: 1.0.2

• Node.js version (node --version): 8.9.4

• npm version (npm --version): 5.6.0

• Operating System: MacOS

React hooks don't work

Type of issue

Bug

Description

I want to use React hooks, when a feature is released (next week).

Current behavior

When using hooks, dev server shows error.

Invariant Violation: Hooks can only be called inside the body of a function component.

Expected behavior

Works normally

Steps to reproduce

1. Create new fusion app yarn create fusion-app my-fusion-app
2. Replace react and react-dom versions to v16.8.0-alpha.1
3. Run yarn to install new versions
4. Change src/pages/home.js by adding a simple hook into component function const [a,b] = useState(0) + add import import React, {useState} from 'react'

Your environment

• fusion-react version: 1.3.4

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

• npm version (npm --version): 6.4.1

• Operating System: MacOS mojave

prepareElement doesn't work with react-transition-group

Type of issue

Bug

Description

Currently using material ui & Fusion.js results in an error with a stacktrace leading back to fusion-react. It seems that this may be resulting in mismatches when server rendering and hydrating.

We have had multiple reports from open source contributors running into this issue.

Error message

When using with material-ui:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the TransitionGroup component.
	warningWithoutStack
react.development.js:244
warnNoop
react.development.js:293
enqueueSetState
react.development.js:362
./node_modules/react/cjs/react.development.js/Component.prototype.setState
react.development.js:413
componentWillMount
react-lifecycles-compat.es.js:12
renderCompositeElementInstance
prepare.js:36
prepareElement/<
prepare.js:89
run
es6.promise.js:75
notify/<
es6.promise.js:92
flush
_microtask.js:18

When using react-transition-group directly (v2):

TypeError: Cannot read property 'bind' of undefined
    at /...node_modules/react-transition-group/utils/ChildMapping.js:142:28
    at Array.forEach ()
    at getNextChildMapping (/...node_modules/react-transition-group/utils/ChildMapping.js:115:25)
    at Function.getDerivedStateFromProps (/...node_modules/react-transition-group/TransitionGroup.js:142:138)
    at TransitionGroup.componentWillMount (/...node_modules/react-lifecycles-compat/react-lifecycles-compat.cjs.js:14:32)
    at componentWillMount (/...node_modules/fusion-react/src/async/prepare.js:36:14)
    at renderCompositeElementInstance (/...node_modules/fusion-react/src/async/prepare.js:89:14)
    at
    at process._tickCallback (internal/process/next_tick.js:188:7)

[email protected]

[fusion-plugin-service-worker#29] Expose logger to service worker

This issue was migrated from fusionjs/fusion-plugin-service-worker#29 and was originally reported by @hammeiam.

---

Type of issue

Feature

Description

Expose Logger to SW rather than just logging to console

[fusion-plugin-service-worker#27] Force update SW after some amount of time

This issue was migrated from fusionjs/fusion-plugin-service-worker#27 and was originally reported by @hammeiam.

---

Include a daily (or configurable) force-update for users that have long-running sessions? I could see this being an issue for some ubereats.com users
https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#manual_updates

Type of issue

Feature request

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset name not found within published preset config (monorepo:angularmaterial). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

[fusion-test-utils#133] Add a way to test stream requests/responses.

This issue was migrated from fusionjs/fusion-test-utils#133 and was originally reported by @slonoed.

---

Type of issue

Feature

Description

Some apps use plugin middleware to handle a request and read it as a stream. IE: file uploading.
It would be nice to have an API for this in test utils.

Current behavior

No nice API

Expected behavior

Supernice API

Notes

node-mocks-http package still missing correct inheritance form Readable.
It should be fixed with this commit released.
eugef/node-mocks-http@a8c44c0

`componentWillUnmount` called without calling `componentDidMount`

Type of issue

Bug

Current behavior

componentWillUnmount is called but componentDidMount is not

Expected behavior

componentWillUnmount should only be called if componentDidMount is called on a component.

Steps to reproduce

Create a component that defines componentWillUnmount and componentDidMount.

Your environment

• fusion-react version: 1.2.1 (it worked properly in 1.1.0)

[fusion-plugin-service-worker#24] Assign precacehePaths and cacheablePaths to ctx

This issue was migrated from fusionjs/fusion-plugin-service-worker#24 and was originally reported by @angus-c.

---

• precachePaths is an array of core asset paths (usually main.js and vendor.js)
• cacheablePaths is a concatenation of precachePaths and all other static assets (could just be JS bundles for phase 1)

Can i deploy fusionjs app as static js file?

So i would like to deploy fusionjs app on Amazon S3 or Netlify. Is it possible and how? Thanks!

Fix prepare provider

Migrate fusion-react to DI

[fusion-plugin-service-worker#25] Handle SW middleware errors

This issue was migrated from fusionjs/fusion-plugin-service-worker#25 and was originally reported by @angus-c.

---

[fusion-test-utils#117] Why Jest _and_ Tape?

This issue was migrated from fusionjs/fusion-test-utils#117 and was originally reported by @shannonmoeller.

---

Why does this use Jest as well as Tape?

    "jest": "22.4.2",
    "jest-cli": "22.4.2",
    ...
    "tape-cup": "4.7.1",

[fusion-test-utils#209] Support `test.skip` and `test.only`

This issue was migrated from fusionjs/fusion-test-utils#209 and was originally reported by @supersonicclay.

---

Type of issue

Feature Request

Description

import {test} from 'fusion-test-utils';

test.only('my test', () => { ... });

Current behavior

test.only TypeError: _fusionTestUtils.test.only is not a function

Expected behavior

Run just that test

Or, the recommendation should be to just use jest's globals.

Update provider plugin to use proptypes.any rather than proptypes.object

We shouldn't make assumptions about the types of thing being provided.

[fusion-test-utils#103] Add Flow type definitions for node-mocks-http to improve Flow coverage

This issue was migrated from fusionjs/fusion-test-utils#103 and was originally reported by @AlexMSmithCA.

---

Type of issue

Missing Flow type definitions

Description

src/mock-context.js has low Flow type coverage due to missing type definitions for node-mocks-http.

Current behavior

Low Flow coverage

Expected behavior

100% Flow coverage

Steps to reproduce

1. npm install -g flow-coverage-report
2. flow-coverage-report -i 'src/**/*.js' -i 'src/**/*.jsx' -x 'src/test/**' -t html -t json -t text --threshold 90

Your environment

• fusion-test-utils version: v1.0.2

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

• npm version (npm --version): v5.8.0

• Operating System: macOS High SIerra v10.13.3

prepare function fails for react portals

We have an element in our app which is an instance of React Portal and it seems to not have type field although the element itself is valid.

I think that prepare function assumes every React Element has a type function.

 Uncaught TypeError: type is not a function
    at prepareElement (prepare.js:54)
    at _prepare (prepare.js:71)
    at prepare.js:74
    at Array.map (<anonymous>)
    at prepare.js:72

Workaround was to exclude this el.

Issue with simulation tests and fusion-react provider plugins

Simulation tests will currently call middleware functions several times in a row. This middleware fails due to changing originalMiddleware, and is not idempotent. This should allow us to call this middleware several times with the same result.

The issue is seen in the simulation tests added here: fusionjs/fusion-cli#302

Prepare method docs confusing

The prepare documentation is confusing. Likely a holdover from fusion-react-async. We should fix this and remove the circular reference.

Reported form the community.

Fix bug with incorrectly named props

Pass `ctx` as prop to provider component

[fusion-plugin-service-worker#23] Generate serviceWorkerTemplateSouce in Webpack

This issue was migrated from fusionjs/fusion-plugin-service-worker#23 and was originally reported by @angus-c.

---

[fusion-plugin-service-worker#76] Update README to reflect webpack issue

This issue was migrated from fusionjs/fusion-plugin-service-worker#76 and was originally reported by @angus-c.

---

Type of issue

Description

Current behavior

Expected behavior

Steps to reproduce

Your environment

• fusion-plugin-service-worker version:

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

• npm version (npm --version):

• Operating System: