├── .node-version
├── ssr-stub.js
├── .prettierignore
├── .prettierrc
├── src
    ├── vue-dev-proxy.ts
    ├── template
    │   ├── new-sfc.vue
    │   └── welcome.vue
    ├── vue-server-renderer-dev-proxy.ts
    ├── env.d.ts
    ├── jsx.ts
    ├── index.ts
    ├── monaco
    │   ├── utils.ts
    │   ├── highlight.ts
    │   ├── Monaco.vue
    │   ├── env.ts
    │   ├── vue.worker.ts
    │   └── language-configs.ts
    ├── core.ts
    ├── editor
    │   ├── MonacoEditor.vue
    │   ├── CodeMirrorEditor.vue
    │   ├── ToggleButton.vue
    │   ├── EditorContainer.vue
    │   └── FileSelector.vue
    ├── output
    │   ├── SsrOutput.vue
    │   ├── Preview.vue
    │   ├── PreviewProxy.ts
    │   ├── Output.vue
    │   ├── moduleCompiler.ts
    │   ├── Sandbox.vue
    │   └── srcdoc.html
    ├── types.ts
    ├── codemirror
    │   ├── codemirror.ts
    │   ├── CodeMirror.vue
    │   └── codemirror.css
    ├── utils.ts
    ├── import-map.ts
    ├── Message.vue
    ├── sourcemap.ts
    ├── Repl.vue
    ├── SplitPane.vue
    ├── transform.ts
    └── store.ts
├── .git-blame-ignore-revs
├── .gitignore
├── .github
    ├── renovate.json5
    └── workflows
    │   ├── release-continuous.yml
    │   └── release.yml
├── index.html
├── tsconfig.json
├── vite.preview.config.ts
├── index-dist.html
├── LICENSE
├── eslint.config.js
├── vite.config.ts
├── test
    └── main.ts
├── package.json
└── README.md


/.node-version:
--------------------------------------------------------------------------------
1 | lts/*
2 | 


--------------------------------------------------------------------------------
/ssr-stub.js:
--------------------------------------------------------------------------------
1 | module.exports = {}
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | dist
2 | CHANGELOG.md
3 | pnpm-lock.yaml
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/src/vue-dev-proxy.ts:
--------------------------------------------------------------------------------
1 | // serve vue to the iframe sandbox during dev.
2 | export * from 'vue'
3 | 


--------------------------------------------------------------------------------
/.git-blame-ignore-revs:
--------------------------------------------------------------------------------
1 | # style: add trailing comma
2 | 497f07527b162f42123ead110031f265981f4d4d
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | TODOs.md
5 | 
6 | # jetbrains files
7 | .idea
8 | 


--------------------------------------------------------------------------------
/src/template/new-sfc.vue:
--------------------------------------------------------------------------------
1 | <script setup></script>
2 | 
3 | <template>
4 |   <div>
5 |     <slot />
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/vue-server-renderer-dev-proxy.ts:
--------------------------------------------------------------------------------
1 | // serve server renderer to the iframe sandbox during dev.
2 | export * from 'vue/server-renderer'
3 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { ComponentOptions } from 'vue'
5 |   const comp: ComponentOptions
6 |   export default comp
7 | }
8 | 


--------------------------------------------------------------------------------
/src/jsx.ts:
--------------------------------------------------------------------------------
1 | import { transform } from '@babel/standalone'
2 | import jsx from '@vue/babel-plugin-jsx'
3 | 
4 | export function transformJSX(src: string) {
5 |   return transform(src, {
6 |     plugins: [jsx],
7 |   }).code!
8 | }
9 | 


--------------------------------------------------------------------------------
/src/template/welcome.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue'
 3 | 
 4 | const msg = ref('Hello World!')
 5 | </script>
 6 | 
 7 | <template>
 8 |   <h1>{{ msg }}</h1>
 9 |   <input v-model="msg" />
10 | </template>
11 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Repl, type Props as ReplProps } from './Repl.vue'
2 | export { default as Preview } from './output/Preview.vue'
3 | export { default as Sandbox, type SandboxProps } from './output/Sandbox.vue'
4 | export type { OutputModes } from './types'
5 | export * from './core'
6 | 


--------------------------------------------------------------------------------
/src/monaco/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type Uri, editor } from 'monaco-editor-core'
 2 | 
 3 | export function getOrCreateModel(
 4 |   uri: Uri,
 5 |   lang: string | undefined,
 6 |   value: string,
 7 | ) {
 8 |   const model = editor.getModel(uri)
 9 |   if (model) {
10 |     model.setValue(value)
11 |     return model
12 |   }
13 |   return editor.createModel(value, lang, uri)
14 | }
15 | 


--------------------------------------------------------------------------------
/src/core.ts:
--------------------------------------------------------------------------------
 1 | export {
 2 |   useStore,
 3 |   File,
 4 |   type SFCOptions,
 5 |   type StoreState,
 6 |   type Store,
 7 |   type ReplStore,
 8 | } from './store'
 9 | export { useVueImportMap, mergeImportMap, type ImportMap } from './import-map'
10 | export { compileFile } from './transform'
11 | export { version as languageToolsVersion } from '@vue/language-service/package.json'
12 | 


--------------------------------------------------------------------------------
/src/editor/MonacoEditor.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Monaco from '../monaco/Monaco.vue'
 3 | import type { EditorEmits, EditorProps } from '../types'
 4 | 
 5 | defineProps<EditorProps>()
 6 | const emit = defineEmits<EditorEmits>()
 7 | 
 8 | defineOptions({
 9 |   editorType: 'monaco',
10 | })
11 | 
12 | const onChange = (code: string) => {
13 |   emit('change', code)
14 | }
15 | </script>
16 | 
17 | <template>
18 |   <Monaco
19 |     :filename="filename"
20 |     :value="value"
21 |     :readonly="readonly"
22 |     :mode="mode"
23 |     @change="onChange"
24 |   />
25 | </template>
26 | 


--------------------------------------------------------------------------------
/.github/renovate.json5:
--------------------------------------------------------------------------------
 1 | {
 2 |   $schema: 'https://docs.renovatebot.com/renovate-schema.json',
 3 |   extends: [
 4 |     'config:base',
 5 |     'schedule:weekly',
 6 |     'group:allNonMajor',
 7 |     ':semanticCommitTypeAll(chore)',
 8 |   ],
 9 |   labels: ['dependencies'],
10 |   rangeStrategy: 'bump',
11 |   packageRules: [
12 |     {
13 |       depTypeList: ['peerDependencies'],
14 |       enabled: false,
15 |     },
16 |     {
17 |       matchPackageNames: ['codemirror'],
18 |       matchUpdateTypes: ['major'],
19 |       enabled: false,
20 |     },
21 |   ],
22 |   postUpdateOptions: ['pnpmDedupe'],
23 | }
24 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en" class="dark">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vue SFC Playground</title>
 8 |     <style>
 9 |       body {
10 |         margin: 0;
11 |       }
12 |       #app {
13 |         height: 100vh;
14 |         height: 100dvh;
15 |       }
16 |     </style>
17 | 
18 |     <script type="module" src="./test/main.ts"></script>
19 |   </head>
20 |   <body>
21 |     <div id="app"></div>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "dist",
 4 |     "sourceMap": false,
 5 |     "target": "esnext",
 6 |     "useDefineForClassFields": false,
 7 |     "module": "esnext",
 8 |     "moduleResolution": "bundler",
 9 |     "allowJs": false,
10 |     "strict": true,
11 |     "noUnusedLocals": true,
12 |     "experimentalDecorators": true,
13 |     "resolveJsonModule": true,
14 |     "esModuleInterop": true,
15 |     "removeComments": false,
16 |     "lib": ["esnext", "dom"],
17 |     "jsx": "preserve",
18 |     "rootDir": ".",
19 |     "skipLibCheck": true
20 |   },
21 |   "include": ["src", "test", "vite.config.ts"],
22 |   "exclude": ["src/template"]
23 | }
24 | 


--------------------------------------------------------------------------------
/.github/workflows/release-continuous.yml:
--------------------------------------------------------------------------------
 1 | name: Publish Any Commit
 2 | on: [push, pull_request]
 3 | 
 4 | jobs:
 5 |   build:
 6 |     runs-on: ubuntu-latest
 7 | 
 8 |     steps:
 9 |       - name: Checkout code
10 |         uses: actions/checkout@v5
11 | 
12 |       - name: Install pnpm
13 |         uses: pnpm/action-setup@v4
14 | 
15 |       - name: Install Node.js
16 |         uses: actions/setup-node@v5
17 |         with:
18 |           node-version-file: '.node-version'
19 |           cache: 'pnpm'
20 | 
21 |       - name: Install dependencies
22 |         run: pnpm install
23 | 
24 |       - name: Build
25 |         run: pnpm build
26 | 
27 |       - run: pnpx pkg-pr-new publish --compact
28 | 


--------------------------------------------------------------------------------
/src/output/SsrOutput.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{
 3 |   html: string
 4 |   context: unknown
 5 | }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div class="ssr-output">
10 |     <strong>HTML</strong>
11 |     <pre class="ssr-output-pre">{{ html }}</pre>
12 |     <strong>Context</strong>
13 |     <pre class="ssr-output-pre">{{ context }}</pre>
14 |   </div>
15 | </template>
16 | 
17 | <style scoped>
18 | .ssr-output {
19 |   background: var(--bg);
20 |   box-sizing: border-box;
21 |   color: var(--text-light);
22 |   height: 100%;
23 |   overflow: auto;
24 |   padding: 10px;
25 |   width: 100%;
26 | }
27 | 
28 | .ssr-output-pre {
29 |   font-family: var(--font-code);
30 |   white-space: pre-wrap;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | import type { Component, ComputedRef, InjectionKey, ToRefs } from 'vue'
 2 | import { Props } from './Repl.vue'
 3 | 
 4 | export type EditorMode = 'js' | 'css' | 'ssr'
 5 | export interface EditorProps {
 6 |   value: string
 7 |   filename: string
 8 |   readonly?: boolean
 9 |   mode?: EditorMode
10 | }
11 | export interface EditorEmits {
12 |   (e: 'change', code: string): void
13 | }
14 | export type EditorComponentType = Component<EditorProps>
15 | 
16 | export type OutputModes = 'preview' | 'ssr output' | EditorMode
17 | 
18 | export const injectKeyProps: InjectionKey<
19 |   ToRefs<Required<Props & { autoSave: boolean }>>
20 | > = Symbol('props')
21 | export const injectKeyPreviewRef: InjectionKey<
22 |   ComputedRef<HTMLDivElement | null>
23 | > = Symbol('preview-ref')
24 | 


--------------------------------------------------------------------------------
/vite.preview.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import replace from '@rollup/plugin-replace'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   resolve: {
 8 |     alias: {
 9 |       '@vue/compiler-dom': '@vue/compiler-dom/dist/compiler-dom.cjs.js',
10 |       '@vue/compiler-core': '@vue/compiler-core/dist/compiler-core.cjs.js',
11 |     },
12 |   },
13 |   build: {
14 |     commonjsOptions: {
15 |       ignore: ['typescript'],
16 |     },
17 |   },
18 |   worker: {
19 |     format: 'es',
20 |     plugins: () => [
21 |       replace({
22 |         preventAssignment: true,
23 |         values: {
24 |           'process.env.NODE_ENV': JSON.stringify('production'),
25 |         },
26 |       }),
27 |     ],
28 |   },
29 | })
30 | 


--------------------------------------------------------------------------------
/index-dist.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vue SFC Playground</title>
 8 |     <style>
 9 |       body {
10 |         margin: 0;
11 |       }
12 |       #app {
13 |         height: 100vh;
14 |         height: 100dvh;
15 |       }
16 |     </style>
17 | 
18 |     <script type="module">
19 |       import { createApp } from 'vue'
20 |       import { Repl } from './dist/vue-repl'
21 |       import Monaco from './dist/monaco-editor'
22 |       createApp(Repl, {
23 |         editor: Monaco,
24 |       }).mount('#app')
25 |     </script>
26 |   </head>
27 |   <body>
28 |     <div id="app"></div>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/src/codemirror/codemirror.ts:
--------------------------------------------------------------------------------
 1 | import CodeMirror from 'codemirror'
 2 | import 'codemirror/addon/dialog/dialog.css'
 3 | import './codemirror.css'
 4 | 
 5 | // modes
 6 | import 'codemirror/mode/javascript/javascript.js'
 7 | import 'codemirror/mode/css/css.js'
 8 | import 'codemirror/mode/htmlmixed/htmlmixed.js'
 9 | 
10 | // addons
11 | import 'codemirror/addon/edit/closebrackets.js'
12 | import 'codemirror/addon/edit/closetag.js'
13 | import 'codemirror/addon/comment/comment.js'
14 | import 'codemirror/addon/fold/foldcode.js'
15 | import 'codemirror/addon/fold/foldgutter.js'
16 | import 'codemirror/addon/fold/brace-fold.js'
17 | import 'codemirror/addon/fold/indent-fold.js'
18 | import 'codemirror/addon/fold/comment-fold.js'
19 | import 'codemirror/addon/search/search.js'
20 | import 'codemirror/addon/search/searchcursor.js'
21 | import 'codemirror/addon/dialog/dialog.js'
22 | 
23 | // keymap
24 | import 'codemirror/keymap/sublime.js'
25 | 
26 | export default CodeMirror
27 | 


--------------------------------------------------------------------------------
/src/output/Preview.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed, inject, useTemplateRef } from 'vue'
 3 | import { injectKeyProps } from '../../src/types'
 4 | import Sandbox from './Sandbox.vue'
 5 | 
 6 | const props = defineProps<{ show: boolean; ssr: boolean }>()
 7 | 
 8 | const { store, clearConsole, theme, previewTheme, previewOptions } =
 9 |   inject(injectKeyProps)!
10 | 
11 | const sandboxTheme = computed(() =>
12 |   previewTheme.value ? theme.value : undefined,
13 | )
14 | 
15 | const sandboxRef = useTemplateRef('sandbox')
16 | const container = computed(() => sandboxRef.value?.container)
17 | 
18 | defineExpose({
19 |   reload: () => sandboxRef.value?.reload(),
20 |   container,
21 | })
22 | </script>
23 | 
24 | <template>
25 |   <Sandbox
26 |     ref="sandbox"
27 |     :show="props.show"
28 |     :store="store"
29 |     :theme="sandboxTheme"
30 |     :preview-options="previewOptions"
31 |     :ssr="props.ssr"
32 |     :clear-console="clearConsole"
33 |   />
34 | </template>
35 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v*'
 7 | 
 8 | jobs:
 9 |   release:
10 |     runs-on: ubuntu-latest
11 |     permissions:
12 |       contents: write
13 |       id-token: write
14 | 
15 |     steps:
16 |       - uses: actions/checkout@v5
17 |         with:
18 |           fetch-depth: 0
19 | 
20 |       - name: Install pnpm
21 |         uses: pnpm/action-setup@v4
22 | 
23 |       - name: Install Node.js
24 |         uses: actions/setup-node@v5
25 |         with:
26 |           node-version-file: '.node-version'
27 |           cache: pnpm
28 |           registry-url: 'https://registry.npmjs.org'
29 | 
30 |       - run: npx changelogithub
31 |         continue-on-error: true
32 |         env:
33 |           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
34 | 
35 |       - name: Install Dependencies
36 |         run: pnpm i
37 | 
38 |       - name: Publish to NPM
39 |         run: npm i -g npm && pnpm -r publish --access public --no-git-checks
40 | 


--------------------------------------------------------------------------------
/src/monaco/highlight.ts:
--------------------------------------------------------------------------------
 1 | import * as monaco from 'monaco-editor-core'
 2 | import { createHighlighterCoreSync } from 'shiki/core'
 3 | import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
 4 | import { shikiToMonaco } from '@shikijs/monaco'
 5 | 
 6 | import langVue from 'shiki/langs/vue.mjs'
 7 | import langTsx from 'shiki/langs/tsx.mjs'
 8 | import langJsx from 'shiki/langs/jsx.mjs'
 9 | import themeDark from 'shiki/themes/dark-plus.mjs'
10 | import themeLight from 'shiki/themes/light-plus.mjs'
11 | 
12 | let registered = false
13 | export function registerHighlighter() {
14 |   if (!registered) {
15 |     const highlighter = createHighlighterCoreSync({
16 |       themes: [themeDark, themeLight],
17 |       langs: [langVue, langTsx, langJsx],
18 |       engine: createJavaScriptRegexEngine(),
19 |     })
20 |     monaco.languages.register({ id: 'vue' })
21 |     shikiToMonaco(highlighter, monaco)
22 |     registered = true
23 |   }
24 | 
25 |   return {
26 |     light: themeLight.name!,
27 |     dark: themeDark.name!,
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
 2 | 
 3 | export function debounce(fn: Function, n = 100) {
 4 |   let handle: any
 5 |   return (...args: any[]) => {
 6 |     if (handle) clearTimeout(handle)
 7 |     handle = setTimeout(() => {
 8 |       fn(...args)
 9 |     }, n)
10 |   }
11 | }
12 | 
13 | export function utoa(data: string): string {
14 |   const buffer = strToU8(data)
15 |   const zipped = zlibSync(buffer, { level: 9 })
16 |   const binary = strFromU8(zipped, true)
17 |   return btoa(binary)
18 | }
19 | 
20 | export function atou(base64: string): string {
21 |   const binary = atob(base64)
22 | 
23 |   // zlib header (x78), level 9 (xDA)
24 |   if (binary.startsWith('\x78\xDA')) {
25 |     const buffer = strToU8(binary, true)
26 |     const unzipped = unzlibSync(buffer)
27 |     return strFromU8(unzipped)
28 |   }
29 | 
30 |   // old unicode hacks for backward compatibility
31 |   // https://base64.guru/developers/javascript/examples/unicode-strings
32 |   return decodeURIComponent(escape(binary))
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2021-present, Yuxi (Evan) You
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/editor/CodeMirrorEditor.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import CodeMirror, { type Props } from '../codemirror/CodeMirror.vue'
 3 | import { computed } from 'vue'
 4 | import type { EditorEmits, EditorProps } from '../types'
 5 | 
 6 | defineOptions({
 7 |   editorType: 'codemirror',
 8 | })
 9 | 
10 | const props = defineProps<EditorProps>()
11 | const emit = defineEmits<EditorEmits>()
12 | 
13 | const onChange = (code: string) => {
14 |   emit('change', code)
15 | }
16 | 
17 | const modes: Record<string, Props['mode']> = {
18 |   css: 'css',
19 |   html: 'htmlmixed',
20 |   js: {
21 |     name: 'javascript',
22 |   },
23 |   json: {
24 |     name: 'javascript',
25 |     json: true,
26 |   },
27 |   ts: {
28 |     name: 'javascript',
29 |     typescript: true,
30 |   },
31 |   vue: 'htmlmixed',
32 | }
33 | 
34 | const activeMode = computed(() => {
35 |   const { mode: forcedMode, filename } = props
36 |   const mode = modes[forcedMode || filename.split('.').pop()!]
37 |   return filename.lastIndexOf('.') !== -1 && mode ? mode : modes.js
38 | })
39 | </script>
40 | 
41 | <template>
42 |   <CodeMirror
43 |     :value="value"
44 |     :mode="activeMode"
45 |     :readonly="readonly"
46 |     @change="onChange"
47 |   />
48 | </template>
49 | 


--------------------------------------------------------------------------------
/src/editor/ToggleButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{ text: string }>()
 3 | const active = defineModel<boolean>()
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div class="wrapper" @click="active = !active">
 8 |     <span>{{ text }}</span>
 9 |     <div class="toggle" :class="[{ active: modelValue }]">
10 |       <div class="indicator" />
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <style scoped>
16 | .wrapper {
17 |   display: flex;
18 |   align-items: center;
19 |   cursor: pointer;
20 |   user-select: none;
21 | }
22 | 
23 | .toggle {
24 |   display: inline-block;
25 |   margin-left: 4px;
26 |   width: 32px;
27 |   height: 18px;
28 |   border-radius: 12px;
29 |   position: relative;
30 |   background-color: var(--border);
31 | }
32 | 
33 | .indicator {
34 |   font-size: 12px;
35 |   background-color: var(--text-light);
36 |   width: 14px;
37 |   height: 14px;
38 |   border-radius: 50%;
39 |   transition: transform ease-in-out 0.2s;
40 |   position: absolute;
41 |   left: 2px;
42 |   top: 2px;
43 |   color: var(--bg);
44 |   text-align: center;
45 | }
46 | 
47 | .active .indicator {
48 |   background-color: var(--color-branding);
49 |   transform: translateX(14px);
50 |   color: white;
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import eslint from '@eslint/js'
 2 | import tseslint from 'typescript-eslint'
 3 | import pluginVue from 'eslint-plugin-vue'
 4 | 
 5 | export default tseslint.config(
 6 |   { ignores: ['**/node_modules', '**/dist'] },
 7 |   eslint.configs.recommended,
 8 |   tseslint.configs.base,
 9 |   ...pluginVue.configs['flat/recommended'],
10 |   {
11 |     files: ['**/*.vue'],
12 |     languageOptions: {
13 |       parserOptions: {
14 |         parser: '@typescript-eslint/parser',
15 |       },
16 |     },
17 |   },
18 |   {
19 |     rules: {
20 |       'no-debugger': 'error',
21 |       'no-console': ['error', { allow: ['warn', 'error', 'info', 'clear'] }],
22 |       'no-unused-vars': 'off',
23 |       'no-undef': 'off',
24 |       'prefer-const': 'error',
25 |       'sort-imports': ['error', { ignoreDeclarationSort: true }],
26 |       'no-duplicate-imports': 'error',
27 |       // This rule enforces the preference for using '@ts-expect-error' comments in TypeScript
28 |       // code to indicate intentional type errors, improving code clarity and maintainability.
29 |       '@typescript-eslint/prefer-ts-expect-error': 'error',
30 |       // Enforce the use of 'import type' for importing types
31 |       '@typescript-eslint/consistent-type-imports': [
32 |         'error',
33 |         {
34 |           fixStyle: 'inline-type-imports',
35 |           disallowTypeAnnotations: false,
36 |         },
37 |       ],
38 |       // Enforce the use of top-level import type qualifier when an import only has specifiers with inline type qualifiers
39 |       '@typescript-eslint/no-import-type-side-effects': 'error',
40 |       'vue/max-attributes-per-line': 'off',
41 |       'vue/singleline-html-element-content-newline': 'off',
42 |       'vue/multi-word-component-names': 'off',
43 |       'vue/html-self-closing': [
44 |         'error',
45 |         {
46 |           html: { component: 'always', normal: 'always', void: 'any' },
47 |           math: 'always',
48 |           svg: 'always',
49 |         },
50 |       ],
51 |     },
52 |   },
53 | )
54 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { type Plugin, mergeConfig } from 'vite'
 2 | import dts from 'vite-plugin-dts'
 3 | import base from './vite.preview.config'
 4 | import fs from 'node:fs'
 5 | import path from 'node:path'
 6 | 
 7 | const genStub: Plugin = {
 8 |   name: 'gen-stub',
 9 |   apply: 'build',
10 |   generateBundle() {
11 |     this.emitFile({
12 |       type: 'asset',
13 |       fileName: 'ssr-stub.js',
14 |       source: `module.exports = {}`,
15 |     })
16 |   },
17 | }
18 | 
19 | /**
20 |  * Patch generated entries and import their corresponding CSS files.
21 |  * Also normalize MonacoEditor.css
22 |  */
23 | const patchCssFiles: Plugin = {
24 |   name: 'patch-css',
25 |   apply: 'build',
26 |   writeBundle() {
27 |     //  inject css imports to the files
28 |     const outDir = path.resolve('dist')
29 |     ;['vue-repl', 'monaco-editor', 'codemirror-editor'].forEach((file) => {
30 |       const filePath = path.resolve(outDir, file + '.js')
31 |       const content = fs.readFileSync(filePath, 'utf-8')
32 |       fs.writeFileSync(filePath, `import './${file}.css'\n${content}`)
33 |     })
34 |   },
35 | }
36 | 
37 | export default mergeConfig(base, {
38 |   plugins: [
39 |     dts({
40 |       rollupTypes: true,
41 |     }),
42 |     genStub,
43 |     patchCssFiles,
44 |   ],
45 |   optimizeDeps: {
46 |     // avoid late discovered deps
47 |     include: [
48 |       'typescript',
49 |       'monaco-editor-core/esm/vs/editor/editor.worker',
50 |       'vue/server-renderer',
51 |     ],
52 |   },
53 |   base: './',
54 |   build: {
55 |     target: 'esnext',
56 |     minify: false,
57 |     lib: {
58 |       entry: {
59 |         'vue-repl': './src/index.ts',
60 |         core: './src/core.ts',
61 |         'monaco-editor': './src/editor/MonacoEditor.vue',
62 |         'codemirror-editor': './src/editor/CodeMirrorEditor.vue',
63 |       },
64 |       formats: ['es'],
65 |       fileName: () => '[name].js',
66 |     },
67 |     cssCodeSplit: true,
68 |     rollupOptions: {
69 |       output: {
70 |         chunkFileNames: 'chunks/[name]-[hash].js',
71 |       },
72 |       external: ['vue', 'vue/compiler-sfc'],
73 |     },
74 |   },
75 | })
76 | 


--------------------------------------------------------------------------------
/src/editor/EditorContainer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import FileSelector from './FileSelector.vue'
 3 | import Message from '../Message.vue'
 4 | import { debounce } from '../utils'
 5 | import { inject, ref, watch } from 'vue'
 6 | import ToggleButton from './ToggleButton.vue'
 7 | import { type EditorComponentType, injectKeyProps } from '../types'
 8 | 
 9 | const SHOW_ERROR_KEY = 'repl_show_error'
