Main Functionality Done

Author: zonayedpca

example/src/App.js

@@ -1,12 +1,17 @@
 import React, { Component } from 'react'
 
-import ExampleComponent from 'react-web-worker'
+import WebWorker from 'react-web-worker'
+
+import message from './workers/message'
+import count from './workers/count'
 
 export default class App extends Component {
   render () {
+    const [ messageWorker, countWorker ] = WebWorker([message, count])
+    messageWorker.postMessage('Hi!')
     return (
       <div>
-        <ExampleComponent text='Working with Web Workers in React' />
+        <p>Web Worker</p>
       </div>
     )
   }

example/src/workers/count.js

@@ -0,0 +1,20 @@
+const count = () => {
+  let count = 0;
+  const countFunc = () => {
+    while(count < 1000000000) {
+      count++;
+    }
+  }
+  const sentData = () => {
+    // eslint-disable-next-line no-restricted-globals
+    self.postMessage({ count })
+  }
+
+  // eslint-disable-next-line no-restricted-globals
+  self.onmessage = () => {
+    countFunc();
+    sentData();
+  }
+}
+
+export default count;

example/src/workers/message.js

@@ -0,0 +1,16 @@
+const message = () => {
+  let text = 'Hello I am Your Web Worker'
+
+  const sentData = () => {
+    // eslint-disable-next-line no-restricted-globals
+    self.postMessage({ text })
+  }
+
+  // eslint-disable-next-line no-restricted-globals
+  self.onmessage = ({ data }) => {
+    console.log(data)
+    sentData()
+  }
+}
+
+export default message;

src/index.js

@@ -1,26 +1,9 @@
 /**
- * @class ExampleComponent
+ * @function WebWorker
  */
 
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import CreateWorker from './utils/CreateWorker'
 
-import styles from './styles.css'
-
-export default class ExampleComponent extends Component {
-  static propTypes = {
-    text: PropTypes.string
-  }
-
-  render() {
-    const {
-      text
-    } = this.props
-
-    return (
-      <div className={styles.test}>
-        Example Component Hello: {text}
-      </div>
-    )
-  }
+export default (files) => {
+  return files.map(file => new CreateWorker(file))
 }

src/utils/CreateWorker.js

@@ -0,0 +1,11 @@
+export default class CreateWorker {
+  constructor(worker) {
+    let code = worker.toString()
+    code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'))
+    // eslint-disable-next-line no-undef
+    code = new Blob([code], { type: 'application/javascript' })
+    // eslint-disable-next-line no-undef
+    code = new Worker(URL.createObjectURL(code))
+    return code
+  }
+}