Skip to content

Commit d030f2a

Browse files
posvaposva
committed
chore: playground
1 parent 7b3dc27 commit d030f2a

9 files changed

Lines changed: 295 additions & 1 deletion

File tree

‎packages/playground-file-based/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"dependencies": {
1313
"semver": "^7.7.3",
1414
"vue": "3.6.0-beta.5",
15-
"vue-router": "workspace:*"
15+
"vue-router": "workspace:*",
16+
"zod": "^4.3.6"
1617
},
1718
"devDependencies": {
1819
"@types/semver": "^7.7.1",

‎packages/playground-file-based/src/components/SemVerInfo.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script lang="ts" setup>
2+
import { computed } from 'vue'
3+
import { inc, type SemVer } from 'semver'
4+
5+
const { version } = defineProps<{ version: SemVer }>()
6+
7+
const nextVersions = computed(() => ({
8+
major: inc(version, 'major'),
9+
minor: inc(version, 'minor'),
10+
patch: inc(version, 'patch'),
11+
prerelease: inc(version, 'prerelease'),
12+
}))
13+
</script>
14+
15+
<template>
16+
<dl>
17+
<dt>Raw</dt>
18+
<dd>
19+
<code>{{ version.raw }}</code>
20+
</dd>
21+
22+
<dt>Formatted</dt>
23+
<dd>
24+
<code>{{ version.format() }}</code>
25+
</dd>
26+
27+
<dt>Major</dt>
28+
<dd>{{ version.major }}</dd>
29+
30+
<dt>Minor</dt>
31+
<dd>{{ version.minor }}</dd>
32+
33+
<dt>Patch</dt>
34+
<dd>{{ version.patch }}</dd>
35+
36+
<dt>Prerelease</dt>
37+
<dd>
38+
<code v-if="version.prerelease.length">{{
39+
version.prerelease.join('.')
40+
}}</code>
41+
<em v-else>none</em>
42+
</dd>
43+
44+
<dt>Build</dt>
45+
<dd>
46+
<code v-if="version.build.length">{{ version.build.join('.') }}</code>
47+
<em v-else>none</em>
48+
</dd>
49+
50+
<dt>Next versions</dt>
51+
<dd>
52+
<ul>
53+
<li>
54+
Major: <code>{{ nextVersions.major }}</code>
55+
</li>
56+
<li>
57+
Minor: <code>{{ nextVersions.minor }}</code>
58+
</li>
59+
<li>
60+
Patch: <code>{{ nextVersions.patch }}</code>
61+
</li>
62+
<li>
63+
Prerelease: <code>{{ nextVersions.prerelease ?? 'N/A' }}</code>
64+
</li>
65+
</ul>
66+
</dd>
67+
</dl>
68+
</template>

‎packages/playground-file-based/src/pages/(packages)/_parent.vue‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script setup lang="ts"></script>
2+
3+
<template>
4+
<nav>
5+
<h3>Strict SemVer (param parser)</h3>
6+
<ul>
7+
<li>
8+
<RouterLink to="/package/pinia/v3.0.4" v-slot="{ href }">{{
9+
href
10+
}}</RouterLink>
11+
</li>
12+
<li>
13+
<RouterLink to="/package/@pinia/colada/v1.0.0" v-slot="{ href }">{{
14+
href
15+
}}</RouterLink>
16+
</li>
17+
<li>
18+
<RouterLink to="/package/pinia/not-a-version" v-slot="{ href }"
19+
>{{ href }} (invalid)</RouterLink
20+
>
21+
</li>
22+
</ul>
23+
24+
<h3>Version Range (param parser)</h3>
25+
<ul>
26+
<li>
27+
<RouterLink to="/package-range/pinia/v3.0.4" v-slot="{ href }">{{
28+
href
29+
}}</RouterLink>
30+
</li>
31+
<li>
32+
<RouterLink
33+
to="/package-range/@pinia/colada/v1.0.0"
34+
v-slot="{ href }"
35+
>{{ href }}</RouterLink
36+
>
37+
</li>
38+
<li>
39+
<RouterLink to="/package-range/pinia/not-a-version" v-slot="{ href }"
40+
>{{ href }} (invalid)</RouterLink
41+
>
42+
</li>
43+
</ul>
44+
45+
<h3>Legacy (manual parse)</h3>
46+
<ul>
47+
<li>
48+
<RouterLink to="/package-old/pinia/v3.0.4" v-slot="{ href }">{{
49+
href
50+
}}</RouterLink>
51+
</li>
52+
<li>
53+
<RouterLink to="/package-old/@pinia/colada/v1.0.0" v-slot="{ href }">{{
54+
href
55+
}}</RouterLink>
56+
</li>
57+
<li>
58+
<RouterLink to="/package-old/pinia/not-a-version" v-slot="{ href }"
59+
>{{ href }} (invalid)</RouterLink
60+
>
61+
</li>
62+
</ul>
63+
64+
<h3>Zod Validation</h3>
65+
<ul>
66+
<li>
67+
<RouterLink to="/package-zod/pinia/v3.0.4" v-slot="{ href }">{{
68+
href
69+
}}</RouterLink>
70+
</li>
71+
<li>
72+
<RouterLink to="/package-zod/@pinia/colada/v1.0.0" v-slot="{ href }">{{
73+
href
74+
}}</RouterLink>
75+
</li>
76+
<li>
77+
<RouterLink to="/package-zod/pinia/not-a-version" v-slot="{ href }"
78+
>{{ href }} (invalid)</RouterLink
79+
>
80+
</li>
81+
</ul>
82+
</nav>
83+
<RouterView />
84+
</template>

‎packages/playground-file-based/src/pages/(packages)/package-old/[[org]]/[pkgName]/[pkgVersion].vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script lang="ts" setup>
2+
import { computed } from 'vue'
3+
import { useRoute } from 'vue-router'
4+
import { parse } from 'semver'
5+
import SemVerInfo from '@/components/SemVerInfo.vue'
6+
7+
const route = useRoute()
8+
9+
const parsed = computed(() =>
10+
parse(route.params.pkgVersion as string, true, true)
11+
)
12+
</script>
13+
14+
<template>
15+
<h2>
16+
{{ route.params.org ? `@${route.params.org}/` : ''
17+
}}{{ route.params.pkgName }}
18+
</h2>
19+
<h3>Legacy (manual parse)</h3>
20+
21+
<template v-if="parsed">
22+
<SemVerInfo :version="parsed" />
23+
</template>
24+
<p v-else style="color: red">
25+
Could not parse <code>{{ route.params.pkgVersion }}</code> as a semver
26+
version.
27+
</p>
28+
</template>

‎packages/playground-file-based/src/pages/(packages)/package-range/[[org=npm-org]]/[pkgName]/[pkgVersion=version-range].vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts" setup>
2+
import { useRoute } from 'vue-router'
3+
import { SemVer } from 'semver'
4+
import SemVerInfo from '@/components/SemVerInfo.vue'
5+
6+
const route = useRoute()
7+
</script>
8+
9+
<template>
10+
<h2>
11+
{{ route.params.org ? `@${route.params.org}/` : ''
12+
}}{{ route.params.pkgName }}
13+
</h2>
14+
<h3>Version Range (param parser)</h3>
15+
16+
<template v-if="route.params.pkgVersion instanceof SemVer">
17+
<SemVerInfo :version="route.params.pkgVersion" />
18+
</template>
19+
<template v-else>
20+
<dl>
21+
<dt>Range</dt>
22+
<dd>
23+
<code>{{ route.params.pkgVersion.range }}</code>
24+
</dd>
25+
26+
<dt>Formatted</dt>
27+
<dd>
28+
<code>{{ route.params.pkgVersion.format() }}</code>
29+
</dd>
30+
</dl>
31+
</template>
32+
</template>

‎packages/playground-file-based/src/pages/(packages)/package-zod/[[org=npm-org]]/[pkgName]/[pkgVersion].vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script lang="ts" setup>
2+
import { computed } from 'vue'
3+
import { useRoute } from 'vue-router'
4+
import { z } from 'zod'
5+
import { parse, valid } from 'semver'
6+
import SemVerInfo from '@/components/SemVerInfo.vue'
7+
8+
const route = useRoute()
9+
10+
const semverSchema = z.string().refine(val => valid(val, true) !== null, {
11+
message: 'Invalid semver version',
12+
})
13+
14+
const result = computed(() => {
15+
const validation = semverSchema.safeParse(route.params.pkgVersion)
16+
if (!validation.success) {
17+
return { ok: false as const, error: validation.error }
18+
}
19+
return { ok: true as const, version: parse(validation.data, true, true)! }
20+
})
21+
</script>
22+
23+
<template>
24+
<h2>
25+
{{ route.params.org ? `@${route.params.org}/` : ''
26+
}}{{ route.params.pkgName }}
27+
</h2>
28+
<h3>Zod Validation</h3>
29+
30+
<template v-if="result.ok">
31+
<SemVerInfo :version="result.version" />
32+
</template>
33+
<div v-else>
34+
<p style="color: red; font-weight: bold">Zod validation failed</p>
35+
<ul style="color: red">
36+
<li v-for="(issue, i) in result.error.issues" :key="i">
37+
{{ issue.message }}
38+
<template v-if="issue.path.length">
39+
(path: {{ issue.path.join('.') }})</template
40+
>
41+
</li>
42+
</ul>
43+
</div>
44+
</template>

‎packages/playground-file-based/src/pages/(packages)/package/[[org=npm-org]]/[pkgName]/[pkgVersion=semver].vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts" setup>
2+
import { useRoute } from 'vue-router'
3+
import SemVerInfo from '@/components/SemVerInfo.vue'
4+
5+
const route = useRoute()
6+
</script>
7+
8+
<template>
9+
<h2>
10+
{{ route.params.org ? `@${route.params.org}/` : ''
11+
}}{{ route.params.pkgName }}
12+
</h2>
13+
<h3>Strict SemVer (param parser)</h3>
14+
<SemVerInfo :version="route.params.pkgVersion" />
15+
</template>

‎packages/playground-file-based/src/routes.d.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,13 @@ declare module 'vue-router/auto-routes' {
6464
{ org: Exclude<Param_npmOrg, unknown[]> | null, pkgName: string, pkgVersion: Exclude<Param_versionRange, unknown[]> },
6565
| never
6666
>,
67+
'/(packages)/package-zod/[[org=npm-org]]/[pkgName]/[pkgVersion]': RouteRecordInfo<
68+
'/(packages)/package-zod/[[org=npm-org]]/[pkgName]/[pkgVersion]',
69+
'/package-zod/:org?/:pkgName/:pkgVersion',
70+
{ org: Exclude<Param_npmOrg, unknown[]> | null, pkgName: string, pkgVersion: string },
71+
{ org: Exclude<Param_npmOrg, unknown[]> | null, pkgName: string, pkgVersion: string },
72+
| never
73+
>,
6774
'/[a].[b]': RouteRecordInfo<
6875
'/[a].[b]',
6976
'/:a/:b',
@@ -277,6 +284,7 @@ declare module 'vue-router/auto-routes' {
277284
routes:
278285
| '/(packages)/package-old/[[org]]/[pkgName]/[pkgVersion]'
279286
| '/(packages)/package-range/[[org=npm-org]]/[pkgName]/[pkgVersion=version-range]'
287+
| '/(packages)/package-zod/[[org=npm-org]]/[pkgName]/[pkgVersion]'
280288
| '/(packages)/package/[[org=npm-org]]/[pkgName]/[pkgVersion=semver]'
281289
views:
282290
| 'default'
@@ -299,6 +307,12 @@ declare module 'vue-router/auto-routes' {
299307
views:
300308
| never
301309
}
310+
'src/pages/(packages)/package-zod/[[org=npm-org]]/[pkgName]/[pkgVersion].vue': {
311+
routes:
312+
| '/(packages)/package-zod/[[org=npm-org]]/[pkgName]/[pkgVersion]'
313+
views:
314+
| never
315+
}
302316
'src/pages/[a].[b].vue': {
303317
routes:
304318
| '/[a].[b]'

‎pnpm-lock.yaml‎

Lines changed: 8 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)