Merge pull request #92 from express-vue/feature/source-string

danielcherubini · web-flow · commit a4f1dcb5e6b4 · 2017-10-06T11:56:27.000+02:00
source string contents and updates to prop contents
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,41 +66,44 @@
   "repository": "express-vue/express-vue-renderer",
   "license": "Apache-2.0",
   "dependencies": {
-    "babel-eslint": "^8.0.0",
+    "babel-core": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "butternut": "^0.4.6",
     "camel-case": "^3.0.0",
-    "clean-css": "^4.1.7",
+    "clean-css": "^4.1.9",
+    "debug": "^2.6.9",
     "dedupe": "^2.1.0",
-    "deepmerge": "^1.5.1",
-    "html-minifier": "^3.5.3",
+    "deepmerge": "^1.5.2",
+    "html-minifier": "^3.5.5",
     "lru-cache": "^4.1.1",
-    "pug": "^2.0.0-rc.3",
-    "require-from-string": "^1.2.1",
+    "no-case": "^2.3.2",
+    "pug": "^2.0.0-rc.4",
+    "require-from-string": "^2.0.1",
     "string-hash": "^1.1.3",
-    "vue": "^2.4.2",
-    "vue-server-renderer": "^2.4.2",
-    "vue-template-compiler": "^2.4.2",
+    "vue": "^2.4.4",
+    "vue-server-renderer": "^2.4.4",
+    "vue-template-compiler": "^2.4.4",
     "xss": "^0.3.4"
   },
   "devDependencies": {
     "ava": "^0.22.0",
     "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.0.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-flow": "^6.23.0",
     "codecov": "^2.3.0",
     "coveralls": "^3.0.0",
-    "eslint": "^4.5.0",
+    "eslint": "^4.7.2",
     "eslint-config-xo-space": "^0.16.0",
-    "eslint-plugin-flowtype": "^2.35.0",
-    "express": "^4.15.4",
+    "eslint-plugin-flowtype": "^2.36.0",
+    "express": "^4.16.0",
     "flow-bin": "^0.56.0",
     "flow-remove-types": "^1.2.1",
     "generate-release": "^0.14.0",
-    "nodemon": "^1.11.0",
-    "nsp": "^2.7.0",
-    "nyc": "^11.1.0",
+    "nodemon": "^1.12.1",
+    "nsp": "^2.8.1",
+    "nyc": "^11.2.1",
     "uuid": "^3.1.0"
   }
 }
diff --git a/src/utils/head.js b/src/utils/head.js
@@ -52,6 +52,8 @@ class HeadUtil {
                     const href = metaItem.href ? `href="${metaItem.href}" ` : '';
                     const sizes = metaItem.sizes ? `sizes="${metaItem.sizes}" ` : '';
                     this.metaTags += `<link ${rel}${type}${href}${sizes}>\n`;
+                } else if (metaItem.srcContents) {
+                    this.metaTags += `${metaItem.srcContents}\n`;
                 }
             }
         }
diff --git a/src/utils/string.js b/src/utils/string.js
@@ -1,69 +1,104 @@
 // @flow
 const xss = require('xss');
 
+class PropClass {
+    type: any;
+    required: boolean;
+    default: any;
+    constructor(prop: any) {
+        prop.required ? this.required = prop.required : null;
+        prop.default ? this.default = prop.default : null;
+    }
+}
 
 function routesToString(routes: Object[]): string {
-    let string = '';
-    routes.forEach(script => string += scriptToString(script) + ',');
-    return `[${string}]`;
+    let routeString = '';
+    routes.forEach(script => routeString += scriptToString(script) + ',');
+    return `[${routeString}]`.replace(new RegExp(/,}/, 'g'), '}').replace(new RegExp(/,]/, 'g'), ']');
 }
 
 function routeComponentsToString(script: Object): string {
-    let string = '';
+    let componentString = '';
     for (let member in script) {
-        string += member + ': __' + script[member] + ',';
+        componentString += member + ': __' + script[member] + ',';
     }
-    return `{${string}}`;
+    return `{${componentString}}`;
 }
 
 function mixinsToString(mixins: Array < Object > ): string {
-    var string = '';
+    var mixinString = '';
     for (var mixin of mixins) {
-        string += `${scriptToString(mixin)},`;
+        mixinString += `${scriptToString(mixin)},`;
     }
-    return string;
+    return mixinString;
 }
 
