open-index/open-npm huggingface dataset:
npm package: @nutspie/wxmp-promise
Description: Promisified api for weixin (wechat) mini program.
Author: toujiatech
Latest version: 1.0.1

# wxmp-promise

代码很短，所以说明直接写在注解里了，请看 `index.js`

see more at `index.js`

## 使用方法 (Usage)

- 因为用 es6 写，记得要把 `resolve('node_modules/@nutspie/wxmp-promise')` 加到 babel-loader

```js
// webpack.base.conf.js
      {
        test: /\.js$/,
        include: [resolve('src'), resolve('test'), resolve('node_modules/@nutspie/wxmp-promise')],
        use: [
          'babel-loader',
          {
            loader: 'mpvue-loader',
            options: {
              checkMPEntry: true
            }
          }
        ]
      }
```

## 開發

### 发布

```bash
npm publish --access public
```
npm package: @nuttrtools/nested-sortable
Description: This is a small library used for creating a sortable nested list.
Latest version: 0.5.6-beta.1

# Nested Sortable
This is a small library used for creating a sortable nested list.

## NPM package
[@nuttrtools/nested-sortable](https://www.npmjs.com/package/@nuttrtools/nested-sortable)

## Screenshot
![image](https://github.com/nuttrtools/nested-sortable/assets/37809353/48df3748-a22e-4a5a-bd59-a07693edd433)

## Usage
https://github.com/nuttrtools/nested-sortable/blob/f78a8416c35cdad09f38bb161b1d90721fe5f730/src/App.tsx#L31

## Props
### Item Style ([CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/ba3c0017958023b3b6c5fee487acfeda2273fdb9/types/react/v17/index.d.ts#L1558))
Used to style list items
https://github.com/nuttrtools/nested-sortable/blob/f78a8416c35cdad09f38bb161b1d90721fe5f730/src/App.tsx#L7-L9

### Collapsible (Boolean)
used to enable the collapsible option

### Default Items ([TreeItem](https://github.com/nuttrtools/nested-sortable/blob/f78a8416c35cdad09f38bb161b1d90721fe5f730/src/Tree/types.ts#L4-L9)[])
Used to pass the items in the sortable list
#### Structure:
https://github.com/nuttrtools/nested-sortable/blob/f78a8416c35cdad09f38bb161b1d90721fe5f730/src/App.tsx#L11-L27

### Indicator (Boolean)
Used to add a drop indicator

![image](https://github.com/nuttrtools/nested-sortable/assets/37809353/8f9d0710-946c-4068-92a4-b846f7632e14)

### Indentation Width (Number)
Specify indentation for the nested components.

Default is 50

### Removable (Boolean)
Specify whether the removed feature is required or not. 

Default false

### *onOrderChange (Function)
The function triggers when the given list of items changes (either rearranged or removed)

## Start demo
```
git clone https://github.com/nuttrtools/nested-sortable
cd nested-sortable && npm install
npm run dev
```

## Storybook
https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--all-features
npm package: @nutui/auto-import-resolver
Description: nutui auto import resolver based on unplugin-vue-components
Author: jdf2e
Latest version: 1.0.0

# Nutui Auto Import Resolver

[English](./README.md) | 简体中文

`@nutui/auto-import-resolver` 是 [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) 的一个解析器，用于实现 NutUI 按需引入。

### 特性

- 支持 `Vite`, `Webpack`, `Vue CLI` 等
- 样式文件支持 CSS，SASS，默认 CSS
- 支持自动引入组件对应的 CSS 样式

### 安装

```shell
# via pnpm
pnpm add @nutui/auto-import-resolver unplugin-vue-components -D

# via npm
npm i @nutui/auto-import-resolver unplugin-vue-components -D

# via yarn
yarn add @nutui/auto-import-resolver unplugin-vue-components -D

# via Bun
bun add @nutui/auto-import-resolver unplugin-vue-components -D
```

## 默认使用

### Vite

```ts
// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import NutUIResolver from '@nutui/auto-import-resolver';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [NutUIResolver()]
    })
  ]
});
```

### Vue CLI

```ts
// vue.config.js
import Components from 'unplugin-vue-components/webpack';
const NutUIResolver = require('@nutui/auto-import-resolver');

module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [NutUIResolver()]
      })
    ]
  }
};
```

### Webpack

```ts
// webpack.config.js
import Components from 'unplugin-vue-components/webpack';
const NutUIResolver = require('@nutui/auto-import-resolver');

module.exports = {
  plugins: [
    Components({
      resolvers: [NutUIResolver()]
    })
  ]
};
```

## 使用 Sass

### Vite

```ts
// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import NutUIResolver from '@nutui/auto-import-resolver';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [NutUIResolver({ importStyle: 'sass' })]
    })
  ],
  // 配置全局样式变量
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
      }
    }
  }
});
```

### Vue CLI

```ts
// vue.config.js
import Components from 'unplugin-vue-components/webpack';
const NutUIResolver = require('@nutui/auto-import-resolver');

module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [NutUIResolver({ importStyle: 'sass' })]
      })
    ]
  },
  // 配置全局样式变量
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
      }
    }
  }
};
```

### Webpack

```ts
// webpack.config.js
import Components from 'unplugin-vue-components/webpack';
const NutUIResolver = require('@nutui/auto-import-resolver');

module.exports = {
  plugins: [
    Components({
      resolvers: [NutUIResolver({ importStyle: 'sass' })]
    })
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            // 配置全局样式变量
            loader: 'sass-loader',
            options: {
              additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
            }
          }
        ]
      }
    ]
  }
};
```
npm package: @nutui/babel-plugin-separate-import
Description: 按需构建nutui2.0的组件，减小打包体积
Author: famanoder、yangjinjun3
Latest version: 1.2.2

### @nutui/babel-plugin-separate-import

---

按需引入Nutui2.0组件，减小打包体积；

### 安装

---

```bash
npm i -D @nutui/babel-plugin-separate-import
```

### 使用

---

配置`.babelrc`文件：

```js
{
  "plugins": [
    ["@nutui/babel-plugin-separate-import", {
      "style": "css"
    }]
  ]
}

```

然后就可以像下面这样按需引入组件了：

```js
import Vue from 'vue';
import { Button, Icon } from '@nutui/nutui';

Vue.use(Button);
Vue.use(Icon);
```

### 国际化

如果您需要使用我们的国际化功能，并使用我们的语言转换方法来对自己的网站进行语言转换的话，需要配置该插件的 `sourceCode` 参数为 `true`；此时组件的按需引用和默认情况下不同，组件将会指向未构建的源文件，同时组件也不再具有 `install` 方法，请使用 `Vue.component` 对组件进行注册；

```js
import Vue from 'vue';
import { Button, Icon, locale, i18n } from '@nutui/nutui';

Vue.component(Button.name, Button);
Vue.component(Icon.name, Icon);
```

```js
// .babelrc

{
  "plugins": [
    ["@nutui/babel-plugin-separate-import", {
      "sourceCode": true,
      "style": "css"
    }]
  ]
}
```

### AST转换

---

```js
import { Button } from '@nutui/nutui';
```

当使用这种方式`import`组件时，将会被转换为：

```js
import Button from '@nutui/nutui/dist/packages/button/button.js';
// sourceCode 为 true 时
import Button from '@nutui/nutui/dist/packages/button/button.vue';

import '@nutui/nutui/dist/packages/button/button.css';
```

* 如果`style`选项为`css`，则会加载相应组件的`css`；

* 如果`style`选项为`scss`，则会加载相应组件的`scss`；

* 如果没有`style`选项，则不会加载样式文件，需用户手动添加；
npm package: @nutui/carefree
Description: A H5 debugging tool independent of wifi hotspots
Author: lifeifan,hufeng
Latest version: 1.0.0

本webpack插件功能：
1. 处理静态资源路径，并以watch mode编译
2. 将编译后的文件自动上传到指定服务器指定目录
3. 在终端打印出页面入口地址并生成二维码，供手机扫描访问
4. 监听模式下，一旦保存修改，将自动增量编译
5. 有变化的文件会被自动增量上传到服务器
6. 手机刷新页面或再次扫码即可

### 安装

```bash
npm install @nutui/carefree --save-dev
```

### 使用
1. 在`webpack`配置文件中引入

```javascript
const Carefree = require('@nutui/carefree');

plugins: [
    new Carefree({
        //配置项
    })
]
```
2. 在`package.json`的`scripts`字段中添加`carefree-dev`和`carefree-build`命令

```javascript
// package.json
scripts: {
    ...
    "carefree-dev": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress",
    "carefree-build": "cross-env carefree_env=build npm run upload",
    ...
}
```
3. 如果想在启用脚本时暂时不使用`carefree`，可在脚本里修改`carefree_env`为`cross-env carefree_env=stop`
4. 命令行将会打印出二维码，推荐命令行终端的主题为暗黑系
5. 目前支持`ssh`与`ftp`两种上传方式
6. `upload`设置为`false`将只打印二维码，不上传静态资源
7. 默认关闭`devtool`以减小上传文件的体积，需要时可以设置为`webpack`的`devtool`相应值

### Carefree参数说明
| 参数 | 说明 | 默认值 | 是否必填
|----- | ----- | ----- | -----
| upload | 是否上传 | true | 否
| devtool | 参考webpack的devtool配置 | false | 否
| publicPath | 同webpackConfig.output.publicPath | - | 是
| qrcodeUrl | 扫二维码后跳转的地址 | publicPath + 'index.html' | 否
| ftp.host | 服务器ip | -- | 是
| ftp.port | 服务器 | -- | 是
| ftp.source | 待上传的目录 | -- | 是
| ftp.target | 服务器端的项目目录 | -- | 是
| ftp.username | 服务器用户名 | -- | 是
| ftp.password | 服务器密码 | -- | 是
| ssh[option] | 同ftp相关配置项 | -- | 是
npm package: @nutui/draw-page-structure
Description: a way to make skeleton screen
Author: famanoder
Latest version: 0.1.1

# dps(DrawPageStructure)
> a way to make skeleton screen
* **automatic**: easy to use CLI to make skeleton screen
* **flexible**: just use javascript even in browser
* **simple**: some usefull config items do it well

---

* 该方案的大概思路图

![](https://raw.githubusercontent.com/famanoder/DrawPageStructure/master/imgs/mind.png)

---
* 京东PLUS会员正式中首页效果图

![](https://raw.githubusercontent.com/famanoder/DrawPageStructure/master/imgs/ezgif.com-resize.gif)

### Install
---
```bash
npm i @nutui/draw-page-structure -g
```
### Usage
---
1. `dps init`生成配置文件`dps.config.js`
2. 修改`dps.config.js`进行相关配置
3. `dps start`开始生成骨架屏

### Examples

---

* basic

```javascript
// dps.config.js
{
  url: 'https://baidu.com',
  output: {
    filepath: '/Users/famanoder/DrawPageStructure/example/index.html',
    injectSelector: '#app'
  },
  background: '#eee',
  animation: 'opacity 1s linear infinite;',
  // ...
}
```

* 根据节点自定义生成

```javascript
// dps.config.js
...
includeElement: function(node, draw) {
  // 定制某个节点画出来的样子，带上return false
  if(node.id == 'ui-alert') {
    // 跳过该节点及其子节点
    return false;
  }
  if(node.tagName.toLowerCase() === 'img') {
    // 对该图片生成宽100%，高8%，颜色为红色的色块
    draw({
      width: 100,
      height: 8,
      left: 0,
      top: 0,
      zIndex: 99999999,
      background: 'red'
    });
    return false;
  } 
}
...
```

* 开始生成前的初始化操作

```javascript
// dps.config.js
init: function() {
  // 生成骨架屏之前的操作
  
  // 比如删除干扰节点
  let toTop = document.querySelector('#to-top');
  if(toTop) {
    toTop.parentNode.removeChild(toTop);
  }
  // 比如适当的调整某个节点的样式
  let specil = document.querySelector('.specil');
  specil.style.visibility = 'hidden';
}
```

> 对于DOM结构比较复杂和图片比较多且分布密集的情况生成的骨架屏效果可能不尽如人意，这时候可以使用`includeElement`定制某个节点生成生成什么样子，或者使用`init`在生成骨架屏之前对DOM节点进行调整，这两个函数在面对相对复杂的DOM结构时会比较有用；

* 在浏览器中运行

```javascript
const createSkeletonHTML = require('@nutui/draw-page-structure/evalDOM')

createSkeletonHTML({
  // ...
  background: 'red',
  animation: 'opacity 1s linear infinite;'
}).then(skeletonHTML => {
  console.log(skeletonHTML)
}).catch(e => {
  console.error(e)
})
```

> 可在控制台输出当前页面骨架屏节点，复制添加到应用页面；该做法目前来说最大的作用在于应对需要登录的页面，可在相应页面直接调用evalDOM函数生成该页面的骨架屏节点；

### 参数说明
| 参数 | 说明 | 默认值 | 是否必填
|----- | ----- | ----- | -----
| url | 待生成骨架屏的页面地址 | -- | 是
| output.filepath | 生成的骨架屏节点写入的文件 | -- | 是
| output.injectSelector | 骨架屏节点插入的位置 | #app | 否
| rootNode | 针对局部生成骨架屏 | document.body | 否
| background | 骨架屏主题色 | #ecf0f2 | 否
| animation | css3动画属性 | -- | 否
| rootNode | 真对某个模块生成骨架屏 | document.body | 否
| device | 设备类型 | mobile | 否
| extraHTTPHeaders | 添加请求头 | -- | 否
| init | 开始生成之前的操作 | -- | 否
| includeElement(node, draw) | 定制某个节点如何生成 | -- | 否
| writePageStructure(html, filepath) | 回调的骨架屏节点 | -- | 否
npm package: @nutui/eslint-config
Description: ESLint Config of NutUI Vue
Author: jdf2e
Latest version: 0.0.1

# ESLint Config of NutUI Vue

## Install

```sh
# pnpm
pnpm add @nutui/eslint-config -D
# npm
npm i @nutui/eslint-config -D
# yarn
yarn add @nutui/eslint-config -D
```

## Usage

```json
{
  "extends": "@nutui/eslint-config"
}
```
npm package: @nutui/icons-vue
Description: 京东风格的轻量级移动端 Vue 组件库 NutUI 图标包
Author: jdf2e
Latest version: 0.1.1

# NutUI Icons for Vue

[![NPM version](https://img.shields.io/npm/v/@nutui/icons-vue.svg?style=flat)](https://npmjs.org/package/@nutui/icons-vue) [![NPM downloads](http://img.shields.io/npm/dm/@nutui/icons-vue.svg?style=flat)](https://npmjs.org/package/@nutui/icons-vue)

## Install

```bash
npm i @nutui/icons-vue
```

## Basic Usage

You can import it directly or destructure from `@nutui/icons-vue` when tree-shaking enabled.

```ts
import { Add } from '@nutui/icons-vue';
```
npm package: @nutui/icons-vue-taro
Description: [![NPM version](https://img.shields.io/npm/v/@nutui/icons-vue-taro.svg?style=flat)](https://npmjs.org/package/@nutui/icons-vue-taro) [![NPM downloads](http://img.shields.io/npm/dm/@nutui/icons-vue-taro.svg?style=flat)](https://npmjs.org/package/@nutui/ico
Author: jdf2e
Latest version: 0.0.9
npm package: @nutui/inject-ui-styles
Description: ## 功能说明
Latest version: 3.0.17

# @nutui/inject-ui-styles

## 功能说明

用于支持不同组件库引入 nutui 的样式文件，尤其是对于鸿蒙和 React Native 平台。

## 使用方法

1. 在 babel.config.js 文件中增加如下代码

```js
const injectUIStyles = require('@nutui/inject-ui-styles')

{
  [
    [injectUIStyles({})]
  ]
}
```

2. 在 config/index.js 文件中增加如下内容( 废弃 )

```js
const {viteComponentStyle} = require('@nutui/inject-ui-styles')

{
  harmony: {
    // 将编译方式设置为使用 Vite 编译
    compiler: {
      type: 'vite',
      vitePlugins: [
        viteComponentStyle({cName: '@nutui/nutui-react-taro', pName:'@xxx/ui'})
      ]
    }
  }
}
```
npm package: @nutui/lottie-miniprogram
Description: lottie for miniprogram
Author: wechat-miniprogram
Latest version: 1.0.2

# Lottie for MiniProgram

[![](https://img.shields.io/npm/v/lottie-miniprogram)](https://www.npmjs.com/package/lottie-miniprogram)
[![](https://img.shields.io/npm/l/lottie-miniprogram)](https://github.com/wechat-miniprogram/lottie-miniprogram)

lottie 动画库适配小程序的版本。

> lottie 的相关介绍与动画生成方法等请参考[官方说明](https://github.com/airbnb/lottie-web)

> 依赖小程序基础库版本 >= 2.8.0 的环境

## 使用

可参考该代码片段：[https://developers.weixin.qq.com/s/2TYvm9mJ75bF](https://developers.weixin.qq.com/s/2TYvm9mJ75bF)。大致步骤如下：

1. 通过 npm 安装：
```
npm install --save lottie-miniprogram
```

2. 传入 canvas 对象用于适配
```
<canvas id="canvas" type="2d"></canvas>
```
```
import lottie from 'lottie-miniprogram'

Page({
  onReady() {
    this.createSelectorQuery().select('#canvas').node(res => {
      const canvas = res.node
      lottie.setup(canvas)
    }).exec()
  }
})
```

3. 使用 lottie 接口
```
lottie.setup(canvas)
this.ani = lottie.loadAnimation({
  ...
})
this.ani.destroy() // 页面退出需销毁
```

## 接口

目前提供两个接口：

#### lottie.setup(canvas)
需要在任何 lottie 接口调用之前调用，传入 canvas 对象

#### lottie.loadAnimation(options)
与原来的 [loadAnimation](https://github.com/airbnb/lottie-web/wiki/loadAnimation-options) 有些不同，支持的参数有：
* loop
* autoplay
* animationData
* path （只支持网络地址）
* rendererSettings.context （必填）

## 说明
* 本项目是以 npm 的方式依赖原 lottie-web 项目，若原项目有新版本，可直接改变依赖的版本号。
* 本项目依赖小程序基础库 2.8.0 里性能更好的 canvas 实现，由于还有些小问题~~没有正式开放~~（2.9.0 已正式对外），但目前用在此处暂无发现问题。
* 由于小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能也是不支持的。
npm package: @nutui/nutui-bingo
Description: nutui生态之一抽奖组件库
Author: jdcfe
Latest version: 1.0.7

# 基于 NutUI 的抽奖组件库，助力营销活动和小游戏场景

## 特性

- 使用 Vue3 语法
- 支持 H5 和小程序
- 详尽的文档和示例
- 支持 TypeScript

## 组件

- 幸运大转盘 :computer: :iphone:
- 跑马灯 :computer: :iphone:
- 九宫格 :computer: :iphone:
- 开心刮刮乐 :computer:
- 神秘大礼盒 :computer: :iphone:
- 砸金蛋 :computer: :iphone:
- 老虎机 :computer: :iphone:
- 摇好运 :computer:
- 红包雨 :computer: :iphone:
- 娃娃机 :computer:
- 你藏我猜 :computer: :iphone:
- 摇骰子 :computer: :iphone:

## 支持环境

- Android 5.0+
- iOS 9.2+
- 主要适用于 H5 和小程序

## 构建版本

- es **nutbig.es.js**
- umd **nutbig.umd.js**

## ⌨️ 本地开发

你可以使用 Gitpod 进行在线开发：

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/jdf2e/nutui-bingo.git)

或者克隆到本地开发:

```bash
$ git clone https://github.com/jdf2e/nutui-bingo.git
$ cd nutui-bingo
$ npm install
$ npm run dev
```
npm package: @nutui/nutui-bingo-taro
Description: nutui生态之一抽奖组件库
Author: jdcfe
Latest version: 1.0.7

# 基于 NutUI 的抽奖组件库，助力营销活动和小游戏场景

## 特性

- 使用 Vue3 语法
- 支持 H5 和小程序
- 详尽的文档和示例
- 支持 TypeScript

## 组件

- 幸运大转盘 :computer: :iphone:
- 跑马灯 :computer: :iphone:
- 九宫格 :computer: :iphone:
- 开心刮刮乐 :computer:
- 神秘大礼盒 :computer: :iphone:
- 砸金蛋 :computer: :iphone:
- 老虎机 :computer: :iphone:
- 摇好运 :computer:
- 红包雨 :computer: :iphone:
- 娃娃机 :computer:
- 你藏我猜 :computer: :iphone:
- 摇骰子 :computer: :iphone:

## 支持环境

- Android 5.0+
- iOS 9.2+
- 主要适用于 H5 和小程序

## 构建版本

- es **nutbig.es.js**
- umd **nutbig.umd.js**

## ⌨️ 本地开发

你可以使用 Gitpod 进行在线开发：

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/jdf2e/nutui-bingo.git)

或者克隆到本地开发:

```bash
$ git clone https://github.com/jdf2e/nutui-bingo.git
$ cd nutui-bingo
$ npm install
$ npm run dev
```
npm package: @nutui/nutui-cat
Description: 基于 NutUI 2.0 的大促业务组件库
Author: jdcfe
Latest version: 0.2.0

# NutUI-cat

https://nutui.jd.com/cat/#/

基于 NutUI 的大促业务组件库，用于开发大促活动 H5 页面（cat：Create active template）
npm package: @nutui/nutui-jdl
Description: 一套轻量级移动端Vue组件库
Author: jdcfe
Latest version: 1.0.5

# NutUI-JDL
![npm version](https://img.shields.io/npm/v/@nutui/nutui-jdl.svg)  [![Build Status](https://api.travis-ci.org/jdf2e/nutui.svg?branch=nutui-jdl)](https://github.com/jdf2e/nutui/) [![Coverage Status](https://coveralls.io/repos/github/jdf2e/nutui/badge.svg?branch=nutui-jdl)](https://coveralls.io/github/jdf2e/nutui?branch=nutui-jdl) ![license](https://img.shields.io/npm/l/@nutui/nutui-jdl.svg)
 
A light mobile Toolkit
    
![NutUI](https://img11.360buyimg.com/uba/jfs/t1/11117/21/3608/18942/5c20ab52E35e5a500/02e3c1f89cd3dad1.png)

English | [简体中文](./README-zh_CN.md)

## Features

* New structure
* 50+ Reusable components
* Used by 40+ JD mobile projects
* Refer to JDL visual specification
* On-demand loading Support
* Detailed documents and examples
* Customize themes Support
* Multiple languages Support (Internationalization)
* TypeScript Support
* Vue Server-side Rendering Support（Vue SSR）
* Unit test blessing
* A Webpack-based build tool is available to quickly create a Vue project with this component library built in 

## Environment Support

* Android 4.0+
* iOS 8.0+
* Support Vue Server-side Rendering

## Version

* Stable:[![npm](https://img.shields.io/npm/v/@nutui/nutui-jdl.svg)](https://www.npmjs.com/package/@nutui/nutui-jdl)

> You can also subscribe to： https://github.com/jdf2e/nutui/releases.atom for the notifications of stable releases。

## Examples

![NutUI Demo](https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png)

## Installation

Please refer to the NutUI offcial website for the details on how to use it 

https://nutui.jd.com/jdl

Documents：[nutui](https://nutui.jd.com/) | [nutui-jdl](https://nutui.jd.com/jdl/)

## Links
* [Feedback](https://github.com/jdf2e/nutui/issues)
* [Change Logs](https://github.com/jdf2e/nutui/releases)
* [Case collection](https://github.com/jdf2e/nutui/issues/16)
* [On-demand plugins](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)
* [Template project command line tool(Gaea-cli)](https://github.com/jdf2e/Gaea4)
* Contact us：nutui@jd.com


## User Cases

NutUI has been put into use in our production environment and is widely used in developing countries at the same time.

<img src="https://raw.githubusercontent.com/jdf2e/nutui-user-cases/master/user-cases.jpg" />

[Call for more excellent cases](https://github.com/jdf2e/nutui-user-cases)

## Open Source LICENSE

Based on **MIT** LICENSE
npm package: @nutui/nutui-react-codemod
Description: Codemod for NutUI React v2 upgrade
Latest version: 0.0.2

# NutUI React Codemod

一组帮助你升级到 NutUI React 2.x 的 codemod 脚本集合，基于 [jscodeshift](https://github.com/facebook/jscodeshift) 构建。

## 安装和使用
在运行 codemod 脚本钱，请先提交你本地代码的修改。

### 针对 @nutui/nutui-react 的升级可采用下面的脚本
```shell
# 使用 npx 直接运行
npx -p @nutui/nutui-react-codemod nutui-react-codemod src

# 或者使用 pnpm 直接运行
pnpm --package=@nutui/nutui-react-codemod  dlx nutui-react-codemod src
```
### 针对 @nutui/nutui-react-taro 的升级可采用下面的脚本
```shell
# 使用 npx 直接运行
npx -p @nutui/nutui-react-codemod nutui-react-codemod src -taro

# 或者使用 pnpm 直接运行
pnpm --package=@nutui/nutui-react-codemod  dlx nutui-react-codemod src -taro
```

## 功能

`component-name-migration`
- 将组件的使用方式进行修改，例如：`CollpaseItem` 改为 `Collpase.Item` 方式
```diff
import  React from "react";
- import { Collapse,CollapseItem } from '@nutui/nutui-react';
+ import { Collapse } from '@nutui/nutui-react';

const App = () => {
  return (
    <>
    <Collapse activeName={['1']} icon="arrow-down" iconSize="16" iconColor="#999">
-      <CollapseItem title="标题1" name="1">
+      <Collapse.Item title="标题1" name="1">
        京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
-      </CollapseItem>
+      </Collapse.Item>
    </Collapse>
    </>
  );
};
export default App;
```

`props-changed-migration`
- 将重命名的 props 进行替换

```diff
import React from 'react'
import { Button } from '@nutui/nutui-react'

const App = () => {
  return (
-    <Button plain type="primary">
-      主要按钮
-    </Button>
+   <Button fill="outline" type="primary">主要按钮</Button>
  )
}
export default App
```

`icon-migration`
- 将 Icon 组件替换为对应的 @nutui/icons-react 或 @nutui/icons-react-taro
```diff
import React from 'react'
- import { Icon } from '@nutui/nutui-react'
+ import { IconFont as Icon } from "@nutui/icons-react";

const App = () => {
  return (
    <>
      <Icon name="JD" />
    </>
  )
}
export default App

```
npm package: @nutui/separate-import
Description: separate-import
Author: famanoder
Latest version: 0.1.0
Deprecated: this package has deprecated, please use @nutui/babel-plugin-separate-import.

### @nutui/separate-import

---

按需引入Nutui2.0组件，减小打包体积；

### 安装

---

```bash
npm i -D @nutui/separate-import
```

### 使用

---

配置`.babelrc`文件：

```js
{
  "plugins": [
    ["@nutui/separate-import", {
        "libraryName": "@nutui/nutui",
        "libraryDirectory": "dist/src/packages",
        "style": "css"
    }]
  ]
}

```

然后就可以像下面这样按需引入组件了：

```js
import Vue from 'vue';
import { Button, Icon } from '@nutui/nutui';

Vue.use(Button);
Vue.use(Icon);
```

### AST转换

---

```js
import { Button } from '@nutui/nutui';
```
当使用这种方式`import`组件时，将会被转换为：
```js
import Button from '@nutui/nutui/dist/src/packages/button/button.js';
import '@nutui/nutui/dist/src/packages/button/button.css';
```

* 如果`style`选项为`css`，则会加载相应组件的`css`；

* 如果`style`选项为`scss`，则会加载相应组件的`scss`；

* 如果没有`style`选项，则不会加载样式文件，需用户手动添加；
npm package: @nutui/touch-emulator
Description: NutUI Touch Emulator
Latest version: 1.0.0

# NutUI Touch Emulator

Touch Emulator for NutUI.

> Codes refer to [hammerjs/touchemulator](https://github.com/hammerjs/touchemulator)

## Install

```sh
# pnpm
pnpm i @nutui/touch-emulator

# npm
npm i @nutui/touch-emulator

# yarn
yarn add @nutui/touch-emulator
```

## How to use

```js
import '@nutui/touch-emulator'
```

## CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@nutui/touch-emulator"></script>
```
npm package: @nutui/upload
Description: use http or sftp to upload locale files
Author: famanoder
Latest version: 0.1.4

### @nutui/upload
---
可以非常方便的使用该模块同步本地文件到服务器，支持`http`与`sftp`两种上传方式，
推荐首选`sftp`上传：
* 在`Linux`里开启`ssh`就默认启用了`sftp`，一般不需要单独配置
* `sftp`会加密传输认证信息和数据，相对来说更安全
* 注意服务器里目录的权限问题

### 安装
---
```js
npm i -D @nutui/upload
```

### 配置使用
---
```js
const ClientUpload = require('@nutui/upload');

ClientUpload({
  source: 'src',
  ignoreRegexp: /node_modules/,
  success: function() {},
  sftpOption: {
    host: '0.0.0.0',
    port: 1234,
    username: 'user',
    password: 'user',
    target: '/home'
  }
});
```

### 支持 webpack
---

```js
const WebpackUploadPlugin = require('@nutui/upload/webpackUploadPlugin');

// webpack.config.js
// 相关配置同上
{
  plugins: [
    ...
    new WebpackUploadPlugin(options)
  ]
}
```

### 支持命令行操作（nut）
---
通过命令来上传文件到服务器，仅支持`sftp`
```js
npm i -g @nutui/upload

nut upload <option>
```
* **-s --source** 待上传的文件目录
* **-i --ignore** 忽略的目录
* **-r --remote** 接收文件的服务器相关配置 `user:pass@ip:port/target`

### 参数说明
---
| 属性 | 说明 | 默认值 | 是否必填
|----- | ----- | ----- | -----
| source | 待上传的文件目录 | - | 是
| ignoreRegexp | 忽略文件的匹配模式 | - | 否
| success | 上传成功的回调 | - | 否
| sftpOption.host | 服务器地址 | - | 是
| sftpOption.port | 服务器端口 | 22 | 否
| sftpOption.username | 用户名 | - | 是
| sftpOption.password | 密码 | - | 是
| sftpOption.target | 接收文件的目录 | - | 是
| httpOption[option] | 参考 sftpOption | - | 是
npm package: @nuucognition/mesh-adapter-convex
Description: High-level bridge between `mesh-core` parsing/building and Convex-backed storage.
Latest version: 1.0.0

# @nuucognition/mesh-adapter-convex

High-level bridge between `mesh-core` parsing/building and Convex-backed storage.

## What this package owns

- `MeshConvexAdapter` read and write orchestration.
- `MeshConvexSnapshotAdapter` full snapshot commit + read orchestration.
- Load flow from raw Convex data into built `Mesh` state.
- Operations-first mutation application through `applyOperations` and `applyTransaction`.
- Convex-backed transaction journaling (persisted in the mesh component) with per-call opt-in.

## What this package does not own

- Convex schema and component definitions.
- Mesh parsing internals.
- Low-level blob upload transport details.

## Quick start

```ts
import { MeshConvex } from "@nuucognition/mesh-convex-component"
import { MeshConvexSnapshot } from "@nuucognition/mesh-convex-component"
import { MeshConvexAdapter } from "@nuucognition/mesh-adapter-convex"
import { MeshConvexSnapshotAdapter } from "@nuucognition/mesh-adapter-convex"
import { components } from "./convex/_generated/api"

const client = new MeshConvex({ component: components.mesh })
const adapter = new MeshConvexAdapter({ client })
const snapshotClient = new MeshConvexSnapshot({ component: components.meshSnapshot })
const snapshotAdapter = new MeshConvexSnapshotAdapter({ client: snapshotClient })

const mesh = await adapter.loadMesh(ctx, "my-mesh-id")
await adapter.applyOperations(ctx, "my-mesh-id", [
  {
    type: "create",
    title: "New Note",
    document: {
      kind: "document",
      id: "new-note-id",
      title: "New Note",
      tags: [],
      frontmatter: {},
      links: [],
      embeds: [],
      content: "# Hello\nContent here",
    },
  },
])

await snapshotAdapter.commitSnapshot(ctx, "my-mesh-id", snapshot)
```

## Key methods

- `loadMesh(ctx, meshId)` loads and builds runtime mesh state.
- `getContent(ctx, meshId, title)` and `getBlobData(ctx, meshId, blobKey)` are read APIs.
- `getUploadUrl` and `saveBlobFromStorageId` handle blob upload transport.
- `applyOperations(ctx, meshId, operations, options?)` applies canonical operation batches and can toggle journal writes via `enableTransactions` (defaults to off).
- `applyTransaction(ctx, meshId, transaction)` applies an explicit transaction payload.
- `getTransactionsForDocument(ctx, meshId, title, limit?)` returns persisted, document-scoped transaction history from Convex.
- `getTransactionStatus(ctx, meshId)` reports hash-based unobserved-change state for Convex meshes.
- `syncTransactions(ctx, meshId, options?)` performs Convex-side UUID heal + inferred reconcile append.
- `commitSnapshot(ctx, meshId, snapshot)` replaces full mesh content for snapshot-profile backends.

## Notes

- Blob create, rename, and delete operation kinds are supported through the operations-first bridge.
- Path-level document move operations are not supported for Convex-backed storage.

## Related packages

- `@nuucognition/mesh-core`
- `@nuucognition/mesh-convex-component`
npm package: @nuucognition/mesh-adapter-fs
Description: Filesystem adapter for Mesh SDK with operations-first write support and optional transaction journaling.
Latest version: 1.0.0

# @nuucognition/mesh-adapter-fs

Filesystem adapter for Mesh SDK with operations-first write support and optional transaction journaling.

## Core capabilities

- Scan and load markdown mesh state from disk.
- Read content and blobs through `MeshReadAdapter` APIs.
- Persist canonical `MeshOperation[]` batches through `applyOperations()`.
- Optionally journal transactions in `.mesh/journal.jsonl` with object-backed snapshots.
- Provide inferred diff, undo, redo, and transaction GC utilities.

## Quick start

```ts
import { createFilesystemAdapter, loadMeshFromFs } from "@nuucognition/mesh-adapter-fs"

const { mesh } = await loadMeshFromFs({ rootPath: "/path/to/mesh" })

const adapter = createFilesystemAdapter({
  rootPath: "/path/to/mesh",
  scanPaths: ["Mesh", "Media"],
  ensureIds: true,
  writeBackIds: true,
  enableTransactions: true,
})
```

## Options

- `rootPath`: absolute mesh root.
- `extensions`: document extensions. Default `.md` and `.ncm`.
- `ignorePaths`: ignored path patterns.
- `scanPaths`: optional scan roots (for example `Mesh`, `Media`).
- `ensureIds`: ensure IDs during index load.
- `writeBackIds`: persist ensured IDs.
- `enableTransactions`: enable or disable transaction journaling. Defaults to `false`.
- `transactionAuthor`: default observed transaction author.
- `transactionIntent`: default observed transaction intent.

## Operations-first write path

`createFilesystemAdapter()` exposes:

- `applyOperations(operations, options?)`
- `applyTransaction(transaction)`

When transactions are enabled, applied operations are appended to the journal as one transaction batch.

## Transaction helpers

- `getTransactionsStatus`
- `diffTransactions`
- `getTransactionsLog`
- `getTransactionsForDocument`
- `undoLastTransaction`
- `redoLastTransaction`
- `garbageCollectTransactionObjects`

## Rename helpers

- `renameDocumentFs`
- `renameMediaFs`

These helpers now construct operations through `@nuucognition/mesh-ops` and persist them through adapter operation application.

## Related packages

- `@nuucognition/mesh-core`
- `@nuucognition/mesh-ops`
npm package: @nuucognition/mesh-ops
Description: Operations-first mutation layer for Mesh SDK.
Latest version: 1.0.0

# @nuucognition/mesh-ops

Operations-first mutation layer for Mesh SDK.

`mesh-ops` builds canonical `MeshOperation[]` batches for CRUD, rename, media rename, and ID backfill flows. It does not persist writes directly. Persistence happens through adapter `applyOperations()`.

## Quick start

```ts
import {
  applyOperations,
  buildRenameDocumentOperationsByTitle,
  buildRenameMediaOperations,
  buildEnsureIdsOperations,
} from "@nuucognition/mesh-ops"

const rename = await buildRenameDocumentOperationsByTitle(adapter, mesh, "Old", "New")
await applyOperations(adapter, rename.operations)

const mediaRename = await buildRenameMediaOperations(adapter, mesh, {
  oldMediaTitle: "old.png",
  newMediaTitle: "new.webp",
})
await applyOperations(adapter, mediaRename.operations)

const ensure = await buildEnsureIdsOperations(adapter, mesh)
await applyOperations(adapter, ensure.operations)
```

## API groups

- `updateWikiReferences` and `updateWikiReferencesWithReport`
- `updateWikiEmbedReferences` and `updateWikiEmbedReferencesWithReport`
- `buildCreateDocumentOperations`
- `buildUpdateDocumentOperations`
- `buildDeleteDocumentOperations`
- `buildCreateBlobOperations`
- `buildDeleteBlobOperations`
- `buildRenameDocumentOperations`
- `buildRenameDocumentOperationsByTitle`
- `buildRenameMediaOperations`
- `buildEnsureIdsOperations`
- `applyOperations`

## Compatibility wrappers

For existing callers, wrappers still exist:

- `renameDocument`
- `renameDocumentByTitle`
- `ensureIds`

These wrappers now use the same operation-builder path under the hood.

## Behavior notes

- Alias mutation is intentionally not part of the operations-first rename path.
- Frontmatter-only and body edits are represented uniformly as `type: "update"` operations.
- Builders may use `MeshReadAdapter` reads to capture reversible before/after snapshots.

## Adapter expectations

- `MeshReadAdapter` for operation construction.
- `MeshWriteAdapter.applyOperations` for persistence.

## Related packages

- `@nuucognition/mesh-core` for core contracts and transaction helpers.
- `@nuucognition/mesh-adapter-fs` for filesystem persistence and optional journaling.