feat: 🚀 merge useControlledState, concurrent request support, and various optimizations from beta (#277)

* feat: support component (#273)

* feat: support component

* feat: support component

* feat: support component

* refactor: 修改 createUseRequestQueryComponent 为 createUseRequestComponent，增强类型支持并简化 props 处理

* version: 2.4.0-alpha.1

* version: 2.4.0-alpha.2

* version: 2.4.0-alpha.3

* feat: Add concurrent request support and enhance parameter management

* test: add useBoolean

* version: 2.4.0-alpha.4

* feat: 更新文档和组件，添加组件 Hook 指南及 useRequest 组件示例

* fix: 更新文档链接，修复文件系统模块导入，优化代码结构

* refactor: update useEventEmitter implementation and improve documentation links

* version: bump to 2.4.0-alpha.5

* test: enhance useEventEmitter tests with subscription, unsubscription, and event replay scenarios

* test: add unit tests for useControlledState to validate controlled and uncontrolled behavior

* test: 🔧 add test

* test: 🔧 add test

* docs: mark version

* version: 2.4.0-beta.1

* docs: updated

* chore: command opt

* style: format

* chore: rm unuse

* chore: opt 🚛

* chore: opt 🚛

* chore: rm dep

* feat: 🚀 useControlledState

* version: 2.4.0-beta.2

* docs: opt

* test: update desc

* version: 2.4.0

Author: NelsonYong

.markdownlint.json

@@ -1,7 +1,22 @@
 {
   "no-inline-html": {
-    "allowed_elements": ["ul", "li", "div", "img", "a", "br", "script", "Badge", "Home","demo","VPTeamPage","VPTeamPageTitle","VPTeamMembers","VPTeamPageSection"]
+    "allowed_elements": [
+      "ul",
+      "li",
+      "div",
+      "img",
+      "a",
+      "br",
+      "script",
+      "Badge",
+      "Home",
+      "demo",
+      "VPTeamPage",
+      "VPTeamPageTitle",
+      "VPTeamMembers",
+      "VPTeamPageSection"
+    ]
   },
   "MD013": false,
   "MD041": false
-}
+}

.vscode/settings.json

@@ -114,7 +114,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
     {
       text: 'Guide',
       items: [
-        { text: 'Introduction', link: "/guide" },
+        { text: 'Introduction', link: "/guide/introduction" },
         { text: 'Getting Started', link: '/guide/getting-started' },
         { text: '🫶 Migrate to v2 version', link: '/guide/migrate' }
       ],
@@ -137,6 +137,7 @@ export const en = defineConfig({
           ...sidebarHooks(),
         ]
       },
+      '/components/': sidebarComponents(),
     },
 
     editLink: {
@@ -155,9 +156,9 @@ function nav(): DefaultTheme.NavItem[] {
   return [
     {
       text: 'Guide',
-      activeMatch: '/guide/',
+      activeMatch: '^/guide/',
       items: [
-        { text: 'Introduction', link: '/guide' },
+        { text: 'Introduction', link: '/guide/introduction' },
         { text: 'Getting Started', link: '/guide/getting-started' },
         { text: '🫶 Migrate to v2 version', link: '/guide/migrate' }
       ]
@@ -167,6 +168,11 @@ function nav(): DefaultTheme.NavItem[] {
       link: '/hooks/useRequest/quick-start',
       activeMatch: '/hooks'
     },
+    {
+      text: "Components",
+      link: '/components/guide',
+      activeMatch: '/components/'
+    },
     {
       text: '🤺 Playground',
       link: 'https://inhiblabcore.github.io/vue-hooks-plus-playground/play',
@@ -191,7 +197,7 @@ export function sidebarHooks(): DefaultTheme.SidebarItem[] {
       text: 'State',
       items: [
         { text: 'useBoolean', link: 'useBoolean' },
-        // { text: "useControlledState", link: "useControlledState" },
+        { text: "useControlledState", link: "useControlledState" },
         { text: 'useImmer', link: 'useImmer' },
         { text: 'useUrlState', link: 'useUrlState' },
         { text: 'useFormatResult', link: 'useFormatResult' },
@@ -265,7 +271,7 @@ export function sidebarHooks(): DefaultTheme.SidebarItem[] {
     {
       text: 'Advanced',
       items: [
-        { text: 'useEventEmitter', link: '/useEventEmitter/' },
+        { text: 'useEventEmitter', link: 'useEventEmitter' },
         {
           text: 'useAsyncOrder',
           link: 'useAsyncOrder',
@@ -286,3 +292,19 @@ export function sidebarHooks(): DefaultTheme.SidebarItem[] {
   })
 }
 
+
+
+export function sidebarComponents(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: 'Components',
+      items: [
+        {
+          text: 'Guide',
+          link: '/components/guide',
+        },
+        { text: 'useRequest', link: '/components/useRequest' },
+      ],
+    }
+  ]
+}

docs/.vitepress/config/en.ts

@@ -1,4 +1,4 @@
-import fsExtra from 'fs-extra';
+import * as fs from 'node:fs';
 import { dirname, join, sep } from 'path';
 import { MarkdownRenderer } from 'vitepress';
 
@@ -48,13 +48,13 @@ export function genDemoByCode(
     while (true) {
       demoName = `demo-${fenceIndex++}.vue`;
       demoPath = join(dirname(path), 'dist', demoName);
-      if (!fsExtra.existsSync(demoPath)) {
+      if (!fs.existsSync(demoPath)) {
         break;
       }
     }
 
-    fsExtra.createFileSync(demoPath);
-    fsExtra.writeFileSync(demoPath, code);
+    fs.writeFileSync(demoPath, '');
+    fs.writeFileSync(demoPath, code);
 
     codeFileMap[code] = {
       demoName,

docs/.vitepress/config/factory.ts

@@ -123,6 +123,19 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
     }
   ]
 }
+
+function sidebarComponents(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: 'Components',
+      items: [
+        { text: 'Guide', link: '/zh/components/guide' },
+        { text: 'useRequest', link: '/zh/components/useRequest' },
+      ],
+    }
+  ]
+}
+
 export const zh = defineConfig({
   lang: 'zh-Hans',
   description: '高性能的 Vue 组合式函数库',
@@ -138,7 +151,8 @@ export const zh = defineConfig({
           ...siderbarUseRequestPlugin(),
           ...sidebarHooks()
         ]
-      }
+      },
+      '/zh/components/': sidebarComponents(),
     },
 
     editLink: {
@@ -182,18 +196,23 @@ function nav(): DefaultTheme.NavItem[] {
   return [
     {
       text: '指南',
-      activeMatch: '/zh/guide/',
+      activeMatch: '^/zh/guide/',
       items: [
-        { text: '介绍', link: '/zh/guide' },
+        { text: '介绍', link: '/zh/guide/introduction' },
         { text: '开始使用', link: '/zh/guide/getting-started' },
         { text: '🫶 迁移到 v2 版本', link: '/zh/guide/migrate' }
       ]
     },
     {
-      text: 'Hooks',
+      text: 'Hooks 函数',
       link: '/zh/hooks/useRequest/quick-start',
       activeMatch: '/zh/hooks'
     },
+    {
+      text: '函数组件',
+      link: '/zh/components/guide',
+      activeMatch: '/zh/components/'
+    },
     {
       text: '🤺 演武场',
       link: 'https://inhiblabcore.github.io/vue-hooks-plus-playground/play',

docs/.vitepress/config/zh.ts

@@ -1,10 +1,10 @@
 import { parseProps } from "../config/utils";
 import { resolve } from 'path'
-import fsExtra from 'fs-extra'
+import * as fs from 'node:fs'
 import { getDemoComponent } from "../config/factory";
 export const applyMdPlugin = (md: any) => {
   const htmlBlock = md.renderer.rules.html_block!
-  md.renderer.rules.html_block = function (tokens, idx, options, env, self) {
+  md.renderer.rules.html_block = function (tokens: any, idx: any, options: any, env: any, self: any) {
     const token = tokens[idx];
     const content = token.content.trim();
     const { path } = env;
@@ -17,7 +17,7 @@ export const applyMdPlugin = (md: any) => {
     }
 
     const srcPath = resolve(process.cwd(), "docs", "demo", props.src);
-    const code = fsExtra.readFileSync(srcPath, 'utf8');
+    const code = fs.readFileSync(srcPath, 'utf8');
     const demoScripts = getDemoComponent(md, env, {
       title: props?.title,
       desc: props?.desc,

docs/.vitepress/plugins/applyMdPlugin.ts

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <div>Show default value: {{ count }}</div>
+    <div>Show form value: {{ countFormValue }}</div>
+    <vhp-button @click="() => (value = 10)">Set value</vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useControlledState } from 'vue-hooks-plus'
+  const value = ref<number | undefined>(undefined)
+  const [count] = useControlledState(undefined, 10)
+  const [countFormValue] = useControlledState(value, 0)
+</script>

docs/demo/useControlledState/demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <vhp-button
+      :style="{ backgroundColor: color }"
+      @click="
+        () => {
+          setColor(randomColor())
+        }
+      "
+      >Uncontrolled color</vhp-button
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useControlledState } from 'vue-hooks-plus'
+  const [color, setColor] = useControlledState(undefined, 'red')
+  const randomColor = () => {
+    return '#' + Math.floor(Math.random() * 16777215).toString(16)
+  }
+</script>

docs/demo/useControlledState/demo1.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <vhp-button
+      style="margin-right: 10px"
+      :style="{ backgroundColor: color1 }"
+      @click="
+        () => {
+          setColor1(randomColor())
+        }
+      "
+      >Controlled unvalid value</vhp-button
+    >
+
+    <vhp-button
+      :style="{ backgroundColor: color }"
+      @click="
+        () => {
+          setColor(randomColor())
+        }
+      "
+      >Controlled color</vhp-button
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useControlledState } from 'vue-hooks-plus'
+
+  const value = ref<string | undefined>('red')
+
+  const value2 = ref<string | undefined>('red')
+
+  const [color1, setColor1] = useControlledState(value2, undefined)
+  const [color, setColor] = useControlledState(value, undefined, v => {
+    value.value = v
+  })
+  const randomColor = () => {
+    return '#' + Math.floor(Math.random() * 16777215).toString(16)
+  }
+</script>

docs/demo/useControlledState/demo2.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <vhp-button @click="refRouter = !refRouter" style="margin-bottom: 16px;">
+      toggle router</vhp-button
+    >
+    <demo v-if="refRouter" />
+    <div v-else>
+      SHOW TEXT
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import Demo from './demo.vue'
+
+  const refRouter = ref(true)
+</script>

docs/demo/useEventEmitter/App.vue

@@ -6,21 +6,30 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue'
+  import { onMounted, onUnmounted, ref } from 'vue'
 
   import { useEventEmitter } from 'vue-hooks-plus'
+  import { EventEmitter } from 'vue-hooks-plus/src/useEventEmitter/event'
 
-  const event = useEventEmitter({ global: true })
+  const event_ = useEventEmitter({ global: true })
   const props = defineProps<{
-    event: any
+    event: EventEmitter<any>
   }>()
   const count = ref(0)
 
-  props.event.useSubscription('change', () => {
-    count.value += 1
+  let unsubscribe: (() => void) | null = null
+
+  onMounted(() => {
+    unsubscribe = props.event.subscribe('change', () => {
+      console.log('props', props.event)
+      count.value += 1
+    })
+  })
+  onUnmounted(() => {
+    if (unsubscribe) unsubscribe()
   })
 
   const changeGlobal = () => {
-    event.emit('change')
+    event_.emit('change')
   }
 </script>

docs/demo/useEventEmitter/DemoA.vue

@@ -10,7 +10,8 @@
   const event = useEventEmitter({ global: true })
   const globalCount = ref(0)
 
-  event.useSubscription('change', () => {
+  event.subscribe('change', () => {
+    console.log('global', event)
     globalCount.value += 1
   })
 </script>

docs/demo/useEventEmitter/GlobalDemo.vue

@@ -27,7 +27,6 @@
   }
 
   const changeA = () => {
-    // globalCount.value += 1
     eventA.emit('change')
   }
 </script>

docs/demo/useEventEmitter/demo.vue

@@ -3,10 +3,13 @@
     <p>Client - x: {{ mouse.clientX }}, y: {{ mouse.clientY }}</p>
     <p>Page - x: {{ mouse.pageX }}, y: {{ mouse.pageY }}</p>
     <p>Screen - x: {{ mouse.screenX }}, y: {{ mouse.screenY }}</p>
+    <UseMouse v-slot="{ clientX, clientY }">
+      <p>component use: {{ clientX }}, y: {{ clientY }}</p>
+    </UseMouse>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { useMouse } from 'vue-hooks-plus'
+  import { useMouse, UseMouse } from 'vue-hooks-plus'
   const mouse = useMouse()
 </script>