Skip to content

Commit eae4fe4

Browse files
ntuckerntucker
committed
enhance(vue): renderDataClient -> renderDataCompose
1 parent 70b127a commit eae4fe4

File tree

13 files changed

+303
-303
lines changed

13 files changed

+303
-303
lines changed

‎.changeset/giant-cycles-follow.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@data-client/vue': patch
3+
---
4+
5+
renderDataClient -> renderDataCompose
6+
7+
This keeps naming conventions closer to the React version

‎packages/vue/README.md‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -78,29 +78,6 @@ const ArticleResource = resource({
7878
});
7979
```
8080

81-
### Provide the Data Client
82-
83-
Install the plugin globally in your main app file for automatic setup across your entire application:
84-
85-
```ts
86-
// main.ts
87-
import { createApp } from 'vue';
88-
import { DataClientPlugin } from '@data-client/vue';
89-
import App from './App.vue';
90-
91-
const app = createApp(App);
92-
93-
app.use(DataClientPlugin, {
94-
// optional overrides
95-
// managers: getDefaultManagers(),
96-
// initialState,
97-
// Controller,
98-
// gcPolicy,
99-
});
100-
101-
app.mount('#app');
102-
```
103-
10481
### One line [data binding](https://dataclient.io/docs/getting-started/data-dependency)
10582

10683
```vue

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { defineComponent, h } from 'vue';
44
import { Article, ArticleResource } from '../../../../__tests__/new';
55
import useQuery from '../consumers/useQuery';
66
import useSuspense from '../consumers/useSuspense';
7-
import { renderDataClient, mountDataClient } from '../test';
7+
import { renderDataCompose, mountDataClient } from '../test';
88

99
const GC_INTERVAL = 100; // Use short interval for faster tests
1010

