create-bubbles 0.1.25 → 0.1.26

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

@@ -1,54 +1,61 @@
-import { PlayCircle } from "lucide-react";
-import { useState } from "react";
+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";
+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;
+  player: 'VideoJS 播放器',
+  title: 'HLS / MP4 播放示例',
+  play: '播放',
+} as const
 
 type DemoSource = {
-  id: Exclude<VideoJSSourceType, "auto" | "native">;
-  name: string;
-  src: string;
-  type: string;
-  poster: string;
-};
+  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",
+    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",
+    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"]>(
+  const [activeSourceType, setActiveSourceType] = useState<DemoSource['id']>(
     VIDEO_JS_SOURCE_TYPES.HLS,
-  );
+  )
   const activeSource =
-    DEMO_SOURCES.find((source) => source.id === activeSourceType) ?? DEMO_SOURCES[0];
+    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>
+            <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>
@@ -56,7 +63,7 @@ const Home = () => {
 
           <div className="flex rounded-lg border border-white/10 bg-white/5 p-1">
             {DEMO_SOURCES.map((source) => {
-              const isActive = source.id === activeSource.id;
+              const isActive = source.id === activeSource.id
 
               return (
                 <Button
@@ -64,15 +71,16 @@ const Home = () => {
                   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",
+                    '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>
@@ -90,7 +98,7 @@ const Home = () => {
 
       <Button>{HOME_TEXT.play}</Button>
     </main>
-  );
-};
+  )
+}
 
-export default Home;
+export default Home

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

@@ -1,25 +1,25 @@
-import { createBrowserRouter, Navigate, type RouteObject } from "react-router";
+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 />;
-};
+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: '/',
+    id: 'index',
+    element: <Navigate to={'/home'} />,
   },
   {
-    path: "/home",
-    id: "home",
-    element: lazyLoad("home"),
+    path: '/home',
+    id: 'home',
+    element: lazyLoad('home'),
   },
-];
+]
 
 export const router = createBrowserRouter(routes, {
-  basename: "/",
-});
+  basename: '/',
+})
 
-export const navigator = router.navigate;
+export const navigator = router.navigate

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

@@ -1,7 +1,7 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "@fontsource-variable/geist";
-@import "./shadcn.css";
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import '@fontsource-variable/geist';
+@import './shadcn.css';
 
 html,
 body {

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

@@ -1,10 +1,10 @@
-@import "shadcn/tailwind.css";
+@import 'shadcn/tailwind.css';
 
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --font-heading: var(--font-sans);
-  --font-sans: "Geist Variable", sans-serif;
+  --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);

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

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

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

