@7x7cl/qwik

/** * Qwik Optimizer marker function. * * Use `$(...)` to tell Qwik Optimizer to extract the expression in `$(...)` into a lazy-loadable * resource referenced by `QRL`. * * @see `implicit$FirstArg` for additional `____$(...)` rules. * * In this example, `$(...)` is used to capture the callback function of `onmousemove` into a * lazy-loadable reference. This allows the code to refer to the function without actually * loading the function. In this example, the callback function does not get loaded until * `mousemove` event fires. * * ```tsx * useOnDocument( * 'mousemove', * $((event) => console.log('mousemove', event)) * ); * ``` * * In this code, the Qwik Optimizer detects `$(...)` and transforms the code into: * * ```tsx * // FILE: <current file> * useOnDocument('mousemove', qrl('./chunk-abc.js', 'onMousemove')); * * // FILE: chunk-abc.js * export const onMousemove = () => console.log('mousemove'); * ``` * * ## Special Rules * * The Qwik Optimizer places special rules on functions that can be lazy-loaded. * * 1. The expression of the `$(expression)` function must be importable by the system. * (expression shows up in `import` or has `export`) * 2. If inlined function, then all lexically captured values must be: * - importable (vars show up in `import`s or `export`s) * - const (The capturing process differs from JS capturing in that writing to captured * variables does not update them, and therefore writes are forbidden. The best practice is that * all captured variables are constants.) * - Must be runtime serializable. * * ```tsx * * import { createContextId, useContext, useContextProvider } from './use/use-context'; * import { Resource, useResource$ } from './use/use-resource'; * * export const greet = () => console.log('greet'); * function topLevelFn() {} * * function myCode() { * const store = useStore({}); * function localFn() {} * // Valid Examples * $(greet); // greet is importable * $(() => greet()); // greet is importable; * $(() => console.log(store)); // store is serializable. * * // Compile time errors * $(topLevelFn); // ERROR: `topLevelFn` not importable * $(() => topLevelFn()); // ERROR: `topLevelFn` not importable * * // Runtime errors * $(localFn); // ERROR: `localFn` fails serialization * $(() => localFn()); // ERROR: `localFn` fails serialization * } * * ``` * * @param expression - Expression which should be lazy loaded * @public */ export declare const $: <T>(expression: T) => QRL<T>; declare type A = [type: 0, host: SubscriberEffect | SubscriberHost, key: string | undefined]; declare interface AbstractView { styleMedia: StyleMedia; document: Document; } declare interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> { download?: any; href?: string | undefined; hrefLang?: string | undefined; media?: string | undefined; ping?: string | undefined; rel?: string | undefined; target?: HTMLAttributeAnchorTarget | undefined; type?: string | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; } declare interface AreaHTMLAttributes<T> extends HTMLAttributes<T> { alt?: string | undefined; coords?: string | undefined; download?: any; href?: string | undefined; hrefLang?: string | undefined; media?: string | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; rel?: string | undefined; shape?: string | undefined; target?: string | undefined; children?: undefined; } /** * @public */ export declare interface AriaAttributes { /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ 'aria-activedescendant'?: string | undefined; /** 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. */ 'aria-atomic'?: Booleanish | undefined; /** * 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. */ 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined; /** 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. */ 'aria-busy'?: Booleanish | undefined; /** * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. * @see aria-pressed @see aria-selected. */ 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined; /** * Defines the total number of columns in a table, grid, or treegrid. * @see aria-colindex. */ 'aria-colcount'?: number | undefined; /** * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. * @see aria-colcount @see aria-colspan. */ 'aria-colindex'?: number | undefined; /** * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. * @see aria-colindex @see aria-rowspan. */ 'aria-colspan'?: number | undefined; /** * Identifies the element (or elements) whose contents or presence are controlled by the current element. * @see aria-owns. */ 'aria-controls'?: string | undefined; /** Indicates the element that represents the current item within a container or set of related elements. */ 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined; /** * Identifies the element (or elements) that describes the object. * @see aria-labelledby */ 'aria-describedby'?: string | undefined; /** * Identifies the element that provides a detailed, extended description for the object. * @see aria-describedby. */ 'aria-details'?: string | undefined; /** * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. * @see aria-hidden @see aria-readonly. */ 'aria-disabled'?: Booleanish | undefined; /** * Indicates what functions can be performed when a dragged object is released on the drop target. * @deprecated in ARIA 1.1 */ 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined; /** * Identifies the element that provides an error message for the object. * @see aria-invalid @see aria-describedby. */ 'aria-errormessage'?: string | undefined; /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ 'aria-expanded'?: Booleanish | undefined; /** * 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. */ 'aria-flowto'?: string | undefined; /** * Indicates an element's "grabbed" state in a drag-and-drop operation. * @deprecated in ARIA 1.1 */ 'aria-grabbed'?: Booleanish | undefined; /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined; /** * Indicates whether the element is exposed to an accessibility API. * @see aria-disabled. */ 'aria-hidden'?: Booleanish | undefined; /** * Indicates the entered value does not conform to the format expected by the application. * @see aria-errormessage. */ 'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined; /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ 'aria-keyshortcuts'?: string | undefined; /** * Defines a string value that labels the current element. * @see aria-labelledby. */ 'aria-label'?: string | undefined; /** * Identifies the element (or elements) that labels the current element. * @see aria-describedby. */ 'aria-labelledby'?: string | undefined; /** Defines the hierarchical level of an element within a structure. */ 'aria-level'?: number | undefined; /** 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. */ 'aria-live'?: 'off' | 'assertive' | 'polite' | undefined; /** Indicates whether an element is modal when displayed. */ 'aria-modal'?: Booleanish | undefined; /** Indicates whether a text box accepts multiple lines of input or only a single line. */ 'aria-multiline'?: Booleanish | undefined; /** Indicates that the user may select more than one item from the current selectable descendants. */ 'aria-multiselectable'?: Booleanish | undefined; /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ 'aria-orientation'?: 'horizontal' | 'vertical' | undefined; /** * 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. * @see aria-controls. */ 'aria-owns'?: string | undefined; /** * 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. */ 'aria-placeholder'?: string | undefined; /** * 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. * @see aria-setsize. */ 'aria-posinset'?: number | undefined; /** * Indicates the current "pressed" state of toggle buttons. * @see aria-checked @see aria-selected. */ 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined; /** * Indicates that the element is not editable, but is otherwise operable. * @see aria-disabled. */ 'aria-readonly'?: Booleanish | undefined; /** * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. * @see aria-atomic. */ 'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined; /** Indicates that user input is required on the element before a form may be submitted. */ 'aria-required'?: Booleanish | undefined; /** Defines a human-readable, author-localized description for the role of an element. */ 'aria-roledescription'?: string | undefined; /** * Defines the total number of rows in a table, grid, or treegrid. * @see aria-rowindex. */ 'aria-rowcount'?: number | undefined; /** * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. * @see aria-rowcount @see aria-rowspan. */ 'aria-rowindex'?: number | undefined; /** * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. * @see aria-rowindex @see aria-colspan. */ 'aria-rowspan'?: number | undefined; /** * Indicates the current "selected" state of various widgets. * @see aria-checked @see aria-pressed. */ 'aria-selected'?: Booleanish | undefined; /** * 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. * @see aria-posinset. */ 'aria-setsize'?: number | undefined; /** Indicates if items in a table or grid are sorted in ascending or descending order. */ 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined; /** Defines the maximum allowed value for a range widget. */ 'aria-valuemax'?: number | undefined; /** Defines the minimum allowed value for a range widget. */ 'aria-valuemin'?: number | undefined; /** * Defines the current value for a range widget. * @see aria-valuetext. */ 'aria-valuenow'?: number | undefined; /** Defines the human readable text alternative of aria-valuenow for a range widget. */ 'aria-valuetext'?: string | undefined; } /** * @public */ export declare 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 & {}); declare interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> { } declare type B = [ type: 1 | 2, host: SubscriberHost, signal: Signal, elm: QwikElement, prop: string, key: string | undefined ]; declare type BaseClassList = string | undefined | null | false | Record<string, boolean | string | number | null | undefined> | BaseClassList[]; declare interface BaseHTMLAttributes<T> extends HTMLAttributes<T> { href?: string | undefined; target?: string | undefined; children?: undefined; } declare interface BaseSyntheticEvent<E = object, C = any, T = any> { nativeEvent: E | undefined; target: T; bubbles: boolean; cancelable: boolean; eventPhase: number; isTrusted: boolean; stopPropagation(): void; isPropagationStopped(): boolean; persist(): void; timeStamp: number; type: string; } declare type BivariantEventHandler<T extends SyntheticEvent<any> | Event, EL> = { bivarianceHack(event: T, element: EL): any; }['bivarianceHack']; declare interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> { cite?: string | undefined; } declare type Booleanish = boolean | `${boolean}`; declare interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> { autoFocus?: boolean | undefined; disabled?: boolean | undefined; form?: string | undefined; formAction?: string | undefined; formEncType?: string | undefined; formMethod?: string | undefined; formNoValidate?: boolean | undefined; formTarget?: string | undefined; name?: string | undefined; type?: 'submit' | 'reset' | 'button' | undefined; value?: string | ReadonlyArray<string> | number | undefined; } declare type C = [ type: 3 | 4, host: SubscriberHost | Text, signal: Signal, elm: Node | QwikElement, key: string | undefined ]; declare interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> { height?: Numberish | undefined; width?: Numberish | undefined; } /** * @public */ export declare type ClassList = BaseClassList | BaseClassList[]; declare interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> { span?: number | undefined; } declare interface ColHTMLAttributes<T> extends HTMLAttributes<T> { span?: number | undefined; width?: Numberish | undefined; children?: undefined; } /** * 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: * * ### Example * * An example showing how to create a counter component: * * ```tsx * 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: * * ```tsx * export const OtherComponent = component$(() => { * return <Counter initialValue={100} />; * }); * ``` * * See also: `component`, `useCleanup`, `onResume`, `onPause`, `useOn`, `useOnDocument`, * `useOnWindow`, `useStyles` * * @public */ export declare const component$: <PROPS = unknown, ARG extends {} = PROPS extends {} ? PropFunctionProps<PROPS> : {}>(onMount: OnRenderFn<ARG>) => Component<PROPS extends {} ? PROPS : ARG>; /** * 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>; * }); * ``` * * @public */ export declare type Component<PROPS extends {}> = FunctionComponent<PublicProps<PROPS>>; /** * @public */ export declare interface ComponentBaseProps { key?: string | number | null | undefined; 'q:slot'?: string; } declare type ComponentChildren<PROPS extends {}> = PROPS extends { children: any; } ? never : { children?: JSXChildren; }; /** * 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: * * ### Example * * An example showing how to create a counter component: * * ```tsx * 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: * * ```tsx * export const OtherComponent = component$(() => { * return <Counter initialValue={100} />; * }); * ``` * * See also: `component`, `useCleanup`, `onResume`, `onPause`, `useOn`, `useOnDocument`, * `useOnWindow`, `useStyles` * * @public */ export declare const componentQrl: <PROPS extends {}>(componentQrl: QRL<OnRenderFn<PROPS>>) => Component<PROPS>; declare interface Computed { <T>(qrl: ComputedFn<T>): ReadonlySignal<Awaited<T>>; } declare interface ComputedDescriptor<T> extends DescriptorBase<ComputedFn<T>, SignalInternal<T>> { } /** * @public */ declare type ComputedFn<T> = () => T; declare interface ComputedQRL { <T>(qrl: QRL<ComputedFn<T>>): ReadonlySignal<Awaited<T>>; } /** * @public */ declare interface ContainerState { readonly $containerEl$: Element; readonly $proxyMap$: ObjToProxyMap; $subsManager$: SubscriptionManager; readonly $watchNext$: Set<SubscriberEffect>; readonly $watchStaging$: Set<SubscriberEffect>; readonly $opsNext$: Set<SubscriberSignal>; readonly $hostsNext$: Set<QContext>; readonly $hostsStaging$: Set<QContext>; readonly $base$: string; $hostsRendering$: Set<QContext> | undefined; $renderPromise$: Promise<void> | undefined; $serverData$: Record<string, any>; $elementIndex$: number; $pauseCtx$: PauseContext | undefined; $styleMoved$: boolean; readonly $styleIds$: Set<string>; readonly $events$: Set<string>; } /** * 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. * * ### Example * * ```tsx * // 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> * ); * }); * * ``` * @public */ export declare interface ContextId<STATE> { /** * Design-time property to store type information for the context. */ readonly __brand_context_type__: STATE; /** * A unique ID for the context. */ readonly id: string; } /** * 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. * * @public */ export declare interface CorePlatform { /** * True of running on the server platform. * * @returns True if we are running on the server (not the browser.) */ isServer: boolean; /** * 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 * retrieved the reference using `importSymbol`. * * Why not use `import()`? Because `import()` is relative to the current file, and the current * file is always the Qwik framework. So QRLs have additional information that allows them to * serialize imports relative to application base rather than the Qwik framework file. * * @param element - The element against which the `url` is resolved. Used to locate the container * root and `q:base` attribute. * @param url - Relative URL retrieved from the attribute that needs to be resolved against the * container `q:base` attribute. * @param symbol - The name of the symbol to import. * @returns A promise that resolves to the imported symbol. */ importSymbol: (containerEl: Element | undefined, url: string | URL | undefined | null, symbol: string) => ValueOrPromise<any>; /** * Perform operation on next request-animation-frame. * * @param fn - The function to call when the next animation frame is ready. */ raf: (fn: () => any) => Promise<any>; /** * Perform operation on next tick. * * @param fn - The function to call when the tick is ready. */ nextTick: (fn: () => any) => Promise<any>; /** * 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.) * * @param symbolName - Resolve `symbolName` against the manifest and return the chunk that * contains the symbol. */ chunkForSymbol: (symbolName: string, chunk: string | null) => readonly [symbol: string, chunk: string] | undefined; } /** * 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. * * ### Example * * ```tsx * // 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> * ); * }); * * ``` * @param name - The name of the context. * @public */ export declare const createContextId: <STATE = unknown>(name: string) => ContextId<STATE>; declare interface DataHTMLAttributes<T> extends HTMLAttributes<T> { value?: string | ReadonlyArray<string> | number | undefined; } declare interface DelHTMLAttributes<T> extends HTMLAttributes<T> { cite?: string | undefined; dateTime?: string | undefined; } /** * @public */ declare interface DescriptorBase<T = any, B = undefined> { $qrl$: QRLInternal<T>; $el$: QwikElement; $flags$: number; $index$: number; $destroy$?: NoSerialize<() => void>; $state$: B; } /** * @internal */ export declare const _deserializeData: (data: string, element?: unknown) => any; declare interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> { open?: boolean | undefined; } declare interface DevJSX { fileName: string; lineNumber: number; columnNumber: number; stack?: string; } declare interface DialogHTMLAttributes<T> extends HTMLAttributes<T> { open?: boolean | undefined; } /** * @public */ export declare interface DOMAttributes<T> extends QwikProps<T>, QwikEvents<T> { children?: JSXChildren; key?: string | number | null | undefined; } /** * @public */ export declare type EagernessOptions = 'visible' | 'load' | 'idle'; declare interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> { height?: Numberish | undefined; src?: string | undefined; type?: string | undefined; width?: Numberish | undefined; children?: undefined; } /** * @public */ export declare interface ErrorBoundaryStore { error: any | undefined; } /** * @public */ export declare const event$: <T>(first: T) => QRL<T>; /** * @public */ export declare const eventQrl: <T>(qrl: QRL<T>) => QRL<T>; declare interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> { disabled?: boolean | undefined; form?: string | undefined; name?: string | undefined; } /** * @internal */ export declare const _fnSignal: <T extends (...args: any[]) => any>(fn: T, args: any[], fnStr?: string) => SignalDerived<any, any[]>; declare interface FormHTMLAttributes<T> extends HTMLAttributes<T> { acceptCharset?: string | undefined; action?: string | undefined; autoComplete?: 'on' | 'off' | Omit<'on' | 'off', string> | undefined; encType?: string | undefined; method?: string | undefined; name?: string | undefined; noValidate?: boolean | undefined; target?: string | undefined; } /** * @public */ export declare const Fragment: FunctionComponent<{ children?: any; key?: string | number | null; }>; /** * @public */ export declare interface FunctionComponent<P = Record<string, any>> { (props: P, key: string | null, flags: number): JSXNode | null; } /** * @internal */ export declare const _getContextElement: () => unknown; /** * @internal */ export declare const _getContextEvent: () => unknown; /** * Retrieve the current lang. * * If no current lang and there is no `defaultLang` the function throws an error. * * @returns the lang. * @internal */ export declare function getLocale(defaultLocale?: string): string; declare type GetObject = (id: string) => any; declare type GetObjID = (obj: any) => string | null; /** * 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. * * @param docOrNode - The document (or node) of the application for which the platform is needed. * @public */ export declare const getPlatform: () => CorePlatform; declare type GroupToManagersMap = Map<SubscriberHost | SubscriberEffect | Node, LocalSubscriptionManager[]>; /** * @public */ declare function h<TYPE extends string | FunctionComponent<PROPS>, PROPS extends {} = {}>(type: TYPE, props: PROPS | null, ...children: any[]): JSXNode<TYPE>; /** * @public */ declare namespace h { function h(type: any): JSXNode<any>; function h(type: Node, data: any): JSXNode<any>; function h(type: any, text: string): JSXNode<any>; function h(type: any, children: Array<any>): JSXNode<any>; function h(type: any, data: any, text: string): JSXNode<any>; function h(type: any, data: any, children: Array<JSXNode<any> | undefined | null>): JSXNode<any>; function h(sel: any, data: any | null, children: JSXNode<any>): JSXNode<any>; namespace JSX { interface Element extends QwikJSX.Element { } interface IntrinsicAttributes extends QwikJSX.IntrinsicAttributes { } interface IntrinsicElements extends QwikJSX.IntrinsicElements { } interface ElementChildrenAttribute { children?: any; } } } export { h as createElement } export { h } declare interface HrHTMLAttributes<T> extends HTMLAttributes<T> { children?: undefined; } declare type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}); declare type HTMLAttributeReferrerPolicy = '' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'; /** * @public */ export declare interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> { accessKey?: string | undefined; contentEditable?: 'true' | 'false' | 'inherit' | undefined; contextMenu?: string | undefined; dir?: 'ltr' | 'rtl' | 'auto' | undefined; draggable?: boolean | undefined; hidden?: boolean | 'hidden' | 'until-found' | undefined; id?: string | undefined; lang?: string | undefined; placeholder?: string | undefined; slot?: string | undefined; spellcheck?: boolean | undefined; style?: Record<string, string | number | undefined> | string | undefined; tabIndex?: number | undefined; title?: string | undefined; translate?: 'yes' | 'no' | undefined; radioGroup?: string | undefined; role?: AriaRole | undefined; about?: string | undefined; datatype?: string | undefined; inlist?: any; prefix?: string | undefined; property?: string | undefined; resource?: string | undefined; typeof?: string | undefined; vocab?: string | undefined; autoCapitalize?: string | undefined; autoCorrect?: string | undefined; autoSave?: string | undefined; color?: string | undefined; itemProp?: string | undefined; itemScope?: boolean | undefined; itemType?: string | undefined; itemID?: string | undefined; itemRef?: string | undefined; results?: number | undefined; security?: string | undefined; unselectable?: 'on' | 'off' | undefined; /** * Hints at the type of data that might be entered by the user while editing the element or its contents * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute */ inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined; /** * Specify that a standard HTML element should behave like a defined custom built-in element * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is */ is?: string | undefined; } declare type HTMLCrossOriginAttribute = 'anonymous' | 'use-credentials' | '' | undefined; /** * @public */ export declare const HTMLFragment: FunctionComponent<{ dangerouslySetInnerHTML: string; }>; declare interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> { manifest?: string | undefined; } declare 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'; declare 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 & {}); declare interface HTMLWebViewElement extends HTMLElement { } /** * Low-level API used by the Optimizer to process `useTask$()` API. This method * is not intended to be used by developers. * * @internal * */ export declare const _hW: () => void; declare interface IframeHTMLAttributes<T> extends HTMLAttributes<T> { allow?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; /** @deprecated Deprecated */ frameBorder?: number | string | undefined; height?: Numberish | undefined; loading?: 'eager' | 'lazy' | undefined; /** @deprecated Deprecated */ marginHeight?: number | undefined; /** @deprecated Deprecated */ marginWidth?: number | undefined; name?: string | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; sandbox?: string | undefined; /** @deprecated Deprecated */ scrolling?: string | undefined; seamless?: boolean | undefined; src?: string | undefined; srcDoc?: string | undefined; width?: Numberish | undefined; children?: undefined; } declare interface ImgHTMLAttributes<T> extends HTMLAttributes<T> { alt?: string | undefined; crossOrigin?: HTMLCrossOriginAttribute; decoding?: 'async' | 'auto' | 'sync' | undefined; /** * Intrinsic height of the image in pixels. */ height?: Numberish | undefined; loading?: 'eager' | 'lazy' | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; sizes?: string | undefined; src?: string | undefined; srcSet?: string | undefined; useMap?: string | undefined; /** * Intrinsic width of the image in pixels. */ width?: Numberish | undefined; children?: undefined; } /** * @internal */ export declare const _IMMUTABLE: unique symbol; /** * 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 as `component($(() => {...}))` * * ```tsx * 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'); * ``` * * @param fn - a function that should have its first argument automatically `$`. * @public */ export declare const implicit$FirstArg: <FIRST, REST extends any[], RET>(fn: (first: QRL<FIRST>, ...rest: REST) => RET) => (first: FIRST, ...rest: REST) => RET; /** * @internal */ export declare const inlinedQrl: <T>(symbol: T, symbolName: string, lexicalScopeCapture?: any[]) => QRL<T>; /** * @internal */ export declare const inlinedQrlDEV: <T = any>(symbol: T, symbolName: string, opts: QRLDev, lexicalScopeCapture?: any[]) => QRL<T>; declare interface InputHTMLAttributes<T> extends HTMLAttributes<T> { accept?: string | undefined; alt?: string | undefined; autoComplete?: HTMLInputAutocompleteAttribute | Omit<HTMLInputAutocompleteAttribute, string> | undefined; autoFocus?: boolean | undefined; capture?: boolean | 'user' | 'environment' | undefined; checked?: boolean | undefined; 'bind:checked'?: Signal<boolean | undefined>; crossOrigin?: HTMLCrossOriginAttribute; disabled?: boolean | undefined; enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined; form?: string | undefined; formAction?: string | undefined; formEncType?: string | undefined; formMethod?: string | undefined; formNoValidate?: boolean | undefined; formTarget?: string | undefined; height?: Numberish | undefined; list?: string | undefined; max?: number | string | undefined; maxLength?: number | undefined; min?: number | string | undefined; minLength?: number | undefined; multiple?: boolean | undefined; name?: string | undefined; pattern?: string | undefined; placeholder?: string | undefined; readOnly?: boolean | undefined; required?: boolean | undefined; size?: number | undefined; src?: string | undefined; step?: number | string | undefined; type?: HTMLInputTypeAttribute | undefined; value?: string | ReadonlyArray<string> | number | undefined | null | FormDataEntryValue; 'bind:value'?: Signal<string | undefined>; width?: Numberish | undefined; children?: undefined; } declare interface InsHTMLAttributes<T> extends HTMLAttributes<T> { cite?: string | undefined; dateTime?: string | undefined; } declare interface IntrinsicHTMLElements { a: AnchorHTMLAttributes<HTMLAnchorElement>; abbr: HTMLAttributes<HTMLElement>; address: HTMLAttributes<HTMLElement>; area: AreaHTMLAttributes<HTMLAreaElement>; article: HTMLAttributes<HTMLElement>; aside: HTMLAttributes<HTMLElement>; audio: AudioHTMLAttributes<HTMLAudioElement>; b: HTMLAttributes<HTMLElement>; base: BaseHTMLAttributes<HTMLBaseElement>; bdi: HTMLAttributes<HTMLElement>; bdo: HTMLAttributes<HTMLElement>; big: HTMLAttributes<HTMLElement>; blockquote: BlockquoteHTMLAttributes<HTMLElement>; body: HTMLAttributes<HTMLBodyElement>; br: HTMLAttributes<HTMLBRElement>; button: ButtonHTMLAttributes<HTMLButtonElement>; canvas: CanvasHTMLAttributes<HTMLCanvasElement>; caption: HTMLAttributes<HTMLElement>; cite: HTMLAttributes<HTMLElement>; code: HTMLAttributes<HTMLElement>; col: ColHTMLAttributes<HTMLTableColElement>; colgroup: ColgroupHTMLAttributes<HTMLTableColElement>; data: DataHTMLAttributes<HTMLDataElement>; datalist: HTMLAttributes<HTMLDataListElement>; dd: HTMLAttributes<HTMLElement>; del: DelHTMLAttributes<HTMLElement>; details: DetailsHTMLAttributes<HTMLElement>; dfn: HTMLAttributes<HTMLElement>; dialog: DialogHTMLAttributes<HTMLDialogElement>; div: HTMLAttributes<HTMLDivElement>; dl: HTMLAttributes<HTMLDListElement>; dt: HTMLAttributes<HTMLElement>; em: HTMLAttributes<HTMLElement>; embed: EmbedHTMLAttributes<HTMLEmbedElement>; fieldset: FieldsetHTMLAttributes<HTMLFieldSetElement>; figcaption: HTMLAttributes<HTMLElement>; figure: HTMLAttributes<HTMLElement>; footer: HTMLAttributes<HTMLElement>; form: FormHTMLAttributes<HTMLFormElement>; h1: HTMLAttributes<HTMLHeadingElement>; h2: HTMLAttributes<HTMLHeadingElement>; h3: HTMLAttributes<HTMLHeadingElement>; h4: HTMLAttributes<HTMLHeadingElement>; h5: HTMLAttributes<HTMLHeadingElement>; h6: HTMLAttributes<HTMLHeadingElement>; head: HTMLAttributes<HTMLHeadElement>; header: HTMLAttributes<HTMLElement>; hgroup: HTMLAttributes<HTMLElement>; hr: HrHTMLAttributes<HTMLHRElement>; html: HtmlHTMLAttributes<HTMLHtmlElement>; i: HTMLAttributes<HTMLElement>; iframe: IframeHTMLAttributes<HTMLIFrameElement>; img: ImgHTMLAttributes<HTMLImageElement>; input: InputHTMLAttributes<HTMLInputElement>; ins: InsHTMLAttributes<HTMLModElement>; kbd: HTMLAttributes<HTMLElement>; keygen: KeygenHTMLAttributes<HTMLElement>; label: LabelHTMLAttributes<HTMLLabelElement>; legend: HTMLAttributes<HTMLLegendElement>; li: LiHTMLAttributes<HTMLLIElement>; link: LinkHTMLAttributes<HTMLLinkElement>; main: HTMLAttributes<HTMLElement>; map: MapHTMLAttributes<HTMLMapElement>; mark: HTMLAttributes<HTMLElement>; menu: MenuHTMLAttributes<HTMLElement>; menuitem: HTMLAttributes<HTMLElement>; meta: MetaHTMLAttributes<HTMLMetaElement>; meter: MeterHTMLAttributes<HTMLElement>; nav: HTMLAttributes<HTMLElement>; noindex: HTMLAttributes<HTMLElement>; noscript: HTMLAttributes<HTMLElement>; object: ObjectHTMLAttributes<HTMLObjectElement>; ol: OlHTMLAttributes<HTMLOListElement>; optgroup: OptgroupHTMLAttributes<HTMLOptGroupElement>; option: OptionHTMLAttributes<HTMLOptionElement>; output: OutputHTMLAttributes<HTMLElement>; p: HTMLAttributes<HTMLParagraphElement>; param: ParamHTMLAttributes<HTMLParamElement>; picture: HTMLAttributes<HTMLElement>; pre: HTMLAttributes<HTMLPreElement>; progress: ProgressHTMLAttributes<HTMLProgressElement>; q: QuoteHTMLAttributes<HTMLQuoteElement>; rp: HTMLAttributes<HTMLElement>; rt: HTMLAttributes<HTMLElement>; ruby: HTMLAttributes<HTMLElement>; s: HTMLAttributes<HTMLElement>; samp: HTMLAttributes<HTMLElement>; slot: SlotHTMLAttributes<HTMLSlotElement>; script: ScriptHTMLAttributes<HTMLScriptElement>; section: HTMLAttributes<HTMLElement>; select: SelectHTMLAttributes<HTMLSelectElement>; small: HTMLAttributes<HTMLElement>; source: SourceHTMLAttributes<HTMLSourceElement>; span: HTMLAttributes<HTMLSpanElement>; strong: HTMLAttributes<HTMLElement>; style: StyleHTMLAttributes<HTMLStyleElement>; sub: HTMLAttributes<HTMLElement>; summary: HTMLAttributes<HTMLElement>; sup: HTMLAttributes<HTMLElement>; table: TableHTMLAttributes<HTMLTableElement>; template: HTMLAttributes<HTMLTemplateElement>; tbody: HTMLAttributes<HTMLTableSectionElement>; td: TdHTMLAttributes<HTMLTableDataCellElement>; textarea: TextareaHTMLAttributes<HTMLTextAreaElement>; tfoot: HTMLAttributes<HTMLTableSectionElement>; th: ThHTMLAttributes<HTMLTableHeaderCellElement>; thead: HTMLAttributes<HTMLTableSectionElement>; time: TimeHTMLAttributes<HTMLElement>; title: TitleHTMLAttributes<HTMLTitleElement>; tr: HTMLAttributes<HTMLTableRowElement>; track: TrackHTMLAttributes<HTMLTrackElement>; tt: HTMLAttributes<HTMLElement>; u: HTMLAttributes<HTMLElement>; ul: HTMLAttributes<HTMLUListElement>; video: VideoHTMLAttributes<HTMLVideoElement>; wbr: HTMLAttributes<HTMLElement>; webview: WebViewHTMLAttributes<HTMLWebViewElement>; } declare interface InvokeContext { $url$: URL | undefined; $seq$: number; $hostElement$: QwikElement | undefined; $element$: Element | undefined; $event$: any | undefined; $qrl$: QRL<any> | undefined; $waitOn$: Promise<any>[] | undefined; $subscriber$: Subscriber | null | undefined; $renderCtx$: RenderContext | undefined; $locale$: string | undefined; } declare type InvokeTuple = [Element, Event, URL?]; /** * @public */ declare const jsx: <T extends string | FunctionComponent<any>>(type: T, props: T extends FunctionComponent<infer PROPS> ? PROPS : Record<string, any>, key?: string | number | null) => JSXNode<T>; export { jsx } export { jsx as jsxs } /** * @internal */ export declare const _jsxBranch: (input?: any) => any; /** * @internal */ export declare const _jsxC: <T extends string | FunctionComponent<any>>(type: T, mutableProps: (T extends FunctionComponent<infer PROPS> ? PROPS : Record<string, any>) | null, flags: number, key: string | number | null, dev?: JsxDevOpts) => JSXNode<T>; /** * @public */ export declare type JSXChildren = string | number | boolean | null | undefined | Function | RegExp | JSXChildren[] | Promise<JSXChildren> | Signal<JSXChildre