From 35e13c6c4de344c2372026357754e9c2786154f6 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <maximilian.franzke@deutschebahn.com>
Date: Fri, 23 Dec 2022 01:59:25 +0100
Subject: [PATCH] refactor(html-loader): interpolate option got removed

that for we need to adapt some other solution for the new preprocessor option
---
 packages/uikit-workshop/src/html/index.html |  2 +-
 packages/uikit-workshop/webpack.config.js   | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html
index 094f03ec0..08dc751df 100644
--- a/packages/uikit-workshop/src/html/index.html
+++ b/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 -->
diff --git a/packages/uikit-workshop/webpack.config.js b/packages/uikit-workshop/webpack.config.js
index 82a0ef261..6c7a303b2 100644
--- a/packages/uikit-workshop/webpack.config.js
+++ b/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,
                 },
               },
             ],