@live-change/dao-vue3 0.1.21 → 0.4.0

package/lib/RangeBuckets.js

@@ -19,7 +19,11 @@ class Bucket {
     this.data = computed(() => {
       const ldv = this.liveData.value
       if(!ldv) return []
-      const source = unref(ldv)
+      let source = unref(ldv)
+      if(this.range.reverse) {
+        source = source.slice()
+        source.reverse()
+      }
       if(this.hardClose) {
         return source
       }
@@ -46,16 +50,6 @@ class Bucket {
     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
   }
@@ -77,14 +71,14 @@ class Bucket {
     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
+    this.range.gte = data[this.range.reverse ? data.length - 1 : 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
+    this.range.lte = data[this.range.reverse ? 0 : data.length - 1].id
     if(this.hardClose) await this.load()
   }
 
@@ -140,17 +134,20 @@ class RangeBuckets {
   }
 
   async wait() {
-    console.log("WAIT FOR BUCKETS", this.buckets.length)
+    //console.log("WAIT FOR BUCKETS", this.buckets.length)
     await Promise.all(this.buckets.map(bucket => bucket.promise)).then(loaded => this)
   }
 
   async loadTop() {
+    //console.log("LOAD TOP!", this.isTopLoadPossible())
     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 != this.buckets[0]) {
+      return this.buckets[0].promise
+    }
+    let range = { limit: this.bucketSize, reverse: true }
     if(!firstBucket.isTopClosed()) {
       if(firstBucket.canClose()) {
         await firstBucket.closeTop()
@@ -175,11 +172,14 @@ class RangeBuckets {
   }
 
   async loadBottom() {
+    //console.log("LOAD BOTTOM!", this.isBottomLoadPossible())
     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
+    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()) {
@@ -205,14 +205,17 @@ class RangeBuckets {
 
   dropTop() {
     if(this.buckets.length == 0) throw new Error('impossible to drop from empty')
+    //console.log("DROP TOP!")
     const droppedBucket = this.buckets[0]
-    const height = droppedBucket.domElements.reduce((acc, el) => acc + el?.offsetHeight, 0)
+    const height = droppedBucket.domElements.reduce((acc, el) => acc + (el?.offsetHeight || 0), 0)
+    //console.log("DOM ELEMENTS", droppedBucket.domElements.map(el => el?.offsetHeight || 0), height)
     this.buckets.shift()
     droppedBucket.dispose()
     return height
   }
 
   dropBottom() {
+    //console.log("DROP BOTTOM!")
     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)

package/lib/live.js

@@ -1,5 +1,7 @@
 import { ref, onUnmounted, getCurrentInstance, unref, reactive } from 'vue'
 import { collectPointers, ExtendedObservableList } from '@live-change/dao'
+import nodeDebug from "debug"
+const debug = nodeDebug('dao-vue3')
 
 const liveSymbol = Symbol('live')
 
@@ -18,24 +20,24 @@ async function live(api, path, onUnmountedCb) {
   const paths = [ path ]
   if(typeof window == 'undefined') {
     const preFetchPaths = await api.get({ paths })
-    console.log("PRE FETCH DATA", preFetchPaths)
+    debug("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(data && 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)
+                debug("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)
+                debug("POINTERS COLLECTED", pointers)
                 const values = pointers.map(pointer => createObject(pointer, moreElement.more))
-                console.log("VALUES", values)
-                console.log("MANY", pointers.many)
+                debug("VALUES", values)
+                debug("MANY", pointers.many)
                 if(pointers.many) {
                   data[i][moreElement.to] = values
                 } else {
@@ -59,7 +61,7 @@ async function live(api, path, onUnmountedCb) {
           }
         }
       }
-      return data
+      return ref(data)
     }
     return createObject(path.what, path.more)
   } else {
@@ -148,7 +150,8 @@ async function live(api, path, onUnmountedCb) {
               }
               const propSources = prop.sources
               for(const propSource of propSources) {
-                //console.log("PROP SOURCE DISPOSE", propSource)
+                debug("PROP SOURCE DISPOSE", propSource)
+                debug("UNOBSERVE PROPERTY", what, object, property)
                 propSource.observable.unobserve(propSource.observer)
               }
             }
@@ -166,6 +169,7 @@ async function live(api, path, onUnmountedCb) {
           what,
           property,
           dispose() {
+            debug("UNBIND PROPERTY", what, object, property)
             extendedObservable.unbindProperty(object, property)
           }
         }
@@ -174,14 +178,20 @@ async function live(api, path, onUnmountedCb) {
         return {
           what, property,
           dispose() {
+            debug("UNBIND PROPERTY", what, object, property)
             observable.unbindProperty(object, property)
           }
         }
       }
     }
     const resultRef = ref()
-    bindResult(path.what, path.more, resultRef, 'value')
-    /// TODO: unobserve on unmounted
+    const bound = bindResult(path.what, path.more, resultRef, 'value')
+    const pathsObserver = (signal, value) => {}
+    preFetchPaths.observe(pathsObserver)
+    onUnmountedCb(() => {
+      preFetchPaths.unobserve(pathsObserver)
+      bound.dispose()
+    })
     await preFetchPaths.wait()
     while(unref(resultRef) === undefined) { // wait for next tick
       await new Promise((resolve) => setTimeout(resolve, 0))

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@live-change/dao-vue3",
-  "version": "0.1.21",
+  "version": "0.4.0",
   "author": {
     "email": "m8@em8.pl",
     "name": "Michał Łaszczewski",
     "url": "http://www.viamage.com/"
   },
   "bugs": {
-    "url": "https://github.com/live-change/dao-vue3/issues"
+    "url": "https://github.com/live-change/live-change-dao/issues"
   },
   "dependencies": {
-    "@live-change/dao": "^0.3.9"
+    "@live-change/dao": "^0.4.0"
   },
-  "devDependencies": {},
   "description": "Vue.js integration for live-change dao",
   "directories": {},
-  "homepage": "https://github.com/live-change/dao-vue3",
+  "homepage": "https://github.com/live-change/live-change-dao",
   "license": "MIT",
   "main": "index.js",
   "module": "index.js",
@@ -25,7 +24,6 @@
       "name": "Michał Łaszczewski"
     }
   ],
-  "optionalDependencies": {},
   "readme": "README.md",
   "repository": {
     "type": "git",
@@ -33,5 +31,6 @@
   },
   "scripts": {
     "compileTests": "webpack test/*.js tests-bundle.js"
-  }
+  },
+  "gitHead": "106431c736de8c92ba07cbba1bb85aac4925a93f"
 }