10 | 
11 | const props = defineProps<{
12 |   editorComponent: EditorComponentType
13 | }>()
14 | 
15 | const { store, autoSave, editorOptions } = inject(injectKeyProps)!
16 | const showMessage = ref(getItem())
17 | 
18 | const onChange = debounce((code: string) => {
19 |   store.value.activeFile.code = code
20 | }, 250)
21 | 
22 | function setItem() {
23 |   localStorage.setItem(SHOW_ERROR_KEY, showMessage.value ? 'true' : 'false')
24 | }
25 | 
26 | function getItem() {
27 |   const item = localStorage.getItem(SHOW_ERROR_KEY)
28 |   return !(item === 'false')
29 | }
30 | 
31 | watch(showMessage, () => {
32 |   setItem()
33 | })
34 | </script>
35 | 
36 | <template>
37 |   <FileSelector />
38 |   <div class="editor-container">
39 |     <props.editorComponent
40 |       :value="store.activeFile.code"
41 |       :filename="store.activeFile.filename"
42 |       @change="onChange"
43 |     />
44 |     <Message v-show="showMessage" :err="store.errors[0]" />
45 | 
46 |     <div class="editor-floating">
47 |       <ToggleButton
48 |         v-if="editorOptions?.showErrorText !== false"
49 |         v-model="showMessage"
50 |         :text="editorOptions?.showErrorText || 'Show Error'"
51 |       />
52 |       <ToggleButton
53 |         v-if="editorOptions?.autoSaveText !== false"
54 |         v-model="autoSave"
55 |         :text="editorOptions?.autoSaveText || 'Auto Save'"
56 |       />
57 |     </div>
58 |   </div>
59 | </template>
60 | 
61 | <style scoped>
62 | .editor-container {
63 |   height: calc(100% - var(--header-height));
64 |   overflow: hidden;
65 |   position: relative;
66 | }
67 | 
68 | .editor-floating {
69 |   position: absolute;
70 |   bottom: 16px;
71 |   right: 16px;
72 |   z-index: 11;
73 |   display: flex;
74 |   flex-direction: column;
75 |   align-items: end;
76 |   gap: 8px;
77 |   background-color: var(--bg);
78 |   color: var(--text-light);
79 |   padding: 8px;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/import-map.ts:
--------------------------------------------------------------------------------
 1 | import { computed, version as currentVersion, ref } from 'vue'
 2 | 
 3 | export function getVersions(version: string): number[] {
 4 |   return version.split('.').map((v) => parseInt(v, 10))
 5 | }
 6 | 
 7 | export function isVaporSupported(version: string): boolean{
 8 |   const [major, minor] = getVersions(version)
 9 |   // vapor mode is supported in v3.6+
10 |   return major > 3 || (major === 3 && minor >= 6)
11 | }
12 | 
13 | export function useVueImportMap(
14 |   defaults: {
15 |     runtimeDev?: string | (() => string)
16 |     runtimeProd?: string | (() => string)
17 |     serverRenderer?: string | (() => string)
18 |     vueVersion?: string | null
19 |   } = {},
20 | ) {
21 |   function normalizeDefaults(defaults?: string | (() => string)) {
22 |     if (!defaults) return
23 |     return typeof defaults === 'string' ? defaults : defaults()
24 |   }
25 | 
26 |   const productionMode = ref(false)
27 |   const vueVersion = ref<string | null>(defaults.vueVersion || null)
28 | 
29 |   function getVueURL() {
30 |     const version = vueVersion.value || currentVersion
31 |     return isVaporSupported(version)
32 |       ? `https://cdn.jsdelivr.net/npm/vue@${version}/dist/vue.runtime-with-vapor.esm-browser${productionMode.value ? `.prod` : ``}.js`
33 |       : `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser${productionMode.value ? `.prod` : ``}.js`
34 |   }
35 | 
36 |   const importMap = computed<ImportMap>(() => {
37 |     const vue =
38 |       (!vueVersion.value &&
39 |         normalizeDefaults(
40 |           productionMode.value ? defaults.runtimeProd : defaults.runtimeDev,
41 |         )) ||
42 |       getVueURL()
43 | 
44 |     const serverRenderer =
45 |       (!vueVersion.value && normalizeDefaults(defaults.serverRenderer)) ||
46 |       `https://cdn.jsdelivr.net/npm/@vue/server-renderer@${
47 |         vueVersion.value || currentVersion
48 |       }/dist/server-renderer.esm-browser.js`
49 |     return {
50 |       imports: {
51 |         vue,
52 |         'vue/server-renderer': serverRenderer,
53 |       },
54 |     }
55 |   })
56 | 
57 |   return {
58 |     productionMode,
59 |     importMap,
60 |     vueVersion,
61 |     defaultVersion: currentVersion,
62 |   }
63 | }
64 | 
65 | export interface ImportMap {
66 |   imports?: Record<string, string | undefined>
67 |   scopes?: Record<string, Record<string, string>>
68 | }
69 | 
70 | export function mergeImportMap(a: ImportMap, b: ImportMap): ImportMap {
71 |   return {
72 |     imports: { ...a.imports, ...b.imports },
73 |     scopes: { ...a.scopes, ...b.scopes },
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/test/main.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/prefer-ts-expect-error */
 2 | import { createApp, h, ref, watchEffect } from 'vue'
 3 | import { type OutputModes, Repl, useStore, useVueImportMap } from '../src'
 4 | // @ts-ignore
 5 | import MonacoEditor from '../src/editor/MonacoEditor.vue'
 6 | // @ts-ignore
 7 | import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
 8 | 
 9 | const window = globalThis.window as any
10 | window.process = { env: {} }
11 | 
12 | const App = {
13 |   setup() {
14 |     const query = new URLSearchParams(location.search)
15 |     const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
16 |       runtimeDev: import.meta.env.PROD
17 |         ? undefined
18 |         : `${location.origin}/src/vue-dev-proxy`,
19 |       serverRenderer: import.meta.env.PROD
20 |         ? undefined
21 |         : `${location.origin}/src/vue-server-renderer-dev-proxy`,
22 |     })
23 |     const store = (window.store = useStore(
24 |       {
25 |         builtinImportMap,
26 |         vueVersion,
27 |         showOutput: ref(query.has('so')),
28 |         outputMode: ref((query.get('om') as OutputModes) || 'preview'),
29 |       },
30 |       location.hash,
31 |     ))
32 |     console.info(store)
33 | 
34 |     watchEffect(() => history.replaceState({}, '', store.serialize()))
35 | 
36 |     // setTimeout(() => {
37 |     //   store.setFiles(
38 |     //     {
39 |     //       'src/index.html': '<h1>yo</h1>',
40 |     //       'src/main.js': 'document.body.innerHTML = "<h1>hello</h1>"',
41 |     //       'src/foo.js': 'document.body.innerHTML = "<h1>hello</h1>"',
42 |     //       'src/bar.js': 'document.body.innerHTML = "<h1>hello</h1>"',
43 |     //       'src/baz.js': 'document.body.innerHTML = "<h1>hello</h1>"',
44 |     //     },
45 |     //     'src/index.html',
46 |     //   )
47 |     // }, 1000)
48 | 
49 |     // store.vueVersion = '3.4.1'
50 |     const theme = ref<'light' | 'dark'>('dark')
51 |     window.theme = theme
52 |     const previewTheme = ref(false)
53 |     window.previewTheme = previewTheme
54 | 
55 |     return () =>
56 |       h(Repl, {
57 |         store,
58 |         theme: theme.value,
59 |         previewTheme: previewTheme.value,
60 |         editor: MonacoEditor,
61 |         showOpenSourceMap: true,
62 |         // layout: 'vertical',
63 |         ssr: true,
64 |         showSsrOutput: true,
65 |         sfcOptions: {
66 |           script: {
67 |             // inlineTemplate: false
68 |           },
69 |         },
70 |         // showCompileOutput: false,
71 |         // showImportMap: false
72 |         editorOptions: {
73 |           autoSaveText: '💾',
74 |           monacoOptions: {
75 |             // wordWrap: 'on',
76 |           },
77 |         },
78 |         // autoSave: false,
79 |       })
80 |   },
81 | }
82 | 
83 | createApp(App).mount('#app')
84 | 


--------------------------------------------------------------------------------
/src/Message.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ref, watch } from 'vue'
  3 | import type { CompilerError } from 'vue/compiler-sfc'
  4 | 
  5 | const props = defineProps<{
  6 |   err?: string | Error | false
  7 |   warn?: string | Error
  8 | }>()
  9 | 
 10 | const dismissed = ref(false)
 11 | 
 12 | watch(
 13 |   () => [props.err, props.warn],
 14 |   () => {
 15 |     dismissed.value = false
 16 |   },
 17 | )
 18 | 
 19 | function formatMessage(err: string | Error): string {
 20 |   if (typeof err === 'string') {
 21 |     return err
 22 |   } else {
 23 |     let msg = err.message
 24 |     const loc = (err as CompilerError).loc
 25 |     if (loc && loc.start) {
 26 |       msg = `(${loc.start.line}:${loc.start.column}) ` + msg
 27 |     }
 28 |     return msg
 29 |   }
 30 | }
 31 | </script>
 32 | 
 33 | <template>
 34 |   <Transition name="fade">
 35 |     <div
 36 |       v-if="!dismissed && (err || warn)"
 37 |       class="msg"
 38 |       :class="err ? 'err' : 'warn'"
 39 |     >
 40 |       <pre>{{ formatMessage(err || warn!) }}</pre>
 41 |       <button class="dismiss" @click="dismissed = true">✕</button>
 42 |     </div>
 43 |   </Transition>
 44 | </template>
 45 | 
 46 | <style scoped>
 47 | .msg.err {
 48 |   --color: #f56c6c;
 49 |   --bg-color: #fef0f0;
 50 | }
 51 | 
 52 | .dark .msg.err {
 53 |   --bg-color: #2b1d1d;
 54 | }
 55 | 
 56 | .msg.warn {
 57 |   --color: #e6a23c;
 58 |   --bg-color: #fdf6ec;
 59 | }
 60 | 
 61 | .dark .msg.warn {
 62 |   --bg-color: #292218;
 63 | }
 64 | 
 65 | pre {
 66 |   margin: 0;
 67 |   padding: 12px 20px;
 68 |   overflow: auto;
 69 | }
 70 | 
 71 | .msg {
 72 |   position: absolute;
 73 |   bottom: 0;
 74 |   left: 8px;
 75 |   right: 8px;
 76 |   z-index: 20;
 77 |   border: 2px solid transparent;
 78 |   border-radius: 6px;
 79 |   font-family: var(--font-code);
 80 |   white-space: pre-wrap;
 81 |   margin-bottom: 8px;
 82 |   max-height: calc(100% - 300px);
 83 |   min-height: 40px;
 84 |   display: flex;
 85 |   align-items: stretch;
 86 |   color: var(--color);
 87 |   border-color: var(--color);
 88 |   background-color: var(--bg-color);
 89 | }
 90 | 
 91 | .dismiss {
 92 |   position: absolute;
 93 |   top: 2px;
 94 |   right: 2px;
 95 |   width: 18px;
 96 |   height: 18px;
 97 |   line-height: 18px;
 98 |   border-radius: 9px;
 99 |   text-align: center;
100 |   display: block;
101 |   font-size: 9px;
102 |   padding: 0;
103 |   color: var(--bg-color);
104 |   background-color: var(--color);
105 | }
106 | 
107 | @media (max-width: 720px) {
108 |   .dismiss {
109 |     top: -9px;
110 |     right: -9px;
111 |   }
112 | 
113 |   .msg {
114 |     bottom: 50px;
115 |   }
116 | }
117 | 
118 | .fade-enter-active,
119 | .fade-leave-active {
120 |   transition: all 0.15s ease-out;
121 | }
122 | 
123 | .fade-enter-from,
124 | .fade-leave-to {
125 |   opacity: 0;
126 |   transform: translate(0, 10px);
127 | }
128 | </style>
129 | 


