introduce proper build setup

Author: yyx990803

.gitignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+.DS_Store

README.md

@@ -189,8 +189,6 @@ var vm = new Vue({
 
 #### `$fromDOMEvent(selector, event)`
 
-> Deprecated in 3.0+. Prefer `v-stream` instead.
-
 > This feature requires RxJS.
 
 This is a prototype method added to instances. Use it to create an observable from DOM events within the instances' element. This is similar to `Rx.Observable.fromEvent`, but usable inside the `subscriptions` function even before the DOM is actually rendered.

example/counter-simple.html

@@ -1,6 +1,6 @@
 <script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
-<script src="../vue-rx.js"></script>
+<script src="../dist/vue-rx.js"></script>
 
 <div id="app">
   <div>{{ count }}</div>

example/counter.html

@@ -2,7 +2,7 @@
 
 <script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
-<script src="../vue-rx.js"></script>
+<script src="../dist/vue-rx.js"></script>
 
 <div id="app">
   <div>{{ count }}</div>

example/wiki-search.html

@@ -1,7 +1,7 @@
 <script src="https://unpkg.com/jquery"></script>
 <script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
-<script src="../vue-rx.js"></script>
+<script src="../dist/vue-rx.js"></script>
 
 <p>Type to search Wikipedia</p>
 

package.json

@@ -2,9 +2,9 @@
   "name": "vue-rx",
   "version": "2.3.1",
   "description": "RxJS bindings for Vue",
-  "main": "vue-rx.js",
+  "main": "dist/vue-rx.js",
   "files": [
-    "vue-rx.js"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -20,5 +20,16 @@
   "bugs": {
     "url": "https://github.com/vuejs/vue-rx/issues"
   },
-  "homepage": "https://github.com/vuejs/vue-rx#readme"
+  "homepage": "https://github.com/vuejs/vue-rx#readme",
+  "scripts": {
+    "dev": "rollup -c rollup.config.js -w",
+    "build": "rollup -c rollup.config.js",
+    "prepublish": "npm run build"
+  },
+  "devDependencies": {
+    "buble": "^0.15.2",
+    "rollup": "^0.41.6",
+    "rollup-plugin-buble": "^0.15.0",
+    "rollup-watch": "^3.2.2"
+  }
 }

rollup.config.js

@@ -0,0 +1,9 @@
+const buble = require('rollup-plugin-buble')
+
+module.exports = {
+  entry: 'src/index.js',
+  dest: 'dist/vue-rx.js',
+  format: 'umd',
+  moduleName: 'VueRx',
+  plugins: [buble()]
+}

src/directives/stream.js

@@ -0,0 +1,56 @@
+import { Rx, hasRx, isSubject, warn, getKey, unsub } from '../util'
+
+export default {
+  // Example ./example/counter_dir.html
+  bind (el, binding, vnode) {
+    if (!hasRx()) {
+      return
+    }
+
+    let handle = binding.value
+    const event = binding.arg
+    const streamName = binding.expression
+
+    if (isSubject(handle)) {
+      handle = { subject: handle }
+    } else if (!handle || !isSubject(handle.subject)) {
+      warn(
+        'Invalid Subject found in directive with key "' + streamName + '".' +
+        streamName + ' should be an instance of Rx.Subject or have the ' +
+        'type { subject: Rx.Subject, data: any }.',
+        vnode.context
+      )
+      return
+    }
+
+    const subject = handle.subject
+    const next = (subject.next || subject.onNext).bind(subject)
+    handle.subscription = Rx.Observable.fromEvent(el, event).subscribe(e => {
+      next({
+        event: e,
+        data: handle.data
+      })
+    })
+
+    // store handle on element with a unique key for identifying
+    // multiple v-stream directives on the same node
+    ;(el._rxHandles || (el._rxHandles = {}))[getKey(binding)] = handle
+  },
+
+  update (el, binding) {
+    const handle = binding.value
+    const _handle = el._rxHandles && el._rxHandles[getKey(binding)]
+    if (_handle && handle && isSubject(handle.subject)) {
+      _handle.data = handle.data
+    }
+  },
+
+  unbind (el, binding) {
+    const key = getKey(binding)
+    const handle = el._rxHandles && el._rxHandles[key]
+    if (handle) {
+      unsub(handle.subscription)
+      el._rxHandles[key] = null
+    }
+  }
+}

src/index.js

@@ -0,0 +1,20 @@
+import { install } from './util'
+import rxMixin from './mixin'
+import streamDirective from './directives/stream'
+import watchAsObservable from './methods/watchAsObservable'
+import fromDOMEvent from './methods/fromDOMEvent'
+import subscribeTo from './methods/subscribeTo'
+
+export default function VueRx (Vue, Rx) {
+  install(Vue, Rx)
+  Vue.mixin(rxMixin)
+  Vue.directive('stream', streamDirective)
+  Vue.prototype.$watchAsObservable = watchAsObservable
+  Vue.prototype.$fromDOMEvent = fromDOMEvent
+  Vue.prototype.$subscribeTo = subscribeTo
+}
+
+// auto install
+if (typeof Vue !== 'undefined' && typeof Rx !== 'undefined') {
+  Vue.use(VueRx, Rx)
+}

src/methods/fromDOMEvent.js

@@ -0,0 +1,32 @@
+import { Rx, hasRx, getDisposable } from '../util'
+
+export default function fromDOMEvent (selector, event) {
+  if (!hasRx()) {
+    return
+  }
+  if (typeof window === 'undefined') {
+    return Rx.Observable.create(() => {})
+  }
+
+  const vm = this
+  const doc = document.documentElement
+  const obs$ = Rx.Observable.create(observer => {
+    function listener (e) {
+      if (!vm.$el) return
+      if (selector === null && vm.$el === e.target) return observer.next(e)
+      var els = vm.$el.querySelectorAll(selector)
+      var el = e.target
+      for (var i = 0, len = els.length; i < len; i++) {
+        if (els[i] === el) return observer.next(e)
+      }
+    }
+    doc.addEventListener(event, listener)
+    // Returns function which disconnects the $watch expression
+    return getDisposable(() => {
+      doc.removeEventListener(event, listener)
+    })
+  })
+
+  ;(vm._obSubscriptions || (vm._obSubscriptions = [])).push(obs$)
+  return obs$
+}