Skip to content

Commit 788527e

Browse files
sxzzsxzz
authored
workflow: support custom TS version for playground (#8735)
1 parent eee7090 commit 788527e

File tree

6 files changed

+404
-133
lines changed

6 files changed

+404
-133
lines changed

‎packages/sfc-playground/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
},
1010
"devDependencies": {
1111
"@vitejs/plugin-vue": "^4.2.3",
12-
"vite": "^4.3.9"
12+
"vite": "^4.4.2"
1313
},
1414
"dependencies": {
15-
"@vue/repl": "^2.4.0",
15+
"@vue/repl": "^2.5.4",
1616
"file-saver": "^2.0.5",
1717
"jszip": "^3.6.0",
1818
"vue": "workspace:*"

‎packages/sfc-playground/src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ function toggleSSR() {
7373
store.setFiles(store.getFiles())
7474
}
7575
76-
const theme = ref('dark')
76+
const theme = ref<'dark' | 'light'>('dark')
7777
function toggleTheme(isDark: boolean) {
7878
theme.value = isDark ? 'dark' : 'light'
7979
}

‎packages/sfc-playground/src/Header.vue

Lines changed: 36 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,35 @@
11
<script setup lang="ts">
22
import { downloadProject } from './download/download'
3-
import { ref, onMounted } from 'vue'
3+
import { ref } from 'vue'
44
import Sun from './icons/Sun.vue'
55
import Moon from './icons/Moon.vue'
66
import Share from './icons/Share.vue'
77
import Download from './icons/Download.vue'
88
import GitHub from './icons/GitHub.vue'
99
import type { ReplStore } from '@vue/repl'
10+
import VersionSelect from './VersionSelect.vue'
1011
1112
const props = defineProps<{
1213
store: ReplStore
1314
dev: boolean
1415
ssr: boolean
1516
}>()
17+
const emit = defineEmits(['toggle-theme', 'toggle-ssr', 'toggle-dev'])
1618
1719
const { store } = props
1820
1921
const currentCommit = __COMMIT__
20-
const activeVersion = ref(`@${currentCommit}`)
21-
const publishedVersions = ref<string[]>()
22-
const expanded = ref(false)
23-
24-
async function toggle() {
25-
expanded.value = !expanded.value
26-
if (!publishedVersions.value) {
27-
publishedVersions.value = await fetchVersions()
28-
}
29-
}
22+
const vueVersion = ref(`@${currentCommit}`)
3023
3124
async function setVueVersion(v: string) {
32-
activeVersion.value = `loading...`
25+
vueVersion.value = `loading...`
3326
await store.setVueVersion(v)
34-
activeVersion.value = `v${v}`
35-
expanded.value = false
27+
vueVersion.value = `v${v}`
3628
}
3729
3830
function resetVueVersion() {
3931
store.resetVueVersion()
40-
activeVersion.value = `@${currentCommit}`
41-
expanded.value = false
32+
vueVersion.value = `@${currentCommit}`
4233
}
4334
4435
async function copyLink(e: MouseEvent) {
@@ -51,54 +42,14 @@ async function copyLink(e: MouseEvent) {
5142
alert('Sharable URL has been copied to clipboard.')
5243
}
5344
54-
const emit = defineEmits(['toggle-theme', 'toggle-ssr','toggle-dev'])
55-
function toggleDark() {
45+
function toggleDark() {
5646
const cls = document.documentElement.classList
57-
cls.toggle('dark')
58-
localStorage.setItem(
59-
'vue-sfc-playground-prefer-dark',
60-
String(cls.contains('dark'))
61-
)
62-
emit('toggle-theme', cls.contains('dark'))
63-
}
64-
65-
onMounted(async () => {
66-
window.addEventListener('click', () => {
67-
expanded.value = false
68-
})
69-
window.addEventListener('blur', () => {
70-
if (document.activeElement?.tagName === 'IFRAME') {
71-
expanded.value = false
72-
}
73-
})
74-
})
75-
76-
async function fetchVersions(): Promise<string[]> {
77-
const res = await fetch(
78-
`https://api.github.com/repos/vuejs/core/releases?per_page=100`
47+
cls.toggle('dark')
48+
localStorage.setItem(
49+
'vue-sfc-playground-prefer-dark',
50+
String(cls.contains('dark'))
7951
)
80-
const releases: any[] = await res.json()
81-
const versions = releases.map(r =>
82-
/^v/.test(r.tag_name) ? r.tag_name.slice(1) : r.tag_name
83-
)
84-
// if the latest version is a pre-release, list all current pre-releases
85-
// otherwise filter out pre-releases
86-
let isInPreRelease = versions[0].includes('-')
87-
const filteredVersions: string[] = []
88-
for (const v of versions) {
89-
if (v.includes('-')) {
90-
if (isInPreRelease) {
91-
filteredVersions.push(v)
92-
}
93-
} else {
94-
filteredVersions.push(v)
95-
isInPreRelease = false
96-
}
97-
if (filteredVersions.length >= 30 || v === '3.0.10') {
98-
break
99-
}
100-
}
101-
return filteredVersions
52+
emit('toggle-theme', cls.contains('dark'))
10253
}
10354
</script>
10455

@@ -109,28 +60,28 @@ async function fetchVersions(): Promise<string[]> {
10960
<span>Vue SFC Playground</span>
11061
</h1>
11162
<div class="links">
112-
<div class="version" @click.stop>
113-
<span class="active-version" @click="toggle">
114-
Version
115-
<span class="number">{{ activeVersion }}</span>
116-
</span>
117-
<ul class="versions" :class="{ expanded }">
118-
<li v-if="!publishedVersions"><a>loading versions...</a></li>
119-
<li v-for="version of publishedVersions">
120-
<a @click="setVueVersion(version)">v{{ version }}</a>
121-
</li>
122-
<li>
123-
<a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
124-
</li>
125-
<li>
126-
<a
127-
href="https://app.netlify.com/sites/vue-sfc-playground/deploys"
128-
target="_blank"
129-
>Commits History</a
130-
>
131-
</li>
132-
</ul>
133-
</div>
63+
<VersionSelect
64+
v-model="store.state.typescriptVersion"
65+
pkg="typescript"
66+
label="TypeScript Version"
67+
/>
68+
<VersionSelect
69+
:model-value="vueVersion"
70+
@update:model-value="setVueVersion"
71+
pkg="vue"
72+
label="Vue Version"
73+
>
74+
<li>
75+
<a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
76+
</li>
77+
<li>
78+
<a
79+
href="https://app.netlify.com/sites/vue-sfc-playground/deploys"
80+
target="_blank"
81+
>Commits History</a
82+
>
83+
</li>
84+
</VersionSelect>
13485
<button
13586
title="Toggle development production mode"
13687
class="toggle-dev"
@@ -147,7 +98,7 @@ async function fetchVersions(): Promise<string[]> {
14798
>
14899
<span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
149100
</button>
150-
<button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
101+
<button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
151102
<Sun class="light" />
152103
<Moon class="dark" />
153104
</button>
@@ -235,33 +186,6 @@ h1 img {
235186
display: flex;
236187
}
237188
238-
.version {
239-
margin-right: 12px;
240-
position: relative;
241-
}
242-
243-
.active-version {
244-
cursor: pointer;
245-
position: relative;
246-
display: inline-flex;
247-
place-items: center;
248-
}
249-
250-
.active-version .number {
251-
color: var(--green);
252-
margin-left: 4px;
253-
}
254-
255-
.active-version::after {
256-
content: '';
257-
width: 0;
258-
height: 0;
259-
border-left: 4px solid transparent;
260-
border-right: 4px solid transparent;
261-
border-top: 6px solid #aaa;
262-
margin-left: 8px;
263-
}
264-
265189
.toggle-dev span,
266190
.toggle-ssr span {
267191
font-size: 12px;

‎packages/sfc-playground/src/VersionSelect.vue

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<script setup lang="ts">
2+
import { onMounted, ref } from 'vue'
3+
4+
const expanded = ref(false)
5+
const versions = ref<string[]>()
6+
7+
const version = defineModel()
8+
const props = defineProps<{
9+
pkg: string
10+
label: string
11+
}>()
12+
13+
async function toggle() {
14+
expanded.value = !expanded.value
15+
if (!versions.value) {
16+
versions.value = await fetchVersions()
17+
}
18+
}
19+
20+
async function fetchVersions(): Promise<string[]> {
21+
const res = await fetch(
22+
`https://data.jsdelivr.com/v1/package/npm/${props.pkg}`
23+
)
24+
const { versions } = (await res.json()) as { versions: string[] }
25+
26+
if (props.pkg === 'vue') {
27+
// if the latest version is a pre-release, list all current pre-releases
28+
// otherwise filter out pre-releases
29+
let isInPreRelease = versions[0].includes('-')
30+
const filteredVersions: string[] = []
31+
for (const v of versions) {
32+
if (v.includes('-')) {
33+
if (isInPreRelease) {
34+
filteredVersions.push(v)
35+
}
36+
} else {
37+
filteredVersions.push(v)
38+
isInPreRelease = false
39+
}
40+
if (filteredVersions.length >= 30 || v === '3.0.10') {
41+
break
42+
}
43+
}
44+
return filteredVersions
45+
} else if (props.pkg === 'typescript') {
46+
return versions.filter(v => !v.includes('dev') && !v.includes('insiders'))
47+
}
48+
return versions
49+
}
50+
51+
function setVersion(v: string) {
52+
version.value = v
53+
expanded.value = false
54+
}
55+
56+
onMounted(() => {
57+
window.addEventListener('click', () => {
58+
expanded.value = false
59+
})
60+
window.addEventListener('blur', () => {
61+
if (document.activeElement?.tagName === 'IFRAME') {
62+
expanded.value = false
63+
}
64+
})
65+
})
66+
</script>
67+
68+
<template>
69+
<div class="version" @click.stop>
70+
<span class="active-version" @click="toggle">
71+
{{ label }}
72+
<span class="number">{{ version }}</span>
73+
</span>
74+
75+
<ul class="versions" :class="{ expanded }">
76+
<li v-if="!versions"><a>loading versions...</a></li>
77+
<li v-for="version of versions">
78+
<a @click="setVersion(version)">v{{ version }}</a>
79+
</li>
80+
<div @click="expanded = false">
81+
<slot />
82+
</div>
83+
</ul>
84+
</div>
85+
</template>
86+
87+
<style>
88+
.version {
89+
margin-right: 12px;
90+
position: relative;
91+
}
92+
93+
.active-version {
94+
cursor: pointer;
95+
position: relative;
96+
display: inline-flex;
97+
place-items: center;
98+
}
99+
100+
.active-version .number {
101+
color: var(--green);
102+
margin-left: 4px;
103+
}
104+
105+
.active-version::after {
106+
content: '';
107+
width: 0;
108+
height: 0;
109+
border-left: 4px solid transparent;
110+
border-right: 4px solid transparent;
111+
border-top: 6px solid #aaa;
112+
margin-left: 8px;
113+
}
114+
</style>

‎packages/sfc-playground/vite.config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default defineConfig({
1010
plugins: [
1111
vue({
1212
script: {
13+
defineModel: true,
1314
fs: {
1415
fileExists: fs.existsSync,
1516
readFile: file => fs.readFileSync(file, 'utf-8')

0 commit comments

Comments
 (0)