Merge branch 'release/0.6.9'

Author: danielcherubini

.vscode/launch.json

@@ -3,13 +3,17 @@
     // Hover to view descriptions of existing attributes.
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
-    "configurations": [{
+    "configurations": [
+
+        {
             "name": "Attach to Process",
             "type": "node",
             "request": "attach",
             "port": 9229,
             "protocol": "inspector",
-            "restart": true
+            "restart": true,
+            "outFiles": ["${workspaceRoot}/lib"],
+            "sourceMaps": true
         },
         {
             "type": "node",

example/app.js

@@ -15,7 +15,7 @@ var exampleMixin = {
 };
 
 const options = {
-    rootPath: path.join(__dirname, '/vueFiles'),
+    rootPath: path.join(__dirname, ''),
     vue: {
         head: {
             meta: [{
@@ -66,7 +66,7 @@ app.get('/', (req, res) => {
             ]
         }
     }
-    res.renderVue('main/main.vue', data, vueOptions)
+    res.renderVue('main.vue', data, vueOptions)
 });
 
 app.listen(3000);

example/components/uuid.vue

@@ -1,12 +1,12 @@
 <template>
     <div>
         <inner></inner>
-        <h2>Uuid: {{uuid ? uuid : 'no uuid'}}</h2>
+        <h2 class="test">Uuid: {{uuid ? uuid : 'no uuid'}}</h2>
     </div>
 </template>
 
 <script>
-import inner from '../components/inner.vue';
+import inner from './components/inner.vue';
 export default {
     props: ['uuid'],
     data: function () {

example/components/uuid2.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h3>Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3>
+        <h3 class="red">Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3>
     </div>
 </template>
 
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style lang="css">
-.test {
-    color: blue;
+.red {
+    color: yellowgreen;
 }
 </style>

example/vueFiles/main.vue renamed to example/main.vue

@@ -1,6 +1,6 @@
 {
   "name": "express-vue-renderer",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "description": "Rendering Engine for turning Vue files into Javascript Objects",
   "homepage": "https://github.com/express-vue/express-vue-renderer",
   "author": {
@@ -21,7 +21,8 @@
   ],
   "ava": {
     "files": [
-      "tests/**/*.js"
+      "tests/**/*.js",
+      "!tests/example/**/*.js"
     ],
     "source": [
       "src/**/*.js",
@@ -50,8 +51,8 @@
   "scripts": {
     "release": "generate-release",
     "flow": "flow",
-    "debug": "npm run build && node --inspect example/app.js",
-    "start": "npm run build && node example/app.js",
+    "debug": "npm run build && node --inspect tests/example/app.js",
+    "start": "npm run build && node tests/example/app.js",
     "prepublish": "npm run build && nsp check",
     "pretest": "eslint . --fix",
     "test": "eslint src && nyc ava",
@@ -67,6 +68,7 @@
   "dependencies": {
     "babel-eslint": "^7.2.3",
     "babel-preset-es2015": "^6.24.1",
+    "butternut": "^0.4.6",
     "camel-case": "^3.0.0",
     "clean-css": "^4.1.7",
     "dedupe": "^2.1.0",

package-lock.json

@@ -3,6 +3,7 @@
 const fs = require('fs');
 const camelCase = require('camel-case');
 const compiler = require('vue-template-compiler');
+const CleanCSS = require('clean-css');
 const styleParser = require('./style');
 const htmlParser = require('./html');
 const scriptParser = require('./script');
@@ -16,6 +17,7 @@ function componentParser(templatePath: string, defaults: Object, type: string, C
             scriptParser(cachedComponentContentObject.parsedContent.script, defaults, type, Cache).then(parsedScriptObject => {
                 cachedComponentContentObject.script = parsedScriptObject;
                 cachedComponentContentObject.script.template = cachedComponentContentObject.template;
+                cachedComponentContentObject.styles = parsedScriptObject.styles;
                 resolve(cachedComponentContentObject);
             }).catch(error => {
                 reject(error);
@@ -64,7 +66,12 @@ function parseContent(content: string, templatePath: string, defaults: Object, t
                 Promise.all(promiseArray).then(resultsArray => {
                     const template = resultsArray[0];
                     const script = resultsArray[1];
-                    const style = resultsArray[2];
+                    let style = '';
+                    if (resultsArray[2]) {
+                        style = resultsArray[2];
+                    } else {
+                        style = new CleanCSS({}).minify(resultsArray[1].styles ? resultsArray[1].styles : '').styles;
+                    }
 
                     script.template = template;
 

package.json

@@ -12,17 +12,16 @@ type StyleObjectType = {
 
 function styleParser(styleObjectArray: StyleObjectType[]): Promise<string> {
     return new Promise((resolve) => {
-        if (!styleObjectArray || styleObjectArray.length === 0) {
-            resolve('');
-        } else {
+        let output = '';
+        if (styleObjectArray && styleObjectArray.length > 0) {
             for (const styleObject of styleObjectArray) {
                 if(styleObject.lang === 'scss' || styleObject.lang === 'less') {
                     console.error('Sorry please only use plain CSS in your files for now');
                 }
-                const output = new CleanCSS({}).minify(styleObject.content);
-                resolve(output.styles);
+                output += new CleanCSS({}).minify(styleObject.content).styles;
             }
         }
+        resolve(output);
     });
 }
 

src/parser/component.js

@@ -2,6 +2,11 @@
 const Utils = require('../utils');
 const Vue = require('vue');
 
+const butternut = require('butternut');
+const buttterNutOptions = {
+    sourceMap: false
+};
+
 function createApp(script) {
     return new Vue(script);
 }
@@ -28,7 +33,10 @@ function renderedScript(script: Object, router): string {
     if (process.env.VUE_DEV) {
         debugToolsString = 'Vue.config.devtools = true;';
     }
-    return `<script>\n(function () {'use strict';${routerString}var createApp = function () {return new Vue(${scriptString})};if (typeof module !== 'undefined' && module.exports) {module.exports = createApp} else {this.app = createApp()}}).call(this);${debugToolsString}app.$mount('#app');\n</script>`;
+    const javaScriptString = `(function () {'use strict';${routerString}var createApp = function () {return new Vue(${scriptString})};if (typeof module !== 'undefined' && module.exports) {module.exports = createApp} else {this.app = createApp()}}).call(this);${debugToolsString}app.$mount('#app');`;
+    const finalString = butternut.squash(javaScriptString, buttterNutOptions).code;
+
+    return `<script>${finalString}</script>`;
 }
 
 type htmlUtilType = {