--------------------------------------------------------------------------------
/src/codemirror/CodeMirror.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     ref="container"
  4 |     class="editor"
  5 |     @keydown.ctrl.s.prevent="emitChangeEvent"
  6 |     @keydown.meta.s.prevent="emitChangeEvent"
  7 |   />
  8 | </template>
  9 | 
 10 | <script setup lang="ts">
 11 | import type { ModeSpec, ModeSpecOptions } from 'codemirror'
 12 | import {
 13 |   inject,
 14 |   onMounted,
 15 |   onWatcherCleanup,
 16 |   useTemplateRef,
 17 |   watch,
 18 |   watchEffect,
 19 | } from 'vue'
 20 | import { debounce } from '../utils'
 21 | import CodeMirror from './codemirror'
 22 | import { injectKeyProps } from '../../src/types'
 23 | 
 24 | export interface Props {
 25 |   mode?: string | ModeSpec<ModeSpecOptions>
 26 |   value?: string
 27 |   readonly?: boolean
 28 | }
 29 | 
 30 | const props = withDefaults(defineProps<Props>(), {
 31 |   mode: 'htmlmixed',
 32 |   value: '',
 33 |   readonly: false,
 34 | })
 35 | 
 36 | const emit = defineEmits<(e: 'change', value: string) => void>()
 37 | 
 38 | const el = useTemplateRef('container')
 39 | const { autoResize, autoSave } = inject(injectKeyProps)!
 40 | let editor: CodeMirror.Editor
 41 | 
 42 | const emitChangeEvent = () => {
 43 |   emit('change', editor.getValue())
 44 | }
 45 | 
 46 | onMounted(() => {
 47 |   const addonOptions = props.readonly
 48 |     ? {}
 49 |     : {
 50 |         autoCloseBrackets: true,
 51 |         autoCloseTags: true,
 52 |         foldGutter: true,
 53 |         gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
 54 |         keyMap: 'sublime',
 55 |       }
 56 | 
 57 |   editor = CodeMirror(el.value!, {
 58 |     value: '',
 59 |     mode: props.mode,
 60 |     readOnly: props.readonly,
 61 |     tabSize: 2,
 62 |     lineWrapping: true,
 63 |     lineNumbers: true,
 64 |     ...addonOptions,
 65 |   })
 66 | 
 67 |   watchEffect(() => {
 68 |     const cur = editor.getValue()
 69 |     if (props.value !== cur) {
 70 |       editor.setValue(props.value)
 71 |     }
 72 |   })
 73 | 
 74 |   watchEffect(() => {
 75 |     editor.setOption('mode', props.mode)
 76 |   })
 77 | 
 78 |   setTimeout(() => {
 79 |     editor.refresh()
 80 |   }, 50)
 81 | 
 82 |   if (autoResize.value) {
 83 |     window.addEventListener(
 84 |       'resize',
 85 |       debounce(() => {
 86 |         editor.refresh()
 87 |       }),
 88 |     )
 89 |   }
 90 | 
 91 |   watch(
 92 |     autoSave,
 93 |     (autoSave) => {
 94 |       if (autoSave) {
 95 |         editor.on('change', emitChangeEvent)
 96 |         onWatcherCleanup(() => editor.off('change', emitChangeEvent))
 97 |       }
 98 |     },
 99 |     { immediate: true },
100 |   )
101 | })
102 | </script>
103 | 
104 | <style>
105 | .editor {
106 |   position: relative;
107 |   height: 100%;
108 |   width: 100%;
109 |   overflow: hidden;
110 | }
111 | 
112 | .CodeMirror {
113 |   font-family: var(--font-code);
114 |   line-height: 1.5;
115 |   height: 100%;
116 | }
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/output/PreviewProxy.ts:
--------------------------------------------------------------------------------
 1 | // ReplProxy and srcdoc implementation from Svelte REPL
 2 | // MIT License https://github.com/sveltejs/svelte-repl/blob/master/LICENSE
 3 | 
 4 | let uid = 1
 5 | 
 6 | export class PreviewProxy {
 7 |   iframe: HTMLIFrameElement
 8 |   handlers: Record<string, Function>
 9 |   pending_cmds: Map<
10 |     number,
11 |     { resolve: (value: unknown) => void; reject: (reason?: any) => void }
12 |   >
13 |   handle_event: (e: any) => void
14 | 
15 |   constructor(iframe: HTMLIFrameElement, handlers: Record<string, Function>) {
16 |     this.iframe = iframe
17 |     this.handlers = handlers
18 | 
19 |     this.pending_cmds = new Map()
20 | 
21 |     this.handle_event = (e) => this.handle_repl_message(e)
22 |     window.addEventListener('message', this.handle_event, false)
23 |   }
24 | 
25 |   destroy() {
26 |     window.removeEventListener('message', this.handle_event)
27 |   }
28 | 
29 |   iframe_command(action: string, args: any) {
30 |     return new Promise((resolve, reject) => {
31 |       const cmd_id = uid++
32 | 
33 |       this.pending_cmds.set(cmd_id, { resolve, reject })
34 | 
35 |       this.iframe.contentWindow!.postMessage({ action, cmd_id, args }, '*')
36 |     })
37 |   }
38 | 
39 |   handle_command_message(cmd_data: any) {
40 |     let action = cmd_data.action
41 |     let id = cmd_data.cmd_id
42 |     let handler = this.pending_cmds.get(id)
43 | 
44 |     if (handler) {
45 |       this.pending_cmds.delete(id)
46 |       if (action === 'cmd_error') {
47 |         let { message, stack } = cmd_data
48 |         let e = new Error(message)
49 |         e.stack = stack
50 |         handler.reject(e)
51 |       }
52 | 
53 |       if (action === 'cmd_ok') {
54 |         handler.resolve(cmd_data.args)
55 |       }
56 |     } else if (action !== 'cmd_error' && action !== 'cmd_ok') {
57 |       console.error('command not found', id, cmd_data, [
58 |         ...this.pending_cmds.keys(),
59 |       ])
60 |     }
61 |   }
62 | 
63 |   handle_repl_message(event: any) {
64 |     if (event.source !== this.iframe.contentWindow) return
65 | 
66 |     const { action, args } = event.data
67 | 
68 |     switch (action) {
69 |       case 'cmd_error':
70 |       case 'cmd_ok':
71 |         return this.handle_command_message(event.data)
72 |       case 'fetch_progress':
73 |         return this.handlers.on_fetch_progress(args.remaining)
74 |       case 'error':
75 |         return this.handlers.on_error(event.data)
76 |       case 'unhandledrejection':
77 |         return this.handlers.on_unhandled_rejection(event.data)
78 |       case 'console':
79 |         return this.handlers.on_console(event.data)
80 |       case 'console_group':
81 |         return this.handlers.on_console_group(event.data)
82 |       case 'console_group_collapsed':
83 |         return this.handlers.on_console_group_collapsed(event.data)
84 |       case 'console_group_end':
85 |         return this.handlers.on_console_group_end(event.data)
86 |     }
87 |   }
88 | 
89 |   eval(script: string | string[]) {
90 |     return this.iframe_command('eval', { script })
91 |   }
92 | 
93 |   handle_links() {
94 |     return this.iframe_command('catch_clicks', {})
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/src/output/Output.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import Preview from './Preview.vue'
  3 | import SsrOutput from './SsrOutput.vue'
  4 | import { computed, inject, useTemplateRef, watchEffect } from 'vue'
  5 | import {
  6 |   type EditorComponentType,
  7 |   type OutputModes,
  8 |   injectKeyProps,
  9 | } from '../types'
 10 | 
 11 | const props = defineProps<{
 12 |   editorComponent: EditorComponentType
 13 |   showCompileOutput?: boolean
 14 |   showOpenSourceMap?: boolean
 15 |   showSsrOutput?: boolean
 16 |   ssr: boolean
 17 | }>()
 18 | 
 19 | const { store } = inject(injectKeyProps)!
 20 | const previewRef = useTemplateRef('preview')
 21 | const modes = computed(() => {
 22 |   const outputModes: OutputModes[] = ['preview']
 23 |   if (props.showCompileOutput) {
 24 |     outputModes.push('js', 'css', 'ssr')
 25 |   }
 26 |   if (props.ssr && props.showSsrOutput) {
 27 |     outputModes.push('ssr output')
 28 |   }
 29 |   return outputModes
 30 | })
 31 | 
 32 | const mode = computed<OutputModes>({
 33 |   get: () => store.value.outputMode,
 34 |   set: (value) => (store.value.outputMode = value),
 35 | })
 36 | 
 37 | watchEffect(() => {
 38 |   if (!modes.value.includes(mode.value)) {
 39 |     mode.value = modes.value[0]
 40 |   }
 41 | })
 42 | 
 43 | const showSourceMap = computed(() => {
 44 |   return props.showOpenSourceMap && (mode.value === 'js' || mode.value === 'ssr')
 45 | })
 46 | 
 47 | function openSourceMap() {
 48 |   const { clientMap, ssrMap } = store.value.activeFile.compiled
 49 |   window.open(mode.value === 'js' ? clientMap : ssrMap)
 50 | }
 51 | 
 52 | function reload() {
 53 |   previewRef.value?.reload()
 54 | }
 55 | 
 56 | defineExpose({ reload, previewRef })
 57 | </script>
 58 | 
 59 | <template>
 60 |   <div class="tab-buttons">
 61 |     <button
 62 |       v-for="m of modes"
 63 |       :key="m"
 64 |       :class="{ active: mode === m }"
 65 |       @click="mode = m"
 66 |     >
 67 |       <span>{{ m }}</span>
 68 |     </button>
 69 |   </div>
 70 | 
 71 |   <div class="output-container">
 72 |     <Preview ref="preview" :show="mode === 'preview'" :ssr="ssr" />
 73 |     <SsrOutput
 74 |       v-if="mode === 'ssr output'"
 75 |       :context="store.ssrOutput.context"
 76 |       :html="store.ssrOutput.html"
 77 |     />
 78 |     <props.editorComponent
 79 |       v-else-if="mode !== 'preview'"
 80 |       readonly
 81 |       :filename="store.activeFile.filename"
 82 |       :value="store.activeFile.compiled[mode]"
 83 |       :mode="mode"
 84 |     />
 85 |   </div>
 86 | 
 87 |   <div v-if="showSourceMap" class="tab-buttons open-sourcemap">
 88 |     <button>
 89 |       <span @click="openSourceMap">open sourceMap</span>
 90 |     </button>
 91 |   </div>
 92 | </template>
 93 | 
 94 | <style scoped>
 95 | .output-container {
 96 |   height: calc(100% - var(--header-height));
 97 |   overflow: hidden;
 98 |   position: relative;
 99 | }
100 | 
101 | .tab-buttons {
102 |   box-sizing: border-box;
103 |   border-bottom: 1px solid var(--border);
104 |   background-color: var(--bg);
105 |   height: var(--header-height);
106 |   overflow: hidden;
107 | }
108 | .tab-buttons button {
109 |   padding: 0;
110 |   box-sizing: border-box;
111 | }
112 | .tab-buttons span {
113 |   font-size: 13px;
114 |   font-family: var(--font-code);
115 |   text-transform: uppercase;
116 |   color: var(--text-light);
117 |   display: inline-block;
118 |   padding: 8px 16px 6px;
119 |   line-height: 20px;
120 | }
121 | button.active {
122 |   color: var(--color-branding-dark);
123 |   border-bottom: 3px solid var(--color-branding-dark);
124 | }
125 | .open-sourcemap {
126 |   position: absolute;
127 |   right: 0;
128 |   top: 0;
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "@vue/repl",
  3 |   "version": "4.7.1",
  4 |   "description": "Vue component for editing Vue components",
  5 |   "packageManager": "pnpm@10.14.0",
  6 |   "type": "module",
  7 |   "main": "dist/ssr-stub.js",
  8 |   "module": "dist/vue-repl.js",
  9 |   "files": [
 10 |     "dist"
 11 |   ],
 12 |   "types": "dist/vue-repl.d.ts",
 13 |   "exports": {
 14 |     ".": {
 15 |       "types": "./dist/vue-repl.d.ts",
 16 |       "import": "./dist/vue-repl.js",
 17 |       "require": "./dist/ssr-stub.js"
 18 |     },
 19 |     "./monaco-editor": {
 20 |       "types": "./dist/monaco-editor.d.ts",
 21 |       "import": "./dist/monaco-editor.js",
 22 |       "require": null
 23 |     },
 24 |     "./codemirror-editor": {
 25 |       "types": "./dist/codemirror-editor.d.ts",
 26 |       "import": "./dist/codemirror-editor.js",
 27 |       "require": null
 28 |     },
 29 |     "./core": {
 30 |       "types": "./dist/core.d.ts",
 31 |       "import": "./dist/core.js",
 32 |       "require": null
 33 |     },
 34 |     "./package.json": "./package.json",
 35 |     "./style.css": "./dist/vue-repl.css",
 36 |     "./dist/style.css": "./dist/vue-repl.css"
 37 |   },
 38 |   "typesVersions": {
 39 |     "*": {
 40 |       "*": [
 41 |         "./dist/*",
 42 |         "./*"
 43 |       ]
 44 |     }
 45 |   },
 46 |   "publishConfig": {
 47 |     "tag": "latest"
 48 |   },
 49 |   "scripts": {
 50 |     "dev": "vite",
 51 |     "build": "vite build",
 52 |     "build-preview": "vite build -c vite.preview.config.ts",
 53 |     "format": "prettier --write .",
 54 |     "lint": "eslint .",
 55 |     "typecheck": "vue-tsc --noEmit",
 56 |     "release": "bumpp --all",
 57 |     "version": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
 58 |     "prepublishOnly": "npm run build"
 59 |   },
 60 |   "simple-git-hooks": {
 61 |     "pre-commit": "pnpm exec lint-staged --concurrent false"
 62 |   },
 63 |   "lint-staged": {
 64 |     "*": [
 65 |       "prettier --write --cache --ignore-unknown"
 66 |     ]
 67 |   },
 68 |   "repository": {
 69 |     "type": "git",
 70 |     "url": "git+https://github.com/vuejs/repl.git"
 71 |   },
 72 |   "author": "Evan You",
 73 |   "license": "MIT",
 74 |   "bugs": {
 75 |     "url": "https://github.com/vuejs/repl/issues"
 76 |   },
 77 |   "homepage": "https://github.com/vuejs/repl#readme",
 78 |   "devDependencies": {
 79 |     "@babel/standalone": "^7.28.2",
 80 |     "@babel/types": "^7.28.2",
 81 |     "@eslint/js": "^9.32.0",
 82 |     "@jridgewell/gen-mapping": "^0.3.12",
 83 |     "@jridgewell/trace-mapping": "^0.3.29",
 84 |     "@rollup/plugin-replace": "^6.0.2",
 85 |     "@shikijs/monaco": "^3.9.2",
 86 |     "@types/babel__standalone": "^7.1.9",
 87 |     "@types/codemirror": "^5.60.16",
 88 |     "@types/hash-sum": "^1.0.2",
 89 |     "@types/node": "^24.2.0",
 90 |     "@vitejs/plugin-vue": "^6.0.1",
 91 |     "@volar/jsdelivr": "2.4.23",
 92 |     "@volar/monaco": "2.4.23",
 93 |     "@volar/typescript": "2.4.23",
 94 |     "@vue/babel-plugin-jsx": "^1.4.0",
 95 |     "@vue/language-core": "3.0.8",
 96 |     "@vue/language-service": "3.0.8",
 97 |     "@vue/typescript-plugin": "3.0.8",
 98 |     "assert": "^2.1.0",
 99 |     "bumpp": "^10.2.2",
100 |     "codemirror": "^5.65.18",
101 |     "conventional-changelog-cli": "^5.0.0",
102 |     "eslint": "^9.32.0",
103 |     "eslint-plugin-vue": "^10.4.0",
104 |     "fflate": "^0.8.2",
105 |     "hash-sum": "^2.0.0",
106 |     "lint-staged": "^16.1.4",
107 |     "monaco-editor-core": "^0.52.2",
108 |     "prettier": "^3.6.2",
109 |     "shiki": "^3.9.2",
110 |     "simple-git-hooks": "^2.13.1",
111 |     "source-map-js": "^1.2.1",
112 |     "sucrase": "^3.35.0",
113 |     "typescript": "^5.9.2",
114 |     "typescript-eslint": "^8.39.0",
115 |     "vite": "^7.0.6",
116 |     "vite-plugin-dts": "^4.5.4",
117 |     "vscode-uri": "^3.1.0",
118 |     "volar-service-typescript": "0.0.65",
119 |     "vue": "^3.5.18",
120 |     "vue-tsc": "3.0.8"
121 |   }
122 | }
123 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # @vue/repl
  2 | 
  3 | Vue SFC REPL as a Vue 3 component.
  4 | 
  5 | ## Basic Usage
  6 | 
  7 | **Note: `@vue/repl` >= 2 now supports Monaco Editor, but also requires explicitly passing in the editor to be used for tree-shaking.**
  8 | 
  9 | ```ts
 10 | // vite.config.ts
 11 | import { defineConfig } from 'vite'
 12 | export default defineConfig({
 13 |   optimizeDeps: {
 14 |     exclude: ['@vue/repl'],
 15 |   },
 16 |   // ...
 17 | })
 18 | ```
 19 | 
 20 | ### With CodeMirror Editor
 21 | 
 22 | Basic editing experience with no intellisense. Lighter weight, fewer network requests, better for embedding use cases.
 23 | 
 24 | ```vue
 25 | <script setup>
 26 | import { Repl } from '@vue/repl'
 27 | import CodeMirror from '@vue/repl/codemirror-editor'
 28 | // import '@vue/repl/style.css'
 29 | // ^ no longer needed after 3.0
 30 | </script>
 31 | 
 32 | <template>
 33 |   <Repl :editor="CodeMirror" />
 34 | </template>
 35 | ```
 36 | 
 37 | ### With Monaco Editor
 38 | 
 39 | With Volar support, autocomplete, type inference, and semantic highlighting. Heavier bundle, loads dts files from CDN, better for standalone use cases.
 40 | 
 41 | ```vue
 42 | <script setup>
 43 | import { Repl } from '@vue/repl'
 44 | import Monaco from '@vue/repl/monaco-editor'
 45 | // import '@vue/repl/style.css'
 46 | // ^ no longer needed after 3.0
 47 | </script>
 48 | 
 49 | <template>
 50 |   <Repl :editor="Monaco" />
 51 | </template>
 52 | ```
 53 | 
 54 | ## Advanced Usage
 55 | 
 56 | Customize the behavior of the REPL by manually initializing the store.
 57 | 
 58 | See [v4 Migration Guide](https://github.com/vuejs/repl/releases/tag/v4.0.0)
 59 | 
 60 | ```vue
 61 | <script setup>
 62 | import { watchEffect, ref } from 'vue'
 63 | import { Repl, useStore, useVueImportMap } from '@vue/repl'
 64 | import Monaco from '@vue/repl/monaco-editor'
 65 | 
 66 | // retrieve some configuration options from the URL
 67 | const query = new URLSearchParams(location.search)
 68 | 
 69 | const {
 70 |   importMap: builtinImportMap,
 71 |   vueVersion,
 72 |   productionMode,
 73 | } = useVueImportMap({
 74 |   // specify the default URL to import Vue runtime from in the sandbox
 75 |   // default is the CDN link from jsdelivr.com with version matching Vue's version
 76 |   // from peerDependency
 77 |   runtimeDev: 'cdn link to vue.runtime.esm-browser.js',
 78 |   runtimeProd: 'cdn link to vue.runtime.esm-browser.prod.js',
 79 |   serverRenderer: 'cdn link to server-renderer.esm-browser.js',
 80 | })
 81 | 
 82 | const store = useStore(
 83 |   {
 84 |     // pre-set import map
 85 |     builtinImportMap,
 86 |     vueVersion,
 87 |     // starts on the output pane (mobile only) if the URL has a showOutput query
 88 |     showOutput: ref(query.has('showOutput')),
 89 |     // starts on a different tab on the output pane if the URL has a outputMode query
 90 |     // and default to the "preview" tab
 91 |     outputMode: ref(query.get('outputMode') || 'preview'),
 92 |   },
 93 |   // initialize repl with previously serialized state
 94 |   location.hash,
 95 | )
 96 | 
 97 | // persist state to URL hash
 98 | watchEffect(() => history.replaceState({}, '', store.serialize()))
 99 | 
100 | // use a specific version of Vue
101 | vueVersion.value = '3.2.8'
102 | // production mode is enabled
103 | productionMode.value = true
104 | </script>
105 | 
106 | <template>
107 |   <Repl :store="store" :editor="Monaco" :showCompileOutput="true" />
108 | </template>
109 | ```
110 | 
111 | Use only the Preview without the editor
112 | 
113 | ```vue
114 | <script setup>
115 | import { ref } from 'vue'
116 | import { Sandbox, useStore } from '@vue/repl'
117 | 
118 | // retrieve some configuration options from the URL
119 | const query = new URLSearchParams(location.search)
120 | 
121 | const store = useStore(
122 |   {
123 |     // custom vue version
124 |     vueVersion: ref(query.get('vue')),
125 |   },
126 |   // initialize repl with previously serialized state
127 |   location.hash,
128 | )
129 | </script>
130 | 
131 | <template>
132 |   <Sandbox :store="store" />
133 | </template>
134 | ```
135 | 


--------------------------------------------------------------------------------
/src/sourcemap.ts:
--------------------------------------------------------------------------------
  1 | import type { RawSourceMap } from 'source-map-js'
  2 | import type { EncodedSourceMap as TraceEncodedSourceMap } from '@jridgewell/trace-mapping'
  3 | import { TraceMap, eachMapping } from '@jridgewell/trace-mapping'
  4 | import type { EncodedSourceMap as GenEncodedSourceMap } from '@jridgewell/gen-mapping'
  5 | import { addMapping, fromMap, toEncodedMap } from '@jridgewell/gen-mapping'
  6 | 
  7 | // trim analyzed bindings comment
  8 | export function trimAnalyzedBindings(scriptCode: string) {
  9 |   return scriptCode.replace(/\/\*[\s\S]*?\*\/\n/, '').trim()
 10 | }
 11 | /**
 12 |  * The merge logic of sourcemap is consistent with the logic in vite-plugin-vue
 13 |  */
 14 | export function getSourceMap(
 15 |   filename: string,
 16 |   scriptCode: string,
 17 |   scriptMap: any,
 18 |   templateMap: any,
 19 | ): RawSourceMap {
 20 |   let resolvedMap: RawSourceMap | undefined = undefined
 21 |   if (templateMap) {
 22 |     // if the template is inlined into the main module (indicated by the presence
 23 |     // of templateMap), we need to concatenate the two source maps.
 24 |     const from = scriptMap ?? {
 25 |       file: filename,
 26 |       sourceRoot: '',
 27 |       version: 3,
 28 |       sources: [],
 29 |       sourcesContent: [],
 30 |       names: [],
 31 |       mappings: '',
 32 |     }
 33 |     const gen = fromMap(
 34 |       // version property of result.map is declared as string
 35 |       // but actually it is `3`
 36 |       from as Omit<RawSourceMap, 'version'> as TraceEncodedSourceMap,
 37 |     )
 38 |     const tracer = new TraceMap(
 39 |       // same above
 40 |       templateMap as Omit<RawSourceMap, 'version'> as TraceEncodedSourceMap,
 41 |     )
 42 |     const offset =
 43 |       (trimAnalyzedBindings(scriptCode).match(/\r?\n/g)?.length ?? 0) 
 44 |     eachMapping(tracer, (m) => {
 45 |       if (m.source == null) return
 46 |       addMapping(gen, {
 47 |         source: m.source,
 48 |         original: { line: m.originalLine, column: m.originalColumn },
 49 |         generated: {
 50 |           line: m.generatedLine + offset,
 51 |           column: m.generatedColumn,
 52 |         },
 53 |       })
 54 |     })
 55 | 
 56 |     // same above
 57 |     resolvedMap = toEncodedMap(gen) as Omit<
 58 |       GenEncodedSourceMap,
 59 |       'version'
 60 |     > as RawSourceMap
 61 |     // if this is a template only update, we will be reusing a cached version
 62 |     // of the main module compile result, which has outdated sourcesContent.
 63 |     resolvedMap.sourcesContent = templateMap.sourcesContent
 64 |   } else {
 65 |     resolvedMap = scriptMap
 66 |   }
 67 | 
 68 |   return resolvedMap!
 69 | }
 70 | 
 71 | /*
 72 |  * Slightly modified version of https://github.com/AriPerkkio/vite-plugin-source-map-visualizer/blob/main/src/generate-link.ts
 73 |  */
 74 | export function toVisualizer(code: string, sourceMap: RawSourceMap) {
 75 |   const map = JSON.stringify(sourceMap)
 76 |   const encoder = new TextEncoder()
 77 | 
 78 |   // Convert the strings to Uint8Array
 79 |   const codeArray = encoder.encode(code)
 80 |   const mapArray = encoder.encode(map)
 81 | 
 82 |   // Create Uint8Array for the lengths
 83 |   const codeLengthArray = encoder.encode(codeArray.length.toString())
 84 |   const mapLengthArray = encoder.encode(mapArray.length.toString())
 85 | 
 86 |   // Combine the lengths and the data
 87 |   const combinedArray = new Uint8Array(
 88 |     codeLengthArray.length +
 89 |       1 +
 90 |       codeArray.length +
 91 |       mapLengthArray.length +
 92 |       1 +
 93 |       mapArray.length,
 94 |   )
 95 | 
 96 |   combinedArray.set(codeLengthArray)
 97 |   combinedArray.set([0], codeLengthArray.length)
 98 |   combinedArray.set(codeArray, codeLengthArray.length + 1)
 99 |   combinedArray.set(
100 |     mapLengthArray,
101 |     codeLengthArray.length + 1 + codeArray.length,
102 |   )
103 |   combinedArray.set(
104 |     [0],
105 |     codeLengthArray.length + 1 + codeArray.length + mapLengthArray.length,
106 |   )
107 |   combinedArray.set(
108 |     mapArray,
109 |     codeLengthArray.length + 1 + codeArray.length + mapLengthArray.length + 1,
110 |   )
111 | 
112 |   // Convert the Uint8Array to a binary string
113 |   let binary = ''
114 |   const len = combinedArray.byteLength
115 |   for (let i = 0; i < len; i++) binary += String.fromCharCode(combinedArray[i])
116 | 
117 |   // Convert the binary string to a base64 string and return it
118 |   return `https://evanw.github.io/source-map-visualization#${btoa(binary)}`
119 | }
120 | 


--------------------------------------------------------------------------------
/src/Repl.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import SplitPane from './SplitPane.vue'
  3 | import Output from './output/Output.vue'
  4 | import { type Store, useStore } from './store'
  5 | import { computed, provide, toRefs, useTemplateRef } from 'vue'
  6 | import {
  7 |   type EditorComponentType,
  8 |   injectKeyPreviewRef,
  9 |   injectKeyProps,
 10 | } from './types'
 11 | import EditorContainer from './editor/EditorContainer.vue'
 12 | import type * as monaco from 'monaco-editor-core'
 13 | 
 14 | export interface Props {
 15 |   theme?: 'dark' | 'light'
 16 |   previewTheme?: boolean
 17 |   editor: EditorComponentType
 18 |   store?: Store
 19 |   autoResize?: boolean
 20 |   showCompileOutput?: boolean
 21 |   showOpenSourceMap?: boolean
 22 |   showImportMap?: boolean
 23 |   showSsrOutput?: boolean
 24 |   showTsConfig?: boolean
 25 |   clearConsole?: boolean
 26 |   layout?: 'horizontal' | 'vertical'
 27 |   layoutReverse?: boolean
 28 |   ssr?: boolean
 29 |   previewOptions?: {
 30 |     headHTML?: string
 31 |     bodyHTML?: string
 32 |     placeholderHTML?: string
 33 |     customCode?: {
 34 |       importCode?: string
 35 |       useCode?: string
 36 |     }
 37 |     showRuntimeError?: boolean
 38 |     showRuntimeWarning?: boolean
 39 |   }
 40 |   editorOptions?: {
 41 |     showErrorText?: string | false
 42 |     autoSaveText?: string | false
 43 |     monacoOptions?: monaco.editor.IStandaloneEditorConstructionOptions
 44 |   }
 45 |   splitPaneOptions?: {
 46 |     codeTogglerText?: string
 47 |     outputTogglerText?: string
 48 |   }
 49 | }
 50 | 
 51 | const autoSave = defineModel<boolean>({ default: true })
 52 | const props = withDefaults(defineProps<Props>(), {
 53 |   theme: 'light',
 54 |   previewTheme: false,
 55 |   store: () => useStore(),
 56 |   autoResize: true,
 57 |   showCompileOutput: true,
 58 |   showOpenSourceMap: false,
 59 |   showImportMap: true,
 60 |   showSsrOutput: false,
 61 |   showTsConfig: true,
 62 |   clearConsole: true,
 63 |   layoutReverse: false,
 64 |   ssr: false,
 65 |   layout: 'horizontal',
 66 |   previewOptions: () => ({}),
 67 |   editorOptions: () => ({}),
 68 |   splitPaneOptions: () => ({}),
 69 | })
 70 | 
 71 | if (!props.editor) {
 72 |   throw new Error('The "editor" prop is now required.')
 73 | }
 74 | 
 75 | const outputRef = useTemplateRef('output')
 76 | 
 77 | props.store.init()
 78 | 
 79 | const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
 80 | const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 81 | 
 82 | provide(injectKeyProps, {
 83 |   ...toRefs(props),
 84 |   autoSave,
 85 | })
 86 | provide(
 87 |   injectKeyPreviewRef,
 88 |   computed(() => outputRef.value?.previewRef?.container ?? null),
 89 | )
 90 | 
 91 | /**
 92 |  * Reload the preview iframe
 93 |  */
 94 | function reload() {
 95 |   outputRef.value?.reload()
 96 | }
 97 | 
 98 | defineExpose({ reload })
 99 | </script>
100 | 
101 | <template>
102 |   <div class="vue-repl">
103 |     <SplitPane :layout="layout">
104 |       <template #[editorSlotName]>
105 |         <EditorContainer :editor-component="editor" />
106 |       </template>
107 |       <template #[outputSlotName]>
108 |         <Output
109 |           ref="output"
110 |           :editor-component="editor"
111 |           :show-compile-output="props.showCompileOutput"
112 |           :show-open-source-map="props.showOpenSourceMap"
113 |           :show-ssr-output="props.showSsrOutput"
114 |           :ssr="!!props.ssr"
115 |         />
116 |       </template>
117 |     </SplitPane>
118 |   </div>
119 | </template>
120 | 
121 | <style>
122 | .vue-repl {
123 |   --bg: #fff;
124 |   --bg-soft: #f8f8f8;
125 |   --border: #ddd;
126 |   --text-light: #888;
127 |   --font-code: Menlo, Monaco, Consolas, 'Courier New', monospace;
128 |   --color-branding: #42b883;
129 |   --color-branding-dark: #416f9c;
130 |   --header-height: 38px;
131 | 
132 |   height: 100%;
133 |   margin: 0;
134 |   overflow: hidden;
135 |   font-size: 13px;
136 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
137 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
138 |   background-color: var(--bg-soft);
139 | }
140 | 
141 | .dark .vue-repl {
142 |   --bg: #1a1a1a;
143 |   --bg-soft: #242424;
144 |   --border: #383838;
145 |   --text-light: #aaa;
146 |   --color-branding: #42d392;
147 |   --color-branding-dark: #89ddff;
148 | }
149 | 
150 | .vue-repl button {
151 |   border: none;
152 |   outline: none;
153 |   cursor: pointer;
154 |   margin: 0;
155 |   background-color: transparent;
156 | }
157 | </style>
158 | 


--------------------------------------------------------------------------------
/src/monaco/Monaco.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import {
  3 |   computed,
  4 |   inject,
  5 |   onBeforeUnmount,
  6 |   onMounted,
  7 |   onWatcherCleanup,
  8 |   shallowRef,
  9 |   useTemplateRef,
 10 |   watch,
 11 | } from 'vue'
 12 | import * as monaco from 'monaco-editor-core'
 13 | import { initMonaco } from './env'
 14 | import { getOrCreateModel } from './utils'
 15 | import { type EditorMode, injectKeyProps } from '../types'
 16 | import { registerHighlighter } from './highlight'
 17 | 
 18 | const props = withDefaults(
 19 |   defineProps<{
 20 |     filename: string
 21 |     value?: string
 22 |     readonly?: boolean
 23 |     mode?: EditorMode
 24 |   }>(),
 25 |   {
 26 |     readonly: false,
 27 |     value: '',
 28 |     mode: undefined,
 29 |   },
 30 | )
 31 | 
 32 | const emit = defineEmits<{
 33 |   (e: 'change', value: string): void
 34 | }>()
 35 | 
 36 | const containerRef = useTemplateRef('container')
 37 | const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
 38 | const {
 39 |   store,
 40 |   autoSave,
 41 |   theme: replTheme,
 42 |   editorOptions,
 43 | } = inject(injectKeyProps)!
 44 | 
 45 | initMonaco(store.value)
 46 | 
 47 | const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 48 | 
 49 | let editorInstance: monaco.editor.IStandaloneCodeEditor
 50 | function emitChangeEvent() {
 51 |   emit('change', editorInstance.getValue())
 52 | }
 53 | 
 54 | onMounted(() => {
 55 |   const theme = registerHighlighter()
 56 |   if (!containerRef.value) {
 57 |     throw new Error('Cannot find containerRef')
 58 |   }
 59 |   editorInstance = monaco.editor.create(containerRef.value, {
 60 |     ...(props.readonly
 61 |       ? { value: props.value, language: lang.value }
 62 |       : { model: null }),
 63 |     fontSize: 13,
 64 |     tabSize: 2,
 65 |     theme: replTheme.value === 'light' ? theme.light : theme.dark,
 66 |     readOnly: props.readonly,
 67 |     automaticLayout: true,
 68 |     scrollBeyondLastLine: false,
 69 |     minimap: {
 70 |       enabled: false,
 71 |     },
 72 |     inlineSuggest: {
 73 |       enabled: false,
 74 |     },
 75 |     fixedOverflowWidgets: true,
 76 |     ...editorOptions.value.monacoOptions,
 77 |   })
 78 |   editor.value = editorInstance
 79 | 
 80 |   // Support for semantic highlighting
 81 |   const t = (editorInstance as any)._themeService._theme
 82 |   t.semanticHighlighting = true
 83 |   t.getTokenStyleMetadata = (
 84 |     type: string,
 85 |     modifiers: string[],
 86 |     _language: string,
 87 |   ) => {
 88 |     const _readonly = modifiers.includes('readonly')
 89 |     switch (type) {
 90 |       case 'function':
 91 |       case 'method':
 92 |         return { foreground: 12 }
 93 |       case 'class':
 94 |         return { foreground: 11 }
 95 |       case 'variable':
 96 |       case 'property':
 97 |         return { foreground: _readonly ? 19 : 9 }
 98 |       default:
 99 |         return { foreground: 0 }
100 |     }
101 |   }
102 | 
103 |   watch(
104 |     () => props.value,
105 |     (value) => {
106 |       if (editorInstance.getValue() === value) return
107 |       editorInstance.setValue(value || '')
108 |     },
109 |     { immediate: true },
110 |   )
111 | 
112 |   watch(lang, (lang) =>
113 |     monaco.editor.setModelLanguage(editorInstance.getModel()!, lang),
114 |   )
115 | 
116 |   if (!props.readonly) {
117 |     watch(
118 |       () => props.filename,
119 |       (_, oldFilename) => {
120 |         if (!editorInstance) return
121 |         const file = store.value.files[props.filename]
122 |         if (!file) return null
123 |         const model = getOrCreateModel(
124 |           monaco.Uri.parse(`file:///${props.filename}`),
125 |           file.language,
126 |           file.code,
127 |         )
128 | 
129 |         const oldFile = oldFilename ? store.value.files[oldFilename] : null
130 |         if (oldFile) {
131 |           oldFile.editorViewState = editorInstance.saveViewState()
132 |         }
133 | 
134 |         editorInstance.setModel(model)
135 | 
136 |         if (file.editorViewState) {
137 |           editorInstance.restoreViewState(file.editorViewState)
138 |           editorInstance.focus()
139 |         }
140 |       },
141 |       { immediate: true },
142 |     )
143 |   }
144 | 
145 |   editorInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
146 |     // ignore save event
147 |   })
148 | 
149 |   watch(
150 |     autoSave,
151 |     (autoSave) => {
152 |       if (autoSave) {
153 |         const disposable =
154 |           editorInstance.onDidChangeModelContent(emitChangeEvent)
155 |         onWatcherCleanup(() => disposable.dispose())
156 |       }
157 |     },
158 |     { immediate: true },
159 |   )
160 | 
161 |   // update theme
162 |   watch(replTheme, (n) => {
163 |     editorInstance.updateOptions({
164 |       theme: n === 'light' ? theme.light : theme.dark,
165 |     })
166 |   })
167 | })
168 | 
169 | onBeforeUnmount(() => {
170 |   editor.value?.dispose()
171 | })
172 | </script>
173 | 
174 | <template>
175 |   <div
176 |     ref="container"
177 |     class="editor"
178 |     @keydown.ctrl.s.prevent="emitChangeEvent"
179 |     @keydown.meta.s.prevent="emitChangeEvent"
180 |   />
181 | </template>
182 | 
183 | <style>
184 | .editor {
185 |   position: relative;
186 |   height: 100%;
187 |   width: 100%;
188 |   overflow: hidden;
189 | }
190 | </style>
191 | 


--------------------------------------------------------------------------------
/src/SplitPane.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed, inject, reactive, useTemplateRef } from 'vue'
  3 | import { injectKeyPreviewRef, injectKeyProps } from './types'
  4 | 
  5 | const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
  6 | const isVertical = computed(() => props.layout === 'vertical')
  7 | 
  8 | const containerRef = useTemplateRef('container')
  9 | const previewRef = inject(injectKeyPreviewRef)!
 10 | 
 11 | // mobile only
 12 | const { store, layoutReverse, splitPaneOptions } = inject(injectKeyProps)!
 13 | 
 14 | const state = reactive({
 15 |   dragging: false,
 16 |   split: 50,
 17 |   viewHeight: 0,
 18 |   viewWidth: 0,
 19 | })
 20 | 
 21 | const boundSplit = computed(() => {
 22 |   const { split } = state
 23 |   return split < 20 ? 20 : split > 80 ? 80 : split
 24 | })
 25 | 
 26 | let startPosition = 0
 27 | let startSplit = 0
 28 | 
 29 | function dragStart(e: MouseEvent) {
 30 |   state.dragging = true
 31 |   startPosition = isVertical.value ? e.pageY : e.pageX
 32 |   startSplit = boundSplit.value
 33 | 
 34 |   changeViewSize()
 35 | }
 36 | 
 37 | function dragMove(e: MouseEvent) {
 38 |   if (containerRef.value && state.dragging) {
 39 |     const position = isVertical.value ? e.pageY : e.pageX
 40 |     const totalSize = isVertical.value
 41 |       ? containerRef.value.offsetHeight
 42 |       : containerRef.value.offsetWidth
 43 |     const dp = position - startPosition
 44 |     state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
 45 | 
 46 |     changeViewSize()
 47 |   }
 48 | }
 49 | 
 50 | function dragEnd() {
 51 |   state.dragging = false
 52 | }
 53 | 
 54 | function changeViewSize() {
 55 |   const el = previewRef.value
 56 |   if (!el) return
 57 |   state.viewHeight = el.offsetHeight
 58 |   state.viewWidth = el.offsetWidth
 59 | }
 60 | </script>
 61 | 
 62 | <template>
 63 |   <div
 64 |     ref="container"
 65 |     class="split-pane"
 66 |     :class="{
 67 |       dragging: state.dragging,
 68 |       'show-output': store.showOutput,
 69 |       reverse: layoutReverse,
 70 |       vertical: isVertical,
 71 |     }"
 72 |     @mousemove="dragMove"
 73 |     @mouseup="dragEnd"
 74 |     @mouseleave="dragEnd"
 75 |   >
 76 |     <div
 77 |       class="left"
 78 |       :style="{ [isVertical ? 'height' : 'width']: boundSplit + '%' }"
 79 |     >
 80 |       <slot name="left" />
 81 |       <div class="dragger" @mousedown.prevent="dragStart" />
 82 |     </div>
 83 |     <div
 84 |       class="right"
 85 |       :style="{ [isVertical ? 'height' : 'width']: 100 - boundSplit + '%' }"
 86 |     >
 87 |       <div v-show="state.dragging" class="view-size">
 88 |         {{ `${state.viewWidth}px x ${state.viewHeight}px` }}
 89 |       </div>
 90 |       <slot name="right" />
 91 |     </div>
 92 | 
 93 |     <button class="toggler" @click="store.showOutput = !store.showOutput">
 94 |       {{
 95 |         store.showOutput
 96 |           ? splitPaneOptions?.codeTogglerText || '< Code'
 97 |           : splitPaneOptions?.outputTogglerText || 'Output >'
 98 |       }}
 99 |     </button>
100 |   </div>
101 | </template>
102 | 
103 | <style scoped>
104 | .split-pane {
105 |   display: flex;
106 |   height: 100%;
107 |   position: relative;
108 | }
109 | .split-pane.dragging {
110 |   cursor: ew-resize;
111 | }
112 | .dragging .left,
113 | .dragging .right {
114 |   pointer-events: none;
115 | }
116 | .left,
117 | .right {
118 |   position: relative;
119 |   height: 100%;
120 | }
121 | .view-size {
122 |   position: absolute;
123 |   top: 40px;
124 |   left: 10px;
125 |   font-size: 12px;
126 |   color: var(--text-light);
127 |   z-index: 100;
128 | }
129 | .left {
130 |   border-right: 1px solid var(--border);
131 | }
132 | .dragger {
133 |   position: absolute;
134 |   z-index: 3;
135 |   top: 0;
136 |   bottom: 0;
137 |   right: -5px;
138 |   width: 10px;
139 |   cursor: ew-resize;
140 | }
141 | .toggler {
142 |   display: none;
143 |   z-index: 3;
144 |   font-family: var(--font-code);
145 |   color: var(--text-light);
146 |   position: absolute;
147 |   left: 50%;
148 |   bottom: 20px;
149 |   background-color: var(--bg);
150 |   padding: 8px 12px;
151 |   border-radius: 8px;
152 |   transform: translateX(-50%);
153 |   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
154 | }
155 | 
156 | .dark .toggler {
157 |   background-color: var(--bg);
158 | }
159 | 
160 | /* vertical */
161 | @media (min-width: 721px) {
162 |   .split-pane.vertical {
163 |     display: block;
164 |   }
165 | 
166 |   .split-pane.vertical.dragging {
167 |     cursor: ns-resize;
168 |   }
169 | 
170 |   .vertical .dragger {
171 |     top: auto;
172 |     height: 10px;
173 |     width: 100%;
174 |     left: 0;
175 |     right: 0;
176 |     bottom: -5px;
177 |     cursor: ns-resize;
178 |   }
179 | 
180 |   .vertical .left,
181 |   .vertical .right {
182 |     width: 100%;
183 |   }
184 |   .vertical .left {
185 |     border-right: none;
186 |     border-bottom: 1px solid var(--border);
187 |   }
188 | }
189 | 
190 | /* mobile */
191 | @media (max-width: 720px) {
192 |   .left,
193 |   .right {
194 |     position: absolute;
195 |     inset: 0;
196 |     width: auto !important;
197 |     height: auto !important;
198 |   }
199 |   .dragger {
200 |     display: none;
201 |   }
202 |   .split-pane .toggler {
203 |     display: block;
204 |   }
205 |   .split-pane .right,
206 |   .split-pane.show-output.reverse .right,
207 |   .split-pane.show-output .left,
208 |   .split-pane.reverse .left {
209 |     z-index: -1;
210 |     pointer-events: none;
211 |   }
212 |   .split-pane .left,
213 |   .split-pane.show-output.reverse .left,
214 |   .split-pane.show-output .right,
215 |   .split-pane.reverse .right {
216 |     z-index: 0;
217 |     pointer-events: all;
218 |   }
219 | }
220 | </style>
221 | 


