open-index/open-npm huggingface dataset:
npm package: @iosio/store
Description: Ultra simple state management for react
Author: iosio
Latest version: 1.0.1

# IOSIO store
<img src="https://img.shields.io/circleci/project/github/iosio/store.svg?style=flat-square" /><img src="https://img.shields.io/npm/v/@iosio/store.svg?style=flat-square" />

Ultra simple state management for react

(Use @iosio/capsule for all the extra goodies!!)

```sh
npm i @iosio/store
```
npm package: @iosio/utils
Description: A collection of helpful JavaScript utility functions
Author: iosio
Latest version: 3.1.1

# IOSIO utils
<img src="https://img.shields.io/circleci/project/github/iosio/utils.svg?style=flat-square" /><img src="https://img.shields.io/npm/v/@iosio/utils.svg?style=flat-square" />

A collection of helpful JavaScript utility functions

```sh
npm i @iosio/utils
```
npm package: @iosio/x
Description: > tiny vdom inspired by https://twitter.com/_developit/status/1232891191110389760
Latest version: 0.7.14

# @iosio/x

> tiny vdom inspired by https://twitter.com/_developit/status/1232891191110389760



```js
import {h, render, Fragment, Host} from '@iosio/x';
import {someSubscription} from './someSubscription';


const Counter = (props, {count}, update) => {
    
    return(
            <Host lifeCycle={() => { //once per instance.

                // call update to rerender this component
                let unsub = someSubscription(update); 
                return () => unsub();   //unsubscribes when unmounted
                
                //or <Host lifeCycle={()=>someSubscription(update)}> ...
            }}>
    
                <h1>
                    {someSubscription.latestValue}
                </h1>

                <button onClick={() => update({count: count + 1})}>
                    inc me!! : {count}
                </button>

            </Host>
        )   
}


const App = (props, {show = false}, update) => {
    
    return (
        <Fragment>
            <button onClick={() => update({show: !show})}>
                toggle
            </button>

            {
                show && <Counter/>
            }   
            <Counter/>
        </Fragment>
    )

}

render(<App/>, document.body);

```
npm package: @iosio/x-base
Description: x base component
Latest version: 0.7.0

# @iosio/x-base


> for creating @iosio/x and @iosio/x-preact


```js
import {h, render} from "preact";
import {setProperty} from "@iosio/xact";

import {createBase} from "@iosio/x-base";


const {x} = createBase({h, render, setProperty});

const App = x('test-element', ({Host, CSS})=>(
    <Host>
        <CSS/>

        <h1>test element</h1>
    </Host>
));


render(<App/>, document.body)

```

### License

[MIT]

[MIT]: https://choosealicense.com/licenses/mit/
npm package: @iosio/xact
Description: modified and reduced version of preact without class components. great for simply rendering jsx inside web components (including shadowRoots)
Latest version: 0.7.12


    
# @iosio/xact


> modified and reduced version of preact without class components


Great if you just need a solid vdom for rendering JSX inside web components without the need for p/react class components, since
 lifecycles methods can be handled by the custom element.

## Installation 
```sh
npm install @iosio/xact --save
```

## Quick example

Use @iosio/x or @iosio/x-preact for all the boilerplate set up
```js
import {h, render, Fragment} from "../../src";


customElements.define('my-sweet-component', class extends HTMLElement {
    constructor() {
        super();
        this.root = this.attachShadow({mode: 'open'});
    }

    static get observedAttributes() {
        return ['count']
    }


    update = (props) => {
        render(this.render(props), this.root);
    };

    render = ({count}) => {
        return (
            <Fragment>
                <h1>Hello </h1>
                <h1>I update when my count attribute changes</h1>
                <h1>{count}</h1>
            </Fragment>
        )
    };

    connectedCallback() {
        this.update({count: this.getAttribute('count')})
    }

    attributeChangedCallback(attr, oldValue, newValue) {
        if (oldValue === newValue) return;
        this.update({[attr]: newValue})
    }

    disconnectedCallback() {
        if (!this.isConnected) {
            render(null, this.root);
        }
    }

});

const component = document.createElement('my-sweet-component');

document.body.appendChild(component);


let count = 0;
setInterval(() => {
    component.setAttribute('count', count++);
}, 1000);

````
### License

[MIT]

[MIT]: https://choosealicense.com/licenses/mit/
npm package: @iosmanthus/clash-subscriber
Description: [![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io) [![Version](https://img.shields.io/npm/v/@iosmanthus/clash-subscriber)](https://npmjs.org/package/@iosmanthus/clash-subscriber) [![Download](https://img.shields.io/npm/dw
Author: Iosmanthus Teng @iosmanthus
Latest version: 0.4.0

# Clash Subscriber

[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/@iosmanthus/clash-subscriber)](https://npmjs.org/package/@iosmanthus/clash-subscriber)
[![Download](https://img.shields.io/npm/dw/@iosmanthus/clash-subscriber)](https://www.npmjs.com/package/@iosmanthus/clash-subscriber)
[![License](https://img.shields.io/npm/l/@iosmanthus/clash-subscriber)](https://github.com/iosmanthus/clash-subscriber/blob/master/package.json)

## Installation

```sh
npm install -g @iosmanthus/clash-subscriber
```

## Usage

```sh
USAGE
  $ clash-subscriber [options] -l/--url URL

