chore(sfc-playground): update code style and syntax

vuejs · Aug 17, 2021 · e22d7cd · e22d7cd
1 parent ceace3a
commit e22d7cd
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 157 deletions.
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import Header from './Header.vue'
+import SplitPane from './SplitPane.vue'
+import Editor from './editor/Editor.vue'
+import Output from './output/Output.vue'
+</script>
+
 <template>
   <Header />
   <div class="wrapper">
@@ -12,13 +19,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import Header from './Header.vue'
-import SplitPane from './SplitPane.vue'
-import Editor from './editor/Editor.vue'
-import Output from './output/Output.vue'
-</script>
-
 <style>
 body {
   font-size: 13px;

diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 import { downloadProject } from './download/download'
 import { setVersion, resetVersion } from './sfcCompiler'

diff --git a/packages/sfc-playground/src/Message.vue b/packages/sfc-playground/src/Message.vue
@@ -1,23 +1,17 @@
-<template>
-  <Transition name="fade">
-    <pre v-if="!dismissed && (err || warn)"
-      class="msg"
-      :class="err ? 'err' : 'warn'"
-      @click="dismissed = true">{{ formatMessage(err || warn) }}</pre>
-  </Transition>
-</template>
-
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import type { CompilerError } from '@vue/compiler-sfc'
+import { CompilerError } from '@vue/compiler-sfc'
 
 const props = defineProps(['err', 'warn'])
 
 const dismissed = ref(false)
 
-watch(() => [props.err, props.warn], () => {
-  dismissed.value = false
-})
+watch(
+  () => [props.err, props.warn],
+  () => {
+    dismissed.value = false
+  }
+)
 
 function formatMessage(err: string | Error): string {
   if (typeof err === 'string') {
@@ -33,6 +27,18 @@ function formatMessage(err: string | Error): string {
 }
 </script>
 
+<template>
+  <Transition name="fade">
+    <pre
+      v-if="!dismissed && (err || warn)"
+      class="msg"
+      :class="err ? 'err' : 'warn'"
+      @click="dismissed = true"
+      >{{ formatMessage(err || warn) }}</pre
+    >
+  </Transition>
+</template>
+
 <style scoped>
 .msg {
   position: absolute;

diff --git a/packages/sfc-playground/src/SplitPane.vue b/packages/sfc-playground/src/SplitPane.vue
@@ -1,22 +1,3 @@
-<template>
-  <div
-    ref="container"
-    class="split-pane"
-    :class="{ dragging: state.dragging }"
-    @mousemove="dragMove"
-    @mouseup="dragEnd"
-    @mouseleave="dragEnd"
-  >
-    <div class="left" :style="{ width: boundSplit() + '%' }">
-      <slot name="left" />
-      <div class="dragger" @mousedown.prevent="dragStart" />
-    </div>
-    <div class="right" :style="{ width: (100 - boundSplit()) + '%' }">
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 
@@ -29,11 +10,7 @@ const state = reactive({
 
 function boundSplit() {
   const { split } = state
-  return split < 20
-    ? 20
-    : split > 80
-      ? 80
-      : split
+  return split < 20 ? 20 : split > 80 ? 80 : split
 }
 
 let startPosition = 0
@@ -50,7 +27,7 @@ function dragMove(e: MouseEvent) {
     const position = e.pageX
     const totalSize = container.value.offsetWidth
     const dp = position - startPosition
-    state.split = startSplit + ~~(dp / totalSize * 100)
+    state.split = startSplit + ~~((dp / totalSize) * 100)
   }
 }
 
@@ -59,6 +36,25 @@ function dragEnd() {
 }
 </script>
 
+<template>
+  <div
+    ref="container"
+    class="split-pane"
+    :class="{ dragging: state.dragging }"
+    @mousemove="dragMove"
+    @mouseup="dragEnd"
+    @mouseleave="dragEnd"
+  >
+    <div class="left" :style="{ width: boundSplit() + '%' }">
+      <slot name="left" />
+      <div class="dragger" @mousedown.prevent="dragStart" />
+    </div>
+    <div class="right" :style="{ width: 100 - boundSplit() + '%' }">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .split-pane {
   display: flex;
@@ -88,4 +84,4 @@ function dragEnd() {
   width: 10px;
   cursor: ew-resize;
 }
-</style>
+</style>
diff --git a/packages/sfc-playground/src/editor/Editor.vue b/packages/sfc-playground/src/editor/Editor.vue
@@ -1,11 +1,3 @@
-<template>
-  <FileSelector/>
-  <div class="editor-container">
-    <CodeMirror @change="onChange" :value="activeCode" :mode="activeMode" />
-    <Message :err="store.errors[0]" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import FileSelector from './FileSelector.vue'
 import CodeMirror from '../codemirror/CodeMirror.vue'
@@ -19,8 +11,8 @@ const onChange = debounce((code: string) => {
 }, 250)
 
 const activeCode = ref(store.activeFile.code)
-const activeMode = computed(
-  () => (store.activeFilename.endsWith('.vue') ? 'htmlmixed' : 'javascript')
+const activeMode = computed(() =>
+  store.activeFilename.endsWith('.vue') ? 'htmlmixed' : 'javascript'
 )
 
 watch(
@@ -31,6 +23,14 @@ watch(
 )
 </script>
 
+<template>
+  <FileSelector />
+  <div class="editor-container">
+    <CodeMirror @change="onChange" :value="activeCode" :mode="activeMode" />
+    <Message :err="store.errors[0]" />
+  </div>
+</template>
+
 <style scoped>
 .editor-container {
   height: calc(100% - 35px);

diff --git a/packages/sfc-playground/src/editor/FileSelector.vue b/packages/sfc-playground/src/editor/FileSelector.vue
@@ -1,31 +1,6 @@
-<template>
-  <div class="file-selector">
-    <div
-      v-for="(file, i) in Object.keys(store.files)"
-      class="file"
-      :class="{ active: store.activeFilename === file }"
-      @click="setActive(file)">
-      <span class="label">{{ file }}</span>
-      <span v-if="i > 0" class="remove" @click.stop="deleteFile(file)">
-        <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>
-      </span>
-    </div>
-    <div v-if="pending" class="file" >
-      <input
-        v-model="pendingFilename"
-        spellcheck="false"
-        @keyup.enter="doneAddFile"
-        @keyup.esc="cancelAddFile"
-        @vnodeMounted="focus">
-    </div>
-    <button class="add" @click="startAddFile">+</button>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { store, addFile, deleteFile, setActive } from '../store'
-import { ref } from 'vue'
-import type { VNode } from 'vue'
+import { ref, VNode } from 'vue'
 
 const pending = ref(false)
 const pendingFilename = ref('Comp.vue')
@@ -39,7 +14,7 @@ function cancelAddFile() {
 }
 
 function focus({ el }: VNode) {
-  (el as HTMLInputElement).focus()
+  ;(el as HTMLInputElement).focus()
 }
 
 function doneAddFile() {
@@ -50,7 +25,9 @@ function doneAddFile() {
     !filename.endsWith('.js') &&
     filename !== 'import-map.json'
   ) {
-    store.errors = [`Playground only supports *.vue, *.js files or import-map.json.`]
+    store.errors = [
+      `Playground only supports *.vue, *.js files or import-map.json.`
+    ]
     return
   }
 
@@ -66,6 +43,35 @@ function doneAddFile() {
 }
 </script>
 
+<template>
+  <div class="file-selector">
+    <div
+      v-for="(file, i) in Object.keys(store.files)"
+      class="file"
+      :class="{ active: store.activeFilename === file }"
+      @click="setActive(file)"
+    >
+      <span class="label">{{ file }}</span>
+      <span v-if="i > 0" class="remove" @click.stop="deleteFile(file)">
+        <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>
+      </span>
+    </div>
+    <div v-if="pending" class="file">
+      <input
+        v-model="pendingFilename"
+        spellcheck="false"
+        @keyup.enter="doneAddFile"
+        @keyup.esc="cancelAddFile"
+        @vnodeMounted="focus"
+      />
+    </div>
+    <button class="add" @click="startAddFile">+</button>
+  </div>
+</template>
+
 <style scoped>
 .file-selector {
   box-sizing: border-box;

diff --git a/packages/sfc-playground/src/output/Output.vue b/packages/sfc-playground/src/output/Output.vue
@@ -1,6 +1,24 @@
+<script setup lang="ts">
+import Preview from './Preview.vue'
+import CodeMirror from '../codemirror/CodeMirror.vue'
+import { store } from '../store'
+import { ref } from 'vue'
+
+const modes = ['preview', 'js', 'css', 'ssr'] as const
+
+type Modes = typeof modes[number]
+const mode = ref<Modes>('preview')
+</script>
+
 <template>
   <div class="tab-buttons">
-    <button v-for="m of modes" :class="{ active: mode === m }" @click="mode = m">{{ m }}</button>
+    <button
+      v-for="m of modes"
+      :class="{ active: mode === m }"
+      @click="mode = m"
+    >
+      {{ m }}
+    </button>
   </div>
 
   <div class="output-container">
@@ -14,18 +32,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import Preview from './Preview.vue'
-import CodeMirror from '../codemirror/CodeMirror.vue'
-import { store } from '../store'
-import { ref } from 'vue'
-
-const modes = ['preview', 'js', 'css', 'ssr'] as const
-
-type Modes = typeof modes[number]
-const mode = ref<Modes>('preview')
-</script>
-
 <style scoped>
 .output-container {
   height: calc(100% - 35px);