@@ -1,9 +1,3 @@
-import {
-  deepMergeObject,
-  isPlainObject,
-  isReadableStream,
-  tryParseJsonString,
-} from './utils'
 import type {
   AlovaGlobalCacheAdapter,
   AlovaOptions,
@@ -16,6 +10,13 @@ import { createAlova } from 'alova'
 import type { FetchRequestInit } from 'alova/fetch'
 import adapterFetch from 'alova/fetch'
 
+import {
+  deepMergeObject,
+  isPlainObject,
+  isReadableStream,
+  tryParseJsonString,
+} from './utils'
+
 type MaybePromise<T> = T | Promise<T>
 type HeaderValue =
   | string
@@ -24,7 +25,10 @@ type HeaderValue =
   | null
   | undefined
   | (() => MaybePromise<string | number | boolean | null | undefined>)
-type StatusMatcher<RE> = number | number[] | ((status: number, response: RE) => boolean)
+type StatusMatcher<RE> =
+  | number
+  | number[]
+  | ((status: number, response: RE) => boolean)
 type CodeMatcher = Array<number | string>
 
 export interface StatusMap<RE = unknown> {
@@ -86,7 +90,12 @@ export type RequestOption<
   SE extends StatesExport<any> = StatesExport<any>,
 > = BaseRequestOption<RC, RE, RH, SE>
 
-type RequestAlovaGenerics<RC extends object, RE, RH, SE extends StatesExport<any>> = {
+type RequestAlovaGenerics<
+  RC extends object,
+  RE,
+  RH,
+  SE extends StatesExport<any>,
+> = {
   Responded: unknown
   Transformed: unknown
   RequestConfig: RC
@@ -97,7 +106,12 @@ type RequestAlovaGenerics<RC extends object, RE, RH, SE extends StatesExport<any
   StatesExport: SE
 }
 
-type ResolvedRequestOption<RC extends object, RE, RH, SE extends StatesExport<any>> = Required<
+type ResolvedRequestOption<
+  RC extends object,
+  RE,
+  RH,
+  SE extends StatesExport<any>,
+> = Required<
   Pick<
     BaseRequestOption<RC, RE, RH, SE>,
     | 'baseUrl'
@@ -146,11 +160,17 @@ const defaultRequestOption: BaseRequestOption<any, any, any, any> = {
 }
 
 function getMethodMeta(method: unknown): RequestMeta {
-  const methodRecord = method as { meta?: RequestMeta; config?: { meta?: RequestMeta } } | undefined
+  const methodRecord = method as
+    | { meta?: RequestMeta; config?: { meta?: RequestMeta } }
+    | undefined
   return methodRecord?.config?.meta ?? methodRecord?.meta ?? {}
 }
 
-function getMetaFlag(meta: RequestMeta, key: keyof RequestMeta, fallback: boolean): boolean {
+function getMetaFlag(
+  meta: RequestMeta,
+  key: keyof RequestMeta,
+  fallback: boolean,
+): boolean {
   const value = meta[key]
   return typeof value === 'boolean' ? value : fallback
 }
@@ -167,7 +187,10 @@ function isMatchedStatus<RE>(
   return Array.isArray(matcher) ? matcher.includes(status) : matcher === status
 }
 
-function isMatchedCode(code: unknown, matcher: CodeMatcher | undefined): boolean {
+function isMatchedCode(
+  code: unknown,
+  matcher: CodeMatcher | undefined,
+): boolean {
   if (!matcher?.length) return true
 
   return matcher.some((item) => String(item) === String(code))
@@ -179,7 +202,11 @@ function getResponseStatus(response: unknown): number {
   return typeof status === 'number' ? status : Number(status)
 }
 
-function getResponseMessage(data: unknown, messageKey: string, defaultMessage: string): string {
+function getResponseMessage(
+  data: unknown,
+  messageKey: string,
+  defaultMessage: string,
+): string {
   if (!isPlainObject(data)) return defaultMessage
 
   const message = data[messageKey] ?? data.message ?? data.msg
@@ -203,10 +230,14 @@ async function parseFetchResponse(response: {
 }): Promise<unknown> {
   if (response.status === 204) return undefined
 
-  const reader = typeof response.clone === 'function' ? response.clone() : response
+  const reader =
+    typeof response.clone === 'function' ? response.clone() : response
   const contentType = getHeaderValue(response.headers, 'content-type')
 
-  if (contentType.includes('application/json') && typeof reader.json === 'function')
+  if (
+    contentType.includes('application/json') &&
+    typeof reader.json === 'function'
+  )
     return reader.json()
 
   if (contentType.startsWith('text/') && typeof reader.text === 'function')
@@ -220,7 +251,8 @@ async function parseFetchResponse(response: {
     }
   }
 
-  if (typeof reader.text === 'function') return tryParseJsonString(await reader.text())
+  if (typeof reader.text === 'function')
+    return tryParseJsonString(await reader.text())
 
   return undefined
 }
@@ -231,11 +263,14 @@ function getHeaderValue(
 ): string {
   if (!headers) return ''
 
-  if (typeof Headers !== 'undefined' && headers instanceof Headers) return headers.get(key) ?? ''
+  if (typeof Headers !== 'undefined' && headers instanceof Headers)
+    return headers.get(key) ?? ''
 
   const headerRecord = headers as Record<string, unknown>
   const value =
-    headerRecord[key] ?? headerRecord[key.toLowerCase()] ?? headerRecord[key.toUpperCase()]
+    headerRecord[key] ??
+    headerRecord[key.toLowerCase()] ??
+    headerRecord[key.toUpperCase()]
   return typeof value === 'string' ? value : ''
 }
 
@@ -261,7 +296,9 @@ async function getResponseData(response: unknown): Promise<unknown> {
   return response
 }
 
-async function resolveHeaderValue(value: HeaderValue): Promise<string | undefined> {
+async function resolveHeaderValue(
+  value: HeaderValue,
+): Promise<string | undefined> {
   const resolved = typeof value === 'function' ? await value() : value
   if (resolved === null || resolved === undefined) return undefined
   return String(resolved)
@@ -284,7 +321,12 @@ function setHeader(target: unknown, key: string, value: string): void {
 function resolveConfig<RC extends object, RE, RH, SE extends StatesExport<any>>(
   option: BaseRequestOption<RC, RE, RH, SE>,
 ): ResolvedRequestOption<RC, RE, RH, SE> {
-  return deepMergeObject(defaultRequestOption, option) as ResolvedRequestOption<RC, RE, RH, SE>
+  return deepMergeObject(defaultRequestOption, option) as ResolvedRequestOption<
+    RC,
+    RE,
+    RH,
+    SE
+  >
 }
 
 export function createInstance<
@@ -309,7 +351,9 @@ export function createInstance<
       const headers = methodConfig.headers ?? {}
       methodConfig.headers = headers
 
-      for (const [key, value] of Object.entries(config.commonHeaders?.() ?? {})) {
+      for (const [key, value] of Object.entries(
+        config.commonHeaders?.() ?? {},
+      )) {
         const resolvedValue = await resolveHeaderValue(value)
         if (resolvedValue !== undefined) setHeader(headers, key, resolvedValue)
       }
@@ -317,9 +361,21 @@ export function createInstance<
     responded: {
       onSuccess: async (response, method) => {
         const meta = getMethodMeta(method)
-        const shouldTransform = getMetaFlag(meta, 'isTransformResponse', config.isTransformResponse)
-        const showSuccess = getMetaFlag(meta, 'isShowSuccessMessage', config.isShowSuccessMessage)
-        const showError = getMetaFlag(meta, 'isShowErrorMessage', config.isShowErrorMessage)
+        const shouldTransform = getMetaFlag(
+          meta,
+          'isTransformResponse',
+          config.isTransformResponse,
+        )
+        const showSuccess = getMetaFlag(
+          meta,
+          'isShowSuccessMessage',
+          config.isShowSuccessMessage,
+        )
+        const showError = getMetaFlag(
+          meta,
+          'isShowErrorMessage',
+          config.isShowErrorMessage,
+        )
         const isWrapped = getMetaFlag(meta, 'isWrapped', config.isWrapped)
 
         if (!shouldTransform) return response
@@ -333,14 +389,19 @@ export function createInstance<
 
           if (showError) {
             config.errorMessageFunc?.(
-              getResponseMessage(data, config.responseMessageKey, config.errorDefaultMessage),
+              getResponseMessage(
+                data,
+                config.responseMessageKey,
+                config.errorDefaultMessage,
+              ),
             )
           }
           return Promise.reject(response)
         }
 
         if (!isWrapped) {
-          if (showSuccess) config.successMessageFunc?.(config.successDefaultMessage)
+          if (showSuccess)
+            config.successMessageFunc?.(config.successDefaultMessage)
           return data
         }
 
@@ -353,11 +414,16 @@ export function createInstance<
         )
 
         if (!isMatchedCode(code, config.codeMap.success)) {
-          if (isMatchedCode(code, config.codeMap.unAuthorized)) config.unAuthorizedResponseFunc?.()
+          if (isMatchedCode(code, config.codeMap.unAuthorized))
+            config.unAuthorizedResponseFunc?.()
 
           if (showError) {
             config.errorMessageFunc?.(
-              getResponseMessage(data, config.responseMessageKey, config.errorDefaultMessage),
+              getResponseMessage(
+                data,
+                config.responseMessageKey,
+                config.errorDefaultMessage,
+              ),
             )
           }
           return Promise.reject(response)
@@ -369,7 +435,11 @@ export function createInstance<
       },
       onError: (error, method) => {
         const meta = getMethodMeta(method)
-        const showError = getMetaFlag(meta, 'isShowErrorMessage', config.isShowErrorMessage)
+        const showError = getMetaFlag(
+          meta,
+          'isShowErrorMessage',
+          config.isShowErrorMessage,
+        )
 
         if (showError) {
           config.errorMessageFunc?.(
@@ -404,7 +474,9 @@ export function createDualCallInstance<
   RE = Response,
   RH = Headers,
   SE extends StatesExport<any> = StatesExport<any>,
->(baseConfig: BaseRequestOption<RC, RE, RH, SE>): DualCallInstance<RC, RE, RH, SE> {
+>(
+  baseConfig: BaseRequestOption<RC, RE, RH, SE>,
+): DualCallInstance<RC, RE, RH, SE> {
   const defaultInstance = createInstance(baseConfig)
   const dualInstance = ((option?: RequestOption<RC, RE, RH, SE>) => {
     if (!option) return defaultInstance

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

@@ -1,11 +1,14 @@
 export function deepMergeObject<T = any>(source: T, target: Partial<T>): T {
   const merge = (src: any, tgt: any): any => {
-    if (!isPlainObject(src) || !isPlainObject(tgt)) return tgt === undefined ? src : tgt
+    if (!isPlainObject(src) || !isPlainObject(tgt))
+      return tgt === undefined ? src : tgt
 
     const result = { ...src }
     for (const key of Object.keys(tgt)) {
       const targetValue = tgt[key]
-      result[key] = isPlainObject(targetValue) ? merge(result[key], targetValue) : targetValue
+      result[key] = isPlainObject(targetValue)
+        ? merge(result[key], targetValue)
+        : targetValue
     }
 
     return result

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

@@ -1,21 +1,29 @@
-import reactHook from "alova/react";
-import { toast } from "sonner";
+import type { FetchRequestInit } from 'alova/fetch'
+import reactHook, { type ReactHookExportType } from 'alova/react'
 
-import { navigator } from "@/router";
-import { envVariables } from "@/utils/env";
+import { toast } from '@/components/ui/toast'
+import { navigator } from '@/router'
+import { envVariables } from '@/utils/env'
 
-import { createDualCallInstance } from "./alova-core";
+import { createDualCallInstance, type BaseRequestOption } from './alova-core'
+
+type WebRequestOption = BaseRequestOption<
+  FetchRequestInit,
+  Response,
+  Headers,
+  ReactHookExportType<unknown>
+>
 
 function normalizeBaseUrl(apiAffix?: string) {
-  if (!apiAffix) return "/";
-  if (/^https?:\/\//.test(apiAffix) || apiAffix.startsWith("/")) {
-    return apiAffix;
+  if (!apiAffix) return '/'
+  if (/^https?:\/\//.test(apiAffix) || apiAffix.startsWith('/')) {
+    return apiAffix
   }
 
-  return `/${apiAffix}`;
+  return `/${apiAffix}`
 }
 
-function getBaseConfig(): Parameters<typeof createDualCallInstance>[0] {
+function getBaseConfig(): WebRequestOption {
   return {
     baseUrl: normalizeBaseUrl(envVariables.API_AFFIX),
     statusMap: {
@@ -26,23 +34,28 @@ function getBaseConfig(): Parameters<typeof createDualCallInstance>[0] {
       success: [200],
       unAuthorized: [401],
     },
-    responseDataKey: "data",
-    responseMessageKey: "msg",
+    responseDataKey: 'data',
+    responseMessageKey: 'msg',
     commonHeaders: () => ({}),
     successMessageFunc: (msg) => {
-      toast.success(msg);
+      toast.add({ type: 'success', description: msg })
     },
     errorMessageFunc: (msg) => {
-      toast.error(msg);
+      toast.add({ type: 'error', description: msg })
     },
     unAuthorizedResponseFunc: () => {
-      navigator("/login");
-      toast.error("登录过期或未登录");
+      navigator('/login')
+      toast.add({ type: 'error', description: '登录过期或未登录' })
     },
     statesHook: reactHook,
-  };
+  }
 }
 
-const alovaRequest = createDualCallInstance(getBaseConfig());
+const alovaRequest = createDualCallInstance<
+  FetchRequestInit,
+  Response,
+  Headers,
+  ReactHookExportType<unknown>
+>(getBaseConfig())
 
-export default alovaRequest;
+export default alovaRequest