chore: update examples for rxjs 6

Author: yyx990803

example/counter-function.html

@@ -1,6 +1,6 @@
 <!-- this demo requires a browser that natively supports ES2015 -->
 
-<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
+<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="../dist/vue-rx.js"></script>
 
@@ -17,6 +17,9 @@
 </div>
 
 <script>
+const { merge } = rxjs
+const { startWith, scan } = rxjs.operators
+
 new Vue({
   el: '#app',
 
@@ -34,16 +37,14 @@
   }, // equivalent of above: ['muchMore','minus']
 
   subscriptions () {
-    var count$ = Rx.Observable
-      .merge(
-      	this.muchMore$,
+    return {
+      count: merge(
+        this.muchMore$,
         this.minus$
+      ).pipe(
+        startWith(0),
+        scan((total, change) => total + change)
       )
-      .startWith(0)
-      .scan((total, change) => total + change)
-
-    return {
-      count: count$
     }
   }
 })

example/counter-simple.html

@@ -1,42 +1,33 @@
-<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
+<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="../dist/vue-rx.js"></script>
 
 <div id="app">
   <div>{{ count }}</div>
   <button v-stream:click="plus$">+</button>
   <button v-stream:click="minus$">-</button>
-  <my-component v-stream:more="more$"></my-component>
 </div>
 
 <script>
-Vue.component('my-component', {
-  template: '<button v-on:click="more">Iwant more!</button>',
-  methods:{
-    more:function(){
-      this.$emit('more',100)
-    }
-  }
-})
+const { merge } = rxjs
+const { map, startWith, scan } = rxjs.operators
 
 new Vue({
   el: '#app',
 
   // declare dom stream Subjects
-  domStreams: ['plus$', 'minus$','more$'],
+  domStreams: ['plus$', 'minus$'],
 
   subscriptions () {
-    var plus$ = this.plus$.map(() => 1)
-    var minus$ = this.minus$.map(() => -1)
-    var more$ = this.more$.map(() => 100)
-    var count$ = Rx.Observable
-      .merge(plus$, minus$, more$)
-      .startWith(0)
-      .scan((total, change) => total + change)
-
     return {
-      count: count$
+      count: merge(
+        this.plus$.pipe(map(() => 1)),
+        this.minus$.pipe(map(() => -1))
+      ).pipe(
+        startWith(0),
+        scan((total, change) => total + change)
+      )
     }
   }
 })
-</script>
+</script>

example/counter.html

@@ -1,6 +1,6 @@
 <!-- this demo requires a browser that natively supports ES2015 -->
 
-<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
+<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="../dist/vue-rx.js"></script>
 
@@ -25,6 +25,9 @@
 </div>
 
 <script>
+const { merge } = rxjs
+const { map, pluck, startWith, scan } = rxjs.operators
+
 new Vue({
   el: '#app',
 
@@ -37,7 +40,7 @@
 
   components: {
     myButton: {
-      template: '<button>MyButton</button>'
+      template: `<button @click="$emit('click')">MyButton</button>`
     }
   },
 
@@ -52,16 +55,14 @@
   domStreams: ['plus$', 'minus$'],
 
   subscriptions () {
-    var count$ = Rx.Observable
-      .merge(
-        this.plus$.map(() => 1),
-        this.minus$.pluck('data')
-      )
-      .startWith(0)
-      .scan((total, change) => total + change)
-
     return {
-      count: count$
+      count: merge(
+        this.plus$.pipe(map(() => 1)),
+        this.minus$.pipe(pluck('data'))
+      ).pipe(
+        startWith(0),
+        scan((total, change) => total + change)
+      )
     }
   }
 })

example/wiki-search.html

@@ -1,5 +1,5 @@
 <script src="https://unpkg.com/jquery"></script>
-<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
+<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="../dist/vue-rx.js"></script>
 
@@ -22,8 +22,11 @@ <h1>{{ results.term }}</h1>
 </div>
 
 <script>
+const { from } = rxjs
+const { pluck, filter, debounceTime, distinctUntilChanged, switchMap, map } = rxjs.operators
+
 function fetchTerm (term) {
-  return Rx.Observable.fromPromise($.ajax({
+  return from($.ajax({
     url: 'http://en.wikipedia.org/w/api.php',
     dataType: 'jsonp',
     data: {
@@ -53,13 +56,14 @@ <h1>{{ results.term }}</h1>
   subscriptions () {
     return {
       // this is the example in RxJS's readme.
-      results: this.$watchAsObservable('search')
-        .pluck('newValue')
-        .filter(text => text.length > 2)
-        .debounceTime(500)
-        .distinctUntilChanged()
-        .switchMap(fetchTerm)
-        .map(formatResult)
+      results: this.$watchAsObservable('search').pipe(
+        pluck('newValue'),
+        filter(text => text.length > 2),
+        debounceTime(500),
+        distinctUntilChanged(),
+        switchMap(fetchTerm),
+        map(formatResult)
+      )
     }
   }
 })</script>