4.8.7 • Published 1 year ago

fusion-react v4.8.7

Weekly downloads
291
License
MIT
Repository
github
Last release
1 year ago

fusion-react

Build status

Provides a Fusion.js application class that is pre-configured with React universal rendering.

The App class from this package should typically be used instead of App from fusion-core if you want React as the rendering engine, and you want it to be configured to do both server and client rendering.


Table of contents


Installation

yarn add fusion-react

Usage

// ./src/main.js
import React from 'react';
import App from 'fusion-react';

const Hello = () => <div>Hello</div>;

export default function() {
  return new App(<Hello />);
}

API

App

import App from 'fusion-react';

A class that represents an application. An application is responsible for rendering (both virtual dom and server-side rendering). The functionality of an application is extended via plugins.

Constructor

const app: App = new App(el: ReactElement, render: ?(el: ReactElement) => any);
  • el: ReactElement - a template root. In a React application, this would be a React element created via React.createElement or a JSX expression.
  • render: ?Plugin<Render>|Render - Optional. Defines how rendering should occur. A Plugin should provide a value of type Render
    • type Render = (el:any) => any

app.register

app.register(plugin: Plugin);
app.register(token: Token, plugin: Plugin);
app.register(token: Token, value: any);

Call this method to register a plugin or configuration value into a Fusion.js application.

You can optionally pass a token as the first argument to associate the plugin/value to the token, so that they can be referenced by other plugins within Fusion.js' dependency injection system.

app.middleware

app.middleware((deps: Object<string, Token>), (deps: Object) => Middleware);
app.middleware((middleware: Middleware));
  • deps: Object<string,Token> - A map of local dependency names to DI tokens
  • middleware: Middleare - a middleware
  • returns undefined

This method is a shortcut for registering middleware plugins. Typically, you should write middlewares as plugins so you can organize different middlewares into different files.

app.enhance

app.enhance(token: Token, value: any => Plugin | Value);

This method is useful for composing / enhancing functionality of existing tokens in the DI system.

app.cleanup

await app.cleanup();

Calls all plugin cleanup methods. Useful for testing.

  • returns Promise

Provider

Provider.create

import {Provider} from 'fusion-react';
const ProviderComponent:React.Component = Provider.create(name: string);
  • name: string - Required. The name of the property set in context by the provider component. name is also used to generate the displayName of ProviderComponent, e.g. if name is foo, ProviderComponent.displayName becomes FooProvider
  • returns ProviderComponent: React.Component - A component that sets a context property on a class that extends BaseComponent

ProviderPlugin

import {ProviderPlugin} from 'fusion-react';

Creates a plugin that wraps the React tree with a context provider component.

ProviderPlugin.create

const plugin:Plugin = ProviderPlugin.create(name: string, plugin: Plugin, ProviderComponent: React.Component);
  • name: string - Required. The name of the property set in context by the provider component. name is also used to generate the displayName of ProviderComponent, e.g. if name is foo, ProviderComponent.displayName becomes FooProvider
  • plugin: Plugin - Required. Creates a provider for this plugin.
  • ProviderComponent: React.Component - Optional. An overriding provider component for custom logic
  • Plugin: Plugin - A plugin that registers its provider onto the React tree

ProvidedHOC

import {ProvidedHOC} from 'fusion-react';

Creates a HOC that exposes a value from React context to the component's props.

ProvidedHOC.create

const hoc:HOC = ProvidedHOC.create(name: string, mapProvidesToProps: Object => Object);
  • name: string - Required. The name of the property set in context by the corresponding provider component.
  • mapProvidesToProps: Object => Object - Optional. Defaults to provides => ({[name]: provides}). Determines what props are exposed by the HOC
  • returns hoc: Component => Component

Examples

Disabling server-side rendering

Sometimes it is desirable to avoid server-side rendering. To do that, override the render argument when instantiating App:

// src/main.js
import App from 'fusion-react';
import ReactDOM from 'react-dom';

const render = __NODE__
  ? () => '<div id="root"></div>'
  : el => ReactDOM.render(el, document.getElementById('root'));
const app = new App(root, render);

Creating a Provider/HOC pair

// in src/plugins/my-plugin.js
import {createPlugin} from 'fusion-core';

const plugin = createPlugin({
  provides() {
    return console;
  },
});

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

// in src/main.js
import {Plugin} from './plugins/my-plugin.js';
app.register(Plugin);

// in components/some-component.js
const component = ({console}) => {
  return <button onClick={() => console.log('hello')}>Click me</button>;
};
export default HOC(component);
4.8.7

1 year ago

4.8.5

1 year ago

4.8.4

1 year ago

4.8.6

1 year ago

4.8.1

1 year ago

4.8.0

1 year ago

4.8.3

1 year ago

4.8.2

1 year ago

4.7.0

2 years ago

4.7.2

2 years ago

4.7.1

2 years ago

4.6.0

2 years ago

4.4.1

2 years ago

4.4.2

2 years ago

4.5.0

2 years ago

4.4.0

2 years ago

4.3.0

2 years ago

4.2.7

2 years ago

4.2.9

2 years ago

4.2.8

2 years ago

4.2.3

2 years ago

4.2.2

2 years ago

4.2.5

2 years ago

4.2.4

2 years ago

4.2.6

2 years ago

4.2.1

2 years ago

4.2.0

3 years ago

4.1.3

3 years ago

4.1.2

3 years ago

4.1.1

3 years ago

4.1.0

3 years ago

4.0.10

3 years ago

4.0.11

3 years ago

4.0.9

3 years ago

4.0.8

3 years ago

4.0.7

3 years ago

4.0.6

3 years ago

4.0.5

4 years ago

4.0.4

4 years ago

4.0.3

4 years ago

4.0.2

4 years ago

4.0.1

4 years ago

4.0.0

4 years ago

3.2.0

4 years ago

3.1.9

4 years ago

3.1.8

4 years ago

3.1.7

4 years ago

3.1.6

5 years ago

3.1.5

5 years ago

3.1.4

5 years ago

3.1.3

5 years ago

3.1.2

5 years ago

3.1.1

5 years ago

3.1.0

5 years ago

3.0.0

5 years ago

2.1.0-1

5 years ago

2.1.0-0

5 years ago

2.0.0

5 years ago

2.0.0-alpha.4

5 years ago

2.0.0-alpha.3

5 years ago

2.0.0-alpha.2

5 years ago

2.0.0-alpha.1

5 years ago

2.0.0-alpha.0

5 years ago

1.3.7

5 years ago

1.3.7-1

5 years ago

1.3.7-0

5 years ago

1.3.6

5 years ago

1.3.6-0

5 years ago

1.3.5

5 years ago

1.3.4

5 years ago

1.3.4-0

5 years ago

1.3.3

5 years ago

1.3.3-0

6 years ago

1.3.2

6 years ago

1.3.1

6 years ago

1.3.1-1

6 years ago

1.3.0

6 years ago

1.3.1-0

6 years ago

1.3.0-0

6 years ago

1.3.0-alpha.0

6 years ago

1.2.2

6 years ago

1.2.2-0

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.1-0

6 years ago

1.1.0

6 years ago

1.0.5

6 years ago

1.0.5-0

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.4.3

6 years ago

0.4.2

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.2

6 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.0

6 years ago

0.1.10

6 years ago

0.1.9

7 years ago

0.1.8

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.1-prealpha.0

7 years ago