API › @builder.io/qwik

_qrlSync: <TYPE extends Function>(fn: TYPE, serializedFn?: string) =>
  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;

$: <T>(expression: T) => QRL<T>;

export interface AnchorHTMLAttributes<T extends Element> extends Attrs<'a', T>

export interface AreaHTMLAttributes<T extends Element> extends Attrs<'area', T>

export interface AriaAttributes

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>

export interface BaseHTMLAttributes<T extends Element> extends Attrs<'base', T>

export interface BlockquoteHTMLAttributes<T extends Element> extends Attrs<'blockquote', T>

export type Booleanish = boolean | `${boolean}`;

export interface ButtonHTMLAttributes<T extends Element> extends Attrs<'button', T>

cache(policyOrMilliseconds: number | 'immutable'): void;

export interface CanvasHTMLAttributes<T extends Element> extends Attrs<'canvas', T>

export type ClassList =
  | string
  | undefined
  | null
  | false
  | Record<string, boolean | string | number | null | undefined>
  | ClassList[];

cleanup(): void;

export interface ColgroupHTMLAttributes<T extends Element> extends Attrs<'colgroup', T>

export interface ColHTMLAttributes<T extends Element> extends Attrs<'col', T>

interface MyComponentProps {
  someProp: string;
}
const MyComponent: Component<MyComponentProps> = component$(
  (props: MyComponentProps) => {
    return <span>{props.someProp}</span>;
  },
);

export type Component<PROPS = unknown> = FunctionComponent<PublicProps<PROPS>>;

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

export const OtherComponent = component$(() => {
  return <Counter initialValue={100} />;
});

component$: <PROPS = unknown>(onMount: OnRenderFn<PROPS>) => Component<PROPS>;

export interface ComponentBaseProps

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

export const OtherComponent = component$(() => {
  return <Counter initialValue={100} />;
});

componentQrl: <PROPS extends Record<any, any>>(
  componentQrl: QRL<OnRenderFn<PROPS>>,
) => Component<PROPS>;

export type ComputedFn<T> = () => T;

// 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>

export interface CorePlatform

export interface CorrectedToggleEvent extends Event

createComputed$: <T>(qrl: ComputedFn<T>) => Signal<Awaited<T>>;

createComputedQrl: <T>(qrl: QRL<ComputedFn<T>>) => Signal<Awaited<T>>;

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

createSignal: UseSignal;

export interface CSSProperties extends CSS.Properties<string | number>, CSS.PropertiesHyphen<string | number>

export interface DataHTMLAttributes<T extends Element> extends Attrs<'data', T>

export interface DelHTMLAttributes<T extends Element> extends Attrs<'del', T>

export interface DetailsHTMLAttributes<T extends Element> extends Attrs<'details', T>

export interface DevJSX

export interface DialogHTMLAttributes<T extends Element> extends Attrs<'dialog', T>

export interface DOMAttributes<EL extends Element> extends DOMAttributesBase<EL>, QwikEvents<EL>

export type EagernessOptions = "visible" | "load" | "idle";

type Element = JSXOutput;

interface ElementChildrenAttribute

type ElementType = string | FunctionComponent<Record<any, any>>;

export interface EmbedHTMLAttributes<T extends Element> extends Attrs<'embed', T>

export interface ErrorBoundaryStore

event$: <T>(qrl: T) => QRL<T>;

export type EventHandler<EV = Event, EL = Element> = {
  bivarianceHack(event: EV, element: EL): any;
}["bivarianceHack"];

eventQrl: <T>(qrl: QRL<T>) => QRL<T>;

export interface FieldsetHTMLAttributes<T extends Element> extends Attrs<'fieldset', T>

export interface FormHTMLAttributes<T extends Element> extends Attrs<'form', T>

Fragment: FunctionComponent<{
  children?: any;
  key?: string | number | null;
}>;

export type FunctionComponent<P = unknown> = {
  renderFn(
    props: P,
    key: string | null,
    flags: number,
    dev?: DevJSX,
  ): JSXOutput;
}["renderFn"];

getPlatform: () => CorePlatform;

export declare namespace h

export declare namespace h

export interface HrHTMLAttributes<T extends Element> 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>

export type HTMLCrossOriginAttribute =
  | "anonymous"
  | "use-credentials"
  | ""
  | undefined;

export interface HTMLElementAttrs extends HTMLAttributesBase, FilterBase<HTMLElement>

HTMLFragment: FunctionComponent<{
  dangerouslySetInnerHTML: string;
}>;

export interface HtmlHTMLAttributes<T extends Element> 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>

