@siggn/react 0.0.1 → 0.1.1

package/README.md

@@ -1,202 +1,173 @@
-# @siggn/core
+[![npm version](https://badge.fury.io/js/%40siggn%2Freact.svg)](https://www.npmjs.com/package/%40siggn%2Freact)
 
-A lightweight and type-safe event-driven pub/sub system for TypeScript projects.
+# @siggn/react
+
+React package for `@siggn/core`, providing a simple and idiomatic way to integrate the message bus with your React components.
 
 ## Features
 
-- **Type-Safe**: Leverages TypeScript to ensure that message payloads are correct at compile and
-  runtime.
-- **Lightweight**: Zero dependencies and a minimal API surface.
-- **Simple API**: Easy to learn and use, with a clear and concise API.
+- **Seamless Integration**: Hooks-based API that feels natural in React.
+- **Automatic Cleanup**: Subscriptions are automatically managed throughout the component lifecycle.
+- **Type-Safe**: Full TypeScript support, inheriting the type safety of `@siggn/core`.
 
 ## Installation
 
-You can install the package using your favorite package manager:
-
 ```bash
-npm install @siggn/core
+npm install @siggn/react
 ```
 
 ```bash
-yarn add @siggn/core
+yarn add @siggn/react
 ```
 
 ```bash
-pnpm add @siggn/core
+pnpm add @siggn/react
 ```
 
 ## Usage
 
-Here's a basic example of how to use Siggn:
+The primary way to use `@siggn/react` is by creating a `Siggn` instance and sharing it across your application. You can do this using React Context or by exporting a singleton instance.
 
-```typescript
-import { Siggn } from '@siggn/core';
+### 1. Create a Siggn Instance
 
-// 1. Define your message types
-type Message =
-  | { type: 'user_created'; userId: string; name: string }
-  | { type: 'user_deleted'; userId: string };
+It's recommended to create a single `Siggn` instance and share it throughout your app.
 
-// 2. Create a new Siggn instance
-const siggn = new Siggn<Message>();
+```typescript
+// src/siggn.ts
+import { Siggn } from '@siggn/react';
 
-// 3. Subscribe to events
-// Use a unique ID for each subscriber to manage subscriptions
-const subscriberId = 'analytics-service';
+// Define your message types
+export type Message =
+  | { type: 'user_login'; name: string }
+  | { type: 'user_logout' };
 
-siggn.subscribe(subscriberId, 'user_created', (msg) => {
-  console.log(`[Analytics] New user created: ${msg.name} (ID: ${msg.userId})`);
-});
+// Create and export the instance
+export const siggn = new Siggn<Message>();
+```
 
-// 4. Publish events
-siggn.publish({ type: 'user_created', userId: '123', name: 'John Doe' });
-// Output: [Analytics] New user created: John Doe (ID: 123)
+Alternatively, you can use the `useSiggn` hook to create a `Siggn` instance that is scoped to a component and its children.
 
-// 5. Unsubscribe from all events for a given ID
-siggn.unsubscribe(subscriberId);
+### 2. Subscribe to Events in a Component
 
-siggn.publish({ type: 'user_created', userId: '456', name: 'Jane Doe' });
-// No output, because the subscriber was removed.
-```
+Use the `useSubscribe` hook to listen for messages. It automatically handles subscribing and unsubscribing.
 
-### Using the `make` helper
+```tsx
+// src/components/Notification.tsx
+import { useState } from 'react';
+import { useSubscribe } from '@siggn/react';
+import { siggn, type Message } from '../siggn';
 
-The `make` method simplifies managing subscriptions for a specific component or service.
+function Notification() {
+  const [notification, setNotification] = useState<string | null>(null);
 
-```typescript
-const userComponent = siggn.make('user-component');
+  useSubscribe(siggn, (subscribe) => {
+    subscribe('user_login', (msg) => {
+      setNotification(`Welcome, ${msg.name}!`);
+    });
 
-userComponent.subscribe('user_deleted', (msg) => {
-  console.log(`[UI] User ${msg.userId} was deleted. Updating view...`);
-});
+    subscribe('user_logout', () => {
+      setNotification('You have been logged out.');
+    });
+  });
 
-siggn.publish({ type: 'user_deleted', userId: '123' });
-// Output: [UI] User 123 was deleted. Updating view...
+  if (!notification) {
+    return null;
+  }
 
-// Unsubscribe from all subscriptions made by 'user-component'
-userComponent.unsubscribe();
+  return <div className='notification'>{notification}</div>;
+}
 ```
 
-### Subscribing to multiple events
-
-You can use `subscribeMany` to group subscriptions for a single subscriber.
+### 3. Publish Events
 
-```typescript
-const auditService = siggn.make('audit-service');
+You can publish events from anywhere in your application.
 
-auditService.subscribeMany((subscribe) => {
-  subscribe('user_created', (msg) => {
-    console.log(`[Audit] User created: ${msg.name}`);
-  });
-  subscribe('user_deleted', (msg) => {
-    console.log(`[Audit] User deleted: ${msg.userId}`);
-  });
-});
+```tsx
+// src/components/AuthButton.tsx
+import { siggn } from '../siggn';
 
-siggn.publish({ type: 'user_created', userId: '789', name: 'Peter Pan' });
-siggn.publish({ type: 'user_deleted', userId: '123' });
+function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
+  const handleClick = () => {
+    if (isLoggedIn) {
+      siggn.publish({ type: 'user_logout' });
+    } else {
+      siggn.publish({ type: 'user_login', name: 'Jane Doe' });
+    }
+  };
 
-// Unsubscribe from all audit-service events
-auditService.unsubscribe();
+  return <button onClick={handleClick}>{isLoggedIn ? 'Log Out' : 'Log In'}</button>;
+}
 ```
 
-### Subscribing to all events
-
-If you need to listen to every message that passes through the bus, regardless of its type, you can
-use `subscribeAll`. This is useful for cross-cutting concerns like logging or debugging.
+### Subscribing to All Events
 
-```typescript
-const logger = siggn.make('logger-service');
-
-logger.subscribeAll((msg) => {
-  console.log(`[Logger] Received event of type: ${msg.type}`);
-});
+If you need to listen to all messages, you can use `useSubscribeAll`. This is useful for cross-cutting concerns like logging or analytics.
 
-siggn.publish({ type: 'user_created', userId: '789', name: 'Peter Pan' });
-// Output: [Logger] Received event of type: user_created
+```tsx
+// src/components/Logger.tsx
+import { useSubscribeAll } from '@siggn/react';
+import { siggn } from '../siggn';
 
-siggn.publish({ type: 'user_deleted', userId: '123' });
-// Output: [Logger] Received event of type: user_deleted
+function Logger() {
+  useSubscribeAll(siggn, (msg) => {
+    console.log(`[Logger] Event of type ${msg.type} was triggered`);
+  });
 
-// Unsubscribe from all logger-service events
-logger.unsubscribe();
+  return null; // This component does not render anything
+}
 ```
 
-### Extending message types with `createChild`
+### Using `useSiggn`
 
-The `createChild` method allows you to create a new, independent `Siggn` instance that inherits the
-message types of its parent. This is useful for creating specialized message buses that extend a
-base set of events without affecting the parent bus.
+The `useSiggn` hook creates a `Siggn` instance that is tied to the component's lifecycle. This can be useful for local, component-specific event buses.
 
-```typescript
-// Continuing with the previous `Message` type...
-const baseSiggn = new Siggn<Message>();
+```tsx
+import { useSiggn, useSubscribe } from '@siggn/react';
 
-// 1. Define a new set of messages for a specialized module
-type AdminMessage = { type: 'admin_login'; adminId: string };
+type LocalMessage = { type: 'local_event' };
 
-// 2. Create a child bus that understands both `Message` and `AdminMessage`
-const adminSiggn = baseSiggn.createChild<AdminMessage>();
+function LocalComponent() {
+  const localSiggn = useSiggn<LocalMessage>();
 
-// 3. Subscribe to events on the child bus
-adminSiggn.subscribe('audit-log', 'user_created', (msg) => {
-  console.log(`[Admin Audit] User created: ${msg.name}`);
-});
-
-adminSiggn.subscribe('auth-service', 'admin_login', (msg) => {
-  console.log(`[Admin Auth] Admin logged in: ${msg.adminId}`);
-});
-
-// 4. Publish events on the child bus
-adminSiggn.publish({ type: 'user_created', userId: 'abc', name: 'Alice' });
-// Output: [Admin Audit] User created: Alice
+  useSubscribe(localSiggn, (subscribe) => {
+    subscribe('local_event', () => {
+      console.log('Local event received!');
+    });
+  });
 
-adminSiggn.publish({ type: 'admin_login', adminId: 'xyz' });
-// Output: [Admin Auth] Admin logged in: xyz
+  const triggerEvent = () => {
+    localSiggn.publish({ type: 'local_event' });
+  };
 
-// Note: The parent and child buses are independent.
-// Publishing on the parent does not affect the child's subscribers.
-baseSiggn.publish({ type: 'user_created', userId: 'def', name: 'Bob' });
-// No output, because the subscription is on `adminSiggn`.
+  return <button onClick={triggerEvent}>Trigger Local Event</button>;
+}
 ```
 
 ## API
 
-### `new Siggn<T>()`
-
-Creates a new message bus instance. `T` is a union type of all possible messages.
-
-### `publish(msg)`
-
-Publishes a message to all relevant subscribers.
-
-### `subscribe(id, type, callback)`
-
-Subscribes a callback to a specific message type with a unique subscriber ID.
-
-### `subscribeAll(id, callback)`
+### `useSiggn<T>()`
 
-Subscribes a callback to all message types with a unique subscriber ID. The callback will receive
-every message published on the bus.
+Creates and returns a `Siggn` instance that persists for the lifetime of the component.
 
-### `unsubscribe(id)`
+- `T`: A union type of all possible messages.
 
-Removes all subscriptions associated with a specific subscriber ID.
+Returns a `Siggn<T>` instance.
 
-### `make(id)`
+### `useSubscribe(options, setup, deps)`
 
-Returns a helper object with `subscribe`, `subscribeMany`, `subscribeAll`, and `unsubscribe` methods
-pre-bound to the provided ID. This is useful for encapsulating subscription logic within a component
-or service.
+Subscribes to messages and automatically unsubscribes when the component unmounts.
 
-### `subscribeMany(id, setup)`
+- `options`: A `Siggn` instance or an object `{ instance: Siggn<T>; id?: string; }`.
+- `setup`: A function that receives a `subscribe` helper to define subscriptions, similar to `subscribeMany` in `@siggn/core`.
+- `deps` (optional): A dependency array to control when the subscriptions are re-created.
 
-A convenience method to subscribe to multiple message types for a single ID.
+### `useSubscribeAll(options, callback, deps)`
 
-### `createChild<C>()`
+Subscribes to all messages and automatically unsubscribes when the component unmounts.
 
-Creates a new, independent `Siggn` instance whose message types are a union of the parent's types
-and the new child-specific types `C`.
+- `options`: A `Siggn` instance or an object `{ instance: Siggn<T>; id?: string; }`.
+- `callback`: A function that will be called with every message.
+- `deps` (optional): A dependency array to control when the subscriptions are re-created.
 
 ## License
 

package/dist/hooks.d.ts

@@ -0,0 +1,71 @@
+import { Msg, Siggn } from '../../core/src/index.ts';
+import { SubscriptionOptions } from 'packages/react/src/types';
+import { DependencyList } from 'react';
+/**
+ * Creates and returns a `Siggn` instance that persists for the lifetime of the component.
+ * This is useful for creating a message bus scoped to a component and its children.
+ *
+ * @template T A union of all possible message types for the new instance.
+ * @returns A `Siggn<T>` instance.
+ * @category Lifecycle
+ * @since 0.0.1
+ * @example
+ *
+```tsx
+ * function MyComponent() {
+ *   const localSiggn = useSiggn<{ type: 'local-event' }>();
+ *   // ...
+ * }
+ * ```
+ */
+export declare function useSiggn<T extends Msg>(): Siggn<T>;
+/**
+ * Subscribes to messages and automatically unsubscribes when the component unmounts.
+ *
+ * @template T A union of all possible message types.
+ * @param options A `Siggn` instance or an object with the instance and an optional subscriber ID.
+ * @param setup A function that receives a `subscribe` helper to define subscriptions.
+ * @param deps An optional dependency array to control when the subscriptions are re-created.
+ * @category Subscription
+ * @since 0.0.1
+ * @example
+ *
+```tsx
+ * import { siggn } from './siggn'; // Your shared instance
+ *
+ * function MyComponent() {
+ *   useSubscribe(siggn, (subscribe) => {
+ *     subscribe('user-created', (msg) => console.log(msg.name));
+ *   });
+ *   // ...
+ * }
+ * ```
+ */
+export declare function useSubscribe<T extends Msg>(options: SubscriptionOptions<T>, setup: (subscribe: <K extends T['type']>(type: K, callback: (msg: Extract<T, {
+    type: K;
+}>) => void) => void) => void, deps?: DependencyList): void;
+/**
+ * Subscribes to all messages on a `Siggn` instance and automatically unsubscribes
+ * when the component unmounts.
+ *
+ * @template T A union of all possible message types.
+ * @param options A `Siggn` instance or an object with the instance and an optional subscriber ID.
+ * @param callback The function to call for any message.
+ * @param deps An optional dependency array to control when the subscription is re-created.
+ * @category Subscription
+ * @since 0.0.1
+ * @example
+ *
+```tsx
+ * import { siggn } from './siggn';
+ *
+ * function LoggerComponent() {
+ *   useSubscribeAll(siggn, (msg) => {
+ *     console.log(`[LOG]: ${msg.type}`);
+ *   }, []);
+ *   // ...
+ * }
+ * ```
+ */
+export declare function useSubscribeAll<T extends Msg>(options: SubscriptionOptions<T>, callback: (msg: T) => void, deps?: DependencyList): void;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAA8B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAExE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAGlD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,GAAG,EACxC,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC/B,KAAK,EAAE,CACL,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EAC7B,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,EAAE;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC,KAAK,IAAI,KAC7C,IAAI,KACN,IAAI,EACT,IAAI,GAAE,cAAmB,QAe1B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,GAAG,EAC3C,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC/B,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,EAC1B,IAAI,GAAE,cAAmB,QAe1B"}

package/dist/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@siggn/core"),c=require("react");function t(){return c.useRef(new r.Siggn).current}function b(e,s,i=[]){const u=c.useMemo(()=>e instanceof r.Siggn?e:e.instance,[e]),n=c.useMemo(()=>u.makeId("id"in e?e.id:void 0),[u]);c.useEffect(()=>(u.subscribeMany(n,s),()=>{u.unsubscribe(n)}),[u,n,...i])}function a(e,s,i=[]){const u=c.useMemo(()=>e instanceof r.Siggn?e:e.instance,[e]),n=c.useMemo(()=>u.makeId("id"in e?e.id:void 0),[u]);c.useEffect(()=>(u.subscribeAll(n,s),()=>{u.unsubscribeGlobal(n)}),[u,n,...i])}exports.useSiggn=t;exports.useSubscribe=b;exports.useSubscribeAll=a;Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/hooks.ts"],"sourcesContent":["import { type Msg, Siggn } from '@siggn/core';\nimport type { SubscriptionOptions } from 'packages/react/src/types';\nimport { useEffect, useMemo, useRef, type DependencyList } from 'react';\n\n/**\n * Creates and returns a `Siggn` instance that persists for the lifetime of the component.\n * This is useful for creating a message bus scoped to a component and its children.\n *\n * @template T A union of all possible message types for the new instance.\n * @returns A `Siggn<T>` instance.\n * @category Lifecycle\n * @since 0.0.1\n * @example\n * \n```tsx\n * function MyComponent() {\n *   const localSiggn = useSiggn<{ type: 'local-event' }>();\n *   // ...\n * }\n * ```\n */\nexport function useSiggn<T extends Msg>(): Siggn<T> {\n  const siggn = useRef(new Siggn<T>());\n  return siggn.current;\n}\n\n/**\n * Subscribes to messages and automatically unsubscribes when the component unmounts.\n *\n * @template T A union of all possible message types.\n * @param options A `Siggn` instance or an object with the instance and an optional subscriber ID.\n * @param setup A function that receives a `subscribe` helper to define subscriptions.\n * @param deps An optional dependency array to control when the subscriptions are re-created.\n * @category Subscription\n * @since 0.0.1\n * @example\n * \n```tsx\n * import { siggn } from './siggn'; // Your shared instance\n *\n * function MyComponent() {\n *   useSubscribe(siggn, (subscribe) => {\n *     subscribe('user-created', (msg) => console.log(msg.name));\n *   });\n *   // ...\n * }\n * ```\n */\nexport function useSubscribe<T extends Msg>(\n  options: SubscriptionOptions<T>,\n  setup: (\n    subscribe: <K extends T['type']>(\n      type: K,\n      callback: (msg: Extract<T, { type: K }>) => void,\n    ) => void,\n  ) => void,\n  deps: DependencyList = [],\n) {\n  const instance = useMemo(\n    () => (options instanceof Siggn ? options : options.instance),\n    [options],\n  );\n  const id = useMemo(() => instance.makeId('id' in options ? options.id : undefined), [instance]);\n\n  useEffect(() => {\n    instance.subscribeMany(id, setup);\n\n    return () => {\n      instance.unsubscribe(id);\n    };\n  }, [instance, id, ...deps]);\n}\n\n/**\n * Subscribes to all messages on a `Siggn` instance and automatically unsubscribes\n * when the component unmounts.\n *\n * @template T A union of all possible message types.\n * @param options A `Siggn` instance or an object with the instance and an optional subscriber ID.\n * @param callback The function to call for any message.\n * @param deps An optional dependency array to control when the subscription is re-created.\n * @category Subscription\n * @since 0.0.1\n * @example\n * \n```tsx\n * import { siggn } from './siggn';\n *\n * function LoggerComponent() {\n *   useSubscribeAll(siggn, (msg) => {\n *     console.log(`[LOG]: ${msg.type}`);\n *   }, []);\n *   // ...\n * }\n * ```\n */\nexport function useSubscribeAll<T extends Msg>(\n  options: SubscriptionOptions<T>,\n  callback: (msg: T) => void,\n  deps: DependencyList = [],\n) {\n  const instance = useMemo(\n    () => (options instanceof Siggn ? options : options.instance),\n    [options],\n  );\n  const id = useMemo(() => instance.makeId('id' in options ? options.id : undefined), [instance]);\n\n  useEffect(() => {\n    instance.subscribeAll(id, callback);\n\n    return () => {\n      instance.unsubscribeGlobal(id);\n    };\n  }, [instance, id, ...deps]);\n}\n"],"names":["useSiggn","useRef","Siggn","useSubscribe","options","setup","deps","instance","useMemo","id","useEffect","useSubscribeAll","callback"],"mappings":"kIAqBO,SAASA,GAAoC,CAElD,OADcC,EAAAA,OAAO,IAAIC,EAAAA,KAAU,EACtB,OACf,CAwBO,SAASC,EACdC,EACAC,EAMAC,EAAuB,CAAA,EACvB,CACA,MAAMC,EAAWC,EAAAA,QACf,IAAOJ,aAAmBF,EAAAA,MAAQE,EAAUA,EAAQ,SACpD,CAACA,CAAO,CAAA,EAEJK,EAAKD,EAAAA,QAAQ,IAAMD,EAAS,OAAO,OAAQH,EAAUA,EAAQ,GAAK,MAAS,EAAG,CAACG,CAAQ,CAAC,EAE9FG,EAAAA,UAAU,KACRH,EAAS,cAAcE,EAAIJ,CAAK,EAEzB,IAAM,CACXE,EAAS,YAAYE,CAAE,CACzB,GACC,CAACF,EAAUE,EAAI,GAAGH,CAAI,CAAC,CAC5B,CAyBO,SAASK,EACdP,EACAQ,EACAN,EAAuB,CAAA,EACvB,CACA,MAAMC,EAAWC,EAAAA,QACf,IAAOJ,aAAmBF,EAAAA,MAAQE,EAAUA,EAAQ,SACpD,CAACA,CAAO,CAAA,EAEJK,EAAKD,EAAAA,QAAQ,IAAMD,EAAS,OAAO,OAAQH,EAAUA,EAAQ,GAAK,MAAS,EAAG,CAACG,CAAQ,CAAC,EAE9FG,EAAAA,UAAU,KACRH,EAAS,aAAaE,EAAIG,CAAQ,EAE3B,IAAM,CACXL,EAAS,kBAAkBE,CAAE,CAC/B,GACC,CAACF,EAAUE,EAAI,GAAGH,CAAI,CAAC,CAC5B"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './hooks.js';
+export * from '../../core/src/index.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

