Add socket to widget

Evertvdw · Apr 10, 2022 · 0873d73 · 0873d73
1 parent 7593d69
commit 0873d73
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 68 deletions.
diff --git a/packages/widget/index.html b/packages/widget/index.html
@@ -4,14 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue 3.2 + Web Component</title>
+    <title>Chat widget</title>
   </head>
 
   <body>
-    <h1>Vite + Vue 3 + Typescript + Web Component</h1>
-    <mytwo-buttons count-default="50">
-      <span slot="prefix">In index.html count-default is 50</span>
-    </mytwo-buttons>
+    <h1>👇This is the chat widget👇</h1>
+    <chat-widget />
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "pinia": "^2.0.13",
     "socket.io-client": "^4.4.1",
     "vue": "^3.2.25"
   },

diff --git a/packages/widget/src/App.vue b/packages/widget/src/App.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="chat-widget">
+    Chat-widget says hi!
+    <div>From the store: {{ mainStore.hello }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import io from 'socket.io-client';
+import { onUnmounted } from 'vue';
+import { useMainStore } from './stores/main';
+
+const URL = 'http://localhost:5000';
+const socket = io(URL);
+const mainStore = useMainStore();
+
+socket.on('connect_error', (err) => {
+  console.log('connection error', err);
+});
+
+socket.onAny((event, ...args) => {
+  console.log(event, args);
+});
+
+onUnmounted(() => {
+  socket.off('connect_error');
+});
+</script>
+
+<style lang="scss">
+.chat-widget {
+  background-color: red;
+  color: white;
+}
+</style>
diff --git a/packages/widget/src/components/MyTwoButtons.ce.vue b/packages/widget/src/components/MyTwoButtons.ce.vue
diff --git a/packages/widget/src/main.ts b/packages/widget/src/main.ts
@@ -1,6 +1,11 @@
-import { defineCustomElement } from 'vue';
-import myTwoButtons from './components/MyTwoButtons.ce.vue';
+import App from './App.vue';
+import { createPinia } from 'pinia';
+import { defineCustomElement, createApp } from 'vue';
 
-const myBtnsComponent = defineCustomElement(myTwoButtons);
+const app = createApp(App);
 
-customElements.define('mytwo-buttons', myBtnsComponent);
+app.use(createPinia());
+
+const chatWidget = defineCustomElement(App);
+
+customElements.define('chat-widget', chatWidget);
diff --git a/packages/widget/src/stores/main.ts b/packages/widget/src/stores/main.ts
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+
+export const useMainStore = defineStore('main', {
+  state: () => ({
+    hello: 'Hi there!',
+  }),
+  getters: {
+    //
+  },
+  actions: {
+    //
+  },
+});
diff --git a/packages/widget/vite.config.ts b/packages/widget/vite.config.ts
@@ -8,6 +8,7 @@ export default defineConfig({
   plugins: [vue({ customElement: true })],
   server: {
     port: 4000,
+    open: true,
   },
   build: {
     lib: {

diff --git a/yarn.lock b/yarn.lock
@@ -2982,7 +2982,7 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
-pinia@^2.0.11:
+pinia@^2.0.11, pinia@^2.0.13:
   version "2.0.13"
   resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.13.tgz#6656fc290dae120a9f0cb2f5c520df400d41b8c5"
   integrity sha512-B7rSqm1xNpwcPMnqns8/gVBfbbi7lWTByzS6aPZ4JOXSJD4Y531rZHDCoYWBwLyHY/8hWnXljgiXp6rRyrofcw==