@platforma-sdk/ui-vue 1.4.4 → 1.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "vue": "^3.5.9",
-    "@milaboratories/uikit": "^1.2.15",
+    "@milaboratories/uikit": "^1.2.16",
     "@platforma-sdk/model": "^1.2.30"
   },
   "devDependencies": {
@@ -50,7 +50,7 @@
     "vue-tsc": "^2.1.6",
     "zod": "^3.23.8",
     "yarpm": "^1.2.0",
-    "@milaboratories/helpers": "^1.6.4"
+    "@milaboratories/helpers": "^1.6.5"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/composition/useWatchFetch.ts

@@ -0,0 +1,63 @@
+import type { WatchSource, WatchOptions } from 'vue';
+import { reactive, watch, ref, computed } from 'vue';
+import { exclusiveRequest } from '@milaboratories/helpers';
+import type { FetchResult } from '../types';
+
+// TODO Should we keep the old value while fetching the new value?
+
+/**
+ * Watch any reactive source and perform an asynchronous operation
+ *
+ * @example
+ * ```ts
+ * const v = useWatchFetch(
+ *   watchSource,
+ *   async (sourceValue) => {
+ *     return await fetchDataFromApi(sourceValue);
+ *   }
+ * );
+ *
+ * // Usage in a template
+ * <template>
+ *   <div v-if="v.loading">Loading...</div>
+ *   <div v-else-if="v.error">Error: {{ v.error.message }}</div>
+ *   <div v-else>Data: {{ v.value }}</div>
+ * </template>
+ * ```
+ */
+export function useWatchFetch<S, V>(watchSource: WatchSource<S>, doFetch: (s: S) => Promise<V>, watchOptions?: WatchOptions): FetchResult<V> {
+  const loadingRef = ref(0);
+
+  const data = reactive({
+    loading: computed(() => loadingRef.value > 0),
+    loadingRef,
+    value: undefined as V,
+    error: undefined,
+  }) as FetchResult<V>;
+
+  const exclusive = exclusiveRequest(doFetch);
+
+  watch(
+    watchSource,
+    async (s) => {
+      data.error = undefined;
+      loadingRef.value++;
+      exclusive(s)
+        .then((res) => {
+          if (res.ok) {
+            data.value = res.value;
+          }
+        })
+        .catch((err) => {
+          data.value = undefined;
+          data.error = err;
+        })
+        .finally(() => {
+          loadingRef.value--;
+        });
+    },
+    Object.assign({ immediate: true, deep: true }, watchOptions ?? {}),
+  );
+
+  return data;
+}

package/src/lib.ts

@@ -19,7 +19,7 @@ export * from './utils';
 
 export * from './computedResult';
 
-export * from './composition/useWatchResult';
+export * from './composition/useWatchFetch';
 
 export * from './composition/fileContent';
 

package/src/types.ts

@@ -55,6 +55,12 @@ export type LocalState<Href extends `/${string}` = `/${string}`> = {
   routes: Routes<Href>;
 };
 
+export type FetchResult<V, E = unknown> = {
+  loading: boolean;
+  value: V | undefined;
+  error: E;
+};
+
 // Results (ValueOrErrors)
 
 export type UnwrapValueOrError<W> = W extends {
@@ -79,6 +85,17 @@ export type ModelResult<T, E = unknown> =
       error: E;
     };
 
+export type OutputValues<Outputs extends BlockOutputsBase> = {
+  [P in keyof Outputs]?: UnwrapValueOrError<Outputs[P]>;
+};
+
+export type OutputErrors<Outputs extends BlockOutputsBase> = {
+  [P in keyof Outputs]?: Error;
+};
+
+/**
+ * @deprecated
+ */
 export type OptionalResult<T> =
   | {
       errors?: undefined;
@@ -89,19 +106,6 @@ export type OptionalResult<T> =
       errors: string[];
     };
 
-export type OutputValues<Outputs extends BlockOutputsBase> = {
-  [P in keyof Outputs]?: UnwrapValueOrError<Outputs[P]>;
-};
-
-export type OutputErrors<Outputs extends BlockOutputsBase> = {
-  [P in keyof Outputs]?: Error;
-};
-
-// declare global {
-//   const platforma: Platforma | undefined;
-//   interface Window {
-//     platforma: Platforma | undefined;
-//   }
-// }
+// Static tests
 
 type _cases = [Expect<Equal<number, UnwrapValueOrError<ValueOrErrors<number>>>>];

package/dist/src/composition/useWatchResult.d.ts

@@ -1,7 +0,0 @@
-import type { WatchSource } from 'vue';
-import type { OptionalResult } from '../types';
-/**
- * Use for synchronous/asynchronous converters (wip)
- */
-export declare function useWatchResult<S, V>(watchSource: WatchSource<S>, load: (s: S) => Promise<V> | V): OptionalResult<V>;
-//# sourceMappingURL=useWatchResult.d.ts.map

package/dist/src/composition/useWatchResult.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useWatchResult.d.ts","sourceRoot":"","sources":["../../../src/composition/useWatchResult.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAkCnH"}

package/src/composition/useWatchResult.ts

@@ -1,42 +0,0 @@
-import type { WatchSource } from 'vue';
-import { reactive, watch } from 'vue';
-import type { OptionalResult } from '../types';
-
-/**
- * Use for synchronous/asynchronous converters (wip)
- */
-export function useWatchResult<S, V>(watchSource: WatchSource<S>, load: (s: S) => Promise<V> | V): OptionalResult<V> {
-  const data = reactive({
-    value: undefined as unknown,
-    errors: undefined as unknown,
-  });
-
-  const state = {
-    version: 0,
-  };
-
-  const resolve = async (s: S, version: number) => {
-    const value = await load(s);
-    return { value, version };
-  };
-
-  watch(
-    watchSource,
-    async (s) => {
-      data.errors = undefined;
-      data.value = undefined;
-      try {
-        const { value, version } = await resolve(s, ++state.version);
-
-        if (version === state.version) {
-          data.value = value;
-        }
-      } catch (error) {
-        data.errors = [String(error)];
-      }
-    },
-    { immediate: true, deep: true },
-  );
-
-  return data as OptionalResult<V>;
-}