Skip to content

Commit e22d7cd

Browse files
yyx990803yyx990803
committed
chore(sfc-playground): update code style and syntax
1 parent ceace3a commit e22d7cd

File tree

8 files changed

+184
-157
lines changed

8 files changed

+184
-157
lines changed

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
<script setup lang="ts">
2+
import Header from './Header.vue'
3+
import SplitPane from './SplitPane.vue'
4+
import Editor from './editor/Editor.vue'
5+
import Output from './output/Output.vue'
6+
</script>
7+
18
<template>
29
<Header />
310
<div class="wrapper">
@@ -12,13 +19,6 @@
1219
</div>
1320
</template>
1421

15-
<script setup lang="ts">
16-
import Header from './Header.vue'
17-
import SplitPane from './SplitPane.vue'
18-
import Editor from './editor/Editor.vue'
19-
import Output from './output/Output.vue'
20-
</script>
21-
2222
<style>
2323
body {
2424
font-size: 13px;

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<script setup lang="ts">
32
import { downloadProject } from './download/download'
43
import { setVersion, resetVersion } from './sfcCompiler'

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

+19-13
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
1-
<template>
2-
<Transition name="fade">
3-
<pre v-if="!dismissed && (err || warn)"
4-
class="msg"
5-
:class="err ? 'err' : 'warn'"
6-
@click="dismissed = true">{{ formatMessage(err || warn) }}</pre>
7-
</Transition>
8-
</template>
9-
101
<script setup lang="ts">
112
import { ref, watch } from 'vue'
12-
import type { CompilerError } from '@vue/compiler-sfc'
3+
import { CompilerError } from '@vue/compiler-sfc'
134
145
const props = defineProps(['err', 'warn'])
156
167
const dismissed = ref(false)
178
18-
watch(() => [props.err, props.warn], () => {
19-
dismissed.value = false
20-
})
9+
watch(
10+
() => [props.err, props.warn],
11+
() => {
12+
dismissed.value = false
13+
}
14+
)
2115
2216
function formatMessage(err: string | Error): string {
2317
if (typeof err === 'string') {
@@ -33,6 +27,18 @@ function formatMessage(err: string | Error): string {
3327
}
3428
</script>
3529

30+
<template>
31+
<Transition name="fade">
32+
<pre
33+
v-if="!dismissed && (err || warn)"
34+
class="msg"
35+
:class="err ? 'err' : 'warn'"
36+
@click="dismissed = true"
37+
>{{ formatMessage(err || warn) }}</pre
38+
>
39+
</Transition>
40+
</template>
41+
3642
<style scoped>
3743
.msg {
3844
position: absolute;

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

+22-26
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,3 @@
1-
<template>
2-
<div
3-
ref="container"
4-
class="split-pane"
5-
:class="{ dragging: state.dragging }"
6-
@mousemove="dragMove"
7-
@mouseup="dragEnd"
8-
@mouseleave="dragEnd"
9-
>
10-
<div class="left" :style="{ width: boundSplit() + '%' }">
11-
<slot name="left" />
12-
<div class="dragger" @mousedown.prevent="dragStart" />
13-
</div>
14-
<div class="right" :style="{ width: (100 - boundSplit()) + '%' }">
15-
<slot name="right" />
16-
</div>
17-
</div>
18-
</template>
19-
201
<script setup lang="ts">
212
import { ref, reactive } from 'vue'
223
@@ -29,11 +10,7 @@ const state = reactive({
2910
3011
function boundSplit() {
3112
const { split } = state
32-
return split < 20
33-
? 20
34-
: split > 80
35-
? 80
36-
: split
13+
return split < 20 ? 20 : split > 80 ? 80 : split
3714
}
3815
3916
let startPosition = 0
@@ -50,7 +27,7 @@ function dragMove(e: MouseEvent) {
5027
const position = e.pageX
5128
const totalSize = container.value.offsetWidth
5229
const dp = position - startPosition
53-
state.split = startSplit + ~~(dp / totalSize * 100)
30+
state.split = startSplit + ~~((dp / totalSize) * 100)
5431
}
5532
}
5633
@@ -59,6 +36,25 @@ function dragEnd() {
5936
}
6037
</script>
6138

39+
<template>
40+
<div
41+
ref="container"
42+
class="split-pane"
43+
:class="{ dragging: state.dragging }"
44+
@mousemove="dragMove"
45+
@mouseup="dragEnd"
46+
@mouseleave="dragEnd"
47+
>
48+
<div class="left" :style="{ width: boundSplit() + '%' }">
49+
<slot name="left" />
50+
<div class="dragger" @mousedown.prevent="dragStart" />
51+
</div>
52+
<div class="right" :style="{ width: 100 - boundSplit() + '%' }">
53+
<slot name="right" />
54+
</div>
55+
</div>
56+
</template>
57+
6258
<style scoped>
6359
.split-pane {
6460
display: flex;
@@ -88,4 +84,4 @@ function dragEnd() {
8884
width: 10px;
8985
cursor: ew-resize;
9086
}
91-
</style>
87+
</style>

‎packages/sfc-playground/src/editor/Editor.vue

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
<template>
2-
<FileSelector/>
3-
<div class="editor-container">
4-
<CodeMirror @change="onChange" :value="activeCode" :mode="activeMode" />
5-
<Message :err="store.errors[0]" />
6-
</div>
7-
</template>
8-
91
<script setup lang="ts">
102
import FileSelector from './FileSelector.vue'
113
import CodeMirror from '../codemirror/CodeMirror.vue'
@@ -19,8 +11,8 @@ const onChange = debounce((code: string) => {
1911
}, 250)
2012
2113
const activeCode = ref(store.activeFile.code)
22-
const activeMode = computed(
23-
() => (store.activeFilename.endsWith('.vue') ? 'htmlmixed' : 'javascript')
14+
const activeMode = computed(() =>
15+
store.activeFilename.endsWith('.vue') ? 'htmlmixed' : 'javascript'
2416
)
2517
2618
watch(
@@ -31,6 +23,14 @@ watch(
3123
)
3224
</script>
3325

26+
<template>
27+
<FileSelector />
28+
<div class="editor-container">
29+
<CodeMirror @change="onChange" :value="activeCode" :mode="activeMode" />
30+
<Message :err="store.errors[0]" />
31+
</div>
32+
</template>
33+
3434
<style scoped>
3535
.editor-container {
3636
height: calc(100% - 35px);

‎packages/sfc-playground/src/editor/FileSelector.vue

+34-28
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,6 @@
1-
<template>
2-
<div class="file-selector">
3-
<div
4-
v-for="(file, i) in Object.keys(store.files)"
5-
class="file"
6-
:class="{ active: store.activeFilename === file }"
7-
@click="setActive(file)">
8-
<span class="label">{{ file }}</span>
9-
<span v-if="i > 0" class="remove" @click.stop="deleteFile(file)">
10-
<svg width="12" height="12" viewBox="0 0 24 24" class="svelte-cghqrp"><line stroke="#999" x1="18" y1="6" x2="6" y2="18"></line><line stroke="#999" x1="6" y1="6" x2="18" y2="18"></line></svg>
11-
</span>
12-
</div>
13-
<div v-if="pending" class="file" >
14-
<input
15-
v-model="pendingFilename"
16-
spellcheck="false"
17-
@keyup.enter="doneAddFile"
18-
@keyup.esc="cancelAddFile"
19-
@vnodeMounted="focus">
20-
</div>
21-
<button class="add" @click="startAddFile">+</button>
22-
</div>
23-
</template>
24-
251
<script setup lang="ts">
262
import { store, addFile, deleteFile, setActive } from '../store'
27-
import { ref } from 'vue'
28-
import type { VNode } from 'vue'
3+
import { ref, VNode } from 'vue'
294
305
const pending = ref(false)
316
const pendingFilename = ref('Comp.vue')
@@ -39,7 +14,7 @@ function cancelAddFile() {
3914
}
4015
4116
function focus({ el }: VNode) {
42-
(el as HTMLInputElement).focus()
17+
;(el as HTMLInputElement).focus()
4318
}
4419
4520
function doneAddFile() {
@@ -50,7 +25,9 @@ function doneAddFile() {
5025
!filename.endsWith('.js') &&
5126
filename !== 'import-map.json'
5227
) {
53-
store.errors = [`Playground only supports *.vue, *.js files or import-map.json.`]
28+
store.errors = [
29+
`Playground only supports *.vue, *.js files or import-map.json.`
30+
]
5431
return
5532
}
5633
@@ -66,6 +43,35 @@ function doneAddFile() {
6643
}
6744
</script>
6845

46+
<template>
47+
<div class="file-selector">
48+
<div
49+
v-for="(file, i) in Object.keys(store.files)"
50+
class="file"
51+
:class="{ active: store.activeFilename === file }"
52+
@click="setActive(file)"
53+
>
54+
<span class="label">{{ file }}</span>
55+
<span v-if="i > 0" class="remove" @click.stop="deleteFile(file)">
56+
<svg width="12" height="12" viewBox="0 0 24 24" class="svelte-cghqrp">
57+
<line stroke="#999" x1="18" y1="6" x2="6" y2="18"></line>
58+
<line stroke="#999" x1="6" y1="6" x2="18" y2="18"></line>
59+
</svg>
60+
</span>
61+
</div>
62+
<div v-if="pending" class="file">
63+
<input
64+
v-model="pendingFilename"
65+
spellcheck="false"
66+
@keyup.enter="doneAddFile"
67+
@keyup.esc="cancelAddFile"
68+
@vnodeMounted="focus"
69+
/>
70+
</div>
71+
<button class="add" @click="startAddFile">+</button>
72+
</div>
73+
</template>
74+
6975
<style scoped>
7076
.file-selector {
7177
box-sizing: border-box;

‎packages/sfc-playground/src/output/Output.vue

+19-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
1+
<script setup lang="ts">
2+
import Preview from './Preview.vue'
3+
import CodeMirror from '../codemirror/CodeMirror.vue'
4+
import { store } from '../store'
5+
import { ref } from 'vue'
6+
7+
const modes = ['preview', 'js', 'css', 'ssr'] as const
8+
9+
type Modes = typeof modes[number]
10+
const mode = ref<Modes>('preview')
11+
</script>
12+
113
<template>
214
<div class="tab-buttons">
3-
<button v-for="m of modes" :class="{ active: mode === m }" @click="mode = m">{{ m }}</button>
15+
<button
16+
v-for="m of modes"
17+
:class="{ active: mode === m }"
18+
@click="mode = m"
19+
>
20+
{{ m }}
21+
</button>
422
</div>
523

624
<div class="output-container">
@@ -14,18 +32,6 @@
1432
</div>
1533
</template>
1634

17-
<script setup lang="ts">
18-
import Preview from './Preview.vue'
19-
import CodeMirror from '../codemirror/CodeMirror.vue'
20-
import { store } from '../store'
21-
import { ref } from 'vue'
22-
23-
const modes = ['preview', 'js', 'css', 'ssr'] as const
24-
25-
type Modes = typeof modes[number]
26-
const mode = ref<Modes>('preview')
27-
</script>
28-
2935
<style scoped>
3036
.output-container {
3137
height: calc(100% - 35px);

0 commit comments

Comments
 (0)