@live-change/dao-vue3 0.1.16 → 0.1.20

package/index.js

@@ -1,384 +1,19 @@
-import { reactive, watch, ref, computed, onUnmounted, getCurrentInstance } from 'vue'
-import * as lcdao from '@live-change/dao'
-
-let prefix = "$reactiveDaoPath_"
-
-const reactiveMixin = dao => ({
-  data() {
-    if(!this.$options.reactive) return {} // Avoid distributed fat
-    let data = {}
-    for (let key in this.$options.reactive) {
-      data[key] = undefined
-      data[key+"Error"] = undefined
-    }
-    return data
-  },
-  beforeCreate() {
-    if(!this.$options.reactive) return; // Avoid distributed fat
-    if (!this.$options.computed) this.$options.computed = {}
-    for(let key in this.$options.reactive) {
-      let path = this.$options.reactive[key]
-      if(typeof path == 'function'){
-        this.$options.computed[prefix + key] = path
-      } else if(typeof path == 'string') {
-      } else if(path.length !== undefined) {
-      } else throw new Error("unknown reactive path "+path)
-    }
-  },
-  created() {
-    if(!this.$options.reactive) return; // Avoid distributed fat
-    this.reactiveObservables = {}
-    let reactiveObservables = this.reactiveObservables
-    for(let key in this.$options.reactive) {
-      let path = this.$options.reactive[key]
-      if(typeof path == 'function'){
-        let p = this[prefix + key]
-        if(p) {
-          reactiveObservables[key] = dao.observable(p)
-          reactiveObservables[key].bindProperty(this, key)
-          reactiveObservables[key].bindErrorProperty(this, key+"Error")
-        }
-        let oldPathJson
-        watch(() => this[prefix + key], newPath => {
-          const json = JSON.stringify(newPath)
-          const match = JSON.stringify(newPath) == oldPathJson
-          oldPathJson = json
-          if(match) return
-          if(reactiveObservables[key]) {
-            this[key] = undefined
-            this[key+"Error"] = undefined
-            reactiveObservables[key].unbindProperty(this, key)
-            reactiveObservables[key].unbindErrorProperty(this, key+"Error")
-          }
-          delete reactiveObservables[key]
-          if(newPath) {
-            reactiveObservables[key] = dao.observable(newPath)
-            reactiveObservables[key].bindProperty(this, key)
-            reactiveObservables[key].bindErrorProperty(this, key+"Error")
-          } else {
-            this[key] = undefined
-          }
-        })
-      } else if(typeof path == 'string') {
-        reactiveObservables[key] = dao.observable(path)
-        reactiveObservables[key].bindProperty(this, key)
-        reactiveObservables[key].bindErrorProperty(this, key+"Error")
-      } else if(path.length !== undefined) {
-        //console.log("DAO", dao)
-        reactiveObservables[key] = dao.observable(path)
-        reactiveObservables[key].bindProperty(this, key)
-        reactiveObservables[key].bindErrorProperty(this, key+"Error")
-      } else throw new Error("unknown reactive path "+path)
-    }
-  },
-  beforeUnmount() {
-    if(!this.$options.reactive) return; // Avoid distributed fat
-    let reactiveObservables = this.reactiveObservables
-    for(let key in reactiveObservables) {
-      reactiveObservables[key].unbindProperty(this, key)
-      reactiveObservables[key].unbindErrorProperty(this, key+"Error")
-    }
-  }
-})
-
-const reactivePrefetchMixin = dao => ({
-  beforeCreate() {
-    if(typeof window == 'undefined') return // NO REACTIVE PREFETCH ON SERVER
-    if(!this.$options.reactivePreFetch) return
-    if (!this.$options.computed) this.$options.computed = {}
-    this.$options.computed[prefix+"_reactivePreFetch"] = function() {
-      return this.$options.reactivePreFetch.call(this, this.$route, this.$router)
-    }
-    const optionData = this.$options.data
-    this.$options.data = function vueReactiveDaoInjectedDataFn () {
-      const data = (
-          (typeof optionData === 'function')
-              ? optionData.call(this)
-              : optionData
-      ) || {}
-      data.reactivePreFetchedPaths = []
-      data.reactivePreFetchError = null
-      return data
-    }
-  },
-  created() {
-    if(typeof window == 'undefined') return // NO REACTIVE PREFETCH ON SERVER
-    if(!this.$options.reactivePreFetch) return
-    let paths = this[prefix+"_reactivePreFetch"]
-    if(paths) {
-      this.reactivePreFetchObservable = dao.observable({ paths })
-      this.reactivePreFetchObservable.bindProperty(this, "reactivePreFetchedPaths")
-      this.reactivePreFetchObservable.bindErrorProperty(this, "reactivePreFetchError")
-    }
-    watch(() => this[prefix + "_reactivePreFetch"], paths => {
-      if(this.reactivePreFetchObservable) {
-        this.reactivePreFetchObservable.unbindProperty(this, "reactivePreFetchedPaths")
-        this.reactivePreFetchObservable.unbindErrorProperty(this, "reactivePreFetchError")
-      }
-      delete this.reactivePreFetchObservable
-      if(paths) {
-        this.reactivePreFetchObservable = dao.observable({ paths })
-        this.reactivePreFetchObservable.bindProperty(this, "reactivePreFetchedPaths")
-        this.reactivePreFetchObservable.bindErrorProperty(this, "reactivePreFetchError")
-      }
-    })
-  },
-  beforeUnmount() {
-    if(typeof window == 'undefined') return; // NO REACTIVE PREFETCH ON SERVER
-    if(!this.$options.reactivePreFetch) return; // Avoid distributed fat
-    if(this.reactivePreFetchObservable) {
-      this.reactivePreFetchObservable.unbindProperty(this, "reactivePreFetchedPaths")
-      this.reactivePreFetchObservable.unbindErrorProperty(this, "reactivePreFetchError")
-    }
-  }
-})
-
-const reactiveComponent = dao => ({
-  name: "Reactive",
-  props: {
-    what: {
-      type: Object
-    }
-  },
-  data() {
-    let values = {}, errors = {}
-    for(const key in this.what) {
-      values[key] = undefined
-      values[key + 'Error'] = undefined
-    }
-    return {
-      values
-    }
-  },
-  created() {
-    this.observables = {}
-    for(const name in this.what) {
-      const what = this.what[key]
-      const observable = dao.observable(what)
-      this.observables[name] = observable
-      observable.bindProperty(this.values[name])
-      observable.bindErrorProperty(this.values[name+'Error'])
-    }
-  },
-  beforeDestroy() {
-    for(const name in this.observables) {
-      const observable = this.observables[name]
-      observable.unbindProperty(this, "reactivePreFetchedPaths")
-      observable.unbindErrorProperty(this, "reactivePreFetchError")
-    }
-  },
-  render(createElement) {
-    return this.$scopedSlots.default(this.values)[0]
-  }
-})
-
-class ReactiveObservableList extends lcdao.ObservableList {
-  constructor(value, what, dispose) {
-    super(value, what, dispose, (data) => {
-      if(data && typeof data == 'object') {
-        const activated = reactive(data)
-        return activated
-      }
-      return data
-    })
-  }
-}
+import reactiveMixin from './lib/reactiveMixin.js'
+import reactivePrefetchMixin from './lib/reactivePrefetchMixin.js'
+import live from './lib/live.js'
+import ReactiveObservableList from './lib/ReactiveObservableList.js'
+import RangeBuckets from './lib/RangeBuckets.js'
 
 const ReactiveDaoVue = {
   install(Vue, options) {
     if(!options || !options.dao) throw new Error("dao option required")
     const dao = options.dao
-
     Vue.mixin(reactiveMixin(dao))
-
     Vue.mixin(reactivePrefetchMixin(dao))
-
-    Vue.component('reactive', reactiveComponent(dao))
   }
 }
 
 //// TODO: rename reactive to live
