@effect-app/vue-components 0.18.15 → 0.18.17

package/dist/vue-components.es9.js

@@ -1,38 +1,40 @@
-import { useForm as U } from "@tanstack/vue-form";
-import { S as F, Fiber as p, Effect as o } from "effect-app";
-import { runtimeFiberAsPromise as O } from "./vue-components.es22.js";
-import { isObject as I } from "./vue-components.es23.js";
-import { computed as b, onUnmounted as R, onMounted as A, onBeforeUnmount as D, provide as M } from "vue";
-import N from "./vue-components.es6.js";
-import { generateMetaFromSchema as J } from "./vue-components.es10.js";
-const K = Symbol("OmegaForm"), z = (f, i, a) => {
-  if (!f) throw new Error("Schema is required");
-  const g = F.standardSchemaV1(f), { filterItems: V, meta: u } = J(f), l = b(() => {
-    if (a?.persistency?.id)
-      return a.persistency.id;
-    const e = window.location.pathname, r = Object.keys(u);
+import { useForm as I } from "@tanstack/vue-form";
+import { S as R, Fiber as m, Effect as p } from "effect-app";
+import { runtimeFiberAsPromise as A } from "./vue-components.es22.js";
+import { isObject as N } from "./vue-components.es23.js";
+import { computed as g, onUnmounted as D, onMounted as J, onBeforeUnmount as K, provide as M } from "vue";
+import q from "./vue-components.es6.js";
+import { generateMetaFromSchema as x } from "./vue-components.es10.js";
+import { trace as V } from "./vue-components.es24.js";
+import { context as w } from "./vue-components.es25.js";
+const _ = Symbol("OmegaForm"), X = (d, i, n) => {
+  if (!d) throw new Error("Schema is required");
+  const j = R.standardSchemaV1(d), { filterItems: E, meta: c } = x(d), o = g(() => {
+    if (n?.persistency?.id)
+      return n.persistency.id;
+    const e = window.location.pathname, r = Object.keys(c);
     return `${e}-${r.join("-")}`;
-  }), E = () => {
+  }), L = () => {
     const e = new URLSearchParams(window.location.search);
-    e.delete(l.value);
+    e.delete(o.value);
     const r = new URL(window.location.href);
     r.search = e.toString(), window.history.replaceState({}, "", r.toString());
   };
   function S(e, r) {
     for (const t in r)
-      r[t] && I(r[t]) ? (e[t] || (e[t] = {}), S(e[t], r[t])) : e[t] = r[t];
+      r[t] && N(r[t]) ? (e[t] || (e[t] = {}), S(e[t], r[t])) : e[t] = r[t];
     return e;
   }
-  const P = b(() => {
-    if (i?.defaultValues && !a?.persistency?.overrideDefaultValues)
+  const P = g(() => {
+    if (i?.defaultValues && !n?.persistency?.overrideDefaultValues)
       return i?.defaultValues;
     let e;
-    const r = a?.persistency;
+    const r = n?.persistency;
     if (!r?.policies || r.policies.length === 0) return {};
     if (r.policies.includes("querystring"))
       try {
-        const s = new URLSearchParams(window.location.search).get(l.value);
-        E(), s && (e = JSON.parse(s));
+        const s = new URLSearchParams(window.location.search).get(o.value);
+        L(), s && (e = JSON.parse(s));
       } catch (t) {
         console.error(t);
       }
@@ -44,9 +46,9 @@ const K = Symbol("OmegaForm"), z = (f, i, a) => {
       if (t)
         try {
           const s = JSON.parse(
-            t.getItem(l.value) || "{}"
+            t.getItem(o.value) || "{}"
           );
-          t.removeItem(l.value), e = s;
+          t.removeItem(o.value), e = s;
         } catch (s) {
           console.error(s);
         }
@@ -57,86 +59,91 @@ const K = Symbol("OmegaForm"), z = (f, i, a) => {
       const t = i?.defaultValues;
       return S(t, e);
     }
-  }), c = U({
+  }), U = (e, r) => e ? w.with(V.setSpan(w.active(), e), r) : r(), a = I({
     ...i,
     validators: {
-      onSubmit: g,
+      onSubmit: j,
       ...i?.validators || {}
     },
-    onSubmit: i?.onSubmit ? ({ formApi: e, meta: r, value: t }) => {
+    onSubmit: i?.onSubmit ? ({ formApi: e, meta: r, value: t }) => U(r?.span, async () => {
       const s = i.onSubmit({
         formApi: e,
         meta: r,
         value: t
       });
-      return p.isFiber(s) && p.isRuntimeFiber(s) ? O(s) : o.isEffect(s) ? o.runPromise(
+      return m.isFiber(s) && m.isRuntimeFiber(s) ? await A(s) : p.isEffect(s) ? await p.runPromise(
         s.pipe(
-          r?.currentSpan ? o.withParentSpan(r.currentSpan) : (n) => n,
-          o.flatMap((n) => p.join(n))
+          // meta?.currentSpan
+          //   ? Effect.withParentSpan(meta.currentSpan)
+          //   : (_) => _,
+          p.flatMap((l) => m.join(l))
         )
       ) : s;
-    } : void 0,
+    }) : void 0,
     defaultValues: P.value
-  }), j = () => {
-    Object.keys(u).forEach((e) => {
-      c.setFieldValue(e, void 0);
+  }), F = () => {
+    Object.keys(c).forEach((e) => {
+      a.setFieldValue(e, void 0);
     });
-  }, w = (e) => e.reduce((r, t) => {
+  }, h = (e) => e.reduce((r, t) => {
     const s = t.split(".");
-    return s.reduce((n, d, L) => (L === s.length - 1 ? n[d] = c.getFieldValue(t) : n[d] = n[d] ?? {}, n[d]), r), r;
-  }, {}), h = (e) => {
+    return s.reduce((l, u, O) => (O === s.length - 1 ? l[u] = a.getFieldValue(t) : l[u] = l[u] ?? {}, l[u]), r), r;
+  }, {}), y = (e) => {
     if (e) {
       if (Array.isArray(e.keys))
-        return w(e.keys);
+        return h(e.keys);
       if (Array.isArray(e.banKeys)) {
-        const r = Object.keys(u).filter((t) => e.banKeys?.includes(t));
-        return w(r);
+        const r = Object.keys(c).filter((t) => e.banKeys?.includes(t));
+        return h(r);
       }
-      return c.store.state.values;
+      return a.store.state.values;
     }
-  }, m = () => {
-    const e = a?.persistency;
+  }, f = () => {
+    const e = n?.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 = h(e);
-      return r.setItem(l.value, JSON.stringify(t));
+      const t = y(e);
+      return r.setItem(o.value, JSON.stringify(t));
     }
-  }, y = () => {
-    const e = a?.persistency;
+  }, v = () => {
+    const e = n?.persistency;
     if (!(!e?.policies || e.policies.length === 0) && e.policies.includes("querystring")) {
-      const r = h(e), t = new URLSearchParams(window.location.search);
-      t.set(l.value, JSON.stringify(r));
+      const r = y(e), t = new URLSearchParams(window.location.search);
+      t.set(o.value, JSON.stringify(r));
       const s = new URL(window.location.href);
       s.search = t.toString(), window.history.replaceState({}, "", s.toString());
     }
   };
-  R(m), A(() => {
-    window.addEventListener("beforeunload", m), window.addEventListener("blur", y);
-  }), D(() => {
-    window.removeEventListener("beforeunload", m), window.removeEventListener("blur", y);
+  D(f), J(() => {
+    window.addEventListener("beforeunload", f), window.addEventListener("blur", v);
+  }), K(() => {
+    window.removeEventListener("beforeunload", f), window.removeEventListener("blur", v);
   });
-  const v = Object.assign(c, {
-    meta: u,
-    filterItems: V,
-    clear: j,
-    /** @experimental */
-    handleSubmitEffect: (e) => o.currentSpan.pipe(
-      o.orDie,
-      o.flatMap(
-        (r) => (
-          // TODO: fix type of handleSubmit, TSubmitMeta is somehow async validator :D
-          o.promise(() => c.handleSubmit({ currentSpan: r, ...e }))
-        )
-      )
-    )
+  const b = Object.assign(a, {
+    meta: c,
+    filterItems: E,
+    clear: F,
+    handleSubmit: () => {
+      const e = V.getSpan(w.active());
+      return a.handleSubmit({ currentSpan: e, ...c });
+    }
+    // /** @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))
+    //       )
+    //   )
   });
-  return M(K, v), Object.assign(v, {
-    Input: N,
-    Field: c.Field
+  return M(_, b), Object.assign(b, {
+    Input: q,
+    Field: a.Field
   });
 };
 export {
-  K as OmegaFormKey,
-  z as useOmegaForm
+  _ as OmegaFormKey,
+  X as useOmegaForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.18.15",
+  "version": "0.18.17",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "1.2.4",
@@ -14,9 +14,8 @@
     "vuetify": "^3.9.7"
   },
   "devDependencies": {
+    "@ben_12/eslint-plugin-dprint": "^1.7.5",
     "@dprint/typescript": "^0.95.11",
-    "@ben_12/eslint-plugin-dprint": "^1.7.4",
-    "dprint": "^0.50.1",
     "@storybook/vue3": "^9.1.5",
     "@storybook/vue3-vite": "^9.1.5",
     "@types/node": "^24.3.1",
@@ -26,6 +25,7 @@
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
+    "dprint": "^0.50.1",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-vue": "^10.4.0",
     "jsdom": "^26.1.0",
@@ -51,9 +51,10 @@
     "./dist/vue-components.css": "./dist/vue-components.css"
   },
   "dependencies": {
+    "@opentelemetry/api": "^1.9.0",
     "highlight.js": "^11.11.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "2.55.7",
+    "@effect-app/vue": "2.55.9",
     "effect-app": "3.3.4"
   },
   "scripts": {

package/src/components/OmegaForm/useOmegaForm.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import * as api from "@opentelemetry/api"
 import { type DeepKeys, type FormAsyncValidateOrFn, type FormValidateOrFn, type StandardSchemaV1, useForm } from "@tanstack/vue-form"
 import { Effect, Fiber, S } from "effect-app"
 import { runtimeFiberAsPromise } from "effect-app/utils"
@@ -35,8 +36,8 @@ export type OmegaConfig<T> = {
 interface OF<From, To> extends OmegaFormApi<From, To> {
   meta: MetaRecord<From>
   filterItems?: FilterItems
-  /** @experimental */
-  handleSubmitEffect: (meta?: Record<string, any>) => Effect.Effect<void, never, never>
+  // /** @experimental */
+  // handleSubmitEffect: (meta?: Record<string, any>) => Effect.Effect<void, never, never>
 }
 
 export const OmegaFormKey = Symbol("OmegaForm") as InjectionKey<OF<any, any>>
@@ -200,6 +201,10 @@ export const useOmegaForm = <
     }
   })
 
+  const wrapWithSpan = (span: api.Span | undefined, toWrap: () => any) => {
+    return span ? api.context.with(api.trace.setSpan(api.context.active(), span), toWrap) : toWrap()
+  }
+
   const form = useForm<
     From,
     FormValidateOrFn<From> | undefined,
@@ -218,27 +223,28 @@ export const useOmegaForm = <
       ...(tanstackFormOptions?.validators || {})
     },
     onSubmit: tanstackFormOptions?.onSubmit
-      ? ({ formApi, meta, value }) => {
-        const r = tanstackFormOptions.onSubmit!({
-          formApi: formApi as OmegaFormApi<From, To>,
-          meta,
-          value: value as unknown as To
-        })
-        if (Fiber.isFiber(r) && Fiber.isRuntimeFiber(r)) {
-          return runtimeFiberAsPromise(r)
-        }
-        if (Effect.isEffect(r)) {
-          return Effect.runPromise(
-            r.pipe(
-              meta?.currentSpan
-                ? Effect.withParentSpan(meta.currentSpan)
-                : (_) => _,
-              Effect.flatMap((_) => Fiber.join(_))
+      ? ({ formApi, meta, value }) =>
+        wrapWithSpan(meta?.span, async () => {
+          const r = tanstackFormOptions.onSubmit!({
+            formApi: formApi as OmegaFormApi<From, To>,
+            meta,
+            value: value as unknown as To
+          })
+          if (Fiber.isFiber(r) && Fiber.isRuntimeFiber(r)) {
+            return await runtimeFiberAsPromise(r)
+          }
+          if (Effect.isEffect(r)) {
+            return await Effect.runPromise(
+              r.pipe(
+                // meta?.currentSpan
+                //   ? Effect.withParentSpan(meta.currentSpan)
+                //   : (_) => _,
+                Effect.flatMap((_) => Fiber.join(_))
+              )
             )
-          )
-        }
-        return r
-      }
+          }
+          return r
+        })
       : undefined,
     defaultValues: defaultValues.value as any
   }) satisfies OmegaFormApi<To, From>
@@ -323,16 +329,19 @@ export const useOmegaForm = <
     meta,
     filterItems,
     clear,
-    /** @experimental */
-    handleSubmitEffect: (meta?: Record<string, any>) =>
-      Effect.currentSpan.pipe(
-        Effect.orDie,
-        Effect
-          .flatMap((span) =>
-            // TODO: fix type of handleSubmit, TSubmitMeta is somehow async validator :D
-            Effect.promise(() => form.handleSubmit({ currentSpan: span, ...meta }))
-          )
-      )
+    handleSubmit: () => {
+      const span = api.trace.getSpan(api.context.active())
+      return form.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))
+    //       )
+    //   )
   })
 
   provide(OmegaFormKey, formWithExtras)