open-index/open-npm huggingface dataset:
npm package: @lokua/osc-server
Description: ## Install
Author: Joshua Kleckner
Latest version: 0.1.0

# osc-server

## Install

```sh
npm i @lokua/osc-server --save
```

## Usage

```js
const createServer = require(`@lokua/osc-server`)

const { onMessage, send/*, server, config */ } = createServer({
  // below is the default config:
  // ----------------------------
  inputPort: 9002,
  inputHost: `0.0.0.0`,
  outputPort: 9001,
  outputHost: `0.0.0.0`,
  exitOnError: false,
  formatAddress: x => x,
  debug: true
})

onMessage((address, value) => {/* do something */})
send(`someAddress`, 98)
```

## License
MIT
npm package: @lokua/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 1.0.16

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @lokutor/sdk
Description: JavaScript/TypeScript SDK for Lokutor Real-time Voice AI
Author: Lokutor AI
Latest version: 1.1.17

# Lokutor JavaScript SDK

![Lokutor Hero](../../assets/img/hero.png)

[![npm version](https://img.shields.io/npm/v/@lokutor/sdk.svg)](https://www.npmjs.com/package/@lokutor/sdk)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Official JavaScript/TypeScript SDK for [Lokutor AI](https://lokutor.com), providing high-performance, real-time Voice-to-Voice AI.

## Features

- ⚡ **Ultra-low latency**: Optimized WebSocket streaming for real-time interactions.
- 🗣️ **Conversational Intelligence**: Integrated STT, LLM, and TTS with VAD and barge-in support.
- 🌍 **Multi-lingual**: Support for English, Spanish, French, Portuguese, and Korean.
- 🎨 **Natural Voices**: Multiple high-quality male and female voice styles.
- 💻 **TypeScript First**: Full type definitions included.

## Installation

```bash
npm install @lokutor/sdk
# or
yarn add @lokutor/sdk
```

## Quick Start

### 1. Voice Agent (Conversational AI)

The `VoiceAgentClient` handles everything from audio streaming to conversational logic.

```typescript
import { VoiceAgentClient, VoiceStyle, Language } from '@lokutor/sdk';

const client = new VoiceAgentClient({
  apiKey: 'your-api-key',
  prompt: 'You are a helpful and friendly AI assistant.',
  onTranscription: (text) => console.log('User:', text),
  onResponse: (text) => console.log('AI:', text)
});

await client.connect();
// Feed PCM audio data to the client:
// client.sendAudio(pcmData);
```

### 2. Standalone Streaming TTS

Use `TTSClient` to convert text into high-quality audio streams without the conversational overhead.

```typescript
import { TTSClient, VoiceStyle } from '@lokutor/sdk';

const client = new TTSClient({ apiKey: 'your-api-key' });

await client.synthesize({
  text: 'Hello world, this is a test of Lokutor streaming TTS.',
  voice: VoiceStyle.F1,
  onAudio: (buffer) => {
    // Play the audio buffer (Node.js or Browser)
    console.log(`Received ${buffer.length} bytes of audio`);
  }
});
```

## Hardware Compatibility

This SDK is platform-agnostic and works in both **Node.js** and **Browser** environments. 

### For Node.js
We recommend using `node-record-lpcm16` for recording and `speaker` for playback. See the [examples](./examples) folder for a complete Node.js CLI implementation.

### For Browser
Use the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) to capture microphone input and play back the received buffers.

## Documentation

Full documentation is available at [docs.lokutor.com](https://docs.lokutor.com).

## License

MIT © [Lokutor AI](https://lokutor.com)
npm package: @lolado/apple-pay
Description: Ionic Native - Native plugins for ionic apps
Author: ionic
Latest version: 6.0.2

<a style="float:right;font-size:12px;" href="https://github.com/LolaDoInc/ionic-apple-pay/blob/main/index.d.ts#L89">
  Improve this doc
</a>

# Apple Pay

```
$ ionic cordova plugin add https://github.com/LolaDoInc/cordova-plugin-applepay
$ npm install @lolado/apple-pay
```

## [Usage Documentation](https://ionicframework.com/docs/native/apple-pay/)

Plugin Repo: [https://github.com/LolaDoInc/cordova-plugin-applepay](https://github.com/LolaDoInc/cordova-plugin-applepay)

A dependency free Cordova plugin to provide Apple Pay functionality.
- Adding Mada in the Cordova plugin
- Fixing dependencies in Ionic Native plugin

## Supported platforms

- iOS
npm package: @lolanextdoor-free/react-stopwatch
Description: A simple Stopwatch component for React
Author: Jordan Chevalier
Latest version: 1.1.3

# react-stopwatch

> A simple Stopwatch component built on React.

<p align="center">
  <img src="https://github.com/slorenzo/react-stopwatch/blob/master/media/square.gif?raw=true" alt="Demo"/>
</p>

## Installation

First, install the component:

```bash
yarn add react-stopwatch
```
or
```bash
npm install react-stopwatch --save
```

### Usage

```js
import React from 'react';
import ReactDom from 'react-dom';
import Stopwatch from 'react-stopwatch';

ReactDom.render(
  <Stopwatch
    seconds={0}
    minutes={0}
    hours={0}
    limit={"00:00:10"}
    withLoop={true}
    onCallback={() => console.log('Finish')}
   />,
  document.getElementById('app')
);
```

### Customization


There are two themes:
- `primary`: The watch has a circle shape (Default)
- `secondary`: The watch has a square shape.

```js
import React from 'react';
import ReactDom from 'react-dom';
import Stopwatch from 'react-stopwatch';

ReactDom.render(
  <Stopwatch
    seconds={0}
    minutes={0}
    hours={0}
    theme='primary' // theme='secondary'
   />,
  document.getElementById('app')
);
```
If you want to do the watch would appears with your own styles. You just need to put your styles inside of `containerOutter` and `containerInner`.

```js
import React from 'react';
import ReactDom from 'react-dom';
import Stopwatch from 'react-stopwatch';

const styles = {
  containerOutter: {
    width: '250px',
    height: '250px'
  },
  containerInner: {
    lineHeight: '10'
  }
}

ReactDom.render(
  <Stopwatch
    seconds={0}
    minutes={0}
    hours={0}
    custom={styles}
   />,
  document.getElementById('app')
);
```

### Properties
- `seconds`: Integer. Needs to be between `0 >= seconds <= 60`. (Required)
- `minutes`: Integer. Needs to be between `0 >= minutes <= 60`. (Required)
- `hours`: Integer. Needs to be `0 >= hours`. (Required)
- `limit`: String. Need to have the following format `XX:XX:XX`. (Optional)
- `withLoop`: Boolean. If it is `true` when the watch is equal to `limit`, it makes a loop. (Optional)
- `onCallback`: Function. If you need to do something when the watch is equal to `limit`. (Optional)



## Made with ❤ by

- Sebastian Lorenzo (Javascript developer)
- E-mail: [SebastianLorenzo@gmail.com](mailto:SebastianLorenzo@gmail.com)
- StackOverflow: [sebastian-lorenzo](http://stackoverflow.com/users/1741027/sebastian-lorenzo?tab=profile)

## License

MIT license. Copyright © 2018.
npm package: @loldonut/discord-webhooks
Description: 'discord-webhooks' manages Discord's Webhooks.
Author: loldonut
Latest version: 1.0.0

# discord-webhooks

`discord-webhooks` **manages Discord's Webhooks**

## Installation

```sh-session
npm install loldonut/discord-webhooks
```

## Example

```js
const { Webhook } = require('discord-webhooks');

// You can also pass a string with URL instead.
const webhook = new Webhook({
    id: ID,
    token: TOKEN,
});

webhook.once('ready', async (w) => {
    await w.send({
        content: 'Hello, World.'
    });
});
```

You can pass the URL in a string instead of an Object for the webhook credentials.

Note that you must use `Websocket#send()` inside the `ready` event
so the function will have your webhook's ID and Token.

[See what you can send using the webhook here...](https://discord.com/developers/docs/resources/webhook#execute-webhook-jsonform-params)
npm package: @lolekxdpl/counters
Description: package with two counters `Counter` and `DecreasingCounter` constructors
Author: Lolek
Latest version: 1.1.0

# @lolekxdpl/counters

package with two counters `Counter` and `DecreasingCounter` constructors

## Instalation

```
npm install @lolekxdpl/counters
```

## Usage

To run demo app clone this repo and siply run:

```
npm install
```

```
npm start
```
## API


Every counter gets two arguments:

-selectorof element to be rendered in.
-start number.

 Counter should be initialized after creation by calling .init() method


```Javascript

import { Counter, DecreasingCounter } from '@lolekxdpl/counters'

const counter1 = new Counter('.counter-1',5)
counter1.init()
const counter2 = new DecreasingCounter('.counter-2',-12)
counter2.init()
```
npm package: @loli-feature-flags/loli-sdk
Description: Loli Feature Flags JavaScript/TypeScript SDK
Author: Peter Kuhmann
Latest version: 1.0.0-alpha.8

# JavaScript/TypeScript SDK – Loli Feature Flags

This repo hosts the heart of Loli Feature Flags: The JavaScript/TypeScript SDK.
It defines the Loli spec schema, provides validation capabilities, utilities
to inspect a Loli spec, and the most important piece: The evaluation client.

# Documentation

Check out the docs: [https://www.lolifeatureflags.com/reference/sdk/ 🔗](https://www.lolifeatureflags.com/reference/sdk/)

Most important pages:
- [Installation 🔗](https://www.lolifeatureflags.com/reference/sdk/installation.html)
- [Client 🔗](https://www.lolifeatureflags.com/reference/sdk/client/)
- [Architectures 🔗](https://www.lolifeatureflags.com/reference/sdk/architectures/)

# General info

- Loli Feature Flags Website: [lolifeatureflags.com 🔗](https://lolifeatureflags.com)
- GitHub Organization: [Loli-Feature-Flags @ GitHub 🔗](https://github.com/Loli-Feature-Flags/)
npm package: @loli-feature-flags/loli-ui
Description: Loli Feature Flags UI
Author: Peter Kuhmann
Latest version: 1.0.0-alpha.15

# Management UI – Loli Feature Flags

<p style="display: flex; flex-direction: row; gap: 0.5em;">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/%40loli-feature-flags%2Floli-ui?label=NPM">
    <img alt="NPM License" src="https://img.shields.io/npm/l/%40loli-feature-flags%2Floli-sdk?label=License">
</p>

This repo hosts the pluggable management UI that lets you create
and modify a Loli Feature Flags specification.

# Documentation

Check out the docs: [https://www.lolifeatureflags.com/reference/ui/ 🔗](https://www.lolifeatureflags.com/reference/ui/)

Most important pages:
- [Installation 🔗](https://www.lolifeatureflags.com/reference/ui/installation.html)
- [Mounting 🔗](https://www.lolifeatureflags.com/reference/ui/mounting.html)
- [Options 🔗](https://www.lolifeatureflags.com/reference/ui/options.html)
- [Interface 🔗](https://www.lolifeatureflags.com/reference/ui/interface.html)

# General info

- Loli Feature Flags Website: [lolifeatureflags.com 🔗](https://lolifeatureflags.com)
- GitHub Organization: [Loli-Feature-Flags @ GitHub 🔗](https://github.com/Loli-Feature-Flags/)
npm package: @loli-works/node-sse-iterator
Description: A library provides an async generator to read server-sent events for node.
Author: Nickid2018
Latest version: 1.0.0

# node-sse-iterator
A library provides an async generator to read server-sent events for node.

## Usage
The library exports only one function `wrapSseStreamToIterator`.
It requires a readable stream, either from web, file system or other sources.
The function is an async generator, which can be used in `for await ... of` statements.

## Example

Use it with `fetch`:

```ts
const res = await fetch('http://localhost:8080/sse');
for await (const message of wrapSseStreamToIterator(res.body)) {
  if (message.event === 'message')
    console.log(message.data);
}
```
npm package: @loll/h
Description: Component builder for @loll/app.
Author: loll
Latest version: 0.1.1

# @loll/h
Component builder for @loll/app.

Exposes picodom's `h` function for building VDOM nodes. Can be used with or without JSX. See the [picodom README](https://github.com/picodom/picodom) for more.

## Install
```bash
npm i @loll/h --save
```

## Usage
```javascript
/** @jsx h */
import h from '@loll/h'

function MyComponent () {
  return (
    <h1>Hello world</h1>
  )
}
```

## Dependencies
- [picodom](https://github.com/picodom/picodom) - 1 KB VDOM builder and patch function.

MIT
npm package: @loll/href
Description: Tiny click handler library.
Author: loll
Latest version: 0.0.4

# @lol/href
Tiny click handler for single page apps.

## Install
```bash
npm i @loll/href --save
```

## Usage
The callback will not fire if the link:
- has an invalid `href`
- points to an external resource
- is a `download` link
- is `target="_blank"`
- is a `mailto:` or `tel:`
```javascript
import href from '@loll/href'

href(anchor => console.log(anchor.href))
```

MIT
npm package: @loll/route-parser
Description: Simple, tiny, super-fast route parser.
Author: loll
Latest version: 0.0.3

# @loll/route-parser
Simple & tiny route parser. 281 bytes gzipped.

## Install
```bash
npm i @loll/route-parser --save
```

## Usage
Pass `createRoute` a route (`string`) and a handler (`function`):
```javascript
const { createRoute, getRoute } = require('@loll/route-parser')

const route = createRoute('/', () => console.log('Hello world!'))
```
Run `getRoute` with a path and an array of your routes. The first route that matches will be returned:
```javascript
getRoute('/', [ route ]) // => Hello world!
```

## Params
Routes support parametized paths:
```javascript
const route = createRoute('/posts/:slug', ({ slug }) => console.log(`Post slug is ${slug}`))

getRoute('/posts/test-slug', [ route ]) // => Post slug is test-slug
```

## Wildcard
A lone wildcard is supported for fall-through situations i.e. 404 errors:
```javascript
const route = createRoute('*', () => console.log('404'))

getRoute('/anything', [ route ]) // => 404
```

## Real World Example
```javascript
const { createRoute, getRoute } = require('@loll/route-parser')

const routeConfig = [
  ['/', () => {
    console.log('home')
  }],
  ['about', () => {
    console.log('about')
  }],
  ['/about', () => {
    console.log('/about')
  }],
  ['/posts/:id', ({ id }) => {
    console.log('/posts/:id', id)
  }],
  ['/posts/:category/:id', ({ category, id }) => {
    console.log('/posts/:category/:id', category, id)
  }],
  ['*', () => {
    console.log('wildcard')
  }]
]

const routes = routeConfig.map(route => createRoute(route[0], route[1]))

getRoute('/posts/javascript/routing', routes) // => /posts/:category/:id javascript routing
```

MIT
npm package: @loll/router
Description: Library agnostic route handler.
Author: loll
Latest version: 0.2.4

# @loll/router
Library agnostic route handler.

## Install
```bash
npm i @loll/router --save
```

## Route handling
```javascript
import createRouter from '@loll/router'

const router = createRouter([
  ['/', () => {
    return 'Hello world!'
  }]
])

router.get('/') // => Hello world!
```
Routes may also contain route parameters:
```javascript
import createRouter from '@loll/router'

const router = createRouter([
  ['/posts/:id', ({ id }) => {
    return `This is post ${id}.`
  }]
])

router.get('/posts/router') // => This is post router.
```
Configure a wildcard route to catch any fall-through:
```javascript
import createRouter from '@loll/router'

const router = createRouter([
  ['*', () => {
    return '404 - Page not found'
  }]
])

router.get('/some/other/route') // => 404 - Page not found
```

## Updating the URL
Sure:
```javascript
router.push('/about') // => window.location.pathname === 'about'
```

MIT
npm package: @loll/state
Description: Library agnostic state management.
Author: loll
Latest version: 0.1.1

# @loll/state
Library agnostic state management.

## Install
```bash
npm i @loll/state --save
```

## Creating a Store
Create new stores by passing an initial state object to `createStore`:
```javascript
import createStore from '@loll/state'

const store = createStore({
  count: 0
})
```

## Actions
Create actions that mutate state using `store.setState`:
```javascript
function inc () {
  store.setState(state => ({ count: state.count + 1 }))
}
```

## Components
Attach state to components using the `connect` export from `./store.js`. Import actions to mutate state:
```javascript
/** @jsx h */
import h from '@loll/h'

const MyComponent = store.connect(state => ({
  count: state.count
}))((props) => {
  return (
    <div>
      <h1>The count is {props.count}</h1>

      <button onclick={inc}>Up</button>
    </div>
  )
})
```

## Rendering
The store returns emitter methods. When `setState` is called, a shallow-compare checks the state object for differences. If one is found, an `update` event is emitted.
```javascript
store.on('update', () => {
  // re-render application here
})
```

## API
### `setState`
Accepts an object or a function that returns an object.
```javascript
setState({
  count: 12
})

// or

setState(state => ({
  count: state.count + 1
}))
```

### `getState`
Returns the full state object.
```javascript
getState() // { count: 12 }
```

### `connect`
Accepts an function that returns a slice of state and returns a function that in turn accepts a component.
```javascript
const Component = connect(state => ({
  number: state.count
}))((props) => {
  return <h1>The count is {props.count}</h1>
})
```

### `on` & `off`
The store uses [mitt](https://github.com/developit/mitt) interally to emit a single `update` event when the state is updated. It also exposes mitt's `off` handler, should you need it.
```javascript
function render () {}

on('update', render)

off('update', render)
```

MIT
npm package: @lollipop-onl/axios-logger
Description: Pretty Axios logger
Author: lollipop.onl
Latest version: 0.2.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @lollipop-onl/axios-logger

`@lollipop-onl/axios-logger` is a cute logger for [Axios](https://github.com/axios/axios).

## Installation

```sh
$ yarn add -D @lollipop-onl/axios-logger
# or
$ npm i -D @lollipop-onl/axios-logger
```

## Usage

```ts
import axios from "axios";
import AxiosLogger from "@lollipop-onl/axios-logger";

const BASE_URL = "https://jsonplaceholder.typicode.com";

const request = axios.create({
  baseURL: BASE_URL,
  responseType: "json"
});
const logger = new AxiosLogger({
  baseURL: BASE_URL
});

request.interceptors.response.use(...Logger.response);
```

### Browser console

<p style="text-align: center">
  <img src="https://i.gyazo.com/bf4bcdca5469e2300d726a3b5818fcd3.png" />
</p>

### Node.js console

<p style="text-align: center">
  <img src="https://i.gyazo.com/aa5348932530d0dab00862ca41971cf6.png" />
</p>

## Documentation

### `constructor`

```ts
const logger = new AxiosLogger({
  baseURL: 'https://jsonplaceholder.typicode.com';
  isServer: false;
  showRequest: true;
  showResponse: true;
  quiet: false;
});
```

### `baseURL` (`boolean`)

default: `''`

Here you specify the base URL of the main request. It is omitted from the displayed request URL (Only client).

### `isServer` (`boolean`)

default: Automatic discrimination between Node.js and browser

This parameter is affected for log style.

### `showRequest`/`showResponse` (`boolean`)

default: `false`

When those parameters are enabled, request/response logs will be displayed on Node.js.

### `quiet` (`boolean`)

default: `false`

When this parameter is enabled, all logs will not be displayed.

### Override configurations

You can change configuration directly.

```ts
const logger = new AxiosLogger();

logger.showResponse = true;
logger.quiet = true;
```

## for Nuxt

In Nuxt.js, `isServer` or `process.server` passes to `isServer` property.

```ts
// plugins/axios.ts
import AxiosLogger from "@lollipop-onl/axios-logger";

export default ({ $axios, isDev, isServer }) => {
  const logger = new AxiosLogger({
    isServer,
    quiet: !isDev
  });

  $axios.onResponse(response => {
    logger.log(response);
  });

  $axios.onResponseError(response => {
    logger.log(response);
  });
};
```

## Licence

MIT
npm package: @lollipop-onl/choco-chips
Description: A TypeScript type utilities
Author: lollipop.onl
Latest version: 0.0.7
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Choco Chips

`choco-chips` is a library of TypeScript type utility.

## Usage

```sh
npm install -D @lollipop-onl/choco-chips
```
npm package: @lollipop-onl/docsify-theme
Description: <p align="center">   <img src="docsify.svg" alt="Docsify Logo" height="128"> </p> <h1 align="center">Docsify Theme</h1> <p align="center">   <code>@lollipop-onl/docsify-theme</code> </p>
Author: simocheee
Latest version: 1.0.4

<p align="center">
  <img src="docsify.svg" alt="Docsify Logo" height="128">
</p>
<h1 align="center">Docsify Theme</h1>
<p align="center">
  <code>@lollipop-onl/docsify-theme</code>
</p>

[![](https://data.jsdelivr.com/v1/package/npm/@lollipop-onl/docsify-theme/badge)](https://www.jsdelivr.com/package/npm/@lollipop-onl/docsify-theme)
[![npm version](https://badge.fury.io/js/@lollipop-onl%2Fdocsify-theme.svg)](https://badge.fury.io/js/@lollipop-onl%2Fdocsify-theme)
[![License](https://img.shields.io/npm/l/@lollipop-onl/docsify-theme)](https://github.com/lollipop-onl/docsify-plugins/blob/main/LICENSE)

Custom docsify theme by [@lollipop-onl](https://github.com/lollipop-onl).

## Setup

Requirement:
[docsify](https://docsify.js.org/)
[docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/)

```html
<head>
  <!-- required: docsify-themeable -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"
  />

  <!-- optional: Mermaid -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css"
  />

  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/@lollipop-onl/docsify-theme/simple.css"
  />
</head>
```

## Custom Font

```html
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"
/>
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css"
/>

<!-- load webfont (e.g. Google Fonts) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans+JP:wght@400;700&display=swap"
  rel="stylesheet"
/>

<!-- override variables -->
<style>
  :root {
    --base-font-family: "IBM Plex Sans JP", sans-serif;
    --code-font-family: "IBM Plex Mono", monospace;
  }
</style>

<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/@lollipop-onl/docsify-theme/simple.css"
/>
```

## License

MIT
npm package: @lollipop-onl/react-reactive-state
Description: Provide reactive state hook for React
Author: lollipop-onl
Latest version: 1.1.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# react-reactive-state

This library is provided a Vue like `useState` hook api for React.

## Installation

```sh
$ yarn add @lollipop-onl/react-reactive-state
# or
$ npm install -S @lollipop-onl/react-reactive-state
```

## Usage

```tsx
import React from 'react';
import { useReactiveState, ReactiveState } from '@lollipop-onl/react-reactive-state';

type Props = {
  model: ReactiveState<string>;
}

const MyInput: React.VFC<Props> = ({ model }) => {
  const onInput = (event: React.InputEvent<HTMLInputElement>): void => {
    model.value = event.target.value;
  };

  return (
    <input
      type="text"
      defaultValue={model.value}
      onInput={onInput}
    />
  );
};

const App: React.VFC = () => {
  const myVal = useReactiveState('');

  const resetValue = () => myVal.reset(); // myVal change to ''
  
  return (
    <>
      <MyInput model={myVal} />
      <p>{ myVal.value }</p>
      <button onClick={resetValue}>Reset value</button>
    </>
  )
};
```
npm package: @lollipop-onl/vue-typed-reactive
Description: Provide type-safe Vue.set/Vue.delete mehtods
Author: lollipop.onl
Latest version: 1.1.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# vue-typed-reactive

![vtyped](https://raw.githubusercontent.com/lollipop-onl/vue-typed-reactive/master/vtyped.png)

This plugin is provide type-safe version of Vue reactivity methods.

## Installation

```sh
$ yarn add @lollipop-onl/vue-typed-reactive
# or
$ npm install -S @lollipop-onl/vue-typed-reactive
```

## Setup

### Step 1. Register to Vue app

```ts
import TypedReactive from '@lollipop-onl/vue-typed-reactive';

Vue.use(TypedReactive);
```

With Nuxt.js:

```ts
// nuxt.config.ts
const config: Configuration = {
  ...
  modules: [
    '@/plugins/libs/vue-typed-reactive/nuxt',
  ],
  ...
};
```

### Step 2. Add types in tsconfig.json

```json
// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "@lollipop-onl/vue-typed-reactive"
    ]
  }
}
```

Setup completed!

### Step X. Set a weak types in tsconfig.json

```json
// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "@lollipop-onl/vue-typed-reactive/weak"
    ]
  }
}
```

when, next code is allowed:

```ts
const foo: { a: number } = { a: 0 };

// `foo.a` is a NOT optional property. but allowed on weak type mode.
Vue.typedDelete(foo, 'a');
```

## Usage

In Vue component:

```ts
@Component
export default class SampleComponent extends Component {
  /**
   * Change user age
   * @param age Age of user
   */
  changeUseAge(age: number): void {
    this.$typedSet(this.profile, 'age', age);
  }

  /**
   * Remove user middlename
   */
  removeUserMiddleName(): void {
    this.$typedDelete(this.profile, 'middlename');
  }
}
```

In Vuex mutation

```ts
export const mutations = {
  setUserProfile(state, payload) {
    Vue.typedSet(state, 'profile', payload);
  },
}
```

# Features

**`typeSet(target, propertyName/index, value)`**

* `propertyName` can set only writable properties
* `value` can set only assignable type

**`typedDelete(target, propertyName/index)`**

* `propertyName` can set only optional properties

# License

MIT
npm package: @lollipop-onl/vuekey
Description: `vuekey` is a library of typesafe data path for [`@Watch`](https://github.com/kaorun343/vue-property-decorator#Watch) and `vm.set`.
Author: lollipop.onl
Latest version: 0.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# vuekey

`vuekey` is a library of typesafe data path for [`@Watch`](https://github.com/kaorun343/vue-property-decorator#Watch) and `vm.set`.

## Installation

```sh
$ npm i --save @lollipop-onl/vuekey
# or
$ yarn add @lollipop-onl/vuekey
```

## Example

### Simple Example

```ts
import { Component, Watch, Vue } from 'vue-property-decorator';
import { setupVuekey } from '@lollipop-onl/vuekey';

const vuekey = setupVuekey<SampleComponent>();

@Component
export default class SampleComponent extends Vue {
  counter = {
    count: 0,
    updatedAt: Date.now()
  };

  @Watch(vuekey('counter', 'count'))
  onUpdateCount(): void {
    this.$set(...vuekey(this.counter, 'updatedAt', Date.now()));
  }
}
```

### with vuex-typesafe-helper

Typesafely watch store data with [`@lollipop-onl/vuex-typesafe-helper`](https://www.npmjs.com/package/@lollipop-onl/vuex-typesafe-helper).

```ts
import { Component, Watch, Vue } from 'vue-property-decorator';
import { setupVuekey } from '@lollipop-onl/vuekey';
import { RootStore } from './types/vuex';

const vuekey = setupVuekey<SampleComponent>();

@Component
export default class SampleComponent extends Vue {
  $store!: RootStore;

  @Watch(vuekey('$store', 'state', 'profile', 'birthday'))
  onUpdateBirthday(): void {
    // do something
  }
}
```

## Notice !

* `vuekey` can verify up to **10** depths
* `watch` AAAA support only simple path.
  * OK: `foo.bar.baz`
  * NG: `foo[0]`, `foo['bar-baz']`

## License

MIT
npm package: @lollipope/alarm-helper-compat
Description: A Vue 3 component library for alarm management.
Latest version: 0.1.15
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.


### 写在前面的话
 此库基于[**@lollipope/alarm-helper**](https://www.npmjs.com/package/@lollipope/alarm-helper)开发, 仅适用于Vue2(cdp版)项目集成
>如果是在Vue3项目使用,请使用 [**@lollipope/alarm-helper**](https://www.npmjs.com/package/@lollipope/alarm-helper)


### 集成文档
##### 1.安装依赖(建议使用 npm 下载)

```bash
npm i @lollipope/alarm-helper-compat --no-save
```

#### 2.添加配置文件
```js
//public/config/config.js:
//全局配置项
;(function (window) {
  window.globalConfig = {
    // 添加以下配置
    AlarmCenterWsUrl: `128.23.13.125:28082`, // 告警中心Socket地址
    AlarmRobotApiContext: '/api/',// 告警弹窗接口前缀
    WhiteRoutes: ["/video/setting"],// 路由白名单
    UserInfo:{ userId:'',token:''}, // 用户的所有信息
    AlarmWebPath:'告警中心前端首页', //请配置告警中心系统首页地址
    AlarmStreamPath:`http://xxxx/api/GetCameraPlayURL`,//流媒体服务接口
    AlarmStreamDomain:`private`, //外网（public）还是内网（private）
    AlarmStreamRate:`slaver`, //获取主码流（master）或者副码流（slaver）
    AlarmStreamMode:'1' //  1:视频一体机 0:流媒体
  }
})(window)
```
配置说明:
| 参数 | 说明 | 类型 | <div style='width:100px'>是否必要</div> | <div style='width:80px'>默认值</div>  |
| :----|:----| :----: |:----: |:----: |
| AlarmCenterWsUrl | 告警中心Socket地址<br> eg:`127.0.0.1:9527` | String |    是    |    -    |
| AlarmRobotApiContext | 告警弹窗接口前缀,需要拦截该前缀转发到对应后端地址 <br> eg:`/api/`| String |    是    |    -    |
| WhiteRoutes | 路由白名单,可接受数组或函数. <br>`数组`:匹配该路径的页面会显示该组件  <br>eg:`["/video/setting"]` <br>`函数`:页面地址变更时回调,返回值为true,则当前页面可见<br>| Array\<String> or Function |    是    |    -    |
| UserInfo | 用户的所有信息,用户登入登出后需要手动更新该值  <br> eg:`{ userId:'',token:''}`| { userId: string,token: string } |    是    |    -     |
| AlarmWebPath | 告警中心首页地址(外部系统集成需要配置,配置该项会新开页签并跳转)  <br> eg:`http://localhost:9527/`| String |    否    |    -     |
| AlarmStreamPath | 流媒体服务接口Uri   <br> eg:`http://ip:port/api/GetCameraPlayURL`| String |    是    |    -     |
| AlarmStreamDomain | 流媒体取流来源   | String |    否    |   private    |
| AlarmStreamRate | 流媒体码流   | String |    否    |  slaver   |
| AlarmStreamMode```(v0.1.11+)``` | 流媒体码流取流方式, `1:视频一体机 0:流媒体`   | String |    否    |  -   |
npm package: @lolmath/ddragon
Description: Get data from League of Legends Ddragon API.
Author: Mees van Dongen
Latest version: 2.0.4

# ddragon

[![npm](https://img.shields.io/npm/v/ddragon)](https://www.npmjs.com/package/ddragon)

ddragon api for League of Legends.

## Usage

```js
import { Ddragon } from "@lolmath/ddragon";

const dd = new Ddragon({
  version: "6.24.1", // defaults to 8.9.1
  language: "ja_JP", // defaults to en_US
  dataBaseUrl: "https://ddragon.leagueoflegends.com/cdn" // defaults to https://ddragon.leagueoflegends.com/cdn
  imageBaseUrl: "https://ddragon.leagueoflegends.com/cdn" // defaults to https://ddragon.leagueoflegends.com/cdn
  imageUrlTransformer: (url) => url // defaults to (url) => url
});

dd.images.splash("Cassiopeia", 0); // https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Cassiopeia_0.jpg
```

### Global

```js
import { ddragon } from "ddragon/global";

ddragon.configure({
  version: "6.24.1",
});

ddragon.images.splash("Cassiopeia", 0); // https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Cassiopeia_0.jpg
```

### Webp

```js
import { Ddragon, withWebp } from "@lolmath/ddragon";

const dd = new Ddragon(withWebp());

dd.images.splash("Cassiopeia", 0); // https://ddragon-webp.lolmath.net/img/champion/centered/Cassiopeia_0.webp
```

## Docs

Documentation can be found at https://docs.lolmath.net/ddragon