Merge pull request #77 from express-vue/feature/move_example

moves example folder into tests

Author: danielcherubini

package.json

@@ -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",

tests/example/app.js

@@ -0,0 +1,75 @@
+// @flow
+const path = require('path');
+const express = require('express');
+const uuidv4 = require('uuid/v4');
+
+const expressVueRenderer = require('../lib');
+const expressVue = require('./expressVue');
+
+var exampleMixin = {
+    methods: {
+        hello: function () {
+            console.log('Hello');
+        }
+    }
+};
+
+const options = {
+    rootPath: path.join(__dirname, 'vueFiles'),
+    vue: {
+        head: {
+            meta: [{
+                    property: 'og:title',
+                    content: 'Page Title'
+                },
+                {
+                    name: 'twitter:title',
+                    content: 'Page Title'
+                },
+                {
+                    script: 'https://unpkg.com/vue@2.4.2/dist/vue.js'
+                }, {
+                    name: 'viewport',
+                    content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
+                }
+            ]
+        }
+    },
+    data: {
+        thing: true
+    }
+};
+
+
+renderer = expressVue.init(options);
+
+const app = express();
+app.use(express.static('./dist'));
+
+app.use(renderer);
+
+app.get('/', (req, res) => {
+    const data = {
+        title: 'Express Vue',
+        message: 'Hello world',
+        uuid: uuidv4(),
+        uuid2: uuidv4()
+    };
+    const vueOptions = {
+        head: {
+            title: 'Page Title',
+            meta: [
+                {
+                    property: 'og:title2',
+                    content: 'Page Title2'
+                }
+            ]
+        }
+    }
+    res.renderVue('main.vue', data, vueOptions)
+});
+
+app.listen(3000);
+
+console.log('express example start in 127.0.0.1:3000');
+module.exports = app;

tests/example/components/inner.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <p>Inner Text</p>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function () {
+        return {}
+    }
+}
+</script>
+
+<style lang="css">
+</style>

tests/example/components/uuid.vue

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

tests/example/components/uuid2.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <h3 class="red">Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['uuid2'],
+    data: function () {
+        return {}
+    }
+}
+</script>
+
+<style lang="css">
+.red {
+    color: yellowgreen;
+}
+</style>

tests/example/expressVue.js

@@ -0,0 +1,26 @@
+const ExpressVueRenderer = require('../lib');
+
+//This is the Middlewarein express-vue this wont be in the file
+function init(options) {
+    //Make new object
+    const Renderer = new ExpressVueRenderer(options);
+    //Middleware init
+    return (req, res, next) => {
+        //Res RenderVUE function
+        res.renderVue = (componentPath, data = {}, vueOptions = {}) => {
+            res.set('Content-Type', 'text/html');
+            Renderer.renderToStream(componentPath, data, vueOptions)
+                .then(stream => {
+                    stream.on('data', chunk => res.write(chunk));
+                    stream.on('end', () => res.end());
+                })
+                .catch(error => {
+                    console.error(error);
+                    res.send(error);
+                });
+        };
+        return next();
+    };
+}
+
+module.exports.init = init;

tests/example/mixins/exampleMixin.js

@@ -0,0 +1,10 @@
+const exampleMixin = {
+    methods: {
+        hello: function () {
+            console.log('Hello');
+        }
+    }
+};
+
+module.exports = exampleMixin;
+exports.default = exampleMixin;

tests/example/vueFiles/main.vue

@@ -0,0 +1,37 @@
+<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>
+</template>
+
+<script>
+import exampleMixin from '../mixins/exampleMixin';
+import uuid from '../components/uuid.vue';
+import uuid2 from '../components/uuid2.vue';
+export default {
+    mixins: [exampleMixin],
+    data: function () {
+        return {}
+    },
+    methods: {
+        test: function () {
+            console.error('test');
+        }
+    },
+    components: {
+        uuid: uuid,
+        uuid2: uuid2
+    }
+}
+</script>
+
+<style lang="css">
+
+</style>

tests/index.js

@@ -5,7 +5,7 @@ const Models = require('../src/models');
 const path = require('path');
 
 const options = {
-    rootPath: path.join(__dirname, '../example')
+    rootPath: path.join(__dirname, 'example/vueFiles')
 };
 
 const data = {

tests/parser/index.js

@@ -20,9 +20,9 @@ var cacheOptions = {
 var lruCache = LRU(cacheOptions);
 
 let types = new Types();
-const component = __dirname + '/../../example/components/uuid.vue';
+const component = path.join(__dirname, '../example/components/uuid.vue');
 const options = {
-    rootPath: path.join(__dirname, '../../example'),
+    rootPath: path.join(__dirname, '../example/vueFiles'),
     component: 'uuid.vue'
 };