feat: webWorkerFunction

CHANGELOG.md

@@ -3,7 +3,17 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## [Unreleased]
+<<<<<<< HEAD
+
+## [Unreleased]
+
+---
+
+## Added
+
+- [useWorker](https://pikax.me/vue-composable/composable/web/worker) - `Web Worker API`
+- # [useWorkerFunction](https://pikax.me/vue-composable/composable/web/workerFunction) - Webworker Function, offload a function to webworker
+  <!-- ## [Unreleased]
 
 --- -->
 
@@ -30,6 +40,7 @@ _2020-04-05_
 
 - [useValidation] - Fix tracking of `$value` when is not `ref`
 - [TailwindCSS](https://pikax.me/vue-composable/composable/breakpoint/breakpointTailwindCSS) - improve typings and fix bug when sending custom breakpoints
+  > > > > > > > master
 
 ## 1.0.0-dev.16
 

docs/.vuepress/components/ValidationExample.vue

@@ -25,12 +25,12 @@
 </template>
 
 <script>
-import { createComponent, ref, reactive, computed } from "@vue/composition-api";
+import { defineComponent, ref, reactive, computed } from "@vue/composition-api";
 import { useValidation } from "vue-composable";
 
 const required = x => !!x;
 
-export default createComponent({
+export default defineComponent({
   setup() {
     const name = ref("");
     const surname = ref("");

docs/.vuepress/components/WorkerExample.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <h3>Sort</h3>
+    <p>time: {{ now }}</p>
+    <h6>
+      The worker can take more than 10 seconds to finish, the timer shouldn't
+      stop while the worker is processing
+    </h6>
+
+    <p>
+      Numbers:
+      <b>{{ firstSegment }}</b
+      >...
+      <b>{{ lastSegment }}</b>
+    </p>
+
+    <ul>
+      <li>
+        <button @click="sortWorker">Worker</button>
+        <p v-if="errored" :style="{ color: 'red' }">{{ errorEvent }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  ref,
+  computed,
+  watchEffect,
+  watch
+} from "@vue/composition-api";
+import { useWorker, useDateNow } from "vue-composable";
+
+export default defineComponent({
+  name: "worker-example",
+  setup() {
+    const timeout = ref(1500);
+    const { now } = useDateNow({ refreshMs: 10 });
+
+    const numbers = [...Array(50000)].map(() =>
+      Math.floor(Math.random() * 1000000)
+    );
+
+    const sortedNumbers = ref([]);
+
+    const firstSegment = computed(() => sortedNumbers.value.slice(0, 10));
+    const lastSegment = computed(() => sortedNumbers.value.slice(-10));
+
+    const { postMessage, data, errored, errorEvent } = useWorker(
+      "/vue-composable/worker.example.js"
+    );
+
+    watch(
+      data,
+      d => {
+        sortedNumbers.value = d;
+      },
+      { lazy: true }
+    );
+
+    watch(
+      errorEvent,
+      e => {
+        sortedNumbers.value = ["error", e.returnValue];
+      },
+      { lazy: true }
+    );
+
+    const sortWorker = () => {
+      postMessage(numbers);
+    };
+
+    return {
+      now,
+
+      firstSegment,
+      lastSegment,
+
+      sortWorker,
+      errored,
+      errorEvent
+    };
+  }
+});
+</script>

docs/.vuepress/components/WorkerFunctionExample.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <h3>Sort</h3>
+    <p>time: {{ now }}</p>
+    <h6>
+      If UI thread is working the refresh rate should go down and the time will
+      stop
+    </h6>
+    <div>
+      <label>Timeout</label>
+      <input v-model.number="timeout" type="number" />
+    </div>
+
+    <p>
+      Numbers:
+      <b>{{ firstSegment }}</b
+      >...
+      <b>{{ lastSegment }}</b>
+    </p>
+
+    <ul>
+      <li>
+        <button @click="sortArray">Function</button>
+      </li>
+      <li>
+        <button @click="sortWorker" :disabled="working">Worker</button>
+        <p v-if="cancelled" :style="{ color: 'red' }">{{ error }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  ref,
+  computed,
+  watchEffect
+} from "@vue/composition-api";
+import { useWorkerFunction, useDateNow } from "vue-composable";
+
+const bubbleSort = input => {
+  let swap;
+  let n = input.length - 1;
+  const sortedArray = input.slice();
+  do {
+    swap = false;
+    for (let index = 0; index < n; index += 1) {
+      if (sortedArray[index] > sortedArray[index + 1]) {
+        const tmp = sortedArray[index];
+        sortedArray[index] = sortedArray[index + 1];
+        sortedArray[index + 1] = tmp;
+        swap = true;
+      }
+    }
+    n -= 1;
+  } while (swap);
+
+  return sortedArray;
+};
+
+export default defineComponent({
+  name: "worker-function-example",
+  setup() {
+    const timeout = ref(15000);
+    const { now } = useDateNow({ refreshMs: 10 });
+
+    const numbers = [...Array(50000)].map(() =>
+      Math.floor(Math.random() * 1000000)
+    );
+
+    const sortedNumbers = ref([]);
+
+    const firstSegment = computed(() => sortedNumbers.value.slice(0, 10));
+    const lastSegment = computed(() => sortedNumbers.value.slice(-10));
+
+    const sortArray = () => {
+      sortedNumbers.value = bubbleSort(numbers);
+    };
+    const {
+      exec,
+      loading: working,
+      error,
+      cancelled
+    } = useWorkerFunction(bubbleSort, { timeout });
+    const sortWorker = () => {
+      exec(numbers)
+        .then(x => (sortedNumbers.value = x))
+        .catch(x => (sortedNumbers.value = ["error", x]));
+    };
+
+    return {
+      now,
+      timeout,
+
+      firstSegment,
+      lastSegment,
+
+      sortArray,
+
+      sortWorker,
+      working,
+      error,
+      cancelled
+    };
+  }
+});
+</script>

docs/.vuepress/config.js

@@ -171,7 +171,9 @@ module.exports = {
             ["composable/web/language", "Language"],
             ["composable/web/broadcastChannel", "BroadcastChannel API"],
             ["composable/web/geolocation", "Geolocation API"],
-            ["composable/web/cssVariables", "CSS variables"]
+            ["composable/web/cssVariables", "CSS variables"],
+            ["composable/web/worker", "WebWorker API"],
+            ["composable/web/workerFunction", "WebWorker Function"]
           ]
         },
         {

docs/.vuepress/public/worker.example.js

@@ -0,0 +1,56 @@
+// expose worker code without typing
+// based from https://github.com/dai-shi/react-hooks-worker/blob/1e842ad15c558fc04dd7339a62aaa43f46d1c7cd/src/exposeWorker.js
+// code from /packages/web/worker.ts
+function exposeWorker(func) {
+  this.onmessage = async e => {
+    const r = func(e.data);
+
+    if (r === undefined) {
+      if (__DEV__) {
+        console.warn(
+          `[exposeWorker] returned \`${r}\`, this might cause unexpected behaviour`
+        );
+      }
+      this.postMessage(r);
+    } else if (r === null) {
+      this.postMessage(r);
+    } else if (Array.isArray(r)) {
+      this.postMessage(r);
+    } else if (r[Symbol.asyncIterator]) {
+      for await (const i of r) this.postMessage(i);
+    } else if (r[Symbol.iterator]) {
+      for (const i of r) this.postMessage(i);
+    } else {
+      this.postMessage(await r);
+    }
+  };
+}
+// / exposeWorker
+
+function* bubbleSort(input) {
+  let swap;
+  let n = input.length - 1;
+  const sortedArray = input.slice();
+
+  yield ["sorting", `${input.length} items`];
+  do {
+    swap = false;
+    for (let index = 0; index < n; index += 1) {
+      if (sortedArray[index] > sortedArray[index + 1]) {
+        const tmp = sortedArray[index];
+        sortedArray[index] = sortedArray[index + 1];
+        sortedArray[index + 1] = tmp;
+        swap = true;
+      }
+    }
+    n -= 1;
+
+    if (Math.floor(input.length / 2) === n) {
+      yield ["sorted", `${n} items processed`];
+    }
+  } while (swap);
+
+  yield sortedArray;
+}
+
+exposeWorker(bubbleSort);

docs/README.md

@@ -105,6 +105,8 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
 - [BroadcastChannel](composable/web/broadcastChannel) - reactive `BroadcastChannel API`
 - [Geolocation](composable/web/geolocation) - reactive `Geolocation API`
 - [CSS variables](composable/web/cssVariables) - reactive `CSS variables`
+- [Worker](https://pikax.me/vue-composable/composable/web/worker) - `Web worker API`
+- [WorkerFunction](https://pikax.me/vue-composable/composable/web/workerFunction) - Webworker Function, offload a function to webworker
 
 ### Validation