Improve documentation and demo

Make sure socket io is imported correctly for browser based builds
Cleanups

demo/App.vue → docs/.vuepress/components/Demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="bg-gray-100 min-h-screen px-20 py-8">
+  <div id="app" class="min-h-screen py-8">
     <div class="flex mb-3 w-full items-end">
       <div class="flex-1">
         <label>Monitor Code</label>
@@ -32,53 +32,61 @@
 </template>
 
 <script>
-import EventsSdk from '../src/index'
-export default {
-  name: 'app',
-  data() {
-    return {
-      events: [],
-      monitorCode: 'FWsqFkPDsJuuh54YU0VLCvTu5EIrplkrUFVQ7yMiXh7U52hfiNOYanNINtekWBb6X06C3LQR7jfgCCWGAbKKCdBJAeQFIWO3DCCl',
-      error: ''
-    }
-  },
-  methods: {
-    async login() {
-      this.events = []
-      this.error = ''
-      try {
-        let sdk = new EventsSdk({
-          token: this.monitorCode
-        })
-        await sdk.login()
-        sdk.on('*', data => {
-          this.events.unshift({
-            timestamp: new Date(),
-            ...data
-          })
-        })
-      } catch (e) {
-        this.error = e
+  import Vue from 'vue';
+  import EventsSdk from '../../../src';
+  import TreeView from 'vue-json-tree-view';
+
+  Vue.use(TreeView);
+  export default {
+    name: 'app',
+    data() {
+      return {
+        events: [],
+        monitorCode: 'FWsqFkPDsJuuh54YU0VLCvTu5EIrplkrUFVQ7yMiXh7U52hfiNOYanNINtekWBb6X06C3LQR7jfgCCWGAbKKCdBJAeQFIWO3DCCl',
+        error: ''
+      };
+    },
+    methods: {
+      async login() {
+        this.events = [];
+        this.error = '';
+        try {
+          let sdk = new EventsSdk({
+            token: this.monitorCode
+          });
+          await sdk.login();
+          sdk.on('*', data => {
+            this.events.unshift({
+              timestamp: new Date(),
+              ...data
+            });
+          });
+        } catch (e) {
+          this.error = e;
+        }
       }
+    },
+    async mounted() {
+      this.login();
     }
-  },
-  async mounted() {
-    this.login()
-  }
-};
+  };
 </script>
 
 <style>
   .list-enter-active, .list-leave-active {
     transition: all .4s;
   }
+
   .list-leave-active {
     position: absolute;
   }
-  .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+
+  .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */
+  {
     opacity: 0;
     transform: translateX(-20px);
   }
+
   .list-move {
     transition: transform .3s;
   }

docs/.vuepress/config.js

@@ -9,6 +9,9 @@ module.exports = {
       description: 'VoicenterEventsSdk for Vue.js'
     }
   },
+  head: [
+    ['link', { rel: 'stylesheet', href: 'https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css'}]
+  ],
   themeConfig: {
     repo: '/voicenter/VoicecenterEventsSDK',
     docsDir: 'docs',
@@ -24,6 +27,7 @@ module.exports = {
         sidebar: [
           '/installation.md',
           '/started.md',
+          '/demo.md'
         ]
       }
     }

docs/demo.md

@@ -0,0 +1,3 @@
+# Demo
+
+<Demo></Demo>

package.json

@@ -2,18 +2,17 @@
   "name": "voicenter-events-sdk",
   "version": "0.1.0",
   "scripts": {
-    "serve": "vue-cli-service serve ./demo/main.js",
-    "build": "vue-cli-service build --target lib --name voicenter-events-sdk src/index.js",
-    "build:demo": "vue-cli-service build ./demo/main.js",
+    "serve": "npm run docs",
+    "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "docs": "npm run docs:serve",
-    "docs:build": "vue-cli-service docs --mode build",
-    "docs:serve": "vue-cli-service docs --mode serve",
+    "docs": "vue-cli-service docs --mode serve",
+    "build:docs": "vue-cli-service docs --mode build",
     "prepublish": "vue-cli-service lint && vue-cli-service docs --mode build && vue-cli-service build",
-    "start": "vue-cli-service serve"
+    "start": "npm run docs"
   },
   "dependencies": {
-    "core-js": "^2.6.5"
+    "core-js": "^2.6.5",
+    "socket.io-client": "1.3.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",
@@ -22,12 +21,14 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "socket.io-client": "1.3.6",
     "vue": "^2.6.10",
     "vue-cli-plugin-p11n": "^0.3.0",
     "vue-json-tree-view": "^2.1.4",
     "vue-template-compiler": "^2.6.10"
   },
+  "peerDependencies": {
+    "socket.io-client": "1.3.6"
+  },
   "files": [
     "dist/voicenter-events-sdk.common.js",
     "dist/voicenter-events-sdk.umd.min.js",

src/sdk.js

@@ -1,4 +1,4 @@
-import io from 'socket.io-client'
+import io from 'socket.io-client/socket.io'
 import eventTypes from './eventTypes'
 const defaultOptions = {
   url: 'https://monitor5.voicenter.co.il/',

vue.config.js

@@ -1,13 +1,4 @@
-let externals = {
-  'socket.io-client': {
-    commonjs: 'socket.io-client',
-    commonjs2: 'socket.io-client',
-    root: 'io'
-  }
-}
-let isProd = process.env.NODE_ENV === 'production'
 module.exports = {
   configureWebpack:  {
-    externals: isProd ? externals : {}
   }
 }