@effect-app/vue-components 1.0.0 → 1.1.0

package/dist/types/components/OmegaForm/useOmegaForm.d.ts

@@ -1,5 +1,5 @@
-import { type DeepKeys, DeepValue } from "@tanstack/vue-form";
-import { Order, S } from "effect-app";
+import { type DeepKeys, DeepValue, StandardSchemaV1Issue, ValidationError, ValidationErrorMap } from "@tanstack/vue-form";
+import { Effect, Order, S } from "effect-app";
 import { type InjectionKey } from "vue";
 import { type InputProps } from "./InputProps";
 import { DefaultInputProps, type FilterItems, type FormProps, type MetaRecord, type NestedKeyOf, OmegaAutoGenMeta, OmegaError, type OmegaFormApi, OmegaFormState, OmegaInputProps, ShowErrorsOn } from "./OmegaFormStuff";
@@ -10,6 +10,20 @@ type keysRule<T> = {
     keys?: "You should only use one of banKeys or keys, not both, moron";
     banKeys?: NestedKeyOf<T>[];
 };
+declare const FormErrors_base: new <A extends Record<string, any> = {}>(args: import("effect/Types").Equals<A, {}> extends true ? void : { readonly [P in keyof A as P extends "_tag" ? never : P]: A[P]; }) => import("effect/Cause").YieldableError & {
+    readonly _tag: "FormErrors";
+} & Readonly<A>;
+export declare class FormErrors<From> extends FormErrors_base<{
+    form: {
+        errors: (Record<string, StandardSchemaV1Issue[]> | undefined)[];
+        errorMap: ValidationErrorMap<undefined, undefined, Record<string, StandardSchemaV1Issue[]>, undefined, undefined, undefined, undefined, undefined, undefined, undefined>;
+    };
+    fields: Record<DeepKeys<From>, {
+        errors: ValidationError[];
+        errorMap: ValidationErrorMap;
+    }>;
+}> {
+}
 export type OmegaConfig<T> = {
     i18nNamespace?: string;
     showErrorsOn?: ShowErrorsOn;
@@ -29,6 +43,20 @@ export interface OF<From, To> extends OmegaFormApi<From, To> {
     filterItems?: FilterItems;
     clear: () => void;
     i18nNamespace?: string;
+    /** @experimental */
+    handleSubmitEffect: {
+        /**
+         * when `checkErrors` is true, the Effect will fail with `FormErrors<From>` when there are validation errors
+         * @experimental */
+        (options: {
+            checkErrors: true;
+            meta?: Record<string, any>;
+        }): Effect.Effect<void, FormErrors<From>>;
+        /** @experimental */
+        (options?: {
+            meta?: Record<string, any>;
+        }): Effect.Effect<void>;
+    };
 }
 export declare const OmegaFormKey: InjectionKey<OF<any, any>>;
 type __VLS_PrettifyLocal<T> = {

package/dist/vue-components.es7.js

@@ -1,63 +1,65 @@
-import { useForm as D, useStore as H } from "@tanstack/vue-form";
-import { S as O, Effect as d, Fiber as y } from "effect-app";
-import { runtimeFiberAsPromise as J } from "./vue-components.es10.js";
-import { isObject as q } from "./vue-components.es11.js";
-import { computed as I, onUnmounted as K, onMounted as B, onBeforeUnmount as G, watch as W, h as $ } from "vue";
-import k from "./vue-components.es12.js";
-import z from "./vue-components.es13.js";
-import { buildOmegaErrors as Q } from "./vue-components.es6.js";
-import T from "./vue-components.es14.js";
-import { generateMetaFromSchema as X } from "./vue-components.es8.js";
-import Y from "./vue-components.es5.js";
-import Z from "./vue-components.es15.js";
-import { trace as P } from "./vue-components.es16.js";
-import { context as g } from "./vue-components.es17.js";
-const p = (c) => function(o) {
+import { useForm as J, useStore as q } from "@tanstack/vue-form";
+import { Data as K, S as A, Effect as c, Fiber as y, Option as B } from "effect-app";
+import { runtimeFiberAsPromise as k } from "./vue-components.es10.js";
+import { isObject as G } from "./vue-components.es11.js";
+import { computed as I, onUnmounted as T, onMounted as W, onBeforeUnmount as z, watch as Q, h as P } from "vue";
+import X from "./vue-components.es12.js";
+import Y from "./vue-components.es13.js";
+import { buildOmegaErrors as Z } from "./vue-components.es6.js";
+import C from "./vue-components.es14.js";
+import { generateMetaFromSchema as ee } from "./vue-components.es8.js";
+import re from "./vue-components.es5.js";
+import te from "./vue-components.es15.js";
+import { trace as M } from "./vue-components.es16.js";
+import { context as E } from "./vue-components.es17.js";
+class se extends K.TaggedError("FormErrors") {
+}
+const p = (l) => function(o) {
   return {
     render() {
-      return $(o, {
-        form: c,
+      return P(o, {
+        form: l,
         on: this.$listeners,
         attrs: this.$attrs
       }, this.$slots);
     }
   };
-}, C = (c) => function(o) {
+}, ne = (l) => function(o) {
   return {
     setup() {
       return {
-        ...c
+        ...l
       };
     },
-    render({ errors: h, generalErrors: w, showErrors: S }) {
-      return $(o, {
+    render({ errors: h, generalErrors: S, showErrors: w }) {
+      return P(o, {
         errors: h,
-        generalErrors: w,
-        showErrors: S,
+        generalErrors: S,
+        showErrors: w,
         on: this.$listeners,
         attrs: this.$attrs
       }, this.$slots);
     }
   };
-}, pe = (c, a, o) => {
-  if (!c) throw new Error("Schema is required");
-  const h = O.standardSchemaV1(c), w = O.decode(c), { filterItems: S, meta: f } = X(c), l = I(() => {
+}, ve = (l, a, o) => {
+  if (!l) throw new Error("Schema is required");
+  const h = A.standardSchemaV1(l), S = A.decode(l), { filterItems: w, meta: d } = ee(l), m = I(() => {
     if (o?.persistency?.id)
       return o.persistency.id;
-    const e = window.location.pathname, r = Object.keys(f);
+    const e = window.location.pathname, r = Object.keys(d);
     return `${e}-${r.join("-")}`;
-  }), A = () => {
+  }), U = () => {
     const e = new URLSearchParams(window.location.search);
-    e.delete(l.value);
+    e.delete(m.value);
     const r = new URL(window.location.href);
     r.search = e.toString(), window.history.replaceState({}, "", r.toString());
   };
-  function E(e, r) {
+  function g(e, r) {
     for (const t in r)
-      r[t] && q(r[t]) ? (e[t] || (e[t] = {}), E(e[t], r[t])) : e[t] = r[t];
+      r[t] && G(r[t]) ? (e[t] || (e[t] = {}), g(e[t], r[t])) : e[t] = r[t];
     return e;
   }
-  const U = I(() => {
+  const $ = I(() => {
     if (a?.defaultValues && !o?.persistency?.overrideDefaultValues)
       return a?.defaultValues;
     let e;
@@ -65,8 +67,8 @@ const p = (c) => function(o) {
     if (!r?.policies || r.policies.length === 0) return {};
     if (r.policies.includes("querystring"))
       try {
-        const s = new URLSearchParams(window.location.search).get(l.value);
-        A(), s && (e = JSON.parse(s));
+        const s = new URLSearchParams(window.location.search).get(m.value);
+        U(), s && (e = JSON.parse(s));
       } catch (t) {
         console.error(t);
       }
@@ -78,9 +80,9 @@ const p = (c) => function(o) {
       if (t)
         try {
           const s = JSON.parse(
-            t.getItem(l.value) || "{}"
+            t.getItem(m.value) || "{}"
           );
-          t.removeItem(l.value), e = s;
+          t.removeItem(m.value), e = s;
         } catch (s) {
           console.error(s);
         }
@@ -89,95 +91,97 @@ const p = (c) => function(o) {
       return e;
     {
       const t = a?.defaultValues;
-      return E(t, e);
+      return g(t, e);
     }
-  }), M = (e, r) => e ? g.with(P.setSpan(g.active(), e), r) : r(), u = D({
+  }), N = (e, r) => e ? E.with(M.setSpan(E.active(), e), r) : r(), u = J({
     ...a,
     validators: {
       onSubmit: h,
       ...a?.validators || {}
     },
-    onSubmit: a?.onSubmit ? ({ formApi: e, meta: r, value: t }) => M(r?.currentSpan, async () => {
-      const s = await d.runPromise(w(t)), n = a.onSubmit({
+    onSubmit: a?.onSubmit ? ({ formApi: e, meta: r, value: t }) => N(r?.currentSpan, async () => {
+      const s = await c.runPromise(S(t)), n = a.onSubmit({
         formApi: e,
         meta: r,
         value: s
       });
-      return y.isFiber(n) && y.isRuntimeFiber(n) ? await J(n) : d.isEffect(n) ? await d.runPromise(
+      return y.isFiber(n) && y.isRuntimeFiber(n) ? await k(n) : c.isEffect(n) ? await c.runPromise(
         n.pipe(
           // meta?.currentSpan
           //   ? Effect.withParentSpan(meta.currentSpan)
           //   : (_) => _,
-          d.flatMap((m) => y.join(m))
+          c.flatMap((f) => y.join(f))
         )
       ) : n;
     }) : void 0,
-    defaultValues: U.value
-  }), N = () => {
-    Object.keys(f).forEach((e) => {
+    defaultValues: $.value
+  }), _ = () => {
+    Object.keys(d).forEach((e) => {
       u.setFieldValue(e, void 0);
     });
-  }, V = (e) => e.reduce((r, t) => {
+  }, F = (e) => e.reduce((r, t) => {
     const s = t.split(".");
-    return s.reduce((n, m, x) => (x === s.length - 1 ? n[m] = u.getFieldValue(t) : n[m] = n[m] ?? {}, n[m]), r), r;
-  }, {}), F = (e) => {
+    return s.reduce((n, f, H) => (H === s.length - 1 ? n[f] = u.getFieldValue(t) : n[f] = n[f] ?? {}, n[f]), r), r;
+  }, {}), V = (e) => {
     if (e) {
       if (Array.isArray(e.keys))
-        return V(e.keys);
+        return F(e.keys);
       if (Array.isArray(e.banKeys)) {
-        const r = Object.keys(f).filter((t) => e.banKeys?.includes(t));
-        return V(r);
+        const r = Object.keys(d).filter((t) => e.banKeys?.includes(t));
+        return F(r);
       }
       return u.store.state.values;
     }
-  }, v = () => {
+  }, b = () => {
     const e = o?.persistency;
     if (!(!e?.policies || e.policies.length === 0) && (e.policies.includes("local") || e.policies.includes("session"))) {
       const r = e.policies.includes("local") ? localStorage : sessionStorage;
       if (!r) return;
-      const t = F(e);
-      return r.setItem(l.value, JSON.stringify(t));
+      const t = V(e);
+      return r.setItem(m.value, JSON.stringify(t));
     }
-  }, j = () => {
+  }, O = () => {
     const e = o?.persistency;
     if (!(!e?.policies || e.policies.length === 0) && e.policies.includes("querystring")) {
-      const r = F(e), t = new URLSearchParams(window.location.search);
-      t.set(l.value, JSON.stringify(r));
+      const r = V(e), t = new URLSearchParams(window.location.search);
+      t.set(m.value, JSON.stringify(r));
       const s = new URL(window.location.href);
       s.search = t.toString(), window.history.replaceState({}, "", s.toString());
     }
   };
-  K(v), B(() => {
-    window.addEventListener("beforeunload", v), window.addEventListener("blur", j);
-  }), G(() => {
-    window.removeEventListener("beforeunload", v), window.removeEventListener("blur", j);
+  T(b), W(() => {
+    window.addEventListener("beforeunload", b), window.addEventListener("blur", O);
+  }), z(() => {
+    window.removeEventListener("beforeunload", b), window.removeEventListener("blur", O);
   });
-  const R = u.handleSubmit, i = Object.assign(u, {
+  const j = (e) => c.currentSpan.pipe(
+    c.option,
+    c.flatMap(
+      (r) => c.promise(() => u.handleSubmit(B.isSome(r) ? { currentSpan: r.value, ...e } : e))
+    )
+  ), R = (e) => e?.checkErrors ? j(e?.meta).pipe(c.flatMap(c.fnUntraced(function* () {
+    const r = u.getAllErrors();
+    if (r.form.errors.length)
+      return yield* new se({ form: r.form, fields: r.fields });
+  }))) : j(e?.meta), x = u.handleSubmit, i = Object.assign(u, {
     i18nNamespace: o?.i18nNamespace,
-    meta: f,
-    filterItems: S,
-    clear: N,
+    meta: d,
+    filterItems: w,
+    clear: _,
     handleSubmit: (e) => {
-      const r = P.getSpan(g.active());
-      return R({ currentSpan: r, ...e });
-    }
+      const r = M.getSpan(E.active());
+      return x({ currentSpan: r, ...e });
+    },
     // /** @experimental */
-    // handleSubmitEffect: (meta?: Record<string, any>) =>
-    //   Effect.currentSpan.pipe(
-    //     Effect.option,
-    //     Effect
-    //       .flatMap((span) =>
-    //         Effect.promise(() => form.handleSubmit(Option.isSome(span) ? { currentSpan: span.value, ...meta } : meta))
-    //       )
-    //   )
-  }), _ = H(
+    handleSubmitEffect: R
+  }), D = q(
     i.store,
     (e) => e.submissionAttempts
-  ), b = i.useStore((e) => e.errors);
-  W(
-    () => [i.filterItems, b.value],
+  ), v = i.useStore((e) => e.errors);
+  Q(
+    () => [i.filterItems, v.value],
     () => {
-      const e = i.filterItems, r = b.value;
+      const e = i.filterItems, r = v.value;
       return e ? r ? (Object.values(r).filter(
         (s) => !!s
       ).flatMap(
@@ -195,17 +199,18 @@ const p = (c) => function(o) {
       }), {}) : {} : {};
     }
   );
-  const L = Q(_, b, o?.showErrorsOn);
+  const L = Z(D, v, o?.showErrorsOn);
   return Object.assign(i, {
     errorContext: L,
-    Form: p(i)(Z),
-    Input: p(i)(o?.input ?? Y),
+    Form: p(i)(te),
+    Input: p(i)(o?.input ?? re),
     Field: u.Field,
-    Errors: C(L)(T),
-    Array: p(i)(k),
-    AutoGen: p(i)(z)
+    Errors: ne(L)(C),
+    Array: p(i)(X),
+    AutoGen: p(i)(Y)
   });
 };
 export {
-  pe as useOmegaForm
+  se as FormErrors,
+  ve as useOmegaForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.17.13",
@@ -46,11 +46,11 @@
   },
   "dependencies": {
     "@opentelemetry/api": "^1.9.0",
-    "@tanstack/vue-form": "^1.23.0",
+    "@tanstack/vue-form": "^1.23.4",
     "highlight.js": "^11.11.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "2.80.3",
-    "effect-app": "3.8.1"
+    "effect-app": "3.8.1",
+    "@effect-app/vue": "2.81.0"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/useOmegaForm.ts

@@ -2,8 +2,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import * as api from "@opentelemetry/api"
-import { type DeepKeys, DeepValue, type FormAsyncValidateOrFn, type FormValidateOrFn, type StandardSchemaV1, StandardSchemaV1Issue, useForm, useStore } from "@tanstack/vue-form"
-import { Effect, Fiber, Order, S } from "effect-app"
+import { type DeepKeys, DeepValue, type FormAsyncValidateOrFn, type FormValidateOrFn, type StandardSchemaV1, StandardSchemaV1Issue, useForm, useStore, ValidationError, ValidationErrorMap } from "@tanstack/vue-form"
+import { Data, Effect, Fiber, Option, Order, S } from "effect-app"
 import { runtimeFiberAsPromise } from "effect-app/utils"
 import { isObject } from "effect/Predicate"
 import { Component, computed, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, watch } from "vue"
@@ -26,6 +26,29 @@ type keysRule<T> =
     banKeys?: NestedKeyOf<T>[]
   }
 
+export class FormErrors<From> extends Data.TaggedError("FormErrors")<{
+  form: {
+    // TODO: error shapes seem off, with `undefined` etc..
+    errors: (Record<string, StandardSchemaV1Issue[]> | undefined)[]
+    errorMap: ValidationErrorMap<
+      undefined,
+      undefined,
+      Record<string, StandardSchemaV1Issue[]>,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined
+    >
+  }
+  fields: Record<DeepKeys<From>, {
+    errors: ValidationError[]
+    errorMap: ValidationErrorMap
+  }>
+}> {}
+
 const fHoc = (form: OF<any, any>) => {
   return function FormHoc<P>(
     WrappedComponent: Component<P>
@@ -87,8 +110,15 @@ export interface OF<From, To> extends OmegaFormApi<From, To> {
   filterItems?: FilterItems
   clear: () => void
   i18nNamespace?: string
-  // /** @experimental */
-  // handleSubmitEffect: (meta?: Record<string, any>) => Effect.Effect<void, never, never>
+  /** @experimental */
+  handleSubmitEffect: {
+    /**
+     * when `checkErrors` is true, the Effect will fail with `FormErrors<From>` when there are validation errors
+     * @experimental */
+    (options: { checkErrors: true; meta?: Record<string, any> }): Effect.Effect<void, FormErrors<From>>
+    /** @experimental */
+    (options?: { meta?: Record<string, any> }): Effect.Effect<void>
+  }
 }
 
 export const OmegaFormKey = Symbol("OmegaForm") as InjectionKey<OF<any, any>>
@@ -794,6 +824,30 @@ export const useOmegaForm = <
     window.removeEventListener("blur", saveDataInUrl)
   })
 
+  const handleSubmitEffect_ = (meta?: Record<string, any>) =>
+    Effect.currentSpan.pipe(
+      Effect.option,
+      Effect
+        .flatMap((span) =>
+          Effect.promise(() => form.handleSubmit(Option.isSome(span) ? { currentSpan: span.value, ...meta } : meta))
+        )
+    )
+
+  const handleSubmitEffect: {
+    (options: { checkErrors: true; meta?: Record<string, any> }): Effect.Effect<void, FormErrors<From>>
+    (options?: { meta?: Record<string, any> }): Effect.Effect<void>
+  } = (
+    options?: { meta?: Record<string, any>; checkErrors?: true }
+  ): any =>
+    options?.checkErrors
+      ? handleSubmitEffect_(options?.meta).pipe(Effect.flatMap(Effect.fnUntraced(function*() {
+        const errors = form.getAllErrors()
+        if (errors.form.errors.length) {
+          return yield* new FormErrors({ form: errors.form, fields: errors.fields })
+        }
+      })))
+      : handleSubmitEffect_(options?.meta)
+
   const handleSubmit = form.handleSubmit
   const formWithExtras: OF<From, To> = Object.assign(form, {
     i18nNamespace: omegaConfig?.i18nNamespace,
@@ -803,16 +857,9 @@ export const useOmegaForm = <
     handleSubmit: (meta?: Record<string, any>) => {
       const span = api.trace.getSpan(api.context.active())
       return handleSubmit({ currentSpan: span, ...meta })
-    }
+    },
     // /** @experimental */
-    // handleSubmitEffect: (meta?: Record<string, any>) =>
-    //   Effect.currentSpan.pipe(
-    //     Effect.option,
-    //     Effect
-    //       .flatMap((span) =>
-    //         Effect.promise(() => form.handleSubmit(Option.isSome(span) ? { currentSpan: span.value, ...meta } : meta))
-    //       )
-    //   )
+    handleSubmitEffect
   })
 
   const formSubmissionAttempts = useStore(