create-bubbles 0.1.12 → 0.1.13

package/template-vp-react-shadcn/src/components/ui/sonner.tsx

@@ -0,0 +1,43 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from "lucide-react";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/template-vp-react-shadcn/src/components/ui/spinner.tsx

@@ -0,0 +1,17 @@
+import { Loader2Icon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/template-vp-react-shadcn/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/template-vp-react-shadcn/src/main.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import "./styles/index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(<App />);

package/template-vp-react-shadcn/src/pages/home/index.tsx

@@ -0,0 +1,96 @@
+import { PlayCircle } from "lucide-react";
+import { useState } from "react";
+
+import { VideoJS, VIDEO_JS_SOURCE_TYPES, type VideoJSSourceType } from "@/components/Player";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const HOME_TEXT = {
+  player: "VideoJS 播放器",
+  title: "HLS / MP4 播放示例",
+  play: "播放",
+} as const;
+
+type DemoSource = {
+  id: Exclude<VideoJSSourceType, "auto" | "native">;
+  name: string;
+  src: string;
+  type: string;
+  poster: string;
+};
+
+const DEMO_SOURCES: DemoSource[] = [
+  {
+    id: VIDEO_JS_SOURCE_TYPES.HLS,
+    name: "HLS",
+    src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
+    type: "application/vnd.apple.mpegurl",
+    poster: "https://image.mux.com/x36xhzz/thumbnail.jpg?time=0",
+  },
+  {
+    id: VIDEO_JS_SOURCE_TYPES.MP4,
+    name: "MP4",
+    src: "https://media.w3.org/2010/05/sintel/trailer.mp4",
+    type: "video/mp4",
+    poster: "https://media.w3.org/2010/05/sintel/poster.png",
+  },
+];
+
+const Home = () => {
+  const [activeSourceType, setActiveSourceType] = useState<DemoSource["id"]>(
+    VIDEO_JS_SOURCE_TYPES.HLS,
+  );
+  const activeSource =
+    DEMO_SOURCES.find((source) => source.id === activeSourceType) ?? DEMO_SOURCES[0];
+
+  return (
+    <main className="min-h-screen bg-zinc-950 px-4 py-6 text-white sm:px-6 lg:px-8">
+      <section className="mx-auto flex w-full max-w-6xl flex-col gap-5">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div className="space-y-2">
+            <p className="text-sm font-medium text-emerald-300">{HOME_TEXT.player}</p>
+            <h1 className="max-w-2xl text-3xl font-semibold tracking-normal text-white sm:text-4xl">
+              {HOME_TEXT.title}
+            </h1>
+          </div>
+
+          <div className="flex rounded-lg border border-white/10 bg-white/5 p-1">
+            {DEMO_SOURCES.map((source) => {
+              const isActive = source.id === activeSource.id;
+
+              return (
+                <Button
+                  key={source.id}
+                  type="button"
+                  variant="ghost"
+                  className={cn(
+                    "h-9 gap-2 rounded-md px-4 text-white hover:bg-white/10 hover:text-white",
+                    isActive && "bg-white text-zinc-950 hover:bg-white hover:text-zinc-950",
+                  )}
+                  onClick={() => setActiveSourceType(source.id)}
+                >
+                  <PlayCircle className="size-4" />
+                  {source.name}
+                </Button>
+              );
+            })}
+          </div>
+        </div>
+
+        <VideoJS
+          key={activeSource.src}
+          src={activeSource.src}
+          type={activeSource.type}
+          sourceType={activeSource.id}
+          poster={activeSource.poster}
+          preload="metadata"
+          className="border border-white/10 shadow-2xl shadow-black/40"
+        />
+      </section>
+
+      <Button>{HOME_TEXT.play}</Button>
+    </main>
+  );
+};
+
+export default Home;

package/template-vp-react-shadcn/src/router/index.tsx

@@ -0,0 +1,25 @@
+import { createBrowserRouter, Navigate, type RouteObject } from "react-router";
+
+export const lazyLoad = (path: string, fileName = "index") => {
+  const Module = lazy(() => import(`@/pages/${path}/${fileName}.tsx`));
+  return <Module />;
+};
+
+const routes: RouteObject[] = [
+  {
+    path: "/",
+    id: "index",
+    element: <Navigate to={"/home"} />,
+  },
+  {
+    path: "/home",
+    id: "home",
+    element: lazyLoad("home"),
+  },
+];
+
+export const router = createBrowserRouter(routes, {
+  basename: "/",
+});
+
+export const navigator = router.navigate;

package/template-vp-react-shadcn/src/styles/index.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/geist";
+@import "./shadcn.css";
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}

package/template-vp-react-shadcn/src/styles/shadcn.css

