From 892d99afb38e213ed2fc8ba59aaa7fc4984de612 Mon Sep 17 00:00:00 2001 From: JerryWu <409187100@qq.com> Date: Mon, 13 Jan 2025 21:37:49 +0800 Subject: [PATCH 01/18] fix: enhance slot rendering and add useOnDocument test --- package.json | 2 +- packages/qwik/src/core/ssr/ssr-render-jsx.ts | 2 ++ packages/qwik/src/core/tests/use-on.spec.tsx | 25 +++++++++++++++++++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4e73df42aa1..565ed69c832 100644 --- a/package.json +++ b/package.json @@ -235,7 +235,7 @@ "tsc.trace": "tsc -p tsconfig.json --traceResolution > tsc.log", "tsc.watch": "tsc --noEmit --watch --preserveWatchOutput", "update.qwik.builds": "tsx --require ./scripts/runBefore.ts scripts/update-qwik-builds.ts packages/docs && tsx scripts/update-qwik-builds.ts packages/insights; pnpm install", - "vitest": "vitest" + "vitest": "vitest run use-on.spec" }, "simple-git-hooks": { "pre-commit": "pnpm pretty-quick --staged" diff --git a/packages/qwik/src/core/ssr/ssr-render-jsx.ts b/packages/qwik/src/core/ssr/ssr-render-jsx.ts index 354d9f0afcb..0947aa3740d 100644 --- a/packages/qwik/src/core/ssr/ssr-render-jsx.ts +++ b/packages/qwik/src/core/ssr/ssr-render-jsx.ts @@ -245,6 +245,7 @@ function processJSXNode( const node = ssr.getLastNode(); const slotName = getSlotName(host, jsx, ssr); projectionAttrs.push(QSlot, slotName); + enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame)); enqueue(ssr.closeProjection); const slotDefaultChildren: JSXChildren | null = jsx.children || null; @@ -253,6 +254,7 @@ function processJSXNode( if (slotDefaultChildren && slotChildren !== slotDefaultChildren) { ssr.addUnclaimedProjection(componentFrame, QDefaultSlot, slotDefaultChildren); } + enqueue(slotDefaultChildren as JSXOutput); enqueue(slotChildren as JSXOutput); enqueue( new ParentComponentData( diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index 99e473a1a02..34f57145b60 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -5,6 +5,7 @@ import { component$, Fragment, Fragment as Signal, + Slot, useOn, useOnDocument, useOnWindow, @@ -16,7 +17,7 @@ import { domRender, ssrRenderToDom } from '@qwik.dev/core/testing'; import { describe, expect, it } from 'vitest'; import { trigger } from '../../testing/element-fixture'; -const debug = false; //true; +const debug = true; //true; Error.stackTraceLimit = 100; describe.each([ @@ -647,4 +648,26 @@ describe.each([ await trigger(document.body, 'div', 'click'); await expect(document.querySelector('div')).toMatchDOM(
1
); }); + it.only('useOnDocument', async () => { + const BreakpointProvider = component$(() => { + useOnDocument( + 'click', + $(async () => { + console.log('load1111111111'); + }) + ); + + return ; + }); + + const Layout = component$(() => { + return ( + +
11333
+
+ ); + }); + const { document } = await render(, { debug }); + await trigger(document.body, 'script', ':document:click'); + }); }); From a0fde9ad1c992f78d21284cc2f67e8cd225e0ed8 Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 15 Jan 2025 16:31:15 +0800 Subject: [PATCH 02/18] fix --- packages/qwik/src/core/client/vnode-diff.ts | 7 +++++-- packages/qwik/src/core/ssr/ssr-render-jsx.ts | 9 ++++++--- packages/qwik/src/core/tests/use-on.spec.tsx | 11 +++++------ 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts index 7bb62f59edc..6ea17821297 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 { JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node'; +import type { JSXNode, 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 { trackSignalAndAssignHost } from '../use/use-core'; @@ -224,7 +224,9 @@ export const vnode_diff = ( descend(jsxValue.children, true); } else if (type === Slot) { expectNoMoreTextNodes(); - if (!expectSlot()) { + if ((jsxValue.children as JSXNode)?.type === 'script') { + descend(jsxValue.children, true); + } else if (!expectSlot()) { // nothing to project, so try to render the Slot default content. descend(jsxValue.children, true); } @@ -500,6 +502,7 @@ export const vnode_diff = ( (vNewNode = vnode_newVirtual()), vCurrent && getInsertBefore() ); + vnode_setProp(vNewNode, QSlot, slotNameKey); vHost && vnode_setProp(vHost, slotNameKey, vNewNode); isDev && vnode_setProp(vNewNode, DEBUG_TYPE, VirtualType.Projection); diff --git a/packages/qwik/src/core/ssr/ssr-render-jsx.ts b/packages/qwik/src/core/ssr/ssr-render-jsx.ts index 0947aa3740d..b4992653872 100644 --- a/packages/qwik/src/core/ssr/ssr-render-jsx.ts +++ b/packages/qwik/src/core/ssr/ssr-render-jsx.ts @@ -251,10 +251,12 @@ function processJSXNode( const slotDefaultChildren: JSXChildren | null = jsx.children || null; const slotChildren = componentFrame.consumeChildrenForSlot(node, slotName) || slotDefaultChildren; - if (slotDefaultChildren && slotChildren !== slotDefaultChildren) { + if ((slotDefaultChildren as JSXNodeInternal)?.type === 'script') { + enqueue(slotDefaultChildren as JSXOutput); + } else if (slotDefaultChildren && slotChildren !== slotDefaultChildren) { ssr.addUnclaimedProjection(componentFrame, QDefaultSlot, slotDefaultChildren); } - enqueue(slotDefaultChildren as JSXOutput); + // enqueue(slotDefaultChildren as JSXOutput); enqueue(slotChildren as JSXOutput); enqueue( new ParentComponentData( @@ -302,7 +304,8 @@ function processJSXNode( options.styleScoped, options.parentComponentFrame ); - const jsxOutput = applyQwikComponentBody(ssr, jsx, type); + + const jsxOutput: any = applyQwikComponentBody(ssr, jsx, type); const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle)); enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame)); enqueue(ssr.closeComponent); diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index 34f57145b60..841a1d36f0f 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -21,7 +21,7 @@ const debug = true; //true; Error.stackTraceLimit = 100; describe.each([ - { render: ssrRenderToDom }, // + // { render: ssrRenderToDom }, // { render: domRender }, // ])('$render.name: useOn', ({ render }) => { it('should update value', async () => { @@ -652,9 +652,7 @@ describe.each([ const BreakpointProvider = component$(() => { useOnDocument( 'click', - $(async () => { - console.log('load1111111111'); - }) + $(async () => {}) ); return ; @@ -663,11 +661,12 @@ describe.each([ const Layout = component$(() => { return ( -
11333
+
test
); }); const { document } = await render(, { debug }); - await trigger(document.body, 'script', ':document:click'); + // await trigger(document.body, 'script', ':document:click'); + await expect(document.querySelector('script')).toBeTruthy(); }); }); From 8b41e6ee528ec81fd8a5c302a133bfe33e50baaf Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 15 Jan 2025 17:08:12 +0800 Subject: [PATCH 03/18] fix --- packages/qwik/src/core/tests/use-on.spec.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index 841a1d36f0f..0876e9dd21a 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -17,11 +17,11 @@ import { domRender, ssrRenderToDom } from '@qwik.dev/core/testing'; import { describe, expect, it } from 'vitest'; import { trigger } from '../../testing/element-fixture'; -const debug = true; //true; +const debug = false; //true; Error.stackTraceLimit = 100; describe.each([ - // { render: ssrRenderToDom }, // + { render: ssrRenderToDom }, // { render: domRender }, // ])('$render.name: useOn', ({ render }) => { it('should update value', async () => { @@ -648,7 +648,7 @@ describe.each([ await trigger(document.body, 'div', 'click'); await expect(document.querySelector('div')).toMatchDOM(
1
); }); - it.only('useOnDocument', async () => { + it('useOnDocument', async () => { const BreakpointProvider = component$(() => { useOnDocument( 'click', @@ -666,7 +666,6 @@ describe.each([ ); }); const { document } = await render(, { debug }); - // await trigger(document.body, 'script', ':document:click'); await expect(document.querySelector('script')).toBeTruthy(); }); }); From 051d1bc70e2776c0df5fd5fbd45b5a6137ec08fd Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 15 Jan 2025 17:13:24 +0800 Subject: [PATCH 04/18] fix --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 19a960d6afa..31f9e06496d 100644 --- a/package.json +++ b/package.json @@ -235,7 +235,7 @@ "tsc.trace": "tsc -p tsconfig.json --traceResolution > tsc.log", "tsc.watch": "tsc --noEmit --watch --preserveWatchOutput", "update.qwik.builds": "tsx --require ./scripts/runBefore.ts scripts/update-qwik-builds.ts packages/docs && tsx scripts/update-qwik-builds.ts packages/insights; pnpm install", - "vitest": "vitest run use-on.spec" + "vitest": "vitest" }, "simple-git-hooks": { "pre-commit": "pnpm pretty-quick --staged" From 9678045d180690a7064c167237b0b3a4f44e2c01 Mon Sep 17 00:00:00 2001 From: wuls Date: Wed, 15 Jan 2025 17:46:34 +0800 Subject: [PATCH 05/18] fix --- packages/qwik/src/core/client/vnode-diff.ts | 7 ++++--- packages/qwik/src/core/tests/use-on.spec.tsx | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts index 6ea17821297..f5d0dedd1d9 100644 --- a/packages/qwik/src/core/client/vnode-diff.ts +++ b/packages/qwik/src/core/client/vnode-diff.ts @@ -224,12 +224,13 @@ export const vnode_diff = ( descend(jsxValue.children, true); } else if (type === Slot) { expectNoMoreTextNodes(); - if ((jsxValue.children as JSXNode)?.type === 'script') { - descend(jsxValue.children, true); - } else if (!expectSlot()) { + if (!expectSlot()) { // nothing to project, so try to render the Slot default content. descend(jsxValue.children, true); } + if ((jsxValue.children as JSXNode)?.type === 'script') { + descend(jsxValue.children, true); + } } else if (type === Projection) { expectProjection(); descend(jsxValue.children, true); diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index 0876e9dd21a..7b85f91fdbd 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -648,7 +648,7 @@ describe.each([ await trigger(document.body, 'div', 'click'); await expect(document.querySelector('div')).toMatchDOM(
1
); }); - it('useOnDocument', async () => { + it('useOnDocument1111', async () => { const BreakpointProvider = component$(() => { useOnDocument( 'click', From d80338e48676fdbedd7861826f493b6c152287a3 Mon Sep 17 00:00:00 2001 From: wuls Date: Thu, 16 Jan 2025 18:22:04 +0800 Subject: [PATCH 06/18] fix --- package.json | 2 +- packages/qwik/src/core/client/vnode-diff.ts | 4 +-- packages/qwik/src/core/ssr/ssr-render-jsx.ts | 5 +-- packages/qwik/src/core/tests/use-on.spec.tsx | 35 ++++++++++++++++++-- 4 files changed, 36 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 31f9e06496d..600e0525a9e 100644 --- a/package.json +++ b/package.json @@ -235,7 +235,7 @@ "tsc.trace": "tsc -p tsconfig.json --traceResolution > tsc.log", "tsc.watch": "tsc --noEmit --watch --preserveWatchOutput", "update.qwik.builds": "tsx --require ./scripts/runBefore.ts scripts/update-qwik-builds.ts packages/docs && tsx scripts/update-qwik-builds.ts packages/insights; pnpm install", - "vitest": "vitest" + "vitest": "vitest run use-on.spec.tsx" }, "simple-git-hooks": { "pre-commit": "pnpm pretty-quick --staged" diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts index f5d0dedd1d9..ca1f7af8496 100644 --- a/packages/qwik/src/core/client/vnode-diff.ts +++ b/packages/qwik/src/core/client/vnode-diff.ts @@ -228,9 +228,7 @@ export const vnode_diff = ( // nothing to project, so try to render the Slot default content. descend(jsxValue.children, true); } - if ((jsxValue.children as JSXNode)?.type === 'script') { - descend(jsxValue.children, true); - } + descend(jsxValue.children, false); } else if (type === Projection) { expectProjection(); descend(jsxValue.children, true); diff --git a/packages/qwik/src/core/ssr/ssr-render-jsx.ts b/packages/qwik/src/core/ssr/ssr-render-jsx.ts index b4992653872..9f0b027acb2 100644 --- a/packages/qwik/src/core/ssr/ssr-render-jsx.ts +++ b/packages/qwik/src/core/ssr/ssr-render-jsx.ts @@ -251,12 +251,9 @@ function processJSXNode( const slotDefaultChildren: JSXChildren | null = jsx.children || null; const slotChildren = componentFrame.consumeChildrenForSlot(node, slotName) || slotDefaultChildren; - if ((slotDefaultChildren as JSXNodeInternal)?.type === 'script') { - enqueue(slotDefaultChildren as JSXOutput); - } else if (slotDefaultChildren && slotChildren !== slotDefaultChildren) { + if (slotDefaultChildren && slotChildren !== slotDefaultChildren) { ssr.addUnclaimedProjection(componentFrame, QDefaultSlot, slotDefaultChildren); } - // enqueue(slotDefaultChildren as JSXOutput); enqueue(slotChildren as JSXOutput); enqueue( new ParentComponentData( diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index 7b85f91fdbd..71d20eaff02 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -17,7 +17,7 @@ import { domRender, ssrRenderToDom } from '@qwik.dev/core/testing'; import { describe, expect, it } from 'vitest'; import { trigger } from '../../testing/element-fixture'; -const debug = false; //true; +const debug = true; //true; Error.stackTraceLimit = 100; describe.each([ @@ -648,16 +648,47 @@ describe.each([ await trigger(document.body, 'div', 'click'); await expect(document.querySelector('div')).toMatchDOM(
1
); }); - it('useOnDocument1111', async () => { + it.only('useOnDocument1111', async () => { const BreakpointProvider = component$(() => { useOnDocument( 'click', $(async () => {}) ); + useOnWindow( + 'resize', + $(async () => {}) + ); + + useVisibleTask$(() => {}); + return ; }); + const Layout = component$(() => { + return ( + +
test
+
+ ); + }); + const { document } = await render(, { debug }); + await expect(document.querySelector('script')).toBeTruthy(); + }); + it('useOnDocument1111', async () => { + const BreakpointProvider = component$(() => { + useOnDocument( + 'click', + $(async () => {}) + ); + + return ( + <> + + + ); + }); + const Layout = component$(() => { return ( From 80aaf3798efabe29bcdb28e7854e5058d6f5ea48 Mon Sep 17 00:00:00 2001 From: wuls Date: Thu, 16 Jan 2025 19:29:44 +0800 Subject: [PATCH 07/18] fix --- packages/qwik/src/core/ssr/ssr-render-jsx.ts | 1 + packages/qwik/src/core/tests/use-on.spec.tsx | 26 ++++++++++++++++++-- packages/qwik/src/server/ssr-container.ts | 1 + 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/qwik/src/core/ssr/ssr-render-jsx.ts b/packages/qwik/src/core/ssr/ssr-render-jsx.ts index 9f0b027acb2..e3649ea39a6 100644 --- a/packages/qwik/src/core/ssr/ssr-render-jsx.ts +++ b/packages/qwik/src/core/ssr/ssr-render-jsx.ts @@ -254,6 +254,7 @@ function processJSXNode( if (slotDefaultChildren && slotChildren !== slotDefaultChildren) { ssr.addUnclaimedProjection(componentFrame, QDefaultSlot, slotDefaultChildren); } + console.log('slotChildren', slotChildren); enqueue(slotChildren as JSXOutput); enqueue( new ParentComponentData( diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index 71d20eaff02..efe2d4db1e5 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -22,7 +22,7 @@ Error.stackTraceLimit = 100; describe.each([ { render: ssrRenderToDom }, // - { render: domRender }, // + // { render: domRender }, // ])('$render.name: useOn', ({ render }) => { it('should update value', async () => { const Counter = component$((props: { initial: number }) => { @@ -648,7 +648,7 @@ describe.each([ await trigger(document.body, 'div', 'click'); await expect(document.querySelector('div')).toMatchDOM(
1
); }); - it.only('useOnDocument1111', async () => { + it('useOnDocument1111', async () => { const BreakpointProvider = component$(() => { useOnDocument( 'click', @@ -699,4 +699,26 @@ describe.each([ const { document } = await render(, { debug }); await expect(document.querySelector('script')).toBeTruthy(); }); + + it.only('useOnDocument1111', async () => { + const Accordion = component$(() => { + const isOpen = useSignal(true); + + return ( +
+

(isOpen.value = !isOpen.value)}>{isOpen.value ? '▼' : '▶︎'}

+ {isOpen.value && } +
+ ); + }); + const Apptest = component$(() => { + useOnWindow( + 'click', + $(async () => {}) + ); + return I am pre-rendered on the Server and hidden until needed.; + }); + const { document } = await render(, { debug }); + await expect(document.querySelector('script')).toBeTruthy(); + }); }); diff --git a/packages/qwik/src/server/ssr-container.ts b/packages/qwik/src/server/ssr-container.ts index 48a3d7defb7..7331ce458c7 100644 --- a/packages/qwik/src/server/ssr-container.ts +++ b/packages/qwik/src/server/ssr-container.ts @@ -940,6 +940,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer { private async emitUnclaimedProjection() { const unclaimedProjections = this.unclaimedProjections; + console.log('unclaimedProjections', unclaimedProjections); if (unclaimedProjections.length) { const previousCurrentComponentNode = this.currentComponentNode; try { From 79d3fb74a34801dd0cf962db207cf5397b860696 Mon Sep 17 00:00:00 2001 From: wuls Date: Sat, 18 Jan 2025 18:14:57 +0800 Subject: [PATCH 08/18] fix --- packages/qwik/src/core/client/vnode-diff.ts | 3 +- .../src/core/shared/component-execution.ts | 13 +++- packages/qwik/src/core/ssr/ssr-render-jsx.ts | 1 - packages/qwik/src/core/tests/use-on.spec.tsx | 74 +++++++++---------- packages/qwik/src/server/ssr-container.ts | 1 - 5 files changed, 47 insertions(+), 45 deletions(-) diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts index ca1f7af8496..0d7bb60a254 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, JSXNodeInternal, 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 { trackSignalAndAssignHost } from '../use/use-core'; @@ -228,7 +228,6 @@ export const vnode_diff = ( // nothing to project, so try to render the Slot default content. descend(jsxValue.children, true); } - descend(jsxValue.children, false); } else if (type === Projection) { expectProjection(); descend(jsxValue.children, true); diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts index 42bb4ac7759..1cddb0be6b0 100644 --- a/packages/qwik/src/core/shared/component-execution.ts +++ b/packages/qwik/src/core/shared/component-execution.ts @@ -2,8 +2,8 @@ import { isDev } from '@qwik.dev/core/build'; 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 { JSXNodeInternal, JSXOutput } from './jsx/types/jsx-node'; +import { Fragment, JSXNodeImpl, _jsxSorted, isJSXNode, type Props } from './jsx/jsx-runtime'; +import type { FunctionComponent, 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'; @@ -23,6 +23,7 @@ import { logWarn } from './utils/log'; import { EffectProperty, isSignal } from '../signal/signal'; import { vnode_isVNode } from '../client/vnode'; import { clearVNodeEffectDependencies } from '../signal/signal-subscriber'; +import { Slot } from '..'; /** * Use `executeComponent` to execute a component. @@ -101,7 +102,13 @@ export const executeComponent = ( (jsx) => { const useOnEvents = container.getHostProp(renderHost, USE_ON_LOCAL); if (useOnEvents) { - return maybeThen(addUseOnEvents(jsx, useOnEvents), () => jsx); + let _jsx = jsx; + if (_jsx && (_jsx as JSXNodeInternal).type === Slot) { + _jsx = _jsxSorted(Fragment, null, null, [jsx], 0, null); + } + return maybeThen(addUseOnEvents(_jsx, useOnEvents), () => { + return _jsx; + }); } return jsx; }, diff --git a/packages/qwik/src/core/ssr/ssr-render-jsx.ts b/packages/qwik/src/core/ssr/ssr-render-jsx.ts index e3649ea39a6..9f0b027acb2 100644 --- a/packages/qwik/src/core/ssr/ssr-render-jsx.ts +++ b/packages/qwik/src/core/ssr/ssr-render-jsx.ts @@ -254,7 +254,6 @@ function processJSXNode( if (slotDefaultChildren && slotChildren !== slotDefaultChildren) { ssr.addUnclaimedProjection(componentFrame, QDefaultSlot, slotDefaultChildren); } - console.log('slotChildren', slotChildren); enqueue(slotChildren as JSXOutput); enqueue( new ParentComponentData( diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index efe2d4db1e5..03ad28a6940 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -2,6 +2,7 @@ import { $, Fragment as Awaited, Fragment as Component, + Fragment as Projection, component$, Fragment, Fragment as Signal, @@ -22,7 +23,7 @@ Error.stackTraceLimit = 100; describe.each([ { render: ssrRenderToDom }, // - // { render: domRender }, // + // { render: domRender }, /// ])('$render.name: useOn', ({ render }) => { it('should update value', async () => { const Counter = component$((props: { initial: number }) => { @@ -648,16 +649,17 @@ describe.each([ await trigger(document.body, 'div', 'click'); await expect(document.querySelector('div')).toMatchDOM(
1
); }); - it('useOnDocument1111', async () => { + + it('issue 7230, when multiple useOnWindow are used in a component that is not rendered, it should add multiple script nodes', async () => { const BreakpointProvider = component$(() => { useOnDocument( 'click', - $(async () => {}) + $(() => {}) ); useOnWindow( 'resize', - $(async () => {}) + $(() => {}) ); useVisibleTask$(() => {}); @@ -665,28 +667,35 @@ describe.each([ return ; }); - const Layout = component$(() => { + const LayoutTest = component$(() => { return (
test
); }); - const { document } = await render(, { debug }); - await expect(document.querySelector('script')).toBeTruthy(); + const { vNode } = await render(, { debug }); + expect(vNode).toMatchVDOM( + + + +
test
+ + + +
+
+
+ ); }); - it('useOnDocument1111', async () => { + it.only('issue 7230, when useOnDocument is used in a component that is not rendered, it should add a script node', async () => { const BreakpointProvider = component$(() => { useOnDocument( 'click', - $(async () => {}) + $(() => {}) ); - return ( - <> - - - ); + return ; }); const Layout = component$(() => { @@ -696,29 +705,18 @@ describe.each([
); }); - const { document } = await render(, { debug }); - await expect(document.querySelector('script')).toBeTruthy(); - }); - - it.only('useOnDocument1111', async () => { - const Accordion = component$(() => { - const isOpen = useSignal(true); - - return ( -
-

(isOpen.value = !isOpen.value)}>{isOpen.value ? '▼' : '▶︎'}

- {isOpen.value && } -
- ); - }); - const Apptest = component$(() => { - useOnWindow( - 'click', - $(async () => {}) - ); - return I am pre-rendered on the Server and hidden until needed.; - }); - const { document } = await render(, { debug }); - await expect(document.querySelector('script')).toBeTruthy(); + const { vNode } = await render(, { debug }); + expect(vNode).toMatchVDOM( + + + + +
test
+
+ +
+
+
+ ); }); }); diff --git a/packages/qwik/src/server/ssr-container.ts b/packages/qwik/src/server/ssr-container.ts index 7331ce458c7..48a3d7defb7 100644 --- a/packages/qwik/src/server/ssr-container.ts +++ b/packages/qwik/src/server/ssr-container.ts @@ -940,7 +940,6 @@ class SSRContainer extends _SharedContainer implements ISSRContainer { private async emitUnclaimedProjection() { const unclaimedProjections = this.unclaimedProjections; - console.log('unclaimedProjections', unclaimedProjections); if (unclaimedProjections.length) { const previousCurrentComponentNode = this.currentComponentNode; try { From fc83532a14b43f087d20b91d5b6a6e62dc56b2dc Mon Sep 17 00:00:00 2001 From: wuls Date: Sat, 18 Jan 2025 18:38:36 +0800 Subject: [PATCH 09/18] fix --- package.json | 2 +- packages/qwik/src/core/tests/use-on.spec.tsx | 16 +++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 600e0525a9e..31f9e06496d 100644 --- a/package.json +++ b/package.json @@ -235,7 +235,7 @@ "tsc.trace": "tsc -p tsconfig.json --traceResolution > tsc.log", "tsc.watch": "tsc --noEmit --watch --preserveWatchOutput", "update.qwik.builds": "tsx --require ./scripts/runBefore.ts scripts/update-qwik-builds.ts packages/docs && tsx scripts/update-qwik-builds.ts packages/insights; pnpm install", - "vitest": "vitest run use-on.spec.tsx" + "vitest": "vitest" }, "simple-git-hooks": { "pre-commit": "pnpm pretty-quick --staged" diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index 03ad28a6940..ec01ea88fe6 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -18,12 +18,12 @@ import { domRender, ssrRenderToDom } from '@qwik.dev/core/testing'; import { describe, expect, it } from 'vitest'; import { trigger } from '../../testing/element-fixture'; -const debug = true; //true; +const debug = false; //true; Error.stackTraceLimit = 100; describe.each([ { render: ssrRenderToDom }, // - // { render: domRender }, /// + { render: domRender }, /// ])('$render.name: useOn', ({ render }) => { it('should update value', async () => { const Counter = component$((props: { initial: number }) => { @@ -678,17 +678,19 @@ describe.each([ expect(vNode).toMatchVDOM( - -
test
+ + +
test
+
-
+
); }); - it.only('issue 7230, when useOnDocument is used in a component that is not rendered, it should add a script node', async () => { + it('issue 7230, when useOnDocument is used in a component that is not rendered, it should add a script node', async () => { const BreakpointProvider = component$(() => { useOnDocument( 'click', @@ -711,7 +713,7 @@ describe.each([ -
test
+
test
From 08ac62c0d3d1a5a5f3f4f856a0c05c299b5e40d5 Mon Sep 17 00:00:00 2001 From: wuls Date: Mon, 20 Jan 2025 09:14:58 +0800 Subject: [PATCH 10/18] fix --- packages/qwik/src/core/client/vnode-diff.ts | 1 - packages/qwik/src/core/shared/component-execution.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts index 0d7bb60a254..7bb62f59edc 100644 --- a/packages/qwik/src/core/client/vnode-diff.ts +++ b/packages/qwik/src/core/client/vnode-diff.ts @@ -500,7 +500,6 @@ export const vnode_diff = ( (vNewNode = vnode_newVirtual()), vCurrent && getInsertBefore() ); - vnode_setProp(vNewNode, QSlot, slotNameKey); vHost && vnode_setProp(vHost, slotNameKey, vNewNode); isDev && vnode_setProp(vNewNode, DEBUG_TYPE, VirtualType.Projection); diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts index 1cddb0be6b0..5a1d675265a 100644 --- a/packages/qwik/src/core/shared/component-execution.ts +++ b/packages/qwik/src/core/shared/component-execution.ts @@ -23,7 +23,7 @@ import { logWarn } from './utils/log'; import { EffectProperty, isSignal } from '../signal/signal'; import { vnode_isVNode } from '../client/vnode'; import { clearVNodeEffectDependencies } from '../signal/signal-subscriber'; -import { Slot } from '..'; +import { Slot } from '../shared/jsx/slot.public'; /** * Use `executeComponent` to execute a component. From 294ff31b389b93483967fcfbd23894d0e61eabe0 Mon Sep 17 00:00:00 2001 From: Jerry_wu <409187100@qq.com> Date: Mon, 20 Jan 2025 13:24:24 +0800 Subject: [PATCH 11/18] Create old-mayflies-fetch.md --- .changeset/old-mayflies-fetch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/old-mayflies-fetch.md diff --git a/.changeset/old-mayflies-fetch.md b/.changeset/old-mayflies-fetch.md new file mode 100644 index 00000000000..1b47c91d512 --- /dev/null +++ b/.changeset/old-mayflies-fetch.md @@ -0,0 +1,5 @@ +--- +'@qwik.dev/core': patch +--- + +fix: the use hook didn't work when type is Slot. From aad81e3c0238f759b7bcddcb7d35a81a2cb67d43 Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 21 Jan 2025 13:31:23 +0800 Subject: [PATCH 12/18] fix wrong name --- packages/qwik/src/core/tests/use-on.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index ec01ea88fe6..54718308d80 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -650,7 +650,7 @@ describe.each([ await expect(document.querySelector('div')).toMatchDOM(
1
); }); - it('issue 7230, when multiple useOnWindow are used in a component that is not rendered, it should add multiple script nodes', async () => { + it('#7230 - when multiple useOn are used in a component that is not rendered, it should add multiple script nodes', async () => { const BreakpointProvider = component$(() => { useOnDocument( 'click', @@ -690,7 +690,7 @@ describe.each([
); }); - it('issue 7230, when useOnDocument is used in a component that is not rendered, it should add a script node', async () => { + it('#7230 - when useOnDocument is used in a component that is not rendered, it should add a script node', async () => { const BreakpointProvider = component$(() => { useOnDocument( 'click', From 4e41e48a0604a0ba52fae5ee220c614e62bc8d6d Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 21 Jan 2025 15:22:17 +0800 Subject: [PATCH 13/18] optimize the code --- package.json | 2 +- .../src/core/shared/component-execution.ts | 32 +++++++++++-------- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 31f9e06496d..77beae9e37b 100644 --- a/package.json +++ b/package.json @@ -235,7 +235,7 @@ "tsc.trace": "tsc -p tsconfig.json --traceResolution > tsc.log", "tsc.watch": "tsc --noEmit --watch --preserveWatchOutput", "update.qwik.builds": "tsx --require ./scripts/runBefore.ts scripts/update-qwik-builds.ts packages/docs && tsx scripts/update-qwik-builds.ts packages/insights; pnpm install", - "vitest": "vitest" + "vitest": "vitest run use-visible-task.spec" }, "simple-git-hooks": { "pre-commit": "pnpm pretty-quick --staged" diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts index 5a1d675265a..5f71aa26243 100644 --- a/packages/qwik/src/core/shared/component-execution.ts +++ b/packages/qwik/src/core/shared/component-execution.ts @@ -102,11 +102,7 @@ export const executeComponent = ( (jsx) => { const useOnEvents = container.getHostProp(renderHost, USE_ON_LOCAL); if (useOnEvents) { - let _jsx = jsx; - if (_jsx && (_jsx as JSXNodeInternal).type === Slot) { - _jsx = _jsxSorted(Fragment, null, null, [jsx], 0, null); - } - return maybeThen(addUseOnEvents(_jsx, useOnEvents), () => { + return maybeThen(addUseOnEvents(jsx, useOnEvents), (_jsx) => { return _jsx; }); } @@ -140,8 +136,9 @@ export const executeComponent = ( function addUseOnEvents( jsx: JSXOutput, useOnEvents: UseOnMap -): ValueOrPromise | null> { +): ValueOrPromise | null | JSXOutput> { const jsxElement = findFirstStringJSX(jsx); + let _jsx = jsx; return maybeThen(jsxElement, (jsxElement) => { let isInvisibleComponent = false; if (!jsxElement) { @@ -160,12 +157,14 @@ function addUseOnEvents( if (Object.prototype.hasOwnProperty.call(useOnEvents, key)) { if (isInvisibleComponent) { if (key === 'onQvisible$') { - jsxElement = addScriptNodeForInvisibleComponents(jsx); + const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(_jsx); + _jsx = jsx; if (jsxElement) { addUseOnEvent(jsxElement, 'document:onQinit$', useOnEvents[key]); } } else if (key.startsWith('document:') || key.startsWith('window:')) { - jsxElement = addScriptNodeForInvisibleComponents(jsx); + const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(_jsx); + _jsx = jsx; if (jsxElement) { addUseOnEvent(jsxElement, key, useOnEvents[key]); } @@ -183,7 +182,7 @@ function addUseOnEvents( } } } - return jsxElement; + return _jsx || jsx; }); } @@ -228,7 +227,9 @@ function findFirstStringJSX(jsx: JSXOutput): ValueOrPromise | null { +function addScriptNodeForInvisibleComponents( + jsx: JSXOutput +): [JSXNodeInternal | null, JSXOutput | null] { if (isJSXNode(jsx)) { const jsxElement = new JSXNodeImpl( 'script', @@ -240,6 +241,10 @@ function addScriptNodeForInvisibleComponents(jsx: JSXOutput): JSXNodeInternal Date: Tue, 21 Jan 2025 15:31:36 +0800 Subject: [PATCH 14/18] remove redundancy code --- packages/qwik/src/core/shared/component-execution.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts index 5f71aa26243..d6871cd6bca 100644 --- a/packages/qwik/src/core/shared/component-execution.ts +++ b/packages/qwik/src/core/shared/component-execution.ts @@ -242,7 +242,6 @@ function addScriptNodeForInvisibleComponents( 3 ); if (jsx.type === Slot) { - debugger; return [jsxElement, _jsxSorted(Fragment, null, null, [jsx, jsxElement], 0, null)]; } From 1d7a60d0e655ad36eb6289f779739ff5fef73314 Mon Sep 17 00:00:00 2001 From: wuls Date: Tue, 21 Jan 2025 15:58:34 +0800 Subject: [PATCH 15/18] remove redundancy code --- packages/qwik/src/core/shared/component-execution.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts index d6871cd6bca..a81d6ddd960 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 { Fragment, JSXNodeImpl, _jsxSorted, isJSXNode, type Props } from './jsx/jsx-runtime'; -import type { FunctionComponent, JSXNodeInternal, 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'; From 1d12dedcb064f31dd07a2f0e21d31bbd9bff3be6 Mon Sep 17 00:00:00 2001 From: JerryWu <409187100@qq.com> Date: Sat, 25 Jan 2025 09:43:27 +0800 Subject: [PATCH 16/18] fix: solve all problems that mentioned --- .../qwik/src/core/shared/component-execution.ts | 14 +++++++------- packages/qwik/src/core/ssr/ssr-render-jsx.ts | 2 +- packages/qwik/src/core/tests/use-on.spec.tsx | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts index a81d6ddd960..239f4135703 100644 --- a/packages/qwik/src/core/shared/component-execution.ts +++ b/packages/qwik/src/core/shared/component-execution.ts @@ -138,7 +138,7 @@ function addUseOnEvents( useOnEvents: UseOnMap ): ValueOrPromise | null | JSXOutput> { const jsxElement = findFirstStringJSX(jsx); - let _jsx = jsx; + let jsxResult = jsx; return maybeThen(jsxElement, (jsxElement) => { let isInvisibleComponent = false; if (!jsxElement) { @@ -157,14 +157,14 @@ function addUseOnEvents( if (Object.prototype.hasOwnProperty.call(useOnEvents, key)) { if (isInvisibleComponent) { if (key === 'onQvisible$') { - const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(_jsx); - _jsx = jsx; + const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult); + jsxResult = jsx; if (jsxElement) { addUseOnEvent(jsxElement, 'document:onQinit$', useOnEvents[key]); } } else if (key.startsWith('document:') || key.startsWith('window:')) { - const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(_jsx); - _jsx = jsx; + const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult); + jsxResult = jsx; if (jsxElement) { addUseOnEvent(jsxElement, key, useOnEvents[key]); } @@ -182,7 +182,7 @@ function addUseOnEvents( } } } - return _jsx || jsx; + return jsxResult; }); } @@ -255,7 +255,7 @@ function addScriptNodeForInvisibleComponents( return [jsxElement, jsx]; } else if (Array.isArray(jsx) && jsx.length) { // get first element - const [jsxElement, _jsx] = addScriptNodeForInvisibleComponents(jsx[0]); + const [jsxElement, _] = addScriptNodeForInvisibleComponents(jsx[0]); return [jsxElement, jsx]; } diff --git a/packages/qwik/src/core/ssr/ssr-render-jsx.ts b/packages/qwik/src/core/ssr/ssr-render-jsx.ts index 9f0b027acb2..93c89d87848 100644 --- a/packages/qwik/src/core/ssr/ssr-render-jsx.ts +++ b/packages/qwik/src/core/ssr/ssr-render-jsx.ts @@ -302,7 +302,7 @@ function processJSXNode( options.parentComponentFrame ); - const jsxOutput: any = applyQwikComponentBody(ssr, jsx, type); + const jsxOutput = applyQwikComponentBody(ssr, jsx, type); const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle)); enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame)); enqueue(ssr.closeComponent); diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx index 54718308d80..8d301e0fd63 100644 --- a/packages/qwik/src/core/tests/use-on.spec.tsx +++ b/packages/qwik/src/core/tests/use-on.spec.tsx @@ -23,7 +23,7 @@ Error.stackTraceLimit = 100; describe.each([ { render: ssrRenderToDom }, // - { render: domRender }, /// + { render: domRender }, // ])('$render.name: useOn', ({ render }) => { it('should update value', async () => { const Counter = component$((props: { initial: number }) => { From dccc5fcbd0c9a3144f77fec3b0931fd54a526fe6 Mon Sep 17 00:00:00 2001 From: JerryWu <409187100@qq.com> Date: Sun, 26 Jan 2025 10:51:34 +0800 Subject: [PATCH 17/18] remove rebundant code --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 77beae9e37b..31f9e06496d 100644 --- a/package.json +++ b/package.json @@ -235,7 +235,7 @@ "tsc.trace": "tsc -p tsconfig.json --traceResolution > tsc.log", "tsc.watch": "tsc --noEmit --watch --preserveWatchOutput", "update.qwik.builds": "tsx --require ./scripts/runBefore.ts scripts/update-qwik-builds.ts packages/docs && tsx scripts/update-qwik-builds.ts packages/insights; pnpm install", - "vitest": "vitest run use-visible-task.spec" + "vitest": "vitest" }, "simple-git-hooks": { "pre-commit": "pnpm pretty-quick --staged" From 4793ed01ba9e3bfe3f4fe8b10470d3c18eceeca3 Mon Sep 17 00:00:00 2001 From: JerryWu <409187100@qq.com> Date: Tue, 28 Jan 2025 21:24:55 +0800 Subject: [PATCH 18/18] directly return value --- packages/qwik/src/core/shared/component-execution.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts index 239f4135703..ed8fdea5b1e 100644 --- a/packages/qwik/src/core/shared/component-execution.ts +++ b/packages/qwik/src/core/shared/component-execution.ts @@ -102,9 +102,7 @@ export const executeComponent = ( (jsx) => { const useOnEvents = container.getHostProp(renderHost, USE_ON_LOCAL); if (useOnEvents) { - return maybeThen(addUseOnEvents(jsx, useOnEvents), (_jsx) => { - return _jsx; - }); + return addUseOnEvents(jsx, useOnEvents); } return jsx; },