@xen-orchestra/web-core 0.48.0 → 0.48.1

package/lib/packages/remote-resource/README.md

@@ -48,6 +48,48 @@ const useMyResource = defineRemoteResource({
 const { myResource, customProp } = useMyResource()
 ```
 
+### State
+
+When managing arrays, avoid using `computed` inside the `state` function. This can cause performance issues because each call to `computed` will perform a full iteration over `data` every time it's updated. For example, for a large collection of 10,000 elements, three calls to `computed` based on `data` will generate 30,000 iterations. Instead, use `watch` and a `forEach` loop, and distribute your data across multiple references (`ref`) so that `data` is only iterated over once with each modification.
+
+```typescript
+const useMyResource = defineRemoteResource({
+  url: '/api/path/to/resource',
+  initialData: () => [] as MyResource[],
+  state: (data) => {
+    const filteredResources = ref<MyResource[]>([])
+    const anotherFilteredResources = ref<MyResource[]>([])
+
+    watch(data, _data => {
+      const tmpFilteredResources: MyResource[] = []
+      const tmpAnotherFilteredResources: MyResource[] = []
+
+      _data.forEach(value => {
+        if(value.foo === 'Foo'){
+          tmpFilteredResources.push(value)
+        } else if (value.foo === 'Bar'){
+          tmpAnotherFilteredResources.push(value)
+        }
+      })
+
+      filteredResources.value = tmpFilteredResources
+      anotherFilteredResources.value = tmpAnotherFilteredResources
+    })
+
+    return {
+      myResource: data,
+      filteredResources,
+      anotherFilteredResources
+    }
+  },
+  onDataReceived: (currentData, receivedData) => {
+    deepMerge(currentData.value, receivedData)
+  }
+}
+
+
+```
+
 ## Context
 
 The context is available in the `$context` property of the returned state.

package/lib/packages/remote-resource/define-remote-resource.ts

@@ -8,7 +8,7 @@ import type { ResourceContext, UseRemoteResource } from '@core/packages/remote-r
 import type { VoidFunction } from '@core/types/utility.type.ts'
 import { ifElse } from '@core/utils/if-else.utils.ts'
 import { type MaybeRef, noop, useTimeoutPoll } from '@vueuse/core'
-import { merge, remove } from 'lodash-es'
+import { debounce, merge, remove } from 'lodash-es'
 import readNDJSONStream from 'ndjson-readablestream'
 import {
   computed,
@@ -20,6 +20,8 @@ import {
   reactive,
   type Ref,
   ref,
+  shallowRef,
+  triggerRef,
   toRef,
   toValue,
   watch,
@@ -255,7 +257,9 @@ export function defineRemoteResource<
 
     const hasError = computed(() => lastError.value !== undefined)
 
-    const data = ref(buildData()) as Ref<TData>
+    const data = shallowRef(buildData()) as Ref<TData>
+    // trigger reactivity on data when no more updates since 100ms or after 500ms
+    const flushData = debounce(() => triggerRef(data), 100, { maxWait: 500 })
 
     async function execute() {
       try {
@@ -275,9 +279,11 @@ export function defineRemoteResource<
         if (config.stream) {
           for await (const event of readNDJSONStream(response.body)) {
             onDataReceived(data, event)
+            flushData()
           }
         } else {
           onDataReceived(data, await response.json())
+          flushData()
         }
 
         isReady.value = true
@@ -302,8 +308,14 @@ export function defineRemoteResource<
           handleWatching,
           handlePost,
           resource,
-          onDataReceived: receivedData => onDataReceived(data, receivedData, context),
-          onDataRemoved: receivedData => onDataRemoved(data, receivedData, context),
+          onDataReceived: receivedData => {
+            onDataReceived(data, receivedData, context)
+            flushData()
+          },
+          onDataRemoved: receivedData => {
+            onDataRemoved(data, receivedData, context)
+            flushData()
+          },
         })
         await execute()
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.48.0",
+  "version": "0.48.1",
   "private": false,
   "exports": {
     "./*": {