Updates

Author: jfairbank

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "latest",
+    "react"
+  ],
+  "plugins": [
+    "transform-class-properties",
+    "transform-export-extensions",
+    "transform-object-rest-spread",
+    "transform-runtime"
+  ]
+}

.eslintrc

@@ -0,0 +1,28 @@
+{
+  "parser": "babel-eslint",
+  "extends": "airbnb",
+  "plugins": [
+    "react",
+    "jsx-a11y",
+    "import"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "comma-dangle": ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline",
+      "functions": "ignore"
+    }],
+    "global-require": 0,
+    "import/no-webpack-loader-syntax": 0,
+    "react/jsx-filename-extension": 0
+  },
+  "settings": {
+    "import/resolver": "webpack"
+  }
+}

.eslintrc.json

@@ -0,0 +1 @@
+[ 1, 2, 3, 4, 5 ]

Guardfile

@@ -0,0 +1,9 @@
+async function printCustomerNames() {
+  const orders = await fetchOrders();
+  const filtered = orders.filter(
+    order => order.customerName === 'Tucker'
+  );
+  const orderIds = filtered.map(order => order.id);
+
+  orderIds.forEach(id => console.log(id));
+}

code/babel/babelrc-manual.js

@@ -0,0 +1,6 @@
+fetchOrders()
+  .subscribe((orders) => {
+    orders.forEach((order) => {
+      console.log(order);
+    });
+  });

code/babel/babelrc-stage-3.js

@@ -0,0 +1,7 @@
+fetchOrders()
+  .mergeAll()
+  .filter(
+    order => order.customerName === 'Tucker'
+  )
+  .map(order => order.id)
+  .subscribe(id => console.log(id));

code/observables/array.js

@@ -0,0 +1,19 @@
+const { Observable } = require('rxjs');
+const axios = require('axios');
+
+Observable.ajax = {
+  get(url) {
+    return Observable.fromPromise(
+      axios.get(`http://localhost:3000${url}`)
+        .then(({ data }) => data)
+    );
+  },
+};
+
+function fetchOrders() {
+  return Observable.ajax.get('/orders');
+}
+
+fetchOrders()
+  .mergeAll()
+  .subscribe(x => console.log(x));

code/observables/async/async-2.js

@@ -0,0 +1,12 @@
+function fetchOrders() {
+  return Observable.create((subscriber) => {
+    fetchOrdersFromDb((orders) => {
+      subscriber.next(orders);
+      subscriber.complete();
+    });
+  });
+}
+
+fetchOrders()
+  .mergeAll()
+  .subscribe(x => console.log(x));

code/observables/async/observable-1.js

@@ -0,0 +1,6 @@
+fetchOrders()
+  .then((orders) => {
+    orders.forEach((order) => {
+      console.log(order);
+    });
+  });

code/observables/async/observable-2.js

@@ -0,0 +1,8 @@
+fetchOrders()
+  .then(orders => orders.filter(
+    order => order.customerName === 'Tucker'
+  ))
+  .then(orders => orders.map(order => order.id))
+  .then((orderIds) => {
+    orderIds.forEach(id => console.log(id));
+  });

code/observables/async/observable-3.js

@@ -0,0 +1,8 @@
+const subscription = fetchOrders()
+  .subscribe((orders) => {
+    orders.forEach((order) => {
+      console.log(order);
+    });
+  });
+
+subscription.unsubscribe();

code/observables/async/observable-4.js

@@ -0,0 +1,8 @@
+const promise = fetchOrders()
+  .then((orders) => {
+    orders.foreach((order) => {
+      console.log(order);
+    });
+  });
+
+promise.cancel();

code/observables/async/promise-1.js

@@ -0,0 +1,13 @@
+function fetchOrdersStream() {
+  return Observable.create((subscriber) => {
+    const socket = new WebSocket('ws://example.com');
+
+    socket.addEventListener('message', (event) => {
+      subscriber.next(event.data);
+    });
+
+    return () => {
+      socket.close();
+    };
+  });
+}

code/observables/async/promise-2.js

@@ -0,0 +1,7 @@
+Observable.of(1, 2, 3)
+  .map(n => n * 2)
+  .subscribe(x => console.log(x));
+
+// 2
+// 4
+// 6

code/observables/cancel/observable-1.js

@@ -0,0 +1,6 @@
+Observable.of(1)
+  .delay(1000)
+  .subscribe(x => console.log(x))
+
+// <tick>
+// 1

code/observables/cancel/promise-1.js

@@ -0,0 +1,6 @@
+Observable.fromEvent(incrementBtn, 'click')
+  .mapTo(1)
+  .scan((acc, curr) => acc + curr, 0)
+  .subscribe((counter) => {
+    counterEl.innerHTML = counter;
+  });

code/observables/cleanup/cleanup-1.js

