open-index/open-npm huggingface dataset:
npm package: @reativ/eslint-config
Description: ESLint configuration used by Reativ.
Latest version: 1.1.0

# Reativ ESLint config

## Whats included?

- Standard config base;
- React plugin;
- React Hooks plugin;
- JSX a11y plugin;
- Prettier;

## Setup

### React (with Next.js)

Install dependencies:
```
npm i -D eslint @reativ/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": [
    "@reativ/eslint-config/next", 
    "next/core-web-vitals"
  ]
}
```

### React (without Next.js)

Install dependencies:
```
npm i -D eslint @reativ/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@reativ/eslint-config/react"
}
```

### Node.js

Install dependencies:
```
npm i -D eslint @reativ/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@reativ/eslint-config/node"
}
```

> You can also use a `.eslintrc.js` instead of JSON if you prefer.
npm package: @reative/core
Description: It has never been easier to build high-quality apps using web technology
Author: Reative Team
Latest version: 6.0.0

# Reative Records [![CI](https://github.com/stewwan/reative/workflows/CI/badge.svg)](https://github.com/stewwan/reative/actions)

## Docs

https://docs.reative.dev

## License

MIT
npm package: @reative/records
Description: It has never been easier to build high-quality apps using web technology
Author: Reative Team
Latest version: 1.7.0

# Reative Records [![pipeline status](https://gitlab.com/reative-team/test-records/badges/master/pipeline.svg)](https://gitlab.com/reative-team/test-records/commits/master) [![coverage report](https://gitlab.com/reative-team/test-records/badges/master/coverage.svg)](https://gitlab.com/reative-team/test-records/commits/master) [![Conventional Commits](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](https://conventionalcommits.org)

## Docs

https://docs.reative.dev

## License

MIT
npm package: @reatom/core-v1
Description: Adapter for Reatom v1
Author: artalar
Latest version: 3.1.9

Adapter package for migration from core@1 to core@3.

## Migration guide

before

```js
import { declareAction, declareAtom, map, combine } from '@reatom/core-v1'

const add = declareAction()
const n1Atom = declareAtom(0, (on) => [
  on(add, (state, value) => state + value),
])
const n2Atom = declareAtom(0, (on) => [
  on(add, (state, value) => state + value),
])
const sumAtom = map(combine([n1Atom, n2Atom]), ([n1, n2]) => n1 + n2)
const rootAtom = combine({ sumAtom })
```

than

```js
import { declareAction, declareAtom, combine, v3toV1 } from '@reatom/core-v1'
import { atom } from '@reatom/core'

const add = declareAction()
const n1Atom = declareAtom(0, (on) => [
  on(add, (state, value) => state + value),
])
const n2Atom = declareAtom(0, (on) => [
  on(add, (state, value) => state + value),
])
const sumAtom = atom((ctx) => ctx.spy(n1Atom.v3atom) + ctx.spy(n2Atom.v3atom))
const rootAtom = combine({ sumAtom: v3toV1(sumAtom) })
```

than

```js
import { combine, v3toV1 } from '@reatom/core-v1'
import { action, atom } from '@reatom/core'

const add = action()
const n1Atom = atom((ctx, state = 0) => {
  ctx.spy(add).forEach(({ payload }) => (state += payload))
  return state
})
const n2Atom = atom((ctx, state = 0) => {
  ctx.spy(add).forEach(({ payload }) => (state += payload))
  return state
})
const sumAtom = atom((ctx) => ctx.spy(n1Atom) + ctx.spy(n2Atom))
const rootAtom = combine({ sumAtom: v3toV1(sumAtom) })
```

finally

```js
import { combine, v3toV1 } from '@reatom/core-v1'
import { action, atom } from '@reatom/core'

const n1Atom = atom(0)
const n2Atom = atom(0)
const add = action((ctx, value) => {
  n1Atom(ctx, (state) => state + value)
  n2Atom(ctx, (state) => state + value)
})
const sumAtom = atom((ctx) => ctx.spy(n1Atom) + ctx.spy(n2Atom))
const rootAtom = combine({ sumAtom: v3toV1(sumAtom) })
```
npm package: @reatom/form-web
Description: Reatom for form-web
Author: artalar
Latest version: 3.2.2

## Installation

```sh
npm i @reatom/form-web
```

## Usage

**The API is unstable and will be changed during minor updates!** Sorry for the semver mismatch, the first releases contained A LOT OF bugs and should have been released with an "experimental" tag. Until this note is present here, please don't consider the library stable.
npm package: @reatom/framework
Description: Reatom for framework
Author: artalar
Latest version: 3.4.68

This is a meta package which aggregates general Reatom packages for better handling async logic and models coupling. This package helps to reduce imports boilerplate and simplify dependencies management.

