refactor: merge provide/inject

src/Repl.vue

@@ -2,8 +2,12 @@
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
 import { type Store, useStore } from './store'
-import { computed, provide, ref, toRef } from 'vue'
-import { type EditorComponentType, injectKeyStore } from './types'
+import { computed, provide, ref, toRefs } from 'vue'
+import {
+  type EditorComponentType,
+  injectKeyPreviewRef,
+  injectKeyProps,
+} from './types'
 import EditorContainer from './editor/EditorContainer.vue'
 
 export interface Props {
@@ -32,7 +36,7 @@ export interface Props {
     showRuntimeWarning?: boolean
   }
   editorOptions?: {
-    ShowErrorText?: string
+    showErrorText?: string
   }
 }
 
@@ -60,9 +64,7 @@ const props = withDefaults(defineProps<Props>(), {
     showRuntimeWarning: true,
   }),
   layout: 'horizontal',
-  editorOptions: () => ({
-    ShowErrorText: 'Show Error',
-  }),
+  editorOptions: () => ({}),
 })
 
 if (!props.editor) {
@@ -76,17 +78,11 @@ props.store.init()
 const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
 const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
-provide(injectKeyStore, props.store)
-provide('autoresize', props.autoResize)
-provide('autosave', props.autoSave)
-provide('import-map', toRef(props, 'showImportMap'))
-provide('tsconfig', toRef(props, 'showTsConfig'))
-provide('clear-console', toRef(props, 'clearConsole'))
-provide('preview-options', props.previewOptions)
-provide('editor-options', props.editorOptions)
-provide('theme', toRef(props, 'theme'))
-provide('preview-theme', toRef(props, 'previewTheme'))
-provide('preview-ref', () => outputRef.value?.previewRef?.container)
+provide(injectKeyProps, toRefs(props))
+provide(
+  injectKeyPreviewRef,
+  computed(() => outputRef.value?.previewRef?.container),
+)
 
 /**
  * Reload the preview iframe

src/SplitPane.vue

@@ -1,24 +1,16 @@
 <script setup lang="ts">
-import {
-  type MaybeRefOrGetter,
-  computed,
-  inject,
-  reactive,
-  ref,
-  toRef,
-  toValue,
-} from 'vue'
-import { injectKeyStore } from './types'
+import { computed, inject, reactive, ref } from 'vue'
+import { injectKeyPreviewRef, injectKeyProps } from './types'
 
 const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
 
 const container = ref()
-const previewRef = inject<MaybeRefOrGetter<HTMLDivElement>>('preview-ref')!
+const previewRef = inject(injectKeyPreviewRef)!
 
 // mobile only
-const store = inject(injectKeyStore)!
-const showOutput = toRef(store, 'showOutput')
+const { store } = inject(injectKeyProps)!
+const showOutput = computed(() => store.value.showOutput)
 
 const state = reactive({
   dragging: false,
@@ -61,7 +53,7 @@ function dragEnd() {
 }
 
 function changeViewSize() {
-  const el = toValue(previewRef)
+  const el = previewRef.value
   state.viewHeight = el.offsetHeight
   state.viewWidth = el.offsetWidth
 }

src/codemirror/CodeMirror.vue

@@ -7,6 +7,7 @@ import type { ModeSpec, ModeSpecOptions } from 'codemirror'
 import { inject, onMounted, ref, watchEffect } from 'vue'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
+import { injectKeyProps } from '../../src/types'
 
 export interface Props {
   mode?: string | ModeSpec<ModeSpecOptions>
@@ -23,8 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<(e: 'change', value: string) => void>()
 
 const el = ref()
-const needAutoResize = inject('autoresize')
-const autoSave = inject('autosave')
+const { autoResize, autoSave } = inject(injectKeyProps)!
 
 onMounted(() => {
   const addonOptions = props.readonly
@@ -62,7 +62,7 @@ onMounted(() => {
     editor.refresh()
   }, 50)
 
-  if (needAutoResize) {
+  if (autoResize.value) {
     window.addEventListener(
       'resize',
       debounce(() => {
@@ -71,7 +71,7 @@ onMounted(() => {
     )
   }
 
-  if (autoSave) {
+  if (autoSave.value) {
     editor.on('change', () => {
       emit('change', editor.getValue())
     })

src/editor/EditorContainer.vue

@@ -4,19 +4,19 @@ import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { inject, ref, watch } from 'vue'
 import MessageToggle from './MessageToggle.vue'
-import { type EditorComponentType, injectKeyStore } from '../types'
+import { type EditorComponentType, injectKeyProps } from '../types'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
 
 const props = defineProps<{
   editorComponent: EditorComponentType
 }>()
 
-const store = inject(injectKeyStore)!
+const { store } = inject(injectKeyProps)!
 const showMessage = ref(getItem())
 
 const onChange = debounce((code: string) => {
-  store.activeFile.code = code
+  store.value.activeFile.code = code
 }, 250)
 
 function setItem() {

src/editor/FileSelector.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { injectKeyStore } from '../../src/types'
+import { injectKeyProps } from '../../src/types'
 import { importMapFile, stripSrcPrefix, tsconfigFile } from '../store'
-import { type Ref, type VNode, computed, inject, ref } from 'vue'
+import { type VNode, computed, inject, ref } from 'vue'
 
-const store = inject(injectKeyStore)!
+const { store, showTsConfig, showImportMap } = inject(injectKeyProps)!
 
 /**
  * When `true`: indicates adding a new file
@@ -16,10 +16,9 @@ const pending = ref<boolean | string>(false)
  * This is a display name so it should always strip off the `src/` prefix.
  */
 const pendingFilename = ref('Comp.vue')
-const showTsConfig = inject<Ref<boolean>>('tsconfig')
-const showImportMap = inject<Ref<boolean>>('import-map')
+
 const files = computed(() =>
-  Object.entries(store.files)
+  Object.entries(store.value.files)
     .filter(
       ([name, file]) =>
         name !== importMapFile && name !== tsconfigFile && !file.hidden,
@@ -33,7 +32,7 @@ function startAddFile() {
 
   while (true) {
     let hasConflict = false
-    for (const filename in store.files) {
+    for (const filename in store.value.files) {
       if (stripSrcPrefix(filename) === name) {
         hasConflict = true
         name = `Comp${++i}.vue`
@@ -64,28 +63,28 @@ function doneNameFile() {
   const oldFilename = pending.value === true ? '' : pending.value
 
   if (!/\.(vue|jsx?|tsx?|css|json)$/.test(filename)) {
-    store.errors = [
+    store.value.errors = [
       `Playground only supports *.vue, *.jsx?, *.tsx?, *.css, *.json files.`,
     ]
     return
   }
 
-  if (filename !== oldFilename && filename in store.files) {
-    store.errors = [`File "${filename}" already exists.`]
+  if (filename !== oldFilename && filename in store.value.files) {
+    store.value.errors = [`File "${filename}" already exists.`]
     return
   }
 
-  store.errors = []
+  store.value.errors = []
   cancelNameFile()
 
   if (filename === oldFilename) {
     return
   }
 
   if (oldFilename) {
-    store.renameFile(oldFilename, filename)
+    store.value.renameFile(oldFilename, filename)
   } else {
-    store.addFile(filename)
+    store.value.addFile(filename)
   }
 }
 

src/editor/MessageToggle.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import type { Props } from '../Repl.vue'
+import { injectKeyProps } from '../../src/types'
 
-const editorOptions = inject<Props['editorOptions']>('editor-options')
+const { editorOptions } = inject(injectKeyProps)!
 const visible = defineModel<boolean>()
 </script>
 
 <template>
   <div class="wrapper" @click="visible = !visible">
-    <span>{{ editorOptions?.ShowErrorText }}</span>
+    <span>{{ editorOptions?.showErrorText || 'Show Error' }}</span>
     <div class="toggle" :class="[{ active: modelValue }]">
       <div class="indicator" />
     </div>

src/monaco/Monaco.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import {
-  type Ref,
   computed,
   inject,
   nextTick,
@@ -13,7 +12,7 @@ import {
 import * as monaco from 'monaco-editor-core'
 import { initMonaco } from './env'
 import { getOrCreateModel } from './utils'
-import { type EditorMode, injectKeyStore } from '../types'
+import { type EditorMode, injectKeyProps } from '../types'
 
 const props = withDefaults(
   defineProps<{
@@ -36,14 +35,12 @@ const emit = defineEmits<{
 const containerRef = ref<HTMLDivElement>()
 const ready = ref(false)
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
-const store = inject(injectKeyStore)!
-const autoSave = inject('autosave')!
+const { store, autoSave, theme: replTheme } = inject(injectKeyProps)!
 
-initMonaco(store)
+initMonaco(store.value)
 
 const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 
-const replTheme = inject<Ref<'dark' | 'light'>>('theme')!
 onMounted(async () => {
   const theme = await import('./highlight').then((r) => r.registerHighlighter())
   ready.value = true
@@ -114,15 +111,15 @@ onMounted(async () => {
       () => props.filename,
       (_, oldFilename) => {
         if (!editorInstance) return
-        const file = store.files[props.filename]
+        const file = store.value.files[props.filename]
         if (!file) return null
         const model = getOrCreateModel(
           monaco.Uri.parse(`file:///${props.filename}`),
           file.language,
           file.code,
         )
 
-        const oldFile = oldFilename ? store.files[oldFilename] : null
+        const oldFile = oldFilename ? store.value.files[oldFilename] : null
         if (oldFile) {
           oldFile.editorViewState = editorInstance.saveViewState()
         }

src/output/Output.vue

@@ -4,7 +4,7 @@ import { computed, inject, ref } from 'vue'
 import {
   type EditorComponentType,
   type OutputModes,
-  injectKeyStore,
+  injectKeyProps,
 } from '../types'
 
 const props = defineProps<{
@@ -13,7 +13,7 @@ const props = defineProps<{
   ssr: boolean
 }>()
 
-const store = inject(injectKeyStore)!
+const { store } = inject(injectKeyProps)!
 const previewRef = ref<InstanceType<typeof Preview>>()
 const modes = computed(() =>
   props.showCompileOutput
@@ -23,12 +23,12 @@ const modes = computed(() =>
 
 const mode = computed<OutputModes>({
   get: () =>
-    (modes.value as readonly string[]).includes(store.outputMode)
-      ? store.outputMode
+    (modes.value as readonly string[]).includes(store.value.outputMode)
+      ? store.value.outputMode
       : 'preview',
   set(value) {
-    if ((modes.value as readonly string[]).includes(store.outputMode)) {
-      store.outputMode = value
+    if ((modes.value as readonly string[]).includes(store.value.outputMode)) {
+      store.value.outputMode = value
     }
   },
 })