OPTIONS
  -G, --group-policy=group-policy  apply a group policy to proxies, retain only one proxy group and match rule
  -c, --config=config              extra configurations for Clash, e.g. port=1081 socks-port=1080 allow-lan=true
                                   external-controller=172.18.0.2:9090

  -f, --file=file                  [default: /etc/clash/config.yaml] file to save the configuration
  -h, --help                       show CLI help
  -i, --interval=interval          [default: 60] interval to fetch configuration, in minutes
  -l, --url=url                    (required) subscription link
  -p, --virtual-path=virtual-path  virtual file path to load the configuration. useful in docker. default value as same as the `file`
  -r, --filter=filter              use a regex to filter proxy
  -v, --version                    show CLI version
```

For flag `group-policy`, there are two options for it:

1. `method=speed`, this option will test the download speed toward the `url=`. You can also specify a `timeout=` (default: `10s`) to limit the download time. If there is no proxy selected, `timeout` will amplify to the 1.5x of itself and try again.
2. `method=latency`, this option will test the latency toward the `url=` which is done by `Clash` itself. You can provide an `interval` value to it (default: `10min`).

Flag `virtual-path` is for refresh config for Clash on docker. (Make sure your initial controller is correct)
npm package: @iosmanthus/learner-recover
Description: recover tikv cluster from learners
Author: iosmanthus
Latest version: 0.1.1

# Prerequisite

1. Install latest NodeJS >= 16, you may use [nvm](https://github.com/nvm-sh/nvm) to install it.
2. Execute `npm install`.
3. Install `TiUP` in current node.
4. Install `pd-recover` in current node.

# How it works

This scripts has two parts:

1. Crawler: periodically fetch some cluster info from the main cluster and save it to a json file.
2. Restorer: move the learner out of the old cluster and promote them to voters in another cluster.

# Usage

1. Crawler: 
```
node index.js --help
Options:
      --help      Show help                           [boolean]
      --version   Show version number                 [boolean]
  -t, --topo      path of topology file     [string] [required]
  -z, --zone      zone that need info backup[string] [required]
  -s, --save      path to save cluster info backup
                                            [string] [required]
  -i, --interval  path to save cluster info backup (s)
                                          [number] [default: 1]
```

2. Restorer:
```
node recover.js --help
Options:
      --help     Show help                            [boolean]
      --version  Show version number                  [boolean]
  -c, --config   path of config file        [string] [required]
```

config template:

```yaml
cluster-version: v5.1.0
# new cluster name
cluster-name: iosmanthus-backup

# the main cluster's topology file
old-topology: config/old.yaml
# the new cluster's topology file
new-topology: config/new.yaml
# the topology that contains the learners from the main cluster, change port to avoid conflict.
join-topology: config/join.yaml
# recover info file path
recover-info-file: config/recover-info.json
# recover zone label
recover-zone: backup
# path for tikv-ctl on each learner node
tikv-ctl-path: /root/tikv-ctl
# path for pd-recover in current node
pd-recover-path: bin/pd-recover
```
npm package: @iostack/js-client
Description: A Javascript client wrapping interactions with the iostack inference service
Author: iostack.ai
Latest version: 0.0.54

# js-client
Typescript/Javascript Client for interacting with iostack inference service


## Install and use NPM package

### Install package
```
npm i @iostack/js-client
# or
pnpm add @iostack/js-client
# or
yarn add @iostack/js-client

```

### Use
```javascript

    import {
        IOStackClient,
        StreamFragmentPacket,
    } from "@iostack/js-client";

    const client = new IOStackClient({
        platform_root: "https://platform.iostack.ai",
        access_key: "iosk-ucst-dev-6C2...",
        response_timeout: 180
    });

    var response = "";

    client.addStreamFragmentHandler(async (fragment: StreamFragmentPacket) => {
        response = response + fragment.fragment
        if (fragment.final) {
            console.log(response)
            response = "";
        }
    })

    client.addErrorHandler(async (error: string) => {
        console.error(error)
    })

    try {
        await client.startSession();
        await client.sendMessage("Hi! What can you help me with?")
    }
    catch (e: any) {
        console.error(e.toString())
    }
