@effect-app/vue 4.0.0 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -15,17 +15,17 @@
     "@vueuse/core": "^14.3.0",
     "change-case": "^5.4.4",
     "query-string": "^9.4.0",
-    "effect-app": "4.0.0"
+    "effect-app": "4.0.2"
   },
   "peerDependencies": {
-    "@effect/atom-vue": "^4.0.1",
-    "@effect/platform-browser": "^4.0.1",
+    "@effect/atom-vue": "^4.0.2",
+    "@effect/platform-browser": "^4.0.2",
     "@sentry/browser": "^10.55.0",
-    "effect": "^4.0.1",
+    "effect": "^4.0.2",
     "vue": "^3.5.35"
   },
   "devDependencies": {
-    "@effect/vitest": "4.0.1",
+    "@effect/vitest": "4.0.2",
     "@formatjs/icu-messageformat-parser": "^3.5.10",
     "@types/node": "25.9.1",
     "@vitejs/plugin-vue": "^6.0.7",

package/src/commander.ts

@@ -10,6 +10,7 @@ import * as Layer from "effect-app/Layer"
 import * as Option from "effect-app/Option"
 import * as S from "effect-app/Schema"
 import { isGeneratorFunction, wrapEffect } from "effect-app/utils"
+import { makeWaitingGate, suspendWaiting, WaitingGate } from "effect-app/waitingGate"
 import * as Cause from "effect/Cause"
 import type * as Exit from "effect/Exit"
 import type * as Fiber from "effect/Fiber"
@@ -2114,6 +2115,18 @@ export const CommanderStatic = {
   updateProgress: (progress: Progress | undefined): Effect.Effect<void> =>
     CommandProgress.use((s) => s.update(progress)),
 
+  /**
+   * Park on an effect without the spinner or the waiting toast.
+   * The button stays disabled. Chrome returns when the effect finishes.
+   * Stream commands pause the spinner only. `withDefaultToastStream` does not.
+   *
+   * ```ts
+   * const decision = yield* Command.suspendWaiting(ask(pickupDate))
+   * yield* close(orderId)
+   * ```
+   */
+  suspendWaiting,
+
   /** Version of @see confirmOrInterrupt that automatically includes the action name in the default messages */
   confirmOrInterrupt: Effect.fnUntraced(function*(
     message?: string
@@ -2509,6 +2522,30 @@ const unregisterWait = (id: string) => {
   }
 }
 
+/**
+ * `waiting` is the spinner. It drops while `suspendWaiting` is parked.
+ * `blocked` stays on for the whole run, including that pause.
+ */
+const commandChrome = (
+  ownRunning: () => boolean,
+  waitId: string | undefined,
+  blockId: string | undefined
+) => {
+  const quiet = ref(0)
+  const gate = makeWaitingGate((depth) => {
+    quiet.value = depth
+  })
+  const running = computed(() => ownRunning() || (waitId !== undefined && (waitState.value[waitId] ?? 0) > 0))
+  const waiting = computed(() => running.value && quiet.value === 0)
+  const blocked = computed(() => running.value || (blockId !== undefined && (waitState.value[blockId] ?? 0) > 0))
+  const provide = <A, E, R>(self: Effect.Effect<A, E, R>) =>
+    Effect.gen(function*() {
+      if (gate.depth !== 0) yield* gate.add(-gate.depth)
+      return yield* self.pipe(Effect.provideService(WaitingGate, gate))
+    })
+  return { waiting, blocked, provide }
+}
+
 const getStateValues = <
   const Id extends string,
   const I18nKey extends string,
@@ -2658,6 +2695,7 @@ export class CommanderImpl<RT, RTHooks> {
         const blockId = options?.blockKey ? options.blockKey(id) : undefined
 
         const [result, exec_] = asResult(theHandler)
+        const chrome = commandChrome(() => result.value.waiting, waitId, blockId)
 
         const exec = Effect
           .fnUntraced(
@@ -2666,7 +2704,7 @@ export class CommanderImpl<RT, RTHooks> {
               if (blockId !== undefined && blockId !== waitId) {
                 registerWait(blockId)
               }
-              return yield* exec_(...args)
+              return yield* chrome.provide(exec_(...args))
             },
             Effect.onExit(() =>
               Effect.sync(() => {
@@ -2678,13 +2716,7 @@ export class CommanderImpl<RT, RTHooks> {
             )
           )
 
-        const waiting = waitId !== undefined
-          ? computed(() => result.value.waiting || (waitState.value[waitId] ?? 0) > 0)
-          : computed(() => result.value.waiting)
-
-        const blocked = blockId !== undefined
-          ? computed(() => waiting.value || (waitState.value[blockId] ?? 0) > 0)
-          : computed(() => waiting.value)
+        const { blocked, waiting } = chrome
 
         const computeAllowed = options?.allowed
         const allowed = computeAllowed ? computed(() => computeAllowed(id, state)) : true
@@ -2992,6 +3024,7 @@ export class CommanderImpl<RT, RTHooks> {
         const blockId = options?.blockKey ? options.blockKey(id) : undefined
 
         const [result, exec_] = asStreamResult(theStreamHandler)
+        const chrome = commandChrome(() => result.value.waiting, waitId, blockId)
 
         const exec = Effect
           .fnUntraced(
@@ -3000,7 +3033,7 @@ export class CommanderImpl<RT, RTHooks> {
               if (blockId !== undefined && blockId !== waitId) {
                 registerWait(blockId)
               }
-              return yield* exec_(...args)
+              return yield* chrome.provide(exec_(...args))
             },
             Effect.onExit(() =>
               Effect.sync(() => {
@@ -3012,13 +3045,7 @@ export class CommanderImpl<RT, RTHooks> {
             )
           )
 
-        const waiting = waitId !== undefined
-          ? computed(() => result.value.waiting || (waitState.value[waitId] ?? 0) > 0)
-          : computed(() => result.value.waiting)
-
-        const blocked = blockId !== undefined
-          ? computed(() => waiting.value || (waitState.value[blockId] ?? 0) > 0)
-          : computed(() => waiting.value)
+        const { blocked, waiting } = chrome
 
         const computeAllowed = options?.allowed
         const allowed = computeAllowed ? computed(() => computeAllowed(id, state)) : true

package/src/errorReporter.ts

@@ -71,7 +71,9 @@ export function logError<E>(name: string) {
   return Effect.fnUntraced(
     function*(cause: Cause.Cause<E>, extras?: Record<string, unknown>) {
       if (Cause.hasInterruptsOnly(cause)) {
-        yield* Effect.logDebug("Interrupted").pipe(Effect.annotateLogs(dropUndefined({ extras })))
+        yield* Effect.logDebug("Interrupted").pipe(
+          Effect.annotateLogs(dropUndefined({ extras }))
+        )
         return
       }
       yield* Effect

package/src/makeIntl.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 import { createIntl, createIntlCache, type Formatters, type IntlFormatters, type MessageDescriptor, type ResolvedIntlConfig } from "@formatjs/intl"
-import { typedKeysOf } from "effect-app/utils"
+import * as Struct from "effect/Struct"
 import { type FormatXMLElementFn, type Options as IntlMessageFormatOptions, type PrimitiveType } from "intl-messageformat"
 import { type Ref, watch } from "vue"
 import { translate } from "./form.ts"
@@ -20,7 +20,7 @@ export const makeIntl = <Locale extends string>(
 ) => {
   const intlCache = createIntlCache()
 
-  const intls = typedKeysOf(messages).reduce(
+  const intls = Struct.keys(messages).reduce(
     (acc, cur) => {
       acc[cur] = createIntl<Locale>(
         {

package/src/mutate.ts

@@ -3,7 +3,6 @@ import { DataDependencies, type InvalidationKey, InvalidationKeysFromServer, mak
 import type { ClientForOptions, RequestHandlerWithInput } from "effect-app/client/clientFor"
 import type { InvalidateQueryInstruction } from "effect-app/client/makeClient"
 import * as Effect from "effect-app/Effect"
-import { tuple } from "effect-app/Function"
 import * as Option from "effect-app/Option"
 import { isReadonlyArrayNonEmpty } from "effect/Array"
 import type * as Cause from "effect/Cause"
@@ -12,6 +11,7 @@ import * as AsyncResult from "effect/reactivity/AsyncResult"
 import type * as Reactivity from "effect/reactivity/Reactivity"
 import * as Ref from "effect/Ref"
 import * as Stream from "effect/Stream"
+import * as Tuple from "effect/Tuple"
 import { computed, type ComputedRef, shallowRef } from "vue"
 import { invalidateAndAwait, invalidateSoft } from "./atomQuery.ts"
 import { getDerivedInvalidationKeys, partitionInvalidationKeys } from "./dependencyMetadata.ts"
@@ -102,7 +102,7 @@ export function make<A, E, R>(self: Effect.Effect<A, E, R>) {
 
   const latestSuccess = computed(() => Option.getOrUndefined(AsyncResult.value(result.value)))
 
-  return tuple(result, latestSuccess, execute)
+  return Tuple.make(result, latestSuccess, execute)
 }
 
 /**
@@ -221,7 +221,7 @@ export const asResult = <Args extends readonly any[], A, E, R>(
         ))
       )
 
-  return tuple(computed(() => state.value), act)
+  return Tuple.make(computed(() => state.value), act)
 }
 
 /**
@@ -268,7 +268,7 @@ export const asStreamResult = <Args extends readonly any[], A, E, R>(
 
   const act = (...args: Args) => runStream(handler(...args))
 
-  return tuple(computed(() => state.value), act)
+  return Tuple.make(computed(() => state.value), act)
 }
 
 const buildInvalidateCache = <RInvalidator>(

package/src/routeParams.ts

@@ -1,7 +1,7 @@
 import * as Option from "effect-app/Option"
 import * as S from "effect-app/Schema"
-import { typedKeysOf } from "effect-app/utils"
 import { flow } from "effect/Function"
+import * as Struct from "effect/Struct"
 import type { ParsedQuery } from "query-string"
 
 export function getQueryParam(search: ParsedQuery, param: string) {
@@ -18,10 +18,10 @@ export function parseRouteParamsOption<NER extends Record<string, S.Codec<any, a
 ): {
   [K in keyof NER]: Option.Option<NER[K]["Type"]>
 } {
-  return typedKeysOf(t).reduce(
+  return Struct.keys(t).reduce(
     (prev, cur) => {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      prev[cur] = getQueryParamO(query, cur as string).pipe(
+      prev[cur] = getQueryParamO(query, cur).pipe(
         Option.flatMap(S.decodeUnknownOption(t[cur]!))
       )
 
@@ -39,7 +39,7 @@ export function parseRouteParams<NER extends Record<string, S.Codec<any, any>>>(
 ): {
   [K in keyof NER]: NER[K]["Type"]
 } {
-  return typedKeysOf(t).reduce(
+  return Struct.keys(t).reduce(
     (prev, cur) => {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       prev[cur] = S.decodeUnknownSync(t[cur]!)(

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

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

package/test/suspendWaiting.test.ts

@@ -0,0 +1,142 @@
+import { it } from "@effect/vitest"
+import * as Effect from "effect-app/Effect"
+import * as Deferred from "effect/Deferred"
+import * as Exit from "effect/Exit"
+import * as Fiber from "effect/Fiber"
+import { TestClock } from "effect/testing"
+import { DefaultIntl } from "../src/commander.js"
+import { useExperimentalE } from "./stubs.js"
+
+const unwrap = <A, E>(r: Fiber.Fiber<Exit.Exit<A, E>, never>) => Fiber.join(r).pipe(Effect.flatten)
+
+const infoToasts = (toasts: ReadonlyArray<{ type: string }>) => toasts.filter((toast) => toast.type === "info")
+
+describe("Command.suspendWaiting", () => {
+  it.effect("hides the spinner and the waiting toast until work resumes", () =>
+    Effect.gen(function*() {
+      const toasts: Array<{ type: string; message: string }> = []
+      const Command = yield* useExperimentalE({ toasts, messages: DefaultIntl.en })
+      const toastVisible = yield* Deferred.make<void>()
+      const continueToDialog = yield* Deferred.make<void>()
+      const suspended = yield* Deferred.make<void>()
+      const release = yield* Deferred.make<void>()
+      const resumed = yield* Deferred.make<void>()
+
+      const command = Command.fn("Test Action")(
+        function*() {
+          yield* Effect.sleep("1100 millis")
+          yield* Deferred.succeed(toastVisible, undefined)
+          yield* Deferred.await(continueToDialog)
+          yield* Command.suspendWaiting(Effect.gen(function*() {
+            yield* Deferred.succeed(suspended, undefined)
+            return yield* Deferred.await(release)
+          }))
+          yield* Deferred.succeed(resumed, undefined)
+          expect(infoToasts(toasts)).toHaveLength(0)
+          yield* Effect.sleep("1100 millis")
+          expect(infoToasts(toasts)).toHaveLength(1)
+          return "done"
+        },
+        Command.withDefaultToast()
+      )
+
+      const fiber = command.handle(undefined)
+      yield* TestClock.adjust("1100 millis")
+      yield* Deferred.await(toastVisible)
+      expect(command.waiting).toBe(true)
+      expect(command.blocked).toBe(true)
+      expect(infoToasts(toasts)).toHaveLength(1)
+
+      yield* Deferred.succeed(continueToDialog, undefined)
+      yield* Deferred.await(suspended)
+      expect(command.waiting).toBe(false)
+      expect(command.blocked).toBe(true)
+      expect(infoToasts(toasts)).toHaveLength(0)
+
+      yield* TestClock.adjust("2 seconds")
+      expect(infoToasts(toasts)).toHaveLength(0)
+      expect(command.waiting).toBe(false)
+
+      yield* Deferred.succeed(release, undefined)
+      yield* Deferred.await(resumed)
+      expect(command.waiting).toBe(true)
+      expect(command.blocked).toBe(true)
+
+      yield* TestClock.adjust("1100 millis")
+      expect(yield* unwrap(fiber)).toBe("done")
+      expect(toasts.map((toast) => toast.type)).toEqual(["success"])
+    }))
+
+  it.effect("stays quiet for a suspension that starts the command", () =>
+    Effect.gen(function*() {
+      const toasts: Array<{ type: string; message: string }> = []
+      const Command = yield* useExperimentalE({ toasts, messages: DefaultIntl.en })
+      const suspended = yield* Deferred.make<void>()
+      const release = yield* Deferred.make<string>()
+      const resumed = yield* Deferred.make<void>()
+
+      const command = Command.fn("Test Action")(
+        function*() {
+          const answer = yield* Command.suspendWaiting(Effect.gen(function*() {
+            yield* Deferred.succeed(suspended, undefined)
+            return yield* Deferred.await(release)
+          }))
+          yield* Deferred.succeed(resumed, undefined)
+          expect(infoToasts(toasts)).toHaveLength(0)
+          yield* Effect.sleep("1100 millis")
+          expect(infoToasts(toasts)).toHaveLength(1)
+          return answer
+        },
+        Command.withDefaultToast()
+      )
+
+      const fiber = command.handle(undefined)
+      yield* Deferred.await(suspended)
+      expect(command.waiting).toBe(false)
+      expect(command.blocked).toBe(true)
+
+      yield* TestClock.adjust("2 seconds")
+      expect(infoToasts(toasts)).toHaveLength(0)
+
+      yield* Deferred.succeed(release, "yes")
+      yield* Deferred.await(resumed)
+      expect(command.waiting).toBe(true)
+
+      yield* TestClock.adjust("1100 millis")
+      expect(yield* unwrap(fiber)).toBe("yes")
+      expect(toasts.map((toast) => toast.type)).toEqual(["success"])
+    }))
+
+  it.effect("drops the block when the suspension is interrupted", () =>
+    Effect.gen(function*() {
+      const toasts: Array<{ type: string }> = []
+      const Command = yield* useExperimentalE({ toasts, messages: DefaultIntl.en })
+      const suspended = yield* Deferred.make<void>()
+
+      const release = yield* Deferred.make<void>()
+
+      const command = Command.fn("Test Action")(
+        function*() {
+          return yield* Command.suspendWaiting(Effect.gen(function*() {
+            yield* Deferred.succeed(suspended, undefined)
+            yield* Deferred.await(release)
+            return yield* Effect.interrupt
+          }))
+        },
+        Command.withDefaultToast()
+      )
+
+      const fiber = command.handle(undefined)
+      yield* Deferred.await(suspended)
+      expect(command.waiting).toBe(false)
+      expect(command.blocked).toBe(true)
+      expect(toasts).toHaveLength(0)
+
+      yield* Deferred.succeed(release, undefined)
+      const exit = yield* Fiber.join(fiber)
+      expect(Exit.hasInterrupts(exit)).toBe(true)
+      expect(command.waiting).toBe(false)
+      expect(command.blocked).toBe(false)
+      expect(toasts).toHaveLength(0)
+    }))
+})