open-index/open-npm huggingface dataset:
npm package: @rattawitdev/shared-state
Description: A secure shared state management library with encryption support
Author: TTB Cloud
Latest version: 1.0.2

# @rattawitdev/shared-state

A secure shared state management library with encryption support for web applications.

## Features

- Secure state management with AES encryption
- TypeScript support
- LocalStorage-based persistence
- Event-based state updates
- Sensitive data clearing

## Installation

```bash
npm install @rattawitdev/shared-state
```

## Usage

```typescript
import { getState, updateState, subscribe, clearSensitiveData } from '@rattawitdev/shared-state';

// Get current state
const state = getState();

// Update state
updateState({
  user: {
    id: '123',
    name: 'John Doe'
  }
});

// Subscribe to state changes
const unsubscribe = subscribe((newState) => {
  console.log('State changed:', newState);
});

// Clear sensitive data
clearSensitiveData();
```

## Configuration

Set the encryption key using the `SHARED_STATE_ENCRYPTION_KEY` environment variable:

```bash
export SHARED_STATE_ENCRYPTION_KEY=your-secure-key-here
```

## Development

```bash
# Install dependencies
npm install

# Build the package
npm run build

# Run tests
npm test
```

## License

MIT
npm package: @ratthapolsk/react-component-package-example
Description: React Component Package Example
Author: Ratthapol Sakonchaiphraisan
Latest version: 0.0.3

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).
npm package: @rattus-orm/angular-rxjs
Description: ORM for your JS/TS apps: Angular RxJS bindings
Author: Lyoha Plotinka
Latest version: 0.2.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Fangular-rxjs">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Fangular-rxjs">
</p>

<h1 align="center">Rattus ORM – Angular RxJS</h1>

**Angular + RxJS bindings for Rattus ORM**

### Contents
1. RattusOrmModule - module for Angular.

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/core @rattus-orm/angular-rxjs
```
### Basic usage
```typescript title="app.config.ts"
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { RattusOrmModule } from "@rattus-orm/angular-rxjs";

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    importProvidersFrom(RattusOrmModule.forRoot())
  ],
};
```

```typescript title="models/User.ts"
export class User extends Model {
    public static entity = 'user'
    
    @Uid()
    public id: string
    
    @Str()
    public email: string
}
```

```typescript title="app.component.ts"
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe],
  template: '<p>{{ (user | async)?.email }}</p>',
})
export class AppComponent {
  public user: BehaviorSubject<Item<User>>

  constructor(
    protected readonly contextService: RattusContextService,
  ) {
    const userRepo = contextService.getRepository(User)

    this.user = userRepo.observe((repo) => repo.query().where('id', '1').first())
  }
}
```

### Documentation
For detailed docs please read [documentation website](https://orm.rattus.dev/docs/category/angular-rxjs-integration).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/core
Description: ORM for your JS/TS apps: core package
Author: Lyoha Plotinka
Latest version: 0.4.2

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Fcore">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Fcore">
</p>

<h1 align="center">Rattus ORM – Core</h1>

### Contents
1. Base of Rattus ORM: Database, Repositories, Model, Query, all typings;
2. ObjectDataProvider – data provider for simple in-memory storage (JS Object).

### Installation
Use your favorite package manager. For example, yarn: 
```bash
yarn add @rattus-orm/core
```

### Important notes
If you are using Vite with TypeScript, make sure you have these settings in `tsconfig.json`:
```json
{
  "compilerOptions": {
    // ...
    "useDefineForClassFields": true,
    "experimentalDecorators": true
  }
}
```

Also you should use this syntax for defining models:
```typescript
class User extends Model {
  public static entity = 'users'

  @Str('')
  // public id: string - will not work, 
  // all fields of your models will be "null"
  declare id: string
```

### Basic usage

```typescript
import { Model, Uid, Str } from '@rattus-orm/core'
import { ObjectDataProvider } from '@rattus-orm/core/object-data-provider'
import { createDatabase } from '@rattus-orm/core/src'

class User extends Model {
  public static entity = 'user'

