Add parser and serializer.

Author: ghengeveld

README.md

@@ -17,6 +17,7 @@ any messages or errors it sends, as well as the `postMessage` handler.
 - Provides easy access to the last message `data` and last `error`
 - Provides `postMessage` to send messages to the Web Worker
 - Provides `updatedAt` and `lastPostAt` metadata
+- Accepts `parser` and `serializer` for automatic message (de)serialization
 - Accepts `onMessage` and `onError` callbacks
 
 > This package was modeled after [`<Async>`](https://github.com/ghengeveld/react-async) which helps you deal with Promises in React.
@@ -80,6 +81,8 @@ const MyComponent = () => (
 
 - `url` {string} (required) Public url to the Web Worker file (or path relative to the root of your domain)
 - `options` {Object} Options passed to the Worker constructor
+- `parser` {Function} Transforms incoming messages (not errors)
+- `serializer` {Function} Transforms `postMessage` payload before sending
 - `onMessage` {Function} Callback function invoked when a message is received, passing message data as argument
 - `onError` {Function} Callback function invoked when an error is received, passing error object as argument
 
@@ -138,6 +141,30 @@ const MyComponent = () => (
 )
 ```
 
+### Using `parser` and `serializer` to automatically parse incoming messages and stringify outgoing messages
+
+```js
+import WebWorker from "react-webworker"
+
+const MyComponent = () => (
+  <WebWorker url="/worker.js" parser={JSON.parse} serializer={JSON.stringify}>
+    {({ data, error, postMessage, updatedAt, lastPostAt }) => (
+      <div>
+        {data && (
+          <div>
+            <strong>Received some data:</strong>
+            <pre>{JSON.stringify(data, null, 2)}</pre>
+          </div>
+        )}
+        <button onClick={() => postMessage({ foo: "bar" })}>Send</button>
+      </div>
+    )}
+  </WebWorker>
+)
+```
+
+> Note: the Worker must still implement JSON (de)serialization on its own end.
+
 ## Helper components
 
 `<WebWorker>` provides several helper components that make your JSX even more declarative.

src/index.js

@@ -18,8 +18,9 @@ const { Consumer, Provider } = React.createContext(getInitialState())
 class WebWorker extends React.Component {
   state = getInitialState()
 
-  onMessage = ({ data }) => {
+  onMessage = message => {
     if (!this.mounted) return
+    const data = this.props.parser ? this.props.parser(message.data) : message.data
     const date = new Date()
     this.setState(
       state => ({ data, error: undefined, messages: state.messages.concat({ data, date }), updatedAt: date }),
@@ -37,8 +38,9 @@ class WebWorker extends React.Component {
   }
 
   postMessage = data => {
+    const { serializer = x => x } = this.props
     const { postMessage = uninitialized } = this.worker || {}
-    this.setState({ lastPostAt: new Date() }, () => postMessage.call(this.worker, data))
+    this.setState({ lastPostAt: new Date() }, () => postMessage.call(this.worker, serializer(data)))
   }
 
   componentDidMount() {