Skip to content

Commit a8878d1

Browse files
litingyeslitingyes
committed
feat: export extend editor-container
1 parent 674c9c3 commit a8878d1

File tree

7 files changed

+96
-44
lines changed

7 files changed

+96
-44
lines changed

‎src/editor/EditorContainer.vue

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,9 @@ import type { EditorComponentType } from './types'
99
1010
const SHOW_ERROR_KEY = 'repl_show_error'
1111
12-
export interface Props {
12+
const props = defineProps<{
1313
editorComponent: EditorComponentType
14-
hideFileSelector?: Boolean
15-
}
16-
17-
// const props = defineProps<{
18-
// editorComponent: EditorComponentType
19-
// }>()
20-
21-
const props = withDefaults(defineProps<Props>(), {
22-
hideFileSelector: () => false,
23-
})
14+
}>()
2415
2516
const store = inject('store') as Store
2617
const showMessage = ref(getItem())
@@ -44,7 +35,7 @@ watch(showMessage, () => {
4435
</script>
4536

4637
<template>
47-
<FileSelector v-if="!props.hideFileSelector" />
38+
<FileSelector />
4839
<div class="editor-container">
4940
<props.editorComponent
5041
@change="onChange"

‎src/extend/EditorContainer.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script setup lang="ts">
2+
import Message from '../Message.vue'
3+
import { debounce } from '../utils'
4+
import { inject, ref, watch } from 'vue'
5+
import { Store } from '../store'
6+
import MessageToggle from '../editor/MessageToggle.vue'
7+
import MonacoEditor from '../editor/MonacoEditor.vue'
8+
9+
const SHOW_ERROR_KEY = 'repl_show_error'
10+
11+
const store = inject('store') as Store
12+
const showMessage = ref(getItem())
13+
14+
const onChange = debounce((code: string) => {
15+
store.state.activeFile.code = code
16+
}, 250)
17+
18+
function setItem() {
19+
localStorage.setItem(SHOW_ERROR_KEY, showMessage.value ? 'true' : 'false')
20+
}
21+
22+
function getItem() {
23+
const item = localStorage.getItem(SHOW_ERROR_KEY)
24+
return !(item === 'false')
25+
}
26+
27+
watch(showMessage, () => {
28+
setItem()
29+
})
30+
</script>
31+
32+
<template>
33+
<div class="editor-container">
34+
<MonacoEditor
35+
@change="onChange"
36+
:value="store.state.activeFile.code"
37+
:filename="store.state.activeFile.filename"
38+
/>
39+
<Message v-show="showMessage" :err="store.state.errors[0]" />
40+
<MessageToggle v-model="showMessage" />
41+
</div>
42+
</template>
43+
44+
<style scoped>
45+
.editor-container {
46+
height: 100%;
47+
overflow: hidden;
48+
position: relative;
49+
}
50+
</style>

‎src/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ export { default as Repl } from './Repl.vue'
22
export { default as Preview } from './output/Preview.vue'
33
export { ReplStore, File, defaultMainFile, importMapFile } from './store'
44
export { compileFile } from './transform'
5+
export { default as EditorContainer } from './editor/EditorContainer.vue'
56
export { default as CodeMirrorEditor } from './editor/CodeMirrorEditor.vue'
67
export { default as MonacoEditor } from './editor/MonacoEditor.vue'
7-
export { default as EditorContainer } from './editor/EditorContainer.vue'
8+
export { default as ExtendEditorContainer } from './extend/EditorContainer.vue'
89
export type { Props as ReplProps } from './Repl.vue'
910
export type { Store, StoreOptions, SFCOptions, StoreState } from './store'
1011
export type { OutputModes } from './output/types'

‎src/monaco/Monaco.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ onMounted(async () => {
144144
const lineHeight = editorInstance.getOption(
145145
monaco.editor.EditorOption.lineHeight
146146
)
147-
editorHeight.value = (lineCount + 1) * lineHeight + 'px'
147+
editorHeight.value = lineCount * lineHeight + 'px'
148148
})
149149
150150
updateEditorHeight()

‎test/VuePreview.vue

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<script setup lang="ts">
22
import type { PreviewUpdateFlag, Store } from '../src'
3-
import { MonacoEditor, Preview, ReplStore, defaultMainFile } from '../src'
4-
import { computed, onMounted, provide, ref } from 'vue'
3+
import {
4+
ExtendEditorContainer,
5+
Preview,
6+
ReplStore,
7+
defaultMainFile,
8+
importMapFile,
9+
} from '../src'
10+
import { computed, onMounted, provide, ref, toRef } from 'vue'
511
import { useClipboard, useDebounceFn, useElementHover } from '@vueuse/core'
612
import Copy from './icons/Copy.vue'
713
import Copied from './icons/Copied.vue'
@@ -27,6 +33,8 @@ export interface Props {
2733
useCode?: string
2834
}
2935
}
36+
importMap?: Record<string, string> | string
37+
theme?: 'dark' | 'light'
3038
}
3139
3240
const props = withDefaults(defineProps<Props>(), {
@@ -44,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
4452
useCode: '',
4553
},
4654
}),
55+
theme: 'light',
4756
})
4857
4958
const { store } = props
@@ -61,20 +70,22 @@ const msg = ref('vite-plugin-vue-preview')
6170
</template>
6271
`.trim()
6372
64-
if (!props.code) {
65-
store.setFiles({
66-
[defaultMainFile]: welcomeCode,
67-
})
68-
} else if (props.encode) {
69-
store.setFiles({
70-
[defaultMainFile]: decodeURIComponent(props.code),
71-
})
72-
} else {
73-
store.setFiles({
74-
[defaultMainFile]: props.code,
75-
})
73+
const files: Record<string, string> = {}
74+
75+
if (!props.code) files[defaultMainFile] = welcomeCode
76+
else if (props.encode) files[defaultMainFile] = decodeURIComponent(props.code)
77+
else files[defaultMainFile] = props.code
78+
79+
if (props.importMap) {
80+
const importMap =
81+
typeof props.importMap === 'string'
82+
? JSON.parse(decodeURIComponent(props.importMap))
83+
: props.importMap
84+
files[importMapFile] = JSON.stringify({ imports: importMap }, null, 2)
7685
}
7786
87+
store.setFiles(files)
88+
7889
onMounted(() => {
7990
if (props.clearConsole)
8091
// eslint-disable-next-line no-console
@@ -96,6 +107,7 @@ provide('store', store)
96107
provide('autoresize', props.autoResize)
97108
provide('clear-console', props.clearConsole)
98109
provide('preview-options', props.previewOptions)
110+
provide('theme', toRef(props, 'theme'))
99111
100112
const { copy, copied } = useClipboard({
101113
source: store.state.activeFile.code,
@@ -159,11 +171,7 @@ const isHover = useElementHover(vuePreviewContainerRef)
159171
</div>
160172
</Transition>
161173
</div>
162-
<MonacoEditor
163-
:value="store.state.activeFile.code"
164-
:filename="store.state.activeFile.filename"
165-
@change="onChange"
166-
/>
174+
<ExtendEditorContainer />
167175
</div>
168176
</template>
169177

@@ -253,6 +261,10 @@ const isHover = useElementHover(vuePreviewContainerRef)
253261
max-height: v-bind('maxHeightForCode');
254262
transition: max-height 0.3s;
255263
}
264+
265+
.editor-container {
266+
height: 400px;
267+
}
256268
}
257269
258270
.vue-preview-slide-down-enter-active,

‎test/app.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<VuePreview />
3+
</template>
4+
5+
<script lang="ts" setup>
6+
import VuePreview from './VuePreview.vue'
7+
</script>

‎test/main.ts

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
1-
import { createApp, h } from 'vue'
2-
import VuePreview from './VuePreview.vue'
1+
import { createApp } from 'vue'
2+
import App from './app.vue'
33
;(window as any).process = { env: {} }
44

5-
const App = {
6-
setup() {
7-
return () =>
8-
h(VuePreview, {
9-
ssr: true,
10-
})
11-
},
12-
}
13-
145
createApp(App).mount('#app')

0 commit comments

Comments
 (0)