package/dist/index.es.js

@@ -0,0 +1,30 @@
+import { Siggn as s } from "@siggn/core";
+export * from "@siggn/core";
+import { useRef as t, useMemo as i, useEffect as b } from "react";
+function d() {
+  return t(new s()).current;
+}
+function g(e, r, u = []) {
+  const n = i(
+    () => e instanceof s ? e : e.instance,
+    [e]
+  ), c = i(() => n.makeId("id" in e ? e.id : void 0), [n]);
+  b(() => (n.subscribeMany(c, r), () => {
+    n.unsubscribe(c);
+  }), [n, c, ...u]);
+}
+function m(e, r, u = []) {
+  const n = i(
+    () => e instanceof s ? e : e.instance,
+    [e]
+  ), c = i(() => n.makeId("id" in e ? e.id : void 0), [n]);
+  b(() => (n.subscribeAll(c, r), () => {
+    n.unsubscribeGlobal(c);
+  }), [n, c, ...u]);
+}
+export {
+  d as useSiggn,
+  g as useSubscribe,
+  m as useSubscribeAll
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/hooks.ts"],"sourcesContent":["import { type Msg, Siggn } from '@siggn/core';\nimport type { SubscriptionOptions } from 'packages/react/src/types';\nimport { useEffect, useMemo, useRef, type DependencyList } from 'react';\n\n/**\n * Creates and returns a `Siggn` instance that persists for the lifetime of the component.\n * This is useful for creating a message bus scoped to a component and its children.\n *\n * @template T A union of all possible message types for the new instance.\n * @returns A `Siggn<T>` instance.\n * @category Lifecycle\n * @since 0.0.1\n * @example\n * \n```tsx\n * function MyComponent() {\n *   const localSiggn = useSiggn<{ type: 'local-event' }>();\n *   // ...\n * }\n * ```\n */\nexport function useSiggn<T extends Msg>(): Siggn<T> {\n  const siggn = useRef(new Siggn<T>());\n  return siggn.current;\n}\n\n/**\n * Subscribes to messages and automatically unsubscribes when the component unmounts.\n *\n * @template T A union of all possible message types.\n * @param options A `Siggn` instance or an object with the instance and an optional subscriber ID.\n * @param setup A function that receives a `subscribe` helper to define subscriptions.\n * @param deps An optional dependency array to control when the subscriptions are re-created.\n * @category Subscription\n * @since 0.0.1\n * @example\n * \n```tsx\n * import { siggn } from './siggn'; // Your shared instance\n *\n * function MyComponent() {\n *   useSubscribe(siggn, (subscribe) => {\n *     subscribe('user-created', (msg) => console.log(msg.name));\n *   });\n *   // ...\n * }\n * ```\n */\nexport function useSubscribe<T extends Msg>(\n  options: SubscriptionOptions<T>,\n  setup: (\n    subscribe: <K extends T['type']>(\n      type: K,\n      callback: (msg: Extract<T, { type: K }>) => void,\n    ) => void,\n  ) => void,\n  deps: DependencyList = [],\n) {\n  const instance = useMemo(\n    () => (options instanceof Siggn ? options : options.instance),\n    [options],\n  );\n  const id = useMemo(() => instance.makeId('id' in options ? options.id : undefined), [instance]);\n\n  useEffect(() => {\n    instance.subscribeMany(id, setup);\n\n    return () => {\n      instance.unsubscribe(id);\n    };\n  }, [instance, id, ...deps]);\n}\n\n/**\n * Subscribes to all messages on a `Siggn` instance and automatically unsubscribes\n * when the component unmounts.\n *\n * @template T A union of all possible message types.\n * @param options A `Siggn` instance or an object with the instance and an optional subscriber ID.\n * @param callback The function to call for any message.\n * @param deps An optional dependency array to control when the subscription is re-created.\n * @category Subscription\n * @since 0.0.1\n * @example\n * \n```tsx\n * import { siggn } from './siggn';\n *\n * function LoggerComponent() {\n *   useSubscribeAll(siggn, (msg) => {\n *     console.log(`[LOG]: ${msg.type}`);\n *   }, []);\n *   // ...\n * }\n * ```\n */\nexport function useSubscribeAll<T extends Msg>(\n  options: SubscriptionOptions<T>,\n  callback: (msg: T) => void,\n  deps: DependencyList = [],\n) {\n  const instance = useMemo(\n    () => (options instanceof Siggn ? options : options.instance),\n    [options],\n  );\n  const id = useMemo(() => instance.makeId('id' in options ? options.id : undefined), [instance]);\n\n  useEffect(() => {\n    instance.subscribeAll(id, callback);\n\n    return () => {\n      instance.unsubscribeGlobal(id);\n    };\n  }, [instance, id, ...deps]);\n}\n"],"names":["useSiggn","useRef","Siggn","useSubscribe","options","setup","deps","instance","useMemo","id","useEffect","useSubscribeAll","callback"],"mappings":";;;AAqBO,SAASA,IAAoC;AAElD,SADcC,EAAO,IAAIC,GAAU,EACtB;AACf;AAwBO,SAASC,EACdC,GACAC,GAMAC,IAAuB,CAAA,GACvB;AACA,QAAMC,IAAWC;AAAA,IACf,MAAOJ,aAAmBF,IAAQE,IAAUA,EAAQ;AAAA,IACpD,CAACA,CAAO;AAAA,EAAA,GAEJK,IAAKD,EAAQ,MAAMD,EAAS,OAAO,QAAQH,IAAUA,EAAQ,KAAK,MAAS,GAAG,CAACG,CAAQ,CAAC;AAE9F,EAAAG,EAAU,OACRH,EAAS,cAAcE,GAAIJ,CAAK,GAEzB,MAAM;AACX,IAAAE,EAAS,YAAYE,CAAE;AAAA,EACzB,IACC,CAACF,GAAUE,GAAI,GAAGH,CAAI,CAAC;AAC5B;AAyBO,SAASK,EACdP,GACAQ,GACAN,IAAuB,CAAA,GACvB;AACA,QAAMC,IAAWC;AAAA,IACf,MAAOJ,aAAmBF,IAAQE,IAAUA,EAAQ;AAAA,IACpD,CAACA,CAAO;AAAA,EAAA,GAEJK,IAAKD,EAAQ,MAAMD,EAAS,OAAO,QAAQH,IAAUA,EAAQ,KAAK,MAAS,GAAG,CAACG,CAAQ,CAAC;AAE9F,EAAAG,EAAU,OACRH,EAAS,aAAaE,GAAIG,CAAQ,GAE3B,MAAM;AACX,IAAAL,EAAS,kBAAkBE,CAAE;AAAA,EAC/B,IACC,CAACF,GAAUE,GAAI,GAAGH,CAAI,CAAC;AAC5B;"}

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+import { Msg, Siggn } from '../../core/src/index.ts';
+export type SubscriptionOptions<T extends Msg> = Siggn<T> | {
+    instance: Siggn<T>;
+    id?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,GAAG,IACzC,KAAK,CAAC,CAAC,CAAC,GACR;IACE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siggn/react",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "A lightweight type safe message bus system for React",
   "keywords": [
     "pub/sub",
@@ -36,6 +36,9 @@
     }
   },
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "sideEffects": false,
   "devDependencies": {
     "typescript": "^5.9.3",
@@ -55,13 +58,14 @@
     "react": ">=18 <20"
   },
   "dependencies": {
-    "@siggn/core": "0.0.5"
+    "@siggn/core": "0.1.0"
   },
   "scripts": {
     "dev": "vite build --watch",
     "clean": "rm -rf dist",
     "test:watch": "vitest",
     "test": "vitest run",
+    "coverage": "vitest run --coverage",
     "build": "vite build"
   }
 }

