Skip to content

Commit a0f7c07

Browse files
thetthet
committed
maint(Build): Move webpack Module Federation config from here to @patternslib/dev but keep backwards compatible exports in here.
1 parent 7e8ccf4 commit a0f7c07

File tree

4 files changed

+5
-169
lines changed

4 files changed

+5
-169
lines changed

‎src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Webpack entry point for module federation.
2-
import "../webpack/module_federation";
2+
import "@patternslib/dev/webpack/module_federation";
33
// The next import needs to be kept with parentheses, otherwise we get this error:
44
// "Shared module is not available for eager consumption."
55
import("./patterns");

‎webpack/module_federation--dynamic-federation.js

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1 @@
1-
// Author: Manfred Steyer <[email protected]>
2-
// Author: Johannes Raggam <[email protected]>
3-
4-
// From:
5-
// https://github.com/manfredsteyer/plugin-demo.git
6-
// https://github.com/thet/module-federation-minimaltest.git
7-
8-
/**
9-
* Load remote module / bundle.
10-
*
11-
* Wrapper around webpack runtime API
12-
*
13-
* Usage: get_container("bundle-name-xyz")
14-
*
15-
* @param {string} remote - the remote global name
16-
* @returns {Promise<object>} - Federated Module Container
17-
*/
18-
const container_map = {};
19-
let is_default_scope_initialized = false;
20-
21-
export default async function get_container(remote) {
22-
const container = window[remote];
23-
24-
// Do we still need to initialize the remote?
25-
if (container_map[remote]) {
26-
return container;
27-
}
28-
29-
// Do we still need to initialize the shared scope?
30-
if (!is_default_scope_initialized) {
31-
await __webpack_init_sharing__("default"); // eslint-disable-line no-undef
32-
is_default_scope_initialized = true;
33-
}
34-
35-
await container.init(__webpack_share_scopes__.default); // eslint-disable-line no-undef
36-
37-
// Remember that the container has been initialized.
38-
container_map[remote] = true;
39-
return container;
40-
}
1+
export { get_container } from "@patternslib/dev/webpack/module_federation--dynamic-federation";

‎webpack/module_federation--getOrLoadRemote.js

Lines changed: 1 addition & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1 @@
1-
// Author: ScriptedAlchemy <[email protected]>
2-
// Author: Johannes Raggam <[email protected]>
3-
4-
// From:
5-
// https://twitter.com/ScriptedAlchemy/status/1505135006158532612
6-
// https://gist.github.com/ScriptedAlchemy/3a24008ef60adc47fad1af7d3299a063
7-
// https://github.com/module-federation/module-federation-examples/blob/master/dynamic-system-host/app1/src/utils/getOrLoadRemote.js
8-
9-
/**
10-
* Load remote module / bundle.
11-
*
12-
* Usage: get_container("bundle-name-xyz", "default", "http://theRemote.com")
13-
*
14-
*
15-
* @param {string} remote - the remote global name
16-
* @param {string} share_scope - the scope key
17-
* @param {string} remote_fallback_url - fallback url for remote module
18-
* @returns {Promise<object>} - Federated Module Container
19-
*/
20-
export default function get_container(
21-
remote,
22-
share_scope = "default",
23-
remote_fallback_url = undefined
24-
) {
25-
new Promise((resolve, reject) => {
26-
if (!window[remote]) {
27-
// Remote not yet globally available.
28-
29-
// onload hook when Module Federated resource is loaded.
30-
const onload = async () => {
31-
// When remote is loaded, initialize it if it wasn't already.
32-
if (!window[remote].__initialized) {
33-
await window[remote].init(__webpack_share_scopes__[share_scope]); // eslint-disable-line no-undef
34-
// Mark remote as initialized.
35-
window[remote].__initialized = true;
36-
}
37-
// Resolve promise so marking remote as loaded.
38-
resolve(window[remote]);
39-
};
40-
41-
// Search dom to see if the remote exists as script tag.
42-
// It might still be loading (async).
43-
const existing_remote = document.querySelector(`[data-webpack="${remote}"]`);
44-
45-
if (existing_remote) {
46-
// If remote exists but was not loaded, hook into its onload
47-
// and wait for it to be ready.
48-
existing_remote.onload = onload;
49-
existing_remote.onerror = reject;
50-
} else if (remote_fallback_url) {
51-
// Inject remote if a fallback exists and call the same onload
52-
// function
53-
const script = document.createElement("script");
54-
script.type = "text/javascript";
55-
// Mark as data-webpack so runtime can track it internally.
56-
script.setAttribute("data-webpack", `${remote}`);
57-
script.async = true;
58-
script.onerror = reject;
59-
script.onload = onload;
60-
script.src = remote_fallback_url;
61-
document.getElementsByTagName("head")[0].appendChild(script);
62-
} else {
63-
// No remote and no fallback exist, reject.
64-
reject(`Cannot Find Remote ${remote} to inject`);
65-
}
66-
} else {
67-
// Remote already instantiated, resolve
68-
resolve(window[remote]);
69-
}
70-
});
71-
}
1+
export { get_container } from "@patternslib/dev/webpack/module_federation--getOrLoadRemote";

‎webpack/module_federation.js

Lines changed: 2 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,2 @@
1-
/**
2-
* Initialize dynamic module federation.
3-
*/
4-
import get_container from "./module_federation--dynamic-federation";
5-
6-
// Patternslib Module Federation bundle prefix.
7-
// This is used to filter for module federation enabled bundles.
8-
// NOTE: This is also defined in ``webpack.mf.js``.
9-
export const MF_NAME_PREFIX = "__patternslib_mf__";
10-
11-
if (typeof window.__patternslib_container_map === "undefined") {
12-
window.__patternslib_container_map = {};
13-
}
14-
const container_map = window.__patternslib_container_map;
15-
16-
export async function initialize_remote({ remote_name, exposed_module = "./main" }) {
17-
if (container_map[`${remote_name}-${exposed_module}`]) {
18-
// already initialized, return.
19-
return;
20-
}
21-
const container = await get_container(remote_name);
22-
const factory = await container.get(exposed_module);
23-
const module = factory();
24-
25-
container_map[`${remote_name}-${exposed_module}`] = true;
26-
27-
console.debug(
28-
`Patternslib Module Federation: Loaded and initialized bundle "${remote_name}".`
29-
);
30-
31-
return module;
32-
}
33-
34-
function document_ready(fn) {
35-
// see if DOM is already available
36-
if (document.readyState === "complete" || document.readyState === "interactive") {
37-
// call on next available tick
38-
setTimeout(fn, 1);
39-
} else {
40-
document.addEventListener("DOMContentLoaded", fn);
41-
}
42-
}
43-
44-
document_ready(function () {
45-
// Automatically initialize all Module Federation enabled Patternslib based
46-
// bundles by filtering for the prefix ``__patternslib_mf__``.
47-
// Do this on document ready, as this is the time where all MF bundles have
48-
// been registered in the global namespace.
49-
const bundles = Object.keys(window).filter((it) => it.indexOf(MF_NAME_PREFIX) === 0);
50-
for (const bundle_name of bundles) {
51-
// Now load + initialize each bundle.
52-
initialize_remote({ remote_name: bundle_name });
53-
}
54-
document.dispatchEvent(
55-
new Event("patternslib__mf--loaded", { bubbles: true, cancelable: false })
56-
);
57-
});
1+
export { MF_NAME_PREFIX } from "@patternslib/dev/webpack/module_federation";
2+
export { initialize_remote } from "@patternslib/dev/webpack/module_federation";

0 commit comments

Comments
 (0)