@effect-app/vue 4.0.0-beta.16 → 4.0.0-beta.161

package/test/makeClient.test.ts

@@ -1,95 +1,149 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { type Effect } from "effect-app"
-import { Something, useClient, useExperimental } from "./stubs.js"
-
-it.skip("works2", () => {
-  const { legacy } = useClient()
-  const n = legacy.useQuery({
-    Request: null as any,
-    handler: null as any as (a: string) => Effect.Effect<number>,
-    id: "id"
-  })
+import { S } from "effect-app"
+import { makeQueryKey } from "../src/lib.js"
+import { Something, SomethingElse, SomethingElseReq, SomethingReq, useClient, useExperimental } from "./stubs.js"
+
+it("TaggedRequestFor .moduleName and request .id / .moduleName", () => {
+  expectTypeOf(SomethingReq.moduleName).toEqualTypeOf<"Something">()
+  expectTypeOf(SomethingElseReq.moduleName).toEqualTypeOf<"SomethingElse">()
+
+  expectTypeOf(Something.GetSomething2.moduleName).toEqualTypeOf<"Something">()
+  expectTypeOf(Something.GetSomething2.id).toEqualTypeOf<"Something.GetSomething2">()
+  expectTypeOf(Something.GetSomething2.type).toEqualTypeOf<"query">()
+  expectTypeOf(Something.DoSomething.type).toEqualTypeOf<"command">()
+
+  expectTypeOf(SomethingElse.GetSomething2.moduleName).toEqualTypeOf<"SomethingElse">()
+  expectTypeOf(SomethingElse.GetSomething2.id).toEqualTypeOf<"SomethingElse.GetSomething2">()
+})
+
+it.skip("query type tests", () => {
+  const { clientFor } = useClient()
+  const client = clientFor(Something, () => ({
+    GetSomething2WithDependencies: (queryKey) => [
+      { filters: { queryKey } },
+      {
+        filters: {
+          queryKey: makeQueryKey(
+            SomethingElse
+              .GetSomething2
+          )
+        }
+      }
+    ]
+  }))
+
+  const q = client.GetSomething2.query
 
-  const [, z] = n("a")
+  const [, z] = q({ id: "a" })
   const valz = z.value
   expectTypeOf(valz).toEqualTypeOf<number | undefined>()
 
-  const [, a] = n("a", { placeholderData: () => 123 })
+  const [, a] = q({ id: "a" }, { placeholderData: () => 123 })
   const val1 = a.value
   expectTypeOf(val1).toEqualTypeOf<number>()
 
-  const [, bbbb] = n("a", { select: (data) => data.toString() })
+  const [, bbbb] = q({ id: "a" }, { select: (data) => data.toString() })
   const val = bbbb.value
   expectTypeOf(val).toEqualTypeOf<string | undefined>()
 
-  const [, ccc] = n("a", { placeholderData: () => 123, select: (data) => data.toString() })
+  const [, ccc] = q({ id: "a" }, { placeholderData: () => 123, select: (data) => data.toString() })
   const val2 = ccc.value
   expectTypeOf(val2).toEqualTypeOf<string>()
 
-  const [, ddd] = n("a", { initialData: 123, select: (data) => data.toString() })
+  const [, ddd] = q({ id: "a" }, { initialData: 123, select: (data) => data.toString() })
   const val3 = ddd.value
   expectTypeOf(val3).toEqualTypeOf<string>()
 
-  const [, eee] = n("a", { initialData: 123, placeholderData: () => 123, select: (data) => data.toString() })
+  const [, eee] = q({ id: "a" }, { initialData: 123, placeholderData: () => 123, select: (data) => data.toString() })
   const val4 = eee.value
   expectTypeOf(val4).toEqualTypeOf<string>()
 })
 
 it.skip("works", () => {
-  const { clientFor, legacy } = useClient()
+  const { clientFor } = useClient()
   const client = clientFor(Something)
   const Command = useExperimental()
 
   // just for jsdoc / type testing.
-  const a0 = client.GetSomething2(null as any)
-  const a00 = client.GetSomething2.mutate(null as any)
+  const a0 = client.GetSomething2.request(null as any)
+  const a00 = client.DoSomething.mutate(null as any)
   const a = client.GetSomething2.suspense(null as any)
   const b = client.GetSomething2.query(null as any)
 
-  const c0 = legacy.useSafeMutation(null as any)
-  const c = legacy.useQuery(null as any)
-  const d = legacy.useSuspenseQuery(null as any)
-
+  // @ts-expect-error query requests no longer expose command helpers
   const e = client.GetSomething2.wrap(null as any)
+  // @ts-expect-error query requests no longer expose command helpers
   const f = client.GetSomething2.fn(null as any)
 
-  // @ts-expect-error dependencies required that are not provided
-  const e0 = client.GetSomething2WithDependencies.wrap().handle // not available as we require dependencies not provided by the runtime
-  // @ts-expect-error dependencies required that are not provided
-  const e000 = Command.wrap(client.GetSomething2WithDependencies)().handle // not available as we require dependencies not provided by the runtime
-  const e00 = client.GetSomething2WithDependencies.wrap((_) => _ as Effect.Effect<number, never, never>).handle(
-    null as any
-  )
-  const e0000 =
-    Command.wrap(client.GetSomething2WithDependencies)((_) => _ as Effect.Effect<number, never, never>).handle
+  // @ts-expect-error query requests no longer expose command helpers
+  const e0 = client.GetSomething2WithDependencies.wrap
+  // @ts-expect-error query request does not match Command.wrap mutation signature
+  const e000 = Command.wrap(client.GetSomething2WithDependencies)
+  const e00 = client.GetSomething2WithDependencies.request(null as any)
   // @ts-expect-error dependencies required that are not provided
   const e1 = client.GetSomething2WithDependencies.suspense(null as any)
   // @ts-expect-error dependencies required that are not provided
   const e2 = client.GetSomething2WithDependencies.query(null as any)
+  // @ts-expect-error query requests no longer expose command helpers
   const f0 = client.GetSomething2WithDependencies.fn(null as any)
 
-  const g = client.GetSomething2.mutate.wrap(null as any)
-  const h = client.GetSomething2.mutate.fn(null as any)
+  const g0 = client.DoSomething.wrap(null as any)
+  const g = client.DoSomething.mutate.wrap(null as any)
+  const g1 = client.DoSomething.mutate.project(S.String)
+  const g2 = g1(null as any)
+  const g3 = g1.wrap(null as any)
+  const g4 = client.helpers.doSomethingMutation.project(S.String)
+  const g5 = g4(null as any)
+  const g6 = g4.wrap(null as any)
+  // @ts-expect-error mutate no longer exposes fn, use client.DoSomething.fn
+  const h = client.DoSomething.mutate.fn(null as any)
+
+  // projection
+  // GetSomething2 uses FiniteFromString, that means Codec is String -> Number
+  // when we project that to S.String, it should work as the encoded shapes are identical
+  // aka, when we project, we skip decoding with the original codec, and instead use the provided one
+  // we have to make sure the Encoded shape of the provided projection schema matches the Encoded Shape of the original codec.
+  const projected = client.GetSomething2.project(S.String)
+  // @ts-expect-error encoded type mismatch: original encodes to string, S.Number encodes to number
+  const _projectedBad = client.GetSomething2.project(S.Number)
+  const p0 = projected.request(null as any)
+
+  // struct example: success schema encodes to { a: string | null }
+  // good: projection schema also expects { a: string | null } on the encoded side
+  const projectedStruct = client.GetStructNullable.project(S.Struct({ a: S.NullOr(S.String) }))
+  // bad: { a: S.String } has encoded type { a: string } — does not accept null
+  // @ts-expect-error encoded type mismatch: original encodes to { a: string | null }, projection expects { a: string }
+  const _projectedStructBad = client.GetStructNullable.project(S.Struct({ a: S.String }))
+
+  const p00 = projected.query(null as any)
+  const p = projected.suspense(null as any)
 
   expect(true).toBe(true)
   console.log({
     a,
     a0,
     a00,
-    c0,
     b,
-    c,
-    d,
     e,
     e0,
     e00,
     e000,
-    e0000,
     e1,
     e2,
     f,
     f0,
+    g0,
     g,
-    h
+    g1,
+    g2,
+    g3,
+    g4,
+    g5,
+    g6,
+    h,
+    p0,
+    p00,
+    p,
+    projectedStruct
   })
 })

package/test/stubs.ts

@@ -6,13 +6,13 @@ import { ApiClientFactory, makeRpcClient } from "effect-app/client"
 import { RpcContextMap } from "effect-app/rpc"
 import * as FetchHttpClient from "effect/unstable/http/FetchHttpClient"
 import { ref } from "vue"
-import { Commander } from "../src/experimental/commander.js"
-import { I18n } from "../src/experimental/intl.js"
-import { makeUseCommand } from "../src/experimental/makeUseCommand.js"
-import * as Toast from "../src/experimental/toast.js"
-import { WithToast } from "../src/experimental/withToast.js"
-import { LegacyMutation, makeClient } from "../src/makeClient.js"
+import { Commander } from "../src/commander.js"
+import { I18n } from "../src/intl.js"
+import { makeClient } from "../src/makeClient.js"
 import { type MakeIntlReturn } from "../src/makeIntl.js"
+import { makeUseCommand } from "../src/makeUseCommand.js"
+import * as Toast from "../src/toast.js"
+import { WithToast } from "../src/withToast.js"
 
 const fakeToastLayer = (toasts: any[] = []) =>
   Layer.effect(
@@ -26,33 +26,34 @@ const fakeToastLayer = (toasts: any[] = []) =>
           toasts.splice(idx, 1)
         }
       }
-      const fakeToast = (message: string, options?: Toast.ToastOpts) => {
-        const id = options?.id ?? Math.random().toString(36).substring(2, 15)
-        console.log(`Toast [${id}]: ${message}`, options)
+      const fakeToast =
+        (type: "error" | "warning" | "success" | "info") => (message: string, options?: Toast.ToastOpts) => {
+          const id = options?.id ?? Math.random().toString(36).substring(2, 15)
+          console.log(`Toast [${type}][${id}]: ${message}`, options)
 
-        options = { ...options, id }
-        const idx = toasts.findIndex((_) => _.id === id)
-        if (idx > -1) {
-          const toast = toasts[idx]
-          clearTimeout(toast.timeoutId)
-          Object.assign(toast, { message, options })
-          toast.timeoutId = setTimeout(() => {
-            toasts.splice(idx, 1)
-          }, options?.timeout ?? 3000)
-        } else {
-          const toast: any = { id, message, options }
-          toast.timeoutId = setTimeout(() => {
-            toasts.splice(idx, 1)
-          }, options?.timeout ?? 3000)
-          toasts.push(toast)
+          options = { ...options, id }
+          const idx = toasts.findIndex((_) => _.id === id)
+          if (idx > -1) {
+            const toast = toasts[idx]
+            clearTimeout(toast.timeoutId)
+            Object.assign(toast, { type, message, options })
+            toast.timeoutId = setTimeout(() => {
+              toasts.splice(idx, 1)
+            }, options?.timeout ?? 3000)
+          } else {
+            const toast: any = { id, type, message, options }
+            toast.timeoutId = setTimeout(() => {
+              toasts.splice(idx, 1)
+            }, options?.timeout ?? 3000)
+            toasts.push(toast)
+          }
+          return id
         }
-        return id
-      }
       return Toast.Toast.of(Toast.wrap({
-        error: fakeToast,
-        warning: fakeToast,
-        success: fakeToast,
-        info: fakeToast,
+        error: fakeToast("error"),
+        warning: fakeToast("warning"),
+        success: fakeToast("success"),
+        info: fakeToast("info"),
         dismiss
       })) as any
     })
