From eb9e1976e79d2035d2b4ef7397f1f5da7cb59af5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
<32354856+baiwusanyu-c@users.noreply.github.com>
Date: Wed, 28 Jun 2023 00:29:32 +0800
Subject: [PATCH 1/6] feat: added monaco light theme
---
index.html | 2 +-
package.json | 2 +-
pnpm-lock.yaml | 21 +++++----------------
src/Repl.vue | 4 +++-
src/monaco/Monaco.vue | 3 ++-
5 files changed, 12 insertions(+), 20 deletions(-)
diff --git a/index.html b/index.html
index 2e93823d..91d668f6 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
-
+
diff --git a/package.json b/package.json
index 4e0aa4d6..e2c40873 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
"monaco-editor-core": "^0.38.0",
"monaco-editor-textmate": "^4.0.0",
"monaco-textmate": "^3.0.1",
- "monaco-volar": "^0.3.0",
+ "monaco-volar": "^0.4.0",
"onigasm": "^2.2.5",
"path-browserify": "^1.0.1",
"prettier": "^2.8.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0511561f..7bdadac6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
settings:
autoInstallPeers: true
@@ -54,8 +54,8 @@ devDependencies:
specifier: ^3.0.1
version: 3.0.1(onigasm@2.2.5)
monaco-volar:
- specifier: ^0.3.0
- version: 0.3.0(monaco-editor-core@0.38.0)(monaco-editor@0.39.0)
+ specifier: ^0.4.0
+ version: 0.4.0
onigasm:
specifier: ^2.2.5
version: 2.2.5
@@ -1389,21 +1389,10 @@ packages:
onigasm: 2.2.5
dev: true
- /monaco-volar@0.3.0(monaco-editor-core@0.38.0)(monaco-editor@0.39.0):
- resolution: {integrity: sha512-WksEYjBe8B3f/WtpmzJtQbQsLdf9RKnH9xhoZg3ZVXluHx+Gm2HfEEEjgEe+8Fme37tL54bSxUPv/w5XZxmE4w==}
- peerDependencies:
- monaco-editor: '*'
- monaco-editor-core: '*'
- peerDependenciesMeta:
- monaco-editor:
- optional: true
- monaco-editor-core:
- optional: true
+ /monaco-volar@0.4.0:
+ resolution: {integrity: sha512-QnUg8cs17BOLacmuIki0Zri0tPQOHOw14LcQFKWigyIo2ChRJnO7grhxQsHOdyOL7vkHxSkMno84wIT8+sEv/A==}
dependencies:
- monaco-editor: 0.39.0
- monaco-editor-core: 0.38.0
onigasm: 2.2.5
- vscode-uri: 3.0.7
dev: true
/mri@1.2.0:
diff --git a/src/Repl.vue b/src/Repl.vue
index dc17f941..8bbf3d5f 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -7,6 +7,7 @@ import type { EditorComponentType } from './editor/types'
import EditorContainer from './editor/EditorContainer.vue'
export interface Props {
+ theme: 'dark' | 'light'
editor: EditorComponentType
store?: Store
autoResize?: boolean
@@ -28,6 +29,7 @@ export interface Props {
}
const props = withDefaults(defineProps(), {
+ theme: 'light',
store: () => new ReplStore(),
autoResize: true,
showCompileOutput: true,
@@ -75,7 +77,7 @@ provide('import-map', toRef(props, 'showImportMap'))
provide('tsconfig', toRef(props, 'showTsConfig'))
provide('clear-console', toRef(props, 'clearConsole'))
provide('preview-options', props.previewOptions)
-
+provide('theme', props.theme)
/**
* Reload the preview iframe
*/
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index 2b0e75c1..e2f212d6 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -41,6 +41,7 @@ initMonaco(store)
const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
+const replTheme = inject('theme')
onMounted(async () => {
const theme = await loadTheme(monaco.editor)
ready.value = true
@@ -55,7 +56,7 @@ onMounted(async () => {
? { value: props.value, language: lang.value }
: { model: null }),
fontSize: 13,
- theme,
+ theme: replTheme === 'light' ? theme.light : theme.dark,
readOnly: props.readonly,
automaticLayout: true,
scrollBeyondLastLine: false,
From 87540c33c27c3d3f65a83a4fabc8351bf4139c6a Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Wed, 28 Jun 2023 08:58:19 +0800
Subject: [PATCH 2/6] chore: updated code
---
src/Repl.vue | 2 +-
src/monaco/Monaco.vue | 12 ++++++++++--
2 files changed, 11 insertions(+), 3 deletions(-)
diff --git a/src/Repl.vue b/src/Repl.vue
index 8bbf3d5f..4f6f0ad2 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -77,7 +77,7 @@ provide('import-map', toRef(props, 'showImportMap'))
provide('tsconfig', toRef(props, 'showTsConfig'))
provide('clear-console', toRef(props, 'clearConsole'))
provide('preview-options', props.previewOptions)
-provide('theme', props.theme)
+provide('theme', toRef(props, 'theme'))
/**
* Reload the preview iframe
*/
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index e2f212d6..8fa2500f 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -15,6 +15,7 @@ import { getOrCreateModel } from './utils'
import { loadGrammars, loadTheme } from 'monaco-volar'
import { Store } from '../store'
import type { PreviewMode } from '../editor/types'
+import { Ref } from "vue/dist/vue";
const props = withDefaults(
defineProps<{
@@ -41,7 +42,7 @@ initMonaco(store)
const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
-const replTheme = inject('theme')
+const replTheme = inject('theme') as Ref<'dark' | 'light'>
onMounted(async () => {
const theme = await loadTheme(monaco.editor)
ready.value = true
@@ -56,7 +57,7 @@ onMounted(async () => {
? { value: props.value, language: lang.value }
: { model: null }),
fontSize: 13,
- theme: replTheme === 'light' ? theme.light : theme.dark,
+ theme: replTheme.value === 'light' ? theme.light : theme.dark,
readOnly: props.readonly,
automaticLayout: true,
scrollBeyondLastLine: false,
@@ -141,6 +142,13 @@ onMounted(async () => {
file.selection = selection
}
})
+
+ // update theme
+ watch(() => replTheme.value, (n) => {
+ editorInstance.updateOptions({
+ theme: n === 'light' ? theme.light : theme.dark,
+ })
+ })
})
onBeforeUnmount(() => {
From 0a140f3dfe0c8cca967a8226f8f996bd39f34a80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
Date: Wed, 28 Jun 2023 12:48:02 +0800
Subject: [PATCH 3/6] Update index.html
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 91d668f6..2e93823d 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
-
+
From 81c70ce03a1ac66eecb6492cb66c00f9220777fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
Date: Wed, 28 Jun 2023 12:50:22 +0800
Subject: [PATCH 4/6] refactor: simplify code
---
src/monaco/Monaco.vue | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index 8fa2500f..677e8c2f 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -8,6 +8,7 @@ import {
inject,
watch,
computed,
+ type Ref,
} from 'vue'
import * as monaco from 'monaco-editor-core'
import { initMonaco } from './env'
@@ -15,7 +16,6 @@ import { getOrCreateModel } from './utils'
import { loadGrammars, loadTheme } from 'monaco-volar'
import { Store } from '../store'
import type { PreviewMode } from '../editor/types'
-import { Ref } from "vue/dist/vue";
const props = withDefaults(
defineProps<{
@@ -42,7 +42,7 @@ initMonaco(store)
const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
-const replTheme = inject('theme') as Ref<'dark' | 'light'>
+const replTheme = inject>('theme')!
onMounted(async () => {
const theme = await loadTheme(monaco.editor)
ready.value = true
@@ -144,7 +144,7 @@ onMounted(async () => {
})
// update theme
- watch(() => replTheme.value, (n) => {
+ watch(replTheme, (n) => {
editorInstance.updateOptions({
theme: n === 'light' ? theme.light : theme.dark,
})
From bb777b37e7443ba53ccff00269ad90571ae37eb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
Date: Wed, 28 Jun 2023 12:50:56 +0800
Subject: [PATCH 5/6] fix: optional props
---
src/Repl.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/Repl.vue b/src/Repl.vue
index 4f6f0ad2..221070aa 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -7,7 +7,7 @@ import type { EditorComponentType } from './editor/types'
import EditorContainer from './editor/EditorContainer.vue'
export interface Props {
- theme: 'dark' | 'light'
+ theme?: 'dark' | 'light'
editor: EditorComponentType
store?: Store
autoResize?: boolean
From e8f46591064f8325f1894fd46412ab3580ba0fa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
Date: Wed, 28 Jun 2023 12:52:13 +0800
Subject: [PATCH 6/6] fix: theme
---
test/main.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/test/main.ts b/test/main.ts
index 2426a77c..c9215cab 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -42,6 +42,7 @@ const App = {
return () =>
h(Repl, {
store,
+ theme: 'dark',
editor: MonacoEditor as any as EditorComponentType,
// layout: 'vertical',
ssr: true,