An open API service indexing awesome lists of open source software.

https://github.com/jacob-ebey/esbuild-federation-share-scope

Enables federation share scope for interop with Webpack 5 Module Federation containers.
https://github.com/jacob-ebey/esbuild-federation-share-scope

Last synced: 3 months ago
JSON representation

Enables federation share scope for interop with Webpack 5 Module Federation containers.

Awesome Lists containing this project

README

          

# esbuild-federation-share-scope

Enables federation share scope for interop with Webpack 5 Module Federation containers. A full example can be found here: https://github.com/jacob-ebey/esbuild-federation-example.

## Usage

Install https://www.npmjs.com/package/esbuild-federation-share-scope

```
npm i -D esbuild-federation-share-scope
```

Bundler configuration:

```js
esbuild.build({
// ... your usual config
plugins: [
federationShareScopePlugin(process.cwd(), {
shared: ["react"],
// OR:
// shared: {
// "react": {
// shareKey: "react",
// shareScope: ["default"],
// version: "17.0.0"
// }
// }
}),
],
});
```

Access to share scope:

```js
// Effectively __webpack_init_sharing__, __webpack_share_scopes__ respectively
import { initSharing, shareScopes } from "@runtime/federation";

// external webpack built federation container
const container = window[remote];

// initialize share scope
initSharing("default")
// initialize the container
.then(() => container.init(shareScopes[shareScope]))
// get an exposed module
.then(() => container.get("./exposed"))
// run the module factory to get the module value
.then(factory => factory())
```