API › @builder.io/qwik-city
動作
export type Action<
RETURN,
INPUT = Record<string, unknown>,
OPTIONAL extends boolean = true,
> = {
(): ActionStore<RETURN, INPUT, OPTIONAL>;
};
參考: ActionStore
ActionConstructor
export type ActionConstructor = {
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
data: GetValidatorType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: {
readonly id?: string;
readonly validation: [VALIDATOR, ...REST];
},
): Action<
StrictUnion<
| OBJ
| FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>
| FailReturn<FailOfRest<REST>>
>,
GetValidatorType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
>(
actionQrl: (
data: GetValidatorType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: {
readonly id?: string;
readonly validation: [VALIDATOR];
},
): Action<
StrictUnion<
OBJ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>
>,
GetValidatorType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
data: JSONObject,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: {
readonly id?: string;
readonly validation: REST;
},
): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
data: GetValidatorType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: VALIDATOR,
...rest: REST
): Action<
StrictUnion<
| OBJ
| FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>
| FailReturn<FailOfRest<REST>>
>,
GetValidatorType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
VALIDATOR extends TypedDataValidator,
>(
actionQrl: (
data: GetValidatorType<VALIDATOR>,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options: VALIDATOR,
): Action<
StrictUnion<
OBJ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>
>,
GetValidatorType<VALIDATOR>,
false
>;
<
OBJ extends Record<string, any> | void | null,
REST extends [DataValidator, ...DataValidator[]],
>(
actionQrl: (
form: JSONObject,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
...rest: REST
): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;
<OBJ>(
actionQrl: (
form: JSONObject,
event: RequestEventAction,
) => ValueOrPromise<OBJ>,
options?: {
readonly id?: string;
},
): Action<StrictUnion<OBJ>>;
};
參考: TypedDataValidator、DataValidator、GetValidatorType、Action、StrictUnion、FailReturn、ValidatorErrorType、FailOfRest、JSONObject
ActionReturn
export type ActionReturn<RETURN> = {
readonly status?: number;
readonly value: RETURN;
};
ActionStore
export type ActionStore<RETURN, INPUT, OPTIONAL extends boolean = true> = {
readonly actionPath: string;
readonly isRunning: boolean;
readonly status?: number;
readonly formData: FormData | undefined;
readonly value: RETURN | undefined;
readonly submit: QRL<
OPTIONAL extends true
? (form?: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>>
: (form: INPUT | FormData | SubmitEvent) => Promise<ActionReturn<RETURN>>
>;
readonly submitted: boolean;
};
參考: ActionReturn
ContentHeading
export interface ContentHeading
屬性
修飾詞
類型
描述
唯讀
字串
唯讀
數字
唯讀
字串
ContentMenu
export interface ContentMenu
屬性
修飾詞
類型
描述
唯讀
字串
(可選)
唯讀
(可選)
唯讀
字串
DataValidator
export type DataValidator<T extends Record<string, any> = {}> = {
validate(ev: RequestEvent, data: unknown): Promise<ValidatorReturn<T>>;
};
參考: ValidatorReturn
DocumentHead
export type DocumentHead =
| DocumentHeadValue
| ((props: DocumentHeadProps) => DocumentHeadValue);
參考: DocumentHeadValue、DocumentHeadProps
DocumentHeadProps
export interface DocumentHeadProps extends RouteLocation
繼承自: RouteLocation
屬性
修飾詞
類型
描述
唯讀
唯讀
ResolveSyncValue
唯讀
<T>(fn: () => T) => T
DocumentHeadValue
export interface DocumentHeadValue<FrontMatter extends Record<string, any> = Record<string, unknown>>
屬性
修飾詞
類型
描述
唯讀
唯讀<FrontMatter>
(可選) 包含自訂資料的任意物件。當文件標題從 Markdown 檔案建立時,未被識別為已知中繼名稱(例如標題、描述、作者等)的前置屬性會儲存在此屬性中。
唯讀
唯讀 DocumentLink[]
(可選) 用於手動將 <link>
元素附加到 <head>
。
唯讀
唯讀 DocumentMeta[]
(可選) 用於手動設定標題中的中繼標籤。此外,data
屬性可用於設定任意資料,<head>
元件之後可以使用這些資料來產生 <meta>
標籤。
唯讀
唯讀 DocumentScript[]
(可選) 用於手動將 <script>
元素附加到 <head>
。
唯讀
唯讀 文件樣式[]
(選填) 用於手動將 <style>
元素附加到 <head>
。
唯讀
字串
(選填) 設定 document.title
。
文件連結
export interface DocumentLink
屬性
修飾詞
類型
描述
字串
(可選)
字串
(可選)
布林值
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
字串
(可選)
文件元數據
export interface DocumentMeta
屬性
修飾詞
類型
描述
唯讀
字串
(可選)
唯讀
字串
(可選)
唯讀
字串
(可選)
唯讀
字串
(可選)
唯讀
字串
(可選)
唯讀
字串
(可選)
唯讀
字串
(可選)
文件腳本
此 API 以 Alpha 預覽版提供給開發人員,可能會根據我們收到的意見回饋而有所變更。請勿在正式環境中使用此 API。
export interface DocumentScript
屬性
修飾詞
類型
描述
唯讀
字串
(ALPHA) (選填)
唯讀
唯讀<QwikIntrinsicElements['script']>
(ALPHA) (選填)
唯讀
字串
(ALPHA) (選填)
文件樣式
export interface DocumentStyle
屬性
修飾詞
類型
描述
唯讀
字串
(可選)
唯讀
唯讀<QwikIntrinsicElements['style']>
(可選)
唯讀
字串
其餘失敗
export type FailOfRest<REST extends readonly DataValidator[]> =
REST extends readonly DataValidator<infer ERROR>[] ? ERROR : never;
參考: 數據驗證器
失敗返回
export type FailReturn<T> = T & Failed;
表單
Form: <O, I>(
{ action, spaReset, reloadDocument, onSubmit$, ...rest }: FormProps<O, I>,
key: string | null,
) => import("@builder.io/qwik").JSXOutput;
參數
類型
描述
{ action, spaReset, reloadDocument, onSubmit$, ...rest }
表單屬性<O, I>
金鑰
字串 | null
import("@builder.io/qwik").JSXOutput
表單屬性
export interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
擴展: Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
屬性
修飾詞
類型
描述
動作儲存<O, I, true | false>
(選填) 對 action()
返回的動作的參考。
字串 | 數字 | null
(可選)
QRLEventHandlerMulti<SubmitEvent, HTMLFormElement> | 未定義
(選填) 在提交表單時立即執行的事件處理常式。
QRLEventHandlerMulti<CustomEvent<表單提交成功詳細信息<O>>, HTMLFormElement> | 未定義
(選填) 在動作成功執行並返回一些數據後立即執行的事件處理常式。
布林值
(選填) 當設定為 true
時,即使啟用了 SPA 模式且 JS 可用,提交表單也會導致整個頁面重新載入。
布林值
(選填) 當設定為 true
時,所有表單輸入都將在 SPA 模式下重置,就像在完整頁面表單提交中發生的那樣。
預設值為 false
表單提交成功詳細信息
export interface FormSubmitCompletedDetail<T>
屬性
修飾詞
類型
描述
數字
T
獲取驗證器類型
export type GetValidatorType<VALIDATOR extends TypedDataValidator> =
VALIDATOR extends TypedDataValidator<infer TYPE> ? zod.infer<TYPE> : never;
參考: 類型化數據驗證器
全局動作$
globalAction$: ActionConstructor;
全局動作 QRL
globalActionQrl: ActionConstructorQRL;
JSON 對象
export type JSONObject = {
[x: string]: JSONValue;
};
參考: JSON 值
JSON 值
export type JSONValue =
| string
| number
| boolean
| {
[x: string]: JSONValue;
}
| Array<JSONValue>;
參考: JSON 值
連結
Link: import("@builder.io/qwik").Component<LinkProps>;
連結屬性
export interface LinkProps extends AnchorAttributes
擴展: AnchorAttributes
屬性
修飾詞
類型
描述
布林值 | 'js'
(選填) **預設值為 _true_。**
Qwik 是否應預取並快取此 **連結
** 的目標頁面,這包括調用任何 **routeLoader$
**、**onGet
** 等。
這將**改善客戶端** (**SPA**) 탐색的**使用者體驗效能**。
預取發生在產品環境中連結進入檢視區時 (**on:qvisibile
**),或在開發期間使用 **mouseover
/focus
** 時。
如果使用者已啟用**數據保護模式**,則不會進行預取。
將此值設定為 **"js"
** 將僅預取在客戶端呈現此頁面所需的 JavaScript 套件,**false
** 將完全停用預取。
布林值
(可選)
布林值
(可選)
布林值
(可選)
Loader_2
export type Loader<RETURN> = {
(): LoaderSignal<RETURN>;
};
**參考:** LoaderSignal
LoaderSignal
export type LoaderSignal<TYPE> = TYPE extends () => ValueOrPromise<
infer VALIDATOR
>
? ReadonlySignal<ValueOrPromise<VALIDATOR>>
: ReadonlySignal<TYPE>;
MenuData
export type MenuData = [pathname: string, menuLoader: MenuModuleLoader];
NavigationType
export type NavigationType = "initial" | "form" | "link" | "popstate";
PageModule
export interface PageModule extends RouteModule
**繼承:** RouteModule
屬性
修飾詞
類型
描述
唯讀
未知
唯讀
ContentModuleHead
(可選)
唯讀
(可選)
唯讀
(可選)
PathParams
export declare type PathParams = Record<string, string>;
QWIK_CITY_SCROLLER
QWIK_CITY_SCROLLER = "_qCityScroller";
QwikCityMockProps
export interface QwikCityMockProps
屬性
修飾詞
類型
描述
(可選)
Record<string, string>
(可選)
字串
(可選)
QwikCityMockProvider
QwikCityMockProvider: import("@builder.io/qwik").Component<QwikCityMockProps>;
QwikCityPlan
export interface QwikCityPlan
屬性
修飾詞
類型
描述
唯讀
字串
(可選)
唯讀
布林值
(可選)
唯讀
MenuData[]
(可選)
唯讀
唯讀
RouteModule[]
(可選)
唯讀
布林值
(可選)
QwikCityProps
export interface QwikCityProps
屬性
修飾詞
類型
描述
布林值
(可選) 啟用 ViewTransition API
預設值:true
QwikCityProvider
QwikCityProvider: import("@builder.io/qwik").Component<QwikCityProps>;
ResolvedDocumentHead
export type ResolvedDocumentHead<
FrontMatter extends Record<string, any> = Record<string, unknown>,
> = Required<DocumentHeadValue<FrontMatter>>;
**參考:** DocumentHeadValue
routeAction$
routeAction$: ActionConstructor;
routeActionQrl
routeActionQrl: ActionConstructorQRL;
RouteData
export type RouteData =
| [routeName: string, loaders: ModuleLoader[]]
| [
routeName: string,
loaders: ModuleLoader[],
originalPathname: string,
routeBundleNames: string[],
];
routeLoader$
routeLoader$: LoaderConstructor;
routeLoaderQrl
routeLoaderQrl: LoaderConstructorQRL;
RouteLocation
export interface RouteLocation
屬性
修飾詞
類型
描述
唯讀
布林值
唯讀
Readonly<Record<string, string>>
唯讀
URL | undefined
唯讀
URL
RouteNavigate
export type RouteNavigate = QRL<
(
path?: string | number,
options?:
| {
type?: Exclude<NavigationType, "initial">;
forceReload?: boolean;
replaceState?: boolean;
scroll?: boolean;
}
| boolean,
) => Promise<void>
>;
**參考:** NavigationType
RouterOutlet
RouterOutlet: import("@builder.io/qwik").Component<unknown>;
server$
server$: <T extends ServerFunction>(
qrl: T,
options?: ServerConfig | undefined,
) => ServerQRL<T>;
參數
類型
描述
qrl
T
選項
ServerConfig | undefined
(可選)
ServerQRL<T>
ServerFunction
export type ServerFunction = {
(this: RequestEventBase, ...args: any[]): any;
options?: ServerConfig;
};
serverQrl
您可以將 AbortSignal 作為 server$
函數的第一個參數傳遞,它將在觸發時使用它來中止提取。
export type ServerQRL<T extends ServerFunction> = QRL<
| ((abort: AbortSignal, ...args: Parameters<T>) => ReturnType<T>)
| ((...args: Parameters<T>) => ReturnType<T>)
>;
**參考:** ServerFunction
ServerQRL
您可以將 AbortSignal 作為 server$
函數的第一個參數傳遞,它將在觸發時使用它來中止提取。
export type ServerQRL<T extends ServerFunction> = QRL<
| ((abort: AbortSignal, ...args: Parameters<T>) => ReturnType<T>)
| ((...args: Parameters<T>) => ReturnType<T>)
>;
**參考:** ServerFunction
ServiceWorkerRegister
ServiceWorkerRegister: (props: { nonce?: string }) =>
import("@builder.io/qwik").JSXNode<"script">;
參數
類型
描述
屬性
{ nonce?: string; }
import("@builder.io/qwik").JSXNode<"script">
StaticGenerate
export interface StaticGenerate
屬性
修飾詞
類型
描述
(可選)
靜態生成處理器 (StaticGenerateHandler)
export type StaticGenerateHandler = ({
env,
}: {
env: EnvGetter;
}) => Promise<StaticGenerate> | StaticGenerate;
嚴格聯合 (StrictUnion)
export type StrictUnion<T> = Prettify<StrictUnionHelper<T, T>>;
類型化數據驗證器 (TypedDataValidator)
export type TypedDataValidator<T extends zod.ZodType = zod.ZodType> = {
__zod: zod.ZodSchema<T>;
validate(
ev: RequestEvent,
data: unknown,
): Promise<zod.SafeParseReturnType<T, T>>;
};
使用內容 (useContent)
useContent: () => import("./types").ContentState;
回傳值
import("./types").ContentState
使用文件標頭 (useDocumentHead)
回傳當前頁面的文件標頭。泛型類型描述了前置資料。
useDocumentHead: <
FrontMatter extends Record<string, unknown> = Record<string, any>,
>() => Required<ResolvedDocumentHead<FrontMatter>>;
回傳值
Required<解析後的文件標頭 (ResolvedDocumentHead)<FrontMatter>>
使用位置 (useLocation)
useLocation: () => RouteLocation;
回傳值
使用導航 (useNavigate)
useNavigate: () => RouteNavigate;
回傳值
驗證器 (validator$)
validator$: ValidatorConstructor;
驗證器錯誤鍵點符號 (ValidatorErrorKeyDotNotation)
export type ValidatorErrorKeyDotNotation<
T,
Prefix extends string = "",
> = T extends object
? {
[K in keyof T & string]: T[K] extends (infer U)[]
? U extends object
?
| `${Prefix}${K}[]`
| `${Prefix}${K}[]${ValidatorErrorKeyDotNotation<U, ".">}`
: `${Prefix}${K}[]`
: T[K] extends object
? ValidatorErrorKeyDotNotation<T[K], `${Prefix}${K}.`>
: `${Prefix}${K}`;
}[keyof T & string]
: never;
參考: 驗證器錯誤鍵點符號 (ValidatorErrorKeyDotNotation)
驗證器錯誤類型 (ValidatorErrorType)
export type ValidatorErrorType<T, U = string> = {
formErrors: U[];
fieldErrors: Partial<{
[K in ValidatorErrorKeyDotNotation<T>]: K extends `${infer _Prefix}[]${infer _Suffix}`
? U[]
: U;
}>;
};
參考: 驗證器錯誤鍵點符號 (ValidatorErrorKeyDotNotation)
驗證器 QRL (validatorQrl)
validatorQrl: ValidatorConstructorQRL;
驗證器回傳值 (ValidatorReturn)
export type ValidatorReturn<T extends Record<string, any> = {}> =
| ValidatorReturnSuccess
| ValidatorReturnFail<T>;
zod$
zod$: ZodConstructor;
Zod 建構器 (ZodConstructor)
export type ZodConstructor = {
<T extends zod.ZodRawShape>(schema: T): TypedDataValidator<zod.ZodObject<T>>;
<T extends zod.ZodRawShape>(
schema: (z: typeof zod, ev: RequestEvent) => T,
): TypedDataValidator<zod.ZodObject<T>>;
<T extends zod.Schema>(schema: T): TypedDataValidator<T>;
<T extends zod.Schema>(
schema: (z: typeof zod, ev: RequestEvent) => T,
): TypedDataValidator<T>;
};
參考: 類型化數據驗證器
zod QRL (zodQrl)
zodQrl: ZodConstructorQRL;