Vuex (#8041)

* add vuex, cleanup client directory and create example components

* disale sample unit test

* disable import for non existing file

* correct regexp for unit tests, add simple test to avoid error, add babel-polyfill for Vuex

* add line wrongly removed, update regexp

.eslintignore

@@ -1,10 +1,9 @@
 # Compiled and vendored files
-common/dist/
-common/transpiled-babel/
 coverage/
 database_reports/
 website/build/
 website/transpiled-babel/
+website/common/transpiled-babel/
 dist/
 
 # Not linted

package.json

@@ -96,6 +96,8 @@
     "vinyl-source-stream": "^1.1.0",
     "vue": "^2.0.0-rc.6",
     "vue-router": "^2.0.0-rc.5",
+    "vuex": "^2.0.0-rc.5",
+    "vuex-router-sync": "^3.0.0",
     "winston": "^2.1.0",
     "xml2js": "^0.4.4"
   },
@@ -135,7 +137,6 @@
     "babel-core": "^6.0.0",
     "babel-eslint": "^6.0.0",
     "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
     "chai": "^3.4.0",
     "chai-as-promised": "^5.1.0",
     "chalk": "^1.1.3",

test/client/unit/index.js

@@ -1,7 +1,11 @@
+// TODO verify if it's needed, added because Vuex require Promise in the global scope
+// and babel-runtime doesn't affect external libraries
+require('babel-polyfill');
+
 // require all test files (files that ends with .spec.js)
 var testsContext = require.context('./specs', true, /\.spec$/);
 testsContext.keys().forEach(testsContext);
 
 // require all src files except main.js/ README.md / index.html for coverage.
-var srcContext = require.context('../../../website/client', true, /^\.\/(?!(main\.js|README\.md|index\.html)?$)/);
+var srcContext = require.context('../../../website/client', true, /^\.\/(?!(main(\.js)?)|(index(\.html)?)$)/);
-srcContext.keys().forEach(srcContext);
+srcContext.keys().forEach(srcContext);

test/client/unit/specs/Hello.spec.js

@@ -1,12 +1,16 @@
 import Vue from 'vue';
-import Hello from 'src/components/Hello';
+// import Hello from 'src/components/Hello';
 
 describe('Hello.vue', () => {
-  it('should render correct contents', () => {
+  xit('should render correct contents', () => {
     const vm = new Vue({
       el: document.createElement('div'),
       render: (h) => h(Hello),
     });
     expect(vm.$el.querySelector('.hello h1').textContent).to.equal('Hello Vue!');
   });
+
+  it('should make assertions', () => {
+    expect(true).to.equal(true);
+  });
 });

website/README.md

@@ -0,0 +1,3 @@
+`/website/client` contains the source files for the new client side that is being developed as part of the Habitica.com redesign.
+
+The old client side files can be found in `/website/client-old`, they are still used on Habitica.com while the redesign is in progress.

website/client/.babelrc

@@ -1,5 +1,4 @@
 {
   "presets": ["es2015"],
-  "plugins": ["transform-runtime"],
   "comments": false
 }

website/client/README.md

@@ -1,3 +0,0 @@
-This folder contains the source files for the new client side that is being developed.
-
-The old client side files can be found in /website/client-old, they are still used on Habitica.com while the redesign is in progress.

website/client/components/App.vue

@@ -1,64 +1,30 @@
 <template lang="pug">
 #app
-  img.logo(src='../assets/logo.png')
+  site-header
   ul
     li
       router-link(to='/') Home
     li
-      router-link(to='/sub') Sub
+      router-link(to='/page') Another Page
   router-view.view
-  p Welcome to your Vue.js app!
-  p
-    | To get a better understanding of how this boilerplate works, check out
-    | <a href="http://vuejs-templates.github.io/webpack" target="_blank">its documentation</a>.
-    | It is also recommended to go through the docs for
-    | <a href="http://webpack.github.io/" target="_blank">Webpack</a> and
-    | <a href="http://vuejs.github.io/vue-loader/" target="_blank">vue-loader</a>.
-    | If you have any issues with the setup, please file an issue at this boilerplate's
-    | <a href="https://github.com/vuejs-templates/webpack" target="_blank">repository</a>.
-  p
-    | You may also want to checkout
-    | <a href="https://github.com/vuejs/vue-router/" target="_blank">vue-router</a> for routing and
-    | <a href="https://github.com/vuejs/vuex/" target="_blank">vuex</a> for state management.
 </template>
 
 <script>
-import Hello from './Hello';
+import SiteHeader from './siteHeader';
 
 export default {
   components: {
-    Hello,
+    SiteHeader,
   },
 };
 </script>
 
 <style>
-html {
-  height: 100%;
-}
-
-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
 #app {
-  color: #2c3e50;
+  margin: 0 auto;
-  margin-top: -100px;
+  width: 80%;
-  max-width: 600px;
+  border-left : 1px solid;
-  font-family: Source Sans Pro, Helvetica, sans-serif;
+  border-right: 1px solid;
-  text-align: center;
+  padding: 20px;
-}
-
-#app a {
-  color: #42b983;
-  text-decoration: none;
-}
-
-.logo {
-  width: 100px;
-  height: 100px
 }
 </style>