--------------------------------------------------------------------------------
/src/monaco/env.ts:
--------------------------------------------------------------------------------
  1 | import * as volar from '@volar/monaco'
  2 | import { Uri, editor, languages } from 'monaco-editor-core'
  3 | import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker'
  4 | import { watchEffect } from 'vue'
  5 | import type { Store } from '../store'
  6 | import { getOrCreateModel } from './utils'
  7 | import type { CreateData } from './vue.worker'
  8 | import vueWorker from './vue.worker?worker'
  9 | import * as languageConfigs from './language-configs'
 10 | import type { WorkerLanguageService } from '@volar/monaco/worker'
 11 | import { debounce } from '../utils'
 12 | 
 13 | let initted = false
 14 | export function initMonaco(store: Store) {
 15 |   if (initted) return
 16 |   loadMonacoEnv(store)
 17 | 
 18 |   watchEffect(() => {
 19 |     // create a model for each file in the store
 20 |     for (const filename in store.files) {
 21 |       const file = store.files[filename]
 22 |       if (editor.getModel(Uri.parse(`file:///${filename}`))) continue
 23 |       getOrCreateModel(
 24 |         Uri.parse(`file:///${filename}`),
 25 |         file.language,
 26 |         file.code,
 27 |       )
 28 |     }
 29 | 
 30 |     // dispose of any models that are not in the store
 31 |     for (const model of editor.getModels()) {
 32 |       const uri = model.uri.toString()
 33 |       if (store.files[uri.substring('file:///'.length)]) continue
 34 | 
 35 |       if (uri.startsWith('file:///node_modules')) continue
 36 |       if (uri.startsWith('inmemory://')) continue
 37 | 
 38 |       model.dispose()
 39 |     }
 40 |   })
 41 | 
 42 |   initted = true
 43 | }
 44 | 
 45 | export class WorkerHost {
 46 |   onFetchCdnFile(uri: string, text: string) {
 47 |     getOrCreateModel(Uri.parse(uri), undefined, text)
 48 |   }
 49 | }
 50 | 
 51 | let disposeVue: undefined | (() => void)
 52 | export async function reloadLanguageTools(store: Store) {
 53 |   disposeVue?.()
 54 | 
 55 |   let dependencies: Record<string, string> = {
 56 |     ...store.dependencyVersion,
 57 |   }
 58 | 
 59 |   if (store.vueVersion) {
 60 |     dependencies = {
 61 |       ...dependencies,
 62 |       vue: store.vueVersion,
 63 |       '@vue/compiler-core': store.vueVersion,
 64 |       '@vue/compiler-dom': store.vueVersion,
 65 |       '@vue/compiler-sfc': store.vueVersion,
 66 |       '@vue/compiler-ssr': store.vueVersion,
 67 |       '@vue/reactivity': store.vueVersion,
 68 |       '@vue/runtime-core': store.vueVersion,
 69 |       '@vue/runtime-dom': store.vueVersion,
 70 |       '@vue/shared': store.vueVersion,
 71 |     }
 72 |   }
 73 | 
 74 |   if (store.typescriptVersion) {
 75 |     dependencies = {
 76 |       ...dependencies,
 77 |       typescript: store.typescriptVersion,
 78 |     }
 79 |   }
 80 | 
 81 |   const worker = editor.createWebWorker<WorkerLanguageService>({
 82 |     moduleId: 'vs/language/vue/vueWorker',
 83 |     label: 'vue',
 84 |     host: new WorkerHost(),
 85 |     createData: {
 86 |       tsconfig: store.getTsConfig?.() || {},
 87 |       dependencies,
 88 |     } satisfies CreateData,
 89 |   })
 90 |   const languageId = ['vue', 'javascript', 'typescript']
 91 |   const getSyncUris = () =>
 92 |     Object.keys(store.files).map((filename) => Uri.parse(`file:///${filename}`))
 93 | 
 94 |   const { dispose: disposeMarkers } = volar.activateMarkers(
 95 |     worker,
 96 |     languageId,
 97 |     'vue',
 98 |     getSyncUris,
 99 |     editor,
100 |   )
101 |   const { dispose: disposeAutoInsertion } = volar.activateAutoInsertion(
102 |     worker,
103 |     languageId,
104 |     getSyncUris,
105 |     editor,
106 |   )
107 |   const { dispose: disposeProvides } = await volar.registerProviders(
108 |     worker,
109 |     languageId,
110 |     getSyncUris,
111 |     languages,
112 |   )
113 | 
114 |   disposeVue = () => {
115 |     disposeMarkers()
116 |     disposeAutoInsertion()
117 |     disposeProvides()
118 |   }
119 | }
120 | 
121 | export interface WorkerMessage {
122 |   event: 'init'
123 |   tsVersion: string
124 |   tsLocale?: string
125 | }
126 | 
127 | export function loadMonacoEnv(store: Store) {
128 |   ;(self as any).MonacoEnvironment = {
129 |     async getWorker(_: any, label: string) {
130 |       if (label === 'vue') {
131 |         const worker = new vueWorker()
132 |         const init = new Promise<void>((resolve) => {
133 |           worker.addEventListener('message', (data) => {
134 |             if (data.data === 'inited') {
135 |               resolve()
136 |             }
137 |           })
138 |           worker.postMessage({
139 |             event: 'init',
140 |             tsVersion: store.typescriptVersion,
141 |             tsLocale: store.locale,
142 |           } satisfies WorkerMessage)
143 |         })
144 |         await init
145 |         return worker
146 |       }
147 |       return new editorWorker()
148 |     },
149 |   }
150 |   languages.register({ id: 'vue', extensions: ['.vue'] })
151 |   languages.register({ id: 'javascript', extensions: ['.js'] })
152 |   languages.register({ id: 'typescript', extensions: ['.ts'] })
153 |   languages.register({ id: 'css', extensions: ['.css'] })
154 |   languages.setLanguageConfiguration('vue', languageConfigs.vue)
155 |   languages.setLanguageConfiguration('javascript', languageConfigs.js)
156 |   languages.setLanguageConfiguration('typescript', languageConfigs.ts)
157 |   languages.setLanguageConfiguration('css', languageConfigs.css)
158 | 
159 |   let languageToolsPromise: Promise<void> | undefined
160 |   store.reloadLanguageTools = debounce(async () => {
161 |     ;(languageToolsPromise ||= reloadLanguageTools(store)).finally(() => {
162 |       languageToolsPromise = undefined
163 |     })
164 |   }, 250)
165 |   languages.onLanguage('vue', () => store.reloadLanguageTools!())
166 | 
167 |   // Support for go to definition
168 |   editor.registerEditorOpener({
169 |     openCodeEditor(_, resource) {
170 |       if (resource.toString().startsWith('file:///node_modules')) {
171 |         return true
172 |       }
173 | 
174 |       const path = resource.path
175 |       if (/^\//.test(path)) {
176 |         const fileName = path.replace('/', '')
177 |         if (fileName !== store.activeFile.filename) {
178 |           store.setActive(fileName)
179 |           return true
180 |         }
181 |       }
182 | 
183 |       return false
184 |     },
185 |   })
186 | }
187 | 


--------------------------------------------------------------------------------
/src/editor/FileSelector.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { injectKeyProps } from '../../src/types'
  3 | import { importMapFile, stripSrcPrefix, tsconfigFile } from '../store'
  4 | import { type VNode, computed, inject, ref, useTemplateRef } from 'vue'
  5 | 
  6 | const { store, showTsConfig, showImportMap } = inject(injectKeyProps)!
  7 | 
  8 | /**
  9 |  * When `true`: indicates adding a new file
 10 |  * When `string`: indicates renaming a file, and holds the old filename in case
 11 |  * of cancel.
 12 |  */
 13 | const pending = ref<boolean | string>(false)
 14 | /**
 15 |  * Text shown in the input box when editing a file's name
 16 |  * This is a display name so it should always strip off the `src/` prefix.
 17 |  */
 18 | const pendingFilename = ref('Comp.vue')
 19 | 
 20 | const files = computed(() =>
 21 |   Object.entries(store.value.files)
 22 |     .filter(
 23 |       ([name, file]) =>
 24 |         name !== importMapFile && name !== tsconfigFile && !file.hidden,
 25 |     )
 26 |     .map(([name]) => name),
 27 | )
 28 | 
 29 | function startAddFile() {
 30 |   let i = 0
 31 |   let name = `Comp.vue`
 32 | 
 33 |   while (true) {
 34 |     let hasConflict = false
 35 |     for (const filename in store.value.files) {
 36 |       if (stripSrcPrefix(filename) === name) {
 37 |         hasConflict = true
 38 |         name = `Comp${++i}.vue`
 39 |         break
 40 |       }
 41 |     }
 42 |     if (!hasConflict) {
 43 |       break
 44 |     }
 45 |   }
 46 | 
 47 |   pendingFilename.value = name
 48 |   pending.value = true
 49 | }
 50 | 
 51 | function cancelNameFile() {
 52 |   pending.value = false
 53 | }
 54 | 
 55 | function focus({ el }: VNode) {
 56 |   ;(el as HTMLInputElement).focus()
 57 | }
 58 | 
 59 | function doneNameFile() {
 60 |   if (!pending.value) return
 61 |   if (!pendingFilename.value) {
 62 |     pending.value = false
 63 |     return
 64 |   }
 65 | 
 66 |   // add back the src prefix
 67 |   const filename = 'src/' + pendingFilename.value
 68 |   const oldFilename = pending.value === true ? '' : pending.value
 69 | 
 70 |   if (!/\.(vue|jsx?|tsx?|css|json)$/.test(filename)) {
 71 |     store.value.errors = [
 72 |       `Playground only supports *.vue, *.jsx?, *.tsx?, *.css, *.json files.`,
 73 |     ]
 74 |     return
 75 |   }
 76 | 
 77 |   if (filename !== oldFilename && filename in store.value.files) {
 78 |     store.value.errors = [`File "${filename}" already exists.`]
 79 |     return
 80 |   }
 81 | 
 82 |   store.value.errors = []
 83 |   cancelNameFile()
 84 | 
 85 |   if (filename === oldFilename) {
 86 |     return
 87 |   }
 88 | 
 89 |   if (oldFilename) {
 90 |     store.value.renameFile(oldFilename, filename)
 91 |   } else {
 92 |     store.value.addFile(filename)
 93 |   }
 94 | }
 95 | 
 96 | function editFileName(file: string) {
 97 |   pendingFilename.value = stripSrcPrefix(file)
 98 |   pending.value = file
 99 | }
100 | 
101 | const fileSelector = useTemplateRef('fileSelector')
102 | function horizontalScroll(e: WheelEvent) {
103 |   e.preventDefault()
104 |   const el = fileSelector.value!
105 |   const direction =
106 |     Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY
107 |   const distance = 30 * (direction > 0 ? 1 : -1)
108 |   el.scrollTo({
109 |     left: el.scrollLeft + distance,
110 |   })
111 | }
112 | </script>
113 | 
114 | <template>
115 |   <div
116 |     ref="fileSelector"
117 |     class="file-selector"
118 |     :class="{ 'has-import-map': showImportMap }"
119 |     @wheel="horizontalScroll"
120 |   >
121 |     <template v-for="(file, i) in files" :key="file">
122 |       <div
123 |         v-if="pending !== file"
124 |         class="file"
125 |         :class="{ active: store.activeFile.filename === file }"
126 |         @click="store.setActive(file)"
127 |         @dblclick="i > 0 && editFileName(file)"
128 |       >
129 |         <span class="label">{{ stripSrcPrefix(file) }}</span>
130 |         <span v-if="i > 0" class="remove" @click.stop="store.deleteFile(file)">
131 |           <svg class="icon" width="12" height="12" viewBox="0 0 24 24">
132 |             <line stroke="#999" x1="18" y1="6" x2="6" y2="18" />
133 |             <line stroke="#999" x1="6" y1="6" x2="18" y2="18" />
134 |           </svg>
135 |         </span>
136 |       </div>
137 |       <div
138 |         v-if="(pending === true && i === files.length - 1) || pending === file"
139 |         class="file pending"
140 |         :class="{ active: pending === file }"
141 |       >
142 |         <span class="file pending">{{ pendingFilename }}</span>
143 |         <input
144 |           v-model="pendingFilename"
145 |           spellcheck="false"
146 |           @blur="doneNameFile"
147 |           @keyup.enter="doneNameFile"
148 |           @keyup.esc="cancelNameFile"
149 |           @vue:mounted="focus"
150 |         />
151 |       </div>
152 |     </template>
153 |     <button class="add" @click="startAddFile">+</button>
154 | 
155 |     <div class="import-map-wrapper">
156 |       <div
157 |         v-if="showTsConfig && store.files[tsconfigFile]"
158 |         class="file"
159 |         :class="{ active: store.activeFile.filename === tsconfigFile }"
160 |         @click="store.setActive(tsconfigFile)"
161 |       >
162 |         <span class="label">tsconfig.json</span>
163 |       </div>
164 |       <div
165 |         v-if="showImportMap"
166 |         class="file"
167 |         :class="{ active: store.activeFile.filename === importMapFile }"
168 |         @click="store.setActive(importMapFile)"
169 |       >
170 |         <span class="label">Import Map</span>
171 |       </div>
172 |     </div>
173 |   </div>
174 | </template>
175 | 
176 | <style scoped>
177 | .file-selector {
178 |   display: flex;
179 |   box-sizing: border-box;
180 |   border-bottom: 1px solid var(--border);
181 |   background-color: var(--bg);
182 |   overflow-y: hidden;
183 |   overflow-x: auto;
184 |   white-space: nowrap;
185 |   position: relative;
186 |   height: var(--header-height);
187 | }
188 | 
189 | .file-selector::-webkit-scrollbar {
190 |   height: 1px;
191 | }
192 | 
193 | .file-selector::-webkit-scrollbar-track {
194 |   background-color: var(--border);
195 | }
196 | 
197 | .file-selector::-webkit-scrollbar-thumb {
198 |   background-color: var(--color-branding);
199 | }
200 | 
201 | @-moz-document url-prefix() {
202 |   .file-selector {
203 |     scrollbar-width: thin;
204 |     scrollbar-color: var(--color-branding) var(--border);
205 |   }
206 | }
207 | 
208 | .file-selector.has-import-map .add {
209 |   margin-right: 10px;
210 | }
211 | 
212 | .file {
213 |   position: relative;
214 |   display: inline-block;
215 |   font-size: 13px;
216 |   font-family: var(--font-code);
217 |   cursor: pointer;
218 |   color: var(--text-light);
219 |   box-sizing: border-box;
220 | }
221 | .file.active {
222 |   color: var(--color-branding);
223 |   border-bottom: 3px solid var(--color-branding);
224 |   cursor: text;
225 | }
226 | .file span {
227 |   display: inline-block;
228 |   padding: 8px 10px 6px;
229 |   line-height: 20px;
230 | }
231 | .file.pending span {
232 |   min-width: 50px;
233 |   min-height: 34px;
234 |   padding-right: 32px;
235 |   background-color: rgba(200, 200, 200, 0.2);
236 |   color: transparent;
237 | }
238 | .file.pending input {
239 |   position: absolute;
240 |   inset: 8px 7px auto;
241 |   font-size: 13px;
242 |   font-family: var(--font-code);
243 |   line-height: 20px;
244 |   outline: none;
245 |   border: none;
246 |   padding: 0 3px;
247 |   min-width: 1px;
248 |   color: inherit;
249 |   background-color: transparent;
250 | }
251 | .file .remove {
252 |   display: inline-block;
253 |   vertical-align: middle;
254 |   line-height: 12px;
255 |   cursor: pointer;
256 |   padding-left: 0;
257 | }
258 | .add {
259 |   font-size: 18px;
260 |   font-family: var(--font-code);
261 |   color: #999;
262 |   vertical-align: middle;
263 |   margin-left: 6px;
264 |   position: relative;
265 |   top: -1px;
266 | }
267 | .add:hover {
268 |   color: var(--color-branding);
269 | }
270 | .icon {
271 |   margin-top: -1px;
272 | }
273 | .import-map-wrapper {
274 |   position: sticky;
275 |   margin-left: auto;
276 |   top: 0;
277 |   right: 0;
278 |   padding-left: 30px;
279 |   background-color: var(--bg);
280 |   background: linear-gradient(
281 |     90deg,
282 |     rgba(255, 255, 255, 0) 0%,
283 |     rgba(255, 255, 255, 1) 25%
284 |   );
285 | }
286 | .dark .import-map-wrapper {
287 |   background: linear-gradient(
288 |     90deg,
289 |     rgba(26, 26, 26, 0) 0%,
290 |     rgba(26, 26, 26, 1) 25%
291 |   );
292 | }
293 | </style>
294 | 


--------------------------------------------------------------------------------
/src/output/moduleCompiler.ts:
--------------------------------------------------------------------------------
  1 | import type { File, Store } from '../store'
  2 | import {
  3 |   MagicString,
  4 |   babelParse,
  5 |   extractIdentifiers,
  6 |   isInDestructureAssignment,
  7 |   isStaticProperty,
  8 |   walk,
  9 |   walkIdentifiers,
 10 | } from 'vue/compiler-sfc'
 11 | import type { ExportSpecifier, Identifier, Node } from '@babel/types'
 12 | 
 13 | export function compileModulesForPreview(store: Store, isSSR = false) {
 14 |   const seen = new Set<File>()
 15 |   const processed: string[] = []
 16 |   processFile(store, store.files[store.mainFile], processed, seen, isSSR)
 17 | 
 18 |   if (!isSSR) {
 19 |     // also add css files that are not imported
 20 |     for (const filename in store.files) {
 21 |       if (filename.endsWith('.css')) {
 22 |         const file = store.files[filename]
 23 |         if (!seen.has(file)) {
 24 |           processed.push(
 25 |             `\nwindow.__css__.push(${JSON.stringify(file.compiled.css)})`,
 26 |           )
 27 |         }
 28 |       }
 29 |     }
 30 |   }
 31 | 
 32 |   return processed
 33 | }
 34 | 
 35 | const modulesKey = `__modules__`
 36 | const exportKey = `__export__`
 37 | const dynamicImportKey = `__dynamic_import__`
 38 | const moduleKey = `__module__`
 39 | 
 40 | // similar logic with Vite's SSR transform, except this is targeting the browser
 41 | function processFile(
 42 |   store: Store,
 43 |   file: File,
 44 |   processed: string[],
 45 |   seen: Set<File>,
 46 |   isSSR: boolean,
 47 | ) {
 48 |   if (seen.has(file)) {
 49 |     return []
 50 |   }
 51 |   seen.add(file)
 52 | 
 53 |   if (!isSSR && file.filename.endsWith('.html')) {
 54 |     return processHtmlFile(store, file.code, file.filename, processed, seen)
 55 |   }
 56 | 
 57 |   let {
 58 |     code: js,
 59 |     importedFiles,
 60 |     hasDynamicImport,
 61 |   } = processModule(
 62 |     store,
 63 |     isSSR ? file.compiled.ssr : file.compiled.js,
 64 |     file.filename,
 65 |   )
 66 |   processChildFiles(
 67 |     store,
 68 |     importedFiles,
 69 |     hasDynamicImport,
 70 |     processed,
 71 |     seen,
 72 |     isSSR,
 73 |   )
 74 |   // append css
 75 |   if (file.compiled.css && !isSSR) {
 76 |     js += `\nwindow.__css__.push(${JSON.stringify(file.compiled.css)})`
 77 |   }
 78 | 
 79 |   // push self
 80 |   processed.push(js)
 81 | }
 82 | 
 83 | function processChildFiles(
 84 |   store: Store,
 85 |   importedFiles: Set<string>,
 86 |   hasDynamicImport: boolean,
 87 |   processed: string[],
 88 |   seen: Set<File>,
 89 |   isSSR: boolean,
 90 | ) {
 91 |   if (hasDynamicImport) {
 92 |     // process all files
 93 |     for (const file of Object.values(store.files)) {
 94 |       if (seen.has(file)) continue
 95 |       processFile(store, file, processed, seen, isSSR)
 96 |     }
 97 |   } else if (importedFiles.size > 0) {
 98 |     // crawl child imports
 99 |     for (const imported of importedFiles) {
100 |       processFile(store, store.files[imported], processed, seen, isSSR)
101 |     }
102 |   }
103 | }
104 | 
105 | function processModule(store: Store, src: string, filename: string) {
106 |   const s = new MagicString(src)
107 | 
108 |   const ast = babelParse(src, {
109 |     sourceFilename: filename,
110 |     sourceType: 'module',
111 |   }).program.body
112 | 
113 |   const idToImportMap = new Map<string, string>()
114 |   const declaredConst = new Set<string>()
115 |   const importedFiles = new Set<string>()
116 |   const importToIdMap = new Map<string, string>()
117 | 
118 |   function resolveImport(raw: string): string | undefined {
119 |     const files = store.files
120 |     let resolved = raw
121 |     const file =
122 |       files[resolved] ||
123 |       files[(resolved = raw + '.ts')] ||
124 |       files[(resolved = raw + '.js')]
125 |     return file ? resolved : undefined
126 |   }
127 | 
128 |   function defineImport(node: Node, source: string) {
129 |     const filename = resolveImport(source.replace(/^\.\/+/, 'src/'))
130 |     if (!filename) {
131 |       throw new Error(`File "${source}" does not exist.`)
132 |     }
133 |     if (importedFiles.has(filename)) {
134 |       return importToIdMap.get(filename)!
135 |     }
136 |     importedFiles.add(filename)
137 |     const id = `__import_${importedFiles.size}__`
138 |     importToIdMap.set(filename, id)
139 |     s.appendLeft(
140 |       node.start!,
141 |       `const ${id} = ${modulesKey}[${JSON.stringify(filename)}]\n`,
142 |     )
143 |     return id
144 |   }
145 | 
146 |   function defineExport(name: string, local = name) {
147 |     s.append(`\n${exportKey}(${moduleKey}, "${name}", () => ${local})`)
148 |   }
149 | 
150 |   // 0. instantiate module
151 |   s.prepend(
152 |     `const ${moduleKey} = ${modulesKey}[${JSON.stringify(
153 |       filename,
154 |     )}] = { [Symbol.toStringTag]: "Module" }\n\n`,
155 |   )
156 | 
157 |   // 1. check all import statements and record id -> importName map
158 |   for (const node of ast) {
159 |     // import foo from 'foo' --> foo -> __import_foo__.default
160 |     // import { baz } from 'foo' --> baz -> __import_foo__.baz
161 |     // import * as ok from 'foo' --> ok -> __import_foo__
162 |     if (node.type === 'ImportDeclaration') {
163 |       const source = node.source.value
164 |       if (source.startsWith('./')) {
165 |         const importId = defineImport(node, node.source.value)
166 |         for (const spec of node.specifiers) {
167 |           if (spec.type === 'ImportSpecifier') {
168 |             idToImportMap.set(
169 |               spec.local.name,
170 |               `${importId}.${(spec.imported as Identifier).name}`,
171 |             )
172 |           } else if (spec.type === 'ImportDefaultSpecifier') {
173 |             idToImportMap.set(spec.local.name, `${importId}.default`)
174 |           } else {
175 |             // namespace specifier
176 |             idToImportMap.set(spec.local.name, importId)
177 |           }
178 |         }
179 |         s.remove(node.start!, node.end!)
180 |       }
181 |     }
182 |   }
183 | 
184 |   // 2. check all export statements and define exports
185 |   for (const node of ast) {
186 |     // named exports
187 |     if (node.type === 'ExportNamedDeclaration') {
188 |       if (node.declaration) {
189 |         if (
190 |           node.declaration.type === 'FunctionDeclaration' ||
191 |           node.declaration.type === 'ClassDeclaration'
192 |         ) {
193 |           // export function foo() {}
194 |           defineExport(node.declaration.id!.name)
195 |         } else if (node.declaration.type === 'VariableDeclaration') {
196 |           // export const foo = 1, bar = 2
197 |           for (const decl of node.declaration.declarations) {
198 |             for (const id of extractIdentifiers(decl.id)) {
199 |               defineExport(id.name)
200 |             }
201 |           }
202 |         }
203 |         s.remove(node.start!, node.declaration.start!)
204 |       } else if (node.source && node.source.value.startsWith('./')) {
205 |         // export { foo, bar } from './foo'
206 |         const importId = defineImport(node, node.source.value)
207 |         for (const spec of node.specifiers) {
208 |           defineExport(
209 |             (spec.exported as Identifier).name,
210 |             `${importId}.${(spec as ExportSpecifier).local.name}`,
211 |           )
212 |         }
213 |         s.remove(node.start!, node.end!)
214 |       } else {
215 |         // export { foo, bar }
216 |         for (const spec of node.specifiers) {
217 |           const local = (spec as ExportSpecifier).local.name
218 |           const binding = idToImportMap.get(local)
219 |           defineExport((spec.exported as Identifier).name, binding || local)
220 |         }
221 |         s.remove(node.start!, node.end!)
222 |       }
223 |     }
224 | 
225 |     // default export
226 |     if (node.type === 'ExportDefaultDeclaration') {
227 |       if ('id' in node.declaration && node.declaration.id) {
228 |         // named hoistable/class exports
229 |         // export default function foo() {}
230 |         // export default class A {}
231 |         const { name } = node.declaration.id
232 |         s.remove(node.start!, node.start! + 15)
233 |         s.append(`\n${exportKey}(${moduleKey}, "default", () => ${name})`)
234 |       } else {
235 |         // anonymous default exports
236 |         s.overwrite(node.start!, node.start! + 14, `${moduleKey}.default =`)
237 |       }
238 |     }
239 | 
240 |     // export * from './foo'
241 |     if (node.type === 'ExportAllDeclaration') {
242 |       const importId = defineImport(node, node.source.value)
243 |       s.remove(node.start!, node.end!)
244 |       s.append(`\nfor (const key in ${importId}) {
245 |         if (key !== 'default') {
246 |           ${exportKey}(${moduleKey}, key, () => ${importId}[key])
247 |         }
248 |       }`)
249 |     }
250 |   }
251 | 
252 |   // 3. convert references to import bindings
253 |   for (const node of ast) {
254 |     if (node.type === 'ImportDeclaration') continue
255 |     walkIdentifiers(node, (id, parent, parentStack) => {
256 |       const binding = idToImportMap.get(id.name)
257 |       if (!binding) {
258 |         return
259 |       }
260 |       if (parent && isStaticProperty(parent) && parent.shorthand) {
261 |         // let binding used in a property shorthand
262 |         // { foo } -> { foo: __import_x__.foo }
263 |         // skip for destructure patterns
264 |         if (
265 |           !(parent as any).inPattern ||
266 |           isInDestructureAssignment(parent, parentStack)
267 |         ) {
268 |           s.appendLeft(id.end!, `: ${binding}`)
269 |         }
270 |       } else if (
271 |         parent &&
272 |         parent.type === 'ClassDeclaration' &&
273 |         id === parent.superClass
274 |       ) {
275 |         if (!declaredConst.has(id.name)) {
276 |           declaredConst.add(id.name)
277 |           // locate the top-most node containing the class declaration
278 |           const topNode = parentStack[1]
279 |           s.prependRight(topNode.start!, `const ${id.name} = ${binding};\n`)
280 |         }
281 |       } else {
282 |         s.overwrite(id.start!, id.end!, binding)
283 |       }
284 |     })
285 |   }
286 | 
287 |   // 4. convert dynamic imports
288 |   let hasDynamicImport = false
289 |   walk(ast, {
290 |     enter(node: Node, parent: Node) {
291 |       if (node.type === 'Import' && parent.type === 'CallExpression') {
292 |         const arg = parent.arguments[0]
293 |         if (arg.type === 'StringLiteral' && arg.value.startsWith('./')) {
294 |           hasDynamicImport = true
295 |           s.overwrite(node.start!, node.start! + 6, dynamicImportKey)
296 |           s.overwrite(
297 |             arg.start!,
298 |             arg.end!,
299 |             JSON.stringify(arg.value.replace(/^\.\/+/, 'src/')),
300 |           )
301 |         }
302 |       }
303 |     },
304 |   })
305 | 
306 |   return {
307 |     code: s.toString(),
308 |     importedFiles,
309 |     hasDynamicImport,
310 |   }
311 | }
312 | 
313 | const scriptRE = /<script\b(?:\s[^>]*>|>)([^]*?)<\/script>/gi
314 | const scriptModuleRE =
315 |   /<script\b[^>]*type\s*=\s*(?:"module"|'module')[^>]*>([^]*?)<\/script>/gi
316 | 
317 | function processHtmlFile(
318 |   store: Store,
319 |   src: string,
320 |   filename: string,
321 |   processed: string[],
322 |   seen: Set<File>,
323 | ) {
324 |   const deps: string[] = []
325 |   let jsCode = ''
326 |   const html = src
327 |     .replace(scriptModuleRE, (_, content) => {
328 |       const { code, importedFiles, hasDynamicImport } = processModule(
329 |         store,
330 |         content,
331 |         filename,
332 |       )
333 |       processChildFiles(
334 |         store,
335 |         importedFiles,
336 |         hasDynamicImport,
337 |         deps,
338 |         seen,
339 |         false,
340 |       )
341 |       jsCode += '\n' + code
342 |       return ''
343 |     })
344 |     .replace(scriptRE, (_, content) => {
345 |       jsCode += '\n' + content
346 |       return ''
347 |     })
348 |   processed.push(`document.body.innerHTML = ${JSON.stringify(html)}`)
349 |   processed.push(...deps)
350 |   processed.push(jsCode)
351 | }
352 | 


