@milaboratories/uikit 2.3.7 → 2.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -24,7 +24,7 @@
     "d3": "^7.9.0",
     "resize-observer-polyfill": "^1.5.1",
     "@milaboratories/helpers": "^1.6.17",
-    "@platforma-sdk/model": "^1.39.8"
+    "@platforma-sdk/model": "^1.39.18"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",

package/src/composition/computedCached.ts

@@ -0,0 +1,58 @@
+import { isJsonEqual } from '@milaboratories/helpers';
+import {
+  computed,
+  ref,
+  watch,
+  type ComputedGetter,
+  type ComputedSetter,
+  type ComputedRef,
+  type WritableComputedRef,
+} from 'vue';
+
+export function computedCached<T>(options: {
+  get: ComputedGetter<T>;
+  set: ComputedSetter<T>;
+  deep?: boolean;
+}): WritableComputedRef<T>;
+export function computedCached<T>(options: {
+  get: ComputedGetter<T>;
+  deep?: boolean;
+}): ComputedRef<T>;
+export function computedCached<T>(getter: ComputedGetter<T>): ComputedRef<T>;
+export function computedCached<T>(options: ComputedGetter<T> | {
+  get: ComputedGetter<T>;
+  set?: ComputedSetter<T>;
+  deep?: boolean;
+}) {
+  if (typeof options === 'function') {
+    options = {
+      get: options,
+    };
+  }
+  const { get: getter, set: setter, deep } = options;
+
+  const cachedValue = ref<T>(getter());
+  watch(
+    getter,
+    (newValue) => {
+      if (!isJsonEqual(newValue, cachedValue.value)) {
+        cachedValue.value = newValue;
+      }
+    },
+    { deep },
+  );
+
+  if (setter) {
+    return computed({
+      get: () => cachedValue.value,
+      set: (newValue) => {
+        if (!isJsonEqual(newValue, cachedValue.value)) {
+          cachedValue.value = newValue;
+          setter(newValue);
+        }
+      },
+    });
+  } else {
+    return computed(() => cachedValue.value);
+  }
+}

package/src/composition/watchCached.ts

@@ -0,0 +1,45 @@
+import { isJsonEqual } from '@milaboratories/helpers';
+import {
+  ref,
+  watch,
+  type WatchCallback,
+  type WatchHandle,
+  type WatchSource,
+} from 'vue';
+
+type MaybeUndefined<T, I> = I extends true ? T | undefined : T;
+export interface WatchCachedOptions<Immediate = boolean> {
+  immediate?: Immediate;
+  deep?: boolean;
+  // when `once` is needed, caching is useless, use plain watch instead
+}
+export function watchCached<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, MaybeUndefined<T, Immediate>>,
+  options?: WatchCachedOptions<Immediate>,
+): WatchHandle {
+  const cachedValue = ref<T>();
+  const handle = watch(
+    source,
+    (newValue) => {
+      if (!isJsonEqual(newValue, cachedValue.value)) {
+        cachedValue.value = newValue;
+      }
+    },
+    {
+      deep: options?.deep,
+      immediate: true, // always initialize cachedValue
+    },
+  );
+  watch<T, Immediate>(
+    () => cachedValue.value as T, // `as T` is safe as we always initialize cachedValue
+    cb, // separate watch so that `onWatcherCleanup` would only be triggerred here
+    {
+      // standard vue `WatchOptions` conform to `WatchCachedOptions` interface,
+      // so construct new options to remove unsupported entries
+      deep: options?.deep,
+      immediate: options?.immediate,
+    },
+  );
+  return handle; // stopping first handle would effectively stop the second one
+}

package/src/index.ts

@@ -110,6 +110,8 @@ export { useQuery } from './composition/useQuery.ts';
 export { useDraggable } from './composition/useDraggable';
 export { useComponentProp } from './composition/useComponentProp';
 export * from './composition/useWatchFetch';
+export * from './composition/watchCached';
+export * from './composition/computedCached';
 
 /**
  * Utils/Partials