@platforma-sdk/ui-vue 1.3.5

package/src/createModel.ts

@@ -0,0 +1,108 @@
+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';
+
+const identity = <T, V = T>(v: T): V => v as unknown as V;
+
+const ensureError = (cause: unknown) => {
+  if (cause instanceof Error) {
+    return cause;
+  }
+
+  return Error(String(cause));
+};
+
+const isZodError = (err: Error): err is ZodError => {
+  return err.name === 'ZodError';
+};
+
+const formatZodError = (err: ZodError) => {
+  const { formErrors, fieldErrors } = err.flatten();
+  const _fieldErrors = Object.entries(fieldErrors).map(([field, errors]) => {
+    return field + ':' + errors?.join(',');
+  });
+  return formErrors.concat(_fieldErrors).join('; ');
+};
+
+export function createModel<M, V = unknown>(options: ModelOptions<M, V>): Model<M> {
+  const validate = options.validate ?? identity;
+
+  const { autoSave } = options;
+
+  const error = ref<Error | undefined>();
+
+  const local = ref<M>();
+
+  watch(
+    () => options.get(),
+    (v) => {
+      local.value = deepClone(v);
+    },
+    { immediate: true },
+  );
+
+  const save = () => {
+    options.onSave(validate(deepClone(local.value)));
+  };
+
+  const revert = () => {
+    local.value = deepClone(options.get());
+    error.value = undefined;
+  };
+
+  const setValue = (v: M) => {
+    error.value = undefined;
+    try {
+      validate(v);
+      if (autoSave) {
+        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
+      }
+    }
+  };
+
+  const model = computed<M>({
+    get: () => {
+      return local.value as M;
+    },
+    set(v) {
+      local.value = v;
+      setValue(v);
+    },
+  });
+
+  watch(
+    local,
+    (v) => {
+      if (!deepEqual(options.get(), v)) {
+        setValue(v as M);
+      }
+    },
+    { deep: true },
+  );
+
+  const valid = computed(() => !error.value);
+
+  const isChanged = computed(() => {
+    return !deepEqual(options.get(), unref(local));
+  });
+
+  const errorString = computed(() => (error.value ? error.value.message : ''));
+
+  return reactive({
+    model: model,
+    valid,
+    isChanged,
+    error,
+    errorString,
+    save,
+    revert,
+  });
+}

package/src/defineApp.ts

@@ -0,0 +1,78 @@
+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 type { LocalState, Routes } from './types';
+
+const pluginKey = Symbol('sdk-vue');
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useSdkPlugin(): SdkPlugin {
+  return inject(pluginKey)!;
+}
+
+export function defineApp<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+  Local extends LocalState<Href> = LocalState<Href>,
+>(platforma: Platforma<Args, Outputs, UiState, Href>, extendApp: (app: BaseApp<Args, Outputs, UiState, Href>) => Local) {
+  let app: undefined | App<Args, Outputs, UiState, Href, Local> = undefined;
+
+  const loadApp = () => {
+    platforma
+      .loadBlockState()
+      .then((state) => {
+        plugin.loaded = true;
+        const baseApp = createApp<Args, Outputs, UiState, Href>(state, platforma);
+
+        const localState = extendApp(baseApp);
+
+        app = Object.assign(baseApp, {
+          ...localState,
+          routes: Object.fromEntries(
+            Object.entries(localState.routes as Routes<Href>).map(([href, component]) => {
+              return [href, markRaw(component as Component)];
+            }),
+          ),
+        } as unknown as App<Args, Outputs, UiState, Href, Local>);
+      })
+      .catch((err) => {
+        plugin.error = err;
+      });
+  };
+
+  const plugin = reactive({
+    loaded: false,
+    error: undefined as unknown,
+    // Href to get typed query parameters for a specific route
+    useApp<PageHref extends Href = Href>() {
+      return notEmpty(app, 'App is not loaded') as App<Args, Outputs, UiState, PageHref, Local>;
+    },
+    // @todo type portability issue with Vue
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    install(app: any) {
+      app.provide(pluginKey, this);
+      loadApp();
+    },
+  });
+
+  return plugin;
+}
+
+export type App<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+  Local extends LocalState<Href> = LocalState<Href>,
+> = BaseApp<Args, Outputs, UiState, Href> & Reactive<Local>;
+
+export type SdkPlugin<
+  Args = unknown,
+  Outputs extends BlockOutputsBase = BlockOutputsBase,
+  UiState = unknown,
+  Href extends `/${string}` = `/${string}`,
+> = ReturnType<typeof defineApp<Args, Outputs, UiState, Href>>;

package/src/defineStore.ts

