Merge pull request #78 from InhiblabCore/dev

inhiblab · web-flow · commit defc5b78ed52 · 2023-01-11T22:08:23.000+08:00
feat: new package useWorker
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -21,9 +21,13 @@ jobs:
       - name: Test
         run: |
           pnpm run test
-      - name: use-immer Build
+      - name: Build use-immer
         run: |
-          cd packages/use-immer
+          cd packages/use-immer 
+          pnpm build
+      - name: Build use-worker
+        run: |
+          cd packages/use-worker 
           pnpm build
       - name: Docs-Build
         run: |
diff --git a/README.md b/README.md
@@ -93,6 +93,7 @@ Thanks for all their contributions!
 This project is heavily inspired by the following awesome projects.
 
 - [ahooks](https://ahooks.js.org/)
+- [@koale/useworker](https://github.com/alewin/useWorker)
 
 ## 📄 License
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -93,6 +93,7 @@ npm run docs:dev
 这个项目的灵感主要来自于以下这些很棒的项目。
 
 - [ahooks](https://ahooks.js.org/)
+- [@koale/useworker](https://github.com/alewin/useWorker)
 
 ## 📄 证书
 
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
 		"@vue-hooks-plus/vitepress": "1.2.3",
 		"@vue-hooks-plus/vitepress-demo-block": "^1.3.1",
     "@vue-hooks-plus/use-immer":"workspace:^1.0.0",
+    "@vue-hooks-plus/use-worker":"workspace:^1.0.0",
 		"@vue/test-utils": "^2.1.0",
     "@vitest/coverage-c8":"^0.25.7",
 		"eslint": "^8.20.0",
diff --git a/packages/hooks/README.md b/packages/hooks/README.md
@@ -93,6 +93,7 @@ Thanks for all their contributions!
 This project is heavily inspired by the following awesome projects.
 
 - [ahooks](https://ahooks.js.org/)
+- [@koale/useworker](https://github.com/alewin/useWorker)
 
 ## 📄 License
 
diff --git a/packages/hooks/docs/.vitepress/router.ts b/packages/hooks/docs/.vitepress/router.ts
@@ -29,6 +29,7 @@ const Router = [
       { text: 'useUpdate', link: '/useUpdate/' },
       { text: 'useInterval', link: '/useInterval/' },
       { text: 'useTimeout', link: '/useTimeout/' },
+      { text: 'useWorker', link: '/useWorker/' },
     ],
   },
   {
diff --git a/packages/hooks/src/useWorker/demo/demo.vue b/packages/hooks/src/useWorker/demo/demo.vue
@@ -0,0 +1,40 @@
+<template>
+  <p
+  >Current Time: <b>{{ computedTime }}</b></p
+  >
+  <!-- <p>Result: {{ JSON.stringify(result) }}</p> -->
+  <div>
+    <vhp-button @click="runSort()">Run Sort</vhp-button>
+    <vhp-button @click="runWorkerSort()" style="margin-left: 8px;">Run Worker Sort</vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useInterval } from 'vue-hooks-plus'
+  import { ref } from 'vue'
+  import { useWorker } from '@vue-hooks-plus/use-worker'
+
+  const numbers = [...Array(5000000)].map(e => ~~(Math.random() * 1000000))
+  const sortNumbers = (nums: any[]) => nums.sort((a, b) => a - b)
+
+  const result = ref<any[]>([])
+
+  const computedTime = ref(new Date().getTime())
+  useInterval(() => {
+    computedTime.value = new Date().getTime()
+  }, 10)
+
+  const [sortWorker] = useWorker(sortNumbers)
+  const runWorkerSort = async () => {
+    // non-blocking UI
+    result.value = await sortWorker(numbers)
+    console.log(result.value)
+  }
+
+  const runSort = async () => {
+    result.value = sortNumbers(numbers)
+    console.log(result.value)
+  }
+</script>
+
+<style scoped lang="less"></style>
diff --git a/packages/hooks/src/useWorker/index.en-US.md b/packages/hooks/src/useWorker/index.en-US.md
@@ -0,0 +1,16 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useWorker
+---
+
+# useWorker
+
+`useWorker` is a js library (with typescript support) that allows you to use the [Web Worker Web API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers), through Vue Hook. This library allows you to run the expensive function without blocking the user interface, using a simple syntax that makes use of [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise?retiredLocale=it)
+
+## Code demonstration
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="basic usage"
+  desc="Normal sorting will block UI bleeding, while worker sorting will not"> </demo>
diff --git a/packages/hooks/src/useWorker/index.zh-CN.md b/packages/hooks/src/useWorker/index.zh-CN.md
@@ -0,0 +1,16 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useWorker
+---
+
+# useWorker
+
+`useWorker` 允许您通过 Vue Hook 使用 [Web Worker Web API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)。该库允许您使用使用 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise?retiredLocale=it) 的简单语法来运行昂贵的函数而不会阻塞用户界面
+
+## 代码演示
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="基本用法"
+  desc="正常排序会阻塞UI渲染，而worker排序则不会"> </demo>
diff --git a/packages/use-worker/LICENSE b/packages/use-worker/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 YongGit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/use-worker/package.json b/packages/use-worker/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@vue-hooks-plus/use-worker",
+  "version": "1.0.0",
+  "description": "",
+  "files": [
+    "dist",
+    "LICENSE",
+    "package.json",
+    "README.md"
+  ],
+  "main": "./dist/useWorker.cjs.js",
+  "module": "./dist/useWorker.es.js",
+  "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "keywords": [
+    "vue3",
+    "web worker"
+  ],
+  "repository": "https://github.com/InhiblabCore/vue-hooks-plus",
+  "homepage": "https://github.com/InhiblabCore/vue-hooks-plus",
+  "author": "NelsonYong",
+  "license": "MIT",
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
+}
diff --git a/packages/use-worker/src/hook/useDeepCompareWithTarget.ts b/packages/use-worker/src/hook/useDeepCompareWithTarget.ts
@@ -0,0 +1,21 @@
+import { computed, ref, WatchSource } from 'vue'
+import { isEqual } from 'lodash'
+
+export type EffectCallback = () => void
+export type DependencyList = WatchSource | any[] | any
+
+const depsEqual = (aDeps: DependencyList, bDeps: DependencyList = []) => {
+  return isEqual(aDeps, bDeps)
+}
+
+const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
+  const prevDependencies = ref<DependencyList>(deps)
+  const areDeepsEqual = depsEqual(prevDependencies.value, deps)
+  if (!areDeepsEqual) {
+    prevDependencies.value = deps
+  }
+
+  return computed(() => prevDependencies.value && effect)
+}
+
+export default useDeepCompareEffect
diff --git a/packages/use-worker/src/index.ts b/packages/use-worker/src/index.ts
@@ -0,0 +1,2 @@
+export { useWorker } from './useWorker'
+export { WORKER_STATUS } from './lib/status'
diff --git a/packages/use-worker/src/lib/createWorkerBlobUrl.ts b/packages/use-worker/src/lib/createWorkerBlobUrl.ts
@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/ban-types */
+// import isoworker from 'isoworker'
+import { TRANSFERABLE_TYPE } from '../useWorker'
+import jobRunner from './jobRunner'
+import remoteDepsParser from './remoteDepsParser'
+
+/**
+ * Converts the "fn" function into the syntax needed to be executed within a web worker
+ *
+ * @param {Function} fn the function to run with web worker
+ * @param {Array.<String>} deps array of strings, imported into the worker through "importScripts"
+ *
+ * @returns {String} a blob url, containing the code of "fn" as a string
+ *
+ * @example
+ * createWorkerBlobUrl((a,b) => a+b, [])
+ * // return "onmessage=return Promise.resolve((a,b) => a + b)
+ * .then(postMessage(['SUCCESS', result]))
+ * .catch(postMessage(['ERROR', error])"
+ */
+const createWorkerBlobUrl = (
+  fn: Function,
+  deps: string[],
+  transferable: TRANSFERABLE_TYPE /* localDeps: () => unknown[], */,
+) => {
+  // const [context] = isoworker.createContext(localDeps)
+  const blobCode = `
+    ${remoteDepsParser(deps)};
+    onmessage=(${jobRunner})({
+      fn: (${fn}),
+      transferable: '${transferable}'
+    })
+  `
+  const blob = new Blob([blobCode], { type: 'text/javascript' })
+  const url = URL.createObjectURL(blob)
+  return url
+}
+
+export default createWorkerBlobUrl
diff --git a/packages/use-worker/src/lib/jobRunner.ts b/packages/use-worker/src/lib/jobRunner.ts
@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import { TRANSFERABLE_TYPE } from 'src/useWorker'
+
+interface JOB_RUNNER_OPTIONS {
+  fn: Function
+  transferable: TRANSFERABLE_TYPE
+}
+
+/**
+ * This function accepts as a parameter a function "userFunc"
+ * And as a result returns an anonymous function.
+ * This anonymous function, accepts as arguments,
+ * the parameters to pass to the function "useArgs" and returns a Promise
+ * This function can be used as a wrapper, only inside a Worker
+ * because it depends by "postMessage".
+ *
+ * @param {Function} userFunc {Function} fn the function to run with web worker
+ *
+ * @returns {Function} returns a function that accepts the parameters
+ * to be passed to the "userFunc" function
+ */
+/**
+ * @param {Function} options {Function} fn the function to run with web worker
+ * @returns {Function} returns a function that accepts the parameters
+to be passed to the "userFunc" function
+ */
+const jobRunner = (options: JOB_RUNNER_OPTIONS): Function => (e: MessageEvent) => {
+  const [userFuncArgs] = e.data as [any[]]
+  return Promise.resolve(options.fn(...userFuncArgs))
+    .then(result => {
+      const isTransferable = (val: any) =>
+        ('ArrayBuffer' in self && val instanceof ArrayBuffer) ||
+        ('MessagePort' in self && val instanceof MessagePort) ||
+        ('ImageBitmap' in self && val instanceof ImageBitmap) ||
+        // @ts-ignore
+        ('OffscreenCanvas' in self && val instanceof OffscreenCanvas)
+      const transferList: any[] =
+        options.transferable === 'auto' && isTransferable(result) ? [result] : []
+      // @ts-ignore
+      postMessage(['SUCCESS', result], transferList)
+    })
+    .catch(error => {
+      // @ts-ignore
+      postMessage(['ERROR', error])
+    })
+}
+
+export default jobRunner
diff --git a/packages/use-worker/src/lib/remoteDepsParser.ts b/packages/use-worker/src/lib/remoteDepsParser.ts
@@ -0,0 +1,20 @@
+/**
+ *
+ * Concatenates the remote dependencies into a comma separated string.
+ * this string will then be passed as an argument to the "importScripts" function
+ *
+ * @param {Array.<String>}} deps array of string
+ * @returns {String} a string composed by the concatenation of the array
+ * elements "deps" and "importScripts".
+ *
+ * @example
+ * remoteDepsParser(['http://js.com/1.js', 'http://js.com/2.js']) // importScripts('http://js.com/1.js', 'http://js.com/2.js')
+ */
+const remoteDepsParser = (deps: string[]) => {
+  if (deps.length === 0) return ''
+
+  const depsString = deps.map(dep => `'${dep}'`).toString()
+  return `importScripts(${depsString})`
+}
+
+export default remoteDepsParser
diff --git a/packages/use-worker/src/lib/status.ts b/packages/use-worker/src/lib/status.ts
@@ -0,0 +1,11 @@
+/* eslint-disable no-unused-vars */
+export enum WORKER_STATUS {
+  PENDING = 'PENDING',
+  SUCCESS = 'SUCCESS',
+  RUNNING = 'RUNNING',
+  ERROR = 'ERROR',
+  TIMEOUT_EXPIRED = 'TIMEOUT_EXPIRED',
+  KILLED = 'KILLED',
+}
+
+export default WORKER_STATUS
diff --git a/packages/use-worker/src/useWorker.ts b/packages/use-worker/src/useWorker.ts
diff --git a/packages/use-worker/tsconfig.json b/packages/use-worker/tsconfig.json
diff --git a/packages/use-worker/vite.config.ts b/packages/use-worker/vite.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@ const Router = [`
`29`	`29`	`{ text: 'useUpdate', link: '/useUpdate/' },`
`30`	`30`	`{ text: 'useInterval', link: '/useInterval/' },`
`31`	`31`	`{ text: 'useTimeout', link: '/useTimeout/' },`
	`32`	`+ { text: 'useWorker', link: '/useWorker/' },`
`32`	`33`	`],`
`33`	`34`	`},`
`34`	`35`	`{`