@xen-orchestra/web-core 0.48.1 → 0.49.0

package/lib/packages/form-bindings/use-form-bindings.ts

@@ -0,0 +1,61 @@
+import type { FormSelectId } from '@core/packages/form-select'
+import { computed, type ComputedRef } from 'vue'
+
+export type ModelBinding<T> = {
+  modelValue: T
+  'onUpdate:modelValue': (value: T) => void
+}
+
+export type UseFormBindingsReturn<T extends Record<string, unknown>> = {
+  useField: {
+    <K extends keyof T>(key: K): ComputedRef<ModelBinding<T[K]>>
+    <K extends keyof T, E extends Record<string, unknown>>(
+      key: K,
+      metadata: () => E
+    ): ComputedRef<ModelBinding<T[K]> & E>
+  }
+  useSelect: {
+    (id: FormSelectId): ComputedRef<{ id: FormSelectId }>
+    <E extends Record<string, unknown>>(id: FormSelectId, metadata: () => E): ComputedRef<{ id: FormSelectId } & E>
+  }
+}
+
+export function useFormBindings<T extends Record<string, unknown>>(source: T): UseFormBindingsReturn<T> {
+  function useField<K extends keyof T>(key: K): ComputedRef<ModelBinding<T[K]>>
+  function useField<K extends keyof T, E extends Record<string, unknown>>(
+    key: K,
+    metadata: () => E
+  ): ComputedRef<ModelBinding<T[K]> & E>
+  function useField<K extends keyof T, E extends Record<string, unknown> = Record<string, unknown>>(
+    key: K,
+    metadata?: () => E
+  ) {
+    return computed(() => ({
+      modelValue: source[key],
+      'onUpdate:modelValue': (value: T[K]) => {
+        source[key] = value
+      },
+      ...metadata?.(),
+    }))
+  }
+
+  function useSelect(id: FormSelectId): ComputedRef<{ id: FormSelectId }>
+  function useSelect<E extends Record<string, unknown>>(
+    id: FormSelectId,
+    metadata: () => E
+  ): ComputedRef<{ id: FormSelectId } & E>
+  function useSelect<E extends Record<string, unknown> = Record<string, unknown>>(
+    id: FormSelectId,
+    metadata?: () => E
+  ) {
+    return computed(() => ({
+      id,
+      ...metadata?.(),
+    }))
+  }
+
+  return {
+    useField,
+    useSelect,
+  }
+}

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

@@ -7,8 +7,8 @@ import {
 import type { ResourceContext, UseRemoteResource } from '@core/packages/remote-resource/types.ts'
 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 { debounce, merge, remove } from 'lodash-es'
+import { type MaybeRef, noop, useDebounceFn, useTimeoutPoll } from '@vueuse/core'
+import { merge, remove } from 'lodash-es'
 import readNDJSONStream from 'ndjson-readablestream'
 import {
   computed,
@@ -25,6 +25,7 @@ import {
   toRef,
   toValue,
   watch,
+  effectScope,
 } from 'vue'
 
 const DEFAULT_CACHE_EXPIRATION_MS = 10_000
@@ -106,6 +107,7 @@ export function defineRemoteResource<
       pause: VoidFunction
       resume: VoidFunction
       state: object
+      stateScope: EffectScope
       isReady: Ref<boolean>
       isFetching: Ref<boolean>
       lastError: Ref<Error | undefined>
@@ -239,6 +241,7 @@ export function defineRemoteResource<
 
     if (cacheExpiration !== false) {
       setTimeout(() => {
+        cache.get(url)?.stateScope.stop()
         cache.delete(url)
       }, cacheExpiration)
     }
@@ -259,7 +262,18 @@ export function defineRemoteResource<
 
     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 })
+    const flushData = useDebounceFn(
+      () => {
+        if (Array.isArray(data.value)) {
+          triggerRef(data)
+        } else if (data.value != null) {
+          // create a new JS reference to ensure vueJS detect the change
+          data.value = { ...data.value }
+        }
+      },
+      100,
+      { maxWait: 500 }
+    )
 
     async function execute() {
       try {
@@ -329,13 +343,15 @@ export function defineRemoteResource<
       resume = timeoutPoll.resume
     }
 
-    const state = buildState(data, context)
+    const stateScope = effectScope(true)
+    const state = stateScope.run(() => buildState(data, context))!
 
     cache.set(url, {
       count: 0,
       pause,
       resume,
       state,
+      stateScope,
       isReady,
       isFetching,
       lastError,

package/lib/packages/remote-resource/sse.store.ts

@@ -49,7 +49,7 @@ export const useSseStore = defineStore('sse', () => {
       return false
     }
 
-    return now.value.getTime() - sse.value.lastPing > 32_000
+    return now.value.getTime() - sse.value.lastPing > 40_000
   })
 
   const hasErrorSse = computed(() => isError.value || sse.value.errorSse !== null)

package/package.json

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