@@ -0,0 +1,127 @@
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: "Geist Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: rgb(47 123 255);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: rgb(47 123 255);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: rgb(47 123 255);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: rgb(47 123 255);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: rgb(47 123 255);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: rgb(47 123 255);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: rgb(47 123 255);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: rgb(47 123 255);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/template-vp-react-shadcn/src/types/auto-imports.d.ts

@@ -0,0 +1,58 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const Activity: typeof import('react').Activity
+  const Fragment: typeof import('react').Fragment
+  const Suspense: typeof import('react').Suspense
+  const cache: typeof import('react').cache
+  const cacheSignal: typeof import('react').cacheSignal
+  const createContext: typeof import('react').createContext
+  const createPortal: typeof import('react-dom').createPortal
+  const createRef: typeof import('react').createRef
+  const flushSync: typeof import('react-dom').flushSync
+  const forwardRef: typeof import('react').forwardRef
+  const lazy: typeof import('react').lazy
+  const memo: typeof import('react').memo
+  const preconnect: typeof import('react-dom').preconnect
+  const prefetchDNS: typeof import('react-dom').prefetchDNS
+  const preinit: typeof import('react-dom').preinit
+  const preinitModule: typeof import('react-dom').preinitModule
+  const preload: typeof import('react-dom').preload
+  const preloadModule: typeof import('react-dom').preloadModule
+  const startTransition: typeof import('react').startTransition
+  const use: typeof import('react').use
+  const useActionState: typeof import('react').useActionState
+  const useCallback: typeof import('react').useCallback
+  const useContext: typeof import('react').useContext
+  const useDebugValue: typeof import('react').useDebugValue
+  const useDeferredValue: typeof import('react').useDeferredValue
+  const useEffect: typeof import('react').useEffect
+  const useEffectEvent: typeof import('react').useEffectEvent
+  const useFormStatus: typeof import('react-dom').useFormStatus
+  const useHref: typeof import('react-router').useHref
+  const useId: typeof import('react').useId
+  const useImperativeHandle: typeof import('react').useImperativeHandle
+  const useInRouterContext: typeof import('react-router').useInRouterContext
+  const useInsertionEffect: typeof import('react').useInsertionEffect
+  const useLayoutEffect: typeof import('react').useLayoutEffect
+  const useLocation: typeof import('react-router').useLocation
+  const useMemo: typeof import('react').useMemo
+  const useNavigate: typeof import('react-router').useNavigate
+  const useNavigationType: typeof import('react-router').useNavigationType
+  const useOptimistic: typeof import('react').useOptimistic
+  const useOutlet: typeof import('react-router').useOutlet
+  const useOutletContext: typeof import('react-router').useOutletContext
+  const useParams: typeof import('react-router').useParams
+  const useReducer: typeof import('react').useReducer
+  const useRef: typeof import('react').useRef
+  const useResolvedPath: typeof import('react-router').useResolvedPath
+  const useRoutes: typeof import('react-router').useRoutes
+  const useState: typeof import('react').useState
+  const useSyncExternalStore: typeof import('react').useSyncExternalStore
+  const useTransition: typeof import('react').useTransition
+}

package/template-vp-react-shadcn/src/utils/env/index.tsx

@@ -0,0 +1,6 @@
+export const envVariables = {
+  /**
+   * API 前缀
+   */
+  API_AFFIX: import.meta.env.VITE_API_AFFIX ?? "",
+};

package/template-vp-react-shadcn/src/utils/request/alova-core/index.ts

