open-index/open-npm huggingface dataset:
npm package: @liukangli/lonny_ui
Description: 组件库
Latest version: 0.1.0

# vui

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @liukewia/eslint-plugin-react
Description: Finn's eslint plugin for react project
Latest version: 0.0.9

# eslint-plugin-react

## jsx-no-leaked-render

Avoid accidentally rendering `0` or `NaN`. Requires `@typescript-eslint/parser`.

### Examples

```tsx
function MyComponent() {
  return (
    <div>
      {0 && <ComponentX /> /* error */}
      {NaN && <ComponentX /> /* error */}
      {undefined && <ComponentX /> /* no error */}
      {null && <ComponentX /> /* no error */}
      {'' && <ComponentX /> /* no error */}
      {false && <ComponentX /> /* no error */}
    </div>
  );
}
```

## Installation

```sh
npm i -D @liukewia/eslint-plugin-react
```

## Usage

Install and enable typescript-eslint with type linting, see:

- https://typescript-eslint.io/docs
- https://typescript-eslint.io/docs/linting/typed-linting

```sh
npm install -D @typescript-eslint/parser@latest @typescript-eslint/eslint-plugin@latest eslint@latest typescript@latest
```

```json
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "tsconfigRootDir": ".",
    "project": ["./tsconfig.json"]
  },
  "plugins": ["@typescript-eslint"],
```

Configure the plugin in your `.eslintrc`:

```json
{
  "plugins": ["@liukewia/react"],
  "rules": {
    "@liukewia/react/jsx-no-leaked-render": "error"
  }
}
```

## Differences to eslint-plugin-react/jsx-no-leaked-render

The [jsx-no-leaked-render](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md) react plugin reports an error for all uses of `&&` that do not start with `Boolean(value)` or `!!value`. This means that all values have to be coerced at the expression as it is not type aware, even booleans!

On my codebase it reported a lint error for almost all uses of `&&` and meant those cases had to be made a ternary or converted via Boolean at the expression.

This plugin uses type information via typescript-eslint to only show an error for `number`, `0` or `NaN`.

Seeing as `undefined`, `null` and `''` do not render on screen, I deemed it unnecessary to report errors for those cases.

## Credit

Inspired by:

- https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md
- https://github.com/jeremy-deutsch/eslint-plugin-jsx-falsy
npm package: @liukewia/lint
Description: Finn's Formatter Solution
Latest version: 1.0.0-beta.36


# Usage

## 方式1: 仅 eslint 格式化项目方式

### eslint

1. 安装依赖

```bash
yarn add -D @liukewia/lint
```

2. 配置 eslint

```js
// file: ./.eslintrc.js
module.exports = {
  extends: [require.resolve('@liukewia/lint/eslint')],
};
```

可在 package.json 中增加快捷 script: 

```
// 基本
"lint:es": "eslint ./src/ --ext .js,.jsx,.ts,.tsx"

// 不接受warning
"lint:es": "eslint ./src/ --ext .js,.jsx,.ts,.tsx --max-warnings=0"

// 用eslint-formatter-pretty output方式查看lint检查结果
"lint:es": "eslint ./src/ --ext .js,.jsx,.ts,.tsx --format=pretty"

// 不接受warning，且用eslint-formatter-pretty output方式查看lint检查结果
"lint:es": "eslint ./src/ --ext .js,.jsx,.ts,.tsx --format=pretty --max-warnings=0"
```

```bash
// 仅lint，不自动fix
yarn lint:es

// lint，且自动fix
yarn lint:es --fix
```

3. 禁用 prettier

```
// file: ./.prettierignore
**/*
```

3. 配置 stylelint 脚本，用命令检查错误（可选）

执行

```bash
yarn add -D stylelint@^14
```

in package.json

```
"lint:style": "stylelint '**/*.{css,less}' --fix"
```

执行

```bash
yarn lint:style
```

4. 禁用 prettier

```
// file: ./.prettierignore
**/*
```

## 方式2: eslint + prettier 格式化项目

### eslint

1. 安装依赖

```bash
yarn add -D @liukewia/lint
```

2. 配置 eslint

```js
// file: ./.eslintrc.js
module.exports = {
  extends: [require.resolve('@liukewia/lint/eslint-prettier/eslint')],
};
```

可在 package.json 中增加快捷 script: 

```
// 基本
"lint:es": "eslint ./src/ --ext .js,.jsx,.ts,.tsx"

// 不接受warning
"lint:es": "eslint ./src/ --ext .js,.jsx,.ts,.tsx --max-warnings=0"

// 用eslint-formatter-pretty output方式查看lint检查结果
"lint:es": "eslint ./src/ --ext .js,.jsx,.ts,.tsx --format=pretty"

// 不接受warning，且用eslint-formatter-pretty output方式查看lint检查结果
"lint:es": "eslint ./src/ --ext .js,.jsx,.ts,.tsx --format=pretty --max-warnings=0"
```

```bash
// 仅lint，不自动fix
yarn lint:es

// lint，且自动fix
yarn lint:es --fix
```

3. 配置 prettier

配置 prettier：

```js
// file: ./.prettierrc.js
const prettierRules = require('@liukewia/lint/eslint-prettier/prettier');

module.exports = {
  ...prettierRules,
};
```

或配置自己偏好的配置。

## 附加：stylelint

1. 安装依赖

```bash
yarn add -D @liukewia/lint
```

2. 配置 stylelint

```js
// file: ./.stylelintrc.js
module.exports = {
  extends: [require.resolve('@liukewia/lint/stylelint')],
};
```

# Publish

改 package.json 版本号；

```bash
cd packages/lint
pnpm build
pnpm publish --tag latest --access public --no-git-checks
```
npm package: @liukewia/use-model
Description: ## 1. 创建 models
Latest version: 1.0.2

# Usage

## 1. 创建 models

在 src/ 下或 src/ 下任意位置创建 models 文件夹，其中每个 js/ts 文件为一个 model，文件名表示 model 名，文件内容需要默认导出一个方法。例如：

```js
// src/models/auth.ts
import { useState, useCallback } from 'react';

export default () => {
  const [user, setUser] = useState(null);

  const signin = useCallback((name) => {
    setUser(name);
  }, []);

  const signout = useCallback(() => {
    setUser(null);
  }, []);

  return {
    user,
    signin,
    signout,
  };
};
```

## 2. 利用 webpack 或其它工具获取 models 变量

在添加多个 models 后，最后在该 models 文件夹内添加 index.js/ts 文件，收集所有 models 并默认导出。

```js
// src/models/index.ts
import { Models } from '@liukewia/use-model';
const models: Models = {};
const modelFiles = require.context('.', false, /\.(j|t)s$/);
modelFiles.keys().forEach((fileName) => {
  const resolvedName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1');
  if (resolvedName === 'index') return;
  models[resolvedName] = modelFiles(fileName).default;
});

export default models;
```

## 3. 用 withModelProvider 包裹 根组件

```js
// src/index.tsx
import models from './models';
import App from './App';
import { withModelProvider } from '@liukewia/use-model';

const appWithModels = withModelProvider(models)(App);
```

## 4. 使用 useModel

在函数组件内，引入 useModel 并传入至多两个参数，model 名和 selector，即可使用。

selector 作用是可过滤出部分需要的 model 属性。model 名必需，selector 可选。例如：

```js
const { user, signin } = useModel('auth', (model) => ({
  user: model.user,
  signin: model.signin,
}));
```

# Build

```bash
cd packages/use-model
pnpm build
```

# Publish

```bash
pnpm -r publish --tag latest --access public
```