8000 feat: basic template prop extraction complete · wheatjs/vite-plugin-vue-gql@83b5066 · GitHub
[go: up one dir, main page]
Skip to content

Commit 83b5066

Browse files
wheatjswheatjs
committed
feat: basic template prop extraction complete
1 parent 75fbfab commit 83b5066

File tree

14 files changed

+1465
-9
lines changed

14 files changed

+1465
-9
lines changed

‎client.d.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1+
declare module 'virtual:gql-generation' {
2+
export const generated: string[]
3+
}
4+
15
declare module 'vql' {
26
import type {
37
UseQueryArgs,
48
UseQueryResponse,
59
UseMutationResponse,
610
UseSubscriptionResponse,
711
UseSubscriptionArgs,
12+
UseQueryResponse,
813
} from '@urql/vue'
914

1015
declare type UseQueryOptions = Omit<UseQueryArgs, 'variables'>
@@ -34,3 +39,18 @@ declare module 'vql' {
3439
_args?: Partial<UseSubscriptionArgs<T, V>>,
3540
handler?: MaybeRef<SubscriptionHandler<T, R>>): UseSubscriptionResponse<T, R, V>
3641
}
42+
43+
declare module 'vql-gen' {
44+
45+
interface Variable {
46+
[name: string]: any
47+
}
48+
49+
interface Variables {
50+
for: string
51+
variables: Variable
52+
}
53+
54+
export function useQuery<T = any, V = any>(variables?: Variables[], options?: Partial<UseQueryOptions<T, V>>): UseQueryResponse<T, V>
55+
56+
}

‎examples/spa/src/App.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<script setup lang="ts">
2-
import TestComponent from './components/TestComponent.vue'
2+
import TestComponent2 from './components/TestComponent2.vue'
3+
import GenerationPreview from './components/GenerationPreview.vue'
34
</script>
45

56
<template>
67
<div>
7-
<Suspense>
8+
<GenerationPreview></GenerationPreview>
9+
<TestComponent2 />
10+
<!-- <Suspense>
811
<template #default>
912
<TestComponent />
1013
</template>
@@ -13,6 +16,6 @@ import TestComponent from './components/TestComponent.vue'
1316
Loading...
1417
</div>
1518
</template>
16-
</Suspense>
19+
</Suspense> -->
1720
</div>
1821
</template>

‎examples/spa/src/components/Album.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { defineProps } from 'vue'
3+
4+
defineProps<{ data: any }>()
5+
</script>
6+
7+
<template>
8+
<div>
9+
{{ data.name }}
10+
</div>
11+
</template>

‎examples/spa/src/components/GenerationPreview.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
import { generated } from 'virtual:gql-generation'
3+
</script>
4+
5+
<template>
6+
<div class="h-screen grid place-content-center place-items-center">
7+
<div class="prose bg-black bg-opacity-50 rounded-lg p-8 w-100">
8+
<span class="block mb-4 text-gray-500 text-sm font-bold">Generated GraphQL Query</span>
9+
<code>
10+
<pre v-for="code in generated" :key="code">{{ code }}</pre>
11+
</code>
12+
</div>
13+
</div>
14+
</template>

‎examples/spa/src/components/TestComponent.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { ref } from 'vue'
33
import { useThrottle } from '@vueuse/core'
44
import { useQuery, useMutation } from 'vql'
5+
import Album from './Album.vue'
56
67
const name = ref('RADWIMPS')
78
const throttled = useThrottle(name, 2000)
@@ -32,6 +33,7 @@ const { fetching, error, data } = useQuery<any, any>({ name: throttled })
3233
<div v-for="album in artist.albums" :key="album.name" class="bg-gray-800">
3334
<img :src="album.image">
3435
<span class="block text-xs py-4 px-4">{{ album.name }}</span>
36+
<Album :data="album" />
3537
</div>
3638
</div>
3739
</div>

‎examples/spa/src/components/TestComponent2.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
import { useQuery } from 'vql-gen'
3+
import Album from './Album.vue'
4+
5+
const { data, fetching, error } = useQuery()
6+
</script>
7+
8+
<template>
9+
<div v-if="fetching">
10+
Loading...
11+
</div>
12+
<div v-else-if="error?.message">
13+
Oops, there was an error
14+
</div>
15+
<div v-else-if="data">
16+
<!-- Use Query Data Here -->
17+
18+
<!-- {{ data.status }} -->
19+
<!-- <template v-for="user in data.users">
20+
{{ user.username }}
21+
<Album :data="data" />
22+
<template v-if="user.hasProfile">
23+
{{ user.profile.profilePicture }}
24+
</template>
25+
</template> -->
26+
</div>
27+
</template>

‎examples/spa/src/index.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
html {
2-
background: #222;
3-
color: rgba(255, 255, 255, .72);
2+
@apply bg-gray-900 text-white;
3+
/* background: #222; */
4+
/* color: rgba(255, 255, 255, .72); */
45
}

‎package.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,15 @@
2424
"release": "npx git-ensure -a && npx bumpp --commit --tag --push",
2525
"example:dev": "npm -C examples/spa run dev",
2626
"example:build": "npm -C examples/spa run build",
27-
"example:serve": "npm -C examples/spa run serve"
27+
"example:serve": "npm -C examples/spa run serve",
28+
"preview": "tsup src/index.ts --dts --format cjs,esm && npm -C examples/spa run dev"
2829
},
2930
"dependencies": {
3031
"@vue/compiler-sfc": "^3.0.5",
3132
"chalk": "^4.1.0",
3233
"debug": "^4.3.2",
33-
"deep-equal": "^2.0.5"
34+
"deep-equal": "^2.0.5",
35+
"lodash": "^4.17.21"
3436
},
3537
"peerDependencies": {
3638
"@urql/vue": "^0.3.0",
@@ -46,9 +48,12 @@
4648
"@types/debug": "^4.1.5",
4749
"@types/deep-equal": "^1.0.1",
4850
"@types/glob-to-regexp": "^0.4.0",
51+
"@types/lodash": "^4.14.168",
4952
"@types/node": "^14.14.31",
5053
"@typescript-eslint/eslint-plugin": "^4.15.2",
5154
"@urql/vue": "^0.3.0",
55+
"@vue/compiler-core": "^3.0.11",
56+
"@vue/compiler-dom": "^3.0.11",
5257
"@vue/shared": "^3.0.5",
5358
"eslint": "^7.20.0",
5459
"fast-glob": "^3.2.5",

‎pnpm-lock.yaml

Lines changed: 48 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
0