fix(vue): DataClientPLugin only runs manager start/stop for app lifecycle (#3584)

Author: ntucker

.changeset/dirty-regions-dance.md

@@ -0,0 +1,5 @@
+---
+'@data-client/vue': patch
+---
+
+Only run manager start/stop for app lifecycle - not every component mount

jest.config.js

@@ -23,7 +23,7 @@ const baseConfig = {
     'node_modules',
     '/__tests__',
     'DevtoolsManager',
-    'packages/vue',
+    'packages/vue/src/test',
     'packages/test',
     'packages/graphql',
     'packages/rest/src/next',

packages/vue/src/__tests__/__snapshots__/useSubscription.web.ts.snap

@@ -0,0 +1,195 @@
+import { Controller, initialState } from '@data-client/core';
+import type { State } from '@data-client/core';
+import {
+  describe,
+  it,
+  expect,
+  beforeEach,
+  afterEach,
+  jest,
+} from '@jest/globals';
+import { shallowRef } from 'vue';
+
+import {
+  StateKey,
+  ControllerKey,
+  FallbackStateRef,
+  useController,
+  injectState,
+} from '../context';
+
+// Mock Vue's inject function
+const mockInjectMap: Map<symbol, any> = new Map();
+
+jest.mock('vue', () => {
+  const actual = jest.requireActual('vue') as any;
+  return {
+    ...(actual || {}),
+    inject: jest.fn((key: symbol, defaultValue: any) => {
+      return mockInjectMap.get(key) ?? defaultValue;
+    }),
+  };
+});
+
+describe('context', () => {
+  let consoleErrorSpy: jest.SpiedFunction<typeof console.error>;
+  const originalNodeEnv = process.env.NODE_ENV;
+
+  beforeEach(() => {
+    mockInjectMap.clear();
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+    process.env.NODE_ENV = originalNodeEnv;
+  });
+
+  describe('FallbackStateRef', () => {
+    it('should be a shallow ref with initial state', () => {
+      expect(FallbackStateRef.value).toEqual(initialState);
+    });
+
+    it('should be reactive', () => {
+      const initialValue = FallbackStateRef.value;
+      const newState: State<unknown> = {
+        ...initialState,
+        endpoints: { test: { data: 'value' } } as any,
+      };
+      FallbackStateRef.value = newState;
+      expect(FallbackStateRef.value).toEqual(newState);
+      // Restore original state
+      FallbackStateRef.value = initialValue;
+    });
+  });
+
+  describe('useController', () => {
+    it('should return the injected controller when provided', () => {
+      const mockController = new Controller();
+      mockInjectMap.set(ControllerKey, mockController);
+
+      const result = useController();
+
+      expect(result).toBe(mockController);
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
+
+    it('should return a new Controller when not provided', () => {
+      mockInjectMap.set(ControllerKey, null);
+
+      const result = useController();
+
+      expect(result).toBeInstanceOf(Controller);
+    });
+
+    it('should log error in development when controller is not provided', () => {
+      process.env.NODE_ENV = 'development';
+      mockInjectMap.set(ControllerKey, null);
+
+      useController();
+
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        expect.stringContaining(
+          'It appears you are trying to use Reactive Data Client (Vue) without a provider.',
+        ),
+      );
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        expect.stringContaining(
+          'https://dataclient.io/docs/getting-started/installation',
+        ),
+      );
+    });
+
+    it('should not log error in production when controller is not provided', () => {
+      process.env.NODE_ENV = 'production';
+      mockInjectMap.set(ControllerKey, null);
+
+      useController();
+
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
+
+    it('should handle undefined controller', () => {
+      mockInjectMap.set(ControllerKey, undefined);
+
+      const result = useController();
+
+      expect(result).toBeInstanceOf(Controller);
+    });
+  });
+
+  describe('injectState', () => {
+    it('should return the injected state when provided', () => {
+      const mockState = shallowRef<State<unknown>>({
+        ...initialState,
+        endpoints: { test: { data: 'value' } } as any,
+      });
+      mockInjectMap.set(StateKey, mockState);
+
+      const result = injectState();
+
+      expect(result).toBe(mockState);
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
+
+    it('should return FallbackStateRef when not provided', () => {
+      mockInjectMap.set(StateKey, null);
+
+      const result = injectState();
+
+      expect(result).toBe(FallbackStateRef);
+    });
+
+    it('should log error in development when state is not provided', () => {
+      process.env.NODE_ENV = 'development';
+      mockInjectMap.set(StateKey, null);
+
+      injectState();
+
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        expect.stringContaining(
+          'It appears you are trying to use Reactive Data Client (Vue) without a provider.',
+        ),
+      );
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        expect.stringContaining(
+          'https://dataclient.io/docs/getting-started/installation',
+        ),
+      );
+    });
+
+    it('should not log error in production when state is not provided', () => {
+      process.env.NODE_ENV = 'production';
+      mockInjectMap.set(StateKey, null);
+
+      injectState();
+
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+    });
+
+    it('should handle undefined state', () => {
+      mockInjectMap.set(StateKey, undefined);
+
+      const result = injectState();
+
+      expect(result).toBe(FallbackStateRef);
+    });
+
+    it('should return state ref that is reactive', () => {
+      const mockState = shallowRef<State<unknown>>(initialState);
+      mockInjectMap.set(StateKey, mockState);
+
+      const result = injectState();
+
+      expect(result.value).toEqual(initialState);
+
+      const newState: State<unknown> = {
+        ...initialState,
+        endpoints: { test: { data: 'updated' } } as any,
+      };
+      mockState.value = newState;
+
+      expect(result.value).toEqual(newState);
+    });
+  });
+});

packages/vue/src/__tests__/context.test.ts

@@ -4,10 +4,7 @@ import { defineComponent, h } from 'vue';
 import { Article, ArticleResource } from '../../../../__tests__/new';
 import useQuery from '../consumers/useQuery';
 import useSuspense from '../consumers/useSuspense';
-import {
-  renderDataComposable,
-  renderDataClient,
-} from '../test/renderDataClient';
+import { renderDataComposable, renderDataClient } from '../test';
 
 const GC_INTERVAL = 100; // Use short interval for faster tests
 

packages/vue/src/__tests__/integration-garbage-collection.web.ts

@@ -12,7 +12,7 @@ import {
   SecondUnion,
 } from '../../../../__tests__/new';
 import useQuery from '../consumers/useQuery';
-import { renderDataComposable } from '../test/renderDataClient';
+import { renderDataComposable } from '../test';
 
 // Inline fixtures (duplicated from React tests to avoid cross-project imports)
 const payloadSlug = {