@kambing86/event-bus-ts - npm Package Compare versions

Comparing version 0.0.1 to 1.0.0

package.json

 {
   "name": "@kambing86/event-bus-ts",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "event bus for typescript and react",
@@ -30,3 +30,3 @@ "keywords": [
     "build:strict": "tsc --declaration --noImplicitAny && tsc --declaration -p tsconfig-module.json --noImplicitAny",
-    "clean": "del dist",
+    "clean": "rimraf dist",
     "prepublish": "npm run build",
@@ -40,16 +40,16 @@ "prerelease": "yarn build",
   "devDependencies": {
-    "@types/node": "^20.14.13",
-    "@types/react": "^18.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@types/node": "^20.16.5",
+    "@types/react": "^18.3.8",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/eslint-plugin-tslint": "^7.0.2",
-    "@typescript-eslint/parser": "^7.17.0",
-    "del-cli": "^3.0.0",
-    "eslint": "^8.57.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
     "standard-version": "^9.5.0",
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.2"
   },
@@ -60,3 +60,3 @@ "engines": {
   "email": "[e-mail]",
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "yarn@4.5.0",
   "peerDependencies": {
@@ -63,0 +63,0 @@ "react": "^18"

README.md

@@ -10,3 +10,3 @@ <div align="center">
 ```bash
-npm install --save-dev event-bus-ts
+npm install --save-dev @kambing86/event-bus-ts
 ```
@@ -16,13 +16,49 @@
 
-<!-- ```js
-import { setInterval, setTimeout, clearInterval, clearTimeout } from 'requestanimationframe-timer';
+1) add `@kambing86/event-bus-ts` by installing `npm install @kambing86/event-bus-ts`
+2) create a file for event bus, for eg. "src/util/eventBus.ts"
+```ts
+import { createEventBus, createUseEventBus } from '@kambing86/event-bus-ts';
 
-const id_1 = setTimeout((a) => console.log(a), 1000, '1000 ms timeout');
-const id_2 = setInterval((a) => console.log(a), 2000, '2000 ms interval');
-setTimeout(() => {
-  clearTimeout(id_1);
-  clearInterval(id_2);
-}, 10000);
-``` -->
+// string enum for Event
+export enum EventType {
+  ADD_TODO = 'addTodo',
+  REMOVE_TODO = 'removeTodo',
+}
 
+// or just const
+export const EventType = {
+  ADD_TODO: 'addTodo',
+  REMOVE_TODO: 'removeTodo',
+} as const;
+
+// define the payload data for Event
+export type EventDataMapping = {
+  [EventType.ADD_TODO]: { id: number; text: string };
+  [EventType.REMOVE_TODO]: number;
+};
+
+export const eventBus = createEventBus<EventDataMapping>();
+
+export const useEventBus = createUseEventBus<EventDataMapping>(eventBus);
+```
+3) then use it in React component
+```tsx
+function NewTodo() {
+  // ...
+  return <button onClick={() => eventBus.dispatch(EventType.ADD_TODO, newTodo)}>Add new</button>
+}
+
+function TodoList() {
+  const [todoList, setTodoList] = useState([]);
+
+  // ...
+
+  useEventBus(EventType.ADD_TODO, (newTodo) =>
+    setTodoList((prev) => [...prev, newTodo]),
+  );
+
+  return <div>{todoList.map((todo) => <div>{todo.text}</div>)}</div>
+}
+```
+
 <h2 align="center">Maintainers</h2>
@@ -29,0 +65,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10831

increased by8.46%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

77

increased by87.8%

No dependency changes