Merge pull request #7198 from QwikDev/v2-updating-var-props

fix: updating signal-based var props

.changeset/brown-ravens-behave.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: updating signal-based props

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

@@ -14,7 +14,7 @@ import { Slot } from '../shared/jsx/slot.public';
 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, untrack } from '../use/use-core';
+import { trackSignalAndAssignHost } from '../use/use-core';
 import { TaskFlags, cleanupTask, isTask } from '../use/use-task';
 import { EMPTY_OBJ } from '../shared/utils/flyweight';
 import {
@@ -787,7 +787,11 @@ export const vnode_diff = (
       }
 
       if (isSignal(value)) {
-        value = untrack(() => value.value);
+        const signalData = new EffectPropData({
+          $scopedStyleIdPrefix$: scopedStyleIdPrefix,
+          $isConst$: false,
+        });
+        value = trackSignalAndAssignHost(value, vnode, key, container, signalData);
       }
 
       vnode_setAttr(journal, vnode, key, serializeAttribute(key, value, scopedStyleIdPrefix));

packages/qwik/src/core/tests/attributes.spec.tsx

@@ -1,6 +1,14 @@
 import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { describe, expect, it } from 'vitest';
-import { component$, useSignal, useStore, Fragment as Component, Fragment } from '@qwik.dev/core';
+import {
+  component$,
+  useSignal,
+  useStore,
+  Fragment as Component,
+  Fragment,
+  type PropsOf,
+  useComputed$,
+} from '@qwik.dev/core';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -336,4 +344,43 @@ describe.each([
       </Component>
     );
   });
+
+  it('should update signal-based var prop', async () => {
+    const PasswordInput = component$<PropsOf<'input'>>((props) => {
+      const showPassword = useSignal<boolean>(false);
+      const inputType = useComputed$(() => (showPassword.value ? 'text' : 'password'));
+      return (
+        <>
+          <input type={inputType.value} {...props} />
+          <button
+            onClick$={() => {
+              showPassword.value = !showPassword.value;
+            }}
+          ></button>
+        </>
+      );
+    });
+
+    const { vNode, document } = await render(<PasswordInput />, { debug });
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Fragment>
+          <input type="password" />
+          <button></button>
+        </Fragment>
+      </Component>
+    );
+
+    await trigger(document.body, 'button', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Fragment>
+          <input type="text" />
+          <button></button>
+        </Fragment>
+      </Component>
+    );
+  });
 });