@effect-app/vue 4.0.0-beta.160 → 4.0.0-beta.162

package/src/commander.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { asResult, type MissingDependencies, reportRuntimeError } from "@effect-app/vue"
+import { asResult, deepToRaw, type MissingDependencies, reportRuntimeError } from "@effect-app/vue"
 import { reportMessage } from "@effect-app/vue/errorReporter"
 import { Cause, Context, Effect, type Exit, type Fiber, flow, Layer, Match, MutableHashMap, Option, Predicate, S } from "effect-app"
 import { SupportedErrors } from "effect-app/client"
@@ -2156,7 +2156,7 @@ export class CommanderImpl<RT, RTHooks> {
         const runFork = Effect.runForkWith(rt)
 
         const handle = Object.assign((arg: Arg) => {
-          arg = toRaw(arg) // always remove all the vue proxy bs
+          arg = toRaw(arg) // remove outside vue proxy bs
           // we capture the call site stack here
           const limit = Error.stackTraceLimit
           Error.stackTraceLimit = 2
@@ -2187,15 +2187,17 @@ export class CommanderImpl<RT, RTHooks> {
             }
           }
 
-          const command = currentState.pipe(Effect.flatMap((state) =>
-            Effect.withSpan(
+          const command = currentState.pipe(Effect.flatMap((state) => {
+            const rawArg = deepToRaw(arg)
+            const rawState = deepToRaw(state)
+            return Effect.withSpan(
               exec(arg, { ...context.value, state } as any),
               id,
               {
                 captureStackTrace,
                 attributes: {
-                  input: arg,
-                  state,
+                  input: rawArg,
+                  state: rawState,
                   action: initialContext.action,
                   label: initialContext.label,
                   id: initialContext.id,
@@ -2203,7 +2205,7 @@ export class CommanderImpl<RT, RTHooks> {
                 }
               }
             )
-          ))
+          }))
 
           return runFork(command)
         }, { action, label })

package/src/lib.ts

@@ -85,3 +85,46 @@ export const mapHandler: {
     ? (i: any) => map(self.handler as (i: any) => Effect.Effect<any, any, any>)(i)
     : map(self.handler)
 })
+
+import { isProxy, isReactive, isRef, toRaw } from "vue"
+
+export function deepToRaw<T>(sourceObj: T): T {
+  const objectIterator = (input: any): any => {
+    if (isRef(input)) {
+      return objectIterator(input.value)
+    }
+
+    const rawInput = isReactive(input) || isProxy(input)
+      ? toRaw(input)
+      : input
+
+    if (Array.isArray(rawInput)) {
+      return rawInput.map((item) => objectIterator(item))
+    }
+
+    if (rawInput instanceof Map) {
+      return new Map(
+        Array.from(rawInput.entries(), ([key, value]) => [objectIterator(key), objectIterator(value)])
+      )
+    }
+
+    if (rawInput instanceof Set) {
+      return new Set(Array.from(rawInput.values(), (value) => objectIterator(value)))
+    }
+
+    if (rawInput instanceof Date) {
+      return new Date(rawInput)
+    }
+
+    if (rawInput && typeof rawInput === "object") {
+      return Object.keys(rawInput).reduce((acc, key) => {
+        acc[key] = objectIterator(rawInput[key])
+        return acc
+      }, {} as Record<string, unknown>)
+    }
+
+    return rawInput
+  }
+
+  return objectIterator(sourceObj)
+}

package/test/dist/lib.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.test.d.ts","sourceRoot":"","sources":["../lib.test.ts"],"names":[],"mappings":""}

package/test/lib.test.ts

@@ -0,0 +1,240 @@
+import { describe, expect, it } from "vitest"
+import { computed, isProxy, isReactive, isRef, reactive, ref } from "vue"
+import { deepToRaw } from "../src/lib.js"
+
+type DeepMapKey = { id: string } | "list"
+type DeepMapValue = { nestedSet: Set<{ ok: boolean } | Date> } | Array<{ count: number }>
+type DeepSetValue = Map<string, { value: number }> | Array<{ value: number }>
+
+const expectPlainDeep = (value: unknown): void => {
+  expect(isRef(value)).toBe(false)
+  expect(isReactive(value)).toBe(false)
+  expect(isProxy(value)).toBe(false)
+
+  if (Array.isArray(value)) {
+    value.forEach(expectPlainDeep)
+    return
+  }
+
+  if (value instanceof Map) {
+    value.forEach((entryValue, entryKey) => {
+      expectPlainDeep(entryKey)
+      expectPlainDeep(entryValue)
+    })
+    return
+  }
+
+  if (value instanceof Set) {
+    value.forEach((entry) => {
+      expectPlainDeep(entry)
+    })
+    return
+  }
+
+  if (value instanceof Date) {
+    return
+  }
+
+  if (value && typeof value === "object") {
+    Object.values(value).forEach(expectPlainDeep)
+  }
+}
+
+describe("deepToRaw", () => {
+  it("supports non-object root inputs", () => {
+    expect(deepToRaw(1)).toBe(1)
+    expect(deepToRaw("x")).toBe("x")
+    expect(deepToRaw(null)).toBe(null)
+    expect(deepToRaw(undefined)).toBe(undefined)
+    expect(deepToRaw(ref(123))).toBe(123)
+
+    const rootArray = deepToRaw(reactive([reactive({ n: 1 }), ref(2)]))
+    expect(rootArray).toEqual([{ n: 1 }, 2])
+    expect(Array.isArray(rootArray)).toBe(true)
+
+    const rootMap = deepToRaw(
+      reactive(new Map<string, unknown>([["k", reactive({ n: 1 })], ["r", ref(2)]]))
+    )
+    expect(rootMap).toBeInstanceOf(Map)
+    expect(rootMap.get("k")).toEqual({ n: 1 })
+    expect(rootMap.get("r")).toBe(2)
+
+    const rootSet = deepToRaw(reactive(new Set([reactive({ n: 1 }), ref(2)])))
+    expect(rootSet).toBeInstanceOf(Set)
+    expect(Array.from(rootSet)).toEqual([{ n: 1 }, 2])
+
+    const date = new Date("2024-02-03T00:00:00.000Z")
+    const rootDate = deepToRaw(date)
+    expect(rootDate).toBeInstanceOf(Date)
+    expect(rootDate).not.toBe(date)
+    expect(rootDate.toISOString()).toBe(date.toISOString())
+  })
+
+  it("unwraps nested objects and arrays without leaving vue proxies behind", () => {
+    const source = reactive({
+      list: [
+        reactive({
+          nested: reactive({
+            count: 1,
+            items: [reactive({ label: "a" }), reactive({ label: "b" })]
+          })
+        })
+      ],
+      plain: reactive({ ok: true })
+    })
+
+    const result = deepToRaw(source)
+
+    expect(Array.isArray(result.list)).toBe(true)
+    expect(Array.isArray(result.list[0]?.nested.items)).toBe(true)
+    expect(result).toEqual({
+      list: [{ nested: { count: 1, items: [{ label: "a" }, { label: "b" }] } }],
+      plain: { ok: true }
+    })
+    expectPlainDeep(result)
+  })
+
+  it("preserves maps and sets while deeply unwrapping nested entries", () => {
+    const key = reactive({ id: "key" })
+    const nestedDate = new Date("2024-01-02T03:04:05.000Z")
+    const map = reactive(
+      new Map<DeepMapKey, DeepMapValue>([
+        [key, reactive({ nestedSet: reactive(new Set([{ ok: true }, nestedDate])) })],
+        ["list", reactive([{ count: 2 }])]
+      ])
+    )
+    const set = reactive(
+      new Set<DeepSetValue>([
+        reactive(new Map([["deep", reactive({ value: 3 })]])),
+        reactive([{ value: 4 }])
+      ])
+    )
+    const source = reactive({
+      map,
+      set
+    })
+
+    const result = deepToRaw(source)
+
+    expect(result.map).toBeInstanceOf(Map)
+    expect(result.set).toBeInstanceOf(Set)
+
+    const entries = Array.from(result.map.entries())
+    expect(entries[0]?.[0]).toEqual({ id: "key" })
+    expect(entries[0]?.[0]).not.toBe(key)
+    expect(entries[0]?.[1]).toEqual({ nestedSet: new Set([{ ok: true }, nestedDate]) })
+    expect(entries[1]?.[1]).toEqual([{ count: 2 }])
+
+    const setValues = Array.from(result.set.values())
+    expect(setValues[0]).toBeInstanceOf(Map)
+    expect(setValues[1]).toEqual([{ value: 4 }])
+    expect((setValues[0] as Map<string, { value: number }>).get("deep")).toEqual({ value: 3 })
+
+    expectPlainDeep(result)
+  })
+
+  it("keeps nested dates as dates, including dates reached through refs", () => {
+    const date = new Date("2025-06-07T08:09:10.000Z")
+    const source = reactive({
+      createdAt: date,
+      nested: reactive({
+        updatedAt: ref(date),
+        list: [ref(date)],
+        map: reactive(new Map([["at", ref(date)]])),
+        set: reactive(new Set([ref(date)]))
+      })
+    })
+
+    const result = deepToRaw(source)
+
+    expect(result.createdAt).toBeInstanceOf(Date)
+    expect(result.nested.updatedAt).toBeInstanceOf(Date)
+    expect(result.nested.list[0]).toBeInstanceOf(Date)
+    expect(result.nested.map).toBeInstanceOf(Map)
+    expect(result.nested.set).toBeInstanceOf(Set)
+
+    const updatedAt = result.nested.updatedAt
+    const firstListDate = result.nested.list[0]
+    const mappedDate = result.nested.map.get("at")
+    const firstSetDate = Array.from(result.nested.set)[0]
+
+    if (!(updatedAt instanceof Date)) {
+      throw new Error("expected updatedAt to be a Date")
+    }
+
+    if (!(firstListDate instanceof Date)) {
+      throw new Error("expected first list item to be a Date")
+    }
+
+    if (!(mappedDate instanceof Date)) {
+      throw new Error("expected mapped date to be a Date")
+    }
+
+    if (!(firstSetDate instanceof Date)) {
+      throw new Error("expected first set item to be a Date")
+    }
+
+    expect(result.createdAt.toISOString()).toBe(date.toISOString())
+    expect(updatedAt.toISOString()).toBe(date.toISOString())
+    expect(firstListDate.toISOString()).toBe(date.toISOString())
+    expect(mappedDate.toISOString()).toBe(date.toISOString())
+    expect(firstSetDate.toISOString()).toBe(date.toISOString())
+
+    expectPlainDeep(result)
+  })
+
+  it("unwraps computed values nested in refs/plain objects and deepToRawes the computed result", () => {
+    const source = {
+      innerRef: ref({
+        computedValue: computed(() =>
+          reactive({
+            list: [reactive({ n: 1 }), reactive({ n: 2 })],
+            map: reactive(new Map([["k", reactive({ nested: true })]])),
+            set: reactive(new Set([reactive({ fromSet: true })]))
+          })
+        )
+      }),
+      plainComputed: computed(() => reactive({ date: ref(new Date("2025-01-01T00:00:00.000Z")) }))
+    }
+
+    const result = deepToRaw(source)
+
+    expect(result).toEqual({
+      innerRef: {
+        computedValue: {
+          list: [{ n: 1 }, { n: 2 }],
+          map: new Map([["k", { nested: true }]]),
+          set: new Set([{ fromSet: true }])
+        }
+      },
+      plainComputed: {
+        date: new Date("2025-01-01T00:00:00.000Z")
+      }
+    })
+
+    const innerRefValue = Reflect.get(result, "innerRef")
+    if (!innerRefValue || typeof innerRefValue !== "object") {
+      throw new Error("expected innerRef to be an object")
+    }
+
+    const computedValue = Reflect.get(innerRefValue, "computedValue")
+    if (!computedValue || typeof computedValue !== "object") {
+      throw new Error("expected computedValue to be an object")
+    }
+
+    const computedMap = Reflect.get(computedValue, "map")
+    const computedSet = Reflect.get(computedValue, "set")
+
+    const plainComputedValue = Reflect.get(result, "plainComputed")
+    if (!plainComputedValue || typeof plainComputedValue !== "object") {
+      throw new Error("expected plainComputed to be an object")
+    }
+
+    const computedDate = Reflect.get(plainComputedValue, "date")
+
+    expect(computedMap).toBeInstanceOf(Map)
+    expect(computedSet).toBeInstanceOf(Set)
+    expect(computedDate).toBeInstanceOf(Date)
+    expectPlainDeep(result)
+  })
+})