Skip to content

Commit 89a07ff

Browse files
wmertenswmertens
authored
Merge pull request #8134 from QwikDev/v2-types
fix(core): qresume event + jsx types fixes
2 parents 338ac31 + ab5c685 commit 89a07ff

File tree

27 files changed

+284
-310
lines changed

27 files changed

+284
-310
lines changed

‎.changeset/tricky-dogs-cross.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@qwik.dev/core': patch
3+
---
4+
5+
FIX: The types for the JSX event handlers are more precise about their scope (e.g. no `document:OnQVisible$` or `onQIdle$`).

‎packages/docs/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
"devDependencies": {
88
"@algolia/autocomplete-core": "1.7.4",
99
"@algolia/client-search": "4.14.3",
10-
"@builder.io/qwik": "npm:@qwik.dev/core@*",
11-
"@builder.io/qwik-city": "npm:@qwik.dev/router@*",
1210
"@emotion/react": "11.14.0",
1311
"@emotion/styled": "11.14.1",
1412
"@modular-forms/qwik": "0.29.1",

‎packages/docs/src/components/docsearch/doc-search.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const DocSearch = component$((props: DocSearchProps) => {
7777
<div
7878
class={{ docsearch: true, 'ai-result-open': aiResultOpen.value }}
7979
window:onKeyDown$={[
80-
sync$((event: KeyboardEvent) => {
80+
sync$((event) => {
8181
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
8282
event.preventDefault();
8383
}

‎packages/docs/src/components/theme-toggle/Brilliance.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { component$ } from '@builder.io/qwik';
1+
import { component$ } from '@qwik.dev/core';
22

33
interface BrillianceIconProps {
44
class?: string;

‎packages/docs/src/components/theme-toggle/Moon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { component$ } from '@builder.io/qwik';
1+
import { component$ } from '@qwik.dev/core';
22

33
interface MoonIconProps {
44
class?: string;

‎packages/docs/src/components/theme-toggle/Sun.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { component$ } from '@builder.io/qwik';
1+
import { component$ } from '@qwik.dev/core';
22

33
interface SunIconProps {
44
class?: string;

‎packages/docs/src/components/theme-toggle/theme-toggle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* The effective theme is stored on the `<html>` element as a `data-theme` attribute. There is also
55
* the `data-theme-auto` attribute which is present when the user has selected "auto" theme.
66
*/
7-
import { component$, event$, isServer, useContext, useStyles$ } from '@builder.io/qwik';
7+
import { component$, event$, isServer, useContext, useStyles$ } from '@qwik.dev/core';
88
import { useVisibleTask$ } from '@qwik.dev/core';
99
import { GlobalStore, type SiteStore } from '~/context';
1010
import { BrillianceIcon } from './Brilliance';

‎packages/docs/src/routes/api/qwik/api.json‎

Lines changed: 35 additions & 7 deletions
Large diffs are not rendered by default.

‎packages/docs/src/routes/api/qwik/index.mdx‎

Lines changed: 31 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2805,7 +2805,7 @@ export type QRL<TYPE = unknown> = {
28052805
getCaptured(): unknown[] | null;
28062806
getSymbol(): string;
28072807
getHash(): string;
2808-
dev: QRLDev | null;
2808+
dev?: QRLDev | null;
28092809
} & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
28102810
```
28112811
@@ -2913,7 +2913,7 @@ export type QRL<TYPE = unknown> = {
29132913
getCaptured(): unknown[] | null;
29142914
getSymbol(): string;
29152915
getHash(): string;
2916-
dev: QRLDev | null;
2916+
dev?: QRLDev | null;
29172917
} & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
29182918
```
29192919
@@ -2928,8 +2928,7 @@ export type QRLEventHandlerMulti<EV extends Event, EL> =
29282928
| QRL<EventHandler<EV, EL>>
29292929
| undefined
29302930
| null
2931-
| QRLEventHandlerMulti<EV, EL>[]
2932-
| EventHandler<EV, EL>;
2931+
| QRLEventHandlerMulti<EV, EL>[];
29332932
```
29342933
29352934
**References:** [QRL](#qrl), [EventHandler](#eventhandler), [QRLEventHandlerMulti](#qrleventhandlermulti)
@@ -3262,6 +3261,16 @@ export type QwikPointerEvent<T = Element> = NativePointerEvent;
32623261
32633262
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts)
32643263
3264+
## QwikResumeEvent
3265+
3266+
Emitted by qwik-core on the container element when it resumes from a paused state. You cannot put a Qwik event handler on the container so you must listen on the document instead.
3267+
3268+
```typescript
3269+
export type QwikResumeEvent = CustomEvent<{}>;
3270+
```
3271+
3272+
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts)
3273+
32653274
## QwikSubmitEvent
32663275
32673276
> Warning: This API is now obsolete.
@@ -3293,7 +3302,7 @@ export type QwikSVGElements = {
32933302
32943303
## QwikSymbolEvent
32953304
3296-
Emitted by qwik-loader when a module was lazily loaded
3305+
Emitted by qwik-loader on document when a module was lazily loaded
32973306
32983307
```typescript
32993308
export type QwikSymbolEvent = CustomEvent<{
@@ -3351,9 +3360,19 @@ export type QwikUIEvent<T = Element> = NativeUIEvent;
33513360
33523361
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts)
33533362
3363+
## QwikViewTransitionEvent
3364+
3365+
Emitted by qwik-core on document when the a view transition start
3366+
3367+
```typescript
3368+
export type QwikViewTransitionEvent = CustomEvent<ViewTransition>;
3369+
```
3370+
3371+
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-events.ts)
3372+
33543373
## QwikVisibleEvent
33553374
3356-
Emitted by qwik-loader when an element becomes visible. Used by `useVisibleTask$`
3375+
Handled by qwik-loader when an element becomes visible. Used by `useVisibleTask$`. Does not bubble.
33573376
33583377
```typescript
33593378
export type QwikVisibleEvent = CustomEvent<IntersectionObserverEntry>;
@@ -8728,68 +8747,14 @@ Function to extract.
87288747
## SyncQRL
87298748
87308749
```typescript
8731-
export interface SyncQRL<TYPE extends Function = any> extends QRL<TYPE>
8750+
export type SyncQRL<TYPE extends Function> = QRL<TYPE> & {
8751+
__brand__SyncQRL__: TYPE;
8752+
resolved: TYPE;
8753+
dev?: QRLDev | null;
8754+
} & BivariantQrlFn<QrlArgs<TYPE>, QrlReturn<TYPE>>;
87328755
```
87338756
8734-
**Extends:** [QRL](#qrl)&lt;TYPE&gt;
8735-
8736-
<table><thead><tr><th>
8737-
8738-
Property
8739-
8740-
</th><th>
8741-
8742-
Modifiers
8743-
8744-
</th><th>
8745-
8746-
Type
8747-
8748-
</th><th>
8749-
8750-
Description
8751-
8752-
</th></tr></thead>
8753-
<tbody><tr><td>
8754-
8755-
[\_\_brand\_\_SyncQRL\_\_](#)
8756-
8757-
</td><td>
8758-
8759-
</td><td>
8760-
8761-
TYPE
8762-
8763-
</td><td>
8764-
8765-
</td></tr>
8766-
<tr><td>
8767-
8768-
[dev](#)
8769-
8770-
</td><td>
8771-
8772-
</td><td>
8773-
8774-
QRLDev \| null
8775-
8776-
</td><td>
8777-
8778-
</td></tr>
8779-
<tr><td>
8780-
8781-
[resolved](#)
8782-
8783-
</td><td>
8784-
8785-
</td><td>
8786-
8787-
TYPE
8788-
8789-
</td><td>
8790-
8791-
</td></tr>
8792-
</tbody></table>
8757+
**References:** [QRL](#qrl)
87938758
87948759
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/qrl/qrl.public.ts)
87958760

‎packages/docs/src/routes/demo/cookbook/drag&drop/basic/index.tsx‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ export default component$(() => {
1919
class="h-[25em] w-80 rounded-xl border-2 border-dashed border-gray-300 bg-white p-6 shadow-xs transition-all duration-300 hover:border-gray-400 [&[data-over]]:border-blue-300 [&[data-over]]:bg-blue-50"
2020
preventdefault:dragover
2121
preventdefault:drop
22-
onDragOver$={sync$((_: DragEvent, currentTarget: HTMLDivElement) => {
22+
onDragOver$={sync$((_, currentTarget) => {
2323
currentTarget.setAttribute('data-over', 'true');
2424
})}
25-
onDragLeave$={sync$((_: DragEvent, currentTarget: HTMLDivElement) => {
25+
onDragLeave$={sync$((_, currentTarget) => {
2626
currentTarget.removeAttribute('data-over');
2727
})}
2828
onDrop$={[
29-
sync$((e: DragEvent, currentTarget: HTMLDivElement) => {
29+
sync$((e, currentTarget) => {
3030
const id = e.dataTransfer?.getData('text');
3131
currentTarget.dataset.droppedId = id;
3232
currentTarget.removeAttribute('data-over');
@@ -51,14 +51,12 @@ export default component$(() => {
5151
data-id={item.id}
5252
class="min-h-[62px] mb-3 cursor-move select-none rounded-lg border border-gray-200 bg-white p-4 transition-all duration-200 hover:-translate-y-1 hover:shadow-md active:scale-95"
5353
draggable
54-
onDragStart$={sync$(
55-
(e: DragEvent, currentTarget: HTMLDivElement) => {
56-
const itemId = currentTarget.getAttribute('data-id');
57-
if (e.dataTransfer && itemId) {
58-
e.dataTransfer?.setData('text/plain', itemId);
59-
}
54+
onDragStart$={sync$((e, currentTarget) => {
55+
const itemId = currentTarget.getAttribute('data-id');
56+
if (e.dataTransfer && itemId) {
57+
e.dataTransfer?.setData('text/plain', itemId);
6058
}
61-
)}
59+
})}
6260
>
6361
<span class="text-lg text-gray-700">{item.content}</span>
6462
</div>
@@ -69,14 +67,14 @@ export default component$(() => {
6967
class="h-[25em] w-80 rounded-xl border-2 border-dashed border-gray-300 bg-white p-6 shadow-xs transition-all duration-300 hover:border-gray-400 [&[data-over]]:border-blue-300 [&[data-over]]:bg-blue-50"
7068
preventdefault:dragover
7169
preventdefault:drop
72-
onDragOver$={sync$((_: DragEvent, currentTarget: HTMLDivElement) => {
70+
onDragOver$={sync$((_, currentTarget) => {
7371
currentTarget.setAttribute('data-over', 'true');
7472
})}
75-
onDragLeave$={sync$((_: DragEvent, currentTarget: HTMLDivElement) => {
73+
onDragLeave$={sync$((_, currentTarget) => {
7674
currentTarget.removeAttribute('data-over');
7775
})}
7876
onDrop$={[
79-
sync$((e: DragEvent, currentTarget: HTMLDivElement) => {
77+
sync$((e, currentTarget) => {
8078
const id = e.dataTransfer?.getData('text');
8179
currentTarget.dataset.droppedId = id;
8280
currentTarget.removeAttribute('data-over');
@@ -101,14 +99,12 @@ export default component$(() => {
10199
data-id={item.id}
102100
class="min-h-[62px] mb-3 cursor-move select-none rounded-lg border border-gray-200 bg-white p-4 transition-all duration-200 hover:-translate-y-1 hover:shadow-md active:scale-95"
103101
draggable
104-
onDragStart$={sync$(
105-
(e: DragEvent, currentTarget: HTMLDivElement) => {
106-
const itemId = currentTarget.getAttribute('data-id');
107-
if (e.dataTransfer && itemId) {
108-
e.dataTransfer?.setData('text/plain', itemId);
109-
}
102+
onDragStart$={sync$((e, currentTarget) => {
103+
const itemId = currentTarget.getAttribute('data-id');
104+
if (e.dataTransfer && itemId) {
105+
e.dataTransfer?.setData('text/plain', itemId);
110106
}
111-
)}
107+
})}
112108
>
113109
<span class="text-lg text-gray-700">{item.content}</span>
114110
</div>

0 commit comments

Comments
 (0)