From 44d5c4f274aa0804cc9d8c94bd7a61050dc731e9 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Mon, 30 Jan 2023 18:07:12 +0100
Subject: [PATCH] refactor: updated devDependencies regarding webpack / to
 webpack version 5 & some cleanup (#1301)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore(docs): some typos

missed to replace mustache initially and incorrect handlebars two times (both in package name and URL)

* Revert "Merge pull request #2 from pattern-lab/dev"

This reverts commit 78128780bcffee78c1bc63368b91d429500a928c, reversing
changes made to 26db9797d9fb0ddf1530c938a3225ac26b0a5e61.

* Revert "Merge pull request #1 from pattern-lab/dev"

This reverts commit 26db9797d9fb0ddf1530c938a3225ac26b0a5e61, reversing
changes made to fc90750635eac88ece724b97ae74949ebd98aec9.

* Revert "chore(docs): some typos"

This reverts commit 271dc8d5eeea53b78651333e97ad171c305a2eaa.

* refactor: removed obsolete dependencies

Webpack 5 supportes module caching out of the box, compare to e.g. https://github.com/mzgoddard/hard-source-webpack-plugin/issues/514#issuecomment-687621600

* refactor: removed code out of obsolete dependency

* refactor: updated clean-css-loader related dependencies

* refactor: updated clean-webpack-plugin dependency

and restructured the code according to https://github.com/johnagan/clean-webpack-plugin/issues/106

* refactor: updated webpack-merge dependency

* refactor: removed obsolete dependencies

this seems to have been removed (intentionally?) by https://github.com/pattern-lab/patternlab-node/commit/2cb663d053e004ab17eb5af606ce289834bb89fc#diff-8c9b7dba764c6bd34aaec36a6a42e7b69d9a46b19712a47706355bb8616d3319L365

* refactor: updated html-webpack-plugin dependency

* refactor: updated node-sass-magic-importer dependency

* refactor: updated style-loader dependency

* refactor: updated svg-sprite-loader dependency

* refactor: updated svg-transform-loader dependency

* refactor: updated svgo-loader dependency

* refactor: updated ts-loader dependency

* refactor: updated webpack-cli dependency

* refactor: updated copy-webpack-plugin dependency

* refactor: updated webpack-dev-middleware dependency

"the logger, logLevel and logTime options were removed without replacement." source: https://github.com/webpack/webpack-dev-middleware/releases?after=v4.0.0-rc.1

* refactor: updated mini-css-extract-plugin dependency

* refactor(webpackdevmiddleware): quiet has been removed a lot earlier even already

* refactor: updated no-emit-webpack-plugin dependency

* refactor: updated webpack dependency

* refactor: rebuild yarn.lock file

* refactor(terserplugin): options had an unknown property 'sourceMap'

* refactor(webpack): clean up configuration

https://webpack.js.org/migrate/5/#clean-up-configuration

* Revert "Merge branch 'dev' into refactor-updated-depencencies-webpack"

This reverts commit 8f347df0e342a81f306b4786749e5824bbc72b4d, reversing
changes made to e619e632345b724a4226fb32ab6c51d12f6335ad.

* refactor(webpack): updated outdated options

optimization.namedChunks: true → optimization.chunkIds: 'named'

source: https://webpack.js.org/migrate/5/#update-outdated-options

* refactor(webpack): updated outdated options

optimization.occurrenceOrder: true → optimization: { chunkIds: 'total-size', moduleIds: 'size' }

source: https://webpack.js.org/migrate/5/#update-outdated-options

* refactor: regenerated yarn.lock

* refactor: updated babel-loader dependency

* refactor: updated svg-sprite-loader dependency

* refactor: updated css-loader dependency

* refactor: updated postcss-loader dependency

* refactor(postcss-loader): added postcss dependency

* refactor: updated autoprefixer dependency

* refactor: updated copy-webpack-plugin dependency

* refactor: updated webpack dependency

* refactor: updated webpackbar dependency

* refactor: regenerated yarn.lock file

* refactor: regenerated yarn.lock file

* refactor(prettier): code rework on the prettier feedback

* refactor(prettier): code rework on the prettier feedback

* build: regenerated yarn.lock file

* refactor: updated webpack-cli dependency

* refactor: updated webpack dependency

* chore: removed unnecessary require entries

* build(webpack): 'stats' is the new 'display'

* build: regenerated package-lock.json file

* Revert "refactor: updated no-emit-webpack-plugin dependency"

* build: regenerated yarn.lock file

* chore: reverted node-sass-selector-importer update

* refactor: updated sass-loader dependency

* chore: code optimizations

that are mentioned by the github pipeline as well

* chore: rebuild yarn.lock file

* build: regenerated yarn.lock

* build: regenerated yarn.lock file

* refactor: updated clean-webpack-plugin

* refactor: updated copy-webpack-plugin

* refactor: updated html-webpack-plugin

* refactor: updated webpack

* refactor: updated webpack-cli

* refactor: updated webpack-dev-middleware

* refactor: updated webpack-hot-middleware

* refactor: updated webpack-merge

* refactor: updated webpackbar

* refactor: updated mini-css-extract-plugin

* refactor: updated babel-loader

* refactor: updating clean-css-loader

* refactor: updated css-loader

* refactor: updated postcss-loader

* refactor: updated sass-loader

* refactor: updated style-loader

* refactor: updated svg-sprite-loader

* refactor: updated svgo-loader

* refactor: updates ts-loader

* chore: updated html-loader

* refactor: minimize on productive build is the new default

https://github.com/webpack-contrib/html-loader/blob/master/CHANGELOG.md#100-2020-03-19

* refactor(webpack): we need to ignore those references

as those are generated independently and won't need to get followed by Webpack

* refactor(html-loader): interpolate option got removed

that for we need to adapt some other solution for the new preprocessor option

* fix(copy-webpack-plugin): correcting the path

to prevent webpack errors

* refactor: two of the options are now subitems of minimize

* chore: this attribute doesn't exist (any more)

* Restore packages/core/test/files/_handlebars-test-patterns/atoms/global/helloworld-withdata.hbs

* Restore packages/core/test/lineage_hunter_tests.js

* Restore packages/development-edition-engine-react/source/_meta/_head.html

* Restore packages/core/test/pattern_engines_tests.js

* Restore packages/core/test/pseudopattern_hunter_tests.js

* Restore packages/engine-handlebars/lib/engine_handlebars.js

* Restore packages/engine-nunjucks/lib/engine_nunjucks.js

* Restore packages/engine-twig-php/lib/engine_twig_php.js

* Restore packages/engine-underscore/_meta/_head.html

* Restore packages/engine-underscore/lib/engine_underscore.js

* Restore packages/uikit-workshop/src/scripts/actions/app.js

* chore: regenerated yarn.lock

* chore: corrected package.json

* fix: we need to import the cjs from handlebars directly

* Update webpack.config.js

* Update webpack.config.js

* Update webpack.config.js

* Update webpack.config.js

* chore: regenerated yarn.lock

* refactor: updated babel-loader dependency again

* refactor: updated clean-css-loader dependency again

* refactor: updated svgo-loader dependency again

---------

Co-authored-by: Maximilian <mfr@nzke.net>
Co-authored-by: Josef Bredreck <13408112+JosefBredereck@users.noreply.github.com>
---
 .../uikit-workshop/build/webpack-server.js    |  2 -
 packages/uikit-workshop/package.json          | 50 +++++------
 packages/uikit-workshop/src/html/index.html   |  9 +-
 packages/uikit-workshop/webpack.config.js     | 86 +++++++++----------
 4 files changed, 72 insertions(+), 75 deletions(-)

diff --git a/packages/uikit-workshop/build/webpack-server.js b/packages/uikit-workshop/build/webpack-server.js
index 1dd7657ef..0f8913f39 100644
--- a/packages/uikit-workshop/build/webpack-server.js
+++ b/packages/uikit-workshop/build/webpack-server.js
@@ -120,10 +120,8 @@ async function serve(patternlab, configPath, buildDir = 'public') {
 
       app.use(
         webpackDevMiddleware(compiler, {
-          quiet: true,
           stats: 'errors-warnings',
           writeToDisk: true,
-          logLevel: 'error',
         })
       );
 
diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json
index 730bb2576..8ecefba18 100644
--- a/packages/uikit-workshop/package.json
+++ b/packages/uikit-workshop/package.json
@@ -7,8 +7,8 @@
     "start": "node ./build-tools.js",
     "prepublish": "npm run build",
     "postbootstrap": "npm run build",
-    "build": "webpack-cli --config webpack.config.js --progress --bail --display=minimal",
-    "watch": "webpack-cli --config webpack.config.js --progress --watch --display=minimal",
+    "build": "webpack-cli --config webpack.config.js --progress --bail --stats=minimal",
+    "watch": "webpack-cli --config webpack.config.js --progress --watch --stats=minimal",
     "test": "npm run build"
   },
   "authors": [
@@ -48,32 +48,32 @@
     "@pattern-lab/uikit-polyfills": "^5.16.1",
     "@reach/visually-hidden": "^0.1.2",
     "@webcomponents/custom-elements": "^1.4.3",
-    "autoprefixer": "^9.6.5",
-    "babel-loader": "^8.0.6",
+    "autoprefixer": "^10.2.5",
+    "babel-loader": "^9.1.2",
     "better-opn": "^3.0.0",
     "browser-sync": "^2.26.7",
     "classnames": "^2.3.1",
-    "clean-css-loader": "^1.0.1",
-    "clean-webpack-plugin": "0.1.19",
+    "clean-css-loader": "^4.2.1",
+    "clean-webpack-plugin": "4.0.0",
     "clipboard": "^2.0.8",
-    "copy-webpack-plugin": "^5.0.2",
+    "copy-webpack-plugin": "^11.0.0",
     "cosmiconfig": "^7.0.0",
-    "css-loader": "^3.2.0",
+    "css-loader": "^6.7.3",
     "ejs": "^3.1.6",
     "express": "^4.17.1",
     "fg-loadjs": "^1.1.0",
     "fuse.js": "^6.4.6",
     "handlebars": "^4.7.7",
-    "hard-source-webpack-plugin-patch": "^0.13.3",
     "hasha": "^5.2.2",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^4.0.0-beta.11",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^2.7.2",
     "mousetrap": "^1.6.5",
     "portfinder": "^1.0.28",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.2.8",
+    "postcss-loader": "^7.0.2",
     "preact-render-to-string": "^5.1.1",
     "preact": "^10.0.5",
     "preload-webpack-plugin": "^3.0.0-beta.3",
@@ -86,21 +86,21 @@
     "redux": "4.1.2",
     "redux-thunk": "^2.4.0",
     "sass": "1.43.4",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^13.2.0",
     "scriptjs": "^2.5.9",
     "scroll-js": "3.4.x",
     "skatejs": "^5.2.4",
-    "style-loader": "^1.0.0",
-    "svg-sprite-loader": "^4.1.6",
-    "svg-transform-loader": "^2.0.8",
-    "svgo-loader": "^3.0.0",
-    "ts-loader": "^6.2.1",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-middleware": "^3.7.2",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.2",
-    "webpackbar": "^4.0.0",
+    "style-loader": "^3.3.1",
+    "svg-sprite-loader": "^6.0.11",
+    "svg-transform-loader": "^2.0.13",
+    "svgo-loader": "^4.0.0",
+    "ts-loader": "^9.4.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-middleware": "^6.0.1",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-merge": "^5.8.0",
+    "webpackbar": "5.0.2",
     "wolfy87-eventemitter": "^5.2.9",
     "yargs": "^17.0.1"
   },
diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html
index 05cd56a99..d4fad9934 100644
--- a/packages/uikit-workshop/src/html/index.html
+++ b/packages/uikit-workshop/src/html/index.html
@@ -8,13 +8,16 @@
       content="initial-scale=1, width=device-width, viewport-fit=cover"
     />
     <meta name="theme-color" content="#ababab" />
+    <!-- webpackIgnore: true -->
     <link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
 
+    <!-- webpackIgnore: true -->
     <link
       rel="prefetch"
       as="image"
       href="styleguide/images/pattern-lab-logo--on-dark.svg"
     />
+    <!-- webpackIgnore: true -->
     <link
       rel="prefetch"
       as="image"
@@ -28,11 +31,14 @@
     <!-- the template for the modal slider -->
     <!-- prettier-ignore -->
     <script type="text/x-handlebars-template" class="pl-js-panel-template-base">
-      ${require('./partials/base-template.html') }
+      <include src="partials/base-template.html"/>
     </script>
 
+    <!-- webpackIgnore: true -->
     <script src="styleguide/data/patternlab-data.js" defer></script>
+    <!-- webpackIgnore: true -->
     <script src="annotations/annotations.js" defer></script>
+    <!-- webpackIgnore: true -->
     <script
       src="styleguide/js/patternlab-viewer.modern.js"
       type="module"
@@ -63,6 +69,7 @@
         }
       })();
     </script>