Docs around this package and it combination usage you could find in the [tutorial](https://www.reatom.dev/getting-started/setup/).

Included packages:

- [@reatom/async](https://www.reatom.dev/package/async)
- [@reatom/core](https://www.reatom.dev/package/core)
- [@reatom/effects](https://www.reatom.dev/package/effects)
- [@reatom/hooks](https://www.reatom.dev/package/hooks)
- [@reatom/lens](https://www.reatom.dev/package/lens)
- [@reatom/logger](https://www.reatom.dev/package/logger)
- [@reatom/primitives](https://www.reatom.dev/package/primitives)
- [@reatom/utils](https://www.reatom.dev/package/utils)

All size is around [6.5kb](https://bundlejs.com/?q=%40reatom%2Fasync%2C%40reatom%2Fcore%2C%40reatom%2Feffects%2C%40reatom%2Fhooks%2C%40reatom%2Flens%2C%40reatom%2Fprimitives%2C%40reatom%2Futils&config=%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22%40reatom%2Flogger%22%5D%7D%7D) (the logger package is not included in prod build normally).

> Also, we have a [package for testing](https://www.reatom.dev/package/testing)!

<!-- TODO -->
<!-- All exported variables: -->
npm package: @reatom/logger
Description: Reatom for logger
Author: artalar
Latest version: 3.8.4

Tiny logger with a couple nice configurations.

> included in [@reatom/framework](https://www.reatom.dev/package/framework)

## Usage

All atoms and actions with names or without underscore in the name logs automatically

```ts
import { connectLogger, createLogBatched } from '@reatom/logger'

if (import.meta.env.DEV) {
  connectLogger(ctx)
}

// OR

connectLogger(
  ctx,
  // optional configuration
  {
    // the length of the atom history (patches) to store
    history: 10,
    // `false` by default to made your logs short
    showCause: false,
    // `true` by default to made your logs clear
    skipUnnamed: true,
    // fine tuning :)
    skip: (patch: AtomCache) => false,
    // `createLogBatched` by default to not spam you a lot
    // you could pass regular `console.log` here
    log: createLogBatched(
      // optional configuration
      {
        // 500ms by default
        debounce: 500,
        // 5000ms by default, it helps to not stuck with WS and so on
        limit: 5000,
        // `toLocaleTimeString` by default
        getTimeStamp: () => new Date().toLocaleTimeString()

        log: console.log,
        // `true` by default to group logs by name
        shouldGroup: true,
      },
    ),
    // You could customize a logs group: `Reatom ${domain}N transactions`
    domain: '',
  },
)
```

Every log record includes a number in the start of the name to fix autosorting keys in a console.

Here is how it looks like ([from this example](https://www.reatom.dev/examples#search-component)):

<img loading="lazy" width="100%" alt="logger console output" src="https://www.reatom.dev/assets/logger_example.png">
npm package: @reatom/npm-cookie-baker
Description: Reatom for cookies by cookie-baker
Author: BataevDaniil
Latest version: 3.1.5

Adapter for [cookie-baker](https://github.com/BataevDaniil/cookie-baker).

## Install

```
npm i @reatom/npm-cookie-baker @cookie-baker/core
```

or

```sh
yarn add @reatom/npm-cookie-baker @cookie-baker/core
```

### browser

```
yarn add @cookie-baker/browser
```

or

```
npm install @cookie-baker/browser
```

### node

```
yarn add @cookie-baker/node
```

or

```
npm install @cookie-baker/node
```

## Example
[codesandbox](https://codesandbox.io/s/reatom-cookie-baker-ec6h63-ec6h63?file=/src/App.tsx)


```ts
import {
  Cookie as CookieClient,
  createRealTimeCookie,
} from '@cookie-baker/browser'
import { reatomCookie } from '@reatom/npm-cookie-baker'

type CookieModel = {
  ga?: string
  adc?: string
}

const cookie = new CookieClient<CookieModel>()
const realTimeCookie = createRealTimeCookie(cookie)

const { cookieAtom, set, remove } = reatomCookie(cookie, realTimeCookie)

const ctx = createContext()
ctx.subscribe(cookieAtom, console.log)

set(ctx, 'adc', 'dasf')
remove(ctx, 'ga')
cookie.set('adc', 'set-cookie-from-imperative-modify')
```
npm package: @reatom/npm-history
Description: Reatom for npm-history
Author: artalar
Latest version: 3.1.8

## Installation

```sh
npm i @reatom/npm-history
```

## Usage

You should setup `historyAtom` in the root of your app, before other dependent atoms will touch the ctx.

```ts
import { historyAtom } from '@reatom/npm-history'
import { createBrowserHistory } from 'history'

historyAtom(ctx, createBrowserHistory())
```

```ts
import { History, Location, To, Blocker } from 'history'

export interface HistoryAtom extends AtomMut<History> {
  back: Action<[]>
  block: Action<[blocker: Blocker], () => void>
  forward: Action<[]>
  go: Action<[delta: number]>
  location: Atom<Location>
  push: Action<[to: To, state?: any]>
  replace: Action<[to: To, state?: any]>
}

export const historyAtom: HistoryAtom
```
npm package: @reatom/npm-solid-js
Description: Reatom bindings for solid-js
Author: artalar
Latest version: 3.6.2

This is the binding for the [Solid](https://solidjs.com) view framework. The reason to use these bindings is the Reatom ecosystem. We have a lot of packages and helpers to handle basic UI logic, including network caching, data persistence, and complex flow description.

## Installation

```sh
npm i @reatom/npm-solid-js
```

Also, you need to be installed `@reatom/core` or `@reatom/framework` and `solid-js`.

> Read [the core docs](https://www.reatom.dev/core) first for production usage.

## Usage

Try it now: https://stackblitz.com/edit/reatomnpm-solid-js?file=src%2FApp.tsx

### Setup reatomContext

The first time, you need to add the Reatom provider to the root of your application.

```tsx
import { createCtx, connectLogger } from '@reatom/framework'
import { reatomContext } from '@reatom/npm-solid-js'

const ctx = createCtx()
connectLogger(ctx)

render(
  () => (
    <reatomContext.Provider value={ctx}>
      <App />
    </reatomContext.Provider>
  ),
  document.getElementById('root')!,
)
```

### useAtom hook

Now you will be able to use Reatom hooks.

```tsx
import { atom } from '@reatom/framework'
import { useAtom } from '@reatom/npm-solid-js'

const countAtom = atom(0, 'countAtom')

const App: Component = () => {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      Count value is
      <button onClick={() => setCount((c) => c + 1)}>{count()}</button>
    </div>
  )
}
```

<!-- ## Inline atoms

Of course, you could create atoms inside a component's body to scope your state. Alternatively, you could pass the initial state to `useAtom` to create a new atom and subscribe to it. It is useful to use atoms instead of native Solid signals if you want better logging or if you want your logic to be coupled with Reatom.

> Reatom allows you track the reason of each update and async effect: https://www.reatom.dev/guides/debug/

```tsx
import { useAtom } from '@reatom/npm-solid-js'

const CountingComponent = () => {
  const [count, setCount] = useAtom(0)

  return (
    <div>
      Count value is
      <button onClick={() => setCount((c) => c + 1)}>{count()}</button>
    </div>
  )
}
``` -->

### useCtx hook

If you need to get the `ctx` from the context, you could use the shortcut hook `useCtx`. With `ctx` in the component body, you can manipulate subscriptions more flexibly with Solid's `onMount`, `onCleanup`, and so on.

## Examples

### Dynamic atom creation

This example shoes how to use [atomization](https://www.reatom.dev/recipes/atomization) to improve editable fields performance, persists it to localStorage.

https://stackblitz.com/edit/reatomnpm-solid-js-mssqxj?file=src/model.ts,src/App.tsx
npm package: @reatom/npm-svelte
Description: Reatom adapter for Svelte
Author: artalar
Latest version: 3.1.4

## Installation

```sh
npm i @reatom/npm-svelte
```

## Usage

First of all, you need to setup `ctx` for svelte context in your root component.

```ts
import { setupCtx } from '@reatom/npm-svelte'

setupCtx()
```

We recommend to add logger for dev environment, from [@reatom/logger](https://www.reatom.dev/package/logger) directly, or from [@reatom/framework](https://www.reatom.dev/package/framework).

```ts
import { createCtx, connectLogger } from '@reatom/framework'
import { setupCtx } from '@reatom/npm-svelte'
import { dev } from '$app/environment' // SvelteKit

const ctx = createCtx()
if (dev) connectLogger(ctx)
setupCtx(ctx)
```

Than you can bind `subscribe` and `set` (for mutable atoms) to your atoms by `withSvelte` and use it as a store.

> **IMPORTANT**, use `withSvelte` only in component `script` tag, as it reads the context.

```svelte
<script>
  import { atom } from '@reatom/core'
  import { withSvelte } from '@reatom/npm-svelte'

  const count = atom(0).pipe(withSvelte)
</script>

<button on:click={() => $count++}>
	Clicked {$count} {$count === 1 ? 'time' : 'times'}
</button>
```

Of course, you could describe atoms as a [separate module](https://www.reatom.dev/guides/architecture) and bind actions with the same `withSvelte(anAction).set`.

[repl](https://svelte.dev/repl/416d3e07447440729416e77e45071b87?version=3.55.0).

```svelte
<script>
	import { withSvelte } from '@reatom/npm-svelte'
  import { countAtom, timesAtom, increment } from './model'

	const count = withSvelte(countAtom)
	const times = withSvelte(timesAtom)
	const handleIncrement = withSvelte(increment).set
</script>

<button on:click={handleIncrement}>
	Clicked {$count} {$times}
</button>
```

```ts
// model.ts
import { atom, action } from '@reatom/core'

export const countAtom = atom(0, 'countAtom')
export const timesAtom = atom(
  (ctx) => (ctx.spy(countAtom) === 1 ? 'time' : 'times'),
  'timesAtom',
)
export const increment = action(
  (ctx) => countAtom(ctx, (s) => ++s),
  'increment',
)
```

### Data fetching and Svelte

https://svelte.dev/repl/0613e23e6aa74246afad6d726d6c5a33?version=3.55.0
npm package: @reatom/npm-vue
Description: Reatom adapter for Vue
Author: krulod
Latest version: 3.6.1

Reatom integration for Vue Composition API.

## Installation

```sh
npm i @reatom/npm-vue
```

## API

### `createReatomVue`

A function that creates a [Vue App plugin](https://vuejs.org/guide/reusability/plugins.html#plugins) which you can `use`. Accepts a `Ctx` object.

```ts
import { createCtx } from '@reatom/core'
import { createReatomVue } from '@reatom/npm-vue'

const ctx = createCtx()
app.use(createReatomVue(ctx))
```

### `useCtx`

A function to inject a `Ctx` object provided by `createReatomVue`. Used by different APIs internally.

### `reatomRef`

A function that turns a Reatom atom into a Vue ref which is updated on target atom changes. A returned pseudo-ref is mutable if a target atom is mutable itself.

Because all Reatom APIs require `ctx` to be available, you must either provide it with `createReatomVue` plugin or pass it explicitly as a second argument to `reatomRef`.

```ts
import { atom } from '@reatom/core'
import { reatomRef } from '@reatom/npm-vue'

const count = atom(0, 'count')

// turn an atom into a ref-like object
const countRef = reatomRef(count)
// selectors are supported as well
const countDoubleRef = reatomRef((ctx) => ctx.spy(count) * 2)

countRef // Ref<number>
countRef.value // 0
countRef.value = 3 // 3

countDoubleRef // Readonly<Ref<number>>
countDoubleRef.value // 6
```

### `useAction`

Binds an action or a function to a `ctx` value.

```vue
<script>
import * as model from './model'
import { useAction } from '@reatom/npm-vue'

const doSomething = useAction(model.doSomething)
</script>

<template>
  <BigBrightButton @click="doSomething">Do it!</BigBrightButton>
</template>
```

If you don't have a declared action, you can pass a plain function to `useAction` and give it a name using the second parameter:

```ts
const doSomething = useAction((ctx) => {
  doSomethingBad(ctx)
  doSomethingGood(ctx)
}, 'doSomething')
```

To bind an action to a custom `Ctx` object, pass it as a field of a config object:

```ts
const doSomething = useAction(model.doSomething, { ctx: differentCtx })

const doSomething = useAction(
  (ctx) => {
    doSomethingBad(ctx)
    doSomethingGood(ctx)
  },
  { name: 'doSomething', ctx: differentCtx },
)
```

### `useCtxBind`

Creates a function for binding multiple functions to a `ctx` at any time.

```ts
const aAction = action('aAction')
const bAction = action('bAction')
const cAction = action('cAction')

const bind = useCtxBind()
const aFn = bind(aAction)
const bFn = bind(bAction)
const cFn = bind(cAction)
```

## Example

See the [source code](https://github.com/artalar/reatom/tree/v3/examples/vue-search) or open in [StackBlitz](https://stackblitz.com/github/artalar/reatom/tree/v3/examples/vue-search)

## Usage

Setup `ctx` somewhere in the app root:

```ts
import { createCtx } from '@reatom/core'
import { createReatomVue } from '@reatom/npm-vue'

const ctx = createCtx()
app.use(createReatomVue(ctx))
```

Then use Reatom state in your components:
npm package: @reatom/npm-zod
Description: Reatom for npm-zod
Author: artalar
Latest version: 3.11.0

This utility helps to deserialize a plain (JSON) data structure to a reactive data model.

## Installation

```sh
npm i @reatom/npm-zod
```

## Usage

You can find an example here: https://github.com/artalar/reatom/tree/v3/examples/react-table-atomization

```ts
import { parseAtoms } from '@reatom/framework'
import { reatomZod } from '@reatom/npm-zod'
import * as z from 'zod'

export const User = z.object({
  id: z.string().readonly(),
  email: z.string().readonly(),
  name: z.string(),
  age: z.number().optional(),
})

const KEY = 'user-data'
export const model = reatomZod(User, {
  sync(ctx) {
    localStorage.setItem(KEY, JSON.stringify(parseAtoms(ctx, model)))
  },
  initState: JSON.parse(localStorage.getItem(KEY) || '{}'),
})
```

## Mapping

This section describes how types coverts to a specific atoms.

`union` type creates an atom with all possible state variants and `discriminatedUnion` creates an atom with all possible atoms variants.
npm package: @reatom/react-v1
Description: Reatom for react-v1
Author: artalar
Latest version: 3.1.7



This is compatible package which allow you to use `@reatom/core-v1` with react. All docs is [here](https://www.reatom.dev/package/npm-react/).

## Setup batching for old React

For React 16 and 17 you need to setup batching by yourself in the root fo your app

For `react-dom`

```js
import { unstable_batchedUpdates } from 'react-dom'
import { setupBatch } from '@reatom/react-v1'

setupBatch(unstable_batchedUpdates)``
```

For `react-native`

```js
import { unstable_batchedUpdates } from 'react-native'
import { setupBatch } from '@reatom/react-v1'

setupBatch(unstable_batchedUpdates)``
```
npm package: @reatom/testing
Description: Reatom testing package
Author: artalar
Latest version: 3.4.9

Small context wrapper simplify your mocking and testing.

## Installation

```sh
npm i @reatom/testing
```

## Usage

```ts
import { createTestCtx, mockFn } from '@reatom/testing'
```

```ts
export interface TestCtx extends Ctx {
  mock<T>(anAtom: Atom<T>, fallback: T): Unsubscribe

  mockAction<T>(anAction: Action<any[], T>, cb: Fn<[Ctx], T>): Unsubscribe

  subscribeTrack<T, F extends Fn<[T]>>(
    anAtom: Atom<T>,
    cb?: F,
  ): F & {
    unsubscribe: Unsubscribe
    calls: ReturnType<typeof mockFn<[T], any>>['calls']
    lastInput: ReturnType<typeof mockFn<[T], any>>['lastInput']
  }
}

declare function mockFn<I extends any[], O>(
  fn?: (...input: I) => O,
): ((...input: I) => O) & {
  calls: Array<{ i: I; o: O }>
  lastInput: Fn<[], I[0]>
}
```
npm package: @reatom/timer
Description: Reatom for timers
Author: artalar
Latest version: 3.6.2

Timer model to manage some countdown. Useful for [classic pomodoro](https://github.com/artalar/reatom/tree/v3/examples/react-pomodoro) or any time-progress states, like [notifications](https://github.com/artalar/reatom/tree/v3/examples/react-notifications).

```ts
import { reatomTimer } from '@reatom/timer'

// all options are not required, here are the defaults
const pomodoroAtom = reatomTimer({
  name: 'pomodoroAtom',
  interval: 1000, // `1000`ms - tick each second. Than lower, then more precise
  delayMultiplier: 1000, // `1000`ms allow to pass seconds to startTimer. Use `1` to pass ms
  progressPrecision: 2, // progress will be rounded to 2 digits after dot
  resetProgress: true, // progress will be reset to 0 on end of timer
})
```

The timer itself contains the ms remaining to the end of the timer (`0` before start). Here is the list of available states and methods:

- **progressAtom** (`Atom<number>`) - from 0 to 1, `(delay - remains) / delay`
- **intervalAtom** (`AtomMut<number>`) - interval of ticks in ms
- **startTimer** (`Action<[delay: number, passed?: number], Promise<void>>`) - start timer with the delay and optional start point
- **stopTimer** (`Action<[], void>`) - stop timer manually
- **pauseAtom** (`AtomMut<boolean>`) - allow to pause timer
- **pause** (`Action<[], boolean>`) - switch pause state
- **endTimer** (`Action<[], void>`) - track end of timer. Do not call manually!

## Examples

- [classic pomodoro](https://github.com/artalar/reatom/tree/v3/examples/react-pomodoro)
- [notifications progress](https://github.com/artalar/reatom/tree/v3/examples/react-notifications)
npm package: @reaviz/react-use-fuzzy
Description: React hook for client side fuzzy search using Fuse.js
Latest version: 1.0.3

# react-use-fuzzy

A react hook in Typescript for client side fuzzy search using [Fuse.js](https://github.com/krisk/fuse).

## 🚀  Install
```bash
$ npm install --save @reaviz/react-use-fuzzy
```

## 🎈 Usage
```typescript
import React, { useState } from 'react';
import { useFuzzy } from '@reaviz/react-use-fuzzy';


const productsData: Product[] = [
  {
    id: 1,
    name: 'T-shirt',
  },
  {
    id: 2,
    name: 'Short',
  },
];

export const App: FC = () => {
  const { result, keyword, search } = useFuzzy<Product>(productsData, {
    keys: ['name'],
  });

  return (
    <div className='App'>
      <header className='App-header'>
        <input
          type='text'
          placeholder='Search products'
          value={keyword}
          onChange={(e) => search(e.target.value)}
        />
        <pre>
          {JSON.stringify(result, null, 2)}
        </pre>
      </header>
    </div>
  );
};
```
npm package: @reaxi/events
Description: -   events (system)
Author: Andrew Colman
Latest version: 0.2.0

### @reaxi/events

-   events (system)

observer pattern implementation : PubSub and Topic Based alternative

## - Pub (Publisher) & Sub (Subscriber)

```ts
import { PubSub } from '@reaxi/events';

const s = new PubSub();

s.subscribe(Function);

s.publish(payload);

s.unsubscribe(Function);

//example:

const myFn = (a: string) => console.log(a);

s.subscribe(myFn);

s.publish('Hello There');
```

## - Topic Based (EventSystem)

```ts
import { EventSystem } from '@reaxi/events';

const ev = new EventSystem();

ev.register('topic', Function);

ev.emit('topic', PayloadData);

ev.unregister('topic', Function);
```

### Example:

```ts
const ev = new EventSystem<string, any>(); // string payload, and any topic keys

const fn1 = a => console.log(a);
const fn2 = b => console.log(`data: ${b}`);
const fn3 = c => console.log(c.toUpperCase());

ev.register('topic 1', fn1);
ev.register('topic 2', fn2);
ev.register('topic 3', fn3);

ev.emit('topic 1', 'hello');
ev.emit('topic 1', 'hello');
ev.emit('topic 1', 'hello');
```

### Typescript example:

```ts
const ev = new EventSystem<
    string, // payload type
    {
        ['preAction'];
        ['showMessage'];
        ['postAction'];
    } // topics types
>();

function setup() {
    ev.register('preAction', console.log('starting...'));
    ev.register('showMessage', message => console.log(message)); // will show "hello there"
    ev.register('postAction', () => console.log('done'));
}

function main() {
    ev.emit('preAction');
    //
    // program functions...
    //
    ev.emit('showMessage', 'hello there');
    ev.emit('postAction');
}

setup();
main();
```

### Custom Class example:

```ts
type HooksPayload = string;

type Topics = {
    ['bootstrap'];
    ['onRequest'];
    ['onCleanup'];
};

class Hooks extends EventSystem<HooksPayload, Topics> {
    //... constructor, methods, properties
}

const hooks = new Hooks();

// EventSystem methods:
// hooks.register()
// hooks.emit()
```
npm package: @reaxi/node-detect-runtime
Description: detects node runtime
Author: Andrew Colman
Latest version: 0.1.0

# node-detect-runtime

detects node runtime

useful for cli tools

-   local (node index.js)

    > like executing using **node filename.js** directly

-   local installed (node_modules)

    > npm i my-app (installed in the project package.json and local node_modules)
    > npm exec my-app | yarn my-app

-   npx

    > npx my-app

-   global

    > npm i -g my-app

    > my-app

## usage:

```ts
import { getRuntime } from 'node-detect-runtime';

const { isGlobal } = getRuntime();
```

#### response:

```ts
{
    isLocalNode: boolean,
    isLocalInstalled:boolean,
    isNpx: boolean,
    isGlobal: boolean,
    dir: string,
    cwd: string,
    name: string,
}
```
npm package: @reaxi/plugin-system
Description: plugin system for any node.js application
Author: Andrew Colman
Latest version: 0.5.1

# commander-plugin-system

plugin system for any node.js application

-   creates an complete plugin system for your application,
-   you can even extend any package that doesn't support plugins: [commander.js example](/)

> originally designed for reaxi, but will work on any node.js program

## features

-   Plugin Loader

-   Program enhancer: enhances your program runtime with additional commands, arguments, options (with validation)

-   Plugin Schema/Validation https://github.com/colinhacks/zod

-   Plugins are simple plain javascript objects, so the possibilites are unlimited

-   Plugin Filter, filters by any property, (like detecting when to use it on runtime)

-   Typescript shines, you can extend the plugin definition for your application needs (creates unlimited plugins types)

## Usage

## Examples

### your own library:

### Commander.js

```ts
import { PluginCommand } from 'commander-plugin-system';

const loader = new PluginLoader(/* strategy */);
const enhancer = new PluginEnhancer(/* strategy */);

const plugins = loader.run();

const enhancedProgram = enhancer.enhance(program, plugins);

//option 1
export { enhancedProgram as program };
//option 2
enhancedProgram.parseArgs();

//* your base program */
program.addCommand(new PluginCommand());
```

### express.js:

...

## defining plugins:

### commonjs:

```js
module.exports = [
    {
        name: 'exported plugin',
    },
];
```

> please note the syntax (an array of objects)
> the array is only required for module.exports syntax ( and even for just one plugin)

## es modules (preferred)

```ts
//plugin.[j|t]s

// single plugin
export const myPlugin = {
    ...props,
};

//multi plugins:
export const myPlugins = [
    {
        ...plugin,
    },
    {
        ...plugin2,
    },
    {
        ...plugin3,
    },
];
```
npm package: @reaxio/button
Description: Button componet for Reactjs
Author: Angel Granadillo
Latest version: 1.0.10

# Button Reaxio

<p align="center">
  <img src="https://cldup.com/K3-R0bY2T8.gif"/>
</p>
<p align="center">
  <a title="Build Status" href="https://travis-ci.org/carrot/share-button">
    <img src="http://img.shields.io/travis/carrot/share-button.svg?style=flat-square"/>
  </a>
</p>

# An Introduction

React component, easy, simple, small and improved

## Why Should You Use This?

Many of the components for Reactjs are in a single installation, not only the component you need and in many cases very heavy, but this is ideal for:

1. Quick and easy loading
2. They don't inject extra javascript and DOM elements into your page, making it slower.
3. Easy to customize enough to adapt to the design of your site.
4. Reaxion Button, takes up very little space, specific and simple for your project.
5. It does not load any iframes or additional javascript.
6. It can be customized in any way.

## 📦 Install

`npm i @reaxio/button`

## 🔨 Usage

```jsx
import Button from "@reaxio/button";

const onClickActiveFrom = () => {
	setregisterFind(null);
	setstateActiveFrom(!stateActiveForm);
};

const App = () => (
	<Button typeButton="primary" onClick={onClickActiveFrom}>
		Press here
	</Button>
);
```

## ✨ API

| Property   | Description                                                                                                | Type    | Default |
| :--------- | :--------------------------------------------------------------------------------------------------------- | :------ | :------ |
| ref        | Redirect url of link button                                                                                | string  |         |
| className  | Like the target attribute of the class, it works when the css, width, height,size ... properties are specified. | string  |
| disabled   | Disabled state of button                                                                                   | boolean | false   |
| typeButton | Can be set to <span style="background: #01579b;color: white; padding:3px">primary</span> , <span style="  background: #e0e0e0;color: black; padding:3px">second</span>  or <span style="  background: #d71e1e;color: white; padding:3px">alert</span>                                                                         | string  | primary |
|onClick|Set the handler to handle click event|```jsx()=>{}```||



---

## 🔺Examples

Look at our [Button example](https://codesandbox.io/s/stoic-clarke-5qfgd?file=/src/App.js)
 in CodeSandox, easy, simple and fast !!!

Thanks for using it.
😃 👊🏼
npm package: @reaxion/core
Description: Core utilities for Reaxion bots including modal and paginator systems.
Author: Xynterical
Latest version: 1.0.1

# Reaxion Project

Reaxion is a modular application designed to handle interactive modals using Discord's API. This project provides a flexible and chainable modal builder that allows developers to create and manage modals with ease.

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)

## Installation

To get started with Reaxion, clone the repository and install the necessary dependencies:

```bash
git clone https://github.com/yourusername/reaxion.git
cd reaxion
npm install
```

Make sure you have Node.js installed on your machine. You can download it from [nodejs.org](https://nodejs.org/).

## Usage

After installing the dependencies, you can start using the ModalHandler in your Discord bot. Here’s a basic example of how to use it:

```javascript
import { modal } from './src/core/index.js';

// Example of showing a modal
async function showModal(interaction) {
    await modal.feedback('Feedback Form').show(interaction);
}
```

For more detailed usage instructions, refer to the documentation in the `src/core/modal.js` file.

## Contributing

Contributions are welcome! If you have suggestions for improvements or new features, feel free to open an issue or submit a pull request.

## License

This project is licensed under the MIT License. See the LICENSE file for more details.
npm package: @reaxium/core
Description: Framework-agnostic reactive state manager — Reaxium core
Author: OpenReysin
Latest version: 0.1.0-alpha.5

# 🧠 Reaxium

![NPM Last Update](https://img.shields.io/npm/last-update/%40reaxium%2Fcore)
![NPM Downloads](https://img.shields.io/npm/dw/%40reaxium%2Fcore)
![NPM Type Definitions](https://img.shields.io/npm/types/%40reaxium%2Fcore)
![GitHub contributors](https://img.shields.io/github/contributors/OpenReysin/reaxium)
![GitHub License](https://img.shields.io/github/license/OpenReysin/reaxium)


---

> Reaxium is a **framework-agnostic reactive state management system**.  
> Tiny and composable.

---

<img src="https://github.com/OpenReysin/.github/raw/main/logo.png" alt="" width="30" height="30" />  Made at <b><a href="https://reysin.fr">Reysin</a></b>, <b>software creation</b>, <b>consulting</b>, and <b>digitalisation</b>.

---

- Framework-agnostic reactive state primitives
- Core features:
  - `atom(initialValue)` — create reactive state
  - `computed(fn, deps)` — derive reactive values
  - `watch(store, callback)` — react to changes
  - `batch(fn)` / `enqueue(fn)` — group updates
- Usage:

```ts
import { atom, computed, watch, batch } from "@reaxium/core";

const count = atom(0);
const doubled = computed(() => count.get() * 2, [count]);

watch(doubled, value => console.log("Doubled:", value));

batch(() => {
  count.set(1);
  count.set(2);
});
````

---

---

## ⚡ License

MIT © OpenReysin
npm package: @reaxium/react
Description: Framework-agnostic reactive state manager — Reaxium core
Author: OpenReysin
Latest version: 0.1.0-alpha.5

# 🧠 Reaxium

![NPM Version](https://img.shields.io/npm/v/%40reaxium%2Fcore)
![NPM Last Update](https://img.shields.io/npm/last-update/%40reaxium%2Fcore)
![NPM Downloads](https://img.shields.io/npm/dw/%40reaxium%2Fcore)
![NPM Type Definitions](https://img.shields.io/npm/types/%40reaxium%2Fcore)
![GitHub contributors](https://img.shields.io/github/contributors/OpenReysin/reaxium)
![GitHub License](https://img.shields.io/github/license/OpenReysin/reaxium)


---

> Reaxium is a **framework-agnostic reactive state management system**.  
> Tiny and composable.

---

<img src="https://github.com/OpenReysin/.github/raw/main/logo.png" alt="" width="30" height="30" />  Made at <b><a href="https://reysin.fr">Reysin</a></b>, <b>software creation</b>, <b>consulting</b>, and <b>digitalisation</b>.

* React adapter using `useSyncExternalStore`
* Usage:

```ts
import { atom } from "@reaxium/core";
import { useStore } from "@reaxium/react";

const count = atom(0);
function Counter() {
  const value = useStore(count);
  return <button onClick={() => count.set(value + 1)}>Count: {value}</button>;
}
```


---

## ⚡ License

MIT © OpenReysin
npm package: @reaxium/vue
Description: Framework-agnostic reactive state manager — Reaxium core
Author: OpenReysin
Latest version: 0.1.0-alpha.5

# 🧠 Reaxium

![NPM Version](https://img.shields.io/npm/v/%40reaxium%2Fcore)
![NPM Last Update](https://img.shields.io/npm/last-update/%40reaxium%2Fcore)
![NPM Downloads](https://img.shields.io/npm/dw/%40reaxium%2Fcore)
![NPM Type Definitions](https://img.shields.io/npm/types/%40reaxium%2Fcore)
![GitHub contributors](https://img.shields.io/github/contributors/OpenReysin/reaxium)
![GitHub License](https://img.shields.io/github/license/OpenReysin/reaxium)


---

> Reaxium is a **framework-agnostic reactive state management system**.  
> Tiny and composable.

---

<img src="https://github.com/OpenReysin/.github/raw/main/logo.png" alt="" width="30" height="30" />  Made at <b><a href="https://reysin.fr">Reysin</a></b>, <b>software creation</b>, <b>consulting</b>, and <b>digitalisation</b>.


* Vue 3 adapter using `ref` and `onUnmounted`
* Usage:

```ts
import { atom } from "@reaxium/core";
import { useStore } from "@reaxium/vue";

const count = atom(0);
const countRef = useStore(count);
```

---

## ⚡ License

MIT © OpenReysin
npm package: @reaze/lib-pixelstreamingcommon-ue5.5
Description: Common utilities library for Unreal Engine 5.5 Pixel Streaming
Author: Epic Games
Latest version: 0.3.2

# lib-pixelstreamingcommon

This library exposes common functionality for Pixel Streaming web applications. Examples include message protocols, logging, events, and various utilities.

For examples of how to implement this library, see:
- [lib-pixelstreamingfrontend](https://github.com/EpicGamesExt/PixelStreamingInfrastructure/tree/master/Frontend/library)
- [lib-pixelstreamingsignalling](https://github.com/EpicGamesExt/PixelStreamingInfrastructure/tree/master/Signalling)
- [Wilbur](https://github.com/EpicGamesExt/PixelStreamingInfrastructure/tree/master/SignallingWebServer) (the reference Pixel Streaming signalling server)

### Adding it to your project
`npm i @epicgames-ps/lib-pixelstreamingcommon-ue5.5`

## Documentation
The API is documented [here](https://github.com/EpicGamesExt/PixelStreamingInfrastructure/tree/master/Common/docs).

### NPM package contents
- ES6 modules
- CommonJS
- Type definitions
- Source maps
npm package: @reazuliqbal/eslint-config
Description: ESLint configuration for NodeJS and Typescript projects
Author: Reazul Iqbal
Latest version: 0.1.1

# @reazuliqbal/eslint-config

ESLint configuration for NodeJS and Typescript projects

## Installation

```sh
npm i @reazuliqbal/eslint-config
```

## Flat Config (eslint.config.js)

```js
import eslintConfig from "@reazuliqbal/eslint-config";

export default eslintConfig;
```