export interface ImgHTMLAttributes<T extends Element> extends Attrs<'img', T>

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: (qrl: QRL<FIRST>, ...rest: REST) => RET,
  ) =>
  (qrl: FIRST, ...rest: REST) =>
    RET;

export type InputHTMLAttributes<T extends Element> = Attrs<
  "input",
  T,
  HTMLInputElement
>;

export interface InsHTMLAttributes<T extends Element> extends Attrs<'ins', T>

interface IntrinsicAttributes extends QwikIntrinsicAttributes

export interface IntrinsicElements extends IntrinsicHTMLElements, IntrinsicSVGElements

isSignal: <T = unknown>(obj: any) => obj is Signal<T>

jsx: <T extends string | FunctionComponent<any>>(
  type: T,
  props: T extends FunctionComponent<infer PROPS>
    ? PROPS
    : Record<any, unknown>,
  key?: string | number | null,
) => JSXNode<T>;

export type JSXChildren =
  | string
  | number
  | boolean
  | null
  | undefined
  | Function
  | RegExp
  | JSXChildren[]
  | Promise<JSXChildren>
  | Signal<JSXChildren>
  | JSXNode;

jsxDEV: <T extends string | FunctionComponent<Record<any, unknown>>>(
  type: T,
  props: T extends FunctionComponent<infer PROPS>
    ? PROPS
    : Record<any, unknown>,
  key: string | number | null | undefined,
  _isStatic: boolean,
  opts: JsxDevOpts,
  _ctx: unknown,
) => JSXNode<T>;

export interface JSXNode<T extends string | FunctionComponent | unknown = unknown>

export type JSXOutput =
  | JSXNode
  | string
  | number
  | boolean
  | null
  | undefined
  | JSXOutput[];

export type JSXTagName =
  | keyof HTMLElementTagNameMap
  | Omit<string, keyof HTMLElementTagNameMap>;

export interface KeygenHTMLAttributes<T extends Element> extends Attrs<'base', T>

export type KnownEventNames = LiteralUnion<AllEventKeys, string>;

export interface LabelHTMLAttributes<T extends Element> extends Attrs<'label', T>

export interface LiHTMLAttributes<T extends Element> extends Attrs<'li', T>

export interface LinkHTMLAttributes<T extends Element> extends Attrs<'link', T>

export interface MapHTMLAttributes<T extends Element> extends Attrs<'map', T>

export interface MediaHTMLAttributes<T extends Element> extends HTMLAttributes<T>, Augmented<HTMLMediaElement, {
    crossOrigin?: HTMLCrossOriginAttribute;
}>

export interface MenuHTMLAttributes<T extends Element> extends Attrs<'menu', T>

export interface MetaHTMLAttributes<T extends Element> extends Attrs<'meta', T>

export interface MeterHTMLAttributes<T extends Element> extends Attrs<'meter', T>

export type NativeAnimationEvent = AnimationEvent;

export type NativeClipboardEvent = ClipboardEvent;

export type NativeCompositionEvent = CompositionEvent;

export type NativeDragEvent = DragEvent;

export type NativeFocusEvent = FocusEvent;

export type NativeKeyboardEvent = KeyboardEvent;

export type NativeMouseEvent = MouseEvent;

export type NativePointerEvent = PointerEvent;

export type NativeTouchEvent = TouchEvent;

export type NativeTransitionEvent = TransitionEvent;

export type NativeUIEvent = UIEvent;

export type NativeWheelEvent = WheelEvent;

export type NoSerialize<T> =
  | (T & {
      __no_serialize__: true;
    })
  | 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>

export interface OlHTMLAttributes<T extends Element> extends Attrs<'ol', T>

export type OnRenderFn<PROPS> = (props: PROPS) => JSXOutput;

export interface OnVisibleTaskOptions

export interface OptgroupHTMLAttributes<T extends Element> extends Attrs<'optgroup', T>

export interface OptionHTMLAttributes<T extends Element> extends Attrs<'option', T>

export interface OutputHTMLAttributes<T extends Element> extends Attrs<'output', T>

export interface ParamHTMLAttributes<T extends Element> extends Attrs<'base', T, HTMLParamElement>

PrefetchGraph: (opts?: {
  base?: string;
  manifestHash?: string;
  manifestURL?: string;
  nonce?: string;
}) => JSXNode<"script">;

PrefetchServiceWorker: (opts: {
  base?: string;
  scope?: string;
  path?: string;
  verbose?: boolean;
  fetchBundleGraph?: boolean;
  nonce?: string;
}) => JSXNode<"script">;

export interface ProgressHTMLAttributes<T extends Element> extends Attrs<'progress', T>

export type PropFnInterface<ARGS extends any[], RET> = {
  __qwik_serializable__?: any;
  (...args: ARGS): Promise<RET>;
};

