Skip to content

Commit ea6ed77

Browse files
VarixoVarixo
committed
fix set attributes
1 parent 3c8a4a8 commit ea6ed77

File tree

4 files changed

+96
-55
lines changed

4 files changed

+96
-55
lines changed

‎packages/qwik/src/core/v2/client/vnode-diff.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Slot } from '../../render/jsx/slot.public';
1010
import type { JSXNode, JSXOutput } from '../../render/jsx/types/jsx-node';
1111
import type { JSXChildren } from '../../render/jsx/types/jsx-qwik-attributes';
1212
import { SSRComment, SSRRaw, SkipRender } from '../../render/jsx/utils.public';
13-
import { trackSignal2 } from '../../use/use-core';
13+
import { trackSignal2, untrack } from '../../use/use-core';
1414
import { TaskFlags, cleanupTask, isTask } from '../../use/use-task';
1515
import { EMPTY_OBJ } from '../../util/flyweight';
1616
import {
@@ -773,6 +773,10 @@ export const vnode_diff = (
773773
}
774774
}
775775

776+
if (isSignal2(value)) {
777+
value = untrack(() => value.value);
778+
}
779+
776780
vnode_setAttr(journal, vnode, key, value);
777781
if (value === null) {
778782
// if we set `null` than attribute was removed and we need to shorten the dstLength

‎packages/qwik/src/core/v2/shared/scheduler.ts

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,13 @@ import { logWarn } from '../../util/log';
9797
import { isPromise, maybeThen, maybeThenPassError, safeCall } from '../../util/promises';
9898
import type { ValueOrPromise } from '../../util/types';
9999
import { isDomContainer } from '../client/dom-container';
100-
import type { VirtualVNode } from '../client/types';
101-
import { vnode_documentPosition, vnode_isVNode, vnode_setAttr } from '../client/vnode';
100+
import { ElementVNodeProps, type ElementVNode, type VirtualVNode } from '../client/types';
101+
import {
102+
vnode_documentPosition,
103+
vnode_isVNode,
104+
vnode_setAttr,
105+
VNodeJournalOpCode,
106+
} from '../client/vnode';
102107
import { vnode_diff } from '../client/vnode-diff';
103108
import { executeComponent2 } from './component-execution';
104109
import type { Container2, HostElement, fixMeAny } from './types';
@@ -343,16 +348,24 @@ export const createScheduler = (
343348
returnValue = vnode_diff(container as DomContainer, jsx, parentVirtualNode, null);
344349
break;
345350
case ChoreType.NODE_PROP:
346-
const virtualNode = chore.$host$ as VirtualVNode;
351+
const virtualNode = chore.$host$ as unknown as ElementVNode;
347352
const payload = chore.$payload$ as NodePropPayload;
348353
let value = payload.value;
354+
// TODO: temp solution!
355+
let isConst = false;
349356
if (isSignal2(value)) {
350357
value = value.value as any;
358+
isConst = true;
351359
}
352360
const journal = (container as DomContainer).$journal$;
353361
const property = chore.$idx$ as string;
354362
value = serializeAttribute(property, value, payload.scopedStyleIdPrefix);
355-
vnode_setAttr(journal, virtualNode, property, value);
363+
if (isConst) {
364+
const element = virtualNode[ElementVNodeProps.element] as Element;
365+
journal.push(VNodeJournalOpCode.SetAttribute, element, property, value);
366+
} else {
367+
vnode_setAttr(journal, virtualNode, property, value);
368+
}
356369
break;
357370
case ChoreType.QRL_RESOLVE: {
358371
const target = chore.$target$ as QRLInternal<any>;

‎packages/qwik/src/core/v2/tests/component.spec.tsx

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Error.stackTraceLimit = 100;
2626

2727
describe.each([
2828
{ render: ssrRenderToDom }, //
29-
{ render: domRender }, //
29+
// { render: domRender }, //
3030
])('$render.name: component', ({ render }) => {
3131
it('should render component', async () => {
3232
const MyComp = component$(() => {
@@ -1261,6 +1261,30 @@ describe.each([
12611261
<div preventdefault:click=""></div>
12621262
);
12631263
});
1264+
1265+
it('should update var prop attribute', async () => {
1266+
const Cmp = component$(() => {
1267+
const counter = useSignal(0);
1268+
const props = { 'data-bar': counter.value };
1269+
return (
1270+
<button data-foo={counter.value} {...props} onClick$={() => counter.value++}></button>
1271+
);
1272+
});
1273+
1274+
const { vNode, document } = await render(<Cmp />, { debug });
1275+
expect(vNode).toMatchVDOM(
1276+
<Component>
1277+
<button data-foo="0" data-bar="0"></button>
1278+
</Component>
1279+
);
1280+
await trigger(document.body, 'button', 'click');
1281+
await trigger(document.body, 'button', 'click');
1282+
expect(vNode).toMatchVDOM(
1283+
<Component>
1284+
<button data-foo="2" data-bar="2"></button>
1285+
</Component>
1286+
);
1287+
});
12641288
});
12651289

12661290
it('should render all components', async () => {

‎starters/e2e/e2e.attributes.e2e.ts

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ test.describe("attributes", () => {
2525
await expect(input).toHaveAttribute("aria-required", "false");
2626
await expect(input).toHaveAttribute("draggable", "false");
2727
await expect(input).toHaveAttribute("spellcheck", "false");
28-
await expect(input).not.hasAttribute("required");
29-
await expect(input).not.hasAttribute("title");
28+
await expect(input).not.toHaveAttribute("required");
29+
await expect(input).not.toHaveAttribute("title");
3030

3131
await expect(label).toHaveAttribute("for", "even");
3232
await expect(label).toHaveAttribute("form", "my-form");
33-
await expect(label).not.hasAttribute("title");
33+
await expect(label).not.toHaveAttribute("title");
3434

3535
await expect(svg).toHaveAttribute("width", "15");
3636
await expect(svg).toHaveAttribute("height", "15");
@@ -91,7 +91,7 @@ test.describe("attributes", () => {
9191
await expect(input).toHaveAttribute("aria-required", "false");
9292
await expect(input).toHaveAttribute("draggable", "false");
9393
await expect(input).toHaveAttribute("spellcheck", "false");
94-
await expect(input).not.hasAttribute("required");
94+
await expect(input).not.toHaveAttribute("required");
9595
await expect(renders).toHaveText("1");
9696
});
9797

@@ -109,8 +109,8 @@ test.describe("attributes", () => {
109109

110110
await countBtn.click();
111111
await expect(input).not.toHaveAttribute("title", "some title");
112-
await expect(input).not.hasAttribute("title");
113-
await expect(label).not.hasAttribute("title");
112+
await expect(input).not.toHaveAttribute("title");
113+
await expect(label).not.toHaveAttribute("title");
114114
await expect(renders).toHaveText("1");
115115
});
116116

@@ -127,7 +127,7 @@ test.describe("attributes", () => {
127127
await expect(input).toHaveAttribute("aria-required", "false");
128128
await expect(input).toHaveAttribute("draggable", "false");
129129
await expect(input).toHaveAttribute("spellcheck", "false");
130-
await expect(input).not.hasAttribute("required");
130+
await expect(input).not.toHaveAttribute("required");
131131
await expect(svg).toHaveAttribute("aria-hidden", "false");
132132
await expect(renders).toHaveText("1");
133133
});
@@ -144,7 +144,7 @@ test.describe("attributes", () => {
144144
await expect(input).toHaveAttribute("aria-required", "true");
145145
await expect(input).toHaveAttribute("draggable", "true");
146146
await expect(input).toHaveAttribute("spellcheck", "true");
147-
await expect(input).hasAttribute("required");
147+
await expect(input).toHaveAttribute("required");
148148
await expect(renders).toHaveText("1");
149149
});
150150

@@ -159,13 +159,13 @@ test.describe("attributes", () => {
159159
await hideBtn.click();
160160
await expect(input).not.toHaveAttribute("aria-hidden", "true");
161161

162-
await expect(input).not.hasAttribute("aria-hidden");
163-
await expect(input).not.hasAttribute("aria-label");
164-
await expect(input).not.hasAttribute("tabindex");
165-
await expect(input).not.hasAttribute("required");
166-
await expect(input).not.hasAttribute("aria-required");
167-
await expect(input).not.hasAttribute("draggable");
168-
await expect(input).not.hasAttribute("spellcheck");
162+
await expect(input).not.toHaveAttribute("aria-hidden");
163+
await expect(input).not.toHaveAttribute("aria-label");
164+
await expect(input).not.toHaveAttribute("tabindex");
165+
await expect(input).not.toHaveAttribute("required");
166+
await expect(input).not.toHaveAttribute("aria-required");
167+
await expect(input).not.toHaveAttribute("draggable");
168+
await expect(input).not.toHaveAttribute("spellcheck");
169169
await expect(renders).toHaveText("2");
170170
});
171171

@@ -180,20 +180,20 @@ test.describe("attributes", () => {
180180
await countBtn.click();
181181
await expect(input).not.toHaveAttribute("aria-hidden", "true");
182182

183-
await expect(input).not.hasAttribute("aria-hidden");
184-
await expect(input).not.hasAttribute("aria-label");
185-
await expect(input).not.hasAttribute("tabindex");
186-
await expect(input).not.hasAttribute("required");
187-
await expect(input).not.hasAttribute("aria-required");
188-
await expect(input).not.hasAttribute("draggable");
189-
await expect(input).not.hasAttribute("spellcheck");
190-
await expect(label).not.hasAttribute("for");
191-
await expect(label).not.hasAttribute("form");
192-
await expect(svg).not.hasAttribute("width");
193-
await expect(svg).not.hasAttribute("height");
194-
await expect(svg).not.hasAttribute("preserveAspectRatio");
183+
await expect(input).not.toHaveAttribute("aria-hidden");
184+
await expect(input).not.toHaveAttribute("aria-label");
185+
await expect(input).not.toHaveAttribute("tabindex");
186+
await expect(input).not.toHaveAttribute("required");
187+
await expect(input).not.toHaveAttribute("aria-required");
188+
await expect(input).not.toHaveAttribute("draggable");
189+
await expect(input).not.toHaveAttribute("spellcheck");
190+
await expect(label).not.toHaveAttribute("for");
191+
await expect(label).not.toHaveAttribute("form");
192+
await expect(svg).not.toHaveAttribute("width");
193+
await expect(svg).not.toHaveAttribute("height");
194+
await expect(svg).not.toHaveAttribute("preserveAspectRatio");
195195
await expect(svg).toHaveClass("");
196-
await expect(svg).not.hasAttribute("aria-hidden");
196+
await expect(svg).not.toHaveAttribute("aria-hidden");
197197

198198
await expect(renders).toHaveText("2");
199199

@@ -202,7 +202,7 @@ test.describe("attributes", () => {
202202
await expect(input).toHaveAttribute("aria-hidden", "true");
203203
await expect(input).toHaveAttribute("aria-label", "even");
204204
await expect(input).toHaveAttribute("tabindex", "-1");
205-
await expect(input).not.hasAttribute("required");
205+
await expect(input).not.toHaveAttribute("required");
206206
await expect(input).toHaveAttribute("aria-required", "false");
207207
await expect(input).toHaveAttribute("draggable", "false");
208208
await expect(input).toHaveAttribute("spellcheck", "false");
@@ -222,19 +222,19 @@ test.describe("attributes", () => {
222222

223223
await countBtn.click();
224224
await expect(svg).not.toHaveAttribute("aria-hidden", "true");
225-
await expect(input).not.hasAttribute("aria-hidden");
226-
await expect(input).not.hasAttribute("aria-label");
227-
await expect(input).not.hasAttribute("tabindex");
228-
await expect(input).not.hasAttribute("required");
229-
await expect(input).not.hasAttribute("aria-required");
230-
await expect(input).not.hasAttribute("draggable");
231-
await expect(input).not.hasAttribute("spellcheck");
232-
await expect(label).not.hasAttribute("for");
233-
await expect(label).not.hasAttribute("form");
234-
await expect(svg).not.hasAttribute("width");
235-
await expect(svg).not.hasAttribute("height");
236-
await expect(svg).not.hasAttribute("preserveAspectRatio");
237-
await expect(svg).not.hasAttribute("aria-hidden");
225+
await expect(input).not.toHaveAttribute("aria-hidden");
226+
await expect(input).not.toHaveAttribute("aria-label");
227+
await expect(input).not.toHaveAttribute("tabindex");
228+
await expect(input).not.toHaveAttribute("required");
229+
await expect(input).not.toHaveAttribute("aria-required");
230+
await expect(input).not.toHaveAttribute("draggable");
231+
await expect(input).not.toHaveAttribute("spellcheck");
232+
await expect(label).not.toHaveAttribute("for");
233+
await expect(label).not.toHaveAttribute("form");
234+
await expect(svg).not.toHaveAttribute("width");
235+
await expect(svg).not.toHaveAttribute("height");
236+
await expect(svg).not.toHaveAttribute("preserveAspectRatio");
237+
await expect(svg).not.toHaveAttribute("aria-hidden");
238238
await expect(svg).toHaveClass("");
239239
await expect(renders).toHaveText("4");
240240

@@ -243,7 +243,7 @@ test.describe("attributes", () => {
243243
await expect(input).toHaveAttribute("aria-hidden", "true");
244244
await expect(input).toHaveAttribute("aria-label", "even");
245245
await expect(input).toHaveAttribute("tabindex", "-1");
246-
await expect(input).not.hasAttribute("required");
246+
await expect(input).not.toHaveAttribute("required");
247247
await expect(input).toHaveAttribute("aria-required", "false");
248248
await expect(input).toHaveAttribute("draggable", "false");
249249
await expect(input).toHaveAttribute("spellcheck", "false");
@@ -276,9 +276,9 @@ test.describe("attributes", () => {
276276
await button.click();
277277

278278
await expect(button).toHaveClass("moop");
279-
await expect(button).not.hasAttribute("data-works");
280-
await expect(button).not.hasAttribute("aria-label");
281-
await expect(button).not.hasAttribute("title");
279+
await expect(button).not.toHaveAttribute("data-works");
280+
await expect(button).not.toHaveAttribute("aria-label");
281+
await expect(button).not.toHaveAttribute("title");
282282
});
283283

284284
test("issue 4718 (undefined)", async ({ page }) => {
@@ -291,9 +291,9 @@ test.describe("attributes", () => {
291291
await button.click();
292292

293293
await expect(button).toHaveClass("moop");
294-
await expect(button).not.hasAttribute("data-works");
295-
await expect(button).not.hasAttribute("aria-label");
296-
await expect(button).not.hasAttribute("title");
294+
await expect(button).not.toHaveAttribute("data-works");
295+
await expect(button).not.toHaveAttribute("aria-label");
296+
await expect(button).not.toHaveAttribute("title");
297297
});
298298
}
299299

0 commit comments

Comments
 (0)