  @Uid()
  public id: string

  @Str()
  public email: string
}

const database = createDatabase({
  dataProvider: new ObjectDataProvider(),
  connection: 'entities'
}).start()

const userRepo = database.getRepository(User)
userRepo.save([{ id: '1', email: 'test@test.com' }, { id: '2', email: 'test2@test.com' }])

const found = userRepo.find('2')
```

### Documentation
For detailed docs please read [documentation website](https://lyohaplotinka.github.io/rattus-orm/docs/category/core-package).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/local-storage
Description: ORM for your JS/TS apps: local-storage bindings
Author: Lyoha Plotinka
Latest version: 0.2.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Flocal-storage">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Flocal-storage">
</p>

<h1 align="center">Rattus ORM – Local Storage</h1>

**localStorage data provider and helpers for Rattus ORM**

### Contents
1. LocalStorageDataProvider

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/core @rattus-orm/local-storage
```
### Basic usage
```typescript
import { createDatabase, Model, Uid, Str } from '@rattus-orm/core'
import { LocalStorageDataProvider } from '@rattus-orm/local-storage'

class User extends Model {
  public static entity = 'user'
  
  @Uid()
  public id: string
  
  @Str()
  public email: string
}

const database = createDatabase({
  connection: 'entities',
  dataProvider: new LocalStorageDataProvider()
}).start()

const userRepo = database.getRepository(User)
userRepo.save([{ id: '1', email: 'test@test.com' }, { id: '2', email: 'test2@test.com' }])

const found = userRepo.find('2')
```

### Documentation
For detailed docs please read [documentation website](https://lyohaplotinka.github.io/rattus-orm/docs/category/localstorage-integration).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/pinia
Description: ORM for your JS/TS apps: Pinia bindings
Author: Lyoha Plotinka
Latest version: 0.2.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Fpinia">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Fpinia">
</p>

<h1 align="center">Rattus ORM – Pinia</h1>

**Pinia data provider and helpers for Rattus ORM**

### Contents
1. PiniaDataProvider;
2. Composables: `useRattusContext`, `useRepository`.

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/core @rattus-orm/pinia
```
### Basic usage
```typescript title="main.ts"
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { installRattusORM } from "@rattus-orm/pinia";

const pinia = createPinia()

const app = createApp({ /* your root component */ })
app
  .use(pinia)
  .use(installRattusORM())
```

```html title="App.vue"
<template>
  <p>{{ user.email }}</p>
  <button type="button" @click="onClick">Update email</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Model, Uid, Str } from '@rattus-orm/core'
import { useRepository } from '@rattus-orm/pinia'

class User extends Model {
    public static entity = 'user'
    
    @Uid()
    public id: string
    
    @Str()
    public email: string
}

export default defineComponent({
  setup() {
    const { save, find } = useRepository(User)
    
    save({ id: '1', email: 'test@test.com' })
    
    const onClick = () => {
      save({ id: '1', email: 'updated@test.com' })
    }
    
    const user = find('1')
    
    return {
      user,
      onClick,
    }
  }
})
</script>
``` 

### Documentation
For detailed docs please read [documentation website](https://lyohaplotinka.github.io/rattus-orm/docs/category/pinia-integration-vue).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/plugin-zod-validate
Description: ORM for your JS/TS apps: validation plugin with Zod
Author: Lyoha Plotinka
Latest version: 0.2.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<h1 align="center">Rattus ORM – Plugin Zod Validate</h1>

**Data validation with [Zod](https://zod.dev/) for Rattus ORM**

### Features
1. Automatic Zod schema for basic types (number, string, boolean);
2. Strict mode - throws error if data validation failed, or non-strict - just a warning in the console;
3. Configurable severity for each model;
4. Decorators support.

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/plugin-zod-validate
```

### Documentation
For detailed docs please read [documentation website](https://lyohaplotinka.github.io/rattus-orm/docs/category/zod-validate).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/react-mobx
Description: ORM for your JS/TS apps: react-mobx bindings
Author: Lyoha Plotinka
Latest version: 0.2.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Freact-mobx">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Freact-mobx">
</p>

<h1 align="center">Rattus ORM – React MobX</h1>

**React MobX data provider and helpers for Rattus ORM**

### Contents
1. ReactMobxDataProvider;
2. `<RattusProvier />` component;
3. Hooks: `useRattusContext`, `useRepository`.

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/core @rattus-orm/react-mobx mobx mobx-react-lite
```
### Basic usage
```tsx title="main.tsx"
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { RattusProvider } from "@rattus-orm/react-mobx";

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RattusProvider>
      <App />
    </RattusProvider>
  </React.StrictMode>,
)
```

```typescript title="models/User.ts"
export class User extends Model {
    public static entity = 'user'
    
