Skip to content

Commit 5b00573

Browse files
sxzzsxzz
committed
style: format code
1 parent a69cfef commit 5b00573

24 files changed

+529
-419
lines changed

‎.prettierignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
CHANGELOG.md
3+
pnpm-lock.yaml

‎.prettierrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true
4+
}

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const store = new ReplStore({
6464
// specify the default URL to import Vue runtime from in the sandbox
6565
// default is the CDN link from jsdelivr.com with version matching Vue's version
6666
// from peerDependency
67-
defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js'
67+
defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js',
6868
})
6969
7070
// persist state to URL hash
@@ -73,8 +73,8 @@ watchEffect(() => history.replaceState({}, '', store.serialize()))
7373
// pre-set import map
7474
store.setImportMap({
7575
imports: {
76-
myLib: 'cdn link to esm build of myLib'
77-
}
76+
myLib: 'cdn link to esm build of myLib',
77+
},
7878
})
7979
8080
// use a specific version of Vue

‎index-dist.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
import Monaco from './dist/monaco-editor'
2121
import './dist/style.css'
2222
createApp(Repl, {
23-
editor: Monaco
23+
editor: Monaco,
2424
}).mount('#app')
2525
</script>
2626
</head>

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"dev": "vite",
3333
"build": "vite build",
3434
"build-types": "vue-tsc -p tsconfig.build.json && api-extractor run -c api-extractor.json && node scripts/cleanup.js",
35+
"format": "prettier --write .",
3536
"release": "bumpp -r",
3637
"prepublishOnly": "npm run build && npm run build-types"
3738
},

‎src/codemirror/CodeMirror.vue

