types: improve external compatibility for output modes

README.md

@@ -22,14 +22,17 @@ import '@vue/repl/style.css'
 import { watchEffect } from 'vue'
 import { Repl, ReplStore } from '@vue/repl'
 
+// retrieve some configuration options from the URL
+const query = new URLSearchParams(location.search)
+
 const store = new ReplStore({
   // initialize repl with previously serialized state
   serializedState: location.hash.slice(1),
 
   // start on the output pane in mobile devices, defaults to false
-  showOutput: true,
+  showOutput: query.has('showOutput'),
   // start on the JS output tab, defaults to "preview"
-  outputMode: 'js',
+  outputMode: (query.get('outputMode') || 'preview')
 
   // specify the default URL to import Vue runtime from in the sandbox
   // default is the CDN link from unpkg.com with version matching Vue's version

src/index.ts

@@ -1,3 +1,4 @@
 export { default as Repl } from './Repl.vue'
 export { ReplStore, File } from './store'
 export type { SFCOptions, StoreState } from './store'
+export type { OutputModes } from './output/types'

src/output/Output.vue

@@ -16,7 +16,11 @@ const modes = computed(() =>
     : (['preview'] as const)
 )
 
-const mode = ref<OutputModes>(store.initialOutputMode)
+const mode = ref<OutputModes>(
+  (modes.value as readonly string[]).includes(store.initialOutputMode)
+    ? store.initialOutputMode as OutputModes
+    : 'preview'
+)
 </script>
 
 <template>

src/store.ts

@@ -58,7 +58,7 @@ export class ReplStore {
   compiler = defaultCompiler
   options?: SFCOptions
   initialShowOutput: boolean
-  initialOutputMode: OutputModes
+  initialOutputMode: OutputModes | string
 
   private defaultVueRuntimeURL: string
   private pendingCompiler: Promise<any> | null = null
@@ -71,7 +71,8 @@ export class ReplStore {
   }: {
     serializedState?: string
     showOutput?: boolean
-    outputMode?: OutputModes
+    // loose type to allow getting from the URL without inducing a typing error
+    outputMode?: OutputModes | string
     defaultVueRuntimeURL?: string
   } = {}) {
     let files: StoreState['files'] = {}