Render templates with values

index.ts

@@ -1,6 +1,9 @@
 import Bundler from 'parcel-bundler';
-import { join } from 'path';
+import { join, dirname } from 'path';
 import rimraf from 'rimraf';
+import { readFileSync, writeFileSync } from 'fs';
+import Handlebars from 'handlebars';
+import mkdirp from 'mkdirp';
 
 const BUILD_DIR = join(__dirname, 'build');
 const SRC_DIR = join(__dirname, 'src');
@@ -11,10 +14,25 @@ const BUNDLER_OPTIONS = {
   minify: true,
 };
 
+function writeTemplate(content: string, value: string) {
+  const outputFile = join(BUILD_DIR, value, 'index.html');
+  mkdirp.sync(dirname(outputFile));
+  writeFileSync(outputFile, content);
+}
+
+function renderTemplate(template: HandlebarsTemplateDelegate, value: number) {
+  const html = template({value});
+  writeTemplate(html, value.toString());
+}
+
 (async function() {
   rimraf.sync(BUILD_DIR);
 
   const bundler = new Bundler(join(SRC_DIR, 'template.html'), BUNDLER_OPTIONS);
 
   await bundler.bundle();
+
+  const template = Handlebars.compile(readFileSync(join(BUILD_DIR, 'template.html')).toString());
+
+  renderTemplate(template, 123);
 })();

package-lock.json

@@ -1053,6 +1053,14 @@
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
+    "@types/mkdirp": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@types/mkdirp/-/mkdirp-0.5.2.tgz",
+      "integrity": "sha512-U5icWpv7YnZYGsN4/cmh3WD2onMY0aJIiTE6+51TwJCttdHvtCYmkBNOobHlXwrJRL0nkH9jH4kD+1FAdMN4Tg==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/node": {
       "version": "12.0.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.0.10.tgz",
@@ -3471,6 +3479,17 @@
         "unicode-trie": "^0.3.1"
       }
     },
+    "handlebars": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
+      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+      "requires": {
+        "neo-async": "^2.6.0",
+        "optimist": "^0.6.1",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4"
+      }
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -4352,6 +4371,11 @@
         "to-regex": "^3.0.1"
       }
     },
+    "neo-async": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
+      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -4565,6 +4589,27 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "optimist": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
+      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
+      "requires": {
+        "minimist": "~0.0.1",
+        "wordwrap": "~0.0.2"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.10",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
+        },
+        "wordwrap": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
+        }
+      }
+    },
     "optionator": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@@ -6339,6 +6384,16 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.2.tgz",
       "integrity": "sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA=="
     },
+    "uglify-js": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz",
+      "integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==",
+      "optional": true,
+      "requires": {
+        "commander": "~2.20.0",
+        "source-map": "~0.6.1"
+      }
+    },
     "uncss": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/uncss/-/uncss-0.16.2.tgz",

package.json

@@ -17,11 +17,14 @@
   "homepage": "https://github.com/RealOrangeOne/givemoneyto.me#readme",
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.7.1",
+    "@types/mkdirp": "^0.5.2",
     "@types/node": "^12.0.10",
     "@types/parcel-bundler": "^1.12.0",
     "@types/rimraf": "^2.0.2",
     "animate.css": "3.7.0",
     "bootstrap": "4.2.1",
+    "handlebars": "^4.1.2",
+    "mkdirp": "^0.5.1",
     "parcel-bundler": "1.12.3",
     "rimraf": "^2.6.3",
     "sass": "^1.22.1",

src/template.html

@@ -3,5 +3,6 @@
         <link rel="stylesheet" href="./index.scss" />
     </head>
 <body>
+    {{ value }}
 </body>
 </html>