export type PropFunction<T> = QRL<T>;

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

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;

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

export type PublicProps<PROPS> = (PROPS extends Record<any, any>
  ? Omit<PROPS, `${string}$`> & _Only$<PROPS>
  : unknown extends PROPS
    ? {}
    : PROPS) &
  ComponentBaseProps &
  ComponentChildren<PROPS>;

useOnDocument(
  "mousemove",
  $((event) => console.log("mousemove", event)),
);

// FILE: <current file>
useOnDocument("mousemove", qrl("./chunk-abc.js", "onMousemove"));
 
// FILE: chunk-abc.js
export const onMousemove = () => console.log("mousemove");

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

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

return <button onClick={() => (await import('./chunk-abc.js')).onClick}>

<div q:base="/build/">
  <button on:click="./chunk-abc.js#onClick">...</button>
</div>

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

useOnDocument(
  "mousemove",
  $((event) => console.log("mousemove", event)),
);

// FILE: <current file>
useOnDocument("mousemove", qrl("./chunk-abc.js", "onMousemove"));
 
// FILE: chunk-abc.js
export const onMousemove = () => console.log("mousemove");

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

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

return <button onClick={() => (await import('./chunk-abc.js')).onClick}>

<div q:base="/build/">
  <button on:click="./chunk-abc.js#onClick">...</button>
</div>

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

export type QRLEventHandlerMulti<EV extends Event, EL> =
  | QRL<EventHandler<EV, EL>>
  | undefined
  | null
  | QRLEventHandlerMulti<EV, EL>[]
  | EventHandler<EV, EL>;

export interface QuoteHTMLAttributes<T extends Element> extends Attrs<'q', T>

export type QwikAnimationEvent<T = Element> = NativeAnimationEvent;

export interface QwikAttributes<EL extends Element> extends DOMAttributesBase<EL>, QwikEvents<EL, false>

export type QwikChangeEvent<T = Element> = Event;

export type QwikClipboardEvent<T = Element> = NativeClipboardEvent;

export type QwikCompositionEvent<T = Element> = NativeCompositionEvent;

export interface QwikDOMAttributes extends DOMAttributes<Element>

export type QwikDragEvent<T = Element> = NativeDragEvent;

export type QwikFocusEvent<T = Element> = NativeFocusEvent;

export type QwikHTMLElements = {
  [tag in keyof HTMLElementTagNameMap]: Augmented<
    HTMLElementTagNameMap[tag],
    SpecialAttrs[tag]
  > &
    HTMLElementAttrs &
    QwikAttributes<HTMLElementTagNameMap[tag]>;
};

export type QwikIdleEvent = CustomEvent<{}>;

export type QwikInitEvent = CustomEvent<{}>;

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

export interface QwikIntrinsicElements extends QwikHTMLElements, QwikSVGElements

export type QwikInvalidEvent<T = Element> = Event;

export declare namespace QwikJSX

export type QwikKeyboardEvent<T = Element> = NativeKeyboardEvent;

export type QwikMouseEvent<T = Element, E = NativeMouseEvent> = E;

export type QwikPointerEvent<T = Element> = NativePointerEvent;

export type QwikSubmitEvent<T = Element> = SubmitEvent;

export type QwikSVGElements = {
  [K in keyof Omit<
    SVGElementTagNameMap,
    keyof HTMLElementTagNameMap
  >]: SVGProps<SVGElementTagNameMap[K]>;
};

export type QwikSymbolEvent = CustomEvent<{
  symbol: string;
  element: Element;
  reqTime: number;
}>;

export type QwikTouchEvent<T = Element> = NativeTouchEvent;

export type QwikTransitionEvent<T = Element> = NativeTransitionEvent;

export type QwikUIEvent<T = Element> = NativeUIEvent;

export type QwikVisibleEvent = CustomEvent<IntersectionObserverEntry>;

export type QwikWheelEvent<T = Element> = NativeWheelEvent;

export type ReadonlySignal<T = unknown> = Readonly<Signal<T>>;

render: (
  parent: Element | Document,
  jsxOutput: JSXOutput | FunctionComponent<any>,
  opts?: RenderOptions,
) => Promise<RenderResult>;

RenderOnce: FunctionComponent<{
  children?: unknown;
  key?: string | number | null | undefined;
}>;

export interface RenderOptions

export interface RenderResult

export interface RenderSSROptions

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;

export interface ResourceCtx<T>

export type ResourceFn<T> = (ctx: ResourceCtx<unknown>) => ValueOrPromise<T>;

export interface ResourceOptions

export interface ResourcePending<T>

export interface ResourceProps<T>