diff --git a/CHANGELOG.md b/CHANGELOG.md index ee0778eb5..4a972ba4b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). - @@ -30,6 +40,7 @@ _2020-04-05_ - [useValidation] - Fix tracking of `$value` when is not `ref` - [TailwindCSS](https://pikax.me/vue-composable/composable/breakpoint/breakpointTailwindCSS) - improve typings and fix bug when sending custom breakpoints + > > > > > > > master ## 1.0.0-dev.16 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 @@ diff --git a/docs/.vuepress/components/WorkerFunctionExample.vue b/docs/.vuepress/components/WorkerFunctionExample.vue new file mode 100644 index 000000000..1468b0b46 --- /dev/null +++ b/docs/.vuepress/components/WorkerFunctionExample.vue @@ -0,0 +1,108 @@ + + + Sort + time: {{ now }} + + If UI thread is working the refresh rate should go down and the time will + stop + + + Timeout + + + + + Numbers: + {{ firstSegment }}... + {{ lastSegment }} + + + + + Function + + + Worker + {{ error }} + + + + + + diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 932f6be45..0d73570dc 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -171,7 +171,9 @@ module.exports = { ["composable/web/language", "Language"], ["composable/web/broadcastChannel", "BroadcastChannel API"], ["composable/web/geolocation", "Geolocation API"], - ["composable/web/cssVariables", "CSS variables"] + ["composable/web/cssVariables", "CSS variables"], + ["composable/web/worker", "WebWorker API"], + ["composable/web/workerFunction", "WebWorker Function"] ] }, { 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/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/api/core.api.md b/docs/api/core.api.md index 3736812c6..ede0a9c0c 100644 --- a/docs/api/core.api.md +++ b/docs/api/core.api.md @@ -3,13 +3,13 @@ > 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 { Ref } from "@vue/composition-api"; // @public (undocumented) -export interface ArrayPaginationResult> extends PaginationResult { - // (undocumented) - result: Readonly>; +export interface ArrayPaginationResult> + extends PaginationResult { + // (undocumented) + result: Readonly>; } // Warning: (ae-forgotten-export) The symbol "i18nDefinition" needs to be exported by the entry point index.d.ts @@ -17,21 +17,36 @@ export interface ArrayPaginationResult> extends PaginationR // Warning: (ae-forgotten-export) The symbol "I18nExtractLocale" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export function buildI18n, TMessage extends Record Promise)>>(definition: T): i18nResult>; +export function buildI18n< + T extends i18nDefinition, + TMessage extends Record Promise)> +>( + definition: T +): i18nResult< + keyof T["messages"], + I18nExtractLocale +>; // @public (undocumented) export interface CancellablePromiseResult { - // (undocumented) - cancel: (result?: TCancel) => void; - // (undocumented) - cancelled: Ref; + // (undocumented) + cancel: (result?: TCancel) => void; + // (undocumented) + cancelled: Ref; } // @public (undocumented) -export function debounce(func: F, waitMilliseconds?: number, options?: Options): F; +export function debounce( + func: F, + waitMilliseconds?: number, + options?: Options +): F; // @public (undocumented) -export function deepClone(result: T, ...sources: T[]): T; +export function deepClone( + result: T, + ...sources: T[] +): T; // Warning: (ae-forgotten-export) The symbol "RetryDelayFactory" needs to be exported by the entry point index.d.ts // @@ -43,18 +58,20 @@ export const FALSE_OP: () => boolean; // @public (undocumented) export interface FormatObject { - // (undocumented) - [id: string]: FormatValue; + // (undocumented) + [id: string]: FormatValue; } // @public (undocumented) -export type FormatValue = RefTyped | RefTyped | RefTyped; +export type FormatValue = + | RefTyped + | RefTyped + | RefTyped; // Warning: (ae-forgotten-export) The symbol "i18nMessageValue" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export interface i18n extends Record { -} +export interface i18n extends Record {} // @public (undocumented) export const isArray: (arg: any) => arg is any[]; @@ -100,47 +117,47 @@ export const noDelay: RetryDelayFactory; // @public (undocumented) export interface NowOptions { - refreshMs?: number; - sync?: boolean; + refreshMs?: number; + sync?: boolean; } // @public (undocumented) export type Options = { - isImmediate: boolean; + isImmediate: boolean; }; // @public (undocumented) export interface PaginationOptions { - // (undocumented) - currentPage: RefTyped; - // (undocumented) - pageSize: RefTyped; - // (undocumented) - total: RefTyped; + // (undocumented) + currentPage: RefTyped; + // (undocumented) + pageSize: RefTyped; + // (undocumented) + total: RefTyped; } // @public (undocumented) export interface PaginationResult { - // (undocumented) - currentPage: Ref; - // (undocumented) - first: PaginationControl; - // (undocumented) - last: PaginationControl; - // (undocumented) - lastPage: Readonly>; - // Warning: (ae-forgotten-export) The symbol "PaginationControl" needs to be exported by the entry point index.d.ts - // - // (undocumented) - next: PaginationControl; - // (undocumented) - offset: Ref; - // (undocumented) - pageSize: Ref; - // (undocumented) - prev: PaginationControl; - // (undocumented) - total: Ref; + // (undocumented) + currentPage: Ref; + // (undocumented) + first: PaginationControl; + // (undocumented) + last: PaginationControl; + // (undocumented) + lastPage: Readonly>; + // Warning: (ae-forgotten-export) The symbol "PaginationControl" needs to be exported by the entry point index.d.ts + // + // (undocumented) + next: PaginationControl; + // (undocumented) + offset: Ref; + // (undocumented) + pageSize: Ref; + // (undocumented) + prev: PaginationControl; + // (undocumented) + total: Ref; } // @public (undocumented) @@ -154,18 +171,21 @@ export function promisedTimeout(timeout: number): Promise; // @public (undocumented) export interface PromiseOptions { - lazy?: boolean; - throwException?: boolean; + lazy?: boolean; + throwException?: boolean; } // Warning: (ae-forgotten-export) The symbol "PromiseResult" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export interface PromiseResultFactory, TArgs extends Array = Array> extends PromiseResult { - // Warning: (ae-forgotten-export) The symbol "PromiseType" needs to be exported by the entry point index.d.ts - // - // (undocumented) - exec: (...args: TArgs) => Promise | undefined>; +export interface PromiseResultFactory< + T extends Promise, + TArgs extends Array = Array +> extends PromiseResult { + // Warning: (ae-forgotten-export) The symbol "PromiseType" needs to be exported by the entry point index.d.ts + // + // (undocumented) + exec: (...args: TArgs) => Promise | undefined>; } // @public (undocumented) @@ -177,17 +197,26 @@ export type RefTyped = T | Ref; // Warning: (ae-forgotten-export) The symbol "RetryReturn" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export interface RetryReturnFactory> extends RetryReturn { - exec(...args: TArgs): T; +export interface RetryReturnFactory> + extends RetryReturn { + exec(...args: TArgs): T; } // @public (undocumented) export interface RetryReturnNoFactory extends RetryReturn { - exec(fn: () => T): T; + exec(fn: () => T): T; } // @public (undocumented) -export function setI18n, TMessage extends Record Promise)>>(definition: T): i18nResult>; +export function setI18n< + T extends i18nDefinition, + TMessage extends Record Promise)> +>( + definition: T +): i18nResult< + keyof T["messages"], + I18nExtractLocale +>; // @public (undocumented) export function unwrap(o: RefTyped): T; @@ -196,162 +225,301 @@ export function unwrap(o: RefTyped): T; export type UnwrapRef = T extends Ref ? R : T; // @public (undocumented) -export function useArrayPagination, TR>(array: RefTyped, options?: Partial>): ArrayPaginationResult; +export function useArrayPagination, TR>( + array: RefTyped, + options?: Partial> +): ArrayPaginationResult; // @public (undocumented) -export function useCancellablePromise>(fn: (...args: TArgs) => Promise): PromiseResultFactory, TArgs> & CancellablePromiseResult; +export function useCancellablePromise>( + fn: (...args: TArgs) => Promise +): PromiseResultFactory, TArgs> & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise>(fn: (...args: TArgs) => Promise, lazy: boolean): PromiseResultFactory, TArgs> & CancellablePromiseResult; +export function useCancellablePromise>( + fn: (...args: TArgs) => Promise, + lazy: boolean +): PromiseResultFactory, TArgs> & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise>(fn: (...args: TArgs) => Promise, options: PromiseOptions): PromiseResultFactory, TArgs> & CancellablePromiseResult; +export function useCancellablePromise>( + fn: (...args: TArgs) => Promise, + options: PromiseOptions +): PromiseResultFactory, TArgs> & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise(fn: () => T): PromiseResultFactory> & CancellablePromiseResult; +export function useCancellablePromise( + fn: () => T +): PromiseResultFactory> & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise(fn: () => T, lazy: boolean): PromiseResultFactory> & CancellablePromiseResult; +export function useCancellablePromise( + fn: () => T, + lazy: boolean +): PromiseResultFactory> & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise(fn: () => T, options: PromiseOptions): PromiseResultFactory> & CancellablePromiseResult; +export function useCancellablePromise( + fn: () => T, + options: PromiseOptions +): PromiseResultFactory> & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise, TR, TArgs extends Array>(fn: (...args: TArgs) => T): PromiseResultFactory & CancellablePromiseResult; +export function useCancellablePromise< + T extends Promise, + TR, + TArgs extends Array +>( + fn: (...args: TArgs) => T +): PromiseResultFactory & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise, TR, TArgs extends Array>(fn: (...args: TArgs) => T, lazy: boolean): PromiseResultFactory & CancellablePromiseResult; +export function useCancellablePromise< + T extends Promise, + TR, + TArgs extends Array +>( + fn: (...args: TArgs) => T, + lazy: boolean +): PromiseResultFactory & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise, TR, TArgs extends Array>(fn: (...args: TArgs) => T, options: PromiseOptions): PromiseResultFactory & CancellablePromiseResult; +export function useCancellablePromise< + T extends Promise, + TR, + TArgs extends Array +>( + fn: (...args: TArgs) => T, + options: PromiseOptions +): PromiseResultFactory & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise(fn: () => T): PromiseResultFactory> & CancellablePromiseResult; +export function useCancellablePromise( + fn: () => T +): PromiseResultFactory> & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise(fn: () => T, lazy: boolean): PromiseResultFactory> & CancellablePromiseResult; +export function useCancellablePromise( + fn: () => T, + lazy: boolean +): PromiseResultFactory> & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise(fn: () => T, options: PromiseOptions): PromiseResultFactory> & CancellablePromiseResult; +export function useCancellablePromise( + fn: () => T, + options: PromiseOptions +): PromiseResultFactory> & CancellablePromiseResult; // @public (undocumented) -export function useCancellablePromise, TR>(fn: () => T): PromiseResultFactory & CancellablePromiseResult; +export function useCancellablePromise, TR>( + fn: () => T +): PromiseResultFactory & CancellablePromiseResult; // @public -export function useDateNow(options?: NowOptions): { - now: import("@vue/composition-api").Ref; - remove: () => void; +export function useDateNow( + options?: NowOptions +): { + now: import("@vue/composition-api").Ref; + remove: () => void; }; // @public -export function useDebounce(handler: T, wait?: number, options?: Options): T; +export function useDebounce( + handler: T, + wait?: number, + options?: Options +): T; // @public (undocumented) -export function useFormat(format: RefTyped>, obj?: RefTyped): Readonly>; +export function useFormat( + format: RefTyped>, + obj?: RefTyped +): Readonly>; // @public (undocumented) -export function useFormat(format: Readonly>, obj?: RefTyped): Readonly>; +export function useFormat( + format: Readonly>, + obj?: RefTyped +): Readonly>; // @public (undocumented) -export function useFormat(format: Readonly>, ...args: Array): Readonly>; +export function useFormat( + format: Readonly>, + ...args: Array +): Readonly>; // @public (undocumented) -export function useFormat(format: Readonly>, obj?: RefTyped | Array): Readonly>; +export function useFormat( + format: Readonly>, + obj?: RefTyped | Array +): Readonly>; // @public (undocumented) -export function useFormat(format: RefTyped, args: any): Readonly>; +export function useFormat( + format: RefTyped, + args: any +): Readonly>; // @public (undocumented) -export function useI18n, TMessage extends Record Promise)>>(definition: T): i18nResult; +export function useI18n< + T extends i18nDefinition, + TMessage extends Record Promise)> +>(definition: T): i18nResult; // @public (undocumented) export function useI18n(): i18nResult | void; // @public -export function useNow(options?: NowOptions & UseNowOptions): { - now: import("@vue/composition-api").Ref; - remove: () => void; +export function useNow( + options?: NowOptions & UseNowOptions +): { + now: import("@vue/composition-api").Ref; + remove: () => void; }; // @public (undocumented) export interface UseNowOptions { - timeFn?: () => number; + timeFn?: () => number; } // @public (undocumented) export function usePagination(options: PaginationOptions): PaginationResult; // @public (undocumented) -export function usePath(source: RefTyped, path: RefTyped, separator?: string, notFoundReturn?: UsePathNotFoundReturn): Ref>; +export function usePath( + source: RefTyped, + path: RefTyped, + separator?: string, + notFoundReturn?: UsePathNotFoundReturn +): Ref>; // @public (undocumented) -export type UsePathNotFoundReturn = (path: string, source: any, fullPath: string, originalSource: any) => T; +export type UsePathNotFoundReturn = ( + path: string, + source: any, + fullPath: string, + originalSource: any +) => T; // @public -export function usePerformanceNow(options?: NowOptions): { - now: import("@vue/composition-api").Ref; - remove: () => void; +export function usePerformanceNow( + options?: NowOptions +): { + now: import("@vue/composition-api").Ref; + remove: () => void; }; // @public (undocumented) -export function usePromise = Array>(fn: (...args: TArgs) => Promise, lazy?: boolean): PromiseResultFactory, TArgs>; +export function usePromise = Array>( + fn: (...args: TArgs) => Promise, + lazy?: boolean +): PromiseResultFactory, TArgs>; // @public (undocumented) -export function usePromise = Array>(fn: (...args: TArgs) => Promise, options: PromiseOptions): PromiseResultFactory, TArgs>; +export function usePromise = Array>( + fn: (...args: TArgs) => Promise, + options: PromiseOptions +): PromiseResultFactory, TArgs>; // @public (undocumented) -export function usePromise = Array>(fn: (...args: TArgs) => Promise): PromiseResultFactory, TArgs>; +export function usePromise = Array>( + fn: (...args: TArgs) => Promise +): PromiseResultFactory, TArgs>; // @public (undocumented) -export function usePromise = Array>(fn: (...args: TArgs) => T, lazy: boolean): PromiseResultFactory, TArgs>; +export function usePromise = Array>( + fn: (...args: TArgs) => T, + lazy: boolean +): PromiseResultFactory, TArgs>; // @public (undocumented) -export function usePromise = Array>(fn: (...args: TArgs) => T, options: PromiseOptions): PromiseResultFactory, TArgs>; +export function usePromise = Array>( + fn: (...args: TArgs) => T, + options: PromiseOptions +): PromiseResultFactory, TArgs>; // @public (undocumented) -export function usePromise = Array>(fn: (...args: TArgs) => T): PromiseResultFactory, TArgs>; +export function usePromise = Array>( + fn: (...args: TArgs) => T +): PromiseResultFactory, TArgs>; // @public (undocumented) -export function usePromise(fn: () => Promise, lazy: boolean): PromiseResultFactory>; +export function usePromise( + fn: () => Promise, + lazy: boolean +): PromiseResultFactory>; // @public (undocumented) -export function usePromise(fn: () => Promise
time: {{ now }}
+ Numbers: + {{ firstSegment }}... + {{ lastSegment }} +
{{ error }}