@@ -45,7 +45,7 @@ describe('Integration Garbage Collection Web (Vue)', () => {
4545
content: 'Test Content',
4646
};
4747

48-
const { result, cleanup, waitForNextUpdate } = renderDataClient(
48+
const { result, cleanup, waitForNextUpdate } = renderDataCompose(
4949
() => useSuspense(ArticleResource.get, { id: 1 }),
5050
{
5151
initialFixtures: [
@@ -77,7 +77,7 @@ describe('Integration Garbage Collection Web (Vue)', () => {
7777
{ id: 2, title: 'Article 2', content: 'Content 2' },
7878
];
7979

80-
const { result, cleanup } = renderDataClient(
80+
const { result, cleanup } = renderDataCompose(
8181
() => useQuery(ArticleResource.getList.schema),
8282
{
8383
initialFixtures: [

‎packages/vue/src/__tests__/useCache.web.ts‎

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { computed, defineComponent, h, nextTick, reactive } from 'vue';
33

44
import { CoolerArticleResource } from '../../../../__tests__/new';
55
import useCache from '../consumers/useCache';
6-
import { renderDataClient, mountDataClient } from '../test';
6+
import { renderDataCompose, mountDataClient } from '../test';
77

88
// Minimal shared fixture (copied from React test fixtures)
99
const payload = {
@@ -60,7 +60,7 @@ describe('vue useCache()', () => {
6060
});
6161

6262
it('returns undefined on empty store (no fetch)', async () => {
63-
const { result, waitForNextUpdate, cleanup } = renderDataClient(() =>
63+
const { result, waitForNextUpdate, cleanup } = renderDataCompose(() =>
6464
useCache(CoolerArticleResource.get, { id: payload.id }),
6565
);
6666

@@ -77,7 +77,7 @@ describe('vue useCache()', () => {
7777
});
7878

7979
it('returns data when already in cache', async () => {
80-
const { result, waitForNextUpdate, cleanup } = renderDataClient(
80+
const { result, waitForNextUpdate, cleanup } = renderDataCompose(
8181
() => useCache(CoolerArticleResource.get, { id: payload.id }),
8282
{
8383
initialFixtures: [
@@ -104,18 +104,19 @@ describe('vue useCache()', () => {
104104
});
105105

106106
it('re-renders when controller.setResponse() updates data', async () => {
107-
const { result, controller, waitForNextUpdate, cleanup } = renderDataClient(
108-
() => useCache(CoolerArticleResource.get, { id: payload.id }),
109-
{
110-
initialFixtures: [
111-
{
112-
endpoint: CoolerArticleResource.get,
113-
args: [{ id: payload.id }],
114-
response: payload,
115-
},
116-
],
117-
},
118-
);
107+
const { result, controller, waitForNextUpdate, cleanup } =
108+
renderDataCompose(
109+
() => useCache(CoolerArticleResource.get, { id: payload.id }),
110+
{
111+
initialFixtures: [
112+
{
113+
endpoint: CoolerArticleResource.get,
114+
args: [{ id: payload.id }],
115+
response: payload,
116+
},
117+
],
118+
},
119+
);
119120

120121
// Wait for initial render
121122
await waitForNextUpdate();
@@ -146,18 +147,19 @@ describe('vue useCache()', () => {
146147
});
147148

148149
it('re-renders when controller.fetch() mutates data', async () => {
149-
const { result, controller, waitForNextUpdate, cleanup } = renderDataClient(
150-
() => useCache(CoolerArticleResource.get, { id: payload.id }),
151-
{
152-
initialFixtures: [
153-
{
154-
endpoint: CoolerArticleResource.get,
155-
args: [{ id: payload.id }],
156-
response: payload,
157-
},
158-
],
159-
},
160-
);
150+
const { result, controller, waitForNextUpdate, cleanup } =
151+
renderDataCompose(
152+
() => useCache(CoolerArticleResource.get, { id: payload.id }),
153+
{
154+
initialFixtures: [
155+
{
156+
endpoint: CoolerArticleResource.get,
157+
args: [{ id: payload.id }],
158+
response: payload,
159+
},
160+
],
161+
},
162+
);
161163

162164
// Wait for initial render
163165
await waitForNextUpdate();
@@ -295,7 +297,7 @@ describe('vue useCache()', () => {
295297

296298
it('should handle null args by returning undefined', async () => {
297299
const props = reactive({ id: payload.id as number | null });
298-
const { result, waitForNextUpdate, cleanup } = renderDataClient(
300+
const { result, waitForNextUpdate, cleanup } = renderDataCompose(
299301
(props: { id: number | null }) =>
300302
useCache(
301303
CoolerArticleResource.get,
@@ -349,18 +351,19 @@ describe('vue useCache()', () => {
349351
});
350352

351353
it('returns undefined for stale data when invalidIfStale is true', async () => {
352-
const { result, controller, waitForNextUpdate, cleanup } = renderDataClient(
353-
() => useCache(CoolerArticleResource.get, { id: payload.id }),
354-
{
355-
initialFixtures: [
356-
{
357-
endpoint: CoolerArticleResource.get,
358-
args: [{ id: payload.id }],
359-
response: payload,
360-
},
361-
],
362-
},
363-
);
354+
const { result, controller, waitForNextUpdate, cleanup } =
355+
renderDataCompose(
356+
() => useCache(CoolerArticleResource.get, { id: payload.id }),
357+
{
358+
initialFixtures: [
359+
{
360+
endpoint: CoolerArticleResource.get,
361+
args: [{ id: payload.id }],
362+
response: payload,
363+
},
364+
],
365+
},
366+
);
364367

365368
// Wait for initial render
366369
await waitForNextUpdate();
@@ -379,7 +382,7 @@ describe('vue useCache()', () => {
379382
});
380383

381384
it('returns cached data even if expired when expiryStatus is Valid', async () => {
382-
const { result, waitForNextUpdate, cleanup } = renderDataClient(
385+
const { result, waitForNextUpdate, cleanup } = renderDataCompose(
383386
() => useCache(CoolerArticleResource.get, { id: payload.id }),
384387
{
385388
initialFixtures: [

‎packages/vue/src/__tests__/useQuery.web.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
SecondUnion,
1414
} from '../../../../__tests__/new';
1515
import useQuery from '../consumers/useQuery';
16-
import { renderDataClient } from '../test';
16+
import { renderDataCompose } from '../test';
1717

1818
// Inline fixtures (duplicated from React tests to avoid cross-project imports)
1919
const payloadSlug = {
@@ -49,7 +49,7 @@ const nested = [
4949

5050
describe('vue useQuery()', () => {
5151
it('should be undefined with empty state', () => {
52-
const { result } = renderDataClient(() => {
52+
const { result } = renderDataCompose(() => {
5353
return useQuery(ArticleWithSlug, { id: payloadSlug.id });
5454
}, {});
5555
// @ts-expect-error
@@ -58,7 +58,7 @@ describe('vue useQuery()', () => {
5858
});
5959

6060
it('All should be undefined with empty state', () => {
61-
const { result } = renderDataClient(() => {
61+
const { result } = renderDataCompose(() => {
6262
return useQuery(new schema.All(ArticleWithSlug));
6363
}, {});
6464
// @ts-expect-error
@@ -67,7 +67,7 @@ describe('vue useQuery()', () => {
6767
});
6868

6969
it('should fail on schema.Array', () => {
70-
const { result } = renderDataClient(() => {
70+
const { result } = renderDataCompose(() => {
7171
// @ts-expect-error
7272
return useQuery(new schema.Array(ArticleWithSlug));
7373
}, {});
@@ -77,7 +77,7 @@ describe('vue useQuery()', () => {
7777
});
7878

7979
it('should find Entity by pk', async () => {
80-
const { result } = renderDataClient(
80+
const { result } = renderDataCompose(
8181
() => {
8282
return useQuery(ArticleWithSlug, { id: payloadSlug.id });
8383
},
@@ -106,7 +106,7 @@ describe('vue useQuery()', () => {
106106
});
107107

108108
it('should find Entity by slug', async () => {
109-
const { result } = renderDataClient(
109+
const { result } = renderDataCompose(
110110
() => {
111111
return useQuery(ArticleWithSlug, { slug: payloadSlug.slug });
112112
},
@@ -131,7 +131,7 @@ describe('vue useQuery()', () => {
131131
response: nested,
132132
},
133133
];
134-
const { result } = renderDataClient(
134+
const { result } = renderDataCompose(
135135
() => {
136136
return useQuery(ArticleResource.getList.schema);
137137
},
@@ -160,7 +160,7 @@ describe('vue useQuery()', () => {
160160
},
161161
},
162162
];
163-
const { result, controller, waitForNextUpdate } = renderDataClient(
163+
const { result, controller, waitForNextUpdate } = renderDataCompose(
164164
() => {
165165
return useQuery(ArticleResource.getList.schema, {});
166166
},
@@ -228,7 +228,7 @@ describe('vue useQuery()', () => {
228228
},
229229
},
230230
];
231-
const { result } = renderDataClient(
231+
const { result } = renderDataCompose(
232232
() => {
233233
return useQuery(userTodos, { userId: '1' });
234234
},
@@ -261,7 +261,7 @@ describe('vue useQuery()', () => {
261261
schema: UnionSchema,
262262
});
263263

264-
const { result } = renderDataClient(
264+
const { result } = renderDataCompose(
265265
() => {
266266
return useQuery(UnionResource.get.schema, { id: '5', type: 'first' });
267267
},
@@ -313,7 +313,7 @@ describe('vue useQuery()', () => {
313313
schema: UnionSchema,
314314
});
315315

316-
const { result, controller, waitForNextUpdate } = renderDataClient(
316+
const { result, controller, waitForNextUpdate } = renderDataCompose(
317317
() => {
318318
return useQuery(UnionResource.getList.schema);
319319
},
@@ -378,7 +378,7 @@ describe('vue useQuery()', () => {
378378
};
379379

380380
const props = reactive({ id: 1 });
381-
const { result } = renderDataClient(
381+
const { result } = renderDataCompose(
382382
() => {
383383
return useQuery(
384384
ArticleWithSlug,
@@ -416,7 +416,7 @@ describe('vue useQuery()', () => {
416416
id: 5 as number | undefined,
417417
slug: undefined as string | undefined,
418418
});
419-
const { result } = renderDataClient(
419+
const { result } = renderDataCompose(
420420
() => {
421421
return useQuery(
422422
ArticleWithSlug,
@@ -457,7 +457,7 @@ describe('vue useQuery()', () => {
457457
};
458458

459459
const props = reactive({ id: 1 });
460-
const { result } = renderDataClient(
460+
const { result } = renderDataCompose(
461461
() => {
462462
return useQuery(
463463
ArticleWithSlug,
@@ -516,7 +516,7 @@ describe('vue useQuery()', () => {
516516
const UserResource = resource({ schema: User, path: '/users/:id' });
517517

518518
const props = reactive({ userId: '1' });
519-
const { result } = renderDataClient(
519+
const { result } = renderDataCompose(
520520
() => {
521521
return useQuery(
522522
userTodos,
@@ -609,7 +609,7 @@ describe('vue useQuery()', () => {
609609
const UserResource = resource({ schema: User, path: '/users/:id' });
610610

611611
const props = reactive({ userId: '1' });
612-
const { result } = renderDataClient(
612+
const { result } = renderDataCompose(
613613
() => {
614614
return useQuery(
615615
userTodos,

0 commit comments

Comments
 (0)