docs(useage): addon auto import docs

Author: innocces

packages/hooks/README.md

@@ -112,15 +112,73 @@ function Index() {
 </script>
 ```
 
+## 🎰 auto-import
+
+We provide the @taro-hooks/plugin-auto-import plugin to help you quickly use the [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) capability.
+
+```bash
+# npm
+$ npm i @taro-hooks/plugin-auto-import
+# yarn
+$ yarn add @taro-hooks/plugin-auto-import
+# pnpm
+$ pnpm add @taro-hooks/plugin-auto-import
+```
+
+```js
+// config/index.js
+const config = {
+  // ...
+  // The main prerequisite is that you have installed the plugin for the corresponding framework.
+  plugins: [
+    // If you are using vue3, please install the @taro-hooks/plugin-vue plugin beforehand.
+    '@taro-hooks/plugin-vue'，
+    // If using React/PReact/Nerv, please pre-install the @taro-hooks/plugin-react plugin.
+    '@taro-hooks/plugin-react',
+    // Finally, the auto-import plugin is configured
+    [
+      '@taro-hooks/plugin-auto-import',
+      {
+        // your options, see configuration: https://github.com/antfu/unplugin-auto-import#configuration
+      }
+    ]
+  ],
+  // ...
+};
+```
+
+- React/PReact/Nerv
+
+```jsx
+function Index() {
+  const env = useEnv();
+
+  return <View>current env: {env}</View>;
+}
+```
+
+- Vue3
+
+```html
+<template>
+  <view>current env: {{env}}</view>
+</template>
+
+<script setup lang="ts">
+  const env = useEnv();
+</script>
+```
+
 ## 📦 Packages
 
-|                                                 packages                                                 |                                        downloads                                        |                                       version                                       |                                       license                                       |
-| :------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------: |
-|                 ![taro-hooks](https://img.shields.io/badge/taro--hooks-pkg-blueviolet?)                  |               ![taro-hooks](https://img.shields.io/npm/dm/taro-hooks.svg)               |               ![taro-hooks](https://img.shields.io/npm/v/taro-hooks?)               |               ![taro-hooks](https://img.shields.io/npm/l/taro-hooks?)               |
-|       ![@taro-hooks/ahooks](https://img.shields.io/badge/%40taro--hooks%2Fahooks-pkg-blueviolet?)        |       ![@taro-hooks/ahooks](https://img.shields.io/npm/dm/@taro-hooks/ahooks.svg)       |       ![@taro-hooks/ahooks](https://img.shields.io/npm/v/@taro-hooks/ahooks?)       |       ![@taro-hooks/ahooks](https://img.shields.io/npm/l/@taro-hooks/ahooks?)       |
-|   ![@taro-hooks/plugin-vue](https://img.shields.io/badge/%40taro--hooks%2Fplugin--vue-pkg-blueviolet?)   |   ![@taro-hooks/plugin-vue](https://img.shields.io/npm/dm/@taro-hooks/plugin-vue.svg)   |   ![@taro-hooks/plugin-vue](https://img.shields.io/npm/v/@taro-hooks/plugin-vue?)   |   ![@taro-hooks/plugin-vue](https://img.shields.io/npm/l/@taro-hooks/plugin-vue?)   |
-| ![@taro-hooks/plugin-react](https://img.shields.io/badge/%40taro--hooks%2Fplugin--react-pkg-blueviolet?) | ![@taro-hooks/plugin-react](https://img.shields.io/npm/dm/@taro-hooks/plugin-react.svg) | ![@taro-hooks/plugin-react](https://img.shields.io/npm/v/@taro-hooks/plugin-react?) | ![@taro-hooks/plugin-react](https://img.shields.io/npm/l/@taro-hooks/plugin-react?) |
-|  ![@taro-hooks/use-request](https://img.shields.io/badge/%40taro--hooks%2Fuse--request-pkg-blueviolet?)  |  ![@taro-hooks/use-request](https://img.shields.io/npm/dm/@taro-hooks/use-request.svg)  |  ![@taro-hooks/use-request](https://img.shields.io/npm/v/@taro-hooks/use-request?)  |  ![@taro-hooks/use-request](https://img.shields.io/npm/l/@taro-hooks/use-request?)  |
+|                                                      packages                                                       |                                              downloads                                              |                                             version                                             |                                             license                                             |
+| :-----------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------: |
+|                       ![taro-hooks](https://img.shields.io/badge/taro--hooks-pkg-blueviolet?)                       |                     ![taro-hooks](https://img.shields.io/npm/dm/taro-hooks.svg)                     |                     ![taro-hooks](https://img.shields.io/npm/v/taro-hooks?)                     |                     ![taro-hooks](https://img.shields.io/npm/l/taro-hooks?)                     |
+|             ![@taro-hooks/ahooks](https://img.shields.io/badge/%40taro--hooks%2Fahooks-pkg-blueviolet?)             |             ![@taro-hooks/ahooks](https://img.shields.io/npm/dm/@taro-hooks/ahooks.svg)             |             ![@taro-hooks/ahooks](https://img.shields.io/npm/v/@taro-hooks/ahooks?)             |             ![@taro-hooks/ahooks](https://img.shields.io/npm/l/@taro-hooks/ahooks?)             |
+|        ![@taro-hooks/plugin-vue](https://img.shields.io/badge/%40taro--hooks%2Fplugin--vue-pkg-blueviolet?)         |         ![@taro-hooks/plugin-vue](https://img.shields.io/npm/dm/@taro-hooks/plugin-vue.svg)         |         ![@taro-hooks/plugin-vue](https://img.shields.io/npm/v/@taro-hooks/plugin-vue?)         |         ![@taro-hooks/plugin-vue](https://img.shields.io/npm/l/@taro-hooks/plugin-vue?)         |
+|      ![@taro-hooks/plugin-react](https://img.shields.io/badge/%40taro--hooks%2Fplugin--react-pkg-blueviolet?)       |       ![@taro-hooks/plugin-react](https://img.shields.io/npm/dm/@taro-hooks/plugin-react.svg)       |       ![@taro-hooks/plugin-react](https://img.shields.io/npm/v/@taro-hooks/plugin-react?)       |       ![@taro-hooks/plugin-react](https://img.shields.io/npm/l/@taro-hooks/plugin-react?)       |
+|       ![@taro-hooks/use-request](https://img.shields.io/badge/%40taro--hooks%2Fuse--request-pkg-blueviolet?)        |        ![@taro-hooks/use-request](https://img.shields.io/npm/dm/@taro-hooks/use-request.svg)        |        ![@taro-hooks/use-request](https://img.shields.io/npm/v/@taro-hooks/use-request?)        |        ![@taro-hooks/use-request](https://img.shields.io/npm/l/@taro-hooks/use-request?)        |
+| ![@taro-hooks/plugin-auto-import](https://img.shields.io/badge/%40taro--hooks%2Fplugin-auto-import-pkg-blueviolet?) | ![@taro-hooks/plugin-auto-import](https://img.shields.io/npm/dm/@taro-hooks/plugin-auto-import.svg) | ![@taro-hooks/plugin-auto-import](https://img.shields.io/npm/v/@taro-hooks/plugin-auto-import?) | ![@taro-hooks/plugin-auto-import](https://img.shields.io/npm/l/@taro-hooks/plugin-auto-import?) |
 
 ## 🗨️ Communication
 

website/docs/intro.mdx

@@ -26,19 +26,24 @@ sidebar_position: 1
 
 ### 框架支持
 
-在 **taro-hooks** 中可以使用 **React/Vue** 开发体验, 具体请参考:
+在 **taro-hooks** 中可以使用 **React/PReact/Nerv/Vue** 开发体验, 具体请参考:
 
-- [基础教程 ———— React](/docs/quick/react-useage)
+- [基础教程 ———— React/PReact/Nerv](/docs/quick/react-useage)
 - [基础教程 ———— Vue](/docs/quick/vue-useage)
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs defaultValue="React" groupId="codeDisplayGroup">
-  <TabItem value="React" label="React">
+  <TabItem value="React" label="React/PReact/Nerv">
 
 ```bash
+# npm
 $ npm i @taro-hooks/plugin-react
+# yarn
+$ yarn add @taro-hooks/plugin-react
+# pnpm
+$ pnpm add @taro-hooks/plugin-react
 ```
 ```js {3} title="project/config/index.js"
 const config = {
@@ -66,7 +71,12 @@ export default () => {
   <TabItem value="Vue" label="Vue">
 
 ```bash
+# npm
 $ npm i @taro-hooks/plugin-vue
+# yarn
+$ yarn add @taro-hooks/plugin-vue
+# pnpm
+$ pnpm add @taro-hooks/plugin-vue
 ```
 ```js {3} title="project/config/index.js"
 const config = {

website/docs/quick/auto-import.md

@@ -0,0 +1,107 @@
+---
+title: AutoImport 教程
+sidebar_position: 4
+---
+
+## 概述
+
+**@taro-hooks/plugin-auto-import** 是内置了 **taro-hooks preset** 的 **unplugin-auto-import** 的 **taro** 插件. 帮助大家无需再每个页面引入 **taro-hooks** 而 快捷使用我们提供的 **hooks**
+
+## 配置
+
+### 安装 **taro-hooks**
+
+```bash
+# npm
+$ npm i taro-hooks
+# yarn
+$ yarn add taro-hooks
+# pnpm
+$ pnpm add taro-hooks
+```
+
+### 安装插件
+
+首先需要下载 **@taro-hooks/plugin-auto-import** 插件
+
+```bash
+# npm
+$ npm i @taro-hooks/plugin-auto-import
+# yarn
+$ yarn add @taro-hooks/plugin-auto-import
+# pnpm
+$ pnpm add @taro-hooks/plugin-auto-import
+```
+
+### 项目配置
+
+```js title="config/index.js"
+const config = {
+  // ...
+  // 主要前提是您已经安装了对应框架的插件
+  plugins: [
+    // 若使用 vue3, 请预先安装 @taro-hooks/plugin-vue 插件
+    '@taro-hooks/plugin-vue'，
+    // 若使用 React/PReact/Nerv, 请预先安装 @taro-hooks/plugin-react 插件
+    '@taro-hooks/plugin-react',
+    // 最后配置 auto-import 插件 (此为直接使用不需要客制化的情况)
+    '@taro-hooks/plugin-auto-import'
+  ],
+  // ...
+};
+```
+
+若您需要渗透配置至 [**unplugin-auto-import**](https://github.com/antfu/unplugin-auto-import) 中. 可直接在第二个参数中传递需要渗透的 [**Options**](https://github.com/antfu/unplugin-auto-import#configuration)
+
+```js title="config/index.js"
+const config = {
+  // ...
+  // 主要前提是您已经安装了对应框架的插件
+  plugins: [
+    // 若使用 vue3, 请预先安装 @taro-hooks/plugin-vue 插件
+    '@taro-hooks/plugin-vue'，
+    // 若使用 React/PReact/Nerv, 请预先安装 @taro-hooks/plugin-react 插件
+    '@taro-hooks/plugin-react',
+    // 最后配置 auto-import 插件
+    [
+      '@taro-hooks/plugin-auto-import',
+      {
+        // your options
+      }
+    ]
+  ],
+  // ...
+};
+```
+
+## 使用
+
+我们在插件中已经配置好了 **taro-hooks** 相关的 **importMap**. 故您现在无需引用即可在项目中使用
+
+### React/PReact/Nerv
+
+```jsx
+function Index() {
+  const env = useEnv();
+
+  return <View>current env: {env}</View>;
+}
+```
+
+### Vue3
+
+```html
+<template>
+  <view>current env: {{env}}</view>
+</template>
+
+<script setup lang="ts">
+  const env = useEnv();
+</script>
+```
+
+## 原理
+
+插件依赖了 **taro-hooks** 包中产出的 **metadata.json** 元数据文件. 若您需要高度自定义. 可使用该文件完成自定义的 **ImportMap**.
+
+详细代码见: [**plugin-auto-import**](https://github.com/innocces/taro-hooks/blob/next/packages/plugin-auto-import/src/index.ts#L23)

website/docs/quick/react-useage.md

@@ -9,12 +9,28 @@ sidebar_position: 2
 
 ## 配置
 
+### 安装 **taro-hooks**
+
+```bash
+# npm
+$ npm i taro-hooks
+# yarn
+$ yarn add taro-hooks
+# pnpm
+$ pnpm add taro-hooks
+```
+
 ### 安装插件
 
 首先需要下载 **@taro-hooks/plugin-react** 插件
 
 ```bash
+# npm
 $ npm i @taro-hooks/plugin-react
+# yarn
+$ yarn add @taro-hooks/plugin-react
+# pnpm
+$ pnpm add @taro-hooks/plugin-react
 ```
 
 ### 项目配置
@@ -27,6 +43,8 @@ const config = {
 };
 ```
 
+> 我们也配套提供了适配 `unplugin-auto-import` 的插件 [`@taro-hooks/plugin-auto-import`](/docs/quick/auto-import)
+
 > 注意: 插件内部会检测当前项目的框架和依赖状态, 若您的项目不是 **React** 的项目, 那么很可能无法正常启动.
 
 ## **Hooks**

website/docs/quick/vue-useage.mdx

@@ -23,18 +23,39 @@ import UseTaroContext from '@vue-demo/useContext/index.vue'
 
 ## 配置
 
+### 安装 **taro-hooks**
+
+```bash
+# npm
+$ npm i taro-hooks
+# yarn
+$ yarn add taro-hooks
+# pnpm
+$ pnpm add taro-hooks
+```
+
 ### 安装插件
 
 首先需要下载 **@taro-hooks/plugin-vue** 插件
 
 ```bash
+# npm
 $ npm i @taro-hooks/plugin-vue
+# yarn
+$ yarn add @taro-hooks/plugin-vue
+# pnpm
+$ pnpm add @taro-hooks/plugin-vue
 ```
 
 > 建议您同时下载 **@taro-hooks/shared** 插件用于转换一些等同状态的 **state**
 
 ```bash
+# npm
 $ npm i @taro-hooks/shared
+# yarn
+$ yarn add @taro-hooks/shared
+# pnpm
+$ pnpm add @taro-hooks/shared
 ```
 
 ### 项目配置
@@ -47,6 +68,8 @@ const config = {
 };
 ```
 
+> 我们也配套提供了适配 `unplugin-auto-import` 的插件 [`@taro-hooks/plugin-auto-import`](/docs/quick/auto-import)
+
 > 注意: 插件内部会检测当前项目的框架和依赖状态, 若您的项目不是 **Vue3** 的项目, 那么很可能无法正常启动.
 
 ## **Hooks**

website/docusaurus.config.js

@@ -264,6 +264,10 @@ const config = {
                 label: 'Discord',
                 href: 'https://discord.gg/XrrbdDCpKg',
               },
+              {
+                label: 'Tg',
+                href: 'https://t.me/+liVrD6TyPV1lZmJl',
+              },
               {
                 label: '使用案例',
                 href: 'https://github.com/taro-hooks/user-cases',
@@ -307,6 +311,7 @@ const config = {
                 label: 'buy me coffee',
                 href: 'https://www.buymeacoffee.com/innocces?ref=widget-1376490',
               },
+              { label: 'afdian', href: 'https://afdian.net/a/innocces' }
             ],
           },
         ],