API › @builder.io/qwik-city

Action

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

属性

修饰符

类型

描述

id

只读

string

level

只读

number

text

只读

string

编辑此部分

ContentMenu

export interface ContentMenu

属性

修饰符

类型

描述

href?

只读

string

(可选)

items?

只读

ContentMenu[]

(可选)

text

只读

string

编辑此部分

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

属性

修饰符

类型

描述

head

只读

ResolvedDocumentHead

resolveValue

只读

ResolveSyncValue

withLocale

只读

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

编辑此部分

DocumentHeadValue

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

属性

修饰符

类型

描述

frontmatter?

只读

Readonly<FrontMatter>

(可选) 包含自定义数据的任意对象。当文档头部从 markdown 文件创建时,未被识别为知名元数据名称(如标题、描述、作者等)的 frontmatter 属性将存储在此属性中。

links?

只读

readonly DocumentLink[]

(可选) 用于手动将 <link> 元素追加到 <head> 中。

meta?

只读

readonly DocumentMeta[]

(可选) 用于手动设置头部中的元标签。此外,data 属性可用于设置任意数据,<head> 组件稍后可使用这些数据生成 <meta> 标签。

scripts?

只读

readonly DocumentScript[]

(可选) 用于手动将 <script> 元素追加到 <head> 中。

styles?

只读

readonly DocumentStyle[]

(可选) 用于手动将 <style> 元素追加到 <head> 中。

title?

只读

string

(可选) 设置 document.title

编辑此部分

export interface DocumentLink

属性

修饰符

类型

描述

as?

string

(可选)

crossorigin?

string

(可选)

disabled?

boolean

(可选)

href?

string

(可选)

hreflang?

string

(可选)

id?

string

(可选)

imagesizes?

string

(可选)

imagesrcset?

string

(可选)

integrity?

string

(可选)

key?

string

(可选)

media?

string

(可选)

prefetch?

string

(可选)

referrerpolicy?

string

(可选)

rel?

string

(可选)

sizes?

string

(可选)

title?

string

(可选)

type?

string

(可选)

编辑此部分

DocumentMeta

export interface DocumentMeta

属性

修饰符

类型

描述

content?

只读

string

(可选)

httpEquiv?

只读

string

(可选)

itemprop?

只读

string

(可选)

key?

只读

string

(可选)

media?

只读

string

(可选)

name?

只读

string

(可选)

property?

只读

string

(可选)

编辑此部分

DocumentScript

此 API 作为开发者 Alpha 预览提供,可能会根据我们收到的反馈进行更改。请勿在生产环境中使用此 API。

export interface DocumentScript

属性

修饰符

类型

描述

key?

只读

string

(ALPHA) (可选)

props?

只读

Readonly<QwikIntrinsicElements['script']>

(ALPHA) (可选)

script?

只读

string

(ALPHA) (可选)

编辑此部分

DocumentStyle

export interface DocumentStyle

属性

修饰符

类型

描述

key?

只读

string

(可选)

props?

只读

Readonly<QwikIntrinsicElements['style']>

(可选)

style

只读

string

编辑此部分

FailOfRest

export type FailOfRest<REST extends readonly DataValidator[]> =
  REST extends readonly DataValidator<infer ERROR>[] ? ERROR : never;

参考: DataValidator

编辑此部分

FailReturn

export type FailReturn<T> = T & Failed;

编辑此部分

Form

Form: <O, I>(
  { action, spaReset, reloadDocument, onSubmit$, ...rest }: FormProps<O, I>,
  key: string | null,
) => import("@builder.io/qwik").JSXOutput;

参数

类型

描述

{ action, spaReset, reloadDocument, onSubmit$, ...rest }

FormProps<O, I>

key

string | null

import("@builder.io/qwik").JSXOutput

编辑此部分

FormProps

export interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>

扩展: Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>

属性

修饰符

类型

描述

action?

ActionStore<O, I, true | false>

(可选)action() 返回的操作的引用。

key?

string | number | null

(可选)

onSubmit$?

QRLEventHandlerMulti<SubmitEvent, HTMLFormElement> | undefined

(可选) 提交表单时立即执行的事件处理程序。

onSubmitCompleted$?

