Skip to content

Commit 8eaf77e

Browse files
committed
refactor: merge provide/inject
1 parent c73b786 commit 8eaf77e

11 files changed

+80
-97
lines changed

src/Repl.vue

+13-17
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22
import SplitPane from './SplitPane.vue'
33
import Output from './output/Output.vue'
44
import { type Store, useStore } from './store'
5-
import { computed, provide, ref, toRef } from 'vue'
6-
import { type EditorComponentType, injectKeyStore } from './types'
5+
import { computed, provide, ref, toRefs } from 'vue'
6+
import {
7+
type EditorComponentType,
8+
injectKeyPreviewRef,
9+
injectKeyProps,
10+
} from './types'
711
import EditorContainer from './editor/EditorContainer.vue'
812
913
export interface Props {
@@ -32,7 +36,7 @@ export interface Props {
3236
showRuntimeWarning?: boolean
3337
}
3438
editorOptions?: {
35-
ShowErrorText?: string
39+
showErrorText?: string
3640
}
3741
}
3842
@@ -60,9 +64,7 @@ const props = withDefaults(defineProps<Props>(), {
6064
showRuntimeWarning: true,
6165
}),
6266
layout: 'horizontal',
63-
editorOptions: () => ({
64-
ShowErrorText: 'Show Error',
65-
}),
67+
editorOptions: () => ({}),
6668
})
6769
6870
if (!props.editor) {
@@ -76,17 +78,11 @@ props.store.init()
7678
const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
7779
const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
7880
79-
provide(injectKeyStore, props.store)
80-
provide('autoresize', props.autoResize)
81-
provide('autosave', props.autoSave)
82-
provide('import-map', toRef(props, 'showImportMap'))
83-
provide('tsconfig', toRef(props, 'showTsConfig'))
84-
provide('clear-console', toRef(props, 'clearConsole'))
85-
provide('preview-options', props.previewOptions)
86-
provide('editor-options', props.editorOptions)
87-
provide('theme', toRef(props, 'theme'))
88-
provide('preview-theme', toRef(props, 'previewTheme'))
89-
provide('preview-ref', () => outputRef.value?.previewRef?.container)
81+
provide(injectKeyProps, toRefs(props))
82+
provide(
83+
injectKeyPreviewRef,
84+
computed(() => outputRef.value?.previewRef?.container),
85+
)
9086
9187
/**
9288
* Reload the preview iframe

src/SplitPane.vue

+6-14
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
11
<script setup lang="ts">
2-
import {
3-
type MaybeRefOrGetter,
4-
computed,
5-
inject,
6-
reactive,
7-
ref,
8-
toRef,
9-
toValue,
10-
} from 'vue'
11-
import { injectKeyStore } from './types'
2+
import { computed, inject, reactive, ref } from 'vue'
3+
import { injectKeyPreviewRef, injectKeyProps } from './types'
124
135
const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
146
const isVertical = computed(() => props.layout === 'vertical')
157
168
const container = ref()
17-
const previewRef = inject<MaybeRefOrGetter<HTMLDivElement>>('preview-ref')!
9+
const previewRef = inject(injectKeyPreviewRef)!
1810
1911
// mobile only
20-
const store = inject(injectKeyStore)!
21-
const showOutput = toRef(store, 'showOutput')
12+
const { store } = inject(injectKeyProps)!
13+
const showOutput = computed(() => store.value.showOutput)
2214
2315
const state = reactive({
2416
dragging: false,
@@ -61,7 +53,7 @@ function dragEnd() {
6153
}
6254
6355
function changeViewSize() {
64-
const el = toValue(previewRef)
56+
const el = previewRef.value
6557
state.viewHeight = el.offsetHeight
6658
state.viewWidth = el.offsetWidth
6759
}

src/codemirror/CodeMirror.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type { ModeSpec, ModeSpecOptions } from 'codemirror'
77
import { inject, onMounted, ref, watchEffect } from 'vue'
88
import { debounce } from '../utils'
99
import CodeMirror from './codemirror'
10+
import { injectKeyProps } from '../../src/types'
1011
1112
export interface Props {
1213
mode?: string | ModeSpec<ModeSpecOptions>
@@ -23,8 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
2324
const emit = defineEmits<(e: 'change', value: string) => void>()
2425
2526
const el = ref()
26-
const needAutoResize = inject('autoresize')
27-
const autoSave = inject('autosave')
27+
const { autoResize, autoSave } = inject(injectKeyProps)!
2828
2929
onMounted(() => {
3030
const addonOptions = props.readonly
@@ -62,7 +62,7 @@ onMounted(() => {
6262
editor.refresh()
6363
}, 50)
6464
65-
if (needAutoResize) {
65+
if (autoResize.value) {
6666
window.addEventListener(
6767
'resize',
6868
debounce(() => {
@@ -71,7 +71,7 @@ onMounted(() => {
7171
)
7272
}
7373
74-
if (autoSave) {
74+
if (autoSave.value) {
7575
editor.on('change', () => {
7676
emit('change', editor.getValue())
7777
})

src/editor/EditorContainer.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ import Message from '../Message.vue'
44
import { debounce } from '../utils'
55
import { inject, ref, watch } from 'vue'
66
import MessageToggle from './MessageToggle.vue'
7-
import { type EditorComponentType, injectKeyStore } from '../types'
7+
import { type EditorComponentType, injectKeyProps } from '../types'
88
99
const SHOW_ERROR_KEY = 'repl_show_error'
1010
1111
const props = defineProps<{
1212
editorComponent: EditorComponentType
1313
}>()
1414
15-
const store = inject(injectKeyStore)!
15+
const { store } = inject(injectKeyProps)!
1616
const showMessage = ref(getItem())
1717
1818
const onChange = debounce((code: string) => {
19-
store.activeFile.code = code
19+
store.value.activeFile.code = code
2020
}, 250)
2121
2222
function setItem() {

src/editor/FileSelector.vue

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts">
2-
import { injectKeyStore } from '../../src/types'
2+
import { injectKeyProps } from '../../src/types'
33
import { importMapFile, stripSrcPrefix, tsconfigFile } from '../store'
4-
import { type Ref, type VNode, computed, inject, ref } from 'vue'
4+
import { type VNode, computed, inject, ref } from 'vue'
55
6-
const store = inject(injectKeyStore)!
6+
const { store, showTsConfig, showImportMap } = inject(injectKeyProps)!
77
88
/**
99
* When `true`: indicates adding a new file
@@ -16,10 +16,9 @@ const pending = ref<boolean | string>(false)
1616
* This is a display name so it should always strip off the `src/` prefix.
1717
*/
1818
const pendingFilename = ref('Comp.vue')
19-
const showTsConfig = inject<Ref<boolean>>('tsconfig')
20-
const showImportMap = inject<Ref<boolean>>('import-map')
19+
2120
const files = computed(() =>
22-
Object.entries(store.files)
21+
Object.entries(store.value.files)
2322
.filter(
2423
([name, file]) =>
2524
name !== importMapFile && name !== tsconfigFile && !file.hidden,
@@ -33,7 +32,7 @@ function startAddFile() {
3332
3433
while (true) {
3534
let hasConflict = false
36-
for (const filename in store.files) {
35+
for (const filename in store.value.files) {
3736
if (stripSrcPrefix(filename) === name) {
3837
hasConflict = true
3938
name = `Comp${++i}.vue`
@@ -64,28 +63,28 @@ function doneNameFile() {
6463
const oldFilename = pending.value === true ? '' : pending.value
6564
6665
if (!/\.(vue|jsx?|tsx?|css|json)$/.test(filename)) {
67-
store.errors = [
66+
store.value.errors = [
6867
`Playground only supports *.vue, *.jsx?, *.tsx?, *.css, *.json files.`,
6968
]
7069
return
7170
}
7271
73-
if (filename !== oldFilename && filename in store.files) {
74-
store.errors = [`File "${filename}" already exists.`]
72+
if (filename !== oldFilename && filename in store.value.files) {
73+
store.value.errors = [`File "${filename}" already exists.`]
7574
return
7675
}
7776
78-
store.errors = []
77+
store.value.errors = []
7978
cancelNameFile()
8079
8180
if (filename === oldFilename) {
8281
return
8382
}
8483
8584
if (oldFilename) {
86-
store.renameFile(oldFilename, filename)
85+
store.value.renameFile(oldFilename, filename)
8786
} else {
88-
store.addFile(filename)
87+
store.value.addFile(filename)
8988
}
9089
}
9190

src/editor/MessageToggle.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script setup lang="ts">
22
import { inject } from 'vue'
3-
import type { Props } from '../Repl.vue'
3+
import { injectKeyProps } from '../../src/types'
44
5-
const editorOptions = inject<Props['editorOptions']>('editor-options')
5+
const { editorOptions } = inject(injectKeyProps)!
66
const visible = defineModel<boolean>()
77
</script>
88

99
<template>
1010
<div class="wrapper" @click="visible = !visible">
11-
<span>{{ editorOptions?.ShowErrorText }}</span>
11+
<span>{{ editorOptions?.showErrorText || 'Show Error' }}</span>
1212
<div class="toggle" :class="[{ active: modelValue }]">
1313
<div class="indicator" />
1414
</div>

src/monaco/Monaco.vue

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts" setup>
22
import {
3-
type Ref,
43
computed,
54
inject,
65
nextTick,
@@ -13,7 +12,7 @@ import {
1312
import * as monaco from 'monaco-editor-core'
1413
import { initMonaco } from './env'
1514
import { getOrCreateModel } from './utils'
16-
import { type EditorMode, injectKeyStore } from '../types'
15+
import { type EditorMode, injectKeyProps } from '../types'
1716
1817
const props = withDefaults(
1918
defineProps<{
@@ -36,14 +35,12 @@ const emit = defineEmits<{
3635
const containerRef = ref<HTMLDivElement>()
3736
const ready = ref(false)
3837
const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
39-
const store = inject(injectKeyStore)!
40-
const autoSave = inject('autosave')!
38+
const { store, autoSave, theme: replTheme } = inject(injectKeyProps)!
4139
42-
initMonaco(store)
40+
initMonaco(store.value)
4341
4442
const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
4543
46-
const replTheme = inject<Ref<'dark' | 'light'>>('theme')!
4744
onMounted(async () => {
4845
const theme = await import('./highlight').then((r) => r.registerHighlighter())
4946
ready.value = true
@@ -114,15 +111,15 @@ onMounted(async () => {
114111
() => props.filename,
115112
(_, oldFilename) => {
116113
if (!editorInstance) return
117-
const file = store.files[props.filename]
114+
const file = store.value.files[props.filename]
118115
if (!file) return null
119116
const model = getOrCreateModel(
120117
monaco.Uri.parse(`file:///${props.filename}`),
121118
file.language,
122119
file.code,
123120
)
124121
125-
const oldFile = oldFilename ? store.files[oldFilename] : null
122+
const oldFile = oldFilename ? store.value.files[oldFilename] : null
126123
if (oldFile) {
127124
oldFile.editorViewState = editorInstance.saveViewState()
128125
}

src/output/Output.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { computed, inject, ref } from 'vue'
44
import {
55
type EditorComponentType,
66
type OutputModes,
7-
injectKeyStore,
7+
injectKeyProps,
88
} from '../types'
99
1010
const props = defineProps<{
@@ -13,7 +13,7 @@ const props = defineProps<{
1313
ssr: boolean
1414
}>()
1515
16-
const store = inject(injectKeyStore)!
16+
const { store } = inject(injectKeyProps)!
1717
const previewRef = ref<InstanceType<typeof Preview>>()
1818
const modes = computed(() =>
1919
props.showCompileOutput
@@ -23,12 +23,12 @@ const modes = computed(() =>
2323
2424
const mode = computed<OutputModes>({
2525
get: () =>
26-
(modes.value as readonly string[]).includes(store.outputMode)
27-
? store.outputMode
26+
(modes.value as readonly string[]).includes(store.value.outputMode)
27+
? store.value.outputMode
2828
: 'preview',
2929
set(value) {
30-
if ((modes.value as readonly string[]).includes(store.outputMode)) {
31-
store.outputMode = value
30+
if ((modes.value as readonly string[]).includes(store.value.outputMode)) {
31+
store.value.outputMode = value
3232
}
3333
},
3434
})

0 commit comments

Comments
 (0)