-export { ReactiveDaoVue, reactiveMixin, reactivePrefetchMixin, reactiveComponent, ReactiveObservableList }
-
-const liveSymbol = Symbol('live')
-
-async function live(api, path, onUnmountedCb) {
-  if(!onUnmounted && typeof window != 'undefined') {
-    if(getCurrentInstance()) {
-      onUnmountedCb = onUnmounted
-    } else {
-      onUnmountedCb = () => {
-        console.error("live fetch outside component instance - possible memory leak")
-      }
-    }
-  }
-
-  const paths = [ path ]
-  if(typeof window == 'undefined') {
-    const preFetchPaths = await api.get({ paths })
-    console.log("PRE FETCH DATA", preFetchPaths)
-    const preFetchMap = new Map(preFetchPaths.map((res) => [JSON.stringify(res.what), res] ))
-    function createObject(what, more) {
-      const res = preFetchMap.get(JSON.stringify(what))
-      if(res.error) throw new Error(res.error)
-      const data = res.data
-      if(more) {
-        if(Array.isArray(data)) {
-          for(let i = 0; i < data.length; i ++) {
-            for(const moreElement of more) {
-              if(moreElement.to) {
-                console.log("COLLECT POINTERS FROM", data[i], "SC", moreElement.schema)
-                const pointers = lcdao.collectPointers(data[i], moreElement.schema ,
-                  (what) => preFetchMap.get(JSON.stringify(what)))
-                console.log("POINTERS COLLECTED", pointers)
-                const values = pointers.map(pointer => createObject(pointer, moreElement.more))
-                console.log("VALUES", values)
-                console.log("MANY", pointers.many)
-                if(pointers.many) {
-                  data[i][moreElement.to] = values
-                } else {
-                  data[i][moreElement.to] = values[0] || null
-                }
-              }
-            }
-          }
-        } else {
-          for(const moreElement of more) {
-            if(moreElement.to) {
-              const pointers = lcdao.collectPointers(data, moreElement.schema,
-                (what) => preFetchMap.get(JSON.stringify(what)))
-              const values = pointers.map(pointer => createObject(pointer, moreElement.more))
-              if(pointers.many) {
-                data[moreElement.to] = values
-              } else {
-                data[moreElement.to] = values[0] || null
-              }
-            }
-          }
-        }
-      }
-      return data
-    }
-    return createObject(path.what, path.more)
-  } else {
-    const preFetchPaths = api.observable({ paths })
-    const observables = []
-    function bindResult(what, more, object, property) {
-      if(!what) throw new Error("what parameter required!")
-      const observable = api.observable(what)
-      if(more && more.some(m => m.to)) {
-        const extendedObservable = new lcdao.ExtendedObservableList(observable,
-          newElement => {
-            if(!newElement) return newElement
-            const extendedElement = { ...newElement }
-            const props = {}
-            for(const moreElement of more) {
-              if(moreElement.to) {
-                const prop = {
-                  bounds: [],
-                  sources: []
-                }
-                props[moreElement.to] = prop
-                let requiredSrcs = []
-                const srcs = new Map()
-                function getSource(ptr) {
-                  const exists = srcs.get(ptr)
-                  if(exists !== undefined) return exists.list
-                  requiredSrcs.push(exists)
-                  return undefined
-                }
-                function computePointers() {
-                  while(true) {
-                    const pointers = lcdao.collectPointers(newElement, moreElement.schema, getSource)
-                    if(requiredSrcs.length == 0) return pointers
-                    for(const requiredSrc of requiredSrcs) {
-                      const observable = api.observable(requiredSrc)
-                      const observer = () => {
-                        bindPointers(computePointers())
-                      }
-                      srcs.set(JSON.stringify(requiredSrc), observable)
-                      prop.sources.push({ observable, observer })
-                      observable.observe(observer)
-                    }
-                  }
-                }
-                function bindPointers(pointers) {
-                  if(pointers.many) {
-                    const oldBound = prop.bounds.slice()
-                    const newArray = new Array(pointers.length)
-                    const newBounds = new Array(pointers.length)
-                    for(let i = 0; i < pointers.length; i++) {
-                      newBounds[i] = bindResult(pointers[i], moreElements.more, newArray, i)
-                    }
-                    prop.bounds = newBounds
-                    oldBound.forEach(b => b.dispose())
-                    extendedElement[moreElement.to] = newArray
-                  } else if(pointers.length > 0) {
-                    const oldBound = prop.bounds
-                    if(!oldBound || oldBound.length == 0 ||
-                      JSON.stringify(oldBound[0].what) != JSON.stringify(pointers[0])) {
-                      if(oldBound) {
-                        prop.bounds.forEach(b => b.dispose())
-                      }
-                      if(pointers[0]) {
-                        prop.bounds = [
-                          bindResult(pointers[0], moreElement.more, extendedElement, moreElement.to)
-                        ]
-                      }
-                    }
-                  }
-                }
-                bindPointers(computePointers())
-              }
-            }
-            extendedElement[liveSymbol] = props
-            return extendedElement
-          },
-          disposedElement => {
-            if(!disposedElement) return
-            const boundProps = disposedElement[liveSymbol]
-            for(const propName in boundProps) {
-              const prop = boundProps[propName]
-              const propBounds = prop.bounds
-              for(const propBound of propBounds) {
-                console.log("PROP BOUND DISPOSE", propBound)
-                propBound.dispose()
-              }
-              const propSources = prop.sources
-              for(const propSource of propSources) {
-                console.log("PROP SOURCE DISPOSE", propSource)
-                propSource.observable.unobserve(propSource.observer)
-              }
-            }
-          }
-        )
-        extendedObservable.bindProperty(object, property)
-        return {
-          what,
-          property,
-          dispose() {
-            extendedObservable.unbindProperty(object, property)
-          }
-        }
-      } else {
-        observable.bindProperty(object, property)
-        return {
-          what, property,
-          dispose() {
-            observable.unbindProperty(object, property)
-          }
-        }
-      }
-    }
-    const resultRef = ref()
-    bindResult(path.what, path.more, resultRef, 'value')
-    /// TODO: unobserve on unmounted
-    await preFetchPaths.wait()
-    return resultRef
-  }
-}
-
-export { live }
-
+export { ReactiveDaoVue, reactiveMixin, reactivePrefetchMixin, ReactiveObservableList, RangeBuckets, live }
 
 export default ReactiveDaoVue

