feat: global map of all effect subscriptions

Co-authored-by: Wout Mertens <[email protected]>

Author: Varixo

packages/qwik/src/core/shared/component-execution.ts

@@ -20,7 +20,7 @@ import { MAX_RETRY_ON_PROMISE_COUNT, isPromise, maybeThen, safeCall } from './ut
 import type { ValueOrPromise } from './utils/types';
 import type { Container, HostElement } from './types';
 import { logWarn } from './utils/log';
-import { EffectProperty, isSignal } from '../signal/signal';
+import { EffectProperty, isSignal, getSubscriber } from '../signal/signal';
 import { vnode_isVNode } from '../client/vnode';
 import { clearVNodeEffectDependencies } from '../signal/signal-subscriber';
 import { Slot } from '../shared/jsx/slot.public';
@@ -49,13 +49,20 @@ import { Slot } from '../shared/jsx/slot.public';
 export const executeComponent = (
   container: Container,
   renderHost: HostElement,
-  subscriptionHost: HostElement,
+  subscriptionHost: HostElement | null,
   componentQRL: OnRenderFn<unknown> | QRLInternal<OnRenderFn<unknown>> | null,
   props: Props | null
 ): ValueOrPromise<JSXOutput> => {
-  const iCtx = newInvokeContext(container.$locale$, subscriptionHost, undefined, RenderEvent);
-  iCtx.$effectSubscriber$ = [subscriptionHost, EffectProperty.COMPONENT];
-  iCtx.$container$ = container;
+  const iCtx = newInvokeContext(
+    container.$locale$,
+    subscriptionHost || undefined,
+    undefined,
+    RenderEvent
+  );
+  if (subscriptionHost) {
+    iCtx.$effectSubscriber$ = getSubscriber(subscriptionHost, EffectProperty.COMPONENT);
+    iCtx.$container$ = container;
+  }
   let componentFn: (props: unknown) => ValueOrPromise<JSXOutput>;
   container.ensureProjectionResolved(renderHost);
   let isInlineComponent = false;

packages/qwik/src/core/shared/shared-serialization.ts

@@ -274,9 +274,9 @@ const inflate = (
     }
     case TypeIds.Signal: {
       const signal = target as Signal<unknown>;
-      const d = data as [unknown, Set<EffectSubscriptions>];
+      const d = data as [unknown, ...EffectSubscriptions[]];
       signal.$untrackedValue$ = d[0];
-      signal.$effects$ = d[1];
+      signal.$effects$ = new Set(d.slice(1) as EffectSubscriptions[]);
       break;
     }
     case TypeIds.WrappedSignal: {
@@ -287,14 +287,14 @@ const inflate = (
         Set<Subscriber>,
         unknown,
         HostElement,
-        Set<EffectSubscriptions>,
+        ...EffectSubscriptions[],
       ];
       signal.$func$ = container.getSyncFn(d[0]);
       signal.$args$ = d[1];
       signal.$effectDependencies$ = d[2];
       signal.$untrackedValue$ = d[3];
       signal.$hostElement$ = d[4];
-      signal.$effects$ = d[5];
+      signal.$effects$ = new Set(d.slice(5) as EffectSubscriptions[]);
       break;
     }
     case TypeIds.ComputedSignal: {
@@ -1188,7 +1188,7 @@ function serialize(serializationContext: SerializationContext): void {
           value.$effectDependencies$,
           v,
           value.$hostElement$,
-          value.$effects$,
+          ...(value.$effects$ || []),
         ]);
       } else if (value instanceof ComputedSignal) {
         const out = [
@@ -1201,7 +1201,7 @@ function serialize(serializationContext: SerializationContext): void {
         }
         output(TypeIds.ComputedSignal, out);
       } else {
-        output(TypeIds.Signal, [v, value.$effects$]);
+        output(TypeIds.Signal, [v, ...(value.$effects$ || [])]);
       }
     } else if (value instanceof URL) {
       output(TypeIds.URL, value.href);

packages/qwik/src/core/signal/signal-subscriber.ts

@@ -1,11 +1,6 @@
 import { QSubscribers } from '../shared/utils/markers';
-import type { ElementVNode, VNode, VirtualVNode } from '../client/types';
-import {
-  ensureMaterialized,
-  vnode_getProp,
-  vnode_isElementVNode,
-  vnode_setProp,
-} from '../client/vnode';
+import type { VNode } from '../client/types';
+import { ensureMaterialized, vnode_getProp, vnode_isElementVNode } from '../client/vnode';
 import { EffectSubscriptionsProp, WrappedSignal, isSignal, type Signal } from './signal';
 import type { Container } from '../shared/types';
 import { StoreHandler, getStoreHandler, isStore, type TargetType } from './store';
@@ -24,48 +19,28 @@ export function clearVNodeEffectDependencies(container: Container, value: VNode)
   if (vnode_isElementVNode(value)) {
     ensureMaterialized(value);
   }
-  const effects = vnode_getProp<Subscriber[]>(value, QSubscribers, container.$getObjectById$);
+  const effects = vnode_getProp<Set<Subscriber>>(value, QSubscribers, container.$getObjectById$);
+
   if (!effects) {
     return;
   }
-  for (let i = effects.length - 1; i >= 0; i--) {
-    const subscriber = effects[i];
-    clearEffects(subscriber, value, effects, i, container);
-  }
-
-  if (effects.length === 0) {
-    vnode_setProp(value as ElementVNode | VirtualVNode, QSubscribers, null);
+  for (const subscriber of effects) {
+    clearEffects(subscriber, value, effects, container);
   }
 }
 
 export function clearSubscriberEffectDependencies(container: Container, value: Subscriber): void {
   if (value.$effectDependencies$) {
     for (const subscriber of value.$effectDependencies$) {
-      let subscriptionRemoved = false;
-      const seenSet = new Set();
-      if (subscriber instanceof WrappedSignal) {
-        subscriptionRemoved = clearSignalEffects(subscriber, value, seenSet);
-      } else if (container.$storeProxyMap$.has(subscriber)) {
-        const store = container.$storeProxyMap$.get(subscriber)!;
-        const handler = getStoreHandler(store)!;
-        subscriptionRemoved = clearStoreEffects(handler, value);
-      }
-      if (subscriptionRemoved) {
-        value.$effectDependencies$.delete(subscriber);
-      }
-    }
-
-    if (value.$effectDependencies$.size === 0) {
-      value.$effectDependencies$.clear();
+      clearEffects(subscriber, value, value.$effectDependencies$, container);
     }
   }
 }
 
 function clearEffects(
   subscriber: Subscriber | TargetType,
   value: Subscriber | VNode,
-  effectArray: (Subscriber | TargetType)[],
-  indexToRemove: number,
+  effectArray: Set<Subscriber | TargetType>,
   container: Container
 ) {
   let subscriptionRemoved = false;
@@ -78,7 +53,7 @@ function clearEffects(
     subscriptionRemoved = clearStoreEffects(handler, value);
   }
   if (subscriptionRemoved) {
-    effectArray.splice(indexToRemove, 1);
+    effectArray.delete(subscriber);
   }
 }
 

packages/qwik/src/core/signal/signal.ts

@@ -134,6 +134,26 @@ export type EffectSubscriptions = [
     | TargetType
   )[],
 ];
