From 1902b61b9f6a0ebe5a8abcf97cc041fd5c7bd51c Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Sun, 29 Mar 2020 22:01:24 +0100
Subject: [PATCH 01/11] feat: webWorkerFunction

---
 docs/api/web.api.md                           | 781 +++++++++++-------
 .../src/components/HelloWorld.vue             |  49 +-
 packages/web/src/web/index.ts                 |   1 +
 packages/web/src/web/webWorker/_runner.js     |  14 +
 packages/web/src/web/webWorker/index.ts       |   1 +
 packages/web/src/web/webWorker/webWorker.ts   |  83 ++
 tsconfig.json                                 |   2 +-
 7 files changed, 636 insertions(+), 295 deletions(-)
 create mode 100644 packages/web/src/web/webWorker/_runner.js
 create mode 100644 packages/web/src/web/webWorker/index.ts
 create mode 100644 packages/web/src/web/webWorker/webWorker.ts

diff --git a/docs/api/web.api.md b/docs/api/web.api.md
index f4f7c05ca..dc54ef933 100644
--- a/docs/api/web.api.md
+++ b/docs/api/web.api.md
@@ -3,29 +3,29 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-
-import { Ref } from '@vue/composition-api';
-import { RefElement } from '@vue-composable/core';
-import { RefTyped } from '@vue-composable/core';
+import { Ref } from "@vue/composition-api";
+import { RefElement } from "@vue-composable/core";
+import { RefTyped } from "@vue-composable/core";
 
 // @public (undocumented)
 export type BreakpointObject = Record<string, string | number>;
 
 // @public (undocumented)
-export type BreakpointReturn<T> = Record<keyof T, Ref<boolean>> & BreakpointReturnObject<T>;
+export type BreakpointReturn<T> = Record<keyof T, Ref<boolean>> &
+  BreakpointReturnObject<T>;
 
 // @public (undocumented)
 export interface BreakpointReturnObject<T> {
-    // (undocumented)
-    current: Ref<keyof T | undefined>;
-    // (undocumented)
-    remove: RemoveEventFunction;
+  // (undocumented)
+  current: Ref<keyof T | undefined>;
+  // (undocumented)
+  remove: RemoveEventFunction;
 }
 
 // @public (undocumented)
 export interface BroadcastMessageEvent<T> extends MessageEvent {
-    // (undocumented)
-    readonly data: T;
+  // (undocumented)
+  readonly data: T;
 }
 
 // @public
@@ -33,10 +33,10 @@ export type CssVarDef = CssVarDefinition | string;
 
 // @public
 export interface CssVarDefinition {
-    // (undocumented)
-    name: string;
-    // (undocumented)
-    value: RefTyped<string>;
+  // (undocumented)
+  name: string;
+  // (undocumented)
+  value: RefTyped<string>;
 }
 
 // @public
@@ -50,73 +50,80 @@ export type CssVariableObject<T> = Record<keyof T, Ref<CssVariable>>;
 
 // @public
 export interface CssVariablesMethods {
-    observing: Ref<boolean>;
-    resume: () => void;
-    stop: () => void;
-    // (undocumented)
-    supported: boolean;
+  observing: Ref<boolean>;
+  resume: () => void;
+  stop: () => void;
+  // (undocumented)
+  supported: boolean;
 }
 
 // @public (undocumented)
 export interface DefaultTailwindBreakpoints {
-    // (undocumented)
-    lg: 1024;
-    // (undocumented)
-    md: 768;
-    // (undocumented)
-    sm: 640;
-    // (undocumented)
-    xl: 1280;
+  // (undocumented)
+  lg: 1024;
+  // (undocumented)
+  md: 768;
+  // (undocumented)
+  sm: 640;
+  // (undocumented)
+  xl: 1280;
 }
 
 // Warning: (ae-forgotten-export) The symbol "TailwindConfigEmpty" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export type ExtractTailwindScreens<T extends TailwindConfigEmpty> = keyof T["theme"]["screens"] extends never ? DefaultTailwindBreakpoints : T["theme"]["screens"];
+export type ExtractTailwindScreens<
+  T extends TailwindConfigEmpty
+> = keyof T["theme"]["screens"] extends never
+  ? DefaultTailwindBreakpoints
+  : T["theme"]["screens"];
 
 // @public (undocumented)
 export interface GeolocationOptions {
-    immediate?: boolean;
+  immediate?: boolean;
 }
 
 // @public
-export function getCssVariableFor(element: HTMLElement, name: string): CssVariable;
+export function getCssVariableFor(
+  element: HTMLElement,
+  name: string
+): CssVariable;
 
 // @public (undocumented)
 export interface IntersectionObserverOptions {
-    // (undocumented)
-    root?: RefTyped<Element> | null;
-    // (undocumented)
-    rootMargin?: RefTyped<string> | string;
-    // (undocumented)
-    threshold?: RefTyped<number | number[]> | number | number[];
+  // (undocumented)
+  root?: RefTyped<Element> | null;
+  // (undocumented)
+  rootMargin?: RefTyped<string> | string;
+  // (undocumented)
+  threshold?: RefTyped<number | number[]> | number | number[];
 }
 
 // @public (undocumented)
 export interface IntersectionObserverResult {
-    // (undocumented)
-    disconnect: () => void;
-    // (undocumented)
-    elements: Ref<IntersectionObserverEntry[]>;
-    // (undocumented)
-    readonly isIntersecting: Ref<boolean>;
-    // (undocumented)
-    observe: (el: RefTyped<Element>) => void;
-    // (undocumented)
-    supported: boolean;
-    // (undocumented)
-    unobserve: (el: RefTyped<Element>) => void;
+  // (undocumented)
+  disconnect: () => void;
+  // (undocumented)
+  elements: Ref<IntersectionObserverEntry[]>;
+  // (undocumented)
+  readonly isIntersecting: Ref<boolean>;
+  // (undocumented)
+  observe: (el: RefTyped<Element>) => void;
+  // (undocumented)
+  supported: boolean;
+  // (undocumented)
+  unobserve: (el: RefTyped<Element>) => void;
 }
 
 // @public (undocumented)
 export interface LocalStorageReturn<T> {
-    clear: () => void;
-    remove: () => void;
-    setSync: (sync: boolean) => void;
-    // (undocumented)
-    storage: Ref<T>;
-    // (undocumented)
-    supported: boolean;
+  clear: () => void;
+  remove: () => void;
+  setSync: (sync: boolean) => void;
+  // (undocumented)
+  storage: Ref<T>;
+  // (undocumented)
+  supported: boolean;
 }
 
 // @public (undocumented)