website/client/components/Sub.vue

@@ -1,21 +0,0 @@
-<template lang="pug">
-.hello
-  h1 {{ msg }}
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      msg: 'Hello Sub Route!',
-    };
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1 {
-  color: #42b983;
-}
-</style>

website/client/components/app.vue

@@ -0,0 +1,30 @@
+<template lang="pug">
+#app
+  site-header
+  ul
+    li
+      router-link(to='/') Home
+    li
+      router-link(to='/page') Another Page
+  router-view.view
+</template>
+
+<script>
+import SiteHeader from './siteHeader';
+
+export default {
+  components: {
+    SiteHeader,
+  },
+};
+</script>
+
+<style>
+#app {
+  margin: 0 auto;
+  width: 80%;
+  border-left : 1px solid;
+  border-right: 1px solid;
+  padding: 20px;
+}
+</style>

website/client/components/home.vue

@@ -0,0 +1,13 @@
+<template lang="pug">
+p {{ msg }}
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'You\'re on the Home page!',
+    };
+  },
+};
+</script>

website/client/components/page.vue

@@ -0,0 +1,13 @@
+<template lang="pug">
+p {{ msg }}
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'You\'re on Another Page!',
+    };
+  },
+};
+</script>

website/client/components/siteHeader.vue

@@ -1,15 +1,14 @@
 <template lang="pug">
-.hello
+h1 {{ title }}
-  h1 {{ msg }}
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
-  data () {
+  computed: mapState([
-    return {
+    'title',
-      msg: 'Hello Vue!',
+  ]),
-    };
-  },
 };
 </script>
 

website/client/main.js

@@ -1,9 +1,19 @@
+// TODO verify if it's needed, added because Vuex require Promise in the global scope
+// and babel-runtime doesn't affect external libraries
+require('babel-polyfill');
+
 import Vue from 'vue';
-import App from './components/App';
+import VuexRouterSync from 'vuex-router-sync';
+import App from './components/app';
 import router from './router';
+import store from './vuex/store';
+
+// Sync Vuex and Router
+VuexRouterSync.sync(store, router);
 
 new Vue({ // eslint-disable-line no-new
   router,
+  store,
   el: '#app',
   render: h => h(App),
 });

website/client/router.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Hello from './components/Hello';
+import Home from './components/home';
-import Sub from './components/Sub';
+import Page from './components/page';
 
 Vue.use(VueRouter);
 
@@ -9,7 +9,7 @@ export default new VueRouter({
   mode: 'history',
   base: __dirname,
   routes: [
-    { path: '/', component: Hello },
+    { path: '/', component: Home },
-    { path: '/sub', component: Sub },
+    { path: '/page', component: Page },
   ],
 });

website/client/vuex/store.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+const state = {
+  title: 'Habitica',
+};
+
+export default new Vuex.Store({
+  state,
+});