package/lib/RangeBuckets.js

@@ -0,0 +1,233 @@
+import live from "./live.js"
+import { computed, reactive, ref, unref, watch } from "vue"
+
+class Bucket {
+
+  constructor(id, api, range, pathFunction, bucketSize, waitForComponents, hardClose) {
+    this.id = id
+    this.api = () => api
+    this.range = reactive(range)
+    this.pathFunction = pathFunction
+    this.bucketSize = bucketSize
+    this.waitForComponents = waitForComponents
+    this.hardClose = hardClose
+
+    this.disposed = false
+    this.onDispose = []
+    this.domElements = []
+
+    this.data = computed(() => {
+      const ldv = this.liveData.value
+      if(!ldv) return []
+      const source = unref(ldv)
+      if(this.hardClose) {
+        return source
+      }
+      return source.filter(element => (
+        (!this.range.gt  || element.id >  this.range.gt ) &&
+        (!this.range.gte || element.id >= this.range.gte) &&
+        (!this.range.lt  || element.id <  this.range.lt ) &&
+        (!this.range.lte || element.id <= this.range.lte)
+      ))
+    })
+    this.liveData = ref(null)
+
+    this.load()
+
+    this.promise = waitForComponents ? this.createPromise() : this.dataPromise
+  }
+
+  createPromise() {
+    const promise = new Promise((r1, r2) => { this.resolve = r1; this.reject = r2 })
+  }
+
+  async load() {
+    this.path = this.pathFunction(this.range)
+    this.dataPromise = live(this.api(), this.path, fun => onDispose.push(fun))
+    this.dataPromise.then(data => {
+      this.liveData.value = data
+      // if(this.hardClose) {
+      //   this.data.value = this.liveData.value
+      //   return
+      // }
+      // return this.data.value = computed(() => source.filter(element => (
+      //   (!this.range.gt  || element.id >  this.range.gt ) &&
+      //   (!this.range.gte || element.id >= this.range.gte) &&
+      //   (!this.range.lt  || element.id <  this.range.lt ) &&
+      //   (!this.range.lte || element.id <= this.range.lte)
+      // )))
+    })
+    return this.dataPromise
+  }
+
+  isTopClosed() {
+    return !!(this.range && (this.range.gt || this.range.gte))
+  }
+
+  isBottomClosed() {
+    return !!(this.range && (this.range.lt || this.range.lte))
+  }
+
+  canClose() {
+    const data = unref(this.data)
+    return data && data.length == this.bucketSize
+  }
+
+  async closeTop() {
+    const data = unref(await this.dataPromise)
+    if(!this.data) throw new Error("can't close - bucket not loaded!")
+    if(this.data.length < this.bucketSize) throw new Error("can't close - bucket not full")
+    this.range.gte = data[0].id
+    if(this.hardClose) await this.load()
+  }
+
+  async closeBottom() {
+    const data = unref(await this.dataPromise)
+    if(data.length < this.bucketSize) throw new Error("can't close - bucket not full")
+    this.range.lte = data[data.length - 1].id
+    if(this.hardClose) await this.load()
+  }
+
+  dispose() {
+    this.disposed = true
+    for(const disposeFunction of this.onDispose) {
+      disposeFunction()
+    }
+  }
+}
+
+class RangeBuckets {
+  constructor(api, pathFunction, options) {
+    this.api = api
+    this.pathFunction = pathFunction
+    this.bucketSize = options?.bucketSize || 3
+    this.position = options?.position
+    this.softClose = options?.softClose
+    this.waitForComponents = options?.waitForComponents
+
+    this.lastBucketId = 0
+    this.buckets = reactive([])
+
+    this.canLoadTop = computed(() => this.isTopLoadPossible())
+    this.canLoadBottom = computed(() => this.isBottomLoadPossible())
+
+    this.loadFirstBucket()
+  }
+
+  isTopLoadPossible() {
+    if(this.buckets.length == 0) return false
+    const firstBucket = this.buckets[0]
+    return firstBucket.isTopClosed() || firstBucket.canClose()
+  }
+
+  isBottomLoadPossible() {
+    if(this.buckets.length == 0) return false
+    const lastBucket = this.buckets[this.buckets.length - 1]
+    return lastBucket.isBottomClosed() || lastBucket.canClose()
+  }
+
+  loadFirstBucket() {
+    const firstBucket = this.createBucket({
+      gte: this.position,
+      limit: this.bucketSize
+    })
+    this.buckets.push(firstBucket)
+  }
+
+  createBucket(range) {
+    return new Bucket(++this.lastBucketId, this.api, range, this.pathFunction,
+      this.bucketSize, this.waitForComponents, !this.softClose)
+  }
+
+  async wait() {
+    console.log("WAIT FOR BUCKETS", this.buckets.length)
+    await Promise.all(this.buckets.map(bucket => bucket.promise)).then(loaded => this)
+  }
+
+  async loadTop() {
+    if(this.buckets.length == 0) return this.loadFirstBucket()
+    const firstBucket = this.buckets[0]
+    await firstBucket.promise
+    if(!this.isTopLoadPossible()) return
+    if(firstBucket != this.buckets[0]) return this.buckets[0].promise
+    let range = { limit: this.bucketSize }
+    if(!firstBucket.isTopClosed()) {
+      if(firstBucket.canClose()) {
+        await firstBucket.closeTop()
+        if(!firstBucket.isTopClosed()) throw new Error('top not closed!!!')
+        if(!this.isTopLoadPossible()) return
+        return this.loadTop()
+      } else {
+        console.log("FBD", unref(firstBucket.data))
+        throw new Error('impossible to read before bucket that is not closeable')
+      }
+    }
+    if(firstBucket.range.gte) {
+      range.lt = firstBucket.range.gte
+    } else if(firstBucket.range.gt) {
+      range.lte = firstBucket.range.gt
+    } else {
+      throw new Error('imposible to read before bucket '+ JSON.stringify(firstBucket.range))
+    }
+    const bucket = this.createBucket(range)
+    this.buckets.unshift(bucket)
+    return bucket.promise
+  }
+
+  async loadBottom() {
+    if(this.buckets.length == 0) return this.loadFirstBucket()
+    const lastBucket = this.buckets[this.buckets.length - 1]
+    await lastBucket.promise
+    if(!this.isBottomLoadPossible()) return
+    if(lastBucket != this.buckets[this.buckets.length - 1]) return this.buckets[this.buckets.length - 1].promise
+    let range = { limit: this.bucketSize }
+    if(!lastBucket.isBottomClosed()) {
+      if(lastBucket.canClose()) {
+        await lastBucket.closeBottom()
+        if(!lastBucket.isBottomClosed()) throw new Error('bottom not closed!!!')
+        if(!this.isBottomLoadPossible()) return
+        return this.loadBottom()
+      } else {
+        throw new Error('impossible to read after bucket that is not closeable')
+      }
+    }
+    if(lastBucket.range.lte) {
+      range.gt = lastBucket.range.lte
+    } else if(lastBucket.range.lt) {
+      range.lte = lastBucket.range.lt
+    } else {
+      throw new Error('imposible to read after bucket '+ JSON.stringify(lastBucket.range))
+    }
+    const bucket = this.createBucket(range)
+    this.buckets.push(bucket)
+    return bucket.promise
+  }
+
+  dropTop() {
+    if(this.buckets.length == 0) throw new Error('impossible to drop from empty')
+    const droppedBucket = this.buckets[0]
+    const height = droppedBucket.domElements.reduce((acc, el) => acc + el?.offsetHeight, 0)
+    this.buckets.shift()
+    droppedBucket.dispose()
+    return height
+  }
+
+  dropBottom() {
+    if(this.buckets.length == 0) throw new Error('impossible to drop from empty')
+    const droppedBucket = this.buckets[this.buckets.length - 1]
+    const height = droppedBucket.domElements.reduce((acc, el) => acc + el?.offsetHeight, 0)
+    this.buckets.pop()
+    droppedBucket.dispose()
+    return height
+  }
+
+  dispose() {
+    for(const bucket of this.buckets) {
+      bucket.dispose()
+    }
+    this.buckets = []
+  }
+
+}
+
+export default RangeBuckets

