@platforma-sdk/ui-vue 1.40.6 → 1.41.0

package/dist/types.d.ts

@@ -42,9 +42,9 @@ export type RouteParams<Href extends `/${string}` = `/${string}`> = {
 };
 export type AppSettings = {
     /**
-     * Deep patch `model.` This parameter affects how you listen to model changes; a deep watcher is required if you use the `source` function.
+     * App ID (just for debugging)
      */
-    deepPatchModel?: boolean;
+    appId?: string;
     /**
      * Enables some debug logs
      */

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.40.6",
+  "version": "1.41.0",
   "type": "module",
   "main": "dist/lib.js",
   "styles": "dist/lib.js",
@@ -26,8 +26,8 @@
     "d3-format": "^3.1.0",
     "zod": "~3.23.8",
     "@milaboratories/biowasm-tools": "^1.1.0",
-    "@milaboratories/uikit": "2.3.15",
-    "@platforma-sdk/model": "~1.40.6"
+    "@platforma-sdk/model": "~1.41.0",
+    "@milaboratories/uikit": "2.3.16"
   },
   "devDependencies": {
     "happy-dom": "^15.11.7",
@@ -38,12 +38,15 @@
     "typescript": "~5.6.3",
     "vite": "^6.3.5",
     "vitest": "^2.1.9",
+    "@vue/test-utils": "^2.4.6",
     "vue-tsc": "^2.2.10",
     "yarpm": "^1.2.0",
+    "fast-json-patch": "^3.1.1",
+    "@faker-js/faker": "^9.2.0",
+    "@milaboratories/ts-configs": "1.0.4",
     "@milaboratories/build-configs": "1.0.4",
     "@milaboratories/eslint-config": "^1.0.4",
-    "@milaboratories/helpers": "^1.6.18",
-    "@milaboratories/ts-configs": "1.0.4"
+    "@milaboratories/helpers": "^1.6.18"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

package/src/components/BlockLayout.vue

@@ -43,7 +43,7 @@ const progress = computed(() => app.value?.progress?.());
 <template>
   <div class="block block__layout">
     <BlockLoader :value="progress" />
-    <div v-if="sdk.error">{{ sdk.error }}</div>
+    <div v-if="sdk.error" :class="$style.error">{{ sdk.error }}</div>
     <LoaderPage v-else-if="!sdk.loaded">Loading...</LoaderPage>
     <component :is="CurrentView" v-else-if="CurrentView" :key="href" />
     <NotFound v-else />
@@ -52,3 +52,11 @@ const progress = computed(() => app.value?.progress?.());
   <!-- Plugins -->
   <MonetizationSidebar v-if="CurrentView" />
 </template>
+
+<style module>
+.error {
+  color: red;
+  font-weight: bold;
+  padding: 24px;
+}
+</style>

package/src/components/NotFound.vue

@@ -7,9 +7,7 @@ const sdk = useSdkPlugin();
 const app = sdk.useApp();
 
 const goToMain = () => {
-  app.updateNavigationState((state) => {
-    state.href = '/';
-  });
+  app.navigateTo('/');
 };
 </script>
 

package/src/defineApp.ts

@@ -1,8 +1,10 @@
 import { notEmpty } from '@milaboratories/helpers';
-import { getPlatformaOrDefault, type BlockOutputsBase, type Platforma } from '@platforma-sdk/model';
+import type { PlatformaV1, PlatformaV2 } from '@platforma-sdk/model';
+import { getPlatformaApiVersion, unwrapResult, 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 './internal/createApp';
+import { createAppV1, type BaseAppV1 } from './internal/createAppV1';
+import { createAppV2, type BaseAppV2 } from './internal/createAppV2';
 import type { AppSettings, ExtendSettings, Routes } from './types';
 import { activateAgGrid } from './aggrid';
 
@@ -12,6 +14,30 @@ export function useSdkPlugin(): SdkPlugin {
   return inject(pluginKey)!;
 }
 
+export function defineApp<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+  Extend extends ExtendSettings<Href> = ExtendSettings<Href>,
+>(
+  platforma: PlatformaV1<Args, Outputs, UiState, Href>,
+  extendApp: (app: BaseAppV1<Args, Outputs, UiState, Href>) => Extend,
+  settings?: AppSettings,
+): SdkPluginV1<Args, Outputs, UiState, Href, Extend>;
+
+export function defineApp<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+  Extend extends ExtendSettings<Href> = ExtendSettings<Href>,
+>(
+  platforma: PlatformaV2<Args, Outputs, UiState, Href>,
+  extendApp: (app: BaseAppV2<Args, Outputs, UiState, Href>) => Extend,
+  settings?: AppSettings,
+): SdkPluginV2<Args, Outputs, UiState, Href, Extend>;
+
 export function defineApp<
   Args = unknown,
   Outputs extends BlockOutputsBase = BlockOutputsBase,
@@ -20,40 +46,72 @@ export function defineApp<
   Extend extends ExtendSettings<Href> = ExtendSettings<Href>,
 >(
   platforma: Platforma<Args, Outputs, UiState, Href>,
-  extendApp: (app: BaseApp<Args, Outputs, UiState, Href>) => Extend,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extendApp: (app: any) => Extend,
   settings: AppSettings = {},
 ): SdkPlugin<Args, Outputs, UiState, Href, Extend> {
-  let app: undefined | App<Args, Outputs, UiState, Href, Extend> = undefined;
+  let app: undefined | AppV1<Args, Outputs, UiState, Href, Extend> | AppV2<Args, Outputs, UiState, Href, Extend> = undefined;
 
   activateAgGrid();
 
-  const loadApp = () => {
-    getPlatformaOrDefault<Args, Outputs, UiState, Href>(platforma)
-      .loadBlockState()
-      .then((state) => {
-        plugin.loaded = true;
-        const baseApp = createApp<Args, Outputs, UiState, Href>(state, platforma, settings);
-
-        const localState = extendApp(baseApp);
-
-        const routes = Object.fromEntries(
-          Object.entries(localState.routes as Routes<Href>).map(([href, component]) => {
-            const c = typeof component === 'function' ? component() : component;
-            return [href, markRaw(c as Component)];
-          }),
-        );
-
-        app = Object.assign(baseApp, {
-          ...localState,
-          getRoute(href: Href): Component | undefined {
-            return routes[href];
-          },
-        } as unknown as App<Args, Outputs, UiState, Href, Extend>);
-      })
-      .catch((err) => {
-        console.error('load initial state error', err);
-        plugin.error = err;
-      });
+  const runtimeApiVersion = platforma.apiVersion ?? 1; // undefined means 1 (backward compatibility)
+
+  const blockRequestedApiVersion = getPlatformaApiVersion();
+
+  const loadApp = async () => {
+    if (blockRequestedApiVersion !== runtimeApiVersion) {
+      throw new Error(`Block requested API version ${blockRequestedApiVersion} but runtime API version is ${runtimeApiVersion}.
+      Please update the desktop app to use the latest API version.`);
+    }
+
+    if (platforma.apiVersion === undefined || platforma.apiVersion === 1) {
+      await platforma
+        .loadBlockState()
+        .then((state) => {
+          plugin.loaded = true;
+          const baseApp = createAppV1<Args, Outputs, UiState, Href>(state, platforma, settings);
+
+          const localState = extendApp(baseApp);
+
+          const routes = Object.fromEntries(
+            Object.entries(localState.routes as Routes<Href>).map(([href, component]) => {
+              const c = typeof component === 'function' ? component() : component;
+              return [href, markRaw(c as Component)];
+            }),
+          );
+
+          app = Object.assign(baseApp, {
+            ...localState,
+            getRoute(href: Href): Component | undefined {
+              return routes[href];
+            },
+          } as unknown as AppV1<Args, Outputs, UiState, Href, Extend>);
+        });
+    } else if (platforma.apiVersion === 2) {
+      await platforma
+        .loadBlockState()
+        .then((stateOrError) => {
+          const state = unwrapResult(stateOrError);
+          plugin.loaded = true;
+          const baseApp = createAppV2<Args, Outputs, UiState, Href>(state, platforma, settings);
+
+          const localState = extendApp(baseApp);
+
+          const routes = Object.fromEntries(
+            Object.entries(localState.routes as Routes<Href>).map(([href, component]) => {
+              const c = typeof component === 'function' ? component() : component;
+              return [href, markRaw(c as Component)];
+            }),
+          );
+
+          app = Object.assign(baseApp, {
+            ...localState,
+            getRoute(href: Href): Component | undefined {
+              return routes[href];
+            },
+          } as unknown as AppV2<Args, Outputs, UiState, Href, Extend>);
+        });
+    }
   };
 
   const plugin = reactive({
@@ -67,22 +125,41 @@ export function defineApp<
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     install(app: any) {
       app.provide(pluginKey, this);
-      loadApp();
+      loadApp().catch((err) => {
+        console.error('load initial state error', err);
+        plugin.error = err;
+      });
     },
   });
 
-  return plugin;
+  return plugin as SdkPlugin<Args, Outputs, UiState, Href, Extend>;
 }
 
+export type AppV1<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+  Local extends ExtendSettings<Href> = ExtendSettings<Href>,
+> = (BaseAppV1<Args, Outputs, UiState, Href>) & Reactive<Omit<Local, 'routes'>> & { getRoute(href: Href): Component | undefined };
+
+export type AppV2<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+  Local extends ExtendSettings<Href> = ExtendSettings<Href>,
+> = (BaseAppV2<Args, Outputs, UiState, Href>) & Reactive<Omit<Local, 'routes'>> & { getRoute(href: Href): Component | undefined };
+
 export type App<
   Args = unknown,
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
   Local extends ExtendSettings<Href> = ExtendSettings<Href>,
-> = BaseApp<Args, Outputs, UiState, Href> & Reactive<Omit<Local, 'routes'>> & { getRoute(href: Href): Component | undefined };
+> = AppV1<Args, Outputs, UiState, Href, Local> | AppV2<Args, Outputs, UiState, Href, Local>;
 
-export type SdkPlugin<
+export type SdkPluginV1<
   Args = unknown,
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
@@ -91,6 +168,27 @@ export type SdkPlugin<
 > = {
   loaded: boolean;
   error: unknown;
-  useApp<PageHref extends Href = Href>(): App<Args, Outputs, UiState, PageHref, Local>;
+  useApp<PageHref extends Href = Href>(): AppV1<Args, Outputs, UiState, PageHref, Local>;
   install(app: unknown): void;
 };
+
+export type SdkPluginV2<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+  Local extends ExtendSettings<Href> = ExtendSettings<Href>,
+> = {
+  loaded: boolean;
+  error: unknown;
+  useApp<PageHref extends Href = Href>(): AppV2<Args, Outputs, UiState, PageHref, Local>;
+  install(app: unknown): void;
+};
+
+export type SdkPlugin<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+  Local extends ExtendSettings<Href> = ExtendSettings<Href>,
+> = SdkPluginV1<Args, Outputs, UiState, Href, Local> | SdkPluginV2<Args, Outputs, UiState, Href, Local>;

package/src/internal/UpdateSerializer.ts

@@ -0,0 +1,112 @@
+import { delay } from '@milaboratories/helpers';
+import { hasAbortError } from '@platforma-sdk/model';
+
+export type RetryState = {
+  i: number;
+};
+
+export type OnNext = (e: unknown, state: RetryState) => { delayMs: number };
+
+export class UpdateSerializer {
+  private ongoingRun: Promise<boolean> = Promise.resolve(true);
+  private ongoingOperation: Promise<void> = Promise.resolve();
+  private counter = 0;
+
+  constructor(private readonly options: {
+    debounceSpan?: number;
+  } = {}) {}
+
+  async allSettled(): Promise<void> {
+    await delay(this.options.debounceSpan ?? 0);
+    let completed = false;
+    do {
+      await delay(0);
+      completed = await this.ongoingRun.then(() => {
+        return true;
+      }).catch((e) => {
+        console.log('ongoingRun error', e);
+        return false;
+      });
+    } while (!completed);
+  }
+
+  async retry<T>(
+    op: () => Promise<T>,
+    onNext: OnNext,
+  ): Promise<T> {
+    const state: RetryState = {
+      i: 0,
+    };
+
+    while (true) {
+      try {
+        state.i++;
+        return await op();
+      } catch (e: unknown) {
+        const { delayMs } = onNext(e, state);
+
+        if (hasAbortError(e)) {
+          throw e;
+        }
+
+        await delay(delayMs);
+      }
+    }
+  }
+
+  /**
+   * @returns true if operation succeeded, or false if operation was evicted by a more recent call
+   */
+  public async run(op: () => Promise<void>): Promise<boolean> {
+    return this.ongoingRun = this._run(op);
+  }
+
+  /**
+   * @returns true if operation succeeded, or false if operation was evicted by a more recent call
+   */
+  private async _run(op: () => Promise<void>): Promise<boolean> {
+    // assigning a sequential update id to the call
+    this.counter++;
+    const myId = this.counter;
+
+    if (this.options.debounceSpan) {
+      await delay(this.options.debounceSpan);
+    }
+
+    // checking that this update is still the most recent
+    if (this.counter !== myId) {
+      // operation was canceled, because another operation was queued
+      // after we started waiting for previous operation to finish
+      return false;
+    }
+
+    // awaiting previous operation to finish
+    try {
+      await this.ongoingOperation;
+    } catch (_err: unknown) {
+      // ignoring the error here, original caller will receive any rejections
+    }
+
+    // checking that this update is still the most recent
+    if (this.counter !== myId) {
+      // operation was canceled, because another operation was queued
+      // after we started waiting for previous operation to finish
+      return false;
+    }
+
+    // asynchronously starting the operation
+    const opPromise = this.retry(() => op(), (e) => {
+      console.warn('UpdateSerializer.run error, retrying...', e);
+      return {
+        delayMs: 100, // TODO: flexible delay
+      };
+    });
+    // publishing the promise for the next operation to await
+    this.ongoingOperation = opPromise;
+    // actually awaiting for the operation result, any rejections will be thrown here
+    await opPromise;
+
+    // operation was successfully called
+    return true;
+  }
+}

package/src/internal/createAppModel.ts

@@ -1,13 +1,13 @@
 import { reactive, computed, ref, watch, unref, type ComputedRef, type UnwrapNestedRefs } from 'vue';
 import type { ModelOptions, Model, AppSettings } from '../types';
-import { deepClone, deepPatch, isJsonEqual } from '@milaboratories/helpers';
+import { deepClone, isJsonEqual } from '@milaboratories/helpers';
 import { identity, ensureError, isZodError, formatZodError } from '../utils';
 
 export function createAppModel<
   M extends { args: unknown; ui: unknown },
   V = unknown,
   E extends Record<string, ComputedRef<unknown>> = Record<string, ComputedRef<unknown>>,
->(options: ModelOptions<M, V>, extended: E, settings: AppSettings): Model<M & UnwrapNestedRefs<E>> {
+>(options: ModelOptions<M, V>, extended: E, _settings: AppSettings): Model<M & UnwrapNestedRefs<E>> {
   type R = M & UnwrapNestedRefs<E>;
 
   const validate = options.validate ?? identity;
@@ -19,21 +19,10 @@ export function createAppModel<
   const local = ref<{ model: R; readonly stage: symbol }>();
 
   const setSource = (v: M) => {
-    if (settings.deepPatchModel) {
-      // deep patch
-      const model = local.value?.model;
-      const updated = Object.assign(deepClone(v), extended ?? {}) as R;
-      local.value = {
-        model: model ? deepPatch(model, updated) : updated,
-        stage: Symbol(),
-      };
-    } else {
-      // shallow replace
-      local.value = {
-        model: Object.assign(deepClone(v), extended ?? {}) as R,
-        stage: Symbol(),
-      };
-    }
+    local.value = {
+      model: Object.assign(deepClone(v), extended ?? {}) as R,
+      stage: Symbol(),
+    };
   };
 
   watch(
@@ -42,9 +31,7 @@ export function createAppModel<
     { immediate: true },
   );
 
-  const save = () => {
-    options.onSave(validate(deepClone(local.value?.model)));
-  };
+  const save = () => options.onSave(validate(deepClone(local.value?.model)));
 
   const revert = () => {
     setSource(options.get());

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

@@ -1,6 +1,6 @@
 import { deepClone, isJsonEqual, tap } from '@milaboratories/helpers';
 import type { Mutable } from '@milaboratories/helpers';
-import type { NavigationState, BlockOutputsBase, BlockState, Platforma } from '@platforma-sdk/model';
+import type { NavigationState, BlockOutputsBase, BlockState, PlatformaV1 } from '@platforma-sdk/model';
 import { reactive, nextTick, computed, watch } from 'vue';
 import type { StateModelOptions, UnwrapOutputs, OptionalResult, OutputValues, OutputErrors, AppSettings } from '../types';
 import { createModel } from '../createModel';
@@ -22,12 +22,16 @@ import { useDebounceFn } from '@vueuse/core';
  *
  * @returns A reactive application object with methods, getters, and state.
  */
-export function createApp<
+export function createAppV1<
   Args = unknown,
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
->(state: BlockState<Args, Outputs, UiState, Href>, platforma: Platforma<Args, Outputs, UiState, Href>, settings: AppSettings) {
+>(
+  state: BlockState<Args, Outputs, UiState, Href>,
+  platforma: PlatformaV1<Args, Outputs, UiState, Href>,
+  settings: AppSettings,
+) {
   type AppModel = {
     args: Args;
     ui: UiState;
@@ -76,7 +80,7 @@ export function createApp<
     }
   }, debounceSpan, { maxWait });
 
-  platforma.onStateUpdates(async (updates) => {
+  (platforma as unknown as PlatformaV1<Args, Outputs, UiState, Href>).onStateUpdates(async (updates) => {
     updates.forEach((patch) => {
       if (patch.key === 'args' && !isJsonEqual(snapshot.args, patch.value)) {
         snapshot.args = Object.freeze(patch.value);
@@ -269,9 +273,9 @@ export function createApp<
   return reactive(Object.assign(model, methods, getters));
 }
 
-export type BaseApp<
+export type BaseAppV1<
   Args = unknown,
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
-> = ReturnType<typeof createApp<Args, Outputs, UiState, Href>>;
+> = ReturnType<typeof createAppV1<Args, Outputs, UiState, Href>>;