@platforma-sdk/ui-vue 1.82.1 → 1.83.0

package/src/internal/createAppV1.ts

@@ -1,324 +0,0 @@
-import { deepClone, isJsonEqual, tap } from "@milaboratories/helpers";
-import type { Mutable } from "@milaboratories/helpers";
-import type {
-  NavigationState,
-  BlockOutputsBase,
-  BlockState,
-  PlatformaV1,
-  PlatformaExtended,
-} 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";
-import { createAppModel } from "./createAppModel";
-import { parseQuery } from "../urls";
-import { ensureOutputHasStableFlag, MultiError, unwrapOutput } from "../utils";
-import { useDebounceFn } from "@vueuse/core";
-/**
- * Creates an application instance with reactive state management, outputs, and methods for state updates and navigation.
- *
- * @template Args - The type of arguments used in the application.
- * @template Outputs - The type of block outputs extending `BlockOutputsBase`.
- * @template UiState - The type of the UI state.
- * @template Href - The type of navigation href, defaulting to a string starting with `/`.
- *
- * @param state - Initial state of the application, including args, outputs, UI state, and navigation state.
- * @param platforma - A platform interface for interacting with block states.
- * @param settings - Application settings, such as debug flags.
- *
- * @returns A reactive application object with methods, getters, and state.
- */
-export function createAppV1<
-  Args = unknown,
-  Outputs extends BlockOutputsBase = BlockOutputsBase,
-  UiState = unknown,
-  Href extends `/${string}` = `/${string}`,
->(
-  state: BlockState<Args, Outputs, UiState, Href>,
-  platforma: PlatformaExtended<PlatformaV1<Args, Outputs, UiState, Href>>,
-  settings: AppSettings,
-) {
-  type AppModel = {
-    args: Args;
-    ui: UiState;
-  };
-
-  const log = (msg: string, ...rest: unknown[]) => {
-    if (settings.debug) {
-      console.log(`%c>>> %c${msg}`, "color: orange; font-weight: bold", "color: orange", ...rest);
-    }
-  };
-
-  /**
-   * Reactive snapshot of the application state, including args, outputs, UI state, and navigation state.
-   */
-  const snapshot = reactive({
-    args: Object.freeze(state.args),
-    outputs: Object.freeze(state.outputs),
-    ui: Object.freeze(state.ui),
-    navigationState: Object.freeze(state.navigationState) as NavigationState<Href>,
-  }) as {
-    args: Readonly<Args>;
-    outputs: Partial<Readonly<Outputs>>;
-    ui: Readonly<UiState>;
-    navigationState: Readonly<NavigationState<Href>>;
-  };
-
-  const debounceSpan = settings.debounceSpan ?? 200;
-
-  const maxWait = tap(settings.debounceMaxWait ?? 0, (v) =>
-    v < 20_000 ? 20_000 : v < debounceSpan ? debounceSpan * 100 : v,
-  );
-
-  const setBlockArgs = useDebounceFn(
-    (args: Args) => {
-      if (!isJsonEqual(args, snapshot.args)) {
-        platforma.setBlockArgs(args);
-      }
-    },
-    debounceSpan,
-    { maxWait },
-  );
-
-  const setBlockUiState = useDebounceFn(
-    (ui: UiState) => {
-      if (!isJsonEqual(ui, snapshot.ui)) {
-        platforma.setBlockUiState(ui);
-      }
-    },
-    debounceSpan,
-    { maxWait },
-  );
-
-  const setBlockArgsAndUiState = useDebounceFn(
-    (args: Args, ui: UiState) => {
-      if (!isJsonEqual(args, snapshot.args) || !isJsonEqual(ui, snapshot.ui)) {
-        platforma.setBlockArgsAndUiState(args, ui);
-      }
-    },
-    debounceSpan,
-    { maxWait },
-  );
-
-  (platforma 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);
-        log("args patch", snapshot.args);
-      }
-
-      if (patch.key === "ui" && !isJsonEqual(snapshot.ui, patch.value)) {
-        snapshot.ui = Object.freeze(patch.value);
-        log("ui patch", snapshot.ui);
-      }
-
-      if (patch.key === "outputs" && !isJsonEqual(snapshot.outputs, patch.value)) {
-        snapshot.outputs = Object.freeze(patch.value);
-        log("outputs patch", snapshot.outputs);
-      }
-
-      if (patch.key === "navigationState" && !isJsonEqual(snapshot.navigationState, patch.value)) {
-        snapshot.navigationState = Object.freeze(patch.value);
-        log("navigationState patch", snapshot.navigationState);
-      }
-    });
-
-    await nextTick();
-  });
-
-  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(snapshot.args);
-          }
-
-          return snapshot.args as T;
-        },
-        validate: options.validate,
-        autoSave: true,
-        onSave(newArgs) {
-          setBlockArgs(newArgs);
-        },
-      });
-    },
-    /**
-     * defaultUiState is temporarily here, remove it after implementing initialUiState
-     */
-    createUiModel<T = UiState>(
-      options: StateModelOptions<UiState, T> = {},
-      defaultUiState: () => UiState,
-    ) {
-      return createModel<T, UiState>({
-        get() {
-          if (options.transform) {
-            return options.transform(snapshot.ui);
-          }
-
-          return (snapshot.ui ?? defaultUiState()) as T;
-        },
-        validate: options.validate,
-        autoSave: true,
-        onSave(newData) {
-          setBlockUiState(newData);
-        },
-      });
-    },
-    /**
-     * Note: Don't forget to list the output names, like: useOutputs('output1', 'output2', ...etc)
-     * @param keys - List of output names
-     * @returns {OptionalResult<UnwrapOutputs<Outputs, K>>}
-     */
-    useOutputs<K extends keyof Outputs>(...keys: K[]): OptionalResult<UnwrapOutputs<Outputs, K>> {
-      const data = reactive({
-        errors: undefined,
-        value: undefined,
-      });
-
-      watch(
-        () => snapshot.outputs,
-        () => {
-          try {
-            Object.assign(data, {
-              value: this.unwrapOutputs<K>(...keys),
-              errors: undefined,
-            });
-          } catch (error) {
-            Object.assign(data, {
-              value: undefined,
-              errors: [String(error)],
-            });
-          }
-        },
-        { immediate: true, deep: true },
-      );
-
-      return data as OptionalResult<UnwrapOutputs<Outputs, K>>;
-    },
-    /**
-     * Retrieves the unwrapped values of outputs for the given keys.
-     *
-     * @template K - Keys of the outputs to unwrap.
-     * @param keys - List of output names.
-     * @throws Error if the outputs contain errors.
-     * @returns An object with unwrapped output values.
-     */
-    unwrapOutputs<K extends keyof Outputs>(...keys: K[]): UnwrapOutputs<Outputs, K> {
-      const outputs = snapshot.outputs;
-      const entries = keys.map((key) => [key, unwrapOutput(outputs[key])]);
-      return Object.fromEntries(entries);
-    },
-    /**
-     * Updates the arguments state by applying a callback.
-     *
-     * @param cb - Callback to modify the current arguments.
-     * @returns A promise resolving after the update is applied.
-     */
-    updateArgs(cb: (args: Args) => void) {
-      const newArgs = cloneArgs();
-      cb(newArgs);
-      return platforma.setBlockArgs(newArgs);
-    },
-    /**
-     * Updates the UI state by applying a callback.
-     *
-     * @param cb - Callback to modify the current UI state.
-     * @returns A promise resolving after the update is applied.
-     * @todo Make it mutable since there is already an initial one
-     */
-    updateUiState(cb: (args: UiState) => UiState): Promise<void> {
-      const newUiState = cloneUiState();
-      return platforma.setBlockUiState(cb(newUiState));
-    },
-    /**
-     * Updates the navigation state by applying a callback.
-     *
-     * @param cb - Callback to modify the current navigation state.
-     * @returns A promise resolving after the update is applied.
-     */
-    updateNavigationState(cb: (args: Mutable<NavigationState<Href>>) => void) {
-      const newState = cloneNavigationState();
-      cb(newState);
-      return platforma.setNavigationState(newState);
-    },
-    /**
-     * Navigates to a specific href by updating the navigation state.
-     *
-     * @param href - The target href to navigate to.
-     * @returns A promise resolving after the navigation state is updated.
-     */
-    navigateTo(href: Href) {
-      const newState = cloneNavigationState();
-      newState.href = href;
-      return platforma.setNavigationState(newState);
-    },
-  };
-
-  const outputs = computed<OutputValues<Outputs>>(() => {
-    const entries = Object.entries(snapshot.outputs).map(([k, outputWithStatus]) =>
-      platforma.blockModelInfo.outputs[k].withStatus
-        ? [k, ensureOutputHasStableFlag(outputWithStatus)]
-        : [
-            k,
-            outputWithStatus.ok && outputWithStatus.value !== undefined
-              ? outputWithStatus.value
-              : undefined,
-          ],
-    );
-    return Object.fromEntries(entries);
-  });
-
-  const outputErrors = computed<OutputErrors<Outputs>>(() => {
-    const entries = Object.entries(snapshot.outputs).map(([k, vOrErr]) => [
-      k,
-      vOrErr && vOrErr.ok === false ? new MultiError(vOrErr.errors) : undefined,
-    ]);
-    return Object.fromEntries(entries);
-  });
-
-  const getters = {
-    snapshot,
-    queryParams: computed(() => parseQuery<Href>(snapshot.navigationState.href)),
-    href: computed(() => snapshot.navigationState.href),
-    hasErrors: computed(() => Object.values(snapshot.outputs).some((v) => !v?.ok)),
-  };
-
-  const model = createAppModel(
-    {
-      get() {
-        return { args: snapshot.args, ui: snapshot.ui } as AppModel;
-      },
-      autoSave: true,
-      onSave(newData: AppModel) {
-        setBlockArgsAndUiState(newData.args, newData.ui);
-      },
-    },
-    {
-      outputs,
-      outputErrors,
-    },
-    settings,
-  );
-
-  return reactive(Object.assign(model, methods, getters));
-}
-
-export type BaseAppV1<
-  Args = unknown,
-  Outputs extends BlockOutputsBase = BlockOutputsBase,
-  UiState = unknown,
-  Href extends `/${string}` = `/${string}`,
-> = ReturnType<typeof createAppV1<Args, Outputs, UiState, Href>>;

