perf: create wrapped signal only once for vnode diff

# Conflicts:
#	packages/qwik/src/core/reactive-primitives/internal-api.ts

Author: Varixo

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

@@ -83,10 +83,10 @@ import { clearAllEffects } from '../reactive-primitives/cleanup';
 import { serializeAttribute } from '../shared/utils/styles';
 import { QError, qError } from '../shared/error/error';
 import { getFileLocationFromJsx } from '../shared/utils/jsx-filename';
-import { EffectProperty } from '../reactive-primitives/types';
+import { EffectProperty, EffectSubscriptionProp } from '../reactive-primitives/types';
 import { SubscriptionData } from '../reactive-primitives/subscription-data';
 import { WrappedSignalImpl } from '../reactive-primitives/impl/wrapped-signal-impl';
-import { _CONST_PROPS, _VAR_PROPS } from '../internal';
+import { _CONST_PROPS, _EFFECT_BACK_REF, _VAR_PROPS } from '../internal';
 import { isSyncQrl } from '../shared/qrl/qrl-utils';
 import type { ElementVNode, TextVNode, VirtualVNode, VNode } from './vnode-impl';
 
@@ -184,15 +184,22 @@ export const vnode_diff = (
             descend(jsxValue, false);
           } else if (isSignal(jsxValue)) {
             expectVirtual(VirtualType.WrappedSignal, null);
-            descend(
-              trackSignalAndAssignHost(
-                jsxValue as Signal,
-                (vNewNode || vCurrent)!,
-                EffectProperty.VNODE,
-                container
-              ),
-              true
-            );
+            const unwrappedSignal =
+              jsxValue instanceof WrappedSignalImpl ? jsxValue.$unwrapIfSignal$() : jsxValue;
+            const currentSignal = vCurrent?.[_EFFECT_BACK_REF]?.get(EffectProperty.VNODE)?.[
+              EffectSubscriptionProp.CONSUMER
+            ];
+            if (currentSignal !== unwrappedSignal) {
+              descend(
+                trackSignalAndAssignHost(
+                  unwrappedSignal,
+                  (vNewNode || vCurrent)!,
+                  EffectProperty.VNODE,
+                  container
+                ),
+                true
+              );
+            }
           } else if (isPromise(jsxValue)) {
             expectVirtual(VirtualType.Awaited, null);
             asyncQueue.push(jsxValue, vNewNode || vCurrent);

packages/qwik/src/core/reactive-primitives/impl/signal-impl.ts

@@ -13,6 +13,7 @@ import {
 import type { Signal } from '../signal.public';
 import { SignalFlags, type EffectSubscription } from '../types';
 import { ChoreType } from '../../shared/util-chore-type';
+import type { WrappedSignalImpl } from './wrapped-signal-impl';
 
 const DEBUG = false;
 // eslint-disable-next-line no-console
@@ -23,8 +24,8 @@ export class SignalImpl<T = any> implements Signal<T> {
 
   /** Store a list of effects which are dependent on this signal. */
   $effects$: null | Set<EffectSubscription> = null;
-
   $container$: Container | null = null;
+  $wrappedSignal$: WrappedSignalImpl<T> | null = null;
 
   constructor(container: Container | null, value: T) {
     this.$container$ = container;

packages/qwik/src/core/reactive-primitives/impl/wrapped-signal-impl.ts

@@ -4,6 +4,7 @@ import type { Container, HostElement } from '../../shared/types';
 import { ChoreType } from '../../shared/util-chore-type';
 import { trackSignal } from '../../use/use-core';
 import type { BackRef } from '../cleanup';
+import { getValueProp } from '../internal-api';
 import type { AllSignalFlags, EffectSubscription } from '../types';
 import {
   _EFFECT_BACK_REF,
@@ -12,7 +13,7 @@ import {
   SignalFlags,
   WrappedSignalFlags,
 } from '../types';
-import { scheduleEffects } from '../utils';
+import { isSignal, scheduleEffects } from '../utils';
 import { SignalImpl } from './signal-impl';
 
 export class WrappedSignalImpl<T> extends SignalImpl<T> implements BackRef {
@@ -106,6 +107,13 @@ export class WrappedSignalImpl<T> extends SignalImpl<T> implements BackRef {
       this.$untrackedValue$ = untrackedValue;
     }
   }
+
+  $unwrapIfSignal$(): SignalImpl<T> | WrappedSignalImpl<T> {
+    return this.$func$ === getValueProp && isSignal(this.$args$[0])
+      ? (this.$args$[0] as SignalImpl<T>)
+      : this;
+  }
+
   // Make this signal read-only
   set value(_: any) {
     throw qError(QError.wrappedReadOnly);

packages/qwik/src/core/reactive-primitives/internal-api.ts

@@ -2,18 +2,34 @@ import { _CONST_PROPS, _IMMUTABLE } from '../shared/utils/constants';
 import { assertEqual } from '../shared/error/assert';
 import { isObject } from '../shared/utils/types';
 import { isSignal, type Signal } from './signal.public';
-import { getStoreTarget } from './impl/store';
+import { getStoreTarget, isStore } from './impl/store';
 import { isPropsProxy } from '../shared/jsx/jsx-runtime';
 import { WrappedSignalFlags } from './types';
 import { WrappedSignalImpl } from './impl/wrapped-signal-impl';
 import { AsyncComputedSignalImpl } from './impl/async-computed-signal-impl';
+import type { SignalImpl } from './impl/signal-impl';
 
 // Keep these properties named like this so they're the same as from wrapSignal
-const getValueProp = <T>(p0: { value: T }) => p0.value;
+export const getValueProp = <T>(p0: { value: T }) => p0.value;
 const getProp = <T extends object, P extends keyof T>(p0: T, p1: P) => p0[p1];
 
-const getWrapped = <T extends object>(args: [T, (keyof T | undefined)?]) =>
-  new WrappedSignalImpl(null, args.length === 1 ? getValueProp : getProp, args, null);
+const getWrapped = <T extends object>(args: [T, (keyof T | undefined)?]) => {
+  if (args.length === 1) {
+    if (isSignal(args[0])) {
+      return ((args[0] as SignalImpl).$wrappedSignal$ ||= new WrappedSignalImpl(
+        null,
+        getValueProp,
+        args,
+        null
+      ));
+    } else if (isStore(args[0])) {
+      return new WrappedSignalImpl(null, getValueProp, args, null);
+    }
+    return args[0].value;
+  } else {
+    return new WrappedSignalImpl(null, getProp, args, null);
+  }
+};
 
 type PropType<T extends object, P extends keyof T> = P extends keyof T
   ? T[P]

packages/qwik/src/core/ssr/ssr-render-jsx.ts

@@ -129,8 +129,11 @@ function processJSXNode(
     } else if (isSignal(value)) {
       ssr.openFragment(isDev ? [DEBUG_TYPE, VirtualType.WrappedSignal] : EMPTY_ARRAY);
       const signalNode = ssr.getOrCreateLastNode();
+      const unwrappedSignal = value instanceof WrappedSignalImpl ? value.$unwrapIfSignal$() : value;
       enqueue(ssr.closeFragment);
-      enqueue(() => trackSignalAndAssignHost(value, signalNode, EffectProperty.VNODE, ssr));
+      enqueue(() =>
+        trackSignalAndAssignHost(unwrappedSignal, signalNode, EffectProperty.VNODE, ssr)
+      );
       enqueue(MaybeAsyncSignal);
     } else if (isPromise(value)) {
       ssr.openFragment(isDev ? [DEBUG_TYPE, VirtualType.Awaited] : EMPTY_ARRAY);

packages/qwik/src/core/tests/render-api.spec.tsx

@@ -752,7 +752,7 @@ describe('render api', () => {
               }}
             >
               <Resource value={rsrc} onResolved={(v) => <span>{v}</span>} />
-              {sig.value}
+              {sig.value + 'test'}
             </button>
           );
         });
@@ -964,7 +964,7 @@ describe('render api', () => {
           streaming,
         });
         // This can change when the size of the output changes
-        expect(stream.write).toHaveBeenCalledTimes(7);
+        expect(stream.write).toHaveBeenCalledTimes(5);
       });
     });
   });