Update

nodejs-stream.md

@@ -1,8 +1,22 @@
 ---
-title: Stream
+title: Node.js streams
 category: Node.js
+layout: 2017/sheet
 ---
 
+### Types
+
+| Stream      | Description                        |
+| ---         | ---                                |
+| `Readable`  | Data emitter                       |
+| `Writable`  | Data receiver                      |
+| `Transform` | Emitter and receiver               |
+| `Duplex`    | Emitter and receiver (independent) |
+
+See: [Stream](https://nodejs.org/api/stream.html#stream_stream) _(nodejs.org)_
+
+### Streams
+
 ```js
 const Readable = require('stream').Readable
 const Writable = require('stream').Writable
@@ -12,36 +26,71 @@ const Transform = require('stream').Transform
 ### Piping
 
 ```js
-clock()                 // Readable stream
+clock()              // Readable stream
-  .pipe(xformer())      // Transform stream
+  .pipe(xformer())   // Transform stream
-  .pipe(renderer())     // Writable stream
+  .pipe(renderer())  // Writable stream
 ```
 
-### Readable streams
+### Methods
 
-Readable streams are generators of data. Write data using `stream.push()`.
+```js
+stream.push(/*...*/)         // Emit a chunk
+stream.emit('error', error)  // Raise an error
+stream.push(null)            // Close a stream
+```
+
+### Events
+
+```js
+const st = source()
+st.on('data', (data) => { console.log('<-', data) })
+st.on('error', (err) => { console.log('!', err.message) })
+st.on('close', () => { console.log('** bye') })
+st.on('finish', () => { console.log('** bye') })
+```
+
+Assuming `source()` is a readable stream.
+
+### Flowing mode
+
+```js
+// Toggle flowing mode
+st.resume()
+st.pause()
+```
+
+```js
+// Automatically turns on flowing mode
+st.on('data', /*...*/)
+```
+
+Stream types
+------------
+{: .-three-column}
+
+### Readable
 
 ```js
 function clock () {
   const stream = new Readable({
     objectMode: true,
-    read: () => {} // implement this if you need on-demand reading
+    read() {}
   })
 
   setInterval(() => {
     stream.push({ time: new Date() })
-
-    if (error) return stream.emit('error', error)
-    if (eof) return stream.push(null)
   }, 1000)
 
   return stream
 }
+
+// Implement read() if you
+// need on-demand reading.
 ```
 
-### Transform streams
+Readable streams are generators of data. Write data using `stream.push()`.
 
-Pass the updated chunk to `done(null, chunk)`.
+### Transform
 
 ```js
 function xformer () {
@@ -50,13 +99,15 @@ function xformer () {
   return new Transform({
     objectMode: true,
     transform: (data, _, done) => {
-      done(null, { time: data.time, index: count++ })
+      done(null, { ...data, index: count++ })
     }
   })
 }
 ```
 
-### Writable streams
+Pass the updated chunk to `done(null, chunk)`.
+
+### Writable
 
 ```js
 function renderer () {
@@ -70,14 +121,16 @@ function renderer () {
 }
 ```
 
-### Reading
+### All together now
 
 ```js
-const st = source()
+clock()              // Readable stream
-st.on('data', (data) => { console.log('<-', data) })
+  .pipe(xformer())   // Transform stream
-st.on('close', () => { console.log('** bye') })
+  .pipe(renderer())  // Writable stream
 ```
 
 ## Also see
+{: .-one-column}
 
+- <https://nodejs.org/api/stream.html>
 - <https://github.com/substack/stream-handbook>

react.md

@@ -12,6 +12,11 @@ Example
 
 ### Basic example
 
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+```
+
 ```jsx
 class Hello extends React.Component {
   render () {