Skip to content

Commit

Permalink
fix(federation-boundary): make custom boundary optional (#570)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bacarybruno
bacarybruno authored Feb 8, 2023
1 parent 80d09c4 commit e43a387
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 55 deletions.
16 changes: 8 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,21 +30,15 @@
"@module-federation/node": "link:./dist/packages/node",
"@module-federation/typescript": "link:./dist/packages/typescript",
"@module-federation/utilities": "link:./dist/packages/utilities",
"@swc/core": "^1.3.3",
"@swc/helpers": "~0.4.0",
"axios": "^1.0.0",
"core-js": "^3.6.5",
"fast-glob": "^3.2.12",
"lodash.get": "^4.4.2",
"next": "13.1.6",
"ngx-deploy-npm": "^4.3.11",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "6.8.0",
"regenerator-runtime": "0.13.7",
"tslib": "^2.3.0",
"vue-tsc": "^1.0.24",
"webpack": "^5.74.0"
"regenerator-runtime": "0.13.7"
},
"devDependencies": {
"@commitlint/cli": "^17.1.2",
Expand All @@ -60,6 +54,8 @@
"@nrwl/web": "15.6.3",
"@nrwl/workspace": "15.6.3",
"@swc/cli": "~0.1.55",
"@swc/core": "^1.3.3",
"@swc/helpers": "~0.4.0",
"@swc/jest": "0.2.24",
"@testing-library/react": "13.4.0",
"@types/download": "^8.0.1",
Expand All @@ -86,14 +82,18 @@
"husky": "^8.0.1",
"jest": "29.4.1",
"jest-environment-jsdom": "29.4.1",
"ngx-deploy-npm": "^4.3.11",
"nx": "15.6.3",
"prettier": "^2.6.2",
"react-test-renderer": "18.2.0",
"swc-loader": "0.2.3",
"ts-jest": "29.0.5",
"ts-node": "10.9.1",
"tslib": "^2.3.0",
"typescript": "4.9.5",
"verdaccio": "^5.0.4"
"verdaccio": "^5.0.4",
"vue-tsc": "^1.0.24",
"webpack": "^5.74.0"
},
"resolutions": {
"@module-federation/nextjs-mf": "link:./dist/packages/nextjs-mf",
Expand Down
35 changes: 30 additions & 5 deletions packages/utilities/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,18 @@ Any extra props will be passed directly to the imported module.
Usage looks something like this:

```js
import { FederationBoundary } from '@module-federation/utilities/src/react';
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
dynamicImport={() =>
import('some_remote_host_name').then((m) => m.Component)
}
fallback={() => import('@npm/backup').then((m) => m.Component)}
dynamicImport={dynamicImport}
fallback={fallback}
customBoundary={CustomErrorBoundary}
/>
);
Expand Down Expand Up @@ -114,6 +117,28 @@ return (
);
```

```js
// 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:

- **remoteEntryFileName**: The name of the remote entry file. Defaults to "remoteEntry.js".
Expand Down
2 changes: 1 addition & 1 deletion packages/utilities/src/utils/react.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const FederationBoundary = ({
}: {
dynamicImporter: () => Promise<any>;
fallback: () => Promise<any> | null;
customBoundary: ComponentType;
customBoundary?: ComponentType<any>;
}) => {
return useMemo(() => {
const ImportResult = dynamic(
Expand Down
63 changes: 22 additions & 41 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1763,18 +1763,10 @@
version "0.0.0"
uid ""

"@module-federation/node@0.9.11":
version "0.0.0"
uid ""

"@module-federation/node@link:./dist/packages/node":
version "0.0.0"
uid ""

"@module-federation/typescript@2.2.0":
version "0.0.0"
uid ""

"@module-federation/typescript@link:./apps/react-ts-remote/dist/packages/typescript":
version "0.0.0"
uid ""
Expand All @@ -1783,10 +1775,6 @@
version "0.0.0"
uid ""

"@module-federation/utilities@1.2.0":
version "0.0.0"
uid ""

"@module-federation/utilities@link:./dist/packages/utilities":
version "0.0.0"
uid ""
Expand Down Expand Up @@ -2502,7 +2490,7 @@
resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.26.tgz#bb65bc0fff712c8ca3702d9c0adc59894ca54bae"
integrity sha512-UPe7S+MezD/S6cKBIc50TduGzmw6PBz1Ms5p+5wDLOKYNS/LSEM4iRmLwvePzP5X8mOyesXrsbwxLy8KHP65Yw==

"@swc/core@1.3.26", "@swc/core@^1.3.3":
"@swc/core@^1.3.3":
version "1.3.26"
resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.3.26.tgz#6f7fe6ad54eac7ecffbdfa75d5c4300e2f96b8f6"
integrity sha512-U7vEsaLn3IGg0XCRLJX/GTkK9WIfFHUX5USdrp1L2QD29sWPe25HqNndXmUR9KytzKmpDMNoUuHyiuhpVrnNeQ==
Expand Down Expand Up @@ -3863,7 +3851,7 @@ axe-core@^4.6.2:
resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.6.2.tgz#6e566ab2a3d29e415f5115bc0fd2597a5eb3e5e3"
integrity sha512-b1WlTV8+XKLj9gZy2DZXgQiyDp9xkkoe2a6U6UbYccScq2wgH/YwCeI2/Jq2mgo0HzQxqJOjWZBLeA/mqsk5Mg==

axios@1.2.2, axios@^1.0.0:
axios@^1.0.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.2.tgz#72681724c6e6a43a9fea860fc558127dbe32f9f1"
integrity sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==
Expand Down Expand Up @@ -5634,13 +5622,6 @@ encodeurl@~1.0.2:
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==

encoding@0.1.13:
version "0.1.13"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
dependencies:
iconv-lite "^0.6.2"

end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
version "1.4.4"
resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
Expand Down Expand Up @@ -6192,7 +6173,7 @@ event-emitter@^0.3.5:
d "1"
es5-ext "~0.10.14"

eventemitter3@4.0.7, eventemitter3@^4.0.0, eventemitter3@^4.0.4:
eventemitter3@^4.0.0, eventemitter3@^4.0.4:
version "4.0.7"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
Expand Down Expand Up @@ -6377,21 +6358,21 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==

fast-glob@3.2.12, fast-glob@^3.0.3, fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.5, fast-glob@^3.2.7, fast-glob@^3.2.9:
version "3.2.12"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
fast-glob@3.2.7:
version "3.2.7"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
dependencies:
"@nodelib/fs.stat" "^2.0.2"
"@nodelib/fs.walk" "^1.2.3"
glob-parent "^5.1.2"
merge2 "^1.3.0"
micromatch "^4.0.4"

fast-glob@3.2.7:
version "3.2.7"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
fast-glob@^3.0.3, fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.5, fast-glob@^3.2.7, fast-glob@^3.2.9:
version "3.2.12"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
dependencies:
"@nodelib/fs.stat" "^2.0.2"
"@nodelib/fs.walk" "^1.2.3"
Expand Down Expand Up @@ -7401,7 +7382,7 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
dependencies:
safer-buffer ">= 2.1.2 < 3"

iconv-lite@0.6.3, iconv-lite@^0.6.2, iconv-lite@^0.6.3:
iconv-lite@0.6.3, iconv-lite@^0.6.3:
version "0.6.3"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
Expand Down Expand Up @@ -9076,7 +9057,7 @@ lodash.debounce@^4.0.8:
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==

lodash.get@4.4.2, lodash.get@^4.4.2:
lodash.get@^4.4.2:
version "4.4.2"
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==
Expand Down Expand Up @@ -9582,7 +9563,7 @@ next-tick@1, next-tick@^1.1.0:
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==

next@13.1.6, "next@^12 || ^13":
next@13.1.6:
version "13.1.6"
resolved "https://registry.yarnpkg.com/next/-/next-13.1.6.tgz#054babe20b601f21f682f197063c9b0b32f1a27c"
integrity sha512-hHlbhKPj9pW+Cymvfzc15lvhaOZ54l+8sXDXJWm3OBNBzgrVj6hwGPmqqsXg40xO1Leq+kXpllzRPuncpC0Phw==
Expand Down Expand Up @@ -11202,7 +11183,7 @@ react-test-renderer@18.2.0:
react-shallow-renderer "^16.15.0"
scheduler "^0.23.0"

react@18.2.0, "react@^17 || ^18":
react@18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
Expand Down Expand Up @@ -12640,16 +12621,16 @@ tsconfig-paths@^4.0.0, tsconfig-paths@^4.1.2:
minimist "^1.2.6"
strip-bom "^3.0.0"

tslib@2.4.0, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==

tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==

tsscmp@1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
Expand Down Expand Up @@ -13038,7 +13019,7 @@ vue-template-compiler@^2.7.14:
de-indent "^1.0.2"
he "^1.2.0"

vue-tsc@1.0.24, vue-tsc@^1.0.24:
vue-tsc@^1.0.24:
version "1.0.24"
resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.0.24.tgz#c0b270a7c8422408d3b6694fee61b39a4b9e4740"
integrity sha512-mmU1s5SAqE1nByQAiQnao9oU4vX+mSdsgI8H57SfKH6UVzq/jP9+Dbi2GaV+0b4Cn361d2ln8m6xeU60ApiEXg==
Expand Down Expand Up @@ -13151,7 +13132,7 @@ webpack-node-externals@^3.0.0:
resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz#1a3407c158d547a9feb4229a9e3385b7b60c9917"
integrity sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==

webpack-sources@3.2.3, webpack-sources@^3.0.0, webpack-sources@^3.2.3:
webpack-sources@^3.0.0, webpack-sources@^3.2.3:
version "3.2.3"
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
Expand Down

0 comments on commit e43a387

Please sign in to comment.