@@ -124,112 +131,144 @@ export type LocalStorageTyped<T extends object> = string;
 
 // @public (undocumented)
 export interface MouseMoveResult {
-    // (undocumented)
-    mouseX: Ref<number>;
-    // (undocumented)
-    mouseY: Ref<number>;
-    // (undocumented)
-    remove: RemoveEventFunction;
+  // (undocumented)
+  mouseX: Ref<number>;
+  // (undocumented)
+  mouseY: Ref<number>;
+  // (undocumented)
+  remove: RemoveEventFunction;
 }
 
 // @public (undocumented)
 export interface NetworkInformation {
-    // Warning: (ae-forgotten-export) The symbol "NetworkInformationEventMap" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    addEventListener<K extends keyof NetworkInformationEventMap>(type: K, listener: (this: NetworkInformation, ev: NetworkInformationEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-    // (undocumented)
-    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-    // (undocumented)
-    readonly downlink: number;
-    // (undocumented)
-    readonly downlinkMax: number;
-    // Warning: (ae-forgotten-export) The symbol "NetworkInformationEffectiveType" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    readonly effectiveType: NetworkInformationEffectiveType;
-    // (undocumented)
-    onchange: (this: NetworkInformation, ev: Event) => void;
-    // (undocumented)
-    removeEventListener<K extends keyof NetworkInformationEventMap>(type: K, listener: (this: NetworkInformation, ev: NetworkInformationEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-    // (undocumented)
-    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    // (undocumented)
-    readonly rtt: number;
-    // (undocumented)
-    readonly saveData: Boolean;
-    // Warning: (ae-forgotten-export) The symbol "NetworkInformationType" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    readonly type: NetworkInformationType;
+  // Warning: (ae-forgotten-export) The symbol "NetworkInformationEventMap" needs to be exported by the entry point index.d.ts
+  //
+  // (undocumented)
+  addEventListener<K extends keyof NetworkInformationEventMap>(
+    type: K,
+    listener: (
+      this: NetworkInformation,
+      ev: NetworkInformationEventMap[K]
+    ) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  // (undocumented)
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  // (undocumented)
+  readonly downlink: number;
+  // (undocumented)
+  readonly downlinkMax: number;
+  // Warning: (ae-forgotten-export) The symbol "NetworkInformationEffectiveType" needs to be exported by the entry point index.d.ts
+  //
+  // (undocumented)
+  readonly effectiveType: NetworkInformationEffectiveType;
+  // (undocumented)
+  onchange: (this: NetworkInformation, ev: Event) => void;
+  // (undocumented)
+  removeEventListener<K extends keyof NetworkInformationEventMap>(
+    type: K,
+    listener: (
+      this: NetworkInformation,
+      ev: NetworkInformationEventMap[K]
+    ) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+  // (undocumented)
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void;
+  // (undocumented)
+  readonly rtt: number;
+  // (undocumented)
+  readonly saveData: Boolean;
+  // Warning: (ae-forgotten-export) The symbol "NetworkInformationType" needs to be exported by the entry point index.d.ts
+  //
+  // (undocumented)
+  readonly type: NetworkInformationType;
 }
 
 // @public (undocumented)
-export function refShared<T = any>(defaultValue?: RefTyped<T>, id?: string): Ref<RefTyped<T>>;
+export function refShared<T = any>(
+  defaultValue?: RefTyped<T>,
+  id?: string
+): Ref<RefTyped<T>>;
 
 // @public (undocumented)
-export type RefSharedMessage<T = any> = RefSharedMessageInit | RefSharedMessageSync<T> | RefSharedMessageLeave | RefSharedMessageUpdate<T> | RefSharedMessageSetMind | RefSharedMessagePing | RefSharedMessagePong;
+export type RefSharedMessage<T = any> =
+  | RefSharedMessageInit
+  | RefSharedMessageSync<T>
+  | RefSharedMessageLeave
+  | RefSharedMessageUpdate<T>
+  | RefSharedMessageSetMind
+  | RefSharedMessagePing
+  | RefSharedMessagePong;
 
 // @public (undocumented)
 export type RefSharedMessageInit = {
-    type: RefSharedMessageType.INIT;
+  type: RefSharedMessageType.INIT;
 };
 
 // @public (undocumented)
 export type RefSharedMessageLeave = {
-    type: RefSharedMessageType.LEAVE;
-    id: number;
+  type: RefSharedMessageType.LEAVE;
+  id: number;
 };
 
 // @public (undocumented)
 export type RefSharedMessagePing = {
-    type: RefSharedMessageType.PING;
-    id: number;
+  type: RefSharedMessageType.PING;
+  id: number;
 };
 
 // @public (undocumented)
 export type RefSharedMessagePong = {
-    type: RefSharedMessageType.PONG;
-    id: number;
+  type: RefSharedMessageType.PONG;
+  id: number;
 };
 
 // @public (undocumented)
 export type RefSharedMessageSetMind = {
-    type: RefSharedMessageType.SET_MIND;
-    mind: SharedRefMind;
-    id: number;
+  type: RefSharedMessageType.SET_MIND;
+  mind: SharedRefMind;
+  id: number;
 };
 
 // @public (undocumented)
 export type RefSharedMessageSync<T> = {
-    type: RefSharedMessageType.SYNC;
-    value: T;
-    mind: SharedRefMind;
+  type: RefSharedMessageType.SYNC;
+  value: T;
+  mind: SharedRefMind;
 };
 
 // @public (undocumented)
 export const enum RefSharedMessageType {
-    // (undocumented)
-    INIT = 0,
-    // (undocumented)
-    LEAVE = 4,
-    // (undocumented)
-    PING = 5,
-    // (undocumented)
-    PONG = 6,
-    // (undocumented)
-    SET_MIND = 3,
-    // (undocumented)
-    SYNC = 1,
-    // (undocumented)
-    UPDATE = 2
+  // (undocumented)
+  INIT = 0,
+  // (undocumented)
+  LEAVE = 4,
+  // (undocumented)
+  PING = 5,
+  // (undocumented)
+  PONG = 6,
+  // (undocumented)
+  SET_MIND = 3,
+  // (undocumented)
+  SYNC = 1,
+  // (undocumented)
+  UPDATE = 2
 }
 
 // @public (undocumented)
 export type RefSharedMessageUpdate<T> = {
-    type: RefSharedMessageType.UPDATE;
-    value: T;
-    mind: SharedRefMind;
+  type: RefSharedMessageType.UPDATE;
+  value: T;
+  mind: SharedRefMind;
 };
 
 // @public (undocumented)
@@ -237,45 +276,53 @@ export type RemoveEventFunction = () => void;
 
 // @public (undocumented)
 export interface ResizeResult {
-    // (undocumented)
-    height: Ref<number>;
-    // (undocumented)
-    remove: RemoveEventFunction;
-    // (undocumented)
-    width: Ref<number>;
+  // (undocumented)
+  height: Ref<number>;
+  // (undocumented)
+  remove: RemoveEventFunction;
+  // (undocumented)
+  width: Ref<number>;
 }
 
 // @public (undocumented)
 export interface ScrollResult {
-    // (undocumented)
-    remove: RemoveEventFunction;
-    // (undocumented)
-    scrollLeft: Ref<number>;
-    // (undocumented)
-    scrollLeftTo: (x: number) => void;
-    // (undocumented)
-    scrollTo: Element["scrollTo"];
-    // (undocumented)
-    scrollTop: Ref<number>;
-    // (undocumented)
-    scrollTopTo: (y: number) => void;
+  // (undocumented)
+  remove: RemoveEventFunction;
+  // (undocumented)
+  scrollLeft: Ref<number>;
+  // (undocumented)
+  scrollLeftTo: (x: number) => void;
+  // (undocumented)
+  scrollTo: Element["scrollTo"];
+  // (undocumented)
+  scrollTop: Ref<number>;
+  // (undocumented)
+  scrollTopTo: (y: number) => void;
 }
 
 // @public (undocumented)
-export function setBreakpointTailwindCSS<T extends TailwindConfigEmpty>(tailwindConfig: T): BreakpointReturn<ExtractTailwindScreens<T>>;
+export function setBreakpointTailwindCSS<T extends TailwindConfigEmpty>(
+  tailwindConfig: T
+): BreakpointReturn<ExtractTailwindScreens<T>>;
 
 // @public (undocumented)
-export function setBreakpointTailwindCSS<T extends BreakpointObject>(breakpoints: T): BreakpointReturn<T>;
+export function setBreakpointTailwindCSS<T extends BreakpointObject>(
+  breakpoints: T
+): BreakpointReturn<T>;
 
 // @public
-export function setCssVariableFor(element: HTMLElement, name: string, value: CssVariable): void;
+export function setCssVariableFor(
+  element: HTMLElement,
+  name: string,
+  value: CssVariable
+): void;
 
 // @public (undocumented)
 export const enum SharedRefMind {
-    // (undocumented)
-    HIVE = 0,
-    // (undocumented)
-    MASTER = 1
+  // (undocumented)
+  HIVE = 0,
+  // (undocumented)
+  MASTER = 1
 }
 
 // @public (undocumented)
@@ -283,14 +330,16 @@ export function storageAvailable(storage?: Storage): boolean;
 
 // @public (undocumented)
 export interface StorageSerializer<T = any> {
-    // (undocumented)
-    parse(data: string): T;
-    // (undocumented)
-    stringify(item: T): string;
+  // (undocumented)
+  parse(data: string): T;
+  // (undocumented)
+  stringify(item: T): string;
 }
 
 // @public (undocumented)
-export function useBreakpoint<T extends BreakpointObject>(breakpoints: Record<keyof T, number | string>): BreakpointReturn<T>;
+export function useBreakpoint<T extends BreakpointObject>(
+  breakpoints: Record<keyof T, number | string>
+): BreakpointReturn<T>;
 
 // Warning: (ae-forgotten-export) The symbol "ChromeBreakpoint" needs to be exported by the entry point index.d.ts
 //
@@ -298,118 +347,198 @@ export function useBreakpoint<T extends BreakpointObject>(breakpoints: Record<ke
 export function useBreakpointChrome(): BreakpointReturn<ChromeBreakpoint>;
 
 // @public (undocumented)
-export function useBreakpointTailwindCSS<T extends TailwindConfigEmpty>(tailwindConfig: T): BreakpointReturn<ExtractTailwindScreens<T>>;
+export function useBreakpointTailwindCSS<T extends TailwindConfigEmpty>(
+  tailwindConfig: T
+): BreakpointReturn<ExtractTailwindScreens<T>>;
 
 // @public (undocumented)
-export function useBreakpointTailwindCSS<T extends TailwindConfigEmpty>(): BreakpointReturn<ExtractTailwindScreens<T>>;
+export function useBreakpointTailwindCSS<
+  T extends TailwindConfigEmpty
+>(): BreakpointReturn<ExtractTailwindScreens<T>>;
 
 // @public (undocumented)
-export function useBreakpointTailwindCSS(): BreakpointReturn<DefaultTailwindBreakpoints>;
+export function useBreakpointTailwindCSS(): BreakpointReturn<
+  DefaultTailwindBreakpoints
+>;
 
 // @public (undocumented)
-export function useBreakpointTailwindCSS<T extends BreakpointObject>(): BreakpointReturn<T>;
+export function useBreakpointTailwindCSS<
+  T extends BreakpointObject
+>(): BreakpointReturn<T>;
 
 // @public (undocumented)
-export function useBroadcastChannel<T = any>(name: string, onBeforeClose?: Function): {
-    supported: boolean;
-    data: import("@vue/composition-api").Ref<T | null>;
-    messageEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
-    errorEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
-    errored: import("@vue/composition-api").Ref<boolean>;
-    isClosed: import("@vue/composition-api").Ref<boolean>;
-    send: (data: T) => void;
-    close: Function;
-    addListener: (cb: (ev: BroadcastMessageEvent<T>) => void, options?: boolean | AddEventListenerOptions | undefined) => void;
+export function useBroadcastChannel<T = any>(
+  name: string,
+  onBeforeClose?: Function
+): {
+  supported: boolean;
+  data: import("@vue/composition-api").Ref<T | null>;
+  messageEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
+  errorEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
+  errored: import("@vue/composition-api").Ref<boolean>;
+  isClosed: import("@vue/composition-api").Ref<boolean>;
+  send: (data: T) => void;
+  close: Function;
+  addListener: (
+    cb: (ev: BroadcastMessageEvent<T>) => void,
+    options?: boolean | AddEventListenerOptions | undefined
+  ) => void;
 };
 
 // @public
 export type UseCssVariables<T> = CssVariableObject<T> & CssVariablesMethods;
 
 // @public (undocumented)
-export function useCssVariables<T extends CssVariableConfigurationObject>(variables: T): UseCssVariables<T>;
+export function useCssVariables<T extends CssVariableConfigurationObject>(
+  variables: T
+): UseCssVariables<T>;
 
 // @public (undocumented)
-export function useCssVariables<T extends CssVariableConfigurationObject>(variables: T, options?: MutationObserverInit): UseCssVariables<T>;
+export function useCssVariables<T extends CssVariableConfigurationObject>(
+  variables: T,
+  options?: MutationObserverInit
+): UseCssVariables<T>;
 
 // @public (undocumented)
-export function useCssVariables<T extends CssVariableConfigurationObject>(variables: T, element: RefTyped<HTMLElement>, options?: MutationObserverInit): UseCssVariables<T>;
+export function useCssVariables<T extends CssVariableConfigurationObject>(
+  variables: T,
+  element: RefTyped<HTMLElement>,
+  options?: MutationObserverInit
+): UseCssVariables<T>;
 
 // @public (undocumented)
-export function useEvent<T extends {
-    addEventListener: (name: string, listener: EventListenerOrEventListenerObject) => any;
+export function useEvent<
+  T extends {
+    addEventListener: (
+      name: string,
+      listener: EventListenerOrEventListenerObject
+    ) => any;
     removeEventListener: Function;
-}, M, K extends keyof M>(el: RefTyped<T>, name: K, listener: (this: T, ev: M[K]) => any): RemoveEventFunction;
-
-// @public (undocumented)
-export function useEvent<T extends {
-    addEventListener: (name: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => any;
+  },
+  M,
+  K extends keyof M
+>(
+  el: RefTyped<T>,
+  name: K,
+  listener: (this: T, ev: M[K]) => any
+): RemoveEventFunction;
+
+// @public (undocumented)
+export function useEvent<
+  T extends {
+    addEventListener: (
+      name: string,
+      listener: EventListenerOrEventListenerObject,
+      options?: boolean | AddEventListenerOptions
+    ) => any;
     removeEventListener: Function;
-}, M, K extends keyof M>(el: RefTyped<T>, name: K, listener: (this: T, ev: M[K]) => any, options?: boolean | AddEventListenerOptions): RemoveEventFunction;
-
-// @public (undocumented)
-export function useEvent<K extends keyof WindowEventMap>(el: RefTyped<Window>, name: K, listener: (this: Document, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): RemoveEventFunction;
-
-// @public (undocumented)
-export function useEvent<K extends keyof DocumentEventMap>(el: RefTyped<Element>, name: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): RemoveEventFunction;
-
-// @public (undocumented)
-export function useFetch<T = any>(options?: UseFetchOptions & Partial<RequestInfo>, requestInit?: RequestInit): {
-    cancel: (message?: string | undefined) => void;
-    isCancelled: import("@vue/composition-api").Ref<boolean>;
-    cancelledMessage: import("@vue/composition-api").Ref<string | undefined>;
-    text: import("@vue/composition-api").Ref<string>;
-    blob: import("@vue/composition-api").Ref<Blob | undefined>;
-    json: import("@vue/composition-api").Ref<T | null>;
-    jsonError: import("@vue/composition-api").Ref<any>;
-    status: Readonly<import("@vue/composition-api").Ref<number | null>>;
-    statusText: Readonly<import("@vue/composition-api").Ref<string | null>>;
-    exec: (request: RequestInfo, init?: RequestInit | undefined) => Promise<Response | undefined>;
-    promise: import("@vue/composition-api").Ref<Promise<Response> | undefined>;
-    result: import("@vue/composition-api").Ref<Response | null>;
-    loading: import("@vue/composition-api").Ref<boolean>;
-    error: import("@vue/composition-api").Ref<any>;
+  },
+  M,
+  K extends keyof M
+>(
+  el: RefTyped<T>,
+  name: K,
+  listener: (this: T, ev: M[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): RemoveEventFunction;
+
+// @public (undocumented)
+export function useEvent<K extends keyof WindowEventMap>(
+  el: RefTyped<Window>,
+  name: K,
+  listener: (this: Document, ev: WindowEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): RemoveEventFunction;
+
+// @public (undocumented)
+export function useEvent<K extends keyof DocumentEventMap>(
+  el: RefTyped<Element>,
+  name: K,
+  listener: (this: Document, ev: DocumentEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): RemoveEventFunction;
+
+// @public (undocumented)
+export function useFetch<T = any>(
+  options?: UseFetchOptions & Partial<RequestInfo>,
+  requestInit?: RequestInit
+): {
+  cancel: (message?: string | undefined) => void;
+  isCancelled: import("@vue/composition-api").Ref<boolean>;
+  cancelledMessage: import("@vue/composition-api").Ref<string | undefined>;
+  text: import("@vue/composition-api").Ref<string>;
+  blob: import("@vue/composition-api").Ref<Blob | undefined>;
+  json: import("@vue/composition-api").Ref<T | null>;
+  jsonError: import("@vue/composition-api").Ref<any>;
+  status: Readonly<import("@vue/composition-api").Ref<number | null>>;
+  statusText: Readonly<import("@vue/composition-api").Ref<string | null>>;
+  exec: (
+    request: RequestInfo,
+    init?: RequestInit | undefined
+  ) => Promise<Response | undefined>;
+  promise: import("@vue/composition-api").Ref<Promise<Response> | undefined>;
+  result: import("@vue/composition-api").Ref<Response | null>;
+  loading: import("@vue/composition-api").Ref<boolean>;
+  error: import("@vue/composition-api").Ref<any>;
 };
 
 // @public (undocumented)
 export interface UseFetchOptions {
-    isJson?: boolean;
-    parseImmediate?: boolean;
+  isJson?: boolean;
+  parseImmediate?: boolean;
 }
 
 // @public (undocumented)
-export function useGeolocation(options?: PositionOptions & GeolocationOptions): {
-    supported: boolean;
-    refresh: () => void;
-    error: import("@vue/composition-api").Ref<PositionError | null>;
-    timestamp: import("@vue/composition-api").Ref<number | null>;
-    coords: import("@vue/composition-api").Ref<Coordinates | null>;
-    highAccuracy: import("@vue/composition-api").Ref<boolean>;
+export function useGeolocation(
+  options?: PositionOptions & GeolocationOptions
+): {
+  supported: boolean;
+  refresh: () => void;
+  error: import("@vue/composition-api").Ref<PositionError | null>;
+  timestamp: import("@vue/composition-api").Ref<number | null>;
+  coords: import("@vue/composition-api").Ref<Coordinates | null>;
+  highAccuracy: import("@vue/composition-api").Ref<boolean>;
 };
 
 // @public (undocumented)
-export function useIntersectionObserver(el: RefElement, options?: RefTyped<IntersectionObserverOptions>): IntersectionObserverResult;
+export function useIntersectionObserver(
+  el: RefElement,
+  options?: RefTyped<IntersectionObserverOptions>
+): IntersectionObserverResult;
 
 // @public (undocumented)
-export function useIntersectionObserver(options: RefTyped<IntersectionObserverOptions>): IntersectionObserverResult;
+export function useIntersectionObserver(
+  options: RefTyped<IntersectionObserverOptions>
+): IntersectionObserverResult;
 
 // @public (undocumented)
 export function useLanguage(): {
-    language: Ref<String>;
-    languages: Ref<readonly String[]>;
+  language: Ref<String>;
+  languages: Ref<readonly String[]>;
 };
 
 // @public (undocumented)
-export function useLocalStorage(key: string, defaultValue?: RefTyped<string>, sync?: boolean): LocalStorageReturn<string>;
+export function useLocalStorage(
+  key: string,
+  defaultValue?: RefTyped<string>,
+  sync?: boolean
+): LocalStorageReturn<string>;
 
 // @public (undocumented)
-export function useLocalStorage<T extends object = any>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>, sync?: boolean): LocalStorageReturn<T>;
+export function useLocalStorage<T extends object = any>(
+  key: LocalStorageTyped<T> | string,
+  defaultValue?: RefTyped<T>,
+  sync?: boolean
+): LocalStorageReturn<T>;
 
 // @public (undocumented)
-export function useMatchMedia(query: string): {
-    supported: boolean;
-    mediaQueryList: Ref<MediaQueryList>;
-    matches: Ref<boolean>;
-    remove: () => void;
+export function useMatchMedia(
+  query: string
+): {
+  supported: boolean;
+  mediaQueryList: Ref<MediaQueryList>;
+  matches: Ref<boolean>;
+  remove: () => void;
 };
 
 // Warning: (ae-forgotten-export) The symbol "NetworkInformationReturn" needs to be exported by the entry point index.d.ts
@@ -419,33 +548,52 @@ export function useNetworkInformation(): NetworkInformationReturn;
 
 // @public (undocumented)
 export function useOnline(): {
-    supported: boolean;
-    online: Ref<boolean>;
+  supported: boolean;
+  online: Ref<boolean>;
 };
 
 // @public (undocumented)
-export function useOnMouseMove(el: RefTyped<Window>, wait: number): MouseMoveResult;
+export function useOnMouseMove(
+  el: RefTyped<Window>,
+  wait: number
+): MouseMoveResult;
 
 // @public (undocumented)
-export function useOnMouseMove(el: RefTyped<Window>, options?: boolean | AddEventListenerOptions, wait?: number): MouseMoveResult;
+export function useOnMouseMove(
+  el: RefTyped<Window>,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): MouseMoveResult;
 
 // @public (undocumented)
 export function useOnMouseMove(el: RefElement, wait: number): MouseMoveResult;
 
 // @public (undocumented)
-export function useOnMouseMove(el: RefElement, options?: boolean | AddEventListenerOptions, wait?: number): MouseMoveResult;
+export function useOnMouseMove(
+  el: RefElement,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): MouseMoveResult;
 
 // @public (undocumented)
 export function useOnResize(el: RefTyped<Window>, wait: number): ResizeResult;
 
 // @public (undocumented)
-export function useOnResize(el: RefTyped<Window>, options?: boolean | AddEventListenerOptions, wait?: number): ResizeResult;
+export function useOnResize(
+  el: RefTyped<Window>,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): ResizeResult;
 
 // @public (undocumented)
 export function useOnResize(el: RefElement, wait: number): ResizeResult;
 
 // @public (undocumented)
-export function useOnResize(el: RefElement, options?: boolean | AddEventListenerOptions, wait?: number): ResizeResult;
+export function useOnResize(
+  el: RefElement,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): ResizeResult;
 
 // @public (undocumented)
 export function useOnScroll(): ScrollResult;
@@ -454,99 +602,150 @@ export function useOnScroll(): ScrollResult;
 export function useOnScroll(wait: number): ScrollResult;
 
 // @public (undocumented)
-export function useOnScroll(options: boolean | AddEventListenerOptions, wait?: number): ScrollResult;
+export function useOnScroll(
+  options: boolean | AddEventListenerOptions,
+  wait?: number
+): ScrollResult;
 
 // @public (undocumented)
 export function useOnScroll(el: RefTyped<Window>, wait: number): ScrollResult;
 
 // @public (undocumented)
-export function useOnScroll(el: RefTyped<Window>, options?: boolean | AddEventListenerOptions, wait?: number): ScrollResult;
+export function useOnScroll(
+  el: RefTyped<Window>,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): ScrollResult;
 
 // @public (undocumented)
 export function useOnScroll(el: RefElement, wait: number): ScrollResult;
 
 // @public (undocumented)
-export function useOnScroll(el: RefElement, options?: boolean | AddEventListenerOptions, wait?: number): ScrollResult;
+export function useOnScroll(
+  el: RefElement,
+  options?: boolean | AddEventListenerOptions,
+  wait?: number
+): ScrollResult;
 
 // @public (undocumented)
 export function usePageVisibility(): {
-    visibility: Ref<VisibilityState>;
-    hidden: Ref<boolean>;
+  visibility: Ref<VisibilityState>;
+  hidden: Ref<boolean>;
 };
 
 // @public (undocumented)
-export function useSessionStorage(key: string, defaultValue?: RefTyped<string>, sync?: boolean): LocalStorageReturn<string>;
-
-// @public (undocumented)
-export function useSessionStorage<T extends object = object>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>, sync?: boolean): LocalStorageReturn<T>;
-
-// @public (undocumented)
-export function useSharedRef<T = any>(name: string, defaultValue?: T): {
-    supported: boolean;
-    id: number;
-    data: Ref<T>;
-    master: Ref<boolean>;
-    mind: Ref<SharedRefMind>;
-    editable: Readonly<Ref<boolean>>;
-    targets: Ref<number[]>;
-    ping: () => void;
-    setMind: (t: SharedRefMind) => void;
-    addListener: (cb: (ev: BroadcastMessageEvent<RefSharedMessage<T>>) => void, options?: boolean | AddEventListenerOptions | undefined) => void;
+export function useSessionStorage(
+  key: string,
+  defaultValue?: RefTyped<string>,
+  sync?: boolean
+): LocalStorageReturn<string>;
+
+// @public (undocumented)
+export function useSessionStorage<T extends object = object>(
+  key: LocalStorageTyped<T> | string,
+  defaultValue?: RefTyped<T>,
+  sync?: boolean
+): LocalStorageReturn<T>;
+
+// @public (undocumented)
+export function useSharedRef<T = any>(
+  name: string,
+  defaultValue?: T
+): {
+  supported: boolean;
+  id: number;
+  data: Ref<T>;
+  master: Ref<boolean>;
+  mind: Ref<SharedRefMind>;
+  editable: Readonly<Ref<boolean>>;
+  targets: Ref<number[]>;
+  ping: () => void;
+  setMind: (t: SharedRefMind) => void;
+  addListener: (
+    cb: (ev: BroadcastMessageEvent<RefSharedMessage<T>>) => void,
+    options?: boolean | AddEventListenerOptions | undefined
+  ) => void;
 };
 
 // @public (undocumented)
-export function useStorage(key: string, defaultValue?: RefTyped<string>, sync?: boolean): LocalStorageReturn<string>;
-
-// @public (undocumented)
-export function useStorage<T extends object = any>(key: LocalStorageTyped<T> | string, defaultValue?: RefTyped<T>, sync?: boolean): LocalStorageReturn<T>;
-
-// @public (undocumented)
-export function useWebSocket(url: string, protocols?: string | string[]): {
-    supported: boolean;
-    ws: WebSocket | null;
-    send: (data: string | ArrayBuffer | SharedArrayBuffer | Blob | ArrayBufferView) => void;
-    close: (code?: number | undefined, reason?: string | undefined) => void;
-    messageEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
-    errorEvent: import("@vue/composition-api").Ref<Event | undefined>;
-    data: import("@vue/composition-api").Ref<any>;
-    isOpen: import("@vue/composition-api").Ref<boolean>;
-    isClosed: import("@vue/composition-api").Ref<boolean>;
-    errored: import("@vue/composition-api").Ref<boolean>;
+export function useStorage(
+  key: string,
+  defaultValue?: RefTyped<string>,
+  sync?: boolean
+): LocalStorageReturn<string>;
+
+// @public (undocumented)
+export function useStorage<T extends object = any>(
+  key: LocalStorageTyped<T> | string,
+  defaultValue?: RefTyped<T>,
+  sync?: boolean
+): LocalStorageReturn<T>;
+
+// @public (undocumented)
+export function useWebSocket(
+  url: string,
+  protocols?: string | string[]
+): {
+  supported: boolean;
+  ws: WebSocket | null;
+  send: (
+    data: string | ArrayBuffer | SharedArrayBuffer | Blob | ArrayBufferView
+  ) => void;
+  close: (code?: number | undefined, reason?: string | undefined) => void;
+  messageEvent: import("@vue/composition-api").Ref<MessageEvent | null>;
+  errorEvent: import("@vue/composition-api").Ref<Event | undefined>;
+  data: import("@vue/composition-api").Ref<any>;
+  isOpen: import("@vue/composition-api").Ref<boolean>;
+  isClosed: import("@vue/composition-api").Ref<boolean>;
+  errored: import("@vue/composition-api").Ref<boolean>;
 };
 
 // Warning: (ae-forgotten-export) The symbol "WebStorageType" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export function useWebStorage(type: WebStorageType, serializer?: StorageSerializer, ms?: number): {
-    supported: boolean;
-    quotaError: Ref<boolean>;
-    store: WebStorage;
-    remove: () => boolean;
+export function useWebStorage(
+  type: WebStorageType,
+  serializer?: StorageSerializer,
+  ms?: number
+): {
+  supported: boolean;
+  quotaError: Ref<boolean>;
+  store: WebStorage;
+  remove: () => boolean;
+};
+
+// @public (undocumented)
+export function useWorker<T extends Promise<any>, TArgs extends Array<any>>(
+  fn: (...args: TArgs) => T
+): {
+  exec: (...args: TArgs) => Promise<unknown>;
+  promise: import("@vue/composition-api").Ref<Promise<unknown> | undefined>;
+  result: import("@vue/composition-api").Ref<unknown>;
+  loading: import("@vue/composition-api").Ref<boolean>;
+  error: import("@vue/composition-api").Ref<any>;
 };
 
 // @public (undocumented)
 export interface WebStorage {
-    // (undocumented)
-    $quotaError: Ref<boolean>;
-    // (undocumented)
-    $refMap: Map<string, Ref<any>>;
-    // (undocumented)
-    $syncKeys: Record<string, boolean>;
-    // (undocumented)
-    $watchHandlers: Map<string, Function>;
-    clear(): void;
-    getItem<T = any>(key: string): Ref<T> | null;
-    key(index: number): string | null;
-    readonly length: number;
-    removeItem(key: string): void;
-    setItem<T>(key: string, value: T): Ref<T>;
-    // (undocumented)
-    setSync(key: string, sync: boolean): void;
-    // (undocumented)
-    updateItem(key: string, value: string): void;
+  // (undocumented)
+  $quotaError: Ref<boolean>;
+  // (undocumented)
+  $refMap: Map<string, Ref<any>>;
+  // (undocumented)
+  $syncKeys: Record<string, boolean>;
+  // (undocumented)
+  $watchHandlers: Map<string, Function>;
+  clear(): void;
+  getItem<T = any>(key: string): Ref<T> | null;
+  key(index: number): string | null;
+  readonly length: number;
+  removeItem(key: string): void;
+  setItem<T>(key: string, value: T): Ref<T>;
+  // (undocumented)
+  setSync(key: string, sync: boolean): void;
+  // (undocumented)
+  updateItem(key: string, value: string): void;
 }
 
-
 // (No @packageDocumentation comment for this package)
-
 ```
diff --git a/examples/vue-composable-example/src/components/HelloWorld.vue b/examples/vue-composable-example/src/components/HelloWorld.vue
index 41bc71e55..77ac4e86a 100644
--- a/examples/vue-composable-example/src/components/HelloWorld.vue
+++ b/examples/vue-composable-example/src/components/HelloWorld.vue
@@ -2,20 +2,63 @@
   <div class="hello">
     <h1>Vue composable examples</h1>
     <h3>Select one above</h3>
+
+    <p>loading: {{ loading }}</p>
+
+    <button @click="exec" :disabled="loading">Click me</button>
   </div>
 </template>
 
 <script>
-export default {
+import { useWorker } from "vue-composable";
+import { defineComponent } from "@vue/composition-api";
+
+const bubleSort = 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: "HelloWorld",
   props: {
     msg: String
   },
 
   setup() {
-    return {};
+    const numbers = [...Array(50000)].map(() =>
+      Math.floor(Math.random() * 1000000)
+    );
+
+    const work = useWorker(bubleSort);
+
+    const exec = async () => {
+      console.log("starting");
+      const r = await work.exec(numbers);
+      console.log("ended");
+      console.log(r);
+    };
+
+    return {
+      ...work,
+      exec
+    };
   }
-};
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/packages/web/src/web/index.ts b/packages/web/src/web/index.ts
index 17482bf13..92abec557 100644
--- a/packages/web/src/web/index.ts
+++ b/packages/web/src/web/index.ts
@@ -8,3 +8,4 @@ export * from "./language";
 export * from "./broadcastChannel";
 export * from "./geolocation";
 export * from "./cssVariables";
+export * from "./webWorker";
diff --git a/packages/web/src/web/webWorker/_runner.js b/packages/web/src/web/webWorker/_runner.js
new file mode 100644
index 000000000..1ea3a3b4e
--- /dev/null
+++ b/packages/web/src/web/webWorker/_runner.js
@@ -0,0 +1,14 @@
+function runner(fn) {
+  return function(e) {
+    var args = e.data || [];
+    return Promise.resolve(fn(...args))
+      .then(function(x) {
+        postMessage([true, x]);
+      })
+      .catch(function(x) {
+        postMessage([false, x]);
+      });
+  };
+}
+
+export default runner;
diff --git a/packages/web/src/web/webWorker/index.ts b/packages/web/src/web/webWorker/index.ts
new file mode 100644
index 000000000..f38c6f8e2
--- /dev/null
+++ b/packages/web/src/web/webWorker/index.ts
@@ -0,0 +1 @@
+export * from "./webWorker";
diff --git a/packages/web/src/web/webWorker/webWorker.ts b/packages/web/src/web/webWorker/webWorker.ts
new file mode 100644
index 000000000..ed908a7fe
--- /dev/null
+++ b/packages/web/src/web/webWorker/webWorker.ts
@@ -0,0 +1,83 @@
+import { usePromise } from "@vue-composable/core";
+// import runner from "./_runner.js";
+
+function createBlobUrl(fn: Function, dependencies: string[]) {
+  // const scripts =
+  //   dependencies.length > 0 ? `importScripts("${dependencies.join(",")}")` : "";
+
+  // @ts-check
+  // const r = (func: Function) => (e: MessageEvent) => {
+  //   const args = e.data || [];
+
+  //   return Promise.resolve(func(...args))
+  //     .then(x => {
+  //       // @ts-ignore
+  //       postMessage([true, x]);
+  //     })
+  //     .catch(x => {
+  //       // @ts-ignore
+  //       postMessage([false, e]);
+  //     });
+  // };
+
+  const r = (f: Function) => (e: MessageEvent) => {
+    const args = e.data || [];
+
+    return (
+      Promise.resolve(f(...args))
+        // @ts-ignore
+        .then(x => postMessage([true, x]))
+        // @ts-ignore
+        .catch(x => postMessage([false, x]))
+    );
+  };
+
+  const blobScript = ["self.onmessage=", `(${r.toString()})(${fn.toString()})`];
+
+  const blob = new Blob(blobScript, { type: "text/javascript" });
+  return URL.createObjectURL(blob);
+}
+
+export function useWorker<T extends Promise<any>, TArgs extends Array<any>>(
+  fn: (...args: TArgs) => T
+) {
+  const promise = usePromise(
+    (...args: TArgs) =>
+      new Promise((res, rej) => {
+        const blobUrl = createBlobUrl(fn, []);
+
+        const worker = new Worker(blobUrl);
+
+        let timeout = -1;
+
+        const terminate = () => {
+          worker.terminate();
+          clearTimeout(timeout);
+        };
+
+        worker.onmessage = e => {
+          if (e.data[0]) {
+            res(e.data[1]);
+          } else {
+            rej(e.data[1]);
+          }
+          terminate();
+        };
+
+        worker.onerror = e => {
+          rej(e);
+          terminate();
+        };
+
+        worker.postMessage([...args]);
+      }),
+    {
+      lazy: true,
+      throwException: true
+    }
+  );
+
+  return {
+    ...promise
+  };
+}
diff --git a/tsconfig.json b/tsconfig.json
index 41dc34626..78c9977f5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
-    "allowJs": false,
+    "allowJs": true,
     "noUnusedLocals": true,
     "strictNullChecks": true,
     "noImplicitAny": true,

From 2c9ac7ade5da7c37e786730f4c0ee64d5071a948 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Mon, 30 Mar 2020 07:59:57 +0100
Subject: [PATCH 02/11] Allow cancelling with cancellable promises

---
 docs/api/web.api.md                           | 18 +++-
 .../src/components/HelloWorld.vue             | 82 ++++++++++++++--
 .../src/components/TodoList.vue               |  2 +-
 .../core/src/promise/cancellablePromise.ts    |  2 +-
 packages/web/src/web/index.ts                 |  2 +-
 packages/web/src/web/webWorker/_runner.js     | 14 ---
 packages/web/src/web/webWorker/index.ts       |  1 -
 packages/web/src/web/webWorker/webWorker.ts   | 83 ----------------
 packages/web/src/web/webWorkerFunction.ts     | 94 +++++++++++++++++++
 9 files changed, 188 insertions(+), 110 deletions(-)
 delete mode 100644 packages/web/src/web/webWorker/_runner.js
 delete mode 100644 packages/web/src/web/webWorker/index.ts
 delete mode 100644 packages/web/src/web/webWorker/webWorker.ts
 create mode 100644 packages/web/src/web/webWorkerFunction.ts

diff --git a/docs/api/web.api.md b/docs/api/web.api.md
index dc54ef933..21232689c 100644
--- a/docs/api/web.api.md
+++ b/docs/api/web.api.md
@@ -715,14 +715,20 @@ export function useWebStorage(
 };
 
 // @public (undocumented)
-export function useWorker<T extends Promise<any>, TArgs extends Array<any>>(
-  fn: (...args: TArgs) => T
+export function useWebWorkerFunction<
+  T extends Promise<any>,
+  TArgs extends Array<any>
+>(
+  fn: (...args: TArgs) => T,
+  options?: WebWorkerFunctionOptions
 ): {
   exec: (...args: TArgs) => Promise<unknown>;
   promise: import("@vue/composition-api").Ref<Promise<unknown> | undefined>;
   result: import("@vue/composition-api").Ref<unknown>;
   loading: import("@vue/composition-api").Ref<boolean>;
   error: import("@vue/composition-api").Ref<any>;
+  cancel: (result?: any) => void;
+  cancelled: import("@vue/composition-api").Ref<boolean>;
 };
 
 // @public (undocumented)
@@ -747,5 +753,13 @@ export interface WebStorage {
   updateItem(key: string, value: string): void;
 }
 
+// @public (undocumented)
+export interface WebWorkerFunctionOptions {
+  // (undocumented)
+  dependencies?: RefTyped<string[]>;
+  // (undocumented)
+  timeout?: RefTyped<number>;
+}
+
 // (No @packageDocumentation comment for this package)
 ```
diff --git a/examples/vue-composable-example/src/components/HelloWorld.vue b/examples/vue-composable-example/src/components/HelloWorld.vue
index 77ac4e86a..9122f7820 100644
--- a/examples/vue-composable-example/src/components/HelloWorld.vue
+++ b/examples/vue-composable-example/src/components/HelloWorld.vue
@@ -2,16 +2,36 @@
   <div class="hello">
     <h1>Vue composable examples</h1>
     <h3>Select one above</h3>
-
+    <input v-model.number="timeout" />
+    <div>
+      <svg
+        :style="{ transform: `rotate(${rotationDegrees}deg)` }"
+        width="50"
+        height="50"
+        viewBox="0 0 10 10"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid"
+        fill="none"
+      >
+        <g stroke-width="2">
+          <path d="M10 3H3v4h7" stroke="#35495E" />
+          <path d="M10 1H1v8h9" stroke="#41B883" />
+        </g>
+      </svg>
+    </div>
     <p>loading: {{ loading }}</p>
 
-    <button @click="exec" :disabled="loading">Click me</button>
+    <button @click="exec">Click me</button>
+    <button @click="terminate" :disabled="!loading">Cancel</button>
+    <button @click="execNonWorker" :disabled="loading">Non worker</button>
+    <button @click="onWorkerSortClick">Date</button>
   </div>
 </template>
 
 <script>
-import { useWorker } from "vue-composable";
-import { defineComponent } from "@vue/composition-api";
+import { useWebWorkerFunction, useDateNow } from "vue-composable";
+import { defineComponent, computed, ref } from "@vue/composition-api";
+import { promises } from "fs";
 
 const bubleSort = input => {
   let swap;
@@ -33,6 +53,15 @@ const bubleSort = input => {
   return sortedArray;
 };
 
+const sortDates = dates => {
+  // eslint-disable-next-line no-undef
+  return dates.sort(dateFns.compareAsc);
+};
+
+const dates = [...Array(100000)].map(
+  () => new Date(1995, Math.floor(Math.random() * 2000), 6, 2)
+);
+
 export default defineComponent({
   name: "HelloWorld",
   props: {
@@ -40,22 +69,61 @@ export default defineComponent({
   },
 
   setup() {
+    const { now } = useDateNow({
+      refreshMs: 1
+    });
+
+    const timeout = ref(500);
+    const rotationDegrees = computed(() => (now.value / 10) % 360);
+
     const numbers = [...Array(50000)].map(() =>
       Math.floor(Math.random() * 1000000)
     );
 
-    const work = useWorker(bubleSort);
+    const { exec: sortWorker } = useWebWorkerFunction(sortDates, {
+      dependencies: [
+        "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"
+      ],
+      timeout
+    });
+
+    const work = useWebWorkerFunction(bubleSort, { timeout });
 
     const exec = async () => {
       console.log("starting");
-      const r = await work.exec(numbers);
+      const r = await work.exec(numbers).catch(x => x);
       console.log("ended");
       console.log(r);
     };
 
+    const execNonWorker = () => {
+      console.log("starting");
+      const r = bubleSort(numbers);
+      console.log("ended");
+      console.log(r);
+    };
+
+    const onWorkerSortClick = () => {
+      sortWorker(dates).then(result => {
+        console.log("Buble Sort useWorker()", result);
+        // addToast("Finished: Sort using useWorker.", { appearance: "success" });
+      });
+    };
+
+    const terminate = () => {
+      debugger;
+
+      work.cancel();
+    };
+
     return {
       ...work,
-      exec
+      exec,
+      rotationDegrees,
+      execNonWorker,
+      onWorkerSortClick,
+      terminate,
+      timeout
     };
   }
 });
diff --git a/examples/vue-composable-example/src/components/TodoList.vue b/examples/vue-composable-example/src/components/TodoList.vue
index 8eefeeea3..92cddb1bc 100644
--- a/examples/vue-composable-example/src/components/TodoList.vue
+++ b/examples/vue-composable-example/src/components/TodoList.vue
@@ -24,7 +24,7 @@ type EventT = {
 export default createComponent({
   setup() {
     const event: Event = <any>reactive({
-      todos:[]
+      todos: []
     });
 
     async function fetchTodos() {
diff --git a/packages/core/src/promise/cancellablePromise.ts b/packages/core/src/promise/cancellablePromise.ts
index 7c765e200..1c4566f49 100644
--- a/packages/core/src/promise/cancellablePromise.ts
+++ b/packages/core/src/promise/cancellablePromise.ts
@@ -99,7 +99,7 @@ export function useCancellablePromise<
       }
       return;
     }
-    _cancel!(result);
+    _cancel(result);
   };
 
   const promise = (p: T): T =>
diff --git a/packages/web/src/web/index.ts b/packages/web/src/web/index.ts
index 92abec557..8e6c97aff 100644
--- a/packages/web/src/web/index.ts
+++ b/packages/web/src/web/index.ts
@@ -8,4 +8,4 @@ export * from "./language";
 export * from "./broadcastChannel";
 export * from "./geolocation";
 export * from "./cssVariables";
-export * from "./webWorker";
+export * from "./webWorkerFunction";
diff --git a/packages/web/src/web/webWorker/_runner.js b/packages/web/src/web/webWorker/_runner.js
deleted file mode 100644
index 1ea3a3b4e..000000000
--- a/packages/web/src/web/webWorker/_runner.js
+++ /dev/null
@@ -1,14 +0,0 @@
-function runner(fn) {
-  return function(e) {
-    var args = e.data || [];
-    return Promise.resolve(fn(...args))
-      .then(function(x) {
-        postMessage([true, x]);
-      })
-      .catch(function(x) {
-        postMessage([false, x]);
-      });
-  };
-}
-
-export default runner;
diff --git a/packages/web/src/web/webWorker/index.ts b/packages/web/src/web/webWorker/index.ts
deleted file mode 100644
index f38c6f8e2..000000000
--- a/packages/web/src/web/webWorker/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./webWorker";
diff --git a/packages/web/src/web/webWorker/webWorker.ts b/packages/web/src/web/webWorker/webWorker.ts
deleted file mode 100644
index ed908a7fe..000000000
--- a/packages/web/src/web/webWorker/webWorker.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { usePromise } from "@vue-composable/core";
-// import runner from "./_runner.js";
-
-function createBlobUrl(fn: Function, dependencies: string[]) {
-  // const scripts =
-  //   dependencies.length > 0 ? `importScripts("${dependencies.join(",")}")` : "";
-
-  // @ts-check
-  // const r = (func: Function) => (e: MessageEvent) => {
-  //   const args = e.data || [];
-
-  //   return Promise.resolve(func(...args))
-  //     .then(x => {
-  //       // @ts-ignore
-  //       postMessage([true, x]);
-  //     })
-  //     .catch(x => {
-  //       // @ts-ignore
-  //       postMessage([false, e]);
-  //     });
-  // };
-
-  const r = (f: Function) => (e: MessageEvent) => {
-    const args = e.data || [];
-
-    return (
-      Promise.resolve(f(...args))
-        // @ts-ignore
-        .then(x => postMessage([true, x]))
-        // @ts-ignore
-        .catch(x => postMessage([false, x]))
-    );
-  };
-
-  const blobScript = ["self.onmessage=", `(${r.toString()})(${fn.toString()})`];
-
-  const blob = new Blob(blobScript, { type: "text/javascript" });
-  return URL.createObjectURL(blob);
-}
-
-export function useWorker<T extends Promise<any>, TArgs extends Array<any>>(
-  fn: (...args: TArgs) => T
-) {
-  const promise = usePromise(
-    (...args: TArgs) =>
-      new Promise((res, rej) => {
-        const blobUrl = createBlobUrl(fn, []);
-
-        const worker = new Worker(blobUrl);
-
-        let timeout = -1;
-
-        const terminate = () => {
-          worker.terminate();
-          clearTimeout(timeout);
-        };
-
-        worker.onmessage = e => {
-          if (e.data[0]) {
-            res(e.data[1]);
-          } else {
-            rej(e.data[1]);
-          }
-          terminate();
-        };
-
-        worker.onerror = e => {
-          rej(e);
-          terminate();
-        };
-
-        worker.postMessage([...args]);
-      }),
-    {
-      lazy: true,
-      throwException: true
-    }
-  );
-
-  return {
-    ...promise
-  };
-}
diff --git a/packages/web/src/web/webWorkerFunction.ts b/packages/web/src/web/webWorkerFunction.ts
new file mode 100644
index 000000000..ce1cfe14d
--- /dev/null
+++ b/packages/web/src/web/webWorkerFunction.ts
@@ -0,0 +1,94 @@
+import { useCancellablePromise, RefTyped, unwrap } from "@vue-composable/core";
+import { watch, computed } from "@vue/composition-api";
+
+function createBlobUrl(fn: Function, dependencies: string[]) {
+  const scripts =
+    dependencies.length > 0
+      ? `importScripts("${dependencies.join(",")}");`
+      : "";
+
+  const r = (f: Function) => (e: MessageEvent) => {
+    const args = e.data || [];
+
+    return (
+      Promise.resolve(f(...args))
+        // @ts-ignore
+        .then(x => postMessage([true, x]))
+        // @ts-ignore
+        .catch(x => postMessage([false, x]))
+    );
+  };
+
+  const blobScript = [
+    scripts,
+    "onmessage=",
+    `(${r.toString()})(${fn.toString()})`
+  ];
+
+  const blob = new Blob(blobScript, { type: "text/javascript" });
+  return URL.createObjectURL(blob);
+}
+
+export interface WebWorkerFunctionOptions {
+  dependencies?: RefTyped<string[]>;
+  timeout?: RefTyped<number>;
+}
+
+export function useWebWorkerFunction<
+  T extends Promise<any>,
+  TArgs extends Array<any>
+>(fn: (...args: TArgs) => T, options?: WebWorkerFunctionOptions) {
+  const dependencies = computed(() => options && unwrap(options.dependencies));
+  const timeoutRef = computed(() => options && unwrap(options.timeout));
+
+  const promise = useCancellablePromise(
+    (...args: TArgs) =>
+      new Promise((res, rej) => {
+        const blobUrl = createBlobUrl(
+          fn,
+          (dependencies.value as string[]) || []
+        );
+        const worker = new Worker(blobUrl);
+
+        let timeoutId = -1;
+        const timeout = timeoutRef.value;
+
+        const terminate = () => {
+          worker.terminate();
+          URL.revokeObjectURL(blobUrl);
+          clearTimeout(timeoutId);
+          removeWatch();
+        };
+
+        const removeWatch = watch(promise.cancelled, terminate, { lazy: true });
+
+        worker.onmessage = e => {
+          if (e.data[0]) {
+            res(e.data[1]);
+          } else {
+            rej(e.data[1]);
+          }
+          terminate();
+        };
+
+        worker.onerror = e => {
+          rej(e);
+          terminate();
+        };
+
+        worker.postMessage([...args]);
+
+        if (timeout) {
+          timeoutId = setTimeout(() => {
+            promise.cancel(`[WebWorker] timeout after ${timeout}ms`);
+          }, timeoutId) as any;
+        }
+      }),
+    {
+      lazy: true,
+      throwException: true
+    }
+  );
+
+  return promise;
+}

From 6e701fa1d0d0589db0b7d1437562a82159a272c3 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Mon, 30 Mar 2020 18:40:15 +0100
Subject: [PATCH 03/11] added worker.ts

---
 docs/api/web.api.md                           | 16 ++--
 .../src/components/HelloWorld.vue             |  6 +-
 packages/web/src/web/index.ts                 |  3 +-
 packages/web/src/web/worker.ts                | 77 +++++++++++++++++++
 ...webWorkerFunction.ts => workerFunction.ts} | 19 ++++-
 5 files changed, 103 insertions(+), 18 deletions(-)
 create mode 100644 packages/web/src/web/worker.ts
 rename packages/web/src/web/{webWorkerFunction.ts => workerFunction.ts} (88%)

diff --git a/docs/api/web.api.md b/docs/api/web.api.md
index 21232689c..7562241c1 100644
--- a/docs/api/web.api.md
+++ b/docs/api/web.api.md
@@ -69,6 +69,9 @@ export interface DefaultTailwindBreakpoints {
   xl: 1280;
 }
 
+// @public (undocumented)
+export function exposeWorker(this: Worker, func: (...args: any[]) => any): void;
+
 // Warning: (ae-forgotten-export) The symbol "TailwindConfigEmpty" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -715,21 +718,14 @@ export function useWebStorage(
 };
 
 // @public (undocumented)
-export function useWebWorkerFunction<
+export function useWorkerFunction<
   T extends Promise<any>,
   TArgs extends Array<any>
 >(
   fn: (...args: TArgs) => T,
   options?: WebWorkerFunctionOptions
-): {
-  exec: (...args: TArgs) => Promise<unknown>;
-  promise: import("@vue/composition-api").Ref<Promise<unknown> | undefined>;
-  result: import("@vue/composition-api").Ref<unknown>;
-  loading: import("@vue/composition-api").Ref<boolean>;
-  error: import("@vue/composition-api").Ref<any>;
-  cancel: (result?: any) => void;
-  cancelled: import("@vue/composition-api").Ref<boolean>;
-};
+): import("../../../core/src").PromiseResultFactory<Promise<unknown>, TArgs> &
+  import("../../../core/src").CancellablePromiseResult<any>;
 
 // @public (undocumented)
 export interface WebStorage {
diff --git a/examples/vue-composable-example/src/components/HelloWorld.vue b/examples/vue-composable-example/src/components/HelloWorld.vue
index 9122f7820..61c87599a 100644
--- a/examples/vue-composable-example/src/components/HelloWorld.vue
+++ b/examples/vue-composable-example/src/components/HelloWorld.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { useWebWorkerFunction, useDateNow } from "vue-composable";
+import { useWorkerFunction, useDateNow } from "vue-composable";
 import { defineComponent, computed, ref } from "@vue/composition-api";
 import { promises } from "fs";
 
@@ -80,14 +80,14 @@ export default defineComponent({
       Math.floor(Math.random() * 1000000)
     );
 
-    const { exec: sortWorker } = useWebWorkerFunction(sortDates, {
+    const { exec: sortWorker } = useWorkerFunction(sortDates, {
       dependencies: [
         "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"
       ],
       timeout
     });
 
-    const work = useWebWorkerFunction(bubleSort, { timeout });
+    const work = useWorkerFunction(bubleSort, { timeout });
 
     const exec = async () => {
       console.log("starting");
diff --git a/packages/web/src/web/index.ts b/packages/web/src/web/index.ts
index 8e6c97aff..5e4d5a60a 100644
--- a/packages/web/src/web/index.ts
+++ b/packages/web/src/web/index.ts
@@ -8,4 +8,5 @@ export * from "./language";
 export * from "./broadcastChannel";
 export * from "./geolocation";
 export * from "./cssVariables";
-export * from "./webWorkerFunction";
+export * from "./worker";
+export * from "./workerFunction";
diff --git a/packages/web/src/web/worker.ts b/packages/web/src/web/worker.ts
new file mode 100644
index 000000000..a8fc4e9e7
--- /dev/null
+++ b/packages/web/src/web/worker.ts
@@ -0,0 +1,77 @@
+import { isClient, NO_OP } from "@vue-composable/core";
+import { ref, onMounted, onUnmounted } from "@vue/composition-api";
+
+// from https://github.com/dai-shi/react-hooks-worker/blob/1e842ad15c558fc04dd7339a62aaa43f46d1c7cd/src/exposeWorker.js
+export function exposeWorker(this: Worker, func: (...args: any[]) => any) {
+  this.onmessage = async (e: MessageEvent) => {
+    const r = func(e.data);
+    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);
+    }
+  };
+}
+
+export function useWorker<TData = any, TArgs = any | any[]>(
+  stringUrl: string | URL,
+  args?: TArgs,
+  options?: WorkerOptions
+) {
+  const errorEvent = ref<Event>();
+  const data = ref<TData>();
+
+  const terminated = ref(false);
+  const errored = ref(false);
+
+  const worker = new Worker(stringUrl, options);
+
+  /* istanbul ignore next  */
+  let lastMessage = (__DEV__ && Date.now()) || undefined;
+
+  const postMessage: (data: TArgs) => void = data => worker.postMessage(data);
+  function terminate() {
+    worker.terminate();
+    terminated.value = true;
+  }
+
+  worker.addEventListener("message", x => {
+    data.value = x.data;
+
+    // if the messages are to quick, we need to warn
+    /* istanbul ignore else  */
+    if (__DEV__) {
+      if (Date.now() - lastMessage! < 2) {
+        console.warn(
+          "[useWorker] message rate is too high, " +
+            " you might not get updated of all the messages."
+        );
+      }
+      lastMessage = Date.now();
+    }
+  });
+
+  worker.addEventListener("error", error => {
+    errorEvent.value = error;
+    errored.value = true;
+  });
+
+  onUnmounted(terminate);
+
+  if (args) {
+    postMessage(args);
+  }
+
+  return {
+    worker,
+    data,
+
+    postMessage,
+
+    errorEvent,
+    errored,
+    terminated
+  };
+}
diff --git a/packages/web/src/web/webWorkerFunction.ts b/packages/web/src/web/workerFunction.ts
similarity index 88%
rename from packages/web/src/web/webWorkerFunction.ts
rename to packages/web/src/web/workerFunction.ts
index ce1cfe14d..792e29c40 100644
--- a/packages/web/src/web/webWorkerFunction.ts
+++ b/packages/web/src/web/workerFunction.ts
@@ -1,4 +1,9 @@
-import { useCancellablePromise, RefTyped, unwrap } from "@vue-composable/core";
+import {
+  useCancellablePromise,
+  RefTyped,
+  unwrap,
+  isClient
+} from "@vue-composable/core";
 import { watch, computed } from "@vue/composition-api";
 
 function createBlobUrl(fn: Function, dependencies: string[]) {
@@ -34,10 +39,13 @@ export interface WebWorkerFunctionOptions {
   timeout?: RefTyped<number>;
 }
 
-export function useWebWorkerFunction<
+export function useWorkerFunction<
   T extends Promise<any>,
   TArgs extends Array<any>
 >(fn: (...args: TArgs) => T, options?: WebWorkerFunctionOptions) {
+  const supported = isClient && "Worker" in window;
+
+  // reactive
   const dependencies = computed(() => options && unwrap(options.dependencies));
   const timeoutRef = computed(() => options && unwrap(options.timeout));
 
@@ -81,7 +89,7 @@ export function useWebWorkerFunction<
         if (timeout) {
           timeoutId = setTimeout(() => {
             promise.cancel(`[WebWorker] timeout after ${timeout}ms`);
-          }, timeoutId) as any;
+          }, timeout) as any;
         }
       }),
     {
@@ -90,5 +98,8 @@ export function useWebWorkerFunction<
     }
   );
 
-  return promise;
+  return {
+    ...promise,
+    supported
+  };
 }

From a888044b240564626d0d91f581dbd49dead03cdb Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Mon, 30 Mar 2020 18:50:17 +0100
Subject: [PATCH 04/11] fix build

---
 docs/api/web.api.md            | 26 ++++++++++++++++++++++++--
 packages/web/src/web/worker.ts |  3 +--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/docs/api/web.api.md b/docs/api/web.api.md
index 7562241c1..0f645dbd7 100644
--- a/docs/api/web.api.md
+++ b/docs/api/web.api.md
@@ -717,6 +717,20 @@ export function useWebStorage(
   remove: () => boolean;
 };
 
+// @public (undocumented)
+export function useWorker<TData = any, TArgs = any | any[]>(
+  stringUrl: string | URL,
+  args?: TArgs,
+  options?: WorkerOptions
+): {
+  worker: Worker;
+  data: import("@vue/composition-api").Ref<TData | undefined>;
+  postMessage: (data: TArgs) => void;
+  errorEvent: import("@vue/composition-api").Ref<Event | undefined>;
+  errored: import("@vue/composition-api").Ref<boolean>;
+  terminated: import("@vue/composition-api").Ref<boolean>;
+};
+
 // @public (undocumented)
 export function useWorkerFunction<
   T extends Promise<any>,
@@ -724,8 +738,16 @@ export function useWorkerFunction<
 >(
   fn: (...args: TArgs) => T,
   options?: WebWorkerFunctionOptions
-): import("../../../core/src").PromiseResultFactory<Promise<unknown>, TArgs> &
-  import("../../../core/src").CancellablePromiseResult<any>;
+): {
+  supported: boolean;
+  exec: (...args: TArgs) => Promise<unknown>;
+  promise: import("@vue/composition-api").Ref<Promise<unknown> | undefined>;
+  result: import("@vue/composition-api").Ref<unknown>;
+  loading: import("@vue/composition-api").Ref<boolean>;
+  error: import("@vue/composition-api").Ref<any>;
+  cancel: (result?: any) => void;
+  cancelled: import("@vue/composition-api").Ref<boolean>;
+};
 
 // @public (undocumented)
 export interface WebStorage {
diff --git a/packages/web/src/web/worker.ts b/packages/web/src/web/worker.ts
index a8fc4e9e7..0357dcb36 100644
--- a/packages/web/src/web/worker.ts
+++ b/packages/web/src/web/worker.ts
@@ -1,5 +1,4 @@
-import { isClient, NO_OP } from "@vue-composable/core";
-import { ref, onMounted, onUnmounted } from "@vue/composition-api";
+import { ref, onUnmounted } from "@vue/composition-api";
 
 // from https://github.com/dai-shi/react-hooks-worker/blob/1e842ad15c558fc04dd7339a62aaa43f46d1c7cd/src/exposeWorker.js
 export function exposeWorker(this: Worker, func: (...args: any[]) => any) {

From 3ecb35bb659198fad1e6565124e61936a30a7e2a Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Mon, 30 Mar 2020 19:35:13 +0100
Subject: [PATCH 05/11] added documentation

---
 CHANGELOG.md                          |  7 ++-
 docs/.vuepress/config.js              |  2 +
 docs/README.md                        |  2 +
 docs/composable/web/worker.md         | 71 +++++++++++++++++++++++++++
 docs/composable/web/workerFunction.md | 66 +++++++++++++++++++++++++
 packages/web/README.md                |  2 +
 packages/web/src/web/worker.ts        |  1 +
 7 files changed, 149 insertions(+), 2 deletions(-)
 create mode 100644 docs/composable/web/worker.md
 create mode 100644 docs/composable/web/workerFunction.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2395e55e..4e48a78aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,11 +3,14 @@
 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]
 
 ---
- -->
+
+## 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
 
 ## 1.0.0-dev.16
 
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 932f6be45..f672e0ceb 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -171,6 +171,8 @@ module.exports = {
             ["composable/web/language", "Language"],
             ["composable/web/broadcastChannel", "BroadcastChannel API"],
             ["composable/web/geolocation", "Geolocation API"],
+            ["composable/web/worker", "WebWorker API"],
+            ["composable/web/workerFunction", "WebWorker Function"],
             ["composable/web/cssVariables", "CSS variables"]
           ]
         },
diff --git a/docs/README.md b/docs/README.md
index 7be903b9b..133678c69 100644
--- a/docs/README.md
+++ b/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
 
diff --git a/docs/composable/web/worker.md b/docs/composable/web/worker.md
new file mode 100644
index 000000000..de2ab7a4e
--- /dev/null
+++ b/docs/composable/web/worker.md
@@ -0,0 +1,71 @@
+# Web Worker API
+
+> The [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers).
+
+## Parameters
+
+```js
+import { useWorker } from "vue-composable";
+
+useWorker(stringUrl, args?, options?);
+```
+
+| Parameters | Type         | Required | Default     | Description                                                                     |
+| ---------- | ------------ | -------- | ----------- | ------------------------------------------------------------------------------- |
+| stringUrl  | `String|URL` | `true`   |             | Webworker file path                                                             |
+| args       | `any|any[]`  | `false`  | `undefined` | arguments for the first message sent to the worker                              |
+| options    | `Options`    | `false`  | `undefined` | [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) |
+
+## State
+
+The `useWorker` function exposes the following reactive state:
+
+```js
+import { useWorker } from "vue-composable";
+
+const { worker, data, terminated, errorEvent, errored } = useWorker();
+```
+
+| State      | Type           | Description                            |
+| ---------- | -------------- | -------------------------------------- |
+| worker     | `Worker`       | Worker instance                        |
+| data       | `Ref<any>`     | Last message received by the worker    |
+| terminated | `Ref<boolean>` | Has worker being terminated            |
+| errorEvent | `Ref<any>`     | Last event received on 'error' message |
+| errored    | `Ref<boolean>` | Has error occurred                     |
+
+## Methods
+
+The `useWorker` function exposes the following methods:
+
+```js
+import { useWorker } from "vue-composable";
+
+const { postMessage, terminate } = useWorker();
+```
+
+| Signature     | Description               |
+| ------------- | ------------------------- |
+| `postMessage` | PostMessage to the worker |
+| `terminate`   | Terminates the worker     |
+
+## Inside the worker
+
+```js
+// super.worker.js
+import { exposeWorker } from "vue-composable";
+
+const max = numbers => Math.max(...numbers);
+
+exposeWorker(max);
+```
+
+## Example
+
+<!-- <on-scroll-example/> -->
+
+### Code
+
+```vue
+
+```
diff --git a/docs/composable/web/workerFunction.md b/docs/composable/web/workerFunction.md
new file mode 100644
index 000000000..1c05fb998
--- /dev/null
+++ b/docs/composable/web/workerFunction.md
@@ -0,0 +1,66 @@
+# WebWorker Function
+
+> Creates a WebWorker based on a function, useful for offloading heavy tasks easily
+
+The `useWorkerFunction` function uses [CancellablePromise](../promise/cancellablePromise)
+
+## Parameters
+
+```ts
+import { useWorkerFunction } from "vue-composable";
+
+useWorkerFunction(fn, options);
+
+interface WebWorkerFunctionOptions {
+  dependencies?: RefTyped<string[]>;
+  timeout?: RefTyped<number>;
+}
+```
+
+| Parameters | Type                       | Required | Default     | Description                               |
+| ---------- | -------------------------- | -------- | ----------- | ----------------------------------------- |
+| fn         | `Function`                 | `true`   |             | Function we want to execute in the worker |
+| options    | `WebWorkerFunctionOptions` | `false`  | `undefined` | Options for the webworker                 |
+
+## State
+
+The `useWorkerFunction` function exposes the following reactive state:
+
+```js
+import { useWorkerFunction } from "vue-composable";
+
+const { promise, result, loading, error, cancelled } = useWorkerFunction();
+```
+
+| State     | Type      | Description                      |
+| --------- | --------- | -------------------------------- |
+| promise   | `Promise` | Current worker process           |
+| result    | `any`     | Resolved value                   |
+| loading   | `boolean` | Waiting for the worker to finish |
+| error     | `any`     | Promise error                    |
+| cancelled | `boolean` | Was cancelled                    |
+
+## Methods
+
+The `useWorkerFunction` function exposes the following methods:
+
+```js
+import { useWorkerFunction } from "vue-composable";
+
+const { exec, cancel } = useWorkerFunction();
+```
+
+| Signature        | Description           |
+| ---------------- | --------------------- |
+| `exec(args?)`    | Resolves new promise  |
+| `cancel(error?)` | Terminates the worker |
+
+## Example
+
+<!-- <on-scroll-example/> -->
+
+### Code
+
+```vue
+
+```
diff --git a/packages/web/README.md b/packages/web/README.md
index d8233fb48..f8a1ba8ca 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -62,6 +62,8 @@ Check our [documentation](https://pikax.me/vue-composable/)
 - [BroadcastChannel](https://pikax.me/vue-composable/composable/web/broadcastChannel) - reactive `BroadcastChannel API`
 - [Geolocation API](https://pikax.me/vue-composable/composable/web/geolocation)
 - [CSS variables](https://pikax.me/vue-composable/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
 
 ## Contributing
 
diff --git a/packages/web/src/web/worker.ts b/packages/web/src/web/worker.ts
index 0357dcb36..ecfd338ac 100644
--- a/packages/web/src/web/worker.ts
+++ b/packages/web/src/web/worker.ts
@@ -68,6 +68,7 @@ export function useWorker<TData = any, TArgs = any | any[]>(
     data,
 
     postMessage,
+    terminate,
 
     errorEvent,
     errored,

From 48b9e0ff96d1d9be22f8a3258ec7543caae38944 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Tue, 31 Mar 2020 12:57:45 +0100
Subject: [PATCH 06/11] add tests for worker

---
 docs/.vuepress/config.js                  |   4 +-
 packages/web/__tests__/web/worker.spec.ts | 277 ++++++++++++++++++++++
 packages/web/src/web/worker.ts            |  60 +++--
 packages/web/src/web/workerFunction.ts    |  14 +-
 4 files changed, 322 insertions(+), 33 deletions(-)
 create mode 100644 packages/web/__tests__/web/worker.spec.ts

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index f672e0ceb..0d73570dc 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -171,9 +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/worker", "WebWorker API"],
-            ["composable/web/workerFunction", "WebWorker Function"],
-            ["composable/web/cssVariables", "CSS variables"]
+            ["composable/web/workerFunction", "WebWorker Function"]
           ]
         },
         {
diff --git a/packages/web/__tests__/web/worker.spec.ts b/packages/web/__tests__/web/worker.spec.ts
new file mode 100644
index 000000000..d0edd234c
--- /dev/null
+++ b/packages/web/__tests__/web/worker.spec.ts
@@ -0,0 +1,277 @@
+const onUnmountedSpy = jest.fn();
+
+jest.mock("@vue/composition-api", () => ({
+  ...jest.requireActual("@vue/composition-api"),
+  onUnmounted: onUnmountedSpy
+}));
+
+import { useWorker, exposeWorker } from "../../src";
+import { nextTick } from "../utils";
+
+describe("worker", () => {
+  const _worker = window.Worker;
+  const addEventListenerFn = jest.fn();
+  const postMessageFn = jest.fn();
+  const terminateFn = jest.fn();
+  const constructorFn = jest.fn();
+
+  class WorkerMock {
+    cb: {
+      error: (e: ErrorEvent) => void;
+      message: (e: MessageEvent) => void;
+    } = {} as any;
+    constructor(...args: any[]) {
+      constructorFn(...args);
+    }
+    addEventListener = addEventListenerFn.mockImplementation(
+      (s: keyof WorkerMock["cb"], cb: any) => {
+        this.cb[s] = cb;
+      }
+    );
+    postMessage = postMessageFn;
+    terminate = terminateFn;
+  }
+  beforeAll(() => {
+    Object.defineProperty(window, "Worker", {
+      writable: true,
+      configurable: true,
+      value: WorkerMock
+    });
+    Object.defineProperty(global, "Worker", {
+      writable: true,
+      configurable: true,
+      value: WorkerMock
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, "Worker", {
+      writable: true,
+      configurable: true,
+      value: _worker
+    });
+    Object.defineProperty(global, "Worker", {
+      writable: true,
+      configurable: true,
+      value: _worker
+    });
+  });
+
+  beforeEach(() => {
+    addEventListenerFn.mockReset();
+    postMessageFn.mockReset();
+    constructorFn.mockReset();
+    terminateFn.mockReset();
+    onUnmountedSpy.mockReset();
+  });
+
+  it("should create worker", () => {
+    const url = "test";
+    const options: WorkletOptions = { credentials: {} as any };
+    const args = ["a", "b"];
+
+    useWorker(url, undefined, options);
+    expect(constructorFn).toHaveBeenLastCalledWith(url, options);
+
+    useWorker(url, args, options);
+    expect(constructorFn).toHaveBeenLastCalledWith(url, options);
+
+    useWorker(undefined as any, args, options);
+    expect(constructorFn).toHaveBeenLastCalledWith(undefined, options);
+
+    useWorker(url, undefined, undefined);
+    expect(constructorFn).toHaveBeenLastCalledWith(url, undefined);
+
+    useWorker(undefined as any, undefined, undefined);
+    expect(constructorFn).toHaveBeenLastCalledWith(undefined, undefined);
+  });
+
+  it("should receive messages", async () => {
+    const { worker, data } = useWorker("");
+    const mock: WorkerMock = worker as any;
+
+    const sendMessage = (d: any) => {
+      mock.cb.message({
+        data: d
+      } as any);
+
+      return nextTick();
+    };
+
+    let expected: any = {};
+    await sendMessage(expected);
+    expect(data.value).toBe(expected);
+
+    expected = 12;
+    await sendMessage(expected);
+    expect(data.value).toBe(expected);
+
+    expected = "ddd";
+    await sendMessage(expected);
+    expect(data.value).toBe(expected);
+  });
+
+  it("should warn if the message rate is too high", () => {
+    const { worker } = useWorker("");
+    const mock: WorkerMock = worker as any;
+    const warnSpy = jest.spyOn(console, "warn");
+
+    mock.cb.message({ data: "1" } as any);
+    mock.cb.message({ data: "1" } as any);
+    mock.cb.message({ data: "1" } as any);
+
+    expect(warnSpy).toBeCalledTimes(2);
+    expect(warnSpy).toHaveBeenLastCalledWith(
+      "[useWorker] message rate is too high, you might not get updated of all the messages."
+    );
+  });
+
+  it("should add event listeners", () => {
+    expect(addEventListenerFn).not.toHaveBeenCalled();
+    expect(postMessageFn).not.toHaveBeenCalled();
+
+    useWorker("");
+
+    expect(addEventListenerFn).toHaveBeenCalled();
+    expect(postMessageFn).not.toHaveBeenCalled();
+  });
+
+  it("should terminate worker", async () => {
+    const { terminated, terminate } = useWorker("");
+
+    expect(terminated.value).toBe(false);
+    expect(terminateFn).not.toHaveBeenCalled();
+    terminate();
+
+    expect(terminateFn).toHaveBeenCalled();
+    await nextTick();
+
+    expect(terminated.value).toBe(true);
+  });
+
+  it("should terminate on onUnmounted", async () => {
+    const { terminated } = useWorker("");
+
+    expect(terminated.value).toBe(false);
+    expect(terminateFn).not.toHaveBeenCalled();
+    onUnmountedSpy.mock.calls[0][0]();
+
+    expect(terminateFn).toHaveBeenCalled();
+
+    await nextTick();
+
+    expect(terminated.value).toBe(true);
+  });
+
+  it("should store error message", async () => {
+    const { worker, errorEvent, errored } = useWorker("");
+    const mock: WorkerMock = worker as any;
+
+    expect(errorEvent.value).toBeUndefined();
+    expect(errored.value).toBe(false);
+
+    const error: ErrorEvent = new ErrorEvent("Error mock");
+
+    mock.cb.error(error);
+
+    expect(errorEvent.value).toBe(error);
+    expect(errored.value).toBe(true);
+  });
+
+  describe("exposeWorker", () => {
+    const postMessageFn = jest.fn();
+    const worker = {
+      onmessage: (a: any) => {},
+      postMessage: postMessageFn
+    };
+    const sendWorker = exposeWorker.bind(worker);
+
+    beforeEach(() => {
+      postMessageFn.mockReset();
+    });
+
+    it("should set callback", () => {
+      const c = worker.onmessage;
+      sendWorker(() => {});
+
+      expect(worker.onmessage).not.toBe(c);
+    });
+
+    it("should post messages", async () => {
+      const warnSpy = jest.spyOn(console, "warn");
+      const func = jest.fn().mockImplementation(x => x);
+      sendWorker((_: any) => func(_));
+
+      const send = async (e: any) => {
+        await worker.onmessage({
+          data: e
+        });
+      };
+
+      expect(func).not.toHaveBeenCalled();
+
+      func.mockImplementationOnce(() => undefined);
+      await send(11);
+      expect(postMessageFn).toHaveBeenLastCalledWith(undefined);
+      expect(warnSpy).toHaveBeenCalledWith(
+        "[exposeWorker] returned `undefined`, this might cause unexpected behaviour"
+      );
+
+      await send(null);
+      expect(postMessageFn).toHaveBeenLastCalledWith(null);
+      // expect(warnSpy).toHaveBeenCalledWith(
+      //   "[exposeWorker] returned `null`, this might cause unexpected behaviour"
+      // );
+
+      let expected: any = "1";
+      await send(expected);
+      expect(postMessageFn).toHaveBeenLastCalledWith(expected);
+
+      expected = ["1"];
+      await send([expected]);
+      expect(postMessageFn).toHaveBeenLastCalledWith(expected);
+
+      expected = [1, 3, 5, "rr"];
+      await send([expected]);
+      expect(postMessageFn).toHaveBeenLastCalledWith(expected);
+
+      expected = { a: 1 };
+      await send(expected);
+      expect(postMessageFn).toHaveBeenLastCalledWith(expected);
+
+      expected = 11;
+      await send([expected]);
+      expect(postMessageFn).toHaveBeenLastCalledWith(expected);
+
+      postMessageFn.mockClear();
+      let _gen = function*() {
+        yield 1;
+        yield 2;
+        yield 3;
+      };
+      expected = _gen();
+      await send(expected);
+      let generated = Array.from(_gen());
+      expect(postMessageFn).toHaveBeenCalledTimes(generated.length);
+      generated.map((v, i) =>
+        expect(postMessageFn).toHaveBeenNthCalledWith(i + 1, v)
+      );
+
+      postMessageFn.mockClear();
+      let _genAsync = async function*() {
+        yield await Promise.resolve(1);
+        yield await Promise.resolve(2);
+        yield await Promise.resolve(3);
+        yield await Promise.resolve(4);
+      };
+      expected = _genAsync();
+      await send(_genAsync());
+      expect(postMessageFn).toHaveBeenCalledTimes(4);
+      [1, 2, 3, 4].map((v, i) =>
+        expect(postMessageFn).toHaveBeenNthCalledWith(i + 1, v)
+      );
+    });
+
+    // it("");
+  });
+});
diff --git a/packages/web/src/web/worker.ts b/packages/web/src/web/worker.ts
index ecfd338ac..91a24ebce 100644
--- a/packages/web/src/web/worker.ts
+++ b/packages/web/src/web/worker.ts
@@ -1,10 +1,25 @@
 import { ref, onUnmounted } from "@vue/composition-api";
+import { PASSIVE_EV } from "@vue-composable/core";
 
 // from https://github.com/dai-shi/react-hooks-worker/blob/1e842ad15c558fc04dd7339a62aaa43f46d1c7cd/src/exposeWorker.js
+// export function exposeWorker(func: (...args: any[]) => any): void;
 export function exposeWorker(this: Worker, func: (...args: any[]) => any) {
   this.onmessage = async (e: MessageEvent) => {
     const r = func(e.data);
-    if (r[Symbol.asyncIterator]) {
+
+    console.warn(`returning`, r);
+
+    if (r === undefined) {
+      // istanbul ignore else
+      if (__DEV__) {
+        console.warn(
+          `[exposeWorker] returned \`${r}\`, this might cause unexpected behaviour`
+        );
+      }
+      this.postMessage(r);
+    } else if (r === null) {
+      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);
@@ -28,7 +43,7 @@ export function useWorker<TData = any, TArgs = any | any[]>(
   const worker = new Worker(stringUrl, options);
 
   /* istanbul ignore next  */
-  let lastMessage = (__DEV__ && Date.now()) || undefined;
+  let lastMessage = (__DEV__ && Date.now() - 20) || undefined;
 
   const postMessage: (data: TArgs) => void = data => worker.postMessage(data);
   function terminate() {
@@ -36,26 +51,33 @@ export function useWorker<TData = any, TArgs = any | any[]>(
     terminated.value = true;
   }
 
-  worker.addEventListener("message", x => {
-    data.value = x.data;
+  worker.addEventListener(
+    "message",
+    x => {
+      data.value = x.data;
 
-    // if the messages are to quick, we need to warn
-    /* istanbul ignore else  */
-    if (__DEV__) {
-      if (Date.now() - lastMessage! < 2) {
-        console.warn(
-          "[useWorker] message rate is too high, " +
-            " you might not get updated of all the messages."
-        );
+      // if the messages are to quick, we need to warn
+      /* istanbul ignore else  */
+      if (__DEV__) {
+        if (Date.now() - lastMessage! < 2) {
+          console.warn(
+            "[useWorker] message rate is too high, you might not get updated of all the messages."
+          );
+        }
+        lastMessage = Date.now();
       }
-      lastMessage = Date.now();
-    }
-  });
+    },
+    PASSIVE_EV
+  );
 
-  worker.addEventListener("error", error => {
-    errorEvent.value = error;
-    errored.value = true;
-  });
+  worker.addEventListener(
+    "error",
+    error => {
+      errorEvent.value = error;
+      errored.value = true;
+    },
+    PASSIVE_EV
+  );
 
   onUnmounted(terminate);
 
diff --git a/packages/web/src/web/workerFunction.ts b/packages/web/src/web/workerFunction.ts
index 792e29c40..ce5836197 100644
--- a/packages/web/src/web/workerFunction.ts
+++ b/packages/web/src/web/workerFunction.ts
@@ -1,9 +1,4 @@
-import {
-  useCancellablePromise,
-  RefTyped,
-  unwrap,
-  isClient
-} from "@vue-composable/core";
+import { useCancellablePromise, RefTyped, unwrap } from "@vue-composable/core";
 import { watch, computed } from "@vue/composition-api";
 
 function createBlobUrl(fn: Function, dependencies: string[]) {
@@ -43,8 +38,6 @@ export function useWorkerFunction<
   T extends Promise<any>,
   TArgs extends Array<any>
 >(fn: (...args: TArgs) => T, options?: WebWorkerFunctionOptions) {
-  const supported = isClient && "Worker" in window;
-
   // reactive
   const dependencies = computed(() => options && unwrap(options.dependencies));
   const timeoutRef = computed(() => options && unwrap(options.timeout));
@@ -98,8 +91,5 @@ export function useWorkerFunction<
     }
   );
 
-  return {
-    ...promise,
-    supported
-  };
+  return promise;
 }

From af563a6e0538ab38ff3063b877d730a615ad4ecf Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Tue, 31 Mar 2020 18:22:08 +0100
Subject: [PATCH 07/11] created tests

---
 docs/api/web.api.md                           |  13 +-
 .../src/components/HelloWorld.vue             |   2 +
 packages/web/__tests__/web/worker.spec.ts     |   5 -
 .../web/__tests__/web/workerFunction.spec.ts  | 535 ++++++++++++++++++
 packages/web/src/web/index.ts                 |   2 +-
 packages/web/src/web/workerFunction.ts        | 110 ++--
 6 files changed, 615 insertions(+), 52 deletions(-)
 create mode 100644 packages/web/__tests__/web/workerFunction.spec.ts

diff --git a/docs/api/web.api.md b/docs/api/web.api.md
index 0f645dbd7..4b83f0f4f 100644
--- a/docs/api/web.api.md
+++ b/docs/api/web.api.md
@@ -726,6 +726,7 @@ export function useWorker<TData = any, TArgs = any | any[]>(
   worker: Worker;
   data: import("@vue/composition-api").Ref<TData | undefined>;
   postMessage: (data: TArgs) => void;
+  terminate: () => void;
   errorEvent: import("@vue/composition-api").Ref<Event | undefined>;
   errored: import("@vue/composition-api").Ref<boolean>;
   terminated: import("@vue/composition-api").Ref<boolean>;
@@ -738,16 +739,8 @@ export function useWorkerFunction<
 >(
   fn: (...args: TArgs) => T,
   options?: WebWorkerFunctionOptions
-): {
-  supported: boolean;
-  exec: (...args: TArgs) => Promise<unknown>;
-  promise: import("@vue/composition-api").Ref<Promise<unknown> | undefined>;
-  result: import("@vue/composition-api").Ref<unknown>;
-  loading: import("@vue/composition-api").Ref<boolean>;
-  error: import("@vue/composition-api").Ref<any>;
-  cancel: (result?: any) => void;
-  cancelled: import("@vue/composition-api").Ref<boolean>;
-};
+): import("../../../core/src").PromiseResultFactory<Promise<unknown>, TArgs> &
+  import("../../../core/src").CancellablePromiseResult<any>;
 
 // @public (undocumented)
 export interface WebStorage {
diff --git a/examples/vue-composable-example/src/components/HelloWorld.vue b/examples/vue-composable-example/src/components/HelloWorld.vue
index 61c87599a..b36b6622a 100644
--- a/examples/vue-composable-example/src/components/HelloWorld.vue
+++ b/examples/vue-composable-example/src/components/HelloWorld.vue
@@ -82,6 +82,8 @@ export default defineComponent({
 
     const { exec: sortWorker } = useWorkerFunction(sortDates, {
       dependencies: [
+        "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js",
         "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"
       ],
       timeout
diff --git a/packages/web/__tests__/web/worker.spec.ts b/packages/web/__tests__/web/worker.spec.ts
index d0edd234c..96bcd97fe 100644
--- a/packages/web/__tests__/web/worker.spec.ts
+++ b/packages/web/__tests__/web/worker.spec.ts
@@ -219,9 +219,6 @@ describe("worker", () => {
 
       await send(null);
       expect(postMessageFn).toHaveBeenLastCalledWith(null);
-      // expect(warnSpy).toHaveBeenCalledWith(
-      //   "[exposeWorker] returned `null`, this might cause unexpected behaviour"
-      // );
 
       let expected: any = "1";
       await send(expected);
@@ -271,7 +268,5 @@ describe("worker", () => {
         expect(postMessageFn).toHaveBeenNthCalledWith(i + 1, v)
       );
     });
-
-    // it("");
   });
 });
diff --git a/packages/web/__tests__/web/workerFunction.spec.ts b/packages/web/__tests__/web/workerFunction.spec.ts
new file mode 100644
index 000000000..653fd191a
--- /dev/null
+++ b/packages/web/__tests__/web/workerFunction.spec.ts
@@ -0,0 +1,535 @@
+jest.mock("@vue-composable/core", () => ({
+  ...jest.requireActual("@vue-composable/core"),
+  useCancellablePromise: jest.fn()
+}));
+
+import {
+  useWorkerFunction,
+  createBlobUrl,
+  inlineWorkExecution
+} from "../../src/web/workerFunction";
+import { NO_OP, useCancellablePromise } from "@vue-composable/core";
+import { ref } from "@vue/composition-api";
+import { nextTick } from "../utils";
+
+const mockBlob = (fn: jest.Mock<any, any>) => {
+  class BlobMocked {
+    script: any;
+    type: any;
+    constructor(...args: any[]) {
+      fn(...args);
+      this.script = args[0];
+      this.type = args[1];
+    }
+  }
+
+  Object.defineProperty(window, "Blob", {
+    writable: true,
+    configurable: true,
+    value: BlobMocked
+  });
+  Object.defineProperty(global, "Blob", {
+    writable: true,
+    configurable: true,
+    value: BlobMocked
+  });
+
+  return fn;
+};
+
+const mockWorker = (
+  c: {
+    constructor: jest.Mock<any, any>;
+    addEventListener: jest.Mock<any, any>;
+    postMessage: jest.Mock<any, any>;
+    terminate: jest.Mock<any, any>;
+  } = {
+    constructor: jest.fn(),
+    addEventListener: jest.fn(),
+    postMessage: jest.fn(),
+    terminate: jest.fn()
+  }
+) => {
+  class WorkerMock {
+    cb: {
+      error: (e: ErrorEvent) => void;
+      message: (e: MessageEvent) => void;
+    } = {} as any;
+    constructor(...args: any[]) {
+      c.constructor(...args);
+    }
+    addEventListener = c.addEventListener.mockImplementation(
+      (s: keyof WorkerMock["cb"], cb: any) => {
+        this.cb[s] = cb;
+      }
+    );
+    postMessage = c.postMessage;
+    terminate = c.terminate;
+  }
+
+  const _worker = window.Worker;
+
+  beforeAll(() => {
+    Object.defineProperty(window, "Worker", {
+      writable: true,
+      configurable: true,
+      value: WorkerMock
+    });
+    Object.defineProperty(global, "Worker", {
+      writable: true,
+      configurable: true,
+      value: WorkerMock
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, "Worker", {
+      writable: true,
+      configurable: true,
+      value: _worker
+    });
+    Object.defineProperty(global, "Worker", {
+      writable: true,
+      configurable: true,
+      value: _worker
+    });
+  });
+
+  const mockClear = () => {
+    Object.keys(c).map((x: keyof typeof c) => c[x].mockClear());
+  };
+
+  return {
+    ...c,
+    mockClear
+  };
+};
+
+describe("worker function", () => {
+  const postMessageFn = jest
+    .spyOn(window, "postMessage")
+    .mockImplementation(x => x);
+
+  const cancellablePromiseFn = (useCancellablePromise as jest.Mock).mockImplementation(
+    p => ({ exec: p })
+  );
+
+  const blobConstructorFn = mockBlob(
+    jest.fn()
+  ).mockImplementation((script, type) => [script, type]);
+  const createObjectUrlSpy = jest.fn(x => x);
+  const revokeObjectURLSpy = jest.fn(x => x);
+
+  URL.createObjectURL = createObjectUrlSpy;
+  URL.revokeObjectURL = revokeObjectURLSpy;
+
+  const workerMock = mockWorker();
+
+  beforeEach(() => {
+    postMessageFn.mockClear();
+    createObjectUrlSpy.mockClear();
+    blobConstructorFn.mockClear();
+
+    workerMock.mockClear();
+    cancellablePromiseFn.mockClear();
+  });
+
+  describe("inlineWorkExecution", () => {
+    const toArgs = (...args: any[]) => [...args];
+
+    it("should return a function", () => {
+      expect(inlineWorkExecution(NO_OP)).toBeInstanceOf(Function);
+    });
+
+    it("should handle non-promise based factory", async () => {
+      const v = { a: 1 };
+      const e = inlineWorkExecution((a: any) => a);
+
+      const r = await e({
+        data: toArgs(v)
+      } as any);
+
+      expect(r).toMatchObject([true, v]);
+      expect(postMessageFn).toHaveBeenCalledWith([true, v]);
+    });
+
+    it("should handle promise based factory", async () => {
+      const v = { a: 1 };
+      const e = inlineWorkExecution((a: any) => Promise.resolve(a));
+
+      const r = await e({
+        data: toArgs(v)
+      } as any);
+
+      expect(r).toMatchObject([true, v]);
+      expect(postMessageFn).toHaveBeenCalledWith([true, v]);
+    });
+
+    it("should call factory with the `e.data`", async () => {
+      const v = { a: 1 };
+      const factory = jest.fn(x => x);
+      const e = inlineWorkExecution(factory);
+
+      await e({
+        data: toArgs(v)
+      } as any);
+
+      expect(factory).toHaveBeenCalledWith(v);
+    });
+
+    it("should call factory with multiple arguments the `e.data`", async () => {
+      const factory = jest.fn((...args) => args);
+      const e = inlineWorkExecution(factory);
+
+      await e({
+        data: toArgs(1, 2, 3)
+      } as any);
+
+      expect(factory).toHaveBeenCalledWith(1, 2, 3);
+      expect(postMessageFn).toHaveBeenCalledWith([true, [1, 2, 3]]);
+    });
+
+    it("should be able to call the function if `e.data` is empty or undefined", async () => {
+      const factory = jest.fn();
+      const e = inlineWorkExecution(factory);
+
+      const r = await e({
+        data: undefined
+      } as any);
+
+      expect(r).toStrictEqual([true, undefined]);
+      expect(factory).toHaveBeenCalledWith();
+      expect(postMessageFn).toHaveBeenCalledWith([true, undefined]);
+    });
+
+    it("should return [false, Error] on exception", async () => {
+      const error = new Error("test");
+      const factory = jest.fn(() => {
+        throw error;
+      });
+      const e = inlineWorkExecution(factory);
+
+      const r = await e({
+        data: toArgs(1, 2, 3)
+      } as any);
+
+      expect(r).toStrictEqual([false, error]);
+      expect(factory).toHaveBeenCalledWith(1, 2, 3);
+      expect(postMessageFn).toHaveBeenCalledWith([false, error]);
+    });
+
+    it("should return [false, Error] on promised exception", async () => {
+      const error = new Error("test");
+      const factory = jest.fn(
+        () =>
+          new Promise((_, rej) => {
+            rej(error);
+          })
+      );
+      const e = inlineWorkExecution(factory);
+
+      const r = await e({
+        data: toArgs(1, 2, 3)
+      } as any);
+
+      expect(r).toStrictEqual([false, error]);
+      expect(factory).toHaveBeenCalledWith(1, 2, 3);
+      expect(postMessageFn).toHaveBeenCalledWith([false, error]);
+    });
+  });
+
+  describe("createBlobUrl", () => {
+    beforeEach(() => {});
+
+    it("should create a blob and return objectUrl", () => {
+      const fn = (a: any) => {
+        return a + a;
+      };
+      expect(createBlobUrl(fn, [])).toMatchObject({
+        script: ["", "onmessage=", expect.stringContaining(fn.toString())],
+        type: {
+          type: "text/javascript"
+        }
+      });
+    });
+
+    it("should add 1 dependency to the blob", () => {
+      const fn = (a: any) => {
+        return a + a;
+      };
+      expect(createBlobUrl(fn, ["https://mydep.mydepen.my-com"])).toMatchObject(
+        {
+          script: [
+            `importScripts("https://mydep.mydepen.my-com");`,
+            "onmessage=",
+            expect.stringContaining(fn.toString())
+          ],
+          type: {
+            type: "text/javascript"
+          }
+        }
+      );
+    });
+
+    it("should create the correct blobScript", () => {
+      const fn = (a: any) => {
+        return a + a;
+      };
+      expect(
+        createBlobUrl(fn, [
+          "https://mydep.mydepen.my-com",
+          "https://mydep.mydepen.my-com",
+          "https://mydep.mydepen.my-com"
+        ])
+      ).toMatchObject({
+        script: [
+          `importScripts("https://mydep.mydepen.my-com","https://mydep.mydepen.my-com","https://mydep.mydepen.my-com");`,
+          "onmessage=",
+          expect.stringContaining(fn.toString())
+        ],
+        type: {
+          type: "text/javascript"
+        }
+      });
+    });
+  });
+
+  describe("useWorkerFunction", () => {
+    it("should create cancellablePromise and return it", () => {
+      const p = {};
+      cancellablePromiseFn.mockImplementationOnce(() => p);
+      expect(useWorkerFunction(NO_OP as any)).toBe(p);
+
+      expect(useCancellablePromise).toHaveBeenCalledWith(expect.any(Function), {
+        lazy: true,
+        throwException: true
+      });
+    });
+
+    it("should create worker", async () => {
+      const dependencies = ["test"];
+      const { exec } = useWorkerFunction(NO_OP as any, { dependencies });
+      expect(exec).toBeInstanceOf(Function);
+
+      const p = exec();
+
+      expect(p).toBeInstanceOf(Promise);
+
+      expect(createObjectUrlSpy).toHaveBeenCalledTimes(1);
+      expect(workerMock.constructor).toHaveBeenCalledTimes(1);
+
+      expect(workerMock.addEventListener).toHaveBeenCalledTimes(2);
+      expect(workerMock.postMessage).toHaveBeenCalledWith([]);
+
+      // new worker should have been created
+      exec(1, 2, 3);
+
+      expect(createObjectUrlSpy).toHaveBeenCalledTimes(2);
+      expect(workerMock.constructor).toHaveBeenCalledTimes(2);
+
+      expect(workerMock.addEventListener).toHaveBeenCalledTimes(4);
+      expect(workerMock.postMessage).toHaveBeenLastCalledWith([1, 2, 3]);
+    });
+
+    it("should get the function return", async () => {
+      const { exec } = useWorkerFunction(NO_OP as any);
+      expect(exec).toBeInstanceOf(Function);
+
+      const p = exec();
+
+      const expected = { a: 1 };
+
+      // message
+      workerMock.addEventListener.mock.calls[0][1]({
+        data: [true, expected]
+      });
+
+      expect(p).resolves.toBe(expected);
+
+      workerMock.mockClear();
+      expect(exec()).rejects.toBe(expected);
+      // message
+      workerMock.addEventListener.mock.calls[0][1]({
+        data: [false, expected]
+      });
+
+      workerMock.mockClear();
+      expect(exec()).rejects.toBe(expected);
+      // message
+      workerMock.addEventListener.mock.calls[1][1](expected);
+    });
+
+    describe("terminate", () => {
+      test("on success", async () => {
+        const { exec } = useWorkerFunction(NO_OP as any);
+        expect(exec).toBeInstanceOf(Function);
+
+        const p = exec();
+
+        const expected = { a: 1 };
+
+        // message
+        workerMock.addEventListener.mock.calls[0][1]({
+          data: [true, expected]
+        });
+        await p;
+
+        expect(workerMock.terminate).toHaveBeenCalled();
+        expect(revokeObjectURLSpy).toHaveBeenCalled();
+      });
+
+      describe("cancel", () => {
+        test("calling cancel()", async () => {
+          cancellablePromiseFn.mockImplementationOnce(p => ({
+            exec: p,
+            cancelled: ref(false)
+          }));
+
+          const { exec, cancelled } = useWorkerFunction(NO_OP as any);
+
+          const p = exec();
+          expect(p).resolves.toBeUndefined();
+          cancelled.value = true;
+
+          await nextTick();
+          expect(await p).toBeUndefined();
+          expect(workerMock.terminate).toHaveBeenCalled();
+        });
+
+        test("if the last argument is ref<boolean> becomes false", async () => {
+          cancellablePromiseFn.mockImplementationOnce(p => ({
+            exec: p,
+            cancelled: ref(false)
+          }));
+          const cancel = ref(false);
+
+          const { exec } = useWorkerFunction(NO_OP as any);
+
+          const p = exec(cancel);
+          expect(p).resolves.toBeUndefined();
+          cancel.value = true;
+
+          await nextTick();
+          expect(workerMock.terminate).toHaveBeenCalled();
+        });
+
+        test("last argument is boolean, not ref boolean", async () => {
+          cancellablePromiseFn.mockImplementationOnce(p => ({
+            exec: p,
+            cancelled: ref(false)
+          }));
+          let cancel = false;
+
+          const { exec, cancelled } = useWorkerFunction(NO_OP as any);
+
+          const p = exec(cancel);
+          expect(p).resolves.toBeUndefined();
+          cancel = true;
+
+          await nextTick();
+          expect(workerMock.terminate).not.toHaveBeenCalled();
+
+          cancelled.value = true;
+          await nextTick();
+          expect(workerMock.terminate).toHaveBeenCalled();
+        });
+
+        test("last argument extra argument is ref<true>", async () => {
+          cancellablePromiseFn.mockImplementationOnce(p => ({
+            exec: p,
+            cancelled: ref(false)
+          }));
+          const cancel = ref(true);
+
+          const { exec, cancelled } = useWorkerFunction(NO_OP as any);
+
+          const p = exec(cancel);
+          await nextTick();
+          expect(p).resolves.toBeUndefined();
+          cancel.value = false;
+
+          await nextTick();
+          expect(workerMock.terminate).not.toHaveBeenCalled();
+
+          // this cancel is not tracked so it shouldn't affect
+          cancel.value = true;
+          await nextTick();
+          expect(workerMock.terminate).not.toHaveBeenCalled();
+
+          cancelled.value = true;
+          await nextTick();
+          expect(workerMock.terminate).toHaveBeenCalled();
+        });
+
+        test("last argument is ref<boolean>", async () => {
+          cancellablePromiseFn.mockImplementationOnce(p => ({
+            exec: p,
+            cancelled: ref(false)
+          }));
+          const cancel = ref(false);
+
+          const { exec, cancelled } = useWorkerFunction((a: any) => {
+            return Promise.resolve(true);
+          });
+
+          let p = exec(cancel);
+
+          expect(p).resolves.toBeUndefined();
+          cancel.value = true;
+
+          await nextTick();
+          expect(workerMock.terminate).not.toHaveBeenCalled();
+
+          cancelled.value = true;
+          await nextTick();
+          expect(workerMock.terminate).toHaveBeenCalled();
+
+          // adding extra argument
+          p = (exec as any)(1, cancel);
+
+          expect(p).resolves.toBeUndefined();
+          cancel.value = true;
+
+          await nextTick();
+          expect(workerMock.terminate).toHaveBeenCalled();
+
+          await nextTick();
+          expect(workerMock.terminate).toHaveBeenCalled();
+        });
+
+        test("on timeout", async () => {
+          jest.useFakeTimers();
+          try {
+            const cancelled = ref(false);
+            cancellablePromiseFn.mockImplementationOnce(p => ({
+              exec: p,
+              cancel: jest
+                .fn()
+                .mockImplementation(() => (cancelled.value = false)),
+              cancelled
+            }));
+
+            const { exec, cancel } = useWorkerFunction(NO_OP as any, {
+              timeout: 40
+            });
+
+            const p = exec();
+            expect(p).resolves.toBeUndefined();
+            jest.runTimersToTime(50);
+
+            await nextTick();
+            cancelled.value = true;
+
+            expect(await p).toBeUndefined();
+            expect(workerMock.terminate).toHaveBeenCalled();
+            expect(cancel).toHaveBeenCalledWith(
+              `[WebWorker] timeout after 40ms`
+            );
+          } finally {
+            jest.useRealTimers();
+          }
+        });
+      });
+    });
+  });
+});
diff --git a/packages/web/src/web/index.ts b/packages/web/src/web/index.ts
index 5e4d5a60a..f7e0161e1 100644
--- a/packages/web/src/web/index.ts
+++ b/packages/web/src/web/index.ts
@@ -9,4 +9,4 @@ export * from "./broadcastChannel";
 export * from "./geolocation";
 export * from "./cssVariables";
 export * from "./worker";
-export * from "./workerFunction";
+export { useWorkerFunction, WebWorkerFunctionOptions } from "./workerFunction";
diff --git a/packages/web/src/web/workerFunction.ts b/packages/web/src/web/workerFunction.ts
index ce5836197..21f6edfcf 100644
--- a/packages/web/src/web/workerFunction.ts
+++ b/packages/web/src/web/workerFunction.ts
@@ -1,28 +1,40 @@
-import { useCancellablePromise, RefTyped, unwrap } from "@vue-composable/core";
-import { watch, computed } from "@vue/composition-api";
-
-function createBlobUrl(fn: Function, dependencies: string[]) {
-  const scripts =
-    dependencies.length > 0
-      ? `importScripts("${dependencies.join(",")}");`
-      : "";
-
-  const r = (f: Function) => (e: MessageEvent) => {
+import {
+  useCancellablePromise,
+  RefTyped,
+  unwrap,
+  PASSIVE_EV,
+  NO_OP
+} from "@vue-composable/core";
+import { watch, computed, isRef } from "@vue/composition-api";
+
+export const inlineWorkExecution = (f: Function) =>
+  function(e: MessageEvent) {
     const args = e.data || [];
 
-    return (
-      Promise.resolve(f(...args))
+    return new Promise(res => {
+      try {
+        Promise.resolve(f(...args))
+          // @ts-ignore
+          .then(x => res(postMessage([true, x])))
+          // @ts-ignore
+          .catch(x => res(postMessage([false, x])));
+      } catch (e) {
         // @ts-ignore
-        .then(x => postMessage([true, x]))
-        // @ts-ignore
-        .catch(x => postMessage([false, x]))
-    );
+        res(postMessage([false, e]));
+      }
+    });
   };
 
+export function createBlobUrl(fn: Function, dependencies: readonly string[]) {
+  const scripts =
+    dependencies.length > 0
+      ? `importScripts("${dependencies.join('","')}");`
+      : "";
+
   const blobScript = [
     scripts,
     "onmessage=",
-    `(${r.toString()})(${fn.toString()})`
+    `(${inlineWorkExecution.toString()})(${fn.toString()})`
   ];
 
   const blob = new Blob(blobScript, { type: "text/javascript" });
@@ -39,16 +51,15 @@ export function useWorkerFunction<
   TArgs extends Array<any>
 >(fn: (...args: TArgs) => T, options?: WebWorkerFunctionOptions) {
   // reactive
-  const dependencies = computed(() => options && unwrap(options.dependencies));
+  const dependencies = computed(
+    () => (options && unwrap(options.dependencies)) || []
+  );
   const timeoutRef = computed(() => options && unwrap(options.timeout));
 
   const promise = useCancellablePromise(
     (...args: TArgs) =>
       new Promise((res, rej) => {
-        const blobUrl = createBlobUrl(
-          fn,
-          (dependencies.value as string[]) || []
-        );
+        const blobUrl = createBlobUrl(fn, dependencies.value);
         const worker = new Worker(blobUrl);
 
         let timeoutId = -1;
@@ -61,21 +72,48 @@ export function useWorkerFunction<
           removeWatch();
         };
 
-        const removeWatch = watch(promise.cancelled, terminate, { lazy: true });
-
-        worker.onmessage = e => {
-          if (e.data[0]) {
-            res(e.data[1]);
-          } else {
-            rej(e.data[1]);
-          }
-          terminate();
-        };
+        // if the last argument is ref(false) we should also track it
+        const watchCancel =
+          args.length === fn.length + 1 &&
+          isRef(args[args.length - 1]) &&
+          args[args.length - 1].value === false
+            ? computed(
+                () => promise.cancelled.value || args[args.length - 1].value
+              )
+            : promise.cancelled;
+
+        const removeWatch = watchCancel
+          ? watch(
+              watchCancel as any,
+              () => {
+                terminate();
+                res(undefined);
+              },
+              { lazy: true }
+            )
+          : NO_OP;
+
+        worker.addEventListener(
+          "message",
+          e => {
+            if (e.data[0]) {
+              res(e.data[1]);
+            } else {
+              rej(e.data[1]);
+            }
+            terminate();
+          },
+          PASSIVE_EV
+        );
 
-        worker.onerror = e => {
-          rej(e);
-          terminate();
-        };
+        worker.addEventListener(
+          "error",
+          e => {
+            terminate();
+            rej(e);
+          },
+          PASSIVE_EV
+        );
 
         worker.postMessage([...args]);
 

From d3925cc0cbc0012cc89922973fd61b60fe515d03 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Tue, 31 Mar 2020 20:03:00 +0100
Subject: [PATCH 08/11] docs for workerFunction

---
 .../components/ValidationExample.vue          |   4 +-
 .../components/WorkerFunctionExample.vue      | 110 +++++++++++++++++
 docs/api/web.api.md                           |   5 +-
 docs/composable/validation/validation.md      |   4 +-
 docs/composable/web/workerFunction.md         | 112 +++++++++++++++++-
 .../src/components/TodoList.vue               |   4 +-
 .../src/components/Validation.vue             |  11 +-
 packages/web/src/web/workerFunction.ts        |  18 ++-
 8 files changed, 243 insertions(+), 25 deletions(-)
 create mode 100644 docs/.vuepress/components/WorkerFunctionExample.vue

diff --git a/docs/.vuepress/components/ValidationExample.vue b/docs/.vuepress/components/ValidationExample.vue
index 9cdbc4bef..4e4e61976 100644
--- a/docs/.vuepress/components/ValidationExample.vue
+++ b/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("");
diff --git a/docs/.vuepress/components/WorkerFunctionExample.vue b/docs/.vuepress/components/WorkerFunctionExample.vue
new file mode 100644
index 000000000..ef73e3632
--- /dev/null
+++ b/docs/.vuepress/components/WorkerFunctionExample.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <h3>Sort</h3>
+    <p>time: {{ now }}</p>
+
+    <div>
+      <label>Size</label>
+      <input v-model.number="size" type="number" />
+    </div>
+    <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="suffleArray">Function</button>
+      </li>
+      <li>
+        <button @click="suffleWorker" :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 bubleSort = 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(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 suffleArray = () => {
+      sortedNumbers.value = bubleSort(numbers);
+    };
+    const {
+      exec,
+      loading: working,
+      error,
+      cancelled
+    } = useWorkerFunction(bubleSort, { timeout });
+    const suffleWorker = () => {
+      exec(numbers)
+        .then(x => (sortedNumbers.value = x))
+        .catch(x => (sortedNumbers.value = ["error", x]));
+    };
+
+    return {
+      now,
+      timeout,
+
+      size,
+      firstSegment,
+      lastSegment,
+
+      suffleArray,
+
+      suffleWorker,
+      working,
+      error,
+      cancelled
+    };
+  }
+});
+</script>
diff --git a/docs/api/web.api.md b/docs/api/web.api.md
index 4b83f0f4f..685e2a475 100644
--- a/docs/api/web.api.md
+++ b/docs/api/web.api.md
@@ -733,10 +733,7 @@ export function useWorker<TData = any, TArgs = any | any[]>(
 };
 
 // @public (undocumented)
-export function useWorkerFunction<
-  T extends Promise<any>,
-  TArgs extends Array<any>
->(
+export function useWorkerFunction<T, TArgs extends Array<any>>(
   fn: (...args: TArgs) => T,
   options?: WebWorkerFunctionOptions
 ): import("../../../core/src").PromiseResultFactory<Promise<unknown>, TArgs> &
diff --git a/docs/composable/validation/validation.md b/docs/composable/validation/validation.md
index 6562c5117..4f9201225 100644
--- a/docs/composable/validation/validation.md
+++ b/docs/composable/validation/validation.md
@@ -249,12 +249,12 @@ interface ValidationGroupResult {
 </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("");
diff --git a/docs/composable/web/workerFunction.md b/docs/composable/web/workerFunction.md
index 1c05fb998..624676e92 100644
--- a/docs/composable/web/workerFunction.md
+++ b/docs/composable/web/workerFunction.md
@@ -58,9 +58,119 @@ const { exec, cancel } = useWorkerFunction();
 ## Example
 
 <!-- <on-scroll-example/> -->
+<worker-function-example/>
 
 ### Code
 
 ```vue
-
+<template>
+  <div>
+    <h3>Sort</h3>
+    <p>time: {{ now }}</p>
+
+    <div>
+      <label>Size</label>
+      <input v-model.number="size" type="number" />
+    </div>
+    <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="suffleArray">Function</button>
+      </li>
+      <li>
+        <button @click="suffleWorker" :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 bubleSort = 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(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 suffleArray = () => {
+      sortedNumbers.value = bubleSort(numbers);
+    };
+    const {
+      exec,
+      loading: working,
+      error,
+      cancelled
+    } = useWorkerFunction(bubleSort, { timeout });
+    const suffleWorker = () => {
+      exec(numbers)
+        .then(x => (sortedNumbers.value = x))
+        .catch(x => (sortedNumbers.value = ["error", x]));
+    };
+
+    return {
+      now,
+      timeout,
+
+      size,
+      firstSegment,
+      lastSegment,
+
+      suffleArray,
+
+      suffleWorker,
+      working,
+      error,
+      cancelled
+    };
+  }
+});
+</script>
 ```
diff --git a/examples/vue-composable-example/src/components/TodoList.vue b/examples/vue-composable-example/src/components/TodoList.vue
index 92cddb1bc..bc37a4eb4 100644
--- a/examples/vue-composable-example/src/components/TodoList.vue
+++ b/examples/vue-composable-example/src/components/TodoList.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { ref, createComponent, reactive, toRefs } from "@vue/composition-api";
+import { ref, defineComponent, reactive, toRefs } from "@vue/composition-api";
 
 type Todo = {
   id: number;
@@ -21,7 +21,7 @@ type EventT = {
   todos: Todo[];
 };
 
-export default createComponent({
+export default defineComponent({
   setup() {
     const event: Event = <any>reactive({
       todos: []
diff --git a/examples/vue-composable-example/src/components/Validation.vue b/examples/vue-composable-example/src/components/Validation.vue
index 7e424cfc5..d939a90ed 100644
--- a/examples/vue-composable-example/src/components/Validation.vue
+++ b/examples/vue-composable-example/src/components/Validation.vue
@@ -6,12 +6,7 @@
       <input v-model="form.lastName.$value" placeholder="lastName" />
       <input v-model="form.password.$value" placeholder="password" />
       <input v-model="form.samePassword.$value" placeholder="password2" />
-      <p
-        v-if="
-          form.samePassword.$dirty &&
-            form.samePassword.match.$invalid
-        "
-      >
+      <p v-if="form.samePassword.$dirty && form.samePassword.match.$invalid">
         {{ form.samePassword.match.$message }}
       </p>
     </form>
@@ -20,12 +15,12 @@
 </template>
 
 <script>
-import { createComponent, ref, reactive } from "@vue/composition-api";
+import { defineComponent, ref, reactive } from "@vue/composition-api";
 import { useValidation } from "vue-composable";
 
 const required = x => !!x;
 
-export default createComponent({
+export default defineComponent({
   setup() {
     const name = ref("pikax");
     const surname = ref("stuff");
diff --git a/packages/web/src/web/workerFunction.ts b/packages/web/src/web/workerFunction.ts
index 21f6edfcf..ec8f4a112 100644
--- a/packages/web/src/web/workerFunction.ts
+++ b/packages/web/src/web/workerFunction.ts
@@ -3,7 +3,8 @@ import {
   RefTyped,
   unwrap,
   PASSIVE_EV,
-  NO_OP
+  NO_OP,
+  isClient
 } from "@vue-composable/core";
 import { watch, computed, isRef } from "@vue/composition-api";
 
@@ -13,7 +14,7 @@ export const inlineWorkExecution = (f: Function) =>
 
     return new Promise(res => {
       try {
-        Promise.resolve(f(...args))
+        Promise.resolve(f.apply(f, args))
           // @ts-ignore
           .then(x => res(postMessage([true, x])))
           // @ts-ignore
@@ -46,16 +47,21 @@ export interface WebWorkerFunctionOptions {
   timeout?: RefTyped<number>;
 }
 
-export function useWorkerFunction<
-  T extends Promise<any>,
-  TArgs extends Array<any>
->(fn: (...args: TArgs) => T, options?: WebWorkerFunctionOptions) {
+export function useWorkerFunction<T, TArgs extends Array<any>>(
+  fn: (...args: TArgs) => T,
+  options?: WebWorkerFunctionOptions
+) {
+  const supported = isClient && "Worker" in self;
   // reactive
   const dependencies = computed(
     () => (options && unwrap(options.dependencies)) || []
   );
   const timeoutRef = computed(() => options && unwrap(options.timeout));
 
+  if (!supported) {
+    return useCancellablePromise(fn, { lazy: true, throwException: true });
+  }
+
   const promise = useCancellablePromise(
     (...args: TArgs) =>
       new Promise((res, rej) => {

From cab07f174121ea7f68bbbfa00b717559a96408f6 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Mon, 6 Apr 2020 20:33:16 +0100
Subject: [PATCH 09/11] tests and fix example

---
 .../components/WorkerFunctionExample.vue      | 10 +++---
 docs/api/web.api.md                           | 33 +++++++++++++++++++
 .../__tests__/web/workerFunction.ssr.spec.ts  | 16 +++++++++
 3 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 packages/web/__tests__/web/workerFunction.ssr.spec.ts

diff --git a/docs/.vuepress/components/WorkerFunctionExample.vue b/docs/.vuepress/components/WorkerFunctionExample.vue
index ef73e3632..baefaafdb 100644
--- a/docs/.vuepress/components/WorkerFunctionExample.vue
+++ b/docs/.vuepress/components/WorkerFunctionExample.vue
@@ -2,11 +2,10 @@
   <div>
     <h3>Sort</h3>
     <p>time: {{ now }}</p>
-
-    <div>
-      <label>Size</label>
-      <input v-model.number="size" type="number" />
-    </div>
+    <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" />
@@ -94,7 +93,6 @@ export default defineComponent({
       now,
       timeout,
 
-      size,
       firstSegment,
       lastSegment,
 
diff --git a/docs/api/web.api.md b/docs/api/web.api.md
index e255d00dc..3c759dec4 100644
--- a/docs/api/web.api.md
+++ b/docs/api/web.api.md
@@ -58,6 +58,9 @@ export interface CssVariablesMethods {
   supported: boolean;
 }
 
+// @public (undocumented)
+export function exposeWorker(this: Worker, func: (...args: any[]) => any): void;
+
 // @public (undocumented)
 export interface GeolocationOptions {
   immediate?: boolean;
@@ -688,6 +691,28 @@ export function useWebStorage(
   remove: () => boolean;
 };
 
+// @public (undocumented)
+export function useWorker<TData = any, TArgs = any | any[]>(
+  stringUrl: string | URL,
+  args?: TArgs,
+  options?: WorkerOptions
+): {
+  worker: Worker;
+  data: import("@vue/composition-api").Ref<TData | undefined>;
+  postMessage: (data: TArgs) => void;
+  terminate: () => void;
+  errorEvent: import("@vue/composition-api").Ref<Event | undefined>;
+  errored: import("@vue/composition-api").Ref<boolean>;
+  terminated: import("@vue/composition-api").Ref<boolean>;
+};
+
+// @public (undocumented)
+export function useWorkerFunction<T, TArgs extends Array<any>>(
+  fn: (...args: TArgs) => T,
+  options?: WebWorkerFunctionOptions
+): import("../../../core/src").PromiseResultFactory<Promise<unknown>, TArgs> &
+  import("../../../core/src").CancellablePromiseResult<any>;
+
 // @public (undocumented)
 export interface WebStorage {
   // (undocumented)
@@ -710,5 +735,13 @@ export interface WebStorage {
   updateItem(key: string, value: string): void;
 }
 
+// @public (undocumented)
+export interface WebWorkerFunctionOptions {
+  // (undocumented)
+  dependencies?: RefTyped<string[]>;
+  // (undocumented)
+  timeout?: RefTyped<number>;
+}
+
 // (No @packageDocumentation comment for this package)
 ```
diff --git a/packages/web/__tests__/web/workerFunction.ssr.spec.ts b/packages/web/__tests__/web/workerFunction.ssr.spec.ts
new file mode 100644
index 000000000..6b91e40da
--- /dev/null
+++ b/packages/web/__tests__/web/workerFunction.ssr.spec.ts
@@ -0,0 +1,16 @@
+jest.mock("@vue-composable/core", () => ({
+  ...jest.requireActual("@vue-composable/core"),
+  isClient: false,
+  useCancellablePromise: jest.fn()
+}));
+import { useWorkerFunction } from "../../src/web/workerFunction";
+import { useCancellablePromise } from "@vue-composable/core";
+
+describe("worker function SSR", () => {
+  it("should return cancelablePromise", () => {
+    const r = { a: 1 };
+    (useCancellablePromise as jest.Mock<any, any>).mockReturnValue(r);
+
+    expect(useWorkerFunction(() => 1 + 2)).toBe(r);
+  });
+});

From a93aae7d600a74ad9738a0911e54de06e4e9ddd0 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Mon, 6 Apr 2020 21:23:51 +0100
Subject: [PATCH 10/11] fix tests, allow sending arrays on expose, support of
 generators

---
 docs/.vuepress/components/WorkerExample.vue   |  87 ++++++++++++
 .../components/WorkerFunctionExample.vue      |  20 +--
 docs/.vuepress/public/worker.example.js       |  56 ++++++++
 docs/composable/web/worker.md                 | 132 +++++++++++++++++-
 docs/composable/web/workerFunction.md         |  40 +++++-
 packages/web/__tests__/web/worker.spec.ts     |   6 +-
 packages/web/__tests__/web/worker.srr.spec.ts |  15 ++
 packages/web/src/web/worker.ts                |  27 +++-
 8 files changed, 359 insertions(+), 24 deletions(-)
 create mode 100644 docs/.vuepress/components/WorkerExample.vue
 create mode 100644 docs/.vuepress/public/worker.example.js
 create mode 100644 packages/web/__tests__/web/worker.srr.spec.ts

diff --git a/docs/.vuepress/components/WorkerExample.vue b/docs/.vuepress/components/WorkerExample.vue
new file mode 100644
index 000000000..8d80e53a6
--- /dev/null
+++ b/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>
diff --git a/docs/.vuepress/components/WorkerFunctionExample.vue b/docs/.vuepress/components/WorkerFunctionExample.vue
index baefaafdb..1468b0b46 100644
--- a/docs/.vuepress/components/WorkerFunctionExample.vue
+++ b/docs/.vuepress/components/WorkerFunctionExample.vue
@@ -20,10 +20,10 @@
 
     <ul>
       <li>
-        <button @click="suffleArray">Function</button>
+        <button @click="sortArray">Function</button>
       </li>
       <li>
-        <button @click="suffleWorker" :disabled="working">Worker</button>
+        <button @click="sortWorker" :disabled="working">Worker</button>
         <p v-if="cancelled" :style="{ color: 'red' }">{{ error }}</p>
       </li>
     </ul>
@@ -39,7 +39,7 @@ import {
 } from "@vue/composition-api";
 import { useWorkerFunction, useDateNow } from "vue-composable";
 
-const bubleSort = input => {
+const bubbleSort = input => {
   let swap;
   let n = input.length - 1;
   const sortedArray = input.slice();
@@ -62,7 +62,7 @@ const bubleSort = input => {
 export default defineComponent({
   name: "worker-function-example",
   setup() {
-    const timeout = ref(1500);
+    const timeout = ref(15000);
     const { now } = useDateNow({ refreshMs: 10 });
 
     const numbers = [...Array(50000)].map(() =>
@@ -74,16 +74,16 @@ export default defineComponent({
     const firstSegment = computed(() => sortedNumbers.value.slice(0, 10));
     const lastSegment = computed(() => sortedNumbers.value.slice(-10));
 
-    const suffleArray = () => {
-      sortedNumbers.value = bubleSort(numbers);
+    const sortArray = () => {
+      sortedNumbers.value = bubbleSort(numbers);
     };
     const {
       exec,
       loading: working,
       error,
       cancelled
-    } = useWorkerFunction(bubleSort, { timeout });
-    const suffleWorker = () => {
+    } = useWorkerFunction(bubbleSort, { timeout });
+    const sortWorker = () => {
       exec(numbers)
         .then(x => (sortedNumbers.value = x))
         .catch(x => (sortedNumbers.value = ["error", x]));
@@ -96,9 +96,9 @@ export default defineComponent({
       firstSegment,
       lastSegment,
 
-      suffleArray,
+      sortArray,
 
-      suffleWorker,
+      sortWorker,
       working,
       error,
       cancelled
diff --git a/docs/.vuepress/public/worker.example.js b/docs/.vuepress/public/worker.example.js
new file mode 100644
index 000000000..ad636968e
--- /dev/null
+++ b/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);
diff --git a/docs/composable/web/worker.md b/docs/composable/web/worker.md
index de2ab7a4e..91af1d0a2 100644
--- a/docs/composable/web/worker.md
+++ b/docs/composable/web/worker.md
@@ -51,6 +51,8 @@ const { postMessage, terminate } = useWorker();
 
 ## Inside the worker
 
+Inside of worker you can use the `exposeWorker`, it will post the result and execute the method when receiving the message.
+
 ```js
 // super.worker.js
 import { exposeWorker } from "vue-composable";
@@ -60,12 +62,138 @@ const max = numbers => Math.max(...numbers);
 exposeWorker(max);
 ```
 
+::: tip
+`exposeWorker` you can use `yield` to sending a stream of data to the main thread
+:::
+
 ## Example
 
-<!-- <on-scroll-example/> -->
+<worker-example/>
 
 ### Code
 
-```vue
+You can find the `worker` used in this example at [worker.example.js](https://pikax.me/vue-composable/worker.example.js)
+
+```js
+// worker.example.js
 
+import { exposeWorker } from "vue-composable";
+
+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);
+```
+
+```vue
+<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>
 ```
diff --git a/docs/composable/web/workerFunction.md b/docs/composable/web/workerFunction.md
index 624676e92..9007ede99 100644
--- a/docs/composable/web/workerFunction.md
+++ b/docs/composable/web/workerFunction.md
@@ -96,6 +96,39 @@ const { exec, cancel } = useWorkerFunction();
   </div>
 </template>
 
+<script>
+<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="suffleArray">Function</button>
+      </li>
+      <li>
+        <button @click="suffleWorker" :disabled="working">Worker</button>
+        <p v-if="cancelled" :style="{ color: 'red' }">{{ error }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
 <script>
 import {
   defineComponent,
@@ -105,7 +138,7 @@ import {
 } from "@vue/composition-api";
 import { useWorkerFunction, useDateNow } from "vue-composable";
 
-const bubleSort = input => {
+const bubbleSort = input => {
   let swap;
   let n = input.length - 1;
   const sortedArray = input.slice();
@@ -141,14 +174,14 @@ export default defineComponent({
     const lastSegment = computed(() => sortedNumbers.value.slice(-10));
 
     const suffleArray = () => {
-      sortedNumbers.value = bubleSort(numbers);
+      sortedNumbers.value = bubbleSort(numbers);
     };
     const {
       exec,
       loading: working,
       error,
       cancelled
-    } = useWorkerFunction(bubleSort, { timeout });
+    } = useWorkerFunction(bubbleSort, { timeout });
     const suffleWorker = () => {
       exec(numbers)
         .then(x => (sortedNumbers.value = x))
@@ -159,7 +192,6 @@ export default defineComponent({
       now,
       timeout,
 
-      size,
       firstSegment,
       lastSegment,
 
diff --git a/packages/web/__tests__/web/worker.spec.ts b/packages/web/__tests__/web/worker.spec.ts
index 96bcd97fe..230603f56 100644
--- a/packages/web/__tests__/web/worker.spec.ts
+++ b/packages/web/__tests__/web/worker.spec.ts
@@ -225,11 +225,11 @@ describe("worker", () => {
       expect(postMessageFn).toHaveBeenLastCalledWith(expected);
 
       expected = ["1"];
-      await send([expected]);
+      await send(expected);
       expect(postMessageFn).toHaveBeenLastCalledWith(expected);
 
       expected = [1, 3, 5, "rr"];
-      await send([expected]);
+      await send(expected);
       expect(postMessageFn).toHaveBeenLastCalledWith(expected);
 
       expected = { a: 1 };
@@ -237,7 +237,7 @@ describe("worker", () => {
       expect(postMessageFn).toHaveBeenLastCalledWith(expected);
 
       expected = 11;
-      await send([expected]);
+      await send(expected);
       expect(postMessageFn).toHaveBeenLastCalledWith(expected);
 
       postMessageFn.mockClear();
diff --git a/packages/web/__tests__/web/worker.srr.spec.ts b/packages/web/__tests__/web/worker.srr.spec.ts
new file mode 100644
index 000000000..d0fb6d2a2
--- /dev/null
+++ b/packages/web/__tests__/web/worker.srr.spec.ts
@@ -0,0 +1,15 @@
+jest.mock("@vue-composable/core", () => ({
+  ...jest.requireActual("@vue-composable/core"),
+  isClient: false
+}));
+import { useWorker } from "../../src/web/worker";
+
+describe("worker function SSR", () => {
+  it("should return terminated", () => {
+    expect(useWorker("")).toMatchObject({
+      terminated: {
+        value: true
+      }
+    });
+  });
+});
diff --git a/packages/web/src/web/worker.ts b/packages/web/src/web/worker.ts
index 91a24ebce..a36809d53 100644
--- a/packages/web/src/web/worker.ts
+++ b/packages/web/src/web/worker.ts
@@ -1,5 +1,5 @@
 import { ref, onUnmounted } from "@vue/composition-api";
-import { PASSIVE_EV } from "@vue-composable/core";
+import { PASSIVE_EV, isClient, NO_OP, isArray } from "@vue-composable/core";
 
 // from https://github.com/dai-shi/react-hooks-worker/blob/1e842ad15c558fc04dd7339a62aaa43f46d1c7cd/src/exposeWorker.js
 // export function exposeWorker(func: (...args: any[]) => any): void;
@@ -7,8 +7,6 @@ export function exposeWorker(this: Worker, func: (...args: any[]) => any) {
   this.onmessage = async (e: MessageEvent) => {
     const r = func(e.data);
 
-    console.warn(`returning`, r);
-
     if (r === undefined) {
       // istanbul ignore else
       if (__DEV__) {
@@ -19,6 +17,8 @@ export function exposeWorker(this: Worker, func: (...args: any[]) => any) {
       this.postMessage(r);
     } else if (r === null) {
       this.postMessage(r);
+    } else if (isArray(r)) {
+      this.postMessage(r);
     } else if (r[Symbol.asyncIterator]) {
       for await (const i of r) this.postMessage(i);
     } else if (r[Symbol.iterator]) {
@@ -34,11 +34,28 @@ export function useWorker<TData = any, TArgs = any | any[]>(
   args?: TArgs,
   options?: WorkerOptions
 ) {
+  const supported = isClient && "Worker" in self;
   const errorEvent = ref<Event>();
   const data = ref<TData>();
 
-  const terminated = ref(false);
-  const errored = ref(false);
+  const terminated = ref(!supported);
+  const errored = ref(!supported);
+
+  if (!supported) {
+    terminated.value = true;
+
+    return {
+      worker: undefined,
+      data,
+
+      postMessage: NO_OP,
+      terminate: NO_OP,
+
+      errorEvent,
+      errored,
+      terminated
+    };
+  }
 
   const worker = new Worker(stringUrl, options);
 

From 8097021db6984e209fff565b17cba4e7e6dd2358 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Mon, 6 Apr 2020 21:26:17 +0100
Subject: [PATCH 11/11] added webworker to readme

---
 readme.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/readme.md b/readme.md
index fa0d7ca67..339322f4c 100644
--- a/readme.md
+++ b/readme.md
@@ -108,6 +108,8 @@ Check our [documentation](https://pikax.me/vue-composable/)
 - [BroadcastChannel](https://pikax.me/vue-composable/composable/web/broadcastChannel) - reactive `BroadcastChannel API`
 - [Geolocation API](https://pikax.me/vue-composable/composable/web/geolocation)
 - [CSS variables](https://pikax.me/vue-composable/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
 
 ### External