@@ -0,0 +1,16 @@
+const { Observable } = require('rxjs');
+
+const incrementBtn = document.getElementById('increment');
+const decrementBtn = document.getElementById('decrement');
+const counterEl = document.getElementById('counter');
+
+const source = Observable.merge(
+  Observable.fromEvent(incrementBtn, 'click').mapTo(1),
+  Observable.fromEvent(decrementBtn, 'click').mapTo(-1),
+);
+
+source
+  .scan((acc, curr) => acc + curr, 0)
+  .subscribe((counter) => {
+    counterEl.innerHTML = counter;
+  });

code/observables/declarative-1.js

@@ -0,0 +1,37 @@
+// // Observable.fromPromise(Promise.reject('lol')).subscribe(x => console.log(x))
+// const source = Observable.create((subscriber) => {
+//   fetchOrdersFromDb((err, orders) => {
+//     if (err) {
+//       try {
+//         subscriber.error(err);
+//         console.log('after');
+//       } catch (e) {
+//         console.log('it threw', e);
+//       }
+//     } else {
+//       subscriber.next(orders);
+//       subscriber.complete();
+//     }
+//   });
+// });
+
+// // source.subscribe(x => console.log(x));
+// source.subscribe({
+//   next: x => console.log(x),
+//   error: e => console.error(e),
+// });
+
+const source = Observable.create((subscriber) => {
+  subscriber.next(1);
+  subscriber.error(new Error('Uh oh'));
+  subscriber.next(2);
+});
+
+source.subscribe({
+  next: x => console.log(x),
+  complete: () => console.log('Done!'),
+  error: e => console.error(e),
+});
+
+// 1
+// Error: Uh oh

code/observables/delay/delay-1.js

@@ -0,0 +1,7 @@
+const source = Observable.create((subscriber) => {
+  subscriber.next(1);
+  subscriber.error(new Error('Uh oh'));
+  subscriber.next(2);
+});
+
+source.subscribe(x => console.log(x));

code/observables/dom-events/dom-events-1.js

@@ -0,0 +1,17 @@
+// const source = Observable.create((subscriber) => {
+//   fetchOrdersFromDb((err, orders) => {
+//     if (err) {
+//       subscriber.error(err);
+//     } else {
+//       subscriber.next(orders);
+//       subscriber.complete();
+//     }
+//   });
+// });
+
+fetchOrders()
+  .catch((e) => {
+    logError(e);
+    return Observable.of([]);
+  })
+  .subscribe(x => console.log(x));

code/observables/dom-events/dom-events-2.js

@@ -0,0 +1,19 @@
+function fetchOrders() {
+  return Observable.create((subscriber) => {
+    fetchOrdersFromDb((err, orders) => {
+      if (err) {
+        subscriber.error(err);
+      } else {
+        subscriber.next(orders);
+        subscriber.complete();
+      }
+    });
+  });
+}
+
+fetchOrders()
+  .retry(3)
+  .subscribe({
+    next: x => console.log(x),
+    error: e => console.error(e),
+  });

code/observables/error-handling/error-handling-1.js

@@ -0,0 +1,37 @@
+function fetchOrders() {
+  return Observable.create((subscriber) => {
+    fetchOrdersFromDb((err, orders) => {
+      if (err) {
+        subscriber.error(err);
+      } else {
+        subscriber.next(orders);
+        subscriber.complete();
+      }
+    });
+  });
+}
+
+function legacyFetchOrders() {
+  return Observable.create((subscriber) => {
+    fetchOrdersFromDb((err, orders) => {
+      if (err) {
+        subscriber.error(new Error('nope'));
+      } else {
+        subscriber.next(orders);
+        subscriber.complete();
+      }
+    });
+  });
+}
+
+fetchOrders()
+  .catch((e) => {
+    logError(e);
+
+    return legacyFetchOrders()
+      .catch((e2) => {
+        logError(e2);
+        return Observable.of([]);
+      })
+  })
+  .subscribe(x => console.log(x));

code/observables/error-handling/error-handling-2.js

@@ -0,0 +1,12 @@
+Observable.from(Promise.resolve('world'))
+  .subscribe(x => console.log(x));
+
+function* greeting() {
+  yield 'hello';
+}
+
+Observable.from(greeting())
+  .subscribe(x => console.log(x));
+
+// hello
+// world

code/observables/error-handling/error-handling-3.js

@@ -0,0 +1,9 @@
+const { Observable } = require('rxjs');
+
+Observable.of(1, 2, 3)
+  .map(n => Observable.of(n * 2))
+  .subscribe(x => console.log(x));
+
+// ScalarObservable { value: 2 }
+// ScalarObservable { value: 4 }
+// ScalarObservable { value: 6 }

code/observables/error-handling/error-handling-4.js

@@ -0,0 +1,10 @@
+const { Observable } = require('rxjs');
+
+Observable.of(1, 2, 3)
+  .map(n => Observable.of(n * 2))
+  .mergeAll()
+  .subscribe(x => console.log(x));
+
+// 2
+// 4
+// 6

code/observables/error-handling/error-handling-5.js

@@ -0,0 +1,9 @@
+const { Observable } = require('rxjs');
+
+Observable.of(1, 2, 3)
+  .mergeMap(n => Observable.of(n * 2))
+  .subscribe(x => console.log(x));
+
+// 2
+// 4
+// 6