@@ -92,20 +93,62 @@ export const useExperimental = (
 }
 
 export class RequestContextMap extends RpcContextMap.makeMap({}) {}
-export const { TaggedRequest: Req } = makeRpcClient(RequestContextMap)
-export class GetSomething2 extends Req<GetSomething2>()("GetSomething2", {
+export const { TaggedRequestFor } = makeRpcClient(RequestContextMap)
+
+export const SomethingReq = TaggedRequestFor("Something")
+const SomethingQuery = SomethingReq.Query
+const SomethingCommand = SomethingReq.Command
+
+class SomethingGetSomething2 extends SomethingQuery<SomethingGetSomething2>()("GetSomething2", {
   id: S.String
-}, { success: S.NumberFromString }) {}
+}, { success: S.FiniteFromString }) {}
+
+class SomethingGetSomething2WithDependencies
+  extends SomethingQuery<SomethingGetSomething2WithDependencies>()("GetSomething2", {
+    id: S.String
+  }, {
+    // this is intentilally fake, to simulate a codec that requires a dependency
+    success: S.FiniteFromString as S.Codec<number, string, "dep-a">,
+    error: S.String
+  })
+{}
 
-export class GetSomething2WithDependencies extends Req<GetSomething2WithDependencies>()("GetSomething2", {
+class SomethingDoSomething extends SomethingCommand<SomethingDoSomething>()("DoSomething", {
   id: S.String
-}, {
-  // this is intentilally fake, to simulate a codec that requires a dependency
-  success: S.NumberFromString as S.Codec<number, string, "dep-a">,
-  error: S.String
+}, { success: S.FiniteFromString }) {}
+
+// success schema has encoded shape { a: string | null } — used to test projection constraints
+class SomethingGetStructNullable extends SomethingQuery<SomethingGetStructNullable>()("GetStructNullable", {}, {
+  success: S.Struct({ a: S.NullOr(S.String) })
 }) {}
 
-export const Something = { GetSomething2, GetSomething2WithDependencies, meta: { moduleName: "Something" as const } }
+export const Something = {
+  GetSomething2: SomethingGetSomething2,
+  GetSomething2WithDependencies: SomethingGetSomething2WithDependencies,
+  DoSomething: SomethingDoSomething,
+  GetStructNullable: SomethingGetStructNullable
+}
+
+export const SomethingElseReq = TaggedRequestFor("SomethingElse")
+const SomethingElseQuery = SomethingElseReq.Query
+
+class SomethingElseGetSomething2 extends SomethingElseQuery<SomethingElseGetSomething2>()("GetSomething2", {
+  id: S.String
+}, { success: S.FiniteFromString }) {}
+
+class SomethingElseGetSomething2WithDependencies
+  extends SomethingElseQuery<SomethingElseGetSomething2WithDependencies>()("GetSomething2", {
+    id: S.String
+  }, {
+    success: S.FiniteFromString as S.Codec<number, string, "dep-a">,
+    error: S.String
+  })
+{}
+
+export const SomethingElse = {
+  GetSomething2: SomethingElseGetSomething2,
+  GetSomething2WithDependencies: SomethingElseGetSomething2WithDependencies
+}
 
 export const useClient = (
   options?: { messages?: Record<string, string> | Record<string, MessageFormatElement[]>; toasts: any[] }
@@ -117,8 +160,7 @@ export const useClient = (
   const api = ApiClientFactory.layer({ url: "bogus", headers: Option.none() }).pipe(
     Layer.provide(FetchHttpClient.layer)
   )
-  const lm = LegacyMutation.Default.pipe(Layer.provide([FakeIntlLayer, FakeToastLayer]))
-  const layers = Layer.mergeAll(CommanderLayer, WithToastLayer, FakeToastLayer, FakeIntlLayer, api, lm)
+  const layers = Layer.mergeAll(CommanderLayer, WithToastLayer, FakeToastLayer, FakeIntlLayer, api)
 
   const clientFor_ = ApiClientFactory.makeFor(Layer.empty)
   return makeClient(() => ManagedRuntime.make(layers), clientFor_, Layer.empty)

package/tsconfig.json

@@ -32,7 +32,6 @@
     "outDir": "build/dist",
     "resolveJsonModule": true,
     "moduleResolution": "Node16",
-    "downlevelIteration": true,
     "noErrorTruncation": true,
     "forceConsistentCasingInFileNames": true,
     "types": [

package/tsconfig.json.bak

@@ -8,5 +8,5 @@
     {
       "path": "./tsconfig.test.json"
     }
-  ],
-}
+  ]
+}

package/tsconfig.src.json

@@ -1,36 +1,36 @@
 {
-    "extends": "../../tsconfig.base.json",
-    "compilerOptions": {
-        "lib": [
-            "esnext",
-            "DOM"
-        ],
-        "tsBuildInfoFile": "./dist/.tsbuildinfo",
-        "esModuleInterop": true,
-        "rootDir": "./src",
-        // keep in here, cause madge can't detect it from extended tsconfig
-        "moduleResolution": "Node16",
-        "outDir": "./dist"
-    },
-    "include": [
-        "./src/**/*.ts"
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": [
+      "esnext",
+      "DOM"
     ],
-    "exclude": [
-        "./dist",
-        "*.test.ts",
-        "node_modules",
-        "build",
-        "lib",
-        "dist",
-        "**/*.d.ts.map",
-        ".git",
-        ".data",
-        "**/.*",
-        "**/*.tmp"
-    ],
-    "references": [
-        {
-            "path": "../effect-app"
-        }
-    ]
-}
+    "tsBuildInfoFile": "./dist/.tsbuildinfo",
+    "esModuleInterop": true,
+    "rootDir": "./src",
+    // keep in here, cause madge can't detect it from extended tsconfig
+    "moduleResolution": "Node16",
+    "outDir": "./dist"
+  },
+  "include": [
+    "./src/**/*.ts"
+  ],
+  "exclude": [
+    "./dist",
+    "*.test.ts",
+    "node_modules",
+    "build",
+    "lib",
+    "dist",
+    "**/*.d.ts.map",
+    ".git",
+    ".data",
+    "**/.*",
+    "**/*.tmp"
+  ],
+  "references": [
+    {
+      "path": "../effect-app"
+    }
+  ]
+}

