Import Map
@@ -150,11 +198,19 @@ function horizontalScroll(e: WheelEvent) {
background-color: var(--color-branding);
}
+@-moz-document url-prefix() {
+ .file-selector {
+ scrollbar-width: thin;
+ scrollbar-color: var(--color-branding) var(--border);
+ }
+}
+
.file-selector.has-import-map .add {
margin-right: 10px;
}
.file {
+ position: relative;
display: inline-block;
font-size: 13px;
font-family: var(--font-code);
@@ -172,18 +228,25 @@ function horizontalScroll(e: WheelEvent) {
padding: 8px 10px 6px;
line-height: 20px;
}
+.file.pending span {
+ min-width: 50px;
+ min-height: 34px;
+ padding-right: 32px;
+ background-color: rgba(200, 200, 200, 0.2);
+ color: transparent;
+}
.file.pending input {
- width: 90px;
- height: 30px;
- line-height: 30px;
- outline: none;
- border: 1px solid var(--border);
- border-radius: 4px;
- padding: 0 0 0 10px;
- margin-top: 2px;
- margin-left: 6px;
+ position: absolute;
+ inset: 8px 7px auto;
+ font-size: 13px;
font-family: var(--font-code);
- font-size: 12px;
+ line-height: 20px;
+ outline: none;
+ border: none;
+ padding: 0 3px;
+ min-width: 1px;
+ color: inherit;
+ background-color: transparent;
}
.file .remove {
display: inline-block;
diff --git a/src/editor/MonacoEditor.vue b/src/editor/MonacoEditor.vue
new file mode 100644
index 00000000..6d2a461a
--- /dev/null
+++ b/src/editor/MonacoEditor.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/src/editor/ToggleButton.vue b/src/editor/ToggleButton.vue
new file mode 100644
index 00000000..2d6fa01d
--- /dev/null
+++ b/src/editor/ToggleButton.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
diff --git a/src/env.d.ts b/src/env.d.ts
index 2cb444d2..e97baa68 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,7 +1,7 @@
///
declare module '*.vue' {
- import { ComponentOptions } from 'vue'
+ import type { ComponentOptions } from 'vue'
const comp: ComponentOptions
export default comp
}
diff --git a/src/import-map.ts b/src/import-map.ts
new file mode 100644
index 00000000..bc11cd50
--- /dev/null
+++ b/src/import-map.ts
@@ -0,0 +1,59 @@
+import { computed, version as currentVersion, ref } from 'vue'
+
+export function useVueImportMap(
+ defaults: {
+ runtimeDev?: string | (() => string)
+ runtimeProd?: string | (() => string)
+ serverRenderer?: string | (() => string)
+ vueVersion?: string | null
+ } = {},
+) {
+ function normalizeDefaults(defaults?: string | (() => string)) {
+ if (!defaults) return
+ return typeof defaults === 'string' ? defaults : defaults()
+ }
+
+ const productionMode = ref(false)
+ const vueVersion = ref
(defaults.vueVersion || null)
+ const importMap = computed(() => {
+ const vue =
+ (!vueVersion.value &&
+ normalizeDefaults(
+ productionMode.value ? defaults.runtimeProd : defaults.runtimeDev,
+ )) ||
+ `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${
+ vueVersion.value || currentVersion
+ }/dist/runtime-dom.esm-browser${productionMode.value ? `.prod` : ``}.js`
+
+ const serverRenderer =
+ (!vueVersion.value && normalizeDefaults(defaults.serverRenderer)) ||
+ `https://cdn.jsdelivr.net/npm/@vue/server-renderer@${
+ vueVersion.value || currentVersion
+ }/dist/server-renderer.esm-browser.js`
+ return {
+ imports: {
+ vue,
+ 'vue/server-renderer': serverRenderer,
+ },
+ }
+ })
+
+ return {
+ productionMode,
+ importMap,
+ vueVersion,
+ defaultVersion: currentVersion,
+ }
+}
+
+export interface ImportMap {
+ imports?: Record
+ scopes?: Record>
+}
+
+export function mergeImportMap(a: ImportMap, b: ImportMap): ImportMap {
+ return {
+ imports: { ...a.imports, ...b.imports },
+ scopes: { ...a.scopes, ...b.scopes },
+ }
+}
diff --git a/src/index.ts b/src/index.ts
index 172a7069..b055c6e6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,5 @@
-export { default as Repl } from './Repl.vue'
+export { default as Repl, type Props as ReplProps } from './Repl.vue'
export { default as Preview } from './output/Preview.vue'
-export { ReplStore, File } from './store'
-export { compileFile } from './transform'
-export type { Props as ReplProps } from './Repl.vue'
-export type { Store, StoreOptions, SFCOptions, StoreState } from './store'
-export type { OutputModes } from './output/types'
+export { default as Sandbox, type SandboxProps } from './output/Sandbox.vue'
+export type { OutputModes } from './types'
+export * from './core'
diff --git a/src/jsx.ts b/src/jsx.ts
new file mode 100644
index 00000000..d53ac912
--- /dev/null
+++ b/src/jsx.ts
@@ -0,0 +1,8 @@
+import { transform } from '@babel/standalone'
+import jsx from '@vue/babel-plugin-jsx'
+
+export function transformJSX(src: string) {
+ return transform(src, {
+ plugins: [jsx],
+ }).code!
+}
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
new file mode 100644
index 00000000..e67fbfb3
--- /dev/null
+++ b/src/monaco/Monaco.vue
@@ -0,0 +1,190 @@
+
+
+
+
+
+
+
diff --git a/src/monaco/env.ts b/src/monaco/env.ts
new file mode 100644
index 00000000..8074bba9
--- /dev/null
+++ b/src/monaco/env.ts
@@ -0,0 +1,186 @@
+import * as volar from '@volar/monaco'
+import { Uri, editor, languages } from 'monaco-editor-core'
+import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker'
+import { watchEffect } from 'vue'
+import type { Store } from '../store'
+import { getOrCreateModel } from './utils'
+import type { CreateData } from './vue.worker'
+import vueWorker from './vue.worker?worker'
+import * as languageConfigs from './language-configs'
+import type { WorkerLanguageService } from '@volar/monaco/worker'
+import { debounce } from '../utils'
+
+let initted = false
+export function initMonaco(store: Store) {
+ if (initted) return
+ loadMonacoEnv(store)
+
+ watchEffect(() => {
+ // create a model for each file in the store
+ for (const filename in store.files) {
+ const file = store.files[filename]
+ if (editor.getModel(Uri.parse(`file:///${filename}`))) continue
+ getOrCreateModel(
+ Uri.parse(`file:///${filename}`),
+ file.language,
+ file.code,
+ )
+ }
+
+ // dispose of any models that are not in the store
+ for (const model of editor.getModels()) {
+ const uri = model.uri.toString()
+ if (store.files[uri.substring('file:///'.length)]) continue
+
+ if (uri.startsWith('file:///node_modules')) continue
+ if (uri.startsWith('inmemory://')) continue
+
+ model.dispose()
+ }
+ })
+
+ initted = true
+}
+
+export class WorkerHost {
+ onFetchCdnFile(uri: string, text: string) {
+ getOrCreateModel(Uri.parse(uri), undefined, text)
+ }
+}
+
+let disposeVue: undefined | (() => void)
+export async function reloadLanguageTools(store: Store) {
+ disposeVue?.()
+
+ let dependencies: Record = {
+ ...store.dependencyVersion,
+ }
+
+ if (store.vueVersion) {
+ dependencies = {
+ ...dependencies,
+ vue: store.vueVersion,
+ '@vue/compiler-core': store.vueVersion,
+ '@vue/compiler-dom': store.vueVersion,
+ '@vue/compiler-sfc': store.vueVersion,
+ '@vue/compiler-ssr': store.vueVersion,
+ '@vue/reactivity': store.vueVersion,
+ '@vue/runtime-core': store.vueVersion,
+ '@vue/runtime-dom': store.vueVersion,
+ '@vue/shared': store.vueVersion,
+ }
+ }
+
+ if (store.typescriptVersion) {
+ dependencies = {
+ ...dependencies,
+ typescript: store.typescriptVersion,
+ }
+ }
+
+ const worker = editor.createWebWorker({
+ moduleId: 'vs/language/vue/vueWorker',
+ label: 'vue',
+ host: new WorkerHost(),
+ createData: {
+ tsconfig: store.getTsConfig?.() || {},
+ dependencies,
+ } satisfies CreateData,
+ })
+ const languageId = ['vue', 'javascript', 'typescript']
+ const getSyncUris = () =>
+ Object.keys(store.files).map((filename) => Uri.parse(`file:///${filename}`))
+
+ const { dispose: disposeMarkers } = volar.activateMarkers(
+ worker,
+ languageId,
+ 'vue',
+ getSyncUris,
+ editor,
+ )
+ const { dispose: disposeAutoInsertion } = volar.activateAutoInsertion(
+ worker,
+ languageId,
+ getSyncUris,
+ editor,
+ )
+ const { dispose: disposeProvides } = await volar.registerProviders(
+ worker,
+ languageId,
+ getSyncUris,
+ languages,
+ )
+
+ disposeVue = () => {
+ disposeMarkers()
+ disposeAutoInsertion()
+ disposeProvides()
+ }
+}
+
+export interface WorkerMessage {
+ event: 'init'
+ tsVersion: string
+ tsLocale?: string
+}
+
+export function loadMonacoEnv(store: Store) {
+ ;(self as any).MonacoEnvironment = {
+ async getWorker(_: any, label: string) {
+ if (label === 'vue') {
+ const worker = new vueWorker()
+ const init = new Promise((resolve) => {
+ worker.addEventListener('message', (data) => {
+ if (data.data === 'inited') {
+ resolve()
+ }
+ })
+ worker.postMessage({
+ event: 'init',
+ tsVersion: store.typescriptVersion,
+ tsLocale: store.locale,
+ } satisfies WorkerMessage)
+ })
+ await init
+ return worker
+ }
+ return new editorWorker()
+ },
+ }
+ languages.register({ id: 'vue', extensions: ['.vue'] })
+ languages.register({ id: 'javascript', extensions: ['.js'] })
+ languages.register({ id: 'typescript', extensions: ['.ts'] })
+ languages.register({ id: 'css', extensions: ['.css'] })
+ languages.setLanguageConfiguration('vue', languageConfigs.vue)
+ languages.setLanguageConfiguration('javascript', languageConfigs.js)
+ languages.setLanguageConfiguration('typescript', languageConfigs.ts)
+ languages.setLanguageConfiguration('css', languageConfigs.css)
+
+ let languageToolsPromise: Promise | undefined
+ store.reloadLanguageTools = debounce(async () => {
+ ;(languageToolsPromise ||= reloadLanguageTools(store)).finally(() => {
+ languageToolsPromise = undefined
+ })
+ }, 250)
+ languages.onLanguage('vue', () => store.reloadLanguageTools!())
+
+ // Support for go to definition
+ editor.registerEditorOpener({
+ openCodeEditor(_, resource) {
+ if (resource.toString().startsWith('file:///node_modules')) {
+ return true
+ }
+
+ const path = resource.path
+ if (/^\//.test(path)) {
+ const fileName = path.replace('/', '')
+ if (fileName !== store.activeFile.filename) {
+ store.setActive(fileName)
+ return true
+ }
+ }
+
+ return false
+ },
+ })
+}
diff --git a/src/monaco/highlight.ts b/src/monaco/highlight.ts
new file mode 100644
index 00000000..7e5391a4
--- /dev/null
+++ b/src/monaco/highlight.ts
@@ -0,0 +1,29 @@
+import * as monaco from 'monaco-editor-core'
+import { createHighlighterCoreSync } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
+import { shikiToMonaco } from '@shikijs/monaco'
+
+import langVue from 'shiki/langs/vue.mjs'
+import langTsx from 'shiki/langs/tsx.mjs'
+import langJsx from 'shiki/langs/jsx.mjs'
+import themeDark from 'shiki/themes/dark-plus.mjs'
+import themeLight from 'shiki/themes/light-plus.mjs'
+
+let registered = false
+export function registerHighlighter() {
+ if (!registered) {
+ const highlighter = createHighlighterCoreSync({
+ themes: [themeDark, themeLight],
+ langs: [langVue, langTsx, langJsx],
+ engine: createJavaScriptRegexEngine(),
+ })
+ monaco.languages.register({ id: 'vue' })
+ shikiToMonaco(highlighter, monaco)
+ registered = true
+ }
+
+ return {
+ light: themeLight.name!,
+ dark: themeDark.name!,
+ }
+}
diff --git a/src/monaco/language-configs.ts b/src/monaco/language-configs.ts
new file mode 100644
index 00000000..6a8e7cc5
--- /dev/null
+++ b/src/monaco/language-configs.ts
@@ -0,0 +1,529 @@
+import { languages } from 'monaco-editor-core'
+
+// export const html: languages.LanguageConfiguration = {
+// comments: {
+// blockComment: [''],
+// },
+// brackets: [
+// [''],
+// ['{', '}'],
+// ['(', ')'],
+// ],
+// autoClosingPairs: [
+// { open: '{', close: '}' },
+// { open: '[', close: ']' },
+// { open: '(', close: ')' },
+// { open: "'", close: "'" },
+// { open: '"', close: '"' },
+// { open: '', notIn: ['comment', 'string'] },
+// ],
+// surroundingPairs: [
+// { open: "'", close: "'" },
+// { open: '"', close: '"' },
+// { open: '{', close: '}' },
+// { open: '[', close: ']' },
+// { open: '(', close: ')' },
+// { open: '<', close: '>' },
+// ],
+// colorizedBracketPairs: [],
+// folding: {
+// markers: {
+// start: /^\s*/,
+// end: /^\s*/,
+// },
+// },
+// wordPattern: new RegExp(
+// '(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\$\\^\\&\\*\\(\\)\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\\'\\"\\,\\.\\<\\>\\/\\s]+)',
+// ),
+// onEnterRules: [
+// {
+// beforeText: new RegExp(
+// '<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr))([_:\\w][_:\\w-.\\d]*)(?:(?:[^\'"/>]|"[^"]*"|\'[^\']*\')*?(?!\\/)>)[^<]*$',
+// 'i',
+// ),
+// afterText: new RegExp('^<\\/([_:\\w][_:\\w-.\\d]*)\\s*>', 'i'),
+// action: {
+// indentAction: languages.IndentAction.IndentOutdent,
+// },
+// },
+// {
+// beforeText: new RegExp(
+// '<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr))([_:\\w][_:\\w-.\\d]*)(?:(?:[^\'"/>]|"[^"]*"|\'[^\']*\')*?(?!\\/)>)[^<]*$',
+// 'i',
+// ),
+// action: {
+// indentAction: languages.IndentAction.Indent,
+// },
+// },
+// ],
+// indentationRules: {
+// increaseIndentPattern: new RegExp(
+// '<(?!\\?|(?:area|base|br|col|frame|hr|html|img|input|keygen|link|menuitem|meta|param|source|track|wbr)\\b|[^>]*\\/>)([-_\\.A-Za-z0-9]+)(?=\\s|>)\\b[^>]*>(?!.*<\\/\\1>)|)|\\{[^}"\']*$',
+// ),
+// decreaseIndentPattern: new RegExp(
+// '^\\s*(<\\/(?!html)[-_\\.A-Za-z0-9]+\\b[^>]*>|-->|\\})',
+// ),
+// },
+// }
+
+export const css: languages.LanguageConfiguration = {
+ comments: {
+ blockComment: ['/*', '*/'],
+ },
+ brackets: [
+ ['{', '}'],
+ ['[', ']'],
+ ['(', ')'],
+ ],
+ autoClosingPairs: [
+ { open: '{', close: '}', notIn: ['string', 'comment'] },
+ { open: '[', close: ']', notIn: ['string', 'comment'] },
+ { open: '(', close: ')', notIn: ['string', 'comment'] },
+ { open: '"', close: '"', notIn: ['string', 'comment'] },
+ { open: "'", close: "'", notIn: ['string', 'comment'] },
+ ],
+ surroundingPairs: [
+ {
+ open: "'",
+ close: "'",
+ },
+ {
+ open: '"',
+ close: '"',
+ },
+ {
+ open: '{',
+ close: '}',
+ },
+ {
+ open: '[',
+ close: ']',
+ },
+ {
+ open: '(',
+ close: ')',
+ },
+ ],
+ folding: {
+ markers: {
+ start: new RegExp('^\\s*\\/\\*\\s*#region\\b\\s*(.*?)\\s*\\*\\/'),
+ end: new RegExp('^\\s*\\/\\*\\s*#endregion\\b.*\\*\\/'),
+ },
+ },
+ indentationRules: {
+ increaseIndentPattern: new RegExp('(^.*\\{[^}]*$)'),
+ decreaseIndentPattern: new RegExp('^\\s*\\}'),
+ },
+ wordPattern: new RegExp(
+ '(#?-?\\d*\\.\\d\\w*%?)|(::?[\\w-]*(?=[^,{;]*[,{]))|(([@#.!])?[\\w-?]+%?|[@#!.])',
+ ),
+}
+
+export const vue: languages.LanguageConfiguration = {
+ comments: {
+ blockComment: [''],
+ },
+ brackets: [
+ [''],
+ ['<', '>'],
+ ['{', '}'],
+ ['(', ')'],
+ ],
+ autoClosingPairs: [
+ {
+ open: '{',
+ close: '}',
+ },
+ {
+ open: '[',
+ close: ']',
+ },
+ {
+ open: '(',
+ close: ')',
+ },
+ {
+ open: "'",
+ close: "'",
+ },
+ {
+ open: '"',
+ close: '"',
+ },
+ {
+ open: '',
+ notIn: ['comment', 'string'],
+ },
+ {
+ open: '`',
+ close: '`',
+ notIn: ['string', 'comment'],
+ },
+ {
+ open: '/**',
+ close: ' */',
+ notIn: ['string'],
+ },
+ ],
+ autoCloseBefore: ';:.,=}])><`\'" \n\t',
+ surroundingPairs: [
+ {
+ open: "'",
+ close: "'",
+ },
+ {
+ open: '"',
+ close: '"',
+ },
+ {
+ open: '{',
+ close: '}',
+ },
+ {
+ open: '[',
+ close: ']',
+ },
+ {
+ open: '(',
+ close: ')',
+ },
+ {
+ open: '<',
+ close: '>',
+ },
+ {
+ open: '`',
+ close: '`',
+ },
+ ],
+ colorizedBracketPairs: [],
+ folding: {
+ markers: {
+ start: /^\s*/,
+ end: /^\s*/,
+ },
+ },
+ wordPattern:
+ /(-?\d*\.\d\w*)|([^\`\@\~\!\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>/\?\s]+)/,
+ onEnterRules: [
+ {
+ beforeText:
+ /<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script|style))([_:\w][_:\w-.\d]*)(?:(?:[^'"/>]|"[^"]*"|'[^']*')*?(?!\/)>)[^<]*$/i,
+ afterText: /^<\/([_:\w][_:\w-.\d]*)\s*>/i,
+ action: {
+ indentAction: languages.IndentAction.IndentOutdent,
+ },
+ },
+ {
+ beforeText:
+ /<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script|style))([_:\w][_:\w-.\d]*)(?:(?:[^'"/>]|"[^"]*"|'[^']*')*?(?!\/)>)[^<]*$/i,
+ action: {
+ indentAction: languages.IndentAction.Indent,
+ },
+ },
+ ],
+ indentationRules: {
+ increaseIndentPattern:
+ /<(?!\?|(?:area|base|br|col|frame|hr|html|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script|style)\b|[^>]*\/>)([-_\.A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!\s*\()(?!.*<\/\1>)|)|\{[^}"']*$/i,
+ decreaseIndentPattern: /^\s*(<\/(?!html)[-_\.A-Za-z0-9]+\b[^>]*>|-->|\})/,
+ },
+}
+
+export const js: languages.LanguageConfiguration = {
+ comments: {
+ lineComment: '//',
+ blockComment: ['/*', '*/'],
+ },
+ brackets: [
+ ['${', '}'],
+ ['{', '}'],
+ ['[', ']'],
+ ['(', ')'],
+ ],
+ autoClosingPairs: [
+ {
+ open: '{',
+ close: '}',
+ },
+ {
+ open: '[',
+ close: ']',
+ },
+ {
+ open: '(',
+ close: ')',
+ },
+ {
+ open: "'",
+ close: "'",
+ notIn: ['string', 'comment'],
+ },
+ {
+ open: '"',
+ close: '"',
+ notIn: ['string'],
+ },
+ {
+ open: '`',
+ close: '`',
+ notIn: ['string', 'comment'],
+ },
+ {
+ open: '/**',
+ close: ' */',
+ notIn: ['string'],
+ },
+ ],
+ surroundingPairs: [
+ {
+ open: "'",
+ close: "'",
+ },
+ {
+ open: '"',
+ close: '"',
+ },
+ {
+ open: '{',
+ close: '}',
+ },
+ {
+ open: '[',
+ close: ']',
+ },
+ {
+ open: '(',
+ close: ')',
+ },
+ {
+ open: '<',
+ close: '>',
+ },
+ {
+ open: '`',
+ close: '`',
+ },
+ ],
+ autoCloseBefore: ';:.,=}])>` \n\t',
+ folding: {
+ markers: {
+ start: /^\s*\/\/\s*#?region\b/,
+ end: /^\s*\/\/\s*#?endregion\b/,
+ },
+ },
+ wordPattern:
+ /(-?\d*\.\d\w*)|([^\`\~\@\!\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>/\?\s]+)/,
+ indentationRules: {
+ decreaseIndentPattern: /^((?!.*?\/\*).*\*\/)?\s*[\}\]].*$/,
+ increaseIndentPattern:
+ /^((?!\/\/).)*(\{([^}"'`/]*|(\t|[ ])*\/\/.*)|\([^)"'`/]*|\[[^\]"'`/]*)$/,
+ unIndentedLinePattern:
+ /^(\t|[ ])*[ ]\*[^/]*\*\/\s*$|^(\t|[ ])*[ ]\*\/\s*$|^(\t|[ ])*[ ]\*([ ]([^\*]|\*(?!\/))*)?$/,
+ },
+ onEnterRules: [
+ {
+ beforeText: /^\s*\/\*\*(?!\/)([^\*]|\*(?!\/))*$/,
+ afterText: /^\s*\*\/$/,
+ action: {
+ indentAction: languages.IndentAction.IndentOutdent,
+ appendText: ' * ',
+ },
+ },
+ {
+ beforeText: /^\s*\/\*\*(?!\/)([^\*]|\*(?!\/))*$/,
+ action: {
+ indentAction: languages.IndentAction.None,
+ appendText: ' * ',
+ },
+ },
+ {
+ beforeText: /^(\t|[ ])*[ ]\*([ ]([^\*]|\*(?!\/))*)?$/,
+ previousLineText: /(?=^(\s*(\/\*\*|\*)).*)(?=(?!(\s*\*\/)))/,
+ action: {
+ indentAction: languages.IndentAction.None,
+ appendText: '* ',
+ },
+ },
+ {
+ beforeText: /^(\t|[ ])*[ ]\*\/\s*$/,
+ action: {
+ indentAction: languages.IndentAction.None,
+ removeText: 1,
+ },
+ },
+ {
+ beforeText: /^(\t|[ ])*[ ]\*[^/]*\*\/\s*$/,
+ action: {
+ indentAction: languages.IndentAction.None,
+ removeText: 1,
+ },
+ },
+ {
+ beforeText: /^\s*(\bcase\s.+:|\bdefault:)$/,
+ afterText: /^(?!\s*(\bcase\b|\bdefault\b))/,
+ action: {
+ indentAction: languages.IndentAction.Indent,
+ },
+ },
+ {
+ previousLineText: /^\s*(((else ?)?if|for|while)\s*\(.*\)\s*|else\s*)$/,
+ beforeText: /^\s+([^{i\s]|i(?!f\b))/,
+ action: {
+ indentAction: languages.IndentAction.Outdent,
+ },
+ },
+ ],
+}
+
+export const ts: languages.LanguageConfiguration = {
+ comments: {
+ lineComment: '//',
+ blockComment: ['/*', '*/'],
+ },
+ brackets: [
+ ['${', '}'],
+ ['{', '}'],
+ ['[', ']'],
+ ['(', ')'],
+ ],
+ autoClosingPairs: [
+ {
+ open: '{',
+ close: '}',
+ },
+ {
+ open: '[',
+ close: ']',
+ },
+ {
+ open: '(',
+ close: ')',
+ },
+ {
+ open: "'",
+ close: "'",
+ notIn: ['string', 'comment'],
+ },
+ {
+ open: '"',
+ close: '"',
+ notIn: ['string'],
+ },
+ {
+ open: '`',
+ close: '`',
+ notIn: ['string', 'comment'],
+ },
+ {
+ open: '/**',
+ close: ' */',
+ notIn: ['string'],
+ },
+ ],
+ surroundingPairs: [
+ {
+ open: "'",
+ close: "'",
+ },
+ {
+ open: '"',
+ close: '"',
+ },
+ {
+ open: '{',
+ close: '}',
+ },
+ {
+ open: '[',
+ close: ']',
+ },
+ {
+ open: '(',
+ close: ')',
+ },
+ {
+ open: '<',
+ close: '>',
+ },
+ {
+ open: '`',
+ close: '`',
+ },
+ ],
+ colorizedBracketPairs: [
+ ['(', ')'],
+ ['[', ']'],
+ ['{', '}'],
+ ['<', '>'],
+ ],
+ autoCloseBefore: ';:.,=}])>` \n\t',
+ folding: {
+ markers: {
+ start: /^\s*\/\/\s*#?region\b/,
+ end: /^\s*\/\/\s*#?endregion\b/,
+ },
+ },
+ wordPattern:
+ /(-?\d*\.\d\w*)|([^\`\~\@\!\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>/\?\s]+)/,
+ indentationRules: {
+ decreaseIndentPattern: /^((?!.*?\/\*).*\*\/)?\s*[\}\]].*$/,
+ increaseIndentPattern:
+ /^((?!\/\/).)*(\{([^}"'`/]*|(\t|[ ])*\/\/.*)|\([^)"'`/]*|\[[^\]"'`/]*)$/,
+ unIndentedLinePattern:
+ /^(\t|[ ])*[ ]\*[^/]*\*\/\s*$|^(\t|[ ])*[ ]\*\/\s*$|^(\t|[ ])*[ ]\*([ ]([^\*]|\*(?!\/))*)?$/,
+ },
+ onEnterRules: [
+ {
+ beforeText: /^\s*\/\*\*(?!\/)([^\*]|\*(?!\/))*$/,
+ afterText: /^\s*\*\/$/,
+ action: {
+ indentAction: languages.IndentAction.IndentOutdent,
+ appendText: ' * ',
+ },
+ },
+ {
+ beforeText: /^\s*\/\*\*(?!\/)([^\*]|\*(?!\/))*$/,
+ action: {
+ indentAction: languages.IndentAction.None,
+ appendText: ' * ',
+ },
+ },
+ {
+ beforeText: /^(\t|[ ])*[ ]\*([ ]([^\*]|\*(?!\/))*)?$/,
+ previousLineText: /(?=^(\s*(\/\*\*|\*)).*)(?=(?!(\s*\*\/)))/,
+ action: {
+ indentAction: languages.IndentAction.None,
+ appendText: '* ',
+ },
+ },
+ {
+ beforeText: /^(\t|[ ])*[ ]\*\/\s*$/,
+ action: {
+ indentAction: languages.IndentAction.None,
+ removeText: 1,
+ },
+ },
+ {
+ beforeText: /^(\t|[ ])*[ ]\*[^/]*\*\/\s*$/,
+ action: {
+ indentAction: languages.IndentAction.None,
+ removeText: 1,
+ },
+ },
+ {
+ beforeText: /^\s*(\bcase\s.+:|\bdefault:)$/,
+ afterText: /^(?!\s*(\bcase\b|\bdefault\b))/,
+ action: {
+ indentAction: languages.IndentAction.Indent,
+ },
+ },
+ {
+ previousLineText: /^\s*(((else ?)?if|for|while)\s*\(.*\)\s*|else\s*)$/,
+ beforeText: /^\s+([^{i\s]|i(?!f\b))/,
+ action: {
+ indentAction: languages.IndentAction.Outdent,
+ },
+ },
+ ],
+}
diff --git a/src/monaco/utils.ts b/src/monaco/utils.ts
new file mode 100644
index 00000000..67f796dd
--- /dev/null
+++ b/src/monaco/utils.ts
@@ -0,0 +1,14 @@
+import { type Uri, editor } from 'monaco-editor-core'
+
+export function getOrCreateModel(
+ uri: Uri,
+ lang: string | undefined,
+ value: string,
+) {
+ const model = editor.getModel(uri)
+ if (model) {
+ model.setValue(value)
+ return model
+ }
+ return editor.createModel(value, lang, uri)
+}
diff --git a/src/monaco/vue.worker.ts b/src/monaco/vue.worker.ts
new file mode 100644
index 00000000..0940cadb
--- /dev/null
+++ b/src/monaco/vue.worker.ts
@@ -0,0 +1,109 @@
+// @ts-expect-error
+import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker'
+import type * as monaco from 'monaco-editor-core'
+import {
+ type LanguageServiceEnvironment,
+ createTypeScriptWorkerLanguageService,
+} from '@volar/monaco/worker'
+import { createNpmFileSystem } from '@volar/jsdelivr'
+import {
+ type VueCompilerOptions,
+ getFullLanguageServicePlugins,
+ createVueLanguagePlugin,
+ resolveVueCompilerOptions,
+} from '@vue/language-service'
+import type { WorkerHost, WorkerMessage } from './env'
+import { URI } from 'vscode-uri'
+
+export interface CreateData {
+ tsconfig: {
+ compilerOptions?: import('typescript').CompilerOptions
+ vueCompilerOptions?: Partial
+ }
+ dependencies: Record
+}
+
+let ts: typeof import('typescript')
+let locale: string | undefined
+
+self.onmessage = async (msg: MessageEvent) => {
+ if (msg.data?.event === 'init') {
+ locale = msg.data.tsLocale
+ ts = await importTsFromCdn(msg.data.tsVersion)
+ self.postMessage('inited')
+ return
+ }
+
+ worker.initialize(
+ (
+ ctx: monaco.worker.IWorkerContext,
+ { tsconfig, dependencies }: CreateData,
+ ) => {
+ const asFileName = (uri: URI) => uri.path
+ const asUri = (fileName: string): URI => URI.file(fileName)
+ const env: LanguageServiceEnvironment = {
+ workspaceFolders: [URI.file('/')],
+ locale,
+ fs: createNpmFileSystem(
+ (uri) => {
+ if (uri.scheme === 'file') {
+ if (uri.path === '/node_modules') {
+ return ''
+ } else if (uri.path.startsWith('/node_modules/')) {
+ return uri.path.slice('/node_modules/'.length)
+ }
+ }
+ },
+ (pkgName) => dependencies[pkgName],
+ (path, content) => {
+ ctx.host.onFetchCdnFile(
+ asUri('/node_modules/' + path).toString(),
+ content,
+ )
+ },
+ ),
+ }
+
+ const { options: compilerOptions } = ts.convertCompilerOptionsFromJson(
+ tsconfig?.compilerOptions || {},
+ '',
+ )
+ const vueCompilerOptions = resolveVueCompilerOptions(
+ tsconfig.vueCompilerOptions || {},
+ )
+
+ return createTypeScriptWorkerLanguageService({
+ typescript: ts,
+ compilerOptions,
+ workerContext: ctx,
+ env,
+ uriConverter: {
+ asFileName,
+ asUri,
+ },
+ languagePlugins: [
+ createVueLanguagePlugin(
+ ts,
+ compilerOptions,
+ vueCompilerOptions,
+ asFileName,
+ ),
+ ],
+ languageServicePlugins: getFullLanguageServicePlugins(ts),
+ setup({ project }) {
+ project.vue = { compilerOptions: vueCompilerOptions }
+ },
+ })
+ },
+ )
+}
+
+async function importTsFromCdn(tsVersion: string) {
+ const _module = globalThis.module
+ ;(globalThis as any).module = { exports: {} }
+ const tsUrl = `https://cdn.jsdelivr.net/npm/typescript@${tsVersion}/lib/typescript.js`
+ await import(/* @vite-ignore */ tsUrl)
+ const ts = globalThis.module.exports
+ globalThis.module = _module
+ return ts as typeof import('typescript')
+}
diff --git a/src/output/Output.vue b/src/output/Output.vue
index c8d5a33c..13d6feb1 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -1,33 +1,66 @@
+
+
+
+
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index 4e72ff03..20c6f37d 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -1,263 +1,34 @@
-
-
-
+
-
-
diff --git a/src/output/PreviewProxy.ts b/src/output/PreviewProxy.ts
index d0604941..178dafda 100644
--- a/src/output/PreviewProxy.ts
+++ b/src/output/PreviewProxy.ts
@@ -55,7 +55,7 @@ export class PreviewProxy {
}
} else if (action !== 'cmd_error' && action !== 'cmd_ok') {
console.error('command not found', id, cmd_data, [
- ...this.pending_cmds.keys()
+ ...this.pending_cmds.keys(),
])
}
}
diff --git a/src/output/Sandbox.vue b/src/output/Sandbox.vue
new file mode 100644
index 00000000..d580fa45
--- /dev/null
+++ b/src/output/Sandbox.vue
@@ -0,0 +1,366 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/output/SsrOutput.vue b/src/output/SsrOutput.vue
new file mode 100644
index 00000000..744f9015
--- /dev/null
+++ b/src/output/SsrOutput.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
HTML
+
{{ html }}
+
Context
+
{{ context }}
+
{{ msg }}
-
-
-`.trim()
+ errors = ref([]),
+ showOutput = ref(false),
+ outputMode = ref('preview'),
+ sfcOptions = ref({}),
+ compiler = shallowRef(defaultCompiler),
+ vueVersion = ref(null),
-export class File {
- filename: string
- code: string
- hidden: boolean
- compiled = {
- js: '',
- css: '',
- ssr: ''
+ locale = ref(),
+ typescriptVersion = ref('latest'),
+ dependencyVersion = ref(Object.create(null)),
+ reloadLanguageTools = ref(),
+ }: Partial = {},
+ serializedState?: string,
+): ReplStore {
+ if (!builtinImportMap) {
+ ;({ importMap: builtinImportMap, vueVersion } = useVueImportMap({
+ vueVersion: vueVersion.value,
+ }))
}
+ const loading = ref(false)
- constructor(filename: string, code = '', hidden = false) {
- this.filename = filename
- this.code = code
- this.hidden = hidden
+ function applyBuiltinImportMap() {
+ const importMap = mergeImportMap(builtinImportMap.value, getImportMap())
+ setImportMap(importMap)
}
-}
-export interface StoreState {
- mainFile: string
- files: Record
- activeFile: File
- errors: (string | Error)[]
- vueRuntimeURL: string
- vueServerRendererURL: string
- // used to force reset the sandbox
- resetFlip: boolean
-}
-
-export interface SFCOptions {
- script?: Partial
- style?: Partial
- template?: Partial
-}
+ function init() {
+ watchEffect(() => {
+ compileFile(store, activeFile.value).then((errs) => (errors.value = errs))
+ })
-export interface Store {
- state: StoreState
- options?: SFCOptions
- compiler: typeof defaultCompiler
- vueVersion?: string
- init: () => void
- setActive: (filename: string) => void
- addFile: (filename: string | File) => void
- deleteFile: (filename: string) => void
- getImportMap: () => any
- initialShowOutput: boolean
- initialOutputMode: OutputModes
-}
+ watch(
+ () => [
+ files.value[tsconfigFile]?.code,
+ typescriptVersion.value,
+ locale.value,
+ dependencyVersion.value,
+ vueVersion.value,
+ ],
+ () => reloadLanguageTools.value?.(),
+ { deep: true },
+ )
-export interface StoreOptions {
- serializedState?: string
- showOutput?: boolean
- // loose type to allow getting from the URL without inducing a typing error
- outputMode?: OutputModes | string
- defaultVueRuntimeURL?: string
- defaultVueServerRendererURL?: string
-}
+ watch(
+ builtinImportMap,
+ () => {
+ setImportMap(mergeImportMap(getImportMap(), builtinImportMap.value))
+ },
+ { deep: true },
+ )
-export class ReplStore implements Store {
- state: StoreState
- compiler = defaultCompiler
- vueVersion?: string
- options?: SFCOptions
- initialShowOutput: boolean
- initialOutputMode: OutputModes
-
- private defaultVueRuntimeURL: string
- private defaultVueServerRendererURL: string
- private pendingCompiler: Promise | null = null
-
- constructor({
- serializedState = '',
- defaultVueRuntimeURL = `https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`,
- defaultVueServerRendererURL = `https://unpkg.com/@vue/server-renderer@${version}/dist/server-renderer.esm-browser.js`,
- showOutput = false,
- outputMode = 'preview'
- }: StoreOptions = {}) {
- let files: StoreState['files'] = {}
-
- if (serializedState) {
- const saved = JSON.parse(atou(serializedState))
- for (const filename in saved) {
- files[filename] = new File(filename, saved[filename])
- }
- } else {
- files = {
- [defaultMainFile]: new File(defaultMainFile, welcomeCode)
- }
- }
+ watch(
+ vueVersion,
+ async (version) => {
+ if (version) {
+ const compilerUrl = `https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
+ loading.value = true
+ compiler.value = await import(/* @vite-ignore */ compilerUrl).finally(
+ () => (loading.value = false),
+ )
+ console.info(`[@vue/repl] Now using Vue version: ${version}`)
+ } else {
+ // reset to default
+ compiler.value = defaultCompiler
+ console.info(`[@vue/repl] Now using default Vue version`)
+ }
+ },
+ { immediate: true },
+ )
- this.defaultVueRuntimeURL = defaultVueRuntimeURL
- this.defaultVueServerRendererURL = defaultVueServerRendererURL
- this.initialShowOutput = showOutput
- this.initialOutputMode = outputMode as OutputModes
+ watch(
+ sfcOptions,
+ () => {
+ sfcOptions.value.script ||= {}
+ sfcOptions.value.script.fs = {
+ fileExists(file: string) {
+ if (file.startsWith('/')) file = file.slice(1)
+ return !!store.files[file]
+ },
+ readFile(file: string) {
+ if (file.startsWith('/')) file = file.slice(1)
+ return store.files[file].code
+ },
+ }
+ },
+ { immediate: true },
+ )
- let mainFile = defaultMainFile
- if (!files[mainFile]) {
- mainFile = Object.keys(files)[0]
+ // init tsconfig
+ if (!files.value[tsconfigFile]) {
+ files.value[tsconfigFile] = new File(
+ tsconfigFile,
+ JSON.stringify(tsconfig, undefined, 2),
+ )
}
- this.state = reactive({
- mainFile,
- files,
- activeFile: files[mainFile],
- errors: [],
- vueRuntimeURL: this.defaultVueRuntimeURL,
- vueServerRendererURL: this.defaultVueServerRendererURL,
- resetFlip: true
- })
- this.initImportMap()
+ // compile rest of the files
+ errors.value = []
+ for (const [filename, file] of Object.entries(files.value)) {
+ if (filename !== mainFile.value) {
+ compileFile(store, file).then((errs) => errors.value.push(...errs))
+ }
+ }
}
- // don't start compiling until the options are set
- init() {
- watchEffect(() => compileFile(this, this.state.activeFile))
- for (const file in this.state.files) {
- if (file !== defaultMainFile) {
- compileFile(this, this.state.files[file])
+ function setImportMap(map: ImportMap, merge = false) {
+ if (merge) {
+ map = mergeImportMap(getImportMap(), map)
+ }
+
+ if (map.imports)
+ for (const [key, value] of Object.entries(map.imports)) {
+ if (value) {
+ map.imports![key] = fixURL(value)
+ }
}
+
+ const code = JSON.stringify(map, undefined, 2)
+ if (files.value[importMapFile]) {
+ files.value[importMapFile].code = code
+ } else {
+ files.value[importMapFile] = new File(importMapFile, code)
}
}
- setActive(filename: string) {
- this.state.activeFile = this.state.files[filename]
+ const setActive: Store['setActive'] = (filename) => {
+ activeFilename.value = filename
+ }
+ const addFile: Store['addFile'] = (fileOrFilename) => {
+ let file: File
+ if (typeof fileOrFilename === 'string') {
+ file = new File(
+ fileOrFilename,
+ fileOrFilename.endsWith('.vue') ? template.value.newSFC : '',
+ )
+ } else {
+ file = fileOrFilename
+ }
+ files.value[file.filename] = file
+ if (!file.hidden) setActive(file.filename)
}
+ const deleteFile: Store['deleteFile'] = (filename) => {
+ if (
+ !confirm(`Are you sure you want to delete ${stripSrcPrefix(filename)}?`)
+ ) {
+ return
+ }
- addFile(fileOrFilename: string | File): void {
- const file =
- typeof fileOrFilename === 'string'
- ? new File(fileOrFilename)
- : fileOrFilename
- this.state.files[file.filename] = file
- if (!file.hidden) this.setActive(file.filename)
+ if (activeFilename.value === filename) {
+ activeFilename.value = mainFile.value
+ }
+ delete files.value[filename]
}
+ const renameFile: Store['renameFile'] = (oldFilename, newFilename) => {
+ const file = files.value[oldFilename]
+
+ if (!file) {
+ errors.value = [`Could not rename "${oldFilename}", file not found`]
+ return
+ }
+
+ if (!newFilename || oldFilename === newFilename) {
+ errors.value = [`Cannot rename "${oldFilename}" to "${newFilename}"`]
+ return
+ }
- deleteFile(filename: string) {
- if (confirm(`Are you sure you want to delete ${filename}?`)) {
- if (this.state.activeFile.filename === filename) {
- this.state.activeFile = this.state.files[this.state.mainFile]
+ file.filename = newFilename
+ const newFiles: Record = {}
+
+ // Preserve iteration order for files
+ for (const [name, file] of Object.entries(files.value)) {
+ if (name === oldFilename) {
+ newFiles[newFilename] = file
+ } else {
+ newFiles[name] = file
}
- delete this.state.files[filename]
}
- }
- serialize() {
- const files = this.getFiles()
- const importMap = files['import-map.json']
+ files.value = newFiles
+
+ if (mainFile.value === oldFilename) {
+ mainFile.value = newFilename
+ }
+ if (activeFilename.value === oldFilename) {
+ activeFilename.value = newFilename
+ } else {
+ compileFile(store, file).then((errs) => (errors.value = errs))
+ }
+ }
+ const getImportMap: Store['getImportMap'] = () => {
+ try {
+ return JSON.parse(files.value[importMapFile].code)
+ } catch (e) {
+ errors.value = [
+ `Syntax error in ${importMapFile}: ${(e as Error).message}`,
+ ]
+ return {}
+ }
+ }
+ const getTsConfig: Store['getTsConfig'] = () => {
+ try {
+ return JSON.parse(files.value[tsconfigFile].code)
+ } catch {
+ return {}
+ }
+ }
+ const serialize: ReplStore['serialize'] = () => {
+ const files = getFiles()
+ const importMap = files[importMapFile]
if (importMap) {
- const { imports } = JSON.parse(importMap)
- if (imports['vue'] === this.defaultVueRuntimeURL) {
- delete imports['vue']
+ const parsed = JSON.parse(importMap)
+ const builtin = builtinImportMap.value.imports || {}
+
+ if (parsed.imports) {
+ for (const [key, value] of Object.entries(parsed.imports)) {
+ if (builtin[key] === value) {
+ delete parsed.imports[key]
+ }
+ }
+ if (parsed.imports && !Object.keys(parsed.imports).length) {
+ delete parsed.imports
+ }
}
- if (imports['vue/server-renderer'] === this.defaultVueServerRendererURL) {
- delete imports['vue/server-renderer']
+ if (parsed.scopes && !Object.keys(parsed.scopes).length) {
+ delete parsed.scopes
}
- if (!Object.keys(imports).length) {
- delete files['import-map.json']
+ if (Object.keys(parsed).length) {
+ files[importMapFile] = JSON.stringify(parsed, null, 2)
} else {
- files['import-map.json'] = JSON.stringify({ imports }, null, 2)
+ delete files[importMapFile]
}
}
+ if (vueVersion.value) files._version = vueVersion.value
+ if (typescriptVersion.value !== 'latest' || files._tsVersion) {
+ files._tsVersion = typescriptVersion.value
+ }
return '#' + utoa(JSON.stringify(files))
}
-
- getFiles() {
+ const deserialize: ReplStore['deserialize'] = (
+ serializedState: string,
+ checkBuiltinImportMap = true,
+ ) => {
+ if (serializedState.startsWith('#'))
+ serializedState = serializedState.slice(1)
+ let saved: any
+ try {
+ saved = JSON.parse(atou(serializedState))
+ } catch (err) {
+ console.error(err)
+ alert('Failed to load code from URL.')
+ return setDefaultFile()
+ }
+ for (const filename in saved) {
+ if (filename === '_version') {
+ vueVersion.value = saved[filename]
+ } else if (filename === '_tsVersion') {
+ typescriptVersion.value = saved[filename]
+ } else {
+ setFile(files.value, filename, saved[filename])
+ }
+ }
+ if (checkBuiltinImportMap) {
+ applyBuiltinImportMap()
+ }
+ }
+ const getFiles: ReplStore['getFiles'] = () => {
const exported: Record = {}
- for (const filename in this.state.files) {
- exported[filename] = this.state.files[filename].code
+ for (const [filename, file] of Object.entries(files.value)) {
+ const normalized = stripSrcPrefix(filename)
+ exported[normalized] = file.code
}
return exported
}
+ const setFiles: ReplStore['setFiles'] = async (
+ newFiles,
+ mainFile = store.mainFile,
+ ) => {
+ const files: Record = Object.create(null)
- async setFiles(newFiles: Record, mainFile = defaultMainFile) {
- const files: Record = {}
- if (mainFile === defaultMainFile && !newFiles[mainFile]) {
- files[mainFile] = new File(mainFile, welcomeCode)
+ mainFile = addSrcPrefix(mainFile)
+ if (!newFiles[mainFile]) {
+ setFile(files, mainFile, template.value.welcomeSFC || welcomeSFCCode)
}
- for (const filename in newFiles) {
- files[filename] = new File(filename, newFiles[filename])
+ for (const [filename, file] of Object.entries(newFiles)) {
+ setFile(files, filename, file)
}
- for (const file in files) {
- await compileFile(this, files[file])
+
+ const errors = []
+ for (const file of Object.values(files)) {
+ errors.push(...(await compileFile(store, file)))
}
- this.state.mainFile = mainFile
- this.state.files = files
- this.initImportMap()
- this.setActive(mainFile)
- this.forceSandboxReset()
- }
- private forceSandboxReset() {
- this.state.resetFlip = !this.state.resetFlip
+ store.mainFile = mainFile
+ store.files = files
+ store.errors = errors
+ applyBuiltinImportMap()
+ setActive(store.mainFile)
+ }
+ const setDefaultFile = (): void => {
+ setFile(
+ files.value,
+ mainFile.value,
+ template.value.welcomeSFC || welcomeSFCCode,
+ )
}
- private initImportMap() {
- const map = this.state.files['import-map.json']
- if (!map) {
- this.state.files['import-map.json'] = new File(
- 'import-map.json',
- JSON.stringify(
- {
- imports: {
- vue: this.defaultVueRuntimeURL,
- 'vue/server-renderer': this.defaultVueServerRendererURL
- }
- },
- null,
- 2
- )
- )
- } else {
- try {
- const json = JSON.parse(map.code)
- if (!json.imports.vue) {
- json.imports.vue = this.defaultVueRuntimeURL
- } else {
- json.imports.vue = fixURL(json.imports.vue)
- }
- if (!json.imports['vue/server-renderer']) {
- json.imports['vue/server-renderer'] = this.defaultVueServerRendererURL
- } else {
- json.imports['vue/server-renderer'] = fixURL(
- json.imports['vue/server-renderer']
- )
- }
- map.code = JSON.stringify(json, null, 2)
- } catch (e) {}
- }
+ if (serializedState) {
+ deserialize(serializedState, false)
+ } else {
+ setDefaultFile()
}
+ if (!files.value[mainFile.value]) {
+ mainFile.value = Object.keys(files.value)[0]
+ }
+ activeFilename ||= ref(mainFile.value)
+ const activeFile = computed(() => files.value[activeFilename.value])
- getImportMap() {
- try {
- return JSON.parse(this.state.files['import-map.json'].code)
- } catch (e) {
- this.state.errors = [
- `Syntax error in import-map.json: ${(e as Error).message}`
- ]
- return {}
- }
+ applyBuiltinImportMap()
+
+ const store: ReplStore = reactive({
+ files,
+ activeFile,
+ activeFilename,
+ mainFile,
+ template,
+ builtinImportMap,
+
+ errors,
+ showOutput,
+ outputMode,
+ sfcOptions,
+ ssrOutput: { html: '', context: '' },
+ compiler,
+ loading,
+ vueVersion,
+
+ locale,
+ typescriptVersion,
+ dependencyVersion,
+ reloadLanguageTools,
+
+ init,
+ setActive,
+ addFile,
+ deleteFile,
+ renameFile,
+ getImportMap,
+ setImportMap,
+ getTsConfig,
+ serialize,
+ deserialize,
+ getFiles,
+ setFiles,
+ })
+ return store
+}
+
+const tsconfig = {
+ compilerOptions: {
+ allowJs: true,
+ checkJs: true,
+ jsx: 'Preserve',
+ target: 'ESNext',
+ module: 'ESNext',
+ moduleResolution: 'Bundler',
+ allowImportingTsExtensions: true,
+ },
+ vueCompilerOptions: {
+ target: 3.4,
+ },
+}
+
+export interface SFCOptions {
+ script?: Partial
+ style?: Partial
+ template?: Partial
+}
+
+export type StoreState = ToRefs<{
+ files: Record
+ activeFilename: string
+ mainFile: string
+ template: {
+ welcomeSFC?: string
+ newSFC?: string
}
+ builtinImportMap: ImportMap
- setImportMap(map: {
- imports: Record
- scopes?: Record>
- }) {
- this.state.files['import-map.json']!.code = JSON.stringify(map, null, 2)
+ // output
+ errors: (string | Error)[]
+ showOutput: boolean
+ outputMode: OutputModes
+ sfcOptions: SFCOptions
+ ssrOutput: {
+ html: string
+ context: unknown
}
+ /** `@vue/compiler-sfc` */
+ compiler: typeof defaultCompiler
+ /* only apply for compiler-sfc */
+ vueVersion: string | null
+
+ // volar-related
+ locale: string | undefined
+ typescriptVersion: string
+ /** \{ dependencyName: version \} */
+ dependencyVersion: Record
+ reloadLanguageTools?: (() => void) | undefined
+}>
+
+export interface ReplStore extends UnwrapRef {
+ activeFile: File
+ /** Loading compiler */
+ loading: boolean
+ init(): void
+ setActive(filename: string): void
+ addFile(filename: string | File): void
+ deleteFile(filename: string): void
+ renameFile(oldFilename: string, newFilename: string): void
+ getImportMap(): ImportMap
+ setImportMap(map: ImportMap, merge?: boolean): void
+ getTsConfig(): Record
+ serialize(): string
+ /**
+ * Deserializes the given string to restore the REPL store state.
+ * @param serializedState - The serialized state string.
+ * @param checkBuiltinImportMap - Whether to check the built-in import map. Default to true
+ */
+ deserialize(serializedState: string, checkBuiltinImportMap?: boolean): void
+ getFiles(): Record
+ setFiles(newFiles: Record, mainFile?: string): Promise
+}
+
+export type Store = Pick<
+ ReplStore,
+ | 'files'
+ | 'activeFile'
+ | 'mainFile'
+ | 'errors'
+ | 'showOutput'
+ | 'outputMode'
+ | 'sfcOptions'
+ | 'ssrOutput'
+ | 'compiler'
+ | 'vueVersion'
+ | 'locale'
+ | 'typescriptVersion'
+ | 'dependencyVersion'
+ | 'reloadLanguageTools'
+ | 'init'
+ | 'setActive'
+ | 'addFile'
+ | 'deleteFile'
+ | 'renameFile'
+ | 'getImportMap'
+ | 'getTsConfig'
+>
- async setVueVersion(version: string) {
- this.vueVersion = version
- const compilerUrl = `https://unpkg.com/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
- const runtimeUrl = `https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`
- const ssrUrl = `https://unpkg.com/@vue/server-renderer@${version}/dist/server-renderer.esm-browser.js`
- this.pendingCompiler = import(/* @vite-ignore */ compilerUrl)
- this.compiler = await this.pendingCompiler
- this.pendingCompiler = null
- this.state.vueRuntimeURL = runtimeUrl
- this.state.vueServerRendererURL = ssrUrl
- const importMap = this.getImportMap()
- const imports = importMap.imports || (importMap.imports = {})
- imports.vue = runtimeUrl
- imports['vue/server-renderer'] = ssrUrl
- this.setImportMap(importMap)
- this.forceSandboxReset()
- console.info(`[@vue/repl] Now using Vue version: ${version}`)
+export class File {
+ compiled = {
+ js: '',
+ css: '',
+ ssr: '',
+ clientMap: '',
+ ssrMap: '',
}
+ editorViewState: editor.ICodeEditorViewState | null = null
+
+ constructor(
+ public filename: string,
+ public code = '',
+ public hidden = false,
+ ) {}
- resetVueVersion() {
- this.vueVersion = undefined
- this.compiler = defaultCompiler
- this.state.vueRuntimeURL = this.defaultVueRuntimeURL
- this.state.vueServerRendererURL = this.defaultVueServerRendererURL
- const importMap = this.getImportMap()
- const imports = importMap.imports || (importMap.imports = {})
- imports.vue = this.defaultVueRuntimeURL
- imports['vue/server-renderer'] = this.defaultVueServerRendererURL
- this.setImportMap(importMap)
- this.forceSandboxReset()
- console.info(`[@vue/repl] Now using default Vue version`)
+ get language() {
+ if (this.filename.endsWith('.vue')) {
+ return 'vue'
+ }
+ if (this.filename.endsWith('.html')) {
+ return 'html'
+ }
+ if (this.filename.endsWith('.css')) {
+ return 'css'
+ }
+ if (this.filename.endsWith('.ts')) {
+ return 'typescript'
+ }
+ return 'javascript'
}
}
+function addSrcPrefix(file: string) {
+ return file === importMapFile ||
+ file === tsconfigFile ||
+ file.startsWith('src/')
+ ? file
+ : `src/${file}`
+}
+
+export function stripSrcPrefix(file: string) {
+ return file.replace(/^src\//, '')
+}
+
function fixURL(url: string) {
return url.replace('https://sfc.vuejs', 'https://play.vuejs')
}
+
+function setFile(
+ files: Record,
+ filename: string,
+ content: string,
+) {
+ const normalized = addSrcPrefix(filename)
+ files[normalized] = new File(normalized, content)
+}
diff --git a/src/template/new-sfc.vue b/src/template/new-sfc.vue
new file mode 100644
index 00000000..8bc6805e
--- /dev/null
+++ b/src/template/new-sfc.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/src/template/welcome.vue b/src/template/welcome.vue
new file mode 100644
index 00000000..5b15d82c
--- /dev/null
+++ b/src/template/welcome.vue
@@ -0,0 +1,10 @@
+
+
+
+ {{ msg }}
+
+
diff --git a/src/transform.ts b/src/transform.ts
index f984426f..d044d6c0 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -1,124 +1,161 @@
-import { Store, File } from './store'
-import {
- SFCDescriptor,
+import type { File, Store } from './store'
+import type {
BindingMetadata,
- shouldTransformRef,
- transformRef,
- CompilerOptions
+ CompilerOptions,
+ SFCDescriptor,
} from 'vue/compiler-sfc'
-import { transform } from 'sucrase'
-// @ts-ignore
+import { type Transform, transform } from 'sucrase'
import hashId from 'hash-sum'
+import { getSourceMap, toVisualizer, trimAnalyzedBindings } from './sourcemap'
export const COMP_IDENTIFIER = `__sfc__`
-async function transformTS(src: string) {
+const REGEX_JS = /\.[jt]sx?$/
+function testTs(filename: string | undefined | null) {
+ return !!(filename && /(\.|\b)tsx?$/.test(filename))
+}
+function testJsx(filename: string | undefined | null) {
+ return !!(filename && /(\.|\b)[jt]sx$/.test(filename))
+}
+
+function transformTS(src: string, isJSX?: boolean) {
return transform(src, {
- transforms: ['typescript']
+ transforms: ['typescript', ...(isJSX ? (['jsx'] as Transform[]) : [])],
+ jsxRuntime: 'preserve',
}).code
}
export async function compileFile(
store: Store,
- { filename, code, compiled }: File
-) {
+ { filename, code, compiled }: File,
+): Promise<(string | Error)[]> {
if (!code.trim()) {
- store.state.errors = []
- return
+ return []
}
if (filename.endsWith('.css')) {
compiled.css = code
- store.state.errors = []
- return
+ return []
}
- if (filename.endsWith('.js') || filename.endsWith('.ts')) {
- if (shouldTransformRef(code)) {
- code = transformRef(code, { filename }).code
+ if (REGEX_JS.test(filename)) {
+ const isJSX = testJsx(filename)
+ if (testTs(filename)) {
+ code = transformTS(code, isJSX)
}
- if (filename.endsWith('.ts')) {
- code = await transformTS(code)
+ if (isJSX) {
+ code = await import('./jsx').then(({ transformJSX }) =>
+ transformJSX(code),
+ )
}
compiled.js = compiled.ssr = code
- store.state.errors = []
- return
+ return []
+ }
+
+ if (filename.endsWith('.json')) {
+ let parsed
+ try {
+ parsed = JSON.parse(code)
+ } catch (err: any) {
+ console.error(`Error parsing ${filename}`, err.message)
+ return [err.message]
+ }
+ compiled.js = compiled.ssr = `export default ${JSON.stringify(parsed)}`
+ return []
}
if (!filename.endsWith('.vue')) {
- store.state.errors = []
- return
+ return []
}
const id = hashId(filename)
const { errors, descriptor } = store.compiler.parse(code, {
filename,
- sourceMap: true
+ sourceMap: true,
+ templateParseOptions: store.sfcOptions?.template?.compilerOptions,
})
if (errors.length) {
- store.state.errors = errors
- return
+ return errors
}
- if (
- descriptor.styles.some((s) => s.lang) ||
- (descriptor.template && descriptor.template.lang)
- ) {
- store.state.errors = [
- `lang="x" pre-processors for or