package/.prettierrc

@@ -1,16 +0,0 @@
-{
-  "arrowParens": "always",
-  "bracketSpacing": true,
-  "htmlWhitespaceSensitivity": "css",
-  "insertPragma": false,
-  "jsxSingleQuote": true,
-  "printWidth": 100,
-  "proseWrap": "always",
-  "quoteProps": "as-needed",
-  "requirePragma": false,
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "useTabs": false
-}

package/CHANGELOG.md

@@ -1,12 +0,0 @@
-# @siggn/react
-
-## 0.0.1
-
-### Patch Changes
-
-- [`d2a88af`](https://github.com/Guiguerreiro39/siggn/commit/d2a88af8e484f28e436c594cd3238379295941a2)
-  Thanks [@Guiguerreiro39](https://github.com/Guiguerreiro39)! - Added react hooks support
-
-- Updated dependencies
-  [[`d2a88af`](https://github.com/Guiguerreiro39/siggn/commit/d2a88af8e484f28e436c594cd3238379295941a2)]:
-  - @siggn/core@0.0.5

package/src/hooks.ts

@@ -1,39 +0,0 @@
-import { type Msg, Siggn } from '@siggn/core';
-import { useEffect, useMemo, useRef, type DependencyList } from 'react';
-
-type SubscriptionOptions<T extends Msg> =
-  | Siggn<T>
-  | {
-      instance: Siggn<T>;
-      id?: string;
-    };
-
-export function useSubscribe<T extends Msg>(
-  options: SubscriptionOptions<T>,
-  setup: (
-    subscribe: <K extends T['type']>(
-      type: K,
-      callback: (msg: Extract<T, { type: K }>) => void,
-    ) => void,
-  ) => void,
-  deps: DependencyList = [],
-) {
-  const instance = useMemo(
-    () => (options instanceof Siggn ? options : options.instance),
-    [options],
-  );
-  const id = useMemo(() => instance.makeId('id' in options ? options.id : undefined), [instance]);
-
-  useEffect(() => {
-    instance.subscribeMany(id, setup);
-
-    return () => {
-      instance.unsubscribe(id);
-    };
-  }, [instance, id, ...deps]);
-}
-
-export function useSiggn<T extends Msg>(): Siggn<T> {
-  const siggn = useRef<Siggn<T>>(new Siggn<T>());
-  return siggn.current;
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './hooks.js';
-export * from '@siggn/core';

package/tests/hooks.test.tsx

@@ -1,55 +0,0 @@
-import { test, expect, describe, beforeEach } from 'vitest';
-import { useSiggn, useSubscribe } from '../src/hooks.js';
-import { Siggn } from '@siggn/core';
-import { act, render, renderHook, screen } from '@testing-library/react';
-import { useState } from 'react';
-
-type Msg =
-  | {
-      type: 'increment_count';
-      value: number;
-    }
-  | { type: 'decrement_count'; value: number };
-
-describe('@siggn/react', () => {
-  let siggn: Siggn<Msg>;
-
-  beforeEach(() => {
-    const { result } = renderHook(() => useSiggn<Msg>());
-    siggn = result.current;
-  });
-
-  test('user should be able to create a siggn instance and subscribe using hooks', () => {
-    function TestComponent() {
-      const [count, setCount] = useState(0);
-
-      useSubscribe(siggn, (subscribe) => {
-        subscribe('increment_count', (msg) => {
-          setCount((prev) => prev + msg.value);
-        });
-
-        subscribe('decrement_count', (msg) => {
-          setCount((prev) => prev - msg.value);
-        });
-      });
-
-      return <div data-testid='value'>{count}</div>;
-    }
-
-    render(<TestComponent />);
-
-    expect(screen.getByTestId('value')).toHaveTextContent('0');
-
-    act(() => {
-      siggn.publish({ type: 'increment_count', value: 4 });
-    });
-
-    expect(screen.getByTestId('value')).toHaveTextContent('4');
-
-    act(() => {
-      siggn.publish({ type: 'decrement_count', value: 2 });
-    });
-
-    expect(screen.getByTestId('value')).toHaveTextContent('2');
-  });
-});

package/tsconfig.build.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.src.json",
-  "compilerOptions": {
-    "tsBuildInfoFile": ".tsbuildinfo/build.tsbuildinfo",
-    "outDir": "dist",
-    "declarationDir": "dist",
-    "stripInternal": true
-  },
-  "references": [{ "path": "../core" }]
-}

package/tsconfig.examples.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["examples"],
-  "references": [
-    {
-      "path": "tsconfig.build.json"
-    }
-  ],
-  "compilerOptions": {
-    "tsBuildInfoFile": ".tsbuildinfo/examples.tsbuildinfo",
-    "rootDir": "examples",
-    "noEmit": true
-  }
-}

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "references": [
-    {
-      "path": "tsconfig.src.json"
-    },
-    {
-      "path": "tsconfig.test.json"
-    },
-    {
-      "path": "tsconfig.examples.json"
-    }
-  ]
-}

package/tsconfig.src.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "tsBuildInfoFile": ".tsbuildinfo/src.tsbuildinfo",
-    "rootDir": "src",
-    "outDir": "dist"
-  },
-  "references": [{ "path": "../core" }]
-}

