@effect-app/vue 4.0.0-beta.18 → 4.0.0-beta.180

package/test/stubs.ts

@@ -1,18 +1,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { type MessageFormatElement } from "@formatjs/icu-messageformat-parser"
 import * as Intl from "@formatjs/intl"
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query"
 import { Effect, Layer, ManagedRuntime, Option, S } from "effect-app"
 import { ApiClientFactory, makeRpcClient } from "effect-app/client"
 import { RpcContextMap } from "effect-app/rpc"
+import * as Exit from "effect/Exit"
 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 { createApp, ref } from "vue"
+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 +28,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 +95,125 @@ 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
+const SomethingStream = SomethingReq.Stream
+
+class SomethingGetSomething2 extends SomethingQuery<SomethingGetSomething2>()("GetSomething2", {
   id: S.String
-}, { success: S.NumberFromString }) {}
+}, { success: S.FiniteFromString }) {}
+
+class SomethingGetSomething3 extends SomethingQuery<SomethingGetSomething3>()("GetSomething3", {
+  id: S.NullOr(S.String).withDefault
+}, { success: S.FiniteFromString }) {}
+
+class SomethingGetSomething4
+  extends SomethingQuery<SomethingGetSomething4>()("GetSomething4", {}, { 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", {
+type SomethingInvalidationResources = {
+  GetSomething2: typeof SomethingGetSomething2
+  GetSomething2WithDependencies: typeof SomethingGetSomething2WithDependencies
+  GetSomething3: typeof SomethingGetSomething3
+}
+
+class SomethingDoSomething extends SomethingCommand<
+  SomethingDoSomething,
+  { Something: SomethingInvalidationResources }
+>()("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
+}, (queryKey, { Something }, input, output) => {
+  return [
+    { filters: { queryKey } },
+    {
+      filters: {
+        queryKey: [
+          Something["GetSomething2"].id,
+          input.id,
+          Exit.isSuccess(output) ? output.value.toString() : "failed"
+        ]
+      }
+    }
+  ]
+}) {}
+
+// 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 } }
+/** Stream event: intermediate progress update. */
+export class OperationProgress extends S.TaggedClass<OperationProgress>()("OperationProgress", {
+  completed: S.NonNegativeInt,
+  total: S.NonNegativeInt
+}) {}
+
+/** Stream event: final completion result. */
+export class ExportComplete extends S.TaggedClass<ExportComplete>()("ExportComplete", {
+  fileUrl: S.NonEmptyString
+}) {}
+
+/** Stream with no `final` schema — execute resolves with `void`. */
+class SomethingStreamWithoutFinal extends SomethingStream<SomethingStreamWithoutFinal>()("StreamWithoutFinal", {
+  id: S.String
+}, {
+  success: S.Union([OperationProgress, ExportComplete])
+}) {}
+
+/** Stream with a `final` schema — execute resolves with `ExportComplete`. */
+class SomethingStreamWithFinal extends SomethingStream<SomethingStreamWithFinal>()("StreamWithFinal", {
+  id: S.String
+}, {
+  success: S.Union([OperationProgress, ExportComplete]),
+  final: ExportComplete
+}) {}
+
+export const Something = {
+  GetSomething2: SomethingGetSomething2,
+  GetSomething2WithDependencies: SomethingGetSomething2WithDependencies,
+  GetSomething3: SomethingGetSomething3,
+  GetSomething4: SomethingGetSomething4,
+  DoSomething: SomethingDoSomething,
+  GetStructNullable: SomethingGetStructNullable,
+  StreamWithoutFinal: SomethingStreamWithoutFinal,
+  StreamWithFinal: SomethingStreamWithFinal
+}
+
+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,9 +225,31 @@ 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)
+  const rawClient = makeClient(() => ManagedRuntime.make(layers), clientFor_, Layer.empty)
+
+  // Provide a Vue injection context so that composition-API hooks (e.g. useQueryClient)
+  // called during client initialisation work outside a component setup() function.
+  const vueApp = createApp({})
+  const testQueryClientConfig = { defaultOptions: { queries: { retry: false }, mutations: { retry: false } } }
+  vueApp.use(VueQueryPlugin, { queryClient: new QueryClient(testQueryClientConfig) })
+
+  const origClientFor = rawClient.clientFor
+  const clientFor: typeof origClientFor = function(m, ...args) {
+    const proxy = origClientFor(m, ...args)
+    // Warm up lazy mutation-hook initialisation inside the Vue injection context.
+    // After the first property access, useMutation() is cached and subsequent
+    // accesses outside the context succeed.
+    const firstPropertyName = Object.keys(m)[0]
+    if (firstPropertyName !== undefined) {
+      vueApp.runWithContext(() => {
+        void (proxy as Record<string, unknown>)[firstPropertyName]
+      })
+    }
+    return proxy
+  }
+
+  return { ...rawClient, clientFor }
 }

package/tsconfig.examples.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [
+    "examples"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.src.json"
+    }
+  ],
+  "compilerOptions": {
+    "lib": [
+      "esnext",
+      "DOM"
+    ],
+    "tsBuildInfoFile": ".tsbuildinfo/examples.tsbuildinfo",
+    "rootDir": "examples",
+    "moduleResolution": "Node16"
+  }
+}

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

@@ -7,6 +7,9 @@
     },
     {
       "path": "./tsconfig.test.json"
+    },
+    {
+      "path": "./tsconfig.examples.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.*"]
   }
 })