-function scriptToString(script: Object): string {
-    let string = '';
+function propsToString(props: Object): string {
+    let propString = '';
+    if (props[Object.keys(props)[0]].type === null) {
+        var propsArray = Object.keys(props);
+        propString = xss(JSON.stringify(propsArray));
+    } else {
+        let tempProp = {};
+        for (var prop in props) {
+            if (props.hasOwnProperty(prop)) {
+                var element = new PropClass(props[prop]);
+                tempProp[prop] = element;
+            }
+        }
+        propString = scriptToString(tempProp);
+    }
+    return propString;
+}
+
+function scriptToString(script: Object | any): string {
+    let scriptString = '';
     for (let member in script) {
         switch (typeof script[member]) {
             case 'function':
                 if (member === 'data') {
                     const dataObj = xss(JSON.stringify(script[member]()));
-                    string += `${member}: function(){return ${dataObj}},`;
+                    scriptString += `${member}: function(){return ${dataObj}},`;
                 } else {
-                    string += member + ': ' + String(script[member]) + ',';
+                    scriptString += member + ': ' + String(script[member]) + ',';
                 }
                 break;
             case 'object':
                 if (member === 'data') {
-                    string += member + ': ' + xss(JSON.stringify(script[member])) + ',';
+                    scriptString += member + ': ' + xss(JSON.stringify(script[member])) + ',';
                 } else if (member === 'routes' || member === 'children') {
-                    string += member + ': ' + routesToString(script[member]) + ',';
+                    scriptString += member + ': ' + routesToString(script[member]) + ',';
                 } else if (member === 'components' && script['path'] !== undefined) { // Checks if 'components' is in a route object
-                    string += member + ': ' + routeComponentsToString(script[member]) + ',';
+                    scriptString += member + ': ' + routeComponentsToString(script[member]) + ',';
                 } else if (member === 'mixins') {
-                    string += member + ': [' + mixinsToString(script[member]) + '],';
+                    scriptString += member + ': [' + mixinsToString(script[member]) + '],';
                 } else if (script[member].constructor === Array) {
-                    string += member + ': ' + xss(JSON.stringify(script[member])) + ',';
+                    scriptString += member + ': ' + xss(JSON.stringify(script[member])) + ',';
                 } else if (member === 'props') {
-                    const propsArray = Object.keys(script[member]);
-                    string += member + ': ' + xss(JSON.stringify(propsArray)) + ',';
+                    if (script[member][Object.keys(script[member])[0]].type === null) {
+                        var propsArray = Object.keys(script[member]);
+                        scriptString += member + ': ' + xss(JSON.stringify(propsArray)) + ',';
+                    } else {
+                        // scriptString += member + ': ' + scriptToString(script[member]) + ',';
+                        const propsString = propsToString(script[member]);
+                        scriptString += `${member}: ${propsString},`;
+                    }
+
                 } else {
-                    string += member + ': ' + scriptToString(script[member]) + ',';
+                    scriptString += member + ': ' + scriptToString(script[member]) + ',';
                 }
                 break;
             default:
                 if (member === 'component' && script['path'] !== undefined) { // Checks if 'component' is in a route object
-                    string += member + ': __' + script[member] + ',';
+                    scriptString += member + ': __' + script[member] + ',';
                 } else {
-                    string += member + ': ' + JSON.stringify(script[member]) + ',';
+                    scriptString += member + ': ' + JSON.stringify(script[member]) + ',';
                 }
                 break;
         }
     }
-    return `{${string}}`;
+    let finalScriptString = `{${scriptString}}`.replace(new RegExp(/,}/, 'g'), '}').replace(new RegExp(/,]/, 'g'), ']');
+    return finalScriptString;
 }
 
 module.exports.scriptToString = scriptToString;
