From 56e5d86aa8ec49195cd35f1358e09e17fc39159e Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 19 Dec 2022 11:58:14 +0100 Subject: [PATCH 1/2] breaking(Build): Separate modernizr into a own bundle. Since Patternslib 9.0.0-alpha.0 where we introduced webpack module federation for our bundles, Modernizr is loaded asynchronously and applying it's CSS classes a tick too late. For example, the change from the `no-js` to the `js` class was done while the tiles have already been drawn and visible on the screen, resulting in screen flickering. There are a number of projects which depend on Modernizr being applied early. This change now fixes the problem by separating the Modernizr build from the Patternslib bundle. If you depend on Modernzir, please include the new `modernizr.min.js` bundle in a script tag, preferably before the Patternslib bundle `bundle.min.js`. --- src/modernizr.js | 5 +++++ src/patterns.js | 8 -------- webpack/webpack.config.js | 1 + 3 files changed, 6 insertions(+), 8 deletions(-) create mode 100644 src/modernizr.js diff --git a/src/modernizr.js b/src/modernizr.js new file mode 100644 index 000000000..dddaef9da --- /dev/null +++ b/src/modernizr.js @@ -0,0 +1,5 @@ +// Include modernizr for a modernizr bundle. +// To use it in your project, include the `modernizr.min.js` bundle in a script +// tag. This is for projects where styles depend on specific modernizr features +// like the change from a `no-js` class to a `js` class. +import("modernizr"); diff --git a/src/patterns.js b/src/patterns.js index 32261af9a..3d35f7ee4 100644 --- a/src/patterns.js +++ b/src/patterns.js @@ -74,12 +74,4 @@ import "@patternslib/pat-upload"; // Set to ``true`` to include core styles via JavaScript //window.__patternslib_import_styles = false; -// Include modernizr per default. -// Most of our styles depend on it. -// You might want to disable it for your project by setting: -// window.__patternslib_disable_modernizr = true; -if (!window.__patternslib_disable_modernizr) { - import("modernizr"); -} - registry.init(); diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js index aecf95495..2b4d2a880 100644 --- a/webpack/webpack.config.js +++ b/webpack/webpack.config.js @@ -10,6 +10,7 @@ module.exports = () => { let config = { entry: { "bundle.min": path.resolve(__dirname, "../src/index.js"), + "modernizr.min": path.resolve(__dirname, "../src/modernizr.js"), }, }; From de59633f06a4b14e3030482da0174df6a74c3d2f Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 19 Dec 2022 12:07:12 +0100 Subject: [PATCH 2/2] feat(Bundle): Merge an synchronous modernizr bundle with the MF Patternslib bundle into a bundle.min.js. --- src/modernizr.js | 9 +++--- webpack/file_merge_webpack_plugin.js | 45 ++++++++++++++++++++++++++++ webpack/webpack.config.js | 14 ++++++++- 3 files changed, 63 insertions(+), 5 deletions(-) create mode 100644 webpack/file_merge_webpack_plugin.js diff --git a/src/modernizr.js b/src/modernizr.js index dddaef9da..faa03c03c 100644 --- a/src/modernizr.js +++ b/src/modernizr.js @@ -1,5 +1,6 @@ // Include modernizr for a modernizr bundle. -// To use it in your project, include the `modernizr.min.js` bundle in a script -// tag. This is for projects where styles depend on specific modernizr features -// like the change from a `no-js` class to a `js` class. -import("modernizr"); +// You might want to disable it for your project by setting: +// window.__patternslib_disable_modernizr = true; +if (!window.__patternslib_disable_modernizr) { + import("modernizr"); +} diff --git a/webpack/file_merge_webpack_plugin.js b/webpack/file_merge_webpack_plugin.js new file mode 100644 index 000000000..e6a1e5e42 --- /dev/null +++ b/webpack/file_merge_webpack_plugin.js @@ -0,0 +1,45 @@ +// Merge bundles into a single file +// From: https://stackoverflow.com/a/65882720/1337474 +const fs = require("fs"); + +class FileMergeWebpackPlugin { + constructor({ files, destination, removeSourceFiles }) { + this.files = files; + this.destination = destination; + this.removeSourceFiles = removeSourceFiles; + } + + apply(compiler) { + compiler.hooks.afterEmit.tap("FileMergeWebpackPlugin", () => { + console.log(""); + console.log(""); + console.log(""); + console.log("HOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO HHHHHHHHH"); + console.log(""); + console.log(""); + console.log(""); + + return; + const files = this.files + .filter((file) => fs.existsSync(file)) + .map((file) => fs.readFileSync(file)); + + for (const file of this.files) { + console.log(file); + console.log(fs.existsSync(file)); + } + + console.log(files); + + fs.writeFileSync(this.destination, files.join("\n\n\n\n"), { + encoding: "UTF-8", + }); + + if (this.removeSourceFiles) { + this.files.forEach((file) => fs.unlinkSync(file)); + } + }); + } +} + +module.exports = FileMergeWebpackPlugin; diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js index 2b4d2a880..9a2465412 100644 --- a/webpack/webpack.config.js +++ b/webpack/webpack.config.js @@ -5,12 +5,13 @@ const mf_config = require("@patternslib/dev/webpack/webpack.mf"); const package_json = require("../package.json"); const path = require("path"); const webpack_config = require("@patternslib/dev/webpack/webpack.config").config; +const FileMergeWebpackPlugin = require("./file_merge_webpack_plugin"); module.exports = () => { let config = { entry: { - "bundle.min": path.resolve(__dirname, "../src/index.js"), "modernizr.min": path.resolve(__dirname, "../src/modernizr.js"), + "patternslib.min": path.resolve(__dirname, "../src/index.js"), }, }; @@ -50,6 +51,17 @@ module.exports = () => { }) ); + // Merge bundles + config.plugins.push( + new FileMergeWebpackPlugin({ + destination: path.resolve(__dirname, "../dist/bundle.min.js"), + removeSourceFiles: true, + files: Object.keys(config.entry).map((it) => { + return path.resolve(__dirname, `../dist/${it}.js`); + }), + }) + ); + // BBB polyfills not used anymore. // TODO: Remove for next major version. // Polyfills