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/")
  },
  },
 };