chore: structure change

src/utils/mitt.ts

@@ -0,0 +1,4 @@
+import type { Emitter }  from 'mitt';
+import mitt from 'mitt';
+
+export const emitter: Emitter = mitt();

src/utils/useAttrs.ts

@@ -0,0 +1,39 @@
+import { getCurrentInstance, reactive, shallowRef, watchEffect } from 'vue'
+import type { Ref } from 'vue'
+interface Params {
+  excludeListeners?: boolean
+  excludeKeys?: string[]
+}
+
+const DEFAULT_EXCLUDE_KEYS = ['class', 'style']
+const LISTENER_PREFIX = /^on[A-Z]/
+
+export function entries<T>(obj: Recordable<T>): [string, T][] {
+  return Object.keys(obj).map((key: string) => [key, obj[key]])
+}
+
+export function useAttrs(params: Params = {}): Ref<Recordable> | {} {
+  const instance = getCurrentInstance()
+  if (!instance) return {}
+
+  const { excludeListeners = false, excludeKeys = [] } = params
+  const attrs = shallowRef({})
+  const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS)
+
+  // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
+  instance.attrs = reactive(instance.attrs)
+
+  watchEffect(() => {
+    const res = entries(instance.attrs).reduce((acm, [key, val]) => {
+      if (!allExcludeKeys.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))) {
+        acm[key] = val
+      }
+
+      return acm
+    }, {} as Recordable)
+
+    attrs.value = res
+  })
+
+  return attrs
+}