@rvettori/elysia-broadcast 0.2.0 → 0.3.0

package/README.md

@@ -8,6 +8,7 @@ Broadcast and Server-Sent Events (SSE) system for Elysia with multi-channel per-
 - ✅ **Type-safe** - Fully typed with TypeScript
 - ✅ **SSE out-of-the-box** - Ready-to-use Server-Sent Events plugin with client library
 - ✅ **Alpine.js compatible** - Works seamlessly with Alpine.morph and x-sync
+- ✅ **JSON events** - Dispatches native `CustomEvent` on `document` for JSON-only broadcasts
 - ✅ **Flexible** - Use `BroadcastManager` standalone or as an Elysia plugin
 - ✅ **Lightweight** - Zero dependencies besides Elysia
 - ✅ **Tested** - Complete test coverage
@@ -227,7 +228,7 @@ Removes all connections.
   // Basic connection
   ElysiaSSE.connect('notifications');
   
-  // With custom handler
+  // With custom handler (receives the full event object)
   ElysiaSSE.connect('messages', {
     onUpdate: (data) => {
       console.log('New message:', data);
@@ -239,6 +240,49 @@ Removes all connections.
 </script>
 ```
 
+### JSON Events (CustomEvent)
+
+When a broadcast includes a `data` payload, the client automatically dispatches a native `CustomEvent` on `document` with the name `sse:<type>`. This works regardless of whether `html` is also present.
+
+**Server:**
+```typescript
+store.broadcast.broadcast('notifications', userId, {
+  type: 'notification.new',
+  data: { title: 'New comment', message: 'Someone replied to your post' }
+});
+```
+
+**Client — Vanilla JS:**
+```html
+<script src="/vendor/elysia-sse.js"></script>
+<script>
+  ElysiaSSE.connect('notifications');
+
+  document.addEventListener('sse:notification.new', (e) => {
+    const { title, message } = e.detail.data;
+    console.log(title, message);
+  });
+</script>
+```
+
+**Client — Alpine.js:**
+```html
+<div x-data="{ count: 0 }" @sse:notification.new.document="count++">
+  <span x-text="count"></span> unread
+</div>
+```
+
+When `html` and `data` are sent together, both are processed: the DOM is updated via Alpine.morph **and** the `CustomEvent` is dispatched.
+
+```typescript
+// Both html update and CustomEvent will fire
+store.broadcast.broadcast('todos', userId, {
+  type: 'todo.created',
+  data: { id: 1, task: 'New task' },
+  html: '<div x-sync id="todo-list">...</div>'
+});
+```
+
 ### HTMX + SSE
 
 ```html

package/dist/client.js

@@ -112,6 +112,14 @@ window.ElysiaSSE = {
             console.error('❌ [SSE] Erros:', errors.join(', '));
           }
         }
+
+        // Dispatch native CustomEvent whenever data payload is present
+        if (data.data !== undefined) {
+          document.dispatchEvent(new CustomEvent('sse:' + data.type, {
+            detail: data,
+            bubbles: true
+          }));
+        }
       } catch (error) {
         console.error('❌ [SSE] Erro ao processar evento:', error);
       }

package/dist/index.js

@@ -4,25 +4,43 @@ var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
 var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
   const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   for (let key of __getOwnPropNames(mod))
     if (!__hasOwnProp.call(to, key))
       __defProp(to, key, {
-        get: () => mod[key],
+        get: __accessProp.bind(mod, key),
         enumerable: true
       });
+  if (canCache)
+    cache.set(mod, to);
   return to;
 };
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: (newValue) => all[name] = () => newValue
+      set: __exportSetter.bind(all, name)
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -6631,7 +6649,6 @@ __export(exports_type3, {
 
 // node_modules/@sinclair/typebox/build/esm/type/type/index.mjs
 var Type = exports_type3;
-
 // node_modules/@sinclair/typebox/build/esm/errors/function.mjs
 function DefaultErrorFunction(error) {
   switch (error.errorType) {
@@ -7909,6 +7926,7 @@ function Errors(...args) {
   const iterator = args.length === 3 ? Visit6(args[0], args[1], "", args[2]) : Visit6(args[0], [], "", args[1]);
   return new ValueErrorIterator(iterator);
 }
+
 // node_modules/@sinclair/typebox/build/esm/value/assert/assert.mjs
 var __classPrivateFieldSet = function(receiver, state, value, kind, f) {
   if (kind === "m")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rvettori/elysia-broadcast",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Broadcast and SSE system for Elysia with support for multiple channels per user",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/client.js

@@ -112,6 +112,14 @@ window.ElysiaSSE = {
             console.error('❌ [SSE] Erros:', errors.join(', '));
           }
         }
+
+        // Dispatch native CustomEvent whenever data payload is present
+        if (data.data !== undefined) {
+          document.dispatchEvent(new CustomEvent('sse:' + data.type, {
+            detail: data,
+            bubbles: true
+          }));
+        }
       } catch (error) {
         console.error('❌ [SSE] Erro ao processar evento:', error);
       }