@live-change/dao-vue3 0.1.19 → 0.2.0

package/lib/RangeBuckets.js

@@ -1,5 +1,5 @@
 import live from "./live.js"
-import { computed, reactive, unref } from "vue"
+import { computed, reactive, ref, unref, watch } from "vue"
 
 class Bucket {
 
@@ -16,7 +16,26 @@ class Bucket {
     this.onDispose = []
     this.domElements = []
 
-    this.data = undefined
+    this.data = computed(() => {
+      const ldv = this.liveData.value
+      if(!ldv) return []
+      let source = unref(ldv)
+      if(this.range.reverse) {
+        source = source.slice()
+        source.reverse()
+      }
+      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
@@ -30,16 +49,7 @@ class Bucket {
     this.path = this.pathFunction(this.range)
     this.dataPromise = live(this.api(), this.path, fun => onDispose.push(fun))
     this.dataPromise.then(data => {
-      if(this.hardClose) {
-        this.data = data
-        return
-      }
-      this.data = computed(() => data.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.value = data
     })
     return this.dataPromise
   }
@@ -61,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()
   }
 
@@ -92,9 +102,24 @@ class RangeBuckets {
     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,
@@ -109,32 +134,25 @@ class RangeBuckets {
   }
 
   async wait() {
+    //console.log("WAIT FOR BUCKETS", this.buckets.length)
     await Promise.all(this.buckets.map(bucket => bucket.promise)).then(loaded => this)
   }
 
-  canLoadTop() {
-    if(this.buckets.length == 0) return false
-    const firstBucket = this.buckets[0]
-    return firstBucket.isTopClosed() || firstBucket.canClose()
-  }
-
-  canLoadBottom() {
-    if(this.buckets.length == 0) return false
-    const lastBucket = this.buckets[this.buckets.length - 1]
-    return lastBucket.isBottomClosed() || lastBucket.canClose()
-  }
-
   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.canLoadTop()) return
-    if(firstBucket != this.buckets[0]) return this.buckets[0].promise
-    let range = { limit: this.bucketSize }
+    if(!this.isTopLoadPossible()) return
+    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()
-        if(!this.canLoadTop()) return
+        if(!firstBucket.isTopClosed()) throw new Error('top not closed!!!')
+        if(!this.isTopLoadPossible()) return
         return this.loadTop()
       } else {
         console.log("FBD", unref(firstBucket.data))
@@ -154,16 +172,20 @@ 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.canLoadBottom()) return
-    if(lastBucket != this.buckets[this.buckets.length - 1]) return this.buckets[this.buckets.length - 1].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')
@@ -183,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,4 +1,4 @@
-import { ref, onUnmounted, getCurrentInstance, unref, nextTick } from 'vue'
+import { ref, onUnmounted, getCurrentInstance, unref, reactive } from 'vue'
 import { collectPointers, ExtendedObservableList } from '@live-change/dao'
 
 const liveSymbol = Symbol('live')
@@ -24,7 +24,7 @@ async function live(api, path, onUnmountedCb) {
       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) {
@@ -59,7 +59,7 @@ async function live(api, path, onUnmountedCb) {
           }
         }
       }
-      return data
+      return ref(data)
     }
     return createObject(path.what, path.more)
   } else {
@@ -72,7 +72,7 @@ async function live(api, path, onUnmountedCb) {
         const extendedObservable = new ExtendedObservableList(observable,
           newElement => {
             if(!newElement) return newElement
-            const extendedElement = { ...newElement }
+            const extendedElement = reactive({ ...newElement })
             const props = {}
             for(const moreElement of more) {
               if(moreElement.to) {
@@ -152,6 +152,13 @@ async function live(api, path, onUnmountedCb) {
                 propSource.observable.unobserve(propSource.observer)
               }
             }
+          },
+          (data) => {
+            if(data && typeof data == 'object') {
+              const activated = reactive(data)
+              return activated
+            }
+            return data
           }
         )
         extendedObservable.bindProperty(object, property)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/dao-vue3",
-  "version": "0.1.19",
+  "version": "0.2.0",
   "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",