├── .gitignore
├── CHANGELOG.md
├── README.md
├── RemoteComponent.js
├── babel.config.js
├── getDynamicScript.js
├── index.js
├── loadDynamicComponent.js
├── package-lock.json
├── package.json
├── rollup.config.js
└── utils
└── getRemoteModuleId.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | public/
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | #### 1.2.1 (2022-12-22)
2 |
3 | ##### Bug Fixes
4 |
5 | * reject if remoteEntry script fails to load ([1704042e](https://github.com/michaeldurfey/mf-dynamic-remote-component/commit/1704042e205df0a5ac945119b1bd1a3df87660a8))
6 |
7 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | mf-dynamic-remote-component
2 |
3 | Loading in dynamic remote federated components made easy
4 |
5 |
6 |
7 | ## Features
8 |
9 | - Keep remote modules in a cache on the window object
10 | - Promise based
11 | - 0 dependencies
12 | - Support for both lazy/suspense, loadable or others
13 |
14 | ## Get started
15 |
16 | ```bash
17 | npm install mf-dynamic-remote-component
18 | ```
19 |
20 | ## Examples
21 |
22 | ```js
23 | // config object example
24 | {
25 | "path": "/client/App2RemoteEntry.js", // Path to remote container entry. Ideally CDN location in live environments.
26 | "scope": "App2", // Container scope name
27 | "module": "./MyRemoteComponent" // Shared module
28 | }
29 | ```
30 |
31 | ### Suspense
32 |
33 | ```js
34 | import React, {lazy, Suspense} from 'react';
35 | import {RemoteComponent} from 'mf-dynamic-remote-component';
36 |
37 | export default function RemoteHostComponent(config) {
38 | const Component = React.lazy(() => RemoteComponent(config));
39 | return (
40 |
43 |
44 | Loading...
45 |
46 |
47 | }
48 | >
49 |
50 |
51 | );
52 | }
53 | ```
54 |
55 | ### Loadable (No fallback)
56 |
57 | ```js
58 | import React from 'react';
59 | import {RemoteComponent} from 'mf-dynamic-remote-component';
60 | import loadable from '@loadable/component';
61 |
62 | export default function RemoteHostComponent(config) {
63 | const Component = loadable(() => RemoteComponent(config));
64 | return (
65 | <>
66 |
71 |
72 | );
73 | }
74 | ```
75 |
76 | ### Loadable:
77 |
78 | ```js
79 | import React from 'react';
80 | import {RemoteComponent} from 'mf-dynamic-remote-component';
81 | import loadable from '@loadable/component';
82 |
83 | export default function RemoteHostComponent(config) {
84 | const Component = loadable(() => RemoteComponent(config), {
85 | fallback: (
86 |
87 |
88 | Loading...
89 |
90 |