html loader

adessoSE · Dec 15, 2023 · fb5d5e6 · fb5d5e6
1 parent a5b01fb
commit fb5d5e6
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -6,7 +6,8 @@ Webpack configuration that creates a sfmc compatible script.
     * array functions (map, reduce, forEach)
     * Object functions (keys)
 * modern JS syntax
-* ampScript loader
+* ampScriptLoader
+* htmlLoader
 * minification (optionally)
 ## Installation
 `git clone https://github.com/adessoSE/ssjs-webpack.git`
@@ -51,6 +52,27 @@ in `/src/index.js`:
 ```
 import ampFile from './lib/foo.amp'
 Write(ampFile.run());
+```
+### htmlLoader
+external html files can be imported and displayed.
+> **_NOTE:_** do not overwrite the `/templates/index.ejs`. It is required to build the SFMC compatible script.
+Example:
+create a new file `/templates/index.html`:
+```
+<html>
+    <head>
+        <title>Hello World!</title>
+    </head>
+    <body>
+        <h1 name="msg">Hello World!</h1>
+    </body>
+</html>
+```
+in `/src/index.js`:
+```
+import index from 'templates/index.html';
+index.display();
+
 ```
 ### minification
 By default minification is disabled. To enable it, go to `\webpack.config.js` and set 

diff --git a/loaders/htmlLoader.js b/loaders/htmlLoader.js
@@ -0,0 +1,8 @@
+module.exports = (input) => {
+    return `export default({
+        display: function(){Write(TreatAsContent('${input.replace(/\>[\r\n ]+\</g, "><")
+    .replace(/(<.*?>)|\s+/g, (m, $1) => $1 ? $1 : ' ')
+    .replace(/'/gi, "\\'")
+    .trim()}'))}
+    })`;
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -25,6 +25,16 @@ module.exports = {
   target: ["web", "es3"],
   module: {
     rules: [
+      {
+        test: /\.(html)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "./loaders/htmlLoader.js",
+            options: {},
+          },
+        ],
+      },
       {
         test: /\.(js)$/,
         exclude: /node_modules/,
@@ -58,6 +68,7 @@ module.exports = {
     alias: {
       polyfills: path.resolve(__dirname, "polyfills/"),
       lib: path.resolve(__dirname, "lib/"),
+      templates: path.resolve(__dirname, "templates/")
     },
   },
 };