Version 2.1.0. Adding new products, minor refactoring.

Author: winrid

dev/serve-collab-chat.ts

@@ -0,0 +1,23 @@
+import Vue, { VNode } from 'vue';
+import Dev from './serve-collab-chat.vue';
+import Router from 'vue-router';
+
+Vue.config.productionTip = false;
+
+const routes = [
+  {
+    path: '/demo',
+    component: Dev
+  }
+];
+
+const router = new Router({
+  routes
+});
+
+Vue.use(Router);
+
+new Vue({
+  router,
+  render: (h): VNode => h(Dev),
+}).$mount('#app');

dev/serve-collab-chat.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import Vue from 'vue';
+import {FastCommentsCollabChat} from '@/entry';
+
+export default Vue.extend({
+  name: 'ServeDev',
+  components: {
+    FastCommentsCollabChat
+  },
+  data() {
+    return {
+      fastCommentsCollabChatTarget: {}
+    }
+  },
+  mounted() {
+    this.fastCommentsCollabChatTarget = this.$refs.fastCommentsCollabChatTarget;
+  }
+});
+</script>
+
+<template>
+  <div id="app">
+    <div ref="fastCommentsCollabChatTarget">This is some text that will have collab chat enabled.</div>
+    <fast-comments-collab-chat v-bind:config="{tenantId: 'demo'}" :target-ref="fastCommentsCollabChatTarget"/>
+  </div>
+</template>

dev/serve-dark-mode-toggle.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
     import Vue from 'vue';
-    import FastCommentsVue from '@/fastcomments-vue.vue';
+    import FastComments from '@/fastcomments-vue.vue';
 
     export default Vue.extend({
         name: 'ServeDarkModeToggle',
         components: {
-            FastCommentsVue
+            FastComments
         },
         data() {
             return {
@@ -18,7 +18,7 @@
 <template>
     <div id="app" :class="isDarkMode ? 'dark' : 'light'">
         <button @click="isDarkMode = !isDarkMode">Toggle Dark Mode</button>
-        <fast-comments-vue v-bind:config="{tenantId: 'demo', hasDarkBackground: isDarkMode}"/>
+        <fast-comments v-bind:config="{tenantId: 'demo', hasDarkBackground: isDarkMode}"/>
     </div>
 </template>
 <style>
@@ -39,4 +39,4 @@
         background: #000;
         color: #fff;
     }
-</style>
+</style>

dev/serve-image-chat.ts

@@ -0,0 +1,23 @@
+import Vue, { VNode } from 'vue';
+import Dev from './serve-image-chat.vue';
+import Router from 'vue-router';
+
+Vue.config.productionTip = false;
+
+const routes = [
+  {
+    path: '/demo',
+    component: Dev
+  }
+];
+
+const router = new Router({
+  routes
+});
+
+Vue.use(Router);
+
+new Vue({
+  router,
+  render: (h): VNode => h(Dev),
+}).$mount('#app');

dev/serve-image-chat.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import Vue from 'vue';
+import {FastCommentsImageChat} from '@/entry';
+
+export default Vue.extend({
+  name: 'ServeDev',
+  components: {
+    FastCommentsImageChat
+  },
+  data() {
+    return {
+      fastCommentsImageChatTarget: {}
+    }
+  },
+  mounted() {
+    this.fastCommentsImageChatTarget = this.$refs.fastCommentsImageChatTarget;
+  }
+});
+</script>
+
+<template>
+  <div id="app">
+    <img ref="fastCommentsImageChatTarget" src="https://fastcomments.com/images/image-chat-demo-1.jpg" alt="Demo Image"/>
+    <fast-comments-image-chat v-bind:config="{tenantId: 'demo'}" :target-ref="fastCommentsImageChatTarget" />
+  </div>
+</template>

dev/serve-live-chat.ts

@@ -0,0 +1,23 @@
+import Vue, { VNode } from 'vue';
+import Dev from './serve-live-chat.vue';
+import Router from 'vue-router';
+
+Vue.config.productionTip = false;
+
+const routes = [
+  {
+    path: '/demo',
+    component: Dev
+  }
+];
+
+const router = new Router({
+  routes
+});
+
+Vue.use(Router);
+
+new Vue({
+  router,
+  render: (h): VNode => h(Dev),
+}).$mount('#app');

dev/serve-live-chat.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import Vue from 'vue';
+import {FastCommentsLiveChat} from '@/entry';
+
+export default Vue.extend({
+  name: 'ServeDev',
+  components: {
+    FastCommentsLiveChat
+  }
+});
+</script>
+
+<template>
+  <div id="app">
+    <fast-comments-live-chat v-bind:config="{tenantId: 'demo'}" />
+  </div>
+</template>

dev/serve-pagination.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
     import Vue from 'vue';
-    import FastCommentsVue from '@/fastcomments-vue.vue';
+    import FastComments from '@/fastcomments-vue.vue';
 
     export default Vue.extend({
         name: 'ServePagination',
         components: {
-            FastCommentsVue
+            FastComments
         },
         methods: {
           updatePage: function(pageNumber: number) {
@@ -32,6 +32,6 @@
         <div>Page: <span v-html="page"></span></div>
         <button @click="updatePage(page - 1)" style="margin-right: 5px">Prev</button>
         <button @click="updatePage(page + 1)">Next</button>
-        <fast-comments-vue v-bind:config="{tenantId: 'nYrnfYEv', urlId: url, url: url}"/>
+        <fast-comments v-bind:config="{tenantId: 'nYrnfYEv', urlId: url, url: url}"/>
     </div>
 </template>

dev/serve.vue

@@ -1,17 +1,17 @@
 <script lang="ts">
 import Vue from 'vue';
-import FastCommentsVue from '@/fastcomments-vue.vue';
+import FastComments from '@/entry';
 
 export default Vue.extend({
   name: 'ServeDev',
   components: {
-    FastCommentsVue
+    FastComments
   }
 });
 </script>
 
 <template>
   <div id="app">
-    <fast-comments-vue v-bind:config="{tenantId: 'demo'}" />
+    <fast-comments v-bind:config="{tenantId: 'demo'}" />
   </div>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fastcomments-vue",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "author": "winrid",
   "license": "MIT",
   "repository": "fastcomments/fastcomments-vue",
@@ -19,6 +19,9 @@
     "serve": "vue-cli-service serve dev/serve.ts",
     "serve-toggle-dark-mode": "vue-cli-service serve dev/serve-dark-mode-toggle.ts",
     "serve-pagination": "vue-cli-service serve dev/serve-pagination.ts",
+    "serve-collab-chat": "vue-cli-service serve dev/serve-collab-chat.ts",
+    "serve-image-chat": "vue-cli-service serve dev/serve-image-chat.ts",
+    "serve-live-chat": "vue-cli-service serve dev/serve-live-chat.ts",
     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"