+
+/** Global map of all effect subscriptions */
+const effectMapMap = new WeakMap<Effect, Map<EffectProperty | string, EffectSubscriptions>>();
+export function getSubscriber(effect: Effect, prop: EffectProperty | string, data?: unknown) {
+  let subMap = effectMapMap.get(effect);
+  if (!subMap) {
+    subMap = new Map();
+    effectMapMap.set(effect, subMap);
+  }
+  let sub = subMap.get(prop);
+  if (!sub) {
+    sub = [effect, prop];
+    subMap.set(prop, sub);
+  }
+  if (data) {
+    sub[EffectSubscriptionsProp.FIRST_BACK_REF_OR_DATA] = data;
+  }
+  return sub;
+}
+
 export const enum EffectSubscriptionsProp {
   EFFECT = 0,
   PROPERTY = 1,
@@ -250,9 +270,6 @@ export const ensureContainsEffect = (
   array: Set<EffectSubscriptions>,
   effectSubscriptions: EffectSubscriptions
 ) => {
-  if (array.has(effectSubscriptions)) {
-    return;
-  }
   array.add(effectSubscriptions);
 };
 
@@ -444,7 +461,7 @@ export class ComputedSignal<T> extends Signal<T> {
 
     const ctx = tryGetInvokeContext();
     const previousEffectSubscription = ctx?.$effectSubscriber$;
-    ctx && (ctx.$effectSubscriber$ = [this, EffectProperty.VNODE]);
+    ctx && (ctx.$effectSubscriber$ = getSubscriber(this, EffectProperty.VNODE));
     try {
       const untrackedValue = computeQrl.getFn(ctx)() as T;
       if (isPromise(untrackedValue)) {

packages/qwik/src/core/signal/signal.unit.tsx

@@ -13,6 +13,7 @@ import { invoke, newInvokeContext } from '../use/use-core';
 import { Task } from '../use/use-task';
 import {
   EffectProperty,
+  getSubscriber,
   type EffectSubscriptions,
   type InternalReadonlySignal,
   type InternalSignal,
@@ -167,7 +168,8 @@ describe('v2-signal', () => {
     } else {
       const ctx = newInvokeContext();
       ctx.$container$ = container;
-      const subscriber: EffectSubscriptions = [task, EffectProperty.COMPONENT, ctx];
+      // TODO is ctx needed?
+      const subscriber: EffectSubscriptions = getSubscriber(task, EffectProperty.COMPONENT, ctx);
       ctx.$effectSubscriber$ = subscriber;
       return invoke(ctx, qrl.getFn(ctx));
     }

packages/qwik/src/core/signal/store.unit.tsx

@@ -3,7 +3,7 @@ import { createDocument, getTestPlatform } from '@qwik.dev/core/testing';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import type { Container, HostElement } from '../shared/types';
 import { StoreFlags, getOrCreateStore, isStore } from './store';
-import { EffectProperty } from './signal';
+import { EffectProperty, getSubscriber } from './signal';
 import { invoke } from '../use/use-core';
 import { newInvokeContext } from '../use/use-core';
 import { ChoreType } from '../shared/scheduler';
@@ -73,7 +73,8 @@ describe('v2/store', () => {
     } else {
       const ctx = newInvokeContext();
       ctx.$container$ = container;
-      const subscriber: EffectSubscriptions = [task, EffectProperty.COMPONENT, ctx];
+      // TODO is ctx needed
+      const subscriber: EffectSubscriptions = getSubscriber(task, EffectProperty.COMPONENT, ctx);
       ctx.$effectSubscriber$ = subscriber;
       return invoke(ctx, qrl.getFn(ctx));
     }

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

@@ -10,7 +10,7 @@ import type { JSXOutput } from '../shared/jsx/types/jsx-node';
 
 export const applyInlineComponent = (
   ssr: SSRContainer,
-  componentHost: ISsrNode,
+  componentHost: ISsrNode | null,
   inlineComponentFunction: OnRenderFn<any>,
   jsx: JSXNode
 ) => {

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

@@ -268,7 +268,7 @@ function processJSXNode(
               : inlineComponentProps
           );
           enqueue(ssr.closeFragment);
-          const component = ssr.getComponentFrame(0)!;
+          const component = ssr.getComponentFrame(0);
           const jsxOutput = applyInlineComponent(
             ssr,
             component && component.componentNode,

packages/qwik/src/core/tests/use-signal.spec.tsx

@@ -354,7 +354,8 @@ describe.each([
 
       expect(
         // wrapped signal on the pre element
-        (globalThis as any).signal.$effects$[0][EffectSubscriptionsProp.EFFECT].$effects$
+        (globalThis as any).signal.$effects$.values().next().value[EffectSubscriptionsProp.EFFECT]
+          .$effects$
       ).toHaveLength(1);
       expect((globalThis as any).signal.$effects$).toHaveLength(1);
 
@@ -364,7 +365,8 @@ describe.each([
       await trigger(container.element, 'button', 'click'); // <-- this should not add another subscriber
       expect((globalThis as any).signal.$effects$).toHaveLength(1);
       expect(
-        (globalThis as any).signal.$effects$[0][EffectSubscriptionsProp.EFFECT].$effects$
+        (globalThis as any).signal.$effects$.values().next().value[EffectSubscriptionsProp.EFFECT]
+          .$effects$
       ).toHaveLength(1);
 
       await trigger(container.element, 'button', 'click');
@@ -373,7 +375,8 @@ describe.each([
       await trigger(container.element, 'button', 'click'); // <-- this should not add another subscriber
       expect((globalThis as any).signal.$effects$).toHaveLength(1);
       expect(
-        (globalThis as any).signal.$effects$[0][EffectSubscriptionsProp.EFFECT].$effects$
+        (globalThis as any).signal.$effects$.values().next().value[EffectSubscriptionsProp.EFFECT]
+          .$effects$
       ).toHaveLength(1);
 
       (globalThis as any).signal = undefined;

packages/qwik/src/core/use/use-core.ts

@@ -20,6 +20,7 @@ import { _getQContainerElement, getDomContainer } from '../client/dom-container'
 import { type ContainerElement } from '../client/types';
 import {
   WrappedSignal,
+  getSubscriber,
   type EffectPropData,
   type EffectSubscriptions,
   type EffectSubscriptionsProp,
@@ -243,10 +244,7 @@ export const trackSignal = <T>(
   const previousSubscriber = trackInvocation.$effectSubscriber$;
   const previousContainer = trackInvocation.$container$;
   try {
-    trackInvocation.$effectSubscriber$ = [subscriber, property];
-    if (data) {
-      trackInvocation.$effectSubscriber$.push(data);
-    }
+    trackInvocation.$effectSubscriber$ = getSubscriber(subscriber, property, data);
     trackInvocation.$container$ = container;
     return invoke(trackInvocation, fn);
   } finally {

packages/qwik/src/core/use/use-resource.ts

@@ -11,7 +11,7 @@ import { delay, isPromise, safeCall } from '../shared/utils/promises';
 import { isFunction, isObject } from '../shared/utils/types';
 import { StoreFlags, createStore, getStoreTarget, unwrapStore } from '../signal/store';
 import { useSequentialScope } from './use-sequential-scope';
-import { EffectProperty, isSignal } from '../signal/signal';
+import { EffectProperty, getSubscriber, isSignal } from '../signal/signal';
 import type { Signal } from '../signal/signal.public';
 import { clearSubscriberEffectDependencies } from '../signal/signal-subscriber';
 import { ResourceEvent } from '../shared/utils/markers';
@@ -283,7 +283,7 @@ export const runResource = <T>(
 
   const track: Tracker = (obj: (() => unknown) | object | Signal<unknown>, prop?: string) => {
     const ctx = newInvokeContext();
-    ctx.$effectSubscriber$ = [task, EffectProperty.COMPONENT];
+    ctx.$effectSubscriber$ = getSubscriber(task, EffectProperty.COMPONENT);
     ctx.$container$ = container;
     return invoke(ctx, () => {
       if (isFunction(obj)) {

packages/qwik/src/core/use/use-task.ts

@@ -9,7 +9,7 @@ import { TaskEvent } from '../shared/utils/markers';
 import { isPromise, safeCall } from '../shared/utils/promises';
 import { noSerialize, type NoSerialize } from '../shared/utils/serialize-utils';
 import { isFunction, type ValueOrPromise } from '../shared/utils/types';
-import { EffectProperty, isSignal } from '../signal/signal';
+import { EffectProperty, getSubscriber, isSignal } from '../signal/signal';
 import { Subscriber, clearSubscriberEffectDependencies } from '../signal/signal-subscriber';
 import { type Signal } from '../signal/signal.public';
 import { invoke, newInvokeContext } from './use-core';
@@ -178,7 +178,7 @@ export const runTask = (
 
   const track: Tracker = (obj: (() => unknown) | object | Signal<unknown>, prop?: string) => {
     const ctx = newInvokeContext();
-    ctx.$effectSubscriber$ = [task, EffectProperty.COMPONENT];
+    ctx.$effectSubscriber$ = getSubscriber(task, EffectProperty.COMPONENT);
     ctx.$container$ = container;
     return invoke(ctx, () => {
       if (isFunction(obj)) {