--------------------------------------------------------------------------------
/src/monaco/vue.worker.ts:
--------------------------------------------------------------------------------
  1 | import { createNpmFileSystem } from '@volar/jsdelivr'
  2 | import {
  3 |   type LanguageServiceEnvironment,
  4 |   createTypeScriptWorkerLanguageService,
  5 |   Language,
  6 | } from '@volar/monaco/worker'
  7 | import {
  8 |   type VueCompilerOptions,
  9 |   VueVirtualCode,
 10 |   createVueLanguagePlugin,
 11 |   getDefaultCompilerOptions,
 12 |   generateGlobalTypes,
 13 |   getGlobalTypesFileName,
 14 | } from '@vue/language-core'
 15 | import {
 16 |   LanguageService,
 17 |   createVueLanguageServicePlugins,
 18 | } from '@vue/language-service'
 19 | import type * as monaco from 'monaco-editor-core'
 20 | // @ts-expect-error
 21 | import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker'
 22 | import { create as createTypeScriptDirectiveCommentPlugin } from 'volar-service-typescript/lib/plugins/directiveComment'
 23 | import { create as createTypeScriptSemanticPlugin } from 'volar-service-typescript/lib/plugins/semantic'
 24 | import { URI } from 'vscode-uri'
 25 | import type { WorkerHost, WorkerMessage } from './env'
 26 | 
 27 | import { createVueLanguageServiceProxy } from '@vue/typescript-plugin/lib/common'
 28 | import { getComponentDirectives } from '@vue/typescript-plugin/lib/requests/getComponentDirectives'
 29 | import { getComponentEvents } from '@vue/typescript-plugin/lib/requests/getComponentEvents'
 30 | import { getComponentNames } from '@vue/typescript-plugin/lib/requests/getComponentNames'
 31 | import { getComponentProps } from '@vue/typescript-plugin/lib/requests/getComponentProps'
 32 | import { getComponentSlots } from '@vue/typescript-plugin/lib/requests/getComponentSlots'
 33 | import { getElementAttrs } from '@vue/typescript-plugin/lib/requests/getElementAttrs'
 34 | import { getElementNames } from '@vue/typescript-plugin/lib/requests/getElementNames'
 35 | import { isRefAtPosition } from '@vue/typescript-plugin/lib/requests/isRefAtPosition'
 36 | 
 37 | export interface CreateData {
 38 |   tsconfig: {
 39 |     compilerOptions?: import('typescript').CompilerOptions
 40 |     vueCompilerOptions?: Partial<VueCompilerOptions>
 41 |   }
 42 |   dependencies: Record<string, string>
 43 | }
 44 | 
 45 | const asFileName = (uri: URI) => uri.path
 46 | const asUri = (fileName: string): URI => URI.file(fileName)
 47 | 
 48 | let ts: typeof import('typescript')
 49 | let locale: string | undefined
 50 | 
 51 | self.onmessage = async (msg: MessageEvent<WorkerMessage>) => {
 52 |   if (msg.data?.event === 'init') {
 53 |     locale = msg.data.tsLocale
 54 |     ts = await importTsFromCdn(msg.data.tsVersion)
 55 |     self.postMessage('inited')
 56 |     return
 57 |   }
 58 | 
 59 |   worker.initialize(
 60 |     (
 61 |       ctx: monaco.worker.IWorkerContext<WorkerHost>,
 62 |       { tsconfig, dependencies }: CreateData,
 63 |     ) => {
 64 |       const env: LanguageServiceEnvironment = {
 65 |         workspaceFolders: [URI.file('/')],
 66 |         locale,
 67 |         fs: createNpmFileSystem(
 68 |           (uri) => {
 69 |             if (uri.scheme === 'file') {
 70 |               if (uri.path === '/node_modules') {
 71 |                 return ''
 72 |               } else if (uri.path.startsWith('/node_modules/')) {
 73 |                 return uri.path.slice('/node_modules/'.length)
 74 |               }
 75 |             }
 76 |           },
 77 |           (pkgName) => dependencies[pkgName],
 78 |           (path, content) => {
 79 |             ctx.host.onFetchCdnFile(
 80 |               asUri('/node_modules/' + path).toString(),
 81 |               content,
 82 |             )
 83 |           },
 84 |         ),
 85 |       }
 86 | 
 87 |       const { options: compilerOptions } = ts.convertCompilerOptionsFromJson(
 88 |         tsconfig?.compilerOptions || {},
 89 |         '',
 90 |       )
 91 |       const vueCompilerOptions: VueCompilerOptions = {
 92 |         ...getDefaultCompilerOptions(),
 93 |         ...tsconfig.vueCompilerOptions,
 94 |       }
 95 |       setupGlobalTypes(vueCompilerOptions, env)
 96 | 
 97 |       const workerService = createTypeScriptWorkerLanguageService({
 98 |         typescript: ts,
 99 |         compilerOptions,
100 |         workerContext: ctx,
101 |         env,
102 |         uriConverter: {
103 |           asFileName,
104 |           asUri,
105 |         },
106 |         languagePlugins: [
107 |           createVueLanguagePlugin(
108 |             ts,
109 |             compilerOptions,
110 |             vueCompilerOptions,
111 |             asFileName,
112 |           ),
113 |         ],
114 |         languageServicePlugins: [
115 |           ...getTsLanguageServicePlugins(),
116 |           ...getVueLanguageServicePlugins(),
117 |         ],
118 |       })
119 | 
120 |       return workerService
121 | 
122 |       function setupGlobalTypes(
123 |         options: VueCompilerOptions,
124 |         env: LanguageServiceEnvironment,
125 |       ) {
126 |         const globalTypes = generateGlobalTypes(options)
127 |         const globalTypesPath =
128 |           '/node_modules/' + getGlobalTypesFileName(options)
129 |         options.globalTypesPath = () => globalTypesPath
130 |         const { stat, readFile } = env.fs!
131 |         const ctime = Date.now()
132 |         env.fs!.stat = async (uri) => {
133 |           if (uri.path === globalTypesPath) {
134 |             return {
135 |               type: 1,
136 |               ctime: ctime,
137 |               mtime: ctime,
138 |               size: globalTypes.length,
139 |             }
140 |           }
141 |           return stat(uri)
142 |         }
143 |         env.fs!.readFile = async (uri) => {
144 |           if (uri.path === globalTypesPath) {
145 |             return globalTypes
146 |           }
147 |           return readFile(uri)
148 |         }
149 |       }
150 | 
151 |       function getTsLanguageServicePlugins() {
152 |         const semanticPlugin = createTypeScriptSemanticPlugin(ts)
153 |         const { create } = semanticPlugin
154 |         semanticPlugin.create = (context) => {
155 |           const created = create(context)
156 |           const ls = created.provide[
157 |             'typescript/languageService'
158 |           ]() as import('typescript').LanguageService
159 |           const proxy = createVueLanguageServiceProxy(
160 |             ts,
161 |             new Proxy(
162 |               {},
163 |               {
164 |                 get(_target, prop, receiver) {
165 |                   return Reflect.get(context.language, prop, receiver)
166 |                 },
167 |               },
168 |             ) as unknown as Language,
169 |             ls,
170 |             vueCompilerOptions,
171 |             asUri,
172 |           )
173 |           ls.getCompletionsAtPosition = proxy.getCompletionsAtPosition
174 |           ls.getCompletionEntryDetails = proxy.getCompletionEntryDetails
175 |           ls.getCodeFixesAtPosition = proxy.getCodeFixesAtPosition
176 |           ls.getDefinitionAndBoundSpan = proxy.getDefinitionAndBoundSpan
177 |           ls.getQuickInfoAtPosition = proxy.getQuickInfoAtPosition
178 |           return created
179 |         }
180 |         return [semanticPlugin, createTypeScriptDirectiveCommentPlugin()]
181 |       }
182 | 
183 |       function getVueLanguageServicePlugins() {
184 |         const plugins = createVueLanguageServicePlugins(ts, {
185 |           getComponentDirectives(fileName) {
186 |             return getComponentDirectives(ts, getProgram(), fileName)
187 |           },
188 |           getComponentEvents(fileName, tag) {
189 |             return getComponentEvents(ts, getProgram(), fileName, tag)
190 |           },
191 |           getComponentNames(fileName) {
192 |             return getComponentNames(ts, getProgram(), fileName)
193 |           },
194 |           getComponentProps(fileName, tag) {
195 |             return getComponentProps(ts, getProgram(), fileName, tag)
196 |           },
197 |           getComponentSlots(fileName) {
198 |             const { virtualCode } = getVirtualCode(fileName)
199 |             return getComponentSlots(ts, getProgram(), virtualCode)
200 |           },
201 |           getElementAttrs(fileName, tag) {
202 |             return getElementAttrs(ts, getProgram(), fileName, tag)
203 |           },
204 |           getElementNames(fileName) {
205 |             return getElementNames(ts, getProgram(), fileName)
206 |           },
207 |           isRefAtPosition(fileName, position) {
208 |             const { sourceScript, virtualCode } = getVirtualCode(fileName)
209 |             return isRefAtPosition(
210 |               ts,
211 |               getLanguageService().context.language,
212 |               getProgram(),
213 |               sourceScript,
214 |               virtualCode,
215 |               position,
216 |             )
217 |           },
218 |           async getQuickInfoAtPosition(fileName, position) {
219 |             const uri = asUri(fileName)
220 |             const sourceScript =
221 |               getLanguageService().context.language.scripts.get(uri)
222 |             if (!sourceScript) {
223 |               return
224 |             }
225 |             const hover = await getLanguageService().getHover(uri, position)
226 |             let text = ''
227 |             if (typeof hover?.contents === 'string') {
228 |               text = hover.contents
229 |             } else if (Array.isArray(hover?.contents)) {
230 |               text = hover.contents
231 |                 .map((c) => (typeof c === 'string' ? c : c.value))
232 |                 .join('\n')
233 |             } else if (hover) {
234 |               text = hover.contents.value
235 |             }
236 |             text = text.replace(/```typescript/g, '')
237 |             text = text.replace(/```/g, '')
238 |             text = text.replace(/---/g, '')
239 |             text = text.trim()
240 |             while (true) {
241 |               const newText = text.replace(/\n\n/g, '\n')
242 |               if (newText === text) {
243 |                 break
244 |               }
245 |               text = newText
246 |             }
247 |             text = text.replace(/\n/g, ' | ')
248 |             return text
249 |           },
250 |           collectExtractProps() {
251 |             throw new Error('Not implemented')
252 |           },
253 |           getImportPathForFile() {
254 |             throw new Error('Not implemented')
255 |           },
256 |           getDocumentHighlights() {
257 |             throw new Error('Not implemented')
258 |           },
259 |           getEncodedSemanticClassifications() {
260 |             throw new Error('Not implemented')
261 |           },
262 |           getReactiveReferences() {
263 |             throw new Error('Not implemented')
264 |           },
265 |         })
266 |         const ignoreVueServicePlugins = new Set([
267 |           'vue-extract-file',
268 |           'vue-document-drop',
269 |           'vue-document-highlights',
270 |           'typescript-semantic-tokens',
271 |         ])
272 |         return plugins.filter(
273 |           (plugin) => !ignoreVueServicePlugins.has(plugin.name!),
274 |         )
275 | 
276 |         function getVirtualCode(fileName: string) {
277 |           const uri = asUri(fileName)
278 |           const sourceScript =
279 |             getLanguageService().context.language.scripts.get(uri)
280 |           if (!sourceScript) {
281 |             throw new Error('No source script found for file: ' + fileName)
282 |           }
283 |           const virtualCode = sourceScript.generated?.root
284 |           if (!(virtualCode instanceof VueVirtualCode)) {
285 |             throw new Error('No virtual code found for file: ' + fileName)
286 |           }
287 |           return {
288 |             sourceScript,
289 |             virtualCode,
290 |           }
291 |         }
292 | 
293 |         function getProgram() {
294 |           const tsService: import('typescript').LanguageService =
295 |             getLanguageService().context.inject('typescript/languageService')
296 |           return tsService.getProgram()!
297 |         }
298 | 
299 |         function getLanguageService() {
300 |           return (workerService as any).languageService as LanguageService
301 |         }
302 |       }
303 |     },
304 |   )
305 | }
306 | 
307 | async function importTsFromCdn(tsVersion: string) {
308 |   const _module = globalThis.module
309 |   ;(globalThis as any).module = { exports: {} }
310 |   const tsUrl = `https://cdn.jsdelivr.net/npm/typescript@${tsVersion}/lib/typescript.js`
311 |   await import(/* @vite-ignore */ tsUrl)
312 |   const ts = globalThis.module.exports
313 |   globalThis.module = _module
314 |   return ts as typeof import('typescript')
315 | }
316 | 


--------------------------------------------------------------------------------
/src/output/Sandbox.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import Message from '../Message.vue'
  3 | import {
  4 |   type WatchStopHandle,
  5 |   inject,
  6 |   onMounted,
  7 |   onUnmounted,
  8 |   ref,
  9 |   toRefs,
 10 |   useTemplateRef,
 11 |   watch,
 12 |   watchEffect,
 13 | } from 'vue'
 14 | import srcdoc from './srcdoc.html?raw'
 15 | import { PreviewProxy } from './PreviewProxy'
 16 | import { compileModulesForPreview } from './moduleCompiler'
 17 | import type { Store } from '../store'
 18 | import { injectKeyProps } from '../types'
 19 | import { getVersions, isVaporSupported } from '../import-map'
 20 | 
 21 | export interface SandboxProps {
 22 |   store: Store
 23 |   show?: boolean
 24 |   ssr?: boolean
 25 |   clearConsole?: boolean
 26 |   theme?: 'dark' | 'light'
 27 |   previewOptions?: {
 28 |     headHTML?: string
 29 |     bodyHTML?: string
 30 |     placeholderHTML?: string
 31 |     customCode?: {
 32 |       importCode?: string
 33 |       useCode?: string
 34 |     }
 35 |     showRuntimeError?: boolean
 36 |     showRuntimeWarning?: boolean
 37 |   }
 38 |   /** @default true */
 39 |   autoStoreInit?: boolean
 40 | }
 41 | 
 42 | const props = withDefaults(defineProps<SandboxProps>(), {
 43 |   show: true,
 44 |   ssr: false,
 45 |   theme: 'light',
 46 |   clearConsole: true,
 47 |   previewOptions: () => ({}),
 48 |   autoStoreInit: true,
 49 | })
 50 | const { store, theme, clearConsole, previewOptions } = toRefs(props)
 51 | 
 52 | const keyProps = inject(injectKeyProps)
 53 | if (keyProps === undefined && props.autoStoreInit) {
 54 |   props.store?.init?.()
 55 | }
 56 | 
 57 | const containerRef = useTemplateRef('container')
 58 | const runtimeError = ref<string>()
 59 | const runtimeWarning = ref<string>()
 60 | 
 61 | let sandbox: HTMLIFrameElement
 62 | let proxy: PreviewProxy
 63 | let stopUpdateWatcher: WatchStopHandle | undefined
 64 | 
 65 | // create sandbox on mount
 66 | onMounted(createSandbox)
 67 | 
 68 | // reset sandbox when import map changes
 69 | watch(
 70 |   () => store.value.getImportMap(),
 71 |   () => {
 72 |     try {
 73 |       createSandbox()
 74 |     } catch (e: any) {
 75 |       store.value.errors = [e as Error]
 76 |       return
 77 |     }
 78 |   },
 79 | )
 80 | 
 81 | function switchPreviewTheme() {
 82 |   const html = sandbox.contentDocument?.documentElement
 83 |   if (html) {
 84 |     html.className = theme.value
 85 |   } else {
 86 |     // re-create sandbox
 87 |     createSandbox()
 88 |   }
 89 | }
 90 | 
 91 | watch(theme, switchPreviewTheme)
 92 | 
 93 | onUnmounted(() => {
 94 |   proxy.destroy()
 95 |   stopUpdateWatcher && stopUpdateWatcher()
 96 | })
 97 | 
 98 | function createSandbox() {
 99 |   if (sandbox) {
100 |     // clear prev sandbox
101 |     proxy.destroy()
102 |     stopUpdateWatcher && stopUpdateWatcher()
103 |     containerRef.value?.removeChild(sandbox)
104 |   }
105 | 
106 |   sandbox = document.createElement('iframe')
107 |   sandbox.setAttribute(
108 |     'sandbox',
109 |     [
110 |       'allow-forms',
111 |       'allow-modals',
112 |       'allow-pointer-lock',
113 |       'allow-popups',
114 |       'allow-same-origin',
115 |       'allow-scripts',
116 |       'allow-top-navigation-by-user-activation',
117 |     ].join(' '),
118 |   )
119 | 
120 |   const importMap = store.value.getImportMap()
121 |   const sandboxSrc = srcdoc
122 |     .replace(/<html>/, `<html class="${theme.value}">`)
123 |     .replace(/<!--IMPORT_MAP-->/, JSON.stringify(importMap))
124 |     .replace(
125 |       /<!-- PREVIEW-OPTIONS-HEAD-HTML -->/,
126 |       previewOptions.value?.headHTML || '',
127 |     )
128 |     .replace(
129 |       /<!--PREVIEW-OPTIONS-PLACEHOLDER-HTML-->/,
130 |       previewOptions.value?.placeholderHTML || '',
131 |     )
132 |   sandbox.srcdoc = sandboxSrc
133 |   containerRef.value?.appendChild(sandbox)
134 | 
135 |   proxy = new PreviewProxy(sandbox, {
136 |     on_fetch_progress: (progress: any) => {
137 |       // pending_imports = progress;
138 |     },
139 |     on_error: (event: any) => {
140 |       const msg =
141 |         event.value instanceof Error ? event.value.message : event.value
142 |       if (
143 |         msg.includes('Failed to resolve module specifier') ||
144 |         msg.includes('Error resolving module specifier')
145 |       ) {
146 |         runtimeError.value =
147 |           msg.replace(/\. Relative references must.*$/, '') +
148 |           `.\nTip: edit the "Import Map" tab to specify import paths for dependencies.`
149 |       } else {
150 |         runtimeError.value = event.value
151 |       }
152 |     },
153 |     on_unhandled_rejection: (event: any) => {
154 |       let error = event.value
155 |       if (typeof error === 'string') {
156 |         error = { message: error }
157 |       }
158 |       runtimeError.value = 'Uncaught (in promise): ' + error.message
159 |     },
160 |     on_console: (log: any) => {
161 |       if (log.duplicate) {
162 |         return
163 |       }
164 |       if (log.level === 'error') {
165 |         if (log.args[0] instanceof Error) {
166 |           runtimeError.value = log.args[0].message
167 |         } else {
168 |           runtimeError.value = log.args[0]
169 |         }
170 |       } else if (log.level === 'warn') {
171 |         if (log.args[0].toString().includes('[Vue warn]')) {
172 |           runtimeWarning.value = log.args
173 |             .join('')
174 |             .replace(/\[Vue warn\]:/, '')
175 |             .trim()
176 |         }
177 |       }
178 |     },
179 |     on_console_group: (action: any) => {
180 |       // group_logs(action.label, false);
181 |     },
182 |     on_console_group_end: () => {
183 |       // ungroup_logs();
184 |     },
185 |     on_console_group_collapsed: (action: any) => {
186 |       // group_logs(action.label, true);
187 |     },
188 |   })
189 | 
190 |   sandbox.addEventListener('load', () => {
191 |     proxy.handle_links()
192 |     stopUpdateWatcher = watchEffect(updatePreview)
193 |     switchPreviewTheme()
194 |   })
195 | }
196 | 
197 | async function updatePreview() {
198 |   if (import.meta.env.PROD && clearConsole.value) {
199 |     console.clear()
200 |   }
201 |   runtimeError.value = undefined
202 |   runtimeWarning.value = undefined
203 | 
204 |   let isSSR = props.ssr
205 |   if (store.value.vueVersion) {
206 |     const [major, minor, patch] = getVersions(store.value.vueVersion)
207 |     if (major === 3 && (minor < 2 || (minor === 2 && patch < 27))) {
208 |       alert(
209 |         `The selected version of Vue (${store.value.vueVersion}) does not support in-browser SSR.` +
210 |           ` Rendering in client mode instead.`,
211 |       )
212 |       isSSR = false
213 |     }
214 |   }
215 | 
216 |   const vaporSupported = isVaporSupported(
217 |     store.value.vueVersion || store.value.compiler?.version
218 |   )
219 | 
220 |   try {
221 |     const { mainFile } = store.value
222 | 
223 |     // if SSR, generate the SSR bundle and eval it to render the HTML
224 |     if (isSSR && mainFile.endsWith('.vue')) {
225 |       const ssrModules = compileModulesForPreview(store.value, true)
226 |       console.info(
227 |         `[@vue/repl] successfully compiled ${ssrModules.length} modules for SSR.`,
228 |       )
229 |       store.value.ssrOutput.html = store.value.ssrOutput.context = ''
230 |       const response = await proxy.eval([
231 |         `const __modules__ = {};`,
232 |         ...ssrModules,
233 |         `import { renderToString as _renderToString } from 'vue/server-renderer'
234 |          import { createSSRApp as _createApp ${vaporSupported ? ', createVaporSSRApp as _createVaporApp' : ''} } from 'vue'
235 |          const AppComponent = __modules__["${mainFile}"].default
236 |          AppComponent.name = 'Repl'
237 |          const vaporSupported = ${vaporSupported}
238 |          const app = (vaporSupported && AppComponent.__vapor ? _createVaporApp : _createApp)(AppComponent)
239 |          if (!app.config.hasOwnProperty('unwrapInjectedRef')) {
240 |            app.config.unwrapInjectedRef = true
241 |          }
242 |          app.config.warnHandler = () => {}
243 |          const rawContext = {}
244 |          window.__ssr_promise__ = _renderToString(app, rawContext).then(html => {
245 |            document.body.innerHTML = '<div id="app">' + html + '</div>' + \`${
246 |              previewOptions.value?.bodyHTML || ''
247 |            }\`
248 |            const safeContext = {}
249 |            const isSafe = (v) =>
250 |              v === null ||
251 |              typeof v === 'boolean' ||
252 |              typeof v === 'string' ||
253 |              Number.isFinite(v)
254 |            const toSafe = (v) => (isSafe(v) ? v : '[' + typeof v + ']')
255 |            for (const prop in rawContext) {
256 |              const value = rawContext[prop]
257 |              safeContext[prop] = isSafe(value)
258 |                ? value
259 |                : Array.isArray(value)
260 |                  ? value.map(toSafe)
261 |                  : typeof value === 'object'
262 |                    ? Object.fromEntries(
263 |                        Object.entries(value).map(([k, v]) => [k, toSafe(v)]),
264 |                      )
265 |                    : toSafe(value)
266 |            }
267 |            return { ssrHtml: html, ssrContext: safeContext }
268 |          }).catch(err => {
269 |            console.error("SSR Error", err)
270 |          })
271 |         `,
272 |       ])
273 | 
274 |       if (response) {
275 |         store.value.ssrOutput.html = String((response as any).ssrHtml ?? '')
276 |         store.value.ssrOutput.context = (response as any).ssrContext || ''
277 |       }
278 |     }
279 | 
280 |     // compile code to simulated module system
281 |     const modules = compileModulesForPreview(store.value)
282 |     console.info(
283 |       `[@vue/repl] successfully compiled ${modules.length} module${
284 |         modules.length > 1 ? `s` : ``
285 |       }.`,
286 |     )
287 | 
288 |     const codeToEval = [
289 |       `window.__modules__ = {};window.__css__ = [];` +
290 |         `if (window.__app__) window.__app__.unmount();` +
291 |         (isSSR
292 |           ? ``
293 |           : `document.body.innerHTML = '<div id="app"></div>' + \`${
294 |               previewOptions.value?.bodyHTML || ''
295 |             }\``),
296 |       ...modules,
297 |       `document.querySelectorAll('style[css]').forEach(el => el.remove())
298 |         document.head.insertAdjacentHTML('beforeend', window.__css__.map(s => \`<style css>\${s}</style>\`).join('\\n'))`,
299 |     ]
300 | 
301 |     // if main file is a vue file, mount it.
302 |     if (mainFile.endsWith('.vue')) {
303 |       codeToEval.push(
304 |         `import { ${isSSR ? `createSSRApp` : `createApp`} as _createApp ${
305 |           vaporSupported
306 |             ? `, ${
307 |                 isSSR ? 'createVaporSSRApp' : 'createVaporApp'
308 |               } as _createVaporApp`
309 |             : ''
310 |         } } from "vue"
311 |         ${previewOptions.value?.customCode?.importCode || ''}
312 |         const _mount = () => {
313 |           const AppComponent = __modules__["${mainFile}"].default
314 |           AppComponent.name = 'Repl'
315 |           const vaporSupported = ${vaporSupported}
316 |           const app = window.__app__ = (vaporSupported && AppComponent.__vapor ? _createVaporApp : _createApp)(AppComponent)
317 |           if (!app.config.hasOwnProperty('unwrapInjectedRef')) {
318 |             app.config.unwrapInjectedRef = true
319 |           }
320 |           app.config.errorHandler = e => console.error(e)
321 |           ${previewOptions.value?.customCode?.useCode || ''}
322 |           app.mount('#app')
323 |         }
324 |         if (window.__ssr_promise__) {
325 |           window.__ssr_promise__.then(_mount)
326 |         } else {
327 |           _mount()
328 |         }`,
329 |       )
330 |     }
331 | 
332 |     // eval code in sandbox
333 |     await proxy.eval(codeToEval)
334 |   } catch (e: any) {
335 |     console.error(e)
336 |     runtimeError.value = (e as Error).message
337 |   }
338 | }
339 | 
340 | /**
341 |  * Reload the preview iframe
342 |  */
343 | function reload() {
344 |   sandbox.contentWindow?.location.reload()
345 | }
346 | 
347 | defineExpose({ reload, container: containerRef })
348 | </script>
349 | 
350 | <template>
351 |   <div
352 |     v-show="props.show"
353 |     ref="container"
354 |     class="iframe-container"
355 |     :class="theme"
356 |   />
357 |   <Message :err="(previewOptions?.showRuntimeError ?? true) && runtimeError" />
358 |   <Message
359 |     v-if="!runtimeError && (previewOptions?.showRuntimeWarning ?? true)"
360 |     :warn="runtimeWarning"
361 |   />
362 | </template>
363 | 
364 | <style scoped>
365 | .iframe-container,
366 | .iframe-container :deep(iframe) {
367 |   width: 100%;
368 |   height: 100%;
369 |   border: none;
370 |   background-color: #fff;
371 | }
372 | .iframe-container.dark :deep(iframe) {
373 |   background-color: #1e1e1e;
374 | }
375 | </style>
376 | 