package/lib/ReactiveObservableList.js

@@ -0,0 +1,16 @@
+import { reactive } from 'vue'
+import { ObservableList } from '@live-change/dao'
+
+class ReactiveObservableList extends ObservableList {
+  constructor(value, what, dispose) {
+    super(value, what, dispose, (data) => {
+      if(data && typeof data == 'object') {
+        const activated = reactive(data)
+        return activated
+      }
+      return data
+    })
+  }
+}
+
+export default ReactiveObservableList

package/lib/live.js

@@ -0,0 +1,193 @@
+import { ref, onUnmounted, getCurrentInstance, unref, reactive } from 'vue'
+import { collectPointers, ExtendedObservableList } from '@live-change/dao'
+
+const liveSymbol = Symbol('live')
+
+async function live(api, path, onUnmountedCb) {
+  if(!onUnmountedCb && typeof window != 'undefined') {
+    if(getCurrentInstance()) {
+      onUnmountedCb = onUnmounted
+    } else {
+      onUnmountedCb = () => {
+        console.error("live fetch outside component instance - possible memory leak")
+      }
+    }
+  }
+
+  if(Array.isArray(path)) path = { what: path }
+  const paths = [ path ]
+  if(typeof window == 'undefined') {
+    const preFetchPaths = await api.get({ paths })
+    console.log("PRE FETCH DATA", preFetchPaths)
+    const preFetchMap = new Map(preFetchPaths.map((res) => [JSON.stringify(res.what), res] ))
+    function createObject(what, more) {
+      const res = preFetchMap.get(JSON.stringify(what))
+      if(res.error) throw new Error(res.error)
+      const data = res.data
+      if(more) {
+        if(Array.isArray(data)) {
+          for(let i = 0; i < data.length; i ++) {
+            for(const moreElement of more) {
+              if(moreElement.to) {
+                console.log("COLLECT POINTERS FROM", data[i], "SC", moreElement.schema)
+                const pointers = collectPointers(data[i], moreElement.schema ,
+                  (what) => preFetchMap.get(JSON.stringify(what)))
+                console.log("POINTERS COLLECTED", pointers)
+                const values = pointers.map(pointer => createObject(pointer, moreElement.more))
+                console.log("VALUES", values)
+                console.log("MANY", pointers.many)
+                if(pointers.many) {
+                  data[i][moreElement.to] = values
+                } else {
+                  data[i][moreElement.to] = values[0] || null
+                }
+              }
+            }
+          }
+        } else {
+          for(const moreElement of more) {
+            if(moreElement.to) {
+              const pointers = collectPointers(data, moreElement.schema,
+                (what) => preFetchMap.get(JSON.stringify(what)))
+              const values = pointers.map(pointer => createObject(pointer, moreElement.more))
+              if(pointers.many) {
+                data[moreElement.to] = values
+              } else {
+                data[moreElement.to] = values[0] || null
+              }
+            }
+          }
+        }
+      }
+      return data
+    }
+    return createObject(path.what, path.more)
+  } else {
+    const preFetchPaths = api.observable({ paths })
+    const observables = []
+    function bindResult(what, more, object, property) {
+      if(!what) throw new Error("what parameter required!")
+      const observable = api.observable(what)
+      if(more && more.some(m => m.to)) {
+        const extendedObservable = new ExtendedObservableList(observable,
+          newElement => {
+            if(!newElement) return newElement
+            const extendedElement = { ...newElement }
+            const props = {}
+            for(const moreElement of more) {
+              if(moreElement.to) {
+                const prop = {
+                  bounds: [],
+                  sources: []
+                }
+                props[moreElement.to] = prop
+                let requiredSrcs = []
+                const srcs = new Map()
+                function getSource(ptr) {
+                  const exists = srcs.get(ptr)
+                  if(exists !== undefined) return exists.list
+                  requiredSrcs.push(exists)
+                  return undefined
+                }
+                function computePointers() {
+                  while(true) {
+                    const pointers = collectPointers(newElement, moreElement.schema, getSource)
+                    if(requiredSrcs.length == 0) return pointers
+                    for(const requiredSrc of requiredSrcs) {
+                      const observable = api.observable(requiredSrc)
+                      const observer = () => {
+                        bindPointers(computePointers())
+                      }
+                      srcs.set(JSON.stringify(requiredSrc), observable)
+                      prop.sources.push({ observable, observer })
+                      observable.observe(observer)
+                    }
+                  }
+                }
+                function bindPointers(pointers) {
+                  if(pointers.many) {
+                    const oldBound = prop.bounds.slice()
+                    const newArray = new Array(pointers.length)
+                    const newBounds = new Array(pointers.length)
+                    for(let i = 0; i < pointers.length; i++) {
+                      newBounds[i] = bindResult(pointers[i], moreElements.more, newArray, i)
+                    }
+                    prop.bounds = newBounds
+                    oldBound.forEach(b => b.dispose())
+                    extendedElement[moreElement.to] = newArray
+                  } else if(pointers.length > 0) {
+                    const oldBound = prop.bounds
+                    if(!oldBound || oldBound.length == 0 ||
+                      JSON.stringify(oldBound[0].what) != JSON.stringify(pointers[0])) {
+                      if(oldBound) {
+                        prop.bounds.forEach(b => b.dispose())
+                      }
+                      if(pointers[0]) {
+                        prop.bounds = [
+                          bindResult(pointers[0], moreElement.more, extendedElement, moreElement.to)
+                        ]
+                      }
+                    }
+                  }
+                }
+                bindPointers(computePointers())
+              }
+            }
+            extendedElement[liveSymbol] = props
+            return extendedElement
+          },
+          disposedElement => {
+            if(!disposedElement) return
+            const boundProps = disposedElement[liveSymbol]
+            for(const propName in boundProps) {
+              const prop = boundProps[propName]
+              const propBounds = prop.bounds
+              for(const propBound of propBounds) {
+                //console.log("PROP BOUND DISPOSE", propBound)
+                propBound.dispose()
+              }
+              const propSources = prop.sources
+              for(const propSource of propSources) {
+                //console.log("PROP SOURCE DISPOSE", propSource)
+                propSource.observable.unobserve(propSource.observer)
+              }
+            }
+          },
+          (data) => {
+            if(data && typeof data == 'object') {
+              const activated = reactive(data)
+              return activated
+            }
+            return data
+          }
+        )
+        extendedObservable.bindProperty(object, property)
+        return {
+          what,
+          property,
+          dispose() {
+            extendedObservable.unbindProperty(object, property)
+          }
+        }
+      } else {
+        observable.bindProperty(object, property)
+        return {
+          what, property,
+          dispose() {
+            observable.unbindProperty(object, property)
+          }
+        }
+      }
+    }
+    const resultRef = ref()
+    bindResult(path.what, path.more, resultRef, 'value')
+    /// TODO: unobserve on unmounted
+    await preFetchPaths.wait()
+    while(unref(resultRef) === undefined) { // wait for next tick
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    }
+    return resultRef
+  }
+}
+
+export default live

