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

readonly

string

level

readonly

number

text

readonly

string

このセクションを編集

ContentMenu

export interface ContentMenu

プロパティ

修飾子

説明

href?

readonly

string

(オプション)

items?

readonly

ContentMenu[]

(オプション)

text

readonly

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

readonly

ResolvedDocumentHead

resolveValue

readonly

ResolveSyncValue

withLocale

readonly

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

このセクションを編集

DocumentHeadValue

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

プロパティ

修飾子

説明

frontmatter?

readonly

Readonly<FrontMatter>

(オプション) カスタムデータを含む任意のオブジェクト。ドキュメントヘッダーがマークダウンファイルから作成された場合、よく知られているメタ名(title、description、authorなど)として認識されないfrontmatter属性は、このプロパティに格納されます。

links?

readonly

readonly DocumentLink[]

(オプション) <head><link>要素を手動で追加するために使用します。

meta?

readonly

readonly DocumentMeta[]

(オプション) headにメタタグを手動で設定するために使用します。さらに、dataプロパティを使用して、<head>コンポーネントが後で<meta>タグを生成するために使用できる任意のデータを設定できます。

scripts?

readonly

readonly DocumentScript[]

(オプション) <head><script>要素を手動で追加するために使用します。

styles?

readonly

readonly DocumentStyle[]

(オプション) <head><style>要素を手動で追加するために使用します。

title?

readonly

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?

readonly

string

(オプション)

httpEquiv?

readonly

string

(オプション)

itemprop?

readonly

string

(オプション)

key?

readonly

string

(オプション)

media?

readonly

string

(オプション)

name?

readonly

string

(オプション)

property?

readonly

string

(オプション)

このセクションを編集

DocumentScript

このAPIは、開発者向けのアルファプレビューとして提供されており、受け取ったフィードバックに基づいて変更される可能性があります。本番環境でこのAPIを使用しないでください。

export interface DocumentScript

プロパティ

修飾子

説明

key?

readonly

string

(アルファ) (オプション)

props?

readonly

Readonly<QwikIntrinsicElements['script']>

(アルファ) (オプション)

script?

readonly

string

(アルファ) (オプション)

このセクションを編集

DocumentStyle

export interface DocumentStyle

プロパティ

修飾子

説明

key?

readonly

string

(オプション)

props?

readonly

Readonly<QwikIntrinsicElements['style']>

(オプション)

style

readonly

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パフォーマンスが向上**します。

プリフェッチは、本番環境ではLinkがビューポートに入ったとき(**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

プロパティ

修飾子

説明

デフォルト

readonly

不明

head?

readonly

ContentModuleHead

(オプション)

見出し?

readonly

ContentHeading[]

(オプション)

onStaticGenerate?

readonly

StaticGenerateHandler

(オプション)

このセクションを編集

PathParams

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

このセクションを編集

QWIK_CITY_SCROLLER

QWIK_CITY_SCROLLER = "_qCityScroller";

このセクションを編集

QwikCityMockProps

export interface QwikCityMockProps

プロパティ

修飾子

説明

goto?

RouteNavigate

(オプション)

params?

Record<string, string>

(オプション)

url?

string

(オプション)

このセクションを編集

QwikCityMockProvider

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

このセクションを編集

QwikCityPlan

export interface QwikCityPlan

プロパティ

修飾子

説明

basePathname?

readonly

string

(オプション)

cacheModules?

readonly

boolean

(オプション)

menus?

readonly

MenuData[]

(オプション)

routes

readonly

RouteData[]

serverPlugins?

readonly

RouteModule[]

(オプション)

trailingSlash?

readonly

boolean

(オプション)

このセクションを編集

QwikCityProps

export interface QwikCityProps

プロパティ

修飾子

説明

viewTransition?

boolean

(オプション) 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

boolean

params

readonly

Readonly<Record<string, string>>

prevUrl

readonly

URL | undefined

url

readonly

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

options

ServerConfig | undefined

(オプション)

ServerQRL<T>

このセクションを編集

ServerFunction

export type ServerFunction = {
  (this: RequestEventBase, ...args: any[]): any;
  options?: ServerConfig;
};

このセクションを編集

serverQrl

server$ 関数の最初の引数として AbortSignal を渡すことができ、それが発火されたときにフェッチを中止するために使用されます。

export type ServerQRL<T extends ServerFunction> = QRL<
  | ((abort: AbortSignal, ...args: Parameters<T>) => ReturnType<T>)
  | ((...args: Parameters<T>) => ReturnType<T>)
>;

参照: ServerFunction

このセクションを編集

ServerQRL

server$ 関数の最初の引数として AbortSignal を渡すことができ、それが発火されたときにフェッチを中止するために使用されます。

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

パラメータ

説明

props

{ nonce?: string; }

import("@builder.io/qwik").JSXNode<"script">

このセクションを編集

StaticGenerate

export interface StaticGenerate

プロパティ

修飾子

説明

params?

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;

このセクションを編集