@rune-hub/react 1.0.0 → 1.1.0

package/README.md

@@ -11,7 +11,7 @@
     <img src="https://img.shields.io/npm/v/@rune-hub/react.svg" alt="rune-hub npm">
   </a>
   <a href="https://github.com/d8corp/rune-hub-react" target="_blank">
-    <img src="https://img.shields.io/badge/-GitHub-181717?logo=github&logoColor=white" alt="rune-hub source code">
+    <img src="https://img.shields.io/badge/-GitHub-181717?logo=github&logoColor=white" alt="@rune-hub/react source code">
   </a>
   <a href="https://www.npmtrends.com/@rune-hub/react" target="_blank">
     <img src="https://img.shields.io/npm/dm/@rune-hub/react.svg" alt="rune-hub downloads">
@@ -51,7 +51,7 @@ With full TypeScript support and straightforward integration, the library enable
 
 <sup>**[ [Install](#install) ]**</sup>  
 <sup>**[ [Examples](#examples) ]** [Basic Counter](#basic-counter) • [Todo List](#todo-list)</sup>  
-<sup>**[ [API](#api) ]** [HubProvider](#hubprovider) • [useRune](#userune) • [useOn](#useon) • [useAction](#useaction) • [useHub](#usehub) • [useSlot](#useslot)</sup>  
+<sup>**[ [API](#api) ]** [HubProvider](#hubprovider) • [useRune](#userune) • [useSlot](#useslot) • [useOn](#useon) • [useAction](#useaction) • [useHub](#usehub) • [useGetSlot](#usegetslot)</sup>  
 <sup>**[ [Links](#links) ]**</sup>
 
 ## Install
@@ -130,7 +130,7 @@ Component:
 ```tsx
 import { useState } from 'react'
 import { useRune } from '@rune-hub/react'
-import { todos, addTodo, toggleTodo } from './store.ts'
+import { todos, addTodo, toggleTodo } from './store'
 
 function TodoList () {
   const todoList = useRune(todos)
@@ -174,7 +174,7 @@ function TodoList () {
 ## API
 ###### [🏠︎](#index) / API [↑](#examples) [↓](#links)
 
-<sup>[HubProvider](#hubprovider) • [useRune](#userune) • [useOn](#useon) • [useAction](#useaction) • [useHub](#usehub) • [useSlot](#useslot)</sup>
+<sup>[HubProvider](#hubprovider) • [useRune](#userune) • [useSlot](#useslot) • [useOn](#useon) • [useAction](#useaction) • [useHub](#usehub) • [useGetSlot](#usegetslot)</sup>
 
 ### HubProvider
 ###### [🏠︎](#index) / [API](#api) / HubProvider [↓](#userune)
@@ -199,7 +199,9 @@ function App () {
 If you don't provide a Hub, the default `Hub.root` will be used.
 
 ### useRune
-###### [🏠︎](#index) / [API](#api) / useRune [↑](#hubprovider) [↓](#useon)
+###### [🏠︎](#index) / [API](#api) / useRune [↑](#hubprovider) [↓](#useslot)
+
+Subscribes to a Rune and returns its current value.
 
 Uses `useSyncExternalStore` for proper synchronization with React's rendering cycle.
 Automatically subscribes to the Rune's slot and unsubscribes on unmount.
@@ -222,8 +224,34 @@ function Counter () {
 }
 ```
 
+### useSlot
+###### [🏠︎](#index) / [API](#api) / useSlot [↑](#userune) [↓](#useon)
+
+Subscribes to a Slot and returns its current value.
+
+Uses `useSyncExternalStore` for proper synchronization with React's rendering cycle.
+Automatically subscribes to the Slot and unsubscribes on unmount.
+
+```tsx
+import { Slot } from 'rune-hub'
+import { useSlot } from '@rune-hub/react'
+
+const count = new Slot(() => 0)
+const log = new Slot(() => console.log(count.value))
+
+function Counter () {
+  const value = useSlot(count)
+  // Subscribe to count changes
+
+  useSlot(log)
+  // Activate log effect
+
+  return <div>Count: {value}</div>
+}
+```
+
 ### useOn
-###### [🏠︎](#index) / [API](#api) / useOn [↑](#userune) [↓](#useaction)
+###### [🏠︎](#index) / [API](#api) / useOn [↑](#useslot) [↓](#useaction)
 
 Use `useOn` when you need to run side effects (like logging, analytics, or synchronization) that depend on other Runes, but don't need the return value in your component.
 
@@ -274,7 +302,7 @@ function Counter () {
 ```
 
 ### useHub
-###### [🏠︎](#index) / [API](#api) / useHub [↑](#useaction) [↓](#useslot)
+###### [🏠︎](#index) / [API](#api) / useHub [↑](#useaction) [↓](#usegetslot)
 
 Returns the current Hub instance from context.
 
@@ -290,21 +318,22 @@ function MyComponent () {
 }
 ```
 
-### useSlot
-###### [🏠︎](#index) / [API](#api) / useSlot [↑](#usehub)
+### useGetSlot
+###### [🏠︎](#index) / [API](#api) / useGetSlot [↑](#usehub)
 
 **Returns a Slot instance for a given Rune within the current Hub context.**
 
-A Slot is a Hub-scoped reactive container that tracks changes to a Rune. Use this when you need direct access to the [Slot API](https://github.com/d8corp/rune-hub#slot-api) rather than just the value.
+A Slot is a Hub-scoped reactive container that tracks changes to a Rune.
+Use this when you need direct access to the [Slot API](https://github.com/d8corp/rune-hub#slot-api) rather than just the value.
 
 ```tsx
 import { useEffect } from 'react'
-import { useSlot } from '@rune-hub/react'
+import { useGetSlot } from '@rune-hub/react'
 
 const count = () => 0
 
 function Counter () {
-  const slot = useSlot(count)
+  const slot = useGetSlot(count)
 
   useEffect(() => {
     // Access raw value without subscribing

package/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useAction';
+export * from './useGetSlot';
 export * from './useHub';
 export * from './useOn';
 export * from './useRune';

package/hooks/index.es6.js

@@ -1,4 +1,5 @@
 import './useAction/index.es6.js';
+import './useGetSlot/index.es6.js';
 import './useHub/index.es6.js';
 import './useOn/index.es6.js';
 import './useRune/index.es6.js';

package/hooks/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 require('./useAction/index.js');
+require('./useGetSlot/index.js');
 require('./useHub/index.js');
 require('./useOn/index.js');
 require('./useRune/index.js');

package/hooks/useGetSlot/index.d.ts

@@ -0,0 +1 @@
+export * from './useGetSlot';

package/hooks/useGetSlot/index.es6.js

@@ -0,0 +1 @@
+export { useGetSlot } from './useGetSlot.es6.js';

package/hooks/useGetSlot/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useGetSlot = require('./useGetSlot.js');
+
+
+
+exports.useGetSlot = useGetSlot.useGetSlot;

package/hooks/useGetSlot/useGetSlot.d.ts

@@ -0,0 +1,34 @@
+import type { Rune, Slot } from 'rune-hub';
+/**
+ * Returns a Slot instance for a given Rune within the current Hub context.
+ *
+ * A Slot is a Hub-scoped reactive container that tracks changes to a Rune.
+ * The Slot instance is memoized and stable for the Rune and Hub combination.
+ *
+ * @template T - The Rune value type
+ * @param rune - The Rune to get a Slot for
+ * @returns A memoized Slot instance for the Rune
+ * @see {@link https://github.com/d8corp/rune-hub-react#useslot}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ *
+ * function Counter () {
+ *   const slot = useGetSlot(count)
+ *
+ *   useEffect(() => {
+ *     // Access raw value without subscribing
+ *     console.log(slot.raw)
+ *
+ *     // Manually listen to changes
+ *     return slot.on('change', () => {
+ *       console.log('Count changed:', slot.raw)
+ *     })
+ *   }, [slot])
+ *
+ *   return <div>Count: {slot.raw}</div>
+ * }
+ * ```
+ */
+export declare function useGetSlot<T>(rune: Rune<T>): Slot<T>;

package/hooks/useGetSlot/useGetSlot.es6.js

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { slot } from 'rune-hub';
+import '../useHub/index.es6.js';
+import { useHub } from '../useHub/useHub.es6.js';
+
+/**
+ * Returns a Slot instance for a given Rune within the current Hub context.
+ *
+ * A Slot is a Hub-scoped reactive container that tracks changes to a Rune.
+ * The Slot instance is memoized and stable for the Rune and Hub combination.
+ *
+ * @template T - The Rune value type
+ * @param rune - The Rune to get a Slot for
+ * @returns A memoized Slot instance for the Rune
+ * @see {@link https://github.com/d8corp/rune-hub-react#useslot}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ *
+ * function Counter () {
+ *   const slot = useGetSlot(count)
+ *
+ *   useEffect(() => {
+ *     // Access raw value without subscribing
+ *     console.log(slot.raw)
+ *
+ *     // Manually listen to changes
+ *     return slot.on('change', () => {
+ *       console.log('Count changed:', slot.raw)
+ *     })
+ *   }, [slot])
+ *
+ *   return <div>Count: {slot.raw}</div>
+ * }
+ * ```
+ */
+function useGetSlot(rune) {
+    var hub = useHub();
+    return useMemo(function () { return hub.use(function () { return slot(rune); }); }, [rune, hub]);
+}
+
+export { useGetSlot };

package/hooks/useGetSlot/useGetSlot.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var runeHub = require('rune-hub');
+require('../useHub/index.js');
+var useHub = require('../useHub/useHub.js');
+
+/**
+ * Returns a Slot instance for a given Rune within the current Hub context.
+ *
+ * A Slot is a Hub-scoped reactive container that tracks changes to a Rune.
+ * The Slot instance is memoized and stable for the Rune and Hub combination.
+ *
+ * @template T - The Rune value type
+ * @param rune - The Rune to get a Slot for
+ * @returns A memoized Slot instance for the Rune
+ * @see {@link https://github.com/d8corp/rune-hub-react#useslot}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ *
+ * function Counter () {
+ *   const slot = useGetSlot(count)
+ *
+ *   useEffect(() => {
+ *     // Access raw value without subscribing
+ *     console.log(slot.raw)
+ *
+ *     // Manually listen to changes
+ *     return slot.on('change', () => {
+ *       console.log('Count changed:', slot.raw)
+ *     })
+ *   }, [slot])
+ *
+ *   return <div>Count: {slot.raw}</div>
+ * }
+ * ```
+ */
+function useGetSlot(rune) {
+    var hub = useHub.useHub();
+    return react.useMemo(function () { return hub.use(function () { return runeHub.slot(rune); }); }, [rune, hub]);
+}
+
+exports.useGetSlot = useGetSlot;

package/hooks/useOn/useOn.es6.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import '../useSlot/index.es6.js';
-import { useSlot } from '../useSlot/useSlot.es6.js';
+import '../useGetSlot/index.es6.js';
+import { useGetSlot } from '../useGetSlot/useGetSlot.es6.js';
 
 /**
  * Activates a Rune effect without subscribing to its value.
@@ -24,7 +24,7 @@ import { useSlot } from '../useSlot/useSlot.es6.js';
  * ```
  */
 function useOn(rune) {
-    var slot = useSlot(rune);
+    var slot = useGetSlot(rune);
     useEffect(function () { return slot.on(); }, [slot]);
 }
 

package/hooks/useOn/useOn.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
-require('../useSlot/index.js');
-var useSlot = require('../useSlot/useSlot.js');
+require('../useGetSlot/index.js');
+var useGetSlot = require('../useGetSlot/useGetSlot.js');
 
 /**
  * Activates a Rune effect without subscribing to its value.
@@ -28,7 +28,7 @@ var useSlot = require('../useSlot/useSlot.js');
  * ```
  */
 function useOn(rune) {
-    var slot = useSlot.useSlot(rune);
+    var slot = useGetSlot.useGetSlot(rune);
     react.useEffect(function () { return slot.on(); }, [slot]);
 }
 

package/hooks/useRune/useRune.es6.js

@@ -1,6 +1,7 @@
-import { useMemo, useEffect, useCallback, useSyncExternalStore } from 'react';
+import '../useGetSlot/index.es6.js';
 import '../useSlot/index.es6.js';
 import { useSlot } from '../useSlot/useSlot.es6.js';
+import { useGetSlot } from '../useGetSlot/useGetSlot.es6.js';
 
 /**
  * Subscribes to a Rune and returns its current value.
@@ -25,13 +26,7 @@ import { useSlot } from '../useSlot/useSlot.es6.js';
  * ```
  */
 function useRune(rune) {
-    var slot = useSlot(rune);
-    var stop = useMemo(function () { return slot.on(); }, [slot]);
-    useEffect(function () { return stop; }, [stop]);
-    var subscribe = useCallback(function (callback) {
-        return slot.on('change', callback);
-    }, [slot]);
-    return useSyncExternalStore(subscribe, function () { return slot.raw; });
+    return useSlot(useGetSlot(rune));
 }
 
 export { useRune };

package/hooks/useRune/useRune.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('react');
+require('../useGetSlot/index.js');
 require('../useSlot/index.js');
 var useSlot = require('../useSlot/useSlot.js');
+var useGetSlot = require('../useGetSlot/useGetSlot.js');
 
 /**
  * Subscribes to a Rune and returns its current value.
@@ -29,13 +30,7 @@ var useSlot = require('../useSlot/useSlot.js');
  * ```
  */
 function useRune(rune) {
-    var slot = useSlot.useSlot(rune);
-    var stop = react.useMemo(function () { return slot.on(); }, [slot]);
-    react.useEffect(function () { return stop; }, [stop]);
-    var subscribe = react.useCallback(function (callback) {
-        return slot.on('change', callback);
-    }, [slot]);
-    return react.useSyncExternalStore(subscribe, function () { return slot.raw; });
+    return useSlot.useSlot(useGetSlot.useGetSlot(rune));
 }
 
 exports.useRune = useRune;

package/hooks/useSlot/useSlot.d.ts

@@ -1,34 +1,24 @@
-import type { Rune, Slot } from 'rune-hub';
+import type { Slot } from 'rune-hub';
 /**
- * Returns a Slot instance for a given Rune within the current Hub context.
+ * Subscribes to a Slot and returns its current value.
  *
- * A Slot is a Hub-scoped reactive container that tracks changes to a Rune.
- * The Slot instance is memoized and stable for the Rune and Hub combination.
+ * Uses `useSyncExternalStore` for proper synchronization with React's rendering cycle.
+ * Automatically subscribes to the Rune's slot and unsubscribes on unmount.
  *
- * @template T - The Rune value type
- * @param rune - The Rune to get a Slot for
- * @returns A memoized Slot instance for the Rune
+ * @template T - Slot value type
+ * @param slot - The Slot to subscribe to
+ * @returns The current value of the Slot
  * @see {@link https://github.com/d8corp/rune-hub-react#useslot}
  *
  * @example
  * ```tsx
- * const count = () => 0
+ * const count = new Slot(() => 0)
  *
  * function Counter () {
- *   const slot = useSlot(count)
+ *   const value = useSlot(count)
  *
- *   useEffect(() => {
- *     // Access raw value without subscribing
- *     console.log(slot.raw)
- *
- *     // Manually listen to changes
- *     return slot.on('change', () => {
- *       console.log('Count changed:', slot.raw)
- *     })
- *   }, [slot])
- *
- *   return <div>Count: {slot.raw}</div>
+ *   return <div>Count: {value}</div>
  * }
  * ```
  */
-export declare function useSlot<T>(rune: Rune<T>): Slot<T>;
+export declare function useSlot<T>(slot: Slot<T>): T;

package/hooks/useSlot/useSlot.es6.js

@@ -1,43 +1,34 @@
-import { useMemo } from 'react';
-import { slot } from 'rune-hub';
-import '../useHub/index.es6.js';
-import { useHub } from '../useHub/useHub.es6.js';
+import { useMemo, useEffect, useCallback, useSyncExternalStore } from 'react';
 
 /**
- * Returns a Slot instance for a given Rune within the current Hub context.
+ * Subscribes to a Slot and returns its current value.
  *
- * A Slot is a Hub-scoped reactive container that tracks changes to a Rune.
- * The Slot instance is memoized and stable for the Rune and Hub combination.
+ * Uses `useSyncExternalStore` for proper synchronization with React's rendering cycle.
+ * Automatically subscribes to the Rune's slot and unsubscribes on unmount.
  *
- * @template T - The Rune value type
- * @param rune - The Rune to get a Slot for
- * @returns A memoized Slot instance for the Rune
+ * @template T - Slot value type
+ * @param slot - The Slot to subscribe to
+ * @returns The current value of the Slot
  * @see {@link https://github.com/d8corp/rune-hub-react#useslot}
  *
  * @example
  * ```tsx
- * const count = () => 0
+ * const count = new Slot(() => 0)
  *
  * function Counter () {
- *   const slot = useSlot(count)
+ *   const value = useSlot(count)
  *
- *   useEffect(() => {
- *     // Access raw value without subscribing
- *     console.log(slot.raw)
- *
- *     // Manually listen to changes
- *     return slot.on('change', () => {
- *       console.log('Count changed:', slot.raw)
- *     })
- *   }, [slot])
- *
- *   return <div>Count: {slot.raw}</div>
+ *   return <div>Count: {value}</div>
  * }
  * ```
  */
-function useSlot(rune) {
-    var hub = useHub();
-    return useMemo(function () { return hub.use(function () { return slot(rune); }); }, [rune, hub]);
+function useSlot(slot) {
+    var stop = useMemo(function () { return slot.on(); }, [slot]);
+    useEffect(function () { return stop; }, [stop]);
+    var subscribe = useCallback(function (callback) {
+        return slot.on('change', callback);
+    }, [slot]);
+    return useSyncExternalStore(subscribe, function () { return slot.raw; });
 }
 
 export { useSlot };

package/hooks/useSlot/useSlot.js

@@ -3,45 +3,36 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
-var runeHub = require('rune-hub');
-require('../useHub/index.js');
-var useHub = require('../useHub/useHub.js');
 
 /**
- * Returns a Slot instance for a given Rune within the current Hub context.
+ * Subscribes to a Slot and returns its current value.
  *
- * A Slot is a Hub-scoped reactive container that tracks changes to a Rune.
- * The Slot instance is memoized and stable for the Rune and Hub combination.
+ * Uses `useSyncExternalStore` for proper synchronization with React's rendering cycle.
+ * Automatically subscribes to the Rune's slot and unsubscribes on unmount.
  *
- * @template T - The Rune value type
- * @param rune - The Rune to get a Slot for
- * @returns A memoized Slot instance for the Rune
+ * @template T - Slot value type
+ * @param slot - The Slot to subscribe to
+ * @returns The current value of the Slot
  * @see {@link https://github.com/d8corp/rune-hub-react#useslot}
  *
  * @example
  * ```tsx
- * const count = () => 0
+ * const count = new Slot(() => 0)
  *
  * function Counter () {
- *   const slot = useSlot(count)
+ *   const value = useSlot(count)
  *
- *   useEffect(() => {
- *     // Access raw value without subscribing
- *     console.log(slot.raw)
- *
- *     // Manually listen to changes
- *     return slot.on('change', () => {
- *       console.log('Count changed:', slot.raw)
- *     })
- *   }, [slot])
- *
- *   return <div>Count: {slot.raw}</div>
+ *   return <div>Count: {value}</div>
  * }
  * ```
  */
-function useSlot(rune) {
-    var hub = useHub.useHub();
-    return react.useMemo(function () { return hub.use(function () { return runeHub.slot(rune); }); }, [rune, hub]);
+function useSlot(slot) {
+    var stop = react.useMemo(function () { return slot.on(); }, [slot]);
+    react.useEffect(function () { return stop; }, [stop]);
+    var subscribe = react.useCallback(function (callback) {
+        return slot.on('change', callback);
+    }, [slot]);
+    return react.useSyncExternalStore(subscribe, function () { return slot.raw; });
 }
 
 exports.useSlot = useSlot;

package/index.es6.js

@@ -2,6 +2,7 @@ import './context/index.es6.js';
 import './hooks/index.es6.js';
 export { HubContext, HubProvider } from './context/HubContext/HubContext.es6.js';
 export { useAction } from './hooks/useAction/useAction.es6.js';
+export { useGetSlot } from './hooks/useGetSlot/useGetSlot.es6.js';
 export { useHub } from './hooks/useHub/useHub.es6.js';
 export { useOn } from './hooks/useOn/useOn.es6.js';
 export { useRune } from './hooks/useRune/useRune.es6.js';

package/index.js

@@ -6,6 +6,7 @@ require('./context/index.js');
 require('./hooks/index.js');
 var HubContext = require('./context/HubContext/HubContext.js');
 var useAction = require('./hooks/useAction/useAction.js');
+var useGetSlot = require('./hooks/useGetSlot/useGetSlot.js');
 var useHub = require('./hooks/useHub/useHub.js');
 var useOn = require('./hooks/useOn/useOn.js');
 var useRune = require('./hooks/useRune/useRune.js');
@@ -16,6 +17,7 @@ var useSlot = require('./hooks/useSlot/useSlot.js');
 exports.HubContext = HubContext.HubContext;
 exports.HubProvider = HubContext.HubProvider;
 exports.useAction = useAction.useAction;
+exports.useGetSlot = useGetSlot.useGetSlot;
 exports.useHub = useHub.useHub;
 exports.useOn = useOn.useOn;
 exports.useRune = useRune.useRune;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rune-hub/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Integrating RuneHub with React",
   "main": "index.js",
   "module": "index.es6.js",
@@ -42,6 +42,6 @@
   "homepage": "https://github.com/d8corp/rune-hub-react",
   "dependencies": {
     "react": ">=18",
-    "rune-hub": "^1.0.0"
+    "rune-hub": "^1.1.0"
   }
 }