+    <!-- webpackIgnore: true -->
     <script
       src="styleguide/js/patternlab-viewer.js"
       defer
diff --git a/packages/uikit-workshop/webpack.config.js b/packages/uikit-workshop/webpack.config.js
index b8c67de0b..b8b2b1c97 100644
--- a/packages/uikit-workshop/webpack.config.js
+++ b/packages/uikit-workshop/webpack.config.js
@@ -1,16 +1,14 @@
 // webpack.config.js
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin-patch');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const autoprefixer = require('autoprefixer');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const argv = require('yargs').argv;
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const WebpackBar = require('webpackbar');
+const fs = require('node:fs');
 
 const cosmiconfigSync = require('cosmiconfig').cosmiconfigSync;
 const explorerSync = cosmiconfigSync('patternlab');
@@ -23,10 +21,27 @@ const defaultConfig = {
   sourceMaps: true,
   watch: argv.watch ? true : false,
   publicPath: './styleguide/',
-  copy: [{ from: './src/images/**', to: 'images', flatten: true }],
+  copy: {
+    patterns: [
+      { from: '../uikit-workshop/src/images/**', to: 'images/[name][ext]' },
+    ],
+  },
   noViewAll: false,
 };
 
+// Requiring partials
+// adapted from https://github.com/webpack-contrib/html-loader/issues/291#issuecomment-721909576
+const INCLUDE_PATTERN = /\<include src=\"(.+)\"\/?\>(?:\<\/include\>)?/gi;
+const processNestedHtml = (content, loaderContext) =>
+  !INCLUDE_PATTERN.test(content)
+    ? content
+    : content.replace(INCLUDE_PATTERN, (m, src) =>
+        processNestedHtml(
+          fs.readFileSync(path.resolve(loaderContext.context, src), 'utf8'),
+          loaderContext
+        )
+      );
+
 module.exports = function (apiConfig) {
   return new Promise(async (resolve) => {
     let customConfig = defaultConfig;
@@ -109,7 +124,9 @@ module.exports = function (apiConfig) {
         loader: 'postcss-loader',
         options: {
           sourceMap: config.sourceMaps,
-          plugins: () => [autoprefixer()],
+          postcssOptions: {
+            plugins: [['autoprefixer', {}]],
+          },
         },
       },
       {
@@ -147,7 +164,6 @@ module.exports = function (apiConfig) {
       output: {
         path: path.resolve(config.rootDir, `${config.buildDir}/styleguide`),
         publicPath: `${config.publicPath}`,
-        filename: '[name].js',
         chunkFilename: `js/[name]-chunk-[chunkhash].js`,
       },
       module: {
@@ -170,12 +186,11 @@ module.exports = function (apiConfig) {
               {
                 loader: 'html-loader',
                 options: {
-                  interpolate: true,
-                  minimize: config.prod ? true : false,
-                  minifyCSS: false,
-                  minifyJS: config.prod ? true : false,
-                  // super important -- this prevents the embedded iframe srcdoc HTML from breaking!
-                  preventAttributesEscaping: true,
+                  minimize: {
+                    minifyCSS: false,
+                    minifyJS: config.prod ? true : false,
+                  },
+                  preprocessor: processNestedHtml,
                 },
               },
             ],
@@ -225,8 +240,8 @@ module.exports = function (apiConfig) {
       mode: config.prod ? 'production' : 'development',
       optimization: {
         minimize: config.prod,
-        occurrenceOrder: true,
-        namedChunks: true,
+        chunkIds: 'total-size',
+        moduleIds: 'size',
         removeAvailableModules: true,
         removeEmptyChunks: true,
         nodeEnv: 'production',
@@ -235,9 +250,9 @@ module.exports = function (apiConfig) {
         splitChunks: {
           chunks: 'async',
           cacheGroups: {
-            vendors: {
+            defaultVendors: {
               test: /[\\/]node_modules[\\/]/,
-              name: 'vendors',
+              idHint: 'vendors',
               chunks: 'async',
               reuseExistingChunk: true,
             },
@@ -247,7 +262,6 @@ module.exports = function (apiConfig) {
           ? [
               new TerserPlugin({
                 test: /\.m?js(\?.*)?$/i,
-                sourceMap: config.prod ? false : config.sourceMaps,
                 terserOptions: {
                   safari10: true,
                 },
@@ -258,23 +272,6 @@ module.exports = function (apiConfig) {
       plugins: [new WebpackBar(), new CopyPlugin(config.copy)],
     };
 
-    webpackConfig.plugins.push(
-      new HardSourceWebpackPlugin({
-        info: {
-          level: 'warn',
-        },
-        // Clean up large, old caches automatically.
-        cachePrune: {
-          // Caches younger than `maxAge` are not considered for deletion. They must
-          // be at least this (default: 2 days) old in milliseconds.
-          maxAge: 2 * 24 * 60 * 60 * 1000,
-          // All caches together must be larger than `sizeThreshold` before any
-          // caches will be deleted. Together they must be at least 300MB in size
-          sizeThreshold: 300 * 1024 * 1024,
-        },
-      })
-    );
-
     const legacyConfig = merge(webpackConfig, {
       entry: {
         'js/patternlab-pattern': path.join(
@@ -303,7 +300,6 @@ module.exports = function (apiConfig) {
         new MiniCssExtractPlugin({
           filename: `[name].css`,
           chunkFilename: `[id].css`,
-          allChunks: true,
         }),
       ],
     });
@@ -343,22 +339,19 @@ module.exports = function (apiConfig) {
       },
       plugins: [
         // clear out the buildDir on every fresh Webpack build
-        new CleanWebpackPlugin(
-          config.watch
+        new CleanWebpackPlugin({
+          verbose: false,
+          cleanOnceBeforeBuildPatterns: config.watch
             ? []
             : [
                 `${config.buildDir}/index.html`,
                 `${config.buildDir}/styleguide/css`,
                 `${config.buildDir}/styleguide/js`,
               ],
-          {
-            allowExternal: true,
-            verbose: false,
 
-            // perform clean just before files are emitted to the output dir
-            beforeEmit: false,
-          }
-        ),
+          // perform clean just before files are emitted to the output dir
+          beforeEmit: false,
+        }),
         new HtmlWebpackPlugin({
           filename: '../index.html',
           template: path.resolve(__dirname, 'src/html/index.html'),
@@ -367,7 +360,6 @@ module.exports = function (apiConfig) {
         new MiniCssExtractPlugin({
           filename: `[name].css`,
           chunkFilename: `[id].css`,
-          allChunks: true,
         }),
       ],
     });