Skip to content

Commit bef99e3

Browse files
ScriptedAlchemyScriptedAlchemy
authored
chore: general housekeeping (#4000)
* chore: general housekeeping * chore: general housekeeping --------- Co-authored-by: ScriptedAlchemy <[email protected]>
1 parent 953bcb6 commit bef99e3

File tree

4 files changed

+36
-33
lines changed

4 files changed

+36
-33
lines changed

‎advanced-api/dynamic-remotes-runtime-environment-variables/host/src/components/Main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const Main = () => {
2929
<h3>my env is {ENV.API_URL}</h3>
3030
<p>
3131
The Dynamic System will take advantage Module Federation <strong>remotes</strong> and{' '}
32-
<strong>exposes</strong>. It will no load components that have been loaded already.
32+
<strong>exposes</strong>. It will not load components that have been loaded already.
3333
</p>
3434
<button onClick={loadRemoteWidget}>Load Remote Widget</button>
3535
<div style={{ marginTop: '2em' }}>

‎advanced-api/dynamic-remotes/app1/src/App.js

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,59 @@
11
import React, { useState, useEffect, Suspense } from 'react';
2-
3-
import { init,loadRemote } from '@module-federation/runtime'
2+
import { init, loadRemote } from '@module-federation/runtime';
43

54
init({
65
name: 'app1',
76
remotes: [
87
{
9-
name:'app2',
10-
entry: 'http://localhost:3002/remoteEntry.js'
8+
name: 'app2',
9+
entry: 'http://localhost:3002/remoteEntry.js',
1110
},
1211
{
13-
name:'app3',
14-
entry: 'http://localhost:3003/remoteEntry.js'
12+
name: 'app3',
13+
entry: 'http://localhost:3003/remoteEntry.js',
1514
},
16-
]
17-
})
18-
15+
],
16+
});
1917

20-
function useDynamicImport({module,scope}) {
21-
console.log(module,scope)
18+
function useDynamicImport({ module, scope }) {
2219
const [component, setComponent] = useState(null);
2320

2421
useEffect(() => {
25-
if(!module && !scope) return
22+
if (!module || !scope) return;
23+
2624
const loadComponent = async () => {
27-
const { default: component } = await loadRemote(`${scope}/${module}`);
28-
setComponent(() => component);
25+
try {
26+
const { default: Component } = await loadRemote(`${scope}/${module}`);
27+
setComponent(() => Component);
28+
} catch (error) {
29+
console.error(`Error loading remote module ${scope}/${module}:`, error);
30+
}
2931
};
32+
3033
loadComponent();
31-
}, [module,scope]);
32-
const fallback = ()=> null
33-
return component || fallback
34+
}, [module, scope]);
35+
36+
return component;
3437
}
3538

3639
function App() {
37-
const [{ module, scope }, setSystem] = React.useState({});
40+
const [{ module, scope }, setSystem] = useState({});
3841

39-
function setApp2() {
42+
const setApp2 = () => {
4043
setSystem({
4144
scope: 'app2',
4245
module: 'Widget',
4346
});
44-
}
47+
};
4548

46-
function setApp3() {
49+
const setApp3 = () => {
4750
setSystem({
4851
scope: 'app3',
4952
module: 'Widget',
5053
});
51-
}
54+
};
5255

53-
const Component = useDynamicImport({module,scope});
56+
const Component = useDynamicImport({ module, scope });
5457

5558
return (
5659
<div
@@ -62,15 +65,15 @@ function App() {
6265
<h1>Dynamic System Host</h1>
6366
<h2>App 1</h2>
6467
<p>
65-
The Dynamic System will take advantage Module Federation <strong>remotes</strong> and{' '}
66-
<strong>exposes</strong>. It will no load components that have been loaded already.
68+
The Dynamic System will take advantage of Module Federation <strong>remotes</strong> and{' '}
69+
<strong>exposes</strong>. It will not load components that have already been loaded.
6770
</p>
6871
<button onClick={setApp2}>Load App 2 Widget</button>
6972
<button onClick={setApp3}>Load App 3 Widget</button>
7073
<div style={{ marginTop: '2em' }}>
71-
<React.Suspense fallback="Loading System">
72-
<Component />
73-
</React.Suspense>
74+
<Suspense fallback="Loading System">
75+
{Component ? <Component /> : null}
76+
</Suspense>
7477
</div>
7578
</div>
7679
);

‎advanced-api/dynamic-remotes/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"build": "pnpm --filter dynamic-remotes_app* --parallel build",
1515
"serve": "pnpm --filter dynamic-remotes_app* --parallel serve",
1616
"clean": "pnpm --filter dynamic-remotes_app* --parallel clean",
17-
"e2e:ci": "pnpm start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
18-
"legacy:e2e:ci": "pnpm legacy:start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
17+
"e2e:ci": "pnpm start & sleep 1 && wait-on tcp:3001 && wait-on tcp:3002 && wait-on tcp:3003 && npx cypress run --config-file ../../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
18+
"legacy:e2e:ci": "pnpm legacy:start & sleep 1 && wait-on tcp:3001 && wait-on tcp:3002 && wait-on tcp:3003 && npx cypress run --config-file ../../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
1919
},
2020
"devDependencies": {
2121
"wait-on": "7.2.0"

‎cypress-e2e/fixtures/constants.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -579,7 +579,7 @@ export class Constants {
579579
hostH3: 'my env is https://host.api.com',
580580
button: 'Load Remote Widget'
581581
},
582-
paragraph: 'The Dynamic System will take advantage Module Federation remotes and exposes. It will no load components that have been loaded already.',
582+
paragraph: 'The Dynamic System will take advantage Module Federation remotes and exposes. It will not load components that have been loaded already.',
583583
buttonHeader: 'Remote Widget',
584584
buttonH2: 'My env is ',
585585
buttonParagraph: 'Using momentjs for format the date'
@@ -849,7 +849,7 @@ export class Constants {
849849
}
850850
},
851851
dynamicRemotesApp: {
852-
paragraphText: 'The Dynamic System will take advantage Module Federation remotes and exposes. It will no load components that have been loaded already.',
852+
paragraphText: 'The Dynamic System will take advantage of Module Federation remotes and exposes. It will not load components that have already been loaded.',
853853
widgetParagraphText: [
854854
'Moment shouldn\'t download twice, the host has no moment.js',
855855
'Using momentjs for format the date'

0 commit comments

Comments
 (0)