package/tsconfig.test.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["test"],
-  "references": [
-    {
-      "path": "tsconfig.src.json"
-    }
-  ],
-  "compilerOptions": {
-    "tsBuildInfoFile": ".tsbuildinfo/test.tsbuildinfo",
-    "rootDir": "test",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "types": ["@testing-library/jest-dom", "vitest/globals"]
-  }
-}

package/vite.config.ts

@@ -1,49 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import path from 'path';
-
-export default defineConfig({
-  resolve: {
-    alias: {
-      '@siggn/core': path.resolve(__dirname, '../core/src/index.ts'),
-    },
-  },
-  build: {
-    lib: {
-      entry: 'src/index.ts',
-      name: 'SiggnReact',
-      formats: ['es', 'cjs'],
-      fileName: (format) => `index.${format}.js`,
-    },
-    sourcemap: true,
-    outDir: 'dist',
-    emptyOutDir: true,
-    rollupOptions: {
-      // Prevent bundling peer dependencies like React, etc.
-      external: ['react', 'react-dom', '@siggn/core'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          '@siggn/core': 'SiggnCore',
-        },
-      },
-    },
-  },
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: './vitest.setup.ts',
-  },
-  plugins: [
-    react(),
-    dts({
-      insertTypesEntry: true,
-      tsconfigPath: 'tsconfig.build.json',
-      outDir: 'dist',
-      include: ['src'],
-      exclude: ['src/**/*.test.ts', 'tests/**'],
-    }),
-  ],
-});

package/vitest.setup.ts

@@ -1,7 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { cleanup } from '@testing-library/react';
-import { afterEach } from 'vitest';
-
-afterEach(() => {
-  cleanup();
-});