Recall all your modules to extend your SPA dynamically at runtime.
npm install react-arbitersh
npm i react-arbiter
`
$3
In the simplest case you want to just use the ArbiterRecall without any loading special rendering while loading. For this use
`jsx
import { ArbiterRecall } from 'react-arbiter';
function createApi(moduleMeta) {
//create here an API object for the respective module
return {};
}
function fetchModules() {
//get a list of the available modules, potentially with content
return fetch('/your/modules');
}
const App = (
);
`
A module comes with the following interface:
`ts
interface ArbiterModuleMetadata {
version: string;
name: string;
dependencies: {
[name: string]: string;
};
content?: string;
link?: string;
hash: string;
}
`
This is similar to what the package.json looks like, however, containing three new elements: A hash representing the module, and either a link to the module's content (link) or the content directly (content).
$3
React Arbiter comes with a stasis field for third-party components. This is essentially just an error boundary that helps to prevent any external components destroying the whole application when crashing.
`jsx
const ProtectedComponent = (
console.error(e)}>
);
`
Furthermore, we can determine what to render when an error occurs:
`jsx
const ProtectedComponent = (
Display the error: {e.message}}>
);
`
There is also a HOC to combine the renderError with the component to put into a stasis field.
`jsx
const MyStasis = withStasis(({ error, type }) => (
{type}
Display the error: {error.message}
));
const ProtectedComponent = (
);
`
Besides the added error prop other props are being forwarded as expected (see, e.g., the type prop in the previous example).
$3
React Arbiter also gives you some utilities for wrapping components. For ordinary React components that means just placing them in a stasis field, however, for non-React components (referred to foreign components) we also introduce a React wrapper that hosts a DOM node for carrying the foreign component.
`jsx
const MyReactComponent = props => {props.children};
MyReactComponent.displayName = 'MyReactComponent';
const MyForeignComponent = (element, props) => {
element.innerHTML = 'Hello World!';
};
const WrappedReactComponent = wrapComponent(MyReactComponent);
const WrappedForeignComponent = wrapComponent(MyForeignComponent);
`
Important: The wrapComponent only supports React SFCs if they have the displayName` property properly set (see above). Otherwise, this helper function cannot distinguish between a foreign and a React component and will therefore choose the foreign component.