feat: ✨ usePrevious

feat: optimized style and add usePrevious

Author: inhiblab

package.json

@@ -24,14 +24,15 @@
 		"@typescript-eslint/eslint-plugin": "^5.33.0",
 		"@typescript-eslint/parser": "^5.33.0",
 		"@vitest/ui": "^0.25.3",
-    "@ruabick/vite-plugin-gen-temp": "^0.2.8",
 		"@types/fs-extra": "^9.0.13",
 		"@types/jest": "^29.0.0",
 		"@types/lodash": "^4.14.178",
 		"@types/marked": "^4.0.3",
 		"@types/node": "^17.0.21",
 		"@types/qs": "^6.9.7",
+    "@types/markdown-it": "^12.2.3",
 		"@vitejs/plugin-vue": "^2.3.1",
+    "@vue-hooks-plus/vite-plugin-gen-temp": "2.6.0",
 		"@vue-hooks-plus/md-demo-plugins": "^1.0.0",
 		"@vue-hooks-plus/vitepress": "1.2.3",
 		"@vue-hooks-plus/vitepress-demo-block": "^1.3.1",
@@ -43,6 +44,7 @@
 		"eslint-plugin-vue": "^9.6.0",
 		"husky": "^8.0.1",
 		"lint-staged": "^13.0.3",
+    "markdown-it": "^13.0.1",
 		"vue-eslint-parser": "^9.0.3",
 		"cross-env": "^7.0.3",
 		"fast-glob": "^3.2.12",

packages/hooks/docs/.vitepress/config.ts

@@ -1,11 +1,9 @@
 import { defineConfig } from 'vitepress'
 import { applyPlugins } from '@vue-hooks-plus/md-demo-plugins'
-import { genTemp } from '@ruabick/vite-plugin-gen-temp'
+import { genTemp } from '@vue-hooks-plus/vite-plugin-gen-temp'
 import { resolve } from 'path'
 import { svg } from './theme/home/iconBase64'
 import { getRouterConfig } from './router'
-// import { ref } from 'vue'
-
 const base =
   process.env.NODE_ENV === 'production'
     ? process.env?.BASE_URL
@@ -15,8 +13,6 @@ const base =
 
 const isGithub = process.env.FLOW === 'github'
 
-// const version = ref()
-
 // fetch('https://api.github.com/repos/InhiblabCore/vue-hooks-plus/releases/latest')
 //   .then(response => response.json())
 //   .then(data => {
