From 61f0c890c91c28ccbfd039d49dd0dbdd29d7ef8a Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 17 Dec 2021 14:09:17 +0100
Subject: [PATCH 1/4] feat: allow starting on a specific view

---
 src/SplitPane.vue     | 10 +++++++++-
 src/output/Output.vue | 11 ++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 5ff86aec..9ce46537 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -1,11 +1,19 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 
 const container = ref()
 
 // mobile only
 const showOutput = ref(false)
 
+onMounted(() => {
+  // allow starting on the output view on mobile
+  const query = new URLSearchParams(location.search)
+  if (query.has('so')) {
+    showOutput.value = true
+  }
+})
+
 const state = reactive({
   dragging: false,
   split: 50
diff --git a/src/output/Output.vue b/src/output/Output.vue
index f0ac8c06..31c50a15 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -2,7 +2,7 @@
 import Preview from './Preview.vue'
 import CodeMirror from '../codemirror/CodeMirror.vue'
 import { ReplStore } from '../store'
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, onMounted } from 'vue'
 
 const props = defineProps<{
   showCompileOutput?: boolean
@@ -17,6 +17,15 @@ const modes = computed(() =>
 
 type Modes = typeof modes.value[number]
 const mode = ref<Modes>('preview')
+
+onMounted(() => {
+  // allow changing the mode view based on a query param named "m" (to keep the URL short)
+  const query = new URLSearchParams(location.search)
+  const targetMode = query.get('m')
+  if ((modes.value as readonly (string | null)[]).includes(targetMode)) {
+    mode.value = targetMode as Modes
+  }
+})
 </script>
 
 <template>

From 9f60f1e09a66e2263ea449e8bb5be33cf5db9a00 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 17 Dec 2021 14:24:49 +0100
Subject: [PATCH 2/4] refactor: use options instead

---
 README.md             |  5 +++++
 src/SplitPane.vue     | 15 +++++----------
 src/output/Output.vue | 15 +++------------
 src/output/types.ts   |  1 +
 src/store.ts          | 11 ++++++++++-
 test/main.ts          |  4 ++++
 6 files changed, 28 insertions(+), 23 deletions(-)
 create mode 100644 src/output/types.ts

diff --git a/README.md b/README.md
index 15b45410..bf642197 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,11 @@ 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,
+  // start on the JS output tab, defaults to "preview"
+  outputMode: 'js',
+
   // 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
   // from peerDependency
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 9ce46537..87172ca8 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, inject } from 'vue'
+import { ReplStore } from './store'
 
 const container = ref()
 
-// mobile only
-const showOutput = ref(false)
+const store = inject('store') as ReplStore
 
-onMounted(() => {
-  // allow starting on the output view on mobile
-  const query = new URLSearchParams(location.search)
-  if (query.has('so')) {
-    showOutput.value = true
-  }
-})
+// mobile only
+const showOutput = ref(store.initialShowOutput)
 
 const state = reactive({
   dragging: false,
diff --git a/src/output/Output.vue b/src/output/Output.vue
index 31c50a15..453857ee 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -2,7 +2,8 @@
 import Preview from './Preview.vue'
 import CodeMirror from '../codemirror/CodeMirror.vue'
 import { ReplStore } from '../store'
-import { inject, ref, computed, onMounted } from 'vue'
+import { inject, ref, computed } from 'vue'
+import type { OutputModes } from './types'
 
 const props = defineProps<{
   showCompileOutput?: boolean
@@ -15,17 +16,7 @@ const modes = computed(() =>
     : (['preview'] as const)
 )
 
-type Modes = typeof modes.value[number]
-const mode = ref<Modes>('preview')
-
-onMounted(() => {
-  // allow changing the mode view based on a query param named "m" (to keep the URL short)
-  const query = new URLSearchParams(location.search)
-  const targetMode = query.get('m')
-  if ((modes.value as readonly (string | null)[]).includes(targetMode)) {
-    mode.value = targetMode as Modes
-  }
-})
+const mode = ref<OutputModes>(store.initialOutputMode)
 </script>
 
 <template>
diff --git a/src/output/types.ts b/src/output/types.ts
new file mode 100644
index 00000000..b0cfaaf0
--- /dev/null
+++ b/src/output/types.ts
@@ -0,0 +1 @@
+export type OutputModes = 'preview' | 'js' | 'css' | 'ssr'
diff --git a/src/store.ts b/src/store.ts
index 44812e13..e062cdbc 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -7,6 +7,7 @@ import {
   SFCAsyncStyleCompileOptions,
   SFCTemplateCompileOptions
 } from 'vue/compiler-sfc'
+import { OutputModes } from './output/types'
 
 const defaultMainFile = 'App.vue'
 
@@ -56,15 +57,21 @@ export class ReplStore {
   state: StoreState
   compiler = defaultCompiler
   options?: SFCOptions
+  initialShowOutput: boolean
+  initialOutputMode: OutputModes
 
   private defaultVueRuntimeURL: string
   private pendingCompiler: Promise<any> | null = null
 
   constructor({
     serializedState = '',
-    defaultVueRuntimeURL = `https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`
+    defaultVueRuntimeURL = `https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`,
+    showOutput = false,
+    outputMode = 'preview'
   }: {
     serializedState?: string
+    showOutput?: boolean
+    outputMode?: OutputModes
     defaultVueRuntimeURL?: string
   } = {}) {
     let files: StoreState['files'] = {}
@@ -81,6 +88,8 @@ export class ReplStore {
     }
 
     this.defaultVueRuntimeURL = defaultVueRuntimeURL
+    this.initialShowOutput = showOutput
+    this.initialOutputMode = outputMode
 
     let mainFile = defaultMainFile
     if (!files[mainFile]) {
diff --git a/test/main.ts b/test/main.ts
index 2959605a..da0ef2f2 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -1,3 +1,4 @@
+import { OutputModes } from 'src/output/types'
 import { createApp, h, watchEffect } from 'vue'
 import { Repl, ReplStore } from '../src'
 
@@ -5,8 +6,11 @@ import { Repl, ReplStore } from '../src'
 
 const App = {
   setup() {
+    const query = new URLSearchParams(location.search)
     const store = new ReplStore({
       serializedState: location.hash.slice(1),
+      showOutput: query.has('so'),
+      outputMode: (query.get('om') || 'preview') as OutputModes,
       defaultVueRuntimeURL: import.meta.env.PROD
         ? undefined
         : `${location.origin}/src/vue-dev-proxy`

From 8354253a46261dccd943c30e982ce0667c76ae15 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 17 Dec 2021 14:45:49 +0100
Subject: [PATCH 3/4] types: improve external compatibility for output modes

---
 README.md             | 7 +++++--
 src/index.ts          | 1 +
 src/output/Output.vue | 6 +++++-
 src/store.ts          | 5 +++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index bf642197..89044ed2 100644
--- a/README.md
+++ b/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
diff --git a/src/index.ts b/src/index.ts
index 23b36ba7..f3c6d51c 100644
--- a/src/index.ts
+++ b/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'
diff --git a/src/output/Output.vue b/src/output/Output.vue
index 453857ee..2501de96 100644
--- a/src/output/Output.vue
+++ b/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>
diff --git a/src/store.ts b/src/store.ts
index e062cdbc..747a4faa 100644
--- a/src/store.ts
+++ b/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'] = {}

From 9504c0240b0269b55c1c441c5311b6ec51ba6852 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 17 Dec 2021 14:50:49 +0100
Subject: [PATCH 4/4] docs: better comments about showOutput and outputMode

---
 README.md    | 5 +++--
 test/main.ts | 3 +--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 89044ed2..be041995 100644
--- a/README.md
+++ b/README.md
@@ -29,9 +29,10 @@ 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
+  // starts on the output pane (mobile only) if the URL has a showOutput query
   showOutput: query.has('showOutput'),
-  // start on the JS output tab, defaults to "preview"
+  // starts on a different tab on the output pane if the URL has a outputMode query
+  // and default to the "preview" tab
   outputMode: (query.get('outputMode') || 'preview')
 
   // specify the default URL to import Vue runtime from in the sandbox
diff --git a/test/main.ts b/test/main.ts
index da0ef2f2..79d0f8b4 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -1,4 +1,3 @@
-import { OutputModes } from 'src/output/types'
 import { createApp, h, watchEffect } from 'vue'
 import { Repl, ReplStore } from '../src'
 
@@ -10,7 +9,7 @@ const App = {
     const store = new ReplStore({
       serializedState: location.hash.slice(1),
       showOutput: query.has('so'),
-      outputMode: (query.get('om') || 'preview') as OutputModes,
+      outputMode: query.get('om') || 'preview',
       defaultVueRuntimeURL: import.meta.env.PROD
         ? undefined
         : `${location.origin}/src/vue-dev-proxy`