package/lib/reactiveMixin.js

@@ -0,0 +1,83 @@
+import { watch } from 'vue'
+
+const prefix = "$lcDaoPath_"
+
+const reactiveMixin = dao => ({
+  data() {
+    if(!this.$options.reactive) return {} // Avoid distributed fat
+    let data = {}
+    for (let key in this.$options.reactive) {
+      data[key] = undefined
+      data[key+"Error"] = undefined
+    }
+    return data
+  },
+  beforeCreate() {
+    if(!this.$options.reactive) return; // Avoid distributed fat
+    if (!this.$options.computed) this.$options.computed = {}
+    for(let key in this.$options.reactive) {
+      let path = this.$options.reactive[key]
+      if(typeof path == 'function'){
+        this.$options.computed[prefix + key] = path
+      } else if(typeof path == 'string') {
+      } else if(path.length !== undefined) {
+      } else throw new Error("unknown reactive path "+path)
+    }
+  },
+  created() {
+    if(!this.$options.reactive) return; // Avoid distributed fat
+    this.reactiveObservables = {}
+    let reactiveObservables = this.reactiveObservables
+    for(let key in this.$options.reactive) {
+      let path = this.$options.reactive[key]
+      if(typeof path == 'function'){
+        let p = this[prefix + key]
+        if(p) {
+          reactiveObservables[key] = dao.observable(p)
+          reactiveObservables[key].bindProperty(this, key)
+          reactiveObservables[key].bindErrorProperty(this, key+"Error")
+        }
+        let oldPathJson
+        watch(() => this[prefix + key], newPath => {
+          const json = JSON.stringify(newPath)
+          const match = JSON.stringify(newPath) == oldPathJson
+          oldPathJson = json
+          if(match) return
+          if(reactiveObservables[key]) {
+            this[key] = undefined
+            this[key+"Error"] = undefined
+            reactiveObservables[key].unbindProperty(this, key)
+            reactiveObservables[key].unbindErrorProperty(this, key+"Error")
+          }
+          delete reactiveObservables[key]
+          if(newPath) {
+            reactiveObservables[key] = dao.observable(newPath)
+            reactiveObservables[key].bindProperty(this, key)
+            reactiveObservables[key].bindErrorProperty(this, key+"Error")
+          } else {
+            this[key] = undefined
+          }
+        })
+      } else if(typeof path == 'string') {
+        reactiveObservables[key] = dao.observable(path)
+        reactiveObservables[key].bindProperty(this, key)
+        reactiveObservables[key].bindErrorProperty(this, key+"Error")
+      } else if(path.length !== undefined) {
+        //console.log("DAO", dao)
+        reactiveObservables[key] = dao.observable(path)
+        reactiveObservables[key].bindProperty(this, key)
+        reactiveObservables[key].bindErrorProperty(this, key+"Error")
+      } else throw new Error("unknown reactive path "+path)
+    }
+  },
+  beforeUnmount() {
+    if(!this.$options.reactive) return; // Avoid distributed fat
+    let reactiveObservables = this.reactiveObservables
+    for(let key in reactiveObservables) {
+      reactiveObservables[key].unbindProperty(this, key)
+      reactiveObservables[key].unbindErrorProperty(this, key+"Error")
+    }
+  }
+})
+
+export default reactiveMixin