@@ -74,7 +70,7 @@ export default defineConfig({
     locales: {
       '/': {
         nav: [
-          { text: 'Hooks', link: '/useRequest/' },
+          { text: '⒡ Hooks', link: '/useRequest/' },
           {
             text: '演武场',
             link: 'http://43.138.187.142:9000/vue-hooks-plus/vhp-playground/',
@@ -85,10 +81,6 @@ export default defineConfig({
                 link: 'https://inhiblab-core.gitee.io/docs/hooks/',
               }
             : null,
-          // {
-          //     text: 'Github 站点',
-          //     link: 'https://inhiblabcore.github.io/docs/hooks/',
-          //   },
           {
             text: '发行版本',
             link: 'https://github.com/InhiblabCore/vue-hooks-plus/releases/',
@@ -98,7 +90,7 @@ export default defineConfig({
       },
       '/en/': {
         nav: [
-          { text: 'Hooks', link: '/en/useRequest/' },
+          { text: '⒡ Hooks', link: '/en/useRequest/' },
           {
             text: 'Playground',
             link: 'http://43.138.187.142:9000/vue-hooks-plus/vhp-playground/',

packages/hooks/docs/.vitepress/router.ts

@@ -13,6 +13,7 @@ const Router = [
       { text: 'useSessionStorageState', link: '/useSessionStorageState/' },
       { text: 'useMap', link: '/useMap/' },
       { text: 'useSet', link: '/useSet/' },
+      { text: 'usePrevious', link: '/usePrevious/' },
       { text: 'useSetState', link: '/useSetState/' },
     ],
   },
@@ -242,6 +243,10 @@ export function getRouterConfig(langPrefix = '/') {
           text: langPrefix === '/' ? '📐 UseRequest规范' : '📐 UseRequest specification',
           link: `${langPrefix}useRequest/guide/`,
         },
+        // {
+        //   text: langPrefix === '/' ? '🧑‍🏫 在线教程' : '🧑‍🏫 Online Teaching',
+        //   link: `${langPrefix}onlineTeaching/`,
+        // },
       ],
     },
     ...getUseRequestRouter(langPrefix),

packages/hooks/docs/.vitepress/theme/home/Home-EN.vue

@@ -161,7 +161,7 @@
     font-size: 16px;
     display: inline-block;
     background: var(--vhp-getstart-bg);
-    border-radius: 20px;
+    border-radius: 12px;
     padding: 8px 18px;
     font-weight: 500;
     transition: background-color 0.5s, color 0.5s;

packages/hooks/docs/.vitepress/theme/home/Home.vue

@@ -20,7 +20,7 @@
       <p class="description"> </p>
       <p class="actions" style="position: relative; z-index: 9;">
         <a class="get-started" href="/docs/hooks/guide/">
-          Get Started
+          快速开始
           <svg
             class="icon"
             xmlns="http://www.w3.org/2000/svg"
@@ -96,10 +96,6 @@
       <div class="demo-name">
         Demo.vue
       </div>
-
-      <!-- <div class="language-md !bg-transparent">
-        <pre ref="block" class="text-left whitespace-normal font-mono bg-transparent"></pre>
-      </div> -->
     </DemoEditor>
     <!-- <HomeTeam /> -->
   </div>
@@ -163,7 +159,7 @@
     font-size: 16px;
     display: inline-block;
     background: var(--vhp-getstart-bg);
-    border-radius: 20px;
+    border-radius: 12px;
     padding: 8px 18px;
     font-weight: 500;
     transition: background-color 0.5s, color 0.5s;

packages/hooks/docs/.vitepress/theme/var.less

@@ -12,6 +12,7 @@
   --vp-home-hero-name-background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
 
   --vp-font-color: rgba(41, 65, 86, 1);
+  // --vp-c-text-code: var(--vp-c-brand);
 
   --vhp-func-bg: rgba(0, 0, 0, 0.08);
 

packages/hooks/docs/guide/index.en-US.md

@@ -43,4 +43,6 @@ import useRequest from 'vue-hooks-plus/es/useRequest'
 
 <br />
 
-::: warning does not contain vue2 :::
+::: warning does not contain vue2
+
+:::

packages/hooks/docs/guide/index.zh-CN.md

@@ -43,4 +43,6 @@ import useRequest from 'vue-hooks-plus/es/useRequest'
 
 <br />
 
-::: warning 不兼容 vue2 版本 :::
+::: warning 不兼容 vue2 版本
+
+:::

packages/hooks/docs/onlineTeaching/index.en-US.md

@@ -0,0 +1,10 @@
+---
+page: true
+title: Tutorial
+sidebar: false
+aside: false
+footer: false
+returnToTop: false
+---
+
+test

packages/hooks/docs/onlineTeaching/index.zh-CN.md

@@ -0,0 +1,6 @@
+---
+layout: home
+sidebar: false
+---
+
+test

packages/hooks/src/index.ts

@@ -18,6 +18,7 @@ import useFetchs from './useFetchs'
 import useFullscreen from './useFullscreen'
 import useHover from './useHover'
 import usePreview from './usePreview'
+import usePrevious from './usePrevious'
 import useInterval from './useInterval'
 import useInfiniteScroll from './useInfiniteScroll'
 import useInViewport from './useInViewport'
@@ -78,6 +79,7 @@ export {
   useMouse,
   useNetwork,
   usePreview,
+  usePrevious,
   useSessionStorageState,
   useSet,
   useSetState,

packages/hooks/src/usePrevious/demo/demo.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <p>counter current value：{{ counter }}</p>
+    <p>counter previous value：{{ prevCounter }}</p>
+    <vhp-button @click="inc()">increase</vhp-button>
+    <vhp-button @click="dec()" style="margin-left: 8px;">decrease</vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { usePrevious, useCounter } from 'vue-hooks-plus'
+  const [counter, { inc, dec }] = useCounter(0)
+  const prevCounter = usePrevious(counter)
+</script>

packages/hooks/src/usePrevious/demo/demo1.vue

@@ -0,0 +1,65 @@
+<template>
+  <div style="border: 1px solid rgba(100, 126, 255, 0.7);border-radius: 12px; padding: 6px;">
+    <p>current name: {{ currentName }}</p>
+    <p>current age: {{ currentAge }}</p>
+  </div>
+  <br>
+  <div style="border: 1px solid rgba(59, 206, 128, 0.7);border-radius: 12px; padding: 6px;">
+    <p>previous name: {{ previousName }}</p>
+    <p>previous age: {{ previousage }}</p>
+  </div>
+  <br>
+  <div>
+    <input v-model="currentNameInput" placeholder="Input Name">
+    <vhp-button @click="handleUpdateName" style="margin-left: 8px;">Update</vhp-button>
+  </div>
+
+  <br>
+  <div>
+    <input v-model="currentAgeInput" placeholder="Input Age">
+    <vhp-button @click="handleUpdateAge" style="margin-left: 8px;">Update</vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { usePrevious } from 'vue-hooks-plus'
+
+  const currentNameInput = ref('')
+  const currentName = ref('')
+  const currentAgeInput = ref()
+  const currentAge = ref()
+
+  const nameCompareFunction = (prev: string | undefined, next: string) => {
+    if (!prev) {
+      return true
+    }
+    if (prev !== next) {
+      return true
+    }
+    return false
+  }
+
+  const ageCompareFunction = (prev: number | undefined, next: number) => {
+    if (!prev) {
+      return true
+    }
+    if (prev !== next) {
+      return true
+    }
+    return false
+  }
+
+  const previousName = usePrevious(currentName, nameCompareFunction)
+  const previousage = usePrevious(currentAge, ageCompareFunction)
+
+  const handleUpdateName = () => {
+    currentName.value = currentNameInput.value
+  }
+
+  const handleUpdateAge = () => {
+    currentAge.value = currentAgeInput.value
+  }
+</script>
+
+<style scoped lang="less"></style>

packages/hooks/src/usePrevious/index.en-US.md

@@ -0,0 +1,36 @@
+---
+map:
+  # 映射到docs的路径
+  path: /usePrevious
+---
+
+# usePrevious
+
+A Hook to return the previous state.
+
+## Basic usage
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="Basic usage"
+  desc="Record the previous value"> </demo>
+
+## Custom shouldUpdate function
+
+<demo src="./demo/demo1.vue"
+  language="vue"
+  title="Custom shouldUpdate function"
+  desc="Previous value update only when the shouldUpdate function return true"> </demo>
+
+## Result
+
+| Property    | Description        | Type     |
+| ----------- | ------------------ | -------- |
+| previousRef | The previous value | `Ref<T>` |
+
+## Params
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| currentRef | The state that needs to be tracked | `Ref<T>` \| `ComputedRef<T>` | - |
+| shouldUpdate | Optional. Customize whether the state value should be updated | `(prev: T \| undefined, next: T) => boolean` | `(a, b) => a !== b` |

packages/hooks/src/usePrevious/index.ts

@@ -0,0 +1,23 @@
+import { ComputedRef, Ref, ref, watchEffect } from 'vue'
+
+export type ShouldUpdateFunc<T> = (prev: T | undefined, next: T) => boolean
+const defaultShouldUpdate = <T>(a?: T, b?: T) => !Object.is(a, b)
+
+function usePrevious<T>(
+  state: Ref<T> | ComputedRef<T>,
+  shouldUpdate: ShouldUpdateFunc<T> = defaultShouldUpdate,
+) {
+  const prevRef = ref<T>()
+  const curRef = ref<T>()
+
+  watchEffect(() => {
+    if (shouldUpdate(curRef.value, state.value)) {
+      prevRef.value = curRef.value
+      curRef.value = state.value
+    }
+  })
+
+  return prevRef
+}
+
+export default usePrevious

packages/hooks/src/usePrevious/index.zh-CN.md

@@ -0,0 +1,36 @@
+---
+map:
+  # 映射到docs的路径
+  path: /usePrevious
+---
+
+# usePrevious
+
+保存上一次状态的 Hook。
+
+## 基础用法
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="基本用法"
+  desc="记录上次的 count 值"> </demo>
+
+## 自定义 shouldUpdate 函数
+
+<demo src="./demo/demo1.vue"
+  language="vue"
+  title="自定义 shouldUpdate 函数"
+  desc="只有 shouldUpdate function 返回 true 时，才会记录值的变化"> </demo>
+
+## Result
+
+| 参数        | 说明            | 类型     |
+| ----------- | --------------- | -------- |
+| previousRef | 上次 state 的值 | `Ref<T>` |
+
+## Params
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| currentRef | 需要记录变化的值 | `Ref<T>` \| `ComputedRef<T>` | - |
+| shouldUpdate | 可选，自定义判断值是否变化 | `(prev: T \| undefined, next: T) => boolean` | `(a, b) => a !== b` |

packages/hooks/src/useRequest/docs/basic/index.en-US.md

@@ -174,7 +174,7 @@ const {
 );
 ```
 
-### Result
+## Result
 
 | Property | Description | Type |
 | --- | --- | --- |
@@ -190,7 +190,7 @@ const {
 | mutate | Mutate `data` directly | `(data?: TData / ((oldData?: TData) => (TData / undefined))) => void` |
 | cancel | Ignore the current promise response | `() => void` |
 
-### Options
+## Options
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |