feat: added typescript

.gitignore

@@ -12,8 +12,8 @@ node_modules
 package-lock.json
 
 # # Generated output
-# dist
-# dist-ssr
+dist
+dist-ssr
 
 # Local files
 *.local

README.md

@@ -110,24 +110,35 @@ export default {
 
 ## API
 
-### useEventListener
+### Methods
+
+#### useEventListener
 
-A function to listen for a custom event.
+Emits an event with the given name and data.
 
 | Param     | Type     | Nullable | Desc                                            |
 | --------- | -------- | -------- | ----------------------------------------------- |
 | eventName | string   | ✗  | The name of the event to listen for             |
 | callback  | Function | ✗  | The function to call when the event is emitted. |
 
-### useEventEmit
+#### useEventEmit
 
-A function to emit a custom event.
+Registers event listeners for Vue 3 using lifecycle hooks.
 
 | Param     | Type   | Nullable | Desc                                    |
 | --------- | ------ | -------- | --------------------------------------- |
 | eventName | string | ✗  | The name of the event to emit.          |
 | data      | any    | ✗  | The data to pass to the event callback. |
 
+### Types
+
+These types can be imported through `mitt-vue/types`
+
+```ts
+export type EventMap = Record<EventType, unknown>;
+export type EventCallback = (...args: any[]) => void;
+```
+
 ## Contribution
 
 Contributions are welcome! Please open an issue or submit a pull request on GitHub.

package.json

@@ -1,17 +1,20 @@
 {
   "name": "mitt-vue",
   "private": false,
-  "version": "1.1.1",
+  "version": "2.0.1",
   "description": "Lightweight utility for integrating mitt with Vue 2 and Vue 3",
   "license": "MIT",
   "type": "module",
-  "main": "./dist/mitt-vue.umd.js",
-  "module": "./dist/mitt-vue.es.js",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/mitt-vue.es.js",
-      "require": "./dist/mitt-vue.umd.js"
-    }
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./types": "./dist/types.d.ts"
   },
   "repository": {
     "type": "git",
@@ -49,7 +52,9 @@
   "author": "seven rings (https://twitter.com/svnrnns)",
   "scripts": {
     "dev": "vite build --watch",
-    "build": "vite build",
+    "build": "vite build && tsc",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -58,6 +63,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "4.5.2",
+    "typescript": "^5.7.2",
     "vite": "^5.2.11"
   },
   "optionalDependencies": {

src/emitter.ts

@@ -0,0 +1,17 @@
+import mitt, { Emitter } from 'mitt';
+import { EventMap } from './types';
+
+const emitter: Emitter<EventMap> = mitt<EventMap>();
+export default emitter;
+
+/**
+ * Emits an event with the given name and data.
+ * @param eventName - The name of the event.
+ * @param data - The data to emit with the event.
+ */
+export function eventEmit<T extends keyof EventMap>(
+  eventName: T,
+  data?: EventMap[T]
+): void {
+  emitter.emit(eventName, data);
+}

src/index.js → src/index.ts

@@ -3,13 +3,15 @@ import { eventEmit } from './emitter';
 import { useEventListener as vue2UseEventListener } from './vue2';
 import { useEventListener as vue3UseEventListener } from './vue3';
 
-// Detect the version of Vue and choose the appropriate listener function.
+/**
+ * Detect the version of Vue and choose the appropriate listener function.
+ */
 const useEventListener =
   Vue.version && Vue.version.startsWith('3.')
     ? vue3UseEventListener
     : vue2UseEventListener;
 
-// Create an alias for eventEmit as useEventEmit
+// Create an alias for `eventEmit` as `useEventEmit`
 const useEventEmit = eventEmit;
 
 export { eventEmit, useEventEmit, useEventListener };

src/types.ts

@@ -0,0 +1,4 @@
+import { EventType } from 'mitt';
+
+export type EventMap = Record<EventType, unknown>;
+export type EventCallback = (...args: any[]) => void;

src/vue2.ts

@@ -0,0 +1,23 @@
+import emitter from './emitter';
+import { ComponentOptions } from 'vue';
+import { EventCallback } from './types';
+
+/**
+ * Provides Vue 2 mixins for registering event listeners.
+ * @param event - The event name to listen for.
+ * @param callback - The callback to invoke when the event is emitted.
+ * @returns A Vue mixin with `created` and `beforeDestroy` hooks.
+ */
+export function useEventListener(
+  event: string,
+  callback: EventCallback
+): ComponentOptions {
+  return {
+    created() {
+      emitter.on(event, callback.bind(this));
+    },
+    beforeDestroy() {
+      emitter.off(event, callback.bind(this));
+    },
+  };
+}

src/vue3.ts

@@ -0,0 +1,18 @@
+import emitter from './emitter';
+import { onMounted, onUnmounted } from 'vue';
+import { EventCallback } from './types';
+
+/**
+ * Registers event listeners for Vue 3 using lifecycle hooks.
+ * @param event - The event name to listen for.
+ * @param callback - The callback to invoke when the event is emitted.
+ */
+export function useEventListener(event: string, callback: EventCallback): void {
+  onMounted(() => {
+    emitter.on(event, callback);
+  });
+
+  onUnmounted(() => {
+    emitter.off(event, callback);
+  });
+}

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": ["esnext", "dom"],
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

vite.config.js → vite.config.ts

@@ -2,14 +2,12 @@ import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import { defineConfig } from 'vite';
 
-const packagename = 'mitt-vue';
-
 export default defineConfig({
   build: {
     lib: {
-      entry: path.resolve(__dirname, 'src/index.js'),
-      name: packagename,
-      fileName: (format) => `${packagename}.${format}.js`,
+      entry: path.resolve(__dirname, 'src/index.ts'), // Updated to TS entry file
+      name: 'mitt-vue', // Use a static string for the package name
+      fileName: (format) => `index.${format}.js`, // Keep consistent naming
     },
     rollupOptions: {
       external: ['vue'],