@platforma-sdk/ui-vue 1.3.18 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.3.18",
+  "version": "1.4.0",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "vue": "^3.5.9",
-    "@milaboratories/uikit": "^1.2.12",
-    "@platforma-sdk/model": "^1.2.29"
+    "@platforma-sdk/model": "^1.2.29",
+    "@milaboratories/uikit": "^1.2.13"
   },
   "devDependencies": {
     "@ag-grid-community/client-side-row-model": "^32.2.1",

package/src/createModel.ts

@@ -2,6 +2,7 @@ import { reactive, computed, ref, watch, unref } from 'vue';
 import type { ZodError } from 'zod';
 import type { ModelOptions, Model } from './types';
 import { deepEqual, deepClone } from '@milaboratories/helpers';
+import { isJsonEqual } from './utils';
 
 const identity = <T, V = T>(v: T): V => v as unknown as V;
 
@@ -51,6 +52,15 @@ export function createModel<M, V = unknown>(options: ModelOptions<M, V>): Model<
     error.value = undefined;
   };
 
+  const setError = (cause: unknown) => {
+    const err = ensureError(cause);
+    if (isZodError(err)) {
+      error.value = Error(formatZodError(err)); // @todo temp
+    } else {
+      error.value = err;
+    }
+  };
+
   const setValue = (v: M) => {
     error.value = undefined;
     try {
@@ -59,12 +69,7 @@ export function createModel<M, V = unknown>(options: ModelOptions<M, V>): Model<
         save();
       }
     } catch (cause: unknown) {
-      const err = ensureError(cause);
-      if (isZodError(err)) {
-        error.value = Error(formatZodError(err)); // @todo temp
-      } else {
-        error.value = err as Error; // @todo ensureError
-      }
+      setError(cause);
     }
   };
 
@@ -81,7 +86,7 @@ export function createModel<M, V = unknown>(options: ModelOptions<M, V>): Model<
   watch(
     local,
     (v) => {
-      if (!deepEqual(options.get(), v)) {
+      if (!isJsonEqual(options.get(), v)) {
         setValue(v as M);
       }
     },
@@ -104,5 +109,6 @@ export function createModel<M, V = unknown>(options: ModelOptions<M, V>): Model<
     errorString,
     save,
     revert,
+    setError,
   });
 }

package/src/defineApp.ts

@@ -2,7 +2,7 @@ import { notEmpty } from '@milaboratories/helpers';
 import { type BlockOutputsBase, type Platforma } from '@platforma-sdk/model';
 import type { Component, Reactive } from 'vue';
 import { inject, markRaw, reactive } from 'vue';
-import { createApp, type BaseApp } from './createApp';
+import { createApp, type BaseApp } from './internal/createApp';
 import type { LocalState, Routes } from './types';
 
 const pluginKey = Symbol('sdk-vue');
@@ -40,6 +40,7 @@ export function defineApp<
         } as unknown as App<Args, Outputs, UiState, Href, Local>);
       })
       .catch((err) => {
+        console.error('load initial state error', err);
         plugin.error = err;
       });
   };

package/src/{createApp.ts → internal/createApp.ts}

@@ -1,11 +1,12 @@
-import { deepClone } from '@milaboratories/helpers';
+import { deepClone, throttle } from '@milaboratories/helpers';
 import type { Mutable } from '@milaboratories/helpers';
 import type { NavigationState, BlockOutputsBase, BlockState, Platforma } from '@platforma-sdk/model';
 import { reactive, nextTick, computed, watch } from 'vue';
-import type { UnwrapValueOrErrors, StateModelOptions, UnwrapOutputs, OptionalResult, OutputValues, OutputErrors } from './types';
-import { createModel } from './createModel';
-import { parseQuery } from './urls';
-import { MultiError, unwrapValueOrErrors } from './utils';
+import type { UnwrapValueOrErrors, StateModelOptions, UnwrapOutputs, OptionalResult, OutputValues, OutputErrors } from '../types';
+import { createModel } from '../createModel';
+import { parseQuery } from '../urls';
+import { MultiError, unwrapValueOrErrors } from '../utils';
+import { pick } from 'lodash';
 
 export function createApp<
   Args = unknown,