--------------------------------------------------------------------------------
/src/transform.ts:
--------------------------------------------------------------------------------
  1 | import type { File, Store } from './store'
  2 | import type {
  3 |   BindingMetadata,
  4 |   CompilerOptions,
  5 |   SFCDescriptor,
  6 | } from 'vue/compiler-sfc'
  7 | import { type Transform, transform } from 'sucrase'
  8 | import hashId from 'hash-sum'
  9 | import { getSourceMap, toVisualizer, trimAnalyzedBindings } from './sourcemap'
 10 | 
 11 | export const COMP_IDENTIFIER = `__sfc__`
 12 | 
 13 | const REGEX_JS = /\.[jt]sx?$/
 14 | function testTs(filename: string | undefined | null) {
 15 |   return !!(filename && /(\.|\b)tsx?$/.test(filename))
 16 | }
 17 | function testJsx(filename: string | undefined | null) {
 18 |   return !!(filename && /(\.|\b)[jt]sx$/.test(filename))
 19 | }
 20 | 
 21 | function transformTS(src: string, isJSX?: boolean) {
 22 |   return transform(src, {
 23 |     transforms: ['typescript', ...(isJSX ? (['jsx'] as Transform[]) : [])],
 24 |     jsxRuntime: 'preserve',
 25 |   }).code
 26 | }
 27 | 
 28 | export async function compileFile(
 29 |   store: Store,
 30 |   { filename, code, compiled }: File,
 31 | ): Promise<(string | Error)[]> {
 32 |   if (!code.trim()) {
 33 |     return []
 34 |   }
 35 | 
 36 |   if (filename.endsWith('.css')) {
 37 |     compiled.css = code
 38 |     return []
 39 |   }
 40 | 
 41 |   if (REGEX_JS.test(filename)) {
 42 |     const isJSX = testJsx(filename)
 43 |     if (testTs(filename)) {
 44 |       code = transformTS(code, isJSX)
 45 |     }
 46 |     if (isJSX) {
 47 |       code = await import('./jsx').then(({ transformJSX }) =>
 48 |         transformJSX(code),
 49 |       )
 50 |     }
 51 |     compiled.js = compiled.ssr = code
 52 |     return []
 53 |   }
 54 | 
 55 |   if (filename.endsWith('.json')) {
 56 |     let parsed
 57 |     try {
 58 |       parsed = JSON.parse(code)
 59 |     } catch (err: any) {
 60 |       console.error(`Error parsing ${filename}`, err.message)
 61 |       return [err.message]
 62 |     }
 63 |     compiled.js = compiled.ssr = `export default ${JSON.stringify(parsed)}`
 64 |     return []
 65 |   }
 66 | 
 67 |   if (!filename.endsWith('.vue')) {
 68 |     return []
 69 |   }
 70 | 
 71 |   const id = hashId(filename)
 72 |   const { errors, descriptor } = store.compiler.parse(code, {
 73 |     filename,
 74 |     sourceMap: true,
 75 |     templateParseOptions: store.sfcOptions?.template?.compilerOptions,
 76 |   })
 77 |   if (errors.length) {
 78 |     return errors
 79 |   }
 80 | 
 81 |   const styleLangs = descriptor.styles.map((s) => s.lang).filter(Boolean)
 82 |   const templateLang = descriptor.template?.lang
 83 |   if (styleLangs.length && templateLang) {
 84 |     return [
 85 |       `lang="${styleLangs.join(
 86 |         ',',
 87 |       )}" pre-processors for <style> and lang="${templateLang}" ` +
 88 |         `for <template> are currently not supported.`,
 89 |     ]
 90 |   } else if (styleLangs.length) {
 91 |     return [
 92 |       `lang="${styleLangs.join(
 93 |         ',',
 94 |       )}" pre-processors for <style> are currently not supported.`,
 95 |     ]
 96 |   } else if (templateLang) {
 97 |     return [
 98 |       `lang="${templateLang}" pre-processors for ` +
 99 |         `<template> are currently not supported.`,
100 |     ]
101 |   }
102 | 
103 |   const scriptLang = descriptor.script?.lang || descriptor.scriptSetup?.lang
104 |   const isTS = testTs(scriptLang)
105 |   const isJSX = testJsx(scriptLang)
106 | 
107 |   if (scriptLang && scriptLang !== 'js' && !isTS && !isJSX) {
108 |     return [`Unsupported lang "${scriptLang}" in <script> blocks.`]
109 |   }
110 | 
111 |   const hasScoped = descriptor.styles.some((s) => s.scoped)
112 |   let clientCode = ''
113 |   let ssrCode = ''
114 |   let ssrScript = ''
115 |   let clientScriptMap: any
116 |   let clientTemplateMap: any
117 |   let ssrScriptMap: any
118 |   let ssrTemplateMap: any
119 | 
120 |   const appendSharedCode = (code: string) => {
121 |     clientCode += code
122 |     ssrCode += code
123 |   }
124 | 
125 |   const ceFilter = store.sfcOptions.script?.customElement || /\.ce\.vue$/
126 |   function isCustomElement(filters: typeof ceFilter): boolean {
127 |     if (typeof filters === 'boolean') {
128 |       return filters
129 |     }
130 |     if (typeof filters === 'function') {
131 |       return filters(filename)
132 |     }
133 |     return filters.test(filename)
134 |   }
135 |   let isCE = isCustomElement(ceFilter)
136 | 
137 |   let clientScript: string
138 |   let bindings: BindingMetadata | undefined
139 |   try {
140 |     const res = await doCompileScript(store, descriptor, id, false, isTS, isJSX, isCE)
141 |     clientScript = res.code
142 |     bindings = res.bindings
143 |     clientScriptMap = res.map
144 |   } catch (e: any) {
145 |     return [e.stack.split('\n').slice(0, 12).join('\n')]
146 |   }
147 | 
148 |   clientCode += clientScript
149 | 
150 |   // script ssr needs to be performed if :
151 |   // 1.using <script setup> where the render fn is inlined.
152 |   // 2.using cssVars, as it do not need to be injected during SSR.
153 |   if (descriptor.scriptSetup || descriptor.cssVars.length > 0) {
154 |     try {
155 |       const ssrScriptResult = await doCompileScript(
156 |         store,
157 |         descriptor,
158 |         id,
159 |         true,
160 |         isTS,
161 |         isJSX,
162 |         isCE
163 |       )
164 |       ssrScript = ssrScriptResult.code
165 |       ssrCode += ssrScript
166 |       ssrScriptMap = ssrScriptResult.map
167 |     } catch (e) {
168 |       ssrCode = `/* SSR compile error: ${e} */`
169 |     }
170 |   } else {
171 |     // the script result will be identical.
172 |     ssrCode += clientScript
173 |   }
174 | 
175 |   // template
176 |   // only need dedicated compilation if not using <script setup>
177 |   if (
178 |     descriptor.template &&
179 |     (!descriptor.scriptSetup ||
180 |       store.sfcOptions?.script?.inlineTemplate === false)
181 |   ) {
182 |     const clientTemplateResult = await doCompileTemplate(
183 |       store,
184 |       descriptor,
185 |       id,
186 |       bindings,
187 |       false,
188 |       isTS,
189 |       isJSX,
190 |     )
191 |     if (clientTemplateResult.errors.length) {
192 |       return clientTemplateResult.errors
193 |     }
194 |     clientCode += `;${clientTemplateResult.code}`
195 |     clientTemplateMap = clientTemplateResult.map
196 | 
197 |     const ssrTemplateResult = await doCompileTemplate(
198 |       store,
199 |       descriptor,
200 |       id,
201 |       bindings,
202 |       true,
203 |       isTS,
204 |       isJSX,
205 |     )
206 |     if (ssrTemplateResult.code) {
207 |       // ssr compile failure is fine
208 |       ssrCode += `;${ssrTemplateResult.code}`
209 |       ssrTemplateMap = ssrTemplateResult.map
210 |     } else {
211 |       ssrCode = `/* SSR compile error: ${ssrTemplateResult.errors[0]} */`
212 |     }
213 |   }
214 | 
215 |   if (isJSX) {
216 |     const { transformJSX } = await import('./jsx')
217 |     clientCode &&= transformJSX(clientCode)
218 |     ssrCode &&= transformJSX(ssrCode)
219 |   }
220 | 
221 |   if (hasScoped) {
222 |     appendSharedCode(
223 |       `\n${COMP_IDENTIFIER}.__scopeId = ${JSON.stringify(`data-v-${id}`)}`,
224 |     )
225 |   }
226 | 
227 |   // styles
228 |   let css = ''
229 |   let styles: string[] = []
230 |   for (const style of descriptor.styles) {
231 |     if (style.module) {
232 |       return [`<style module> is not supported in the playground.`]
233 |     }
234 | 
235 |     const styleResult = await store.compiler.compileStyleAsync({
236 |       ...store.sfcOptions?.style,
237 |       source: style.content,
238 |       filename,
239 |       id,
240 |       scoped: style.scoped,
241 |       modules: !!style.module,
242 |     })
243 |     if (styleResult.errors.length) {
244 |       // postcss uses pathToFileURL which isn't polyfilled in the browser
245 |       // ignore these errors for now
246 |       if (!styleResult.errors[0].message.includes('pathToFileURL')) {
247 |         store.errors = styleResult.errors
248 |       }
249 |       // proceed even if css compile errors
250 |     } else {
251 |       isCE ? styles.push(styleResult.code) : (css += styleResult.code + '\n')
252 |     }
253 |   }
254 |   if (css) {
255 |     compiled.css = css.trim()
256 |   } else {
257 |     compiled.css = isCE
258 |       ? (compiled.css =
259 |           '/* The component style of the custom element will be compiled into the component object */')
260 |       : '/* No <style> tags present */'
261 |   }
262 | 
263 |   if (clientCode || ssrCode) {
264 |     const ceStyles = isCE
265 |       ? `\n${COMP_IDENTIFIER}.styles = ${JSON.stringify(styles)}`
266 |       : ''
267 |     appendSharedCode(
268 |       `\n${COMP_IDENTIFIER}.__file = ${JSON.stringify(filename)}` +
269 |         ceStyles +
270 |         `\nexport default ${COMP_IDENTIFIER}`,
271 |     )
272 |     compiled.js = clientCode.trimStart()
273 |     compiled.ssr = ssrCode.trimStart()
274 |     compiled.clientMap = toVisualizer(
275 |       trimAnalyzedBindings(compiled.js),
276 |       getSourceMap(filename, clientScript, clientScriptMap, clientTemplateMap),
277 |     )
278 |     compiled.ssrMap = toVisualizer(
279 |       trimAnalyzedBindings(compiled.ssr),
280 |       getSourceMap(
281 |         filename,
282 |         ssrScript || clientScript,
283 |         ssrScriptMap,
284 |         ssrTemplateMap,
285 |       ),
286 |     )
287 |   }
288 | 
289 |   return []
290 | }
291 | 
292 | async function doCompileScript(
293 |   store: Store,
294 |   descriptor: SFCDescriptor,
295 |   id: string,
296 |   ssr: boolean,
297 |   isTS: boolean,
298 |   isJSX: boolean,
299 |   isCustomElement: boolean,
300 | ): Promise<{ code: string; bindings: BindingMetadata | undefined; map?: any }> {
301 |   if (descriptor.script || descriptor.scriptSetup) {
302 |     const expressionPlugins: CompilerOptions['expressionPlugins'] = []
303 |     if (isTS) {
304 |       expressionPlugins.push('typescript')
305 |     }
306 |     if (isJSX) {
307 |       expressionPlugins.push('jsx')
308 |     }
309 |     const compiledScript = store.compiler.compileScript(descriptor, {
310 |       inlineTemplate: true,
311 |       ...store.sfcOptions?.script,
312 |       id,
313 |       genDefaultAs: COMP_IDENTIFIER,
314 |       templateOptions: {
315 |         ...store.sfcOptions?.template,
316 |         ssr,
317 |         ssrCssVars: descriptor.cssVars,
318 |         compilerOptions: {
319 |           ...store.sfcOptions?.template?.compilerOptions,
320 |           expressionPlugins,
321 |         },
322 |       },
323 |       customElement: isCustomElement,
324 |     })
325 |     let code = compiledScript.content
326 |     if (isTS) {
327 |       code = await transformTS(code, isJSX)
328 |     }
329 |     if (compiledScript.bindings) {
330 |       code =
331 |         `/* Analyzed bindings: ${JSON.stringify(
332 |           compiledScript.bindings,
333 |           null,
334 |           2,
335 |         )} */\n` + code
336 |     }
337 | 
338 |     return { code, bindings: compiledScript.bindings, map: compiledScript.map }
339 |   } else {
340 |     // @ts-expect-error TODO remove when 3.6 is out
341 |     const vaporFlag = descriptor.vapor ? '__vapor: true' : ''
342 |     return {
343 |       code: `\nconst ${COMP_IDENTIFIER} = { ${vaporFlag} }`,
344 |       bindings: {},
345 |       map: undefined,
346 |     }
347 |   }
348 | }
349 | 
350 | async function doCompileTemplate(
351 |   store: Store,
352 |   descriptor: SFCDescriptor,
353 |   id: string,
354 |   bindingMetadata: BindingMetadata | undefined,
355 |   ssr: boolean,
356 |   isTS: boolean,
357 |   isJSX: boolean,
358 | ) {
359 |   const expressionPlugins: CompilerOptions['expressionPlugins'] = []
360 |   if (isTS) {
361 |     expressionPlugins.push('typescript')
362 |   }
363 |   if (isJSX) {
364 |     expressionPlugins.push('jsx')
365 |   }
366 | 
367 |   const res = store.compiler.compileTemplate({
368 |     isProd: false,
369 |     ...store.sfcOptions?.template,
370 |     // @ts-expect-error TODO remove expect-error after 3.6
371 |     vapor: descriptor.vapor,
372 |     ast: descriptor.template!.ast,
373 |     source: descriptor.template!.content,
374 |     filename: descriptor.filename,
375 |     id,
376 |     scoped: descriptor.styles.some((s) => s.scoped),
377 |     slotted: descriptor.slotted,
378 |     ssr,
379 |     ssrCssVars: descriptor.cssVars,
380 |     compilerOptions: {
381 |       ...store.sfcOptions?.template?.compilerOptions,
382 |       bindingMetadata,
383 |       expressionPlugins,
384 |     },
385 |   })
386 |   let { code, errors, map } = res
387 |   if (errors.length) {
388 |     return { code, map, errors }
389 |   }
390 | 
391 |   const fnName = ssr ? `ssrRender` : `render`
392 | 
393 |   code =
394 |     `\n${code.replace(
395 |       /\nexport (function|const) (render|ssrRender)/,
396 |       `$1 ${fnName}`,
397 |     )}` + `\n${COMP_IDENTIFIER}.${fnName} = ${fnName}`
398 | 
399 |   if (isTS) {
400 |     code = await transformTS(code, isJSX)
401 |   }
402 |   return { code, map, errors: [] }
403 | }
404 | 


--------------------------------------------------------------------------------
/src/codemirror/codemirror.css:
--------------------------------------------------------------------------------
  1 | /* BASICS */
  2 | 
  3 | .CodeMirror {
  4 |   color: var(--symbols);
  5 |   --symbols: #777;
  6 |   --base: #545281;
  7 |   --comment: hsl(210, 25%, 60%);
  8 |   --keyword: #af4ab1;
  9 |   --variable: var(--base);
 10 |   --function: #c25205;
 11 |   --string: #2ba46d;
 12 |   --number: #c25205;
 13 |   --tags: #dd0000;
 14 |   --brackets: var(--comment);
 15 |   --qualifier: #ff6032;
 16 |   --important: var(--string);
 17 |   --attribute: #9c3eda;
 18 |   --property: #6182b8;
 19 | 
 20 |   --selected-bg: #d7d4f0;
 21 |   --selected-bg-non-focus: #d9d9d9;
 22 |   --cursor: #000;
 23 | 
 24 |   direction: ltr;
 25 |   font-family: var(--font-code);
 26 |   height: auto;
 27 | }
 28 | 
 29 | .dark .CodeMirror {
 30 |   color: var(--symbols);
 31 |   --symbols: #89ddff;
 32 |   --base: #a6accd;
 33 |   --comment: #6d6d6d;
 34 |   --keyword: #89ddff;
 35 |   --string: #c3e88d;
 36 |   --variable: #82aaff;
 37 |   --number: #f78c6c;
 38 |   --tags: #f07178;
 39 |   --brackets: var(--symbols);
 40 |   --property: #f07178;
 41 |   --attribute: #c792ea;
 42 |   --cursor: #fff;
 43 | 
 44 |   --selected-bg: rgba(255, 255, 255, 0.1);
 45 |   --selected-bg-non-focus: rgba(255, 255, 255, 0.15);
 46 | }
 47 | 
 48 | /* PADDING */
 49 | 
 50 | .CodeMirror-lines {
 51 |   padding: 4px 0; /* Vertical padding around content */
 52 | }
 53 | .CodeMirror pre {
 54 |   padding: 0 4px; /* Horizontal padding of content */
 55 | }
 56 | 
 57 | .CodeMirror-scrollbar-filler,
 58 | .CodeMirror-gutter-filler {
 59 |   background-color: white; /* The little square between H and V scrollbars */
 60 | }
 61 | 
 62 | /* GUTTER */
 63 | 
 64 | .CodeMirror-gutters {
 65 |   border-right: 1px solid var(--border);
 66 |   background-color: transparent;
 67 |   white-space: nowrap;
 68 | }
 69 | .CodeMirror-linenumber {
 70 |   padding: 0 3px 0 5px;
 71 |   min-width: 20px;
 72 |   text-align: right;
 73 |   color: var(--comment);
 74 |   white-space: nowrap;
 75 |   opacity: 0.6;
 76 | }
 77 | 
 78 | .CodeMirror-guttermarker {
 79 |   color: black;
 80 | }
 81 | .CodeMirror-guttermarker-subtle {
 82 |   color: #999;
 83 | }
 84 | 
 85 | /* FOLD GUTTER */
 86 | 
 87 | .CodeMirror-foldmarker {
 88 |   color: #414141;
 89 |   text-shadow:
 90 |     #ff9966 1px 1px 2px,
 91 |     #ff9966 -1px -1px 2px,
 92 |     #ff9966 1px -1px 2px,
 93 |     #ff9966 -1px 1px 2px;
 94 |   font-family: arial;
 95 |   line-height: 0.3;
 96 |   cursor: pointer;
 97 | }
 98 | .CodeMirror-foldgutter {
 99 |   width: 0.7em;
100 | }
101 | .CodeMirror-foldgutter-open,
102 | .CodeMirror-foldgutter-folded {
103 |   cursor: pointer;
104 | }
105 | .CodeMirror-foldgutter-open:after,
106 | .CodeMirror-foldgutter-folded:after {
107 |   content: '>';
108 |   font-size: 0.8em;
109 |   opacity: 0.8;
110 |   transition: transform 0.2s;
111 |   display: inline-block;
112 |   top: -0.1em;
113 |   position: relative;
114 |   transform: rotate(90deg);
115 | }
116 | .CodeMirror-foldgutter-folded:after {
117 |   transform: none;
118 | }
119 | 
120 | /* CURSOR */
121 | 
122 | .CodeMirror-cursor {
123 |   border-left: 1px solid var(--cursor);
124 |   border-right: none;
125 |   width: 0;
126 | }
127 | /* Shown when moving in bi-directional text */
128 | .CodeMirror div.CodeMirror-secondarycursor {
129 |   border-left: 1px solid silver;
130 | }
131 | .cm-fat-cursor .CodeMirror-cursor {
132 |   width: auto;
133 |   border: 0 !important;
134 |   background: #7e7;
135 | }
136 | .cm-fat-cursor div.CodeMirror-cursors {
137 |   z-index: 1;
138 | }
139 | .cm-fat-cursor-mark {
140 |   background-color: rgba(20, 255, 20, 0.5);
141 |   -webkit-animation: blink 1.06s steps(1) infinite;
142 |   -moz-animation: blink 1.06s steps(1) infinite;
143 |   animation: blink 1.06s steps(1) infinite;
144 | }
145 | .cm-animate-fat-cursor {
146 |   width: auto;
147 |   border: 0;
148 |   -webkit-animation: blink 1.06s steps(1) infinite;
149 |   -moz-animation: blink 1.06s steps(1) infinite;
150 |   animation: blink 1.06s steps(1) infinite;
151 |   background-color: #7e7;
152 | }
153 | @-moz-keyframes blink {
154 |   0% {
155 |   }
156 |   50% {
157 |     background-color: transparent;
158 |   }
159 |   100% {
160 |   }
161 | }
162 | @-webkit-keyframes blink {
163 |   0% {
164 |   }
165 |   50% {
166 |     background-color: transparent;
167 |   }
168 |   100% {
169 |   }
170 | }
171 | @keyframes blink {
172 |   0% {
173 |   }
174 |   50% {
175 |     background-color: transparent;
176 |   }
177 |   100% {
178 |   }
179 | }
180 | 
181 | .cm-tab {
182 |   display: inline-block;
183 |   text-decoration: inherit;
184 | }
185 | 
186 | .CodeMirror-rulers {
187 |   position: absolute;
188 |   left: 0;
189 |   right: 0;
190 |   top: -50px;
191 |   bottom: -20px;
192 |   overflow: hidden;
193 | }
194 | .CodeMirror-ruler {
195 |   border-left: 1px solid #ccc;
196 |   top: 0;
197 |   bottom: 0;
198 |   position: absolute;
199 | }
200 | 
201 | /* DEFAULT THEME */
202 | .cm-s-default.CodeMirror {
203 |   background-color: transparent;
204 | }
205 | .cm-s-default .cm-header {
206 |   color: blue;
207 | }
208 | .cm-s-default .cm-quote {
209 |   color: #090;
210 | }
211 | .cm-negative {
212 |   color: #d44;
213 | }
214 | .cm-positive {
215 |   color: #292;
216 | }
217 | .cm-header,
218 | .cm-strong {
219 |   font-weight: bold;
220 | }
221 | .cm-em {
222 |   font-style: italic;
223 | }
224 | .cm-link {
225 |   text-decoration: underline;
226 | }
227 | .cm-strikethrough {
228 |   text-decoration: line-through;
229 | }
230 | 
231 | .cm-s-default .cm-atom,
232 | .cm-s-default .cm-def,
233 | .cm-s-default .cm-variable-2,
234 | .cm-s-default .cm-variable-3,
235 | .cm-s-default .cm-punctuation {
236 |   color: var(--base);
237 | }
238 | .cm-s-default .cm-property {
239 |   color: var(--property);
240 | }
241 | .cm-s-default .cm-hr,
242 | .cm-s-default .cm-comment {
243 |   color: var(--comment);
244 | }
245 | .cm-s-default .cm-attribute {
246 |   color: var(--attribute);
247 | }
248 | .cm-s-default .cm-keyword {
249 |   color: var(--keyword);
250 | }
251 | .cm-s-default .cm-variable {
252 |   color: var(--variable);
253 | }
254 | .cm-s-default .cm-tag {
255 |   color: var(--tags);
256 | }
257 | .cm-s-default .cm-bracket {
258 |   color: var(--brackets);
259 | }
260 | .cm-s-default .cm-number {
261 |   color: var(--number);
262 | }
263 | .cm-s-default .cm-string,
264 | .cm-s-default .cm-string-2 {
265 |   color: var(--string);
266 | }
267 | .cm-s-default .cm-type {
268 |   color: rgb(255, 208, 0);
269 | }
270 | .cm-s-default .cm-meta {
271 |   color: #555;
272 | }
273 | .cm-s-default .cm-qualifier {
274 |   color: var(--qualifier);
275 | }
276 | .cm-s-default .cm-builtin {
277 |   color: #7539ff;
278 | }
279 | .cm-s-default .cm-link {
280 |   color: var(--flash);
281 | }
282 | .cm-s-default .cm-error {
283 |   color: #ff008c;
284 | }
285 | .cm-invalidchar {
286 |   color: #ff008c;
287 | }
288 | 
289 | .CodeMirror-composing {
290 |   border-bottom: 2px solid;
291 | }
292 | 
293 | /* Default styles for common addons */
294 | 
295 | div.CodeMirror span.CodeMirror-matchingbracket {
296 |   color: #0b0;
297 | }
298 | div.CodeMirror span.CodeMirror-nonmatchingbracket {
299 |   color: #a22;
300 | }
301 | .CodeMirror-matchingtag {
302 |   background: rgba(255, 150, 0, 0.3);
303 | }
304 | .CodeMirror-activeline-background {
305 |   background: #e8f2ff;
306 | }
307 | 
308 | /* STOP */
309 | 
310 | /* The rest of this file contains styles related to the mechanics of
311 |    the editor. You probably shouldn't touch them. */
312 | 
313 | .CodeMirror {
314 |   position: relative;
315 |   overflow: hidden;
316 |   background: white;
317 | }
318 | 
319 | .CodeMirror-scroll {
320 |   overflow: scroll !important; /* Things will break if this is overridden */
321 |   /* 30px is the magic margin used to hide the element's real scrollbars */
322 |   /* See overflow: hidden in .CodeMirror */
323 |   margin-bottom: -30px;
324 |   margin-right: -30px;
325 |   padding-bottom: 30px;
326 |   height: 100%;
327 |   outline: none; /* Prevent dragging from highlighting the element */
328 |   position: relative;
329 | }
330 | .CodeMirror-sizer {
331 |   position: relative;
332 |   border-right: 30px solid transparent;
333 | }
334 | 
335 | /* The fake, visible scrollbars. Used to force redraw during scrolling
336 |    before actual scrolling happens, thus preventing shaking and
337 |    flickering artifacts. */
338 | .CodeMirror-vscrollbar,
339 | .CodeMirror-hscrollbar,
340 | .CodeMirror-scrollbar-filler,
341 | .CodeMirror-gutter-filler {
342 |   position: absolute;
343 |   z-index: 6;
344 |   display: none;
345 | }
346 | .CodeMirror-vscrollbar {
347 |   right: 0;
348 |   top: 0;
349 |   overflow-x: hidden;
350 |   overflow-y: scroll;
351 | }
352 | .CodeMirror-hscrollbar {
353 |   bottom: 0;
354 |   left: 0;
355 |   overflow-y: hidden;
356 |   overflow-x: scroll;
357 | }
358 | .CodeMirror-scrollbar-filler {
359 |   right: 0;
360 |   bottom: 0;
361 | }
362 | .CodeMirror-gutter-filler {
363 |   left: 0;
364 |   bottom: 0;
365 | }
366 | 
367 | .CodeMirror-gutters {
368 |   position: absolute;
369 |   left: 0;
370 |   top: 0;
371 |   min-height: 100%;
372 |   z-index: 3;
373 | }
374 | .CodeMirror-gutter {
375 |   white-space: normal;
376 |   height: 100%;
377 |   display: inline-block;
378 |   vertical-align: top;
379 |   margin-bottom: -30px;
380 | }
381 | .CodeMirror-gutter-wrapper {
382 |   position: absolute;
383 |   z-index: 4;
384 |   background: none !important;
385 |   border: none !important;
386 | }
387 | .CodeMirror-gutter-background {
388 |   position: absolute;
389 |   top: 0;
390 |   bottom: 0;
391 |   z-index: 4;
392 | }
393 | .CodeMirror-gutter-elt {
394 |   position: absolute;
395 |   cursor: default;
396 |   z-index: 4;
397 | }
398 | .CodeMirror-gutter-wrapper ::selection {
399 |   background-color: transparent;
400 | }
401 | .CodeMirror-gutter-wrapper ::-moz-selection {
402 |   background-color: transparent;
403 | }
404 | 
405 | .CodeMirror-lines {
406 |   cursor: text;
407 |   min-height: 1px; /* prevents collapsing before first draw */
408 | }
409 | .CodeMirror pre {
410 |   /* Reset some styles that the rest of the page might have set */
411 |   -moz-border-radius: 0;
412 |   -webkit-border-radius: 0;
413 |   border-radius: 0;
414 |   border-width: 0;
415 |   background: transparent;
416 |   font-family: inherit;
417 |   font-size: inherit;
418 |   margin: 0;
419 |   white-space: pre;
420 |   word-wrap: normal;
421 |   line-height: inherit;
422 |   color: inherit;
423 |   z-index: 2;
424 |   position: relative;
425 |   overflow: visible;
426 |   -webkit-tap-highlight-color: transparent;
427 |   -webkit-font-variant-ligatures: contextual;
428 |   font-variant-ligatures: contextual;
429 | }
430 | .CodeMirror-wrap pre {
431 |   word-wrap: break-word;
432 |   white-space: pre-wrap;
433 |   word-break: normal;
434 | }
435 | 
436 | .CodeMirror-linebackground {
437 |   position: absolute;
438 |   left: 0;
439 |   right: 0;
440 |   top: 0;
441 |   bottom: 0;
442 |   z-index: 0;
443 | }
444 | 
445 | .CodeMirror-linewidget {
446 |   position: relative;
447 |   z-index: 2;
448 |   padding: 0.1px; /* Force widget margins to stay inside of the container */
449 | }
450 | 
451 | .CodeMirror-rtl pre {
452 |   direction: rtl;
453 | }
454 | 
455 | .CodeMirror-code {
456 |   outline: none;
457 | }
458 | 
459 | /* Force content-box sizing for the elements where we expect it */
460 | .CodeMirror-scroll,
461 | .CodeMirror-sizer,
462 | .CodeMirror-gutter,
463 | .CodeMirror-gutters,
464 | .CodeMirror-linenumber {
465 |   -moz-box-sizing: content-box;
466 |   box-sizing: content-box;
467 | }
468 | 
469 | .CodeMirror-measure {
470 |   position: absolute;
471 |   width: 100%;
472 |   height: 0;
473 |   overflow: hidden;
474 |   visibility: hidden;
475 | }
476 | 
477 | .CodeMirror-cursor {
478 |   position: absolute;
479 |   pointer-events: none;
480 | }
481 | .CodeMirror-measure pre {
482 |   position: static;
483 | }
484 | 
485 | div.CodeMirror-cursors {
486 |   visibility: hidden;
487 |   position: relative;
488 |   z-index: 3;
489 | }
490 | div.CodeMirror-dragcursors {
491 |   visibility: visible;
492 | }
493 | 
494 | .CodeMirror-focused div.CodeMirror-cursors {
495 |   visibility: visible;
496 | }
497 | 
498 | .CodeMirror-selected {
499 |   background: var(--selected-bg-non-focus);
500 | }
501 | .CodeMirror-focused .CodeMirror-selected {
502 |   background: var(--selected-bg);
503 | }
504 | .CodeMirror-crosshair {
505 |   cursor: crosshair;
506 | }
507 | .CodeMirror-line::selection,
508 | .CodeMirror-line > span::selection,
509 | .CodeMirror-line > span > span::selection {
510 |   background: var(--selected-bg);
511 | }
512 | .CodeMirror-line::-moz-selection,
513 | .CodeMirror-line > span::-moz-selection,
514 | .CodeMirror-line > span > span::-moz-selection {
515 |   background: var(--selected-bg);
516 | }
517 | 
518 | .cm-searching {
519 |   background-color: #ffa;
520 |   background-color: rgba(255, 255, 0, 0.4);
521 | }
522 | 
523 | /* Used to force a border model for a node */
524 | .cm-force-border {
525 |   padding-right: 0.1px;
526 | }
527 | 
528 | @media print {
529 |   /* Hide the cursor when printing */
530 |   .CodeMirror div.CodeMirror-cursors {
531 |     visibility: hidden;
532 |   }
533 | }
534 | 
535 | /* See issue #2901 */
536 | .cm-tab-wrap-hack:after {
537 |   content: '';
538 | }
539 | 
540 | /* Help users use markselection to safely style text background */
541 | span.CodeMirror-selectedtext {
542 |   background: none;
543 | }
544 | 
545 | .CodeMirror-dialog {
546 |   background-color: var(--bg);
547 | }
548 | 