@@ -0,0 +1,276 @@
+import type { Alova, AlovaDefaultCacheAdapter, AlovaOptions } from "alova";
+import { createAlova } from "alova";
+import adapterFetch, { type FetchRequestAdapter, type FetchRequestInit } from "alova/fetch";
+import type { ReactHookExportType } from "alova/react";
+
+import { deepMergeObject, isPlainObject } from "./utils";
+
+type StatusMatcher = number | number[];
+type HeaderValue = string | (() => string);
+type RequestAlovaGenerics = {
+  Responded: unknown;
+  Transformed: unknown;
+  RequestConfig: FetchRequestInit;
+  Response: Response;
+  ResponseHeader: Headers;
+  L1Cache: AlovaDefaultCacheAdapter;
+  L2Cache: AlovaDefaultCacheAdapter;
+  StatesExport: ReactHookExportType<unknown>;
+};
+
+interface StatusMap {
+  success?: StatusMatcher;
+  unAuthorized?: StatusMatcher;
+}
+
+interface CodeMap {
+  success?: number[];
+  unAuthorized?: number[];
+}
+
+export interface BaseRequestOption {
+  baseUrl?: string;
+  timeout?: number;
+  commonHeaders?: Record<string, HeaderValue>;
+  statusMap?: StatusMap;
+  codeMap?: CodeMap;
+  responseDataKey?: string;
+  responseMessageKey?: string;
+  isTransformResponse?: boolean;
+  isShowSuccessMessage?: boolean;
+  successDefaultMessage?: string;
+  isShowErrorMessage?: boolean;
+  errorDefaultMessage?: string;
+  statesHook?: AlovaOptions<RequestAlovaGenerics>["statesHook"];
+  successMessageFunc?: (message: string) => void;
+  errorMessageFunc?: (message: string) => void;
+  unAuthorizedResponseFunc?: () => void;
+  requestAdapter?: FetchRequestAdapter;
+}
+
+export interface CustomConfig {
+  isTransformResponse?: boolean;
+  isShowSuccessMessage?: boolean;
+  isShowErrorMessage?: boolean;
+}
+
+declare module "alova" {
+  interface AlovaCustomTypes {
+    meta: CustomConfig;
+  }
+}
+
+interface RequestErrorOptions {
+  status?: number;
+  code?: unknown;
+  data?: unknown;
+  response?: Response;
+}
+
+export class RequestError extends Error {
+  status?: number;
+  code?: unknown;
+  data?: unknown;
+  response?: Response;
+
+  constructor(message: string, options: RequestErrorOptions = {}) {
+    super(message);
+    this.name = "RequestError";
+    this.status = options.status;
+    this.code = options.code;
+    this.data = options.data;
+    this.response = options.response;
+  }
+}
+
+export type RequestInstance = Alova<RequestAlovaGenerics>;
+export type DualCallInstance = RequestInstance & ((option?: CustomConfig) => RequestInstance);
+
+type RequestOption = BaseRequestOption & CustomConfig;
+
+const DEFAULT_REQUEST_ADAPTER = adapterFetch();
+const DEFAULT_RESPONSE_DATA_KEY = "data";
+const DEFAULT_RESPONSE_MESSAGE_KEY = "message";
+const DEFAULT_SUCCESS_MESSAGE = "操作成功";
+const DEFAULT_ERROR_MESSAGE = "服务异常";
+const DEFAULT_REQUEST_OPTION: RequestOption = {
+  baseUrl: "/",
+  timeout: 0,
+  statusMap: {
+    success: [200, 201, 204],
+    unAuthorized: 401,
+  },
+  codeMap: {
+    success: [200],
+    unAuthorized: [401],
+  },
+  responseDataKey: DEFAULT_RESPONSE_DATA_KEY,
+  responseMessageKey: DEFAULT_RESPONSE_MESSAGE_KEY,
+  isTransformResponse: true,
+  isShowSuccessMessage: false,
+  successDefaultMessage: DEFAULT_SUCCESS_MESSAGE,
+  isShowErrorMessage: true,
+  errorDefaultMessage: DEFAULT_ERROR_MESSAGE,
+  requestAdapter: DEFAULT_REQUEST_ADAPTER,
+};
+
+function isMatchedStatus(status: number, matcher?: StatusMatcher) {
+  if (matcher === undefined) return status >= 200 && status < 300;
+  return Array.isArray(matcher) ? matcher.includes(status) : matcher === status;
+}
+
+function isMatchedCode(code: unknown, codes?: number[]) {
+  if (!codes?.length) return true;
+
+  const normalizedCode = Number(code);
+  return Number.isFinite(normalizedCode) && codes.includes(normalizedCode);
+}
+
+function getResponseMessage(data: unknown, messageKey: string, defaultMessage: string) {
+  if (!isPlainObject(data)) return defaultMessage;
+
+  const message = data[messageKey] ?? data.message ?? data.msg;
+  if (typeof message === "string") return message || defaultMessage;
+  if (typeof message === "number") return String(message);
+
+  return defaultMessage;
+}
+
+function getRuntimeConfig(option: RequestOption, customConfig?: CustomConfig) {
+  return {
+    isTransformResponse: customConfig?.isTransformResponse ?? option.isTransformResponse ?? true,
+    isShowSuccessMessage:
+      customConfig?.isShowSuccessMessage ?? option.isShowSuccessMessage ?? false,
+    isShowErrorMessage: customConfig?.isShowErrorMessage ?? option.isShowErrorMessage ?? true,
+  };
+}
+
+async function parseResponse(response: Response) {
+  if (!response.body || response.status === 204) return undefined;
+
+  const contentType = response.headers.get("content-type") ?? "";
+  if (contentType.includes("application/json")) return response.json();
+  if (contentType.startsWith("text/")) return response.text();
+
+  const clonedResponse = response.clone();
+  try {
+    return await response.json();
+  } catch {
+    try {
+      return await clonedResponse.text();
+    } catch {
+      return undefined;
+    }
+  }
+}
+
+export function createInstance(option: RequestOption): RequestInstance {
+  const mergeOption = deepMergeObject(DEFAULT_REQUEST_OPTION, option);
+
+  return createAlova({
+    baseURL: mergeOption.baseUrl,
+    timeout: mergeOption.timeout,
+    statesHook: mergeOption.statesHook,
+    requestAdapter: mergeOption.requestAdapter ?? DEFAULT_REQUEST_ADAPTER,
+    beforeRequest: (method) => {
+      for (const [key, value] of Object.entries(mergeOption.commonHeaders ?? {})) {
+        method.config.headers[key] = typeof value === "function" ? value() : value;
+      }
+    },
+    cacheFor: null,
+    responded: {
+      onSuccess: async (response, method) => {
+        const runtimeConfig = getRuntimeConfig(mergeOption, method.config.meta);
+        if (!runtimeConfig.isTransformResponse) return response;
+
+        const data = await parseResponse(response);
+        const responseMessageKey = mergeOption.responseMessageKey ?? DEFAULT_RESPONSE_MESSAGE_KEY;
+        const errorDefaultMessage = mergeOption.errorDefaultMessage ?? DEFAULT_ERROR_MESSAGE;
+
+        if (!isMatchedStatus(response.status, mergeOption.statusMap?.success)) {
+          if (isMatchedStatus(response.status, mergeOption.statusMap?.unAuthorized)) {
+            mergeOption.unAuthorizedResponseFunc?.();
+          }
+
+          const errorMessage = getResponseMessage(data, responseMessageKey, errorDefaultMessage);
+          if (runtimeConfig.isShowErrorMessage) {
+            mergeOption.errorMessageFunc?.(errorMessage);
+          }
+          throw new RequestError(errorMessage, {
+            status: response.status,
+            data,
+            response,
+          });
+        }
+
+        if (!isPlainObject(data)) return data;
+
+        const responseCode = data.code;
+        const responseMessage = getResponseMessage(
+          data,
+          responseMessageKey,
+          mergeOption.successDefaultMessage ?? DEFAULT_SUCCESS_MESSAGE,
+        );
+
+        if (
+          responseCode !== undefined &&
+          !isMatchedCode(responseCode, mergeOption.codeMap?.success)
+        ) {
+          if (isMatchedCode(responseCode, mergeOption.codeMap?.unAuthorized)) {
+            mergeOption.unAuthorizedResponseFunc?.();
+          }
+
+          const errorMessage = getResponseMessage(data, responseMessageKey, errorDefaultMessage);
+          if (runtimeConfig.isShowErrorMessage) {
+            mergeOption.errorMessageFunc?.(errorMessage);
+          }
+          throw new RequestError(errorMessage, {
+            status: response.status,
+            code: responseCode,
+            data,
+            response,
+          });
+        }
+
+        if (runtimeConfig.isShowSuccessMessage) {
+          mergeOption.successMessageFunc?.(responseMessage);
+        }
+
+        const responseDataKey = mergeOption.responseDataKey ?? DEFAULT_RESPONSE_DATA_KEY;
+        return responseDataKey in data ? data[responseDataKey] : data;
+      },
+      onError: (error) => {
+        const errorMessage =
+          error instanceof Error
+            ? error.message
+            : (mergeOption.errorDefaultMessage ?? DEFAULT_ERROR_MESSAGE);
+
+        if (mergeOption.isShowErrorMessage) {
+          mergeOption.errorMessageFunc?.(errorMessage);
+        }
+
+        throw error;
+      },
+    },
+  });
+}
+
+export function createDualCallInstance(baseConfig: BaseRequestOption): DualCallInstance {
+  const defaultInstance = createInstance(baseConfig);
+  const dualInstance = ((option?: CustomConfig) => {
+    if (!option) return defaultInstance;
+    return createInstance(deepMergeObject(baseConfig, option));
+  }) as DualCallInstance;
+
+  Object.assign(dualInstance, defaultInstance);
+  dualInstance.Get = defaultInstance.Get.bind(defaultInstance);
+  dualInstance.Post = defaultInstance.Post.bind(defaultInstance);
+  dualInstance.Put = defaultInstance.Put.bind(defaultInstance);
+  dualInstance.Delete = defaultInstance.Delete.bind(defaultInstance);
+  dualInstance.Patch = defaultInstance.Patch.bind(defaultInstance);
+  dualInstance.Head = defaultInstance.Head.bind(defaultInstance);
+  dualInstance.Options = defaultInstance.Options.bind(defaultInstance);
+  dualInstance.Request = defaultInstance.Request.bind(defaultInstance);
+
+  return dualInstance;
+}