API › @builder.io/qwik

'q:slot'?: string;

$: <T>(expression: T) => QRL<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 & {});

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

export type ClassList = BaseClassList | BaseClassList[];

cleanup(): void;

export type Component<PROPS extends {}> = 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,
  ARG extends {} = PROPS extends {} ? PropFunctionProps<PROPS> : {}
>(
  onMount: OnRenderFn<ARG>
) => Component<PROPS extends {} ? PROPS : ARG>;

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 {}>(componentQrl: QRL<OnRenderFn<PROPS>>) =>
  Component<PROPS>;

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

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

export interface DOMAttributes<T> extends QwikProps<T>, QwikEvents<T>

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

interface Element extends QwikJSX.Element

interface ElementChildrenAttribute

export interface ErrorBoundaryStore

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

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

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

export interface FunctionComponent<P = Record<string, any>>

getCaptured(): any[] | null;

getHash(): string;

getModifierState(key: string): boolean;

getPlatform: () => CorePlatform;

getSymbol(): string;

export declare namespace h

export declare namespace h

export interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T>

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

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;

interface IntrinsicAttributes extends QwikJSX.IntrinsicAttributes

interface IntrinsicElements extends QwikJSX.IntrinsicElements

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

namespace JSX

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

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

export interface JSXNode<T = string | FunctionComponent>

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

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;

noSerialize: <T extends object | undefined>(input: T) => NoSerialize<T>;

noSerialize: <T extends object | undefined>(input: T) => NoSerialize<T>;

export type OnRenderFn<PROPS extends {}> = (
  props: PROPS
) => JSXNode<any> | null;

export interface OnVisibleTaskOptions

export interface PropFnInterface<ARGS extends any[], RET>

export type PropFunction<T extends Function = (...args: any[]) => any> =
  T extends (...args: infer ARGS) => infer RET
    ? PropFnInterface<ARGS, Awaited<RET>>
    : never;

export type PropFunctionProps<PROPS extends {}> = {
  [K in keyof PROPS]: NonNullable<PROPS[K]> extends (
    ...args: infer ARGS
  ) => infer RET
    ? PropFnInterface<ARGS, Awaited<RET>>
    : PROPS[K];
};

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

export type PropsOf<COMP extends Component<any>> = COMP extends Component<
  infer PROPS
>
  ? NonNullable<PROPS>
  : never;

export type PublicProps<PROPS extends {}> = TransformProps<PROPS> &
  ComponentBaseProps &
  ComponentChildren<PROPS>;

qrl: <T = any>(
  chunkOrFn: string | (() => Promise<any>),
  symbol: string,
  lexicalScopeCapture?: any[],
  stackOffset?: number
) => QRL<T>;

qrl: <T = any>(
  chunkOrFn: string | (() => Promise<any>),
  symbol: string,
  lexicalScopeCapture?: any[],
  stackOffset?: number
) => QRL<T>;

export interface QwikAnimationEvent<T = Element> extends SyntheticEvent<T, NativeAnimationEvent>

export interface QwikChangeEvent<T = Element> extends SyntheticEvent<T>

export interface QwikClipboardEvent<T = Element> extends SyntheticEvent<T, NativeClipboardEvent>

export interface QwikCompositionEvent<T = Element> extends SyntheticEvent<T, NativeCompositionEvent>

export interface QwikDOMAttributes extends DOMAttributes<any>

export interface QwikDragEvent<T = Element> extends QwikMouseEvent<T, NativeDragEvent>

export interface QwikFocusEvent<T = Element> extends SyntheticEvent<T, NativeFocusEvent>

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 IntrinsicHTMLElements

export interface QwikInvalidEvent<T = Element> extends SyntheticEvent<T>

export declare namespace QwikJSX

export interface QwikKeyboardEvent<T = Element> extends SyntheticEvent<T, NativeKeyboardEvent>

export interface QwikMouseEvent<T = Element, E = NativeMouseEvent> extends SyntheticEvent<T, E>

export interface QwikPointerEvent<T = Element> extends QwikMouseEvent<T, NativePointerEvent>

export interface QwikSubmitEvent<T = Element> extends SyntheticEvent<T>

export interface QwikTouchEvent<T = Element> extends SyntheticEvent<T, NativeTouchEvent>

export interface QwikTransitionEvent<T = Element> extends SyntheticEvent<T, NativeTransitionEvent>

export interface QwikUIEvent<T = Element> extends SyntheticEvent<T, NativeUIEvent>

export interface QwikWheelEvent<T = Element> extends QwikMouseEvent<T, NativeWheelEvent>

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

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

export interface RenderOptions

export interface RenderResult

export interface RenderSSROptions

resolve(): Promise<TYPE>;

const Cmp = component$(() => {
  const store = useStore({
    city: "",
  });
 
  const weatherResource = useResource$<any>(async ({ track, cleanup }) => {
    const cityName = track(() => store.city);
    const abortController = new AbortController();
    cleanup(() => abortController.abort("cleanup"));
    const res = await fetch(`http://weatherdata.com?city=${cityName}`, {
      signal: abortController.signal,
    });
    const data = res.json();
    return data;
  });
 
  return (
    <div>
      <input
        name="city"
        onInput$={(ev: any) => (store.city = ev.target.value)}
      />
      <Resource
        value={weatherResource}
        onResolved={(weather) => {
          return <div>Temperature: {weather.temp}</div>;
        }}
      />
    </div>
  );
});