@@ -0,0 +1,32 @@
+import { reactive, onScopeDispose, getCurrentScope, effectScope } from 'vue';
+
+const shelf = new Map<symbol, unknown>();
+
+function initStore<S extends object>(key: symbol, cb: () => S) {
+  const scope = getCurrentScope() ?? effectScope();
+
+  const store = scope.run(() => {
+    onScopeDispose(() => {
+      shelf.delete(key);
+    });
+
+    return reactive(cb());
+  }) as S;
+
+  (store as Disposable)[Symbol.dispose] = () => {
+    scope.stop();
+  };
+
+  return store;
+}
+
+export function defineStore<S extends object>(cb: () => S) {
+  const key = Symbol();
+
+  return () => {
+    if (!shelf.has(key)) {
+      shelf.set(key, initStore(key, cb));
+    }
+    return shelf.get(key) as S & Disposable;
+  };
+}

package/src/lib.ts

@@ -0,0 +1,26 @@
+import './assets/ui.scss';
+import BlockLayout from './components/BlockLayout.vue';
+import PlAgDataTable from './components/PlAgDataTable/PlAgDataTable.vue';
+import ValueOrErrorsComponent from './components/ValueOrErrorsComponent.vue';
+
+export { BlockLayout, PlAgDataTable, ValueOrErrorsComponent };
+
+export * from './components/PlAgDataTable/types';
+
+export * from './defineApp';
+
+export * from './createModel';
+
+export * from './types';
+
+export * from './defineStore';
+
+export * from './utils';
+
+export * from './computedResult';
+
+export * from './composition/useWatchResult';
+
+export * from '@milaboratories/uikit';
+
+export type * from '@milaboratories/uikit';

package/src/types.static-test.ts

@@ -0,0 +1,80 @@
+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 { App } from './defineApp';
+import { computed, type Component } from 'vue';
+
+declare function __createModel<M, V = unknown>(options: ModelOptions<M, V>): Model<M>;
+
+declare const __args: {
+  seed: number;
+};
+
+const validate = z.coerce.number().int().parse;
+
+type _number = ReturnType<typeof validate>;
+
+const __model1 = __createModel({
+  get() {
+    return String(__args.seed);
+  },
+  validate,
+  autoSave: true,
+  onSave(seed) {
+    console.log('save', seed);
+  },
+});
+
+const __model2 = __createModel({
+  get() {
+    return __args.seed;
+  },
+  validate,
+  autoSave: true,
+  onSave(seed) {
+    console.log('save', seed);
+  },
+});
+
+type InferArgs<Pl extends Platforma> = Pl extends Platforma<infer Args> ? Args : never;
+type InferUiState<Pl extends Platforma> = Pl extends Platforma<unknown, BlockOutputsBase, infer UiState> ? UiState : never;
+
+export type TestApp<P extends Platforma> = ReturnType<typeof createApp<InferArgs<P>, InferOutputsType<P>, InferUiState<P>, InferHrefType<P>>>;
+
+type _App1 = BaseApp<1, BlockOutputsBase, unknown, '/'>;
+type _App2 = TestApp<Platforma<1, BlockOutputsBase, unknown, '/'>>;
+
+const local = () => {
+  const counter = computed(() => 1);
+  const label = computed(() => 'aaaa');
+
+  const method = () => 100;
+
+  return {
+    counter,
+    label,
+    method,
+    routes: {
+      '/': undefined as unknown as Component,
+    },
+  };
+};
+
+type ExtApp = App<1, BlockOutputsBase, unknown, '/', ReturnType<typeof local>>;
+
+declare const app: ExtApp;
+
+app.counter;
+
+type __cases = [
+  Expect<Equal<Model<string>, typeof __model1>>,
+  Expect<Equal<Model<number>, typeof __model2>>,
+  Expect<Equal<Model<string>, typeof __model1>>,
+  Expect<Equal<Model<number>, typeof __model2>>,
+  Expect<Equal<_App1, _App2>>,
+  Expect<Equal<ExtApp['counter'], number>>,
+  Expect<Equal<ExtApp['label'], string>>,
+  Expect<Equal<ExtApp['method'], () => number>>,
+];

package/src/types.ts

