@live-change/dao-vue3 0.8.21 → 0.8.23

package/LICENSE.md

@@ -0,0 +1,11 @@
+Copyright 2019-2024 Michał Łaszczewski
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/index.js

@@ -1,8 +1,9 @@
 import reactiveMixin from './lib/reactiveMixin.js'
 import reactivePrefetchMixin from './lib/reactivePrefetchMixin.js'
-import { live, fetch } from './lib/live.js'
+export { live, fetch } from './lib/live.js'
 import ReactiveObservableList from './lib/ReactiveObservableList.js'
 import RangeBuckets from './lib/RangeBuckets.js'
+import freezable from './lib/freezable.js'
 
 const ReactiveDaoVue = {
   install(Vue, options) {
@@ -14,6 +15,6 @@ const ReactiveDaoVue = {
 }
 
 //// TODO: rename reactive to live
-export { ReactiveDaoVue, reactiveMixin, reactivePrefetchMixin, ReactiveObservableList, RangeBuckets, live, fetch }
+export { ReactiveDaoVue, reactiveMixin, reactivePrefetchMixin, ReactiveObservableList, RangeBuckets, freezable }
 
 export default ReactiveDaoVue

package/lib/RangeBuckets.js

@@ -1,5 +1,6 @@
 import live from "./live.js"
-import { computed, reactive, ref, unref, watch } from "vue"
+import freezable from './freezable.js'
+import { computed, reactive, ref, unref, watch, shallowRef, isRef } from "vue"
 
 class Bucket {
 
@@ -16,10 +17,14 @@ class Bucket {
     this.onDispose = []
     this.domElements = []
 
+    this.freeze = () => {}
+    this.unfreeze = () => {}
+    this.changed = ref(false)
+
     this.data = computed(() => {
       const ldv = this.liveData.value
       if(!ldv) return []
-      let source = unref(ldv)
+      let source = unref(unref(ldv))
       if(this.range.reverse) {
         source = source.slice()
         source.reverse()
@@ -35,6 +40,7 @@ class Bucket {
       ))
     })
     this.liveData = ref(null)
+    this.rawLiveData = ref(null)
 
     this.load()
 
@@ -48,8 +54,16 @@ class Bucket {
   async load() {
     this.path = this.pathFunction(this.range)
     this.dataPromise = live(this.api(), this.path, fun => this.onDispose.push(fun))
-    this.dataPromise.then(data => {
-      this.liveData.value = data
+    this.dataPromise.then(dataRef => {
+      this.rawLiveData.value = dataRef
+      const { freeze, unfreeze, output, changed } = freezable(dataRef)
+      this.freeze = freeze
+      this.unfreeze = unfreeze
+      watch(() => changed.value, v => {
+        if(isRef(this.changed)) this.changed.value = v
+          else this.changed = v
+      }, { immediate: true })
+      this.liveData.value = output
     })
     return this.dataPromise
   }
@@ -64,7 +78,7 @@ class Bucket {
 
   canClose() {
     const data = unref(this.data)
-    return data && data.length == this.bucketSize
+    return data && data.length === this.bucketSize
   }
 
   async closeTop() {
@@ -105,17 +119,19 @@ class RangeBuckets {
     this.canLoadTop = computed(() => this.isTopLoadPossible())
     this.canLoadBottom = computed(() => this.isBottomLoadPossible())
 
+    this.changed = computed(() => this.buckets.some(bucket => bucket.changed))
+
     this.loadFirstBucket()
   }
 
   isTopLoadPossible() {
-    if(this.buckets.length == 0) return false
+    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
+    if(this.buckets.length === 0) return false
     const lastBucket = this.buckets[this.buckets.length - 1]
     return lastBucket.isBottomClosed() || lastBucket.canClose()
   }
@@ -141,11 +157,11 @@ class RangeBuckets {
 
   async loadTop() {
     //console.log("LOAD TOP!", this.isTopLoadPossible())
-    if(this.buckets.length == 0) return this.loadFirstBucket()
+    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]) {
+    if(firstBucket !== this.buckets[0]) {
       return this.buckets[0].promise
     }
     let range = { limit: this.bucketSize, reverse: true }
@@ -174,11 +190,11 @@ class RangeBuckets {
 
   async loadBottom() {
     //console.log("LOAD BOTTOM!", this.isBottomLoadPossible())
-    if(this.buckets.length == 0) return this.loadFirstBucket()
+    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]) {
+    if(lastBucket !== this.buckets[this.buckets.length - 1]) {
       return this.buckets[this.buckets.length - 1].promise
     }
     let range = { limit: this.bucketSize }
@@ -205,7 +221,7 @@ class RangeBuckets {
   }
 
   dropTop() {
-    if(this.buckets.length == 0) throw new Error('impossible to drop from empty')
+    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), 0)
@@ -217,7 +233,7 @@ class RangeBuckets {
 
   dropBottom() {
     //console.log("DROP BOTTOM!")
-    if(this.buckets.length == 0) throw new Error('impossible to drop from empty')
+    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()
@@ -225,6 +241,18 @@ class RangeBuckets {
     return height
   }
 
+  freeze() {
+    for(const bucket of this.buckets) {
+      bucket.freeze()
+    }
+  }
+
+  unfreeze() {
+    for(const bucket of this.buckets) {
+      bucket.unfreeze()
+    }
+  }
+
   dispose() {
     for(const bucket of this.buckets) {
       bucket.dispose()

package/lib/freezable.js

@@ -0,0 +1,24 @@
+import { ref, onUnmounted, getCurrentInstance, unref, reactive, isRef, shallowRef, watch, computed } from 'vue'
+
+export default function freezable(source) {
+  if(typeof window === 'undefined') return {
+    output: source,
+    changed: ref(false),
+    freeze() {},
+    unfreeze() {}
+  }
+  const frozen = ref(false)
+  function freeze() {
+    if(frozen.value) return
+    frozen.value = JSON.parse(JSON.stringify(source.value))
+  }
+  function unfreeze() {
+    frozen.value = false
+  }
+  const output = computed(() => {
+    if(frozen.value) return frozen.value
+    return source.value
+  })
+  const changed = computed(() => JSON.stringify(output.value) !== JSON.stringify(source.value))
+  return { output, freeze, unfreeze, changed }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/dao-vue3",
-  "version": "0.8.21",
+  "version": "0.8.23",
   "author": {
     "email": "m8@em8.pl",
     "name": "Michał Łaszczewski",
@@ -10,7 +10,7 @@
     "url": "https://github.com/live-change/live-change-stack/issues"
   },
   "dependencies": {
-    "@live-change/dao": "0.8.21"
+    "@live-change/dao": "^0.8.23"
   },
   "type": "module",
   "description": "Vue.js integration for live-change dao",
@@ -32,5 +32,5 @@
   "scripts": {
     "compileTests": "webpack test/*.js tests-bundle.js"
   },
-  "gitHead": "4453aa639a9fe1a857d93d73ebd28a82c97fdd87"
+  "gitHead": "581260523149a1e596f08e878b5f4fabeaba26ea"
 }