open-index/open-npm huggingface dataset:
npm package: @rxweb/core
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.1-beta1

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


<h3>Documentation Coming Soon....</h3>
npm package: @rxweb/dom
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.3

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


<h3>Documentation Coming Soon....</h3>
npm package: @rxweb/framework
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.1

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


<h3>Documentation Coming Soon....</h3>
npm package: @rxweb/generics
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.1-4

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


Comming soon.....
npm package: @rxweb/grid
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.2.14

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


<h3>Documentation Coming Soon....</h3>
npm package: @rxweb/http
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.2

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	

Coming Soon.....
npm package: @rxweb/js
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.5

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


<h3>Documentation Coming Soon....</h3>
npm package: @rxweb/localization
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.3

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


<h3>Documentation Coming Soon....</h3>
npm package: @rxweb/react-forms
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.0-beta1


[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![dependencies Status](https://david-dm.org/rxweb/rxweb/status.svg)](https://david-dm.org/rxweb/rxweb)


Documentation Coming Soon....
# License
MIT
npm package: @rxweb/sanitizers
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.1

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


Comming soon.....
npm package: @rxweb/storage
Description: [![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb) [![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
Latest version: 0.0.2

[![Build Status](https://travis-ci.org/rxweb/rxweb.svg?branch=master)](https://travis-ci.org/rxweb/rxweb)
[![Gitter](https://badges.gitter.im/rx-web/Lobby.svg)](https://gitter.im/rxweb-project/rxweb?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=body_badge)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6af5855682524d39a0d88bade210facd)](https://www.codacy.com/app/rxweb/rxweb?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=rxweb/rxweb&amp;utm_campaign=Badge_Grade)
[![DeepScan grade](https://deepscan.io/api/teams/3217/projects/4745/branches/37870/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3217&pid=4745&bid=37870)
[![GitHub license](https://img.shields.io/github/license/rxweb/rxweb.svg)](https://github.com/rxweb/rxweb/blob/master/LICENSE)
	


<h3>Documentation Coming Soon....</h3>
npm package: @rxx/core
Description: React MVI micro framework.
Author: Taketoshi Aono
Latest version: 1.0.1-alpha.9

# @react-mvi/core

react-mvi is Model-View-Intent based minimal framework with Reactjs and RxJS.

- We remove all `shouldComponentUpdate` from React by create each props as RxJS.Observable.
- We built more redux user friendly Model-View-Intent framework than [cyclejs](http://cycle.js.org/).
- Asynchronous process is no more problem, StateHandler make it easy and clean.
- Command line tool has been prepared! as `@react-mvi/cli`

Inspired by  
[cyclejs](http://cycle.js.org/)  
[redux](https://github.com/reactjs/redux)  
[react-combinators](https://github.com/milankinen/react-combinators)  
[react-reactive-toolkit](https://github.com/milankinen/react-reactive-toolkit)

## First look !

```javascript

import * as React from 'react';
import { Observable } from 'rxjs/Rx';
import { Tags as T, store, intent, connect } from '@react-mvi/core';

/**
 * Intent is converter that convert dispatched event to Observable.
 */
@intent
class Intent {
  plus() { return this.intent.for('counter::plus').share();}

  minus() { return this.intent.for('counter::minus').share(); }
}

/**
 * Store is Observable state factory.
 */
@store
class Store {
  initialize() {
    return {
      view: {
        counter: this.intent.plus().mapTo(1)
          .merge(this.intent.minus().mapTo(-1))
          .scan((acc, e) => {
            return acc + e;
          }, 0)
      }
    };
  }
}

/**
 * Root component must decorated by connect like redux.
 */
@connect({
  mapIntentToProps(intent) {
    return {
      onPlus: intent.callback('counter::plus'),
      onMinus: intent.callback('counter::minus'),
    }
  }
})
class View extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onPlus}>Plus</button>
        <button onClick={this.props.onMinus}>Minus</button>
        /* We can treat Observable value directly. */
        <T.Div>conter value is {this.props.counter}</T.Div>
      </div>
    );
  }
}

render(
  <Provider intent={Intent} store={Store}><View /></Provider>,
  document.querySelector('#app')
);

```

## Guide

- Examples
    - [Simple Counter Programe](./docs/basic_guide.md)
    - [Single Page Application with react-router](./docs/spa.md)
- Basics
    - [Setup](./docs/setup.md)
    - [Create connected component](./docs/basics/create_connected_component.md)
    - [Create component with context](./docs/basics/create_component.md)
    - [Create store](./docs/basics/create_store.md)
    - [Create intent](./docs/basics/create_intent.md)
    - [StaeHandler](./docs/basics/state_handler.md)
- Advanced Usage
    - [Create your own StateHandler](./docs/au/create_yow_state_handler.md)

## Architecture

![architecture](../../images/react-mvi.png)

## Requirements

- react >= 15.0.0 <= 15.6.1
- react-dom >= 15.0.0 <= 15.6.1
- rxjs >= 5.0.0 <= 5.4.2
npm package: @rxx/http
Description: Http IO module for rxx.
Author: Taketoshi Aono
Latest version: 1.0.1-alpha.9

# @react-mvi/http

react-mvi StateHandler for http request.

## Requirements

- @react-mvi/core >= 1.0.0

## Installation

```nps install @react-mvi/http```

## Usage

First, register HttpHandler to @react-mvi/core handlers by __registerHandlers__.

```typescript
import {
  registerHandlers
} from '@react-mvi/core';
import {
  HttpHandler
} from '@react-mvi/http';


registerHandlers({
  http: new HttpHandler()
})
```

`@react-mvi/http` use http property of Store returned object.

See example below.

Create request stream.

```typescript
// Send request.
class AStore extends Store<{http: {[key: string]: HttpConfig}}> {
  public render() {
    return {
      http: {
        'app::requestSubmit': this.intent.onSubmit().mapTo({...})
      }
    }
  }
}
```

Receive response with stream.

```typescript
@intent
class Intent {
  private intent: HandlerResponse;
  private http: HandlerResponse;
  
  public onSubmit() {
    return this.intent.for('app::onSubmit');
  }

  public onSubmitResponse() {
    return this.http.for('app::requestSubmit');
  }
}

// In Store.
this.intent.onSubmitResponse().map(...)
```

## Request Specification

```typescript
interface HttpConfig {
  url: string;
  method?: HttpMethod;
  headers?: any;
  mode?: 'cors'|'same-origin'|'no-cors';
  json?: boolean;
  data?: string|Blob|FormData,
  form?: boolean;
  responseType?: ResponseType
}
```

### url

Request url.

### method

Request method type. It defined in HttpMethods enum.

```typescript
enum HttpMethod {
  GET = 1,
  POST,
  PUT,
  DELETE
}
```

### headers

Request headers.

### mode

Fetch api mode.

### json

Send json or not.

### data

Request body.

### form

Using www-form-urlencoded.

### responseType

Response body type. It defined in ResponseType enum.

```typescript
enum ResponseType {
  JSON = 1,
  BLOB,
  ARRAY_BUFFER,
  FORM_DATA,
  TEXT
}
```

## Response Specification

```typescript
interface HttpResponse<T, E> {
  ok: boolean;
  headers: {[key: string]: string};
  status: number;
  response: T;
  error: E;
}
```

### ok

Flag that show response was 30X or 20X.

### headers

Response headers.

### status

Response status number.

### response

Response body.

### error

Error message if error occured.
npm package: @rxx/testing
Description: Testing module for rxx.
Author: Taketoshi Aono
Latest version: 1.0.1-alpha.9

# @react-mvi/testing

## What's this?

`@react-mvi/testing` is test utility for `@react-mvi`.

## Installation

```
npm i @react-mvi/testing -D
```

## Usage

```typescript
import {
  Prepared,
  prepareTest
} from '@react-mvi/testing';
import {
  Observable
} from 'rxjs/Rx';
import {
  AppStore
} from '../store';
import {
  AppIntent
} from '../../intents/intent';
import {
  expect
} from 'chai';


describe('AppStore', () => {
  let prepared: Prepared<{view: {greeting: Observable<string>}}>;
  beforeEach(() => {
    prepared = prepareTest(AppIntent, AppStore);
  });

  describe('initialize().view.greeting', () => {
    it('should send greet to stream.', done => {
      const { store, mock } = prepared;
      const { greeting } = store.initialize().view;
      greeting.skip(1).subscribe(v => {
        expect(v).to.be.eq('Hello World!');
        done();
      });
      mock.send('onMounted', {});
    });
  });
});

```

We support easy Store construction.


## API

#### Prepared

```typescript
// Response type of `prepareTest`.
type Prepared<V> = {
  stores: Store<V>[];
  store: Store<V>;
  mock: MockManipulator;
};
```

#### PrepareOptions

```typescript
// Options type of `prepareTest`.
type PrepareOptions = {
  services?: { [key: string]: any };
  handlers?: { [key: string]: StateHandler };
  state?: any;
};
```

#### prepareTest


```typescript
/**
 * Prepare Intent and Store.
 * @param IntentClass User defined Intent class that want to mocking.
 * @param StoreClass User deinfed Store class that wnat to testing.
 * @return Return mocked Intent and associated Store.
 */
function prepareTest<T extends IntentConstructor, U extends StoreConstructor<T, V>, V>(
  IntentClass: T,
  StoreClass: StoreConstructor<T, V> | StoreConstructor<T, V>[],
  opt: PrepareOptions = { state: {} }): Prepared<V>
```


#### Mocker

Mocking Intent class by replace all method with simple function that return Rx.Subject that controlled by MockManipulator.

### MockManipulator

```typescript
class MockManipulator {
 /**
  * Send value to Rx.Subject that is assosiated with Intent by Mocker.
  * @param name Method name of Intent.
  * @param data Parameter of Intent.
  */
  public send(name: string, data: any = {}): void

 /**
  * Static version of above `send`.
  */
  public static send(mock: Mocker, name: string, data: any = {})
}
```
npm package: @rxx/worker
Description: React MVI micro framework.
Author: Taketoshi Aono
Latest version: 1.0.1-alpha.4

# @react-mvi/core

react-mvi is Model-View-Intent based minimal framework with Reactjs and RxJS.

- We remove all `shouldComponentUpdate` from React by create each props as RxJS.Observable.
- We built more redux user friendly Model-View-Intent framework than [cyclejs](http://cycle.js.org/).
- Asynchronous process is no more problem, StateHandler make it easy and clean.
- Command line tool has been prepared! as `@react-mvi/cli`

Inspired by  
[cyclejs](http://cycle.js.org/)  
[redux](https://github.com/reactjs/redux)  
[react-combinators](https://github.com/milankinen/react-combinators)  
[react-reactive-toolkit](https://github.com/milankinen/react-reactive-toolkit)

## First look !

```javascript

import * as React from 'react';
import { Observable } from 'rxjs/Rx';
import { Tags as T, store, intent, connect } from '@react-mvi/core';

/**
 * Intent is converter that convert dispatched event to Observable.
 */
@intent
class Intent {
  plus() { return this.intent.for('counter::plus').share();}

  minus() { return this.intent.for('counter::minus').share(); }
}

/**
 * Store is Observable state factory.
 */
@store
class Store {
  initialize() {
    return {
      view: {
        counter: this.intent.plus().mapTo(1)
          .merge(this.intent.minus().mapTo(-1))
          .scan((acc, e) => {
            return acc + e;
          }, 0)
      }
    };
  }
}

/**
 * Root component must decorated by connect like redux.
 */
@connect({
  mapIntentToProps(intent) {
    return {
      onPlus: intent.callback('counter::plus'),
      onMinus: intent.callback('counter::minus'),
    }
  }
})
class View extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onPlus}>Plus</button>
        <button onClick={this.props.onMinus}>Minus</button>
        /* We can treat Observable value directly. */
        <T.Div>conter value is {this.props.counter}</T.Div>
      </div>
    );
  }
}

render(
  <Provider intent={Intent} store={Store}><View /></Provider>,
  document.querySelector('#app')
);

```

## Guide

- Examples
    - [Simple Counter Programe](./docs/basic_guide.md)
    - [Single Page Application with react-router](./docs/spa.md)
- Basics
    - [Setup](./docs/setup.md)
    - [Create connected component](./docs/basics/create_connected_component.md)
    - [Create component with context](./docs/basics/create_component.md)
    - [Create store](./docs/basics/create_store.md)
    - [Create intent](./docs/basics/create_intent.md)
    - [StaeHandler](./docs/basics/state_handler.md)
- Advanced Usage
    - [Create your own StateHandler](./docs/au/create_yow_state_handler.md)

## Architecture

![architecture](../../images/react-mvi.png)

## Requirements

- react >= 15.0.0 <= 15.6.1
- react-dom >= 15.0.0 <= 15.6.1
- rxjs >= 5.0.0 <= 5.4.2
npm package: @rxxuzi/gumi
Description: Clean & minimal design system with delightful interactions
Author: rxxuzi
Latest version: 1.2.1

# Gumi

A minimal design system for modern web.

[![npm version](https://badge.fury.io/js/%40rxxuzi%2Fgumi.svg)](https://badge.fury.io/js/%40rxxuzi%2Fgumi)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Installation

```html
<!-- CDN -->
<link rel="stylesheet" href="https://unpkg.com/@rxxuzi/gumi@latest/dist/gumi.css">
<script src="https://unpkg.com/@rxxuzi/gumi@latest/dist/gumi.js"></script>
```

```bash
# NPM
npm install @rxxuzi/gumi
```

## Quick Start

```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/@rxxuzi/gumi@latest/dist/gumi.css">
</head>
<body>
    <button class="btn btn-primary">Click me</button>
    
    <script src="https://unpkg.com/@rxxuzi/gumi@latest/dist/gumi.js"></script>
</body>
</html>
```

## Features

- Zero dependencies
- TypeScript support
- Light/Dark themes
- Responsive design
- Smooth animations
- Interactive components

## Components

- Buttons, Forms, Cards
- Modal, Toast, Dropdown
- Tabs, Accordion, Progress
- Sidebar with hamburger menu

## Documentation

See [doc/](doc/) for full documentation.

## Development

```bash
git clone https://github.com/rxxuzi/gumi.git
cd gumi
npm install
npm run dev
```

## License

Gumi is an open source project under the [MIT LICENSE](LICENSE)
npm package: @ry0513/utils
Description: personal utils
Author: RuoYu
Latest version: 0.0.4

个人使用的小工具箱

## 安装

```shell
npm i @ry0513/utils
# 或者
pnpm i @ry0513/utils
```

## 方法

- [extName](#extName)
- [baseName](#baseName)

## 类

- [Worker](#Worker)

### extName

用于获取文件扩展名

类型

```
extName(path: string, withDot?: boolean): string
```

例子

```js
import { extName } from "@ry0513/utils";
console.log(extName("/path/AAA00.jpg")); // jpg
console.log(extName("/path/AAA00.jpg", true)); // .jpg
```

### baseName

用于获取文件名

类型

```
baseName(path: string, ext?: boolean): string
```

例子

```js
import { baseName } from "@ry0513/utils";
console.log(baseName("/path/AAA00.jpg")); // AAA00
console.log(baseName("/path/AAA00.jpg", true)); // AAA00.jpg
```

### Worker

用于 Web Worker 的连接池，创建实例时不会创建线程；当有新任务加入时会检测存在的线程数，若线程数不超过最大时则会创建新的线程并执行该任务，否则会加入任务队列等待执行；当一个线程完成任务时会检测任务队列，若队列不为空时会按顺序取出下一个任务继续执行（复用该线程），若队列为空则会自动终止

类型

```
new Worker(path: string | URL, options?:WorkerPoolsOptions)

type WorkerPoolsOptions = {
    maxWorkers?: number;
    credentials?: WorkerOptions["credentials"];
    type?: WorkerOptions["type"];
};
```

例子

```js
import { Worker } from "@ry0513/utils";
// 假设 worker.js 计算文件MD5的并返回
const pools = new Worker("./worker.js", {
  maxWorkers: 8,
  type: "module",
});
// vite 需要 new URL() 导入
// https://cn.vitejs.dev/guide/features.html#web-workers
// const pools = new Worker(new URL("./worker", import.meta.url), {
//  maxWorkers: 8,
//  type: "module"
//});
// 假设 fileList 等待计算的文件列表
fileList.map(async (file) => {
  try {
    file.MD5 = await pools.addTask(file);
  } catch (error) {
    file.MD5 = null;
    console.error(error);
  }
});

// pools.terminateAll(); // 若有需要，可以直接终止全部线程
```