@live-change/vue3-components 0.2.4 → 0.2.5

package/index.js

@@ -19,6 +19,6 @@ import createReactiveObject from "./utils/createReactiveObject.mjs"
 
 export { createReactiveObject }
 
-import { analytics, useAnalytics, installRouterAnalytics } from "./logic"
-export { analytics, useAnalytics, installRouterAnalytics }
+import { analytics, useAnalytics, installRouterAnalytics, synchronized, synchronizedList } from "./logic"
+export { analytics, useAnalytics, installRouterAnalytics, synchronized, synchronizedList }
 

package/logic/index.js

@@ -8,6 +8,12 @@ export { Loading, LoadingZone, WorkingZone, Observe }
 import { analytics, useAnalytics, installRouterAnalytics } from "./analytics.js"
 export { analytics, useAnalytics, installRouterAnalytics }
 
+import { synchronized } from "./synchronized.js"
+export { synchronized }
+
+import { synchronizedList } from "./synchronizedList.js"
+export { synchronizedList }
+
 function registerLogicComponents(app) {
   app.component("loading", Loading)
   app.component("loading-zone", LoadingZone)

package/logic/synchronized.js

@@ -0,0 +1,91 @@
+import { computed, ref, watch } from "vue"
+import { useThrottleFn } from "@vueuse/core"
+
+function synchronized(options) {
+  const {
+    source,
+    update,
+    identifiers = {},
+    timeField = 'lastUpdate',
+    timeSource = () => (new Date()).toISOString(),
+    onChange = () => {},
+    onSave = () => {},
+    recursive = false,
+    throttle = 300,
+    autoSave = true
+  } = options
+  if(!source) throw new Error('source must be defined')
+  if(!update) throw new Error('update function must be defined')
+  if(recursive) {
+    const synchronizedValue = ref(JSON.parse(JSON.stringify(source.value || {})))
+    const synchronizedJSON = computed(() => JSON.stringify(synchronizedValue.value))
+    const lastLocalUpdate = ref(synchronized.value ? synchronizedValue.value[timeField] : '')
+
+    let lastSavedUpdate = lastLocalUpdate.value
+
+    const changed = computed(() => (JSON.stringify(source.value) != synchronizedJSON.value)
+                                && (lastLocalUpdate.value > ((source.value && source.value[timeField]) ?? '')))
+    async function save() {
+      if((JSON.stringify(source.value) == JSON.stringify(synchronizedValue.value))
+         || (lastLocalUpdate.value <= ((source.value && source.value[timeField]) ?? ''))) {
+        return false // identical, no need to save
+      }
+      if(lastSavedUpdate == lastLocalUpdate.value) {
+        return false // duplicated save action
+      }
+      lastSavedUpdate = lastLocalUpdate.value
+      const data = JSON.parse(synchronizedJSON.value)
+      // console.log("LAST LOCAL UPDATE", lastLocalUpdate.value)
+      // console.log("LAST REMOTE UPDATE", ((source.value && source.value[timeField]) ?? ''))
+      // console.log("SOURCE JSON", JSON.stringify(source.value))
+      // console.log("SYNCHRONIZED JSON", JSON.stringify(synchronizedValue.value))
+      await update({ ...data, [timeField]: lastLocalUpdate.value, ...identifiers })
+      onSave()
+      return true
+    }
+    const throttledSave = throttle ? useThrottleFn(save, throttle) : save
+    watch(() => synchronizedJSON.value, json => {
+      lastLocalUpdate.value = timeSource()
+      onChange()
+      if(autoSave) throttledSave()
+    })
+    watch(() => source.value, sourceData => {
+      if(sourceData) {
+        console.log("SRC DATA", sourceData)
+        lastLocalUpdate.value = sourceData[timeField]
+      }
+    })
+    return { value: synchronizedValue, save, changed }
+  } else {
+    const local = ref(source.value)
+    const changed = computed(() => (JSON.stringify(source.value) != JSON.stringify(local.value))
+                                && ( ((local.value && local.value[timeField]) ?? '')
+                                   > ((source.value && source.value[timeField]) ?? '')))
+    async function save() {
+      if((JSON.stringify(source.value) == JSON.stringify(local.value))
+         || ( ((local.value && local.value[timeField]) ?? '')
+           <= ((source.value && source.value[timeField]) ?? ''))) return false // identical, no need to save
+      const data = JSON.parse(JSON.stringify(local.value))
+      await update({ ...data, ...identifiers })
+      onSave()
+      return true
+    }
+    const throttledSave = throttle ? useThrottleFn(save, throttle) : save
+    const synchronizedComputed = computed({
+      get: () => {
+        const localTime = ((local.value && local.value[timeField]) ?? '')
+        const sourceTime = ((source.value && source.value[timeField]) ?? '')
+        return localTime > sourceTime ? local.value : source.value
+      },
+      set: newValue => {
+        local.value = { ...newValue, [timeField]: timeSource() }
+        onChange()
+        if(autoSave) throttledSave()
+      }
+    })
+    return { value: synchronizedComputed, save, changed }
+  }
+}
+
+export { synchronized }
+export default synchronized

package/logic/synchronizedList.js

@@ -0,0 +1,146 @@
+import { computed, ref, watch } from "vue"
+import { useThrottleFn } from "@vueuse/core"
+import { synchronized } from './synchronized.js'
+
+function sortedArraysMerge(merge, ...arrays) {
+  const result = []
+  const positions = arrays.map(a => 0)
+  let incremented = false
+  do {
+    incremented = false
+    let lowestId = '\xFF\xFF\xFF\xFF\xFF'
+    for(const arrayIndex in arrays) {
+      const position = positions[arrayIndex]
+      const array = arrays[arrayIndex]
+      if(position < array.length && array[position].id < lowestId) {
+        lowestId = array[position].id
+      }
+    }
+    let objects = new Array(arrays.length)
+    for(const arrayIndex in arrays) {
+      const position = positions[arrayIndex]
+      const array = arrays[arrayIndex]
+      if(position < array.length && array[position].id == lowestId) {
+        objects[arrayIndex] = array[position]
+        positions[arrayIndex]++
+      } else {
+        objects[arrayIndex] = null
+      }
+    }
+    const mergeResult = merge(...objects)
+    if(mergeResult) {
+      result.push(mergeResult)
+    }
+  } while (incremented)
+  return result
+}
+
+function synchronizedList(options) {
+  const {
+    source,
+    update: updateAction,
+    insert: insertAction,
+    remove: removeAction,
+    move: moveAction,
+    identifiers = {},
+    objectIdentifiers = object => ({ id: object.id }),
+    timeField = 'lastUpdate',
+    timeSource = () => (new Date()).toISOString(),
+    onChange = () => {},
+    onSave = () => {},
+    recursive = false,
+    throttle = 300,
+    autoSave = true,
+    mapper = source => synchronized({
+        source, update: updateAction, identifiers: { ...identifiers, ...objectIdentifiers(source.value) }, timeField, timeSource,
+        recursive, throttle, autoSave, onSave, onChange
+      })
+  } = options
+  if(!source) throw new Error('source must be defined')
+  const synchronizedList = ref([])
+  const locallyAdded = ref([])
+  const locallyRemoved = ref([])
+
+  function createSynchronizedElement(sourceData) {
+    const elementSource = ref(sourceData)
+    const synchronizedElement = mapper(elementSource)
+    synchronizedElement.source = elementSource
+    synchronizedElement.id = sourceData.id
+    return synchronizedElement
+  }
+  function synchronizeFromSource() {
+    let obsoleteLocallyAdded = new Set()
+    let obsoleteLocallyRemoved = new Set()
+    let newSynchronized = sortedArraysMerge(
+      (synchronizedElement, sourceElement, locallyAddedElement, locallyRemovedElement) => {
+        if(locallyAddedElement && sourceElement) {
+          obsoleteLocallyAdded.add(locallyAddedElement.id)
+        }
+        if(locallyRemovedElement && !sourceElement) {
+          obsoleteLocallyRemoved.add(locallyAddedElement.id)
+        }
+
+        if(synchronizedElement) {
+          if(locallyRemovedElement) {
+            return null // synchronized element locally
+          }
+          if(sourceElement) {
+            synchronizedElement.source.value = sourceElement
+          } else if(locallyAddedElement) {
+            synchronizedElement.source.value = locallyAddedElement
+          } else {
+            return null // synchronized element deleted
+          }
+        } else if(sourceElement) {
+          console.log("CREATE SYNCHRONIZED FROM SOURCE!")
+          return createSynchronizedElement(sourceElement)
+        } else if(locallyAddedElement) {
+          return createSynchronizedElement(locallyAddedElement)
+        }
+      }, synchronizedList.value, source.value || [], locallyAdded.value, locallyRemoved.value)
+    if(obsoleteLocallyAdded.length > 0) {
+      locallyAdded.value = locallyAdded.value.filter(
+        locallyAddedElement => obsoleteLocallyAdded.has(locallyAddedElement.id)
+      )
+    }
+    if(obsoleteLocallyRemoved.length > 0) {
+      locallyRemoved.value = locallyRemoved.value.filter(
+        locallyRemovedElement => obsoleteLocallyRemoved.has(locallyRemovedElement.id)
+      )
+    }
+    synchronizedList.value = newSynchronized
+  }
+
+  const sourceIds = computed(() => (source.value ?? []).map(({ id }) => id))
+  watch(() => sourceIds, () => synchronizeFromSource())
+
+  synchronizeFromSource()
+
+  const changed = computed(() => (synchronizedList.value.some(({ changed }) => changed.value))
+                              || locallyAdded.length || locallyRemoved.length)
+
+  async function save() {
+    const results = await Promise.app(synchronizedList.value.map(synchronizedElement => synchronizedElement.save()))
+    return results.some(res => res)
+  }
+
+  async function insert(element) {
+    locallyAdded.push(element)
+    await insertAction({ ...element, [timeField]: timeSource(), ...identifiers })
+  }
+
+  async function remove(element) {
+    locallyRemoved.push(element)
+    await removeAction({ ...element, ...identifiers })
+  }
+
+  async function move(element, toId) {
+    throw new Error('not implemented yet')
+  }
+
+  const synchronizedValue = computed(() => synchronizedList.value.map(synchronizedElement => synchronizedElement.value))
+  return { value: synchronizedValue, save, changed, insert, remove, move }
+}
+
+export default synchronizedList
+export { synchronizedList }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Live Change Framework - vue components",
   "main": "index.js",
   "scripts": {
@@ -21,10 +21,10 @@
   },
   "homepage": "https://github.com/live-change/live-change-framework-vue3",
   "dependencies": {
-    "@live-change/vue3-ssr": "^0.2.4",
+    "@live-change/vue3-ssr": "^0.2.5",
     "debug": "^4.3.2",
     "mitt": "3.0.0",
     "vue": "^3.2.31"
   },
-  "gitHead": "fc932e431ba4a6bde00e4e9f24f56c47e8fff33b"
+  "gitHead": "923504c224dd1e3cc5b6bb8296f0963965cd4d10"
 }