package/src/internal/createAppV2.test.ts

@@ -1,207 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { createAppV2 } from "./createAppV2";
-import { type OutputWithStatus, unwrapResult } from "@platforma-sdk/model";
-import { BlockStateMock } from "./test-helpers/BlockMock";
-import { BlockMock } from "./test-helpers/BlockMock";
-import { delay } from "@milaboratories/helpers";
-import { createMockApi } from "./test-helpers/createMockApi";
-import { watch } from "vue";
-import { patchPoolingDelay } from "./createAppV2";
-
-type Args = {
-  x: number;
-  y: number;
-};
-
-type UiState = {
-  label: string;
-  delay?: number;
-};
-
-const defaultArgs = () => ({
-  x: 0,
-  y: 0,
-});
-
-type Outputs = {
-  sum: OutputWithStatus<number>;
-};
-
-const defaultOutputs = (): Outputs => {
-  return {
-    sum: {
-      ok: true,
-      value: 0,
-      stable: true,
-    },
-  };
-};
-
-const defaultState = (): BlockStateMock<Args, Outputs, UiState, `/${string}`> => {
-  return new BlockStateMock(defaultArgs(), defaultOutputs(), { label: "" }, "/");
-};
-
-class BlockSum extends BlockMock<Args, Outputs, UiState, `/${string}`> {
-  async process(): Promise<void> {
-    const { args, author } = this.state;
-    this.state.setState({
-      author,
-      outputs: { sum: { ok: true, value: args.x + args.y, stable: true } },
-    });
-  }
-}
-
-export const platforma = createMockApi<Args, Outputs, UiState>(new BlockSum(defaultState()));
-
-describe("createApp", { timeout: 20_000 }, () => {
-  beforeEach(() => {
-    // Mock window.addEventListener to prevent actual event listeners
-    vi.stubGlobal("window", {
-      addEventListener: vi.fn(),
-    });
-  });
-
-  it("should create an app with reactive snapshot", async () => {
-    const initialState = await platforma.loadBlockState().then(unwrapResult);
-
-    const app = createAppV2(
-      initialState,
-      {
-        ...platforma,
-        blockModelInfo: {
-          outputs: {
-            sum: { withStatus: false },
-          },
-          pluginIds: [],
-          featureFlags: {},
-          pluginPublicOutputs: {},
-        },
-      },
-      { debug: true, debounceSpan: 10 },
-    );
-
-    expect(app.model.args).toEqual({ x: 0, y: 0 });
-    expect(app.model.ui).toEqual({ label: "" });
-    expect(app.snapshot.navigationState.href).toBe("/");
-
-    let watchCountShallow = 0;
-
-    watch(
-      () => app.model.args,
-      () => {
-        watchCountShallow++;
-      },
-    );
-
-    app.model.args.x = 1;
-    app.model.args.y = 2;
-
-    const t1 = performance.now();
-    await app.allSettled();
-    await delay(100);
-    const t2 = performance.now();
-    console.log("allSettled", t2 - t1);
-
-    expect(app.model.args).toEqual(app.snapshot.args);
-    expect(app.model.args).toEqual({ x: 1, y: 2 });
-    expect(app.model.outputs.sum).toEqual(3);
-
-    app.model.args.x = 3;
-    app.model.args.y = 3;
-
-    const t3 = performance.now();
-    await app.allSettled();
-    await delay(patchPoolingDelay + 10);
-    const t4 = performance.now();
-    console.log("allSettled", t4 - t3);
-
-    expect(watchCountShallow).toBe(0); // no changes
-
-    expect(app.model.args).toEqual(app.snapshot.args);
-    expect(app.model.args).toEqual({ x: 3, y: 3 });
-    expect(app.model.outputs.sum).toEqual(6);
-
-    app.closedRef = true;
-  });
-
-  it("states should be synchronized", async () => {
-    const sharedBlock = new BlockSum(defaultState());
-    const platforma1 = createMockApi<Args, Outputs, UiState>(sharedBlock);
-    const platforma2 = createMockApi<Args, Outputs, UiState>(sharedBlock);
-
-    const initialState1 = await platforma1.loadBlockState().then(unwrapResult);
-    const initialState2 = await platforma2.loadBlockState().then(unwrapResult);
-
-    const app1 = createAppV2(
-      initialState1,
-      {
-        ...platforma1,
-        blockModelInfo: {
-          outputs: {
-            sum: { withStatus: false },
-          },
-          pluginIds: [],
-          featureFlags: {},
-          pluginPublicOutputs: {},
-        },
-      },
-      { appId: "app1", debug: true, debounceSpan: 10 },
-    );
-    const app2 = createAppV2(
-      initialState2,
-      {
-        ...platforma2,
-        blockModelInfo: {
-          outputs: {
-            sum: { withStatus: false },
-          },
-          pluginIds: [],
-          featureFlags: {},
-          pluginPublicOutputs: {},
-        },
-      },
-      { appId: "app2", debug: true, debounceSpan: 10 },
-    );
-
-    app1.model.args.x = 1;
-    app1.model.args.y = 2;
-
-    await app1.allSettled();
-    await app2.allSettled();
-
-    expect(app1.model.args).toEqual(app2.model.args);
-    expect(app1.model.args).toEqual({ x: 1, y: 2 });
-    expect(app1.model.outputs.sum).toEqual(3);
-    expect(app2.model.outputs.sum).toEqual(3);
-
-    app2.model.args.x = 3;
-    app2.model.args.y = 4;
-
-    await Promise.all([app1.allSettled(), app2.allSettled()]);
-    await delay(patchPoolingDelay + 10);
-
-    expect(app1.model.args).toEqual(app2.model.args);
-    expect(app1.model.args).toEqual({ x: 3, y: 4 });
-    expect(app1.model.outputs.sum).toEqual(7);
-    expect(app2.model.outputs.sum).toEqual(7);
-
-    app1.model.args.x = 5;
-    app1.model.args.y = 5;
-    app1.model.ui.delay = 20;
-    await delay(5);
-    app2.model.args.x = 7;
-    app2.model.args.y = 7;
-
-    await Promise.all([app1.allSettled(), app2.allSettled()]);
-    await delay(patchPoolingDelay + 10);
-
-    expect(app1.model.args).toEqual(app1.snapshot.args);
-    expect(app1.model.args).toEqual(app2.model.args);
-    expect(app1.model.args).toEqual({ x: 5, y: 5 });
-    expect(app1.model.outputs.sum).toEqual(10);
-    expect(app2.model.outputs.sum).toEqual(10);
-
-    app1.closedRef = true;
-    app2.closedRef = true;
-  });
-});