|
-qrl
+fn
|
-[AsyncFn](#asyncfn)<T>
+[AsyncFn](#asyncfn)<T> \| [QRL](#qrl-type-alias)<[AsyncFn](#asyncfn)<T>>
|
@@ -9369,7 +9576,7 @@ options
|
-[AsyncSignalOptions](#asyncsignaloptions)<T> \| undefined
+[AsyncSignalOptions](#asyncsignaloptions)<T>
|
@@ -9384,15 +9591,21 @@ _(Optional)_
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-async.ts)
-useComputed$
+useAsync$
-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.
+Creates an AsyncSignal which holds the result of the given async function. If the function uses `track()` to track reactive state, and that state changes, the AsyncSignal is recalculated, and if the result changed, all tasks which are tracking the AsyncSignal will be re-run and all subscribers (components, tasks etc) that read the AsyncSignal will be updated.
-The function must be synchronous and must not have any side effects.
+If the async function throws an error, the AsyncSignal will capture the error and set the `error` property. The error can be cleared by re-running the async function successfully.
+
+While the async function is running, the `loading` property will be set to `true`. Once the function completes, `loading` will be set to `false`.
+
+If the value has not yet been resolved, reading the AsyncSignal will throw a Promise, which will retry the component or task once the value resolves.
+
+If the value has been resolved, but the async function is re-running, reading the AsyncSignal will subscribe to it and return the last resolved value until the new value is ready. As soon as the new value is ready, the subscribers will be updated.
```typescript
-useComputed$: (qrl: ComputedFn, options?: ComputedOptions | undefined) =>
- ComputedReturnType;
+useAsync$: (qrl: AsyncFn, options?: AsyncSignalOptions | undefined) =>
+ AsyncSignal;
```
|
@@ -9414,7 +9627,7 @@ qrl
|
-[ComputedFn](#computedfn)<T>
+[AsyncFn](#asyncfn)<T>
|
@@ -9425,7 +9638,7 @@ options
|
-[ComputedOptions](#computedoptions) \| undefined
+[AsyncSignalOptions](#asyncsignaloptions)<T> \| undefined
|
@@ -9436,19 +9649,17 @@ _(Optional)_
**Returns:**
-[ComputedReturnType](#computedreturntype)<T>
-
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
-
-useConstant
+[AsyncSignal](#asyncsignal)<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/use/use-async.ts)
-If the value is a function, the function is invoked once to calculate the actual value. You can then also pass arguments to call the function with, so that you don't need to create a new function on every render.
+useComputed
```typescript
-useConstant: (value: ((...args: A) => T) | T, ...args: A) =>
- T;
+useComputed: (
+ fn: ComputedFn | QRL>,
+ options?: ComputedOptions,
+) => ComputedReturnType;
```
|
@@ -9466,26 +9677,138 @@ Description
|
|---|
|
-value
+fn
|
-((...args: A) => T) \| T
+[ComputedFn](#computedfn)<T> \| [QRL](#qrl-type-alias)<[ComputedFn](#computedfn)<T>>
|
|
|
-args
+options
|
-A
+[ComputedOptions](#computedoptions)
|
- |
+_(Optional)_
+
+
+
+
+**Returns:**
+
+[ComputedReturnType](#computedreturntype)<T>
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
+
+useComputed$
+
+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.
+
+The function must be synchronous and must not have any side effects.
+
+```typescript
+useComputed$: (qrl: ComputedFn, options?: ComputedOptions | undefined) =>
+ ComputedReturnType;
+```
+
+|
+
+Parameter
+
+ |
+
+Type
+
+ |
+
+Description
+
+ |
|---|
+|
+
+qrl
+
+ |
+
+[ComputedFn](#computedfn)<T>
+
+ |
+
+ |
+|
+
+options
+
+ |
+
+[ComputedOptions](#computedoptions) \| undefined
+
+ |
+
+_(Optional)_
+
+ |
+
+
+**Returns:**
+
+[ComputedReturnType](#computedreturntype)<T>
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
+
+useConstant
+
+Stores a value which is retained for the lifetime of the component. Subsequent calls to `useConstant` will always return the first value given.
+
+If the value is a function, the function is invoked once to calculate the actual value. You can then also pass arguments to call the function with, so that you don't need to create a new function on every render.
+
+```typescript
+useConstant: (value: ((...args: A) => T) | T, ...args: A) =>
+ T;
+```
+
+|
+
+Parameter
+
+ |
+
+Type
+
+ |
+
+Description
+
+ |
|---|
+|
+
+value
+
+ |
+
+((...args: A) => T) \| T
+
+ |
+
+ |
+|
+
+args
+
+ |
+
+A
+
+ |
+
+ |
**Returns:**
@@ -9676,7 +9999,7 @@ Used to programmatically add event listeners. Useful from custom `use*` methods,
Events are case sensitive.
```typescript
-useOn: (event: T | T[], eventQrl: EventQRL, options?: UseOnOptions) => void
+useOn: (event: T | T[], eventQrl: EventQRL | EventHandler, Element>, options?: UseOnOptions) => void
```
|
@@ -9709,7 +10032,7 @@ eventQrl
|
-EventQRL<T>
+EventQRL<T> \| [EventHandler](#eventhandler)<EventFromName<T>, Element>
|
@@ -9744,7 +10067,7 @@ Used to programmatically add event listeners. Useful from custom `use*` methods,
Events are case sensitive.
```typescript
-useOnDocument: (event: T | T[], eventQrl: EventQRL, options?: UseOnOptions) => void
+useOnDocument: (event: T | T[], eventQrl: EventQRL | EventHandler, Element>, options?: UseOnOptions) => void
```
|
@@ -9777,7 +10100,7 @@ eventQrl
|
-EventQRL<T>
+EventQRL<T> \| [EventHandler](#eventhandler)<EventFromName<T>, Element>
|
@@ -9830,7 +10153,7 @@ Used to programmatically add event listeners. Useful from custom `use*` methods,
Events are case sensitive.
```typescript
-useOnWindow: (event: T | T[], eventQrl: EventQRL, options?: UseOnOptions) => void
+useOnWindow: (event: T | T[], eventQrl: EventQRL | EventHandler, Element>, options?: UseOnOptions) => void
```
|
@@ -9863,7 +10186,7 @@ eventQrl
|
-EventQRL<T>
+EventQRL<T> \| [EventHandler](#eventhandler)<EventFromName<T>, Element>
|
@@ -9889,6 +10212,60 @@ void
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts)
+useResource
+
+```typescript
+useResource: (
+ fn: ResourceFn | QRL>,
+ opts?: ResourceOptions,
+) => ResourceReturn;
+```
+
+|
+
+Parameter
+
+ |
+
+Type
+
+ |
+
+Description
+
+ |
|---|
+|
+
+fn
+
+ |
+
+[ResourceFn](#resourcefn)<T> \| [QRL](#qrl-type-alias)<[ResourceFn](#resourcefn)<T>>
+
+ |
+
+ |
+|
+
+opts
+
+ |
+
+[ResourceOptions](#resourceoptions)
+
+ |
+
+_(Optional)_
+
+ |
+
+
+**Returns:**
+
+[ResourceReturn](#resourcereturn)<T>
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts)
+
useResource$
> Warning: This API is now obsolete.
@@ -9957,6 +10334,44 @@ import("./use-resource").[ResourceReturn](#resourcereturn)<T>
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-resource-dollar.ts)
+useSerializer
+
+```typescript
+useSerializer: (arg: SerializerArg | QRL>) => T extends Promise ? never : SerializerSignal
+```
+
+|
+
+Parameter
+
+ |
+
+Type
+
+ |
+
+Description
+
+ |
|---|
+|
+
+arg
+
+ |
+
+SerializerArg<T, S> \| [QRL](#qrl-type-alias)<SerializerArg<T, S>>
+
+ |
+
+ |
+
+
+**Returns:**
+
+T extends Promise<any> ? never : [SerializerSignal](#serializersignal)<T>
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-serializer.ts)
+
useSerializer$
Creates a signal which holds a custom serializable value. It requires that the value implements the `CustomSerializable` type, which means having a function under the `[SerializeSymbol]` property that returns a serializable value when called.
@@ -10306,6 +10721,86 @@ _(Optional)_ If `false` then the object will not be tracked for changes. Default
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-store.public.ts)
+useStyles
+
+```typescript
+export interface UseStyles
+```
+
+|
+
+Property
+
+ |
+
+Modifiers
+
+ |
+
+Type
+
+ |
+
+Description
+
+ |
|---|
+|
+
+styleId
+
+ |
+
+ |
+
+string
+
+ |
+
+ |
+
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts)
+
+UseStyles
+
+```typescript
+export interface UseStyles
+```
+
+|
+
+Property
+
+ |
+
+Modifiers
+
+ |
+
+Type
+
+ |
+
+Description
+
+ |
|---|
+|
+
+styleId
+
+ |
+
+ |
+
+string
+
+ |
+
+ |
+
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts)
+
useStyles$
A lazy-loadable reference to a component's styles.
@@ -10354,11 +10849,51 @@ string
**Returns:**
-UseStyles
+[UseStyles](#usestyles-interface)
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts)
-UseStylesScoped
+useStylesScoped
+
+```typescript
+export interface UseStylesScoped
+```
+
+|
+
+Property
+
+ |
+
+Modifiers
+
+ |
+
+Type
+
+ |
+
+Description
+
+ |
|---|
+|
+
+scopeId
+
+ |
+
+ |
+
+string
+
+ |
+
+ |
+
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts)
+
+UseStylesScoped
```typescript
export interface UseStylesScoped
@@ -10446,10 +10981,61 @@ string
**Returns:**
-[UseStylesScoped](#usestylesscoped)
+[UseStylesScoped](#usestylesscoped-interface)
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-styles.ts)
+useTask
+
+```typescript
+useTask: (fn: TaskFn | QRL, opts?: TaskOptions) => void
+```
+
+|
+
+Parameter
+
+ |
+
+Type
+
+ |
+
+Description
+
+ |
|---|
+|
+
+fn
+
+ |
+
+[TaskFn](#taskfn) \| [QRL](#qrl-type-alias)<[TaskFn](#taskfn)>
+
+ |
+
+ |
+|
+
+opts
+
+ |
+
+[TaskOptions](#taskoptions)
+
+ |
+
+_(Optional)_
+
+ |
+
+
+**Returns:**
+
+void
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts)
+
useTask$
Reruns the `taskFn` when the observed inputs change.
@@ -10507,6 +11093,57 @@ void
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task-dollar.ts)
+useVisibleTask
+
+```typescript
+useVisibleTask: (fn: TaskFn | QRL, opts?: OnVisibleTaskOptions) => void
+```
+
+|
+
+Parameter
+
+ |
+
+Type
+
+ |
+
+Description
+
+ |
|---|
+|
+
+fn
+
+ |
+
+[TaskFn](#taskfn) \| [QRL](#qrl-type-alias)<[TaskFn](#taskfn)>
+
+ |
+
+ |
+|
+
+opts
+
+ |
+
+[OnVisibleTaskOptions](#onvisibletaskoptions)
+
+ |
+
+_(Optional)_
+
+ |
+
+
+**Returns:**
+
+void
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-visible-task.ts)
+
useVisibleTask$
```tsx
diff --git a/packages/optimizer/core/src/snapshots/qwik_core__test__example_1.snap b/packages/optimizer/core/src/snapshots/qwik_core__test__example_1.snap
index 9e56c67954c..8bd89f38afd 100644
--- a/packages/optimizer/core/src/snapshots/qwik_core__test__example_1.snap
+++ b/packages/optimizer/core/src/snapshots/qwik_core__test__example_1.snap
@@ -1,6 +1,5 @@
---
source: packages/optimizer/core/src/test.rs
-assertion_line: 92
expression: output
---
==INPUT==
@@ -18,20 +17,20 @@ const renderHeader2 = component($(() => {
return render;
}));
-============================= test.tsx_renderHeader1_div_onClick_USi8k1jUb40.tsx (ENTRY POINT)==
+============================= test.tsx_renderHeader1_div_q_e_click_fjy1WIjm9hw.tsx (ENTRY POINT)==
-export const renderHeader1_div_onClick_USi8k1jUb40 = (ctx)=>console.log(ctx);
+export const renderHeader1_div_q_e_click_fjy1WIjm9hw = (ctx)=>console.log(ctx);
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"qDAKkB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"uDAKkB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
/*
{
"origin": "test.tsx",
- "name": "renderHeader1_div_onClick_USi8k1jUb40",
+ "name": "renderHeader1_div_q_e_click_fjy1WIjm9hw",
"entry": null,
- "displayName": "test.tsx_renderHeader1_div_onClick",
- "hash": "USi8k1jUb40",
- "canonicalFilename": "test.tsx_renderHeader1_div_onClick_USi8k1jUb40",
+ "displayName": "test.tsx_renderHeader1_div_q_e_click",
+ "hash": "fjy1WIjm9hw",
+ "canonicalFilename": "test.tsx_renderHeader1_div_q_e_click_fjy1WIjm9hw",
"path": "",
"extension": "tsx",
"parent": "renderHeader1_jMxQsjbyDss",
@@ -64,10 +63,10 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
import { qrl } from "@qwik.dev/core";
//
-const q_renderHeader1_div_onClick_USi8k1jUb40 = /*#__PURE__*/ qrl(()=>import("./test.tsx_renderHeader1_div_onClick_USi8k1jUb40"), "renderHeader1_div_onClick_USi8k1jUb40");
+const q_renderHeader1_div_q_e_click_fjy1WIjm9hw = /*#__PURE__*/ qrl(()=>import("./test.tsx_renderHeader1_div_q_e_click_fjy1WIjm9hw"), "renderHeader1_div_q_e_click_fjy1WIjm9hw");
//
export const renderHeader1_jMxQsjbyDss = ()=>{
- return ;
+ return ;
};
diff --git a/packages/optimizer/core/src/snapshots/qwik_core__test__example_10.snap b/packages/optimizer/core/src/snapshots/qwik_core__test__example_10.snap
index 9b4a8e027c2..26f21d56f35 100644
--- a/packages/optimizer/core/src/snapshots/qwik_core__test__example_10.snap
+++ b/packages/optimizer/core/src/snapshots/qwik_core__test__example_10.snap
@@ -1,6 +1,5 @@
---
source: packages/optimizer/core/src/test.rs
-assertion_line: 269
expression: output
---
==INPUT==
@@ -46,11 +45,11 @@ export const Header_WlR3xnI6u38 = (decl1, { decl2 }, [decl3])=>{
return ident10;
}
}
- return ident11 + ident12} required={false}/>;
+ return ident11 + ident12} required={false}/>;
};
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/project/test.tsx\"],\"names\":[],\"mappings\":\"kCAEiB,CAAC,OAAO,EAAC,KAAK,EAAC,EAAE,CAAC,MAAM;IAE3B,OAAO,EAAE;IACtB;IACU,QAAS;IACT,QAAS;IACnB,OAAO,QAAQ;QAAC;KAAO,EAAE;QAAC;IAAM,GAAG;QAAC,KAAK;IAAM;IAC/C,MAAM;QACL,OAAO,OAAO;QACd,SAAS;YACR,OAAO;QACR;IACD;IAEA,QACE,IAAI,SAAS,CAAC,UAAY,UAAU,SAAS,UAAU;AAE1D\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/project/test.tsx\"],\"names\":[],\"mappings\":\"kCAEiB,CAAC,OAAO,EAAC,KAAK,EAAC,EAAE,CAAC,MAAM;IAE3B,OAAO,EAAE;IACtB;IACU,QAAS;IACT,QAAS;IACnB,OAAO,QAAQ;QAAC;KAAO,EAAE;QAAC;IAAM,GAAG;QAAC,KAAK;IAAM;IAC/C,MAAM;QACL,OAAO,OAAO;QACd,SAAS;YACR,OAAO;QACR;IACD;IAEA,QACE,IAAI,WAAS,CAAC,UAAY,UAAU,SAAS,UAAU;AAE1D\"}")
/*
{
"origin": "project/test.tsx",
diff --git a/packages/optimizer/core/src/snapshots/qwik_core__test__example_2.snap b/packages/optimizer/core/src/snapshots/qwik_core__test__example_2.snap
index 4da7b33081c..efe6f348f16 100644
--- a/packages/optimizer/core/src/snapshots/qwik_core__test__example_2.snap
+++ b/packages/optimizer/core/src/snapshots/qwik_core__test__example_2.snap
@@ -1,6 +1,5 @@
---
source: packages/optimizer/core/src/test.rs
-assertion_line: 113
expression: output
---
==INPUT==
@@ -14,15 +13,44 @@ export const Header = component$(() => {
);
});
+============================= test.tsx_Header_component_div_q_e_click_aMxtmYKxCwA.tsx (ENTRY POINT)==
+
+export const Header_component_div_q_e_click_aMxtmYKxCwA = (ctx)=>console.log(ctx);
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"0DAKkB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
+/*
+{
+ "origin": "test.tsx",
+ "name": "Header_component_div_q_e_click_aMxtmYKxCwA",
+ "entry": null,
+ "displayName": "test.tsx_Header_component_div_q_e_click",
+ "hash": "aMxtmYKxCwA",
+ "canonicalFilename": "test.tsx_Header_component_div_q_e_click_aMxtmYKxCwA",
+ "path": "",
+ "extension": "tsx",
+ "parent": "Header_component_J4uyIhaBNR4",
+ "ctxKind": "function",
+ "ctxName": "$",
+ "captures": false,
+ "loc": [
+ 142,
+ 167
+ ],
+ "paramNames": [
+ "ctx"
+ ]
+}
+*/
============================= test.tsx_Header_component_J4uyIhaBNR4.tsx (ENTRY POINT)==
import { qrl } from "@qwik.dev/core";
//
-const q_Header_component_div_onClick_i7ekvWH3674 = /*#__PURE__*/ qrl(()=>import("./test.tsx_Header_component_div_onClick_i7ekvWH3674"), "Header_component_div_onClick_i7ekvWH3674");
+const q_Header_component_div_q_e_click_aMxtmYKxCwA = /*#__PURE__*/ qrl(()=>import("./test.tsx_Header_component_div_q_e_click_aMxtmYKxCwA"), "Header_component_div_q_e_click_aMxtmYKxCwA");
//
export const Header_component_J4uyIhaBNR4 = ()=>{
console.log("mount");
- return ;
+ return ;
};
@@ -58,35 +86,6 @@ export const Header = /*#__PURE__*/ componentQrl(q_Header_component_J4uyIhaBNR4)
Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAEA,OAAO,MAAM,uBAAS,6CAKnB\"}")
-============================= test.tsx_Header_component_div_onClick_i7ekvWH3674.tsx (ENTRY POINT)==
-
-export const Header_component_div_onClick_i7ekvWH3674 = (ctx)=>console.log(ctx);
-
-
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"wDAKkB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
-/*
-{
- "origin": "test.tsx",
- "name": "Header_component_div_onClick_i7ekvWH3674",
- "entry": null,
- "displayName": "test.tsx_Header_component_div_onClick",
- "hash": "i7ekvWH3674",
- "canonicalFilename": "test.tsx_Header_component_div_onClick_i7ekvWH3674",
- "path": "",
- "extension": "tsx",
- "parent": "Header_component_J4uyIhaBNR4",
- "ctxKind": "function",
- "ctxName": "$",
- "captures": false,
- "loc": [
- 142,
- 167
- ],
- "paramNames": [
- "ctx"
- ]
-}
-*/
== DIAGNOSTICS ==
[]
diff --git a/packages/optimizer/core/src/snapshots/qwik_core__test__example_3.snap b/packages/optimizer/core/src/snapshots/qwik_core__test__example_3.snap
index 35b45fad2c0..19736f95ed9 100644
--- a/packages/optimizer/core/src/snapshots/qwik_core__test__example_3.snap
+++ b/packages/optimizer/core/src/snapshots/qwik_core__test__example_3.snap
@@ -1,6 +1,5 @@
---
source: packages/optimizer/core/src/test.rs
-assertion_line: 130
expression: output
---
==INPUT==
@@ -21,11 +20,11 @@ export const App = () => {
import { qrl } from "@qwik.dev/core";
//
-const q_App_Header_component_div_onClick_aO7uI7Iw6oQ = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_Header_component_div_onClick_aO7uI7Iw6oQ"), "App_Header_component_div_onClick_aO7uI7Iw6oQ");
+const q_App_Header_component_div_q_e_click_tbeQzUb0b9Q = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_Header_component_div_q_e_click_tbeQzUb0b9Q"), "App_Header_component_div_q_e_click_tbeQzUb0b9Q");
//
export const App_Header_component_B9F3YeqcO1w = ()=>{
console.log("mount");
- return ;
+ return ;
};
@@ -50,20 +49,34 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
]
}
*/
-============================= test.tsx_App_Header_component_div_onClick_aO7uI7Iw6oQ.tsx (ENTRY POINT)==
+============================= test.tsx ==
+
+import { componentQrl } from "@qwik.dev/core";
+import { qrl } from "@qwik.dev/core";
+//
+const q_App_Header_component_B9F3YeqcO1w = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_Header_component_B9F3YeqcO1w"), "App_Header_component_B9F3YeqcO1w");
+//
+export const App = ()=>{
+ const Header = /*#__PURE__*/ componentQrl(q_App_Header_component_B9F3YeqcO1w);
+ return Header;
+};
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAEA,OAAO,MAAM,MAAM;IAClB,MAAM,uBAAS;IAMf,OAAO;AACR,EAAG\"}")
+============================= test.tsx_App_Header_component_div_q_e_click_tbeQzUb0b9Q.tsx (ENTRY POINT)==
-export const App_Header_component_div_onClick_aO7uI7Iw6oQ = (ctx)=>console.log(ctx);
+export const App_Header_component_div_q_e_click_tbeQzUb0b9Q = (ctx)=>console.log(ctx);
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"4DAMmB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"8DAMmB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
/*
{
"origin": "test.tsx",
- "name": "App_Header_component_div_onClick_aO7uI7Iw6oQ",
+ "name": "App_Header_component_div_q_e_click_tbeQzUb0b9Q",
"entry": null,
- "displayName": "test.tsx_App_Header_component_div_onClick",
- "hash": "aO7uI7Iw6oQ",
- "canonicalFilename": "test.tsx_App_Header_component_div_onClick_aO7uI7Iw6oQ",
+ "displayName": "test.tsx_App_Header_component_div_q_e_click",
+ "hash": "tbeQzUb0b9Q",
+ "canonicalFilename": "test.tsx_App_Header_component_div_q_e_click_tbeQzUb0b9Q",
"path": "",
"extension": "tsx",
"parent": "App_Header_component_B9F3YeqcO1w",
@@ -79,20 +92,6 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
]
}
*/
-============================= test.tsx ==
-
-import { componentQrl } from "@qwik.dev/core";
-import { qrl } from "@qwik.dev/core";
-//
-const q_App_Header_component_B9F3YeqcO1w = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_Header_component_B9F3YeqcO1w"), "App_Header_component_B9F3YeqcO1w");
-//
-export const App = ()=>{
- const Header = /*#__PURE__*/ componentQrl(q_App_Header_component_B9F3YeqcO1w);
- return Header;
-};
-
-
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAEA,OAAO,MAAM,MAAM;IAClB,MAAM,uBAAS;IAMf,OAAO;AACR,EAAG\"}")
== DIAGNOSTICS ==
[]
diff --git a/packages/optimizer/core/src/snapshots/qwik_core__test__example_4.snap b/packages/optimizer/core/src/snapshots/qwik_core__test__example_4.snap
index c48b8916256..f762b818953 100644
--- a/packages/optimizer/core/src/snapshots/qwik_core__test__example_4.snap
+++ b/packages/optimizer/core/src/snapshots/qwik_core__test__example_4.snap
@@ -1,6 +1,5 @@
---
source: packages/optimizer/core/src/test.rs
-assertion_line: 150
expression: output
---
==INPUT==
@@ -21,11 +20,11 @@ export function App() {
import { qrl } from "@qwik.dev/core";
//
-const q_App_Header_component_div_onClick_aO7uI7Iw6oQ = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_Header_component_div_onClick_aO7uI7Iw6oQ"), "App_Header_component_div_onClick_aO7uI7Iw6oQ");
+const q_App_Header_component_div_q_e_click_tbeQzUb0b9Q = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_Header_component_div_q_e_click_tbeQzUb0b9Q"), "App_Header_component_div_q_e_click_tbeQzUb0b9Q");
//
export const App_Header_component_B9F3YeqcO1w = ()=>{
console.log("mount");
- return ;
+ return ;
};
@@ -50,20 +49,34 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
]
}
*/
-============================= test.tsx_App_Header_component_div_onClick_aO7uI7Iw6oQ.tsx (ENTRY POINT)==
+============================= test.tsx ==
+
+import { componentQrl } from "@qwik.dev/core";
+import { qrl } from "@qwik.dev/core";
+//
+const q_App_Header_component_B9F3YeqcO1w = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_Header_component_B9F3YeqcO1w"), "App_Header_component_B9F3YeqcO1w");
+//
+export function App() {
+ const Header = /*#__PURE__*/ componentQrl(q_App_Header_component_B9F3YeqcO1w);
+ return Header;
+}
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAEA,OAAO,SAAS;IACf,MAAM,uBAAS;IAMf,OAAO;AACR\"}")
+============================= test.tsx_App_Header_component_div_q_e_click_tbeQzUb0b9Q.tsx (ENTRY POINT)==
-export const App_Header_component_div_onClick_aO7uI7Iw6oQ = (ctx)=>console.log(ctx);
+export const App_Header_component_div_q_e_click_tbeQzUb0b9Q = (ctx)=>console.log(ctx);
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"4DAMmB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"8DAMmB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
/*
{
"origin": "test.tsx",
- "name": "App_Header_component_div_onClick_aO7uI7Iw6oQ",
+ "name": "App_Header_component_div_q_e_click_tbeQzUb0b9Q",
"entry": null,
- "displayName": "test.tsx_App_Header_component_div_onClick",
- "hash": "aO7uI7Iw6oQ",
- "canonicalFilename": "test.tsx_App_Header_component_div_onClick_aO7uI7Iw6oQ",
+ "displayName": "test.tsx_App_Header_component_div_q_e_click",
+ "hash": "tbeQzUb0b9Q",
+ "canonicalFilename": "test.tsx_App_Header_component_div_q_e_click_tbeQzUb0b9Q",
"path": "",
"extension": "tsx",
"parent": "App_Header_component_B9F3YeqcO1w",
@@ -79,20 +92,6 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
]
}
*/
-============================= test.tsx ==
-
-import { componentQrl } from "@qwik.dev/core";
-import { qrl } from "@qwik.dev/core";
-//
-const q_App_Header_component_B9F3YeqcO1w = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_Header_component_B9F3YeqcO1w"), "App_Header_component_B9F3YeqcO1w");
-//
-export function App() {
- const Header = /*#__PURE__*/ componentQrl(q_App_Header_component_B9F3YeqcO1w);
- return Header;
-}
-
-
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAEA,OAAO,SAAS;IACf,MAAM,uBAAS;IAMf,OAAO;AACR\"}")
== DIAGNOSTICS ==
[]
diff --git a/packages/optimizer/core/src/snapshots/qwik_core__test__example_5.snap b/packages/optimizer/core/src/snapshots/qwik_core__test__example_5.snap
index 34b089dda34..b6cb8a35d6c 100644
--- a/packages/optimizer/core/src/snapshots/qwik_core__test__example_5.snap
+++ b/packages/optimizer/core/src/snapshots/qwik_core__test__example_5.snap
@@ -1,6 +1,5 @@
---
source: packages/optimizer/core/src/test.rs
-assertion_line: 170
expression: output
---
==INPUT==
@@ -16,21 +15,50 @@ export const Header = component$(() => {
);
});
+============================= test.tsx_Header_component_div_q_e_click_aMxtmYKxCwA.tsx (ENTRY POINT)==
+
+export const Header_component_div_q_e_click_aMxtmYKxCwA = (ctx)=>console.log("2");
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"0DAMmB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
+/*
+{
+ "origin": "test.tsx",
+ "name": "Header_component_div_q_e_click_aMxtmYKxCwA",
+ "entry": null,
+ "displayName": "test.tsx_Header_component_div_q_e_click",
+ "hash": "aMxtmYKxCwA",
+ "canonicalFilename": "test.tsx_Header_component_div_q_e_click_aMxtmYKxCwA",
+ "path": "",
+ "extension": "tsx",
+ "parent": "Header_component_J4uyIhaBNR4",
+ "ctxKind": "function",
+ "ctxName": "$",
+ "captures": false,
+ "loc": [
+ 171,
+ 196
+ ],
+ "paramNames": [
+ "ctx"
+ ]
+}
+*/
============================= test.tsx_Header_component_J4uyIhaBNR4.tsx (ENTRY POINT)==
import { qrl } from "@qwik.dev/core";
//
-const q_Header_component_div_onClick_i7ekvWH3674 = /*#__PURE__*/ qrl(()=>import("./test.tsx_Header_component_div_onClick_i7ekvWH3674"), "Header_component_div_onClick_i7ekvWH3674");
+const q_Header_component_div_q_e_click_aMxtmYKxCwA = /*#__PURE__*/ qrl(()=>import("./test.tsx_Header_component_div_q_e_click_aMxtmYKxCwA"), "Header_component_div_q_e_click_aMxtmYKxCwA");
//
export const Header_component_J4uyIhaBNR4 = ()=>{
return <>
- console.log("1")}/>
-
+ console.log("1")}/>
+
;
};
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;4CAEiC;IAChC,SACG;GACD,CAAC,IAAI,SAAS,CAAC,MAAQ,QAAQ,GAAG,CAAC,OAAO;GAC1C,CAAC,IAAI,sDAAwC;EAC9C;AAEF\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;4CAEiC;IAChC,SACG;GACD,CAAC,IAAI,WAAS,CAAC,MAAQ,QAAQ,GAAG,CAAC,OAAO;GAC1C,CAAC,IAAI,0DAAwC;EAC9C;AAEF\"}")
/*
{
"origin": "test.tsx",
@@ -62,35 +90,6 @@ export const Header = /*#__PURE__*/ componentQrl(q_Header_component_J4uyIhaBNR4)
Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAEA,OAAO,MAAM,uBAAS,6CAOnB\"}")
-============================= test.tsx_Header_component_div_onClick_i7ekvWH3674.tsx (ENTRY POINT)==
-
-export const Header_component_div_onClick_i7ekvWH3674 = (ctx)=>console.log("2");
-
-
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"wDAMmB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
-/*
-{
- "origin": "test.tsx",
- "name": "Header_component_div_onClick_i7ekvWH3674",
- "entry": null,
- "displayName": "test.tsx_Header_component_div_onClick",
- "hash": "i7ekvWH3674",
- "canonicalFilename": "test.tsx_Header_component_div_onClick_i7ekvWH3674",
- "path": "",
- "extension": "tsx",
- "parent": "Header_component_J4uyIhaBNR4",
- "ctxKind": "function",
- "ctxName": "$",
- "captures": false,
- "loc": [
- 171,
- 196
- ],
- "paramNames": [
- "ctx"
- ]
-}
-*/
== DIAGNOSTICS ==
[]
diff --git a/packages/optimizer/core/src/snapshots/qwik_core__test__example_7.snap b/packages/optimizer/core/src/snapshots/qwik_core__test__example_7.snap
index 9cbded92485..1bc722f0a98 100644
--- a/packages/optimizer/core/src/snapshots/qwik_core__test__example_7.snap
+++ b/packages/optimizer/core/src/snapshots/qwik_core__test__example_7.snap
@@ -1,6 +1,5 @@
---
source: packages/optimizer/core/src/test.rs
-assertion_line: 201
expression: output
---
==INPUT==
@@ -21,15 +20,44 @@ const App = component$(() => {
);
});
+============================= test.tsx_Header_component_div_q_e_click_aMxtmYKxCwA.tsx (ENTRY POINT)==
+
+export const Header_component_div_q_e_click_aMxtmYKxCwA = (ctx)=>console.log(ctx);
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"0DAMkB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
+/*
+{
+ "origin": "test.tsx",
+ "name": "Header_component_div_q_e_click_aMxtmYKxCwA",
+ "entry": null,
+ "displayName": "test.tsx_Header_component_div_q_e_click",
+ "hash": "aMxtmYKxCwA",
+ "canonicalFilename": "test.tsx_Header_component_div_q_e_click_aMxtmYKxCwA",
+ "path": "",
+ "extension": "tsx",
+ "parent": "Header_component_J4uyIhaBNR4",
+ "ctxKind": "function",
+ "ctxName": "$",
+ "captures": false,
+ "loc": [
+ 143,
+ 168
+ ],
+ "paramNames": [
+ "ctx"
+ ]
+}
+*/
============================= test.tsx_Header_component_J4uyIhaBNR4.tsx (ENTRY POINT)==
import { qrl } from "@qwik.dev/core";
//
-const q_Header_component_div_onClick_i7ekvWH3674 = /*#__PURE__*/ qrl(()=>import("./test.tsx_Header_component_div_onClick_i7ekvWH3674"), "Header_component_div_onClick_i7ekvWH3674");
+const q_Header_component_div_q_e_click_aMxtmYKxCwA = /*#__PURE__*/ qrl(()=>import("./test.tsx_Header_component_div_q_e_click_aMxtmYKxCwA"), "Header_component_div_q_e_click_aMxtmYKxCwA");
//
export const Header_component_J4uyIhaBNR4 = ()=>{
console.log("mount");
- return ;
+ return ;
};
@@ -97,35 +125,6 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
]
}
*/
-============================= test.tsx_Header_component_div_onClick_i7ekvWH3674.tsx (ENTRY POINT)==
-
-export const Header_component_div_onClick_i7ekvWH3674 = (ctx)=>console.log(ctx);
-
-
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"wDAMkB,CAAC,MAAQ,QAAQ,GAAG,CAAC\"}")
-/*
-{
- "origin": "test.tsx",
- "name": "Header_component_div_onClick_i7ekvWH3674",
- "entry": null,
- "displayName": "test.tsx_Header_component_div_onClick",
- "hash": "i7ekvWH3674",
- "canonicalFilename": "test.tsx_Header_component_div_onClick_i7ekvWH3674",
- "path": "",
- "extension": "tsx",
- "parent": "Header_component_J4uyIhaBNR4",
- "ctxKind": "function",
- "ctxName": "$",
- "captures": false,
- "loc": [
- 143,
- 168
- ],
- "paramNames": [
- "ctx"
- ]
-}
-*/
== DIAGNOSTICS ==
[]
diff --git a/packages/optimizer/core/src/transform.rs b/packages/optimizer/core/src/transform.rs
index 93e8d32fd0f..4044cedf508 100644
--- a/packages/optimizer/core/src/transform.rs
+++ b/packages/optimizer/core/src/transform.rs
@@ -1795,7 +1795,7 @@ impl<'a> QwikTransform<'a> {
}
}
- // Transform event props (e.g., onClick$ -> q-e:click)
+ // Transform event props (e.g., onClick$/onClick -> q-e:click)
let is_passive = jsx_event_to_event_name(kw.as_ref())
.is_some_and(|event_name| context.passive_events.contains(&event_name));
if let Some(html_attr) = jsx_event_to_html_attribute(kw.as_ref(), is_passive) {
@@ -3979,7 +3979,7 @@ impl<'a> Fold for QwikTransform<'a> {
ast::JSXAttrName::Ident(ref ident) => {
let new_word = convert_qrl_word(&ident.sym);
- // Transform event names (onClick$ -> q-e:click) only on native HTML elements
+ // Transform event names (onClick$/onClick -> q-e:click) only on native HTML elements
let is_native_element = self.jsx_element_is_native.last().copied().unwrap_or(false);
let transformed_name = if is_native_element {
let passive_events = self.jsx_element_passive_events.last();
@@ -4806,19 +4806,15 @@ fn normalize_jsx_event_name(name: &str) -> String {
}
fn jsx_event_to_event_name(jsx_event: &str) -> Option {
- if !jsx_event.ends_with('$') {
- return None;
- }
-
let (_, idx) = get_event_scope_data_from_jsx_event(jsx_event, false);
if idx == usize::MAX {
return None;
}
- Some(normalize_jsx_event_name(
- &jsx_event[idx..jsx_event.len() - 1],
- ))
+ let end = jsx_event_name_end(jsx_event, idx)?;
+
+ Some(normalize_jsx_event_name(&jsx_event[idx..end]))
}
fn passive_attr_to_event_name(passive_attr: &str) -> Option {
@@ -4869,26 +4865,41 @@ fn collect_passive_event_names_from_jsx_attrs(attrs: &[ast::JSXAttrOrSpread]) ->
.collect()
}
-/// Converts JSX event names (e.g., onClick$) to HTML attribute names (e.g., q-e:click)
+/// Converts JSX event names (e.g., onClick$/onClick) to HTML attribute names (e.g., q-e:click)
/// Follows the same logic as jsxEventToHtmlAttribute in event-names.ts
fn jsx_event_to_html_attribute(jsx_event: &str, is_passive: bool) -> Option {
- if !jsx_event.ends_with('$') {
- return None;
- }
-
let (prefix, idx) = get_event_scope_data_from_jsx_event(jsx_event, is_passive);
if idx == usize::MAX {
return None;
}
+ let end = jsx_event_name_end(jsx_event, idx)?;
+
Some(Atom::from(format!(
"{}{}",
prefix,
- normalize_jsx_event_name(&jsx_event[idx..jsx_event.len() - 1])
+ normalize_jsx_event_name(&jsx_event[idx..end])
)))
}
+fn jsx_event_name_end(jsx_event: &str, idx: usize) -> Option {
+ if jsx_event.ends_with('$') {
+ let end = jsx_event.len() - 1;
+ if end > idx {
+ return Some(end);
+ }
+ return None;
+ }
+
+ let first_event_char = jsx_event[idx..].chars().next()?;
+ if first_event_char.is_ascii_uppercase() || first_event_char == '-' {
+ Some(jsx_event.len())
+ } else {
+ None
+ }
+}
+
/// Get the event scope prefix and starting index from a JSX event name
fn get_event_scope_data_from_jsx_event(jsx_event: &str, is_passive: bool) -> (&str, usize) {
if jsx_event.starts_with("window:on") {
diff --git a/packages/qwik-react/src/index.qwik.ts b/packages/qwik-react/src/index.qwik.ts
index 28e972d6b47..93704734f45 100644
--- a/packages/qwik-react/src/index.qwik.ts
+++ b/packages/qwik-react/src/index.qwik.ts
@@ -1,4 +1,4 @@
-export { qwikify$, qwikifyQrl } from './react/qwikify';
-export { reactify$, reactifyQrl } from './react/reactify';
+export { qwikify, qwikify$, qwikifyQrl } from './react/qwikify';
+export { reactify, reactify$, reactifyQrl } from './react/reactify';
export type { QwikifyProps } from './react/types';
diff --git a/packages/qwik-react/src/react/qwik-react-aliases.unit.tsx b/packages/qwik-react/src/react/qwik-react-aliases.unit.tsx
new file mode 100644
index 00000000000..a6a92f57e04
--- /dev/null
+++ b/packages/qwik-react/src/react/qwik-react-aliases.unit.tsx
@@ -0,0 +1,24 @@
+import { component$, type QRL } from '@qwik.dev/core';
+import { describe, expectTypeOf, test } from 'vitest';
+import type { FunctionComponent as ReactFC } from 'react';
+import { qwikify, qwikify$, qwikifyQrl } from './qwikify';
+import { reactify, reactify$, reactifyQrl } from './reactify';
+
+describe('qwik react aliases', () => {
+ test('qwikify and reactify accept plain values and QRLs', () => () => {
+ const ReactCmp: ReactFC<{ count: number; children?: unknown }> = () => null;
+ const ReactCmpQrl = true as any as QRL;
+ const QwikCmp = component$<{ count: number }>(() => null);
+ const QwikCmpQrl = true as any as QRL;
+
+ expectTypeOf(qwikify(ReactCmp)).not.toBeAny();
+ expectTypeOf(qwikify(ReactCmpQrl)).not.toBeAny();
+ expectTypeOf(qwikify$(() => null)).not.toBeAny();
+ expectTypeOf(qwikifyQrl(ReactCmpQrl)).not.toBeAny();
+
+ expectTypeOf(reactify(QwikCmp)).toBeAny();
+ expectTypeOf(reactify(QwikCmpQrl)).toBeAny();
+ expectTypeOf(reactify$(() => null)).toBeAny();
+ expectTypeOf(reactifyQrl(QwikCmpQrl)).toBeAny();
+ });
+});
diff --git a/packages/qwik-react/src/react/qwikify.tsx b/packages/qwik-react/src/react/qwikify.tsx
index 21d7f75492b..ae4357fa76c 100644
--- a/packages/qwik-react/src/react/qwikify.tsx
+++ b/packages/qwik-react/src/react/qwikify.tsx
@@ -24,6 +24,10 @@ import { getHostProps, main, mainExactProps, useWakeupSignal } from './slot';
import type { QwikProjectionState } from './slot';
import type { Internal, QwikifyOptions, QwikifyProps } from './types';
+const toQrl = (value: T | QRL): QRL => {
+ return value as QRL;
+};
+
export function qwikifyQrl>(
reactCmp$: QRL>,
opts?: QwikifyOptions
@@ -162,3 +166,10 @@ export function qwikifyQrl>(
}
export const qwikify$ = /*#__PURE__*/ implicit$FirstArg(qwikifyQrl);
+
+export const qwikify = >(
+ reactCmp: ReactFC | QRL>,
+ opts?: QwikifyOptions
+) => {
+ return qwikifyQrl(toQrl(reactCmp), opts);
+};
diff --git a/packages/qwik-react/src/react/reactify.ts b/packages/qwik-react/src/react/reactify.ts
index 0a385fe667d..b864fd22821 100644
--- a/packages/qwik-react/src/react/reactify.ts
+++ b/packages/qwik-react/src/react/reactify.ts
@@ -13,6 +13,10 @@ import {
type QwikProjectionState,
} from './slot';
+const toQrl = (value: T | QRL): QRL => {
+ return value as QRL;
+};
+
let slotCounter = 0;
/**
@@ -180,3 +184,8 @@ export function reactifyQrl(qwikCompQrl: QRL): any {
* @returns A React component that renders the Qwik component
*/
export const reactify$ = /*#__PURE__*/ implicit$FirstArg(reactifyQrl);
+
+/** @public */
+export const reactify = (qwikComp: any | QRL): any => {
+ return reactifyQrl(toQrl(qwikComp));
+};
diff --git a/packages/qwik-router/src/runtime/src/index.ts b/packages/qwik-router/src/runtime/src/index.ts
index c2e2c4a6732..ac12e7a69e8 100644
--- a/packages/qwik-router/src/runtime/src/index.ts
+++ b/packages/qwik-router/src/runtime/src/index.ts
@@ -72,18 +72,25 @@ export {
} from './qwik-router-component';
export { RouterOutlet } from './router-outlet-component';
export {
+ globalAction,
globalAction$,
globalActionQrl,
+ routeAction,
routeAction$,
routeActionQrl,
+ routeLoader,
routeLoader$,
routeLoaderQrl,
+ server,
server$,
serverQrl,
+ valibot,
valibot$,
valibotQrl,
+ validator,
validator$,
validatorQrl,
+ zod,
zod$,
zodQrl,
} from './server-functions';
@@ -94,6 +101,7 @@ export {
useHttpStatus,
useLocation,
useNavigate,
+ usePreventNavigate,
usePreventNavigate$,
usePreventNavigateQrl,
} from './use-functions';
diff --git a/packages/qwik-router/src/runtime/src/qwik-router.runtime.api.md b/packages/qwik-router/src/runtime/src/qwik-router.runtime.api.md
index 30358e7d8b5..0a80f5f784c 100644
--- a/packages/qwik-router/src/runtime/src/qwik-router.runtime.api.md
+++ b/packages/qwik-router/src/runtime/src/qwik-router.runtime.api.md
@@ -236,6 +236,10 @@ export type GetValidatorType = GetValidato
export const globalAction$: ActionConstructor;
// Warning: (ae-forgotten-export) The symbol "ActionConstructorQRL" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export const globalAction: ActionConstructor & ActionConstructorQRL;
+
// Warning: (ae-internal-missing-underscore) The name "globalActionQrl" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
@@ -449,6 +453,9 @@ export type ResolvedDocumentHead = Recor
// @public (undocumented)
export const routeAction$: ActionConstructor;
+// @public (undocumented)
+export const routeAction: ActionConstructor & ActionConstructorQRL;
+
// Warning: (ae-internal-missing-underscore) The name "routeActionQrl" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
@@ -492,6 +499,10 @@ export interface RouteData {
export const routeLoader$: LoaderConstructor;
// Warning: (ae-forgotten-export) The symbol "LoaderConstructorQRL" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export const routeLoader: LoaderConstructor & LoaderConstructorQRL;
+
// Warning: (ae-internal-missing-underscore) The name "routeLoaderQrl" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
@@ -525,6 +536,9 @@ export const RouterOutlet: Component;
// @public (undocumented)
export const server$: (qrl: T, options?: ServerConfig | undefined) => ServerQRL;
+// @public (undocumented)
+export const server: (fn: T | QRL, options?: ServerConfig) => ServerQRL;
+
// @public
export type ServerData = {
url: string;
@@ -600,6 +614,9 @@ export const useNavigate: () => RouteNavigate;
// @public
export const usePreventNavigate$: (qrl: PreventNavigateCallback) => void;
+// @public (undocumented)
+export const usePreventNavigate: (fn: PreventNavigateCallback | QRL) => void;
+
// Warning: (ae-internal-missing-underscore) The name "usePreventNavigateQrl" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal
@@ -614,6 +631,10 @@ export const useQwikRouter: (props?: QwikRouterProps) => void;
export const valibot$: ValibotConstructor;
// Warning: (ae-forgotten-export) The symbol "ValibotConstructorQRL" needs to be exported by the entry point index.d.ts
+//
+// @beta (undocumented)
+export const valibot: ValibotConstructor & ValibotConstructorQRL;
+
// Warning: (ae-internal-missing-underscore) The name "valibotQrl" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
@@ -624,6 +645,11 @@ export const valibotQrl: ValibotConstructorQRL;
// @public (undocumented)
export const validator$: ValidatorConstructor;
+// Warning: (ae-forgotten-export) The symbol "ValidatorConstructorQRL" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export const validator: ValidatorConstructor & ValidatorConstructorQRL;
+
// Warning: (ae-forgotten-export) The symbol "IsAny" needs to be exported by the entry point index.d.ts
//
// @public (undocumented)
@@ -639,7 +665,6 @@ export type ValidatorErrorType = {
}>;
};
-// Warning: (ae-forgotten-export) The symbol "ValidatorConstructorQRL" needs to be exported by the entry point index.d.ts
// Warning: (ae-internal-missing-underscore) The name "validatorQrl" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
@@ -656,6 +681,11 @@ export { z }
// @public (undocumented)
export const zod$: ZodConstructor;
+// Warning: (ae-forgotten-export) The symbol "ZodConstructorQRL" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export const zod: ZodConstructor & ZodConstructorQRL;
+
// @public (undocumented)
export type ZodConstructor = {
(schema: T): ZodDataValidator>;
@@ -664,7 +694,6 @@ export type ZodConstructor = {
(schema: (zod: typeof z_2.z, ev: RequestEvent) => T): ZodDataValidator;
};
-// Warning: (ae-forgotten-export) The symbol "ZodConstructorQRL" needs to be exported by the entry point index.d.ts
// Warning: (ae-internal-missing-underscore) The name "zodQrl" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
diff --git a/packages/qwik-router/src/runtime/src/server-functions.ts b/packages/qwik-router/src/runtime/src/server-functions.ts
index b10357a36c9..fe1fc3bfc32 100644
--- a/packages/qwik-router/src/runtime/src/server-functions.ts
+++ b/packages/qwik-router/src/runtime/src/server-functions.ts
@@ -63,6 +63,36 @@ import type {
} from './types';
import { useAction, useLocation, useQwikRouterEnv } from './use-functions';
+const toQrl = (value: T | QRL): QRL => {
+ return value as QRL;
+};
+
+type ActionCompatInput =
+ | QRL<(form: JSONObject, event: RequestEventAction) => ValueOrPromise>
+ | ((form: JSONObject, event: RequestEventAction) => ValueOrPromise);
+
+type LoaderCompatInput =
+ | QRL<(event: RequestEventLoader) => ValueOrPromise>
+ | ((event: RequestEventLoader) => ValueOrPromise);
+
+type ValidatorCompatInput =
+ | QRL<(ev: RequestEvent, data: unknown) => ValueOrPromise>
+ | ((ev: RequestEvent, data: unknown) => ValueOrPromise);
+
+type ValibotCompatInput =
+ | QRL
+ | QRL<(ev: RequestEvent) => v.GenericSchema | v.GenericSchemaAsync>
+ | v.GenericSchema
+ | v.GenericSchemaAsync
+ | ((ev: RequestEvent) => v.GenericSchema | v.GenericSchemaAsync);
+
+type ZodCompatInput =
+ | QRL
+ | QRL<(zod: typeof z.z, ev: RequestEvent) => z.ZodRawShape | z.Schema>
+ | z.ZodRawShape
+ | z.Schema
+ | ((zod: typeof z.z, ev: RequestEvent) => z.ZodRawShape | z.Schema);
+
/** @internal */
export const routeActionQrl = ((
actionQrl: QRL<(form: JSONObject, event: RequestEventAction) => unknown>,
@@ -187,11 +217,27 @@ export const routeAction$: ActionConstructor = /*#__PURE__*/ implicit$FirstArg(
routeActionQrl
) as any;
+/** @public */
+export const routeAction: ActionConstructor & ActionConstructorQRL = ((
+ action: ActionCompatInput,
+ ...rest: (ActionOptions | DataValidator)[]
+) => {
+ return routeActionQrl(toQrl(action), ...(rest as any));
+}) as any;
+
/** @public */
export const globalAction$: ActionConstructor = /*#__PURE__*/ implicit$FirstArg(
globalActionQrl
) as any;
+/** @public */
+export const globalAction: ActionConstructor & ActionConstructorQRL = ((
+ action: ActionCompatInput,
+ ...rest: (ActionOptions | DataValidator)[]
+) => {
+ return globalActionQrl(toQrl(action), ...(rest as any));
+}) as any;
+
const getValue = (obj: T) => obj.value;
/** @internal */
export const routeLoaderQrl = ((
@@ -235,6 +281,14 @@ export const routeLoaderQrl = ((
/** @public */
export const routeLoader$: LoaderConstructor = /*#__PURE__*/ implicit$FirstArg(routeLoaderQrl);
+/** @public */
+export const routeLoader: LoaderConstructor & LoaderConstructorQRL = ((
+ loader: LoaderCompatInput,
+ ...rest: (LoaderOptions | DataValidator)[]
+) => {
+ return routeLoaderQrl(toQrl(loader), ...(rest as any));
+}) as any;
+
/** @internal */
export const validatorQrl = ((
validator: QRL<(ev: RequestEvent, data: unknown) => ValueOrPromise>
@@ -250,6 +304,13 @@ export const validatorQrl = ((
/** @public */
export const validator$: ValidatorConstructor = /*#__PURE__*/ implicit$FirstArg(validatorQrl);
+/** @public */
+export const validator: ValidatorConstructor & ValidatorConstructorQRL = ((
+ fn: ValidatorCompatInput
+) => {
+ return validatorQrl(toQrl(fn));
+}) as any;
+
const flattenValibotIssues = (issues: v.GenericIssue[]) => {
return issues.reduce>((acc, issue) => {
if (issue.path) {
@@ -323,6 +384,13 @@ export const valibotQrl: ValibotConstructorQRL = (
/** @beta */
export const valibot$: ValibotConstructor = /*#__PURE__*/ implicit$FirstArg(valibotQrl);
+/** @beta */
+export const valibot: ValibotConstructor & ValibotConstructorQRL = ((
+ schema: ValibotCompatInput
+) => {
+ return valibotQrl(toQrl(schema) as Parameters[0]);
+}) as any;
+
const flattenZodIssues = (issues: z.ZodIssue | z.ZodIssue[]) => {
issues = Array.isArray(issues) ? issues : [issues];
return issues.reduce |
|---|
|
|---|
|
|---|
|
|---|
|