Merge pull request #74 from express-vue/feature/shrink_code

danielcherubini · web-flow · commit 3f14c3e3d333 · 2017-08-29T08:36:42.000+02:00
minifies code in the HTML
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,6 +67,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",
diff --git a/src/renderer/render.js b/src/renderer/render.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 = {
diff --git a/tests/index.js b/tests/index.js
@@ -21,13 +21,7 @@ const vueOptions = {
 }
 
 const exampleHead = `<head>\n<title>Page Title</title>\n</head>`;
-const exampleScript = `<script>
-(function () {'use strict';var createApp = function () {return new Vue({mixins: [{methods: {hello: function hello() {
-            console.log('Hello');
-        },},},],data: function(){return {"title":"Express Vue","message":"Hello world","uuid":"farts"}},methods: {test: function test() {
-            console.error('test');
-        },},components: {uuid: {props: ["uuid"],data: function(){return {}},template: "<div><h2>Uuid: {{uuid ? uuid : 'no uuid'}}</h2></div>",},uuid2: {props: ["uuid2"],data: function(){return {}},template: "<div><h3>Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3></div>",},},template: "<div><h1>{{title}}</h1><p>Welcome to the {{title}} demo. Click a link:</p><input v-model=\\"message\\" placeholder=\\"edit me\\"><p>{{message}}</p><uuid :uuid=\\"uuid\\"></uuid><uuid2 :uuid2=\\"uuid2\\"></uuid2><button type=\\"button\\" name=\\"button\\" v-on:click=\\"this.hello\\">Test mixin</button> <button type=\\"button\\" name=\\"button\\" v-on:click=\\"this.test\\">Test method</button></div>",})};if (typeof module !== 'undefined' && module.exports) {module.exports = createApp} else {this.app = createApp()}}).call(this);app.$mount('#app');
-</script>`
+const exampleScript = `<script>(function(){"use strict";var u=function(){return new Vue({mixins:[{methods:{hello:function(){console.log('Hello')}}}],data:function(){return{"title":"Express Vue","message":"Hello world","uuid":"farts"}},methods:{test:function(){console.error('test')}},components:{uuid:{props:["uuid"],data:function(){return{}},template:"<div><h2>Uuid: {{uuid ? uuid : 'no uuid'}}</h2></div>"},uuid2:{props:["uuid2"],data:function(){return{}},template:"<div><h3>Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3></div>"}},template:"<div><h1>{{title}}</h1><p>Welcome to the {{title}} demo. Click a link:</p><input v-model=\\"message\\" placeholder=\\"edit me\\"><p>{{message}}</p><uuid :uuid=\\"uuid\\"></uuid><uuid2 :uuid2=\\"uuid2\\"></uuid2><button type=\\"button\\" name=\\"button\\" v-on:click=\\"this.hello\\">Test mixin</button> <button type=\\"button\\" name=\\"button\\" v-on:click=\\"this.test\\">Test method</button></div>"})};typeof module!=='undefined'&&module.exports?(module.exports=u):(this.app=u())}).call(this),app.$mount('#app')</script>`
 
 test('renders App object', t => {
     const renderer = new ExpressVueRenderer(options);
