refactor(html-loader): interpolate option got removed

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

Author: mfranzke

packages/uikit-workshop/src/html/index.html

@@ -30,7 +30,7 @@
 
     <!-- the template for the modal slider -->
     <script type="text/mustache" class="pl-js-panel-template-base">
-      ${require('./partials/base-template.html') }
+      <include src="partials/base-template.html"/>
     </script>
 
     <!-- webpackIgnore: true -->

packages/uikit-workshop/webpack.config.js

@@ -8,6 +8,7 @@ const path = require('path');
 const argv = require('yargs').argv;
 const { merge } = require('webpack-merge');
 const WebpackBar = require('webpackbar');
+const fs = require('node:fs');
 
 const cosmiconfigSync = require('cosmiconfig').cosmiconfigSync;
 const explorerSync = cosmiconfigSync('patternlab');
@@ -24,6 +25,19 @@ const defaultConfig = {
   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;
@@ -170,11 +184,11 @@ module.exports = function (apiConfig) {
               {
                 loader: 'html-loader',
                 options: {
-                  interpolate: true,
                   minifyCSS: false,
                   minifyJS: config.prod ? true : false,
                   // super important -- this prevents the embedded iframe srcdoc HTML from breaking!
                   preventAttributesEscaping: true,
+                  preprocessor: processNestedHtml,
                 },
               },
             ],