Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit ec8f806

Browse filesBrowse files
authored
feat: add prod and ssr mode (#8)
1 parent 28cea87 commit ec8f806
Copy full SHA for ec8f806

File tree

Expand file treeCollapse file tree

4 files changed

+40
-15
lines changed
Filter options
Expand file treeCollapse file tree

4 files changed

+40
-15
lines changed

‎app.vue renamed to ‎app/app.vue

Copy file name to clipboard
File renamed without changes.

‎app/layouts/default.vue

Copy file name to clipboardExpand all lines: app/layouts/default.vue
+11-1Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,14 @@ const colorMode = useColorMode()
4646
function toggleColorMode() {
4747
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
4848
}
49+
50+
const ssr = useRouteQuery<string, boolean>('ssr', 'false', {
51+
transform: stringToBooleanTransformer,
52+
})
53+
54+
const prod = useRouteQuery<string, boolean>('prod', 'false', {
55+
transform: stringToBooleanTransformer,
56+
})
4957
</script>
5058

5159
<template>
@@ -56,6 +64,8 @@ function toggleColorMode() {
5664
</div>
5765

5866
<div class="flex gap-2 items-center">
67+
<USwitch v-model="ssr" label="SSR" />
68+
<USwitch v-model="prod" label="Prod" />
5969
<USelectMenu v-model="vueUseVersion" :items="vueUseVersionsSorted" class="w-32" icon="i-logos-vueuse" :loading="loadingVersions" />
6070
<USelectMenu v-model="vueVersion" :items="vueVersionsSorted" class="w-32" icon="i-logos-vue" :loading="loadingVersions" />
6171
<UButton icon="i-lucide-refresh-ccw" size="md" color="primary" variant="soft" @click="fetchVersions" />
@@ -66,7 +76,7 @@ function toggleColorMode() {
6676
@click="toggleColorMode"
6777
/>
6878

69-
<UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
79+
<UTooltip text="Open on GitHub">
7080
<UButton
7181
color="neutral"
7282
variant="ghost"

‎app/pages/index.vue

Copy file name to clipboardExpand all lines: app/pages/index.vue
+19-14Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,20 @@ import type { ShallowRef } from 'vue'
44
import { mergeImportMap, Repl, useStore, useVueImportMap } from '@vue/repl'
55
import MonacoEditor from '@vue/repl/monaco-editor'
66
7-
const showOutput = useRouteQuery<string, boolean>('showOutput', 'false', { transform: {
8-
get(value) {
9-
if (value === 'false' || value === '0')
10-
return false
11-
else return Boolean(value)
12-
},
13-
set(value) {
14-
return String(value)
15-
},
16-
} })
7+
const showOutput = useRouteQuery<string, boolean>('showOutput', 'false', {
8+
transform: stringToBooleanTransformer,
9+
})
1710
1811
const outputMode = useRouteQuery<OutputModes, OutputModes>('outputMode', 'preview')
1912
13+
const ssr = useRouteQuery<string, boolean>('ssr', 'false', {
14+
transform: stringToBooleanTransformer,
15+
})
16+
17+
const prod = useRouteQuery<string, boolean>('prod', 'false', {
18+
transform: stringToBooleanTransformer,
19+
})
20+
2021
const hash = useRouteHash(undefined, { mode: 'replace' })
2122
2223
const {
@@ -73,13 +74,14 @@ injectedVueVersion.value = vueVersion.value ?? 'latest'
7374
// persist state to URL hash
7475
watchEffect(() => hash.value = store.serialize())
7576
76-
// production mode is enabled
77-
productionMode.value = true
78-
7977
watch(() => injectedVueVersion.value, (newVersion) => {
8078
vueVersion.value = newVersion
8179
})
8280
81+
watch(() => prod.value, (newProd) => {
82+
productionMode.value = newProd
83+
}, { immediate: true })
84+
8385
const colorMode = useColorMode()
8486
8587
const theme = computed(() => {
@@ -105,6 +107,9 @@ const previewOptions = {
105107

106108
<template>
107109
<client-only>
108-
<Repl :store="store" :editor="MonacoEditor" :show-compile-output="true" :theme="theme" :preview-theme="true" :preview-options="previewOptions" />
110+
<Repl
111+
:store="store" :editor="MonacoEditor" :show-compile-output="true" :theme="theme" :preview-theme="true"
112+
:preview-options="previewOptions" :ssr="ssr"
113+
/>
109114
</client-only>
110115
</template>

‎app/utils/transformer.ts

Copy file name to clipboard
+10Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const stringToBooleanTransformer = {
2+
get(value) {
3+
if (value === 'false' || value === '0')
4+
return false
5+
else return Boolean(value)
6+
},
7+
set(value) {
8+
return String(value)
9+
},
10+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.