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([