refactor: 🚜 responsive objects can only be read to better distinguish business from tools

refactor:  responsive objects can only be read to better distinguish business from tools

Author: inhiblab

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
   plugins: ['@typescript-eslint', 'vue'],
   rules: {
     'vue/multi-word-component-names': 'off',
+    'vue/html-self-closing': 'off',
     'react/no-string-refs': 'off',
     'react/no-unknown-property': 'off',
     'react/display-name': 'off',

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

@@ -82,18 +82,18 @@ export default defineConfig({
           { text: `⒡ Hooks`, link: '/useRequest/' },
           isGithub
             ? {
-                text: '演武场',
-                link: 'https://inhiblabcore.github.io/vue-hooks-plus-playground/play',
-              }
+              text: '演武场',
+              link: 'https://inhiblabcore.github.io/vue-hooks-plus-playground/play',
+            }
             : {
-                text: '演武场',
-                link: 'https://inhiblab-core.gitee.io/vue-hooks-plus-playground/play',
-              },
+              text: '演武场',
+              link: 'https://inhiblab-core.gitee.io/vue-hooks-plus-playground/play',
+            },
           isGithub
             ? {
-                text: '国内镜像 🇨🇳',
-                link: 'https://inhiblab-core.gitee.io/docs/hooks',
-              }
+              text: '国内镜像 🇨🇳',
+              link: 'https://inhiblab-core.gitee.io/docs/hooks',
+            }
             : null,
           {
             text: '发行版本',
@@ -107,18 +107,18 @@ export default defineConfig({
           { text: '⒡ Hooks', link: '/en/useRequest/' },
           isGithub
             ? {
-                text: 'Playground',
-                link: 'https://inhiblabcore.github.io/vue-hooks-plus-playground/play',
-              }
+              text: 'Playground',
+              link: 'https://inhiblabcore.github.io/vue-hooks-plus-playground/play',
+            }
             : {
-                text: 'Playground',
-                link: 'https://inhiblab-core.gitee.io/vue-hooks-plus-playground/play',
-              },
+              text: 'Playground',
+              link: 'https://inhiblab-core.gitee.io/vue-hooks-plus-playground/play',
+            },
           isGithub
             ? {
-                text: 'Gitee Mirror 🇨🇳',
-                link: 'https://inhiblab-core.gitee.io/docs/hooks/',
-              }
+              text: 'Gitee Mirror 🇨🇳',
+              link: 'https://inhiblab-core.gitee.io/docs/hooks/',
+            }
             : null,
           {
             text: 'Releases',

packages/hooks/package.json

@@ -34,7 +34,6 @@
 	},
 	"dependencies": {
 		"@types/js-cookie": "^3.0.1",
-		"intersection-observer": "^0.12.2",
 		"js-cookie": "^3.0.1",
 		"lodash": "^4.17.21",
 		"marked": "^4.0.17",

packages/hooks/src/createUseStorageState/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-empty */
-import { unref, ref, Ref, UnwrapRef, watchEffect } from 'vue'
+import { unref, ref, Ref, UnwrapRef, watchEffect, readonly } from 'vue'
 
 export interface IFuncUpdater<T> {
   (previousState?: T): T
@@ -99,7 +99,7 @@ export function createUseStorageState(getStorage: () => Storage | undefined) {
       }
     }
 
-    return [state, updateState]
+    return [readonly(state), updateState]
   }
   return useStorageState
 }

packages/hooks/src/useBoolean/demo/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>{{ flag }}</div>
-    <br>
+    <br />
     <div>
       <p>
         <vhp-button @click="() => set(!flag)">Set</vhp-button>

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

@@ -31,10 +31,10 @@ defaultValue? : boolean,
 
 ## Result
 
-| Property | Description                            | Type           |
-| -------- | -------------------------------------- | -------------- |
-| state    | Current value                          | `Ref<boolean>` |
-| actions  | A set of methods to update state value | `Actions`      |
+| Property | Description                            | Type                     |
+| -------- | -------------------------------------- | ------------------------ |
+| state    | Current value                          | `Readonly<Ref<boolean>>` |
+| actions  | A set of methods to update state value | `Actions`                |
 
 ## Actions
 

packages/hooks/src/useBoolean/index.ts

@@ -2,10 +2,10 @@ import type { Ref } from "vue";
 import useToggle from "../useToggle";
 
 export interface UseBooleanActions {
-    /**
-   *  Set state to `true`
-   * @returns void
-   */
+  /**
+ *  Set state to `true`
+ * @returns void
+ */
   setTrue: () => void;
 
   /**
@@ -28,7 +28,7 @@ export interface UseBooleanActions {
   toggle: () => void;
 }
 
-export type UseBooleanResult = [Ref<boolean>, UseBooleanActions]
+export type UseBooleanResult = [Readonly<Ref<boolean>>, UseBooleanActions]
 
 export default function useBoolean(
   defaultValue = false

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

@@ -31,10 +31,10 @@ const [state, { toggle, set, setTrue, setFalse }] = useBoolean(
 
 ## Result
 
-| 参数    | 说明     | 类型           |
-| ------- | -------- | -------------- |
-| state   | 状态值   | `Ref<boolean>` |
-| actions | 操作集合 | `Actions`      |
+| 参数    | 说明     | 类型                     |
+| ------- | -------- | ------------------------ |
+| state   | 状态值   | `Readonly<Ref<boolean>>` |
+| actions | 操作集合 | `Actions`                |
 
 ## Actions
 

packages/hooks/src/useCookieState/demo/demo.vue

@@ -6,14 +6,13 @@
       @change="change"
       placeholder="please input"
       style="width: 300px;"
-    >
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
   import { useCookieState } from 'vue-hooks-plus'
   const [message, setMessage] = useCookieState('useCookieStateString')
-
   const change = (e: any) => {
     setMessage(e.target?.value)
   }

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

@@ -53,10 +53,10 @@ If you want to remove this data from the document.cookie, use the `setState()` o
 
 ### Result
 
-| Property | Description         | Type                         |
-| -------- | ------------------- | ---------------------------- |
-| state    | Local Cookie value  | `Ref<string` \| `undefined>` |
-| setState | Update Cookie value | `SetState`                   |
+| Property | Description         | Type                                   |
+| -------- | ------------------- | -------------------------------------- |
+| state    | Local Cookie value  | `Readonly<Ref<string>>` \| `undefined` |
+| setState | Update Cookie value | `SetState`                             |
 
 setState can update cookie options, which will be merged with the options set by `useCookieState`