API โบ @builder.io/qwik-city
Action
export interface Action<RETURN, INPUT = Record<string, any>, OPTIONAL extends boolean = true>
ActionConstructor
export interface ActionConstructor
ActionOptions
export interface ActionOptions
Property | Modifiers | Type | Description |
---|---|---|---|
id? | readonly | string | (Optional) |
validation? | readonly | DataValidator[] | (Optional) |
ActionOptionsWithValidation
export interface ActionOptionsWithValidation<B extends TypedDataValidator = TypedDataValidator>
Property | Modifiers | Type | Description |
---|---|---|---|
id? | readonly | string | (Optional) |
validation | readonly | [val: B, ...a: DataValidator[]] |
ActionStore
export interface ActionStore<RETURN, INPUT, OPTIONAL extends boolean = true>
Property | Modifiers | Type | Description |
---|---|---|---|
actionPath | readonly | string | It's the "action" path that a native <form> should have in order to call the action. |
<form action={action.actionPath} />
export const useAddUser = action$(() => { ... });
export default component$(() => { const action = useAddUser(); return (
|
| [formData](#) | <code>readonly</code> | FormData \| undefined | <p>When calling an action through a <code><form></code>, this property contains the previously submitted <code>FormData</code>.</p><p>This is useful to keep the filled form data even after a full page reload.</p><p>It's <code>undefined</code> before the action is first called.</p> |
| [isRunning](#) | <code>readonly</code> | boolean | <p>Reactive property that becomes <code>true</code> only in the browser, when a form is submitted and switched back to false when the action finish, ie, it describes if the action is actively running.</p><p>This property is specially useful to disable the submit button while the action is processing, to prevent multiple submissions, and to inform visually to the user that the action is actively running.</p><p>It will be always <code>false</code> in the server, and only becomes <code>true</code> briefly while the action is running.</p> |
| [status?](#) | <code>readonly</code> | number | <p>_(Optional)_ Returned HTTP status code of the action after its last execution.</p><p>It's <code>undefined</code> before the action is first called.</p> |
| [submit](#) | <code>readonly</code> | QRL<OPTIONAL extends true ? (form?: INPUT \| FormData \| SubmitEvent) => Promise<ActionReturn<RETURN>> : (form: INPUT \| FormData \| SubmitEvent) => Promise<ActionReturn<RETURN>>> | Method to execute the action programmatically from the browser. Ie, instead of using a <code><form></code>, a 'click' handle can call the <code>run()</code> method of the action in order to execute the action in the server. |
| [value](#) | <code>readonly</code> | RETURN \| undefined | <p>Returned successful data of the action. This reactive property will contain the data returned inside the <code>action$</code> function.</p><p>It's <code>undefined</code> before the action is first called.</p> |
[Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/types.ts)
## ContentHeading
```typescript
export interface ContentHeading
ContentMenu
export interface ContentMenu
Property | Modifiers | Type | Description |
---|---|---|---|
href? | readonly | string | (Optional) |
items? | readonly | ContentMenu[] | (Optional) |
text | readonly | string |
DocumentHead
export type DocumentHead =
| DocumentHeadValue
| ((props: DocumentHeadProps) => DocumentHeadValue);
References: DocumentHeadValue, DocumentHeadProps
DocumentHeadProps
export interface DocumentHeadProps extends RouteLocation
Extends: RouteLocation
Property | Modifiers | Type | Description |
---|---|---|---|
head | readonly | ResolvedDocumentHead | |
resolveValue | readonly | ResolveSyncValue | |
withLocale | readonly | <T>(fn: () => T) => T |
DocumentHeadValue
export interface DocumentHeadValue
Property | Modifiers | Type | Description |
---|---|---|---|
frontmatter? | readonly | Readonly<Record<string, any>> | (Optional) Arbitrary object containing custom data. When the document head is created from markdown files, the frontmatter attributes that are not recognized as a well-known meta names (such as title, description, author, etc...), are stored in this property. |
links? | readonly | readonly DocumentLink[] | (Optional) Used to manually append <link> elements to the <head>. |
meta? | readonly | readonly DocumentMeta[] | (Optional) Used to manually set meta tags in the head. Additionally, the data property could be used to set arbitrary data which the <head> component could later use to generate <meta> tags. |
styles? | readonly | readonly DocumentStyle[] | (Optional) Used to manually append <style> elements to the <head>. |
title? | readonly | string | (Optional) Sets document.title. |
DocumentLink
export interface DocumentLink
Property | Modifiers | Type | Description |
---|---|---|---|
as? | string | (Optional) | |
crossorigin? | string | (Optional) | |
disabled? | boolean | (Optional) | |
href? | string | (Optional) | |
hreflang? | string | (Optional) | |
id? | string | (Optional) | |
imagesizes? | string | (Optional) | |
imagesrcset? | string | (Optional) | |
integrity? | string | (Optional) | |
key? | string | (Optional) | |
media? | string | (Optional) | |
prefetch? | string | (Optional) | |
referrerpolicy? | string | (Optional) | |
rel? | string | (Optional) | |
sizes? | string | (Optional) | |
title? | string | (Optional) | |
type? | string | (Optional) |
DocumentMeta
export interface DocumentMeta
Property | Modifiers | Type | Description |
---|---|---|---|
content? | readonly | string | (Optional) |
httpEquiv? | readonly | string | (Optional) |
itemprop? | readonly | string | (Optional) |
key? | readonly | string | (Optional) |
media? | readonly | string | (Optional) |
name? | readonly | string | (Optional) |
property? | readonly | string | (Optional) |
DocumentStyle
export interface DocumentStyle
Property | Modifiers | Type | Description |
---|---|---|---|
key? | readonly | string | (Optional) |
props? | readonly | Readonly<{ [propName: string]: string; }> | (Optional) |
style | readonly | string |
FailReturn
export type FailReturn<T> = T & {
failed: true;
};
Form
Form: <O, I>(
{ action, spaReset, reloadDocument, onSubmit$, ...rest }: FormProps<O, I>,
key: string | null
) => QwikJSX.Element;
FormProps
export interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
Extends: Omit<QwikJSX.IntrinsicElements['form'], 'action' | 'method'>
Property | Modifiers | Type | Description |
---|---|---|---|
action? | ActionStore<O, I, true | false> | (Optional) Reference to the action returned by action(). | |
key? | string | number | null | (Optional) | |
onSubmit$? | (event: Event, form: HTMLFormElement) => ValueOrPromise<void> | (Optional) Event handler executed right when the form is submitted. | |
onSubmitCompleted$? | (event: CustomEvent<FormSubmitCompletedDetail<O>>, form: HTMLFormElement) => ValueOrPromise<void> | (Optional) Event handler executed right after the action is executed successfully and returns some data. | |
reloadDocument? | boolean | (Optional) When true the form submission will cause a full page reload, even if SPA mode is enabled and JS is available. | |
spaReset? | boolean | (Optional) When true all the form inputs will be reset in SPA mode, just like happens in a full page form submission.Defaults to false |
FormSubmitSuccessDetail
export interface FormSubmitCompletedDetail<T>
globalAction$
globalAction$: ActionConstructor;
globalActionQrl
globalActionQrl: ActionConstructorQRL;
JSONObject
export type JSONObject = {
[x: string]: JSONValue;
};
References: JSONValue
JSONValue
export type JSONValue =
| string
| number
| boolean
| {
[x: string]: JSONValue;
}
| Array<JSONValue>;
References: JSONValue
Link
Link: import("@builder.io/qwik").Component<LinkProps>;
LinkProps
export interface LinkProps extends AnchorAttributes
Extends: AnchorAttributes
Property | Modifiers | Type | Description |
---|---|---|---|
prefetch? | boolean | (Optional) | |
reload? | boolean | (Optional) | |
replaceState? | boolean | (Optional) |
Loader
export interface Loader<RETURN>
LoaderSignal
export type LoaderSignal<T> = T extends () => ValueOrPromise<infer B>
? ReadonlySignal<ValueOrPromise<B>>
: ReadonlySignal<T>;
MenuData
export type MenuData = [pathname: string, menuLoader: MenuModuleLoader];
NavigationType
export type NavigationType = "initial" | "form" | "link" | "popstate";
PageModule
export interface PageModule extends RouteModule
Extends: RouteModule
Property | Modifiers | Type | Description |
---|---|---|---|
default | readonly | any | |
head? | readonly | ContentModuleHead | (Optional) |
headings? | readonly | ContentHeading[] | (Optional) |
onStaticGenerate? | readonly | StaticGenerateHandler | (Optional) |
PathParams
export declare type PathParams = Record<string, string>;
QwikCityMockProps
export interface QwikCityMockProps
QwikCityMockProvider
QwikCityMockProvider: import("@builder.io/qwik").Component<QwikCityMockProps>;
QwikCityPlan
export interface QwikCityPlan
Property | Modifiers | Type | Description |
---|---|---|---|
basePathname? | readonly | string | (Optional) |
cacheModules? | readonly | boolean | (Optional) |
menus? | readonly | MenuData[] | (Optional) |
routes | readonly | RouteData[] | |
serverPlugins? | readonly | RouteModule[] | (Optional) |
trailingSlash? | readonly | boolean | (Optional) |
QwikCityProps
export interface QwikCityProps
Property | Modifiers | Type | Description |
---|---|---|---|
viewTransition? | boolean | (Optional) Enable the ViewTransition APIDefault: true |
QwikCityProvider
QwikCityProvider: import("@builder.io/qwik").Component<QwikCityProps>;
ResolvedDocumentHead
export type ResolvedDocumentHead = Required<DocumentHeadValue>;
References: DocumentHeadValue
routeAction$
routeAction$: ActionConstructor;
routeActionQrl
routeActionQrl: ActionConstructorQRL;
RouteData
export type RouteData =
| [pattern: RegExp, loaders: ModuleLoader[]]
| [pattern: RegExp, loaders: ModuleLoader[], paramNames: string[]]
| [
pattern: RegExp,
loaders: ModuleLoader[],
paramNames: string[],
originalPathname: string,
routeBundleNames: string[]
];
routeLoader$
routeLoader$: LoaderConstructor;
routeLoaderQrl
routeLoaderQrl: LoaderConstructorQRL;
RouteLocation
export interface RouteLocation
Property | Modifiers | Type | Description |
---|---|---|---|
isNavigating | readonly | boolean | |
params | readonly | Readonly<Record<string, string>> | |
prevUrl | readonly | URL | undefined | |
url | readonly | URL |
RouteNavigate
export type RouteNavigate = QRL<
(
path?: string,
options?:
| {
type?: Exclude<NavigationType, "initial">;
forceReload?: boolean;
replaceState?: boolean;
}
| boolean
) => Promise<void>
>;
References: NavigationType
RouterOutlet
RouterOutlet: import("@builder.io/qwik").Component<{}>;
server$
server$: <T extends import("./types").ServerFunction>(first: T) => QRL<T>;
serverQrl
serverQrl: ServerConstructorQRL;
ServiceWorkerRegister
ServiceWorkerRegister: (props: { nonce?: string }) =>
import("@builder.io/qwik").JSXNode<"script">;
StaticGenerate
export interface StaticGenerate
Property | Modifiers | Type | Description |
---|---|---|---|
params? | PathParams[] | (Optional) |
StaticGenerateHandler
export type StaticGenerateHandler = () =>
| Promise<StaticGenerate>
| StaticGenerate;
References: StaticGenerate
useContent
useContent: () => import("./types").ContentState;
useDocumentHead
useDocumentHead: () => Required<ResolvedDocumentHead>;
useLocation
useLocation: () => RouteLocation;
useNavigate
useNavigate: () => RouteNavigate;
validator$
validator$: ValidatorConstructor;
validatorQrl
validatorQrl: ValidatorConstructorQRL;
zod$
zod$: ZodConstructor;
ZodConstructor
export interface ZodConstructor
zodQrl
zodQrl: ZodConstructorQRL;