readability and stability changes

.eleventy.js

@@ -1,6 +1,5 @@
 const path = require("path");
 const fs = require("fs");
-const manifest = require("./data/manifest.json");
 
 const Nunjucks = require("nunjucks");
 

njktags/vue.js

@@ -6,7 +6,21 @@ const TemplateCompiler = require("vue-template-compiler");
 const VueServerRenderer = require("vue-server-renderer");
 const requireFromString = require("require-from-string");
 const babel = require("@babel/core");
-const manifest = require("../data/manifest.json");
+
+let manifest = {};
+
+fs.access(
+  path.resolve(__dirname, "..", "data", "manifest.json"),
+  fs.f_OK,
+  err => {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    manifest = require("../data/manifest.json");
+    return;
+  }
+);
 
 module.exports = function(nunjucksEngine, settings) {
   this.tags = ["vue"];
@@ -50,7 +64,7 @@ module.exports = function(nunjucksEngine, settings) {
 
     moduleScript.template = parsedComponent.template.content;
 
-    if (manifest.vue[args.component]) {
+    if ("vue" in manifest && manifest.vue[args.component]) {
       moduleScript._scopeId = `data-v-${manifest.vue[args.component]}`;
     }
 

serve.js

@@ -80,15 +80,19 @@ function startServer() {
             debug(`File changed: ${file}`);
             build_site(false);
           }
+        },
+        {
+          match: [
+            path.join(__dirname, "src", "js", "**", "*.js"),
+            path.join(__dirname, "src", "scss", "**", "*"),
+            path.join(__dirname, "src", "svg", "**", "*")
+          ],
+          fn: () => build_site(true, false)
+        },
+        {
+          match: [path.join(__dirname, "src", "js", "**", "*.vue")],
+          fn: () => build_site()
         }
-        // {
-        //   match: [
-        //     path.join(__dirname, "src", "js", "**", "*"),
-        //     path.join(__dirname, "src", "scss", "**", "*"),
-        //     path.join(__dirname, "src", "svg", "**", "*")
-        //   ],
-        //   fn: () => build_site(true, false)
-        // }
       ],
       middleware: [
         (req, res, next) => {
@@ -113,48 +117,42 @@ function startServer() {
 // Run build command
 const build_site = debounce(
   (build_assets = true, build_site = true, file_filter = "") => {
-    co(function*() {
-      if (child && typeof child.pid) {
-        info(`Killing ${child.pid}`);
-        yield kill_child(child.pid);
-      }
+    if (child && typeof child.pid) {
+      info(`Killing ${child.pid}`);
+      kill_child(child.pid);
+    }
 
-      info("Building Website");
+    info("Building Website");
 
-      info(`build_assets: ${build_assets}`);
-      info(`file: ${file_filter}`);
+    info(`build_assets: ${build_assets}`);
+    info(`file: ${file_filter}`);
 
-      if (build_assets) {
-        // console.log("Webpack Started");
-        // console.log("Execute webpack build here");
-        // yield run_build_command(
-        //   `webpack --env ${process.env.NODE_ENV} --watch`
-        // );
-        // console.log("Webpack Finished");
-        // yield run_build_command(`npm run spritesheet`);
-      }
+    if (build_assets) {
+      // console.log("Webpack Started");
+      // console.log("Execute webpack build here");
+      run_build_command(`webpack --env ${process.env.NODE_ENV} --watch`).then(
+        result => {
+          sync.reload();
+        }
+      );
+      // console.log("Webpack Finished");
+      // yield run_build_command(`npm run spritesheet`);
+    }
 
-      if (build_site) {
-        info("Build Started");
-        const build_command = ["npm run compile"];
+    if (build_site) {
+      info("Build Started");
+      const build_command = ["npm run compile"];
 
-        yield run_build_command(build_command.join(" "));
-        info("Build Finished");
-      }
+      run_build_command(build_command.join(" "));
+      info("Build Finished");
+    }
 
-      if (!sync.active) {
-        startServer();
-      }
+    if (!sync.active) {
+      startServer();
+    }
 
-      child = void 0;
-      sync.reload();
-    }).catch(err => {
-      sync.sockets.emit("fullscreen:message", {
-        title: err.name,
-        body: strip_ansi(`${err.message}\n\n${err.stack}`),
-        timeout: 5e3
-      });
-    });
+    child = void 0;
+    sync.reload();
   },
   200
 );
@@ -180,4 +178,4 @@ compiler.hooks.afterCompile.tap("eleventy", params => {
   sync.reload();
 });
 
-build_site();
+build_site(false, true);

src/js/main.js

@@ -19,10 +19,11 @@ Array.prototype.forEach.call(document.querySelectorAll(".ListComp"), function(
   }).$mount(elem);
 });
 
-Array.prototype.forEach.call(document.querySelectorAll(".RecordPlayer"), function(
-  elem
-) {
-  new Vue({
-    render: h => h(RecordPlayer, { props: { record: elem.dataset.record } })
-  }).$mount(elem);
-});
+Array.prototype.forEach.call(
+  document.querySelectorAll(".RecordPlayer"),
+  function(elem) {
+    new Vue({
+      render: h => h(RecordPlayer, { props: { record: elem.dataset.record } })
+    }).$mount(elem);
+  }
+);