Extract onReady() from duplicated code and related changes

eslint.config.ts

@@ -116,6 +116,8 @@ export default [
       "no-debugger": isProduction ? "warn" : "off",
       "no-unused-vars": "off",
       "@typescript-eslint/no-var-requires": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
       "prettier/prettier": ["warn", { printWidth: 88 }],
     },
   },

src/api/use-continuous-enabled-subscription.ts

@@ -5,6 +5,8 @@ import {
   useCtrlContinuousEnabledQuery,
   useCtrlContinuousEnabledSSubscription,
 } from "@/graphql/codegen/generated";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 interface _ContinuousEnabledSubscription {
   continuousEnabled: ComputedRef<boolean | undefined>;
@@ -13,8 +15,7 @@ interface _ContinuousEnabledSubscription {
   query: ReturnType<typeof useCtrlContinuousEnabledQuery>;
 }
 
-type ContinuousEnabledSubscription = _ContinuousEnabledSubscription &
-  PromiseLike<_ContinuousEnabledSubscription>;
+type ContinuousEnabledSubscription = OnReady<_ContinuousEnabledSubscription>;
 
 export function useSubscribeContinuousEnabled(): ContinuousEnabledSubscription {
   const query = useCtrlContinuousEnabledQuery({
@@ -34,11 +35,5 @@ export function useSubscribeContinuousEnabled(): ContinuousEnabledSubscription {
 
   const ret = { continuousEnabled, error, subscription, query };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await query;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, query);
 }

src/api/use-run-no-subscription.ts

@@ -5,6 +5,8 @@ import {
   useCtrlRunNoQuery,
   useCtrlRunNoSSubscription,
 } from "@/graphql/codegen/generated";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 interface _RunNoSubscription {
   runNo: ComputedRef<number | undefined>;
@@ -13,7 +15,7 @@ interface _RunNoSubscription {
   query: ReturnType<typeof useCtrlRunNoQuery>;
 }
 
-type RunNoSubscription = _RunNoSubscription & PromiseLike<_RunNoSubscription>;
+type RunNoSubscription = OnReady<_RunNoSubscription>;
 
 export function useSubscribeRunNo(): RunNoSubscription {
   const query = useCtrlRunNoQuery({
@@ -32,11 +34,5 @@ export function useSubscribeRunNo(): RunNoSubscription {
 
   const ret = { runNo, error, subscription, query };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await query;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, query);
 }

src/api/use-schedule-auto-mode-mode-subscription.ts

@@ -5,6 +5,8 @@ import {
   useScheduleAutoModeModeQuery,
   useScheduleAutoModeModeSSubscription,
 } from "@/graphql/codegen/generated";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 // type AutoMode = "off" | "scheduler" | "queue";
 
@@ -15,8 +17,7 @@ interface _ScheduleAutoModeModeSubscription {
   query: ReturnType<typeof useScheduleAutoModeModeQuery>;
 }
 
-type ScheduleAutoModeModeSubscription = _ScheduleAutoModeModeSubscription &
-  PromiseLike<_ScheduleAutoModeModeSubscription>;
+type ScheduleAutoModeModeSubscription = OnReady<_ScheduleAutoModeModeSubscription>;
 
 export function useSubscribeScheduleAutoModeMode(): ScheduleAutoModeModeSubscription {
   const query = useScheduleAutoModeModeQuery({
@@ -36,11 +37,5 @@ export function useSubscribeScheduleAutoModeMode(): ScheduleAutoModeModeSubscrip
 
   const ret = { autoModeMode, error, subscription, query };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await query;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, query);
 }

src/api/use-schedule-auto-mode-state-subscription.ts

@@ -5,6 +5,8 @@ import {
   useQScheduleAutoModeStateQuery,
   useScheduleAutoModeStateSSubscription,
 } from "@/graphql/codegen/generated";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 interface _ScheduleAutoModeStateSubscription {
   autoModeState: ComputedRef<string | undefined>;
@@ -13,8 +15,7 @@ interface _ScheduleAutoModeStateSubscription {
   query: ReturnType<typeof useQScheduleAutoModeStateQuery>;
 }
 
-type ScheduleAutoModeStateSubscription = _ScheduleAutoModeStateSubscription &
-  PromiseLike<_ScheduleAutoModeStateSubscription>;
+type ScheduleAutoModeStateSubscription = OnReady<_ScheduleAutoModeStateSubscription>;
 
 export function useSubscribeScheduleAutoModeState(): ScheduleAutoModeStateSubscription {
   const query = useQScheduleAutoModeStateQuery({
@@ -34,11 +35,5 @@ export function useSubscribeScheduleAutoModeState(): ScheduleAutoModeStateSubscr
 
   const ret = { autoModeState, error, subscription, query };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await query;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, query);
 }

src/api/use-schedule-queue-items-subscription.ts

@@ -6,6 +6,8 @@ import {
   useScheduleQueueItemsQuery,
   useScheduleQueueItemsSSubscription,
 } from "@/graphql/codegen/generated";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 interface _ScheduleQueueItemsSubscription {
   items: ComputedRef<ScheduleQueueItem[] | undefined>;
@@ -15,8 +17,7 @@ interface _ScheduleQueueItemsSubscription {
   query: ReturnType<typeof useScheduleQueueItemsQuery>;
 }
 
-type ScheduleQueueItemsSubscription = _ScheduleQueueItemsSubscription &
-  PromiseLike<_ScheduleQueueItemsSubscription>;
+type ScheduleQueueItemsSubscription = OnReady<_ScheduleQueueItemsSubscription>;
 
 export function useSubscribeScheduleQueueItems(): ScheduleQueueItemsSubscription {
   const query = useScheduleQueueItemsQuery({
@@ -37,11 +38,5 @@ export function useSubscribeScheduleQueueItems(): ScheduleQueueItemsSubscription
 
   const ret = { items, loading, error, subscription, query };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await query;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, query);
 }

src/api/use-state-subscription.ts

@@ -5,6 +5,8 @@ import {
   useCtrlStateQuery,
   useCtrlStateSSubscription,
 } from "@/graphql/codegen/generated";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 interface _StateSubscription {
   state: ComputedRef<string | undefined>;
@@ -13,7 +15,7 @@ interface _StateSubscription {
   query: ReturnType<typeof useCtrlStateQuery>;
 }
 
-type StateSubscription = _StateSubscription & PromiseLike<_StateSubscription>;
+type StateSubscription = OnReady<_StateSubscription>;
 
 export function useSubscribeState(): StateSubscription {
   const query = useCtrlStateQuery({
@@ -32,11 +34,5 @@ export function useSubscribeState(): StateSubscription {
 
   const ret = { state, error, subscription, query };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await query;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, query);
 }

src/api/use-trace_ids-subscription.ts

@@ -5,6 +5,8 @@ import {
   useCtrlTraceIdsQuery,
   useCtrlTraceIdsSSubscription,
 } from "@/graphql/codegen/generated";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 interface _TraceIdsSubscription {
   traceIds: ComputedRef<number[] | undefined>;
@@ -13,7 +15,7 @@ interface _TraceIdsSubscription {
   query: ReturnType<typeof useCtrlTraceIdsQuery>;
 }
 
-type TraceIdsSubscription = _TraceIdsSubscription & PromiseLike<_TraceIdsSubscription>;
+type TraceIdsSubscription = OnReady<_TraceIdsSubscription>;
 
 export function useSubscribeTraceIds(): TraceIdsSubscription {
   const query = useCtrlTraceIdsQuery({
@@ -32,11 +34,5 @@ export function useSubscribeTraceIds(): TraceIdsSubscription {
 
   const ret = { traceIds, error, subscription, query };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await query;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, query);
 }

src/components/schedule/auto-mode/auto-mode-button/__tests__/use-pulling.spec.ts

@@ -0,0 +1,58 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import fc from "fast-check";
+
+import { useSubscribeScheduleAutoModeState } from "@/api";
+import { onReady } from "@/utils/on-ready";
+
+import { usePulling } from "../use-pulling";
+
+vi.mock("@/api", () => ({
+  useSubscribeScheduleAutoModeState: vi.fn(),
+}));
+
+const AUTO_MODE_STATES = [
+  "created",
+  "off",
+  "auto_waiting",
+  "auto_pulling",
+  "auto_running",
+];
+
+const fcAutoModeState = () => fc.constantFrom(...AUTO_MODE_STATES);
+
+describe("scratch", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("Property test", async () => {
+    await fc.assert(
+      fc.asyncProperty(fcAutoModeState(), async (auto_mode_state) => {
+        // Initially `undefined`
+        const autoModeState = ref(undefined as string | undefined);
+
+        // A value set when ready
+        const ready = (async () => {
+          await Promise.resolve();
+          autoModeState.value = auto_mode_state;
+        })();
+
+        type Sub = ReturnType<typeof useSubscribeScheduleAutoModeState>;
+
+        // Thenable
+        const sub = onReady({ autoModeState }, ready) as unknown as Sub;
+
+        vi.mocked(useSubscribeScheduleAutoModeState).mockReturnValue(sub);
+
+        const { pulling } = await usePulling();
+        const expected = auto_mode_state === "auto_pulling";
+        expect(pulling.value).toBe(expected);
+      }),
+    );
+  });
+});

src/components/schedule/auto-mode/auto-mode-button/modes/queue/Button.vue

@@ -17,7 +17,7 @@ import { useDisplay } from "vuetify";
 import { VBottomSheet } from "vuetify/components/VBottomSheet";
 import { VMenu } from "vuetify/components/VMenu";
 
-import { usePulling } from "../../usePulling";
+import { usePulling } from "../../use-pulling";
 import Dialog from "./Dialog.vue";
 
 const { mobile } = useDisplay();

src/components/schedule/auto-mode/auto-mode-button/modes/scheduler/Button.vue

@@ -17,7 +17,7 @@ import { useDisplay } from "vuetify";
 import { VBottomSheet } from "vuetify/components/VBottomSheet";
 import { VMenu } from "vuetify/components/VMenu";
 
-import { usePulling } from "../../usePulling";
+import { usePulling } from "../../use-pulling";
 import Dialog from "./Dialog.vue";
 
 const { mobile } = useDisplay();

src/components/schedule/auto-mode/auto-mode-button/usePulling.ts → src/components/schedule/auto-mode/auto-mode-button/use-pulling.ts

@@ -2,12 +2,14 @@ import { computed } from "vue";
 import type { Ref } from "vue";
 
 import { useSubscribeScheduleAutoModeState } from "@/api";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 interface _UsePullingReturn {
   pulling: Ref<boolean>;
 }
 
-type UsePullingReturn = _UsePullingReturn & PromiseLike<_UsePullingReturn>;
+type UsePullingReturn = OnReady<_UsePullingReturn>;
 
 export function usePulling(): UsePullingReturn {
   const subscription = useSubscribeScheduleAutoModeState();
@@ -20,11 +22,5 @@ export function usePulling(): UsePullingReturn {
 
   const ret = { pulling };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await subscription;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, subscription);
 }

src/components/schedule/preview/preview.ts

@@ -4,6 +4,8 @@ import { refThrottled, useSessionStorage } from "@vueuse/core";
 
 import { useScheduleSchedulerPreviewQuery } from "@/graphql/codegen/generated";
 import { useRefresh } from "@/graphql/urql";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 interface _UsePreviewResponse {
   script: Ref<string | undefined>;
@@ -12,7 +14,7 @@ interface _UsePreviewResponse {
   load: () => Promise<void>;
 }
 
-type UsePreviewResponse = _UsePreviewResponse & PromiseLike<_UsePreviewResponse>;
+type UsePreviewResponse = OnReady<_UsePreviewResponse>;
 
 export function usePreview(): UsePreviewResponse {
   const query = useScheduleSchedulerPreviewQuery({
@@ -43,11 +45,5 @@ export function usePreview(): UsePreviewResponse {
 
   const ret = { script, loading, error, load };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await query;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, query);
 }

src/components/schedule/queue/items.ts

@@ -21,6 +21,8 @@ import type {
   ScheduleQueueMoveOneBackwardMutation,
 } from "@/graphql/codegen/generated";
 import { formatDateTime } from "@/utils/format-date-time";
+import { onReady } from "@/utils/on-ready";
+import type { OnReady } from "@/utils/on-ready";
 
 export interface Item {
   order: number;
@@ -61,7 +63,7 @@ interface _UseItemsResponse {
   moveItemToBottom: (item: Item) => Promise<MoveItemToBottomResult>;
 }
 
-type UseItemsResponse = _UseItemsResponse & PromiseLike<_UseItemsResponse>;
+type UseItemsResponse = OnReady<_UseItemsResponse>;
 
 export function useItems(): UseItemsResponse {
   const subscription = useSubscribeScheduleQueueItems();
@@ -122,13 +124,7 @@ export function useItems(): UseItemsResponse {
     moveItemToBottom,
   };
 
-  return {
-    ...ret,
-    async then(onFulfilled, onRejected) {
-      await subscription;
-      return Promise.resolve(ret).then(onFulfilled, onRejected);
-    },
-  };
+  return onReady(ret, subscription);
 }
 
 function useAddItem() {