diff --git a/tests/example/app.js b/tests/example/app.js
@@ -27,7 +27,7 @@ const options = {
                     content: 'Page Title'
                 },
                 {
-                    script: 'https://unpkg.com/vue@2.4.2/dist/vue.js'
+                    script: 'https://unpkg.com/vue@2.4.4/dist/vue.js'
                 }, {
                     name: 'viewport',
                     content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
diff --git a/tests/example/components/uuid.vue b/tests/example/components/uuid.vue
@@ -8,7 +8,13 @@
 <script>
 import inner from '../components/inner.vue';
 export default {
-    props: ['uuid'],
+    props: {
+        uuid: {
+            type: String,
+            default: 'missing',
+            required: true
+        }
+    },
     data: function () {
         return {}
     },
diff --git a/tests/index.js b/tests/index.js
@@ -21,7 +21,7 @@ const vueOptions = {
 }
 
 const exampleHead = `<head>\n<title>Page Title</title>\n<style>.red{color:#9acd32}.pink{color:pink;text-decoration:underline}.test{color:#00f}</style></head>`;
-const exampleScript = `<script>(function(){"use strict";var t=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{}},components:{inner:{data:function(){return{}},template:"<div><p class=\\"pink\\">Inner Text</p></div>"}},styles:".pink{color:pink;text-decoration:underline}",template:"<div><inner></inner><h2 class=\\"test\\">Uuid: {{uuid ? uuid : 'no uuid'}}</h2></div>"},uuid2:{props:["uuid2"],data:function(){return{}},template:"<div><h3 class=\\"red\\">Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3></div>"}},styles:".pink{color:pink;text-decoration:underline}.test{color:#00f}.red{color:#9acd32}",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=t):(this.app=t())}).call(this),app.$mount('#app')</script>`;
+const exampleScript = `<script>(function(){"use strict";var t=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:{required:!0,default:"missing"}},data:function(){return{}},components:{inner:{data:function(){return{}},template:"<div><p class=\\"pink\\">Inner Text</p></div>"}},styles:".pink{color:pink;text-decoration:underline}",template:"<div><inner></inner><h2 class=\\"test\\">Uuid: {{uuid ? uuid : 'no uuid'}}</h2></div>"},uuid2:{props:["uuid2"],data:function(){return{}},template:"<div><h3 class=\\"red\\">Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3></div>"}},styles:".pink{color:pink;text-decoration:underline}.test{color:#00f}.red{color:#9acd32}",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=t):(this.app=t())}).call(this),app.$mount('#app')</script>`;
 
 test('renders App object', t => {
     const renderer = new ExpressVueRenderer(options);
diff --git a/tests/utils/head.js b/tests/utils/head.js
@@ -46,6 +46,9 @@ const newHead = {
                 type: 'image/png',
                 href: '/assets/favicons/favicon-32x32.png',
                 sizes: '32x32'
+            },
+            {
+                srcContents: '<script>var foo = false;</script>'
             }
         ],
         structuredData: {
@@ -57,13 +60,14 @@ const newHead = {
 const newMetaString = new HeadUtils(newHead).toString();
 
 //New Tests
-const newStringIsCorrect = '<head>\n<title>It was a Pleasure</title>\n<meta name="application-name" content="Name of my application"/>\n<meta name="description" content="A description of the page"/>\n<meta name="twitter:title" content="Content Title"/>\n<meta property="fb:app_id" content="123456789"/>\n<meta property="og:title" content="Content Title"/>\n<script src="/assets/scripts/hammer.min.js" charset="utf-8"></script>\n<script src="/assets/scripts/vue-touch.min.js" charset="utf-8"></script>\n<link rel="stylesheet" type="text/css" href="/assets/rendered/style.css">\n<link rel="stylesheet" type="text/css" href="/assets/rendered/style.css">\n<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32" >\n<script type="application/ld+json">\n{"foo":true}\n</script>\n</head>'
+const newStringIsCorrect = '<head>\n<title>It was a Pleasure</title>\n<meta name="application-name" content="Name of my application"/>\n<meta name="description" content="A description of the page"/>\n<meta name="twitter:title" content="Content Title"/>\n<meta property="fb:app_id" content="123456789"/>\n<meta property="og:title" content="Content Title"/>\n<script src="/assets/scripts/hammer.min.js" charset="utf-8"></script>\n<script src="/assets/scripts/vue-touch.min.js" charset="utf-8"></script>\n<link rel="stylesheet" type="text/css" href="/assets/rendered/style.css">\n<link rel="stylesheet" type="text/css" href="/assets/rendered/style.css">\n<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32" >\n<script>var foo = false;</script>\n<script type="application/ld+json">\n{"foo":true}\n</script>\n</head>'
 const newHasTitle = newMetaString.includes('<title>It was a Pleasure</title>');
 const newHasMetaName = newMetaString.includes(`<meta name="application-name" content="Name of my application"/>`);
 const newHasMetaProperty = newMetaString.includes(`<meta property="og:title" content="Content Title"/>`);
 const newHasScript = newMetaString.includes(`<script src="/assets/scripts/hammer.min.js" charset="utf-8">`)
 const newHasStyle = newMetaString.includes(`<link rel="stylesheet" type="text/css" href="/assets/rendered/style.css">`)
 const newHasStructured = newMetaString.includes(`<script type="application/ld+json">\n{"foo":true}\n</script>`);
+const newHasSrcContents = newMetaString.includes(`<script>var foo = false;</script>`);
 
 test('Head is correct', t => {
     t.is(newMetaString, newStringIsCorrect);
@@ -92,3 +96,7 @@ test('Head has style 🎷', t => {
 test('Head has Structured Data', t => {
     t.is(newHasStructured, true);
 });
+
+test('Head has srcContents', t => {
+    t.is(newHasSrcContents, true);
+});
diff --git a/tests/utils/string.js b/tests/utils/string.js
@@ -39,23 +39,24 @@ const exampleMixin = {
     }
 };
 
-const string = scriptToString(object);
+const testString = scriptToString(object);
+const testString2 = scriptToString(object2);
 const mixins = mixinsToString([exampleMixin]);
 
 //Tests
-const hasString = string.includes(`string: "foo"`);
-const hasNumber = string.includes(`number: 42`);
-const hasArray = string.includes(`array: ["one","two","three"]`);
-const hasObject = string.includes(`object: {dog: true,cat: false,}`);
-const hasBoolean = string.includes(`boolean: true`);
-const hasFunction = string.includes(`function: function _function() {
+const hasString = testString.includes(`string: "foo"`);
+const hasNumber = testString.includes(`number: 42`);
+const hasArray = testString.includes(`array: ["one","two","three"]`);
+const hasObject = testString.includes(`object: {dog: true,cat: false}`);
+const hasBoolean = testString.includes(`boolean: true`);
+const hasFunction = testString.includes(`function: function _function() {
         return 'baz';
     }`);
-const hasDataFunc = string.includes(`data: function(){return {"foo":"bar"}}`);
-const hasDataObj = scriptToString(object2).includes(`data: {"foo":"bar"}`);
-const hasFinal = string === `{string: "foo",function: function _function() {
+const hasDataFunc = testString.includes(`data: function(){return {"foo":"bar"}}`);
+const hasDataObj = testString2.includes(`data: {"foo":"bar"}`);
+const hasFinal = testString === `{string: "foo",function: function _function() {
         return 'baz';
-    },data: function(){return {"foo":"bar"}},array: ["one","two","three"],object: {dog: true,cat: false,},number: 42,boolean: true,}`;
+    },data: function(){return {"foo":"bar"}},array: ["one","two","three"],object: {dog: true,cat: false},number: 42,boolean: true}`;
 
 test('Has a String', t => {
     t.is(hasString, true);
@@ -96,7 +97,7 @@ test('Has a Fully formed String', t => {
 test('Mixins', t => {
     t.is(mixins, `{methods: {hello: function hello() {
             console.log('Hello');
-        },},},`);
+        }}},`);
 });
 
 // Test routesToString()
@@ -110,7 +111,7 @@ const routes = [
             { name: 'child2', path: 'child2', components: { childview: 'mychildcomponent2', }, },
         ],
     },
-    { 
+    {
         path: '/route3', component: 'mycomponent3',
         beforeEnter: function (to, from, next) {
             console.log(to, from);
@@ -122,12 +123,12 @@ const routes = [
 const routesString = routesToString(routes);
 const hasComponent = routesString.includes(`component: __mycomponent3`);
 const hasChildComponent = routesString.includes(`component: __mychildcomponent1`);
-const hasNamedViewsComponents = routesString.includes(`components: {mainview: __mycomponent1,}`); 
-const hasNamedViewsChildComponents = routesString.includes(`components: {childview: __mychildcomponent2,}`);
-const expectedRoutesString = `[{name: "route1",path: "/route1",alias: ["asd","bsd","csd"],meta: {something: "another",},components: {mainview: __mycomponent1,},},{path: "/route2",components: {mainview: __mycomponent2,},children: [{name: "child1",path: "child1",component: __mychildcomponent1,alias: ["xsd","ysd","zsd"],},{name: "child2",path: "child2",components: {childview: __mychildcomponent2,},},],},{path: "/route3",component: __mycomponent3,beforeEnter: function beforeEnter(to, from, next) {
+const hasNamedViewsComponents = routesString.includes(`components: {mainview: __mycomponent1}`);
+const hasNamedViewsChildComponents = routesString.includes(`components: {childview: __mychildcomponent2}`);
+const expectedRoutesString = `[{name: "route1",path: "/route1",alias: ["asd","bsd","csd"],meta: {something: "another"},components: {mainview: __mycomponent1}},{path: "/route2",components: {mainview: __mycomponent2},children: [{name: "child1",path: "child1",component: __mychildcomponent1,alias: ["xsd","ysd","zsd"]},{name: "child2",path: "child2",components: {childview: __mychildcomponent2}}]},{path: "/route3",component: __mycomponent3,beforeEnter: function beforeEnter(to, from, next) {
         console.log(to, from);
         next();
-    },},]`;
+    }}]`;
 
 test('Has component', t => t.is(hasComponent, true));
 test('Has child component', t => t.is(hasChildComponent, true));
@@ -159,5 +160,5 @@ const regularScript = {
 
 const regularScriptString = scriptToString(regularScript);
 test('Regular script components', (t) => {
-    t.is(regularScriptString.includes(`{component: "component",components: {prop0: "prop0",prop1: "prop1",prop2: "prop2",},}`), true);
+    t.is(regularScriptString.includes(`{component: "component",components: {prop0: "prop0",prop1: "prop1",prop2: "prop2"}}`), true);
 });

Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,8 @@ class HeadUtil {`
`52`	`52`	const href = metaItem.href ? `href="${metaItem.href}" ` : '';
`53`	`53`	const sizes = metaItem.sizes ? `sizes="${metaItem.sizes}" ` : '';
`54`	`54`	this.metaTags += `<link ${rel}${type}${href}${sizes}>\n`;
	`55`	`+ } else if (metaItem.srcContents) {`
	`56`	+ this.metaTags += `${metaItem.srcContents}\n`;
`55`	`57`	`}`
`56`	`58`	`}`
`57`	`59`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ const options = {`
`27`	`27`	`content: 'Page Title'`
`28`	`28`	`},`
`29`	`29`	`{`
`30`		`- script: 'https://unpkg.com/vue@2.4.2/dist/vue.js'`
	`30`	`+ script: 'https://unpkg.com/vue@2.4.4/dist/vue.js'`
`31`	`31`	`}, {`
`32`	`32`	`name: 'viewport',`
`33`	`33`	`content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ const vueOptions = {`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	const exampleHead = `<head>\n<title>Page Title</title>\n<style>.red{color:#9acd32}.pink{color:pink;text-decoration:underline}.test{color:#00f}</style></head>`;
`24`		-const exampleScript = `<script>(function(){"use strict";var t=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{}},components:{inner:{data:function(){return{}},template:"<div><p class=\\"pink\\">Inner Text</p></div>"}},styles:".pink{color:pink;text-decoration:underline}",template:"<div><inner></inner><h2 class=\\"test\\">Uuid: {{uuid ? uuid : 'no uuid'}}</h2></div>"},uuid2:{props:["uuid2"],data:function(){return{}},template:"<div><h3 class=\\"red\\">Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3></div>"}},styles:".pink{color:pink;text-decoration:underline}.test{color:#00f}.red{color:#9acd32}",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=t):(this.app=t())}).call(this),app.$mount('#app')</script>`;
	`24`	+const exampleScript = `<script>(function(){"use strict";var t=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:{required:!0,default:"missing"}},data:function(){return{}},components:{inner:{data:function(){return{}},template:"<div><p class=\\"pink\\">Inner Text</p></div>"}},styles:".pink{color:pink;text-decoration:underline}",template:"<div><inner></inner><h2 class=\\"test\\">Uuid: {{uuid ? uuid : 'no uuid'}}</h2></div>"},uuid2:{props:["uuid2"],data:function(){return{}},template:"<div><h3 class=\\"red\\">Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3></div>"}},styles:".pink{color:pink;text-decoration:underline}.test{color:#00f}.red{color:#9acd32}",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=t):(this.app=t())}).call(this),app.$mount('#app')</script>`;
`25`	`25`
`26`	`26`	`test('renders App object', t => {`
`27`	`27`	`const renderer = new ExpressVueRenderer(options);`