Resource: <T>(props: ResourceProps<T>) => JSXNode;

export interface ResourceCtx<T>

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

export interface ResourceOptions

export interface ResourcePending<T>

export interface ResourceProps<T>

export interface ResourceRejected<T>

export interface ResourceResolved<T>

export type ResourceReturn<T> =
  | ResourcePending<T>
  | ResourceResolved<T>
  | ResourceRejected<T>;

setPlatform: (plt: CorePlatform) => CorePlatform;

export interface Signal<T = any>

SkipRender: JSXNode;

Slot: FunctionComponent<{
  name?: string;
}>;

export interface SnapshotListener

export type SnapshotMeta = Record<string, SnapshotMetaValue>;

export interface SnapshotMetaValue

export interface SnapshotResult

export interface SnapshotState

SSRComment: FunctionComponent<{
  data: string;
}>;

SSRHint: FunctionComponent<SSRHintProps>;

export interface SSRHintProps

SSRRaw: FunctionComponent<{
  data: string;
}>;

SSRStream: FunctionComponent<SSRStreamProps>;

SSRStreamBlock: FunctionComponent<{
  children?: any;
}>;

export interface SSRStreamProps

export type StreamWriter = {
  write: (chunk: string) => void;
};

export interface TaskCtx

export type TaskFn = (ctx: TaskCtx) => ValueOrPromise<void | (() => void)>;

const Cmp = component$(() => {
  const store = useStore({ count: 0, doubleCount: 0 });
  useTask$(({ track }) => {
    const count = track(() => store.count);
    store.doubleCount = 2 * count;
  });
  return (
    <div>
      <span>
        {store.count} / {store.doubleCount}
      </span>
      <button onClick$={() => store.count++}>+</button>
    </div>
  );
});

export interface Tracker

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

useComputed$: Computed;

useComputedQrl: ComputedQRL;

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

// 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 extends object>(context: ContextId<STATE>, newValue: STATE) => void

useErrorBoundary: () => Readonly<ErrorBoundaryStore>;

useId: () => string;

useOn: (event: PascalCaseEventLiteralType | PascalCaseEventLiteralType[], eventQrl: QRL<(ev: Event) => void> | undefined) => void

useOnDocument: (event: PascalCaseEventLiteralType | PascalCaseEventLiteralType[], eventQrl: QRL<(ev: Event) => void> | undefined) => void

useOnWindow: (event: PascalCaseEventLiteralType | PascalCaseEventLiteralType[], eventQrl: QRL<(ev: Event) => void> | undefined) => void

const Cmp = component$(() => {
  const store = useStore({
    city: "",
  });
 
  const weatherResource = useResource$<any>(async ({ track, cleanup }) => {
    const cityName = track(() => store.city);
    const abortController = new AbortController();
    cleanup(() => abortController.abort("cleanup"));
    const res = await fetch(`http://weatherdata.com?city=${cityName}`, {
      signal: abortController.signal,
    });
    const data = res.json();
    return data;
  });
 
  return (
    <div>
      <input
        name="city"
        onInput$={(ev: any) => (store.city = ev.target.value)}
      />
      <Resource
        value={weatherResource}
        onResolved={(weather) => {
          return <div>Temperature: {weather.temp}</div>;
        }}
      />
    </div>
  );
});

useResource$: <T>(generatorFn: ResourceFn<T>, opts?: ResourceOptions) =>
  ResourceReturn<T>;

const Cmp = component$(() => {
  const store = useStore({
    city: "",
  });
 
  const weatherResource = useResource$<any>(async ({ track, cleanup }) => {
    const cityName = track(() => store.city);
    const abortController = new AbortController();
    cleanup(() => abortController.abort("cleanup"));
    const res = await fetch(`http://weatherdata.com?city=${cityName}`, {
      signal: abortController.signal,
    });
    const data = res.json();
    return data;
  });
 
  return (
    <div>
      <input
        name="city"
        onInput$={(ev: any) => (store.city = ev.target.value)}
      />
      <Resource
        value={weatherResource}
        onResolved={(weather) => {
          return <div>Temperature: {weather.temp}</div>;
        }}
      />
    </div>
  );
});

useResourceQrl: <T>(qrl: QRL<ResourceFn<T>>, opts?: ResourceOptions) =>
  ResourceReturn<T>;

export declare function useServerData<T>(key: string): T | undefined;

useSignal: UseSignal;

useSignal: UseSignal;

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;

export interface UseStoreOptions

import styles from "./code-block.css?inline";
 
export const CmpStyles = component$(() => {
  useStyles$(styles);
 
  return <div>Some text</div>;
});

useStyles$: (first: string) => void

import styles from "./code-block.css?inline";
 
export const CmpStyles = component$(() => {
  useStyles$(styles);
 
  return <div>Some text</div>;
});