Merge branch 'release/3.0.0-beta.3'

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,32 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**[Required] Describe the bug**
+A clear and concise description of what the bug is.
+
+**[Optional] To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**[Required] Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**[Optional] Screenshots**
+ If applicable, add screenshots to help explain your problem.
+
+**[Optional] Device (please complete the following information):**
+ - OS: [e.g. iOS, Android, Windows]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 2.0.0]
+
+**[Optional] context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen, with an example or pseudo code
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/generic-question.md

@@ -0,0 +1,10 @@
+---
+name: Generic Question
+about: A generic question
+title: ''
+labels: question
+assignees: ''
+
+---
+
+

example/src/pages/Csv/index.js

@@ -12,7 +12,7 @@ function App() {
 
   const [csvStatus, setCsvStatus] = React.useState(false);
   const [generateWorker] = useWorker(generateCsv);
-  const [csvWorker, csvWorkerStatus, killWorker] = useWorker(csvToJson);
+  const [csvWorker, { status: csvWorkerStatus, kill: killWorker }] = useWorker(csvToJson);
 
   React.useEffect(()=>{
     console.log("WORKER:", csvWorkerStatus);

example/src/pages/ExternalScripts/index.js

@@ -14,9 +14,10 @@ function App() {
   const { addToast } = useToasts();
 
   const [sortStatus, setSortStatus] = React.useState(false);
-  const [sortWorker, sortWorkerStatus, killWorker] = useWorker(sortDates, {
+
+  const [sortWorker, { status: sortWorkerStatus, kill: killWorker }] = useWorker(sortDates, {
     autoTerminate: false, // you should manually kill the worker using "killWorker()"
-    dependencies: [
+    remoteDependencies: [
       "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"
     ],
   });

example/src/pages/Sorting/index.js

@@ -14,7 +14,10 @@ function App() {
   const { addToast } = useToasts();
 
   const [sortStatus, setSortStatus] = React.useState(false);
-  const [sortWorker, sortWorkerStatus, killWorker] = useWorker(bubleSort);
+  const [sortWorker, {
+    status: sortWorkerStatus,
+    kill: killWorker
+  }] = useWorker(bubleSort);
 
   React.useEffect(()=>{
     console.log("WORKER:", sortWorkerStatus);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koale/useworker",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "main": "dist/index.js",

src/lib/createWorkerBlobUrl.ts

@@ -1,5 +1,5 @@
 import jobRunner from './jobRunner'
-import depsParser from './depsParser'
+import remoteDepsParser from './remoteDepsParser'
 
 /**
  * Converts the "fn" function into the syntax needed to be executed within a web worker
@@ -16,7 +16,7 @@ import depsParser from './depsParser'
  * .catch(postMessage(['ERROR', error])"
  */
 const createWorkerBlobUrl = (fn: Function, deps: string[]) => {
-  const blobCode = `${depsParser(deps)}; onmessage=(${jobRunner})(${fn})`
+  const blobCode = `${remoteDepsParser(deps)}; onmessage=(${jobRunner})(${fn})`
   const blob = new Blob([blobCode], { type: 'text/javascript' })
   const url = URL.createObjectURL(blob)
   return url

src/lib/depsParser.ts → src/lib/remoteDepsParser.ts

@@ -1,20 +1,20 @@
 /**
  *
- * Concatenates the dependencies into a comma separated string.
+ * Concatenates the remote dependencies into a comma separated string.
  * this string will then be passed as an argument to the "importScripts" function
  *
  * @param {Array.<String>}} deps array of string
  * @returns {String} a string composed by the concatenation of the array
  * elements "deps" and "importScripts".
  *
  * @example
- * depsParser(['demo1', 'demo2']) // return importScripts('demo1, demo2')
+ * remoteDepsParser(['http://js.com/1.js', 'http://js.com/2.js']) // return importScripts('http://js.com/1.js, http://js.com/2.js')
  */
-const depsParser = (deps: string[]) => {
+const remoteDepsParser = (deps: string[]) => {
   if (deps.length === 0) return ''
 
   const depsString = (deps.map(dep => `${dep}`)).toString()
   return `importScripts('${depsString}')`
 }
 
-export default depsParser
+export default remoteDepsParser

src/useWorker.ts

@@ -3,17 +3,22 @@ import createWorkerBlobUrl from './lib/createWorkerBlobUrl'
 import WORKER_STATUS from './lib/status'
 import { useDeepCallback } from './hook/useDeepCallback'
 
+type WorkerController = {
+  status: WORKER_STATUS;
+  kill: Function;
+}
+
 type Options = {
   timeout?: number;
-  dependencies?: string[];
+  remoteDependencies?: string[];
   autoTerminate?: boolean;
 }
 
 const PROMISE_RESOLVE = 'resolve'
 const PROMISE_REJECT = 'reject'
 const DEFAULT_OPTIONS: Options = {
   timeout: undefined,
-  dependencies: [],
+  remoteDependencies: [],
   autoTerminate: true,
 }
 
@@ -60,11 +65,11 @@ export const useWorker = <T extends (...fnArgs: any[]) => any>(
 
   const generateWorker = useDeepCallback(() => {
     const {
-      dependencies = DEFAULT_OPTIONS.dependencies,
+      remoteDependencies = DEFAULT_OPTIONS.remoteDependencies,
       timeout = DEFAULT_OPTIONS.timeout,
     } = options
 
-    const blobUrl = createWorkerBlobUrl(fn, dependencies!)
+    const blobUrl = createWorkerBlobUrl(fn, remoteDependencies!)
     const newWorker: Worker & { _url?: string } = new Worker(blobUrl)
     newWorker._url = blobUrl
 
@@ -120,6 +125,11 @@ export const useWorker = <T extends (...fnArgs: any[]) => any>(
     return callWorker(...fnArgs)
   }, [callWorker])
 
+  const workerController = {
+    status: workerStatus,
+    kill: killWorker,
+  }
+
   React.useEffect(() => {
     worker.current = generateWorker()
   }, [generateWorker])
@@ -129,6 +139,6 @@ export const useWorker = <T extends (...fnArgs: any[]) => any>(
   }, [killWorker])
 
   return [
-    workerHook, workerStatus, killWorker,
-  ] as [typeof workerHook, WORKER_STATUS, typeof killWorker]
+    workerHook, workerController,
+  ] as [typeof workerHook, WorkerController]
 }

website/docs/examples/external.md

@@ -25,7 +25,7 @@ title: External Scripts
 
   const [sortWorker, sortWorkerStatus, killWorker] = useWorker(sortDates, {
     timeout: 5000,
-    dependencies: [
+    remoteDependencies: [
       "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"
     ]
   });

website/docs/useworker.md

@@ -35,16 +35,16 @@ to view the values of `WORKER_STATUS` click here: [Status API](./workerstatus.md
 import { useWorker } from "@koale/useworker";
 const [workerFn, workerStatus, workerTerminate] = useWorker(fn, {
   timeout: undefined,
-  dependencies: []
+  remoteDependencies: []
 });
 ```
 
 ## Options API
 
-| Value        | Type            | Default   | Description                                                               |
-| ------------ | --------------- | --------- | ------------------------------------------------------------------------- |
-| timeout      | Number          | undefined | the number of milliseconds before killing the worker                      |
-| dependencies | Array of String | []        | an array that contains the external dependencies needed to run the worker |
+| Value              | Type            | Default   | Description                                                               |
+| ------------------ | --------------- | --------- | ------------------------------------------------------------------------- |
+| timeout            | Number          | undefined | the number of milliseconds before killing the worker                      |
+| remoteDependencies | Array of String | []        | an array that contains the remote dependencies needed to run the worker   |
 
 ## Options Example
 
@@ -55,7 +55,7 @@ const fn = dates => dates.sort(dateFns.compareAsc)
 
 const [workerFn, workerStatus, workerTerminate] = useWorker(fn, {
   timeout: 50000 // 5 seconds
-  dependencies: [
+  remoteDependencies: [
       "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js" // dateFns
     ]
 });