main 🧊 add create event emmiter

Author: debabin

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siberiacancode/reactuse",
-  "version": "0.2.15",
+  "version": "0.2.14",
   "description": "The ultimate collection of react hooks",
   "author": {
     "name": "SIBERIA CAN CODE 🧊",
@@ -76,7 +76,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "shx": "^0.4.0",
-    "vite": "^7.0.0",
+    "vite": "^7.0.2",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
   },

packages/core/src/bundle/helpers/createEventEmitter/createEventEmitter.js

@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from 'react';
+/**
+ * @name createEventEmitter
+ * @description - Creates a type-safe event emitter
+ * @category Helpers
+ *
+ * @template Events - The type of events and their data
+ * @returns {Events} - Object containing event emitter methods and hook
+ *
+ * @example
+ * const { instance, push, subscribe, unsubscribe, useSubscribe } = createEventEmitter<{ foo: number }>();
+ */
+export const createEventEmitter = () => {
+  const eventTarget = new EventTarget();
+  const push = (event, data) => eventTarget.dispatchEvent(new CustomEvent(event, { detail: data }));
+  const subscribe = (event, listener) => {
+    const callback = (event) => listener(event.detail);
+    eventTarget.addEventListener(event, callback);
+    return () => eventTarget.removeEventListener(event, callback);
+  };
+  const unsubscribe = (event, listener) => {
+    const callback = (event) => listener(event.detail);
+    eventTarget.removeEventListener(event, callback);
+  };
+  const useSubscribe = (event, listener) => {
+    const [data, setData] = useState(undefined);
+    const listenerRef = useRef(listener);
+    listenerRef.current = listener;
+    useEffect(() => {
+      const onSubscribe = (data) => {
+        setData(data);
+        listenerRef.current?.(data);
+      };
+      subscribe(event, onSubscribe);
+      return () => {
+        unsubscribe(event, onSubscribe);
+      };
+    }, [event]);
+    return data;
+  };
+  return {
+    instance: eventTarget,
+    push,
+    subscribe,
+    unsubscribe,
+    useSubscribe
+  };
+};

packages/core/src/bundle/helpers/createStore/createStore.js

@@ -5,7 +5,6 @@ import { useSyncExternalStore } from 'react';
  * @category Helpers
  *
  * @template Value - The type of the store state
- *
  * @param {StateCreator<Value>} createState - Function that initializes the store state
  * @returns {StoreApi<Value>} - Object containing store methods and hook for accessing state
  *

packages/core/src/bundle/helpers/index.js

@@ -1,3 +1,4 @@
 export * from './createContext/createContext';
+export * from './createEventEmitter/createEventEmitter';
 export * from './createReactiveContext/createReactiveContext';
 export * from './createStore/createStore';

packages/core/src/helpers/createEventEmitter/createEventEmitter.demo.tsx

