From 0868a9af70e0c8abf50b50bd8cc3f90eff912ea6 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Wed, 14 May 2025 14:05:58 +0530 Subject: [PATCH] refactor: use vue --- app/javascript/entrypoints/ui.js | 34 ++++++++++--------------------- app/javascript/ui/MessageList.vue | 3 ++- public/test-components.html | 3 ++- 3 files changed, 15 insertions(+), 25 deletions(-) diff --git a/app/javascript/entrypoints/ui.js b/app/javascript/entrypoints/ui.js index 2b7cc8f4e..623f83bd6 100644 --- a/app/javascript/entrypoints/ui.js +++ b/app/javascript/entrypoints/ui.js @@ -1,10 +1,9 @@ -import { defineCustomElement } from 'vue'; +import { createApp } from 'vue'; import '../dashboard/assets/scss/app.scss'; import 'vue-multiselect/dist/vue-multiselect.css'; import 'floating-vue/dist/style.css'; -// Import Tailwind styles - we'll use these in the shadow DOM -import tailwindStyles from '../dashboard/assets/scss/_woot.scss?inline'; +// import tailwindStyles from '../dashboard/assets/scss/_woot.scss?inline'; import VueDOMPurifyHTML from 'vue-dompurify-html'; import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer.js'; @@ -18,7 +17,7 @@ import vueActionCable from '../dashboard/helper/actionCable'; import MessageList from '../ui/MessageList.vue'; import i18nMessages from '../dashboard/i18n'; -import { createI18n, I18nInjectionKey } from 'vue-i18n'; +import { createI18n } from 'vue-i18n'; const i18n = createI18n({ legacy: false, @@ -29,28 +28,17 @@ const i18n = createI18n({ commonHelpers(); // eslint-disable-next-line no-underscore-dangle window.__CHATWOOT_STORE__ = store; - window.WootConstants = constants; window.axios = createAxios(axios); store.dispatch('setUser').then(() => { - const ceOptions = { - configureApp(app) { - app.use(store); - app.use(i18n); - app.use(VueDOMPurifyHTML, domPurifyConfig); - // eslint-disable-next-line no-underscore-dangle - vueActionCable.init(store, window.__PUBSUB_TOKEN__); - // I18n has to be injected inside that can be picked - // up by the compononent, the API stays the same, just use `useI18n` - // https://vue-i18n.intlify.dev/guide/advanced/wc - // Adding this link for my goldfish brain - app.provide(I18nInjectionKey, i18n); - }, - // Include tailwind styles in the shadow DOM of each custom element - styles: [tailwindStyles], - }; + const app = createApp(MessageList); - const messageListElement = defineCustomElement(MessageList, ceOptions); - customElements.define('woot-message-list', messageListElement); + app.use(store); + app.use(i18n); + app.use(VueDOMPurifyHTML, domPurifyConfig); + // eslint-disable-next-line no-underscore-dangle + vueActionCable.init(store, window.__PUBSUB_TOKEN__); + + app.mount('#app'); }); diff --git a/app/javascript/ui/MessageList.vue b/app/javascript/ui/MessageList.vue index f404037ef..d61726e91 100644 --- a/app/javascript/ui/MessageList.vue +++ b/app/javascript/ui/MessageList.vue @@ -9,7 +9,8 @@ import { useInfiniteScroll, useThrottleFn } from '@vueuse/core'; const props = defineProps({ conversationId: { type: Number, - required: true, + // eslint-disable-next-line no-underscore-dangle + default: window.__WOOT_CONVERSATION_ID__, }, }); diff --git a/public/test-components.html b/public/test-components.html index 4ec5327b9..e1f9be9ec 100644 --- a/public/test-components.html +++ b/public/test-components.html @@ -12,10 +12,11 @@ window.__WOOT_ACCESS_TOKEN__ = 'token'; window.__PUBSUB_TOKEN__ = 'token'; window.__WEBSOCKET_URL__ = 'ws://localhost:3000'; + window.__WOOT_CONVERSATION_ID__ = 5833; - +