build(vue): add rollup vue plugin

package.json

@@ -22,6 +22,7 @@
     "rollup": "^3.28.0",
     "rollup-plugin-dts": "^6.0.0",
     "rollup-plugin-typescript2": "^0.35.0",
+    "rollup-plugin-vue": "^6.0.0",
     "simple-git-hooks": "^2.9.0",
     "typescript": "^5.1.6",
     "vue-tsc": "^1.8.5"

packages/core/rollup.config.js

@@ -1,6 +1,6 @@
 const { resolve } = require('node:path')
 const { dts } = require('rollup-plugin-dts')
-
+const vue = require('rollup-plugin-vue')
 const typescript = require('rollup-plugin-typescript2')
 
 const { readJSONSync } = require('fs-extra')
@@ -25,6 +25,7 @@ module.exports = [
       typescript({
         clean: true,
       }),
+      vue({ css: true }),
     ],
     output: [
       /**
@@ -51,6 +52,7 @@ module.exports = [
       typescript({
         clean: true,
       }),
+      vue({ css: true }),
     ],
     output: [
       {
@@ -74,6 +76,7 @@ module.exports = [
       typescript({
         clean: true,
       }),
+      vue({ css: true }),
     ],
     output: [
       {
@@ -102,6 +105,6 @@ module.exports = [
       },
       entryFileNames: 'index.d.ts',
     }],
-    plugins: [dts()],
+    plugins: [typescript({ clean: true }), vue({ css: true }), dts()],
   },
 ]

packages/core/src/components/Noti.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useToggle } from '@vueuse/core'
+
+import type { NotiOptions } from '../types'
+
+export type NotificationList = (NotiOptions & { id: symbol })[]
+
+export interface NotiProps {
+  test: string
+}
+
+defineProps<NotiProps>()
+
+const [open] = useToggle(false)
+
+const notificationList = ref<NotificationList>([])
+</script>
+
+<template>
+  <div v-show="open" class="vue3-noti-group">
+    <div v-for="noti in notificationList" :key="noti.id" class="vue3-noti-group__item">
+      message
+    </div>
+  </div>
+</template>
+
+<!-- <style lang="css">
+.vue3-noti-group {
+  //
+}
+.vue3-noti-group__item {
+  //
+}
+</style> -->

packages/core/src/composables/useEventBus.ts

@@ -0,0 +1,10 @@
+import { useEventBus as _useEventBus } from '@vueuse/core'
+
+import type { EventBusKey } from '@vueuse/core'
+import type { NotiOptions } from '../types'
+
+export const BUS_KEY: EventBusKey<NotiOptions> = Symbol('busKey')
+
+export default function useEventBus() {
+  return _useEventBus(BUS_KEY)
+}

packages/core/src/main.ts

@@ -1,3 +1,4 @@
 export * from './plugins/noti'
 export * from './composables/useNoti'
 export * from './types'
+export { default as Noti } from './components/Noti.vue'

packages/core/tsconfig.json

@@ -17,7 +17,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "./vite-env.d.ts"],
   "exclude": [
     "node_modules"
   ]

packages/core/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

playground/src/App.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { useNoti } from '@vue3-noti/core'
+import { ref } from 'vue'
+import { Noti, useNoti } from '@vue3-noti/core'
 
 import HelloWorld from './components/HelloWorld.vue'
 
+const string = ref('')
+
 useNoti()
 </script>
 
@@ -16,6 +19,7 @@ useNoti()
     </a>
   </div>
   <HelloWorld msg="Vite + Vue" />
+  <Noti v-model="string" />
 </template>
 
 <style scoped>