    @Uid()
    public id: string
    
    @Str()
    public email: string
}
```

```tsx title="App.tsx"
import { useEffect } from 'react'
import { useRepository } from "@rattus-orm/react-mobx";
import { User } from "./models/User.ts";
import { observer } from 'mobx-react-lite'

const App = observer(() => {
  const { query, save } = useRepository(User)
  const user = query().where('id', '1').first()

  useEffect(() => {
    save({ id: '1', email: 'test@test.com' })
  }, [])

  if (!user) {
    return ''
  }

  return (
    <>
      <p>{user.email}</p>
      <button type="button" onClick={() => save({ id: '1', email: 'updated@test.com' })}>Update email</button>
    </>
  )
})
```

### Documentation
For detailed docs please read [documentation website](https://lyohaplotinka.github.io/rattus-orm/docs/category/mobx-integration-react).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/react-redux
Description: ORM for your JS/TS apps: react-redux bindings
Author: Lyoha Plotinka
Latest version: 0.2.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Freact-redux">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Freact-redux">
</p>

<h1 align="center">Rattus ORM – React Redux</h1>

**React-redux data provider and helpers for Rattus ORM**

### Contents
1. ReactReduxDataProvider;
2. `<RattusProvier />` component;
3. Hooks: `useRattusContext`, `useRepository`.

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/core @rattus-orm/react-redux @reduxjs/toolkit react-redux
```
### Basic usage
```tsx title="main.tsx"
import React from 'react'
import ReactDOM from 'react-dom/client'
import { RattusProvider } from "@rattus-orm/react-redux"
import App from './App.tsx'
import { store } from './store'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RattusProvider store={store}>
      <App />
    </RattusProvider>
  </React.StrictMode>,
)
```

```typescript title="models/User.ts"
export class User extends Model {
    public static entity = 'user'
    
    @Uid()
    public id: string
    
    @Str()
    public email: string
}
```

```tsx title="App.tsx"
import { useEffect } from 'react'
import { useRepository } from "@rattus-orm/react-redux";
import { User } from "./models/User.ts";

function App() {
  const { query, save } = useRepository(User)
  const user = query().where('id', '1').first()

  useEffect(() => {
    save({ id: '1', email: 'test@test.com' })
  }, [])

  if (!user) {
    return ''
  }

  return (
    <>
      <p>{ user.email }</p>
      <button type="button" onClick={() => save({ id: '1', email: 'updated@test.com' })}>Update email</button>
    </>
  )
}
```

### Documentation
For detailed docs please read [documentation website](https://lyohaplotinka.github.io/rattus-orm/docs/category/redux-integration-react).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/react-signals
Description: ORM for your JS/TS apps: react-signals bindings
Author: Lyoha Plotinka
Latest version: 0.2.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Freact-signals">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Freact-signals">
</p>

<h1 align="center">Rattus ORM – React Signals</h1>

**React Signals data provider and helpers for Rattus ORM**

### Contents
1. ReactSignalsDataProvider;
2. `<RattusProvier />` component;
3. Hooks: `useRattusContext`, `useRepository`.

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/core @rattus-orm/react-signals @preact/signals-react
```
### Basic usage
```tsx title="main.tsx"
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { RattusProvider } from "@rattus-orm/react-signals";

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RattusProvider>
      <App />
    </RattusProvider>
  </React.StrictMode>,
)
```

```typescript title="models/User.ts"
export class User extends Model {
    public static entity = 'user'
    
