[WIP] address PR comments

packages/notification/index.ts

@@ -4,5 +4,4 @@ import Notify from './src/notify'
 export default (app: App): void => {
   app.component(Notification.name, Notification)
   app.config.globalProperties.$notify = Notify
-  console.log(app.config.globalProperties)
 }

packages/notification/src/index.vue

@@ -80,35 +80,28 @@ export default defineComponent({
       ...props,
     })
 
-    const typeClass = computed(() => {
-      const { type } = data
+    data.typeClass = computed(() => {
+      const type = data.type
       return type && TypeMap[type] ? `el-icon-${TypeMap[type]}` : ''
     })
 
-    const horizontalClass = computed(() => {
-      const { position } = data
-      return position.indexOf('right') > 1 ? 'right' : 'left'
+    data.horizontalClass = computed(() => {
+      return data.position.indexOf('right') > 1 ? 'right' : 'left'
     })
 
-    const verticalProperty = computed(() => {
-      const { position } = data
-      return position.startsWith('top') ? 'top' : 'bottom'
+    data.verticalProperty = computed(() => {
+      return data.position.startsWith('top') ? 'top' : 'bottom'
     })
 
-    const positionStyle = ref({
-      [verticalProperty.value]: props.offset,
+    data.positionStyle = ref({
+      [data.verticalProperty]: props.offset,
     })
 
-    const visible = ref(true)
+    console.log(data.positionStyle)
 
-    return {
-      ...data,
-      visible,
-      typeClass,
-      horizontalClass,
-      verticalProperty,
-      positionStyle,
-    }
+    data.visible = ref(true)
+
+    return data
   },
   watch: {
     closed(newVal: boolean) {
@@ -134,7 +127,7 @@ export default defineComponent({
     // When using notification programmably, this is line of code is critical
     // to obtain the public component instance
     if (typeof this._init === 'function') {
-      this._init(this._idx, this)
+      // this._init(this._idx, this)
     }
     on(document, 'keydown', this.keydown)
   },
@@ -144,7 +137,6 @@ export default defineComponent({
   methods: {
     destroyElement() {
       off(this.$el, 'transitionend', this.destroyElement)
-      this.$destroy(true)
       this.$el.parentNode.removeChild(this.$el)
     },
     // start counting down to destroy notification instance

packages/notification/src/notification.constants.ts

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance, VNode } from 'vue'
+import type { VNode } from 'vue'
 
 export interface INotification<P = (options: INotificationOptions) => void> {
   (options: INotificationOptions): void
@@ -25,12 +25,14 @@ export type INotificationOptions = {
   _init?: (idx: number, vm: NotificationVM) => void
 }
 
-export type NotificationVM = ComponentPublicInstance<INotificationOptions, unknown, { verticalProperty: string; }>
+export type NotificationVM = VNode
 
-export type NotificationQueue = Array<{
-  vm: Nullable<NotificationVM>
-  container: HTMLElement
-}>
+type NotificationQueueItem = {
+  vm: NotificationVM
+  $el: HTMLElement
+}
+
+export type NotificationQueue = Array<NotificationQueueItem>
 
 
 export const defaultProps = {

packages/notification/src/notify.ts

@@ -1,16 +1,16 @@
-import { createApp, h, reactive } from 'vue'
+import { reactive, createVNode, render } from 'vue'
 import NotificationConstructor from './index.vue'
 import type { INotificationOptions, INotification, NotificationQueue, NotificationVM } from './notification.constants'
 import isServer from '../../utils/isServer'
 import PopupManager from '../../utils/popup-manager'
 import { isVNode } from '../../utils/util'
 
-const NotificationRenderer = (props: Record<string, unknown>) => {
-  if (isVNode(props.message)) {
-    return h(NotificationConstructor, props, { default: () => h(props.message) })
-  }
-  return h(NotificationConstructor, props)
-}
+// const NotificationRenderer = (props: Record<string, unknown>) => {
+//   if (isVNode(props.message)) {
+//     return h(NotificationConstructor, props, { default: () => h(props.message) })
+//   }
+//   return h(NotificationConstructor, props)
+// }
 
 let vm: NotificationVM
 const notifications: NotificationQueue = []
@@ -23,6 +23,17 @@ const Notification: INotification = function(options: INotificationOptions): Not
   options.onClose = function() {
     close(id, userOnClose)
   }
+
+  const position = options.position || 'top-right'
+
+  let verticalOffset = options.offset || 0
+  notifications
+    .filter(({ vm }) => vm.component.props.position === position)
+    .forEach(({ vm }) => {
+      verticalOffset += (vm.el.offsetHeight || 0) + 16
+    })
+  verticalOffset += 16
+
   const defaultOptions: INotificationOptions = {
     dangerouslyUseHTMLString: false,
     duration: 4500,
@@ -30,37 +41,29 @@ const Notification: INotification = function(options: INotificationOptions): Not
     showClose: true,
     offset: 0,
     _idx: notifications.length,
-    _init: function(idx: number, vm: NotificationVM): void {
-      obtainInstance(idx, vm)
-      let verticalOffset = options.offset || 0
-      notifications
-        .filter(item => item.vm.$props.position === position)
-        .forEach(({ vm }) => {
-          verticalOffset += (vm.$el.offsetHeight || 0) + 16
-        })
-      verticalOffset += 16
-      this.offset = verticalOffset
-    },
+    // _init: function(idx: number, vm: NotificationVM): void {
+    //   obtainInstance(idx, vm)
+
+    // },
   }
   options = {
     ...defaultOptions,
     ...options,
+    offset: verticalOffset,
     id,
   }
 
   options = reactive(options)
 
-  const position = options.position || 'top-right'
-
   const container = document.createElement('div')
+
   container.className = `container_${id}`
   container.style.zIndex = String(PopupManager.nextZIndex())
-  notifications.push({ vm: null, container })
-  vm = createApp(NotificationRenderer, { ...options }).mount(
-    container,
-  ) as NotificationVM
-
-  document.body.appendChild(container)
+  // notifications.push({ vm: null, container })
+  vm = createVNode(NotificationConstructor, options)
+  render(vm, container)
+  notifications.push({ vm, $el: container })
+  document.body.appendChild(container.firstElementChild)
 
   return vm
 };
@@ -81,31 +84,30 @@ export function close(
   id: string,
   userOnClose?: (vm: NotificationVM) => void,
 ): void {
-  const idx = notifications.findIndex(i => {
-    const { id: _id } = i.vm.$props
+  const idx = notifications.findIndex( ({ vm }) => {
+    const { id: _id } = vm.component.props
     return id === _id
   })
   if (idx === -1) {
     return
   }
 
-  const notification = notifications[idx]
-  const { vm } = notification
+  const { vm, $el } = notifications[idx]
   if (!vm) return
   userOnClose?.(vm)
-  const removedHeight = vm.$el.offsetHeight
-  document.body.removeChild(notification.container)
-  notification.container = null
+  const removedHeight = vm.el.offsetHeight
+  // document.body.removeChild(notification.container)
+  render(null, $el)
 
   notifications.splice(idx, 1)
   const len = notifications.length
   if (len < 1) return
-  const position = vm.$props.position
+  const position = vm.component.props.position
   for (let i = idx; i < len; i++) {
-    if (notifications[i].vm.$props.position === position) {
-      notifications[i].vm.$el.style[vm.verticalProperty] =
+    if (notifications[i].vm.component.props.position === position) {
+      notifications[i].vm.el.style[vm.component.ctx.verticalProperty] =
         parseInt(
-          notifications[i].vm.$el.style[vm.verticalProperty],
+          notifications[i].vm.el.style[vm.component.ctx.verticalProperty],
           10,
         ) -
         removedHeight -
@@ -117,12 +119,12 @@ export function close(
 
 export function closeAll(): void {
   for (let i = notifications.length - 1; i >= 0; i--) {
-    notifications[i].vm.onClose()
+    notifications[i].vm.component.ctx.onClose()
   }
 }
 
-function obtainInstance(idx: number, vm: NotificationVM): void {
-  notifications[idx].vm = vm
-}
+// function obtainInstance(idx: number, vm: NotificationVM): void {
+//   notifications[idx] = vm
+// }
 
 export default Notification