open-index/open-npm huggingface dataset:
npm package: @rustle/html-parse
Description: simple html parser
Author: imtaotao
Latest version: 1.0.0

<div align='center'>
<h2>@rustle/html-parse</h2>

[![NPM version](https://img.shields.io/npm/v/@rustle/html-parse?color=a1b858&label=)](https://www.npmjs.com/package/@rustle/html-parse)

</div>

Simple html parser compatible with single tags without `/`.


## Usage

```js
import { parse, evaluate } from '@rustle/html-parse';

const built = parse(`
  <div>
    <br>
    <a href="xxx"/>
  </div>
`)

const ast = evaluate(built, (tag, props, ...children) => {
  return { tag, props, children };
})

console.log(ast); // [{ tag: 'div', props: null, children: [...] }]
```


```js
// Get all `a` tags.
const a = [];

evaluate(built, (tag, props, ...children) => {
  if (tag === 'a') {
    a.push({ tag, props, children });
  }
})
```


## CDN

```html
<!DOCTYPE html>
<html lang='en'>
<body>
  <script src='https://unpkg.com/@rustle/html-parse/dist/htmlParse.umd.js'></script>
  <script>
    const { parse, evaluate } = FetchNpmPackage;
    // ...
  </script>
</body>
</html>
```


### Caveats

1. The special `tag` is marked with uppercase, because the `html` tags are all in lowercase, to avoid conflicts, the special `tag` is marked with uppercase.

    - comment node: `COMMENT`.

2. For the wrong `html` syntax, it is impossible to achieve the same behavior as the browser. To be precise, this is more similar to an `xml` parser, so write standard `html` syntax as much as possible.
npm package: @rustle/mp-store
Description: A lightweight wechat miniprogram state management library
Author: imtaotao
Latest version: 0.2.3

## mp-store
[![Build status](https://travis-ci.org/imtaotao/mp-store.svg?branch=master)](https://travis-ci.org/imtaotao/mp-store)
[![Coverage](https://img.shields.io/codecov/c/github/imtaotao/mp-store/master.svg)](https://codecov.io/github/imtaotao/mp-store?branch=master)
[![NPM version](https://img.shields.io/npm/v/@rustle/mp-store.svg?style=flat-square)](https://www.npmjs.com/package/@rustle/mp-store)
[![QQ group](https://img.shields.io/badge/QQ群-624921236-ff69b4.svg?maxAge=2592000&style=flat-square)](https://shang.qq.com/wpa/qunwpa?idkey=fcb17d938fab0e30e879dd96421d91e24805e0bc1077022ff5ae562b732a2508)

```
npm install @rustle/mp-store
```
一个轻量级的微信小程序状态管理库，他将能够平滑的兼容以前的旧项目，并不会有很强的侵入性，所以你可以直接迁移过来。如果你的小程序没有引入 `npm` 包的功能，可以在[这里](https://cdn.jsdelivr.net/gh/imtaotao/mp-store/dist/mpstore.esm.js)下载，然后放到项目中去。

> [更新日志](https://github.com/imtaotao/mp-store/releases)

## Usage
这是一个简单的的迁移 demo
```js
// 只需要两行代码，你就可以使用 mp-store 了
// 如果不想使用，也不会对你原有的项目产生影响
import createStore from '@rustle/mp-store'
const store = createStore()

App({
  // ...
})
```

下面是一个完整的使用 demo，更具体的使用，可以看相关部分的具体介绍
1. 创建 `reducer`
```js
store.add('action', {
  partialState: {
    name: 'tao',
  },
  setter (state, payload) {
    return { name: payload }
  }
})
```

2. 在 `Page` 和 `Component` 中使用
```js
// mp-store 对 page 和 component 无差别对待
Page({
  storeConfig: {
    useState: store => ({
      name: state => state.name 
    })
  },

  onLoad () {
    this.data.global.name // tao
  },

  // 更改
  change () {
    this.store.dispatch('action', 'chentao')
    this.data.global.name // chentao
  },
})
```

如果你使用了模块，则会稍微有一点不同，看下面的 demo
1. 创建 `reducer`
```js
// 定义全局的 state
store.add('global', {
  partialState: {
    age: 25,
  },
})

// 模块
const action = 'action'
const reducer =  {
  partialState: {
    name: 'tao',
  },
  setter (state, payload) {
    return { name: payload }
  },
}

store.addMoudle('user', {
  [action]: reducer,
})
```

2. 在 `Page` 和 `Component` 中使用
```js
// useState 是一个数组，第一个参数为需要注入的 module
Page({
  storeConfig: {
    useState: store => ['user', {
      name: module => module.name,
      age: (module, rootState) => rootState.age
    }]
  },

  onLoad () {
    this.data.global.age // 25
    this.data.global.name // tao
  },

  // 更改
  change () {
    this.store.dispatch('action', 'chentao')
    this.data.global.name // chentao
  },
})
```

## [store 的介绍](https://github.com/imtaotao/mp-store/blob/master/docs/store.md)
## [storeConfig 的介绍](https://github.com/imtaotao/mp-store/blob/master/docs/component.md)
## [module 的介绍](https://github.com/imtaotao/mp-store/blob/master/docs/module.md)
## [middleware 的介绍](https://github.com/imtaotao/mp-store/blob/master/docs/middleware.md)
## [time travel 的介绍](https://github.com/imtaotao/mp-store/blob/master/docs/time-travel.md)
## [mixin 的介绍](https://github.com/imtaotao/mp-store/blob/master/docs/mixin.md)
## [hooks 的介绍](https://github.com/imtaotao/mp-store/blob/master/docs/hooks.md)
## [data diff 的原理](https://github.com/imtaotao/mp-store/blob/master/docs/diff.md)
npm package: @rustle/queue
Description: Tool Library
Author: imtaotao
Latest version: 0.0.1

<div align="center">
<h2>Queue</h2>

[![NPM version](https://img.shields.io/npm/v/@rustle/queue.svg?style=flat-square)](https://www.npmjs.com/package/@rustle/queue)

</div>

Simple queue manipulation tool.

### Demo

```js
import { Queue } from '@rustle/queue';

const q = new Queue();

q.add((next) => {
  console.log(1);
  setTimeout(() => {
    next();
  })
})

q.add((next) => {
  console.log(2);
})

// Wait for the current queue to finish executing
q.awaitFinish().then(() => {
  console.log(4);

  // Restart
  q.add((next) => {
    console.log(1);
    next();
  })
})
```

### CDN

```html
<!DOCTYPE html>
<html lang="en">
<body>
  <script src="https://unpkg.com/@rustle/queue/dist/queue.umd.js"></script>
  <script>
    const { Queue } = window.SQ;
    const q = new Queue();

    // ...
  </script>
</body>
</html>
```