    @Uid()
    public id: string
    
    @Str()
    public email: string
}
```

```tsx title="App.tsx"
import { useEffect } from 'react'
import { useRepository } from "@rattus-orm/react-signals";
import { User } from "./models/User.ts";

function App() {
  const { query, save } = useRepository(User)
  const user = query().where('id', '1').first()

  useEffect(() => {
    save({ id: '1', email: 'test@test.com' })
  }, [])

  if (!user) {
    return ''
  }

  return (
    <>
      <p>{ user.email }</p>
      <button type="button" onClick={() => save({ id: '1', email: 'updated@test.com' })}>Update email</button>
    </>
  )
}
```

### Documentation
For detailed docs please read [documentation website](https://lyohaplotinka.github.io/rattus-orm/docs/category/signals-integration-react).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/solidjs
Description: ORM for your JS/TS apps: Solid.js bindings
Author: Lyoha Plotinka
Latest version: 0.1.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Fsolidjs">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Fsolidjs">
</p>

<h1 align="center">Rattus ORM – Solid.js</h1>

**Solid.js data provider and helpers for Rattus ORM**

### Contents
1. SolidjsDataProvider;
2. `<RattusProvier />` component;
3. Hooks: `useRattusContext`, `useRepository`.

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/core @rattus-orm/solidjs
```

### Basic usage
```tsx title="main.ts"
import { render } from 'solid-js/web'

import './index.css'
import App from './App'
import { RattusProvider } from '@rattus-orm/solidjs'

const root = document.getElementById('root')

render(() => (
    <RattusProvider>
      <App />
    </RattusProvider>
  ), root
)
```
```typescript title="models/User.ts"
export class User extends Model {
    public static entity = 'user'
    
    @Uid()
    public id: string
    
    @Str()
    public email: string
}
```
```tsx title="App.tsx"
import { createComputed, onMount } from 'solid-js'
import { useRepository } from "@rattus-orm/solidjs";
import { User } from "./models/User.ts";

function App() {
  const { save, find } = useRepository(User)
  const user = find('1')

  onMount(() => {
    save({ id: '1', email: 'test' })
  })

  return (
    <div>
      <p>{ user()?.email }</p>
      <button type="button" onClick={() => save({ id: '1', email: 'updated@test.com' })}>Update email</button>
    </div>
  )
}
```

### Documentation
For detailed docs please read [documentation website](https://lyohaplotinka.github.io/rattus-orm/docs/category/solid-integration).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/svelte
Description: ORM for your JS/TS apps: svelte bindings
Author: Lyoha Plotinka
Latest version: 0.2.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Fsvelte">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Fsvelte">
</p>

<h1 align="center">Rattus ORM – Svelte</h1>

**Svelte bindings for Rattus ORM**

### Contents
1. `<RattusProvier />` component;
2. Hooks: `useRattusContext`, `useRepository`.

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/core @rattus-orm/svelte
```
### Basic usage
```html title="App.svelte"
<script>
  import { RattusProvider } from '@rattus-orm/svelte'
</script>

<RattusProvider>
  <!-- your components -->
</RattusProvider>
```
```typescript title="models/User.ts"
export class User extends Model {
    public static entity = 'user'
    
    @Uid()
    public id: string
    
    @Str()
    public email: string
}
```
```html title="User.svelte"
<script>
  import { useRepository } from "@rattus-orm/svelte";
  import { User } from "./models/User";
  
  const userRepo = useRepository(User)
  const user = userRepo.find('1')

  setTimeout(() => {
    userRepo.save({ id: '1', email: 'test@test.com' })
  }, 1000)

</script>

<div>
  {#if $user}
    id: {$user.id}<br/>
    email: {$user.email}
  {/if}
</div>
```

### Documentation
For detailed docs please read [documentation website](https://orm.rattus.dev/docs/category/svelte-integration).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @rattus-orm/vuex
Description: ORM for your JS/TS apps: vuex bindings
Author: Lyoha Plotinka
Latest version: 0.2.4

<p align="center">
  <img style="margin-right: -15px" width="192px" src="https://raw.githubusercontent.com/lyohaplotinka/rattus-orm/main/assets/logo.svg" alt="Rattus ORM">
</p>

<p align="center">
  <img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/%40rattus-orm%2Fvuex">
  <img alt="npm version (core)" src="https://img.shields.io/npm/v/%40rattus-orm%2Fvuex">
</p>

<h1 align="center">Rattus ORM – Vuex</h1>

**Vuex data provider and helpers for Rattus ORM**

### Contents
1. VuexDataProvider;
2. Composables: `useRattusContext`, `useRepository`.

### Installation
Use your favorite package manager. For example, yarn:
```bash
yarn add @rattus-orm/core @rattus-orm/vuex
```
### Basic usage

```typescript title="main.ts"
import { createApp } from 'vue'
import { createStore } from 'vuex'
import { installRattusORM } from "@rattus-orm/vuex";

const store = createStore({
  plugins: [installRattusORM()]
})


const app = createApp({ /* your root component */ })
app.use(store)
```

```vue title="App.vue"
<template>
  <p>{{ user.email }}</p>
  <button type="button" @click="onClick">Update email</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Model, Uid, Str } from '@rattus-orm/core'
import { useRepository } from '@rattus-orm/vuex'

class User extends Model {
    public static entity = 'user'
    
    @Uid()
    public id: string
    
    @Str()
    public email: string
}

export default defineComponent({
  setup() {
    const { save, find } = useRepository(User)
    
    save({ id: '1', email: 'test@test.com' })
    
    const onClick = () => {
      save({ id: '1', email: 'updated@test.com' })
    }
    
    const user = find('1')
    
    return {
      user,
      onClick,
    }
  }
})
</script>
```

### Documentation
For detailed docs please read [documentation website](https://lyohaplotinka.github.io/rattus-orm/docs/category/vuex-integration-vue).

### Contributing
Contributions are welcome! Please read our [Contributing Guide](../../CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests.
npm package: @ratushniak-tenexti/ua-hints
Description: It generates UA CH headers for the user agent
Author: Kiko Beats
Latest version: 1.0.1

# ua-hints

![Last version](https://img.shields.io/github/tag/kikobeats/ua-hints.svg?style=flat-square)
[![Coverage Status](https://img.shields.io/coveralls/kikobeats/ua-hints.svg?style=flat-square)](https://coveralls.io/github/kikobeats/ua-hints)
[![NPM Status](https://img.shields.io/npm/dm/ua-hints.svg?style=flat-square)](https://www.npmjs.org/package/ua-hints)

> It generates [Sec-CH-UA-*](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers#user_agent_client_hints) headers for the provided `'user-agent'`.

## Install

```bash
$ npm install ua-hints --save
```

## Usage

Giving an user agent as input, such as:

> Mozilla/5.0 (Windows NT 10.0; Win64; x64; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.6099.109 Safari/537.36

This library returns The [User-Agent Client Hints](https://wicg.github.io/ua-client-hints/#sec-ch-ua) detected:

```js
const uaHints = require('ua-hints')

uaHint('Mozilla/5.0 (Windows NT 10.0; Win64; x64; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.6099.109 Safari/537.36')
// {
//   'sec-ch-ua': '"Chrome";v="120"',
//   'sec-ch-ua-mobile': '?0',
//   'sec-ch-ua-platform': '"Windows"',
//   'sec-ch-ua-platform-version': '"10"',
//   'sec-ch-ua-arch': '"x86"',
//   'sec-ch-ua-bitness': '"64"',
//   'sec-ch-ua-full-version': '"120.0.6099.109"',
//   'sec-ch-ua-full-version-list': '"Chrome";v="120.0.6099.109"',
//   'sec-ch-ua-wow64': '?1',
//   'sec-ch-ua-form-factors': '["Desktop"]'
// }
```

The library implements Chromium's GREASEing strategy [(¹)](https://stackoverflow.com/a/64443187)[(²)](https://github.com/chromium/chromium/commit/19ad8d3cab21013ce2d40cf2ec84267bb04b08ec) includes intentionally incorrect data to prevent ossification attacks.

## License

**ua-hints** © [Kiko Beats](https://kikobeats.com), released under the [MIT](https://github.com/kikobeats/ua-hints/blob/master/LICENSE.md) License.<br>
Authored and maintained by [Kiko Beats](https://kikobeats.com) with help from [contributors](https://github.com/kikobeats/ua-hints/contributors).

> [kikobeats.com](https://kikobeats.com) · GitHub [Kiko Beats](https://github.com/kikobeats) · Twitter [@kikobeats](https://twitter.com/kikobeats)
npm package: @ratutech/asr
Description: 语音转文字的核心功能库
Latest version: 0.0.6

# @ratutech/asr - 语音转文字库核心库

这是一个使用 `recorder-core` 和 `websocket` 来实现的简单语音识别库，支持 `UMD`, `CMD`, `ESM` 等多种模块规范。

## 模块说明

### ASRConnecter

用来管理 `websocket` 链接，监听 `ASRRecorder` 实例返回的数据发送给服务端

### ASRRecorder

用来实现实时获取录音数据的功能，基于 `recorder-core` 进行封装

### EventEmitter

用来实现发布订阅功能，是 `ASRConnecter` 和 `ASRRecorder` 的父类

### createASR

创建并返回 `ASRConnecter` 的实例

## 安装

```bash
npm install @ratutech/asr
```

## 使用方法

### 基本用法

```typescript
import { createASR } from '@ratutech/asr';

// 创建语音识别连接实例
const asr =  createASR({
  url:'wss://asr.xxxxx.com/api', // websocket服务地址
  token:'eyxxxxxxxxxxxxxxxxxx' // 校验用户登录状态
});

// 监听语音识别返回文字的事件
asr.on('output', (data: string) => {
  text.value = data
})

// 监听话筒状态（是否真正开始录音）
asr.on('recognizing', () => {
  isPreparingMic.value = false
  isRecognition.value = true
})

// 监听错误
asr.on('error', (error: string) => {
  isPreparingMic.value = false
  isRecognition.value = false
  ElMessage.error(error)
  console.log(error)
})

// 创建websocket连接并开始录音
const start = () => {
  asr.start()
  isPreparingMic.value = true
  isRecognition.value = false
}

// 停止识别
const stop = () => {
  asr.stop()
  /*
  停止识别时,需要把已经录音但未识别的内容发送到服务端进行识别之后再断开连接。
  这是个异步过程，所以使用发布订阅的方式进行处理。
  */
  asr.on('stopped', () => {
    isRecognition.value = false
    isPreparingMic.value = false

    lastText.value = text.value
    text.value = ''

    asr.off('stopped')
  })
}

// 销毁
const destroy = () => {
  isRecognition.value = false
  isPreparingMic.value = false
  asr.destroy()
}
```

## 许可证

MIT
npm package: @ratutech/tts
Description: A streaming TTS audio player.
Author: Your Name
Latest version: 1.0.5

# @ratutech/tts

一个用于处理流式TTS API的播放器，支持OGG、ACC格式音频的开始、暂停、继续和停止播放。

## 安装

```bash
npm install @ratutech/tts
```

或者

```bash
yarn add @ratutech/tts
```

## 功能

- 从流式TTS API获取音频并实现真正的流式播放（一边接收一边播放）
- 开始播放
- 暂停播放
- 继续播放
- 停止播放
- 音量控制
- 获取播放状态

## 使用方法

### 基本使用

```typescript
import { StreamingTTSPlayer } from '@ratutech/tts';


// 创建播放器实例
const player = new StreamingTTSPlayer({
  // 接口地址
  apiUrl,
  params: { 
    // 可以在这里添加额外的查询参数
  },
  headers: {
    // 可以在这里添加自定义请求头
  },
  onStart: () => {
    console.log('播放开始');
  },
  onPause: () => {
    console.log('播放暂停');
  },
  onResume: () => {
    console.log('播放继续');
  },
  onStop: () => {
    console.log('播放停止');
  },
  onError: (error) => {
    console.error('播放错误:', error);
  }
});

// 开始播放
player.play('要转换为语音的文本')
  .then(() => {
    console.log('开始播放请求已发送');
  })
  .catch(error => {
    console.error('播放请求失败:', error);
  });

// 暂停播放
player.pause();

// 继续播放
player.resume();

// 停止播放
player.stop();

// 设置音量（0-1之间的值）
player.setVolume(0.8);

// 获取播放状态
const status = player.getStatus();
console.log(`是否正在播放: ${status.isPlaying}`);
console.log(`是否已暂停: ${status.isPaused}`);

// 使用完毕后释放资源
player.dispose();
```

## API文档

### 构造函数

```typescript
new StreamingTTSPlayer(options: TTSPlayerOptions)
```

### TTSPlayerOptions 接口

| 属性 | 类型 | 必填 | 描述 |
|------|------|------|------|
| apiUrl | string | 是 | TTS API的URL地址 |
| params | Record<string, any> | 否 | 请求参数 |
| headers | Record<string, string> | 否 | 请求头信息 |
| audioFormat | string | 否 | 可选的音频格式指定，例如 'audio/ogg', 'audio/mpeg' |
| bufferSize | number | 否 | 音频缓冲区大小（毫秒），默认为1000ms |
| onStart | () => void | 否 | 播放开始回调 |
| onPause | () => void | 否 | 播放暂停回调 |
| onResume | () => void | 否 | 播放恢复回调 |
| onStop | () => void | 否 | 播放结束回调 |
| onError | (error: Error) => void | 否 | 发生错误时的回调 |

### 方法

| 方法 | 返回类型 | 描述 |
|------|----------|------|
| play(text: string) | Promise<void> | 开始播放指定文本的语音 |
| pause() | void | 暂停当前播放 |
| resume() | void | 继续当前暂停的播放 |
| stop() | void | 停止播放并释放资源 |
| setVolume(volume: number) | void | 设置音量，范围0-1 |
| getStatus() | { isPlaying: boolean; isPaused: boolean } | 获取当前播放状态 |
| dispose() | void | 释放所有资源 |

## 注意事项

1. 该插件使用Web Audio API实现真正的流式播放（一边接收数据一边播放）
2. 支持常见的音频格式OGG、ACC，并自动尝试检测格式
3. 通过设置`bufferSize`参数可以调整流式播放的缓冲区大小，较小的值可能导致更快的开始播放但可能更容易产生卡顿
4. 插件会自动处理音频解码和流式播放，无需等待所有数据下载完成
npm package: @ratwizard/for-each-queue
Description: A tool for asynchronously working through large lists with concurrency limits
Author: Tony McCoy
Latest version: 1.2.0

# forEachQueue

A tool for asynchronously working through large lists while keeping things a little more controlled than `await Promise.all()`.

## Example

A hypothetical example showing a lookup of user ratings for 50,000 movies. The limit is set to 50 pending requests at once so we don't get rate limited or run into timeouts.

```js
import forEachQueue from "@ratwizard/for-each-queue";

const lotsOfItems = [
  /* 50,000 item array */
];

const movieScores = await forEachQueue(lotsOfItems, 50, async (item) => {
  // Make web requests, for example. A maximum of 50 requests will be pending at once in this case.
  // When one finishes the next will be queued up.
  const results = await http.get(
    `https://movie-api.com/api/stuff?t=${item.name}`
  );
  return {
    name: item.name,
    score: results.userRating,
  };
});

for (const movie of movieScores) {
  console.log(`${movie.name}: ${movie.score}`);
}
```