@@ -13,7 +14,20 @@ export function createApp<
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
 >(state: BlockState<Args, Outputs, UiState, Href>, platforma: Platforma<Args, Outputs, UiState, Href>) {
-  const innerState = reactive({
+  type AppModel = {
+    args: Args;
+    ui: UiState;
+  };
+
+  const throttleSpan = 100; // @todo settings and more flexible
+
+  const setBlockArgs = throttle(platforma.setBlockArgs, throttleSpan);
+
+  const setBlockUiState = throttle(platforma.setBlockUiState, throttleSpan);
+
+  const setBlockArgsAndUiState = throttle(platforma.setBlockArgsAndUiState, throttleSpan);
+
+  const snapshot = reactive({
     args: Object.freeze(state.args),
     outputs: Object.freeze(state.outputs),
     ui: Object.freeze(state.ui),
@@ -28,43 +42,43 @@ export function createApp<
   platforma.onStateUpdates(async (updates) => {
     updates.forEach((patch) => {
       if (patch.key === 'args') {
-        innerState.args = Object.freeze(patch.value);
+        snapshot.args = Object.freeze(patch.value);
       }
 
       if (patch.key === 'ui') {
-        innerState.ui = Object.freeze(patch.value);
+        snapshot.ui = Object.freeze(patch.value);
       }
 
       if (patch.key === 'outputs') {
-        innerState.outputs = Object.freeze(patch.value);
+        snapshot.outputs = Object.freeze(patch.value);
       }
 
       if (patch.key === 'navigationState') {
-        innerState.navigationState = Object.freeze(patch.value);
+        snapshot.navigationState = Object.freeze(patch.value);
       }
     });
 
     await nextTick(); // @todo remove
   });
 
-  const cloneArgs = () => deepClone(innerState.args) as Args;
-  const cloneUiState = () => deepClone(innerState.ui) as UiState;
-  const cloneNavigationState = () => deepClone(innerState.navigationState) as Mutable<NavigationState<Href>>;
+  const cloneArgs = () => deepClone(snapshot.args) as Args;
+  const cloneUiState = () => deepClone(snapshot.ui) as UiState;
+  const cloneNavigationState = () => deepClone(snapshot.navigationState) as Mutable<NavigationState<Href>>;
 
   const methods = {
     createArgsModel<T = Args>(options: StateModelOptions<Args, T> = {}) {
       return createModel<T, Args>({
         get() {
           if (options.transform) {
-            return options.transform(innerState.args);
+            return options.transform(snapshot.args);
           }
 
-          return innerState.args as T;
+          return snapshot.args as T;
         },
         validate: options.validate,
         autoSave: true,
         onSave(newArgs) {
-          platforma.setBlockArgs(newArgs);
+          setBlockArgs(newArgs);
         },
       });
     },
@@ -75,15 +89,31 @@ export function createApp<
       return createModel<T, UiState>({
         get() {
           if (options.transform) {
-            return options.transform(innerState.ui);
+            return options.transform(snapshot.ui);
+          }
+
+          return (snapshot.ui ?? defaultUiState()) as T;
+        },
+        validate: options.validate,
+        autoSave: true,
+        onSave(newData) {
+          setBlockUiState(newData);
+        },
+      });
+    },
+    createAppModel<T = AppModel>(options: StateModelOptions<AppModel, T> = {}) {
+      return createModel<T, AppModel>({
+        get() {
+          if (options.transform) {
+            return options.transform(snapshot);
           }
 
-          return (innerState.ui ?? defaultUiState()) as T;
+          return { args: snapshot.args, ui: snapshot.ui } as T;
         },
         validate: options.validate,
         autoSave: true,
         onSave(newData) {
-          platforma.setBlockUiState(newData);
+          setBlockArgsAndUiState(newData.args, newData.ui);
         },
       });
     },
@@ -99,7 +129,7 @@ export function createApp<
       });
 
       watch(
-        () => innerState.outputs,
+        () => snapshot.outputs,
         () => {
           try {
             Object.assign(data, {
@@ -124,7 +154,7 @@ export function createApp<
      * @returns
      */
     unwrapOutputs<K extends keyof Outputs>(...keys: K[]): UnwrapOutputs<Outputs, K> {
-      const outputs = innerState.outputs;
+      const outputs = snapshot.outputs;
       const entries = keys.map((key) => [key, unwrapValueOrErrors(outputs[key])]);
       return Object.fromEntries(entries);
     },
@@ -133,13 +163,15 @@ export function createApp<
      * @see outputs
      */
     getOutputField(key: keyof Outputs) {
-      return innerState.outputs[key];
+      return snapshot.outputs[key];
     },
     /**
      * @deprecated use outputValues instead
      * @see outputValues
      */
     getOutputFieldOkOptional<K extends keyof Outputs>(key: K): UnwrapValueOrErrors<Outputs[K]> | undefined {
+      console.warn('use reactive app.outputValues.fieldName instead instead of getOutputFieldOkOptional(fieldName)');
+
       const result = this.getOutputField(key);
 
       if (result && result.ok) {
@@ -149,6 +181,8 @@ export function createApp<
       return undefined;
     },
     getOutputFieldErrorsOptional<K extends keyof Outputs>(key: K): string[] | undefined {
+      console.warn('use reactive app.outputErrors.fieldName instead instead of getOutputFieldErrorsOptional(fieldName)');
+
       const result = this.getOutputField(key);
 
       if (result && !result.ok) {
@@ -179,30 +213,29 @@ export function createApp<
   };
 
   const getters = {
-    args: computed(() => innerState.args),
-    outputs: computed(() => innerState.outputs),
-    ui: computed(() => innerState.ui),
-    navigationState: computed(() => innerState.navigationState),
-    href: computed(() => innerState.navigationState.href),
+    args: computed(() => snapshot.args),
+    outputs: computed(() => snapshot.outputs),
+    ui: computed(() => snapshot.ui),
+    navigationState: computed(() => snapshot.navigationState),
+    href: computed(() => snapshot.navigationState.href),
 
     outputValues: computed<OutputValues<Outputs>>(() => {
-      const entries = Object.entries(innerState.outputs).map(([k, vOrErr]) => [
-        k,
-        vOrErr.ok && vOrErr.value !== undefined ? vOrErr.value : undefined,
-      ]);
+      const entries = Object.entries(snapshot.outputs).map(([k, vOrErr]) => [k, vOrErr.ok && vOrErr.value !== undefined ? vOrErr.value : undefined]);
       return Object.fromEntries(entries);
     }),
 
     outputErrors: computed<OutputErrors<Outputs>>(() => {
-      const entries = Object.entries(innerState.outputs).map(([k, vOrErr]) => [k, vOrErr && !vOrErr.ok ? new MultiError(vOrErr.errors) : undefined]);
+      const entries = Object.entries(snapshot.outputs).map(([k, vOrErr]) => [k, vOrErr && !vOrErr.ok ? new MultiError(vOrErr.errors) : undefined]);
       return Object.fromEntries(entries);
     }),
 
-    queryParams: computed(() => parseQuery<Href>(innerState.navigationState.href)),
-    hasErrors: computed(() => Object.values(innerState.outputs).some((v) => !v?.ok)), // @TODO: there is middle-layer error, v sometimes is undefined
+    queryParams: computed(() => parseQuery<Href>(snapshot.navigationState.href)),
+    hasErrors: computed(() => Object.values(snapshot.outputs).some((v) => !v?.ok)), // @TODO: there is middle-layer error, v sometimes is undefined
   };
 
-  return reactive(Object.assign(methods, getters));
+  const appModel = methods.createAppModel();
+
+  return reactive(Object.assign(appModel, methods, getters));
 }
 
 export type BaseApp<

package/src/types.static-test.ts

@@ -2,7 +2,7 @@ import type { Expect, Equal } from '@milaboratories/helpers';
 import { z } from 'zod';
 import type { ModelOptions, Model } from './types';
 import type { BlockOutputsBase, InferHrefType, InferOutputsType, Platforma } from '@platforma-sdk/model';
-import type { BaseApp, createApp } from './createApp';
+import type { BaseApp, createApp } from './internal/createApp';
 import type { App } from './defineApp';
 import { computed, type Component } from 'vue';
 
@@ -22,8 +22,8 @@ const __model1 = __createModel({
   },
   validate,
   autoSave: true,
-  onSave(seed) {
-    console.log('save', seed);
+  onSave(_seed) {
+    //
   },
 });
 
@@ -33,8 +33,8 @@ const __model2 = __createModel({
   },
   validate,
   autoSave: true,
-  onSave(seed) {
-    console.log('save', seed);
+  onSave(_seed) {
+    //
   },
 });
 

package/src/types.ts

@@ -18,12 +18,13 @@ export interface ModelOptions<M, V = M> extends ReadableComputed<M> {
 
 export type Model<T> = {
   model: T;
-  valid: boolean;
-  isChanged: boolean;
-  error: Error | undefined;
-  errorString: string | undefined;
-  save: () => void;
-  revert: () => void;
+  readonly valid: boolean;
+  readonly isChanged: boolean;
+  readonly error: Error | undefined;
+  readonly errorString: string | undefined;
+  readonly save: () => void;
+  readonly revert: () => void;
+  readonly setError: (cause: unknown) => void;
 };
 
 interface ReadableComputed<T> {

package/src/utils.ts

@@ -1,5 +1,6 @@
 import type { ValueOrErrors } from '@platforma-sdk/model';
 import type { OptionalResult } from './types';
+import canonicalize from 'canonicalize';
 
 export class UnresolvedError extends Error {}
 
@@ -58,18 +59,6 @@ export function isDefined<T>(v: T | undefined): v is T {
   return v !== undefined;
 }
 
-export function getFilePathBreadcrumbs(filePath: string) {
-  const chunks = filePath.split('/');
-
-  const stack: { index: number; path: string; name: string }[] = [];
-
-  for (let i = 0; i < chunks.length; i++) {
-    stack.push({
-      index: i,
-      name: i === 0 ? 'Root' : chunks[i],
-      path: chunks.slice(0, i + 1).join('/'),
-    });
-  }
-
-  return stack;
+export function isJsonEqual(a: unknown, b: unknown) {
+  return canonicalize(a) === canonicalize(b);
 }

package/dist/src/createApp.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createApp.d.ts","sourceRoot":"","sources":["../../src/createApp.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAErG,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAKjI,wBAAgB,SAAS,CACvB,IAAI,GAAG,OAAO,EACd,OAAO,SAAS,gBAAgB,GAAG,gBAAgB,EACnD,OAAO,GAAG,OAAO,EACjB,IAAI,SAAS,IAAI,MAAM,EAAE,GAAG,IAAI,MAAM,EAAE,EACxC,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC;sBAwCjF,CAAC,mBAAkB,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC;oBAmB/C,CAAC,qBAAqB,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC,8BAAuB,MAAM,OAAO;iBAqB1F,CAAC,SAAS,MAAM,OAAO,WAAW,CAAC,EAAE,KAAG,cAAc,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;oBA+B9E,CAAC,SAAS,MAAM,OAAO,WAAW,CAAC,EAAE,KAAG,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;0BAS3D,MAAM,OAAO;+BAOR,CAAC,SAAS,MAAM,OAAO,OAAO,CAAC,KAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS;mCASzE,CAAC,SAAS,MAAM,OAAO,OAAO,CAAC,KAAG,MAAM,EAAE,GAAG,SAAS;qBASpE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;wBAKjB,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO;gCAIlB,CAAC,IAAI,EAAE,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;uBAKvD,IAAI;;;;;;;;;;EAgCxB;AAED,MAAM,MAAM,OAAO,CACjB,IAAI,GAAG,OAAO,EACd,OAAO,SAAS,gBAAgB,GAAG,gBAAgB,EACnD,OAAO,GAAG,OAAO,EACjB,IAAI,SAAS,IAAI,MAAM,EAAE,GAAG,IAAI,MAAM,EAAE,IACtC,UAAU,CAAC,OAAO,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC"}