@@ -0,0 +1,106 @@
+import type { Equal, Expect } from '@milaboratories/helpers';
+import type { BlockOutputsBase, ValueOrErrors } from '@platforma-sdk/model';
+import type { Component, ComputedGetter } from 'vue';
+
+export type UnwrapValueOrErrors<R extends ValueOrErrors<unknown>> = Extract<R, { ok: true }>['value'];
+export interface StateModelOptions<A, T = A> {
+  transform?: (v: A) => T;
+  validate?: (v: unknown) => A;
+}
+
+export interface ModelOptions<M, V = M> extends ReadableComputed<M> {
+  get(): M;
+  validate?(v: unknown): V;
+  onSave(v: V): void;
+  autoSave?: boolean;
+  // @todo debounce?: number
+}
+
+export type Model<T> = {
+  model: T;
+  valid: boolean;
+  isChanged: boolean;
+  error: Error | undefined;
+  errorString: string | undefined;
+  save: () => void;
+  revert: () => void;
+};
+
+interface ReadableComputed<T> {
+  get: ComputedGetter<T>;
+}
+
+export type StripLastSlash<S extends string> = S extends `${infer Stripped}/` ? Stripped : S;
+
+export type ParsePathnamePart<S extends string> = S extends `${infer Path}?${string}` ? StripLastSlash<Path> : S;
+
+export type ParseQueryPart<S extends string> = S extends `${string}?${infer Query}` ? Query : '';
+
+export type QueryChunks<S extends string> = S extends `${infer Chunk}&${infer Rest}` ? Chunk | QueryChunks<Rest> : S;
+
+export type SplitChunks<S extends string> = S extends `${infer Key}=${infer Value}` ? [Key, Value] : never;
+
+export type ParseQuery<QueryString extends string> = { [T in SplitChunks<QueryChunks<ParseQueryPart<QueryString>>> as T[0]]: T[1] };
+
+export type Routes<Href extends `/${string}` = `/${string}`> = {
+  [P in Href as ParsePathnamePart<P>]: Component;
+};
+
+export type RouteParams<Href extends `/${string}` = `/${string}`> = {
+  [P in Href as ParsePathnamePart<P>]: ParseQuery<P>;
+};
+
+export type LocalState<Href extends `/${string}` = `/${string}`> = {
+  routes: Routes<Href>;
+};
+
+// Results (ValueOrErrors)
+
+export type UnwrapValueOrError<W> = W extends {
+  ok: true;
+  value: infer V;
+}
+  ? V
+  : never;
+
+export type UnwrapOutputs<Outputs extends BlockOutputsBase, K extends keyof Outputs = keyof Outputs> = {
+  [P in K]: UnwrapValueOrError<Outputs[P]>;
+};
+
+// Draft
+export type ModelResult<T, E = unknown> =
+  | {
+      ok: true;
+      model: T;
+    }
+  | {
+      ok: false;
+      error: E;
+    };
+
+export type OptionalResult<T> =
+  | {
+      errors?: undefined;
+      value?: T; // I make this optional (wip)
+    }
+  | {
+      value?: undefined;
+      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;
+//   }
+// }
+
+type _cases = [Expect<Equal<number, UnwrapValueOrError<ValueOrErrors<number>>>>];

package/src/urls.ts

@@ -0,0 +1,14 @@
+import type { ParseQuery } from './types';
+
+export const parsePathname = (href: `/${string}`) => {
+  try {
+    return new URL(href, 'http://dummy').pathname as `/${string}`;
+  } catch (err) {
+    console.error('Invalid href', href);
+    return undefined;
+  }
+};
+
+export const parseQuery = <Href extends `/${string}`>(href: Href) => {
+  return Object.fromEntries(new URL(href, 'http://dummy').searchParams) as ParseQuery<Href>;
+};

package/src/utils.ts

@@ -0,0 +1,75 @@
+import type { ValueOrErrors } from '@platforma-sdk/model';
+import type { OptionalResult } from './types';
+
+export class UnresolvedError extends Error {}
+
+export class MultiError extends Error {
+  constructor(public readonly errors: string[]) {
+    super();
+  }
+
+  // @todo
+  toString() {
+    return this.errors.join(',');
+  }
+}
+
+export function wrapValueOrErrors<V>(value: V): ValueOrErrors<V> {
+  return {
+    ok: true,
+    value,
+  };
+}
+
+export function unwrapValueOrErrors<V>(valueOrErrors?: ValueOrErrors<V>): V {
+  if (!valueOrErrors) {
+    throw new UnresolvedError();
+  }
+
+  if (!valueOrErrors.ok) {
+    throw Error(valueOrErrors.errors.join(';'));
+  }
+
+  return valueOrErrors.value;
+}
+
+// Optional Result
+
+export function wrapOptionalResult<V>(value: V): OptionalResult<V> {
+  return {
+    value,
+    errors: undefined,
+  };
+}
+
+export function unwrapOptionalResult<V>(result: OptionalResult<V>): V {
+  if (result.errors) {
+    throw new MultiError(result.errors);
+  }
+
+  if (!result.value) {
+    throw new UnresolvedError();
+  }
+
+  return result.value;
+}
+
+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;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+// declare module '*.vue' {
+//   import type { DefineComponent } from 'vue';
+//   // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+//   const component: DefineComponent<{}, {}, any>;
+//   export default component;
+// }

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2021",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "emitDeclarationOnly": true,
+    "declarationMap": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": false,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    emptyOutDir: false,
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: [resolve(__dirname, 'src/lib.ts')],
+      name: 'SdkVueLib',
+      // the proper extensions will be added
+      fileName: 'lib',
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+});