Refresh project to RxJS v6.6.7 and .pipe( operator syntax )

package.json

@@ -12,25 +12,28 @@
   "license": "BSD 3-Clause",
   "private": true,
   "devDependencies": {
-    "@cycle/collection": "0.5.1",
-    "@cycle/dom": "15.0.0-rc.1",
-    "@cycle/isolate": "1.4.0",
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@cycle/collection": "0.7.0",
+    "@cycle/dom": "23.0.0",
+    "@cycle/isolate": "5.2.0",
     "@cycle/rxjs-adapter": "3.3.0",
-    "@cycle/rxjs-run": "4.0.0-rc.3",
-    "babel-core": "6.22.1",
-    "babel-loader": "6.2.10",
-    "babel-preset-es2015": "6.22.0",
-    "copy-webpack-plugin": "^4.0.1",
-    "cross-env": "3.1.4",
+    "@cycle/rxjs-run": "10.5.0",
+    "@types/ramda": "^0.27.45",
+    "babel-loader": "8.2.3",
+    "copy-webpack-plugin": "^9.0.1",
+    "cross-env": "7.0.3",
+    "html-webpack-plugin": "^5.5.0",
     "ramda": "0.23.0",
-    "rxjs": "5.0.3",
-    "webpack": "1.14.0",
-    "webpack-dev-server": "1.16.2",
-    "webpack-hot-middleware": "2.16.0"
+    "rxjs": "6.6.7",
+    "rxjs-compat": "^6.6.7",
+    "webpack": "^5.60.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.3.1"
   },
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --debug --inline --hot --progress --no-info --host 0.0.0.0 --port 8081",
+    "dev": "cross-env NODE_ENV=development webpack serve --hot --progress --open --port 8081",
     "gh-pages": "git subtree push --prefix dist origin gh-pages",
     "release": "npm run release-patch",
     "release-patch": "git checkout master && npm version patch && npm run build && git commit -a -m 'Build dist/' && git push origin master --tags && npm run update-gh-pages",

src/app-model.js

@@ -1,13 +1,15 @@
-import { Observable } from 'rxjs';
+import { fromEvent } from 'rxjs';
+import { map, startWith, distinctUntilChanged } from 'rxjs/operators';
 
 
 const DEFAULT_EXAMPLE = 'merge';
 
 export function appModel() {
-  return Observable.fromEvent(window, 'hashchange')
-    .map(hashEvent => hashEvent.target.location.hash.replace('#', ''))
-    .startWith(window.location.hash.replace('#', ''))
-    .map(route => route || DEFAULT_EXAMPLE)
-    .distinctUntilChanged()
-    .map(route => ({ route, inputs: undefined }));
-};
+  return fromEvent(window, 'hashchange').pipe(
+    map(hashEvent => hashEvent.target.location.hash.replace('#', '')),
+    startWith(window.location.hash.replace('#', '')),
+    map(route => route || DEFAULT_EXAMPLE),
+    distinctUntilChanged(),
+    map(route => ({ route, inputs: undefined }))
+  )
+}

src/app-view.js

@@ -1,7 +1,6 @@
 import { a, div, h1, h3, section } from '@cycle/dom';
-
-import { renderSvgDropshadow, merge } from './styles/utils';
-import { flex, flex1, greyDark, fontSpecial, DIMENS } from './styles';
+import { map } from 'rxjs/operators'
+import { flex, flex1, greyDark, fontSpecial, DIMENS, renderSvgDropshadow, merge } from './styles';
 import { renderOperatorsMenu } from './components/operators-menu';
 
 
