feat: console

components.d.ts

@@ -7,7 +7,9 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Console: (typeof import('./src/components/Console.vue'))['default'];
     Header: (typeof import('./src/components/Header.vue'))['default'];
+    Message: (typeof import('./src/components/Message.vue'))['default'];
     VanIcon: (typeof import('vant/es'))['Icon'];
     VersionSelect: (typeof import('./src/components/VersionSelect.vue'))['default'];
   }

package.json

@@ -14,13 +14,13 @@
     "format": "prettier -w --cache \"**/*.[tj]s?(x)\""
   },
   "dependencies": {
+    "@types/splitpanes": "^2.2.6",
     "@unocss/reset": "^0.58.0",
     "@vant/icons": "^3.0.2",
     "@vue/repl": "^3.0.0",
     "@vueuse/core": "^10.7.0",
     "fflate": "^0.8.1",
     "semver": "^7.5.4",
-    "@types/splitpanes": "^2.2.6",
     "splitpanes": "^3.1.5",
     "vant": "^4.8.1",
     "vue": "^3.3.11"

src/App.vue

@@ -2,6 +2,7 @@
 import { Repl, Preview, type SFCOptions } from '@vue/repl';
 import Monaco from '@vue/repl/monaco-editor';
 import Header from './components/Header.vue';
+import Console from './components/Console.vue';
 import { ref, provide, watchEffect, computed } from 'vue';
 import { useDark } from '@vueuse/core';
 import { Splitpanes, Pane } from 'splitpanes';
@@ -48,22 +49,43 @@ function reload() {
 
 defineExpose({ reload });
 watchEffect(() => history.replaceState({}, '', store.serialize()));
-const panelSize = ref(20)
+const panelSize = ref(25);
 const onResizePanel = (event: { size: number }[]) => {
-  panelSize.value = event[0].size
-}
+  panelSize.value = event[0].size;
+};
+const panelConfig = computed(() => {
+  return {
+    output: {
+      size: panelSize.value,
+      minSize: 20,
+    },
+    editor: {
+      size: 100 - 20 - panelSize.value,
+      minSize: 20,
+    },
+    console: {
+      size: 40,
+    },
+  };
+});
 </script>
 
 <template>
   <Header :config="config" :lang-configs="langConfigs" lang="zh-CN"> </Header>
   <div class="van-repl">
     <splitpanes class="default-theme" @resize="onResizePanel">
-      <pane :size="panelSize" min-size="20">
+      <pane
+        :size="panelConfig.output.size"
+        :min-size="panelConfig.output.minSize"
+      >
         <div class="van-output">
           <Preview ref="previewRef" :show="true" :ssr="false" />
         </div>
       </pane>
-      <pane :size="100 - panelSize" min-size="20">
+      <pane
+        :size="panelConfig.editor.size"
+        :min-size="panelConfig.editor.minSize"
+      >
         <div class="van-editor">
           <Repl
             ref="replRef"
@@ -79,6 +101,9 @@ const onResizePanel = (event: { size: number }[]) => {
           />
         </div>
       </pane>
+      <pane :size="panelConfig.console.size">
+        <Console />
+      </pane>
     </splitpanes>
   </div>
 </template>
@@ -111,7 +136,8 @@ body {
   .right {
     flex: 1;
   }
-  .left, .toggler {
+  .left,
+  .toggler {
     display: none;
   }
 }

src/components/Console.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ReplStore } from '@vue/repl';
+import { inject } from 'vue';
+import Message from './Message.vue';
+
+const store = inject('store') as ReplStore;
+</script>
+
+<template>
+  <div class="van-console">
+    <div class="no-error" v-show="store.state.errors.length === 0">No error log :)</div>
+    <block v-show="store.state.errors.length !== 0">
+      <Message
+        v-for="(error, index) in store.state.errors"
+        :key="index"
+        :error="error"
+      />
+    </block>
+  </div>
+</template>
+
+<style>
+.van-console {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  background-color: #fff;
+  .no-error {
+    color: var(--van-doc-green);
+    font-size: 28px;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+}
+</style>

src/components/Message.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { withDefaults, computed, defineProps } from 'vue';
+import { type CompilerError } from 'vue/compiler-sfc';
+const props = withDefaults(
+  defineProps<{
+    error: string | Error;
+  }>(),
+  { error: '' },
+);
+
+const formatMessage = (err: string | Error): string => {
+  if (typeof err === 'string') {
+    return err;
+  } else {
+    let msg = err.message;
+    const { loc } = err as CompilerError;
+    if (loc && loc.start) {
+      msg = `(${loc.start.line}:${loc.start.column}) ` + msg;
+    }
+    return msg;
+  }
+};
+const error = computed(() => formatMessage(props.error));
+</script>
+<template>
+  <div class="van-message">{{ error }}</div>
+</template>
+
+<style lang="scss">
+.van-message {
+  background-color: #fef0f0;
+  color: #f56c6c;
+  border: 1px solid #f56c6c;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  width: 100%;
+  padding: 10px;
+}
+</style>

src/components/VersionSelect.vue

@@ -2,7 +2,6 @@
 import {
   ref,
   defineProps,
-  defineEmits,
   type Ref,
 } from "vue";
 const emit = defineEmits(["update:modelValue"]);

src/store.ts

@@ -74,8 +74,8 @@ const _files = {
   [TSCONFIG]: tsconfigCode,
 };
 
-const userFiles = location.hash.slice(1);
-// const userFiles = "";
+// const userFiles = location.hash.slice(1);
+const userFiles = '';
 
 class VantReplStore extends ReplStore {
   constructor(storeOptions: StoreOptions = {}) {