```

## Install and use repo

* Clone repo
```
git clone https://github.com/iostack-org/js-client.git
```

* ```cd``` into cloned repo
* Install package dependencies
```
npm install
```

* Add a ```.env``` file
```
IOSTACK_PLATFORM_ENDPOINT=https://platform.iostack.ai
IOSTACK_ACCESS_KEY=iosk-ucst-dev-....
```


### Build 
Build uses webpack to build a standalone client js file in ./dist 
```
npm run build
```

### Run tests
```
npm test
```

### Tests

The ./src/__tests__/client.integrations.test.ts file contains jest tests that demonstrate how to use the js/ts client, including:

1. Creating and running a session using the client
2. Continuing a previously initialised session using session ID and access key
3. Standalone/server initiated session initialisation followed by starting a client to run the session
npm package: @iostindex/gatsby-plugin-material-ui
Description: Gatsby plugin for Material-UI with built-in server-side rendering support
Latest version: 5.0.0

# gatsby-plugin-material-ui

> A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for [@material-ui](https://github.com/mui-org/material-ui) with built-in server-side rendering support.

This is the plugin for Material-UI v5 (emotion). The plugin for v4 can be found [here](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v3.0.1).

## Install
```sh
npm install gatsby-plugin-material-ui@next @emotion/react
```

## Theme vs. Plugin
- `gatsby-plugin-material-ui` solves FOUC, auto prefixing and minification.
- `gatsby-theme-material-ui` uses the plugin under the hood, adds web fonts, meta-viewport, CSS baseline and mui theme support and has material ui styled gatsby link components

## How to use

The default options should be enough to cover the most common use cases.

```js
// gatsby-config.js

module.exports = {
  plugins: [`gatsby-plugin-material-ui`],
};
```

## Advanced

You can use the `pathToEmotionCacheProps` option for low level customization of how styles get inserted by [emotion](https://emotion.sh/docs/@emotion/cache#createcache).

```js
// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        pathToEmotionCacheProps: `src/emotion-cache-props`,
      },
    },
  ],
};
```

```js
// src/emotion-cache-props.js
const emotionCacheProps = {
  key: `xyz`,
  nonce: `XXXYYYZZZ`
};

export default emotionCacheProps;
```

## Examples

You can find an official integration example of this plugin [on the Material-UI site](https://github.com/mui-org/material-ui/tree/master/examples/gatsby), then you can pick one of the [Page Layout Examples](https://material-ui.com/getting-started/page-layout-examples/).

If you want to save time with a more opinionated solution. You can start with [a premade theme](https://github.com/hupe1980/gatsby-theme-material-ui).
npm package: @iostore/devtools
Description: IO DevTools 不是 Redux DevTools 的替代品， 而是一个 状态运行时观察系统。
Latest version: 0.0.4

# @iostore/devtools

IO DevTools 不是 Redux DevTools 的替代品， 而是一个 状态运行时观察系统。

Commit 是“因”

Diff 是“证据”

Snapshot 是“历史”

Derived 是“计算图”
npm package: @iostore/devtools-react
Description: IO DevTools 的 React 组件包。
Latest version: 0.0.4

# @iostore/devtools-react

IO DevTools 的 React 组件包。

## Exports

- `IoDevtoolsPanel`
- `IoDevtoolsErrorBoundary`

## Usage

```tsx
import { createIoDevtools } from '@iostore/devtools';
import { io } from '@iostore/store';
import { IoDevtoolsPanel } from '@iostore/devtools-react';
import '@iostore/devtools-react/styles.css';

const count = io(0);
const devtools = createIoDevtools(count, { name: 'counter' });

export function App() {
  return <IoDevtoolsPanel devtools={devtools} />;
}
```
npm package: @iostore/store
Description: IO 核心状态库：Unit / ArrayUnit / Scope / Derived / Snapshot，并支持更新追踪、合并与回放。
Latest version: 0.0.4

# @iostore/store

IO 核心状态库：Unit / ArrayUnit / Scope / Derived / Snapshot，并支持更新追踪、合并与回放。

## 深层对象

- `io()` 对 object / array 默认进行 deep 处理。
- 需要“仅第一层变成 Unit”的行为时使用 `io(value, { shallow: true })`。

## Behavior 扩展

本包提供最小行为扩展层，支持对读/写/订阅行为进行组合增强。

```ts
import { io } from '@iostore/store';
import {
  withBehaviors,
  schedule,
  throttle,
  effect,
  persist,
} from '@iostore/store/behavior';

const count = io(0);
const view = withBehaviors(count, [
  schedule('microtask'),
  throttle(50),
  effect((value) => {
    console.log('effect', value);
  }),
  persist({ key: 'count' }),
]);

view.subscribe((v) => console.log(v));
view.set?.(1);
```

也可在树形结构中按路径构造视图：

```ts
import { io } from '@iostore/store';
import { relocate } from '@iostore/store/extensions';

const state = io({ user: { age: 1 } });
const age = relocate<number>(state, ['user', 'age']);
age(2);
```

DevTools 示例（按需引入）：

```ts
import { createIoDevtools } from '@iostore/devtools';
import { io } from '@iostore/store';
import { devtools, withBehaviors } from '@iostore/store/behavior';

const count = io(0);
const view = withBehaviors(count, [
  devtools({ target: count, create: createIoDevtools }),
]);

const dt = view.extensions?.devtools;
```