react-event-socket - npm Package Compare versions

Comparing version 2.0.0-beta.2 to 2.0.0

package.json

@@ -68,3 +68,3 @@ {
   },
-  "version": "2.0.0-beta.2"
+  "version": "2.0.0"
 }

README.md

@@ -17,3 +17,3 @@ ## react-event-socket
 //service.ts
-import {ReactSocket} from "react-event-socket";
+import { ReactEventSocket, Middleware } from 'react-event-socket';
 
@@ -26,29 +26,50 @@ interface MessageEvent {
 
-export const [socket, events] = new ReactSocket('http://localhost:8080', true)
-    .addEvent({
-        name: 'message',
-        predicate: (data: MessageEvent) => 'message' in data,
-        // the props on the select callback will match the props on the predicate
-        select: ({user: {name}, data: {message}}) => {
-            return {name, message}
-        }
+const wrapPayload: Middleware = ({ name, data }) => ({ action: name, data });
+
+const [socket, hooks] = new ReactEventSocket('ws://localhost:1234', true)
+    .addReceivedMessage((received) =>
+        received
+            .addEvent({
+                name: 'received-message',
+                predicate: (data: MessageEvent) => 'message' in data,
+                // the props on the select callback will match the props on the predicate
+                select: ({ user: { name }, data: { message } }) => {
+                    return { name, message };
+                },
+                array: true,
+            })
+            .addEvent({
+                name: 'joined-room',
+                predicate: (data: JoinedRoom) => data.action === 'joined-room',
+            }),
+    )
+    .addSendMessage((send) => {
+        return send
+            .addPayload<{
+                channel: string;
+            }>()({ name: 'join' })
+            .addPayload<{ message: string }>()({
+                name: 'message',
+                middleware: [wrapPayload],
+            });
     })
-    .build()
+    .build();
 ```
 
 ```tsx
-import {events, socket} from "./service.ts";
+// component.tsx
+import { events, socket } from './service.ts';
 
 function App() {
     const status = socket.useStatus();
-    const message = events.useMessage(); // the type of this will match the type returned from the select {name:string, message: string}
+    const messages = events.useReceivedMessage(); // the type of this will match the type returned from the select {name:string, message: string}[]
     return <>
         <p>Status: {status}</p>
         <p>latest message: {message}</p>
-        {status === 'open' && <button onClick={() => socket.send({message: 'Hello World'})}>Send</button>}
+        {status === 'open' && <button onClick={() => socket.sendMessage({ message: 'Hello World' })}>Send</button>}
         {status === 'closed' && <button onClick={() => socket.reconnect()}>Reconnect</button>}
-    </>
+    </>;
 }
 
-export default App
+export default App;
 ```

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

28662

increased by2.69%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

73

increased by40.38%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes