default vue and typing

danielcherubini · danielcherubini · commit 840f4c6345c2 · 2018-02-09T12:35:44.000+01:00
- Includes a default vue
- Bug in VUE_DEV flag
- Nodemon
- Better typing
diff --git a/lib/renderer/renderer.js b/lib/renderer/renderer.js
@@ -12,7 +12,7 @@ const uglify = require("uglify-js");
 const LRU = require("lru-cache");
 const processStyle = require("./process-style").processStyle;
 const Stream = require("stream");
-
+const Layout = require("../models/layout").Layout;
 const Utils = require("../utils");
 
 /**
@@ -21,23 +21,53 @@ const Utils = require("../utils");
  * @prop {String} style
  */
 
+/**
+ * @typedef VueOptionsType
+ * @prop {String} title
+ * @prop {Object} head
+ * @prop {Object[]} head.scripts
+ * @prop {Object[]} head.metas
+ * @prop {Object[]} head.styles
+ * @prop {Layout} template
+ */
+
+/**
+ * @typedef ConfigObjectType
+ * @prop {{max: number, maxAge: number}} cacheOptions - cacheoptions for LRU cache
+ * @prop {String} rootPath
+ * @prop {String} vueVersion
+ * @prop {VueOptionsType} head
+ */
+
 class Renderer {
     /**
-     *
-     * @param {object} options - options for constructor
+     * @param {ConfigObjectType} options - options for constructor
      * @property {{max: number, maxAge: number}} cacheOptions - cacheoptions for LRU cache
      * @property {LRU} lruCache - LRU Cache
      * @property {vueServerRenderer} renderer - instance of vue server renderer
-     * @property {String} - rootPath
+     * @property {String} rootPath
+     * @property {String} vueVersion
      */
-    constructor(options = {}) {
+    constructor(options) {
         this.cacheOptions = options.cacheOptions || {
             max: 500,
             maxAge: 1000 * 60 * 60,
         };
         this.lruCache = LRU(this.cacheOptions);
         this.rootPath = options.rootPath;
-        this.head = options.head;
+        this.head = options.head || {};
+        this.vueVersion = options.vueVersion || "2.5.13";
+        let script = {};
+        if (process.env.VUE_DEV && process.env.VUE_DEV === "true") {
+            script = {src: `https://cdn.jsdelivr.net/npm/vue@${this.vueVersion}/dist/vue.js`};
+        } else {
+            script = {src: `https://cdn.jsdelivr.net/npm/vue@${this.vueVersion}/dist/vue.min.js`};
+        }
+        if (this.head.scripts) {
+            this.head.scripts.push(script);
+        } else {
+            this.head.scripts = [script];
+        }
     }
     /**
      * @param {object} oldData
@@ -353,7 +383,7 @@ class Renderer {
      * renderToStream returns a stream from res.renderVue to the client
      * @param  {string} vueFile                              - full path to .vue component
      * @param  {object} data                                 - data to be inserted when generating vue class
-     * @param  {{head: Object, template: string}} vueOptions - vue options to be used when generating head
+     * @param  {VueOptionsType} vueOptions - vue options to be used when generating head
      * @return {Promise<Stream>}
      */
     RenderToStream(vueFile, data, vueOptions) {
diff --git a/lib/utils/layout.js b/lib/utils/layout.js
@@ -1,9 +1,9 @@
 // @ts-check
-const Layout = require("../models/layout");
+const Layout = require("../models/layout").Layout;
 
 /**
  * BuildLayout
- * @param {{head: string, template: Object, css: string, script: string}} layoutObject
+ * @param {{head: string, template: Layout, css: string, script: string}} layoutObject
  * @returns {{start: string, end: string}}
  */
 function BuildLayout(layoutObject) {
@@ -13,7 +13,7 @@ function BuildLayout(layoutObject) {
     };
 
     if (layoutObject) {
-        const layout = new Layout.Layout(layoutObject.template);
+        const layout = new Layout(layoutObject.template);
         finishedLayout.start = `${layout.html.start}<head>${layoutObject.head}<style>${layoutObject.css}</style></head>${layout.body.start}${layout.template.start}`;
         finishedLayout.end = `${layout.template.end}${BuildScript(layoutObject.script)}${layout.body.end}${layout.html.end}`;
     } else {
@@ -31,7 +31,7 @@ function BuildLayout(layoutObject) {
 function BuildScript(script) {
     let debugToolsString = "";
 
-    if (process.env.VUE_DEV) {
+    if (process.env.VUE_DEV && process.env.VUE_DEV === "true") {
         debugToolsString = "Vue.config.devtools = true;";
     }
     const javaScriptString = `(function () {'use strict';var createApp = function () {return new Vue(${script})};if (typeof module !== 'undefined' && module.exports) {module.exports = createApp} else {this.app = createApp()}}).call(this);${debugToolsString}app.$mount('#app');`;
diff --git a/nodemon.json b/nodemon.json
@@ -13,7 +13,8 @@
     "tests/example/"
   ],
   "env": {
-    "DEBUG": "true"
+    "DEBUG": true,
+    "VUE_DEV": true
   },
   "ext": "js json vue"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "codecov": "^3.0.0",
     "express": "^4.16.2",
     "generate-release": "^0.14.0",
+    "nodemon": "^1.14.12",
     "nsp": "^3.1.0",
     "nyc": "^11.4.1",
     "tslint": "^5.9.1",
@@ -46,7 +47,7 @@
   },
   "scripts": {
     "release": "generate-release",
-    "debug": "DEBUG=true node --inspect tests/example/index.js",
+    "debug": "nodemon --inspect tests/example/index.js",
     "start": "node tests/example/index.js",
     "debug-windows": "npm run build-windows && node --inspect tests/example/index.js",
     "start-windows": "npm run build-windows && node tests/example/index.js",
diff --git a/tests/example/index.js b/tests/example/index.js
@@ -7,9 +7,6 @@ const evrOptions = {
     rootPath: path.normalize(__dirname),
     head: {
         title: "Test",
-        scripts: [
-            { src: "https://unpkg.com/vue@2.4.4/dist/vue.js" },
-        ],
     },
 };
 
@@ -65,5 +62,6 @@ app.get("/example2", function(req, res) {
 });
 
 app.listen(3000, function() {
-  console.log("Example app listening on port 3000!");
+    // tslint:disable-next-line:no-console
+    console.log("Example app listening on port 3000!");
 });
diff --git a/tests/renderer.js b/tests/renderer.js
