From fbbfb21e11988bed788d57c1da7cf05f99f521b8 Mon Sep 17 00:00:00 2001 From: Varixo Date: Sat, 28 Dec 2024 20:54:54 +0100 Subject: [PATCH 1/2] fix: add and remove var prop attribute --- packages/qwik/src/core/client/vnode-diff.ts | 20 ++++--- .../qwik/src/core/tests/attributes.spec.tsx | 54 +++++++++++++++++++ 2 files changed, 66 insertions(+), 8 deletions(-) diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts index 5bde3ab76ab..67a9474ea5c 100644 --- a/packages/qwik/src/core/client/vnode-diff.ts +++ b/packages/qwik/src/core/client/vnode-diff.ts @@ -848,23 +848,27 @@ export const vnode_diff = ( if (dstKey && isHtmlAttributeAnEventName(dstKey)) { patchEventDispatch = true; dstIdx++; - } else if (dstKey) { - record(dstKey, null); + } else { + record(dstKey!, null); dstIdx--; } dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null; } else if (dstKey == null) { // Destination has more keys, so we need to insert them from source. const isEvent = isJsxPropertyAnEventName(srcKey); - if (srcKey && isEvent) { + if (isEvent) { // Special handling for events patchEventDispatch = true; recordJsxEvent(srcKey, srcAttrs[srcIdx]); - } else if (srcKey) { - record(srcKey, srcAttrs[srcIdx]); + } else { + record(srcKey!, srcAttrs[srcIdx]); } srcIdx++; srcKey = srcIdx < srcLength ? srcAttrs[srcIdx++] : null; + // we need to increment dstIdx too, because we added destination key and value to the VNode + // and dstAttrs is a reference to the VNode + dstIdx++; + dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null; } else if (srcKey == dstKey) { const srcValue = srcAttrs[srcIdx++]; const dstValue = dstAttrs[dstIdx++]; @@ -892,11 +896,11 @@ export const vnode_diff = ( dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null; } else { // Source is missing the key, so we need to remove it from destination. - if (dstKey && isHtmlAttributeAnEventName(dstKey)) { + if (isHtmlAttributeAnEventName(dstKey)) { patchEventDispatch = true; dstIdx++; - } else if (dstKey) { - record(dstKey, null); + } else { + record(dstKey!, null); dstIdx--; } dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null; diff --git a/packages/qwik/src/core/tests/attributes.spec.tsx b/packages/qwik/src/core/tests/attributes.spec.tsx index 4826dfdbbd3..a344e5ead77 100644 --- a/packages/qwik/src/core/tests/attributes.spec.tsx +++ b/packages/qwik/src/core/tests/attributes.spec.tsx @@ -383,4 +383,58 @@ describe.each([ ); }); + + it('should add and remove var props on destination vnode', async () => { + const Tab = component$((props: any) => { + return ; + }); + + const Wrapper = component$(() => { + const selected = useSignal(0); + return ( + <> + (selected.value = 0)} + /> + (selected.value = 1)} + /> + + ); + }); + + const { vNode, document } = await render(, { debug }); + + expect(vNode).toMatchVDOM( + + + + + + + + + + + ); + + await trigger(document.body, 'button[id=button-1]', 'click'); + + expect(vNode).toMatchVDOM( + + + + + + + + + + + ); + }); }); From 2ff2551e6c0cc06bd0d759ecbf5e58411cada90b Mon Sep 17 00:00:00 2001 From: Varixo Date: Sun, 29 Dec 2024 19:03:51 +0100 Subject: [PATCH 2/2] update qwik-ui --- packages/docs/package.json | 2 +- pnpm-lock.yaml | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index 8f46d17afd7..29f95f894ab 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -18,7 +18,7 @@ "@mui/material": "5.16.4", "@mui/system": "5.16.4", "@mui/x-data-grid": "6.20.4", - "@qwik-ui/headless": "0.5.0", + "@qwik-ui/headless": "0.6.3", "@qwik.dev/core": "workspace:*", "@qwik.dev/react": "workspace:*", "@qwik.dev/router": "workspace:*", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c3f8174b17..675296eb747 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -308,8 +308,8 @@ importers: specifier: 6.20.4 version: 6.20.4(@mui/material@5.16.4(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@5.16.4(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@qwik-ui/headless': - specifier: 0.5.0 - version: 0.5.0(@builder.io/qwik@packages+qwik) + specifier: 0.6.3 + version: 0.6.3(@builder.io/qwik@packages+qwik) '@qwik.dev/core': specifier: workspace:* version: link:../qwik @@ -3089,11 +3089,11 @@ packages: engines: {node: '>=18'} hasBin: true - '@qwik-ui/headless@0.5.0': - resolution: {integrity: sha512-hplG9Dw5VR+k4N70TjchrCG2Sw/U4mNBLmed6EEgjkxg/zQrDaEfpw/2IzXSBqr2k98QFrKehJjvetLszmkPDQ==} + '@qwik-ui/headless@0.6.3': + resolution: {integrity: sha512-ms6IVfQdS81gWeBCosav0pF29sFCmai3ih4cKUpOwhrtpu/VcYWnMH1vHzYypTmmKU2pM0pVFqgnCuDS+qY58w==} engines: {node: '>=16.0.0'} peerDependencies: - '@builder.io/qwik': ^1.5.5 + '@builder.io/qwik': '>=1.3.1' '@rollup/pluginutils@4.2.1': resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==} @@ -6728,7 +6728,6 @@ packages: libsql@0.4.7: resolution: {integrity: sha512-T9eIRCs6b0J1SHKYIvD8+KCJMcWZ900iZyxdnSCdqxN12Z1ijzT+jY5nrk72Jw4B0HGzms2NgpryArlJqvc3Lw==} - cpu: [x64, arm64, wasm32] os: [darwin, linux, win32] light-my-request@5.13.0: @@ -12025,7 +12024,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@qwik-ui/headless@0.5.0(@builder.io/qwik@packages+qwik)': + '@qwik-ui/headless@0.6.3(@builder.io/qwik@packages+qwik)': dependencies: '@builder.io/qwik': link:packages/qwik '@floating-ui/core': 1.6.2