Files
chatwoot/app/javascript/packs/widget.js
Fayaz Ahmed b474929f5e chore: Replace eventBus with mitt.js [CW-3275] (#9539)
# Replace the deprecated `eventBus` with mitt.js

## Description

Since eventBus and it's respective methods are deprecated and removed
from all future releases of vue, this was blocking us from migrating.
This PR replaces eventBus with
[mitt](https://github.com/developit/mitt). I have created a wrapper
mitt.js to simulate the same old event names so it's backwards
compatible, without making a lot of changes.


Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

1. Made sure all the places we're listening to bus events are working as
expected.
2. Respective specsf or the events from mitt.


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules
2024-05-31 15:50:36 +05:30

66 lines
1.7 KiB
JavaScript

import Vue from 'vue';
import Vuelidate from 'vuelidate';
import VueI18n from 'vue-i18n';
import VueDOMPurifyHTML from 'vue-dompurify-html';
import VueFormulate from '@braid/vue-formulate';
import store from '../widget/store';
import App from '../widget/App.vue';
import ActionCableConnector from '../widget/helpers/actionCable';
import i18n from '../widget/i18n';
import {
startsWithPlus,
isPhoneNumberValidWithDialCode,
} from 'shared/helpers/Validators';
import router from '../widget/router';
import { directive as onClickaway } from 'vue-clickaway';
import { emitter } from 'shared/helpers/mitt';
import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
const PhoneInput = () => import('../widget/components/Form/PhoneInput');
Vue.use(VueI18n);
Vue.use(Vuelidate);
Vue.use(VueDOMPurifyHTML, domPurifyConfig);
Vue.directive('on-clickaway', onClickaway);
const i18nConfig = new VueI18n({
locale: 'en',
messages: i18n,
});
Vue.use(VueFormulate, {
library: {
phoneInput: {
classification: 'number',
component: PhoneInput,
slotProps: {
component: ['placeholder', 'hasErrorInPhoneInput'],
},
},
},
rules: {
startsWithPlus: ({ value }) => startsWithPlus(value),
isValidPhoneNumber: ({ value }) => isPhoneNumberValidWithDialCode(value),
},
classes: {
outer: 'mb-2 wrapper',
error: 'text-red-400 mt-2 text-xs leading-3 font-medium',
},
});
// Event Bus
Vue.prototype.$emitter = emitter;
Vue.config.productionTip = false;
window.onload = () => {
window.WOOT_WIDGET = new Vue({
router,
store,
i18n: i18nConfig,
render: h => h(App),
}).$mount('#app');
window.actionCable = new ActionCableConnector(
window.WOOT_WIDGET,
window.chatwootPubsubToken
);
};