Merge pull request #132 from InhiblabCore/dev

feat: new plugin [useBroadcastChannelPlugin] at @vue-hooks-plus/use-request-plugins

Author: inhiblab

commitlint.config.js

@@ -6,10 +6,9 @@
 // perf：性能, 体验优化 | Performance, experience optimization
 // test：新增测试用例或是更新现有测试 | Add the new test cases or update the existing tests
 // build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交 | The main purpose is to modify the submission of the project building system (such as glup, webpack, rollup configuration, etc.)
-// ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交 | The main purpose is to modify the submission of project continued integration processes (e. g. Travis, Jenkins, GitLab CI, Circle, etc.)
+// workflow：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交 | The main purpose is to modify the submission of project continued integration processes (e. g. Travis, Jenkins, GitLab CI, Circle, etc.)
 // chore：不属于以上类型的其他类，比如构建流程, 依赖管理 | Other classes that do not belong to the above types, such as building processes, dependency management
 // revert：回滚某个更早之前的提交 | Roll back some earlier previous submission
-// workflow: 工作流 ｜ workflow
 // version: 改变package.json 版本 | Change the package.json version
 
 module.exports = {
@@ -34,7 +33,7 @@ module.exports = {
         'test',
         'refactor',
         'build',
-        'ci',
+        'type',
         'chore',
         'revert',
         'workflow',

package.json

@@ -73,7 +73,9 @@
 		"vue-tsc": "1.0.9",
 		"vue-typical": "^2.1.0",
     "pinia":"^2.0.34",
+    "broadcast-channel":"^5.1.0",
     "three":"0.147.0",
+    "axios": "^0.24.0",
     "vue-demi": "^0.13.11"
 	},
 	"lint-staged": {

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

@@ -170,6 +170,10 @@ const useRequestPlugins = [
         text: '全局请求状态管理',
         link: '/useRequest/plugins/fetchsing/',
       },
+      {
+        text: "同源跨窗口广播",
+        link: "/useRequest/plugins/broadcastChannel/"
+      }
     ],
   },
 ]
@@ -179,9 +183,13 @@ const useRequestPluginsEN = [
     text: 'UseRequest External Plugins',
     items: [
       {
-        text: 'Global Fetching',
+        text: 'global Fetching',
         link: '/en/useRequest/plugins/fetchsing/',
       },
+      {
+        text: "broadcastChannel",
+        link: "/en/useRequest/plugins/broadcastChannel/"
+      }
     ],
   },
 ]

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

@@ -13,8 +13,7 @@
   import TypeIt from 'typeit'
   import { El } from 'typeit/dist/types'
   import { ref, onMounted, watch } from 'vue'
-
-  import useInViewport from '../../../../src/useInViewport'
+  import { useInViewport } from 'vue-hooks-plus'
 
   const domRef = ref(null)
   const isMount = ref(false)
@@ -27,12 +26,10 @@
     if (curr?.[0] && curr?.[1] && isFirst.value === true) {
       isFirst.value = false
       if (block.value)
+        // @ts-ignore
         new TypeIt(block.value, {
           speed: 50,
           startDelay: 900,
-          // afterStep: () => {
-          //   console.log(JSON.parse(JSON.stringify(block.value!.innerText.replace('|', ''))))
-          // },
         })
           .type('<br><h1 style="opacity: 0.5;">Welcome use VueHooks Plus!</h1><br /><br />', {
             delay: 100,

packages/hooks/docs/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "lib": ["ES2016", "dom"],
     "baseUrl": "./",
-    "rootDir": "./",
+    "rootDir": "/",
     "paths": {
       "vue-hooks-plus": ["../src/index.ts"]
     }

packages/hooks/src/index.ts

@@ -1,8 +1,4 @@
-import useRequest, {
-  clearUseRequestCache,
-  createUseRequest,
-  useRequestProvider,
-} from './useRequest'
+import useRequest, { clearUseRequestCache, useRequestProvider } from './useRequest'
 import useAsyncOrder from './useAsyncOrder'
 import useBoolean from './useBoolean'
 import useCookieState from './useCookieState'
@@ -55,7 +51,6 @@ export {
   useRequest,
   clearUseRequestCache,
   useRequestProvider,
-  createUseRequest,
   useAsyncOrder,
   useBoolean,
   useCookieState,

packages/hooks/src/useRequest/createUseRequest.ts

@@ -4,15 +4,15 @@
 </template>
 
 <script lang="ts" setup>
-import { useRequest } from 'vue-hooks-plus'
+  import { useRequest } from 'vue-hooks-plus'
 
-function getUsername(params: { desc: string }): Promise<string> {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(`vue-hooks-plus ${params.desc}`)
-    }, 1000)
-  })
-}
+  function getUsername(params: { desc: string }): Promise<string> {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(`vue-hooks-plus ${params.desc}`)
+      }, 1000)
+    })
+  }
 
