enhance: A more clear and helpful message when composables are misused.

Author: ntucker

.changeset/tiny-wolves-thank.md

@@ -0,0 +1,5 @@
+---
+'@data-client/vue': patch
+---
+
+Improve dependency injection console message

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`context injectState should log error in development when state is not provided 1`] = `
+"Reactive Data Client (Vue) composables dependency injection failed. Either you are missing the DataClientPlugin or you are using composables outside of script setup.
+Adding DataClientPlugin: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component
+Comosables only work in script setup: https://vuejs.org/guide/reusability/composables.html#usage-restrictions"
+`;
+
+exports[`context useController should log error in development when controller is not provided 1`] = `
+"Reactive Data Client (Vue) composables dependency injection failed. Either you are missing the DataClientPlugin or you are using composables outside of script setup.
+Adding DataClientPlugin: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component
+Comosables only work in script setup: https://vuejs.org/guide/reusability/composables.html#usage-restrictions"
+`;

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

@@ -88,16 +88,7 @@ describe('context', () => {
 
       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',
-        ),
-      );
+      expect(consoleErrorSpy.mock.calls[0][0]).toMatchSnapshot();
     });
 
     it('should not log error in production when controller is not provided', () => {
@@ -146,11 +137,7 @@ describe('context', () => {
 
       injectState();
 
-      expect(consoleErrorSpy).toHaveBeenCalledWith(
-        expect.stringContaining(
-          'It appears you are trying to use Reactive Data Client (Vue) without a provider.',
-        ),
-      );
+      expect(consoleErrorSpy.mock.calls[0][0]).toMatchSnapshot();
       expect(consoleErrorSpy).toHaveBeenCalledWith(
         expect.stringContaining(
           'https://dataclient.io/docs/getting-started/installation',

packages/vue/src/context.ts

@@ -19,8 +19,9 @@ export function useController(): Controller {
     /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       console.error(
-        'It appears you are trying to use Reactive Data Client (Vue) without a provider.\n' +
-          'Follow instructions: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component',
+        'Reactive Data Client (Vue) composables dependency injection failed. Either you are missing the DataClientPlugin or you are using composables outside of script setup.\n' +
+          'Adding DataClientPlugin: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component\n' +
+          'Comosables only work in script setup: https://vuejs.org/guide/reusability/composables.html#usage-restrictions',
       );
     }
     return new Controller();
@@ -34,8 +35,9 @@ export function injectState(): ShallowRef<State<unknown>> {
     /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       console.error(
-        'It appears you are trying to use Reactive Data Client (Vue) without a provider.\n' +
-          'Follow instructions: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component',
+        'Reactive Data Client (Vue) composables dependency injection failed. Either you are missing the DataClientPlugin or you are using composables outside of script setup.\n' +
+          'Adding DataClientPlugin: https://dataclient.io/docs/getting-started/installation#add-provider-at-top-level-component\n' +
+          'Comosables only work in script setup: https://vuejs.org/guide/reusability/composables.html#usage-restrictions',
       );
     }
     return FallbackStateRef;