Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@module-federation/utilities
Advanced tools
For warning: [`@module-federation/runtime`](https://module-federation.io/guide/basic/runtime.html) is recommended as a replacement
For warning: @module-federation/runtime
is recommended as a replacement
This library was generated with Nx.
Run nx build utils
to build the library.
Run nx test utils
to execute the unit tests via Jest.
FederatedBoundary
A component wrapper that provides a fallback for safe imports if something were to fail when grabbing a module off of a remote host.
This wrapper also exposes an optional property for a custom react error boundary component.
Any extra props will be passed directly to the imported module.
Usage looks something like this:
import { FederationBoundary } from '@module-federation/utilities/src/utils/react';
// defining dynamicImport and fallback outside the Component to keep the component identity
// another alternative would be to use useMemo
const dynamicImport = () => import('some_remote_host_name').then((m) => m.Component);
const fallback = () => import('@npm/backup').then((m) => m.Component);
const MyPage = () => {
return <FederationBoundary dynamicImporter={dynamicImport} fallback={fallback} customBoundary={CustomErrorBoundary} />;
};
ImportRemote
A function which will enable dynamic imports of remotely exposed modules using the Module Federation plugin. It uses the method described in the official Webpack configuration under Dynamic Remote Containers.
This function will allow you to provide a static url or an async method to retrieve a url from a configuration service.
Usage looks something like this:
import { importRemote } from '@module-federation/utilities';
// --
// If it's a regular js module:
// --
importRemote({
url: 'http://localhost:3001',
scope: 'Foo',
module: 'Bar',
}).then(
(
{
/* list of Bar exports */
},
) => {
// Use Bar exports
},
);
// --
// If it's a ESM module (this is currently the default for NX):
// --
const Bar = lazy(() => importRemote({ url: 'http://localhost:3001', scope: 'Foo', module: 'Bar', esm: true }));
return (
<Suspense fallback={<div>Loading Bar...</div>}>
<Bar />
</Suspense>
);
// --
// If Bar is a React component you can use it with lazy and Suspense just like a dynamic import:
// --
const Bar = lazy(() => importRemote({ url: 'http://localhost:3001', scope: 'Foo', module: 'Bar' }));
return (
<Suspense fallback={<div>Loading Bar...</div>}>
<Bar />
</Suspense>
);
import { importRemote } from '@module-federation/utilities';
// If it's a regular js module:
importRemote({
url: () => MyAsyncMethod('remote_name'),
scope: 'Foo',
module: 'Bar',
}).then(
(
{
/* list of Bar exports */
},
) => {
// Use Bar exports
},
);
// If Bar is a React component you can use it with lazy and Suspense just like a dynamic import:
const Bar = lazy(() =>
importRemote({
url: () => MyAsyncMethod('remote_name'),
scope: 'Foo',
module: 'Bar',
}),
);
return (
<Suspense fallback={<div>Loading Bar...</div>}>
<Bar />
</Suspense>
);
// You can also combine importRemote and FederationBoundary to have a dynamic remote URL and a fallback when there is an error on the remote
const dynamicImporter = () =>
importRemote({
url: 'http://localhost:3001',
scope: 'Foo',
module: 'Bar',
});
const fallback = () => import('@npm/backup').then((m) => m.Component);
const Bar = () => {
return <FederationBoundary dynamicImporter={dynamicImporter} fallback={fallback} />;
};
Apart from url, scope and module you can also pass additional options to the importRemote() function:
FAQs
For warning: [`@module-federation/runtime`](https://module-federation.io/guide/basic/runtime.html) is recommended as a replacement
The npm package @module-federation/utilities receives a total of 143,938 weekly downloads. As such, @module-federation/utilities popularity was classified as popular.
We found that @module-federation/utilities demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.