@@ -53,13 +52,15 @@ function renderFooter() {
 
 export function appView(sandboxDOM$) {
   return sandboxDOM$
-    .map((sandboxDOM) =>
-      div({ style: merge(containerWidth, { margin: '0 auto' }) }, [
-        renderSvgDropshadow(),
-        renderGithubRibbon(),
-        renderHeader(),
-        renderContent(sandboxDOM),
-        renderFooter(),
-      ]),
+    .pipe(
+      map((sandboxDOM) =>
+        div({ style: merge(containerWidth, { margin: '0 auto' }) }, [
+          renderSvgDropshadow(),
+          renderGithubRibbon(),
+          renderHeader(),
+          renderContent(sandboxDOM),
+          renderFooter(),
+        ]),
+      )
     );
 }

src/app.js

@@ -1,6 +1,7 @@
 import { run } from '@cycle/rxjs-run';
 import { makeDOMDriver } from '@cycle/dom';
-import { Observable } from 'rxjs';
+import { merge as mergeOperator } from 'rxjs';
+import { scan } from 'rxjs/operators';
 import { merge } from 'ramda';
 
 import { Sandbox } from './components/sandbox';
@@ -15,14 +16,16 @@ function main(sources) {
 
   const sinks = {
     DOM: appView(sandbox.DOM),
-    store: Observable.merge(route$, sandbox.data)
-      .scan(merge, {}),
+    store: mergeOperator(route$, sandbox.data)
+      .pipe(
+        scan(merge, {})
+      ),
   };
 
   return sinks;
 }
 
-// Note: drivers use xstream 
+// Note: drivers use xstream
 function dummyDriver(initialValue) {
   return (value$) => value$.remember().startWith(initialValue);
 }

src/assets/CNAME

@@ -0,0 +1 @@
+rxmarbles.com

src/assets/robots.txt

@@ -0,0 +1,3 @@
+# robotstxt.org/
+
+User-agent: *

src/components/sandbox/operator-label.js

@@ -2,9 +2,11 @@ import { div, span } from '@cycle/dom';
 
 import {
   renderElevation2After,
-  renderElevation2Before
-} from '../../styles/utils';
-import { fontCode, DIMENS, merge } from '../../styles';
+  renderElevation2Before,
+  fontCode,
+  DIMENS,
+  merge
+} from '../../styles';
 
 function renderOperatorLabel(label) {
   let fontSize = (label.length >= 45) ? 1.3 : (label.length >= 30) ? 1.5 : 2;

src/components/sandbox/sandbox-output.js

@@ -1,17 +1,31 @@
-import { Observable, ReplaySubject, Subject, VirtualTimeScheduler } from 'rxjs';
+import { Observable, timer, ReplaySubject, Subject, VirtualTimeScheduler } from 'rxjs';
+import {
+  debounceTime,
+  withLatestFrom,
+  map,
+  mergeAll,
+  publishReplay,
+  refCount,
+  takeUntil,
+  observeOn,
+  timestamp,
+  reduce
+} from 'rxjs/operators'
 import { assoc, curry, merge } from 'ramda';
 
 import { calculateNotificationContentHash } from './sandbox-utils';
 
-const MAX_TIME = 100;
+// add 0.01 or else things at exactly MAX_TIME will cut off
+const PAD_TIME = 0.1
+const MAX_TIME = 100 + PAD_TIME;
 
 const toVTStream = curry(function _toVTStream(scheduler, data) {
   const marbleStreams$ = new Observable(observer => {
     data.marbles.forEach(item =>
       scheduler.schedule(() => observer.next(item), item.time));
   });
-  return marbleStreams$
-    .takeUntil(Observable.timer(data.end.time + 1, scheduler));
+  return marbleStreams$.pipe(takeUntil(timer(data.end.time + PAD_TIME, scheduler))
+)
 });
 
 function outputStreamToMarbles$(scheduler, stream) {
@@ -20,45 +34,53 @@ function outputStreamToMarbles$(scheduler, stream) {
   let endTime;
 
   stream
-    .observeOn(scheduler)
-    .timestamp(scheduler)
-    .map(({ value, timestamp }) => {
-      const marble = typeof value !== 'object'
-        ? { content: value, id: calculateNotificationContentHash(value) }
-        : value;
-
-      return assoc('time', timestamp / MAX_TIME * 100, marble);
-    })
-    .takeUntil(stop$)
-    .reduce((a, b) => a.concat(b), [])
-    .map(items => items.map(
-      (item, i) => merge(item, { itemId: i }))
+    .pipe(
+      observeOn(scheduler),
+      timestamp(scheduler),
+      map(({ value, timestamp }) => {
+        const marble = typeof value !== 'object'
+          ? { content: value, id: calculateNotificationContentHash(value) }
+          : value;
+        return assoc('time', timestamp / MAX_TIME * 100, marble);
+      }),
+      takeUntil(stop$),
+      reduce((a, b) => a.concat(b), []),
+      map(items =>
+        items.map((item, i) => merge(item, { itemId: i }))
+      )
     )
-    .subscribe(
-      items => subject$.next(items),
-      undefined,
-      () => endTime = scheduler.now(),
-    );
+    .subscribe({
+       next(items) {
+         subject$.next(items)
+       },
+       complete() {
+         endTime = scheduler.now()
+       }
+    });
 
   scheduler.flush();
   stop$.next();
 
-  return subject$.asObservable()
-    .map(marbles => ({ marbles, end: { time: endTime } }));
+  return subject$.asObservable().pipe(
+      map(marbles => ({ marbles, end: { time: endTime } }))
+    )
 }
 
 export function createOutputStream$(example$, inputStores$) {
-  return inputStores$.debounceTime(0).withLatestFrom(example$)
-    .map(([inputStores, example]) => {
+  return inputStores$.pipe(
+    debounceTime(0),
+    withLatestFrom(example$),
+    map(([inputStores, example]) => {
       const vtScheduler = new VirtualTimeScheduler(undefined, MAX_TIME);
 
       const inputStreams = inputStores.map(toVTStream(vtScheduler));
       const outputStream = example.apply(inputStreams, vtScheduler)
-        // add 0.01 or else things at exactly MAX_TIME will cut off
-        .takeUntil(Observable.timer(MAX_TIME + 0.01, vtScheduler));
+        .pipe(takeUntil(timer(MAX_TIME, vtScheduler)));
 
       return outputStreamToMarbles$(vtScheduler, outputStream);
-    })
-    .mergeAll()
-    .publishReplay(1).refCount();
+    }),
+    mergeAll(),
+    publishReplay(1),
+    refCount()
+  );
 }

src/components/sandbox/sandbox.js

@@ -1,5 +1,18 @@
 import { div } from '@cycle/dom';
-import { Observable } from 'rxjs';
+import { combineLatest, of } from 'rxjs';
+import {
+  pluck,
+  skip,
+  distinctUntilChanged,
+  map as mapOperator,
+  publishReplay,
+  refCount,
+  switchMap,
+  filter,
+  debounceTime,
+  withLatestFrom,
+  startWith
+} from 'rxjs/operators'
 import { apply, flip, identity, length, map, merge, prop, zip } from 'ramda';
 
 import { Collection } from '../../collection';
@@ -11,35 +24,43 @@ import { Timeline } from '../timeline';
 
 import { createOutputStream$ } from './sandbox-output';
 import { inputsToTimelines } from './sandbox-input';
-import { renderOperatorBox } from './operator-label';;
+import { renderOperatorBox } from './operator-label';
 
 
 const sandboxStyle = mergeStyles(bgWhite, elevation1, { borderRadius: '2px' });
 
 export function Sandbox({ DOM, store }) {
-  const example$ = store.pluck('route')
-    .skip(1) // blank first route
-    .distinctUntilChanged()
-    .map(exampleKey => examples[exampleKey])
-    .publishReplay(1).refCount();
+  const example$ = store.pipe(
+      pluck('route'),
+      skip(1), // blank first route
+      distinctUntilChanged(),
+      mapOperator(exampleKey => examples[exampleKey]),
+      publishReplay(1),
+      refCount()
+  );
 
   const inputStores$ = example$
-    .switchMap(example =>
-      store.pluck('inputs')
-        .filter(identity)
-        // bug: For some reason inputDataList$ emits old value after
-        // route change. Skip it.
-        .skip(1)
-        .startWith(inputsToTimelines(example.inputs))
+    .pipe(
+      switchMap(example =>
+        store.pipe(
+          pluck('inputs'),
+          filter(identity),
+          // bug: For some reason inputDataList$ emits old value after
+          // route change. Skip it.
+          skip(1),
+          startWith(inputsToTimelines(example.inputs))
+        )
+      ),
+      publishReplay(1),
+      refCount()
     )
-    .publishReplay(1).refCount();
 
   const outputStore$ = createOutputStream$(example$, inputStores$);
   const outputTimelineSources$ = {
     DOM,
-    marbles: outputStore$.pluck('marbles'),
-    end: outputStore$.pluck('end'),
-    interactive: Observable.of(false),
+    marbles: outputStore$.pipe(pluck('marbles')),
+    end: outputStore$.pipe(pluck('end')),
+    interactive: of(false)
   };
 
   const inputTimelines$
@@ -49,23 +70,26 @@ export function Sandbox({ DOM, store }) {
 
   const inputDOMs$ = Collection.pluck(inputTimelines$, prop('DOM'));
   const inputDataList$ = Collection.pluck(inputTimelines$, prop('data'))
-    .filter(length)
-    .debounceTime(0)
-    .withLatestFrom(inputStores$, zip)
-    .map(map(apply(flip(merge))));
+    .pipe(
+      filter(length),
+      debounceTime(0),
+      withLatestFrom(inputStores$, zip),
+      mapOperator(map(apply(flip(merge))))
+    );
 
-  const vtree$ = Observable
-    .combineLatest(inputDOMs$, outputTimeline.DOM, example$)
-    .map(([inputsDOMs, outputDOM, example]) =>
-      div({ style: sandboxStyle }, [
-        ...inputsDOMs,
-        renderOperatorBox(example.label),
-        outputDOM,
-      ]),
+  const vtree$ = combineLatest(inputDOMs$, outputTimeline.DOM, example$)
+    .pipe(
+      mapOperator(([inputsDOMs, outputDOM, example]) =>
+        div({ style: sandboxStyle }, [
+          ...inputsDOMs,
+          renderOperatorBox(example.label),
+          outputDOM,
+        ]),
+      )
     );
 
   return {
     DOM: vtree$,
-    data: inputDataList$.map((inputs) => ({ inputs })),
+    data: inputDataList$.pipe(mapOperator((inputs) => ({ inputs }))),
   };
 }