open-index/open-npm huggingface dataset:
npm package: @gxjakkap/trand
Description: Generate random thingy with random.org .
Author: Jakkaphat Chalermphanaphan
Latest version: 1.0.0

# trand

Generate true random things with [random.org](https://random.org).

## Installation

`$ npm i @gxjakkap/trand`

## Usage

### getInt(min, max)

```js
import {getInt} from '@gxjakkap/trand'

let value = await getInt(1, 100)
console.log(value) // output: random number in a range from 1 to 100 
```
npm package: @gxl/epub-parser
Description: A powerful yet easy-to-use epub parser
Author: gaoxiaoliangz
Latest version: 2.0.4

# 📖 epub-parser

> A powerful yet easy-to-use epub parser

[![npm version](https://badge.fury.io/js/%40gxl%2Fepub-parser.svg)](https://badge.fury.io/js/%40gxl%2Fepub-parser)
![Test](https://github.com/gaoxiaoliangz/epub-parser/workflows/Test/badge.svg)

The package exports a simple parser function which use epub file as input and output JavaScript object.

As it is written in TypeScript, types are already included in the package.

## Install

```bash
npm install @gxl/epub-parser --save
```

or if you prefer yarn

```bash
yarn add @gxl/epub-parser
```

## Usage

```js
import { parseEpub } from '@gxl/epub-parser'

const epubObj = parseEpub('/path/to/file.epub', {
  type: 'path',
})

console.log('epub content:', epubObj)
```

### parseEpub(target: string | buffer, options?: object): EpubObject

#### target

type: `string` or `buffer`

It can be the path to the file or file's binary string or buffer

#### options

type: `object`

##### type(optional): 'binaryString' | 'path' | 'buffer'

It forces the parser to treat supplied target as the defined type, if not defined the parser itself will decide how to treat the file (useful when you are not sure if the path is valid).

#### EpubObject

The output is an object which contains `structure`, `sections`, `info`(private property names start with `_`. I don't recommend using them, since they are subscribed to change).

`structure` is the parsed `toc` of epub file, they contain information about how the book is constructed.

`sections` is an array of chapters or sections under chapters, they are referred in `structure`. Each section object contains the raw html string and a few handy methods.

- `Section.prototype.toMarkdown`: convert to markdown object.
- `Section.prototype.toHtmlObjects`: convert to html object. And a note about `src` and `href`, the `src` and `href` in raw html stay untouched, but the `toHtmlObjects` method resolves `src` to base64 string, and alters `href` so that they make sense in the parsed epub. And the parsed `href` is something like `#{sectionId},{hash}`.

## How to contribute

- Raise an issue in the issue section.
- PRs are the best.

❤️
npm package: @gxl/react-scripts
Description: A configurable version of create react app
Latest version: 2.2.6

# ✨ @gxl/react-scripts ✨

This is a fork of [react-scripts](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts). Added features includes:

- css source map support in development
- added config.js to support customizing webpack and webpack dev server
- alias `@` -> `src`
- added `injectBabelPlugin`, `injectModuleRule` & `injectWebpackPlugin` util functions to conveniently modify webpack config
- added support for [react scoped css](https://github.com/gaoxiaoliangz/react-scoped-css)

You can create your new react project using

```
create-react-app app_name --scripts-version=@gxl/react-scripts
```

or use in an existing create-react-app project (which hasn't been ejected yet)

```
npm install @gxl/react-scripts --save-dev
npm remove react-scripts
```
npm package: @gxl/redux-model
Description: Using redux without wasting time writing boilerplate code
Author: gaoxiaoliangz
Latest version: 0.2.7

# redux-model

## Why creating this package

Using redux involves writing too many lines of boilerplate code, and it annoys me. So I decided to make things easy, and in the mean time respecting all the core concepts of redux.

## Install

`npm install @gxl/redux-model` or `yarn add @gxl/redux-model`

## How to use

Let's start by this simple example.

You can also view this example running at <https://codesandbox.io/s/my241lzk4j>

```jsx
import "babel-polyfill";
import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import createSagaMiddleware from "redux-saga";
import { createStore, compose, applyMiddleware } from "redux";
import {
  createModel,
  extractReducer,
  feedStore,
  extractSaga
} from "@gxl/redux-model";

const service = {
  updateCount(num) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(num);
      }, 1000);
    });
  }
};

const model = createModel({
  namespace: "home",
  state: {
    count: 0
  },
  watch: {
    count(val) {
      console.log("val changed", val);
    }
  },
  // every computation corresponds to a pair of action creator and reducer
  // and you can call model[computation_name] to trigger the action
  // no need to manually bind action creators to dispatch
  computations: {
    updateCount(state, count) {
      return {
        ...state,
        count
      };
    }
  },
  // every effect corresponds to an action creator, when called via model[effect_name],
  // an action will be dispatched, and the effect will be triggered
  // and effects is handled by redux saga
  effects: {
    *updateCountAsync(count) {
      const num = yield service.updateCount(count);
      this.updateCount(num);
    }
  }
});

const models = [model];
const reducer = extractReducer(models);
const sagaMiddleware = createSagaMiddleware();
const enhancers = [applyMiddleware(...[sagaMiddleware])];
const saga = extractSaga(models);
const store = createStore(reducer, {}, compose(...enhancers));

sagaMiddleware.run(saga);
// we have to put this after saga is running, or watch will not work
feedStore(store, models);

const Counter = props => {
  return (
    <div>
      <button onClick={() => model.updateCount(props.count - 1)}>Minus</button>
      {props.count}
      <button onClick={() => model.updateCount(props.count + 1)}>Add</button>
      <button onClick={() => model.updateCountAsync(props.count + 1)}>
        Add(async)
      </button>
    </div>
  );
};

// similar to react-redux's connect, we mapped state[namespace] to props by default
// you can change this behavior by passing the 2nd arg to connect, which is `mapStateToProps`
const ConnectedCounter = model.connect(Counter);

render(
  <Provider store={store}>
    <ConnectedCounter />
  </Provider>,
  document.getElementById("root")
);
```
npm package: @gxl/router
Description: Next generation Routing for React.
Author: Ryan Florence
Latest version: 0.2.0

# @gxl/router

Next Generation Routing for React, forked from [reach router 1.2.1](https://github.com/gaoxiaoliangz/router)

## Documentation

```
yarn add @gxl/router
```

Basically, what applies to reach router also applies to gxl router, so you can use the original [reach router docs](https://reach.tech/router). The only difference is that I added hash routing support, which you can use by passing a prop called `useHashRouting`(type: `Boolean`) to `Router` component to enable it.

## Legal

MIT License
Copyright (c) 2018-present
npm package: @gxmari007/create-template
Description: [![npm (scoped)](https://img.shields.io/npm/v/@gxmari007/create-template)](https://www.npmjs.com/package/@gxmari007/create-template) [![GitHub license](https://img.shields.io/github/license/gxmari007/create-template)](https://github.com/gxmari007/create-t
Author: James Gao
Latest version: 0.3.3

# create-template

[![npm (scoped)](https://img.shields.io/npm/v/@gxmari007/create-template)](https://www.npmjs.com/package/@gxmari007/create-template)
[![GitHub license](https://img.shields.io/github/license/gxmari007/create-template)](https://github.com/gxmari007/create-template/blob/main/LICENSE)

A scaffolding tool for creating templates.

## Usage

```
npm init @gxmari007/template
# or
yarn create @gxmari007/template
```

then follow the prompts.

you can specify the project name and template on the command line.

```
npm init @gxmari007/template my-app --template lib-ts
```

also you can input the `--help` or `-h` command for more info.

```
npm init @gxmari007/template --help
```

## Template

- lib-ts
- vite-plugin
- vue-component

## License

MIT
npm package: @gxs/use-query
Description: Applicable to vue3 to simplify URL params operation
Author: gsx114/usagisah
Latest version: 1.1.2

## description
It is only applicable to **vue3**. It is intended to simplify the operation of **URL** through hooks.


## install
`npm i @gxs/use-query -S`


## Usage

First, need to register in the root component
```ts
// main.ts
import { createApp } from "vue"
import App from "./setup/App.vue";
import { VueQueryPlugin } from "@gxs/use-query";

createApp(App).use(router).use(VueQueryPlugin).mount("#app");
```



Used in subcomponents.
Suppose the access URL: http://localhost:3000?a=10&b=20
```vue
<script>
import { useQuery } from "@gxs/use-query";

// 一，Get parameters through hook
//query: { a: 10, b: 20 }
const [query1,setQuery4] = useQuery() 


// 二，Gets the specified parameter
const [query2,setQuery4] = useQuery("a")
const [query3,setQuery4] = useQuery(["a", "b"])


// 三，Specify default values  query3: { z: 50 }
const [query3,setQuery4] = useQuery("z", 50)


// 四，Re query using setquery
const [_, setQuery4] = useQuery()

setQuery4({}) //http://localhost:3000
setQuery4("a", 20) //http://localhost:3000?a=20
setQuery4({b: 10}) //http://localhost:3000?b=10
</script>
```
npm package: @gxs/vue-atom
Description: A new type of atomic state management library for vue3
Author: gsx114/usagisah
Latest version: 0.2.0

## vue-atom

- vue-atom是vue3的一个原子状态管理库。
  
- 在**composition api**的加持下使得共享状态变得非常简单，它甚至可以简化成仅仅一行`export const store = reactive(initState)`就能实现全组件的状态的共享。但是，这对于一个全局共享库来说过于简单，vue-atom在其之上做了最低程度的封装，例如：插件，状态关联，hook，使其好适用于各种规模的项目。
  
- vue-atom的定位不在于替代vuex，它是你的另一种状态管理的选择, 如果你听说过 **recoil.js** 这或许可以是你在vue下的选择。




## install

```bash
npm install @gxs/vue-atom -S
```




## 基本使用

```ts
// store.ts 创建
import { defineAtom } from "@gxs/vue-atom"
export const useAtom0 = defineAtom("root", { msg: "root atom" })

// 可以创建任意数量
export const useAtom1 = defineAtom("item", { msg: "item atom" })
```
``` vue
<script>
// any.vue
import { useAtom } from "store.ts"
const store = useAtom() // { msg: "root atom" }
</script>
```


## 高级应用

调用`defineAtom()`会创建一个工厂函数，该工厂函数静态的挂载了各种辅助管理的方法，它们被用于不同的场景。它的类型声明如下所示：
```ts
declare type AtomFactory<T = {}, S = {}, F = T> = {
    (prop?: unknown): F;
    computed<T, N>(name: string | symbol, options: {
        get: ComputedGetter<T>;
        set: ComputedSetter<T, N>;
    }): void;
    computed<T>(name: string | symbol, getter: ComputedGetter<T>): void;
    use(option: AtomFactory | ReturnType<useAtomPlugin>): AtomFactory;
    fork(atomFactory: AtomFactory): AtomFactory;
    onGetter<T>(fn: onGetter): AtomFactory;
    onChildMount(fn: onChildMount): AtomFactory;
    [PluginCustomProperty: string | symbol]: any;
} & S;
```

### [插件(`use`)🔗](https://github.com/gxs114/tz/tree/main/packages/VueAtom/example/plugin)

适用于特殊状态的复用。在初始化时会接收到每个被使用的`atom`的`name`,响应式对象，静态工厂函数，可以发挥想象去做喜欢的事.



### 状态关联(`fork` | `use`)

```ts
import { defineAtom } from "@gxs/vue-atom"
const rootAtom = defineAtom("root", { msg: "root atom" })
const child1Atom = defineAtom("atom1", { msg: "atom1" })

// 通过fork关联
child1Atom.fork(rootAtom)

// 通过use关联
rootAtom.use(child1Atom)

// 注册父Atom的钩子进行混入
rootAtom.onChildMount((options) => {
  const { child: { state } } = options
  if(child.name === "atom1") {
    state.MMM = "from parent mixin"
  }
})
```

每个`atom`就像是状态管理中的`component`，`vue-atom`提供了相关的**API**让多个`atom`进行关联, 关联后会触发`onChildMount`注册的回调函数。

使用起来的感觉和插件有点类似，它们之间的差异点主要有两项：
1. 关联会在内部记录关联的`atom`形成状态树
2. 两个`atom`存在依赖项但同时又都要被组件所使用，此时用插件会显得繁琐


### [hook🔗](https://github.com/gxs114/tz/tree/main/packages/VueAtom/example/hook)

`onGetter`，当获取时动态的决定返回

`onChildMount`，当自身作为其他`atom`的顶层依赖时自动触发




### [全部 example🔗](https://github.com/gxs114/tz/tree/main/packages/VueAtom/example)


## Q&A

1. 为什么`computed`被当成了静态属性进行使用而不是引用`vue`？
   
这是妥协后的处理，`computed`作为派发状态使用时需要依赖已经是响应式的状态，不然会无法响应式更新。但是在响应式是调用后的产物。

2. 为什么只处理的状态，而没有逻辑相关的处理？
   
在当下`hook`提供了强大的逻辑复用能力，所有与状态管理无关的业务逻辑都应该以**自定义hook的**方式被单独管理。

3. 代码过于分散，写起来像是面条，这是缺陷吗？
   
如开头的介绍，`vue-atom`只做用于管理状态最低程度的整合。通常情况下你不会在一个`atom`用用到所有的API，如果真的全用到了全部，甚至感觉还不够，你或许可以考虑将`vue-atom`二次封装，`useAtomValue`这个API会暴露`atom`内部维护的上下文，这对你或许有用。

4. 它与`Vuex`相比较优势是什吗？
   
体积小，类型化，灵活，与`composition api`共存，对于高要求的模块化项目支持更好，更强的可塑性。

5. 定位是什么？

状态的复杂度可以宏观的分为三类，低中高。
低：期望响应式的全局状态
中：在之前的基础上，期待一定的管理功能
高：期望按自己的想法来
`vue-atom`的定位是承上启下，对于中低要求都能开箱即用。对于高要求的大型项目，自身关联机制可以提供很好的底层支持，它不要求一定要在顶层进行关联，它可以是任意一个`atom`节点。