-const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
+  const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
 </script>

packages/hooks/src/useRequest/docs/basic/demo/demo.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>Current: {{ loading ? 'loading..' : data }}</div>
+
+  <div>
+    <vhp-button @click="refresh()">Refresh</vhp-button>
+    <div style="margin-top: 8px;">
+      <h4>Desc</h4>
+      <input v-model="input">
+      <vhp-button style="margin-left: 4px;" @click="submit()">Send</vhp-button>
+    </div>
+  </div>
+  <div>
+    <h3>Channel History:</h3>
+    <div v-for="(item, index) in other" :key="index">{{ item }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useRequest } from 'vue-hooks-plus'
+  import { useBroadcastChannelPlugin } from '@vue-hooks-plus/use-request-plugins'
+
+  function getUsername(params: { desc: string }): Promise<string> {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(`${params.desc}-${String(Date.now())}`)
+      }, 1000)
+    })
+  }
+
+  const other = ref<string[]>([])
+  const input = ref('')
+  const desc = ref('good')
+
+  const submit = () => {
+    desc.value = `send-other-${input.value}`
+  }
+
+  const { data, loading, refresh } = useRequest(
+    () => getUsername({ desc: desc.value }),
+    {
+      refreshDeps: true,
+      broadcastChannel: 'nice-broadcastChannel',
+      onBroadcastChannel: (message: any, channel: any) => {
+        other.value.push(message.data)
+      },
+    },
+    [useBroadcastChannelPlugin],
+  )
+</script>
+
+<style scoped lang="less"></style>

packages/hooks/src/useRequest/docs/plugins/broadcastChannel/demo/demo.vue

@@ -0,0 +1,66 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/plugins/broadcastChannel
+source:
+  path: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/use-request-plugins/src/useBroadcastChannelPlugin/index.ts
+  demoPath: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/plugins/broadcastChannel/demo/demo.vue
+---
+
+# BroadcastChannel(Experimental)
+
+> VERY IMPORTANT: This utility is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages.
+
+`useBroadcastChannelPlugin` is a utility for broadcasting and syncing the state of your useRequest State between browser tabs/windows with the same origin.
+
+## Feature
+
+- Act as the intermediate state for all requests, where users can operate on the collected request results.
+
+## Install
+
+```bash
+
+# It is necessary to ensure that the application contains `broadcast-channel` .
+
+1. npm i broadcast-channel
+
+2. npm i @vue-hooks-plus/use-request-plugins
+
+```
+
+## Demo
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="Same origin cross window communication"
+  desc="Opening the same new window, sending and refreshing data will result in data being transmitted across windows."> </demo>
+
+## API
+
+```typescript
+import { useRequest } from 'vue-hooks-plus'
+import { useBroadcastChannelPlugin } from '@vue-hooks-plus/use-request-plugins'
+
+useRequest(
+  service,
+  {
+    broadcastChannel?: string
+    broadcastChannelKey?: string
+    broadcastChannelOptions?: BroadcastChannelOptions
+    customPostMessage?: (postMessage: (msg?: any) => Promise<void>, channel?: BroadcastChannel) => void
+    onBroadcastChannel?: (value?: MessageType, channel?: BroadcastChannel, setFetchState?: Fetch<any, []>['setFetchState']) => void
+  },
+  [useBroadcastChannelPlugin],
+)
+```
+
+## Options
+
+| Property | Description | Type |
+| --- | --- | --- |
+| broadcastChannel | Required, the name of the channel, which must be the same as the channel name to receive the same frequency data. | `string` |
+| broadcastChannelKey | Non mandatory identifier used to distinguish different application types. | `string` |
+| broadcastChannelOptions | The configuration item for `broadcast-channel` has a default configuration of `{webWorkerSupport: false}` | `BroadcastChannelOptions` |
+| customPostMessage | User defined collection and sending of data. The default sending method is `type`, `data`, `param`, `error` | `(potMessage: (msg?: any)=>Promise<void>, channel?: BroadcastChannel) => void` |
+| onBroadcastChannel | Monitor and collect the same frequency data sent by other applications (including multiple windows of the same application) | `(value?: MessageType, channel?: BroadcastChannel, setFetchState?: Fetch<any, []>['setFetchState']) => void` |