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>>;
};

參考: TypedDataValidatorDataValidatorGetValidatorTypeActionStrictUnionFailReturnValidatorErrorTypeFailOfRestJSONObject

編輯此區塊

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

屬性

修飾詞

類型

描述

id

唯讀

字串

層級

唯讀

數字

文字

唯讀

字串

編輯此區塊

ContentMenu

export interface ContentMenu

屬性

修飾詞

類型

描述

href?

唯讀

字串

(可選)

項目?

唯讀

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);

參考: DocumentHeadValueDocumentHeadProps

編輯此區塊

DocumentHeadProps

export interface DocumentHeadProps extends RouteLocation

繼承自: RouteLocation

屬性

修飾詞

類型

描述

head

唯讀

ResolvedDocumentHead

resolveValue

唯讀

ResolveSyncValue

withLocale

唯讀

<T>(fn: () => T) => T

編輯此區塊

DocumentHeadValue

export interface DocumentHeadValue<FrontMatter extends Record<string, any> = Record<string, unknown>>

屬性

修飾詞

類型

描述

frontmatter?

唯讀

唯讀<FrontMatter>

(可選) 包含自訂資料的任意物件。當文件標題從 Markdown 檔案建立時,未被識別為已知中繼名稱(例如標題、描述、作者等)的前置屬性會儲存在此屬性中。

連結?

唯讀

唯讀 DocumentLink[]

(可選) 用於手動將 <link> 元素附加到 <head>

中繼資料?

唯讀

唯讀 DocumentMeta[]

(可選) 用於手動設定標題中的中繼標籤。此外,data 屬性可用於設定任意資料,<head> 元件之後可以使用這些資料來產生 <meta> 標籤。

指令碼?

唯讀

唯讀 DocumentScript[]

(可選) 用於手動將 <script> 元素附加到 <head>

樣式?

唯讀

唯讀 文件樣式[]

(選填) 用於手動將 <style> 元素附加到 <head>

標題?

唯讀

字串

(選填) 設定 document.title

編輯此區塊

export interface DocumentLink

屬性

修飾詞

類型

描述

作為?

字串

(可選)

跨來源?

字串

(可選)

已停用?

布林值

(可選)

href?

字串

(可選)

hreflang?

字串

(可選)

ID?

字串

(可選)

圖片大小?

字串

(可選)

圖片來源集?

字串

(可選)

完整性?

字串

(可選)

金鑰?

字串

(可選)

媒體?

字串

(可選)

預取?

字串

(可選)

參考來源政策?

字串

(可選)

關係?

字串

(可選)

大小?

字串

(可選)

標題?

字串

(可選)

類型?

字串

(可選)

編輯此區塊

文件元數據

export interface DocumentMeta

屬性

修飾詞

類型

描述

內容?

唯讀

字串

(可選)

http 等效?

唯讀

字串

(可選)

項目屬性?

唯讀

字串

(可選)

金鑰?

唯讀

字串

(可選)

媒體?

唯讀

字串

(可選)

名稱?

唯讀

字串

(可選)

屬性?

唯讀

字串

(可選)

編輯此區塊

文件腳本

此 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

(可選)

onSubmit$?

QRLEventHandlerMulti<SubmitEvent, HTMLFormElement> | 未定義

(選填) 在提交表單時立即執行的事件處理常式。

onSubmitCompleted$?

QRLEventHandlerMulti<CustomEvent<表單提交成功詳細信息<O>>, HTMLFormElement> | 未定義

(選填) 在動作成功執行並返回一些數據後立即執行的事件處理常式。

重新載入文件?

布林值

(選填) 當設定為 true 時,即使啟用了 SPA 模式且 JS 可用,提交表單也會導致整個頁面重新載入。

SPA 重置?

布林值

(選填) 當設定為 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>;

編輯此區塊

export type MenuData = [pathname: string, menuLoader: MenuModuleLoader];

編輯此區塊

export type NavigationType = "initial" | "form" | "link" | "popstate";

編輯此區塊

PageModule

export interface PageModule extends RouteModule

**繼承:** RouteModule

屬性

修飾詞

類型

描述

預設

唯讀

未知

標題?

唯讀

ContentModuleHead

(可選)

標題?

唯讀

ContentHeading[]

(可選)

onStaticGenerate?

唯讀

StaticGenerateHandler

(可選)

編輯此區塊

PathParams

export declare type PathParams = Record<string, string>;

編輯此區塊

QWIK_CITY_SCROLLER

QWIK_CITY_SCROLLER = "_qCityScroller";

編輯此區塊

QwikCityMockProps

export interface QwikCityMockProps

屬性

修飾詞

類型

描述

goto?

RouteNavigate

(可選)

參數?

Record<string, string>

(可選)

網址?

字串

(可選)

編輯此區塊

QwikCityMockProvider

QwikCityMockProvider: import("@builder.io/qwik").Component<QwikCityMockProps>;

編輯此區塊

QwikCityPlan

export interface QwikCityPlan

屬性

修飾詞

類型

描述

basePathname?

唯讀

字串

(可選)

cacheModules?

唯讀

布林值

(可選)

選單?

唯讀

MenuData[]

(可選)

路由

唯讀

RouteData[]

serverPlugins?

唯讀

RouteModule[]

(可選)

trailingSlash?

唯讀

布林值

(可選)

編輯此區塊

QwikCityProps

export interface QwikCityProps

屬性

修飾詞

類型

描述

viewTransition?

布林值

(可選) 啟用 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

屬性

修飾詞

類型

描述

isNavigating

唯讀

布林值

參數

唯讀

Readonly<Record<string, string>>

prevUrl

唯讀

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

屬性

修飾詞

類型

描述

參數?

PathParams[]

(可選)

編輯此區塊

靜態生成處理器 (StaticGenerateHandler)

export type StaticGenerateHandler = ({
  env,
}: {
  env: EnvGetter;
}) => Promise<StaticGenerate> | 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;

回傳值

路由位置 (RouteLocation)

編輯此區塊

使用導航 (useNavigate)

useNavigate: () => RouteNavigate;

回傳值

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;

編輯此區塊