--------------------------------------------------------------------------------
/src/output/srcdoc.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <style>
  5 |       html.dark {
  6 |         color-scheme: dark;
  7 |       }
  8 |       body {
  9 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 10 |           Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 11 |       }
 12 |     </style>
 13 |     <!-- PREVIEW-OPTIONS-HEAD-HTML -->
 14 |     <script>
 15 |       ;(() => {
 16 |         let scriptEls = []
 17 | 
 18 |         window.process = { env: {} }
 19 |         window.__modules__ = {}
 20 | 
 21 |         window.__export__ = (mod, key, get) => {
 22 |           Object.defineProperty(mod, key, {
 23 |             enumerable: true,
 24 |             configurable: true,
 25 |             get,
 26 |           })
 27 |         }
 28 | 
 29 |         window.__dynamic_import__ = (key) => {
 30 |           return Promise.resolve(window.__modules__[key])
 31 |         }
 32 | 
 33 |         async function handle_message(ev) {
 34 |           let { action, cmd_id } = ev.data
 35 |           const send_message = (payload) =>
 36 |             parent.postMessage({ ...payload }, ev.origin)
 37 |           const send_reply = (payload) => send_message({ ...payload, cmd_id })
 38 |           const send_ok = (response) =>
 39 |             send_reply({ action: 'cmd_ok', args: response })
 40 |           const send_error = (message, stack) =>
 41 |             send_reply({ action: 'cmd_error', message, stack })
 42 | 
 43 |           if (action === 'eval') {
 44 |             try {
 45 |               if (scriptEls.length) {
 46 |                 scriptEls.forEach((el) => {
 47 |                   document.head.removeChild(el)
 48 |                 })
 49 |                 scriptEls.length = 0
 50 |               }
 51 | 
 52 |               let { script: scripts } = ev.data.args
 53 |               if (typeof scripts === 'string') scripts = [scripts]
 54 | 
 55 |               for (const script of scripts) {
 56 |                 const scriptEl = document.createElement('script')
 57 |                 scriptEl.setAttribute('type', 'module')
 58 |                 // send ok in the module script to ensure sequential evaluation
 59 |                 // of multiple proxy.eval() calls
 60 |                 const done = new Promise((resolve) => {
 61 |                   window.__next__ = resolve
 62 |                 })
 63 |                 scriptEl.innerHTML = script + `\nwindow.__next__()`
 64 |                 document.head.appendChild(scriptEl)
 65 |                 scriptEl.onerror = (err) => send_error(err.message, err.stack)
 66 |                 scriptEls.push(scriptEl)
 67 |                 await done
 68 |               }
 69 |               if (window.__ssr_promise__) {
 70 |                 send_ok(await window.__ssr_promise__)
 71 |               } else {
 72 |                 send_ok()
 73 |               }
 74 |             } catch (e) {
 75 |               send_error(e.message, e.stack)
 76 |             }
 77 |           }
 78 | 
 79 |           if (action === 'catch_clicks') {
 80 |             try {
 81 |               const top_origin = ev.origin
 82 |               document.body.addEventListener('click', (event) => {
 83 |                 if (event.which !== 1) return
 84 |                 if (event.metaKey || event.ctrlKey || event.shiftKey) return
 85 |                 if (event.defaultPrevented) return
 86 | 
 87 |                 // ensure target is a link
 88 |                 let el = event.target
 89 |                 while (el && el.nodeName !== 'A') el = el.parentNode
 90 |                 if (!el || el.nodeName !== 'A') return
 91 | 
 92 |                 if (
 93 |                   el.hasAttribute('download') ||
 94 |                   el.getAttribute('rel') === 'external' ||
 95 |                   el.target ||
 96 |                   el.href.startsWith('javascript:') ||
 97 |                   !el.href
 98 |                 )
 99 |                   return
100 | 
101 |                 event.preventDefault()
102 | 
103 |                 if (el.href.startsWith(top_origin)) {
104 |                   const url = new URL(el.href)
105 |                   if (url.hash[0] === '#') {
106 |                     window.location.hash = url.hash
107 |                     return
108 |                   }
109 |                 }
110 | 
111 |                 window.open(el.href, '_blank')
112 |               })
113 |               send_ok()
114 |             } catch (e) {
115 |               send_error(e.message, e.stack)
116 |             }
117 |           }
118 |         }
119 | 
120 |         window.addEventListener('message', handle_message, false)
121 | 
122 |         window.onerror = function (msg, url, lineNo, columnNo, error) {
123 |           // ignore errors from import map polyfill - these are necessary for
124 |           // it to detect browser support
125 |           if (msg.includes('module specifier “vue”')) {
126 |             // firefox only error, ignore
127 |             return false
128 |           }
129 |           if (msg.includes("Module specifier, 'vue")) {
130 |             // Safari only
131 |             return false
132 |           }
133 |           try {
134 |             parent.postMessage({ action: 'error', value: error }, '*')
135 |           } catch (e) {
136 |             parent.postMessage({ action: 'error', value: msg }, '*')
137 |           }
138 |         }
139 | 
140 |         window.addEventListener('unhandledrejection', (event) => {
141 |           if (
142 |             event.reason.message &&
143 |             event.reason.message.includes('Cross-origin')
144 |           ) {
145 |             event.preventDefault()
146 |             return
147 |           }
148 |           try {
149 |             parent.postMessage(
150 |               { action: 'unhandledrejection', value: event.reason },
151 |               '*',
152 |             )
153 |           } catch (e) {
154 |             parent.postMessage(
155 |               { action: 'unhandledrejection', value: event.reason.message },
156 |               '*',
157 |             )
158 |           }
159 |         })
160 | 
161 |         let previous = { level: null, args: null }
162 | 
163 |         ;['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach(
164 |           (level) => {
165 |             const original = console[level]
166 |             console[level] = (...args) => {
167 |               const msg = args[0]
168 |               if (typeof msg === 'string') {
169 |                 if (
170 |                   msg.includes('You are running a development build of Vue') ||
171 |                   msg.includes('You are running the esm-bundler build of Vue')
172 |                 ) {
173 |                   return
174 |                 }
175 |               }
176 | 
177 |               original(...args)
178 | 
179 |               const stringifiedArgs = stringify(args)
180 |               if (
181 |                 previous.level === level &&
182 |                 previous.args &&
183 |                 previous.args === stringifiedArgs
184 |               ) {
185 |                 parent.postMessage(
186 |                   { action: 'console', level, duplicate: true },
187 |                   '*',
188 |                 )
189 |               } else {
190 |                 previous = { level, args: stringifiedArgs }
191 | 
192 |                 try {
193 |                   parent.postMessage({ action: 'console', level, args }, '*')
194 |                 } catch (err) {
195 |                   parent.postMessage(
196 |                     { action: 'console', level, args: args.map(toString) },
197 |                     '*',
198 |                   )
199 |                 }
200 |               }
201 |             }
202 |           },
203 |         )
204 |         ;[
205 |           { method: 'group', action: 'console_group' },
206 |           { method: 'groupEnd', action: 'console_group_end' },
207 |           { method: 'groupCollapsed', action: 'console_group_collapsed' },
208 |         ].forEach((group_action) => {
209 |           const original = console[group_action.method]
210 |           console[group_action.method] = (label) => {
211 |             parent.postMessage({ action: group_action.action, label }, '*')
212 | 
213 |             original(label)
214 |           }
215 |         })
216 | 
217 |         const timers = new Map()
218 |         const original_time = console.time
219 |         const original_timelog = console.timeLog
220 |         const original_timeend = console.timeEnd
221 | 
222 |         console.time = (label = 'default') => {
223 |           original_time(label)
224 |           timers.set(label, performance.now())
225 |         }
226 |         console.timeLog = (label = 'default') => {
227 |           original_timelog(label)
228 |           const now = performance.now()
229 |           if (timers.has(label)) {
230 |             parent.postMessage(
231 |               {
232 |                 action: 'console',
233 |                 level: 'system-log',
234 |                 args: [`${label}: ${now - timers.get(label)}ms`],
235 |               },
236 |               '*',
237 |             )
238 |           } else {
239 |             parent.postMessage(
240 |               {
241 |                 action: 'console',
242 |                 level: 'system-warn',
243 |                 args: [`Timer '${label}' does not exist`],
244 |               },
245 |               '*',
246 |             )
247 |           }
248 |         }
249 |         console.timeEnd = (label = 'default') => {
250 |           original_timeend(label)
251 |           const now = performance.now()
252 |           if (timers.has(label)) {
253 |             parent.postMessage(
254 |               {
255 |                 action: 'console',
256 |                 level: 'system-log',
257 |                 args: [`${label}: ${now - timers.get(label)}ms`],
258 |               },
259 |               '*',
260 |             )
261 |           } else {
262 |             parent.postMessage(
263 |               {
264 |                 action: 'console',
265 |                 level: 'system-warn',
266 |                 args: [`Timer '${label}' does not exist`],
267 |               },
268 |               '*',
269 |             )
270 |           }
271 |           timers.delete(label)
272 |         }
273 | 
274 |         const original_assert = console.assert
275 |         console.assert = (condition, ...args) => {
276 |           if (condition) {
277 |             const stack = new Error().stack
278 |             parent.postMessage(
279 |               { action: 'console', level: 'assert', args, stack },
280 |               '*',
281 |             )
282 |           }
283 |           original_assert(condition, ...args)
284 |         }
285 | 
286 |         const counter = new Map()
287 |         const original_count = console.count
288 |         const original_countreset = console.countReset
289 | 
290 |         console.count = (label = 'default') => {
291 |           counter.set(label, (counter.get(label) || 0) + 1)
292 |           parent.postMessage(
293 |             {
294 |               action: 'console',
295 |               level: 'system-log',
296 |               args: `${label}: ${counter.get(label)}`,
297 |             },
298 |             '*',
299 |           )
300 |           original_count(label)
301 |         }
302 | 
303 |         console.countReset = (label = 'default') => {
304 |           if (counter.has(label)) {
305 |             counter.set(label, 0)
306 |           } else {
307 |             parent.postMessage(
308 |               {
309 |                 action: 'console',
310 |                 level: 'system-warn',
311 |                 args: `Count for '${label}' does not exist`,
312 |               },
313 |               '*',
314 |             )
315 |           }
316 |           original_countreset(label)
317 |         }
318 | 
319 |         const original_trace = console.trace
320 | 
321 |         console.trace = (...args) => {
322 |           const stack = new Error().stack
323 |           parent.postMessage(
324 |             { action: 'console', level: 'trace', args, stack },
325 |             '*',
326 |           )
327 |           original_trace(...args)
328 |         }
329 | 
330 |         function toString(value) {
331 |           if (value instanceof Error) {
332 |             return value.message
333 |           }
334 |           for (const fn of [
335 |             String,
336 |             (v) => Object.prototype.toString.call(v),
337 |             (v) => typeof v,
338 |           ]) {
339 |             try {
340 |               return fn(value)
341 |             } catch (err) {}
342 |           }
343 |         }
344 | 
345 |         function isComponentProxy(value) {
346 |           return (
347 |             value &&
348 |             typeof value === 'object' &&
349 |             value.__v_skip === true &&
350 |             typeof value.$nextTick === 'function' &&
351 |             value.$ &&
352 |             value._
353 |           )
354 |         }
355 | 
356 |         function stringify(args) {
357 |           try {
358 |             return JSON.stringify(args, (key, value) => {
359 |               return isComponentProxy(value) ? '{component proxy}' : value
360 |             })
361 |           } catch (error) {
362 |             return null
363 |           }
364 |         }
365 |       })()
366 |     </script>
367 | 
368 |     <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
369 |     <script
370 |       async
371 |       src="https://cdn.jsdelivr.net/npm/es-module-shims@1.5.18/dist/es-module-shims.wasm.js"
372 |     ></script>
373 |     <script type="importmap">
374 |       <!--IMPORT_MAP-->
375 |     </script>
376 |   </head>
377 |   <body>
378 |     <!--PREVIEW-OPTIONS-PLACEHOLDER-HTML-->
379 |   </body>
380 | </html>
381 | 


