@rune-hub/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mike Lysikov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,336 @@
+<h1 align="center">
+<a href="https://github.com/d8corp/rune-hub">
+<img src="https://cdn.jsdelivr.net/gh/d8corp/rune-hub@main/logo.svg" width="80">
+</a>
+<br>
+@rune-hub/react
+</h1>
+
+<div align="center">
+  <a href="https://www.npmjs.com/package/@rune-hub/react" target="_blank">
+    <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">
+  </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">
+  </a>
+  <a href="https://github.com/d8corp/rune-hub-react/tree/main/release" target="_blank">
+    <img src="https://packagephobia.com/badge?p=@rune-hub/react" alt="rune-hub install size">
+  </a>
+  <a href="https://www.typescriptlang.org" target="_blank">
+    <img src="https://img.shields.io/npm/types/@rune-hub/react" alt="TypeScript">
+  </a>
+  <a href="https://github.com/d8corp/rune-hub-react/blob/main/LICENSE" target="_blank">
+    <img src="https://img.shields.io/npm/l/@rune-hub/react" alt="rune-hub license">
+  </a>
+  <a href="https://github.com/d8corp/rune-hub-react/blob/main/CHANGELOG.md" target="_blank">
+    <img src="https://img.shields.io/badge/Changelog-⋮-brightgreen" alt="rune-hub changelog">
+  </a>
+  <a href="https://d8corp.github.io/rune-hub-react/coverage/lcov-report" target="_blank">
+    <img src="https://github.com/d8corp/rune-hub-react/actions/workflows/tests.yml/badge.svg" alt="rune-hub tests">
+  </a>
+  <a href="https://github.com/d8corp/rune-hub-react/issues" target="_blank">
+    <img src="https://img.shields.io/github/issues-raw/d8corp/rune-hub-react" alt="Open issues">
+  </a>
+  <a href="https://github.com/d8corp/rune-hub-react/pulls" target="_blank">
+    <img src="https://img.shields.io/github/issues-pr-raw/d8corp/rune-hub-react" alt="Pull requests">
+  </a>
+</div>
+<br>
+
+`@rune-hub/react` provides [React](https://www.npmjs.com/package/react) integration for the reactive [rune-hub](https://www.npmjs.com/package/rune-hub) store, implementing a flexible subscription mechanism for state changes and mutation calls via specialized hooks.
+The [HubProvider](#hubprovider) component injects the store instance into the React context, while the [useRune](#userune) and [useAction](#useaction) hooks ensure reactive data synchronization and stable references to action functions, minimizing unnecessary re-renders.
+With full TypeScript support and straightforward integration, the library enables predictable state management architecture without boilerplate, while maintaining high performance and compatibility with modern build tools.
+
+[![stars](https://img.shields.io/github/stars/d8corp/rune-hub-react?style=social)](https://github.com/d8corp/rune-hub-react/stargazers)
+[![watchers](https://img.shields.io/github/watchers/d8corp/rune-hub-react?style=social)](https://github.com/d8corp/rune-hub-react/watchers)
+
+## Index
+
+<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>**[ [Links](#links) ]**</sup>
+
+## Install
+###### [🏠︎](#index) / Install [↓](#examples)
+
+**Requires [React 18+](https://www.npmjs.com/package/react) and [rune-hub 1.0+](https://www.npmjs.com/package/rune-hub).**
+
+Use with any modern bundler (Vite, Webpack, Rollup, etc.) or framework (Next.js, Remix, etc.).
+
+```shell
+npm i rune-hub @rune-hub/react
+```
+
+## Examples
+###### [🏠︎](#index) / Examples [↑](#install) [↓](#api)
+
+<sup>[Basic Counter](#basic-counter) • [Todo List](#todo-list)</sup>
+
+### Basic Counter
+###### [🏠︎](#index) / [Examples](#examples) / Basic Counter [↓](#todo-list)
+
+A simple counter demonstrating.
+
+```tsx
+import { slot } from 'rune-hub'
+import { useRune } from '@rune-hub/react'
+
+const count = () => 0
+const increment = () => slot(count).value++
+const decrement = () => slot(count).value--
+
+function Counter () {
+  const value = useRune(count)
+
+  return (
+    <div>
+      <button onClick={decrement}>-</button>
+      <span>{value}</span>
+      <button onClick={increment}>+</button>
+    </div>
+  )
+}
+```
+
+### Todo List
+###### [🏠︎](#index) / [Examples](#examples) / Todo List [↑](#basic-counter)
+
+A todo list showcasing rune-hub features.
+
+Store:
+```ts
+import { get, set, update } from 'rune-hub'
+
+export interface Todo {
+  id: number
+  text: string
+  done: boolean
+}
+
+let nextId = 1
+export const todos = (): Todo[] => []
+
+export const addTodo = (text: string) => {
+  get(todos).push({ id: nextId++, text, done: false })
+  update(todos)
+}
+
+export const toggleTodo = (todoId: number) => {
+  set(todos, get(todos).map(todo =>
+    todoId === todo.id ? { ...todo, done: !todo.done } : todo,
+  ))
+}
+```
+
+Component:
+```tsx
+import { useState } from 'react'
+import { useRune } from '@rune-hub/react'
+import { todos, addTodo, toggleTodo } from './store.ts'
+
+function TodoList () {
+  const todoList = useRune(todos)
+  const [text, setText] = useState('')
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault()
+
+    if (text.trim()) {
+      addTodo(text.trim())
+      setText('')
+    }
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <input
+          value={text}
+          onChange={e => setText(e.target.value)}
+          placeholder='What needs to be done?'
+        />
+        <button type='submit'>Add</button>
+      </form>
+      <ul>
+        {todoList.map(({ id, done, text }) => (
+          <li
+            key={id}
+            onClick={() => toggleTodo(id)}
+            style={{ textDecoration: done ? 'line-through' : 'none' }}
+          >
+            {text}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+```
+
+## API
+###### [🏠︎](#index) / API [↑](#examples) [↓](#links)
+
+<sup>[HubProvider](#hubprovider) • [useRune](#userune) • [useOn](#useon) • [useAction](#useaction) • [useHub](#usehub) • [useSlot](#useslot)</sup>
+
+### HubProvider
+###### [🏠︎](#index) / [API](#api) / HubProvider [↓](#userune)
+
+The `HubProvider` wraps your component tree and makes a Hub instance available to all child components via [useHub](#usehub) hook.
+
+```tsx
+import { Hub } from 'rune-hub'
+import { HubProvider } from '@rune-hub/react'
+
+const myHub = new Hub()
+
+function App () {
+  return (
+    <HubProvider value={myHub}>
+      <YourComponents />
+    </HubProvider>
+  )
+}
+```
+
+If you don't provide a Hub, the default `Hub.root` will be used.
+
+### useRune
+###### [🏠︎](#index) / [API](#api) / useRune [↑](#hubprovider) [↓](#useon)
+
+Uses `useSyncExternalStore` for proper synchronization with React's rendering cycle.
+Automatically subscribes to the Rune's slot and unsubscribes on unmount.
+
+```tsx
+import { rune, get } from 'rune-hub'
+import { useRune } from '@rune-hub/react'
+
+const count = () => 0
+const log = () => console.log(get(count))
+
+function Counter () {
+  const value = useRune(count)
+  // Subscribe to count changes
+  
+  useRune(log)
+  // Activate log effect
+
+  return <div>Count: {value}</div>
+}
+```
+
+### useOn
+###### [🏠︎](#index) / [API](#api) / useOn [↑](#userune) [↓](#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.
+
+```tsx
+import { rune, get } from 'rune-hub'
+import { useRune, useOn } from '@rune-hub/react'
+
+const count = () => 0
+const log = () => console.log(get(count))
+
+function Counter () {
+  const value = useRune(count)
+  // Subscribe to count changes
+
+  useOn(log)
+  // Activate log effect
+
+  return <div>Count: {value}</div>
+}
+```
+
+### useAction
+###### [🏠︎](#index) / [API](#api) / useAction [↑](#useon) [↓](#usehub)
+
+The hook automatically binds your action to context Hub.
+
+```tsx
+import { slot } from 'rune-hub'
+import { useRune, useAction } from '@rune-hub/react'
+
+const count = () => 0
+const increment = () => slot(count).value++
+const decrement = () => slot(count).value--
+
+function Counter () {
+  const value = useRune(count)
+  const inc = useAction(increment)
+  const dec = useAction(decrement)
+
+  return (
+    <div>
+      <button onClick={dec}>-</button>
+      <span>{value}</span>
+      <button onClick={inc}>+</button>
+    </div>
+  )
+}
+```
+
+### useHub
+###### [🏠︎](#index) / [API](#api) / useHub [↑](#useaction) [↓](#useslot)
+
+Returns the current Hub instance from context.
+
+```tsx
+import { useHub } from '@rune-hub/react'
+
+function MyComponent () {
+  const hub = useHub()
+
+  console.log(hub)
+
+  return <h1>Hello World!</h1>
+}
+```
+
+### useSlot
+###### [🏠︎](#index) / [API](#api) / useSlot [↑](#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.
+
+```tsx
+import { useEffect } from 'react'
+import { useSlot } from '@rune-hub/react'
+
+const count = () => 0
+
+function Counter () {
+  const slot = 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>
+}
+```
+
+The Slot instance is memoized and stable for the Rune and Hub combination.
+
+## Links
+###### [🏠︎](#index) / Links [↑](#examples)
+
+- **Creator**: [Mike Lysikov](http://github.com/d8corp)
+- **Source Code**: [GitHub](https://github.com/d8corp/rune-hub-react)
+- **Repository**: [npm](https://www.npmjs.com/package/@rune-hub/react) • [npmx](https://npmx.dev/package/@rune-hub/react)
+- **Utils**: [@rune-hub/utils](https://github.com/d8corp/rune-hub-utils)
+
+**Contributions are welcome!** Please feel free to submit [issues](https://github.com/d8corp/rune-hub-react/issues) and [pull requests](https://github.com/d8corp/rune-hub-react/pulls).
+
+[![issues](https://img.shields.io/github/issues-raw/d8corp/rune-hub-react)](https://github.com/d8corp/rune-hub-react/issues)
+[![pulls](https://img.shields.io/github/issues-pr-raw/d8corp/rune-hub-react)](https://github.com/d8corp/rune-hub-react/pulls)

package/context/HubContext/HubContext.d.ts

@@ -0,0 +1,27 @@
+import { Hub } from 'rune-hub';
+export declare const HubContext: import("react").Context<Hub>;
+/**
+ * Wraps your component tree and makes a Hub instance available to all child components.
+ *
+ * If you don't provide a Hub via the `value` prop, the default `Hub.root` will be used.
+ * All hooks like `useRune`, `useAction`, and `useHub` will use the Hub from this context.
+ *
+ * @see {@link https://github.com/d8corp/rune-hub-react#hubprovider}
+ *
+ * @example
+ * ```tsx
+ * import { Hub } from 'rune-hub'
+ * import { HubProvider } from '@rune-hub/react'
+ *
+ * const myHub = new Hub()
+ *
+ * function App () {
+ *   return (
+ *     <HubProvider value={myHub}>
+ *       <YourComponents />
+ *     </HubProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare const HubProvider: import("react").Provider<Hub>;

package/context/HubContext/HubContext.es6.js

@@ -0,0 +1,31 @@
+import { createContext } from 'react';
+import { Hub } from 'rune-hub';
+
+var HubContext = createContext(Hub.root);
+/**
+ * Wraps your component tree and makes a Hub instance available to all child components.
+ *
+ * If you don't provide a Hub via the `value` prop, the default `Hub.root` will be used.
+ * All hooks like `useRune`, `useAction`, and `useHub` will use the Hub from this context.
+ *
+ * @see {@link https://github.com/d8corp/rune-hub-react#hubprovider}
+ *
+ * @example
+ * ```tsx
+ * import { Hub } from 'rune-hub'
+ * import { HubProvider } from '@rune-hub/react'
+ *
+ * const myHub = new Hub()
+ *
+ * function App () {
+ *   return (
+ *     <HubProvider value={myHub}>
+ *       <YourComponents />
+ *     </HubProvider>
+ *   )
+ * }
+ * ```
+ */
+var HubProvider = HubContext.Provider;
+
+export { HubContext, HubProvider };

package/context/HubContext/HubContext.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var runeHub = require('rune-hub');
+
+var HubContext = react.createContext(runeHub.Hub.root);
+/**
+ * Wraps your component tree and makes a Hub instance available to all child components.
+ *
+ * If you don't provide a Hub via the `value` prop, the default `Hub.root` will be used.
+ * All hooks like `useRune`, `useAction`, and `useHub` will use the Hub from this context.
+ *
+ * @see {@link https://github.com/d8corp/rune-hub-react#hubprovider}
+ *
+ * @example
+ * ```tsx
+ * import { Hub } from 'rune-hub'
+ * import { HubProvider } from '@rune-hub/react'
+ *
+ * const myHub = new Hub()
+ *
+ * function App () {
+ *   return (
+ *     <HubProvider value={myHub}>
+ *       <YourComponents />
+ *     </HubProvider>
+ *   )
+ * }
+ * ```
+ */
+var HubProvider = HubContext.Provider;
+
+exports.HubContext = HubContext;
+exports.HubProvider = HubProvider;

package/context/HubContext/index.d.ts

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

package/context/HubContext/index.es6.js

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

package/context/HubContext/index.js

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

package/context/index.d.ts

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

package/context/index.es6.js

@@ -0,0 +1 @@
+import './HubContext/index.es6.js';

package/context/index.js

@@ -0,0 +1,4 @@
+'use strict';
+
+require('./HubContext/index.js');
+

package/hooks/index.d.ts

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

package/hooks/index.es6.js

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

package/hooks/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./useAction/index.js');
+require('./useHub/index.js');
+require('./useOn/index.js');
+require('./useRune/index.js');
+require('./useSlot/index.js');
+

package/hooks/useAction/index.d.ts

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

package/hooks/useAction/index.es6.js

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

package/hooks/useAction/index.js

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

package/hooks/useAction/useAction.d.ts

@@ -0,0 +1,24 @@
+import type { Fn } from 'rune-hub';
+/**
+ * The hook automatically binds your action to context Hub, ensuring all Rune mutations
+ * triggered inside the action are tracked within the same Hub instance.
+ *
+ * @template T - The action function type
+ * @param action - The action function to bind to the Hub
+ * @returns A stable callback that executes the action in the Hub context
+ * @see {@link https://github.com/d8corp/rune-hub-react#useaction}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ * const increment = () => slot(count).value++
+ *
+ * function Counter () {
+ *   const value = useRune(count)
+ *   const inc = useAction(increment)
+ *
+ *   return <button onClick={inc}>Count: {value}</button>
+ * }
+ * ```
+ */
+export declare function useAction<T extends Fn>(action: T): T;

package/hooks/useAction/useAction.es6.js

@@ -0,0 +1,39 @@
+import { __spreadArray, __read } from 'tslib';
+import { useCallback } from 'react';
+import '../useHub/index.es6.js';
+import { useHub } from '../useHub/useHub.es6.js';
+
+/**
+ * The hook automatically binds your action to context Hub, ensuring all Rune mutations
+ * triggered inside the action are tracked within the same Hub instance.
+ *
+ * @template T - The action function type
+ * @param action - The action function to bind to the Hub
+ * @returns A stable callback that executes the action in the Hub context
+ * @see {@link https://github.com/d8corp/rune-hub-react#useaction}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ * const increment = () => slot(count).value++
+ *
+ * function Counter () {
+ *   const value = useRune(count)
+ *   const inc = useAction(increment)
+ *
+ *   return <button onClick={inc}>Count: {value}</button>
+ * }
+ * ```
+ */
+function useAction(action) {
+    var hub = useHub();
+    return useCallback((function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return hub.use(function () { return action.apply(void 0, __spreadArray([], __read(args), false)); });
+    }), [hub, action]);
+}
+
+export { useAction };

package/hooks/useAction/useAction.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var react = require('react');
+require('../useHub/index.js');
+var useHub = require('../useHub/useHub.js');
+
+/**
+ * The hook automatically binds your action to context Hub, ensuring all Rune mutations
+ * triggered inside the action are tracked within the same Hub instance.
+ *
+ * @template T - The action function type
+ * @param action - The action function to bind to the Hub
+ * @returns A stable callback that executes the action in the Hub context
+ * @see {@link https://github.com/d8corp/rune-hub-react#useaction}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ * const increment = () => slot(count).value++
+ *
+ * function Counter () {
+ *   const value = useRune(count)
+ *   const inc = useAction(increment)
+ *
+ *   return <button onClick={inc}>Count: {value}</button>
+ * }
+ * ```
+ */
+function useAction(action) {
+    var hub = useHub.useHub();
+    return react.useCallback((function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return hub.use(function () { return action.apply(void 0, tslib.__spreadArray([], tslib.__read(args), false)); });
+    }), [hub, action]);
+}
+
+exports.useAction = useAction;

package/hooks/useHub/index.d.ts

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

package/hooks/useHub/index.es6.js

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

package/hooks/useHub/index.js

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

package/hooks/useHub/useHub.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Returns the current Hub instance from context.
+ *
+ * If no Hub is provided via HubProvider, returns the default `Hub.root` instance.
+ *
+ * @returns The current Hub instance
+ * @see {@link https://github.com/d8corp/rune-hub-react#usehub}
+ *
+ * @example
+ * ```tsx
+ * function MyComponent () {
+ *   const hub = useHub()
+ *
+ *   console.log(hub)
+ *
+ *   return <h1>Hello World!</h1>
+ * }
+ * ```
+ */
+export declare function useHub(): import("rune-hub").Hub;

package/hooks/useHub/useHub.es6.js

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import '../../context/index.es6.js';
+import { HubContext } from '../../context/HubContext/HubContext.es6.js';
+
+/**
+ * Returns the current Hub instance from context.
+ *
+ * If no Hub is provided via HubProvider, returns the default `Hub.root` instance.
+ *
+ * @returns The current Hub instance
+ * @see {@link https://github.com/d8corp/rune-hub-react#usehub}
+ *
+ * @example
+ * ```tsx
+ * function MyComponent () {
+ *   const hub = useHub()
+ *
+ *   console.log(hub)
+ *
+ *   return <h1>Hello World!</h1>
+ * }
+ * ```
+ */
+function useHub() {
+    return useContext(HubContext);
+}
+
+export { useHub };

package/hooks/useHub/useHub.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+require('../../context/index.js');
+var HubContext = require('../../context/HubContext/HubContext.js');
+
+/**
+ * Returns the current Hub instance from context.
+ *
+ * If no Hub is provided via HubProvider, returns the default `Hub.root` instance.
+ *
+ * @returns The current Hub instance
+ * @see {@link https://github.com/d8corp/rune-hub-react#usehub}
+ *
+ * @example
+ * ```tsx
+ * function MyComponent () {
+ *   const hub = useHub()
+ *
+ *   console.log(hub)
+ *
+ *   return <h1>Hello World!</h1>
+ * }
+ * ```
+ */
+function useHub() {
+    return react.useContext(HubContext.HubContext);
+}
+
+exports.useHub = useHub;

package/hooks/useOn/index.d.ts

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

package/hooks/useOn/index.es6.js

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

package/hooks/useOn/index.js

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

package/hooks/useOn/useOn.d.ts

@@ -0,0 +1,23 @@
+import type { Rune } from 'rune-hub';
+/**
+ * Activates a Rune effect without subscribing to its value.
+ * The hook automatically subscribes to the Rune's slot on mount and unsubscribes on unmount.
+ *
+ * @param rune - The Rune to activate
+ * @see {@link https://github.com/d8corp/rune-hub-react#useon}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ * const log = () => console.log(get(count))
+ *
+ * function Counter () {
+ *   const value = useRune(count)
+ *
+ *   useOn(log)
+ *
+ *   return <div>Count: {value}</div>
+ * }
+ * ```
+ */
+export declare function useOn(rune: Rune): void;

package/hooks/useOn/useOn.es6.js

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import '../useSlot/index.es6.js';
+import { useSlot } from '../useSlot/useSlot.es6.js';
+
+/**
+ * Activates a Rune effect without subscribing to its value.
+ * The hook automatically subscribes to the Rune's slot on mount and unsubscribes on unmount.
+ *
+ * @param rune - The Rune to activate
+ * @see {@link https://github.com/d8corp/rune-hub-react#useon}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ * const log = () => console.log(get(count))
+ *
+ * function Counter () {
+ *   const value = useRune(count)
+ *
+ *   useOn(log)
+ *
+ *   return <div>Count: {value}</div>
+ * }
+ * ```
+ */
+function useOn(rune) {
+    var slot = useSlot(rune);
+    useEffect(function () { return slot.on(); }, [slot]);
+}
+
+export { useOn };

package/hooks/useOn/useOn.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+require('../useSlot/index.js');
+var useSlot = require('../useSlot/useSlot.js');
+
+/**
+ * Activates a Rune effect without subscribing to its value.
+ * The hook automatically subscribes to the Rune's slot on mount and unsubscribes on unmount.
+ *
+ * @param rune - The Rune to activate
+ * @see {@link https://github.com/d8corp/rune-hub-react#useon}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ * const log = () => console.log(get(count))
+ *
+ * function Counter () {
+ *   const value = useRune(count)
+ *
+ *   useOn(log)
+ *
+ *   return <div>Count: {value}</div>
+ * }
+ * ```
+ */
+function useOn(rune) {
+    var slot = useSlot.useSlot(rune);
+    react.useEffect(function () { return slot.on(); }, [slot]);
+}
+
+exports.useOn = useOn;

package/hooks/useRune/index.d.ts

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

package/hooks/useRune/index.es6.js

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

package/hooks/useRune/index.js

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

package/hooks/useRune/useRune.d.ts

@@ -0,0 +1,24 @@
+import type { Rune } from 'rune-hub';
+/**
+ * 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.
+ *
+ * @template T - The Rune type
+ * @param rune - The Rune to subscribe to
+ * @returns The current value of the Rune
+ * @see {@link https://github.com/d8corp/rune-hub-react#userune}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ *
+ * function Counter () {
+ *   const value = useRune(count)
+ *
+ *   return <div>Count: {value}</div>
+ * }
+ * ```
+ */
+export declare function useRune<T extends Rune>(rune: T): ReturnType<T>;

package/hooks/useRune/useRune.es6.js

@@ -0,0 +1,37 @@
+import { useMemo, useEffect, useCallback, useSyncExternalStore } from 'react';
+import '../useSlot/index.es6.js';
+import { useSlot } from '../useSlot/useSlot.es6.js';
+
+/**
+ * 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.
+ *
+ * @template T - The Rune type
+ * @param rune - The Rune to subscribe to
+ * @returns The current value of the Rune
+ * @see {@link https://github.com/d8corp/rune-hub-react#userune}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ *
+ * function Counter () {
+ *   const value = useRune(count)
+ *
+ *   return <div>Count: {value}</div>
+ * }
+ * ```
+ */
+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; });
+}
+
+export { useRune };

package/hooks/useRune/useRune.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+require('../useSlot/index.js');
+var useSlot = require('../useSlot/useSlot.js');
+
+/**
+ * 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.
+ *
+ * @template T - The Rune type
+ * @param rune - The Rune to subscribe to
+ * @returns The current value of the Rune
+ * @see {@link https://github.com/d8corp/rune-hub-react#userune}
+ *
+ * @example
+ * ```tsx
+ * const count = () => 0
+ *
+ * function Counter () {
+ *   const value = useRune(count)
+ *
+ *   return <div>Count: {value}</div>
+ * }
+ * ```
+ */
+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; });
+}
+
+exports.useRune = useRune;

package/hooks/useSlot/index.d.ts

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

package/hooks/useSlot/index.es6.js

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

package/hooks/useSlot/index.js

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

package/hooks/useSlot/useSlot.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 = 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>
+ * }
+ * ```
+ */
+export declare function useSlot<T>(rune: Rune<T>): Slot<T>;

package/hooks/useSlot/useSlot.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 = 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>
+ * }
+ * ```
+ */
+function useSlot(rune) {
+    var hub = useHub();
+    return useMemo(function () { return hub.use(function () { return slot(rune); }); }, [rune, hub]);
+}
+
+export { useSlot };

package/hooks/useSlot/useSlot.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 = 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>
+ * }
+ * ```
+ */
+function useSlot(rune) {
+    var hub = useHub.useHub();
+    return react.useMemo(function () { return hub.use(function () { return runeHub.slot(rune); }); }, [rune, hub]);
+}
+
+exports.useSlot = useSlot;

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './hooks';

package/index.es6.js

@@ -0,0 +1,8 @@
+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 { useHub } from './hooks/useHub/useHub.es6.js';
+export { useOn } from './hooks/useOn/useOn.es6.js';
+export { useRune } from './hooks/useRune/useRune.es6.js';
+export { useSlot } from './hooks/useSlot/useSlot.es6.js';

package/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./context/index.js');
+require('./hooks/index.js');
+var HubContext = require('./context/HubContext/HubContext.js');
+var useAction = require('./hooks/useAction/useAction.js');
+var useHub = require('./hooks/useHub/useHub.js');
+var useOn = require('./hooks/useOn/useOn.js');
+var useRune = require('./hooks/useRune/useRune.js');
+var useSlot = require('./hooks/useSlot/useSlot.js');
+
+
+
+exports.HubContext = HubContext.HubContext;
+exports.HubProvider = HubContext.HubProvider;
+exports.useAction = useAction.useAction;
+exports.useHub = useHub.useHub;
+exports.useOn = useOn.useOn;
+exports.useRune = useRune.useRune;
+exports.useSlot = useSlot.useSlot;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@rune-hub/react",
+  "version": "1.0.0",
+  "description": "Integrating RuneHub with React",
+  "main": "index.js",
+  "module": "index.es6.js",
+  "jsnext:main": "index.es6.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "innetjs release",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "speed": "innetjs run speed.test.ts",
+    "release": "innetjs release -p",
+    "patch": "innetjs patch",
+    "minor": "innetjs minor",
+    "major": "innetjs major",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/d8corp/rune-hub-react.git"
+  },
+  "keywords": [
+    "watch",
+    "state",
+    "stateful",
+    "reaction",
+    "reactions",
+    "react",
+    "reactive",
+    "observe",
+    "observable",
+    "front-end"
+  ],
+  "author": "Mikhail Lysikov <d8corp@mail.ru>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/d8corp/rune-hub-react/issues"
+  },
+  "homepage": "https://github.com/d8corp/rune-hub-react",
+  "dependencies": {
+    "react": ">=18",
+    "rune-hub": "^1.0.0"
+  }
+}