QRLEventHandlerMulti<CustomEvent<FormSubmitCompletedDetail<O>>, HTMLFormElement> | undefined

(可选) 操作成功执行并返回一些数据后立即执行的事件处理程序。

reloadDocument?

boolean

(可选) 当为 true 时,即使启用 SPA 模式且 JS 可用,表单提交也会导致页面完全重新加载。

spaReset?

boolean

(可选) 当为 true 时,在 SPA 模式下,所有表单输入都将重置,就像在页面完全提交表单时一样。

默认为 false

编辑此部分

FormSubmitSuccessDetail

export interface FormSubmitCompletedDetail<T>

属性

修饰符

类型

描述

status

number

value

T

编辑此部分

GetValidatorType

export type GetValidatorType<VALIDATOR extends TypedDataValidator> =
  VALIDATOR extends TypedDataValidator<infer TYPE> ? zod.infer<TYPE> : never;

参考: TypedDataValidator

编辑此部分

globalAction$

globalAction$: ActionConstructor;

编辑此部分

globalActionQrl

globalActionQrl: ActionConstructorQRL;

编辑此部分

JSONObject

export type JSONObject = {
  [x: string]: JSONValue;
};

参考: JSONValue

编辑此部分

JSONValue

export type JSONValue =
  | string
  | number
  | boolean
  | {
      [x: string]: JSONValue;
    }
  | Array<JSONValue>;

参考: JSONValue

编辑此部分

Link: import("@builder.io/qwik").Component<LinkProps>;

编辑此部分

LinkProps

export interface LinkProps extends AnchorAttributes

扩展: AnchorAttributes

属性

修饰符

类型

描述

prefetch?

boolean | 'js'

(可选) **默认为 _true_.**

Qwik 是否应该预取并缓存此 **Link** 的目标页面,这包括调用任何 **routeLoader$**、**onGet** 等。

这 **提高了客户端 (SPA) 导航的 UX 性能**。

预取发生在链接在生产环境中进入视窗时 (**on:qvisibile**),或者在开发期间使用 **mouseover/focus**。

如果用户启用了 **数据节省** 设置,则不会发生预取。

将此值设置为 **"js"** 将仅预取在客户端渲染此页面所需的 javascript 包,**false** 将完全禁用预取。

reload?

boolean

(可选)

replaceState?

boolean

(可选)

scroll?

boolean

(可选)

编辑此部分

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

属性

修饰符

类型

描述

default

只读

unknown

head?

只读

ContentModuleHead

(可选)

headings?

只读

ContentHeading[]

(可选)

onStaticGenerate?

只读

StaticGenerateHandler

(可选)

编辑此部分

PathParams

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

编辑此部分

QWIK_CITY_SCROLLER

QWIK_CITY_SCROLLER = "_qCityScroller";

编辑此部分

QwikCityMockProps

export interface QwikCityMockProps

属性

修饰符

类型

描述

跳转到?

RouteNavigate

(可选)

参数?

Record<string, string>

(可选)

URL?

string

(可选)

编辑此部分

QwikCityMockProvider

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

编辑此部分

QwikCityPlan

export interface QwikCityPlan

属性

修饰符

类型

描述

basePathname?

只读

string

(可选)

缓存模块?

只读

boolean

(可选)

菜单?

只读

MenuData[]

(可选)

路由

只读

RouteData[]

服务器插件?

只读

RouteModule[]

(可选)

尾部斜杠?

只读

boolean

(可选)

编辑此部分

QwikCityProps

export interface QwikCityProps

属性

修饰符

类型

描述

视图过渡?

boolean

(可选) 启用视图过渡 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

属性

修饰符

类型

描述

正在导航

只读

boolean

参数

只读

Readonly<Record<string, string>>

上一个 URL

只读

URL | undefined

URL

只读

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

编辑此部分

validatorQrl

validatorQrl: ValidatorConstructorQRL;

编辑此部分

ValidatorReturn

export type ValidatorReturn<T extends Record<string, any> = {}> =
  | ValidatorReturnSuccess
  | ValidatorReturnFail<T>;

编辑此部分

zod$

zod$: ZodConstructor;

编辑此部分

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

参考: TypedDataValidator

编辑此部分

zodQrl

zodQrl: ZodConstructorQRL;

编辑此部分