package/tsconfig.test.json

@@ -28,6 +28,6 @@
   "references": [
     {
       "path": "./tsconfig.src.json"
-    },
+    }
   ]
-}
+}

package/vitest.config.ts

@@ -1,18 +1,18 @@
 /// <reference types="vitest" />
+import vue from "@vitejs/plugin-vue"
 import { defineConfig } from "vitest/config"
-import vue from '@vitejs/plugin-vue'
 import makeConfig from "../../vite.config.base"
 
 export default defineConfig({
   ...makeConfig(__dirname),
   plugins: [vue()],
   test: {
-    environment: 'jsdom',
-    include: ['src/**/*.test.{ts,tsx}', '**/test/**/*.test.{ts,tsx}', '**/__tests__/**/*.test.{ts,tsx}'],
-    exclude: ['node_modules/**', 'dist/**'],
+    environment: "jsdom",
+    include: ["src/**/*.test.{ts,tsx}", "**/test/**/*.test.{ts,tsx}", "**/__tests__/**/*.test.{ts,tsx}"],
+    exclude: ["node_modules/**", "dist/**"],
     globals: true
   },
   optimizeDeps: {
-    exclude: ['**/__tests__/**', '**/test/**', '**/*.test.*']
+    exclude: ["**/__tests__/**", "**/test/**", "**/*.test.*"]
   }
 })