Skip to content

Commit

Permalink
feat(Build): Use dynamic module federation.
Browse files Browse the repository at this point in the history
  • Loading branch information
thet committed May 17, 2022
1 parent 0a7c631 commit 6aefc4b
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 44 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"main": "./src/patterns.js",
"dependencies": {
"@patternslib/pat-code-editor": "^2.1.2",
"@patternslib/patternslib": "^7.4.0",
"@patternslib/patternslib": "^8.0.0",
"backbone": "1.4.1",
"backbone.paginator": "1.0.0",
"bootstrap": "^5.1.3",
Expand Down Expand Up @@ -88,7 +88,7 @@
"yarn": "^1.22.18"
},
"resolutions": {
"@patternslib/patternslib": "^7.4.0",
"@patternslib/patternslib": "8.0.0",
"jquery": "3.6.0"
},
"scripts": {
Expand Down
22 changes: 21 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,22 @@
// Webpack entry point for module federation.
/**
* Module Federation support for Mockup.
*
* In this module federation setup Mockup is the main host, which loads other
* "remote" bundles.
*
* Those remotes need to be registered via the Patternslib's Webpack Module
* Federation helper, just like Mockup itself (See Mockup's webpack.config.js).
* Patternslib' Module Federation helper registers the bundle under a prefix
* (``MF_NAME_PREFIX``) in the global namespace.
*
* Here, we filter for all the globally registered bundles with this prefix and
* load them.
*
* Note: loading in this context only means that the module federation
* functionality for each bundle is initialized.
*
*/
import "@patternslib/patternslib/webpack/module_federation";

// And now load this bundle's actual entry point.
import("./patterns");
11 changes: 4 additions & 7 deletions src/patterns.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
*/

// Core
import "@patternslib/patternslib/src/globals";
import registry from "@patternslib/patternslib/src/core/registry";
import jquery from "jquery";

// Bootstrap
import "bootstrap";
Expand Down Expand Up @@ -62,17 +62,14 @@ import "./pat/controlpanels/discussion";
import "./pat/controlpanels/discussion-comments";
import "./pat/controlpanels/discussion-moderation";

// Import pattern styles in JavaScript
window.__patternslib_import_styles = true;

// Register jQuery globally
window.jQuery = jquery;

// Change default value for pat-tooltip trigger
tooltip_parser.parameters.trigger.value = "hover";

// Change validation error template to be BS compatible
validation_parser.parameters["error-template"].value =
'<em class="invalid-feedback">${this.message}</em>';

// Import pattern styles in JavaScript
window.__patternslib_import_styles = true;

registry.init();
45 changes: 11 additions & 34 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,50 +1,27 @@
process.traceDeprecation = true;
const package_json = require("./package.json");
const path = require("path");
const patternslib_config = require("@patternslib/patternslib/webpack/webpack.config");
const mf_config = require("@patternslib/patternslib/webpack/webpack.mf");

module.exports = async (env, argv) => {
module.exports = (env, argv) => {
let config = {
entry: {
"bundle.min": path.resolve(__dirname, "src/index.js"),
},
externals: {
"window": "window",
"$": "jquery",
"jquery": "jQuery",
"window.jquery": "jQuery",
"bootstrap": true,
},
optimization: {
splitChunks: {
cacheGroups: {
tinymce: {
name: "tinymce",
test: /[\\/]node_modules[\\/]tinymce.*[\\/]/,
chunks: "all",
},
datatables: {
name: "datatables",
test: /[\\/]node_modules[\\/]datatables.net.*[\\/]/,
chunks: "all",
},
select2: {
name: "select2",
test: /[\\/]node_modules[\\/]select2.*[\\/]/,
chunks: "all",
},
jquery_plugins: {
name: "jquery_plugins",
test: /[\\/]node_modules[\\/]jquery\..*[\\/]/,
chunks: "all",
},
},
},
},
};

config = patternslib_config(env, argv, config, ["mockup"]);

config.output.path = path.resolve(__dirname, "dist/");

config.plugins.push(
mf_config({
package_json: package_json,
remote_entry: config.entry["bundle.min"],
})
);

if (process.env.NODE_ENV === "development") {
// Note: ``publicPath`` is set to "auto" in Patternslib,
// so for the devServer the public path set to "/".
Expand Down

0 comments on commit 6aefc4b

Please sign in to comment.