Skip to content

Commit

Permalink
fix: refactor (#39)
Browse files Browse the repository at this point in the history 
* fix: refactor

* fix: lint

* fix: project-b

* fix: lint
  • Loading branch information
@MadaraUchiha-314
MadaraUchiha-314 authored Feb 25, 2024
1 parent 2093d48 commit aa2269b
Show file tree
Hide file tree
Showing 6 changed files with 261 additions and 161 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

110 changes: 53 additions & 57 deletions packages/examples/project-a/public/esm/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,82 +2,78 @@
<head>
<title>Module Federation Experiments</title>
<script type="module" id="example-code">
const sharedScope = {
/**
* In the base-example, we have declared uuid as import: false
* So we provide a fallback by directly registering it with the shared scope object.
*/
uuid: {
'9.0.0': {
/**
* Return a factory that returns a Promise which returns a factory which returns the module
*/
get: () =>
Promise.resolve(() => ({
v4: () => globalThis.crypto.randomUUID(),
})),
from: 'project-a',
},
},
};

const sharedScope = {};
globalThis.sharedScope = sharedScope;

const basePath = window.location.href.slice(
0,
window.location.href.lastIndexOf('/'),
);
const remoteEntryUrl = `${basePath}/my-remote-entry.js`;
const container = await import(remoteEntryUrl);

console.log('doing container.init()');
await container.init(sharedScope);
console.log('shared scope: ', JSON.stringify(sharedScope, null, 2));

console.log("doing container.get('./react')");
const react = (await container.get('./react'))();
console.log('exposed module ./react: ', react);
console.log('shared scope: ', JSON.stringify(sharedScope, null, 2));

console.log("doing container.get('./index')");
const index = (await container.get('./index'))();
console.log('exposed module ./index', index);

console.log('calling doSomething() from the exposed module ./index');
await index.doSomething();

console.log("doing container.get('./pqr')");
const pqr = (await container.get('./pqr'))();
console.log('exposed module ./pqr', pqr);
let container = null;
document
.getElementById('load-remote-a')
.addEventListener('click', async () => {
container = await import(remoteEntryUrl);
console.log('Loaded remote entry for project-a: ', container);
});
document
.getElementById('init-remote-a')
.addEventListener('click', async () => {
console.log('doing container.init()');
await container.init(sharedScope);
console.log('shared scope: ', __FEDERATION__.__SHARE__);
});
document
.getElementById('load-exposed-react')
.addEventListener('click', async () => {
console.log("doing container.get('./react')");
const react = (await container.get('./react'))();
console.log('exposed module ./react: ', react);
});
let index = null;
document
.getElementById('load-exposed-index')
.addEventListener('click', async () => {
console.log("doing container.get('./index')");
index = (await container.get('./index'))();
console.log('exposed module ./index', index);
});
document
.getElementById('execute-doSomething-index')
.addEventListener('click', async () => {
console.log('calling doSomething() from the exposed module ./index');
await index.doSomething();
});
document
.getElementById('load-exposed-pqr')
.addEventListener('click', async () => {
console.log("doing container.get('./pqr')");
const pqr = (await container.get('./pqr'))();
console.log('exposed module ./pqr', pqr);
});
</script>
<style>
pre {
border: solid;
text-wrap: wrap;
}
.container {
display: flex;
}
.inner-container {
margin: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h3>Open JS console to see logs.</h3>
<h4>
Type globalThis.shareScope in the JS console to check the current state of
shared scope object.
Type __FEDERATION__.__SHARE__ in the JS console to check the current state
of shared scope object.
</h4>
<div class="container">
<div class="inner-container">
<h4>Check the page source or code below to see what's happening</h4>
<pre id="example-code-preview" />
</div>
<button id="load-remote-a">Load remote entry: project-a</button>
<button id="init-remote-a">Init remote entry: project-a</button>
<button id="load-exposed-react">Load exposed module ./react</button>
<button id="load-exposed-index">Load exposed module ./index</button>
<button id="execute-doSomething-index">
Execute doSomething() from ./index
</button>
<button id="load-exposed-pqr">Load exposed module ./pqr</button>
</div>
</body>
<script>
document.getElementById('example-code-preview').innerHTML =
document.getElementById('example-code').innerHTML;
</script>
</html>
93 changes: 57 additions & 36 deletions packages/examples/project-a/public/system/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
*/
uuid: {
'9.0.0': {
/**
* Return a factory that returns a Promise which returns a factory which returns the module
*/
get: () =>
Promise.resolve(() => ({
v4: () => globalThis.crypto.randomUUID(),
Expand All @@ -27,59 +30,77 @@
window.location.href.lastIndexOf('/'),
);
const remoteEntryUrl = `${basePath}/my-remote-entry.js`;
/**
* Import the remote container using SystemJS as it's output format is system.
*/
const container = await System.import(remoteEntryUrl);

console.log('doing container.init()');
await container.init(sharedScope);
console.log('shared scope: ', JSON.stringify(sharedScope, null, 2));
let container = null;

console.log("doing container.get('./react')");
const react = (await container.get('./react'))();
console.log('exposed module ./react: ', react);
console.log('shared scope: ', JSON.stringify(sharedScope, null, 2));
document
.getElementById('load-remote-a')
.addEventListener('click', async () => {
container = await System.import(remoteEntryUrl);
console.log('Loaded remote entry for project-a: ', container);
});

console.log("doing container.get('./index')");
const index = (await container.get('./index'))();
console.log('exposed module ./index', index);
document
.getElementById('init-remote-a')
.addEventListener('click', async () => {
console.log('doing container.init()');
await container.init(sharedScope);
console.log('shared scope: ', __FEDERATION__.__SHARE__);
});

console.log('calling doSomething() from the exposed module ./index');
await index.doSomething();
document
.getElementById('load-exposed-react')
.addEventListener('click', async () => {
console.log("doing container.get('./react')");
const react = (await container.get('./react'))();
console.log('exposed module ./react: ', react);
});

console.log("doing container.get('./pqr')");
const pqr = (await container.get('./pqr'))();
console.log('exposed module ./pqr', pqr);
let index = null;
document
.getElementById('load-exposed-index')
.addEventListener('click', async () => {
console.log("doing container.get('./index')");
index = (await container.get('./index'))();
console.log('exposed module ./index', index);
});

document
.getElementById('execute-doSomething-index')
.addEventListener('click', async () => {
console.log('calling doSomething() from the exposed module ./index');
await index.doSomething();
});

document
.getElementById('load-exposed-pqr')
.addEventListener('click', async () => {
console.log("doing container.get('./pqr')");
const pqr = (await container.get('./pqr'))();
console.log('exposed module ./pqr', pqr);
});
</script>
<style>
pre {
border: solid;
text-wrap: wrap;
}
.container {
display: flex;
}
.inner-container {
margin: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h3>Open JS console to see logs.</h3>
<h4>
Type globalThis.shareScope in the JS console to check the current state of
shared scope object.
Type __FEDERATION__.__SHARE__ in the JS console to check the current state
of shared scope object.
</h4>
<div class="container">
<div class="inner-container">
<h4>Check the page source or code below to see what's happening</h4>
<pre id="example-code-preview" />
</div>
<button id="load-remote-a">Load remote entry: project-a</button>
<button id="init-remote-a">Init remote entry: project-a</button>
<button id="load-exposed-react">Load exposed module ./react</button>
<button id="load-exposed-index">Load exposed module ./index</button>
<button id="execute-doSomething-index">
Execute doSomething() from ./index
</button>
<button id="load-exposed-pqr">Load exposed module ./pqr</button>
</div>
</body>
<script>
document.getElementById('example-code-preview').innerHTML =
document.getElementById('example-code').innerHTML;
</script>
</html>
57 changes: 42 additions & 15 deletions packages/examples/project-b/public/esm/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,60 @@
<title>Module Federation Experiments</title>
<script type="module" id="example-code">
const sharedScope = {};

globalThis.sharedScope = sharedScope;

const basePath = window.location.href.slice(
0,
window.location.href.lastIndexOf('/'),
);
const remoteEntryUrl = `${basePath}/my-remote-entry.js`;
const container = await import(remoteEntryUrl);

console.log('doing container.init()');
await container.init(sharedScope);
console.log('shared scope: ', JSON.stringify(sharedScope, null, 2));

console.log("doing container.get('./button')");
const Button = (await container.get('./button'))();
console.log('exposed module ./button: ', Button);

console.log(Button.someThingElse());
let container = null;
document
.getElementById('load-remote-b')
.addEventListener('click', async () => {
container = await import(remoteEntryUrl);
console.log('Loaded remote entry for project-a: ', container);
});
document
.getElementById('init-remote-b')
.addEventListener('click', async () => {
console.log('doing container.init()');
await container.init(sharedScope);
console.log('shared scope: ', __FEDERATION__.__SHARE__);
});
let Button = null;
document
.getElementById('load-exposed-button')
.addEventListener('click', async () => {
console.log("doing container.get('./button')");
Button = (await container.get('./button'))();
console.log('exposed module ./button: ', Button);
});
document
.getElementById('execute-someThingElse-button')
.addEventListener('click', async () => {
console.log(Button.someThingElse());
});
</script>
<style>
.container {
display: flex;
}
</style>
</head>
<body>
<h3>View page source to see what's happening</h3>
<h3>Open JS console to see logs.</h3>
<h4>
Type globalThis.shareScope in the JS console to check the current state of
shared scope object.
Type __FEDERATION__.__SHARE__ in the JS console to check the current state
of shared scope object.
</h4>
<div class="container">
<button id="load-remote-b">Load remote entry: project-b</button>
<button id="init-remote-b">Init remote entry: project-b</button>
<button id="load-exposed-button">Load exposed module ./button</button>
<button id="execute-someThingElse-button">
Execute someThingElse() from ./button
</button>
</div>
</body>
</html>
Loading

0 comments on commit aa2269b

Please sign in to comment.