@@ -0,0 +1,93 @@
+import { createEventEmitter, useField } from '@siberiacancode/reactuse';
+
+const DEFAULT_PROFILE = { name: 'John Doe', age: 30 };
+const profileEmitter = createEventEmitter<{
+  'profile:update': { name: string; age: number };
+}>();
+
+const NameFieldInfo = () => {
+  const profileEventData = profileEmitter.useSubscribe('profile:update');
+
+  return (
+    <div>
+      <strong>Name:</strong> <span>{profileEventData?.name ?? DEFAULT_PROFILE.name}</span>
+    </div>
+  );
+};
+
+const AgeFieldInfo = () => {
+  const profileEventData = profileEmitter.useSubscribe('profile:update');
+
+  return (
+    <div>
+      <strong>Age:</strong> <span>{profileEventData?.age ?? DEFAULT_PROFILE.age}</span>
+    </div>
+  );
+};
+
+const Demo = () => {
+  const nameField = useField({
+    initialValue: DEFAULT_PROFILE.name
+  });
+
+  const ageField = useField({
+    initialValue: DEFAULT_PROFILE.age
+  });
+
+  return (
+    <div className='rounded-lg p-4 shadow-md'>
+      <div className='mb-6'>
+        <h3 className='font-semibold'>Current Profile:</h3>
+        <NameFieldInfo />
+        <AgeFieldInfo />
+      </div>
+
+      <div className='mb-4'>
+        <div className='mb-2'>
+          <strong className='font-semibold'>Name:</strong>
+          <input
+            type='text'
+            {...nameField.register()}
+            onChange={(event) =>
+              profileEmitter.push('profile:update', {
+                name: event.target.value,
+                age: ageField.getValue() || DEFAULT_PROFILE.age
+              })
+            }
+          />
+          {nameField.error && <span className='ml-2 text-sm text-red-500'>{nameField.error}</span>}
+        </div>
+
+        <div className='mb-2'>
+          <strong className='font-semibold'>Age:</strong>
+          <input
+            type='number'
+            {...ageField.register()}
+            onChange={(event) =>
+              profileEmitter.push('profile:update', {
+                name: nameField.getValue() || DEFAULT_PROFILE.name,
+                age: +event.target.value
+              })
+            }
+          />
+          {ageField.error && <span className='ml-2 text-sm text-red-500'>{ageField.error}</span>}
+        </div>
+      </div>
+
+      <div className='flex gap-2'>
+        <button
+          className='rounded bg-gray-500 px-4 py-2 text-white hover:bg-gray-600'
+          onClick={() => {
+            nameField.reset();
+            ageField.reset();
+            profileEmitter.push('profile:update', DEFAULT_PROFILE);
+          }}
+        >
+          Reset Form
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Demo;

packages/core/src/helpers/createEventEmitter/createEventEmitter.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * @name createEventEmitter
+ * @description - Creates a type-safe event emitter
+ * @category Helpers
+ *
+ * @template Events - The type of events and their data
+ * @returns {Events} - Object containing event emitter methods and hook
+ *
+ * @example
+ * const { instance, push, subscribe, unsubscribe, useSubscribe } = createEventEmitter<{ foo: number }>();
+ */
+export const createEventEmitter = <Events extends Record<string, any> = Record<string, any>>() => {
+  const eventTarget = new EventTarget();
+
+  const push = <Event extends keyof Events>(event: Event, data: Events[Event]) =>
+    eventTarget.dispatchEvent(new CustomEvent(event as string, { detail: data }));
+
+  const subscribe = <Key extends keyof Events>(
+    event: Key,
+    listener: (data: Events[Key]) => void
+  ) => {
+    const callback = (event: Event) => listener((event as CustomEvent).detail);
+
+    eventTarget.addEventListener(event as string, callback);
+    return () => eventTarget.removeEventListener(event as string, callback);
+  };
+
+  const unsubscribe = <Key extends keyof Events>(
+    event: Key,
+    listener: (data: Events[Key]) => void
+  ) => {
+    const callback = (event: Event) => listener((event as CustomEvent).detail);
+    eventTarget.removeEventListener(event as string, callback);
+  };
+
+  const useSubscribe = <Event extends keyof Events>(
+    event: Event,
+    listener?: (data: Events[Event]) => void
+  ) => {
+    const [data, setData] = useState<Events[Event] | undefined>(undefined);
+    const listenerRef = useRef(listener);
+    listenerRef.current = listener;
+
+    useEffect(() => {
+      const onSubscribe = (data: Events[Event]) => {
+        setData(data);
+        listenerRef.current?.(data);
+      };
+      subscribe(event, onSubscribe);
+      return () => {
+        unsubscribe(event, onSubscribe);
+      };
+    }, [event]);
+
+    return data;
+  };
+
+  return {
+    instance: eventTarget,
+    push,
+    subscribe,
+    unsubscribe,
+    useSubscribe
+  };
+};

packages/core/src/helpers/createStore/createStore.ts

@@ -19,7 +19,6 @@ export interface StoreApi<Value> {
  * @category Helpers
  *
  * @template Value - The type of the store state
- *
  * @param {StateCreator<Value>} createState - Function that initializes the store state
  * @returns {StoreApi<Value>} - Object containing store methods and hook for accessing state
  *

packages/core/src/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from './createContext/createContext';
+export * from './createEventEmitter/createEventEmitter';
 export * from './createReactiveContext/createReactiveContext';
 export * from './createStore/createStore';

packages/docs/package.json

@@ -42,7 +42,7 @@
     "@types/react-dom": "^19.1.6",
     "clsx": "^2.1.1",
     "comment-parser": "^1.4.1",
-    "lucide-vue-next": "^0.523.0",
+    "lucide-vue-next": "^0.525.0",
     "md5": "^2.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",