From 49b02b3bfa8c9b790d2991f69d5d258fb9d32921 Mon Sep 17 00:00:00 2001 From: Wout Mertens Date: Tue, 5 Nov 2024 03:55:11 +0100 Subject: [PATCH 1/9] chore: move internals out of JSXNode type `flags`, `varProps` and `constProps` This assures compatibility with v1 types --- .../docs/src/routes/api/qwik-testing/api.json | 2 +- .../docs/src/routes/api/qwik-testing/index.md | 6 +-- packages/docs/src/routes/api/qwik/api.json | 6 +-- packages/docs/src/routes/api/qwik/index.md | 47 ++----------------- packages/qwik/src/core/api.md | 25 ++++------ packages/qwik/src/core/client/dom-render.ts | 4 +- packages/qwik/src/core/client/vnode-diff.ts | 20 ++++---- .../src/core/shared/component-execution.ts | 24 ++++++---- .../qwik/src/core/shared/jsx/jsx-runtime.ts | 14 +++--- .../src/core/shared/jsx/types/jsx-node.ts | 15 ++++-- .../prefetch-service-worker/prefetch.ts | 6 +-- packages/qwik/src/core/ssr/ssr-render-jsx.ts | 10 ++-- packages/qwik/src/core/ssr/ssr-types.ts | 8 ++-- .../src/core/tests/optimizer-output.spec.tsx | 7 ++- packages/qwik/src/server/api.md | 4 +- packages/qwik/src/server/ssr-container.ts | 7 +-- packages/qwik/src/server/types.ts | 2 +- packages/qwik/src/testing/api.md | 9 ++-- .../qwik/src/testing/vdom-diff.unit-util.ts | 22 ++++++--- 19 files changed, 112 insertions(+), 126 deletions(-) diff --git a/packages/docs/src/routes/api/qwik-testing/api.json b/packages/docs/src/routes/api/qwik-testing/api.json index 96e314aad5e..c4235143713 100644 --- a/packages/docs/src/routes/api/qwik-testing/api.json +++ b/packages/docs/src/routes/api/qwik-testing/api.json @@ -237,7 +237,7 @@ } ], "kind": "Function", - "content": "```typescript\nexport declare function walkJSX(jsx: JSXOutput, apply: {\n enter: (jsx: JSXNode) => void;\n leave: (jsx: JSXNode) => void;\n text: (text: _Stringifiable) => void;\n}): void;\n```\n\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\njsx\n\n\n\n\nJSXOutput\n\n\n\n\n\n
\n\napply\n\n\n\n\n{ enter: (jsx: JSXNode) => void; leave: (jsx: JSXNode) => void; text: (text: \\_Stringifiable) => void; }\n\n\n\n\n\n
\n**Returns:**\n\nvoid", + "content": "```typescript\nexport declare function walkJSX(jsx: JSXOutput, apply: {\n enter: (jsx: JSXNodeInternal) => void;\n leave: (jsx: JSXNodeInternal) => void;\n text: (text: _Stringifiable) => void;\n}): void;\n```\n\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\njsx\n\n\n\n\nJSXOutput\n\n\n\n\n\n
\n\napply\n\n\n\n\n{ enter: (jsx: JSXNodeInternal) => void; leave: (jsx: JSXNodeInternal) => void; text: (text: \\_Stringifiable) => void; }\n\n\n\n\n\n
\n**Returns:**\n\nvoid", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/vdom-diff.unit-util.ts", "mdFile": "core.walkjsx.md" }, diff --git a/packages/docs/src/routes/api/qwik-testing/index.md b/packages/docs/src/routes/api/qwik-testing/index.md index 505a06ac4f5..f2dfc8d442d 100644 --- a/packages/docs/src/routes/api/qwik-testing/index.md +++ b/packages/docs/src/routes/api/qwik-testing/index.md @@ -617,8 +617,8 @@ JSXOutput export declare function walkJSX( jsx: JSXOutput, apply: { - enter: (jsx: JSXNode) => void; - leave: (jsx: JSXNode) => void; + enter: (jsx: JSXNodeInternal) => void; + leave: (jsx: JSXNodeInternal) => void; text: (text: _Stringifiable) => void; }, ): void; @@ -654,7 +654,7 @@ apply -{ enter: (jsx: JSXNode) => void; leave: (jsx: JSXNode) => void; text: (text: \_Stringifiable) => void; } +{ enter: (jsx: JSXNodeInternal) => void; leave: (jsx: JSXNodeInternal) => void; text: (text: \_Stringifiable) => void; } diff --git a/packages/docs/src/routes/api/qwik/api.json b/packages/docs/src/routes/api/qwik/api.json index 3a2716fcf90..c1c250686f9 100644 --- a/packages/docs/src/routes/api/qwik/api.json +++ b/packages/docs/src/routes/api/qwik/api.json @@ -1259,7 +1259,7 @@ } ], "kind": "Interface", - "content": "A JSX Node, an internal structure. You probably want to use `JSXOutput` instead.\n\n\n```typescript\nexport interface JSXNode \n```\n\n\n\n\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[children](#)\n\n\n\n\n\n\n\n[JSXChildren](#jsxchildren) \\| null\n\n\n\n\n\n
\n\n[constProps](#)\n\n\n\n\n\n\n\nRecord<any, unknown> \\| null\n\n\n\n\n\n
\n\n[dev?](#)\n\n\n\n\n\n\n\n[DevJSX](#devjsx)\n\n\n\n\n_(Optional)_\n\n\n
\n\n[flags](#)\n\n\n\n\n\n\n\nnumber\n\n\n\n\n\n
\n\n[key](#)\n\n\n\n\n\n\n\nstring \\| null\n\n\n\n\n\n
\n\n[props](#)\n\n\n\n\n\n\n\nT extends [FunctionComponent](#functioncomponent)<infer P> ? P : Record<any, unknown>\n\n\n\n\n\n
\n\n[type](#)\n\n\n\n\n\n\n\nT\n\n\n\n\n\n
\n\n[varProps](#)\n\n\n\n\n\n\n\nRecord<any, unknown>\n\n\n\n\n\n
", + "content": "A JSX Node, an internal structure. You probably want to use `JSXOutput` instead.\n\n\n```typescript\nexport interface JSXNode \n```\n\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[children](#)\n\n\n\n\n\n\n\n[JSXChildren](#jsxchildren) \\| null\n\n\n\n\n\n
\n\n[dev?](#)\n\n\n\n\n\n\n\n[DevJSX](#devjsx)\n\n\n\n\n_(Optional)_\n\n\n
\n\n[key](#)\n\n\n\n\n\n\n\nstring \\| null\n\n\n\n\n\n
\n\n[props](#)\n\n\n\n\n\n\n\nT extends [FunctionComponent](#functioncomponent)<infer P> ? P : Record<any, unknown>\n\n\n\n\n\n
\n\n[type](#)\n\n\n\n\n\n\n\nT\n\n\n\n\n\n
", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts", "mdFile": "core.jsxnode.md" }, @@ -1777,7 +1777,7 @@ } ], "kind": "Function", - "content": "> 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.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n base?: string;\n manifestHash?: string;\n manifestURL?: string;\n nonce?: string;\n}) => JSXNode\n```\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\nopts\n\n\n\n\n{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; }\n\n\n\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n
\n**Returns:**\n\n[JSXNode](#jsxnode)<string>", + "content": "> 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.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n base?: string;\n manifestHash?: string;\n manifestURL?: string;\n nonce?: string;\n}) => JSXOutput\n```\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\nopts\n\n\n\n\n{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; }\n\n\n\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n
\n**Returns:**\n\n[JSXOutput](#jsxoutput)", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts", "mdFile": "core.prefetchgraph.md" }, @@ -1791,7 +1791,7 @@ } ], "kind": "Function", - "content": "> 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.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere 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.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n base?: string;\n scope?: string;\n path?: string;\n verbose?: boolean;\n fetchBundleGraph?: boolean;\n nonce?: string;\n}) => JSXNode<'script'>\n```\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\nopts\n\n\n\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker. Default is `import.meta.env.BASE_URL`, which is defined by Vite's `config.base` and defaults to `/`. - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`.\n\n\n
\n**Returns:**\n\n[JSXNode](#jsxnode)<'script'>", + "content": "> 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.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere 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.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n base?: string;\n scope?: string;\n path?: string;\n verbose?: boolean;\n fetchBundleGraph?: boolean;\n nonce?: string;\n}) => JSXOutput\n```\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\nopts\n\n\n\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker. Default is `import.meta.env.BASE_URL`, which is defined by Vite's `config.base` and defaults to `/`. - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`.\n\n\n
\n**Returns:**\n\n[JSXOutput](#jsxoutput)", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts", "mdFile": "core.prefetchserviceworker.md" }, diff --git a/packages/docs/src/routes/api/qwik/index.md b/packages/docs/src/routes/api/qwik/index.md index 1f89e629e9e..9f928baf0bd 100644 --- a/packages/docs/src/routes/api/qwik/index.md +++ b/packages/docs/src/routes/api/qwik/index.md @@ -2893,19 +2893,6 @@ Description -[constProps](#) - - - - - -Record<any, unknown> \| null - - - - - - [dev?](#) @@ -2921,19 +2908,6 @@ _(Optional)_ -[flags](#) - - - - - -number - - - - - - [key](#) @@ -2970,19 +2944,6 @@ T - - - -[varProps](#) - - - - - -Record<any, unknown> - - - @@ -3479,7 +3440,7 @@ PrefetchGraph: (opts?: { manifestHash?: string; manifestURL?: string; nonce?: string; -}) => JSXNode; +}) => JSXOutput; ```
@@ -3513,7 +3474,7 @@ _(Optional)_ Options for the loading prefetch graph.
**Returns:** -[JSXNode](#jsxnode)<string> +[JSXOutput](#jsxoutput) [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts) @@ -3533,7 +3494,7 @@ PrefetchServiceWorker: (opts: { verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; -}) => JSXNode<"script">; +}) => JSXOutput; ```
@@ -3567,7 +3528,7 @@ Options for the prefetch service worker.
**Returns:** -[JSXNode](#jsxnode)<'script'> +[JSXOutput](#jsxoutput) [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts) diff --git a/packages/qwik/src/core/api.md b/packages/qwik/src/core/api.md index f3fec7e2ca8..0bddca96a55 100644 --- a/packages/qwik/src/core/api.md +++ b/packages/qwik/src/core/api.md @@ -5,10 +5,7 @@ ```ts import * as CSS_2 from 'csstype'; -import type { JSXNode as JSXNode_2 } from '@qwik.dev/core'; -import type { RenderOptions as RenderOptions_2 } from '@qwik.dev/core'; -import type { RenderResult as RenderResult_2 } from '@qwik.dev/core'; -import type { StreamWriter as StreamWriter_2 } from '@qwik.dev/core/internal'; +import type { StreamWriter as StreamWriter_2 } from '@qwik.dev/core'; // @public export const $: (expression: T) => QRL; @@ -532,8 +529,10 @@ export type IntrinsicSVGElements = { [K in keyof Omit]: LenientSVGProps; }; +// Warning: (ae-forgotten-export) The symbol "JSXNodeInternal" needs to be exported by the entry point index.d.ts +// // @internal (undocumented) -export const _isJSXNode: (n: unknown) => n is JSXNode; +export const _isJSXNode: (n: unknown) => n is JSXNodeInternal; // @public (undocumented) export const isSignal: (value: any) => value is Signal; @@ -593,19 +592,13 @@ export interface JSXNode | null; - // (undocumented) dev?: DevJSX; // (undocumented) - flags: number; - // (undocumented) key: string | null; // (undocumented) props: T extends FunctionComponent ? P : Record; // (undocumented) type: T; - // (undocumented) - varProps: Record; } // @public @@ -618,10 +611,10 @@ export const _jsxQ: (type: any, mutable: any, immutable: any, children: any, _fl export const _jsxS: (type: any, mutable: any, immutable: any, _flags: any, key: any) => JSXNode; // @internal -export const _jsxSorted: (type: T, varProps: Props | null, constProps: Props | null, children: JSXChildren | null, flags: number, key: string | number | null | undefined, dev?: DevJSX) => JSXNode; +export const _jsxSorted: (type: T, varProps: Props | null, constProps: Props | null, children: JSXChildren | null, flags: number, key: string | number | null | undefined, dev?: DevJSX) => JSXNodeInternal; // @internal -export const _jsxSplit: >(type: T, varProps: Props | null, constProps: Props | null, children: JSXChildren | null | undefined, flags: number, key: string | number | null, dev?: DevJSX) => JSXNode; +export const _jsxSplit: >(type: T, varProps: Props | null, constProps: Props | null, children: JSXChildren | null | undefined, flags: number, key: string | number | null, dev?: DevJSX) => JSXNodeInternal; // @public (undocumented) export type JSXTagName = keyof HTMLElementTagNameMap | Omit; @@ -765,7 +758,7 @@ export const PrefetchGraph: (opts?: { manifestHash?: string; manifestURL?: string; nonce?: string; -}) => JSXNode_2; +}) => JSXOutput; // @beta export const PrefetchServiceWorker: (opts: { @@ -775,7 +768,7 @@ export const PrefetchServiceWorker: (opts: { verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; -}) => JSXNode_2<'script'>; +}) => JSXOutput; // @public (undocumented) export interface ProgressHTMLAttributes extends Attrs<'progress', T> { @@ -960,7 +953,7 @@ export interface ReadonlySignal { export const _regSymbol: (symbol: any, hash: string) => any; // @public -export const render: (parent: Element | Document, jsxNode: JSXOutput | FunctionComponent, opts?: RenderOptions_2) => Promise; +export const render: (parent: Element | Document, jsxNode: JSXOutput | FunctionComponent, opts?: RenderOptions) => Promise; // @public (undocumented) export const RenderOnce: FunctionComponent<{ diff --git a/packages/qwik/src/core/client/dom-render.ts b/packages/qwik/src/core/client/dom-render.ts index aea4de61562..ec54f13d37c 100644 --- a/packages/qwik/src/core/client/dom-render.ts +++ b/packages/qwik/src/core/client/dom-render.ts @@ -1,11 +1,11 @@ -import type { JSXNode, RenderOptions, RenderResult } from '@qwik.dev/core'; -import type { FunctionComponent, JSXOutput } from '../shared/jsx/types/jsx-node'; +import type { FunctionComponent, JSXNode, JSXOutput } from '../shared/jsx/types/jsx-node'; import { isDocument, isElement } from '../shared/utils/element'; import { ChoreType } from '../shared/scheduler'; import { QContainerValue } from '../shared/types'; import { DomContainer, getDomContainer } from './dom-container'; import { cleanup } from './vnode-diff'; import { QContainerAttr } from '../shared/utils/markers'; +import type { RenderOptions, RenderResult } from './types'; /** * Render JSX. diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts index 4e1205e7d0b..ad9799b5087 100644 --- a/packages/qwik/src/core/client/vnode-diff.ts +++ b/packages/qwik/src/core/client/vnode-diff.ts @@ -11,7 +11,7 @@ import { type Props, } from '../shared/jsx/jsx-runtime'; import { Slot } from '../shared/jsx/slot.public'; -import type { JSXNode, JSXOutput } from '../shared/jsx/types/jsx-node'; +import type { JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node'; import type { JSXChildren } from '../shared/jsx/types/jsx-qwik-attributes'; import { SSRComment, SSRRaw, SkipRender } from '../shared/jsx/utils.public'; import { trackSignal, untrack } from '../use/use-core'; @@ -410,7 +410,7 @@ export const vnode_diff = ( return new JSXNodeImpl(Projection, EMPTY_OBJ, null, [], 0, slotName); }; - const projections: Array = []; + const projections: Array = []; if (host) { // we need to create empty projections for all the slots to remove unused slots content for (let i = vnode_getPropStartIndex(host); i < host.length; i = i + 2) { @@ -450,7 +450,7 @@ export const vnode_diff = ( } function expectProjection() { - const jsxNode = jsxValue as JSXNode; + const jsxNode = jsxValue as JSXNodeInternal; const slotName = jsxNode.key as string; // console.log('expectProjection', JSON.stringify(slotName)); vCurrent = vnode_getProp( @@ -521,7 +521,7 @@ export const vnode_diff = ( } function getSlotNameKey(vHost: VNode | null) { - const jsxNode = jsxValue as JSXNode; + const jsxNode = jsxValue as JSXNodeInternal; const constProps = jsxNode.constProps; if (constProps && typeof constProps == 'object' && 'name' in constProps) { const constValue = constProps.name; @@ -534,7 +534,7 @@ export const vnode_diff = ( function drainAsyncQueue(): ValueOrPromise { while (asyncQueue.length) { - const jsxNode = asyncQueue.shift() as ValueOrPromise; + const jsxNode = asyncQueue.shift() as ValueOrPromise; const vHostNode = asyncQueue.shift() as VNode; if (isPromise(jsxNode)) { return jsxNode.then((jsxNode) => { @@ -591,7 +591,7 @@ export const vnode_diff = ( * * @returns {boolean} */ - function createNewElement(jsx: JSXNode, elementName: string): boolean { + function createNewElement(jsx: JSXNodeInternal, elementName: string): boolean { const element = createElementWithNamespace(elementName); const { constProps } = jsx; @@ -697,7 +697,7 @@ export const vnode_diff = ( return element; } - function expectElement(jsx: JSXNode, elementName: string) { + function expectElement(jsx: JSXNodeInternal, elementName: string) { const isSameElementName = vCurrent && vnode_isElementVNode(vCurrent) && elementName === vnode_getElementName(vCurrent); const jsxKey: string | null = jsx.key; @@ -983,7 +983,7 @@ export const vnode_diff = ( function expectComponent(component: Function) { const componentMeta = (component as any)[SERIALIZABLE_STATE] as [QRLInternal>]; let host = (vNewNode || vCurrent) as VirtualVNode | null; - const jsxNode = jsxValue as JSXNode; + const jsxNode = jsxValue as JSXNodeInternal; if (componentMeta) { const jsxProps = jsxNode.props; // QComponent @@ -1094,7 +1094,7 @@ export const vnode_diff = ( (vNewNode = vnode_newVirtual()), vCurrent && getInsertBefore() ); - const jsxNode = jsxValue as JSXNode; + const jsxNode = jsxValue as JSXNodeInternal; isDev && vnode_setProp(vNewNode, DEBUG_TYPE, VirtualType.Component); container.setHostProp(vNewNode, OnRenderProp, componentQRL); container.setHostProp(vNewNode, ELEMENT_PROPS, jsxProps); @@ -1108,7 +1108,7 @@ export const vnode_diff = ( (vNewNode = vnode_newVirtual()), vCurrent && getInsertBefore() ); - const jsxNode = jsxValue as JSXNode; + const jsxNode = jsxValue as JSXNodeInternal; isDev && vnode_setProp(vNewNode, DEBUG_TYPE, VirtualType.InlineComponent); vnode_setProp(vNewNode, ELEMENT_PROPS, jsxNode.props); if (jsxNode.key) { diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts index 56b433d3a3a..18597ab2851 100644 --- a/packages/qwik/src/core/shared/component-execution.ts +++ b/packages/qwik/src/core/shared/component-execution.ts @@ -3,7 +3,7 @@ import { isQwikComponent, type OnRenderFn } from './component.public'; import { assertDefined } from './error/assert'; import { isQrl, type QRLInternal } from './qrl/qrl-class'; import { JSXNodeImpl, isJSXNode, type Props } from './jsx/jsx-runtime'; -import type { JSXNode, JSXOutput } from './jsx/types/jsx-node'; +import type { JSXNodeInternal, JSXOutput } from './jsx/types/jsx-node'; import type { KnownEventNames } from './jsx/types/jsx-qwik-events'; import { invokeApply, newInvokeContext, untrack } from '../use/use-core'; import { type EventQRL, type UseOnMap } from '../use/use-on'; @@ -68,11 +68,11 @@ export const executeComponent = ( } componentFn = componentQRL.getFn(iCtx); } else if (isQwikComponent(componentQRL)) { - const qComponentFn = componentQRL as ( + const qComponentFn = componentQRL as any as ( props: Props, key: string | null, flags: number - ) => JSXNode; + ) => JSXNodeInternal; componentFn = () => invokeApply(iCtx, qComponentFn, [props || EMPTY_OBJ, null, 0]); } else { const inlineComponent = componentQRL as (props: Props) => JSXOutput; @@ -127,7 +127,7 @@ export const executeComponent = ( function addUseOnEvents( jsx: JSXOutput, useOnEvents: UseOnMap -): ValueOrPromise | null> { +): ValueOrPromise | null> { const jsxElement = findFirstStringJSX(jsx); return maybeThen(jsxElement, (jsxElement) => { let isInvisibleComponent = false; @@ -174,7 +174,11 @@ function addUseOnEvents( }); } -function addUseOnEvent(jsxElement: JSXNode, key: string, value: EventQRL[]) { +function addUseOnEvent( + jsxElement: JSXNodeInternal, + key: string, + value: EventQRL[] +) { let props = jsxElement.props; if (props === EMPTY_OBJ) { props = jsxElement.props = {}; @@ -189,19 +193,21 @@ function addUseOnEvent(jsxElement: JSXNode, key: string, value: EventQRL | null> { +function findFirstStringJSX(jsx: JSXOutput): ValueOrPromise | null> { const queue: any[] = [jsx]; while (queue.length) { const jsx = queue.shift(); if (isJSXNode(jsx)) { if (typeof jsx.type === 'string') { - return jsx as JSXNode; + return jsx as JSXNodeInternal; } queue.push(jsx.children); } else if (Array.isArray(jsx)) { queue.push(...jsx); } else if (isPromise(jsx)) { - return maybeThen | null>(jsx, (jsx) => findFirstStringJSX(jsx)); + return maybeThen | null>(jsx, (jsx) => + findFirstStringJSX(jsx) + ); } else if (isSignal(jsx)) { return findFirstStringJSX(untrack(() => jsx.value as JSXOutput)); } @@ -209,7 +215,7 @@ function findFirstStringJSX(jsx: JSXOutput): ValueOrPromise | nu return null; } -function addScriptNodeForInvisibleComponents(jsx: JSXOutput): JSXNode | null { +function addScriptNodeForInvisibleComponents(jsx: JSXOutput): JSXNodeInternal | null { if (isJSXNode(jsx)) { const jsxElement = new JSXNodeImpl( 'script', diff --git a/packages/qwik/src/core/shared/jsx/jsx-runtime.ts b/packages/qwik/src/core/shared/jsx/jsx-runtime.ts index fb15ff7ee96..d4a923b44b0 100644 --- a/packages/qwik/src/core/shared/jsx/jsx-runtime.ts +++ b/packages/qwik/src/core/shared/jsx/jsx-runtime.ts @@ -9,7 +9,7 @@ import { ELEMENT_ID, OnRenderProp, QScopedStyle, QSlot, QSlotS } from '../utils/ import { qDev, seal } from '../utils/qdev'; import { isArray, isObject, isString } from '../utils/types'; import { WrappedSignal } from '../../signal/signal'; -import type { DevJSX, FunctionComponent, JSXNode } from './types/jsx-node'; +import type { DevJSX, FunctionComponent, JSXNode, JSXNodeInternal } from './types/jsx-node'; import type { QwikJSX } from './types/jsx-qwik'; import type { JSXChildren } from './types/jsx-qwik-attributes'; @@ -39,7 +39,7 @@ export const _jsxSorted = ( flags: number, key: string | number | null | undefined, dev?: DevJSX -): JSXNode => { +): JSXNodeInternal => { const processed = key == null ? null : String(key); const node = new JSXNodeImpl( type, @@ -83,7 +83,7 @@ export const _jsxSplit = >( flags: number, key: string | number | null, dev?: DevJSX -): JSXNode => { +): JSXNodeInternal => { let sortedProps; if (varProps) { // filter and sort @@ -204,7 +204,7 @@ export const isPropsProxy = ( return obj && obj[_VAR_PROPS] !== undefined; }; -export class JSXNodeImpl implements JSXNode { +export class JSXNodeImpl implements JSXNodeInternal { dev?: DevJSX; constructor( public type: T, @@ -255,7 +255,7 @@ export const RenderOnce: FunctionComponent<{ }; /** @internal */ -export const isJSXNode = (n: unknown): n is JSXNode => { +export const isJSXNode = (n: unknown): n is JSXNodeInternal => { if (qDev) { if (n instanceof JSXNodeImpl) { return true; @@ -318,7 +318,7 @@ export const jsxDEV = >( export type { QwikJSX as JSX }; -export const createJSXError = (message: string, node: JSXNode) => { +export const createJSXError = (message: string, node: JSXNodeInternal) => { const error = new Error(message); if (!node.dev) { return error; @@ -434,7 +434,7 @@ class PropsProxyHandler implements ProxyHandler { * Instead of using PropsProxyHandler getter (which could create a component-level subscription). * Use this function to get the props directly from a const or var props. */ -export const directGetPropsProxyProp = (jsx: JSXNode, prop: string): T => { +export const directGetPropsProxyProp = (jsx: JSXNodeInternal, prop: string): T => { return ( jsx.constProps && prop in jsx.constProps ? jsx.constProps[prop] : jsx.varProps[prop] ) as T; diff --git a/packages/qwik/src/core/shared/jsx/types/jsx-node.ts b/packages/qwik/src/core/shared/jsx/types/jsx-node.ts index aedd137a11c..e566d3627aa 100644 --- a/packages/qwik/src/core/shared/jsx/types/jsx-node.ts +++ b/packages/qwik/src/core/shared/jsx/types/jsx-node.ts @@ -34,10 +34,19 @@ export interface DevJSX { export interface JSXNode { type: T; props: T extends FunctionComponent ? P : Record; - varProps: Record; - constProps: Record | null; children: JSXChildren | null; - flags: number; key: string | null; dev?: DevJSX; } + +/** + * The internal representation of a JSX Node. + * + * @internal + */ +export interface JSXNodeInternal + extends JSXNode { + varProps: Record; + constProps: Record | null; + flags: number; +} diff --git a/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts b/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts index 77a614ad591..5713d4aec8d 100644 --- a/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts +++ b/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts @@ -1,8 +1,8 @@ import { isDev } from '@qwik.dev/core/build'; -import type { JSXNode } from '@qwik.dev/core'; import { _jsxSorted } from '../../internal'; import { useServerData } from '../../use/use-env-data'; import { QBaseAttr, QManifestHashAttr } from '../utils/markers'; +import type { JSXOutput } from '../jsx/types/jsx-node'; /** * Install a service worker which will prefetch the bundles. @@ -30,7 +30,7 @@ export const PrefetchServiceWorker = (opts: { verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; -}): JSXNode<'script'> => { +}): JSXOutput => { const isTest = import.meta.env.TEST; if (isDev && !isTest) { const props = { @@ -125,7 +125,7 @@ const PREFETCH_CODE = /*#__PURE__*/ (( */ export const PrefetchGraph = ( opts: { base?: string; manifestHash?: string; manifestURL?: string; nonce?: string } = {} -) => { +): JSXOutput => { const isTest = import.meta.env.TEST; if (isDev && !isTest) { const props = { diff --git a/packages/qwik/src/core/ssr/ssr-render-jsx.ts b/packages/qwik/src/core/ssr/ssr-render-jsx.ts index c5d8323d4e7..14ee2dbc449 100644 --- a/packages/qwik/src/core/ssr/ssr-render-jsx.ts +++ b/packages/qwik/src/core/ssr/ssr-render-jsx.ts @@ -4,7 +4,7 @@ import { isQrl } from '../shared/qrl/qrl-class'; import type { QRL } from '../shared/qrl/qrl.public'; import { Fragment, directGetPropsProxyProp } from '../shared/jsx/jsx-runtime'; import { Slot } from '../shared/jsx/slot.public'; -import type { DevJSX, JSXNode, JSXOutput } from '../shared/jsx/types/jsx-node'; +import type { DevJSX, JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node'; import type { JSXChildren } from '../shared/jsx/types/jsx-qwik-attributes'; import { SSRComment, SSRRaw, SSRStream, type SSRStreamChildren } from '../shared/jsx/utils.public'; import { trackSignal } from '../use/use-core'; @@ -175,7 +175,7 @@ function processJSXNode( } }); } else { - const jsx = value as JSXNode; + const jsx = value as JSXNodeInternal; const type = jsx.type; // Below, JSXChildren allows functions and regexes, but we assume the dev only uses those as appropriate. if (typeof type === 'string') { @@ -529,7 +529,7 @@ function addPreventDefaultEventToSerializationContext( } } -function getSlotName(host: ISsrNode, jsx: JSXNode, ssr: SSRContainer): string { +function getSlotName(host: ISsrNode, jsx: JSXNodeInternal, ssr: SSRContainer): string { const constProps = jsx.constProps; if (constProps && typeof constProps == 'object' && 'name' in constProps) { const constValue = constProps.name; @@ -548,14 +548,14 @@ function getQwikInspectorAttributeValue(jsxDev: DevJSX): string | null { return null; } -function appendQwikInspectorAttribute(jsx: JSXNode, qwikInspectorAttrValue: string | null) { +function appendQwikInspectorAttribute(jsx: JSXNodeInternal, qwikInspectorAttrValue: string | null) { if (qwikInspectorAttrValue && (!jsx.constProps || !(qwikInspectorAttr in jsx.constProps))) { (jsx.constProps ||= {})[qwikInspectorAttr] = qwikInspectorAttrValue; } } // append class attribute if styleScopedId exists and there is no class attribute -function appendClassIfScopedStyleExists(jsx: JSXNode, styleScoped: string | null) { +function appendClassIfScopedStyleExists(jsx: JSXNodeInternal, styleScoped: string | null) { const classAttributeExists = directGetPropsProxyProp(jsx, 'class') != null; if (!classAttributeExists && styleScoped) { if (!jsx.constProps) { diff --git a/packages/qwik/src/core/ssr/ssr-types.ts b/packages/qwik/src/core/ssr/ssr-types.ts index 60ff8b8ef33..8bc7d51bbc9 100644 --- a/packages/qwik/src/core/ssr/ssr-types.ts +++ b/packages/qwik/src/core/ssr/ssr-types.ts @@ -9,13 +9,13 @@ import type { } from '../../server/qwik-types'; import type { PrefetchResource } from '../../server/types'; import type { QRL } from '../shared/qrl/qrl.public'; -import type { JSXNode } from '../shared/jsx/types/jsx-node'; +import type { JSXNodeInternal } from '../shared/jsx/types/jsx-node'; import type { ResourceReturnInternal } from '../use/use-resource'; import type { Signal } from '../signal/signal.public'; import type { VNodeData } from '../../server/vnode-data'; export type SsrAttrKey = string; -export type SsrAttrValue = string | Signal | boolean | Object | null; +export type SsrAttrValue = string | Signal | boolean | object | null; export type SsrAttrs = Array; /** @internal */ @@ -61,8 +61,8 @@ export interface SSRContainer extends Container { readonly serializationCtx: SerializationContext; readonly symbolToChunkResolver: SymbolToChunkResolver; readonly buildBase: string; - additionalHeadNodes: Array; - additionalBodyNodes: Array; + additionalHeadNodes: Array; + additionalBodyNodes: Array; unclaimedProjectionComponentFrameQueue: ISsrComponentFrame[]; openContainer(): void; diff --git a/packages/qwik/src/core/tests/optimizer-output.spec.tsx b/packages/qwik/src/core/tests/optimizer-output.spec.tsx index 4b7c546342b..9e669c39935 100644 --- a/packages/qwik/src/core/tests/optimizer-output.spec.tsx +++ b/packages/qwik/src/core/tests/optimizer-output.spec.tsx @@ -11,6 +11,7 @@ import { _jsxSorted, component$, useSignal, + type JSXNode, } from '@qwik.dev/core'; import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing'; import { describe, expect, it } from 'vitest'; @@ -77,7 +78,11 @@ describe.each([ )); const MyCmp = component$(() => { - return ; + return ( + + ); }); const { vNode } = await render(, { debug }); diff --git a/packages/qwik/src/server/api.md b/packages/qwik/src/server/api.md index f952ba4fd74..7c20dfcce6a 100644 --- a/packages/qwik/src/server/api.md +++ b/packages/qwik/src/server/api.md @@ -6,8 +6,8 @@ import type { QwikManifest } from '@qwik.dev/core/optimizer'; import type { ResolvedManifest } from '@qwik.dev/core/optimizer'; -import type { SnapshotResult } from '@qwik.dev/core/internal'; -import type { StreamWriter } from '@qwik.dev/core/internal'; +import type { SnapshotResult } from '@qwik.dev/core'; +import type { StreamWriter } from '@qwik.dev/core'; import type { SymbolMapperFn } from '@qwik.dev/core/optimizer'; // @public diff --git a/packages/qwik/src/server/ssr-container.ts b/packages/qwik/src/server/ssr-container.ts index af63bc255c9..b97a9229404 100644 --- a/packages/qwik/src/server/ssr-container.ts +++ b/packages/qwik/src/server/ssr-container.ts @@ -5,7 +5,6 @@ import { _jsxSplit, _walkJSX, isSignal, - type JSXNode, _EffectData as EffectData, } from '@qwik.dev/core'; import { isDev } from '@qwik.dev/core/build'; @@ -90,6 +89,8 @@ import { vNodeData_openFragment, type VNodeData, } from './vnode-data'; +// eslint-disable-next-line @typescript-eslint/no-restricted-imports +import type { JSXNodeInternal } from '../core/shared/jsx/types/jsx-node'; export interface SSRRenderOptions { locale?: string; @@ -180,14 +181,14 @@ class SSRContainer extends _SharedContainer implements ISSRContainer { * - From manifest injections * - From useStyles and useScopedStyles hooks */ - public additionalHeadNodes = new Array(); + public additionalHeadNodes = new Array(); /** * We use this to append additional nodes in the body node * * - From manifest injections */ - public additionalBodyNodes = new Array(); + public additionalBodyNodes = new Array(); private lastNode: ISsrNode | null = null; private currentComponentNode: ISsrNode | null = null; private styleIds = new Set(); diff --git a/packages/qwik/src/server/types.ts b/packages/qwik/src/server/types.ts index ff98d144ee7..8eb26b8fc22 100644 --- a/packages/qwik/src/server/types.ts +++ b/packages/qwik/src/server/types.ts @@ -1,4 +1,4 @@ -import type { SnapshotResult, StreamWriter } from '@qwik.dev/core/internal'; +import type { SnapshotResult, StreamWriter } from '@qwik.dev/core'; import type { QwikManifest, ResolvedManifest, diff --git a/packages/qwik/src/testing/api.md b/packages/qwik/src/testing/api.md index da64502926b..cdd3f89ed6d 100644 --- a/packages/qwik/src/testing/api.md +++ b/packages/qwik/src/testing/api.md @@ -8,7 +8,6 @@ import { ClientContainer } from '@qwik.dev/core'; import type { CorePlatform } from '@qwik.dev/core'; import type { _DomContainer } from '@qwik.dev/core'; import type { _ElementVNode } from '@qwik.dev/core'; -import type { JSXNode } from '@qwik.dev/core'; import type { JSXOutput } from '@qwik.dev/core'; import type { _QDocument } from '@qwik.dev/core'; import { RenderResult } from '@qwik.dev/core'; @@ -96,11 +95,15 @@ export function vnode_fromJSX(jsx: JSXOutput): { // @public (undocumented) export function walkJSX(jsx: JSXOutput, apply: { - enter: (jsx: JSXNode) => void; - leave: (jsx: JSXNode) => void; + enter: (jsx: JSXNodeInternal) => void; + leave: (jsx: JSXNodeInternal) => void; text: (text: _Stringifiable) => void; }): void; +// Warnings were encountered during analysis: +// +// /home/wmertens/Projects/qwik-2/dist-dev/dts-out/packages/qwik/src/testing/vdom-diff.unit-util.d.ts:7:5 - (ae-forgotten-export) The symbol "JSXNodeInternal" needs to be exported by the entry point index.d.ts + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/qwik/src/testing/vdom-diff.unit-util.ts b/packages/qwik/src/testing/vdom-diff.unit-util.ts index 2d318b31e80..8e871999d90 100644 --- a/packages/qwik/src/testing/vdom-diff.unit-util.ts +++ b/packages/qwik/src/testing/vdom-diff.unit-util.ts @@ -51,9 +51,15 @@ import { import { createDocument } from './document'; import { isElement } from './html'; import { QRenderAttr, Q_PROPS_SEPARATOR } from '../core/shared/utils/markers'; +import type { JSXNodeInternal } from '../core/shared/jsx/types/jsx-node'; expect.extend({ - toMatchVDOM(this: { isNot: boolean }, received: _VNode, expected: JSXNode, isCsr?: boolean) { + toMatchVDOM( + this: { isNot: boolean }, + received: _VNode, + expected: JSXNodeInternal, + isCsr?: boolean + ) { const { isNot } = this; const container = getContainerElement(received); const isSsr = typeof isCsr === 'boolean' ? !isCsr : isSsrRenderer(container); @@ -95,13 +101,13 @@ function isSsrRenderer(container: _ContainerElement) { return container.hasAttribute(QRenderAttr); } -function isSkippableNode(node: JSXNode): boolean { +function isSkippableNode(node: JSXNodeInternal): boolean { return node.type === Fragment && !node.constProps?.['ssr-required']; } function diffJsxVNode( received: _VNode, - expected: JSXNode | string, + expected: JSXNodeInternal | string, path: string[] = [], container: _ContainerElement, isSsr: boolean @@ -222,7 +228,9 @@ function diffJsxVNodeChildren( for (let i = 0; i < receivedChildren.length; i++) { const receivedChild = receivedChildren[i]; const expectedChild = expectedChildren[i]; - diffs.push(...diffJsxVNode(receivedChild, expectedChild as JSXNode, path, container, isSsr)); + diffs.push( + ...diffJsxVNode(receivedChild, expectedChild as JSXNodeInternal, path, container, isSsr) + ); } } else { diffs.push( @@ -378,8 +386,8 @@ function shouldSkip(vNode: _VNode | null) { export function walkJSX( jsx: JSXOutput, apply: { - enter: (jsx: JSXNode) => void; - leave: (jsx: JSXNode) => void; + enter: (jsx: JSXNodeInternal) => void; + leave: (jsx: JSXNodeInternal) => void; text: (text: _Stringifiable) => void; } ) { @@ -440,7 +448,7 @@ export function vnode_fromJSX(jsx: JSXOutput) { throw new Error('Unknown type:' + type); } }, - leave: (jsx) => { + leave: (_jsx) => { vParent = vnode_getParent(vParent) as any; }, text: (value) => { From 0b22123132b313d789156aacaa8f503400cd5ae0 Mon Sep 17 00:00:00 2001 From: Wout Mertens Date: Tue, 5 Nov 2024 10:05:19 +0100 Subject: [PATCH 2/9] fix(core): correct serializeAttribute type --- packages/qwik/src/core/api.md | 2 +- packages/qwik/src/core/client/types.ts | 2 +- packages/qwik/src/core/client/vnode.ts | 6 ++++-- packages/qwik/src/core/shared/scheduler.ts | 6 +++--- packages/qwik/src/core/shared/utils/styles.ts | 6 +++++- packages/qwik/src/server/ssr-container.ts | 8 ++++---- 6 files changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/qwik/src/core/api.md b/packages/qwik/src/core/api.md index 0bddca96a55..a365ba7cd20 100644 --- a/packages/qwik/src/core/api.md +++ b/packages/qwik/src/core/api.md @@ -2009,7 +2009,7 @@ _VNode | null, _VNode | null, /////////////// 4 - First child _VNode | null, -...(string | null)[] +...(string | null | boolean)[] ] & { __brand__: 'FragmentNode' & 'HostElement'; }; diff --git a/packages/qwik/src/core/client/types.ts b/packages/qwik/src/core/client/types.ts index cb213c70605..e8274e46b4c 100644 --- a/packages/qwik/src/core/client/types.ts +++ b/packages/qwik/src/core/client/types.ts @@ -169,7 +169,7 @@ export type VirtualVNode = [ VNode | null, /////////////// 4 - First child VNode | null, /////////////// 5 - Last child /// Props - ...(string | null)[], /////// 6 - attrs + ...(string | null | boolean)[], /////// 6 - attrs ] & { __brand__: 'FragmentNode' & 'HostElement' }; /** @internal */ diff --git a/packages/qwik/src/core/client/vnode.ts b/packages/qwik/src/core/client/vnode.ts index 268ff1557d8..52eaaa4b069 100644 --- a/packages/qwik/src/core/client/vnode.ts +++ b/packages/qwik/src/core/client/vnode.ts @@ -188,7 +188,9 @@ export const enum VNodeJournalOpCode { Insert = 5, // ------- [Insert, target(parent), reference, ...nodes] } -export type VNodeJournal = Array; +export type VNodeJournal = Array< + VNodeJournalOpCode | Document | Element | Text | string | boolean | null +>; ////////////////////////////////////////////////////////////////////////////////////////////////////// @@ -1452,7 +1454,7 @@ export const vnode_setAttr = ( journal: VNodeJournal | null, vnode: VNode, key: string, - value: string | null + value: string | null | boolean ): void => { const type = vnode[VNodeProps.flags]; if ((type & VNodeFlags.ELEMENT_OR_VIRTUAL_MASK) !== 0) { diff --git a/packages/qwik/src/core/shared/scheduler.ts b/packages/qwik/src/core/shared/scheduler.ts index 728455f8ad1..9757339bea5 100644 --- a/packages/qwik/src/core/shared/scheduler.ts +++ b/packages/qwik/src/core/shared/scheduler.ts @@ -377,12 +377,12 @@ export const createScheduler = ( const isConst = payload.$isConst$; const journal = (container as DomContainer).$journal$; const property = chore.$idx$ as string; - value = serializeAttribute(property, value, payload.$scopedStyleIdPrefix$); + const serializedValue = serializeAttribute(property, value, payload.$scopedStyleIdPrefix$); if (isConst) { const element = virtualNode[ElementVNodeProps.element] as Element; - journal.push(VNodeJournalOpCode.SetAttribute, element, property, value); + journal.push(VNodeJournalOpCode.SetAttribute, element, property, serializedValue); } else { - vnode_setAttr(journal, virtualNode, property, value); + vnode_setAttr(journal, virtualNode, property, serializedValue); } break; case ChoreType.QRL_RESOLVE: { diff --git a/packages/qwik/src/core/shared/utils/styles.ts b/packages/qwik/src/core/shared/utils/styles.ts index f5df16c491d..3447b302bd5 100644 --- a/packages/qwik/src/core/shared/utils/styles.ts +++ b/packages/qwik/src/core/shared/utils/styles.ts @@ -73,7 +73,11 @@ export const serializeBooleanOrNumberAttribute = (value: any) => { return value != null ? String(value) : null; }; -export function serializeAttribute(key: string, value: any, styleScopedId?: string | null): string { +export function serializeAttribute( + key: string, + value: any, + styleScopedId?: string | null +): string | null | boolean { if (isClassAttr(key)) { const serializedClass = serializeClass(value as ClassList); value = styleScopedId diff --git a/packages/qwik/src/server/ssr-container.ts b/packages/qwik/src/server/ssr-container.ts index b97a9229404..2f3801fae11 100644 --- a/packages/qwik/src/server/ssr-container.ts +++ b/packages/qwik/src/server/ssr-container.ts @@ -1165,14 +1165,14 @@ class SSRContainer extends _SharedContainer implements ISSRContainer { value = QContainerValue.TEXT; } - value = serializeAttribute(key, value, styleScopedId); + const serializedValue = serializeAttribute(key, value, styleScopedId); - if (value != null && value !== false) { + if (serializedValue != null && serializedValue !== false) { this.write(' '); this.write(key); - if (value !== true) { + if (serializedValue !== true) { this.write('="'); - const strValue = escapeHTML(String(value)); + const strValue = escapeHTML(String(serializedValue)); this.write(strValue); this.write('"'); From 60d6583b834debda86efc992b706108b6f909fbf Mon Sep 17 00:00:00 2001 From: Varixo Date: Sun, 10 Nov 2024 14:55:30 +0100 Subject: [PATCH 3/9] fix build --- packages/qwik/src/core/api.md | 14 ++++++++++++-- packages/qwik/src/core/index.ts | 8 +++++++- packages/qwik/src/testing/api.md | 5 +---- .../qwik/src/testing/vdom-diff.unit-util.ts | 19 +++++-------------- 4 files changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/qwik/src/core/api.md b/packages/qwik/src/core/api.md index a365ba7cd20..1ce71d6dffb 100644 --- a/packages/qwik/src/core/api.md +++ b/packages/qwik/src/core/api.md @@ -529,8 +529,6 @@ export type IntrinsicSVGElements = { [K in keyof Omit]: LenientSVGProps; }; -// Warning: (ae-forgotten-export) The symbol "JSXNodeInternal" needs to be exported by the entry point index.d.ts -// // @internal (undocumented) export const _isJSXNode: (n: unknown) => n is JSXNodeInternal; @@ -601,6 +599,18 @@ export interface JSXNode extends JSXNode { + // (undocumented) + constProps: Record | null; + // (undocumented) + flags: number; + // (undocumented) + varProps: Record; +} + // @public export type JSXOutput = JSXNode | string | number | boolean | null | undefined | JSXOutput[]; diff --git a/packages/qwik/src/core/index.ts b/packages/qwik/src/core/index.ts index 20a2f0b7ea9..0930399c5c4 100644 --- a/packages/qwik/src/core/index.ts +++ b/packages/qwik/src/core/index.ts @@ -69,7 +69,13 @@ export type { EventHandler, QRLEventHandlerMulti, } from './shared/jsx/types/jsx-qwik-attributes'; -export type { JSXOutput, FunctionComponent, JSXNode, DevJSX } from './shared/jsx/types/jsx-node'; +export type { + JSXOutput, + FunctionComponent, + JSXNode, + JSXNodeInternal, + DevJSX, +} from './shared/jsx/types/jsx-node'; export type { QwikDOMAttributes, QwikJSX, QwikJSX as JSX } from './shared/jsx/types/jsx-qwik'; export type { QwikIntrinsicElements } from './shared/jsx/types/jsx-qwik-elements'; diff --git a/packages/qwik/src/testing/api.md b/packages/qwik/src/testing/api.md index cdd3f89ed6d..19c0ca99a31 100644 --- a/packages/qwik/src/testing/api.md +++ b/packages/qwik/src/testing/api.md @@ -8,6 +8,7 @@ import { ClientContainer } from '@qwik.dev/core'; import type { CorePlatform } from '@qwik.dev/core'; import type { _DomContainer } from '@qwik.dev/core'; import type { _ElementVNode } from '@qwik.dev/core'; +import type { JSXNodeInternal } from '@qwik.dev/core'; import type { JSXOutput } from '@qwik.dev/core'; import type { _QDocument } from '@qwik.dev/core'; import { RenderResult } from '@qwik.dev/core'; @@ -100,10 +101,6 @@ export function walkJSX(jsx: JSXOutput, apply: { text: (text: _Stringifiable) => void; }): void; -// Warnings were encountered during analysis: -// -// /home/wmertens/Projects/qwik-2/dist-dev/dts-out/packages/qwik/src/testing/vdom-diff.unit-util.d.ts:7:5 - (ae-forgotten-export) The symbol "JSXNodeInternal" needs to be exported by the entry point index.d.ts - // (No @packageDocumentation comment for this package) ``` diff --git a/packages/qwik/src/testing/vdom-diff.unit-util.ts b/packages/qwik/src/testing/vdom-diff.unit-util.ts index 8e871999d90..84518b66ade 100644 --- a/packages/qwik/src/testing/vdom-diff.unit-util.ts +++ b/packages/qwik/src/testing/vdom-diff.unit-util.ts @@ -1,7 +1,7 @@ +import { Fragment, Slot, isSignal } from '@qwik.dev/core'; +import { _CONST_PROPS, _VAR_PROPS, _isJSXNode, _isStringifiable } from '@qwik.dev/core/internal'; +import type { JSXChildren, JSXNode, JSXOutput } from '@qwik.dev/core'; import type { - JSXChildren, - JSXNode, - JSXOutput, _ContainerElement, _ElementVNode, _QDocument, @@ -9,16 +9,8 @@ import type { _TextVNode, _VNode, _VirtualVNode, -} from '@qwik.dev/core'; -import { - Fragment, - Slot, - _CONST_PROPS, - _VAR_PROPS, - _isJSXNode, - _isStringifiable, - isSignal, -} from '@qwik.dev/core'; + JSXNodeInternal, +} from '@qwik.dev/core/internal'; import { expect } from 'vitest'; import { vnode_applyJournal, @@ -51,7 +43,6 @@ import { import { createDocument } from './document'; import { isElement } from './html'; import { QRenderAttr, Q_PROPS_SEPARATOR } from '../core/shared/utils/markers'; -import type { JSXNodeInternal } from '../core/shared/jsx/types/jsx-node'; expect.extend({ toMatchVDOM( From 70bcc0f3323f94192c399bd631cf60605ecd4072 Mon Sep 17 00:00:00 2001 From: Wout Mertens Date: Tue, 12 Nov 2024 11:56:52 +0100 Subject: [PATCH 4/9] fix imports qwik/testing --- .../docs/src/routes/api/qwik-testing/api.json | 2 +- .../docs/src/routes/api/qwik-testing/index.md | 4 ++-- packages/qwik/src/testing/api.md | 18 +++++++++--------- .../qwik/src/testing/rendering.unit-util.tsx | 10 ++++++++-- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/docs/src/routes/api/qwik-testing/api.json b/packages/docs/src/routes/api/qwik-testing/api.json index c4235143713..6655a5bf60d 100644 --- a/packages/docs/src/routes/api/qwik-testing/api.json +++ b/packages/docs/src/routes/api/qwik-testing/api.json @@ -74,7 +74,7 @@ } ], "kind": "Function", - "content": "```typescript\nexport declare function domRender(jsx: JSXOutput, opts?: {\n debug?: boolean;\n}): Promise<{\n document: Document;\n container: import(\"@qwik.dev/core\").ClientContainer;\n vNode: _VNode | null;\n getStyles: () => Record;\n}>;\n```\n\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\njsx\n\n\n\n\nJSXOutput\n\n\n\n\n\n
\n\nopts\n\n\n\n\n{ debug?: boolean; }\n\n\n\n\n_(Optional)_\n\n\n
\n**Returns:**\n\nPromise<{ document: Document; container: import(\"@qwik.dev/core\").ClientContainer; vNode: \\_VNode \\| null; getStyles: () => Record<string, string \\| string\\[\\]>; }>", + "content": "```typescript\nexport declare function domRender(jsx: JSXOutput, opts?: {\n debug?: boolean;\n}): Promise<{\n document: Document;\n container: import(\"@qwik.dev/core/internal\").ClientContainer;\n vNode: _VNode | null;\n getStyles: () => Record;\n}>;\n```\n\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\njsx\n\n\n\n\nJSXOutput\n\n\n\n\n\n
\n\nopts\n\n\n\n\n{ debug?: boolean; }\n\n\n\n\n_(Optional)_\n\n\n
\n**Returns:**\n\nPromise<{ document: Document; container: import(\"@qwik.dev/core/internal\").ClientContainer; vNode: \\_VNode \\| null; getStyles: () => Record<string, string \\| string\\[\\]>; }>", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/rendering.unit-util.tsx", "mdFile": "core.domrender.md" }, diff --git a/packages/docs/src/routes/api/qwik-testing/index.md b/packages/docs/src/routes/api/qwik-testing/index.md index f2dfc8d442d..b8b4645fa0f 100644 --- a/packages/docs/src/routes/api/qwik-testing/index.md +++ b/packages/docs/src/routes/api/qwik-testing/index.md @@ -119,7 +119,7 @@ export declare function domRender( }, ): Promise<{ document: Document; - container: import("@qwik.dev/core").ClientContainer; + container: import("@qwik.dev/core/internal").ClientContainer; vNode: _VNode | null; getStyles: () => Record; }>; @@ -165,7 +165,7 @@ _(Optional)_ **Returns:** -Promise<{ document: Document; container: import("@qwik.dev/core").ClientContainer; vNode: \_VNode \| null; getStyles: () => Record<string, string \| string[]>; }> +Promise<{ document: Document; container: import("@qwik.dev/core/internal").ClientContainer; vNode: \_VNode \| null; getStyles: () => Record<string, string \| string[]>; }> [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/rendering.unit-util.tsx) diff --git a/packages/qwik/src/testing/api.md b/packages/qwik/src/testing/api.md index 19c0ca99a31..0181ae13d24 100644 --- a/packages/qwik/src/testing/api.md +++ b/packages/qwik/src/testing/api.md @@ -4,17 +4,17 @@ ```ts -import { ClientContainer } from '@qwik.dev/core'; +import { ClientContainer } from '@qwik.dev/core/internal'; import type { CorePlatform } from '@qwik.dev/core'; -import type { _DomContainer } from '@qwik.dev/core'; -import type { _ElementVNode } from '@qwik.dev/core'; -import type { JSXNodeInternal } from '@qwik.dev/core'; -import type { JSXOutput } from '@qwik.dev/core'; -import type { _QDocument } from '@qwik.dev/core'; +import type { _DomContainer } from '@qwik.dev/core/internal'; +import type { _ElementVNode } from '@qwik.dev/core/internal'; +import type { JSXNodeInternal } from '@qwik.dev/core/internal'; +import { JSXOutput } from '@qwik.dev/core'; +import type { _QDocument } from '@qwik.dev/core/internal'; import { RenderResult } from '@qwik.dev/core'; -import type { _Stringifiable } from '@qwik.dev/core'; -import type { _VirtualVNode } from '@qwik.dev/core'; -import type { _VNode } from '@qwik.dev/core'; +import type { _Stringifiable } from '@qwik.dev/core/internal'; +import type { _VirtualVNode } from '@qwik.dev/core/internal'; +import type { _VNode } from '@qwik.dev/core/internal'; // Warning: (ae-forgotten-export) The symbol "MockDocumentOptions" needs to be exported by the entry point index.d.ts // diff --git a/packages/qwik/src/testing/rendering.unit-util.tsx b/packages/qwik/src/testing/rendering.unit-util.tsx index 85d42bc0435..f59e43d43a2 100644 --- a/packages/qwik/src/testing/rendering.unit-util.tsx +++ b/packages/qwik/src/testing/rendering.unit-util.tsx @@ -1,12 +1,18 @@ /* eslint-disable no-console */ import type { - JSXOutput, _ContainerElement, _DomContainer, _VNode, _VirtualVNode, +} from '@qwik.dev/core/internal'; +import { + Slot, + _getDomContainer, + componentQrl, + render, + type OnRenderFn, + type JSXOutput, } from '@qwik.dev/core'; -import { Slot, _getDomContainer, componentQrl, render, type OnRenderFn } from '@qwik.dev/core'; import { expect } from 'vitest'; import { vnode_getAttr, From d00396eed65e971809c16af3ad89118cf1d0235f Mon Sep 17 00:00:00 2001 From: Wout Mertens Date: Tue, 12 Nov 2024 12:20:37 +0100 Subject: [PATCH 5/9] chore: remove html types they are not necessary and they make the API harder to grasp --- .changeset/fast-baboons-itch.md | 5 + packages/docs/src/routes/api/qwik/api.json | 1278 +-- packages/docs/src/routes/api/qwik/index.md | 11230 +++++-------------- packages/qwik/src/core/api.md | 901 +- packages/qwik/src/core/index.ts | 1 - 5 files changed, 2732 insertions(+), 10683 deletions(-) create mode 100644 .changeset/fast-baboons-itch.md diff --git a/.changeset/fast-baboons-itch.md b/.changeset/fast-baboons-itch.md new file mode 100644 index 00000000000..c143d2a6e8a --- /dev/null +++ b/.changeset/fast-baboons-itch.md @@ -0,0 +1,5 @@ +--- +'@qwik.dev/core': major +--- + +BREAKING: remove HTML-related types. Use PropsOf instead. diff --git a/packages/docs/src/routes/api/qwik/api.json b/packages/docs/src/routes/api/qwik/api.json index c1c250686f9..3d3c367a2dc 100644 --- a/packages/docs/src/routes/api/qwik/api.json +++ b/packages/docs/src/routes/api/qwik/api.json @@ -19,193 +19,6 @@ "content": "```typescript\n'q:slot'?: string;\n```", "mdFile": "core.componentbaseprops._q_slot_.md" }, - { - "name": "\"xlink:actuate\"", - "id": "svgattributes-_xlink_actuate_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xlink_actuate_" - }, - { - "name": "\"xlink:actuate\"", - "id": "svgattributes-_xlink_actuate_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xlink:actuate'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xlink_actuate_.md" - }, - { - "name": "\"xlink:arcrole\"", - "id": "svgattributes-_xlink_arcrole_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xlink_arcrole_" - }, - { - "name": "\"xlink:arcrole\"", - "id": "svgattributes-_xlink_arcrole_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xlink:arcrole'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xlink_arcrole_.md" - }, - { - "name": "\"xlink:href\"", - "id": "svgattributes-_xlink_href_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xlink_href_" - }, - { - "name": "\"xlink:href\"", - "id": "svgattributes-_xlink_href_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xlink:href'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xlink_href_.md" - }, - { - "name": "\"xlink:role\"", - "id": "svgattributes-_xlink_role_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xlink_role_" - }, - { - "name": "\"xlink:role\"", - "id": "svgattributes-_xlink_role_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xlink:role'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xlink_role_.md" - }, - { - "name": "\"xlink:show\"", - "id": "svgattributes-_xlink_show_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xlink_show_" - }, - { - "name": "\"xlink:show\"", - "id": "svgattributes-_xlink_show_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xlink:show'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xlink_show_.md" - }, - { - "name": "\"xlink:title\"", - "id": "svgattributes-_xlink_title_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xlink_title_" - }, - { - "name": "\"xlink:title\"", - "id": "svgattributes-_xlink_title_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xlink:title'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xlink_title_.md" - }, - { - "name": "\"xlink:type\"", - "id": "svgattributes-_xlink_type_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xlink_type_" - }, - { - "name": "\"xlink:type\"", - "id": "svgattributes-_xlink_type_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xlink:type'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xlink_type_.md" - }, - { - "name": "\"xml:base\"", - "id": "svgattributes-_xml_base_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xml_base_" - }, - { - "name": "\"xml:base\"", - "id": "svgattributes-_xml_base_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xml:base'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xml_base_.md" - }, - { - "name": "\"xml:lang\"", - "id": "svgattributes-_xml_lang_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xml_lang_" - }, - { - "name": "\"xml:lang\"", - "id": "svgattributes-_xml_lang_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xml:lang'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xml_lang_.md" - }, - { - "name": "\"xml:space\"", - "id": "svgattributes-_xml_space_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xml_space_" - }, - { - "name": "\"xml:space\"", - "id": "svgattributes-_xml_space_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xml:space'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xml_space_.md" - }, - { - "name": "\"xmlns:xlink\"", - "id": "svgattributes-_xmlns_xlink_", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes-_xmlns_xlink_" - }, - { - "name": "\"xmlns:xlink\"", - "id": "svgattributes-_xmlns_xlink_" - } - ], - "kind": "PropertySignature", - "content": "```typescript\n'xmlns:xlink'?: string | undefined;\n```", - "mdFile": "core.svgattributes._xmlns_xlink_.md" - }, { "name": "$", "id": "_", @@ -220,132 +33,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts", "mdFile": "core._.md" }, - { - "name": "AnchorHTMLAttributes", - "id": "anchorhtmlattributes", - "hierarchy": [ - { - "name": "AnchorHTMLAttributes", - "id": "anchorhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface AnchorHTMLAttributes extends Attrs<'a', T> \n```\n**Extends:** Attrs<'a', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.anchorhtmlattributes.md" - }, - { - "name": "AreaHTMLAttributes", - "id": "areahtmlattributes", - "hierarchy": [ - { - "name": "AreaHTMLAttributes", - "id": "areahtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface AreaHTMLAttributes extends Attrs<'area', T> \n```\n**Extends:** Attrs<'area', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.areahtmlattributes.md" - }, - { - "name": "AriaAttributes", - "id": "ariaattributes", - "hierarchy": [ - { - "name": "AriaAttributes", - "id": "ariaattributes" - } - ], - "kind": "Interface", - "content": "TS defines these with the React syntax which is not compatible with Qwik. E.g. `ariaAtomic` instead of `aria-atomic`.\n\n\n```typescript\nexport interface AriaAttributes \n```\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[\"aria-activedescendant\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.\n\n\n
\n\n[\"aria-atomic\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(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.\n\n\n
\n\n[\"aria-autocomplete\"?](#)\n\n\n\n\n\n\n\n'none' \\| 'inline' \\| 'list' \\| 'both' \\| undefined\n\n\n\n\n_(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.\n\n\n
\n\n[\"aria-busy\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(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.\n\n\n
\n\n[\"aria-checked\"?](#)\n\n\n\n\n\n\n\nboolean \\| 'false' \\| 'mixed' \\| 'true' \\| undefined\n\n\n\n\n_(Optional)_ Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n\n\n
\n\n[\"aria-colcount\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines the total number of columns in a table, grid, or treegrid.\n\n\n
\n\n[\"aria-colindex\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n\n\n
\n\n[\"aria-colspan\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n\n\n
\n\n[\"aria-controls\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Identifies the element (or elements) whose contents or presence are controlled by the current element.\n\n\n
\n\n[\"aria-current\"?](#)\n\n\n\n\n\n\n\nboolean \\| 'false' \\| 'true' \\| 'page' \\| 'step' \\| 'location' \\| 'date' \\| 'time' \\| undefined\n\n\n\n\n_(Optional)_ Indicates the element that represents the current item within a container or set of related elements.\n\n\n
\n\n[\"aria-describedby\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Identifies the element (or elements) that describes the object.\n\n\n
\n\n[\"aria-details\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Identifies the element that provides a detailed, extended description for the object.\n\n\n
\n\n[\"aria-disabled\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n\n\n
\n\n[\"aria-dropeffect\"?](#)\n\n\n\n\n\n\n\n'none' \\| 'copy' \\| 'execute' \\| 'link' \\| 'move' \\| 'popup' \\| undefined\n\n\n\n\n_(Optional)_ Indicates what functions can be performed when a dragged object is released on the drop target.\n\n\n
\n\n[\"aria-errormessage\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Identifies the element that provides an error message for the object.\n\n\n
\n\n[\"aria-expanded\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.\n\n\n
\n\n[\"aria-flowto\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(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.\n\n\n
\n\n[\"aria-grabbed\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n\n\n
\n\n[\"aria-haspopup\"?](#)\n\n\n\n\n\n\n\nboolean \\| 'false' \\| 'true' \\| 'menu' \\| 'listbox' \\| 'tree' \\| 'grid' \\| 'dialog' \\| undefined\n\n\n\n\n_(Optional)_ Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.\n\n\n
\n\n[\"aria-hidden\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates whether the element is exposed to an accessibility API.\n\n\n
\n\n[\"aria-invalid\"?](#)\n\n\n\n\n\n\n\nboolean \\| 'false' \\| 'true' \\| 'grammar' \\| 'spelling' \\| undefined\n\n\n\n\n_(Optional)_ Indicates the entered value does not conform to the format expected by the application.\n\n\n
\n\n[\"aria-keyshortcuts\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.\n\n\n
\n\n[\"aria-label\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Defines a string value that labels the current element.\n\n\n
\n\n[\"aria-labelledby\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Identifies the element (or elements) that labels the current element.\n\n\n
\n\n[\"aria-level\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines the hierarchical level of an element within a structure.\n\n\n
\n\n[\"aria-live\"?](#)\n\n\n\n\n\n\n\n'off' \\| 'assertive' \\| 'polite' \\| undefined\n\n\n\n\n_(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.\n\n\n
\n\n[\"aria-modal\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates whether an element is modal when displayed.\n\n\n
\n\n[\"aria-multiline\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates whether a text box accepts multiple lines of input or only a single line.\n\n\n
\n\n[\"aria-multiselectable\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates that the user may select more than one item from the current selectable descendants.\n\n\n
\n\n[\"aria-orientation\"?](#)\n\n\n\n\n\n\n\n'horizontal' \\| 'vertical' \\| undefined\n\n\n\n\n_(Optional)_ Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.\n\n\n
\n\n[\"aria-owns\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(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.\n\n\n
\n\n[\"aria-placeholder\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(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.\n\n\n
\n\n[\"aria-posinset\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(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.\n\n\n
\n\n[\"aria-pressed\"?](#)\n\n\n\n\n\n\n\nboolean \\| 'false' \\| 'mixed' \\| 'true' \\| undefined\n\n\n\n\n_(Optional)_ Indicates the current \"pressed\" state of toggle buttons.\n\n\n
\n\n[\"aria-readonly\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates that the element is not editable, but is otherwise operable.\n\n\n
\n\n[\"aria-relevant\"?](#)\n\n\n\n\n\n\n\n'additions' \\| 'additions removals' \\| 'additions text' \\| 'all' \\| 'removals' \\| 'removals additions' \\| 'removals text' \\| 'text' \\| 'text additions' \\| 'text removals' \\| undefined\n\n\n\n\n_(Optional)_ Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n\n\n
\n\n[\"aria-required\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates that user input is required on the element before a form may be submitted.\n\n\n
\n\n[\"aria-roledescription\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Defines a human-readable, author-localized description for the role of an element.\n\n\n
\n\n[\"aria-rowcount\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines the total number of rows in a table, grid, or treegrid.\n\n\n
\n\n[\"aria-rowindex\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n\n\n
\n\n[\"aria-rowspan\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n\n\n
\n\n[\"aria-selected\"?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_ Indicates the current \"selected\" state of various widgets.\n\n\n
\n\n[\"aria-setsize\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(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.\n\n\n
\n\n[\"aria-sort\"?](#)\n\n\n\n\n\n\n\n'none' \\| 'ascending' \\| 'descending' \\| 'other' \\| undefined\n\n\n\n\n_(Optional)_ Indicates if items in a table or grid are sorted in ascending or descending order.\n\n\n
\n\n[\"aria-valuemax\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines the maximum allowed value for a range widget.\n\n\n
\n\n[\"aria-valuemin\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines the minimum allowed value for a range widget.\n\n\n
\n\n[\"aria-valuenow\"?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_ Defines the current value for a range widget.\n\n\n
\n\n[\"aria-valuetext\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_ Defines the human readable text alternative of aria-valuenow for a range widget.\n\n\n
", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.ariaattributes.md" - }, - { - "name": "AriaRole", - "id": "ariarole", - "hierarchy": [ - { - "name": "AriaRole", - "id": "ariarole" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport 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 & {});\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.ariarole.md" - }, - { - "name": "AudioHTMLAttributes", - "id": "audiohtmlattributes", - "hierarchy": [ - { - "name": "AudioHTMLAttributes", - "id": "audiohtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface AudioHTMLAttributes extends Attrs<'audio', T> \n```\n**Extends:** Attrs<'audio', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.audiohtmlattributes.md" - }, - { - "name": "BaseHTMLAttributes", - "id": "basehtmlattributes", - "hierarchy": [ - { - "name": "BaseHTMLAttributes", - "id": "basehtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface BaseHTMLAttributes extends Attrs<'base', T> \n```\n**Extends:** Attrs<'base', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.basehtmlattributes.md" - }, - { - "name": "BlockquoteHTMLAttributes", - "id": "blockquotehtmlattributes", - "hierarchy": [ - { - "name": "BlockquoteHTMLAttributes", - "id": "blockquotehtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface BlockquoteHTMLAttributes extends Attrs<'blockquote', T> \n```\n**Extends:** Attrs<'blockquote', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.blockquotehtmlattributes.md" - }, - { - "name": "Booleanish", - "id": "booleanish", - "hierarchy": [ - { - "name": "Booleanish", - "id": "booleanish" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport type Booleanish = boolean | `${boolean}`;\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.booleanish.md" - }, - { - "name": "ButtonHTMLAttributes", - "id": "buttonhtmlattributes", - "hierarchy": [ - { - "name": "ButtonHTMLAttributes", - "id": "buttonhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface ButtonHTMLAttributes extends Attrs<'button', T> \n```\n**Extends:** Attrs<'button', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.buttonhtmlattributes.md" - }, { "name": "cache", "id": "resourcectx-cache", @@ -363,20 +50,6 @@ "content": "```typescript\ncache(policyOrMilliseconds: number | 'immutable'): void;\n```\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\npolicyOrMilliseconds\n\n\n\n\nnumber \\| 'immutable'\n\n\n\n\n\n
\n**Returns:**\n\nvoid", "mdFile": "core.resourcectx.cache.md" }, - { - "name": "CanvasHTMLAttributes", - "id": "canvashtmlattributes", - "hierarchy": [ - { - "name": "CanvasHTMLAttributes", - "id": "canvashtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface CanvasHTMLAttributes extends Attrs<'canvas', T> \n```\n**Extends:** Attrs<'canvas', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.canvashtmlattributes.md" - }, { "name": "ClassList", "id": "classlist", @@ -408,34 +81,6 @@ "content": "```typescript\ncleanup(): void;\n```\n**Returns:**\n\nvoid", "mdFile": "core.renderresult.cleanup.md" }, - { - "name": "ColgroupHTMLAttributes", - "id": "colgrouphtmlattributes", - "hierarchy": [ - { - "name": "ColgroupHTMLAttributes", - "id": "colgrouphtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface ColgroupHTMLAttributes extends Attrs<'colgroup', T> \n```\n**Extends:** Attrs<'colgroup', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.colgrouphtmlattributes.md" - }, - { - "name": "ColHTMLAttributes", - "id": "colhtmlattributes", - "hierarchy": [ - { - "name": "ColHTMLAttributes", - "id": "colhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface ColHTMLAttributes extends Attrs<'col', T> \n```\n**Extends:** Attrs<'col', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.colhtmlattributes.md" - }, { "name": "Component", "id": "component", @@ -590,62 +235,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts", "mdFile": "core.createsignal.md" }, - { - "name": "CSSProperties", - "id": "cssproperties", - "hierarchy": [ - { - "name": "CSSProperties", - "id": "cssproperties" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface CSSProperties extends CSS.Properties, CSS.PropertiesHyphen \n```\n**Extends:** CSS.Properties<string \\| number>, CSS.PropertiesHyphen<string \\| number>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.cssproperties.md" - }, - { - "name": "DataHTMLAttributes", - "id": "datahtmlattributes", - "hierarchy": [ - { - "name": "DataHTMLAttributes", - "id": "datahtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface DataHTMLAttributes extends Attrs<'data', T> \n```\n**Extends:** Attrs<'data', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.datahtmlattributes.md" - }, - { - "name": "DelHTMLAttributes", - "id": "delhtmlattributes", - "hierarchy": [ - { - "name": "DelHTMLAttributes", - "id": "delhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface DelHTMLAttributes extends Attrs<'del', T> \n```\n**Extends:** Attrs<'del', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.delhtmlattributes.md" - }, - { - "name": "DetailsHTMLAttributes", - "id": "detailshtmlattributes", - "hierarchy": [ - { - "name": "DetailsHTMLAttributes", - "id": "detailshtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface DetailsHTMLAttributes extends Attrs<'details', T> \n```\n**Extends:** Attrs<'details', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.detailshtmlattributes.md" - }, { "name": "DevJSX", "id": "devjsx", @@ -660,20 +249,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts", "mdFile": "core.devjsx.md" }, - { - "name": "DialogHTMLAttributes", - "id": "dialoghtmlattributes", - "hierarchy": [ - { - "name": "DialogHTMLAttributes", - "id": "dialoghtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface DialogHTMLAttributes extends Attrs<'dialog', T> \n```\n**Extends:** Attrs<'dialog', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.dialoghtmlattributes.md" - }, { "name": "DOMAttributes", "id": "domattributes", @@ -753,20 +328,6 @@ "content": "```typescript\ntype ElementType = string | FunctionComponent>;\n```\n**References:** [FunctionComponent](#functioncomponent)", "mdFile": "core.qwikjsx.elementtype.md" }, - { - "name": "EmbedHTMLAttributes", - "id": "embedhtmlattributes", - "hierarchy": [ - { - "name": "EmbedHTMLAttributes", - "id": "embedhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface EmbedHTMLAttributes extends Attrs<'embed', T> \n```\n**Extends:** Attrs<'embed', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.embedhtmlattributes.md" - }, { "name": "ErrorBoundaryStore", "id": "errorboundarystore", @@ -809,20 +370,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts", "mdFile": "core.eventhandler.md" }, - { - "name": "FieldsetHTMLAttributes", - "id": "fieldsethtmlattributes", - "hierarchy": [ - { - "name": "FieldsetHTMLAttributes", - "id": "fieldsethtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface FieldsetHTMLAttributes extends Attrs<'fieldset', T> \n```\n**Extends:** Attrs<'fieldset', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.fieldsethtmlattributes.md" - }, { "name": "force", "id": "computedsignal-force", @@ -840,20 +387,6 @@ "content": "Use this to force recalculation and running subscribers, for example when the calculated value mutates but remains the same object. Useful for third-party libraries.\n\n\n```typescript\nforce(): void;\n```\n**Returns:**\n\nvoid", "mdFile": "core.computedsignal.force.md" }, - { - "name": "FormHTMLAttributes", - "id": "formhtmlattributes", - "hierarchy": [ - { - "name": "FormHTMLAttributes", - "id": "formhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface FormHTMLAttributes extends Attrs<'form', T> \n```\n**Extends:** Attrs<'form', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.formhtmlattributes.md" - }, { "name": "Fragment", "id": "fragment", @@ -938,160 +471,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts", "mdFile": "core.h.md" }, - { - "name": "HrHTMLAttributes", - "id": "hrhtmlattributes", - "hierarchy": [ - { - "name": "HrHTMLAttributes", - "id": "hrhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface HrHTMLAttributes extends Attrs<'hr', T> \n```\n**Extends:** Attrs<'hr', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.hrhtmlattributes.md" - }, - { - "name": "HTMLAttributeAnchorTarget", - "id": "htmlattributeanchortarget", - "hierarchy": [ - { - "name": "HTMLAttributeAnchorTarget", - "id": "htmlattributeanchortarget" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.htmlattributeanchortarget.md" - }, - { - "name": "HTMLAttributeReferrerPolicy", - "id": "htmlattributereferrerpolicy", - "hierarchy": [ - { - "name": "HTMLAttributeReferrerPolicy", - "id": "htmlattributereferrerpolicy" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport type HTMLAttributeReferrerPolicy = ReferrerPolicy;\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.htmlattributereferrerpolicy.md" - }, - { - "name": "HTMLAttributes", - "id": "htmlattributes", - "hierarchy": [ - { - "name": "HTMLAttributes", - "id": "htmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface HTMLAttributes extends HTMLElementAttrs, DOMAttributes \n```\n**Extends:** [HTMLElementAttrs](#htmlelementattrs), [DOMAttributes](#domattributes)<E>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.htmlattributes.md" - }, - { - "name": "HTMLCrossOriginAttribute", - "id": "htmlcrossoriginattribute", - "hierarchy": [ - { - "name": "HTMLCrossOriginAttribute", - "id": "htmlcrossoriginattribute" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport type HTMLCrossOriginAttribute = 'anonymous' | 'use-credentials' | '' | undefined;\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.htmlcrossoriginattribute.md" - }, - { - "name": "HTMLElementAttrs", - "id": "htmlelementattrs", - "hierarchy": [ - { - "name": "HTMLElementAttrs", - "id": "htmlelementattrs" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface HTMLElementAttrs extends HTMLAttributesBase, FilterBase \n```\n**Extends:** HTMLAttributesBase, FilterBase<HTMLElement>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.htmlelementattrs.md" - }, - { - "name": "HtmlHTMLAttributes", - "id": "htmlhtmlattributes", - "hierarchy": [ - { - "name": "HtmlHTMLAttributes", - "id": "htmlhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface HtmlHTMLAttributes extends Attrs<'html', T> \n```\n**Extends:** Attrs<'html', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.htmlhtmlattributes.md" - }, - { - "name": "HTMLInputAutocompleteAttribute", - "id": "htmlinputautocompleteattribute", - "hierarchy": [ - { - "name": "HTMLInputAutocompleteAttribute", - "id": "htmlinputautocompleteattribute" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport 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';\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.htmlinputautocompleteattribute.md" - }, - { - "name": "HTMLInputTypeAttribute", - "id": "htmlinputtypeattribute", - "hierarchy": [ - { - "name": "HTMLInputTypeAttribute", - "id": "htmlinputtypeattribute" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport 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 & {});\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.htmlinputtypeattribute.md" - }, - { - "name": "IframeHTMLAttributes", - "id": "iframehtmlattributes", - "hierarchy": [ - { - "name": "IframeHTMLAttributes", - "id": "iframehtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface IframeHTMLAttributes extends Attrs<'iframe', T> \n```\n**Extends:** Attrs<'iframe', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.iframehtmlattributes.md" - }, - { - "name": "ImgHTMLAttributes", - "id": "imghtmlattributes", - "hierarchy": [ - { - "name": "ImgHTMLAttributes", - "id": "imghtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface ImgHTMLAttributes extends Attrs<'img', T> \n```\n**Extends:** Attrs<'img', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.imghtmlattributes.md" - }, { "name": "implicit$FirstArg", "id": "implicit_firstarg", @@ -1106,34 +485,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/implicit_dollar.ts", "mdFile": "core.implicit_firstarg.md" }, - { - "name": "InputHTMLAttributes", - "id": "inputhtmlattributes", - "hierarchy": [ - { - "name": "InputHTMLAttributes", - "id": "inputhtmlattributes" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport type InputHTMLAttributes = Attrs<'input', T, HTMLInputElement>;\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.inputhtmlattributes.md" - }, - { - "name": "InsHTMLAttributes", - "id": "inshtmlattributes", - "hierarchy": [ - { - "name": "InsHTMLAttributes", - "id": "inshtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface InsHTMLAttributes extends Attrs<'ins', T> \n```\n**Extends:** Attrs<'ins', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.inshtmlattributes.md" - }, { "name": "IntrinsicAttributes", "id": "qwikjsx-intrinsicattributes", @@ -1153,45 +504,20 @@ }, { "name": "IntrinsicElements", - "id": "intrinsicelements", + "id": "qwikjsx-intrinsicelements", "hierarchy": [ + { + "name": "QwikJSX", + "id": "qwikjsx-intrinsicelements" + }, { "name": "IntrinsicElements", - "id": "intrinsicelements" + "id": "qwikjsx-intrinsicelements" } ], "kind": "Interface", - "content": "```typescript\nexport interface IntrinsicElements extends IntrinsicHTMLElements, IntrinsicSVGElements \n```\n**Extends:** [IntrinsicHTMLElements](#intrinsichtmlelements), [IntrinsicSVGElements](#intrinsicsvgelements)", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.intrinsicelements.md" - }, - { - "name": "IntrinsicHTMLElements", - "id": "intrinsichtmlelements", - "hierarchy": [ - { - "name": "IntrinsicHTMLElements", - "id": "intrinsichtmlelements" - } - ], - "kind": "TypeAlias", - "content": "These are the HTML tags with handlers allowing plain callbacks, to be used for the JSX interface\n\n\n```typescript\nexport type IntrinsicHTMLElements = {\n [key in keyof HTMLElementTagNameMap]: Augmented & HTMLAttributes;\n} & {\n [unknownTag: string]: {\n [prop: string]: any;\n } & HTMLElementAttrs & HTMLAttributes;\n};\n```\n**References:** [HTMLAttributes](#htmlattributes), [HTMLElementAttrs](#htmlelementattrs)", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.intrinsichtmlelements.md" - }, - { - "name": "IntrinsicSVGElements", - "id": "intrinsicsvgelements", - "hierarchy": [ - { - "name": "IntrinsicSVGElements", - "id": "intrinsicsvgelements" - } - ], - "kind": "TypeAlias", - "content": "These are the SVG tags with handlers allowing plain callbacks, to be used for the JSX interface\n\n\n```typescript\nexport type IntrinsicSVGElements = {\n [K in keyof Omit]: LenientSVGProps;\n};\n```\n**References:** [LenientSVGProps](#lenientsvgprops)", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.intrinsicsvgelements.md" + "content": "```typescript\ninterface IntrinsicElements extends LenientQwikElements \n```\n**Extends:** LenientQwikElements", + "mdFile": "core.qwikjsx.intrinsicelements.md" }, { "name": "isSignal", @@ -1236,214 +562,74 @@ "mdFile": "core.jsxchildren.md" }, { - "name": "jsxDEV", - "id": "jsxdev", - "hierarchy": [ - { - "name": "jsxDEV", - "id": "jsxdev" - } - ], - "kind": "Function", - "content": "```typescript\njsxDEV: >(type: T, props: T extends FunctionComponent ? PROPS : Props, key: string | number | null | undefined, _isStatic: boolean, opts: JsxDevOpts, _ctx: unknown) => JSXNode\n```\n\n\n\n\n\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\ntype\n\n\n\n\nT\n\n\n\n\n\n
\n\nprops\n\n\n\n\nT extends [FunctionComponent](#functioncomponent)<infer PROPS> ? PROPS : Props\n\n\n\n\n\n
\n\nkey\n\n\n\n\nstring \\| number \\| null \\| undefined\n\n\n\n\n\n
\n\n\\_isStatic\n\n\n\n\nboolean\n\n\n\n\n\n
\n\nopts\n\n\n\n\nJsxDevOpts\n\n\n\n\n\n
\n\n\\_ctx\n\n\n\n\nunknown\n\n\n\n\n\n
\n**Returns:**\n\n[JSXNode](#jsxnode)<T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts", - "mdFile": "core.jsxdev.md" - }, - { - "name": "JSXNode", - "id": "jsxnode", - "hierarchy": [ - { - "name": "JSXNode", - "id": "jsxnode" - } - ], - "kind": "Interface", - "content": "A JSX Node, an internal structure. You probably want to use `JSXOutput` instead.\n\n\n```typescript\nexport interface JSXNode \n```\n\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[children](#)\n\n\n\n\n\n\n\n[JSXChildren](#jsxchildren) \\| null\n\n\n\n\n\n
\n\n[dev?](#)\n\n\n\n\n\n\n\n[DevJSX](#devjsx)\n\n\n\n\n_(Optional)_\n\n\n
\n\n[key](#)\n\n\n\n\n\n\n\nstring \\| null\n\n\n\n\n\n
\n\n[props](#)\n\n\n\n\n\n\n\nT extends [FunctionComponent](#functioncomponent)<infer P> ? P : Record<any, unknown>\n\n\n\n\n\n
\n\n[type](#)\n\n\n\n\n\n\n\nT\n\n\n\n\n\n
", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts", - "mdFile": "core.jsxnode.md" - }, - { - "name": "JSXOutput", - "id": "jsxoutput", - "hierarchy": [ - { - "name": "JSXOutput", - "id": "jsxoutput" - } - ], - "kind": "TypeAlias", - "content": "Any valid output for a component\n\n\n```typescript\nexport type JSXOutput = JSXNode | string | number | boolean | null | undefined | JSXOutput[];\n```\n**References:** [JSXNode](#jsxnode), [JSXOutput](#jsxoutput)", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts", - "mdFile": "core.jsxoutput.md" - }, - { - "name": "JSXTagName", - "id": "jsxtagname", - "hierarchy": [ - { - "name": "JSXTagName", - "id": "jsxtagname" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport type JSXTagName = keyof HTMLElementTagNameMap | Omit;\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts", - "mdFile": "core.jsxtagname.md" - }, - { - "name": "KeygenHTMLAttributes", - "id": "keygenhtmlattributes", - "hierarchy": [ - { - "name": "KeygenHTMLAttributes", - "id": "keygenhtmlattributes" - } - ], - "kind": "Interface", - "content": "> Warning: This API is now obsolete.\n> \n> in html5\n> \n\n\n```typescript\nexport interface KeygenHTMLAttributes extends Attrs<'base', T> \n```\n**Extends:** Attrs<'base', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.keygenhtmlattributes.md" - }, - { - "name": "KnownEventNames", - "id": "knowneventnames", - "hierarchy": [ - { - "name": "KnownEventNames", - "id": "knowneventnames" - } - ], - "kind": "TypeAlias", - "content": "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$`)\n\n\n```typescript\nexport type KnownEventNames = LiteralUnion;\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts", - "mdFile": "core.knowneventnames.md" - }, - { - "name": "LabelHTMLAttributes", - "id": "labelhtmlattributes", - "hierarchy": [ - { - "name": "LabelHTMLAttributes", - "id": "labelhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface LabelHTMLAttributes extends Attrs<'label', T> \n```\n**Extends:** Attrs<'label', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.labelhtmlattributes.md" - }, - { - "name": "LenientSVGProps", - "id": "lenientsvgprops", - "hierarchy": [ - { - "name": "LenientSVGProps", - "id": "lenientsvgprops" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface LenientSVGProps extends SVGAttributes, DOMAttributes \n```\n**Extends:** [SVGAttributes](#svgattributes), [DOMAttributes](#domattributes)<T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.lenientsvgprops.md" - }, - { - "name": "LiHTMLAttributes", - "id": "lihtmlattributes", - "hierarchy": [ - { - "name": "LiHTMLAttributes", - "id": "lihtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface LiHTMLAttributes extends Attrs<'li', T> \n```\n**Extends:** Attrs<'li', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.lihtmlattributes.md" - }, - { - "name": "LinkHTMLAttributes", - "id": "linkhtmlattributes", - "hierarchy": [ - { - "name": "LinkHTMLAttributes", - "id": "linkhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface LinkHTMLAttributes extends Attrs<'link', T> \n```\n**Extends:** Attrs<'link', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.linkhtmlattributes.md" - }, - { - "name": "MapHTMLAttributes", - "id": "maphtmlattributes", + "name": "jsxDEV", + "id": "jsxdev", "hierarchy": [ { - "name": "MapHTMLAttributes", - "id": "maphtmlattributes" + "name": "jsxDEV", + "id": "jsxdev" } ], - "kind": "Interface", - "content": "```typescript\nexport interface MapHTMLAttributes extends Attrs<'map', T> \n```\n**Extends:** Attrs<'map', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.maphtmlattributes.md" + "kind": "Function", + "content": "```typescript\njsxDEV: >(type: T, props: T extends FunctionComponent ? PROPS : Props, key: string | number | null | undefined, _isStatic: boolean, opts: JsxDevOpts, _ctx: unknown) => JSXNode\n```\n\n\n\n\n\n\n\n\n\n
\n\nParameter\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\ntype\n\n\n\n\nT\n\n\n\n\n\n
\n\nprops\n\n\n\n\nT extends [FunctionComponent](#functioncomponent)<infer PROPS> ? PROPS : Props\n\n\n\n\n\n
\n\nkey\n\n\n\n\nstring \\| number \\| null \\| undefined\n\n\n\n\n\n
\n\n\\_isStatic\n\n\n\n\nboolean\n\n\n\n\n\n
\n\nopts\n\n\n\n\nJsxDevOpts\n\n\n\n\n\n
\n\n\\_ctx\n\n\n\n\nunknown\n\n\n\n\n\n
\n**Returns:**\n\n[JSXNode](#jsxnode)<T>", + "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts", + "mdFile": "core.jsxdev.md" }, { - "name": "MediaHTMLAttributes", - "id": "mediahtmlattributes", + "name": "JSXNode", + "id": "jsxnode", "hierarchy": [ { - "name": "MediaHTMLAttributes", - "id": "mediahtmlattributes" + "name": "JSXNode", + "id": "jsxnode" } ], "kind": "Interface", - "content": "```typescript\nexport interface MediaHTMLAttributes extends HTMLAttributes, Augmented \n```\n**Extends:** [HTMLAttributes](#htmlattributes)<T>, Augmented<HTMLMediaElement, { crossOrigin?: [HTMLCrossOriginAttribute](#htmlcrossoriginattribute); }>\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[crossOrigin?](#)\n\n\n\n\n\n\n\n[HTMLCrossOriginAttribute](#htmlcrossoriginattribute)\n\n\n\n\n_(Optional)_\n\n\n
", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.mediahtmlattributes.md" + "content": "A JSX Node, an internal structure. You probably want to use `JSXOutput` instead.\n\n\n```typescript\nexport interface JSXNode \n```\n\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[children](#)\n\n\n\n\n\n\n\n[JSXChildren](#jsxchildren) \\| null\n\n\n\n\n\n
\n\n[dev?](#)\n\n\n\n\n\n\n\n[DevJSX](#devjsx)\n\n\n\n\n_(Optional)_\n\n\n
\n\n[key](#)\n\n\n\n\n\n\n\nstring \\| null\n\n\n\n\n\n
\n\n[props](#)\n\n\n\n\n\n\n\nT extends [FunctionComponent](#functioncomponent)<infer P> ? P : Record<any, unknown>\n\n\n\n\n\n
\n\n[type](#)\n\n\n\n\n\n\n\nT\n\n\n\n\n\n
", + "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts", + "mdFile": "core.jsxnode.md" }, { - "name": "MenuHTMLAttributes", - "id": "menuhtmlattributes", + "name": "JSXOutput", + "id": "jsxoutput", "hierarchy": [ { - "name": "MenuHTMLAttributes", - "id": "menuhtmlattributes" + "name": "JSXOutput", + "id": "jsxoutput" } ], - "kind": "Interface", - "content": "```typescript\nexport interface MenuHTMLAttributes extends Attrs<'menu', T> \n```\n**Extends:** Attrs<'menu', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.menuhtmlattributes.md" + "kind": "TypeAlias", + "content": "Any valid output for a component\n\n\n```typescript\nexport type JSXOutput = JSXNode | string | number | boolean | null | undefined | JSXOutput[];\n```\n**References:** [JSXNode](#jsxnode), [JSXOutput](#jsxoutput)", + "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts", + "mdFile": "core.jsxoutput.md" }, { - "name": "MetaHTMLAttributes", - "id": "metahtmlattributes", + "name": "JSXTagName", + "id": "jsxtagname", "hierarchy": [ { - "name": "MetaHTMLAttributes", - "id": "metahtmlattributes" + "name": "JSXTagName", + "id": "jsxtagname" } ], - "kind": "Interface", - "content": "```typescript\nexport interface MetaHTMLAttributes extends Attrs<'meta', T> \n```\n**Extends:** Attrs<'meta', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.metahtmlattributes.md" + "kind": "TypeAlias", + "content": "```typescript\nexport type JSXTagName = keyof HTMLElementTagNameMap | Omit;\n```", + "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts", + "mdFile": "core.jsxtagname.md" }, { - "name": "MeterHTMLAttributes", - "id": "meterhtmlattributes", + "name": "KnownEventNames", + "id": "knowneventnames", "hierarchy": [ { - "name": "MeterHTMLAttributes", - "id": "meterhtmlattributes" + "name": "KnownEventNames", + "id": "knowneventnames" } ], - "kind": "Interface", - "content": "```typescript\nexport interface MeterHTMLAttributes extends Attrs<'meter', T> \n```\n**Extends:** Attrs<'meter', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.meterhtmlattributes.md" + "kind": "TypeAlias", + "content": "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$`)\n\n\n```typescript\nexport type KnownEventNames = LiteralUnion;\n```", + "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts", + "mdFile": "core.knowneventnames.md" }, { "name": "NativeAnimationEvent", @@ -1641,48 +827,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/utils/serialize-utils.ts", "mdFile": "core.noserialize.md" }, - { - "name": "Numberish", - "id": "numberish", - "hierarchy": [ - { - "name": "Numberish", - "id": "numberish" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport type Numberish = number | `${number}`;\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.numberish.md" - }, - { - "name": "ObjectHTMLAttributes", - "id": "objecthtmlattributes", - "hierarchy": [ - { - "name": "ObjectHTMLAttributes", - "id": "objecthtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface ObjectHTMLAttributes extends Attrs<'object', T> \n```\n**Extends:** Attrs<'object', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.objecthtmlattributes.md" - }, - { - "name": "OlHTMLAttributes", - "id": "olhtmlattributes", - "hierarchy": [ - { - "name": "OlHTMLAttributes", - "id": "olhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface OlHTMLAttributes extends Attrs<'ol', T> \n```\n**Extends:** Attrs<'ol', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.olhtmlattributes.md" - }, { "name": "OnRenderFn", "id": "onrenderfn", @@ -1711,62 +855,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-visible-task.ts", "mdFile": "core.onvisibletaskoptions.md" }, - { - "name": "OptgroupHTMLAttributes", - "id": "optgrouphtmlattributes", - "hierarchy": [ - { - "name": "OptgroupHTMLAttributes", - "id": "optgrouphtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface OptgroupHTMLAttributes extends Attrs<'optgroup', T> \n```\n**Extends:** Attrs<'optgroup', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.optgrouphtmlattributes.md" - }, - { - "name": "OptionHTMLAttributes", - "id": "optionhtmlattributes", - "hierarchy": [ - { - "name": "OptionHTMLAttributes", - "id": "optionhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface OptionHTMLAttributes extends Attrs<'option', T> \n```\n**Extends:** Attrs<'option', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.optionhtmlattributes.md" - }, - { - "name": "OutputHTMLAttributes", - "id": "outputhtmlattributes", - "hierarchy": [ - { - "name": "OutputHTMLAttributes", - "id": "outputhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface OutputHTMLAttributes extends Attrs<'output', T> \n```\n**Extends:** Attrs<'output', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.outputhtmlattributes.md" - }, - { - "name": "ParamHTMLAttributes", - "id": "paramhtmlattributes", - "hierarchy": [ - { - "name": "ParamHTMLAttributes", - "id": "paramhtmlattributes" - } - ], - "kind": "Interface", - "content": "> Warning: This API is now obsolete.\n> \n> Old DOM API\n> \n\n\n```typescript\nexport interface ParamHTMLAttributes extends Attrs<'base', T, HTMLParamElement> \n```\n**Extends:** Attrs<'base', T, HTMLParamElement>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.paramhtmlattributes.md" - }, { "name": "PrefetchGraph", "id": "prefetchgraph", @@ -1795,20 +883,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts", "mdFile": "core.prefetchserviceworker.md" }, - { - "name": "ProgressHTMLAttributes", - "id": "progresshtmlattributes", - "hierarchy": [ - { - "name": "ProgressHTMLAttributes", - "id": "progresshtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface ProgressHTMLAttributes extends Attrs<'progress', T> \n```\n**Extends:** Attrs<'progress', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.progresshtmlattributes.md" - }, { "name": "PropFunction", "id": "propfunction", @@ -1893,20 +967,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts", "mdFile": "core.qrleventhandlermulti.md" }, - { - "name": "QuoteHTMLAttributes", - "id": "quotehtmlattributes", - "hierarchy": [ - { - "name": "QuoteHTMLAttributes", - "id": "quotehtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface QuoteHTMLAttributes extends Attrs<'q', T> \n```\n**Extends:** Attrs<'q', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.quotehtmlattributes.md" - }, { "name": "QwikAnimationEvent", "id": "qwikanimationevent", @@ -2029,7 +1089,7 @@ } ], "kind": "TypeAlias", - "content": "The DOM props without plain handlers, for use inside functions\n\n\n```typescript\nexport type QwikHTMLElements = {\n [tag in keyof HTMLElementTagNameMap]: Augmented & HTMLElementAttrs & QwikAttributes;\n};\n```\n**References:** [HTMLElementAttrs](#htmlelementattrs), [QwikAttributes](#qwikattributes)", + "content": "The DOM props without plain handlers, for use inside functions\n\n\n```typescript\nexport type QwikHTMLElements = {\n [tag in keyof HTMLElementTagNameMap]: Augmented & HTMLElementAttrs & QwikAttributes;\n};\n```\n**References:** [QwikAttributes](#qwikattributes)", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", "mdFile": "core.qwikhtmlelements.md" }, @@ -2099,7 +1159,7 @@ } ], "kind": "Namespace", - "content": "```typescript\nexport declare namespace QwikJSX \n```\n\n\n\n\n\n\n
\n\nInterface\n\n\n\n\nDescription\n\n\n
\n\n[ElementChildrenAttribute](#qwikjsx-elementchildrenattribute)\n\n\n\n\n\n
\n\n[IntrinsicAttributes](#qwikjsx-intrinsicattributes)\n\n\n\n\n\n
\n\n[IntrinsicElements](#)\n\n\n\n\n\n
\n\n\n\n\n\n
\n\nType Alias\n\n\n\n\nDescription\n\n\n
\n\n[Element](#qwikjsx-element)\n\n\n\n\n\n
\n\n[ElementType](#qwikjsx-elementtype)\n\n\n\n\n\n
", + "content": "```typescript\nexport declare namespace QwikJSX \n```\n\n\n\n\n\n\n
\n\nInterface\n\n\n\n\nDescription\n\n\n
\n\n[ElementChildrenAttribute](#qwikjsx-elementchildrenattribute)\n\n\n\n\n\n
\n\n[IntrinsicAttributes](#qwikjsx-intrinsicattributes)\n\n\n\n\n\n
\n\n[IntrinsicElements](#qwikjsx-intrinsicelements)\n\n\n\n\n\n
\n\n\n\n\n\n
\n\nType Alias\n\n\n\n\nDescription\n\n\n
\n\n[Element](#qwikjsx-element)\n\n\n\n\n\n
\n\n[ElementType](#qwikjsx-elementtype)\n\n\n\n\n\n
", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik.ts", "mdFile": "core.qwikjsx.md" }, @@ -2169,7 +1229,7 @@ } ], "kind": "TypeAlias", - "content": "The SVG props without plain handlers, for use inside functions\n\n\n```typescript\nexport type QwikSVGElements = {\n [K in keyof Omit]: SVGProps;\n};\n```\n**References:** [SVGProps](#svgprops)", + "content": "The SVG props without plain handlers, for use inside functions\n\n\n```typescript\nexport type QwikSVGElements = {\n [K in keyof Omit]: SVGProps;\n};\n```", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", "mdFile": "core.qwiksvgelements.md" }, @@ -2467,34 +1527,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts", "mdFile": "core.resourcereturn.md" }, - { - "name": "ScriptHTMLAttributes", - "id": "scripthtmlattributes", - "hierarchy": [ - { - "name": "ScriptHTMLAttributes", - "id": "scripthtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface ScriptHTMLAttributes extends Attrs<'script', T> \n```\n**Extends:** Attrs<'script', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.scripthtmlattributes.md" - }, - { - "name": "SelectHTMLAttributes", - "id": "selecthtmlattributes", - "hierarchy": [ - { - "name": "SelectHTMLAttributes", - "id": "selecthtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface SelectHTMLAttributes extends Attrs<'select', T> \n```\n**Extends:** Attrs<'select', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.selecthtmlattributes.md" - }, { "name": "setPlatform", "id": "setplatform", @@ -2523,20 +1555,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts", "mdFile": "core.signal.md" }, - { - "name": "Size", - "id": "size", - "hierarchy": [ - { - "name": "Size", - "id": "size" - } - ], - "kind": "TypeAlias", - "content": "```typescript\nexport type Size = number | string;\n```", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.size.md" - }, { "name": "SkipRender", "id": "skiprender", @@ -2565,20 +1583,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/slot.public.ts", "mdFile": "core.slot.md" }, - { - "name": "SlotHTMLAttributes", - "id": "slothtmlattributes", - "hierarchy": [ - { - "name": "SlotHTMLAttributes", - "id": "slothtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface SlotHTMLAttributes extends Attrs<'slot', T> \n```\n**Extends:** Attrs<'slot', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.slothtmlattributes.md" - }, { "name": "SnapshotListener", "id": "snapshotlistener", @@ -2649,20 +1653,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts", "mdFile": "core.snapshotstate.md" }, - { - "name": "SourceHTMLAttributes", - "id": "sourcehtmlattributes", - "hierarchy": [ - { - "name": "SourceHTMLAttributes", - "id": "sourcehtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface SourceHTMLAttributes extends Attrs<'source', T> \n```\n**Extends:** Attrs<'source', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.sourcehtmlattributes.md" - }, { "name": "SSRComment", "id": "ssrcomment", @@ -2761,48 +1751,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts", "mdFile": "core.ssrstreamprops.md" }, - { - "name": "StyleHTMLAttributes", - "id": "stylehtmlattributes", - "hierarchy": [ - { - "name": "StyleHTMLAttributes", - "id": "stylehtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface StyleHTMLAttributes extends Attrs<'style', T> \n```\n**Extends:** Attrs<'style', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.stylehtmlattributes.md" - }, - { - "name": "SVGAttributes", - "id": "svgattributes", - "hierarchy": [ - { - "name": "SVGAttributes", - "id": "svgattributes" - } - ], - "kind": "Interface", - "content": "The TS types don't include the SVG attributes so we have to define them ourselves\n\nNOTE: These props are probably not complete\n\n\n```typescript\nexport interface SVGAttributes extends AriaAttributes \n```\n**Extends:** [AriaAttributes](#ariaattributes)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[\"accent-height\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"alignment-baseline\"?](#)\n\n\n\n\n\n\n\n'auto' \\| 'baseline' \\| 'before-edge' \\| 'text-before-edge' \\| 'middle' \\| 'central' \\| 'after-edge' \\| 'text-after-edge' \\| 'ideographic' \\| 'alphabetic' \\| 'hanging' \\| 'mathematical' \\| 'inherit' \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"arabic-form\"?](#)\n\n\n\n\n\n\n\n'initial' \\| 'medial' \\| 'terminal' \\| 'isolated' \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"baseline-shift\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"cap-height\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"clip-path\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"clip-rule\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"color-interpolation-filters\"?](#)\n\n\n\n\n\n\n\n'auto' \\| 's-rGB' \\| 'linear-rGB' \\| 'inherit' \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"color-interpolation\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"color-profile\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"color-rendering\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"dominant-baseline\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"edge-mode\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"enable-background\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"fill-opacity\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"fill-rule\"?](#)\n\n\n\n\n\n\n\n'nonzero' \\| 'evenodd' \\| 'inherit' \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"flood-color\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"flood-opacity\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"font-family\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"font-size-adjust\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"font-size\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"font-stretch\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"font-style\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"font-variant\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"font-weight\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"glyph-name\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"glyph-orientation-horizontal\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"glyph-orientation-vertical\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"horiz-adv-x\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"horiz-origin-x\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"image-rendering\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"letter-spacing\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"lighting-color\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"marker-end\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"marker-mid\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"marker-start\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"overline-position\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"overline-thickness\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"paint-order\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"pointer-events\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"rendering-intent\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"shape-rendering\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"stop-color\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"stop-opacity\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"strikethrough-position\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"strikethrough-thickness\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"stroke-dasharray\"?](#)\n\n\n\n\n\n\n\nstring \\| number \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"stroke-dashoffset\"?](#)\n\n\n\n\n\n\n\nstring \\| number \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"stroke-linecap\"?](#)\n\n\n\n\n\n\n\n'butt' \\| 'round' \\| 'square' \\| 'inherit' \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"stroke-linejoin\"?](#)\n\n\n\n\n\n\n\n'miter' \\| 'round' \\| 'bevel' \\| 'inherit' \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"stroke-miterlimit\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"stroke-opacity\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"stroke-width\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"text-anchor\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"text-decoration\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"text-rendering\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"underline-position\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"underline-thickness\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"unicode-bidi\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"unicode-range\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"units-per-em\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"v-alphabetic\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"v-hanging\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"v-ideographic\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"v-mathematical\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"vector-effect\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"vert-adv-y\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"vert-origin-x\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"vert-origin-y\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"word-spacing\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"writing-mode\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"x-channel-selector\"?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"x-height\"?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xlink:actuate\"?](#svgattributes-_xlink_actuate_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xlink:arcrole\"?](#svgattributes-_xlink_arcrole_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xlink:href\"?](#svgattributes-_xlink_href_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xlink:role\"?](#svgattributes-_xlink_role_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xlink:show\"?](#svgattributes-_xlink_show_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xlink:title\"?](#svgattributes-_xlink_title_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xlink:type\"?](#svgattributes-_xlink_type_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xml:base\"?](#svgattributes-_xml_base_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xml:lang\"?](#svgattributes-_xml_lang_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xml:space\"?](#svgattributes-_xml_space_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[\"xmlns:xlink\"?](#svgattributes-_xmlns_xlink_)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[accumulate?](#)\n\n\n\n\n\n\n\n'none' \\| 'sum' \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[additive?](#)\n\n\n\n\n\n\n\n'replace' \\| 'sum' \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[allowReorder?](#)\n\n\n\n\n\n\n\n'no' \\| 'yes' \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[alphabetic?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[amplitude?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[ascent?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[attributeName?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[attributeType?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[autoReverse?](#)\n\n\n\n\n\n\n\n[Booleanish](#booleanish) \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[azimuth?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[baseFrequency?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[baseProfile?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[bbox?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[begin?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[bias?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[by?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[calcMode?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[clip?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[clipPathUnits?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[color?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[contentScriptType?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[contentStyleType?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[crossOrigin?](#)\n\n\n\n\n\n\n\n[HTMLCrossOriginAttribute](#htmlcrossoriginattribute)\n\n\n\n\n_(Optional)_\n\n\n
\n\n[cursor?](#)\n\n\n\n\n\n\n\nnumber \\| string\n\n\n\n\n_(Optional)_\n\n\n
\n\n[cx?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[cy?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[d?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[decelerate?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[descent?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[diffuseConstant?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[direction?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[display?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[divisor?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[dur?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[dx?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[dy?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[elevation?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[end?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[exponent?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[externalResourcesRequired?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[fill?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[filter?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[filterRes?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[filterUnits?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[focusable?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[format?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[fr?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[from?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[fx?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[fy?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[g1?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[g2?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[glyphRef?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[gradientTransform?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[gradientUnits?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[hanging?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[height?](#)\n\n\n\n\n\n\n\n[Size](#size) \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[href?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[id?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[ideographic?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[in?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[in2?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[intercept?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[k?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[k1?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[k2?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[k3?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[k4?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[kernelMatrix?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[kernelUnitLength?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[kerning?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[keyPoints?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[keySplines?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[keyTimes?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[lang?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[lengthAdjust?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[limitingConeAngle?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[local?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[markerHeight?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[markerUnits?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[markerWidth?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[mask?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[maskContentUnits?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[maskUnits?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[mathematical?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[max?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[media?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[method?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[min?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[mode?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[name?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[numOctaves?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[offset?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[opacity?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[operator?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[order?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[orient?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[orientation?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[origin?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[overflow?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[panose1?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[path?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[pathLength?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[patternContentUnits?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[patternTransform?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[patternUnits?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[points?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[pointsAtX?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[pointsAtY?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[pointsAtZ?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[preserveAlpha?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[preserveAspectRatio?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[primitiveUnits?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[r?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[radius?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[refX?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[refY?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[repeatCount?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[repeatDur?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[requiredextensions?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[requiredFeatures?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[restart?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[result?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[role?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[rotate?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[rx?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[ry?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[scale?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[seed?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[slope?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[spacing?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[specularConstant?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[specularExponent?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[speed?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[spreadMethod?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[startOffset?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[stdDeviation?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[stemh?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[stemv?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[stitchTiles?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[string?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[stroke?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[style?](#)\n\n\n\n\n\n\n\n[CSSProperties](#cssproperties) \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[surfaceScale?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[systemLanguage?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[tabindex?](#)\n\n\n\n\n\n\n\nnumber \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[tableValues?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[target?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[targetX?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[targetY?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[textLength?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[to?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[transform?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[type?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[u1?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[u2?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[unicode?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[values?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[version?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[viewBox?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[viewTarget?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[visibility?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[width?](#)\n\n\n\n\n\n\n\n[Size](#size) \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[widths?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[x?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[x1?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[x2?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[xmlns?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[y?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[y1?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[y2?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[yChannelSelector?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[z?](#)\n\n\n\n\n\n\n\nnumber \\| string \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[zoomAndPan?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.svgattributes.md" - }, - { - "name": "SVGProps", - "id": "svgprops", - "hierarchy": [ - { - "name": "SVGProps", - "id": "svgprops" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface SVGProps extends SVGAttributes, QwikAttributes \n```\n**Extends:** [SVGAttributes](#svgattributes), [QwikAttributes](#qwikattributes)<T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.svgprops.md" - }, { "name": "sync$", "id": "sync_", @@ -2831,20 +1779,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts", "mdFile": "core.syncqrl.md" }, - { - "name": "TableHTMLAttributes", - "id": "tablehtmlattributes", - "hierarchy": [ - { - "name": "TableHTMLAttributes", - "id": "tablehtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface TableHTMLAttributes extends Attrs<'table', T> \n```\n**Extends:** Attrs<'table', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.tablehtmlattributes.md" - }, { "name": "TaskCtx", "id": "taskctx", @@ -2873,76 +1807,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts", "mdFile": "core.taskfn.md" }, - { - "name": "TdHTMLAttributes", - "id": "tdhtmlattributes", - "hierarchy": [ - { - "name": "TdHTMLAttributes", - "id": "tdhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface TdHTMLAttributes extends Attrs<'td', T> \n```\n**Extends:** Attrs<'td', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.tdhtmlattributes.md" - }, - { - "name": "TextareaHTMLAttributes", - "id": "textareahtmlattributes", - "hierarchy": [ - { - "name": "TextareaHTMLAttributes", - "id": "textareahtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface TextareaHTMLAttributes extends Attrs<'textarea', T> \n```\n**Extends:** Attrs<'textarea', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.textareahtmlattributes.md" - }, - { - "name": "ThHTMLAttributes", - "id": "thhtmlattributes", - "hierarchy": [ - { - "name": "ThHTMLAttributes", - "id": "thhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface ThHTMLAttributes extends Attrs<'tr', T> \n```\n**Extends:** Attrs<'tr', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.thhtmlattributes.md" - }, - { - "name": "TimeHTMLAttributes", - "id": "timehtmlattributes", - "hierarchy": [ - { - "name": "TimeHTMLAttributes", - "id": "timehtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface TimeHTMLAttributes extends Attrs<'time', T> \n```\n**Extends:** Attrs<'time', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.timehtmlattributes.md" - }, - { - "name": "TitleHTMLAttributes", - "id": "titlehtmlattributes", - "hierarchy": [ - { - "name": "TitleHTMLAttributes", - "id": "titlehtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface TitleHTMLAttributes extends Attrs<'title', T> \n```\n**Extends:** Attrs<'title', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.titlehtmlattributes.md" - }, { "name": "Tracker", "id": "tracker", @@ -2957,20 +1821,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts", "mdFile": "core.tracker.md" }, - { - "name": "TrackHTMLAttributes", - "id": "trackhtmlattributes", - "hierarchy": [ - { - "name": "TrackHTMLAttributes", - "id": "trackhtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface TrackHTMLAttributes extends Attrs<'track', T> \n```\n**Extends:** Attrs<'track', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.trackhtmlattributes.md" - }, { "name": "untrack", "id": "untrack", @@ -3321,20 +2171,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/version.ts", "mdFile": "core.version.md" }, - { - "name": "VideoHTMLAttributes", - "id": "videohtmlattributes", - "hierarchy": [ - { - "name": "VideoHTMLAttributes", - "id": "videohtmlattributes" - } - ], - "kind": "Interface", - "content": "```typescript\nexport interface VideoHTMLAttributes extends Attrs<'video', T> \n```\n**Extends:** Attrs<'video', T>", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.videohtmlattributes.md" - }, { "name": "VisibleTaskStrategy", "id": "visibletaskstrategy", @@ -3349,20 +2185,6 @@ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-visible-task.ts", "mdFile": "core.visibletaskstrategy.md" }, - { - "name": "WebViewHTMLAttributes", - "id": "webviewhtmlattributes", - "hierarchy": [ - { - "name": "WebViewHTMLAttributes", - "id": "webviewhtmlattributes" - } - ], - "kind": "Interface", - "content": "> Warning: This API is now obsolete.\n> \n> This is the type for a React Native WebView. It doesn't belong in Qwik (yet?) but we're keeping it for backwards compatibility.\n> \n\n\n```typescript\nexport interface WebViewHTMLAttributes extends HTMLAttributes \n```\n**Extends:** [HTMLAttributes](#htmlattributes)<T>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[allowFullScreen?](#)\n\n\n\n\n\n\n\nboolean \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[allowpopups?](#)\n\n\n\n\n\n\n\nboolean \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[autoFocus?](#)\n\n\n\n\n\n\n\nboolean \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[autosize?](#)\n\n\n\n\n\n\n\nboolean \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[blinkfeatures?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[disableblinkfeatures?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[disableguestresize?](#)\n\n\n\n\n\n\n\nboolean \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[disablewebsecurity?](#)\n\n\n\n\n\n\n\nboolean \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[guestinstance?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[httpreferrer?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[nodeintegration?](#)\n\n\n\n\n\n\n\nboolean \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[partition?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[plugins?](#)\n\n\n\n\n\n\n\nboolean \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[preload?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[src?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[useragent?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
\n\n[webpreferences?](#)\n\n\n\n\n\n\n\nstring \\| undefined\n\n\n\n\n_(Optional)_\n\n\n
", - "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts", - "mdFile": "core.webviewhtmlattributes.md" - }, { "name": "withLocale", "id": "withlocale", diff --git a/packages/docs/src/routes/api/qwik/index.md b/packages/docs/src/routes/api/qwik/index.md index 9f928baf0bd..4cd636c63ed 100644 --- a/packages/docs/src/routes/api/qwik/index.md +++ b/packages/docs/src/routes/api/qwik/index.md @@ -10,72 +10,6 @@ title: \@qwik.dev/qwik API Reference 'q:slot'?: string; ``` -## "xlink:actuate" - -```typescript -'xlink:actuate'?: string | undefined; -``` - -## "xlink:arcrole" - -```typescript -'xlink:arcrole'?: string | undefined; -``` - -## "xlink:href" - -```typescript -'xlink:href'?: string | undefined; -``` - -## "xlink:role" - -```typescript -'xlink:role'?: string | undefined; -``` - -## "xlink:show" - -```typescript -'xlink:show'?: string | undefined; -``` - -## "xlink:title" - -```typescript -'xlink:title'?: string | undefined; -``` - -## "xlink:type" - -```typescript -'xlink:type'?: string | undefined; -``` - -## "xml:base" - -```typescript -'xml:base'?: string | undefined; -``` - -## "xml:lang" - -```typescript -'xml:lang'?: string | undefined; -``` - -## "xml:space" - -```typescript -'xml:space'?: string | undefined; -``` - -## "xmlns:xlink" - -```typescript -'xmlns:xlink'?: string | undefined; -``` - ## $ Qwik Optimizer marker function. @@ -119,41 +53,15 @@ Expression which should be lazy loaded [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts) -## AnchorHTMLAttributes - -```typescript -export interface AnchorHTMLAttributes extends Attrs<'a', T> -``` - -**Extends:** Attrs<'a', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## AreaHTMLAttributes - -```typescript -export interface AreaHTMLAttributes extends Attrs<'area', T> -``` - -**Extends:** Attrs<'area', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## AriaAttributes - -TS defines these with the React syntax which is not compatible with Qwik. E.g. `ariaAtomic` instead of `aria-atomic`. +## cache ```typescript -export interface AriaAttributes +cache(policyOrMilliseconds: number | 'immutable'): void; ``` +
-Property - - - -Modifiers +Parameter @@ -166,863 +74,870 @@ Description
-["aria-activedescendant"?](#) +policyOrMilliseconds +number \| 'immutable' + -string \| undefined +
+**Returns:** - +void -_(Optional)_ Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. +## ClassList - - +A class list can be a string, a boolean, an array, or an object. -["aria-atomic"?](#) +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. - +```typescript +export type ClassList = + | string + | undefined + | null + | false + | Record + | ClassList[]; +``` -[Booleanish](#booleanish) \| undefined +**References:** [ClassList](#classlist) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) -_(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. +## cleanup - - +```typescript +cleanup(): void; +``` -["aria-autocomplete"?](#) +**Returns:** - +void - +## Component -'none' \| 'inline' \| 'list' \| 'both' \| undefined +Type representing the Qwik component. - +`Component` is the type returned by invoking `component$`. -_(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. +```tsx +interface MyComponentProps { + someProp: string; +} +const MyComponent: Component = component$( + (props: MyComponentProps) => { + return {props.someProp}; + }, +); +``` - - +```typescript +export type Component = FunctionComponent>; +``` -["aria-busy"?](#) +**References:** [FunctionComponent](#functioncomponent), [PublicProps](#publicprops) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) - +## component$ -[Booleanish](#booleanish) \| 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. -_(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. +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: -["aria-checked"?](#) +### 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 ( +
+ {state.count} + +
+ ); +}); +``` -boolean \| 'false' \| 'mixed' \| 'true' \| undefined +- `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: -_(Optional)_ Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. +```tsx +export const OtherComponent = component$(() => { + return ; +}); +``` - - +See also: `component`, `useCleanup`, `onResume`, `onPause`, `useOn`, `useOnDocument`, `useOnWindow`, `useStyles` -["aria-colcount"?](#) +```typescript +component$: (onMount: OnRenderFn) => Component; +``` - + - + -
- +Parameter -number \| undefined + - +Type -_(Optional)_ Defines the total number of columns in a table, grid, or treegrid. + -
+Description -["aria-colindex"?](#) +
- +onMount -number \| undefined +[OnRenderFn](#onrenderfn)<PROPS> -_(Optional)_ Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. -
- -["aria-colspan"?](#) +
+**Returns:** - +[Component](#component)<PROPS> - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) -number \| undefined +## ComponentBaseProps - +```typescript +export interface ComponentBaseProps +``` -_(Optional)_ Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. + - - + -
-
+Property -["aria-controls"?](#) + - +Modifiers - + -string \| undefined +Type - + -_(Optional)_ Identifies the element (or elements) whose contents or presence are controlled by the current element. +Description -
+
-["aria-current"?](#) +["q:slot"?](#componentbaseprops-_q_slot_) -boolean \| 'false' \| 'true' \| 'page' \| 'step' \| 'location' \| 'date' \| 'time' \| undefined +string -_(Optional)_ Indicates the element that represents the current item within a container or set of related elements. +_(Optional)_
-["aria-describedby"?](#) +[key?](#) -string \| undefined +string \| number \| null \| undefined -_(Optional)_ Identifies the element (or elements) that describes the object. +_(Optional)_
- -["aria-details"?](#) +
- +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) - +## ComputedFn -string \| undefined +```typescript +export type ComputedFn = () => T; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts) -_(Optional)_ Identifies the element that provides a detailed, extended description for the object. +## ComputedSignal - - +A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered. -["aria-disabled"?](#) +```typescript +export interface ComputedSignal extends ReadonlySignal +``` - +**Extends:** [ReadonlySignal](#readonlysignal)<T> - + - + -
-[Booleanish](#booleanish) \| undefined +Method - + -_(Optional)_ Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. +Description -
+
-["aria-dropeffect"?](#) +[force()](#computedsignal-force) - - -'none' \| 'copy' \| 'execute' \| 'link' \| 'move' \| 'popup' \| undefined - - - -_(Optional)_ Indicates what functions can be performed when a dragged object is released on the drop target. +Use this to force recalculation and running subscribers, for example when the calculated value mutates but remains the same object. Useful for third-party libraries.
- -["aria-errormessage"?](#) +
- +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) - +## ContextId -string \| undefined +ContextId is a typesafe ID for your context. - +Context is a way to pass stores to the child components without prop-drilling. -_(Optional)_ Identifies the element that provides an error message for the object. +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 -["aria-expanded"?](#) +```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("Todos"); - +// Example of providing context to child components. +export const App = component$(() => { + useContextProvider( + TodosContext, + useStore({ + items: ["Learn Qwik", "Build Qwik app", "Profit"], + }), + ); - + return ; +}); -[Booleanish](#booleanish) \| undefined +// Example of retrieving the context provided by a parent component. +export const Items = component$(() => { + const todos = useContext(TodosContext); + return ( +
    + {todos.items.map((item) => ( +
  • {item}
    • + ))} +
+ ); +}); +``` - +```typescript +export interface ContextId +``` -_(Optional)_ Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. + - - + - +
-
+Property -["aria-flowto"?](#) + - +Modifiers - + -string \| undefined +Type - + -_(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. +Description -
+
-["aria-grabbed"?](#) +[\_\_brand_context_type\_\_](#) +`readonly` + -[Booleanish](#booleanish) \| undefined +STATE -_(Optional)_ Indicates an element's "grabbed" state in a drag-and-drop operation. +Design-time property to store type information for the context.
-["aria-haspopup"?](#) - - +[id](#) -boolean \| 'false' \| 'true' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog' \| undefined +`readonly` -_(Optional)_ Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. - -
- -["aria-hidden"?](#) - - +string -[Booleanish](#booleanish) \| undefined +A unique ID for the context. - +
-_(Optional)_ Indicates whether the element is exposed to an accessibility API. +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-context.ts) - - +## CorePlatform -["aria-invalid"?](#) +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. -boolean \| 'false' \| 'true' \| 'grammar' \| 'spelling' \| undefined +This is a low-level API and there should not be a need for you to access this. - +```typescript +export interface CorePlatform +``` -_(Optional)_ Indicates the entered value does not conform to the format expected by the application. + - - + - -
-
+Property -["aria-keyshortcuts"?](#) + - +Modifiers - + -string \| undefined +Type - + -_(Optional)_ Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. +Description -
+
-["aria-label"?](#) +[chunkForSymbol](#) -string \| undefined +(symbolName: string, chunk: string \| null, parent?: string) => readonly [symbol: string, chunk: string] \| undefined -_(Optional)_ Defines a string value that labels the current element. +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.)
-["aria-labelledby"?](#) - - +[importSymbol](#) -string \| undefined - -_(Optional)_ Identifies the element (or elements) that labels the current element. - -
- -["aria-level"?](#) - - +(containerEl: Element \| undefined, url: string \| URL \| undefined \| null, symbol: string) => [ValueOrPromise](#valueorpromise)<any> -number \| undefined +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 `importSymbol`. -_(Optional)_ Defines the hierarchical level of an element within a structure. +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.
-["aria-live"?](#) +[isServer](#) -'off' \| 'assertive' \| 'polite' \| undefined +boolean -_(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. +True of running on the server platform.
-["aria-modal"?](#) +[nextTick](#) -[Booleanish](#booleanish) \| undefined +(fn: () => any) => Promise<any> -_(Optional)_ Indicates whether an element is modal when displayed. +Perform operation on next tick.
-["aria-multiline"?](#) +[raf](#) -[Booleanish](#booleanish) \| undefined +(fn: () => any) => Promise<any> -_(Optional)_ Indicates whether a text box accepts multiple lines of input or only a single line. +Perform operation on next request-animation-frame.
+
-["aria-multiselectable"?](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/platform/types.ts) - +## CorrectedToggleEvent - +This corrects the TS definition for ToggleEvent -[Booleanish](#booleanish) \| undefined +```typescript +export interface CorrectedToggleEvent extends Event +``` - +**Extends:** Event -_(Optional)_ Indicates that the user may select more than one item from the current selectable descendants. + - - + -
-
+Property -["aria-orientation"?](#) + - +Modifiers - + -'horizontal' \| 'vertical' \| undefined +Type - + -_(Optional)_ Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. +Description -
+
-["aria-owns"?](#) +[newState](#) +`readonly` + -string \| undefined +'open' \| 'closed' -_(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. -
-["aria-placeholder"?](#) +[prevState](#) +`readonly` + -string \| undefined +'open' \| 'closed' -_(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. -
- -["aria-posinset"?](#) - - +
- +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) -number \| undefined +## createComputed$ - +Create a computed signal which is calculated from the given QRL. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated. -_(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. +The QRL must be a function which returns the value of the signal. The function must not have side effects, and it mus be synchronous. - - +If you need the function to be async, use `useSignal` and `useTask$` instead. -["aria-pressed"?](#) +```typescript +createComputed$: (qrl: () => T) => T extends Promise ? never : ComputedSignal +``` - + - + -
- +Parameter -boolean \| 'false' \| 'mixed' \| 'true' \| undefined + - +Type -_(Optional)_ Indicates the current "pressed" state of toggle buttons. + -
+Description -["aria-readonly"?](#) +
- +qrl -[Booleanish](#booleanish) \| undefined +() => T -_(Optional)_ Indicates that the element is not editable, but is otherwise operable. -
+
+**Returns:** -["aria-relevant"?](#) +T extends Promise<any> ? never : [ComputedSignal](#computedsignal)<T> - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) - +## createContextId -'additions' \| 'additions removals' \| 'additions text' \| 'all' \| 'removals' \| 'removals additions' \| 'removals text' \| 'text' \| 'text additions' \| 'text removals' \| 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. -_(Optional)_ Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. +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 -["aria-required"?](#) +```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("Todos"); - +// Example of providing context to child components. +export const App = component$(() => { + useContextProvider( + TodosContext, + useStore({ + items: ["Learn Qwik", "Build Qwik app", "Profit"], + }), + ); - + return ; +}); -[Booleanish](#booleanish) \| undefined +// Example of retrieving the context provided by a parent component. +export const Items = component$(() => { + const todos = useContext(TodosContext); + return ( +
    + {todos.items.map((item) => ( +
  • {item}
    • + ))} +
+ ); +}); +``` - +```typescript +createContextId: (name: string) => ContextId; +``` -_(Optional)_ Indicates that user input is required on the element before a form may be submitted. + - + - +
-
+Parameter -["aria-roledescription"?](#) + - +Type - + -string \| undefined +Description - +
-_(Optional)_ Defines a human-readable, author-localized description for the role of an element. +name -
+ -["aria-rowcount"?](#) +string - +The name of the context. -number \| undefined +
+**Returns:** - +[ContextId](#contextid)<STATE> -_(Optional)_ Defines the total number of rows in a table, grid, or treegrid. +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-context.ts) - - +## createSignal -["aria-rowindex"?](#) +Creates a Signal with the given value. If no value is given, the signal is created with `undefined`. - +```typescript +createSignal: { + (): Signal; + (value: T): Signal; +} +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) -number \| undefined +## DevJSX - +```typescript +export interface DevJSX +``` -_(Optional)_ Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. + - - + -
-
+Property -["aria-rowspan"?](#) + - +Modifiers - + -number \| undefined +Type - + -_(Optional)_ Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. +Description -
+
-["aria-selected"?](#) +[columnNumber](#) -[Booleanish](#booleanish) \| undefined +number -_(Optional)_ Indicates the current "selected" state of various widgets. -
-["aria-setsize"?](#) +[fileName](#) -number \| undefined +string -_(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. -
-["aria-sort"?](#) +[lineNumber](#) -'none' \| 'ascending' \| 'descending' \| 'other' \| undefined +number -_(Optional)_ Indicates if items in a table or grid are sorted in ascending or descending order. -
-["aria-valuemax"?](#) +[stack?](#) -number \| undefined +string -_(Optional)_ Defines the maximum allowed value for a range widget. +_(Optional)_
+
-["aria-valuemin"?](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts) - +## DOMAttributes - +The Qwik-specific attributes that DOM elements accept -number \| undefined +```typescript +export interface DOMAttributes extends DOMAttributesBase, QwikEvents +``` - +**Extends:** DOMAttributesBase<EL>, QwikEvents<EL> -_(Optional)_ Defines the minimum allowed value for a range widget. + - - +
-
+Property -["aria-valuenow"?](#) + - +Modifiers - + -number \| undefined +Type - + -_(Optional)_ Defines the current value for a range widget. +Description -
+
-["aria-valuetext"?](#) +[class?](#) -string \| undefined +[ClassList](#classlist) \| [Signal](#signal)<[ClassList](#classlist)> \| undefined -_(Optional)_ Defines the human readable text alternative of aria-valuenow for a range widget. +_(Optional)_
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) + +## EagernessOptions -## AriaRole - -```typescript -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 & {}); +```typescript +export type EagernessOptions = "visible" | "load" | "idle"; ``` -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) -## AudioHTMLAttributes +## Element ```typescript -export interface AudioHTMLAttributes extends Attrs<'audio', T> +type Element = JSXOutput; ``` -**Extends:** Attrs<'audio', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +**References:** [JSXOutput](#jsxoutput) -## BaseHTMLAttributes +## ElementChildrenAttribute ```typescript -export interface BaseHTMLAttributes extends Attrs<'base', T> +interface ElementChildrenAttribute ``` -**Extends:** Attrs<'base', T> + + +
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +Property -## BlockquoteHTMLAttributes + -```typescript -export interface BlockquoteHTMLAttributes extends Attrs<'blockquote', T> -``` +Modifiers -**Extends:** Attrs<'blockquote', T> + -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +Type -## Booleanish + -```typescript -export type Booleanish = boolean | `${boolean}`; -``` +Description -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +
+ +[children](#) + + -## ButtonHTMLAttributes + + +[JSXChildren](#jsxchildren) + + + +
+ +## ElementType ```typescript -export interface ButtonHTMLAttributes extends Attrs<'button', T> +type ElementType = string | FunctionComponent>; ``` -**Extends:** Attrs<'button', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +**References:** [FunctionComponent](#functioncomponent) -## cache +## ErrorBoundaryStore ```typescript -cache(policyOrMilliseconds: number | 'immutable'): void; +export interface ErrorBoundaryStore ```
-Parameter +Property + + + +Modifiers @@ -1035,151 +950,120 @@ Description
-policyOrMilliseconds +[error](#) -number \| 'immutable' + + +any \| undefined
-**Returns:** -void +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/error/error-handling.ts) -## CanvasHTMLAttributes +## event$ ```typescript -export interface CanvasHTMLAttributes extends Attrs<'canvas', T> +event$: (qrl: T) => import("./qrl.public").QRL; ``` -**Extends:** Attrs<'canvas', T> + + +
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +Parameter -## ClassList + -A class list can be a string, a boolean, an array, or an object. +Type -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. +Description -```typescript -export type ClassList = - | string - | undefined - | null - | false - | Record - | ClassList[]; -``` +
-**References:** [ClassList](#classlist) +qrl -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) + -## cleanup +T -```typescript -cleanup(): void; -``` + +
**Returns:** -void +import("./qrl.public").[QRL](#qrl)<T> + +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.dollar.ts) + +## EventHandler -## ColgroupHTMLAttributes +A DOM event handler ```typescript -export interface ColgroupHTMLAttributes extends Attrs<'colgroup', T> +export type EventHandler = { + bivarianceHack(event: EV, element: EL): any; +}["bivarianceHack"]; ``` -**Extends:** Attrs<'colgroup', T> +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +## force -## ColHTMLAttributes +Use this to force recalculation and running subscribers, for example when the calculated value mutates but remains the same object. Useful for third-party libraries. ```typescript -export interface ColHTMLAttributes extends Attrs<'col', T> +force(): void; ``` -**Extends:** Attrs<'col', T> +**Returns:** -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +void -## Component +## Fragment -Type representing the Qwik component. +```typescript +Fragment: FunctionComponent<{ + children?: any; + key?: string | number | null; +}>; +``` -`Component` is the type returned by invoking `component$`. - -```tsx -interface MyComponentProps { - someProp: string; -} -const MyComponent: Component = component$( - (props: MyComponentProps) => { - return {props.someProp}; - }, -); -``` - -```typescript -export type Component = FunctionComponent>; -``` - -**References:** [FunctionComponent](#functioncomponent), [PublicProps](#publicprops) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) - -## component$ - -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. +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) -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: +## FunctionComponent -### Example +Any function taking a props object that returns JSXOutput. -An example showing how to create a counter component: +The `key`, `flags` and `dev` parameters are for internal use. -```tsx -export interface CounterProps { - initialValue?: number; - step?: number; -} -export const Counter = component$((props: CounterProps) => { - const state = useStore({ count: props.initialValue || 0 }); - return ( -
- {state.count} - -
- ); -}); +```typescript +export type FunctionComponent

= { + renderFn( + props: P, + key: string | null, + flags: number, + dev?: DevJSX, + ): JSXOutput; +}["renderFn"]; ``` -- `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: +**References:** [DevJSX](#devjsx), [JSXOutput](#jsxoutput) -```tsx -export const OtherComponent = component$(() => { - return ; -}); -``` +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts) -See also: `component`, `useCleanup`, `onResume`, `onPause`, `useOn`, `useOnDocument`, `useOnWindow`, `useStyles` +## getDomContainer ```typescript -component$: (onMount: OnRenderFn) => Component; +export declare function getDomContainer( + element: Element | VNode, +): IClientContainer; ```
@@ -1197,11 +1081,11 @@ Description
-onMount +element -[OnRenderFn](#onrenderfn)<PROPS> +Element \| VNode @@ -1209,23 +1093,23 @@ onMount
**Returns:** -[Component](#component)<PROPS> +IClientContainer -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/client/dom-container.ts) -## ComponentBaseProps +## getLocale + +Retrieve the current locale. + +If no current locale and there is no `defaultLocale` the function throws an error. ```typescript -export interface ComponentBaseProps +export declare function getLocale(defaultLocale?: string): string; ``` -
-Property - - - -Modifiers +Parameter @@ -1238,9 +1122,7 @@ Description
-["q:slot"?](#componentbaseprops-_q_slot_) - - +defaultLocale @@ -1251,46 +1133,51 @@ string _(Optional)_
+
+**Returns:** -[key?](#) +string - +The locale. - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-locale.ts) -string \| number \| null \| undefined +## getPlatform - +Retrieve the `CorePlatform`. -_(Optional)_ +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. - - +```typescript +getPlatform: () => CorePlatform; +``` -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) +**Returns:** -## ComputedFn +[CorePlatform](#coreplatform) -```typescript -export type ComputedFn = () => T; -``` +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/platform/platform.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts) +## h -## ComputedSignal +The legacy transform, used in special cases like `

`. Note that the children are spread arguments, instead of a prop like in jsx() calls. -A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered. +Also note that this disables optimizations. ```typescript -export interface ComputedSignal extends ReadonlySignal +export declare function h< + TYPE extends string | FunctionComponent, + PROPS extends {} = {}, +>(type: TYPE, props?: PROPS | null, ...children: any[]): JSXNode; ``` -**Extends:** [ReadonlySignal](#readonlysignal)<T> - + +
-Method +Parameter + + + +Type @@ -1299,72 +1186,88 @@ Description
-[force()](#computedsignal-force) +type -Use this to force recalculation and running subscribers, for example when the calculated value mutates but remains the same object. Useful for third-party libraries. +TYPE + + + +
+ +props + + + +PROPS \| null + + + +_(Optional)_ + +
+ +children + + + +any[] + +
+**Returns:** -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) +[JSXNode](#jsxnode)<TYPE> -## ContextId +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) -ContextId is a typesafe ID for your context. +## implicit$FirstArg -Context is a way to pass stores to the child components without prop-drilling. +Create a `____$(...)` convenience method from `___(...)`. -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. +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 `$`. -### Example +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 -// Declare the Context type. -interface TodosStore { - items: string[]; +export function myApi(callback: QRL<() => void>): void { + // ... } -// 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("Todos"); -// Example of providing context to child components. -export const App = component$(() => { - useContextProvider( - TodosContext, - useStore({ - items: ["Learn Qwik", "Build Qwik app", "Profit"], - }), - ); +export const myApi$ = implicit$FirstArg(myApi); +// type of myApi$: (callback: () => void): void - return ; -}); +// can be used as: +myApi$(() => console.log("callback")); -// Example of retrieving the context provided by a parent component. -export const Items = component$(() => { - const todos = useContext(TodosContext); - return ( -
    - {todos.items.map((item) => ( -
  • {item}
    • - ))} -
- ); -}); +// will be transpiled to: +// FILE: +myApi(qrl("./chunk-abc.js", "callback")); + +// FILE: chunk-abc.js +export const callback = () => console.log("callback"); ``` ```typescript -export interface ContextId +implicit$FirstArg: ( + fn: (qrl: QRL, ...rest: REST) => RET, + ) => + (qrl: FIRST, ...rest: REST) => + RET; ``` -
-Property - - - -Modifiers +Parameter @@ -1377,63 +1280,92 @@ Description
-[\_\_brand_context_type\_\_](#) - - - -`readonly` +fn -STATE +(qrl: [QRL](#qrl)<FIRST>, ...rest: REST) => RET -Design-time property to store type information for the context. +A function that should have its first argument automatically `$`.
+
+**Returns:** -[id](#) +((qrl: FIRST, ...rest: REST) => RET) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/implicit_dollar.ts) -`readonly` +## IntrinsicAttributes - +```typescript +interface IntrinsicAttributes extends QwikIntrinsicAttributes +``` -string +**Extends:** QwikIntrinsicAttributes + +## IntrinsicElements + +```typescript +interface IntrinsicElements extends LenientQwikElements +``` + +**Extends:** LenientQwikElements + +## isSignal + +```typescript +isSignal: (value: any) => value is ISignal +``` + + +
+ +Parameter + + + +Type + + + +Description + +
+ +value -A unique ID for the context. +any + +
+**Returns:** -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-context.ts) - -## CorePlatform - -Low-level API for platform abstraction. +value is [ISignal](#signal)<unknown> -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. +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.ts) -`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. +## jsx -This is a low-level API and there should not be a need for you to access this. +Used by the JSX transpilers to create a JSXNode. Note that the optimizer will not use this, instead using \_jsxSplit and \_jsxSorted directly. ```typescript -export interface CorePlatform +jsx: >( + type: T, + props: T extends FunctionComponent ? PROPS : Props, + key?: string | number | null, +) => JSXNode; ``` + +
-Property - - - -Modifiers +Parameter @@ -1446,99 +1378,174 @@ Description
-[chunkForSymbol](#) +type +T + -(symbolName: string, chunk: string \| null, parent?: string) => readonly [symbol: string, chunk: string] \| undefined +
+ +props -Retrieve chunk name for the symbol. +T extends [FunctionComponent](#functioncomponent)<infer PROPS> ? PROPS : Props -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.) +
-[importSymbol](#) +key +string \| number \| null + -(containerEl: Element \| undefined, url: string \| URL \| undefined \| null, symbol: string) => [ValueOrPromise](#valueorpromise)<any> +_(Optional)_ - +
+**Returns:** -Retrieve a symbol value from QRL. +[JSXNode](#jsxnode)<T> -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 `importSymbol`. +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) -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. +## JSXChildren - - +```typescript +export type JSXChildren = + | string + | number + | boolean + | null + | undefined + | Function + | RegExp + | JSXChildren[] + | Promise + | Signal + | JSXNode; +``` -[isServer](#) +**References:** [JSXChildren](#jsxchildren), [Signal](#signal), [JSXNode](#jsxnode) + +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) + +## jsxDEV + +```typescript +jsxDEV: >( + type: T, + props: T extends FunctionComponent ? PROPS : Props, + key: string | number | null | undefined, + _isStatic: boolean, + opts: JsxDevOpts, + _ctx: unknown, +) => JSXNode; +``` + + + + + +
+ +Parameter + + + +Type + + + +Description + +
+ +type +T + -boolean +
+ +props -True of running on the server platform. +T extends [FunctionComponent](#functioncomponent)<infer PROPS> ? PROPS : Props + +
-[nextTick](#) +key +string \| number \| null \| undefined + -(fn: () => any) => Promise<any> +
+ +\_isStatic -Perform operation on next tick. +boolean + +
-[raf](#) +opts +JsxDevOpts + -(fn: () => any) => Promise<any> +
+ +\_ctx -Perform operation on next request-animation-frame. +unknown + +
+**Returns:** -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/platform/types.ts) +[JSXNode](#jsxnode)<T> -## CorrectedToggleEvent +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) -This corrects the TS definition for ToggleEvent +## JSXNode + +A JSX Node, an internal structure. You probably want to use `JSXOutput` instead. ```typescript -export interface CorrectedToggleEvent extends Event +export interface JSXNode ``` -**Extends:** Event - -
Property @@ -1558,7303 +1565,1418 @@ Description
-[newState](#) +[children](#) -`readonly` - -'open' \| 'closed' +[JSXChildren](#jsxchildren) \| null
-[prevState](#) +[dev?](#) -`readonly` - -'open' \| 'closed' +[DevJSX](#devjsx) +_(Optional)_ +
+ -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) +[key](#) -## createComputed$ + -Create a computed signal which is calculated from the given QRL. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated. + -The QRL must be a function which returns the value of the signal. The function must not have side effects, and it mus be synchronous. +string \| null -If you need the function to be async, use `useSignal` and `useTask$` instead. + -```typescript -createComputed$: (qrl: () => T) => T extends Promise ? never : ComputedSignal -``` + + - + -
+[props](#) -Parameter + - + -Type +T extends [FunctionComponent](#functioncomponent)<infer P> ? P : Record<any, unknown> - + -Description +
-
+[type](#) -qrl + -() => T +T
-**Returns:** -T extends Promise<any> ? never : [ComputedSignal](#computedsignal)<T> +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) - -## createContextId - -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("Todos"); - -// Example of providing context to child components. -export const App = component$(() => { - useContextProvider( - TodosContext, - useStore({ - items: ["Learn Qwik", "Build Qwik app", "Profit"], - }), - ); - - return ; -}); +## JSXOutput -// Example of retrieving the context provided by a parent component. -export const Items = component$(() => { - const todos = useContext(TodosContext); - return ( -
    - {todos.items.map((item) => ( -
  • {item}
    • - ))} -
- ); -}); -``` +Any valid output for a component ```typescript -createContextId: (name: string) => ContextId; +export type JSXOutput = + | JSXNode + | string + | number + | boolean + | null + | undefined + | JSXOutput[]; ``` - - -
- -Parameter - - - -Type - - - -Description - -
- -name - - - -string - - - -The name of the context. - -
-**Returns:** - -[ContextId](#contextid)<STATE> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-context.ts) +**References:** [JSXNode](#jsxnode), [JSXOutput](#jsxoutput) -## createSignal +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts) -Creates a Signal with the given value. If no value is given, the signal is created with `undefined`. +## JSXTagName ```typescript -createSignal: { - (): Signal; - (value: T): Signal; -} +export type JSXTagName = + | keyof HTMLElementTagNameMap + | Omit; ``` -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) -## CSSProperties +## KnownEventNames + +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$`) ```typescript -export interface CSSProperties extends CSS.Properties, CSS.PropertiesHyphen +export type KnownEventNames = LiteralUnion; ``` -**Extends:** CSS.Properties<string \| number>, CSS.PropertiesHyphen<string \| number> +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +## NativeAnimationEvent -## DataHTMLAttributes +> Warning: This API is now obsolete. +> +> Use `AnimationEvent` and use the second argument to the handler function for the current event target ```typescript -export interface DataHTMLAttributes extends Attrs<'data', T> +export type NativeAnimationEvent = AnimationEvent; ``` -**Extends:** Attrs<'data', T> +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +## NativeClipboardEvent -## DelHTMLAttributes +> Warning: This API is now obsolete. +> +> Use `ClipboardEvent` and use the second argument to the handler function for the current event target ```typescript -export interface DelHTMLAttributes extends Attrs<'del', T> +export type NativeClipboardEvent = ClipboardEvent; ``` -**Extends:** Attrs<'del', T> +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +## NativeCompositionEvent -## DetailsHTMLAttributes +> Warning: This API is now obsolete. +> +> Use `CompositionEvent` and use the second argument to the handler function for the current event target ```typescript -export interface DetailsHTMLAttributes extends Attrs<'details', T> +export type NativeCompositionEvent = CompositionEvent; ``` -**Extends:** Attrs<'details', T> +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +## NativeDragEvent -## DevJSX +> Warning: This API is now obsolete. +> +> Use `DragEvent` and use the second argument to the handler function for the current event target ```typescript -export interface DevJSX +export type NativeDragEvent = DragEvent; ``` - - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[columnNumber](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## NativeFocusEvent - +> Warning: This API is now obsolete. +> +> Use `FocusEvent` and use the second argument to the handler function for the current event target -number +```typescript +export type NativeFocusEvent = FocusEvent; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -
+## NativeKeyboardEvent -[fileName](#) +> Warning: This API is now obsolete. +> +> Use `KeyboardEvent` and use the second argument to the handler function for the current event target - +```typescript +export type NativeKeyboardEvent = KeyboardEvent; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -string +## NativeMouseEvent - +> Warning: This API is now obsolete. +> +> Use `MouseEvent` and use the second argument to the handler function for the current event target -
+```typescript +export type NativeMouseEvent = MouseEvent; +``` -[lineNumber](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## NativePointerEvent - +> Warning: This API is now obsolete. +> +> Use `PointerEvent` and use the second argument to the handler function for the current event target -number +```typescript +export type NativePointerEvent = PointerEvent; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -
+## NativeTouchEvent -[stack?](#) +> Warning: This API is now obsolete. +> +> Use `TouchEvent` and use the second argument to the handler function for the current event target - +```typescript +export type NativeTouchEvent = TouchEvent; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -string +## NativeTransitionEvent - +> Warning: This API is now obsolete. +> +> Use `TransitionEvent` and use the second argument to the handler function for the current event target -_(Optional)_ +```typescript +export type NativeTransitionEvent = TransitionEvent; +``` -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts) +## NativeUIEvent -## DialogHTMLAttributes +> Warning: This API is now obsolete. +> +> Use `UIEvent` and use the second argument to the handler function for the current event target ```typescript -export interface DialogHTMLAttributes extends Attrs<'dialog', T> +export type NativeUIEvent = UIEvent; ``` -**Extends:** Attrs<'dialog', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -## DOMAttributes +## NativeWheelEvent -The Qwik-specific attributes that DOM elements accept +> Warning: This API is now obsolete. +> +> Use `WheelEvent` and use the second argument to the handler function for the current event target ```typescript -export interface DOMAttributes extends DOMAttributesBase, QwikEvents +export type NativeWheelEvent = WheelEvent; ``` -**Extends:** DOMAttributesBase<EL>, QwikEvents<EL> - - - -
- -Property +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## noSerialize -Modifiers - - - -Type - - - -Description - -
- -[class?](#) - - - - - -[ClassList](#classlist) \| [Signal](#signal)<[ClassList](#classlist)> \| undefined - - - -_(Optional)_ - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) - -## EagernessOptions - -```typescript -export type EagernessOptions = "visible" | "load" | "idle"; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) - -## Element - -```typescript -type Element = JSXOutput; -``` - -**References:** [JSXOutput](#jsxoutput) - -## ElementChildrenAttribute - -```typescript -interface ElementChildrenAttribute -``` - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[children](#) - - - - - -[JSXChildren](#jsxchildren) - - - -
- -## ElementType - -```typescript -type ElementType = string | FunctionComponent>; -``` - -**References:** [FunctionComponent](#functioncomponent) - -## EmbedHTMLAttributes - -```typescript -export interface EmbedHTMLAttributes extends Attrs<'embed', T> -``` - -**Extends:** Attrs<'embed', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## ErrorBoundaryStore - -```typescript -export interface ErrorBoundaryStore -``` - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[error](#) - - - - - -any \| undefined - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/error/error-handling.ts) - -## event$ - -```typescript -event$: (qrl: T) => import("./qrl.public").QRL; -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -qrl - - - -T - - - -
-**Returns:** - -import("./qrl.public").[QRL](#qrl)<T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.dollar.ts) - -## EventHandler - -A DOM event handler - -```typescript -export type EventHandler = { - bivarianceHack(event: EV, element: EL): any; -}["bivarianceHack"]; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) - -## FieldsetHTMLAttributes - -```typescript -export interface FieldsetHTMLAttributes extends Attrs<'fieldset', T> -``` - -**Extends:** Attrs<'fieldset', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## force - -Use this to force recalculation and running subscribers, for example when the calculated value mutates but remains the same object. Useful for third-party libraries. - -```typescript -force(): void; -``` - -**Returns:** - -void - -## FormHTMLAttributes - -```typescript -export interface FormHTMLAttributes extends Attrs<'form', T> -``` - -**Extends:** Attrs<'form', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## Fragment - -```typescript -Fragment: FunctionComponent<{ - children?: any; - key?: string | number | null; -}>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) - -## FunctionComponent - -Any function taking a props object that returns JSXOutput. - -The `key`, `flags` and `dev` parameters are for internal use. - -```typescript -export type FunctionComponent

= { - renderFn( - props: P, - key: string | null, - flags: number, - dev?: DevJSX, - ): JSXOutput; -}["renderFn"]; -``` - -**References:** [DevJSX](#devjsx), [JSXOutput](#jsxoutput) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts) - -## getDomContainer - -```typescript -export declare function getDomContainer( - element: Element | VNode, -): IClientContainer; -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -element - - - -Element \| VNode - - - -
-**Returns:** - -IClientContainer - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/client/dom-container.ts) - -## getLocale - -Retrieve the current locale. - -If no current locale and there is no `defaultLocale` the function throws an error. - -```typescript -export declare function getLocale(defaultLocale?: string): string; -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -defaultLocale - - - -string - - - -_(Optional)_ - -
-**Returns:** - -string - -The locale. - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-locale.ts) - -## getPlatform - -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. - -```typescript -getPlatform: () => CorePlatform; -``` - -**Returns:** - -[CorePlatform](#coreplatform) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/platform/platform.ts) - -## h - -The legacy transform, used in special cases like `

`. Note that the children are spread arguments, instead of a prop like in jsx() calls. - -Also note that this disables optimizations. - -```typescript -export declare function h< - TYPE extends string | FunctionComponent, - PROPS extends {} = {}, ->(type: TYPE, props?: PROPS | null, ...children: any[]): JSXNode; -``` - - - - - -
- -Parameter - - - -Type - - - -Description - -
- -type - - - -TYPE - - - -
- -props - - - -PROPS \| null - - - -_(Optional)_ - -
- -children - - - -any[] - - - -
-**Returns:** - -[JSXNode](#jsxnode)<TYPE> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) - -## HrHTMLAttributes - -```typescript -export interface HrHTMLAttributes extends Attrs<'hr', T> -``` - -**Extends:** Attrs<'hr', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## HTMLAttributeAnchorTarget - -```typescript -export type HTMLAttributeAnchorTarget = - | "_self" - | "_blank" - | "_parent" - | "_top" - | (string & {}); -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## HTMLAttributeReferrerPolicy - -```typescript -export type HTMLAttributeReferrerPolicy = ReferrerPolicy; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## HTMLAttributes - -```typescript -export interface HTMLAttributes extends HTMLElementAttrs, DOMAttributes -``` - -**Extends:** [HTMLElementAttrs](#htmlelementattrs), [DOMAttributes](#domattributes)<E> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## HTMLCrossOriginAttribute - -```typescript -export type HTMLCrossOriginAttribute = - | "anonymous" - | "use-credentials" - | "" - | undefined; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## HTMLElementAttrs - -```typescript -export interface HTMLElementAttrs extends HTMLAttributesBase, FilterBase -``` - -**Extends:** HTMLAttributesBase, FilterBase<HTMLElement> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## HtmlHTMLAttributes - -```typescript -export interface HtmlHTMLAttributes extends Attrs<'html', T> -``` - -**Extends:** Attrs<'html', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## HTMLInputAutocompleteAttribute - -```typescript -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"; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## HTMLInputTypeAttribute - -```typescript -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 & {}); -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## IframeHTMLAttributes - -```typescript -export interface IframeHTMLAttributes extends Attrs<'iframe', T> -``` - -**Extends:** Attrs<'iframe', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## ImgHTMLAttributes - -```typescript -export interface ImgHTMLAttributes extends Attrs<'img', T> -``` - -**Extends:** Attrs<'img', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## implicit$FirstArg - -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: -myApi(qrl("./chunk-abc.js", "callback")); - -// FILE: chunk-abc.js -export const callback = () => console.log("callback"); -``` - -```typescript -implicit$FirstArg: ( - fn: (qrl: QRL, ...rest: REST) => RET, - ) => - (qrl: FIRST, ...rest: REST) => - RET; -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -fn - - - -(qrl: [QRL](#qrl)<FIRST>, ...rest: REST) => RET - - - -A function that should have its first argument automatically `$`. - -
-**Returns:** - -((qrl: FIRST, ...rest: REST) => RET) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/implicit_dollar.ts) - -## InputHTMLAttributes - -```typescript -export type InputHTMLAttributes = Attrs< - "input", - T, - HTMLInputElement ->; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## InsHTMLAttributes - -```typescript -export interface InsHTMLAttributes extends Attrs<'ins', T> -``` - -**Extends:** Attrs<'ins', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## IntrinsicAttributes - -```typescript -interface IntrinsicAttributes extends QwikIntrinsicAttributes -``` - -**Extends:** QwikIntrinsicAttributes - -## IntrinsicElements - -```typescript -export interface IntrinsicElements extends IntrinsicHTMLElements, IntrinsicSVGElements -``` - -**Extends:** [IntrinsicHTMLElements](#intrinsichtmlelements), [IntrinsicSVGElements](#intrinsicsvgelements) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## IntrinsicHTMLElements - -These are the HTML tags with handlers allowing plain callbacks, to be used for the JSX interface - -```typescript -export type IntrinsicHTMLElements = { - [key in keyof HTMLElementTagNameMap]: Augmented< - HTMLElementTagNameMap[key], - SpecialAttrs[key] - > & - HTMLAttributes; -} & { - [unknownTag: string]: { - [prop: string]: any; - } & HTMLElementAttrs & - HTMLAttributes; -}; -``` - -**References:** [HTMLAttributes](#htmlattributes), [HTMLElementAttrs](#htmlelementattrs) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## IntrinsicSVGElements - -These are the SVG tags with handlers allowing plain callbacks, to be used for the JSX interface - -```typescript -export type IntrinsicSVGElements = { - [K in keyof Omit< - SVGElementTagNameMap, - keyof HTMLElementTagNameMap - >]: LenientSVGProps; -}; -``` - -**References:** [LenientSVGProps](#lenientsvgprops) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## isSignal - -```typescript -isSignal: (value: any) => value is ISignal -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -value - - - -any - - - -
-**Returns:** - -value is [ISignal](#signal)<unknown> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.ts) - -## jsx - -Used by the JSX transpilers to create a JSXNode. Note that the optimizer will not use this, instead using \_jsxSplit and \_jsxSorted directly. - -```typescript -jsx: >( - type: T, - props: T extends FunctionComponent ? PROPS : Props, - key?: string | number | null, -) => JSXNode; -``` - - - - - -
- -Parameter - - - -Type - - - -Description - -
- -type - - - -T - - - -
- -props - - - -T extends [FunctionComponent](#functioncomponent)<infer PROPS> ? PROPS : Props - - - -
- -key - - - -string \| number \| null - - - -_(Optional)_ - -
-**Returns:** - -[JSXNode](#jsxnode)<T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) - -## JSXChildren - -```typescript -export type JSXChildren = - | string - | number - | boolean - | null - | undefined - | Function - | RegExp - | JSXChildren[] - | Promise - | Signal - | JSXNode; -``` - -**References:** [JSXChildren](#jsxchildren), [Signal](#signal), [JSXNode](#jsxnode) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) - -## jsxDEV - -```typescript -jsxDEV: >( - type: T, - props: T extends FunctionComponent ? PROPS : Props, - key: string | number | null | undefined, - _isStatic: boolean, - opts: JsxDevOpts, - _ctx: unknown, -) => JSXNode; -``` - - - - - - - - -
- -Parameter - - - -Type - - - -Description - -
- -type - - - -T - - - -
- -props - - - -T extends [FunctionComponent](#functioncomponent)<infer PROPS> ? PROPS : Props - - - -
- -key - - - -string \| number \| null \| undefined - - - -
- -\_isStatic - - - -boolean - - - -
- -opts - - - -JsxDevOpts - - - -
- -\_ctx - - - -unknown - - - -
-**Returns:** - -[JSXNode](#jsxnode)<T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) - -## JSXNode - -A JSX Node, an internal structure. You probably want to use `JSXOutput` instead. - -```typescript -export interface JSXNode -``` - - - - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[children](#) - - - - - -[JSXChildren](#jsxchildren) \| null - - - -
- -[dev?](#) - - - - - -[DevJSX](#devjsx) - - - -_(Optional)_ - -
- -[key](#) - - - - - -string \| null - - - -
- -[props](#) - - - - - -T extends [FunctionComponent](#functioncomponent)<infer P> ? P : Record<any, unknown> - - - -
- -[type](#) - - - - - -T - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts) - -## JSXOutput - -Any valid output for a component - -```typescript -export type JSXOutput = - | JSXNode - | string - | number - | boolean - | null - | undefined - | JSXOutput[]; -``` - -**References:** [JSXNode](#jsxnode), [JSXOutput](#jsxoutput) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-node.ts) - -## JSXTagName - -```typescript -export type JSXTagName = - | keyof HTMLElementTagNameMap - | Omit; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) - -## KeygenHTMLAttributes - -> Warning: This API is now obsolete. -> -> in html5 - -```typescript -export interface KeygenHTMLAttributes extends Attrs<'base', T> -``` - -**Extends:** Attrs<'base', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## KnownEventNames - -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$`) - -```typescript -export type KnownEventNames = LiteralUnion; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## LabelHTMLAttributes - -```typescript -export interface LabelHTMLAttributes extends Attrs<'label', T> -``` - -**Extends:** Attrs<'label', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## LenientSVGProps - -```typescript -export interface LenientSVGProps extends SVGAttributes, DOMAttributes -``` - -**Extends:** [SVGAttributes](#svgattributes), [DOMAttributes](#domattributes)<T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## LiHTMLAttributes - -```typescript -export interface LiHTMLAttributes extends Attrs<'li', T> -``` - -**Extends:** Attrs<'li', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## LinkHTMLAttributes - -```typescript -export interface LinkHTMLAttributes extends Attrs<'link', T> -``` - -**Extends:** Attrs<'link', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## MapHTMLAttributes - -```typescript -export interface MapHTMLAttributes extends Attrs<'map', T> -``` - -**Extends:** Attrs<'map', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## MediaHTMLAttributes - -```typescript -export interface MediaHTMLAttributes extends HTMLAttributes, Augmented -``` - -**Extends:** [HTMLAttributes](#htmlattributes)<T>, Augmented<HTMLMediaElement, { crossOrigin?: [HTMLCrossOriginAttribute](#htmlcrossoriginattribute); }> - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[crossOrigin?](#) - - - - - -[HTMLCrossOriginAttribute](#htmlcrossoriginattribute) - - - -_(Optional)_ - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## MenuHTMLAttributes - -```typescript -export interface MenuHTMLAttributes extends Attrs<'menu', T> -``` - -**Extends:** Attrs<'menu', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## MetaHTMLAttributes - -```typescript -export interface MetaHTMLAttributes extends Attrs<'meta', T> -``` - -**Extends:** Attrs<'meta', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## MeterHTMLAttributes - -```typescript -export interface MeterHTMLAttributes extends Attrs<'meter', T> -``` - -**Extends:** Attrs<'meter', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## NativeAnimationEvent - -> Warning: This API is now obsolete. -> -> Use `AnimationEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeAnimationEvent = AnimationEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeClipboardEvent - -> Warning: This API is now obsolete. -> -> Use `ClipboardEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeClipboardEvent = ClipboardEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeCompositionEvent - -> Warning: This API is now obsolete. -> -> Use `CompositionEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeCompositionEvent = CompositionEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeDragEvent - -> Warning: This API is now obsolete. -> -> Use `DragEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeDragEvent = DragEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeFocusEvent - -> Warning: This API is now obsolete. -> -> Use `FocusEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeFocusEvent = FocusEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeKeyboardEvent - -> Warning: This API is now obsolete. -> -> Use `KeyboardEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeKeyboardEvent = KeyboardEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeMouseEvent - -> Warning: This API is now obsolete. -> -> Use `MouseEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeMouseEvent = MouseEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativePointerEvent - -> Warning: This API is now obsolete. -> -> Use `PointerEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativePointerEvent = PointerEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeTouchEvent - -> Warning: This API is now obsolete. -> -> Use `TouchEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeTouchEvent = TouchEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeTransitionEvent - -> Warning: This API is now obsolete. -> -> Use `TransitionEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeTransitionEvent = TransitionEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeUIEvent - -> Warning: This API is now obsolete. -> -> Use `UIEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeUIEvent = UIEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## NativeWheelEvent - -> Warning: This API is now obsolete. -> -> Use `WheelEvent` and use the second argument to the handler function for the current event target - -```typescript -export type NativeWheelEvent = WheelEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## noSerialize - -Returned type of the `noSerialize()` function. It will be TYPE or undefined. - -```typescript -export type NoSerialize = - | (T & { - __no_serialize__: true; - }) - | undefined; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/utils/serialize-utils.ts) - -## NoSerialize - -Returned type of the `noSerialize()` function. It will be TYPE or undefined. - -```typescript -export type NoSerialize = - | (T & { - __no_serialize__: true; - }) - | undefined; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/utils/serialize-utils.ts) - -## Numberish - -```typescript -export type Numberish = number | `${number}`; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## ObjectHTMLAttributes - -```typescript -export interface ObjectHTMLAttributes extends Attrs<'object', T> -``` - -**Extends:** Attrs<'object', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## OlHTMLAttributes - -```typescript -export interface OlHTMLAttributes extends Attrs<'ol', T> -``` - -**Extends:** Attrs<'ol', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## OnRenderFn - -```typescript -export type OnRenderFn = (props: PROPS) => JSXOutput; -``` - -**References:** [JSXOutput](#jsxoutput) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) - -## OnVisibleTaskOptions - -```typescript -export interface OnVisibleTaskOptions -``` - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[strategy?](#) - - - - - -[VisibleTaskStrategy](#visibletaskstrategy) - - - -_(Optional)_ The strategy to use to determine when the "VisibleTask" should first execute. - -- `intersection-observer`: the task will first execute when the element is visible in the viewport, under the hood it uses the IntersectionObserver API. - `document-ready`: the task will first execute when the document is ready, under the hood it uses the document `load` event. - `document-idle`: the task will first execute when the document is idle, under the hood it uses the requestIdleCallback API. - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-visible-task.ts) - -## OptgroupHTMLAttributes - -```typescript -export interface OptgroupHTMLAttributes extends Attrs<'optgroup', T> -``` - -**Extends:** Attrs<'optgroup', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## OptionHTMLAttributes - -```typescript -export interface OptionHTMLAttributes extends Attrs<'option', T> -``` - -**Extends:** Attrs<'option', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## OutputHTMLAttributes - -```typescript -export interface OutputHTMLAttributes extends Attrs<'output', T> -``` - -**Extends:** Attrs<'output', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## ParamHTMLAttributes - -> Warning: This API is now obsolete. -> -> Old DOM API - -```typescript -export interface ParamHTMLAttributes extends Attrs<'base', T, HTMLParamElement> -``` - -**Extends:** Attrs<'base', T, HTMLParamElement> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## PrefetchGraph - -> 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. - -Load the prefetch graph for the container. - -Each Qwik container needs to include its own prefetch graph. - -```typescript -PrefetchGraph: (opts?: { - base?: string; - manifestHash?: string; - manifestURL?: string; - nonce?: string; -}) => JSXOutput; -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -opts - - - -{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; } - - - -_(Optional)_ Options for the loading prefetch graph. - -- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name. - -
-**Returns:** - -[JSXOutput](#jsxoutput) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts) - -## PrefetchServiceWorker - -> 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. - -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. - -```typescript -PrefetchServiceWorker: (opts: { - base?: string; - scope?: string; - path?: string; - verbose?: boolean; - fetchBundleGraph?: boolean; - nonce?: string; -}) => JSXOutput; -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -opts - - - -{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; } - - - -Options for the prefetch service worker. - -- `base` - Base URL for the service worker. Default is `import.meta.env.BASE_URL`, which is defined by Vite's `config.base` and defaults to `/`. - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`. - -
-**Returns:** - -[JSXOutput](#jsxoutput) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts) - -## ProgressHTMLAttributes - -```typescript -export interface ProgressHTMLAttributes extends Attrs<'progress', T> -``` - -**Extends:** Attrs<'progress', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## PropFunction - -Alias for `QRL`. Of historic relevance only. - -```typescript -export type PropFunction = QRL; -``` - -**References:** [QRL](#qrl) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts) - -## PropsOf - -Infers `Props` from the component or tag. - -```typescript -export type PropsOf = COMP extends string - ? COMP extends keyof QwikIntrinsicElements - ? QwikIntrinsicElements[COMP] - : QwikIntrinsicElements["span"] - : NonNullable extends never - ? never - : COMP extends FunctionComponent - ? PROPS extends Record - ? IsAny extends true - ? never - : ObjectProps - : COMP extends Component - ? ObjectProps - : PROPS - : never; -``` - -**References:** [QwikIntrinsicElements](#qwikintrinsicelements), [FunctionComponent](#functioncomponent), [Component](#component) - -```tsx -const Desc = component$( - ({ desc, ...props }: { desc: string } & PropsOf<"div">) => { - return
{desc}
; - }, -); - -const TitleBox = component$( - ({ title, ...props }: { title: string } & PropsOf) => { - return ( - -

{title}

- - ); - }, -); -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) - -## PublicProps - -Extends the defined component PROPS, adding the default ones (children and q:slot) and allowing plain functions to QRL arguments. - -```typescript -export type PublicProps = (PROPS extends Record - ? Omit & _Only$ - : unknown extends PROPS - ? {} - : PROPS) & - ComponentBaseProps & - ComponentChildren; -``` - -**References:** [ComponentBaseProps](#componentbaseprops) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) - -## qrl - -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. - -```tsx -useOnDocument( - "mousemove", - $((event) => console.log("mousemove", event)), -); -``` - -In the above code, the Qwik Optimizer detects `$(...)` and transforms the code as shown below: - -```tsx -// 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). - -```tsx -// 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. - -```tsx -// 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 `
`. - -\#\# `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. - -1. `QRL`s must be serializable into HTML. 2. `QRL`s must be resolved by framework relative to `q: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: - -```tsx -return -
-``` - -1. 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, the `import('./chunk-abc.js')` would become relative to where the `import()` 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 about `import` 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`. - -```typescript -export type QRL = { - __qwik_serializable__?: any; - __brand__QRL__: TYPE; - resolve(): Promise; - resolved: undefined | TYPE; - getCaptured(): unknown[] | null; - getSymbol(): string; - getHash(): string; - dev: QRLDev | null; -} & BivariantQrlFn, QrlReturn>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.ts) - -## QRL - -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. - -```tsx -useOnDocument( - "mousemove", - $((event) => console.log("mousemove", event)), -); -``` - -In the above code, the Qwik Optimizer detects `$(...)` and transforms the code as shown below: - -```tsx -// 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). - -```tsx -// 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. - -```tsx -// 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 `
`. - -\#\# `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. - -1. `QRL`s must be serializable into HTML. 2. `QRL`s must be resolved by framework relative to `q: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: - -```tsx -return -
-``` - -1. 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, the `import('./chunk-abc.js')` would become relative to where the `import()` 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 about `import` 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`. - -```typescript -export type QRL = { - __qwik_serializable__?: any; - __brand__QRL__: TYPE; - resolve(): Promise; - resolved: undefined | TYPE; - getCaptured(): unknown[] | null; - getSymbol(): string; - getHash(): string; - dev: QRLDev | null; -} & BivariantQrlFn, QrlReturn>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts) - -## QRLEventHandlerMulti - -An event handler for Qwik events, can be a handler QRL or an array of handler QRLs. - -```typescript -export type QRLEventHandlerMulti = - | QRL> - | undefined - | null - | QRLEventHandlerMulti[] - | EventHandler; -``` - -**References:** [QRL](#qrl), [EventHandler](#eventhandler), [QRLEventHandlerMulti](#qrleventhandlermulti) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) - -## QuoteHTMLAttributes - -```typescript -export interface QuoteHTMLAttributes extends Attrs<'q', T> -``` - -**Extends:** Attrs<'q', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## QwikAnimationEvent - -> Warning: This API is now obsolete. -> -> Use `AnimationEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikAnimationEvent = NativeAnimationEvent; -``` - -**References:** [NativeAnimationEvent](#nativeanimationevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikAttributes - -The Qwik DOM attributes without plain handlers, for use as function parameters - -```typescript -export interface QwikAttributes extends DOMAttributesBase, QwikEvents -``` - -**Extends:** DOMAttributesBase<EL>, QwikEvents<EL, false> - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[class?](#) - - - - - -[ClassList](#classlist) \| undefined - - - -_(Optional)_ - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) - -## QwikChangeEvent - -> 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. - -```typescript -export type QwikChangeEvent = Event; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikClipboardEvent - -> Warning: This API is now obsolete. -> -> Use `ClipboardEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikClipboardEvent = NativeClipboardEvent; -``` - -**References:** [NativeClipboardEvent](#nativeclipboardevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikCompositionEvent - -> Warning: This API is now obsolete. -> -> Use `CompositionEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikCompositionEvent = NativeCompositionEvent; -``` - -**References:** [NativeCompositionEvent](#nativecompositionevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikDOMAttributes - -```typescript -export interface QwikDOMAttributes extends DOMAttributes -``` - -**Extends:** [DOMAttributes](#domattributes)<Element> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik.ts) - -## QwikDragEvent - -> Warning: This API is now obsolete. -> -> Use `DragEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikDragEvent = NativeDragEvent; -``` - -**References:** [NativeDragEvent](#nativedragevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikFocusEvent - -> Warning: This API is now obsolete. -> -> Use `FocusEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikFocusEvent = NativeFocusEvent; -``` - -**References:** [NativeFocusEvent](#nativefocusevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikHTMLElements - -The DOM props without plain handlers, for use inside functions - -```typescript -export type QwikHTMLElements = { - [tag in keyof HTMLElementTagNameMap]: Augmented< - HTMLElementTagNameMap[tag], - SpecialAttrs[tag] - > & - HTMLElementAttrs & - QwikAttributes; -}; -``` - -**References:** [HTMLElementAttrs](#htmlelementattrs), [QwikAttributes](#qwikattributes) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## QwikIdleEvent - -Emitted by qwik-loader on document when the document first becomes idle - -```typescript -export type QwikIdleEvent = CustomEvent<{}>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikInitEvent - -Emitted by qwik-loader on document when the document first becomes interactive - -```typescript -export type QwikInitEvent = CustomEvent<{}>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikIntrinsicElements - -The interface holds available attributes of both native DOM elements and custom Qwik elements. An example showing how to define a customizable wrapper component: - -```tsx -import { component$, Slot, type QwikIntrinsicElements } from "@qwik.dev/core"; - -type WrapperProps = { - attributes?: QwikIntrinsicElements["div"]; -}; - -export default component$(({ attributes }) => { - return ( -
- -
- ); -}); -``` - -Note: It is shorter to use `PropsOf<'div'>` - -```typescript -export interface QwikIntrinsicElements extends QwikHTMLElements, QwikSVGElements -``` - -**Extends:** [QwikHTMLElements](#qwikhtmlelements), [QwikSVGElements](#qwiksvgelements) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-elements.ts) - -## QwikInvalidEvent - -> Warning: This API is now obsolete. -> -> Use `Event` and use the second argument to the handler function for the current event target - -```typescript -export type QwikInvalidEvent = Event; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikJSX - -```typescript -export declare namespace QwikJSX -``` - - - - - -
- -Interface - - - -Description - -
- -[ElementChildrenAttribute](#qwikjsx-elementchildrenattribute) - - - -
- -[IntrinsicAttributes](#qwikjsx-intrinsicattributes) - - - -
- -[IntrinsicElements](#) - - - -
- - - - -
- -Type Alias - - - -Description - -
- -[Element](#qwikjsx-element) - - - -
- -[ElementType](#qwikjsx-elementtype) - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik.ts) - -## QwikKeyboardEvent - -> Warning: This API is now obsolete. -> -> Use `KeyboardEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikKeyboardEvent = NativeKeyboardEvent; -``` - -**References:** [NativeKeyboardEvent](#nativekeyboardevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikMouseEvent - -> Warning: This API is now obsolete. -> -> Use `MouseEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikMouseEvent = E; -``` - -**References:** [NativeMouseEvent](#nativemouseevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikPointerEvent - -> Warning: This API is now obsolete. -> -> Use `PointerEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikPointerEvent = NativePointerEvent; -``` - -**References:** [NativePointerEvent](#nativepointerevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikSubmitEvent - -> Warning: This API is now obsolete. -> -> Use `SubmitEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikSubmitEvent = SubmitEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikSVGElements - -The SVG props without plain handlers, for use inside functions - -```typescript -export type QwikSVGElements = { - [K in keyof Omit< - SVGElementTagNameMap, - keyof HTMLElementTagNameMap - >]: SVGProps; -}; -``` - -**References:** [SVGProps](#svgprops) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## QwikSymbolEvent - -Emitted by qwik-loader when a module was lazily loaded - -```typescript -export type QwikSymbolEvent = CustomEvent<{ - qBase: string; - qManifest: string; - qVersion: string; - href: string; - symbol: string; - element: Element; - reqTime: number; -}>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikTouchEvent - -> Warning: This API is now obsolete. -> -> Use `TouchEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikTouchEvent = NativeTouchEvent; -``` - -**References:** [NativeTouchEvent](#nativetouchevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikTransitionEvent - -> Warning: This API is now obsolete. -> -> Use `TransitionEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikTransitionEvent = NativeTransitionEvent; -``` - -**References:** [NativeTransitionEvent](#nativetransitionevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikUIEvent - -> Warning: This API is now obsolete. -> -> Use `UIEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikUIEvent = NativeUIEvent; -``` - -**References:** [NativeUIEvent](#nativeuievent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikVisibleEvent - -Emitted by qwik-loader when an element becomes visible. Used by `useVisibleTask$` - -```typescript -export type QwikVisibleEvent = CustomEvent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## QwikWheelEvent - -> Warning: This API is now obsolete. -> -> Use `WheelEvent` and use the second argument to the handler function for the current event target - -```typescript -export type QwikWheelEvent = NativeWheelEvent; -``` - -**References:** [NativeWheelEvent](#nativewheelevent) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - -## ReadonlySignal - -```typescript -export interface ReadonlySignal -``` - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[value](#) - - - -`readonly` - - - -T - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) - -## render - -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. - -```typescript -render: ( - parent: Element | Document, - jsxNode: JSXOutput | FunctionComponent, - opts?: RenderOptions, -) => Promise; -``` - - - - - -
- -Parameter - - - -Type - - - -Description - -
- -parent - - - -Element \| Document - - - -Element which will act as a parent to `jsxNode`. When possible the rendering will try to reuse existing nodes. - -
- -jsxNode - - - -[JSXOutput](#jsxoutput) \| [FunctionComponent](#functioncomponent)<any> - - - -JSX to render - -
- -opts - - - -[RenderOptions](#renderoptions) - - - -_(Optional)_ - -
-**Returns:** - -Promise<[RenderResult](#renderresult)> - -An object containing a cleanup function. - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/client/dom-render.ts) - -## RenderOnce - -```typescript -RenderOnce: FunctionComponent<{ - children?: unknown; - key?: string | number | null | undefined; -}>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) - -## RenderOptions - -```typescript -export interface RenderOptions -``` - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[serverData?](#) - - - - - -Record<string, any> - - - -_(Optional)_ - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/client/types.ts) - -## RenderResult - -```typescript -export interface RenderResult -``` - - - -
- -Method - - - -Description - -
- -[cleanup()](#renderresult-cleanup) - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/client/types.ts) - -## RenderSSROptions - -```typescript -export interface RenderSSROptions -``` - - - - - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[base?](#) - - - - - -string - - - -_(Optional)_ - -
- -[containerAttributes](#) - - - - - -Record<string, string> - - - -
- -[containerTagName](#) - - - - - -string - - - -
- -[manifestHash](#) - - - - - -string - - - -
- -[serverData?](#) - - - - - -Record<string, any> - - - -_(Optional)_ - -
- -[stream](#) - - - - - -StreamWriter - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) - -## Resource - -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. - -Be careful when using a `try/catch` statement in `useResource$`. If you catch the error and don't re-throw it (or a new Error), the resource status will never be `rejected`. - -### Example - -Example showing how `useResource` to perform a fetch to request the weather, whenever the input city name changes. - -```tsx -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 ( -
- - { - return
Temperature: {weather.temp}
; - }} - /> -
- ); -}); -``` - -```typescript -Resource: (props: ResourceProps) => JSXOutput; -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -props - - - -[ResourceProps](#resourceprops)<T> - - - -
-**Returns:** - -[JSXOutput](#jsxoutput) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - -## ResourceCtx - -```typescript -export interface ResourceCtx -``` - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[previous](#) - - - -`readonly` - - - -T \| undefined - - - -
- -[track](#) - - - -`readonly` - - - -[Tracker](#tracker) - - - -
- - - - -
- -Method - - - -Description - -
- -[cache(policyOrMilliseconds)](#resourcectx-cache) - - - -
- -[cleanup(callback)](#) - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - -## ResourceFn - -```typescript -export type ResourceFn = (ctx: ResourceCtx) => ValueOrPromise; -``` - -**References:** [ResourceCtx](#resourcectx), [ValueOrPromise](#valueorpromise) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - -## ResourceOptions - -Options to pass to `useResource$()` - -```typescript -export interface ResourceOptions -``` - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[timeout?](#) - - - - - -number - - - -_(Optional)_ Timeout in milliseconds. If the resource takes more than the specified millisecond, it will timeout. Resulting on a rejected resource. - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - -## ResourcePending - -```typescript -export interface ResourcePending -``` - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[loading](#) - - - -`readonly` - - - -boolean - - - -
- -[value](#) - - - -`readonly` - - - -Promise<T> - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - -## ResourceProps - -```typescript -export interface ResourceProps -``` - - - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[onPending?](#) - - - - - -() => [JSXOutput](#jsxoutput) - - - -_(Optional)_ - -
- -[onRejected?](#) - - - - - -(reason: Error) => [JSXOutput](#jsxoutput) - - - -_(Optional)_ - -
- -[onResolved](#) - - - - - -(value: T) => [JSXOutput](#jsxoutput) - - - -
- -[value](#) - - - -`readonly` - - - -[ResourceReturn](#resourcereturn)<T> \| [Signal](#signal)<Promise<T> \| T> \| Promise<T> - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - -## ResourceRejected - -```typescript -export interface ResourceRejected -``` - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[loading](#) - - - -`readonly` - - - -boolean - - - -
- -[value](#) - - - -`readonly` - - - -Promise<T> - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - -## ResourceResolved - -```typescript -export interface ResourceResolved -``` - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[loading](#) - - - -`readonly` - - - -boolean - - - -
- -[value](#) - - - -`readonly` - - - -Promise<T> - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - -## ResourceReturn - -```typescript -export type ResourceReturn = - | ResourcePending - | ResourceResolved - | ResourceRejected; -``` - -**References:** [ResourcePending](#resourcepending), [ResourceResolved](#resourceresolved), [ResourceRejected](#resourcerejected) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - -## ScriptHTMLAttributes - -```typescript -export interface ScriptHTMLAttributes extends Attrs<'script', T> -``` - -**Extends:** Attrs<'script', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## SelectHTMLAttributes - -```typescript -export interface SelectHTMLAttributes extends Attrs<'select', T> -``` - -**Extends:** Attrs<'select', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## setPlatform - -Sets the `CorePlatform`. - -This is useful to override the platform in tests to change the behavior of, `requestAnimationFrame`, and import resolution. - -```typescript -setPlatform: (plt: CorePlatform) => CorePlatform; -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -plt - - - -[CorePlatform](#coreplatform) - - - -
-**Returns:** - -[CorePlatform](#coreplatform) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/platform/platform.ts) - -## Signal - -A signal is a reactive value which can be read and written. When the signal is written, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered. - -Furthermore, when a signal value is passed as a prop to a component, the optimizer will automatically forward the signal. This means that `return
hi
` will update the `title` attribute when the signal changes without having to re-render the component. - -```typescript -export interface Signal extends ReadonlySignal -``` - -**Extends:** [ReadonlySignal](#readonlysignal)<T> - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[value](#) - - - - - -T - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) - -## Size - -```typescript -export type Size = number | string; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## SkipRender - -```typescript -SkipRender: JSXNode; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - -## Slot - -Allows to project the children of the current component. can only be used within the context of a component defined with `component$`. - -```typescript -Slot: FunctionComponent<{ - name?: string; - children?: JSXChildren; -}>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/slot.public.ts) - -## SlotHTMLAttributes - -```typescript -export interface SlotHTMLAttributes extends Attrs<'slot', T> -``` - -**Extends:** Attrs<'slot', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## SnapshotListener - -```typescript -export interface SnapshotListener -``` - - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[el](#) - - - - - -Element - - - -
- -[key](#) - - - - - -string - - - -
- -[qrl](#) - - - - - -[QRL](#qrl)<any> - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) - -## SnapshotMeta - -```typescript -export type SnapshotMeta = Record; -``` - -**References:** [SnapshotMetaValue](#snapshotmetavalue) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) - -## SnapshotMetaValue - -```typescript -export interface SnapshotMetaValue -``` - - - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[c?](#) - - - - - -string - - - -_(Optional)_ - -
- -[h?](#) - - - - - -string - - - -_(Optional)_ - -
- -[s?](#) - - - - - -string - - - -_(Optional)_ - -
- -[w?](#) - - - - - -string - - - -_(Optional)_ - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) - -## SnapshotResult - -```typescript -export interface SnapshotResult -``` - - - - - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[funcs](#) - - - - - -string[] - - - -
- -[mode](#) - - - - - -'render' \| 'listeners' \| 'static' - - - -
- -[objs?](#) - - - - - -any[] - - - -_(Optional)_ - -
- -[qrls](#) - - - - - -[QRL](#qrl)[] - - - -
- -[resources](#) - - - - - -ResourceReturnInternal<any>[] - - - -
- -[state?](#) - - - - - -[SnapshotState](#snapshotstate) - - - -_(Optional)_ - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) - -## SnapshotState - -> Warning: This API is now obsolete. -> -> not longer used in v2 - -```typescript -export interface SnapshotState -``` - - - - - - -
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -[ctx](#) - - - - - -[SnapshotMeta](#snapshotmeta) - - - -
- -[objs](#) - - - - - -any[] - - - -
- -[refs](#) - - - - - -Record<string, string> - - - -
- -[subs](#) - - - - - -any[] - - - -
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) - -## SourceHTMLAttributes - -```typescript -export interface SourceHTMLAttributes extends Attrs<'source', T> -``` - -**Extends:** Attrs<'source', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## SSRComment - -```typescript -SSRComment: FunctionComponent<{ - data: string; -}>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - -## SSRHintProps - -```typescript -export type SSRHintProps = { - dynamic?: boolean; -}; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - -## SSRRaw - -```typescript -SSRRaw: FunctionComponent<{ - data: string; -}>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - -## SSRStream - -```typescript -SSRStream: FunctionComponent; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - -## SSRStreamBlock - -```typescript -SSRStreamBlock: FunctionComponent<{ - children?: JSXOutput; -}>; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - -## SSRStreamChildren - -```typescript -export type SSRStreamChildren = - | AsyncGenerator - | ((stream: StreamWriter) => Promise) - | (() => AsyncGenerator); -``` - -**References:** [JSXChildren](#jsxchildren) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - -## SSRStreamProps - -```typescript -export type SSRStreamProps = { - children: SSRStreamChildren; -}; -``` - -**References:** [SSRStreamChildren](#ssrstreamchildren) - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - -## StyleHTMLAttributes - -```typescript -export interface StyleHTMLAttributes extends Attrs<'style', T> -``` - -**Extends:** Attrs<'style', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## SVGAttributes - -The TS types don't include the SVG attributes so we have to define them ourselves - -NOTE: These props are probably not complete - -```typescript -export interface SVGAttributes extends AriaAttributes -``` - -**Extends:** [AriaAttributes](#ariaattributes) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +
- -Property - - - -Modifiers - - - -Type - - - -Description - -
- -["accent-height"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["alignment-baseline"?](#) - - - - - -'auto' \| 'baseline' \| 'before-edge' \| 'text-before-edge' \| 'middle' \| 'central' \| 'after-edge' \| 'text-after-edge' \| 'ideographic' \| 'alphabetic' \| 'hanging' \| 'mathematical' \| 'inherit' \| undefined - - - -_(Optional)_ - -
- -["arabic-form"?](#) - - - - - -'initial' \| 'medial' \| 'terminal' \| 'isolated' \| undefined - - - -_(Optional)_ - -
- -["baseline-shift"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["cap-height"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["clip-path"?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["clip-rule"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["color-interpolation-filters"?](#) - - - - - -'auto' \| 's-rGB' \| 'linear-rGB' \| 'inherit' \| undefined - - - -_(Optional)_ - -
- -["color-interpolation"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["color-profile"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["color-rendering"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["dominant-baseline"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["edge-mode"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["enable-background"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["fill-opacity"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["fill-rule"?](#) - - - - - -'nonzero' \| 'evenodd' \| 'inherit' \| undefined - - - -_(Optional)_ - -
- -["flood-color"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["flood-opacity"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["font-family"?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["font-size-adjust"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["font-size"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["font-stretch"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["font-style"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["font-variant"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["font-weight"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["glyph-name"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["glyph-orientation-horizontal"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["glyph-orientation-vertical"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["horiz-adv-x"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["horiz-origin-x"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["image-rendering"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["letter-spacing"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["lighting-color"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["marker-end"?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["marker-mid"?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["marker-start"?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["overline-position"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["overline-thickness"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["paint-order"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["pointer-events"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["rendering-intent"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["shape-rendering"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["stop-color"?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["stop-opacity"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["strikethrough-position"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["strikethrough-thickness"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["stroke-dasharray"?](#) - - - - - -string \| number \| undefined - - - -_(Optional)_ - -
- -["stroke-dashoffset"?](#) - - - - - -string \| number \| undefined - - - -_(Optional)_ - -
- -["stroke-linecap"?](#) - - - - - -'butt' \| 'round' \| 'square' \| 'inherit' \| undefined - - - -_(Optional)_ - -
- -["stroke-linejoin"?](#) - - - - - -'miter' \| 'round' \| 'bevel' \| 'inherit' \| undefined - - - -_(Optional)_ - -
- -["stroke-miterlimit"?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["stroke-opacity"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["stroke-width"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["text-anchor"?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["text-decoration"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["text-rendering"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["underline-position"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["underline-thickness"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["unicode-bidi"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["unicode-range"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["units-per-em"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["v-alphabetic"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["v-hanging"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["v-ideographic"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["v-mathematical"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["vector-effect"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["vert-adv-y"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["vert-origin-x"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["vert-origin-y"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["word-spacing"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["writing-mode"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["x-channel-selector"?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["x-height"?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -["xlink:actuate"?](#svgattributes-_xlink_actuate_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xlink:arcrole"?](#svgattributes-_xlink_arcrole_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xlink:href"?](#svgattributes-_xlink_href_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xlink:role"?](#svgattributes-_xlink_role_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xlink:show"?](#svgattributes-_xlink_show_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xlink:title"?](#svgattributes-_xlink_title_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xlink:type"?](#svgattributes-_xlink_type_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xml:base"?](#svgattributes-_xml_base_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xml:lang"?](#svgattributes-_xml_lang_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xml:space"?](#svgattributes-_xml_space_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -["xmlns:xlink"?](#svgattributes-_xmlns_xlink_) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[accumulate?](#) - - - - - -'none' \| 'sum' \| undefined - - - -_(Optional)_ - -
- -[additive?](#) - - - - - -'replace' \| 'sum' \| undefined - - - -_(Optional)_ - -
- -[allowReorder?](#) - - - - - -'no' \| 'yes' \| undefined - - - -_(Optional)_ - -
- -[alphabetic?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[amplitude?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[ascent?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[attributeName?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[attributeType?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[autoReverse?](#) - - - - - -[Booleanish](#booleanish) \| undefined - - - -_(Optional)_ - -
- -[azimuth?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[baseFrequency?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[baseProfile?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[bbox?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[begin?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[bias?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[by?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[calcMode?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[clip?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[clipPathUnits?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[color?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[contentScriptType?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[contentStyleType?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[crossOrigin?](#) - - - - - -[HTMLCrossOriginAttribute](#htmlcrossoriginattribute) - - - -_(Optional)_ - -
- -[cursor?](#) - - - - - -number \| string - - - -_(Optional)_ - -
- -[cx?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[cy?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[d?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[decelerate?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[descent?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[diffuseConstant?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[direction?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[display?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[divisor?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[dur?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[dx?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[dy?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[elevation?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[end?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[exponent?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[externalResourcesRequired?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[fill?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[filter?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[filterRes?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[filterUnits?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[focusable?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[format?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[fr?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[from?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[fx?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[fy?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[g1?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[g2?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[glyphRef?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[gradientTransform?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[gradientUnits?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[hanging?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[height?](#) - - - - - -[Size](#size) \| undefined - - - -_(Optional)_ - -
- -[href?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[id?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[ideographic?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[in?](#) - - - - - -string \| undefined - - - -_(Optional)_ - -
- -[in2?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
- -[intercept?](#) - - - - - -number \| string \| undefined - - - -_(Optional)_ - -
+Returned type of the `noSerialize()` function. It will be TYPE or undefined. -[k?](#) +```typescript +export type NoSerialize = + | (T & { + __no_serialize__: true; + }) + | undefined; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/utils/serialize-utils.ts) - +## NoSerialize -number \| string \| undefined +Returned type of the `noSerialize()` function. It will be TYPE or undefined. - +```typescript +export type NoSerialize = + | (T & { + __no_serialize__: true; + }) + | undefined; +``` -_(Optional)_ +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/utils/serialize-utils.ts) -
+## OnRenderFn -[k1?](#) +```typescript +export type OnRenderFn = (props: PROPS) => JSXOutput; +``` - +**References:** [JSXOutput](#jsxoutput) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) -number \| string \| undefined +## OnVisibleTaskOptions - +```typescript +export interface OnVisibleTaskOptions +``` -_(Optional)_ + - - + - +
-
+Property -[k2?](#) + - +Modifiers - + -number \| string \| undefined +Type - + -_(Optional)_ +Description -
+
-[k3?](#) +[strategy?](#) -number \| string \| undefined +[VisibleTaskStrategy](#visibletaskstrategy) -_(Optional)_ - -
+_(Optional)_ The strategy to use to determine when the "VisibleTask" should first execute. -[k4?](#) +- `intersection-observer`: the task will first execute when the element is visible in the viewport, under the hood it uses the IntersectionObserver API. - `document-ready`: the task will first execute when the document is ready, under the hood it uses the document `load` event. - `document-idle`: the task will first execute when the document is idle, under the hood it uses the requestIdleCallback API. - +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-visible-task.ts) -number \| string \| undefined +## PrefetchGraph - +> 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. -_(Optional)_ +Load the prefetch graph for the container. -
+Each Qwik container needs to include its own prefetch graph. -[kernelMatrix?](#) +```typescript +PrefetchGraph: (opts?: { + base?: string; + manifestHash?: string; + manifestURL?: string; + nonce?: string; +}) => JSXOutput; +``` - + - + - +
- +Parameter -number \| string \| undefined + - +Type -_(Optional)_ + -
+Description -[kernelUnitLength?](#) +
- +opts -number \| string \| undefined +{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; } -_(Optional)_ +_(Optional)_ Options for the loading prefetch graph. -
+- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name. -[kerning?](#) +
+**Returns:** -		 +[JSXOutput](#jsxoutput) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts) -number \| string \| undefined +## PrefetchServiceWorker - +> 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. -_(Optional)_ +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. -[keyPoints?](#) +```typescript +PrefetchServiceWorker: (opts: { + base?: string; + scope?: string; + path?: string; + verbose?: boolean; + fetchBundleGraph?: boolean; + nonce?: string; +}) => JSXOutput; +``` - + - + -
- +Parameter -number \| string \| undefined + - +Type -_(Optional)_ + -
+Description -[keySplines?](#) +
- +opts -number \| string \| undefined +{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; } -_(Optional)_ +Options for the prefetch service worker. + +- `base` - Base URL for the service worker. Default is `import.meta.env.BASE_URL`, which is defined by Vite's `config.base` and defaults to `/`. - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`.
+
+**Returns:** -[keyTimes?](#) +[JSXOutput](#jsxoutput) -		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/prefetch-service-worker/prefetch.ts) - +## PropFunction -number \| string \| undefined +Alias for `QRL`. Of historic relevance only. - +```typescript +export type PropFunction = QRL; +``` -_(Optional)_ +**References:** [QRL](#qrl) -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts) -[lang?](#) +## PropsOf - +Infers `Props` from the component or tag. - +```typescript +export type PropsOf = COMP extends string + ? COMP extends keyof QwikIntrinsicElements + ? QwikIntrinsicElements[COMP] + : QwikIntrinsicElements["span"] + : NonNullable extends never + ? never + : COMP extends FunctionComponent + ? PROPS extends Record + ? IsAny extends true + ? never + : ObjectProps + : COMP extends Component + ? ObjectProps + : PROPS + : never; +``` -string \| undefined +**References:** [QwikIntrinsicElements](#qwikintrinsicelements), [FunctionComponent](#functioncomponent), [Component](#component) - +```tsx +const Desc = component$( + ({ desc, ...props }: { desc: string } & PropsOf<"div">) => { + return
{desc}
; + }, +); -_(Optional)_ +const TitleBox = component$( + ({ title, ...props }: { title: string } & PropsOf) => { + return ( + +

{title}

+ + ); + }, +); +``` -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) -[lengthAdjust?](#) +## PublicProps - +Extends the defined component PROPS, adding the default ones (children and q:slot) and allowing plain functions to QRL arguments. - +```typescript +export type PublicProps = (PROPS extends Record + ? Omit & _Only$ + : unknown extends PROPS + ? {} + : PROPS) & + ComponentBaseProps & + ComponentChildren; +``` -number \| string \| undefined +**References:** [ComponentBaseProps](#componentbaseprops) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/component.public.ts) -_(Optional)_ +## qrl -
+The `QRL` type represents a lazy-loadable AND serializable resource. -[limitingConeAngle?](#) +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.) -number \| string \| undefined +\#\# 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. -_(Optional)_ +```tsx +useOnDocument( + "mousemove", + $((event) => console.log("mousemove", event)), +); +``` -
+In the above code, the Qwik Optimizer detects `$(...)` and transforms the code as shown below: -[local?](#) +```tsx +// 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. -number \| string \| undefined +\#\# 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). -_(Optional)_ +```tsx +// 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. -[markerHeight?](#) +\#\# 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. - +```tsx +// Assume you have QRL reference to a greet function +const lazyGreet: QRL<() => void> = $(() => console.log("Hello World!")); -number \| string \| undefined +// Use `qrlImport` to load / resolve the reference. +const greet: () => void = await lazyGreet.resolve(); - +// Invoke it +greet(); +``` -_(Optional)_ +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 `
`. -
+\#\# `QRL.resolved` -[markerUnits?](#) +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. -number \| string \| undefined +1. `QRL`s must be serializable into HTML. 2. `QRL`s must be resolved by framework relative to `q: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: -_(Optional)_ +```tsx +return
+The above code needs to be serialized into DOM such as: -[markerWidth?](#) +``` +
+ +
+``` -		 +1. 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, the `import('./chunk-abc.js')` would become relative to where the `import()` 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 about `import` 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`. -number \| string \| undefined +```typescript +export type QRL = { + __qwik_serializable__?: any; + __brand__QRL__: TYPE; + resolve(): Promise; + resolved: undefined | TYPE; + getCaptured(): unknown[] | null; + getSymbol(): string; + getHash(): string; + dev: QRLDev | null; +} & BivariantQrlFn, QrlReturn>; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.ts) -_(Optional)_ +## QRL -
+The `QRL` type represents a lazy-loadable AND serializable resource. -[mask?](#) +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.) -string \| undefined +\#\# 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. -_(Optional)_ +```tsx +useOnDocument( + "mousemove", + $((event) => console.log("mousemove", event)), +); +``` -
+In the above code, the Qwik Optimizer detects `$(...)` and transforms the code as shown below: -[maskContentUnits?](#) +```tsx +// 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. -number \| string \| undefined +\#\# 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). -_(Optional)_ +```tsx +// 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. -[maskUnits?](#) +\#\# 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. - +```tsx +// Assume you have QRL reference to a greet function +const lazyGreet: QRL<() => void> = $(() => console.log("Hello World!")); -number \| string \| undefined +// Use `qrlImport` to load / resolve the reference. +const greet: () => void = await lazyGreet.resolve(); - +// Invoke it +greet(); +``` -_(Optional)_ +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 `
`. -
+\#\# `QRL.resolved` -[mathematical?](#) +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. -number \| string \| undefined +1. `QRL`s must be serializable into HTML. 2. `QRL`s must be resolved by framework relative to `q: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: -_(Optional)_ +```tsx +return
+The above code needs to be serialized into DOM such as: -[max?](#) +``` +
+ +
+``` -		 +1. 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, the `import('./chunk-abc.js')` would become relative to where the `import()` 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 about `import` 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`. -number \| string \| undefined +```typescript +export type QRL = { + __qwik_serializable__?: any; + __brand__QRL__: TYPE; + resolve(): Promise; + resolved: undefined | TYPE; + getCaptured(): unknown[] | null; + getSymbol(): string; + getHash(): string; + dev: QRLDev | null; +} & BivariantQrlFn, QrlReturn>; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts) -_(Optional)_ +## QRLEventHandlerMulti -
+An event handler for Qwik events, can be a handler QRL or an array of handler QRLs. -[media?](#) +```typescript +export type QRLEventHandlerMulti = + | QRL> + | undefined + | null + | QRLEventHandlerMulti[] + | EventHandler; +``` - +**References:** [QRL](#qrl), [EventHandler](#eventhandler), [QRLEventHandlerMulti](#qrleventhandlermulti) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) -string \| undefined +## QwikAnimationEvent - +> Warning: This API is now obsolete. +> +> Use `AnimationEvent` and use the second argument to the handler function for the current event target -_(Optional)_ +```typescript +export type QwikAnimationEvent = NativeAnimationEvent; +``` -
+**References:** [NativeAnimationEvent](#nativeanimationevent) -[method?](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## QwikAttributes - +The Qwik DOM attributes without plain handlers, for use as function parameters -string \| undefined +```typescript +export interface QwikAttributes extends DOMAttributesBase, QwikEvents +``` - +**Extends:** DOMAttributesBase<EL>, QwikEvents<EL, false> -_(Optional)_ + - - + -
-
+Property -[min?](#) + - +Modifiers - + -number \| string \| undefined +Type - + -_(Optional)_ +Description -
+
-[mode?](#) +[class?](#) -number \| string \| undefined +[ClassList](#classlist) \| undefined _(Optional)_
- -[name?](#) - - - - - -string \| undefined +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts) -_(Optional)_ +## QwikChangeEvent -
+> 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. -[numOctaves?](#) +```typescript +export type QwikChangeEvent = Event; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## QwikClipboardEvent -number \| string \| undefined +> Warning: This API is now obsolete. +> +> Use `ClipboardEvent` and use the second argument to the handler function for the current event target - +```typescript +export type QwikClipboardEvent = NativeClipboardEvent; +``` -_(Optional)_ +**References:** [NativeClipboardEvent](#nativeclipboardevent) -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -[offset?](#) +## QwikCompositionEvent - +> Warning: This API is now obsolete. +> +> Use `CompositionEvent` and use the second argument to the handler function for the current event target - +```typescript +export type QwikCompositionEvent = NativeCompositionEvent; +``` -number \| string \| undefined +**References:** [NativeCompositionEvent](#nativecompositionevent) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -_(Optional)_ +## QwikDOMAttributes -
+```typescript +export interface QwikDOMAttributes extends DOMAttributes +``` -[opacity?](#) +**Extends:** [DOMAttributes](#domattributes)<Element> - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik.ts) - +## QwikDragEvent -number \| string \| undefined +> Warning: This API is now obsolete. +> +> Use `DragEvent` and use the second argument to the handler function for the current event target - +```typescript +export type QwikDragEvent = NativeDragEvent; +``` -_(Optional)_ +**References:** [NativeDragEvent](#nativedragevent) -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -[operator?](#) +## QwikFocusEvent - +> Warning: This API is now obsolete. +> +> Use `FocusEvent` and use the second argument to the handler function for the current event target - +```typescript +export type QwikFocusEvent = NativeFocusEvent; +``` -number \| string \| undefined +**References:** [NativeFocusEvent](#nativefocusevent) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -_(Optional)_ +## QwikHTMLElements -
+The DOM props without plain handlers, for use inside functions -[order?](#) +```typescript +export type QwikHTMLElements = { + [tag in keyof HTMLElementTagNameMap]: Augmented< + HTMLElementTagNameMap[tag], + SpecialAttrs[tag] + > & + HTMLElementAttrs & + QwikAttributes; +}; +``` - +**References:** [QwikAttributes](#qwikattributes) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) -number \| string \| undefined +## QwikIdleEvent - +Emitted by qwik-loader on document when the document first becomes idle -_(Optional)_ +```typescript +export type QwikIdleEvent = CustomEvent<{}>; +``` -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -[orient?](#) +## QwikInitEvent - +Emitted by qwik-loader on document when the document first becomes interactive - +```typescript +export type QwikInitEvent = CustomEvent<{}>; +``` -number \| string \| undefined +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## QwikIntrinsicElements -_(Optional)_ +The interface holds available attributes of both native DOM elements and custom Qwik elements. An example showing how to define a customizable wrapper component: -
+```tsx +import { component$, Slot, type QwikIntrinsicElements } from "@qwik.dev/core"; -[orientation?](#) +type WrapperProps = { + attributes?: QwikIntrinsicElements["div"]; +}; - +export default component$(({ attributes }) => { + return ( +
+ +
+ ); +}); +``` -		 +Note: It is shorter to use `PropsOf<'div'>` -number \| string \| undefined +```typescript +export interface QwikIntrinsicElements extends QwikHTMLElements, QwikSVGElements +``` - +**Extends:** [QwikHTMLElements](#qwikhtmlelements), [QwikSVGElements](#qwiksvgelements) -_(Optional)_ +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-elements.ts) -
+## QwikInvalidEvent -[origin?](#) +> Warning: This API is now obsolete. +> +> Use `Event` and use the second argument to the handler function for the current event target - +```typescript +export type QwikInvalidEvent = Event; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -number \| string \| undefined +## QwikJSX - +```typescript +export declare namespace QwikJSX +``` -_(Optional)_ + - + + -
-
+Interface -[overflow?](#) + - +Description - +
-number \| string \| undefined +[ElementChildrenAttribute](#qwikjsx-elementchildrenattribute) -_(Optional)_ -
-[panose1?](#) +[IntrinsicAttributes](#qwikjsx-intrinsicattributes) - +
-number \| string \| undefined +[IntrinsicElements](#qwikjsx-intrinsicelements) -_(Optional)_ -
+
-[path?](#) + + +
- +Type Alias - + -string \| undefined +Description - +
-_(Optional)_ +[Element](#qwikjsx-element) + +
-[pathLength?](#) +[ElementType](#qwikjsx-elementtype) - +
-number \| string \| undefined +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik.ts) -		 +## QwikKeyboardEvent -_(Optional)_ +> Warning: This API is now obsolete. +> +> Use `KeyboardEvent` and use the second argument to the handler function for the current event target -
+```typescript +export type QwikKeyboardEvent = NativeKeyboardEvent; +``` -[patternContentUnits?](#) +**References:** [NativeKeyboardEvent](#nativekeyboardevent) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## QwikMouseEvent -string \| undefined +> Warning: This API is now obsolete. +> +> Use `MouseEvent` and use the second argument to the handler function for the current event target - +```typescript +export type QwikMouseEvent = E; +``` -_(Optional)_ +**References:** [NativeMouseEvent](#nativemouseevent) -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -[patternTransform?](#) +## QwikPointerEvent - +> Warning: This API is now obsolete. +> +> Use `PointerEvent` and use the second argument to the handler function for the current event target - +```typescript +export type QwikPointerEvent = NativePointerEvent; +``` -number \| string \| undefined +**References:** [NativePointerEvent](#nativepointerevent) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -_(Optional)_ +## QwikSubmitEvent -
+> Warning: This API is now obsolete. +> +> Use `SubmitEvent` and use the second argument to the handler function for the current event target -[patternUnits?](#) +```typescript +export type QwikSubmitEvent = SubmitEvent; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## QwikSVGElements -string \| undefined +The SVG props without plain handlers, for use inside functions - +```typescript +export type QwikSVGElements = { + [K in keyof Omit< + SVGElementTagNameMap, + keyof HTMLElementTagNameMap + >]: SVGProps; +}; +``` -_(Optional)_ +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) -
+## QwikSymbolEvent -[points?](#) +Emitted by qwik-loader when a module was lazily loaded - +```typescript +export type QwikSymbolEvent = CustomEvent<{ + qBase: string; + qManifest: string; + qVersion: string; + href: string; + symbol: string; + element: Element; + reqTime: number; +}>; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -string \| undefined +## QwikTouchEvent - +> Warning: This API is now obsolete. +> +> Use `TouchEvent` and use the second argument to the handler function for the current event target -_(Optional)_ +```typescript +export type QwikTouchEvent = NativeTouchEvent; +``` -
+**References:** [NativeTouchEvent](#nativetouchevent) -[pointsAtX?](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## QwikTransitionEvent - +> Warning: This API is now obsolete. +> +> Use `TransitionEvent` and use the second argument to the handler function for the current event target -number \| string \| undefined +```typescript +export type QwikTransitionEvent = NativeTransitionEvent; +``` - +**References:** [NativeTransitionEvent](#nativetransitionevent) -_(Optional)_ +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -
+## QwikUIEvent -[pointsAtY?](#) +> Warning: This API is now obsolete. +> +> Use `UIEvent` and use the second argument to the handler function for the current event target - +```typescript +export type QwikUIEvent = NativeUIEvent; +``` - +**References:** [NativeUIEvent](#nativeuievent) -number \| string \| undefined +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## QwikVisibleEvent -_(Optional)_ +Emitted by qwik-loader when an element becomes visible. Used by `useVisibleTask$` -
+```typescript +export type QwikVisibleEvent = CustomEvent; +``` -[pointsAtZ?](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) - +## QwikWheelEvent - +> Warning: This API is now obsolete. +> +> Use `WheelEvent` and use the second argument to the handler function for the current event target -number \| string \| undefined +```typescript +export type QwikWheelEvent = NativeWheelEvent; +``` - +**References:** [NativeWheelEvent](#nativewheelevent) -_(Optional)_ +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts) -
+## ReadonlySignal -[preserveAlpha?](#) +```typescript +export interface ReadonlySignal +``` - + - + - +
- +Property -number \| string \| undefined + - +Modifiers -_(Optional)_ + -
+Type -[preserveAspectRatio?](#) + - +Description - +
-string \| undefined +[value](#) -_(Optional)_ +`readonly` -
+ -[primitiveUnits?](#) +T - +
-number \| string \| undefined +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) -		 +## render -_(Optional)_ +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. -[r?](#) +```typescript +render: ( + parent: Element | Document, + jsxNode: JSXOutput | FunctionComponent, + opts?: RenderOptions, +) => Promise; +``` - + - + -
- +Parameter -number \| string \| undefined + - +Type -_(Optional)_ + -
+Description -[radius?](#) +
- +parent -number \| string \| undefined +Element \| Document -_(Optional)_ +Element which will act as a parent to `jsxNode`. When possible the rendering will try to reuse existing nodes.
-[refX?](#) - - +jsxNode -number \| string \| undefined +[JSXOutput](#jsxoutput) \| [FunctionComponent](#functioncomponent)<any> -_(Optional)_ +JSX to render
-[refY?](#) - - +opts -number \| string \| undefined +[RenderOptions](#renderoptions) _(Optional)_
- -[repeatCount?](#) - - - - - -number \| string \| undefined +
+**Returns:** -		 +Promise<[RenderResult](#renderresult)> -_(Optional)_ +An object containing a cleanup function. -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/client/dom-render.ts) -[repeatDur?](#) +## RenderOnce - +```typescript +RenderOnce: FunctionComponent<{ + children?: unknown; + key?: string | number | null | undefined; +}>; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts) -number \| string \| undefined +## RenderOptions - +```typescript +export interface RenderOptions +``` -_(Optional)_ + - - + -
-
+Property -[requiredextensions?](#) + - +Modifiers - + -number \| string \| undefined +Type - + -_(Optional)_ +Description -
+
-[requiredFeatures?](#) +[serverData?](#) -number \| string \| undefined +Record<string, any> _(Optional)_
- -[restart?](#) - - +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/client/types.ts) -number \| string \| undefined +## RenderResult - +```typescript +export interface RenderResult +``` -_(Optional)_ + - + -
-
+Method -[result?](#) + - +Description - +
-string \| undefined +[cleanup()](#renderresult-cleanup) -_(Optional)_ -
- -[role?](#) - - +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/client/types.ts) -string \| undefined +## RenderSSROptions - +```typescript +export interface RenderSSROptions +``` -_(Optional)_ + - - + -
-
+Property -[rotate?](#) + - +Modifiers - + -number \| string \| undefined +Type - + -_(Optional)_ +Description -
+
-[rx?](#) +[base?](#) -number \| string \| undefined +string @@ -8863,58 +2985,52 @@ _(Optional)_
-[ry?](#) +[containerAttributes](#) -number \| string \| undefined +Record<string, string> -_(Optional)_ -
-[scale?](#) +[containerTagName](#) -number \| string \| undefined +string -_(Optional)_ -
-[seed?](#) +[manifestHash](#) -number \| string \| undefined +string -_(Optional)_ -
-[slope?](#) +[serverData?](#) -number \| string \| undefined +Record<string, any> @@ -8923,313 +3039,326 @@ _(Optional)_
-[spacing?](#) +[stream](#) -number \| string \| undefined +StreamWriter -_(Optional)_ -
- -[specularConstant?](#) - - +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) -number \| string \| undefined +## Resource - +This method works like an async memoized function that runs whenever some tracked value changes and returns some data. -_(Optional)_ +`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: -[specularExponent?](#) +- `pending` - the data is not yet available. - `resolved` - the data is available. - `rejected` - the data is not available due to an error or timeout. - +Be careful when using a `try/catch` statement in `useResource$`. If you catch the error and don't re-throw it (or a new Error), the resource status will never be `rejected`. - +### Example -number \| string \| undefined +Example showing how `useResource` to perform a fetch to request the weather, whenever the input city name changes. - +```tsx +const Cmp = component$(() => { + const cityS = useSignal(""); -_(Optional)_ + 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 ( +
+ + { + return
Temperature: {weather.temp}
; + }} + /> +
+ ); +}); +``` -[speed?](#) +```typescript +Resource: (props: ResourceProps) => JSXOutput; +``` -		 + - + -
- +Parameter -number \| string \| undefined + - +Type -_(Optional)_ + -
+Description -[spreadMethod?](#) +
- +props -string \| undefined +[ResourceProps](#resourceprops)<T> -_(Optional)_ -
- -[startOffset?](#) +
+**Returns:** -		 +[JSXOutput](#jsxoutput) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) -number \| string \| undefined +## ResourceCtx - +```typescript +export interface ResourceCtx +``` -_(Optional)_ + - - + -
-
+Property -[stdDeviation?](#) + - +Modifiers - + -number \| string \| undefined +Type - + -_(Optional)_ +Description -
+
-[stemh?](#) +[previous](#) +`readonly` + -number \| string \| undefined +T \| undefined -_(Optional)_ -
-[stemv?](#) +[track](#) +`readonly` + -number \| string \| undefined +[Tracker](#tracker) -_(Optional)_ -
+
-[stitchTiles?](#) + + +
- +Method - + -number \| string \| undefined +Description - +
-_(Optional)_ +[cache(policyOrMilliseconds)](#resourcectx-cache) + +
-[string?](#) - - +[cleanup(callback)](#) -number \| string \| undefined +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) -_(Optional)_ +## ResourceFn -
+```typescript +export type ResourceFn = (ctx: ResourceCtx) => ValueOrPromise; +``` -[stroke?](#) +**References:** [ResourceCtx](#resourcectx), [ValueOrPromise](#valueorpromise) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) - +## ResourceOptions -string \| undefined +Options to pass to `useResource$()` - +```typescript +export interface ResourceOptions +``` -_(Optional)_ + - - + -
-
+Property -[style?](#) + - +Modifiers - + -[CSSProperties](#cssproperties) \| string \| undefined +Type - + -_(Optional)_ +Description -
+
-[surfaceScale?](#) +[timeout?](#) -number \| string \| undefined +number -_(Optional)_ +_(Optional)_ Timeout in milliseconds. If the resource takes more than the specified millisecond, it will timeout. Resulting on a rejected resource.
- -[systemLanguage?](#) - - +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) -number \| string \| undefined +## ResourcePending - +```typescript +export interface ResourcePending +``` -_(Optional)_ + - - + - +
-
+Property -[tabindex?](#) + - +Modifiers - + -number \| undefined +Type - + -_(Optional)_ +Description -
+
-[tableValues?](#) +[loading](#) +`readonly` + -number \| string \| undefined +boolean -_(Optional)_ -
-[target?](#) - - +[value](#) -string \| undefined +`readonly` -_(Optional)_ - -
- -[targetX?](#) +Promise<T> - +
-number \| string \| undefined +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) -		 +## ResourceProps -_(Optional)_ +```typescript +export interface ResourceProps +``` -
+ - + -
-[targetY?](#) +Property - + - +Modifiers -number \| string \| undefined + - +Type -_(Optional)_ + -
+Description + +
-[textLength?](#) +[onPending?](#) -number \| string \| undefined +() => [JSXOutput](#jsxoutput) @@ -9238,13 +3367,13 @@ _(Optional)_
-[to?](#) +[onRejected?](#) -number \| string \| undefined +(reason: Error) => [JSXOutput](#jsxoutput) @@ -9253,361 +3382,360 @@ _(Optional)_
-[transform?](#) +[onResolved](#) -string \| undefined +(value: T) => [JSXOutput](#jsxoutput) -_(Optional)_ -
-[type?](#) +[value](#) +`readonly` + -string \| undefined +[ResourceReturn](#resourcereturn)<T> \| [Signal](#signal)<Promise<T> \| T> \| Promise<T> -_(Optional)_ -
- -[u1?](#) - - +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) -number \| string \| undefined +## ResourceRejected - +```typescript +export interface ResourceRejected +``` -_(Optional)_ + - - + -
-
+Property -[u2?](#) + - +Modifiers - + -number \| string \| undefined +Type - + -_(Optional)_ +Description -
+
-[unicode?](#) +[loading](#) +`readonly` + -number \| string \| undefined +boolean -_(Optional)_ -
-[values?](#) +[value](#) +`readonly` + -string \| undefined +Promise<T> -_(Optional)_ -
- -[version?](#) - - +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) -string \| undefined +## ResourceResolved - +```typescript +export interface ResourceResolved +``` -_(Optional)_ + - - + -
-
+Property -[viewBox?](#) + - +Modifiers - + -string \| undefined +Type - + -_(Optional)_ +Description -
+
-[viewTarget?](#) +[loading](#) +`readonly` + -number \| string \| undefined +boolean -_(Optional)_ -
-[visibility?](#) +[value](#) +`readonly` + -number \| string \| undefined +Promise<T> -_(Optional)_ -
+
-[width?](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) -		 +## ResourceReturn - +```typescript +export type ResourceReturn = + | ResourcePending + | ResourceResolved + | ResourceRejected; +``` -[Size](#size) \| undefined +**References:** [ResourcePending](#resourcepending), [ResourceResolved](#resourceresolved), [ResourceRejected](#resourcerejected) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) -_(Optional)_ +## setPlatform -
+Sets the `CorePlatform`. -[widths?](#) +This is useful to override the platform in tests to change the behavior of, `requestAnimationFrame`, and import resolution. - +```typescript +setPlatform: (plt: CorePlatform) => CorePlatform; +``` - + - + -
-number \| string \| undefined +Parameter - + -_(Optional)_ +Type -
+ -[x?](#) +Description - +
+ +plt -number \| string \| undefined +[CorePlatform](#coreplatform) -_(Optional)_ -
+
+**Returns:** -[x1?](#) +[CorePlatform](#coreplatform) -		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/platform/platform.ts) - +## Signal -number \| string \| undefined +A signal is a reactive value which can be read and written. When the signal is written, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered. - +Furthermore, when a signal value is passed as a prop to a component, the optimizer will automatically forward the signal. This means that `return
hi
` will update the `title` attribute when the signal changes without having to re-render the component. -_(Optional)_ +```typescript +export interface Signal extends ReadonlySignal +``` -
+**Extends:** [ReadonlySignal](#readonlysignal)<T> -[x2?](#) + - + -
- +Property - + -number \| string \| undefined +Modifiers - + -_(Optional)_ +Type -
+ + +Description + +
-[xmlns?](#) +[value](#) -string \| undefined +T -_(Optional)_ -
- -[y?](#) - - +
-		 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/signal.public.ts) -number \| string \| undefined +## SkipRender - +```typescript +SkipRender: JSXNode; +``` -_(Optional)_ +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) -
+## Slot -[y1?](#) +Allows to project the children of the current component. can only be used within the context of a component defined with `component$`. - +```typescript +Slot: FunctionComponent<{ + name?: string; + children?: JSXChildren; +}>; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/slot.public.ts) -number \| string \| undefined +## SnapshotListener - +```typescript +export interface SnapshotListener +``` -_(Optional)_ + - - +
-
+Property -[y2?](#) + - +Modifiers - + -number \| string \| undefined +Type - + -_(Optional)_ +Description -
+
-[yChannelSelector?](#) +[el](#) -string \| undefined +Element -_(Optional)_ -
-[z?](#) +[key](#) -number \| string \| undefined +string -_(Optional)_ -
-[zoomAndPan?](#) +[qrl](#) -string \| undefined +[QRL](#qrl)<any> -_(Optional)_ -
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) -## SVGProps +## SnapshotMeta ```typescript -export interface SVGProps extends SVGAttributes, QwikAttributes +export type SnapshotMeta = Record; ``` -**Extends:** [SVGAttributes](#svgattributes), [QwikAttributes](#qwikattributes)<T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) - -## sync$ +**References:** [SnapshotMetaValue](#snapshotmetavalue) -Extract function into a synchronously loadable QRL. +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) -NOTE: Synchronous QRLs functions can't close over any variables, including exports. +## SnapshotMetaValue ```typescript -sync$: (fn: T) => SyncQRL; +export interface SnapshotMetaValue ``` -
-Parameter +Property + + + +Modifiers @@ -9620,106 +3748,72 @@ Description
-fn +[c?](#) -T - -Function to extract. - -
-**Returns:** - -[SyncQRL](#syncqrl)<T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts) - -## SyncQRL - -```typescript -export interface SyncQRL extends QRL -``` - -**Extends:** [QRL](#qrl)<TYPE> - - - +
- -Property - - - -Modifiers - - - -Type +string - + -Description +_(Optional)_ -
+
-[\_\_brand\_\_SyncQRL\_\_](#) +[h?](#) -TYPE +string +_(Optional)_ +
-[dev](#) +[s?](#) -QRLDev \| null +string +_(Optional)_ +
-[resolved](#) +[w?](#) -TYPE +string +_(Optional)_ +
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts) - -## TableHTMLAttributes - -```typescript -export interface TableHTMLAttributes extends Attrs<'table', T> -``` - -**Extends:** Attrs<'table', T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) -## TaskCtx +## SnapshotResult ```typescript -export interface TaskCtx +export interface SnapshotResult ``` -
@@ -9741,240 +3835,254 @@ Description
-[track](#) +[funcs](#) -[Tracker](#tracker) +string[]
+
- - + -
+[mode](#) -Method + - + -Description +'render' \| 'listeners' \| 'static' -
+ -[cleanup(callback)](#) +
+ +[objs?](#) + + + + + +any[] +_(Optional)_ +
+
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) +[qrls](#) -## TaskFn + -```typescript -export type TaskFn = (ctx: TaskCtx) => ValueOrPromise void)>; -``` + -**References:** [TaskCtx](#taskctx), [ValueOrPromise](#valueorpromise) +[QRL](#qrl)[] -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) + -## TdHTMLAttributes +
-```typescript -export interface TdHTMLAttributes extends Attrs<'td', T> -``` +[resources](#) -**Extends:** Attrs<'td', T> + -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) + -## TextareaHTMLAttributes +ResourceReturnInternal<any>[] -```typescript -export interface TextareaHTMLAttributes extends Attrs<'textarea', T> -``` + -**Extends:** Attrs<'textarea', T> +
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +[state?](#) -## ThHTMLAttributes + -```typescript -export interface ThHTMLAttributes extends Attrs<'tr', T> -``` + -**Extends:** Attrs<'tr', T> +[SnapshotState](#snapshotstate) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) + -## TimeHTMLAttributes +_(Optional)_ -```typescript -export interface TimeHTMLAttributes extends Attrs<'time', T> -``` +
-**Extends:** Attrs<'time', T> +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +## SnapshotState -## TitleHTMLAttributes +> Warning: This API is now obsolete. +> +> not longer used in v2 ```typescript -export interface TitleHTMLAttributes extends Attrs<'title', T> +export interface SnapshotState ``` -**Extends:** Attrs<'title', T> + + + + + + +
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +Property -## Tracker + -Used to signal to Qwik which state should be watched for changes. +Modifiers -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. + -### Example +Type -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. + -```tsx -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 ( -
- - {store.count} / {store.doubleCount} - - -
- ); -}); -``` +Description -```typescript -export interface Tracker -``` +
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) +[ctx](#) + + -## TrackHTMLAttributes + -```typescript -export interface TrackHTMLAttributes extends Attrs<'track', T> -``` +[SnapshotMeta](#snapshotmeta) + + + +
+ +[objs](#) -**Extends:** Attrs<'track', T> + -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) + -## untrack +any[] -Don't track listeners for this callback + -```typescript -untrack: (fn: () => T) => T; -``` +
- + -
+[refs](#) -Parameter + - + -Type +Record<string, string> - + -Description +
-
+[subs](#) -fn + -() => T +any[]
-**Returns:** -T +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/ssr/ssr-types.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-core.ts) +## SSRComment -## unwrapStore +```typescript +SSRComment: FunctionComponent<{ + data: string; +}>; +``` -Get the original object that was wrapped by the store. Useful if you want to clone a store (structuredClone, IndexedDB,...) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) + +## SSRHintProps ```typescript -unwrapStore: (value: T) => T; +export type SSRHintProps = { + dynamic?: boolean; +}; ``` - - -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) -Parameter +## SSRRaw - +```typescript +SSRRaw: FunctionComponent<{ + data: string; +}>; +``` -Type +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - +## SSRStream -Description +```typescript +SSRStream: FunctionComponent; +``` -
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) -value +## SSRStreamBlock - +```typescript +SSRStreamBlock: FunctionComponent<{ + children?: JSXOutput; +}>; +``` -T +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) - +## SSRStreamChildren -
-**Returns:** +```typescript +export type SSRStreamChildren = + | AsyncGenerator + | ((stream: StreamWriter) => Promise) + | (() => AsyncGenerator); +``` -T +**References:** [JSXChildren](#jsxchildren) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/store.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) -## useComputed$ +## SSRStreamProps -Creates a computed signal which is calculated from the given function. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered. +```typescript +export type SSRStreamProps = { + children: SSRStreamChildren; +}; +``` -The function must be synchronous and must not have any side effects. +**References:** [SSRStreamChildren](#ssrstreamchildren) + +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/utils.public.ts) + +## sync$ + +Extract function into a synchronously loadable QRL. + +NOTE: Synchronous QRLs functions can't close over any variables, including exports. ```typescript -useComputed$: (qrl: import("./use-computed").ComputedFn) => T extends Promise ? never : import("..").ReadonlySignal +sync$: (fn: T) => SyncQRL; ```
@@ -9992,35 +4100,39 @@ Description
-qrl +fn -import("./use-computed").[ComputedFn](#computedfn)<T> +T +Function to extract. +
**Returns:** -T extends Promise<any> ? never : import("..").[ReadonlySignal](#readonlysignal)<T> - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed-dollar.ts) - -## useConstant +[SyncQRL](#syncqrl)<T> -Stores a value which is retained for the lifetime of the component. Subsequent calls to `useConstant` will always return the first value given. +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts) -If the value is a function, the function is invoked once to calculate the actual value. +## SyncQRL ```typescript -useConstant: (value: (() => T) | T) => T; +export interface SyncQRL extends QRL ``` +**Extends:** [QRL](#qrl)<TYPE> + -
-Parameter +Property + + + +Modifiers @@ -10033,121 +4145,60 @@ Description
-value +[\_\_brand\_\_SyncQRL\_\_](#) -(() => T) \| T - -
-**Returns:** - -T - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-signal.ts) - -## useContext - -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. +TYPE -### 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("Todos"); +
-// Example of providing context to child components. -export const App = component$(() => { - useContextProvider( - TodosContext, - useStore({ - items: ["Learn Qwik", "Build Qwik app", "Profit"], - }), - ); +[dev](#) - return ; -}); + -// Example of retrieving the context provided by a parent component. -export const Items = component$(() => { - const todos = useContext(TodosContext); - return ( -
    - {todos.items.map((item) => ( -
  • {item}
    • - ))} -
- ); -}); -``` +		 -```typescript -useContext: UseContext; -``` +QRLDev \| null -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-context.ts) + -## useContextProvider +
-Assign a value to a Context. +[resolved](#) -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. + -### Example +TYPE -```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("Todos"); + -// Example of providing context to child components. -export const App = component$(() => { - useContextProvider( - TodosContext, - useStore({ - items: ["Learn Qwik", "Build Qwik app", "Profit"], - }), - ); +
- return ; -}); +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts) -// Example of retrieving the context provided by a parent component. -export const Items = component$(() => { - const todos = useContext(TodosContext); - return ( -
    - {todos.items.map((item) => ( -
  • {item}
    • - ))} -
- ); -}); -``` +## TaskCtx ```typescript -useContextProvider: (context: ContextId, newValue: STATE) => void +export interface TaskCtx ``` - -
+ -
+ +Property + + -Parameter +Modifiers @@ -10160,67 +4211,100 @@ Description
-context +[track](#) -[ContextId](#contextid)<STATE> - -The context to assign a value to. +[Tracker](#tracker) + +
+
-newValue + +
- +Method -STATE + + +Description + +
+ +[cleanup(callback)](#)
-**Returns:** -void - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-context.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) -## useErrorBoundary +## TaskFn ```typescript -useErrorBoundary: () => Readonly; +export type TaskFn = (ctx: TaskCtx) => ValueOrPromise void)>; ``` -**Returns:** +**References:** [TaskCtx](#taskctx), [ValueOrPromise](#valueorpromise) -Readonly<[ErrorBoundaryStore](#errorboundarystore)> +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-error-boundary.ts) +## Tracker -## useId +Used to signal to Qwik which state should be watched for changes. -```typescript -useId: () => string; -``` +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. -**Returns:** +### Example -string +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. -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-id.ts) +```tsx +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 ( +
+ + {store.count} / {store.doubleCount} + + +
+ ); +}); +``` -## useOn +```typescript +export interface Tracker +``` -Register a listener on the current component's host element. +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) -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 `
` is a better idea. +## untrack + +Don't track listeners for this callback ```typescript -useOn: (event: T | T[], eventQrl: EventQRL) => void +untrack: (fn: () => T) => T; ``` -
@@ -10238,22 +4322,50 @@ Description
-event +fn -T \| T[] +() => T
+
+**Returns:** -eventQrl +T + +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-core.ts) + +## unwrapStore + +Get the original object that was wrapped by the store. Useful if you want to clone a store (structuredClone, IndexedDB,...) + +```typescript +unwrapStore: (value: T) => T; +``` + + +
+ +Parameter + + + +Type + + + +Description + +
+ +value -EventQRL<T> +T @@ -10261,18 +4373,18 @@ EventQRL<T>
**Returns:** -void +T -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/signal/store.ts) -## useOnDocument +## useComputed$ -Register a listener on `document`. +Creates a computed signal which is calculated from the given function. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered. -Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX. +The function must be synchronous and must not have any side effects. ```typescript -useOnDocument: (event: T | T[], eventQrl: EventQRL) => void +useComputed$: (qrl: import("./use-computed").ComputedFn) => T extends Promise ? never : import("..").ReadonlySignal ``` -
@@ -10290,22 +4402,11 @@ Description
-event - - - -T \| T[] - - - -
- -eventQrl +qrl -EventQRL<T> +import("./use-computed").[ComputedFn](#computedfn)<T> @@ -10313,18 +4414,18 @@ EventQRL<T>
**Returns:** -void +T extends Promise<any> ? never : import("..").[ReadonlySignal](#readonlysignal)<T> -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed-dollar.ts) -## useOnWindow +## useConstant -Register a listener on `window`. +Stores a value which is retained for the lifetime of the component. Subsequent calls to `useConstant` will always return the first value given. -Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX. +If the value is a function, the function is invoked once to calculate the actual value. ```typescript -useOnWindow: (event: T | T[], eventQrl: EventQRL) => void +useConstant: (value: (() => T) | T) => T; ``` -
@@ -10342,81 +4443,116 @@ Description
-event +value -T \| T[] +(() => T) \| T
+
+**Returns:** -eventQrl +T -
 +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-signal.ts) -EventQRL<T> +## useContext - +Retrieve Context value. -
-**Returns:** +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. -void +### Example -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts) +```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("Todos"); -## useResource$ +// Example of providing context to child components. +export const App = component$(() => { + useContextProvider( + TodosContext, + useStore({ + items: ["Learn Qwik", "Build Qwik app", "Profit"], + }), + ); -This method works like an async memoized function that runs whenever some tracked value changes and returns some data. + return ; +}); -`useResource` however returns immediate a `ResourceReturn` object that contains the data and a state that indicates if the data is available or not. +// Example of retrieving the context provided by a parent component. +export const Items = component$(() => { + const todos = useContext(TodosContext); + return ( +
    + {todos.items.map((item) => ( +
  • {item}
    • + ))} +
+ ); +}); +``` -The status can be one of the following: +```typescript +useContext: UseContext; +``` -- `pending` - the data is not yet available. - `resolved` - the data is available. - `rejected` - the data is not available due to an error or timeout. +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-context.ts) -Be careful when using a `try/catch` statement in `useResource$`. If you catch the error and don't re-throw it (or a new Error), the resource status will never be `rejected`. +## useContextProvider -### Example +Assign a value to a Context. -Example showing how `useResource` to perform a fetch to request the weather, whenever the input city name changes. +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. + +### Example ```tsx -const Cmp = component$(() => { - const cityS = useSignal(""); +// 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("Todos"); + +// Example of providing context to child components. +export const App = component$(() => { + useContextProvider( + TodosContext, + useStore({ + items: ["Learn Qwik", "Build Qwik app", "Profit"], + }), + ); - 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 ; +}); +// Example of retrieving the context provided by a parent component. +export const Items = component$(() => { + const todos = useContext(TodosContext); return ( -
- - { - return
Temperature: {weather.temp}
; - }} - /> -
+
    + {todos.items.map((item) => ( +
  • {item}
    • + ))} +
); }); ``` ```typescript -useResource$: (generatorFn: ResourceFn, opts?: ResourceOptions) => - ResourceReturn; +useContextProvider: (context: ContextId, newValue: STATE) => void ```
@@ -10434,39 +4570,67 @@ Description
-generatorFn +context -[ResourceFn](#resourcefn)<T> +[ContextId](#contextid)<STATE> +The context to assign a value to. +
-opts +newValue -[ResourceOptions](#resourceoptions) +STATE -_(Optional)_ -
**Returns:** -[ResourceReturn](#resourcereturn)<T> +void -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource-dollar.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-context.ts) -## useServerData +## useErrorBoundary ```typescript -export declare function useServerData(key: string): T | undefined; +useErrorBoundary: () => Readonly; +``` + +**Returns:** + +Readonly<[ErrorBoundaryStore](#errorboundarystore)> + +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-error-boundary.ts) + +## useId + +```typescript +useId: () => string; +``` + +**Returns:** + +string + +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-id.ts) + +## useOn + +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 `
` is a better idea. + +```typescript +useOn: (event: T | T[], eventQrl: EventQRL) => void ``` -
@@ -10484,100 +4648,41 @@ Description
-key +event -string +T \| T[]
-**Returns:** - -T \| undefined - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-env-data.ts) - -## useSignal - -```typescript -useSignal: UseSignal; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-signal.ts) - -## UseSignal - -```typescript -useSignal: UseSignal; -``` - -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-signal.ts) + -## useStore +eventQrl -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. +EventQRL<T> -### Example + -Example showing how `useStore` is used in Counter example to keep track of the count. + + +**Returns:** -```tsx -const Stores = component$(() => { - const counter = useCounter(1); +void - // Reactivity happens even for nested objects and arrays - const userData = useStore({ - name: "Manu", - address: { - address: "", - city: "", - }, - orgs: [], - }); +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts) - // useStore() can also accept a function to calculate the initial value - const state = useStore(() => { - return { - value: expensiveInitialValue(), - }; - }); +## useOnDocument - return ( -
-
Counter: {counter.value}
- -
- ); -}); +Register a listener on `document`. -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; -} -``` +Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX. ```typescript -useStore: ( - initialState: STATE | (() => STATE), - opts?: UseStoreOptions, -) => STATE; +useOnDocument: (event: T | T[], eventQrl: EventQRL) => void ```
@@ -10595,48 +4700,46 @@ Description
-initialState +event -STATE \| (() => STATE) +T \| T[]
-opts +eventQrl -[UseStoreOptions](#usestoreoptions) +EventQRL<T> -_(Optional)_ -
**Returns:** -STATE +void -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-store.public.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts) -## UseStoreOptions +## useOnWindow + +Register a listener on `window`. + +Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX. ```typescript -export interface UseStoreOptions +useOnWindow: (event: T | T[], eventQrl: EventQRL) => void ```
-Property - - - -Modifiers +Parameter @@ -10649,56 +4752,81 @@ Description
-[deep?](#) - - +event -boolean +T \| T[] -_(Optional)_ If `true` then all nested objects and arrays will be tracked as well. Default is `true`. -
-[reactive?](#) - - +eventQrl -boolean +EventQRL<T> -_(Optional)_ If `false` then the object will not be tracked for changes. Default is `true`. -
+**Returns:** -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-store.public.ts) +void -## useStyles$ +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts) -A lazy-loadable reference to a component's styles. +## useResource$ -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.) +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. + +Be careful when using a `try/catch` statement in `useResource$`. If you catch the error and don't re-throw it (or a new Error), the resource status will never be `rejected`. + +### Example + +Example showing how `useResource` to perform a fetch to request the weather, whenever the input city name changes. ```tsx -import styles from "./code-block.css?inline"; +const Cmp = component$(() => { + const cityS = useSignal(""); -export const CmpStyles = component$(() => { - useStyles$(styles); + 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
Some text
; + return ( +
+ + { + return
Temperature: {weather.temp}
; + }} + /> +
+ ); }); ``` ```typescript -useStyles$: (qrl: string) => UseStyles; +useResource$: (generatorFn: ResourceFn, opts?: ResourceOptions) => + ResourceReturn; ``` +
@@ -10716,35 +4844,44 @@ Description
-qrl +generatorFn -string +[ResourceFn](#resourcefn)<T> + + + +
+ +opts +[ResourceOptions](#resourceoptions) + + + +_(Optional)_ +
**Returns:** -UseStyles +[ResourceReturn](#resourcereturn)<T> -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource-dollar.ts) -## UseStylesScoped +## useServerData ```typescript -export interface UseStylesScoped +export declare function useServerData(key: string): T | undefined; ```
-Property - - - -Modifiers +Parameter @@ -10757,9 +4894,7 @@ Description
-[scopeId](#) - - +key @@ -10769,70 +4904,90 @@ string
+**Returns:** -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts) - -## useStylesScoped$ - -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.) - -```tsx -import scoped from "./code-block.css?inline"; +T \| undefined -export const CmpScopedStyles = component$(() => { - useStylesScoped$(scoped); +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-env-data.ts) - return
Some text
; -}); -``` +## useSignal ```typescript -useStylesScoped$: (qrl: string) => UseStylesScoped; +useSignal: UseSignal; ``` - - -
- -Parameter - - - -Type - - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-signal.ts) -Description +## UseSignal -
+```typescript +useSignal: UseSignal; +``` -qrl +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-signal.ts) - +## useStore -string +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. -
-**Returns:** +### Example -[UseStylesScoped](#usestylesscoped) +Example showing how `useStore` is used in Counter example to keep track of the count. -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts) +```tsx +const Stores = component$(() => { + const counter = useCounter(1); -## useTask$ + // Reactivity happens even for nested objects and arrays + const userData = useStore({ + name: "Manu", + address: { + address: "", + city: "", + }, + orgs: [], + }); -Reruns the `taskFn` when the observed inputs change. + // useStore() can also accept a function to calculate the initial value + const state = useStore(() => { + return { + value: expensiveInitialValue(), + }; + }); -Use `useTask` to observe changes on a set of inputs, and then re-execute the `taskFn` when those inputs change. + return ( +
+
Counter: {counter.value}
+ +
+ ); +}); -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. +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; +} +``` ```typescript -useTask$: (qrl: import("./use-task").TaskFn, opts?: import("./use-task").UseTaskOptions | undefined) => void +useStore: ( + initialState: STATE | (() => STATE), + opts?: UseStoreOptions, +) => STATE; ```
@@ -10850,11 +5005,11 @@ Description
-qrl +initialState -import("./use-task").[TaskFn](#taskfn) +STATE \| (() => STATE) @@ -10865,7 +5020,7 @@ opts -import("./use-task").[UseTaskOptions](#usetaskoptions) \| undefined +[UseStoreOptions](#usestoreoptions) @@ -10875,14 +5030,14 @@ _(Optional)_
**Returns:** -void +STATE -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task-dollar.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-store.public.ts) -## UseTaskOptions +## UseStoreOptions ```typescript -export interface UseTaskOptions +export interface UseStoreOptions ``` -
@@ -10904,146 +5059,95 @@ Description
-[eagerness?](#) +[deep?](#) -[EagernessOptions](#eagernessoptions) +boolean -_(Optional)_ - `visible`: run the effect when the element is visible. - `load`: eagerly run the effect when the application resumes. +_(Optional)_ If `true` then all nested objects and arrays will be tracked as well. Default is `true`.
- -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) - -## useVisibleTask$ - -```tsx -const Timer = component$(() => { - const store = useStore({ - count: 0, - }); - - useVisibleTask$(() => { - // Only runs in the client - const timer = setInterval(() => { - store.count++; - }, 500); - return () => { - clearInterval(timer); - }; - }); - - return
{store.count}
; -}); -``` - -```typescript -useVisibleTask$: (qrl: import("./use-task").TaskFn, opts?: import("./use-visible-task").OnVisibleTaskOptions | undefined) => void -``` - - - -
- -Parameter - - - -Type - - - -Description - -
- -qrl - - +
-import("./use-task").[TaskFn](#taskfn) +[reactive?](#) -
- -opts - -import("./use-visible-task").[OnVisibleTaskOptions](#onvisibletaskoptions) \| undefined +boolean -_(Optional)_ +_(Optional)_ If `false` then the object will not be tracked for changes. Default is `true`.
-**Returns:** -void +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-store.public.ts) -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-visible-task-dollar.ts) +## useStyles$ -## ValueOrPromise +A lazy-loadable reference to a component's styles. -Type representing a value which is either resolve or a promise. +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.) + +```tsx +import styles from "./code-block.css?inline"; + +export const CmpStyles = component$(() => { + useStyles$(styles); + + return
Some text
; +}); +``` ```typescript -export type ValueOrPromise = T | Promise; +useStyles$: (qrl: string) => UseStyles; ``` -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/utils/types.ts) + + +
+ +Parameter -## version + -QWIK_VERSION +Type -```typescript -version: string; -``` + -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/version.ts) +Description -## VideoHTMLAttributes +
-```typescript -export interface VideoHTMLAttributes extends Attrs<'video', T> -``` +qrl -**Extends:** Attrs<'video', T> + -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +string -## VisibleTaskStrategy + -```typescript -export type VisibleTaskStrategy = - | "intersection-observer" - | "document-ready" - | "document-idle"; -``` +
+**Returns:** -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-visible-task.ts) +UseStyles -## WebViewHTMLAttributes +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts) -> 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. +## UseStylesScoped ```typescript -export interface WebViewHTMLAttributes extends HTMLAttributes +export interface UseStylesScoped ``` -**Extends:** [HTMLAttributes](#htmlattributes)<T> - -
Property @@ -11063,262 +5167,270 @@ Description
-[allowFullScreen?](#) +[scopeId](#) -boolean \| undefined +string -_(Optional)_ -
+
-[allowpopups?](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts) - +## useStylesScoped$ - +A lazy-loadable reference to a component's styles, that is scoped to the component. -boolean \| undefined +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.) - +```tsx +import scoped from "./code-block.css?inline"; -_(Optional)_ +export const CmpScopedStyles = component$(() => { + useStylesScoped$(scoped); - - + return
Some text
; +}); +``` -[autoFocus?](#) +```typescript +useStylesScoped$: (qrl: string) => UseStylesScoped; +``` - + - + -
- +Parameter -boolean \| undefined + - +Type -_(Optional)_ + -
+Description -[autosize?](#) +
- +qrl -boolean \| undefined +string -_(Optional)_ -
- -[blinkfeatures?](#) +
+**Returns:** - +[UseStylesScoped](#usestylesscoped) - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts) -string \| undefined +## useTask$ - +Reruns the `taskFn` when the observed inputs change. -_(Optional)_ +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. -[disableblinkfeatures?](#) +```typescript +useTask$: (qrl: import("./use-task").TaskFn, opts?: import("./use-task").UseTaskOptions | undefined) => void +``` - + - + -
- +Parameter -string \| undefined + - +Type -_(Optional)_ + -
+Description -[disableguestresize?](#) +
- +qrl -boolean \| undefined +import("./use-task").[TaskFn](#taskfn) -_(Optional)_ -
-[disablewebsecurity?](#) - - +opts -boolean \| undefined +import("./use-task").[UseTaskOptions](#usetaskoptions) \| undefined _(Optional)_
- -[guestinstance?](#) +
+**Returns:** - +void - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task-dollar.ts) -string \| undefined +## UseTaskOptions - +```typescript +export interface UseTaskOptions +``` -_(Optional)_ + - - + -
-
+Property -[httpreferrer?](#) + - +Modifiers - + -string \| undefined +Type - + -_(Optional)_ +Description -
+
-[nodeintegration?](#) +[eagerness?](#) -boolean \| undefined +[EagernessOptions](#eagernessoptions) -_(Optional)_ +_(Optional)_ - `visible`: run the effect when the element is visible. - `load`: eagerly run the effect when the application resumes.
- -[partition?](#) - - +
- +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts) -string \| undefined +## useVisibleTask$ - +```tsx +const Timer = component$(() => { + const store = useStore({ + count: 0, + }); -_(Optional)_ + useVisibleTask$(() => { + // Only runs in the client + const timer = setInterval(() => { + store.count++; + }, 500); + return () => { + clearInterval(timer); + }; + }); - - + return
{store.count}
; +}); +``` -[plugins?](#) +```typescript +useVisibleTask$: (qrl: import("./use-task").TaskFn, opts?: import("./use-visible-task").OnVisibleTaskOptions | undefined) => void +``` - + - + -
- +Parameter -boolean \| undefined + - +Type -_(Optional)_ + -
+Description -[preload?](#) +
- +qrl -string \| undefined +import("./use-task").[TaskFn](#taskfn) -_(Optional)_ -
-[src?](#) - - +opts -string \| undefined +import("./use-visible-task").[OnVisibleTaskOptions](#onvisibletaskoptions) \| undefined _(Optional)_
- -[useragent?](#) - - +
+**Returns:** - +void -string \| undefined +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-visible-task-dollar.ts) - +## ValueOrPromise -_(Optional)_ +Type representing a value which is either resolve or a promise. - - +```typescript +export type ValueOrPromise = T | Promise; +``` -[webpreferences?](#) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/utils/types.ts) - +## version - +QWIK_VERSION -string \| undefined +```typescript +version: string; +``` - +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/version.ts) -_(Optional)_ +## VisibleTaskStrategy - - +```typescript +export type VisibleTaskStrategy = + | "intersection-observer" + | "document-ready" + | "document-idle"; +``` -[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts) +[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-visible-task.ts) ## withLocale diff --git a/packages/qwik/src/core/api.md b/packages/qwik/src/core/api.md index 1ce71d6dffb..36ec81e929e 100644 --- a/packages/qwik/src/core/api.md +++ b/packages/qwik/src/core/api.md @@ -10,96 +10,6 @@ import type { StreamWriter as StreamWriter_2 } from '@qwik.dev/core'; // @public export const $: (expression: T) => QRL; -// Warning: (ae-forgotten-export) The symbol "Attrs" needs to be exported by the entry point index.d.ts -// -// @public (undocumented) -export interface AnchorHTMLAttributes extends Attrs<'a', T> { -} - -// @public (undocumented) -export interface AreaHTMLAttributes extends Attrs<'area', T> { -} - -// @public -export interface AriaAttributes { - 'aria-activedescendant'?: string | undefined; - 'aria-atomic'?: Booleanish | undefined; - 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined; - 'aria-busy'?: Booleanish | undefined; - 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined; - 'aria-colcount'?: number | undefined; - 'aria-colindex'?: number | undefined; - 'aria-colspan'?: number | undefined; - 'aria-controls'?: string | undefined; - 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined; - 'aria-describedby'?: string | undefined; - 'aria-details'?: string | undefined; - 'aria-disabled'?: Booleanish | undefined; - // @deprecated - 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined; - 'aria-errormessage'?: string | undefined; - 'aria-expanded'?: Booleanish | undefined; - 'aria-flowto'?: string | undefined; - // @deprecated - 'aria-grabbed'?: Booleanish | undefined; - 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined; - 'aria-hidden'?: Booleanish | undefined; - 'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined; - 'aria-keyshortcuts'?: string | undefined; - 'aria-label'?: string | undefined; - 'aria-labelledby'?: string | undefined; - 'aria-level'?: number | undefined; - 'aria-live'?: 'off' | 'assertive' | 'polite' | undefined; - 'aria-modal'?: Booleanish | undefined; - 'aria-multiline'?: Booleanish | undefined; - 'aria-multiselectable'?: Booleanish | undefined; - 'aria-orientation'?: 'horizontal' | 'vertical' | undefined; - 'aria-owns'?: string | undefined; - 'aria-placeholder'?: string | undefined; - 'aria-posinset'?: number | undefined; - 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined; - 'aria-readonly'?: Booleanish | undefined; - 'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined; - 'aria-required'?: Booleanish | undefined; - 'aria-roledescription'?: string | undefined; - 'aria-rowcount'?: number | undefined; - 'aria-rowindex'?: number | undefined; - 'aria-rowspan'?: number | undefined; - 'aria-selected'?: Booleanish | undefined; - 'aria-setsize'?: number | undefined; - 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined; - 'aria-valuemax'?: number | undefined; - 'aria-valuemin'?: number | undefined; - 'aria-valuenow'?: number | undefined; - 'aria-valuetext'?: string | undefined; -} - -// @public (undocumented) -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 & {}); - -// @public (undocumented) -export interface AudioHTMLAttributes extends Attrs<'audio', T> { -} - -// @public (undocumented) -export interface BaseHTMLAttributes extends Attrs<'base', T> { -} - -// @public (undocumented) -export interface BlockquoteHTMLAttributes extends Attrs<'blockquote', T> { -} - -// @public (undocumented) -export type Booleanish = boolean | `${boolean}`; - -// @public (undocumented) -export interface ButtonHTMLAttributes extends Attrs<'button', T> { -} - -// @public (undocumented) -export interface CanvasHTMLAttributes extends Attrs<'canvas', T> { -} - // @public export type ClassList = string | undefined | null | false | Record | ClassList[]; @@ -134,14 +44,6 @@ export interface ClientContainer extends Container { rootVNode: _ElementVNode; } -// @public (undocumented) -export interface ColgroupHTMLAttributes extends Attrs<'colgroup', T> { -} - -// @public (undocumented) -export interface ColHTMLAttributes extends Attrs<'col', T> { -} - // @public export const component$: (onMount: OnRenderFn) => Component; @@ -220,26 +122,9 @@ export const createSignal: { (value: T): Signal; }; -// @public (undocumented) -export interface CSSProperties extends CSS_2.Properties, CSS_2.PropertiesHyphen { - [v: `--${string}`]: string | number | undefined; -} - -// @public (undocumented) -export interface DataHTMLAttributes extends Attrs<'data', T> { -} - -// @public (undocumented) -export interface DelHTMLAttributes extends Attrs<'del', T> { -} - // @internal export function _deserialize(rawStateData: string | null, element?: unknown): unknown[]; -// @public (undocumented) -export interface DetailsHTMLAttributes extends Attrs<'details', T> { -} - // @public (undocumented) export interface DevJSX { // (undocumented) @@ -252,10 +137,6 @@ export interface DevJSX { stack?: string; } -// @public (undocumented) -export interface DialogHTMLAttributes extends Attrs<'dialog', T> { -} - // Warning: (ae-forgotten-export) The symbol "DOMAttributesBase" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "QwikEvents" needs to be exported by the entry point index.d.ts // @@ -361,10 +242,6 @@ string | undefined, __brand__: 'ElementVNode'; }; -// @public (undocumented) -export interface EmbedHTMLAttributes extends Attrs<'embed', T> { -} - // @internal (undocumented) export const _EMPTY_ARRAY: any[]; @@ -387,19 +264,11 @@ export type EventHandler = { // @internal (undocumented) export const eventQrl: (qrl: QRL) => QRL; -// @public (undocumented) -export interface FieldsetHTMLAttributes extends Attrs<'fieldset', T> { -} - // Warning: (ae-forgotten-export) The symbol "WrappedSignal" needs to be exported by the entry point index.d.ts // // @internal (undocumented) export const _fnSignal: any>(fn: T, args: Parameters, fnStr?: string) => WrappedSignal; -// @public (undocumented) -export interface FormHTMLAttributes extends Attrs<'form', T> { -} - // @public (undocumented) export const Fragment: FunctionComponent<{ children?: any; @@ -439,51 +308,9 @@ function h, PROPS extends {} = {} export { h as createElement } export { h } -// @public (undocumented) -export interface HrHTMLAttributes extends Attrs<'hr', T> { -} - -// @public (undocumented) -export type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}); - -// @public (undocumented) -export type HTMLAttributeReferrerPolicy = ReferrerPolicy; - -// @public (undocumented) -export interface HTMLAttributes extends HTMLElementAttrs, DOMAttributes { -} - -// @public (undocumented) -export type HTMLCrossOriginAttribute = 'anonymous' | 'use-credentials' | '' | undefined; - -// Warning: (ae-forgotten-export) The symbol "HTMLAttributesBase" needs to be exported by the entry point index.d.ts -// Warning: (ae-forgotten-export) The symbol "FilterBase" needs to be exported by the entry point index.d.ts -// -// @public (undocumented) -export interface HTMLElementAttrs extends HTMLAttributesBase, FilterBase { -} - -// @public (undocumented) -export interface HtmlHTMLAttributes extends Attrs<'html', T> { -} - -// @public (undocumented) -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'; - -// @public (undocumented) -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 & {}); - // @internal export const _hW: () => void; -// @public (undocumented) -export interface IframeHTMLAttributes extends Attrs<'iframe', T> { -} - -// @public (undocumented) -export interface ImgHTMLAttributes extends Attrs<'img', T> { -} - // @internal @deprecated (undocumented) export const _IMMUTABLE: unique symbol; @@ -501,34 +328,6 @@ export const inlinedQrl: (symbol: T, symbolName: string, lexicalScopeCapture? // @internal (undocumented) export const inlinedQrlDEV: (symbol: T, symbolName: string, opts: QRLDev, lexicalScopeCapture?: any[]) => QRL; -// @public (undocumented) -export type InputHTMLAttributes = Attrs<'input', T, HTMLInputElement>; - -// @public (undocumented) -export interface InsHTMLAttributes extends Attrs<'ins', T> { -} - -// @public (undocumented) -export interface IntrinsicElements extends IntrinsicHTMLElements, IntrinsicSVGElements { -} - -// Warning: (ae-forgotten-export) The symbol "Augmented" needs to be exported by the entry point index.d.ts -// Warning: (ae-forgotten-export) The symbol "SpecialAttrs" needs to be exported by the entry point index.d.ts -// -// @public -export type IntrinsicHTMLElements = { - [key in keyof HTMLElementTagNameMap]: Augmented & HTMLAttributes; -} & { - [unknownTag: string]: { - [prop: string]: any; - } & HTMLElementAttrs & HTMLAttributes; -}; - -// @public -export type IntrinsicSVGElements = { - [K in keyof Omit]: LenientSVGProps; -}; - // @internal (undocumented) export const _isJSXNode: (n: unknown) => n is JSXNodeInternal; @@ -629,54 +428,12 @@ export const _jsxSplit: >(type: T, var // @public (undocumented) export type JSXTagName = keyof HTMLElementTagNameMap | Omit; -// @public @deprecated (undocumented) -export interface KeygenHTMLAttributes extends Attrs<'base', T> { -} - // Warning: (ae-forgotten-export) The symbol "LiteralUnion" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "AllEventKeys" needs to be exported by the entry point index.d.ts // // @public export type KnownEventNames = LiteralUnion; -// @public (undocumented) -export interface LabelHTMLAttributes extends Attrs<'label', T> { -} - -// @public (undocumented) -export interface LenientSVGProps extends SVGAttributes, DOMAttributes { -} - -// @public (undocumented) -export interface LiHTMLAttributes extends Attrs<'li', T> { -} - -// @public (undocumented) -export interface LinkHTMLAttributes extends Attrs<'link', T> { -} - -// @public (undocumented) -export interface MapHTMLAttributes extends Attrs<'map', T> { -} - -// @public (undocumented) -export interface MediaHTMLAttributes extends HTMLAttributes, Augmented { -} - -// @public (undocumented) -export interface MenuHTMLAttributes extends Attrs<'menu', T> { -} - -// @public (undocumented) -export interface MetaHTMLAttributes extends Attrs<'meta', T> { -} - -// @public (undocumented) -export interface MeterHTMLAttributes extends Attrs<'meter', T> { -} - // @public @deprecated (undocumented) export type NativeAnimationEvent = AnimationEvent; @@ -727,17 +484,6 @@ export type NoSerialize = (T & { // @public export const noSerialize: (input: T) => NoSerialize; -// @public (undocumented) -export type Numberish = number | `${number}`; - -// @public (undocumented) -export interface ObjectHTMLAttributes extends Attrs<'object', T> { -} - -// @public (undocumented) -export interface OlHTMLAttributes extends Attrs<'ol', T> { -} - // @public (undocumented) export type OnRenderFn = (props: PROPS) => JSXOutput; @@ -746,22 +492,6 @@ export interface OnVisibleTaskOptions { strategy?: VisibleTaskStrategy; } -// @public (undocumented) -export interface OptgroupHTMLAttributes extends Attrs<'optgroup', T> { -} - -// @public (undocumented) -export interface OptionHTMLAttributes extends Attrs<'option', T> { -} - -// @public (undocumented) -export interface OutputHTMLAttributes extends Attrs<'output', T> { -} - -// @public @deprecated (undocumented) -export interface ParamHTMLAttributes extends Attrs<'base', T, HTMLParamElement> { -} - // @beta export const PrefetchGraph: (opts?: { base?: string; @@ -780,10 +510,6 @@ export const PrefetchServiceWorker: (opts: { nonce?: string; }) => JSXOutput; -// @public (undocumented) -export interface ProgressHTMLAttributes extends Attrs<'progress', T> { -} - // @public export type PropFunction = QRL; @@ -835,10 +561,6 @@ export type QRLEventHandlerMulti = QRL(fn: TYPE, serializedFn?: string) => SyncQRL; -// @public (undocumented) -export interface QuoteHTMLAttributes extends Attrs<'q', T> { -} - // @public @deprecated (undocumented) export type QwikAnimationEvent = NativeAnimationEvent; @@ -867,6 +589,10 @@ export type QwikDragEvent = NativeDragEvent; // @public @deprecated (undocumented) export type QwikFocusEvent = NativeFocusEvent; +// Warning: (ae-forgotten-export) The symbol "Augmented" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "SpecialAttrs" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "HTMLElementAttrs" needs to be exported by the entry point index.d.ts +// // @public export type QwikHTMLElements = { [tag in keyof HTMLElementTagNameMap]: Augmented & HTMLElementAttrs & QwikAttributes; @@ -922,6 +648,8 @@ export type QwikPointerEvent = NativePointerEvent; // @public @deprecated (undocumented) export type QwikSubmitEvent = SubmitEvent; +// Warning: (ae-forgotten-export) The symbol "SVGProps" needs to be exported by the entry point index.d.ts +// // @public export type QwikSVGElements = { [K in keyof Omit]: SVGProps; @@ -1066,14 +794,6 @@ export type ResourceReturn = ResourcePending | ResourceResolved | Resou // @internal (undocumented) export const _restProps: (props: Record, omit: string[], target?: {}) => {}; -// @public (undocumented) -export interface ScriptHTMLAttributes extends Attrs<'script', T> { -} - -// @public (undocumented) -export interface SelectHTMLAttributes extends Attrs<'select', T> { -} - // @internal export function _serialize(data: unknown[]): Promise; @@ -1141,9 +861,6 @@ export interface Signal extends ReadonlySignal { value: T; } -// @public (undocumented) -export type Size = number | string; - // @public (undocumented) export const SkipRender: JSXNode; @@ -1153,10 +870,6 @@ export const Slot: FunctionComponent<{ children?: JSXChildren; }>; -// @public (undocumented) -export interface SlotHTMLAttributes extends Attrs<'slot', T> { -} - // @public (undocumented) export interface SnapshotListener { // (undocumented) @@ -1212,10 +925,6 @@ export interface SnapshotState { subs: any[]; } -// @public (undocumented) -export interface SourceHTMLAttributes extends Attrs<'source', T> { -} - // @public (undocumented) export const SSRComment: FunctionComponent<{ data: string; @@ -1260,534 +969,6 @@ export interface StreamWriter { // @internal (undocumented) export type _Stringifiable = string | boolean | number | null; -// @public (undocumented) -export interface StyleHTMLAttributes extends Attrs<'style', T> { -} - -// @public -export interface SVGAttributes extends AriaAttributes { - // (undocumented) - 'accent-height'?: number | string | undefined; - // (undocumented) - 'alignment-baseline'?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | 'mathematical' | 'inherit' | undefined; - // (undocumented) - 'arabic-form'?: 'initial' | 'medial' | 'terminal' | 'isolated' | undefined; - // (undocumented) - 'baseline-shift'?: number | string | undefined; - // (undocumented) - 'cap-height'?: number | string | undefined; - // (undocumented) - 'clip-path'?: string | undefined; - // (undocumented) - 'clip-rule'?: number | string | undefined; - // (undocumented) - 'color-interpolation'?: number | string | undefined; - // (undocumented) - 'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit' | undefined; - // (undocumented) - 'color-profile'?: number | string | undefined; - // (undocumented) - 'color-rendering'?: number | string | undefined; - // (undocumented) - 'dominant-baseline'?: number | string | undefined; - // (undocumented) - 'edge-mode'?: number | string | undefined; - // (undocumented) - 'enable-background'?: number | string | undefined; - // (undocumented) - 'fill-opacity'?: number | string | undefined; - // (undocumented) - 'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' | undefined; - // (undocumented) - 'flood-color'?: number | string | undefined; - // (undocumented) - 'flood-opacity'?: number | string | undefined; - // (undocumented) - 'font-family'?: string | undefined; - // (undocumented) - 'font-size'?: number | string | undefined; - // (undocumented) - 'font-size-adjust'?: number | string | undefined; - // (undocumented) - 'font-stretch'?: number | string | undefined; - // (undocumented) - 'font-style'?: number | string | undefined; - // (undocumented) - 'font-variant'?: number | string | undefined; - // (undocumented) - 'font-weight'?: number | string | undefined; - // (undocumented) - 'glyph-name'?: number | string | undefined; - // (undocumented) - 'glyph-orientation-horizontal'?: number | string | undefined; - // (undocumented) - 'glyph-orientation-vertical'?: number | string | undefined; - // (undocumented) - 'horiz-adv-x'?: number | string | undefined; - // (undocumented) - 'horiz-origin-x'?: number | string | undefined; - // (undocumented) - 'image-rendering'?: number | string | undefined; - // (undocumented) - 'letter-spacing'?: number | string | undefined; - // (undocumented) - 'lighting-color'?: number | string | undefined; - // (undocumented) - 'marker-end'?: string | undefined; - // (undocumented) - 'marker-mid'?: string | undefined; - // (undocumented) - 'marker-start'?: string | undefined; - // (undocumented) - 'overline-position'?: number | string | undefined; - // (undocumented) - 'overline-thickness'?: number | string | undefined; - // (undocumented) - 'paint-order'?: number | string | undefined; - // (undocumented) - 'pointer-events'?: number | string | undefined; - // (undocumented) - 'rendering-intent'?: number | string | undefined; - // (undocumented) - 'shape-rendering'?: number | string | undefined; - // (undocumented) - 'stop-color'?: string | undefined; - // (undocumented) - 'stop-opacity'?: number | string | undefined; - // (undocumented) - 'strikethrough-position'?: number | string | undefined; - // (undocumented) - 'strikethrough-thickness'?: number | string | undefined; - // (undocumented) - 'stroke-dasharray'?: string | number | undefined; - // (undocumented) - 'stroke-dashoffset'?: string | number | undefined; - // (undocumented) - 'stroke-linecap'?: 'butt' | 'round' | 'square' | 'inherit' | undefined; - // (undocumented) - 'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | 'inherit' | undefined; - // (undocumented) - 'stroke-miterlimit'?: string | undefined; - // (undocumented) - 'stroke-opacity'?: number | string | undefined; - // (undocumented) - 'stroke-width'?: number | string | undefined; - // (undocumented) - 'text-anchor'?: string | undefined; - // (undocumented) - 'text-decoration'?: number | string | undefined; - // (undocumented) - 'text-rendering'?: number | string | undefined; - // (undocumented) - 'underline-position'?: number | string | undefined; - // (undocumented) - 'underline-thickness'?: number | string | undefined; - // (undocumented) - 'unicode-bidi'?: number | string | undefined; - // (undocumented) - 'unicode-range'?: number | string | undefined; - // (undocumented) - 'units-per-em'?: number | string | undefined; - // (undocumented) - 'v-alphabetic'?: number | string | undefined; - // (undocumented) - 'v-hanging'?: number | string | undefined; - // (undocumented) - 'v-ideographic'?: number | string | undefined; - // (undocumented) - 'v-mathematical'?: number | string | undefined; - // (undocumented) - 'vector-effect'?: number | string | undefined; - // (undocumented) - 'vert-adv-y'?: number | string | undefined; - // (undocumented) - 'vert-origin-x'?: number | string | undefined; - // (undocumented) - 'vert-origin-y'?: number | string | undefined; - // (undocumented) - 'word-spacing'?: number | string | undefined; - // (undocumented) - 'writing-mode'?: number | string | undefined; - // (undocumented) - 'x-channel-selector'?: string | undefined; - // (undocumented) - 'x-height'?: number | string | undefined; - // (undocumented) - 'xlink:actuate'?: string | undefined; - // (undocumented) - 'xlink:arcrole'?: string | undefined; - // (undocumented) - 'xlink:href'?: string | undefined; - // (undocumented) - 'xlink:role'?: string | undefined; - // (undocumented) - 'xlink:show'?: string | undefined; - // (undocumented) - 'xlink:title'?: string | undefined; - // (undocumented) - 'xlink:type'?: string | undefined; - // (undocumented) - 'xml:base'?: string | undefined; - // (undocumented) - 'xml:lang'?: string | undefined; - // (undocumented) - 'xml:space'?: string | undefined; - // (undocumented) - 'xmlns:xlink'?: string | undefined; - // (undocumented) - accumulate?: 'none' | 'sum' | undefined; - // (undocumented) - additive?: 'replace' | 'sum' | undefined; - // (undocumented) - allowReorder?: 'no' | 'yes' | undefined; - // (undocumented) - alphabetic?: number | string | undefined; - // (undocumented) - amplitude?: number | string | undefined; - // (undocumented) - ascent?: number | string | undefined; - // (undocumented) - attributeName?: string | undefined; - // (undocumented) - attributeType?: string | undefined; - // (undocumented) - autoReverse?: Booleanish | undefined; - // (undocumented) - azimuth?: number | string | undefined; - // (undocumented) - baseFrequency?: number | string | undefined; - // (undocumented) - baseProfile?: number | string | undefined; - // (undocumented) - bbox?: number | string | undefined; - // (undocumented) - begin?: number | string | undefined; - // (undocumented) - bias?: number | string | undefined; - // (undocumented) - by?: number | string | undefined; - // (undocumented) - calcMode?: number | string | undefined; - // (undocumented) - clip?: number | string | undefined; - // (undocumented) - clipPathUnits?: number | string | undefined; - // (undocumented) - color?: string | undefined; - // (undocumented) - contentScriptType?: number | string | undefined; - // (undocumented) - contentStyleType?: number | string | undefined; - // (undocumented) - crossOrigin?: HTMLCrossOriginAttribute; - // (undocumented) - cursor?: number | string; - // (undocumented) - cx?: number | string | undefined; - // (undocumented) - cy?: number | string | undefined; - // (undocumented) - d?: string | undefined; - // (undocumented) - decelerate?: number | string | undefined; - // (undocumented) - descent?: number | string | undefined; - // (undocumented) - diffuseConstant?: number | string | undefined; - // (undocumented) - direction?: number | string | undefined; - // (undocumented) - display?: number | string | undefined; - // (undocumented) - divisor?: number | string | undefined; - // (undocumented) - dur?: number | string | undefined; - // (undocumented) - dx?: number | string | undefined; - // (undocumented) - dy?: number | string | undefined; - // (undocumented) - elevation?: number | string | undefined; - // (undocumented) - end?: number | string | undefined; - // (undocumented) - exponent?: number | string | undefined; - // (undocumented) - externalResourcesRequired?: number | string | undefined; - // (undocumented) - fill?: string | undefined; - // (undocumented) - filter?: string | undefined; - // (undocumented) - filterRes?: number | string | undefined; - // (undocumented) - filterUnits?: number | string | undefined; - // (undocumented) - focusable?: number | string | undefined; - // (undocumented) - format?: number | string | undefined; - // (undocumented) - fr?: number | string | undefined; - // (undocumented) - from?: number | string | undefined; - // (undocumented) - fx?: number | string | undefined; - // (undocumented) - fy?: number | string | undefined; - // (undocumented) - g1?: number | string | undefined; - // (undocumented) - g2?: number | string | undefined; - // (undocumented) - glyphRef?: number | string | undefined; - // (undocumented) - gradientTransform?: string | undefined; - // (undocumented) - gradientUnits?: string | undefined; - // (undocumented) - hanging?: number | string | undefined; - // (undocumented) - height?: Size | undefined; - // (undocumented) - href?: string | undefined; - // (undocumented) - id?: string | undefined; - // (undocumented) - ideographic?: number | string | undefined; - // (undocumented) - in?: string | undefined; - // (undocumented) - in2?: number | string | undefined; - // (undocumented) - intercept?: number | string | undefined; - // (undocumented) - k?: number | string | undefined; - // (undocumented) - k1?: number | string | undefined; - // (undocumented) - k2?: number | string | undefined; - // (undocumented) - k3?: number | string | undefined; - // (undocumented) - k4?: number | string | undefined; - // (undocumented) - kernelMatrix?: number | string | undefined; - // (undocumented) - kernelUnitLength?: number | string | undefined; - // (undocumented) - kerning?: number | string | undefined; - // (undocumented) - keyPoints?: number | string | undefined; - // (undocumented) - keySplines?: number | string | undefined; - // (undocumented) - keyTimes?: number | string | undefined; - // (undocumented) - lang?: string | undefined; - // (undocumented) - lengthAdjust?: number | string | undefined; - // (undocumented) - limitingConeAngle?: number | string | undefined; - // (undocumented) - local?: number | string | undefined; - // (undocumented) - markerHeight?: number | string | undefined; - // (undocumented) - markerUnits?: number | string | undefined; - // (undocumented) - markerWidth?: number | string | undefined; - // (undocumented) - mask?: string | undefined; - // (undocumented) - maskContentUnits?: number | string | undefined; - // (undocumented) - maskUnits?: number | string | undefined; - // (undocumented) - mathematical?: number | string | undefined; - // (undocumented) - max?: number | string | undefined; - // (undocumented) - media?: string | undefined; - // (undocumented) - method?: string | undefined; - // (undocumented) - min?: number | string | undefined; - // (undocumented) - mode?: number | string | undefined; - // (undocumented) - name?: string | undefined; - // (undocumented) - numOctaves?: number | string | undefined; - // (undocumented) - offset?: number | string | undefined; - // (undocumented) - opacity?: number | string | undefined; - // (undocumented) - operator?: number | string | undefined; - // (undocumented) - order?: number | string | undefined; - // (undocumented) - orient?: number | string | undefined; - // (undocumented) - orientation?: number | string | undefined; - // (undocumented) - origin?: number | string | undefined; - // (undocumented) - overflow?: number | string | undefined; - // (undocumented) - panose1?: number | string | undefined; - // (undocumented) - path?: string | undefined; - // (undocumented) - pathLength?: number | string | undefined; - // (undocumented) - patternContentUnits?: string | undefined; - // (undocumented) - patternTransform?: number | string | undefined; - // (undocumented) - patternUnits?: string | undefined; - // (undocumented) - points?: string | undefined; - // (undocumented) - pointsAtX?: number | string | undefined; - // (undocumented) - pointsAtY?: number | string | undefined; - // (undocumented) - pointsAtZ?: number | string | undefined; - // (undocumented) - preserveAlpha?: number | string | undefined; - // (undocumented) - preserveAspectRatio?: string | undefined; - // (undocumented) - primitiveUnits?: number | string | undefined; - // (undocumented) - r?: number | string | undefined; - // (undocumented) - radius?: number | string | undefined; - // (undocumented) - refX?: number | string | undefined; - // (undocumented) - refY?: number | string | undefined; - // (undocumented) - repeatCount?: number | string | undefined; - // (undocumented) - repeatDur?: number | string | undefined; - // (undocumented) - requiredextensions?: number | string | undefined; - // (undocumented) - requiredFeatures?: number | string | undefined; - // (undocumented) - restart?: number | string | undefined; - // (undocumented) - result?: string | undefined; - // (undocumented) - role?: string | undefined; - // (undocumented) - rotate?: number | string | undefined; - // (undocumented) - rx?: number | string | undefined; - // (undocumented) - ry?: number | string | undefined; - // (undocumented) - scale?: number | string | undefined; - // (undocumented) - seed?: number | string | undefined; - // (undocumented) - slope?: number | string | undefined; - // (undocumented) - spacing?: number | string | undefined; - // (undocumented) - specularConstant?: number | string | undefined; - // (undocumented) - specularExponent?: number | string | undefined; - // (undocumented) - speed?: number | string | undefined; - // (undocumented) - spreadMethod?: string | undefined; - // (undocumented) - startOffset?: number | string | undefined; - // (undocumented) - stdDeviation?: number | string | undefined; - // (undocumented) - stemh?: number | string | undefined; - // (undocumented) - stemv?: number | string | undefined; - // (undocumented) - stitchTiles?: number | string | undefined; - // (undocumented) - string?: number | string | undefined; - // (undocumented) - stroke?: string | undefined; - // (undocumented) - style?: CSSProperties | string | undefined; - // (undocumented) - surfaceScale?: number | string | undefined; - // (undocumented) - systemLanguage?: number | string | undefined; - // (undocumented) - tabindex?: number | undefined; - // (undocumented) - tableValues?: number | string | undefined; - // (undocumented) - target?: string | undefined; - // (undocumented) - targetX?: number | string | undefined; - // (undocumented) - targetY?: number | string | undefined; - // (undocumented) - textLength?: number | string | undefined; - // (undocumented) - to?: number | string | undefined; - // (undocumented) - transform?: string | undefined; - // (undocumented) - type?: string | undefined; - // (undocumented) - u1?: number | string | undefined; - // (undocumented) - u2?: number | string | undefined; - // (undocumented) - unicode?: number | string | undefined; - // (undocumented) - values?: string | undefined; - // (undocumented) - version?: string | undefined; - // (undocumented) - viewBox?: string | undefined; - // (undocumented) - viewTarget?: number | string | undefined; - // (undocumented) - visibility?: number | string | undefined; - // (undocumented) - width?: Size | undefined; - // (undocumented) - widths?: number | string | undefined; - // (undocumented) - x?: number | string | undefined; - // (undocumented) - x1?: number | string | undefined; - // (undocumented) - x2?: number | string | undefined; - // (undocumented) - xmlns?: string | undefined; - // (undocumented) - y?: number | string | undefined; - // (undocumented) - y1?: number | string | undefined; - // (undocumented) - y2?: number | string | undefined; - // (undocumented) - yChannelSelector?: string | undefined; - // (undocumented) - z?: number | string | undefined; - // (undocumented) - zoomAndPan?: string | undefined; -} - -// @public (undocumented) -export interface SVGProps extends SVGAttributes, QwikAttributes { -} - // @public export const sync$: (fn: T) => SyncQRL; @@ -1802,10 +983,6 @@ export interface SyncQRL extends QRL { resolved: TYPE; } -// @public (undocumented) -export interface TableHTMLAttributes extends Attrs<'table', T> { -} - // @public (undocumented) export interface TaskCtx { // (undocumented) @@ -1817,14 +994,6 @@ export interface TaskCtx { // @public (undocumented) export type TaskFn = (ctx: TaskCtx) => ValueOrPromise void)>; -// @public (undocumented) -export interface TdHTMLAttributes extends Attrs<'td', T> { -} - -// @public (undocumented) -export interface TextareaHTMLAttributes extends Attrs<'textarea', T> { -} - // @internal (undocumented) export type _TextVNode = [ _VNodeFlags.Text | _VNodeFlags.Inflated, @@ -1841,18 +1010,6 @@ string __brand__: 'TextVNode'; }; -// @public (undocumented) -export interface ThHTMLAttributes extends Attrs<'tr', T> { -} - -// @public (undocumented) -export interface TimeHTMLAttributes extends Attrs<'time', T> { -} - -// @public (undocumented) -export interface TitleHTMLAttributes extends Attrs<'title', T> { -} - // @public export interface Tracker { (fn: () => T): T; @@ -1860,10 +1017,6 @@ export interface Tracker { (obj: T, prop: P): T[P]; } -// @public (undocumented) -export interface TrackHTMLAttributes extends Attrs<'track', T> { -} - // @public export const untrack: (fn: () => T) => T; @@ -2002,10 +1155,6 @@ export const _verifySerializable: (value: T, preMessage?: string) => T; // @public export const version: string; -// @public (undocumented) -export interface VideoHTMLAttributes extends Attrs<'video', T> { -} - // @internal (undocumented) export type _VirtualVNode = [ _VNodeFlags.Virtual, @@ -2086,44 +1235,6 @@ export function _walkJSX(ssr: SSRContainer, value: JSXOutput, options: { // @internal (undocumented) export const _weakSerialize: (input: T) => Partial; -// @public @deprecated (undocumented) -export interface WebViewHTMLAttributes extends HTMLAttributes { - // (undocumented) - allowFullScreen?: boolean | undefined; - // (undocumented) - allowpopups?: boolean | undefined; - // (undocumented) - autoFocus?: boolean | undefined; - // (undocumented) - autosize?: boolean | undefined; - // (undocumented) - blinkfeatures?: string | undefined; - // (undocumented) - disableblinkfeatures?: string | undefined; - // (undocumented) - disableguestresize?: boolean | undefined; - // (undocumented) - disablewebsecurity?: boolean | undefined; - // (undocumented) - guestinstance?: string | undefined; - // (undocumented) - httpreferrer?: string | undefined; - // (undocumented) - nodeintegration?: boolean | undefined; - // (undocumented) - partition?: string | undefined; - // (undocumented) - plugins?: boolean | undefined; - // (undocumented) - preload?: string | undefined; - // (undocumented) - src?: string | undefined; - // (undocumented) - useragent?: string | undefined; - // (undocumented) - webpreferences?: string | undefined; -} - // @public export function withLocale(locale: string, fn: () => T): T; diff --git a/packages/qwik/src/core/index.ts b/packages/qwik/src/core/index.ts index 0930399c5c4..a9e00421136 100644 --- a/packages/qwik/src/core/index.ts +++ b/packages/qwik/src/core/index.ts @@ -57,7 +57,6 @@ export { h, h as createElement, } from './shared/jsx/jsx-runtime'; -export type * from './shared/jsx/types/jsx-generated'; export type { DOMAttributes, QwikAttributes, From d609244c454457e919e359dc745bdd7b52fb4c60 Mon Sep 17 00:00:00 2001 From: Wout Mertens Date: Tue, 12 Nov 2024 23:25:57 +0100 Subject: [PATCH 6/9] chore: manually select TS exports --- .changeset/rich-wasps-tease.md | 5 ++ package.json | 4 +- .../src/components/histogram/index.tsx | 4 +- .../qwik-react/src/react/server-render.tsx | 3 +- packages/qwik/package.json | 5 +- packages/qwik/public.d.ts | 68 +++++++++++++++++++ packages/qwik/server.d.ts | 17 ++++- packages/qwik/src/core/api-extractor.json | 1 - packages/qwik/src/jsx-runtime.ts | 3 +- scripts/binding-platform.ts | 1 + .../apps/e2e/src/components/render/render.tsx | 4 +- .../e2e/src/components/streaming/demo.tsx | 9 +-- .../src/components/streaming/streaming.tsx | 4 +- 13 files changed, 103 insertions(+), 25 deletions(-) create mode 100644 .changeset/rich-wasps-tease.md create mode 100644 packages/qwik/public.d.ts diff --git a/.changeset/rich-wasps-tease.md b/.changeset/rich-wasps-tease.md new file mode 100644 index 00000000000..c0b3baffcaf --- /dev/null +++ b/.changeset/rich-wasps-tease.md @@ -0,0 +1,5 @@ +--- +'@qwik.dev/core': major +--- + +BREAKING: the Typescript exports were trimmed down to the bare minimum. If there are types you are missing, open an issue. diff --git a/package.json b/package.json index d86e10ff305..7ea76ae7983 100644 --- a/package.json +++ b/package.json @@ -173,8 +173,8 @@ "build.cli.prod": "tsx --require ./scripts/runBefore.ts scripts/index.ts --cli", "build.core": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --build --qwikrouter --api --platform-binding", "build.eslint": "tsx --require ./scripts/runBefore.ts scripts/index.ts --eslint", - "build.full": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --build --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding --wasm", - "build.local": "tsx --require ./scripts/runBefore.tsscripts/index.ts --tsc --tsc-docs --build --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding-wasm-copy", + "build.full": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding --wasm", + "build.local": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding-wasm-copy", "build.only_javascript": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --build --api", "build.packages.docs": "pnpm -C ./packages/docs/ run build", "build.packages.insights": "pnpm -C ./packages/insights/ run build", diff --git a/packages/insights/src/components/histogram/index.tsx b/packages/insights/src/components/histogram/index.tsx index 60017b1e2d2..3a0359df45a 100644 --- a/packages/insights/src/components/histogram/index.tsx +++ b/packages/insights/src/components/histogram/index.tsx @@ -1,4 +1,4 @@ -import { component$, useStore, useComputed$, type QwikMouseEvent } from '@qwik.dev/core'; +import { component$, useStore, useComputed$ } from '@qwik.dev/core'; import { vectorMax, type Bucket } from '~/stats/vector'; const height = 75; @@ -51,7 +51,7 @@ export default component$<{ style={{ height: height + 'px' }} onMouseEnter$={() => (callout.show = true)} onMouseLeave$={() => (callout.show = false)} - onMouseMove$={(event: QwikMouseEvent) => { + onMouseMove$={(event) => { callout.x = event.clientX; callout.y = event.clientY; const target = event.target as HTMLElement; diff --git a/packages/qwik-react/src/react/server-render.tsx b/packages/qwik-react/src/react/server-render.tsx index dbdeef47506..81c7e6465d7 100644 --- a/packages/qwik-react/src/react/server-render.tsx +++ b/packages/qwik-react/src/react/server-render.tsx @@ -1,4 +1,5 @@ -import { type QRL, type Signal, Slot, SSRComment, SSRRaw, SSRStream } from '@qwik.dev/core'; +import { type QRL, type Signal, Slot } from '@qwik.dev/core'; +import { SSRComment, SSRRaw, SSRStream } from '@qwik.dev/core/internal'; import { isServer } from '@qwik.dev/core/build'; import { renderToString } from 'react-dom/server'; import { getHostProps, getReactProps, mainExactProps } from './slot'; diff --git a/packages/qwik/package.json b/packages/qwik/package.json index 882c4c09ea0..62f0537df25 100644 --- a/packages/qwik/package.json +++ b/packages/qwik/package.json @@ -24,7 +24,7 @@ }, "exports": { ".": { - "types": "./dist/core.d.ts", + "types": "./public.d.ts", "import": { "development": "./dist/core.mjs", "production": "./dist/core.prod.mjs", @@ -120,7 +120,7 @@ "./server.cjs": "./dist/server.cjs", "./server.mjs": "./dist/server.mjs", "./server": { - "types": "./dist/server.d.ts", + "types": "./server.d.ts", "import": "./dist/server.mjs", "require": "./dist/server.cjs" }, @@ -147,6 +147,7 @@ "jsx-runtime.d.ts", "loader.d.ts", "optimizer.d.ts", + "public.d.ts", "server.d.ts", "testing.d.ts", "qwik-cli.cjs" diff --git a/packages/qwik/public.d.ts b/packages/qwik/public.d.ts new file mode 100644 index 00000000000..7b0c8523bee --- /dev/null +++ b/packages/qwik/public.d.ts @@ -0,0 +1,68 @@ +export { + $, + ClassList, + Component, + component$, + ComputedSignal, + ContextId, + createComputed$, + createContextId, + createSignal, + // TODO remove this + event$, + EventHandler, + Fragment, + FunctionComponent, + getLocale, + getPlatform, + implicit$FirstArg, + isSignal, + jsx, + JSXChildren, + jsxDEV, + JSXNode, + JSXOutput, + noSerialize, + NoSerialize, + PrefetchGraph, + PrefetchServiceWorker, + PropsOf, + QRL, + // TODO should this be used instead of EventHandler? + QRLEventHandlerMulti, + QwikIntrinsicElements, + QwikJSX as JSX, + QwikJSX, + ReadonlySignal, + render, + RenderOnce, + RenderOptions, + Resource, + ResourceReturn, + Signal, + SkipRender, + Slot, + sync$, + // TODO do we really want to export this? + untrack, + useComputed$, + useConstant, + useContext, + useContextProvider, + useErrorBoundary, + useId, + useOn, + useOnDocument, + useOnWindow, + useResource$, + useServerData, + useSignal, + useStore, + useStyles$, + useStylesScoped$, + useTask$, + useVisibleTask$, + ValueOrPromise, + version, + withLocale, +} from './dist/core-internal'; diff --git a/packages/qwik/server.d.ts b/packages/qwik/server.d.ts index 8d3bf43838c..2490cb9f792 100644 --- a/packages/qwik/server.d.ts +++ b/packages/qwik/server.d.ts @@ -1,2 +1,15 @@ -// re-export for typescript in old resolution mode -export * from './dist/server'; +export { + getQwikLoaderScript, + getQwikPrefetchWorkerScript, + setServerPlatform, + Render, + RenderOptions, + RenderResult, + renderToStream, + renderToString, + RenderToStreamOptions, + RenderToStreamResult, + RenderToStringOptions, + RenderToStringResult, + versions, +} from './dist/server'; diff --git a/packages/qwik/src/core/api-extractor.json b/packages/qwik/src/core/api-extractor.json index 5827a01f8e5..47728e556c7 100644 --- a/packages/qwik/src/core/api-extractor.json +++ b/packages/qwik/src/core/api-extractor.json @@ -10,7 +10,6 @@ }, "dtsRollup": { "enabled": true, - "betaTrimmedFilePath": "/dist/core.d.ts", "untrimmedFilePath": "/dist/core-internal.d.ts" }, "docModel": { diff --git a/packages/qwik/src/jsx-runtime.ts b/packages/qwik/src/jsx-runtime.ts index 2a0d4817c66..4c46330f418 100644 --- a/packages/qwik/src/jsx-runtime.ts +++ b/packages/qwik/src/jsx-runtime.ts @@ -1,2 +1 @@ -export { jsx, jsxs, jsxDEV, Fragment } from './core'; -export type { JSX } from './core'; +export { jsx, jsx as jsxs, jsxDEV, Fragment, type QwikJSX as JSX } from '@qwik.dev/core'; diff --git a/scripts/binding-platform.ts b/scripts/binding-platform.ts index 0174a1970c1..349bc1e5658 100644 --- a/scripts/binding-platform.ts +++ b/scripts/binding-platform.ts @@ -54,6 +54,7 @@ export async function copyPlatformBindingWasm(config: BuildConfig) { ensureDir(config.distQwikPkgDir); ensureDir(config.distBindingsDir); const cacheDir = join(config.tmpDir, `cached-bindings`); + ensureDir(cacheDir); let buildVersion = '0.0.0'; try { diff --git a/starters/apps/e2e/src/components/render/render.tsx b/starters/apps/e2e/src/components/render/render.tsx index 11fca403136..ef715e891e7 100644 --- a/starters/apps/e2e/src/components/render/render.tsx +++ b/starters/apps/e2e/src/components/render/render.tsx @@ -1,12 +1,9 @@ import { component$, event$, - h, jsx, SkipRender, Slot, - SSRComment, - SSRRaw, useSignal, useStore, useStylesScoped$, @@ -15,6 +12,7 @@ import { type PropsOf, type QRL, } from "@qwik.dev/core"; +import { h, SSRComment, SSRRaw } from "@qwik.dev/core/internal"; import { isServer } from "@qwik.dev/core/build"; import { delay } from "../streaming/demo"; diff --git a/starters/apps/e2e/src/components/streaming/demo.tsx b/starters/apps/e2e/src/components/streaming/demo.tsx index 58e3ca89b7e..450beebe456 100644 --- a/starters/apps/e2e/src/components/streaming/demo.tsx +++ b/starters/apps/e2e/src/components/streaming/demo.tsx @@ -1,10 +1,5 @@ -import { - component$, - Resource, - SSRStream, - useResource$, - useStyles$, -} from "@qwik.dev/core"; +import { component$, Resource, useResource$, useStyles$ } from "@qwik.dev/core"; +import { SSRStream } from "@qwik.dev/core/internal"; export function delay(time: number) { return new Promise((resolve) => { diff --git a/starters/apps/e2e/src/components/streaming/streaming.tsx b/starters/apps/e2e/src/components/streaming/streaming.tsx index 41c92e05098..d5e46ffaaed 100644 --- a/starters/apps/e2e/src/components/streaming/streaming.tsx +++ b/starters/apps/e2e/src/components/streaming/streaming.tsx @@ -1,13 +1,11 @@ import { component$, Resource, - SSRStream, - SSRStreamBlock, useResource$, useStore, useStyles$, } from "@qwik.dev/core"; - +import { SSRStream, SSRStreamBlock } from "@qwik.dev/core/internal"; export function delay(time: number) { return new Promise((resolve) => { setTimeout(() => resolve(), time); From dd15da786109da00e90a5bc6fc245b5d3a19ff49 Mon Sep 17 00:00:00 2001 From: Wout Mertens Date: Thu, 14 Nov 2024 00:03:37 +0100 Subject: [PATCH 7/9] fix(eslint): ignore temporary vite config --- packages/insights/.eslintignore | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/insights/.eslintignore b/packages/insights/.eslintignore index 2dd8975021a..0b7948ab087 100644 --- a/packages/insights/.eslintignore +++ b/packages/insights/.eslintignore @@ -1,3 +1,4 @@ +*.timestamp* **/*.log **/.DS_Store *. From edaa75e7dc0d33478f59d2722c3c89ccb3c44668 Mon Sep 17 00:00:00 2001 From: Wout Mertens Date: Thu, 14 Nov 2024 22:46:26 +0100 Subject: [PATCH 8/9] fix(repl): handle moved types files --- packages/docs/check-qwik-build.ts | 2 +- packages/docs/src/repl/bundled.tsx | 6 ++++-- packages/docs/src/repl/monaco.tsx | 12 +++++++++--- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/docs/check-qwik-build.ts b/packages/docs/check-qwik-build.ts index d00fd1967be..acd6c14e789 100644 --- a/packages/docs/check-qwik-build.ts +++ b/packages/docs/check-qwik-build.ts @@ -9,7 +9,7 @@ import { fileURLToPath } from 'url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); const qwikPkgDir = path.join(__dirname, '..', 'qwik', 'dist'); -if (!fs.existsSync(path.join(qwikPkgDir, 'core.d.ts'))) { +if (!fs.existsSync(path.join(qwikPkgDir, 'core-internal.d.ts'))) { console.warn( `\n\n=== Running 'pnpm run build.local' to generate missing imports for the docs ===\n` ); diff --git a/packages/docs/src/repl/bundled.tsx b/packages/docs/src/repl/bundled.tsx index 32ddb5bdf3d..e246e8cf55e 100644 --- a/packages/docs/src/repl/bundled.tsx +++ b/packages/docs/src/repl/bundled.tsx @@ -12,7 +12,8 @@ import qWasmCjs from '../../node_modules/@qwik.dev/core/bindings/qwik.wasm.cjs?r import qWasmBinUrl from '../../node_modules/@qwik.dev/core/bindings/qwik_wasm_bg.wasm?raw-source'; import qBuild from '../../node_modules/@qwik.dev/core/dist/build/index.d.ts?raw-source'; import qCoreCjs from '../../node_modules/@qwik.dev/core/dist/core.cjs?raw-source'; -import qCoreDts from '../../node_modules/@qwik.dev/core/dist/core.d.ts?raw-source'; +import qPublicDts from '../../node_modules/@qwik.dev/core/public.d.ts?raw-source'; +import qCoreInternalDts from '../../node_modules/@qwik.dev/core/dist/core-internal.d.ts?raw-source'; import qCoreMinMjs from '../../node_modules/@qwik.dev/core/dist/core.min.mjs?raw-source'; import qCoreMjs from '../../node_modules/@qwik.dev/core/dist/core.mjs?raw-source'; import qOptimizerCjs from '../../node_modules/@qwik.dev/core/dist/optimizer.cjs?raw-source'; @@ -55,7 +56,8 @@ export const bundled: PkgUrls = { version: qwikVersion, '/dist/build/index.d.ts': qBuild, '/dist/core.cjs': qCoreCjs, - '/dist/core.d.ts': qCoreDts, + '/public.d.ts': qPublicDts, + '/dist/core-internal.d.ts': qCoreInternalDts, '/dist/core.min.mjs': qCoreMinMjs, '/dist/core.mjs': qCoreMjs, '/dist/optimizer.cjs': qOptimizerCjs, diff --git a/packages/docs/src/repl/monaco.tsx b/packages/docs/src/repl/monaco.tsx index 537c9f12ac7..c61614b8970 100644 --- a/packages/docs/src/repl/monaco.tsx +++ b/packages/docs/src/repl/monaco.tsx @@ -230,11 +230,17 @@ const loadDeps = async (qwikVersion: string) => { : '/'; const deps: NodeModuleDep[] = [ // qwik + !isV1 && { + pkgName: QWIK_PKG_NAME, + pkgVersion: qwikVersion, + pkgPath: `/public.d.ts`, + import: '', + }, { pkgName: isV1 ? QWIK_PKG_NAME_V1 : QWIK_PKG_NAME, pkgVersion: qwikVersion, - pkgPath: `${prefix}core.d.ts`, - import: '', + pkgPath: `${prefix}core-internal.d.ts`, + import: isV1 ? '' : '/internal', }, // server API { @@ -250,7 +256,7 @@ const loadDeps = async (qwikVersion: string) => { pkgPath: `${prefix}build/index.d.ts`, import: '/build', }, - ]; + ].filter(Boolean) as NodeModuleDep[]; const cache = await caches.open(QWIK_REPL_DEPS_CACHE); From 84cdc36aa058c661b618d50165de444c0e730f39 Mon Sep 17 00:00:00 2001 From: Wout Mertens Date: Thu, 14 Nov 2024 22:46:43 +0100 Subject: [PATCH 9/9] fix(repl): don't crash from extension messages --- packages/docs/src/repl/worker/repl-messenger.ts | 10 +++++++--- packages/docs/src/repl/worker/repl-server.ts | 10 +++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/docs/src/repl/worker/repl-messenger.ts b/packages/docs/src/repl/worker/repl-messenger.ts index 98a1f450709..d7c65d658bf 100644 --- a/packages/docs/src/repl/worker/repl-messenger.ts +++ b/packages/docs/src/repl/worker/repl-messenger.ts @@ -3,9 +3,13 @@ import { appUpdate } from './app-update'; export const receiveMessageFromMain = (ev: MessageEvent) => { if (ev.data) { - const msg: ReplMessage = JSON.parse(ev.data); - if (msg.type === 'update') { - appUpdate(ev.source as any as WindowClient, msg.clientId, msg.options); + try { + const msg: ReplMessage = JSON.parse(ev.data); + if (msg.type === 'update') { + appUpdate(ev.source as any as WindowClient, msg.clientId, msg.options); + } + } catch { + // ignore, probably some extension sending non-JSON data } } }; diff --git a/packages/docs/src/repl/worker/repl-server.ts b/packages/docs/src/repl/worker/repl-server.ts index 460c703b007..526aab3b0fa 100644 --- a/packages/docs/src/repl/worker/repl-server.ts +++ b/packages/docs/src/repl/worker/repl-server.ts @@ -82,9 +82,13 @@ export const initReplServer = (win: Window, doc: Document, nav: Navigator) => { return; } if (ev.data) { - const msg: ReplMessage = JSON.parse(ev.data); - if (msg?.type === 'event') { - sendMessageToMain(msg); + try { + const msg: ReplMessage = JSON.parse(ev.data); + if (msg?.type === 'event') { + sendMessageToMain(msg); + } + } catch { + // ignore, probably some extension sending non-JSON data } } };