remix-utils - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

browser/react.d.ts

@@ -9,2 +9,3 @@ export * from "./react/cache-assets";
 export * from "./react/use-data-refresh";
+export * from "./react/use-event-source";
 export * from "./react/use-global-pending-state";
@@ -11,0 +12,0 @@ export * from "./react/use-hydrated";

browser/react.js

@@ -9,2 +9,3 @@ export * from "./react/cache-assets";
 export * from "./react/use-data-refresh";
+export * from "./react/use-event-source";
 export * from "./react/use-global-pending-state";
@@ -11,0 +12,0 @@ export * from "./react/use-hydrated";

browser/server.d.ts

 export * from "./server/cors";
 export * from "./server/csrf";
+export * from "./server/event-stream";
 export * from "./server/get-client-ip-address";
@@ -4,0 +5,0 @@ export * from "./server/get-client-locales";

browser/server.js

 export * from "./server/cors";
 export * from "./server/csrf";
+export * from "./server/event-stream";
 export * from "./server/get-client-ip-address";
@@ -4,0 +5,0 @@ export * from "./server/get-client-locales";

build/react.d.ts

@@ -9,2 +9,3 @@ export * from "./react/cache-assets";
 export * from "./react/use-data-refresh";
+export * from "./react/use-event-source";
 export * from "./react/use-global-pending-state";
@@ -11,0 +12,0 @@ export * from "./react/use-hydrated";

build/react.js

@@ -25,2 +25,3 @@ "use strict";
 __exportStar(require("./react/use-data-refresh"), exports);
+__exportStar(require("./react/use-event-source"), exports);
 __exportStar(require("./react/use-global-pending-state"), exports);
@@ -27,0 +28,0 @@ __exportStar(require("./react/use-hydrated"), exports);

build/server.d.ts

 export * from "./server/cors";
 export * from "./server/csrf";
+export * from "./server/event-stream";
 export * from "./server/get-client-ip-address";
@@ -4,0 +5,0 @@ export * from "./server/get-client-locales";

build/server.js

@@ -19,2 +19,3 @@ "use strict";
 __exportStar(require("./server/csrf"), exports);
+__exportStar(require("./server/event-stream"), exports);
 __exportStar(require("./server/get-client-ip-address"), exports);
@@ -21,0 +22,0 @@ __exportStar(require("./server/get-client-locales"), exports);

package.json

 {
   "name": "remix-utils",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "MIT",
@@ -82,3 +82,4 @@ "engines": {
     "react": "^17.0.2",
-    "react-router-dom": "^6.0.0-beta.6",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "6.3.0",
     "ts-node": "^10.4.0",
@@ -85,0 +86,0 @@ "typescript": "^4.2.4",

README.md

@@ -1069,2 +1069,55 @@ # Remix Utils
 
+### Server-Sent Events
+
+Server-Sent Events are a way to send data from the server to the client without the need for the client to request it. This is useful for things like chat applications, live updates, and more.
+
+There are two utils provided to help with the usage inside Remix:
+
+- `eventStream`
+- `useEventSource`
+
+The `eventStream` function is used to create a new event stream response needed to send events to the client.
+
+```ts
+import { eventStream } from "remix-utils";
+
+export async function loader({ request }: LoaderArgs) {
+  return eventStream(request.signal, function setup(send) {
+    let timer = setInterval(() => {
+      send({ event: "time", data: new Date().toISOString() });
+    }, 1000);
+
+    return function clear() {
+      clearInterval(timer);
+    };
+  });
+}
+```
+
+Then, inside any component, you can use the `useEventSource` hook to connect to the event stream.
+
+```tsx
+import { useEventSource } from "remix-utils";
+
+function Counter() {
+  let time = useEventSource("/sse/time", {
+    event: "time",
+  });
+
+  if (!time) return null;
+
+  return (
+    <time dateTime={time}>
+      {new Date(time).toLocaleTimeString("en", {
+        minute: "2-digit",
+        second: "2-digit",
+        hour: "2-digit",
+      })}
+    </time>
+  );
+}
+```
+
+The `event` name in bothe the event stream and the hook is optional, in which case it will default to `message`, if defined you must use the same event name in both sides, this also allows you to emit different events from the same event stream.
+
 ## Author
@@ -1071,0 +1124,0 @@

No alert changes

Improved metrics

Total package byte prevSize

198450

increased by4.79%

Number of package files

123

increased by6.96%

Lines of code

4342

increased by5.03%

Number of lines in readme file

1129

increased by4.93%

Worsened metrics

Dev dependency count

38

increased by2.7%

No dependency changes