+11-9
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface Props {
1717
const props = withDefaults(defineProps<Props>(), {
1818
mode: 'htmlmixed',
1919
value: '',
20-
readonly: false
20+
readonly: false,
2121
})
2222
2323
const emit = defineEmits<(e: 'change', value: string) => void>()
@@ -26,13 +26,15 @@ const el = ref()
2626
const needAutoResize = inject('autoresize')
2727
2828
onMounted(() => {
29-
const addonOptions = props.readonly ? {} : {
30-
autoCloseBrackets: true,
31-
autoCloseTags: true,
32-
foldGutter: true,
33-
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
34-
keyMap: 'sublime'
35-
}
29+
const addonOptions = props.readonly
30+
? {}
31+
: {
32+
autoCloseBrackets: true,
33+
autoCloseTags: true,
34+
foldGutter: true,
35+
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
36+
keyMap: 'sublime',
37+
}
3638
3739
const editor = CodeMirror(el.value!, {
3840
value: '',
@@ -41,7 +43,7 @@ onMounted(() => {
4143
tabSize: 2,
4244
lineWrapping: true,
4345
lineNumbers: true,
44-
...addonOptions
46+
...addonOptions,
4547
})
4648
4749
editor.on('change', () => {

‎src/codemirror/codemirror.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -539,6 +539,6 @@ span.CodeMirror-selectedtext {
539539
background: none;
540540
}
541541

542-
.CodeMirror-dialog{
542+
.CodeMirror-dialog {
543543
background-color: var(--bg);
544544
}

‎src/editor/CodeMirrorEditor.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { computed } from 'vue'
44
import type { PreviewMode } from './types'
55
66
defineOptions({
7-
editorType: 'monaco'
7+
editorType: 'monaco',
88
})
99
1010
const props = defineProps<{
@@ -26,17 +26,17 @@ const modes: Record<string, Props['mode']> = {
2626
css: 'css',
2727
html: 'htmlmixed',
2828
js: {
29-
name: 'javascript'
29+
name: 'javascript',
3030
},
3131
json: {
3232
name: 'javascript',
33-
json: true
33+
json: true,
3434
},
3535
ts: {
3636
name: 'javascript',
37-
typescript: true
37+
typescript: true,
3838
},
39-
vue: 'htmlmixed'
39+
vue: 'htmlmixed',
4040
}
4141
4242
const activeMode = computed(() => {

‎src/editor/FileSelector.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function doneNameFile() {
6060
6161
if (!/\.(vue|js|ts|css|json)$/.test(filename)) {
6262
store.state.errors = [
63-
`Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`
63+
`Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`,
6464
]
6565
return
6666
}
@@ -101,7 +101,7 @@ function horizontalScroll(e: WheelEvent) {
101101
Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY
102102
const distance = 30 * (direction > 0 ? 1 : -1)
103103
el.scrollTo({
104-
left: el.scrollLeft + distance
104+
left: el.scrollLeft + distance,
105105
})
106106
}
107107
</script>

‎src/monaco/Monaco.vue

+8-8
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
watchEffect,
1515
inject,
1616
watch,
17-
computed
17+
computed,
1818
} from 'vue'
1919
import * as monaco from 'monaco-editor-core'
2020
import { getOrCreateModel } from './utils'
@@ -30,7 +30,7 @@ const props = withDefaults(
3030
mode?: PreviewMode
3131
}>(),
3232
{
33-
readonly: false
33+
readonly: false,
3434
}
3535
)
3636
@@ -96,13 +96,13 @@ onMounted(async () => {
9696
automaticLayout: true,
9797
scrollBeyondLastLine: false,
9898
minimap: {
99-
enabled: false
99+
enabled: false,
100100
},
101101
inlineSuggest: {
102-
enabled: false
102+
enabled: false,
103103
},
104104
'semanticHighlighting.enabled': true,
105-
fixedOverflowWidgets: true
105+
fixedOverflowWidgets: true,
106106
})
107107
editor.value = editorInstance
108108
@@ -119,7 +119,7 @@ onMounted(async () => {
119119
}
120120
121121
return false
122-
}
122+
},
123123
})
124124
125125
// Support for semantic highlighting
@@ -147,7 +147,7 @@ onMounted(async () => {
147147
if (props.readonly) {
148148
watch(
149149
() => props.value,
150-
value => {
150+
(value) => {
151151
editorInstance.setValue(value || '')
152152
monaco.editor.setModelLanguage(editorInstance.getModel()!, lang.value)
153153
}
@@ -185,7 +185,7 @@ onMounted(async () => {
185185
emits('change', editorInstance.getValue())
186186
})
187187
188-
editorInstance.onDidChangeCursorSelection(e => {
188+
editorInstance.onDidChangeCursorSelection((e) => {
189189
const selection = e.selection
190190
const file = store.state.files[props.filename]
191191
if (file) {

‎src/monaco/env.ts

+41-33
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,59 @@
1-
import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker';
2-
import vueWorker from './vue.worker?worker';
3-
import * as onigasm from "onigasm";
4-
import onigasmWasm from "onigasm/lib/onigasm.wasm?url";
5-
import { editor, languages, Uri } from 'monaco-editor-core';
6-
import * as volar from '@volar/monaco';
7-
import { Store } from '../store';
8-
import { createJsDelivrDtsHost } from 'volar-service-typescript';
9-
import { getOrCreateModel } from './utils';
1+
import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker'
2+
import vueWorker from './vue.worker?worker'
3+
import * as onigasm from 'onigasm'
4+
import onigasmWasm from 'onigasm/lib/onigasm.wasm?url'
5+
import { editor, languages, Uri } from 'monaco-editor-core'
6+
import * as volar from '@volar/monaco'
7+
import { Store } from '../store'
8+
import { createJsDelivrDtsHost } from 'volar-service-typescript'
9+
import { getOrCreateModel } from './utils'
1010

1111
export function loadWasm() {
12-
return onigasm.loadWASM(onigasmWasm);
12+
return onigasm.loadWASM(onigasmWasm)
1313
}
1414

1515
export function loadMonacoEnv(store: Store) {
16-
(self as any).MonacoEnvironment = {
16+
;(self as any).MonacoEnvironment = {
1717
async getWorker(_: any, label: string) {
1818
if (label === 'vue') {
19-
return new vueWorker();
19+
return new vueWorker()
2020
}
21-
return new editorWorker();
21+
return new editorWorker()
2222
},
23-
};
23+
}
2424
languages.register({ id: 'vue', extensions: ['.vue'] })
2525
languages.register({ id: 'javascript', extensions: ['.js'] })
2626
languages.register({ id: 'typescript', extensions: ['.ts'] })
2727
languages.onLanguage('vue', async () => {
2828
const worker = editor.createWebWorker<any>({
2929
moduleId: 'vs/language/vue/vueWorker',
3030
label: 'vue',
31-
host: createJsDelivrDtsHost(!store.vueVersion ? {} : {
32-
'vue': store.vueVersion,
33-
'@vue/compiler-core': store.vueVersion,
34-
'@vue/compiler-dom': store.vueVersion,
35-
'@vue/compiler-sfc': store.vueVersion,
36-
'@vue/compiler-ssr': store.vueVersion,
37-
'@vue/reactivity': store.vueVersion,
38-
'@vue/runtime-core': store.vueVersion,
39-
'@vue/runtime-dom': store.vueVersion,
40-
'@vue/shared': store.vueVersion,
41-
}, (filename, text) => {
42-
getOrCreateModel(Uri.file(filename), undefined, text);
43-
}),
44-
});
45-
const languageId = ['vue', 'javascript', 'typescript'];
46-
const getSyncUris = () => Object.keys(store.state.files).map(filename => Uri.parse(`file:///${filename}`));
47-
volar.editor.activateMarkers(worker, languageId, 'vue', getSyncUris, editor);
48-
volar.editor.activateAutoInsertion(worker, languageId, getSyncUris, editor);
49-
volar.languages.registerProvides(worker, languageId, getSyncUris, languages);
31+
host: createJsDelivrDtsHost(
32+
!store.vueVersion
33+
? {}
34+
: {
35+
vue: store.vueVersion,
36+
'@vue/compiler-core': store.vueVersion,
37+
'@vue/compiler-dom': store.vueVersion,
38+
'@vue/compiler-sfc': store.vueVersion,
39+
'@vue/compiler-ssr': store.vueVersion,
40+
'@vue/reactivity': store.vueVersion,
41+
'@vue/runtime-core': store.vueVersion,
42+
'@vue/runtime-dom': store.vueVersion,
43+
'@vue/shared': store.vueVersion,
44+
},
45+
(filename, text) => {
46+
getOrCreateModel(Uri.file(filename), undefined, text)
47+
}
48+
),
49+
})
50+
const languageId = ['vue', 'javascript', 'typescript']
51+
const getSyncUris = () =>
52+
Object.keys(store.state.files).map((filename) =>
53+
Uri.parse(`file:///${filename}`)
54+
)
55+
volar.editor.activateMarkers(worker, languageId, 'vue', getSyncUris, editor)
56+
volar.editor.activateAutoInsertion(worker, languageId, getSyncUris, editor)
57+
volar.languages.registerProvides(worker, languageId, getSyncUris, languages)
5058
})
5159
}

‎src/monaco/utils.ts

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import { Uri, editor } from 'monaco-editor-core';
1+
import { Uri, editor } from 'monaco-editor-core'
22

3-
export function getOrCreateModel(uri: Uri, lang: string | undefined, value: string) {
4-
const model = editor.getModel(uri);
3+
export function getOrCreateModel(
4+
uri: Uri,
5+
lang: string | undefined,
6+
value: string
7+
) {
8+
const model = editor.getModel(uri)
59
if (model) {
6-
model.setValue(value);
7-
return model;
10+
model.setValue(value)
11+
return model
812
}
9-
return editor.createModel(value, lang, uri);
13+
return editor.createModel(value, lang, uri)
1014
}

‎src/monaco/vue.worker.ts

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
11
// @ts-ignore
2-
import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker';
3-
import type * as monaco from 'monaco-editor-core';
4-
import * as ts from 'typescript';
5-
import { Config, resolveConfig } from '@vue/language-service';
6-
import { createLanguageService } from '@volar/monaco/worker';
7-
import createTypeScriptService from 'volar-service-typescript';
2+
import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker'
3+
import type * as monaco from 'monaco-editor-core'
4+
import * as ts from 'typescript'
5+
import { Config, resolveConfig } from '@vue/language-service'
6+
import { createLanguageService } from '@volar/monaco/worker'
7+
import createTypeScriptService from 'volar-service-typescript'
88

99
self.onmessage = () => {
1010
worker.initialize((ctx: monaco.worker.IWorkerContext) => {
11-
1211
const compilerOptions: ts.CompilerOptions = {
1312
...ts.getDefaultCompilerOptions(),
1413
allowJs: true,
1514
checkJs: true,
1615
jsx: ts.JsxEmit.Preserve,
1716
module: ts.ModuleKind.ESNext,
1817
moduleResolution: ts.ModuleResolutionKind.Bundler,
19-
allowImportingTsExtensions: true
20-
};
18+
allowImportingTsExtensions: true,
19+
}
2120
const baseConfig: Config = {
2221
services: {
2322
typescript: createTypeScriptService({ dtsHost: ctx.host }),
2423
},
25-
};
24+
}
2625

2726
return createLanguageService({
2827
workerContext: ctx,
@@ -31,6 +30,6 @@ self.onmessage = () => {
3130
module: ts as any,
3231
compilerOptions,
3332
},
34-
});
35-
});
36-
};
33+
})
34+
})
35+
}

‎src/output/Output.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const modes = computed(() =>
2020
2121
const mode = ref<OutputModes>(
2222
(modes.value as readonly string[]).includes(store.initialOutputMode)
23-
? store.initialOutputMode as OutputModes
23+
? (store.initialOutputMode as OutputModes)
2424
: 'preview'
2525
)
2626
</script>
@@ -37,7 +37,7 @@ const mode = ref<OutputModes>(
3737
</div>
3838

3939
<div class="output-container">
40-
<Preview :show="mode === 'preview'" :ssr="ssr"/>
40+
<Preview :show="mode === 'preview'" :ssr="ssr" />
4141
<props.editorComponent
4242
v-if="mode !== 'preview'"
4343
readonly

0 commit comments

Comments
 (0)