title |
---|
\@builder.io/qwik API Reference |
API › @builder.io/qwik
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
Extract function into a synchronously loadable QRL.
NOTE: Synchronous QRLs functions can't close over any variables, including exports.
_qrlSync: <TYPE extends Function>(fn: TYPE, serializedFn?: string) =>
SyncQRL<TYPE>;
Parameter |
Type |
Description |
---|---|---|
fn |
TYPE |
Extracted function |
serializedFn |
string |
(Optional) Serialized function in string form. |
SyncQRL<TYPE>
'q:slot'?: string;
'xlink:actuate'?: string | undefined;
'xlink:arcrole'?: string | undefined;
'xlink:href'?: string | undefined;
'xlink:role'?: string | undefined;
'xlink:show'?: string | undefined;
'xlink:title'?: string | undefined;
'xlink:type'?: string | undefined;
'xml:base'?: string | undefined;
'xml:lang'?: string | undefined;
'xml:space'?: string | undefined;
'xmlns:xlink'?: string | undefined;
Qwik Optimizer marker function.
Use $(...)
to tell Qwik Optimizer to extract the expression in $(...)
into a lazy-loadable resource referenced by QRL
.
$: <T>(expression: T) => QRL<T>;
Parameter |
Type |
Description |
---|---|---|
expression |
T |
Expression which should be lazy loaded |
QRL<T>
export interface AnchorHTMLAttributes<T extends Element> extends Attrs<'a', T>
Extends: Attrs<'a', T>
export interface AreaHTMLAttributes<T extends Element> extends Attrs<'area', T>
Extends: Attrs<'area', T>
TS defines these with the React syntax which is not compatible with Qwik. E.g. ariaAtomic
instead of aria-atomic
.
export interface AriaAttributes
Property |
Modifiers |
Type |
Description |
---|---|---|---|
string | undefined |
(Optional) Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. | ||
Booleanish | undefined |
(Optional) Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. | ||
'none' | 'inline' | 'list' | 'both' | undefined |
(Optional) Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. | ||
Booleanish | undefined |
(Optional) Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. | ||
boolean | 'false' | 'mixed' | 'true' | undefined |
(Optional) Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. | ||
number | undefined |
(Optional) Defines the total number of columns in a table, grid, or treegrid. | ||
number | undefined |
(Optional) Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. | ||
number | undefined |
(Optional) Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. | ||
string | undefined |
(Optional) Identifies the element (or elements) whose contents or presence are controlled by the current element. | ||
boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined |
(Optional) Indicates the element that represents the current item within a container or set of related elements. | ||
string | undefined |
(Optional) Identifies the element (or elements) that describes the object. | ||
string | undefined |
(Optional) Identifies the element that provides a detailed, extended description for the object. | ||
Booleanish | undefined |
(Optional) Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | ||
'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined |
(Optional) Indicates what functions can be performed when a dragged object is released on the drop target. | ||
string | undefined |
(Optional) Identifies the element that provides an error message for the object. | ||
Booleanish | undefined |
(Optional) Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. | ||
string | undefined |
(Optional) Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. | ||
Booleanish | undefined |
(Optional) Indicates an element's "grabbed" state in a drag-and-drop operation. | ||
boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined |
(Optional) Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. | ||
Booleanish | undefined |
(Optional) Indicates whether the element is exposed to an accessibility API. | ||
boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined |
(Optional) Indicates the entered value does not conform to the format expected by the application. | ||
string | undefined |
(Optional) Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. | ||
string | undefined |
(Optional) Defines a string value that labels the current element. | ||
string | undefined |
(Optional) Identifies the element (or elements) that labels the current element. | ||
number | undefined |
(Optional) Defines the hierarchical level of an element within a structure. | ||
'off' | 'assertive' | 'polite' | undefined |
(Optional) Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. | ||
Booleanish | undefined |
(Optional) Indicates whether an element is modal when displayed. | ||
Booleanish | undefined |
(Optional) Indicates whether a text box accepts multiple lines of input or only a single line. | ||
Booleanish | undefined |
(Optional) Indicates that the user may select more than one item from the current selectable descendants. | ||
'horizontal' | 'vertical' | undefined |
(Optional) Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. | ||
string | undefined |
(Optional) Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. | ||
string | undefined |
(Optional) Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. | ||
number | undefined |
(Optional) Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. | ||
boolean | 'false' | 'mixed' | 'true' | undefined |
(Optional) Indicates the current "pressed" state of toggle buttons. | ||
Booleanish | undefined |
(Optional) Indicates that the element is not editable, but is otherwise operable. | ||
'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined |
(Optional) Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. | ||
Booleanish | undefined |
(Optional) Indicates that user input is required on the element before a form may be submitted. | ||
string | undefined |
(Optional) Defines a human-readable, author-localized description for the role of an element. | ||
number | undefined |
(Optional) Defines the total number of rows in a table, grid, or treegrid. | ||
number | undefined |
(Optional) Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. | ||
number | undefined |
(Optional) Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. | ||
Booleanish | undefined |
(Optional) Indicates the current "selected" state of various widgets. | ||
number | undefined |
(Optional) Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. | ||
'none' | 'ascending' | 'descending' | 'other' | undefined |
(Optional) Indicates if items in a table or grid are sorted in ascending or descending order. | ||
number | undefined |
(Optional) Defines the maximum allowed value for a range widget. | ||
number | undefined |
(Optional) Defines the minimum allowed value for a range widget. | ||
number | undefined |
(Optional) Defines the current value for a range widget. | ||
string | undefined |
(Optional) Defines the human readable text alternative of aria-valuenow for a range widget. |
export type AriaRole =
| "alert"
| "alertdialog"
| "application"
| "article"
| "banner"
| "button"
| "cell"
| "checkbox"
| "columnheader"
| "combobox"
| "complementary"
| "contentinfo"
| "definition"
| "dialog"
| "directory"
| "document"
| "feed"
| "figure"
| "form"
| "grid"
| "gridcell"
| "group"
| "heading"
| "img"
| "link"
| "list"
| "listbox"
| "listitem"
| "log"
| "main"
| "marquee"
| "math"
| "menu"
| "menubar"
| "menuitem"
| "menuitemcheckbox"
| "menuitemradio"
| "navigation"
| "none"
| "note"
| "option"
| "presentation"
| "progressbar"
| "radio"
| "radiogroup"
| "region"
| "row"
| "rowgroup"
| "rowheader"
| "scrollbar"
| "search"
| "searchbox"
| "separator"
| "slider"
| "spinbutton"
| "status"
| "switch"
| "tab"
| "table"
| "tablist"
| "tabpanel"
| "term"
| "textbox"
| "timer"
| "toolbar"
| "tooltip"
| "tree"
| "treegrid"
| "treeitem"
| (string & {});
export interface AudioHTMLAttributes<T extends Element> extends Attrs<'audio', T>
Extends: Attrs<'audio', T>
export interface BaseHTMLAttributes<T extends Element> extends Attrs<'base', T>
Extends: Attrs<'base', T>
export interface BlockquoteHTMLAttributes<T extends Element> extends Attrs<'blockquote', T>
Extends: Attrs<'blockquote', T>
export type Booleanish = boolean | `${boolean}`;
export interface ButtonHTMLAttributes<T extends Element> extends Attrs<'button', T>
Extends: Attrs<'button', T>
cache(policyOrMilliseconds: number | 'immutable'): void;
Parameter |
Type |
Description |
---|---|---|
policyOrMilliseconds |
number | 'immutable' |
void
export interface CanvasHTMLAttributes<T extends Element> extends Attrs<'canvas', T>
Extends: Attrs<'canvas', T>
A class list can be a string, a boolean, an array, or an object.
If it's an array, each item is a class list and they are all added.
If it's an object, then the keys are class name strings, and the values are booleans that determine if the class name string should be added or not.
export type ClassList =
| string
| undefined
| null
| false
| Record<string, boolean | string | number | null | undefined>
| ClassList[];
References: ClassList
cleanup(): void;
Returns:
void
export interface ColgroupHTMLAttributes<T extends Element> extends Attrs<'colgroup', T>
Extends: Attrs<'colgroup', T>
export interface ColHTMLAttributes<T extends Element> extends Attrs<'col', T>
Extends: Attrs<'col', T>
Type representing the Qwik component.
Component
is the type returned by invoking component$
.
interface MyComponentProps {
someProp: string;
}
const MyComponent: Component<MyComponentProps> = component$(
(props: MyComponentProps) => {
return <span>{props.someProp}</span>;
},
);
export type Component<PROPS = unknown> = FunctionComponent<PublicProps<PROPS>>;
References: FunctionComponent, PublicProps
Declare a Qwik component that can be used to create UI.
Use component$
to declare a Qwik component. A Qwik component is a special kind of component that allows the Qwik framework to lazy load and execute the component independently of other Qwik components as well as lazy load the component's life-cycle hooks and event handlers.
Side note: You can also declare regular (standard JSX) components that will have standard synchronous behavior.
Qwik component is a facade that describes how the component should be used without forcing the implementation of the component to be eagerly loaded. A minimum Qwik definition consists of:
An example showing how to create a counter component:
export interface CounterProps {
initialValue?: number;
step?: number;
}
export const Counter = component$((props: CounterProps) => {
const state = useStore({ count: props.initialValue || 0 });
return (
<div>
<span>{state.count}</span>
<button onClick$={() => (state.count += props.step || 1)}>+</button>
</div>
);
});
component$
is how a component gets declared. -{ value?: number; step?: number }
declares the public (props) interface of the component. -{ count: number }
declares the private (state) interface of the component.
The above can then be used like so:
export const OtherComponent = component$(() => {
return <Counter initialValue={100} />;
});
See also: component
, useCleanup
, onResume
, onPause
, useOn
, useOnDocument
, useOnWindow
, useStyles
component$: <PROPS = unknown>(onMount: OnRenderFn<PROPS>) => Component<PROPS>;
Parameter |
Type |
Description |
---|---|---|
onMount |
OnRenderFn<PROPS> |
Component<PROPS>
export interface ComponentBaseProps
Property |
Modifiers |
Type |
Description |
---|---|---|---|
string |
(Optional) | ||
string | number | null | undefined |
(Optional) |
Declare a Qwik component that can be used to create UI.
Use component$
to declare a Qwik component. A Qwik component is a special kind of component that allows the Qwik framework to lazy load and execute the component independently of other Qwik components as well as lazy load the component's life-cycle hooks and event handlers.
Side note: You can also declare regular (standard JSX) components that will have standard synchronous behavior.
Qwik component is a facade that describes how the component should be used without forcing the implementation of the component to be eagerly loaded. A minimum Qwik definition consists of:
An example showing how to create a counter component:
export interface CounterProps {
initialValue?: number;
step?: number;
}
export const Counter = component$((props: CounterProps) => {
const state = useStore({ count: props.initialValue || 0 });
return (
<div>
<span>{state.count}</span>
<button onClick$={() => (state.count += props.step || 1)}>+</button>
</div>
);
});
component$
is how a component gets declared. -{ value?: number; step?: number }
declares the public (props) interface of the component. -{ count: number }
declares the private (state) interface of the component.
The above can then be used like so:
export const OtherComponent = component$(() => {
return <Counter initialValue={100} />;
});
See also: component
, useCleanup
, onResume
, onPause
, useOn
, useOnDocument
, useOnWindow
, useStyles
componentQrl: <PROPS extends Record<any, any>>(
componentQrl: QRL<OnRenderFn<PROPS>>,
) => Component<PROPS>;
Parameter |
Type |
Description |
---|---|---|
componentQrl |
QRL<OnRenderFn<PROPS>> |
Component<PROPS>
ContextId is a typesafe ID for your context.
Context is a way to pass stores to the child components without prop-drilling.
Use createContextId()
to create a ContextId
. A ContextId
is just a serializable identifier for the context. It is not the context value itself. See useContextProvider()
and useContext()
for the values. Qwik needs a serializable ID for the context so that the it can track context providers and consumers in a way that survives resumability.
// Declare the Context type.
interface TodosStore {
items: string[];
}
// Create a Context ID (no data is saved here.)
// You will use this ID to both create and retrieve the Context.
export const TodosContext = createContextId<TodosStore>("Todos");
// Example of providing context to child components.
export const App = component$(() => {
useContextProvider(
TodosContext,
useStore<TodosStore>({
items: ["Learn Qwik", "Build Qwik app", "Profit"],
}),
);
return <Items />;
});
// Example of retrieving the context provided by a parent component.
export const Items = component$(() => {
const todos = useContext(TodosContext);
return (
<ul>
{todos.items.map((item) => (
<li>{item}</li>
))}
</ul>
);
});
export interface ContextId<STATE>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
|
STATE |
Design-time property to store type information for the context. | |
|
string |
A unique ID for the context. |
Low-level API for platform abstraction.
Different platforms (browser, node, service workers) may have different ways of handling things such as requestAnimationFrame
and imports. To make Qwik platform-independent Qwik uses the CorePlatform
API to access the platform API.
CorePlatform
also is responsible for importing symbols. The import map is different on the client (browser) then on the server. For this reason, the server has a manifest that is used to map symbols to javascript chunks. The manifest is encapsulated in CorePlatform
, for this reason, the CorePlatform
can't be global as there may be multiple applications running at server concurrently.
This is a low-level API and there should not be a need for you to access this.
export interface CorePlatform
Property |
Modifiers |
Type |
Description |
---|---|---|---|
(symbolName: string, chunk: string | null) => readonly [symbol: string, chunk: string] | undefined |
Retrieve chunk name for the symbol. When the application is running on the server the symbols may be imported from different files (as server build is typically a single javascript chunk.) For this reason, it is necessary to convert the chunks from server format to client (browser) format. This is done by looking up symbols (which are globally unique) in the manifest. (Manifest is the mapping of symbols to the client chunk names.) | ||
(containerEl: Element | undefined, url: string | URL | undefined | null, symbol: string) => ValueOrPromise<any> |
Retrieve a symbol value from QRL. Qwik needs to lazy load data and closures. For this Qwik uses QRLs that are serializable references of resources that are needed. The QRLs contain all the information necessary to retrieve the reference using Why not use | ||
boolean |
True of running on the server platform. | ||
(fn: () => any) => Promise<any> |
Perform operation on next tick. | ||
(fn: () => any) => Promise<any> |
Perform operation on next request-animation-frame. |
This corrects the TS definition for ToggleEvent
export interface CorrectedToggleEvent extends Event
Extends: Event
Property |
Modifiers |
Type |
Description |
---|---|---|---|
|
'open' | 'closed' | ||
|
'open' | 'closed' |
Create a context ID to be used in your application. The name should be written with no spaces.
Context is a way to pass stores to the child components without prop-drilling.
Use createContextId()
to create a ContextId
. A ContextId
is just a serializable identifier for the context. It is not the context value itself. See useContextProvider()
and useContext()
for the values. Qwik needs a serializable ID for the context so that the it can track context providers and consumers in a way that survives resumability.
// Declare the Context type.
interface TodosStore {
items: string[];
}
// Create a Context ID (no data is saved here.)
// You will use this ID to both create and retrieve the Context.
export const TodosContext = createContextId<TodosStore>("Todos");
// Example of providing context to child components.
export const App = component$(() => {
useContextProvider(
TodosContext,
useStore<TodosStore>({
items: ["Learn Qwik", "Build Qwik app", "Profit"],
}),
);
return <Items />;
});
// Example of retrieving the context provided by a parent component.
export const Items = component$(() => {
const todos = useContext(TodosContext);
return (
<ul>
{todos.items.map((item) => (
<li>{item}</li>
))}
</ul>
);
});
createContextId: <STATE = unknown>(name: string) => ContextId<STATE>;
Parameter |
Type |
Description |
---|---|---|
name |
string |
The name of the context. |
ContextId<STATE>
export interface CSSProperties extends CSS.Properties<string | number>, CSS.PropertiesHyphen<string | number>
Extends: CSS.Properties<string | number>, CSS.PropertiesHyphen<string | number>
export interface DataHTMLAttributes<T extends Element> extends Attrs<'data', T>
Extends: Attrs<'data', T>
export interface DelHTMLAttributes<T extends Element> extends Attrs<'del', T>
Extends: Attrs<'del', T>
export interface DetailsHTMLAttributes<T extends Element> extends Attrs<'details', T>
Extends: Attrs<'details', T>
export interface DevJSX
Property |
Modifiers |
Type |
Description |
---|---|---|---|
number | |||
string | |||
number | |||
string |
(Optional) |
export interface DialogHTMLAttributes<T extends Element> extends Attrs<'dialog', T>
Extends: Attrs<'dialog', T>
The Qwik-specific attributes that DOM elements accept
export interface DOMAttributes<EL extends Element> extends DOMAttributesBase<EL>, QwikEvents<EL>
Extends: DOMAttributesBase<EL>, QwikEvents<EL>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
(Optional) |
export type EagernessOptions = "visible" | "load" | "idle";
type Element = JSXOutput;
References: JSXOutput
interface ElementChildrenAttribute
Property |
Modifiers |
Type |
Description |
---|---|---|---|
type ElementType = string | FunctionComponent<Record<any, any>>;
References: FunctionComponent
export interface EmbedHTMLAttributes<T extends Element> extends Attrs<'embed', T>
Extends: Attrs<'embed', T>
export interface ErrorBoundaryStore
Property |
Modifiers |
Type |
Description |
---|---|---|---|
any | undefined |
event$: <T>(first: T) => QRL<T>;
Parameter |
Type |
Description |
---|---|---|
first |
T |
QRL<T>
A DOM event handler
export type EventHandler<EV = Event, EL = Element> = {
bivarianceHack(event: EV, element: EL): any;
}["bivarianceHack"];
eventQrl: <T>(qrl: QRL<T>) => QRL<T>;
Parameter |
Type |
Description |
---|---|---|
qrl |
QRL<T> |
QRL<T>
export interface FieldsetHTMLAttributes<T extends Element> extends Attrs<'fieldset', T>
Extends: Attrs<'fieldset', T>
export interface FormHTMLAttributes<T extends Element> extends Attrs<'form', T>
Extends: Attrs<'form', T>
Fragment: FunctionComponent<{
children?: any;
key?: string | number | null;
}>;
Any function taking a props object that returns JSXOutput.
The key
, flags
and dev
parameters are for internal use.
export type FunctionComponent<P = unknown> = {
renderFn(
props: P,
key: string | null,
flags: number,
dev?: DevJSX,
): JSXOutput;
}["renderFn"];
export declare function getDomContainer(
element: Element | ElementVNode,
): IClientContainer;
Parameter |
Type |
Description |
---|---|---|
element |
Element | ElementVNode |
IClientContainer
Retrieve the CorePlatform
.
The CorePlatform
is also responsible for retrieving the Manifest, that contains mappings from symbols to javascript import chunks. For this reason, CorePlatform
can't be global, but is specific to the application currently running. On server it is possible that many different applications are running in a single server instance, and for this reason the CorePlatform
is associated with the application document.
getPlatform: () => CorePlatform;
Returns:
The legacy transform, used in special cases like <div {...props} key="key" />
. Note that the children are spread arguments, instead of a prop like in jsx() calls.
Also note that this disables optimizations.
export declare function h<
TYPE extends string | FunctionComponent<PROPS>,
PROPS extends {} = {},
>(type: TYPE, props?: PROPS | null, ...children: any[]): JSXNode<TYPE>;
Parameter |
Type |
Description |
---|---|---|
type |
TYPE | |
props |
PROPS | null |
(Optional) |
children |
any[] |
JSXNode<TYPE>
export interface HrHTMLAttributes<T extends Element> extends Attrs<'hr', T>
Extends: Attrs<'hr', T>
export type HTMLAttributeAnchorTarget =
| "_self"
| "_blank"
| "_parent"
| "_top"
| (string & {});
export type HTMLAttributeReferrerPolicy = ReferrerPolicy;
export interface HTMLAttributes<E extends Element> extends HTMLElementAttrs, DOMAttributes<E>
Extends: HTMLElementAttrs, DOMAttributes<E>
export type HTMLCrossOriginAttribute =
| "anonymous"
| "use-credentials"
| ""
| undefined;
export interface HTMLElementAttrs extends HTMLAttributesBase, FilterBase<HTMLElement>
Extends: HTMLAttributesBase, FilterBase<HTMLElement>
HTMLFragment: FunctionComponent<{
dangerouslySetInnerHTML: string;
}>;
export interface HtmlHTMLAttributes<T extends Element> extends Attrs<'html', T>
Extends: Attrs<'html', T>
export type HTMLInputAutocompleteAttribute =
| "on"
| "off"
| "billing"
| "shipping"
| "name"
| "honorific-prefix"
| "given-name"
| "additional-name"
| "family-name"
| "honorific-suffix"
| "nickname"
| "username"
| "new-password"
| "current-password"
| "one-time-code"
| "organization-title"
| "organization"
| "street-address"
| "address-line1"
| "address-line2"
| "address-line3"
| "address-level4"
| "address-level3"
| "address-level2"
| "address-level1"
| "country"
| "country-name"
| "postal-code"
| "cc-name"
| "cc-given-name"
| "cc-additional-name"
| "cc-family-name"
| "cc-number"
| "cc-exp"
| "cc-exp-month"
| "cc-exp-year"
| "cc-csc"
| "cc-type"
| "transaction-currency"
| "transaction-amount"
| "language"
| "bday"
| "bday-day"
| "bday-month"
| "bday-year"
| "sex"
| "url"
| "photo";
export type HTMLInputTypeAttribute =
| "button"
| "checkbox"
| "color"
| "date"
| "datetime-local"
| "email"
| "file"
| "hidden"
| "image"
| "month"
| "number"
| "password"
| "radio"
| "range"
| "reset"
| "search"
| "submit"
| "tel"
| "text"
| "time"
| "url"
| "week"
| (string & {});
export interface IframeHTMLAttributes<T extends Element> extends Attrs<'iframe', T>
Extends: Attrs<'iframe', T>
export interface ImgHTMLAttributes<T extends Element> extends Attrs<'img', T>
Extends: Attrs<'img', T>
Create a ____$(...)
convenience method from ___(...)
.
It is very common for functions to take a lazy-loadable resource as a first argument. For this reason, the Qwik Optimizer automatically extracts the first argument from any function which ends in $
.
This means that foo$(arg0)
and foo($(arg0))
are equivalent with respect to Qwik Optimizer. The former is just a shorthand for the latter.
For example, these function calls are equivalent:
component$(() => {...})
is same ascomponent($(() => {...}))
export function myApi(callback: QRL<() => void>): void {
// ...
}
export const myApi$ = implicit$FirstArg(myApi);
// type of myApi$: (callback: () => void): void
// can be used as:
myApi$(() => console.log("callback"));
// will be transpiled to:
// FILE: <current file>
myApi(qrl("./chunk-abc.js", "callback"));
// FILE: chunk-abc.js
export const callback = () => console.log("callback");
implicit$FirstArg: <FIRST, REST extends any[], RET>(
fn: (first: QRL<FIRST>, ...rest: REST) => RET,
) =>
(first: FIRST, ...rest: REST) =>
RET;
Parameter |
Type |
Description |
---|---|---|
fn |
(first: QRL<FIRST>, ...rest: REST) => RET |
A function that should have its first argument automatically |
((first: FIRST, ...rest: REST) => RET)
export type InputHTMLAttributes<T extends Element> = Attrs<
"input",
T,
HTMLInputElement
>;
export interface InsHTMLAttributes<T extends Element> extends Attrs<'ins', T>
Extends: Attrs<'ins', T>
interface IntrinsicAttributes extends QwikIntrinsicAttributes
Extends: QwikIntrinsicAttributes
export interface IntrinsicElements extends IntrinsicHTMLElements, IntrinsicSVGElements
Extends: IntrinsicHTMLElements, IntrinsicSVGElements
Checks if a given object is a Signal
.
isSignal: <T = unknown>(obj: any) => obj is Signal<T>
Parameter |
Type |
Description |
---|---|---|
obj |
any |
The object to check if |
obj is Signal<T>
Boolean - True if the object is a Signal
.
Used by the JSX transpilers to create a JSXNode. Note that the optimizer will not use this, instead using _jsxC and _jsxQ directly.
jsx: <T extends string | FunctionComponent<any>>(
type: T,
props: T extends FunctionComponent<infer PROPS> ? PROPS : Props,
key?: string | number | null,
) => JSXNode<T>;
Parameter |
Type |
Description |
---|---|---|
type |
T | |
props |
T extends FunctionComponent<infer PROPS> ? PROPS : Props | |
key |
string | number | null |
(Optional) |
JSXNode<T>
export type JSXChildren =
| string
| number
| boolean
| null
| undefined
| Function
| RegExp
| JSXChildren[]
| Promise<JSXChildren>
| Signal<JSXChildren>
| JSXNode;
References: JSXChildren, Signal, JSXNode
jsxDEV: <T extends string | FunctionComponent<Props>>(
type: T,
props: T extends FunctionComponent<infer PROPS> ? PROPS : Props,
key: string | number | null | undefined,
_isStatic: boolean,
opts: JsxDevOpts,
_ctx: unknown,
) => JSXNode<T>;
Parameter |
Type |
Description |
---|---|---|
type |
T | |
props |
T extends FunctionComponent<infer PROPS> ? PROPS : Props | |
key |
string | number | null | undefined | |
_isStatic |
boolean | |
opts |
JsxDevOpts | |
_ctx |
unknown |
JSXNode<T>
A JSX Node, an internal structure. You probably want to use JSXOutput
instead.
export interface JSXNode<T extends string | FunctionComponent | unknown = unknown>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
JSXChildren | null | |||
Record<any, unknown> | null | |||
(Optional) | |||
number | |||
string | null | |||
T extends FunctionComponent<infer P> ? P : Record<any, unknown> | |||
T | |||
Record<any, unknown> |
Any valid output for a component
export type JSXOutput =
| JSXNode
| string
| number
| boolean
| null
| undefined
| JSXOutput[];
References: JSXNode, JSXOutput
export type JSXTagName =
| keyof HTMLElementTagNameMap
| Omit<string, keyof HTMLElementTagNameMap>;
Warning: This API is now obsolete.
in html5
export interface KeygenHTMLAttributes<T extends Element> extends Attrs<'base', T>
Extends: Attrs<'base', T>
The names of events that Qwik knows about. They are all lowercase, but on the JSX side, they are PascalCase for nicer DX. (onAuxClick$
vs onauxclick$
)
export type KnownEventNames = LiteralUnion<AllEventKeys, string>;
export interface LabelHTMLAttributes<T extends Element> extends Attrs<'label', T>
Extends: Attrs<'label', T>
export interface LiHTMLAttributes<T extends Element> extends Attrs<'li', T>
Extends: Attrs<'li', T>
export interface LinkHTMLAttributes<T extends Element> extends Attrs<'link', T>
Extends: Attrs<'link', T>
export interface MapHTMLAttributes<T extends Element> extends Attrs<'map', T>
Extends: Attrs<'map', T>
export interface MediaHTMLAttributes<T extends Element> extends HTMLAttributes<T>, Augmented<HTMLMediaElement, {
crossOrigin?: HTMLCrossOriginAttribute;
}>
Extends: HTMLAttributes<T>, Augmented<HTMLMediaElement, { crossOrigin?: HTMLCrossOriginAttribute; }>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
(Optional) |
export interface MenuHTMLAttributes<T extends Element> extends Attrs<'menu', T>
Extends: Attrs<'menu', T>
export interface MetaHTMLAttributes<T extends Element> extends Attrs<'meta', T>
Extends: Attrs<'meta', T>
export interface MeterHTMLAttributes<T extends Element> extends Attrs<'meter', T>
Extends: Attrs<'meter', T>
Warning: This API is now obsolete.
Use
AnimationEvent
and use the second argument to the handler function for the current event target
export type NativeAnimationEvent = AnimationEvent;
Warning: This API is now obsolete.
Use
ClipboardEvent
and use the second argument to the handler function for the current event target
export type NativeClipboardEvent = ClipboardEvent;
Warning: This API is now obsolete.
Use
CompositionEvent
and use the second argument to the handler function for the current event target
export type NativeCompositionEvent = CompositionEvent;
Warning: This API is now obsolete.
Use
DragEvent
and use the second argument to the handler function for the current event target
export type NativeDragEvent = DragEvent;
Warning: This API is now obsolete.
Use
FocusEvent
and use the second argument to the handler function for the current event target
export type NativeFocusEvent = FocusEvent;
Warning: This API is now obsolete.
Use
KeyboardEvent
and use the second argument to the handler function for the current event target
export type NativeKeyboardEvent = KeyboardEvent;
Warning: This API is now obsolete.
Use
MouseEvent
and use the second argument to the handler function for the current event target
export type NativeMouseEvent = MouseEvent;
Warning: This API is now obsolete.
Use
PointerEvent
and use the second argument to the handler function for the current event target
export type NativePointerEvent = PointerEvent;
Warning: This API is now obsolete.
Use
TouchEvent
and use the second argument to the handler function for the current event target
export type NativeTouchEvent = TouchEvent;
Warning: This API is now obsolete.
Use
TransitionEvent
and use the second argument to the handler function for the current event target
export type NativeTransitionEvent = TransitionEvent;
Warning: This API is now obsolete.
Use
UIEvent
and use the second argument to the handler function for the current event target
export type NativeUIEvent = UIEvent;
Warning: This API is now obsolete.
Use
WheelEvent
and use the second argument to the handler function for the current event target
export type NativeWheelEvent = WheelEvent;
Returned type of the noSerialize()
function. It will be TYPE or undefined.
export type NoSerialize<T> =
| (T & {
__no_serialize__: true;
})
| undefined;
Returned type of the noSerialize()
function. It will be TYPE or undefined.
export type NoSerialize<T> =
| (T & {
__no_serialize__: true;
})
| undefined;
export type Numberish = number | `${number}`;
export interface ObjectHTMLAttributes<T extends Element> extends Attrs<'object', T>
Extends: Attrs<'object', T>
export interface OlHTMLAttributes<T extends Element> extends Attrs<'ol', T>
Extends: Attrs<'ol', T>
export type OnRenderFn<PROPS> = (props: PROPS) => JSXOutput;
References: JSXOutput
export interface OnVisibleTaskOptions
Property |
Modifiers |
Type |
Description |
---|---|---|---|
(Optional) The strategy to use to determine when the "VisibleTask" should first execute.
|
export interface OptgroupHTMLAttributes<T extends Element> extends Attrs<'optgroup', T>
Extends: Attrs<'optgroup', T>
export interface OptionHTMLAttributes<T extends Element> extends Attrs<'option', T>
Extends: Attrs<'option', T>
export interface OutputHTMLAttributes<T extends Element> extends Attrs<'output', T>
Extends: Attrs<'output', T>
Warning: This API is now obsolete.
Old DOM API
export interface ParamHTMLAttributes<T extends Element> extends Attrs<'base', T, HTMLParamElement>
Extends: Attrs<'base', T, HTMLParamElement>
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
Load the prefetch graph for the container.
Each Qwik container needs to include its own prefetch graph.
PrefetchGraph: (opts?: {
base?: string;
manifestHash?: string;
manifestURL?: string;
}) => import("@builder.io/qwik/jsx-runtime").JSXNode<string>;
Parameter |
Type |
Description |
---|---|---|
opts |
{ base?: string; manifestHash?: string; manifestURL?: string; } |
(Optional) Options for the loading prefetch graph.
|
import("@builder.io/qwik/jsx-runtime").JSXNode<string>
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
Install a service worker which will prefetch the bundles.
There can only be one service worker per page. Because there can be many separate Qwik Containers on the page each container needs to load its prefetch graph using PrefetchGraph
component.
PrefetchServiceWorker: (opts: {
base?: string;
path?: string;
verbose?: boolean;
fetchBundleGraph?: boolean;
}) => import("@builder.io/qwik/jsx-runtime").JSXNode<string>;
Parameter |
Type |
Description |
---|---|---|
opts |
{ base?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; } |
Options for the prefetch service worker.
|
import("@builder.io/qwik/jsx-runtime").JSXNode<string>
export interface ProgressHTMLAttributes<T extends Element> extends Attrs<'progress', T>
Extends: Attrs<'progress', T>
Warning: This API is now obsolete.
Use
QRL<>
instead
export type PropFnInterface<ARGS extends any[], RET> = {
__qwik_serializable__?: any;
(...args: ARGS): Promise<RET>;
};
Alias for QRL<T>
. Of historic relevance only.
export type PropFunction<T> = QRL<T>;
References: QRL
Warning: This API is now obsolete.
Use
QRL<>
on your function props instead
export type PropFunctionProps<PROPS extends Record<any, any>> = {
[K in keyof PROPS]: PROPS[K] extends undefined
? PROPS[K]
: PROPS[K] extends ((...args: infer ARGS) => infer RET) | undefined
? PropFnInterface<ARGS, Awaited<RET>>
: PROPS[K];
};
References: PropFnInterface
Infers Props
from the component or tag.
export type PropsOf<COMP> = COMP extends string
? COMP extends keyof QwikIntrinsicElements
? QwikIntrinsicElements[COMP]
: QwikIntrinsicElements["span"]
: NonNullable<COMP> extends never
? never
: COMP extends FunctionComponent<infer PROPS>
? PROPS extends Record<any, infer V>
? IsAny<V> extends true
? never
: ObjectProps<PROPS>
: COMP extends Component<infer OrigProps>
? ObjectProps<OrigProps>
: PROPS
: never;
References: QwikIntrinsicElements, FunctionComponent, Component
const Desc = component$(
({ desc, ...props }: { desc: string } & PropsOf<"div">) => {
return <div {...props}>{desc}</div>;
},
);
const TitleBox = component$(
({ title, ...props }: { title: string } & PropsOf<Box>) => {
return (
<Box {...props}>
<h1>{title}</h1>
</Box>
);
},
);
Extends the defined component PROPS, adding the default ones (children and q:slot) and allowing plain functions to QRL arguments.
export type PublicProps<PROPS> = (PROPS extends Record<any, any>
? Omit<PROPS, `${string}$`> & _Only$<PROPS>
: unknown extends PROPS
? {}
: PROPS) &
ComponentBaseProps &
ComponentChildren<PROPS>;
References: ComponentBaseProps
The QRL
type represents a lazy-loadable AND serializable resource.
QRL stands for Qwik URL.
Use QRL
when you want to refer to a lazy-loaded resource. QRL
s are most often used for code (functions) but can also be used for other resources such as string
s in the case of styles.
QRL
is an opaque token that is generated by the Qwik Optimizer. (Do not rely on any properties in QRL
as it may change between versions.)
## Creating QRL
references
Creating QRL
is done using $(...)
function. $(...)
is a special marker for the Qwik Optimizer that marks that the code should be extracted into a lazy-loaded symbol.
useOnDocument(
"mousemove",
$((event) => console.log("mousemove", event)),
);
In the above code, the Qwik Optimizer detects $(...)
and transforms the code as shown below:
// FILE: <current file>
useOnDocument("mousemove", qrl("./chunk-abc.js", "onMousemove"));
// FILE: chunk-abc.js
export const onMousemove = () => console.log("mousemove");
NOTE: qrl(...)
is a result of Qwik Optimizer transformation. You should never have to invoke this function directly in your application. The qrl(...)
function should be invoked only after the Qwik Optimizer transformation.
## Using QRL
s
Use QRL
type in your application when you want to get a lazy-loadable reference to a resource (most likely a function).
// Example of declaring a custom functions which takes callback as QRL.
export function useMyFunction(callback: QRL<() => void>) {
doExtraStuff();
// The callback passed to `onDocument` requires `QRL`.
useOnDocument("mousemove", callback);
}
In the above example, the way to think about the code is that you are not asking for a callback function but rather a reference to a lazy-loadable callback function. Specifically, the function loading should be delayed until it is actually needed. In the above example, the function would not load until after a mousemove
event on document
fires.
## Resolving QRL
references
At times it may be necessary to resolve a QRL
reference to the actual value. This can be performed using QRL.resolve(..)
function.
// Assume you have QRL reference to a greet function
const lazyGreet: QRL<() => void> = $(() => console.log("Hello World!"));
// Use `qrlImport` to load / resolve the reference.
const greet: () => void = await lazyGreet.resolve();
// Invoke it
greet();
NOTE: element
is needed because QRL
s are relative and need a base location to resolve against. The base location is encoded in the HTML in the form of <div q:base="/url">
.
## QRL.resolved
Once QRL.resolve()
returns, the value is stored under QRL.resolved
. This allows the value to be used without having to await QRL.resolve()
again.
## Question: Why not just use import()
?
At first glance, QRL
serves the same purpose as import()
. However, there are three subtle differences that need to be taken into account.
QRL
s must be serializable into HTML. 2.QRL
s must be resolved by framework relative toq:base
. 3.QRL
s must be able to capture lexically scoped variables. 4.QRL
s encapsulate the difference between running with and without Qwik Optimizer. 5.QRL
s allow expressing lazy-loaded boundaries without thinking about chunk and symbol names.
Let's assume that you intend to write code such as this:
return <button onClick={() => (await import('./chunk-abc.js')).onClick}>
The above code needs to be serialized into DOM such as:
<div q:base="/build/">
<button on:click="./chunk-abc.js#onClick">...</button>
</div>
- Notice there is no easy way to extract chunk (
./chunk-abc.js
) and symbol (onClick
) into HTML. 2. Notice that even if you could extract it, theimport('./chunk-abc.js')
would become relative to where theimport()
file is declared. Because it is our framework doing the load, the./chunk-abc.js
would become relative to the framework file. This is not correct, as it should be relative to the original file generated by the bundler. 3. Next, the framework needs to resolve the./chunk-abc.js
and needs a base location that is encoded in the HTML. 4. The QRL needs to be able to capture lexically scoped variables. (import()
only allows loading top-level symbols which don't capture variables.) 5. As a developer, you don't want to think aboutimport
and naming the chunks and symbols. You just want to say: "this should be lazy."
These are the main reasons why Qwik introduces its own concept of QRL
.
export type QRL<TYPE = unknown> = {
__qwik_serializable__?: any;
__brand__QRL__: TYPE;
resolve(): Promise<TYPE>;
resolved: undefined | TYPE;
getCaptured(): unknown[] | null;
getSymbol(): string;
getHash(): string;
dev: QRLDev | null;
} & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
The QRL
type represents a lazy-loadable AND serializable resource.
QRL stands for Qwik URL.
Use QRL
when you want to refer to a lazy-loaded resource. QRL
s are most often used for code (functions) but can also be used for other resources such as string
s in the case of styles.
QRL
is an opaque token that is generated by the Qwik Optimizer. (Do not rely on any properties in QRL
as it may change between versions.)
## Creating QRL
references
Creating QRL
is done using $(...)
function. $(...)
is a special marker for the Qwik Optimizer that marks that the code should be extracted into a lazy-loaded symbol.
useOnDocument(
"mousemove",
$((event) => console.log("mousemove", event)),
);
In the above code, the Qwik Optimizer detects $(...)
and transforms the code as shown below:
// FILE: <current file>
useOnDocument("mousemove", qrl("./chunk-abc.js", "onMousemove"));
// FILE: chunk-abc.js
export const onMousemove = () => console.log("mousemove");
NOTE: qrl(...)
is a result of Qwik Optimizer transformation. You should never have to invoke this function directly in your application. The qrl(...)
function should be invoked only after the Qwik Optimizer transformation.
## Using QRL
s
Use QRL
type in your application when you want to get a lazy-loadable reference to a resource (most likely a function).
// Example of declaring a custom functions which takes callback as QRL.
export function useMyFunction(callback: QRL<() => void>) {
doExtraStuff();
// The callback passed to `onDocument` requires `QRL`.
useOnDocument("mousemove", callback);
}
In the above example, the way to think about the code is that you are not asking for a callback function but rather a reference to a lazy-loadable callback function. Specifically, the function loading should be delayed until it is actually needed. In the above example, the function would not load until after a mousemove
event on document
fires.
## Resolving QRL
references
At times it may be necessary to resolve a QRL
reference to the actual value. This can be performed using QRL.resolve(..)
function.
// Assume you have QRL reference to a greet function
const lazyGreet: QRL<() => void> = $(() => console.log("Hello World!"));
// Use `qrlImport` to load / resolve the reference.
const greet: () => void = await lazyGreet.resolve();
// Invoke it
greet();
NOTE: element
is needed because QRL
s are relative and need a base location to resolve against. The base location is encoded in the HTML in the form of <div q:base="/url">
.
## QRL.resolved
Once QRL.resolve()
returns, the value is stored under QRL.resolved
. This allows the value to be used without having to await QRL.resolve()
again.
## Question: Why not just use import()
?
At first glance, QRL
serves the same purpose as import()
. However, there are three subtle differences that need to be taken into account.
QRL
s must be serializable into HTML. 2.QRL
s must be resolved by framework relative toq:base
. 3.QRL
s must be able to capture lexically scoped variables. 4.QRL
s encapsulate the difference between running with and without Qwik Optimizer. 5.QRL
s allow expressing lazy-loaded boundaries without thinking about chunk and symbol names.
Let's assume that you intend to write code such as this:
return <button onClick={() => (await import('./chunk-abc.js')).onClick}>
The above code needs to be serialized into DOM such as:
<div q:base="/build/">
<button on:click="./chunk-abc.js#onClick">...</button>
</div>
- Notice there is no easy way to extract chunk (
./chunk-abc.js
) and symbol (onClick
) into HTML. 2. Notice that even if you could extract it, theimport('./chunk-abc.js')
would become relative to where theimport()
file is declared. Because it is our framework doing the load, the./chunk-abc.js
would become relative to the framework file. This is not correct, as it should be relative to the original file generated by the bundler. 3. Next, the framework needs to resolve the./chunk-abc.js
and needs a base location that is encoded in the HTML. 4. The QRL needs to be able to capture lexically scoped variables. (import()
only allows loading top-level symbols which don't capture variables.) 5. As a developer, you don't want to think aboutimport
and naming the chunks and symbols. You just want to say: "this should be lazy."
These are the main reasons why Qwik introduces its own concept of QRL
.
export type QRL<TYPE = unknown> = {
__qwik_serializable__?: any;
__brand__QRL__: TYPE;
resolve(): Promise<TYPE>;
resolved: undefined | TYPE;
getCaptured(): unknown[] | null;
getSymbol(): string;
getHash(): string;
dev: QRLDev | null;
} & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
An event handler for Qwik events, can be a handler QRL or an array of handler QRLs.
export type QRLEventHandlerMulti<EV extends Event, EL> =
| QRL<EventHandler<EV, EL>>
| undefined
| null
| QRLEventHandlerMulti<EV, EL>[];
References: QRL, EventHandler, QRLEventHandlerMulti
export interface QuoteHTMLAttributes<T extends Element> extends Attrs<'q', T>
Extends: Attrs<'q', T>
Warning: This API is now obsolete.
Use
AnimationEvent
and use the second argument to the handler function for the current event target
export type QwikAnimationEvent<T = Element> = NativeAnimationEvent;
References: NativeAnimationEvent
The Qwik DOM attributes without plain handlers, for use as function parameters
export interface QwikAttributes<EL extends Element> extends DOMAttributesBase<EL>, QwikEvents<EL, false>
Extends: DOMAttributesBase<EL>, QwikEvents<EL, false>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
ClassList | undefined |
(Optional) |
Warning: This API is now obsolete.
Use
Event
and use the second argument to the handler function for the current event target. Also note that in Qwik, onInput$ with the InputEvent is the event that behaves like onChange in React.
export type QwikChangeEvent<T = Element> = Event;
Warning: This API is now obsolete.
Use
ClipboardEvent
and use the second argument to the handler function for the current event target
export type QwikClipboardEvent<T = Element> = NativeClipboardEvent;
References: NativeClipboardEvent
Warning: This API is now obsolete.
Use
CompositionEvent
and use the second argument to the handler function for the current event target
export type QwikCompositionEvent<T = Element> = NativeCompositionEvent;
References: NativeCompositionEvent
export interface QwikDOMAttributes extends DOMAttributes<Element>
Extends: DOMAttributes<Element>
Warning: This API is now obsolete.
Use
DragEvent
and use the second argument to the handler function for the current event target
export type QwikDragEvent<T = Element> = NativeDragEvent;
References: NativeDragEvent
Warning: This API is now obsolete.
Use
FocusEvent
and use the second argument to the handler function for the current event target
export type QwikFocusEvent<T = Element> = NativeFocusEvent;
References: NativeFocusEvent
The DOM props without plain handlers, for use inside functions
export type QwikHTMLElements = {
[tag in keyof HTMLElementTagNameMap]: Augmented<
HTMLElementTagNameMap[tag],
SpecialAttrs[tag]
> &
HTMLElementAttrs &
QwikAttributes<HTMLElementTagNameMap[tag]>;
};
References: HTMLElementAttrs, QwikAttributes
Emitted by qwik-loader on document when the document first becomes idle
export type QwikIdleEvent = CustomEvent<{}>;
Emitted by qwik-loader on document when the document first becomes interactive
export type QwikInitEvent = CustomEvent<{}>;
The interface holds available attributes of both native DOM elements and custom Qwik elements. An example showing how to define a customizable wrapper component:
import { component$, Slot, type QwikIntrinsicElements } from "@builder.io/qwik";
type WrapperProps = {
attributes?: QwikIntrinsicElements["div"];
};
export default component$<WrapperProps>(({ attributes }) => {
return (
<div {...attributes} class="p-2">
<Slot />
</div>
);
});
Note: It is shorter to use PropsOf<'div'>
export interface QwikIntrinsicElements extends QwikHTMLElements, QwikSVGElements
Extends: QwikHTMLElements, QwikSVGElements
Warning: This API is now obsolete.
Use
Event
and use the second argument to the handler function for the current event target
export type QwikInvalidEvent<T = Element> = Event;
export declare namespace QwikJSX
Interface |
Description |
---|---|
Type Alias |
Description |
---|---|
Warning: This API is now obsolete.
Use
KeyboardEvent
and use the second argument to the handler function for the current event target
export type QwikKeyboardEvent<T = Element> = NativeKeyboardEvent;
References: NativeKeyboardEvent
Warning: This API is now obsolete.
Use
MouseEvent
and use the second argument to the handler function for the current event target
export type QwikMouseEvent<T = Element, E = NativeMouseEvent> = E;
References: NativeMouseEvent
Warning: This API is now obsolete.
Use
PointerEvent
and use the second argument to the handler function for the current event target
export type QwikPointerEvent<T = Element> = NativePointerEvent;
References: NativePointerEvent
Warning: This API is now obsolete.
Use
SubmitEvent
and use the second argument to the handler function for the current event target
export type QwikSubmitEvent<T = Element> = SubmitEvent;
The SVG props without plain handlers, for use inside functions
export type QwikSVGElements = {
[K in keyof Omit<
SVGElementTagNameMap,
keyof HTMLElementTagNameMap
>]: SVGProps<SVGElementTagNameMap[K]>;
};
References: SVGProps
Emitted by qwik-loader when a module was lazily loaded
export type QwikSymbolEvent = CustomEvent<{
symbol: string;
element: Element;
reqTime: number;
}>;
Warning: This API is now obsolete.
Use
TouchEvent
and use the second argument to the handler function for the current event target
export type QwikTouchEvent<T = Element> = NativeTouchEvent;
References: NativeTouchEvent
Warning: This API is now obsolete.
Use
TransitionEvent
and use the second argument to the handler function for the current event target
export type QwikTransitionEvent<T = Element> = NativeTransitionEvent;
References: NativeTransitionEvent
Warning: This API is now obsolete.
Use
UIEvent
and use the second argument to the handler function for the current event target
export type QwikUIEvent<T = Element> = NativeUIEvent;
References: NativeUIEvent
Emitted by qwik-loader when an element becomes visible. Used by useVisibleTask$
export type QwikVisibleEvent = CustomEvent<IntersectionObserverEntry>;
Warning: This API is now obsolete.
Use
WheelEvent
and use the second argument to the handler function for the current event target
export type QwikWheelEvent<T = Element> = NativeWheelEvent;
References: NativeWheelEvent
export type ReadonlySignal<T = unknown> = Readonly<Signal<T>>;
References: Signal
Render JSX.
Use this method to render JSX. This function does reconciling which means it always tries to reuse what is already in the DOM (rather then destroy and recreate content.) It returns a cleanup function you could use for cleaning up subscriptions.
render2: (
parent: Element | Document,
jsxNode: JSXOutput | FunctionComponent<any>,
opts?: RenderOptions,
) => Promise<RenderResult>;
Parameter |
Type |
Description |
---|---|---|
parent |
Element | Document |
Element which will act as a parent to |
jsxNode |
JSXOutput | FunctionComponent<any> |
JSX to render |
opts |
(Optional) |
Promise<RenderResult>
An object containing a cleanup function.
RenderOnce: FunctionComponent<{
children?: unknown;
key?: string | number | null | undefined;
}>;
export interface RenderOptions
Property |
Modifiers |
Type |
Description |
---|---|---|---|
Record<string, any> |
(Optional) |
export interface RenderResult
Method |
Description |
---|---|
export interface RenderSSROptions
Property |
Modifiers |
Type |
Description |
---|---|---|---|
string |
(Optional) | ||
(contexts: QContext[], containerState: ContainerState, containsDynamic: boolean, textNodes: Map<string, string>) => Promise<JSXNode> |
(Optional) | ||
JSXNode<string>[] |
(Optional) | ||
Record<string, string> | |||
string | |||
string | |||
Record<string, any> |
(Optional) | ||
This method works like an async memoized function that runs whenever some tracked value changes and returns some data.
useResource
however returns immediate a ResourceReturn
object that contains the data and a state that indicates if the data is available or not.
The status can be one of the following:
- 'pending' - the data is not yet available. - 'resolved' - the data is available. - 'rejected' - the data is not available due to an error or timeout.
Example showing how useResource
to perform a fetch to request the weather, whenever the input city name changes.
const Cmp = component$(() => {
const cityS = useSignal("");
const weatherResource = useResource$(async ({ track, cleanup }) => {
const cityName = track(cityS);
const abortController = new AbortController();
cleanup(() => abortController.abort("cleanup"));
const res = await fetch(`http://weatherdata.com?city=${cityName}`, {
signal: abortController.signal,
});
const data = await res.json();
return data as { temp: number };
});
return (
<div>
<input name="city" bind:value={cityS} />
<Resource
value={weatherResource}
onResolved={(weather) => {
return <div>Temperature: {weather.temp}</div>;
}}
/>
</div>
);
});
Resource: <T>(props: ResourceProps<T>) => JSXOutput;
Parameter |
Type |
Description |
---|---|---|
props |
export interface ResourceCtx<T>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
|
T | undefined | ||
|
Method |
Description |
---|---|
export type ResourceFn<T> = (ctx: ResourceCtx<unknown>) => ValueOrPromise<T>;
References: ResourceCtx, ValueOrPromise
Options to pass to useResource$()
export interface ResourceOptions
Property |
Modifiers |
Type |
Description |
---|---|---|---|
number |
(Optional) Timeout in milliseconds. If the resource takes more than the specified millisecond, it will timeout. Resulting on a rejected resource. |
export interface ResourcePending<T>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
|
boolean | ||
|
Promise<T> |
export interface ResourceProps<T>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
() => JSXOutput |
(Optional) | ||
(reason: Error) => JSXOutput |
(Optional) | ||
(value: T) => JSXOutput | |||
|
ResourceReturn<T> | Signal<Promise<T> | T> | Promise<T> |
export interface ResourceRejected<T>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
|
boolean | ||
|
Promise<T> |
export interface ResourceResolved<T>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
|
boolean | ||
|
Promise<T> |
export type ResourceReturn<T> =
| ResourcePending<T>
| ResourceResolved<T>
| ResourceRejected<T>;
References: ResourcePending, ResourceResolved, ResourceRejected
export interface ScriptHTMLAttributes<T extends Element> extends Attrs<'script', T>
Extends: Attrs<'script', T>
export interface SelectHTMLAttributes<T extends Element> extends Attrs<'select', T>
Extends: Attrs<'select', T>
Sets the CorePlatform
.
This is useful to override the platform in tests to change the behavior of, requestAnimationFrame
, and import resolution.
setPlatform: (plt: CorePlatform) => CorePlatform;
Parameter |
Type |
Description |
---|---|---|
plt |
export interface Signal<T = any>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
T |
export type Size = number | string;
SkipRender: JSXNode;
Allows to project the children of the current component. can only be used within the context of a component defined with component$
.
Slot: FunctionComponent<{
name?: string;
children?: JSXChildren;
}>;
export interface SlotHTMLAttributes<T extends Element> extends Attrs<'slot', T>
Extends: Attrs<'slot', T>
export interface SnapshotListener
Property |
Modifiers |
Type |
Description |
---|---|---|---|
Element | |||
string | |||
QRL<any> |
export type SnapshotMeta = Record<string, SnapshotMetaValue>;
References: SnapshotMetaValue
export interface SnapshotMetaValue
Property |
Modifiers |
Type |
Description |
---|---|---|---|
string |
(Optional) | ||
string |
(Optional) | ||
string |
(Optional) | ||
string |
(Optional) |
export interface SnapshotResult
Property |
Modifiers |
Type |
Description |
---|---|---|---|
string[] | |||
'render' | 'listeners' | 'static' | |||
any[] |
(Optional) | ||
QRL[] | |||
ResourceReturnInternal<any>[] | |||
(Optional) |
Warning: This API is now obsolete.
not longer used in v2
export interface SnapshotState
Property |
Modifiers |
Type |
Description |
---|---|---|---|
any[] | |||
Record<string, string> | |||
any[] |
export interface SourceHTMLAttributes<T extends Element> extends Attrs<'source', T>
Extends: Attrs<'source', T>
SSRComment: FunctionComponent<{
data: string;
}>;
Warning: This API is now obsolete.
- It has no effect
SSRHint: FunctionComponent<SSRHintProps>;
export type SSRHintProps = {
dynamic?: boolean;
};
SSRRaw: FunctionComponent<{
data: string;
}>;
SSRStream: FunctionComponent<SSRStreamProps>;
SSRStreamBlock: FunctionComponent<{
children?: any;
}>;
export type SSRStreamProps = {
children:
| AsyncGenerator<JSXChildren, void, any>
| ((stream: StreamWriter) => Promise<void>)
| (() => AsyncGenerator<JSXChildren, void, any>);
};
References: JSXChildren, StreamWriter
export type StreamWriter = {
write: (chunk: string) => void;
};
export interface StyleHTMLAttributes<T extends Element> extends Attrs<'style', T>
Extends: Attrs<'style', T>
The TS types don't include the SVG attributes so we have to define them ourselves
NOTE: These props are probably not complete
export interface SVGAttributes<T extends Element = Element> extends AriaAttributes
Extends: AriaAttributes
Property |
Modifiers |
Type |
Description |
---|---|---|---|
number | string | undefined |
(Optional) | ||
'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | 'mathematical' | 'inherit' | undefined |
(Optional) | ||
'initial' | 'medial' | 'terminal' | 'isolated' | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
'auto' | 's-rGB' | 'linear-rGB' | 'inherit' | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
'nonzero' | 'evenodd' | 'inherit' | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | number | undefined |
(Optional) | ||
string | number | undefined |
(Optional) | ||
'butt' | 'round' | 'square' | 'inherit' | undefined |
(Optional) | ||
'miter' | 'round' | 'bevel' | 'inherit' | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
'none' | 'sum' | undefined |
(Optional) | ||
'replace' | 'sum' | undefined |
(Optional) | ||
'no' | 'yes' | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
Booleanish | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
(Optional) | |||
number | string |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
Size | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
CSSProperties | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
Size | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
number | string | undefined |
(Optional) | ||
string | undefined |
(Optional) |
export interface SVGProps<T extends Element> extends SVGAttributes, QwikAttributes<T>
Extends: SVGAttributes, QwikAttributes<T>
This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
Extract function into a synchronously loadable QRL.
NOTE: Synchronous QRLs functions can't close over any variables, including exports.
sync$: <T extends Function>(fn: T) => SyncQRL<T>;
Parameter |
Type |
Description |
---|---|---|
fn |
T |
Function to extract. |
SyncQRL<T>
export interface TableHTMLAttributes<T extends Element> extends Attrs<'table', T>
Extends: Attrs<'table', T>
export interface TaskCtx
Property |
Modifiers |
Type |
Description |
---|---|---|---|
Method |
Description |
---|---|
export type TaskFn = (ctx: TaskCtx) => ValueOrPromise<void | (() => void)>;
References: TaskCtx, ValueOrPromise
export interface TdHTMLAttributes<T extends Element> extends Attrs<'td', T>
Extends: Attrs<'td', T>
export interface TextareaHTMLAttributes<T extends Element> extends Attrs<'textarea', T>
Extends: Attrs<'textarea', T>
export interface ThHTMLAttributes<T extends Element> extends Attrs<'tr', T>
Extends: Attrs<'tr', T>
export interface TimeHTMLAttributes<T extends Element> extends Attrs<'time', T>
Extends: Attrs<'time', T>
export interface TitleHTMLAttributes<T extends Element> extends Attrs<'title', T>
Extends: Attrs<'title', T>
Used to signal to Qwik which state should be watched for changes.
The Tracker
is passed into the taskFn
of useTask
. It is intended to be used to wrap state objects in a read proxy which signals to Qwik which properties should be watched for changes. A change to any of the properties causes the taskFn
to rerun.
The obs
passed into the taskFn
is used to mark state.count
as a property of interest. Any changes to the state.count
property will cause the taskFn
to rerun.
const Cmp = component$(() => {
const store = useStore({ count: 0, doubleCount: 0 });
const signal = useSignal(0);
useTask$(({ track }) => {
// Any signals or stores accessed inside the task will be tracked
const count = track(() => store.count);
// You can also pass a signal to track() directly
const signalCount = track(signal);
store.doubleCount = count + signalCount;
});
return (
<div>
<span>
{store.count} / {store.doubleCount}
</span>
<button
onClick$={() => {
store.count++;
signal.value++;
}}
>
+
</button>
</div>
);
});
export interface Tracker
export interface TrackHTMLAttributes<T extends Element> extends Attrs<'track', T>
Extends: Attrs<'track', T>
Don't track listeners for this callback
untrack: <T>(fn: () => T) => T;
Parameter |
Type |
Description |
---|---|---|
fn |
() => T |
T
useComputed$: Computed;
useComputedQrl: ComputedQRL;
Retrieve Context value.
Use useContext()
to retrieve the value of context in a component. To retrieve a value a parent component needs to invoke useContextProvider()
to assign a value.
// Declare the Context type.
interface TodosStore {
items: string[];
}
// Create a Context ID (no data is saved here.)
// You will use this ID to both create and retrieve the Context.
export const TodosContext = createContextId<TodosStore>("Todos");
// Example of providing context to child components.
export const App = component$(() => {
useContextProvider(
TodosContext,
useStore<TodosStore>({
items: ["Learn Qwik", "Build Qwik app", "Profit"],
}),
);
return <Items />;
});
// Example of retrieving the context provided by a parent component.
export const Items = component$(() => {
const todos = useContext(TodosContext);
return (
<ul>
{todos.items.map((item) => (
<li>{item}</li>
))}
</ul>
);
});
useContext: UseContext;
Assign a value to a Context.
Use useContextProvider()
to assign a value to a context. The assignment happens in the component's function. Once assigned, use useContext()
in any child component to retrieve the value.
Context is a way to pass stores to the child components without prop-drilling. Note that scalar values are allowed, but for reactivity you need signals or stores.
// Declare the Context type.
interface TodosStore {
items: string[];
}
// Create a Context ID (no data is saved here.)
// You will use this ID to both create and retrieve the Context.
export const TodosContext = createContextId<TodosStore>("Todos");
// Example of providing context to child components.
export const App = component$(() => {
useContextProvider(
TodosContext,
useStore<TodosStore>({
items: ["Learn Qwik", "Build Qwik app", "Profit"],
}),
);
return <Items />;
});
// Example of retrieving the context provided by a parent component.
export const Items = component$(() => {
const todos = useContext(TodosContext);
return (
<ul>
{todos.items.map((item) => (
<li>{item}</li>
))}
</ul>
);
});
useContextProvider: <STATE>(context: ContextId<STATE>, newValue: STATE) => void
Parameter |
Type |
Description |
---|---|---|
context |
ContextId<STATE> |
The context to assign a value to. |
newValue |
STATE |
void
useErrorBoundary: () => Readonly<ErrorBoundaryStore>;
Returns:
Readonly<ErrorBoundaryStore>
useId: () => string;
Returns:
string
Register a listener on the current component's host element.
Used to programmatically add event listeners. Useful from custom use*
methods, which do not have access to the JSX. Otherwise, it's adding a JSX listener in the <div>
is a better idea.
useOn: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void
Parameter |
Type |
Description |
---|---|---|
event |
T | T[] | |
eventQrl |
EventQRL<T> |
void
Register a listener on document
.
Used to programmatically add event listeners. Useful from custom use*
methods, which do not have access to the JSX.
useOnDocument: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void
Parameter |
Type |
Description |
---|---|---|
event |
T | T[] | |
eventQrl |
EventQRL<T> |
void
Register a listener on window
.
Used to programmatically add event listeners. Useful from custom use*
methods, which do not have access to the JSX.
useOnWindow: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void
Parameter |
Type |
Description |
---|---|---|
event |
T | T[] | |
eventQrl |
EventQRL<T> |
void
This method works like an async memoized function that runs whenever some tracked value changes and returns some data.
useResource
however returns immediate a ResourceReturn
object that contains the data and a state that indicates if the data is available or not.
The status can be one of the following:
- 'pending' - the data is not yet available. - 'resolved' - the data is available. - 'rejected' - the data is not available due to an error or timeout.
Example showing how useResource
to perform a fetch to request the weather, whenever the input city name changes.
const Cmp = component$(() => {
const cityS = useSignal("");
const weatherResource = useResource$(async ({ track, cleanup }) => {
const cityName = track(cityS);
const abortController = new AbortController();
cleanup(() => abortController.abort("cleanup"));
const res = await fetch(`http://weatherdata.com?city=${cityName}`, {
signal: abortController.signal,
});
const data = await res.json();
return data as { temp: number };
});
return (
<div>
<input name="city" bind:value={cityS} />
<Resource
value={weatherResource}
onResolved={(weather) => {
return <div>Temperature: {weather.temp}</div>;
}}
/>
</div>
);
});
useResource$: <T>(generatorFn: ResourceFn<T>, opts?: ResourceOptions) =>
ResourceReturn<T>;
Parameter |
Type |
Description |
---|---|---|
generatorFn |
ResourceFn<T> | |
opts |
(Optional) |
This method works like an async memoized function that runs whenever some tracked value changes and returns some data.
useResource
however returns immediate a ResourceReturn
object that contains the data and a state that indicates if the data is available or not.
The status can be one of the following:
- 'pending' - the data is not yet available. - 'resolved' - the data is available. - 'rejected' - the data is not available due to an error or timeout.
Example showing how useResource
to perform a fetch to request the weather, whenever the input city name changes.
const Cmp = component$(() => {
const cityS = useSignal("");
const weatherResource = useResource$(async ({ track, cleanup }) => {
const cityName = track(cityS);
const abortController = new AbortController();
cleanup(() => abortController.abort("cleanup"));
const res = await fetch(`http://weatherdata.com?city=${cityName}`, {
signal: abortController.signal,
});
const data = await res.json();
return data as { temp: number };
});
return (
<div>
<input name="city" bind:value={cityS} />
<Resource
value={weatherResource}
onResolved={(weather) => {
return <div>Temperature: {weather.temp}</div>;
}}
/>
</div>
);
});
useResourceQrl: <T>(qrl: QRL<ResourceFn<T>>, opts?: ResourceOptions) =>
ResourceReturn<T>;
Parameter |
Type |
Description |
---|---|---|
qrl |
QRL<ResourceFn<T>> | |
opts |
(Optional) |
export declare function useServerData<T>(key: string): T | undefined;
Parameter |
Type |
Description |
---|---|---|
key |
string |
T | undefined
useSignal: UseSignal;
useSignal: UseSignal;
Creates an object that Qwik can track across serializations.
Use useStore
to create a state for your application. The returned object is a proxy that has a unique ID. The ID of the object is used in the QRL
s to refer to the store.
Example showing how useStore
is used in Counter example to keep track of the count.
const Stores = component$(() => {
const counter = useCounter(1);
// Reactivity happens even for nested objects and arrays
const userData = useStore({
name: "Manu",
address: {
address: "",
city: "",
},
orgs: [],
});
// useStore() can also accept a function to calculate the initial value
const state = useStore(() => {
return {
value: expensiveInitialValue(),
};
});
return (
<div>
<div>Counter: {counter.value}</div>
<Child userData={userData} state={state} />
</div>
);
});
function useCounter(step: number) {
// Multiple stores can be created in custom hooks for convenience and composability
const counterStore = useStore({
value: 0,
});
useVisibleTask$(() => {
// Only runs in the client
const timer = setInterval(() => {
counterStore.value += step;
}, 500);
return () => {
clearInterval(timer);
};
});
return counterStore;
}
useStore: <STATE extends object>(
initialState: STATE | (() => STATE),
opts?: UseStoreOptions,
) => STATE;
Parameter |
Type |
Description |
---|---|---|
initialState |
STATE | (() => STATE) | |
opts |
(Optional) |
STATE
export interface UseStoreOptions
Property |
Modifiers |
Type |
Description |
---|---|---|---|
boolean |
(Optional) If | ||
boolean |
(Optional) If |
A lazy-loadable reference to a component's styles.
Component styles allow Qwik to lazy load the style information for the component only when needed. (And avoid double loading it in case of SSR hydration.)
import styles from "./code-block.css?inline";
export const CmpStyles = component$(() => {
useStyles$(styles);
return <div>Some text</div>;
});
useStyles$: (first: string) => UseStyles;
Parameter |
Type |
Description |
---|---|---|
first |
string |
UseStyles
A lazy-loadable reference to a component's styles.
Component styles allow Qwik to lazy load the style information for the component only when needed. (And avoid double loading it in case of SSR hydration.)
import styles from "./code-block.css?inline";
export const CmpStyles = component$(() => {
useStyles$(styles);
return <div>Some text</div>;
});
useStylesQrl: (styles: QRL<string>) => UseStyles;
Parameter |
Type |
Description |
---|---|---|
styles |
QRL<string> |
UseStyles
export interface UseStylesScoped
Property |
Modifiers |
Type |
Description |
---|---|---|---|
string |
A lazy-loadable reference to a component's styles, that is scoped to the component.
Component styles allow Qwik to lazy load the style information for the component only when needed. (And avoid double loading it in case of SSR hydration.)
import scoped from "./code-block.css?inline";
export const CmpScopedStyles = component$(() => {
useStylesScoped$(scoped);
return <div>Some text</div>;
});
useStylesScoped$: (first: string) => UseStylesScoped;
Parameter |
Type |
Description |
---|---|---|
first |
string |
A lazy-loadable reference to a component's styles, that is scoped to the component.
Component styles allow Qwik to lazy load the style information for the component only when needed. (And avoid double loading it in case of SSR hydration.)
import scoped from "./code-block.css?inline";
export const CmpScopedStyles = component$(() => {
useStylesScoped$(scoped);
return <div>Some text</div>;
});
useStylesScopedQrl: (styles: QRL<string>) => UseStylesScoped;
Parameter |
Type |
Description |
---|---|---|
styles |
QRL<string> |
Reruns the taskFn
when the observed inputs change.
Use useTask
to observe changes on a set of inputs, and then re-execute the taskFn
when those inputs change.
The taskFn
only executes if the observed inputs change. To observe the inputs, use the obs
function to wrap property reads. This creates subscriptions that will trigger the taskFn
to rerun.
useTask$: (first: TaskFn, opts?: UseTaskOptions | undefined) => void
Parameter |
Type |
Description |
---|---|---|
first | ||
opts |
UseTaskOptions | undefined |
(Optional) |
void
export interface UseTaskOptions
Property |
Modifiers |
Type |
Description |
---|---|---|---|
(Optional) - |
Reruns the taskFn
when the observed inputs change.
Use useTask
to observe changes on a set of inputs, and then re-execute the taskFn
when those inputs change.
The taskFn
only executes if the observed inputs change. To observe the inputs, use the obs
function to wrap property reads. This creates subscriptions that will trigger the taskFn
to rerun.
useTaskQrl: (qrl: QRL<TaskFn>, opts?: UseTaskOptions) => void
Parameter |
Type |
Description |
---|---|---|
qrl | ||
opts |
(Optional) |
void
const Timer = component$(() => {
const store = useStore({
count: 0,
});
useVisibleTask$(() => {
// Only runs in the client
const timer = setInterval(() => {
store.count++;
}, 500);
return () => {
clearInterval(timer);
};
});
return <div>{store.count}</div>;
});
useVisibleTask$: (first: TaskFn, opts?: OnVisibleTaskOptions | undefined) => void
Parameter |
Type |
Description |
---|---|---|
first | ||
opts |
OnVisibleTaskOptions | undefined |
(Optional) |
void
const Timer = component$(() => {
const store = useStore({
count: 0,
});
useVisibleTask$(() => {
// Only runs in the client
const timer = setInterval(() => {
store.count++;
}, 500);
return () => {
clearInterval(timer);
};
});
return <div>{store.count}</div>;
});
useVisibleTaskQrl: (qrl: QRL<TaskFn>, opts?: OnVisibleTaskOptions) => void
Parameter |
Type |
Description |
---|---|---|
qrl | ||
opts |
(Optional) |
void
Type representing a value which is either resolve or a promise.
export type ValueOrPromise<T> = T | Promise<T>;
QWIK_VERSION
version: string;
export interface VideoHTMLAttributes<T extends Element> extends Attrs<'video', T>
Extends: Attrs<'video', T>
export type VisibleTaskStrategy =
| "intersection-observer"
| "document-ready"
| "document-idle";
Warning: This API is now obsolete.
This is the type for a React Native WebView. It doesn't belong in Qwik (yet?) but we're keeping it for backwards compatibility.
export interface WebViewHTMLAttributes<T extends Element> extends HTMLAttributes<T>
Extends: HTMLAttributes<T>
Property |
Modifiers |
Type |
Description |
---|---|---|---|
boolean | undefined |
(Optional) | ||
boolean | undefined |
(Optional) | ||
boolean | undefined |
(Optional) | ||
boolean | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
boolean | undefined |
(Optional) | ||
boolean | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
boolean | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
boolean | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) | ||
string | undefined |
(Optional) |