I'm currently in the process of developing a notification system, and while it's partially functional, there are some issues. Here is the Composition function I am using:
const data = reactive({
notifications: []
});
let notificationKey = 0;
export const useNotification = () => {
const visibleNotifications = computed(() => {
return data.notifications.slice().reverse();
});
const add = (notification: INotification) => {
notification.key = notificationKey++;
notification.type = notification.type ?? 'success';
notification.icon = iconObject[notification.type];
notification.iconColor = iconColorObject[notification.type];
data.notifications.push(notification);
notificationTimer[notification.key] = new Timer(() => {
remove(notification.key);
}, notificationTimeout);
};
const remove = (notificationKey: number) => {
const notificationIndex = data.notifications.findIndex(notification => notification?.key === notificationKey);
if (notificationTimer[notificationKey] !== undefined) {
notificationTimer[notificationKey].stop();
}
if (notificationIndex > -1) {
data.notifications.splice(notificationIndex, 1);
}
};
const click = (notification: INotification) => {
/// ... click code
};
return {
visibleNotifications,
add,
remove,
click
};
};
The functionality described above is operational (albeit slightly simplified). Moving on to the entry points in Webpack, one being "auth", where the following code loads a Vue Component for displaying notifications
Promise.all([
import(/* webpackChunkName: "Vue"*/ 'vue'),
import(/* webpackChunkName: "@vue/composition-api"*/ '@vue/composition-api'),
import(/* webpackChunkName: "Notifications"*/'components/Notifications.vue')
]).then((
[
{ default: Vue },
{ default: VueCompositionAPI },
{ default: Notifications },
]) => {
Vue.use(VueCompositionAPI);
new Vue({
render: h => h(Notifications)
}).$mount('.notification-outer);
});
The mentioned setup works well when integrating the code below
import { useNotification } from 'modules/compositionFunctions/notifications';
useNotification().add({
title : 'Error',
message: 'This is an error notification',
type : 'error',
});
Once executed, the notification is displayed as intendedhttps://i.sstatic.net/8zMPg.png. All these actions occur within the "auth" entry point and involve TypeScript.
On the other hand, the second entry point in "editor" requires additional implementation within an existing JS file:
import(/* webpackChunkName: "useNotification"*/ 'modules/compositionFunctions/notifications').then(({ useNotification }) => {
useNotification().add({
title : 'Block Deleted',
message : 'The block has been deleted',
buttonText: 'Undo',
buttonFunction () {
undoDelete();
}
});
});
Although this code functions properly with all features from the useNotification function operating correctly, the changes are not reflected in the Vue component. While logging the reactive property showcases the expected behavior, the Vue component fails to acknowledge these alterations when triggered from the "editor" entry point.
Vue Component JS
import { useNotification } from 'modules/compositionFunctions/notifications';
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
name : 'Notifications',
setup () {
const { visibleNotifications, remove, click: notificationClick } = useNotification();
return {
visibleNotifications,
remove,
notificationClick,
};
},
watch: {
visibleNotifications: (v) => {
console.log(v);
}
}
});
If anyone can assist, please step forward. This situation is really testing my patience...
Thanks in advance