fix resource invoke context

QwikDev · Jan 7, 2025 · a6492f8 · a6492f8
1 parent 984011a
commit a6492f8
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 3 deletions.
diff --git a/packages/qwik/src/core/signal/signal-subscriber.ts b/packages/qwik/src/core/signal/signal-subscriber.ts
@@ -119,6 +119,9 @@ function clearStoreEffects(storeHandler: StoreHandler, value: Subscriber | VNode
         subscriptionRemoved = true;
       }
     }
+    if (effects.length === 0) {
+      delete effectSubscriptions[key];
+    }
   }
 
   return subscriptionRemoved;

diff --git a/packages/qwik/src/core/tests/use-resource.spec.tsx b/packages/qwik/src/core/tests/use-resource.spec.tsx
@@ -8,6 +8,8 @@ import {
   component$,
   useResource$,
   useSignal,
+  useStore,
+  type ResourceReturn,
 } from '@qwik.dev/core';
 import { domRender, getTestPlatform, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { describe, expect, it } from 'vitest';
@@ -16,6 +18,10 @@ import '../../testing/vdom-diff.unit-util';
 const debug = false; //true;
 Error.stackTraceLimit = 100;
 
+export function mutable(value: any) {
+  return value;
+}
+
 describe.each([
   { render: ssrRenderToDom }, //
   { render: domRender }, //
@@ -409,4 +415,108 @@ describe.each([
       </Component>
     );
   });
+
+  it('should track subscription', async () => {
+    const Results = component$((props: { result: ResourceReturn<number> }) => {
+      const state = useStore({
+        count: 0,
+      });
+      return (
+        <div>
+          <Resource
+            value={props.result}
+            onResolved={(number) => {
+              return (
+                <>
+                  <div>resource 1 is {number}</div>
+                  <button onClick$={() => state.count++}>
+                    count is {mutable(state.count + 0)}
+                  </button>
+                </>
+              );
+            }}
+          />
+        </div>
+      );
+    });
+
+    const ResourceApp = component$(() => {
+      const resource = useResource$<number>(() => {
+        return 0;
+      });
+
+      return <Results result={resource} />;
+    });
+
+    const { vNode, document } = await render(<ResourceApp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Component>
+          <div>
+            <InlineComponent>
+              <Fragment>
+                <Awaited>
+                  <Fragment>
+                    <div>
+                      {'resource 1 is '}
+                      {'0'}
+                    </div>
+                    <button>{'count is '}0</button>
+                  </Fragment>
+                </Awaited>
+              </Fragment>
+            </InlineComponent>
+          </div>
+        </Component>
+      </Component>
+    );
+
+    await trigger(document.body, 'button', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Component>
+          <div>
+            <InlineComponent>
+              <Fragment>
+                <Awaited>
+                  <Fragment>
+                    <div>
+                      {'resource 1 is '}
+                      {'0'}
+                    </div>
+                    <button>{'count is '}1</button>
+                  </Fragment>
+                </Awaited>
+              </Fragment>
+            </InlineComponent>
+          </div>
+        </Component>
+      </Component>
+    );
+
+    await trigger(document.body, 'button', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Component>
+          <div>
+            <InlineComponent>
+              <Fragment>
+                <Awaited>
+                  <Fragment>
+                    <div>
+                      {'resource 1 is '}
+                      {'0'}
+                    </div>
+                    <button>{'count is '}2</button>
+                  </Fragment>
+                </Awaited>
+              </Fragment>
+            </InlineComponent>
+          </div>
+        </Component>
+      </Component>
+    );
+  });
 });
diff --git a/packages/qwik/src/core/use/use-resource.ts b/packages/qwik/src/core/use/use-resource.ts
@@ -191,14 +191,14 @@ function getResourceValueAsPromise<T>(props: ResourceProps<T>): Promise<JSXOutpu
       DEBUG && debugLog(`RESOURCE_CMP.${state}`, 'VALUE: ' + untrack(() => resource._resolved));
 
       if (state === 'pending' && props.onPending) {
-        return Promise.resolve(props.onPending());
+        return Promise.resolve().then(useBindInvokeContext(props.onPending));
       } else if (state === 'rejected' && props.onRejected) {
-        return Promise.resolve(resource._error!).then(props.onRejected);
+        return Promise.resolve(resource._error!).then(useBindInvokeContext(props.onRejected));
       } else {
         const resolvedValue = untrack(() => resource._resolved) as T;
         if (resolvedValue !== undefined) {
           // resolved, pending without onPending prop or rejected without onRejected prop
-          return Promise.resolve(resolvedValue).then(props.onResolved);
+          return Promise.resolve(resolvedValue).then(useBindInvokeContext(props.onResolved));
         }
       }
     }