workflow(sfc-playground): support multiple files

Author: yyx990803

packages/compiler-sfc/src/index.ts

@@ -11,6 +11,7 @@ export { parse as babelParse } from '@babel/parser'
 export { walkIdentifiers } from './compileScript'
 import MagicString from 'magic-string'
 export { MagicString }
+export { walk } from 'estree-walker'
 
 // Types
 export {

packages/sfc-playground/src/App.vue

@@ -29,6 +29,8 @@ body {
   background-color: #f8f8f8;
   --nav-height: 50px;
   --font-code: 'Source Code Pro', monospace;
+  --color-branding: #3ca877;
+  --color-branding-dark: #416f9c;
 }
 
 .wrapper {

packages/sfc-playground/src/Message.vue

@@ -38,6 +38,8 @@ function formatMessage(err: string | Error): string {
   border-radius: 6px;
   font-family: var(--font-code);
   white-space: pre-wrap;
+  max-height: calc(100% - 50px);
+  overflow-y: scroll;
 }
 
 .msg.err {

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

@@ -1,17 +1,40 @@
 <template>
-    <CodeMirror @change="onChange" :value="initialCode" />
+  <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'
 import Message from '../Message.vue'
 import { store } from '../store'
 import { debounce } from '../utils'
+import { ref, watch, computed } from 'vue'
 
 const onChange = debounce((code: string) => {
-  store.code = code
+  store.activeFile.code = code
 }, 250)
 
-const initialCode = store.code
-</script>
+const activeCode = ref(store.activeFile.code)
+const activeMode = computed(
+  () => (store.activeFilename.endsWith('.js') ? 'javascript' : 'htmlmixed')
+)
+
+watch(
+  () => store.activeFilename,
+  () => {
+    activeCode.value = store.activeFile.code
+  }
+)
+</script>
+
+<style scoped>
+.editor-container {
+  height: calc(100% - 35px);
+  overflow: hidden;
+  position: relative;
+}
+</style>

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

@@ -0,0 +1,118 @@
+<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'
+
+const pending = ref(false)
+const pendingFilename = ref('Comp.vue')
+
+function startAddFile() {
+  pending.value = true
+}
+
+function cancelAddFile() {
+  pending.value = false
+}
+
+function focus({ el }: VNode) {
+  (el as HTMLInputElement).focus()
+}
+
+function doneAddFile() {
+  const filename = pendingFilename.value
+
+  if (!filename.endsWith('.vue') && !filename.endsWith('.js')) {
+    store.errors = [`Playground only supports .vue or .js files.`]
+    return
+  }
+
+  if (filename in store.files) {
+    store.errors = [`File "${filename}" already exists.`]
+    return
+  }
+
+  store.errors = []
+  pending.value = false
+  addFile(filename)
+  pendingFilename.value = 'Comp.vue'
+}
+</script>
+
+<style scoped>
+.file-selector {
+  box-sizing: border-box;
+  border-bottom: 1px solid #ddd;
+  background-color: white;
+}
+.file {
+  display: inline-block;
+  font-size: 13px;
+  font-family: var(--font-code);
+  cursor: pointer;
+  color: #999;
+  box-sizing: border-box;
+}
+.file.active {
+  color: var(--color-branding);
+  border-bottom: 3px solid var(--color-branding);
+  cursor: text;
+}
+.file span {
+  display: inline-block;
+  padding: 8px 10px 6px;
+}
+.file input {
+  width: 80px;
+  outline: none;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 4px 6px;
+  margin-left: 6px;
+}
+.file .remove {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 12px;
+  cursor: pointer;
+  padding-left: 0;
+}
+.add {
+  margin: 0;
+  font-size: 20px;
+  font-family: var(--font-code);
+  color: #999;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  vertical-align: middle;
+  margin-left: 6px;
+}
+.add:hover {
+  color: var(--color-branding);
+}
+</style>

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

@@ -4,12 +4,12 @@
   </div>
 
   <div class="output-container">
-    <Preview v-if="mode === 'preview'" :code="store.compiled.executed" />
+    <Preview v-if="mode === 'preview'" />
     <CodeMirror
       v-else
       readonly
       :mode="mode === 'css' ? 'css' : 'javascript'"
-      :value="store.compiled[mode]"
+      :value="store.activeFile.compiled[mode]"
     />
   </div>
 </template>
@@ -20,9 +20,9 @@ import CodeMirror from '../codemirror/CodeMirror.vue'
 import { store } from '../store'
 import { ref } from 'vue'
 
-type Modes = 'preview' | 'executed' | 'js' | 'css' | 'template'
+type Modes = 'preview' | 'js' | 'css'
 
-const modes: Modes[] = ['preview', 'js', 'css', 'template', 'executed']
+const modes: Modes[] = ['preview', 'js', 'css']
 const mode = ref<Modes>('preview')
 </script>
 
@@ -35,14 +35,15 @@ const mode = ref<Modes>('preview')
 .tab-buttons {
   box-sizing: border-box;
   border-bottom: 1px solid #ddd;
+  background-color: white;
 }
 .tab-buttons button {
   margin: 0;
   font-size: 13px;
-  font-family: 'Source Code Pro', monospace;
+  font-family: var(--font-code);
   border: none;
   outline: none;
-  background-color: #f8f8f8;
+  background-color: transparent;
   padding: 8px 16px 6px;
   text-transform: uppercase;
   cursor: pointer;
@@ -51,7 +52,7 @@ const mode = ref<Modes>('preview')
 }
 
 button.active {
-  color: #42b983;
-  border-bottom: 3px solid #42b983;
+  color: var(--color-branding-dark);
+  border-bottom: 3px solid var(--color-branding-dark);
 }
 </style>

packages/sfc-playground/src/output/Preview.vue

@@ -11,12 +11,11 @@
 
 <script setup lang="ts">
 import Message from '../Message.vue'
-import { ref, onMounted, onUnmounted, watchEffect, defineProps } from 'vue'
+import { ref, onMounted, onUnmounted, watchEffect } from 'vue'
 import srcdoc from './srcdoc.html?raw'
 import { PreviewProxy } from './PreviewProxy'
-import { sandboxVueURL } from '../store'
-
-const props = defineProps<{ code: string }>()
+import { MAIN_FILE, SANDBOX_VUE_URL } from '../store'
+import { compileModulesForPreview } from './moduleCompiler'
 
 const iframe = ref()
 const runtimeError = ref()
@@ -25,32 +24,35 @@ const runtimeWarning = ref()
 let proxy: PreviewProxy
 
 async function updatePreview() {
-  if (!props.code?.trim()) {
-    return
-  }
+  runtimeError.value = null
+  runtimeWarning.value = null
   try {
-  proxy.eval(`
-  ${props.code}
-
-  if (window.vueApp) {
-    window.vueApp.unmount()
-  }
-  const container = document.getElementById('app')
-  container.innerHTML = ''
-
-  import { createApp as _createApp } from "${sandboxVueURL}"
-  const app = window.vueApp = _createApp(__comp)
-
-  app.config.errorHandler = e => console.error(e)
-
-  app.mount(container)
-  `)
+    const modules = compileModulesForPreview()
+    console.log(`successfully compiled ${modules.length} modules.`)
+    // reset modules
+    await proxy.eval(`
+    window.__modules__ = {}
+    window.__css__ = ''
+    `)
+    // evaluate modules
+    for (const mod of modules) {
+      await proxy.eval(mod)
+    }
+    // reboot
+    await proxy.eval(`
+    import { createApp as _createApp } from "${SANDBOX_VUE_URL}"
+    if (window.__app__) {
+      window.__app__.unmount()
+      document.getElementById('app').innerHTML = ''
+    }
+    document.getElementById('__sfc-styles').innerHTML = window.__css__
+    const app = window.__app__ = _createApp(__modules__["${MAIN_FILE}"].default)
+    app.config.errorHandler = e => console.error(e)
+    app.mount('#app')
+    `)
   } catch (e) {
-    runtimeError.value = e.message
-    return
+    runtimeError.value = e.stack
   }
-  runtimeError.value = null
-  runtimeWarning.value = null
 }
 
 onMounted(() => {
@@ -59,7 +61,6 @@ onMounted(() => {
       // pending_imports = progress;
     },
     on_error: (event: any) => {
-      // push_logs({ level: 'error', args: [event.value] });
       runtimeError.value = event.value
     },
     on_unhandled_rejection: (event: any) => {
@@ -69,10 +70,17 @@ onMounted(() => {
     },
     on_console: (log: any) => {
       if (log.level === 'error') {
-        runtimeError.value = log.args.join('')
+        if (log.args[0] instanceof Error) {
+          runtimeError.value = log.args[0].stack
+        } else {
+          runtimeError.value = log.args
+        }
       } else if (log.level === 'warn') {
         if (log.args[0].toString().includes('[Vue warn]')) {
-          runtimeWarning.value = log.args.join('').replace(/\[Vue warn\]:/, '').trim()
+          runtimeWarning.value = log.args
+            .join('')
+            .replace(/\[Vue warn\]:/, '')
+            .trim()
         }
       }
     },
@@ -88,9 +96,9 @@ onMounted(() => {
   })
 
   iframe.value.addEventListener('load', () => {
-    proxy.handle_links();
+    proxy.handle_links()
     watchEffect(updatePreview)
-  });
+  })
 })
 
 onUnmounted(() => {