package/lib/reactivePrefetchMixin.js

@@ -0,0 +1,57 @@
+import { watch } from 'vue'
+
+let prefix = "$lcDaoPath_"
+
+const reactivePrefetchMixin = dao => ({
+  beforeCreate() {
+    if(typeof window == 'undefined') return // NO REACTIVE PREFETCH ON SERVER
+    if(!this.$options.reactivePreFetch) return
+    if (!this.$options.computed) this.$options.computed = {}
+    this.$options.computed[prefix + "_reactivePreFetch"] = function() {
+      return this.$options.reactivePreFetch.call(this, this.$route, this.$router)
+    }
+    const optionData = this.$options.data
+    this.$options.data = function vueReactiveDaoInjectedDataFn () {
+      const data = (
+          (typeof optionData === 'function')
+              ? optionData.call(this)
+              : optionData
+      ) || {}
+      data.reactivePreFetchedPaths = []
+      data.reactivePreFetchError = null
+      return data
+    }
+  },
+  created() {
+    if(typeof window == 'undefined') return // NO REACTIVE PREFETCH ON SERVER
+    if(!this.$options.reactivePreFetch) return
+    let paths = this[prefix + "_reactivePreFetch"]
+    if(paths) {
+      this.reactivePreFetchObservable = dao.observable({ paths })
+      this.reactivePreFetchObservable.bindProperty(this, "reactivePreFetchedPaths")
+      this.reactivePreFetchObservable.bindErrorProperty(this, "reactivePreFetchError")
+    }
+    watch(() => this[prefix + "_reactivePreFetch"], paths => {
+      if(this.reactivePreFetchObservable) {
+        this.reactivePreFetchObservable.unbindProperty(this, "reactivePreFetchedPaths")
+        this.reactivePreFetchObservable.unbindErrorProperty(this, "reactivePreFetchError")
+      }
+      delete this.reactivePreFetchObservable
+      if(paths) {
+        this.reactivePreFetchObservable = dao.observable({ paths })
+        this.reactivePreFetchObservable.bindProperty(this, "reactivePreFetchedPaths")
+        this.reactivePreFetchObservable.bindErrorProperty(this, "reactivePreFetchError")
+      }
+    })
+  },
+  beforeUnmount() {
+    if(typeof window == 'undefined') return; // NO REACTIVE PREFETCH ON SERVER
+    if(!this.$options.reactivePreFetch) return; // Avoid distributed fat
+    if(this.reactivePreFetchObservable) {
+      this.reactivePreFetchObservable.unbindProperty(this, "reactivePreFetchedPaths")
+      this.reactivePreFetchObservable.unbindErrorProperty(this, "reactivePreFetchError")
+    }
+  }
+})
+
+export default reactivePrefetchMixin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/dao-vue3",
-  "version": "0.1.16",
+  "version": "0.1.20",
   "author": {
     "email": "m8@em8.pl",
     "name": "Michał Łaszczewski",
@@ -10,7 +10,7 @@
     "url": "https://github.com/live-change/dao-vue3/issues"
   },
   "dependencies": {
-    "@live-change/dao": "^0.2.41"
+    "@live-change/dao": "^0.3.9"
   },
   "devDependencies": {},
   "description": "Vue.js integration for live-change dao",