feat: add template for new file

src/Repl.vue

@@ -75,8 +75,8 @@ sfcOptions.script.fs = {
 
 store.init()
 
-const editorSlotName = computed(() => props.layoutReverse ? 'right' : 'left')
-const outputSlotName = computed(() => props.layoutReverse ? 'left' : 'right')
+const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
+const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
 provide('store', store)
 provide('autoresize', props.autoResize)

src/store.ts

@@ -9,25 +9,14 @@ import {
 } from 'vue/compiler-sfc'
 import { OutputModes } from './output/types'
 import type { editor } from 'monaco-editor-core'
+import welcomeCode from './template/welcome.vue?raw'
+import newFileCode from './template/new-file.vue?raw'
 
 const defaultMainFile = 'src/App.vue'
 
 export const importMapFile = 'import-map.json'
 export const tsconfigFile = 'tsconfig.json'
 
-const welcomeCode = `
-<script setup>
-import { ref } from 'vue'
-
-const msg = ref('Hello World!')
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-  <input v-model="msg">
-</template>
-`.trim()
-
 const tsconfig = {
   compilerOptions: {
     allowJs: true,
@@ -254,7 +243,7 @@ export class ReplStore implements Store {
   addFile(fileOrFilename: string | File): void {
     const file =
       typeof fileOrFilename === 'string'
-        ? new File(fileOrFilename)
+        ? new File(fileOrFilename, newFileCode)
         : fileOrFilename
     this.state.files[file.filename] = file
     if (!file.hidden) this.setActive(file.filename)

src/template/new-file.vue

@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

src/template/welcome.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { ref } from 'vue'
+
+const msg = ref('Hello World!')
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+  <input v-model="msg" />
+</template>