Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
react-arbiter
Advanced tools
React Arbiter provides a sets of components and utilities to recall runtime extensions to your application and to stasis third-party components to avoid crashing your application.
:warning: Deprecated! Please use Piral instead.
You need to have Node with NPM installed. In your repository run
npm i react-arbiter
In the simplest case you want to just use the ArbiterRecall
without any loading special rendering while loading. For this use
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 = (
<ArbiterRecall createApi={createApi} fetchModules={fetchModules}>
<YourComponent />
</ArbiterRecall>
);
A module comes with the following interface:
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
).
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.
const ProtectedComponent = (
<ArbiterStasis onError={e => console.error(e)}>
<MyCrashingComponent />
</ArbiterStasis>
);
Furthermore, we can determine what to render when an error occurs:
const ProtectedComponent = (
<ArbiterStasis renderError={e => <div>Display the error: {e.message}</div>}>
<MyCrashingComponent />
</ArbiterStasis>
);
There is also a HOC to combine the renderError
with the component to put into a stasis field.
const MyStasis = withStasis(({ error, type }) => (
<div>
<h1>{type}</h1>
<p>Display the error: {error.message}</p>
</div>
));
const ProtectedComponent = (
<MyStasis type="Example">
<MyCrashingComponent />
</MyStasis>
);
Besides the added error
prop other props are being forwarded as expected (see, e.g., the type
prop in the previous example).
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.
const MyReactComponent = props => <div>{props.children}</div>;
MyReactComponent.displayName = 'MyReactComponent';
const MyForeignComponent = (element, props) => {
element.innerHTML = '<b>Hello World!</b>';
};
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.
react-arbiter is released using the MIT license. For more information see the LICENSE file.
0.9.4
FAQs
Recall all your modules to extend your SPA dynamically at runtime.
The npm package react-arbiter receives a total of 57 weekly downloads. As such, react-arbiter popularity was classified as not popular.
We found that react-arbiter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.