--------------------------------------------------------------------------------
/src/monaco/language-configs.ts:
--------------------------------------------------------------------------------
  1 | import { languages } from 'monaco-editor-core'
  2 | 
  3 | // export const html: languages.LanguageConfiguration = {
  4 | //   comments: {
  5 | //     blockComment: ['<!--', '-->'],
  6 | //   },
  7 | //   brackets: [
  8 | //     ['<!--', '-->'],
  9 | //     ['{', '}'],
 10 | //     ['(', ')'],
 11 | //   ],
 12 | //   autoClosingPairs: [
 13 | //     { open: '{', close: '}' },
 14 | //     { open: '[', close: ']' },
 15 | //     { open: '(', close: ')' },
 16 | //     { open: "'", close: "'" },
 17 | //     { open: '"', close: '"' },
 18 | //     { open: '<!--', close: '-->', notIn: ['comment', 'string'] },
 19 | //   ],
 20 | //   surroundingPairs: [
 21 | //     { open: "'", close: "'" },
 22 | //     { open: '"', close: '"' },
 23 | //     { open: '{', close: '}' },
 24 | //     { open: '[', close: ']' },
 25 | //     { open: '(', close: ')' },
 26 | //     { open: '<', close: '>' },
 27 | //   ],
 28 | //   colorizedBracketPairs: [],
 29 | //   folding: {
 30 | //     markers: {
 31 | //       start: /^\s*<!--\s*#region\b.*-->/,
 32 | //       end: /^\s*<!--\s*#endregion\b.*-->/,
 33 | //     },
 34 | //   },
 35 | //   wordPattern: new RegExp(
 36 | //     '(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\$\\^\\&\\*\\(\\)\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\\'\\"\\,\\.\\<\\>\\/\\s]+)',
 37 | //   ),
 38 | //   onEnterRules: [
 39 | //     {
 40 | //       beforeText: new RegExp(
 41 | //         '<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr))([_:\\w][_:\\w-.\\d]*)(?:(?:[^\'"/>]|"[^"]*"|\'[^\']*\')*?(?!\\/)>)[^<]*$',
 42 | //         'i',
 43 | //       ),
 44 | //       afterText: new RegExp('^<\\/([_:\\w][_:\\w-.\\d]*)\\s*>', 'i'),
 45 | //       action: {
 46 | //         indentAction: languages.IndentAction.IndentOutdent,
 47 | //       },
 48 | //     },
 49 | //     {
 50 | //       beforeText: new RegExp(
 51 | //         '<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr))([_:\\w][_:\\w-.\\d]*)(?:(?:[^\'"/>]|"[^"]*"|\'[^\']*\')*?(?!\\/)>)[^<]*$',
 52 | //         'i',
 53 | //       ),
 54 | //       action: {
 55 | //         indentAction: languages.IndentAction.Indent,
 56 | //       },
 57 | //     },
 58 | //   ],
 59 | //   indentationRules: {
 60 | //     increaseIndentPattern: new RegExp(
 61 | //       '<(?!\\?|(?: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>)|<!--(?!.*-->)|\\{[^}"\']*$',
 62 | //     ),
 63 | //     decreaseIndentPattern: new RegExp(
 64 | //       '^\\s*(<\\/(?!html)[-_\\.A-Za-z0-9]+\\b[^>]*>|-->|\\})',
 65 | //     ),
 66 | //   },
 67 | // }
 68 | 
 69 | export const css: languages.LanguageConfiguration = {
 70 |   comments: {
 71 |     blockComment: ['/*', '*/'],
 72 |   },
 73 |   brackets: [
 74 |     ['{', '}'],
 75 |     ['[', ']'],
 76 |     ['(', ')'],
 77 |   ],
 78 |   autoClosingPairs: [
 79 |     { open: '{', close: '}', notIn: ['string', 'comment'] },
 80 |     { open: '[', close: ']', notIn: ['string', 'comment'] },
 81 |     { open: '(', close: ')', notIn: ['string', 'comment'] },
 82 |     { open: '"', close: '"', notIn: ['string', 'comment'] },
 83 |     { open: "'", close: "'", notIn: ['string', 'comment'] },
 84 |   ],
 85 |   surroundingPairs: [
 86 |     {
 87 |       open: "'",
 88 |       close: "'",
 89 |     },
 90 |     {
 91 |       open: '"',
 92 |       close: '"',
 93 |     },
 94 |     {
 95 |       open: '{',
 96 |       close: '}',
 97 |     },
 98 |     {
 99 |       open: '[',
100 |       close: ']',
101 |     },
102 |     {
103 |       open: '(',
104 |       close: ')',
105 |     },
106 |   ],
107 |   folding: {
108 |     markers: {
109 |       start: new RegExp('^\\s*\\/\\*\\s*#region\\b\\s*(.*?)\\s*\\*\\/'),
110 |       end: new RegExp('^\\s*\\/\\*\\s*#endregion\\b.*\\*\\/'),
111 |     },
112 |   },
113 |   indentationRules: {
114 |     increaseIndentPattern: new RegExp('(^.*\\{[^}]*$)'),
115 |     decreaseIndentPattern: new RegExp('^\\s*\\}'),
116 |   },
117 |   wordPattern: new RegExp(
118 |     '(#?-?\\d*\\.\\d\\w*%?)|(::?[\\w-]*(?=[^,{;]*[,{]))|(([@#.!])?[\\w-?]+%?|[@#!.])',
119 |   ),
120 | }
121 | 
122 | export const vue: languages.LanguageConfiguration = {
123 |   comments: {
124 |     blockComment: ['<!--', '-->'],
125 |   },
126 |   brackets: [
127 |     ['<!--', '-->'],
128 |     ['<', '>'],
129 |     ['{', '}'],
130 |     ['(', ')'],
131 |   ],
132 |   autoClosingPairs: [
133 |     {
134 |       open: '{',
135 |       close: '}',
136 |     },
137 |     {
138 |       open: '[',
139 |       close: ']',
140 |     },
141 |     {
142 |       open: '(',
143 |       close: ')',
144 |     },
145 |     {
146 |       open: "'",
147 |       close: "'",
148 |     },
149 |     {
150 |       open: '"',
151 |       close: '"',
152 |     },
153 |     {
154 |       open: '<!--',
155 |       close: '-->',
156 |       notIn: ['comment', 'string'],
157 |     },
158 |     {
159 |       open: '`',
160 |       close: '`',
161 |       notIn: ['string', 'comment'],
162 |     },
163 |     {
164 |       open: '/**',
165 |       close: ' */',
166 |       notIn: ['string'],
167 |     },
168 |   ],
169 |   autoCloseBefore: ';:.,=}])><`\'" \n\t',
170 |   surroundingPairs: [
171 |     {
172 |       open: "'",
173 |       close: "'",
174 |     },
175 |     {
176 |       open: '"',
177 |       close: '"',
178 |     },
179 |     {
180 |       open: '{',
181 |       close: '}',
182 |     },
183 |     {
184 |       open: '[',
185 |       close: ']',
186 |     },
187 |     {
188 |       open: '(',
189 |       close: ')',
190 |     },
191 |     {
192 |       open: '<',
193 |       close: '>',
194 |     },
195 |     {
196 |       open: '`',
197 |       close: '`',
198 |     },
199 |   ],
200 |   colorizedBracketPairs: [],
201 |   folding: {
202 |     markers: {
203 |       start: /^\s*<!--\s*#region\b.*-->/,
204 |       end: /^\s*<!--\s*#endregion\b.*-->/,
205 |     },
206 |   },
207 |   wordPattern:
208 |     /(-?\d*\.\d\w*)|([^\`\@\~\!\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>/\?\s]+)/,
209 |   onEnterRules: [
210 |     {
211 |       beforeText:
212 |         /<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script|style))([_:\w][_:\w-.\d]*)(?:(?:[^'"/>]|"[^"]*"|'[^']*')*?(?!\/)>)[^<]*$/i,
213 |       afterText: /^<\/([_:\w][_:\w-.\d]*)\s*>/i,
214 |       action: {
215 |         indentAction: languages.IndentAction.IndentOutdent,
216 |       },
217 |     },
218 |     {
219 |       beforeText:
220 |         /<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script|style))([_:\w][_:\w-.\d]*)(?:(?:[^'"/>]|"[^"]*"|'[^']*')*?(?!\/)>)[^<]*$/i,
221 |       action: {
222 |         indentAction: languages.IndentAction.Indent,
223 |       },
224 |     },
225 |   ],
226 |   indentationRules: {
227 |     increaseIndentPattern:
228 |       /<(?!\?|(?: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,
229 |     decreaseIndentPattern: /^\s*(<\/(?!html)[-_\.A-Za-z0-9]+\b[^>]*>|-->|\})/,
230 |   },
231 | }
232 | 
233 | export const js: languages.LanguageConfiguration = {
234 |   comments: {
235 |     lineComment: '//',
236 |     blockComment: ['/*', '*/'],
237 |   },
238 |   brackets: [
239 |     ['${', '}'],
240 |     ['{', '}'],
241 |     ['[', ']'],
242 |     ['(', ')'],
243 |   ],
244 |   autoClosingPairs: [
245 |     {
246 |       open: '{',
247 |       close: '}',
248 |     },
249 |     {
250 |       open: '[',
251 |       close: ']',
252 |     },
253 |     {
254 |       open: '(',
255 |       close: ')',
256 |     },
257 |     {
258 |       open: "'",
259 |       close: "'",
260 |       notIn: ['string', 'comment'],
261 |     },
262 |     {
263 |       open: '"',
264 |       close: '"',
265 |       notIn: ['string'],
266 |     },
267 |     {
268 |       open: '`',
269 |       close: '`',
270 |       notIn: ['string', 'comment'],
271 |     },
272 |     {
273 |       open: '/**',
274 |       close: ' */',
275 |       notIn: ['string'],
276 |     },
277 |   ],
278 |   surroundingPairs: [
279 |     {
280 |       open: "'",
281 |       close: "'",
282 |     },
283 |     {
284 |       open: '"',
285 |       close: '"',
286 |     },
287 |     {
288 |       open: '{',
289 |       close: '}',
290 |     },
291 |     {
292 |       open: '[',
293 |       close: ']',
294 |     },
295 |     {
296 |       open: '(',
297 |       close: ')',
298 |     },
299 |     {
300 |       open: '<',
301 |       close: '>',
302 |     },
303 |     {
304 |       open: '`',
305 |       close: '`',
306 |     },
307 |   ],
308 |   autoCloseBefore: ';:.,=}])>` \n\t',
309 |   folding: {
310 |     markers: {
311 |       start: /^\s*\/\/\s*#?region\b/,
312 |       end: /^\s*\/\/\s*#?endregion\b/,
313 |     },
314 |   },
315 |   wordPattern:
316 |     /(-?\d*\.\d\w*)|([^\`\~\@\!\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>/\?\s]+)/,
317 |   indentationRules: {
318 |     decreaseIndentPattern: /^((?!.*?\/\*).*\*\/)?\s*[\}\]].*$/,
319 |     increaseIndentPattern:
320 |       /^((?!\/\/).)*(\{([^}"'`/]*|(\t|[ ])*\/\/.*)|\([^)"'`/]*|\[[^\]"'`/]*)$/,
321 |     unIndentedLinePattern:
322 |       /^(\t|[ ])*[ ]\*[^/]*\*\/\s*$|^(\t|[ ])*[ ]\*\/\s*$|^(\t|[ ])*[ ]\*([ ]([^\*]|\*(?!\/))*)?$/,
323 |   },
324 |   onEnterRules: [
325 |     {
326 |       beforeText: /^\s*\/\*\*(?!\/)([^\*]|\*(?!\/))*$/,
327 |       afterText: /^\s*\*\/$/,
328 |       action: {
329 |         indentAction: languages.IndentAction.IndentOutdent,
330 |         appendText: ' * ',
331 |       },
332 |     },
333 |     {
334 |       beforeText: /^\s*\/\*\*(?!\/)([^\*]|\*(?!\/))*$/,
335 |       action: {
336 |         indentAction: languages.IndentAction.None,
337 |         appendText: ' * ',
338 |       },
339 |     },
340 |     {
341 |       beforeText: /^(\t|[ ])*[ ]\*([ ]([^\*]|\*(?!\/))*)?$/,
342 |       previousLineText: /(?=^(\s*(\/\*\*|\*)).*)(?=(?!(\s*\*\/)))/,
343 |       action: {
344 |         indentAction: languages.IndentAction.None,
345 |         appendText: '* ',
346 |       },
347 |     },
348 |     {
349 |       beforeText: /^(\t|[ ])*[ ]\*\/\s*$/,
350 |       action: {
351 |         indentAction: languages.IndentAction.None,
352 |         removeText: 1,
353 |       },
354 |     },
355 |     {
356 |       beforeText: /^(\t|[ ])*[ ]\*[^/]*\*\/\s*$/,
357 |       action: {
358 |         indentAction: languages.IndentAction.None,
359 |         removeText: 1,
360 |       },
361 |     },
362 |     {
363 |       beforeText: /^\s*(\bcase\s.+:|\bdefault:)$/,
364 |       afterText: /^(?!\s*(\bcase\b|\bdefault\b))/,
365 |       action: {
366 |         indentAction: languages.IndentAction.Indent,
367 |       },
368 |     },
369 |     {
370 |       previousLineText: /^\s*(((else ?)?if|for|while)\s*\(.*\)\s*|else\s*)$/,
371 |       beforeText: /^\s+([^{i\s]|i(?!f\b))/,
372 |       action: {
373 |         indentAction: languages.IndentAction.Outdent,
374 |       },
375 |     },
376 |   ],
377 | }
378 | 
379 | export const ts: languages.LanguageConfiguration = {
380 |   comments: {
381 |     lineComment: '//',
382 |     blockComment: ['/*', '*/'],
383 |   },
384 |   brackets: [
385 |     ['${', '}'],
386 |     ['{', '}'],
387 |     ['[', ']'],
388 |     ['(', ')'],
389 |   ],
390 |   autoClosingPairs: [
391 |     {
392 |       open: '{',
393 |       close: '}',
394 |     },
395 |     {
396 |       open: '[',
397 |       close: ']',
398 |     },
399 |     {
400 |       open: '(',
401 |       close: ')',
402 |     },
403 |     {
404 |       open: "'",
405 |       close: "'",
406 |       notIn: ['string', 'comment'],
407 |     },
408 |     {
409 |       open: '"',
410 |       close: '"',
411 |       notIn: ['string'],
412 |     },
413 |     {
414 |       open: '`',
415 |       close: '`',
416 |       notIn: ['string', 'comment'],
417 |     },
418 |     {
419 |       open: '/**',
420 |       close: ' */',
421 |       notIn: ['string'],
422 |     },
423 |   ],
424 |   surroundingPairs: [
425 |     {
426 |       open: "'",
427 |       close: "'",
428 |     },
429 |     {
430 |       open: '"',
431 |       close: '"',
432 |     },
433 |     {
434 |       open: '{',
435 |       close: '}',
436 |     },
437 |     {
438 |       open: '[',
439 |       close: ']',
440 |     },
441 |     {
442 |       open: '(',
443 |       close: ')',
444 |     },
445 |     {
446 |       open: '<',
447 |       close: '>',
448 |     },
449 |     {
450 |       open: '`',
451 |       close: '`',
452 |     },
453 |   ],
454 |   colorizedBracketPairs: [
455 |     ['(', ')'],
456 |     ['[', ']'],
457 |     ['{', '}'],
458 |     ['<', '>'],
459 |   ],
460 |   autoCloseBefore: ';:.,=}])>` \n\t',
461 |   folding: {
462 |     markers: {
463 |       start: /^\s*\/\/\s*#?region\b/,
464 |       end: /^\s*\/\/\s*#?endregion\b/,
465 |     },
466 |   },
467 |   wordPattern:
468 |     /(-?\d*\.\d\w*)|([^\`\~\@\!\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>/\?\s]+)/,
469 |   indentationRules: {
470 |     decreaseIndentPattern: /^((?!.*?\/\*).*\*\/)?\s*[\}\]].*$/,
471 |     increaseIndentPattern:
472 |       /^((?!\/\/).)*(\{([^}"'`/]*|(\t|[ ])*\/\/.*)|\([^)"'`/]*|\[[^\]"'`/]*)$/,
473 |     unIndentedLinePattern:
474 |       /^(\t|[ ])*[ ]\*[^/]*\*\/\s*$|^(\t|[ ])*[ ]\*\/\s*$|^(\t|[ ])*[ ]\*([ ]([^\*]|\*(?!\/))*)?$/,
475 |   },
476 |   onEnterRules: [
477 |     {
478 |       beforeText: /^\s*\/\*\*(?!\/)([^\*]|\*(?!\/))*$/,
479 |       afterText: /^\s*\*\/$/,
480 |       action: {
481 |         indentAction: languages.IndentAction.IndentOutdent,
482 |         appendText: ' * ',
483 |       },
484 |     },
485 |     {
486 |       beforeText: /^\s*\/\*\*(?!\/)([^\*]|\*(?!\/))*$/,
487 |       action: {
488 |         indentAction: languages.IndentAction.None,
489 |         appendText: ' * ',
490 |       },
491 |     },
492 |     {
493 |       beforeText: /^(\t|[ ])*[ ]\*([ ]([^\*]|\*(?!\/))*)?$/,
494 |       previousLineText: /(?=^(\s*(\/\*\*|\*)).*)(?=(?!(\s*\*\/)))/,
495 |       action: {
496 |         indentAction: languages.IndentAction.None,
497 |         appendText: '* ',
498 |       },
499 |     },
500 |     {
501 |       beforeText: /^(\t|[ ])*[ ]\*\/\s*$/,
502 |       action: {
503 |         indentAction: languages.IndentAction.None,
504 |         removeText: 1,
505 |       },
506 |     },
507 |     {
508 |       beforeText: /^(\t|[ ])*[ ]\*[^/]*\*\/\s*$/,
509 |       action: {
510 |         indentAction: languages.IndentAction.None,
511 |         removeText: 1,
512 |       },
513 |     },
514 |     {
515 |       beforeText: /^\s*(\bcase\s.+:|\bdefault:)$/,
516 |       afterText: /^(?!\s*(\bcase\b|\bdefault\b))/,
517 |       action: {
518 |         indentAction: languages.IndentAction.Indent,
519 |       },
520 |     },
521 |     {
522 |       previousLineText: /^\s*(((else ?)?if|for|while)\s*\(.*\)\s*|else\s*)$/,
523 |       beforeText: /^\s+([^{i\s]|i(?!f\b))/,
524 |       action: {
525 |         indentAction: languages.IndentAction.Outdent,
526 |       },
527 |     },
528 |   ],
529 | }
530 | 


--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   type ToRefs,
  3 |   type UnwrapRef,
  4 |   computed,
  5 |   reactive,
  6 |   ref,
  7 |   shallowRef,
  8 |   watch,
  9 |   watchEffect,
 10 | } from 'vue'
 11 | import * as defaultCompiler from 'vue/compiler-sfc'
 12 | import { compileFile } from './transform'
 13 | import { atou, utoa } from './utils'
 14 | import type {
 15 |   SFCAsyncStyleCompileOptions,
 16 |   SFCScriptCompileOptions,
 17 |   SFCTemplateCompileOptions,
 18 | } from 'vue/compiler-sfc'
 19 | import type { OutputModes } from './types'
 20 | import type { editor } from 'monaco-editor-core'
 21 | import { type ImportMap, mergeImportMap, useVueImportMap } from './import-map'
 22 | 
 23 | import welcomeSFCCode from './template/welcome.vue?raw'
 24 | import newSFCCode from './template/new-sfc.vue?raw'
 25 | 
 26 | export const importMapFile = 'import-map.json'
 27 | export const tsconfigFile = 'tsconfig.json'
 28 | 
 29 | export function useStore(
 30 |   {
 31 |     files = ref(Object.create(null)),
 32 |     activeFilename = undefined!, // set later
 33 |     mainFile = ref('src/App.vue'),
 34 |     template = ref({
 35 |       welcomeSFC: welcomeSFCCode,
 36 |       newSFC: newSFCCode,
 37 |     }),
 38 |     builtinImportMap = undefined!, // set later
 39 | 
 40 |     errors = ref([]),
 41 |     showOutput = ref(false),
 42 |     outputMode = ref('preview'),
 43 |     sfcOptions = ref({}),
 44 |     compiler = shallowRef(defaultCompiler),
 45 |     vueVersion = ref(null),
 46 | 
 47 |     locale = ref(),
 48 |     typescriptVersion = ref('latest'),
 49 |     dependencyVersion = ref(Object.create(null)),
 50 |     reloadLanguageTools = ref(),
 51 |   }: Partial<StoreState> = {},
 52 |   serializedState?: string,
 53 | ): ReplStore {
 54 |   if (!builtinImportMap) {
 55 |     ;({ importMap: builtinImportMap, vueVersion } = useVueImportMap({
 56 |       vueVersion: vueVersion.value,
 57 |     }))
 58 |   }
 59 |   const loading = ref(false)
 60 | 
 61 |   function applyBuiltinImportMap() {
 62 |     const importMap = mergeImportMap(builtinImportMap.value, getImportMap())
 63 |     setImportMap(importMap)
 64 |   }
 65 | 
 66 |   function init() {
 67 |     watchEffect(() => {
 68 |       compileFile(store, activeFile.value).then((errs) => (errors.value = errs))
 69 |     })
 70 | 
 71 |     watch(
 72 |       () => [
 73 |         files.value[tsconfigFile]?.code,
 74 |         typescriptVersion.value,
 75 |         locale.value,
 76 |         dependencyVersion.value,
 77 |         vueVersion.value,
 78 |       ],
 79 |       () => reloadLanguageTools.value?.(),
 80 |       { deep: true },
 81 |     )
 82 | 
 83 |     watch(
 84 |       builtinImportMap,
 85 |       () => {
 86 |         setImportMap(mergeImportMap(getImportMap(), builtinImportMap.value))
 87 |       },
 88 |       { deep: true },
 89 |     )
 90 | 
 91 |     watch(
 92 |       vueVersion,
 93 |       async (version) => {
 94 |         if (version) {
 95 |           const compilerUrl = `https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
 96 |           loading.value = true
 97 |           compiler.value = await import(/* @vite-ignore */ compilerUrl).finally(
 98 |             () => (loading.value = false),
 99 |           )
100 |           console.info(`[@vue/repl] Now using Vue version: ${version}`)
101 |         } else {
102 |           // reset to default
103 |           compiler.value = defaultCompiler
104 |           console.info(`[@vue/repl] Now using default Vue version`)
105 |         }
106 |       },
107 |       { immediate: true },
108 |     )
109 | 
110 |     // Recompile all Vue SFC files when the compiler changes.
111 |     // This ensures that when switching Vue versions (e.g., from <3.6 to >=3.6),
112 |     // all vue sfc files are recompiled with the new compiler to correctly handle
113 |     // vapor components.
114 |     watch(compiler, (_, oldCompiler) => {
115 |       if (!oldCompiler) return
116 |       for (const file of Object.values(files.value)) {
117 |         if (file.filename.endsWith('.vue')) {
118 |           compileFile(store, file).then((errs) => errors.value.push(...errs))
119 |         }
120 |       }
121 |     })
122 | 
123 |     watch(
124 |       sfcOptions,
125 |       () => {
126 |         sfcOptions.value.script ||= {}
127 |         sfcOptions.value.script.fs = {
128 |           fileExists(file: string) {
129 |             if (file.startsWith('/')) file = file.slice(1)
130 |             return !!store.files[file]
131 |           },
132 |           readFile(file: string) {
133 |             if (file.startsWith('/')) file = file.slice(1)
134 |             return store.files[file].code
135 |           },
136 |         }
137 |       },
138 |       { immediate: true },
139 |     )
140 | 
141 |     // init tsconfig
142 |     if (!files.value[tsconfigFile]) {
143 |       files.value[tsconfigFile] = new File(
144 |         tsconfigFile,
145 |         JSON.stringify(tsconfig, undefined, 2),
146 |       )
147 |     }
148 | 
149 |     // compile rest of the files
150 |     errors.value = []
151 |     for (const [filename, file] of Object.entries(files.value)) {
152 |       if (filename !== mainFile.value) {
153 |         compileFile(store, file).then((errs) => errors.value.push(...errs))
154 |       }
155 |     }
156 |   }
157 | 
158 |   function setImportMap(map: ImportMap, merge = false) {
159 |     if (merge) {
160 |       map = mergeImportMap(getImportMap(), map)
161 |     }
162 | 
163 |     if (map.imports)
164 |       for (const [key, value] of Object.entries(map.imports)) {
165 |         if (value) {
166 |           map.imports![key] = fixURL(value)
167 |         }
168 |       }
169 | 
170 |     const code = JSON.stringify(map, undefined, 2)
171 |     if (files.value[importMapFile]) {
172 |       files.value[importMapFile].code = code
173 |     } else {
174 |       files.value[importMapFile] = new File(importMapFile, code)
175 |     }
176 |   }
177 | 
178 |   const setActive: Store['setActive'] = (filename) => {
179 |     activeFilename.value = filename
180 |   }
181 |   const addFile: Store['addFile'] = (fileOrFilename) => {
182 |     let file: File
183 |     if (typeof fileOrFilename === 'string') {
184 |       file = new File(
185 |         fileOrFilename,
186 |         fileOrFilename.endsWith('.vue') ? template.value.newSFC : '',
187 |       )
188 |     } else {
189 |       file = fileOrFilename
190 |     }
191 |     files.value[file.filename] = file
192 |     if (!file.hidden) setActive(file.filename)
193 |   }
194 |   const deleteFile: Store['deleteFile'] = (filename) => {
195 |     if (
196 |       !confirm(`Are you sure you want to delete ${stripSrcPrefix(filename)}?`)
197 |     ) {
198 |       return
199 |     }
200 | 
201 |     if (activeFilename.value === filename) {
202 |       activeFilename.value = mainFile.value
203 |     }
204 |     delete files.value[filename]
205 |   }
206 |   const renameFile: Store['renameFile'] = (oldFilename, newFilename) => {
207 |     const file = files.value[oldFilename]
208 | 
209 |     if (!file) {
210 |       errors.value = [`Could not rename "${oldFilename}", file not found`]
211 |       return
212 |     }
213 | 
214 |     if (!newFilename || oldFilename === newFilename) {
215 |       errors.value = [`Cannot rename "${oldFilename}" to "${newFilename}"`]
216 |       return
217 |     }
218 | 
219 |     file.filename = newFilename
220 |     const newFiles: Record<string, File> = {}
221 | 
222 |     // Preserve iteration order for files
223 |     for (const [name, file] of Object.entries(files.value)) {
224 |       if (name === oldFilename) {
225 |         newFiles[newFilename] = file
226 |       } else {
227 |         newFiles[name] = file
228 |       }
229 |     }
230 | 
231 |     files.value = newFiles
232 | 
233 |     if (mainFile.value === oldFilename) {
234 |       mainFile.value = newFilename
235 |     }
236 |     if (activeFilename.value === oldFilename) {
237 |       activeFilename.value = newFilename
238 |     } else {
239 |       compileFile(store, file).then((errs) => (errors.value = errs))
240 |     }
241 |   }
242 |   const getImportMap: Store['getImportMap'] = () => {
243 |     try {
244 |       return JSON.parse(files.value[importMapFile].code)
245 |     } catch (e) {
246 |       errors.value = [
247 |         `Syntax error in ${importMapFile}: ${(e as Error).message}`,
248 |       ]
249 |       return {}
250 |     }
251 |   }
252 |   const getTsConfig: Store['getTsConfig'] = () => {
253 |     try {
254 |       return JSON.parse(files.value[tsconfigFile].code)
255 |     } catch {
256 |       return {}
257 |     }
258 |   }
259 |   const serialize: ReplStore['serialize'] = () => {
260 |     const files = getFiles()
261 |     const importMap = files[importMapFile]
262 |     if (importMap) {
263 |       const parsed = JSON.parse(importMap)
264 |       const builtin = builtinImportMap.value.imports || {}
265 | 
266 |       if (parsed.imports) {
267 |         for (const [key, value] of Object.entries(parsed.imports)) {
268 |           if (builtin[key] === value) {
269 |             delete parsed.imports[key]
270 |           }
271 |         }
272 |         if (parsed.imports && !Object.keys(parsed.imports).length) {
273 |           delete parsed.imports
274 |         }
275 |       }
276 |       if (parsed.scopes && !Object.keys(parsed.scopes).length) {
277 |         delete parsed.scopes
278 |       }
279 |       if (Object.keys(parsed).length) {
280 |         files[importMapFile] = JSON.stringify(parsed, null, 2)
281 |       } else {
282 |         delete files[importMapFile]
283 |       }
284 |     }
285 |     if (vueVersion.value) files._version = vueVersion.value
286 |     if (typescriptVersion.value !== 'latest' || files._tsVersion) {
287 |       files._tsVersion = typescriptVersion.value
288 |     }
289 |     return '#' + utoa(JSON.stringify(files))
290 |   }
291 |   const deserialize: ReplStore['deserialize'] = (
292 |     serializedState: string,
293 |     checkBuiltinImportMap = true,
294 |   ) => {
295 |     if (serializedState.startsWith('#'))
296 |       serializedState = serializedState.slice(1)
297 |     let saved: any
298 |     try {
299 |       saved = JSON.parse(atou(serializedState))
300 |     } catch (err) {
301 |       console.error(err)
302 |       alert('Failed to load code from URL.')
303 |       return setDefaultFile()
304 |     }
305 |     for (const filename in saved) {
306 |       if (filename === '_version') {
307 |         vueVersion.value = saved[filename]
308 |       } else if (filename === '_tsVersion') {
309 |         typescriptVersion.value = saved[filename]
310 |       } else {
311 |         setFile(files.value, filename, saved[filename])
312 |       }
313 |     }
314 |     if (checkBuiltinImportMap) {
315 |       applyBuiltinImportMap()
316 |     }
317 |   }
318 |   const getFiles: ReplStore['getFiles'] = () => {
319 |     const exported: Record<string, string> = {}
320 |     for (const [filename, file] of Object.entries(files.value)) {
321 |       const normalized = stripSrcPrefix(filename)
322 |       exported[normalized] = file.code
323 |     }
324 |     return exported
325 |   }
326 |   const setFiles: ReplStore['setFiles'] = async (
327 |     newFiles,
328 |     mainFile = store.mainFile,
329 |   ) => {
330 |     const files: Record<string, File> = Object.create(null)
331 | 
332 |     mainFile = addSrcPrefix(mainFile)
333 |     if (!newFiles[mainFile]) {
334 |       setFile(files, mainFile, template.value.welcomeSFC || welcomeSFCCode)
335 |     }
336 |     for (const [filename, file] of Object.entries(newFiles)) {
337 |       setFile(files, filename, file)
338 |     }
339 | 
340 |     const errors = []
341 |     for (const file of Object.values(files)) {
342 |       errors.push(...(await compileFile(store, file)))
343 |     }
344 | 
345 |     store.mainFile = mainFile
346 |     store.files = files
347 |     store.errors = errors
348 |     applyBuiltinImportMap()
349 |     setActive(store.mainFile)
350 |   }
351 |   const setDefaultFile = (): void => {
352 |     setFile(
353 |       files.value,
354 |       mainFile.value,
355 |       template.value.welcomeSFC || welcomeSFCCode,
356 |     )
357 |   }
358 | 
359 |   if (serializedState) {
360 |     deserialize(serializedState, false)
361 |   } else {
362 |     setDefaultFile()
363 |   }
364 |   if (!files.value[mainFile.value]) {
365 |     mainFile.value = Object.keys(files.value)[0]
366 |   }
367 |   activeFilename ||= ref(mainFile.value)
368 |   const activeFile = computed(() => files.value[activeFilename.value])
369 | 
370 |   applyBuiltinImportMap()
371 | 
372 |   const store: ReplStore = reactive({
373 |     files,
374 |     activeFile,
375 |     activeFilename,
376 |     mainFile,
377 |     template,
378 |     builtinImportMap,
379 | 
380 |     errors,
381 |     showOutput,
382 |     outputMode,
383 |     sfcOptions,
384 |     ssrOutput: { html: '', context: '' },
385 |     compiler,
386 |     loading,
387 |     vueVersion,
388 | 
389 |     locale,
390 |     typescriptVersion,
391 |     dependencyVersion,
392 |     reloadLanguageTools,
393 | 
394 |     init,
395 |     setActive,
396 |     addFile,
397 |     deleteFile,
398 |     renameFile,
399 |     getImportMap,
400 |     setImportMap,
401 |     getTsConfig,
402 |     serialize,
403 |     deserialize,
404 |     getFiles,
405 |     setFiles,
406 |   })
407 |   return store
408 | }
409 | 
410 | const tsconfig = {
411 |   compilerOptions: {
412 |     allowJs: true,
413 |     checkJs: true,
414 |     jsx: 'Preserve',
415 |     target: 'ESNext',
416 |     module: 'ESNext',
417 |     moduleResolution: 'Bundler',
418 |     allowImportingTsExtensions: true,
419 |   },
420 |   vueCompilerOptions: {
421 |     target: 3.4,
422 |   },
423 | }
424 | 
425 | export interface SFCOptions {
426 |   script?: Partial<SFCScriptCompileOptions>
427 |   style?: Partial<SFCAsyncStyleCompileOptions>
428 |   template?: Partial<SFCTemplateCompileOptions>
429 | }
430 | 
431 | export type StoreState = ToRefs<{
432 |   files: Record<string, File>
433 |   activeFilename: string
434 |   mainFile: string
435 |   template: {
436 |     welcomeSFC?: string
437 |     newSFC?: string
438 |   }
439 |   builtinImportMap: ImportMap
440 | 
441 |   // output
442 |   errors: (string | Error)[]
443 |   showOutput: boolean
444 |   outputMode: OutputModes
445 |   sfcOptions: SFCOptions
446 |   ssrOutput: {
447 |     html: string
448 |     context: unknown
449 |   }
450 |   /** `@vue/compiler-sfc` */
451 |   compiler: typeof defaultCompiler
452 |   /* only apply for compiler-sfc */
453 |   vueVersion: string | null
454 | 
455 |   // volar-related
456 |   locale: string | undefined
457 |   typescriptVersion: string
458 |   /** \{ dependencyName: version \} */
459 |   dependencyVersion: Record<string, string>
460 |   reloadLanguageTools?: (() => void) | undefined
461 | }>
462 | 
463 | export interface ReplStore extends UnwrapRef<StoreState> {
464 |   activeFile: File
465 |   /** Loading compiler */
466 |   loading: boolean
467 |   init(): void
468 |   setActive(filename: string): void
469 |   addFile(filename: string | File): void
470 |   deleteFile(filename: string): void
471 |   renameFile(oldFilename: string, newFilename: string): void
472 |   getImportMap(): ImportMap
473 |   setImportMap(map: ImportMap, merge?: boolean): void
474 |   getTsConfig(): Record<string, any>
475 |   serialize(): string
476 |   /**
477 |    * Deserializes the given string to restore the REPL store state.
478 |    * @param serializedState - The serialized state string.
479 |    * @param checkBuiltinImportMap - Whether to check the built-in import map. Default to true
480 |    */
481 |   deserialize(serializedState: string, checkBuiltinImportMap?: boolean): void
482 |   getFiles(): Record<string, string>
483 |   setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>
484 | }
485 | 
486 | export type Store = Pick<
487 |   ReplStore,
488 |   | 'files'
489 |   | 'activeFile'
490 |   | 'mainFile'
491 |   | 'errors'
492 |   | 'showOutput'
493 |   | 'outputMode'
494 |   | 'sfcOptions'
495 |   | 'ssrOutput'
496 |   | 'compiler'
497 |   | 'vueVersion'
498 |   | 'locale'
499 |   | 'typescriptVersion'
500 |   | 'dependencyVersion'
501 |   | 'reloadLanguageTools'
502 |   | 'init'
503 |   | 'setActive'
504 |   | 'addFile'
505 |   | 'deleteFile'
506 |   | 'renameFile'
507 |   | 'getImportMap'
508 |   | 'getTsConfig'
509 | >
510 | 
511 | export class File {
512 |   compiled = {
513 |     js: '',
514 |     css: '',
515 |     ssr: '',
516 |     clientMap: '',
517 |     ssrMap: '',
518 |   }
519 |   editorViewState: editor.ICodeEditorViewState | null = null
520 | 
521 |   constructor(
522 |     public filename: string,
523 |     public code = '',
524 |     public hidden = false,
525 |   ) {}
526 | 
527 |   get language() {
528 |     if (this.filename.endsWith('.vue')) {
529 |       return 'vue'
530 |     }
531 |     if (this.filename.endsWith('.html')) {
532 |       return 'html'
533 |     }
534 |     if (this.filename.endsWith('.css')) {
535 |       return 'css'
536 |     }
537 |     if (this.filename.endsWith('.ts')) {
538 |       return 'typescript'
539 |     }
540 |     return 'javascript'
541 |   }
542 | }
543 | 
544 | function addSrcPrefix(file: string) {
545 |   return file === importMapFile ||
546 |     file === tsconfigFile ||
547 |     file.startsWith('src/')
548 |     ? file
549 |     : `src/${file}`
550 | }
551 | 
552 | export function stripSrcPrefix(file: string) {
553 |   return file.replace(/^src\//, '')
554 | }
555 | 
556 | function fixURL(url: string) {
557 |   return url.replace('https://sfc.vuejs', 'https://play.vuejs')
558 | }
559 | 
560 | function setFile(
561 |   files: Record<string, File>,
562 |   filename: string,
563 |   content: string,
564 | ) {
565 |   const normalized = addSrcPrefix(filename)
566 |   files[normalized] = new File(normalized, content)
567 | }
568 | 


--------------------------------------------------------------------------------