├── .node-version
├── public
    └── CNAME
├── .gitattributes
├── .github
    ├── FUNDING.yml
    ├── renovate.json5
    └── workflows
    │   └── gh-pages.yml
├── src
    ├── constants.ts
    ├── env.d.ts
    ├── template
    │   ├── main.vue
    │   ├── tsconfig.json
    │   ├── welcome.vue
    │   └── element-plus.js
    ├── utils
    │   ├── encode.ts
    │   └── dependency.ts
    ├── main.ts
    ├── components
    │   ├── Settings.vue
    │   └── Header.vue
    ├── assets
    │   └── logo.svg
    ├── components.d.ts
    ├── App.vue
    ├── composables
    │   └── store.ts
    └── auto-imports.d.ts
├── .gitignore
├── .vscode
    ├── extensions.json
    └── settings.json
├── eslint.config.js
├── pnpm-workspace.yaml
├── .editorconfig
├── tsconfig.json
├── unocss.config.ts
├── index.html
├── README.md
├── LICENSE
├── package.json
└── vite.config.ts


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


--------------------------------------------------------------------------------
/public/CNAME:
--------------------------------------------------------------------------------
1 | element-plus.run
2 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto eol=lf
2 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [sxzz, element-plus]
2 | 


--------------------------------------------------------------------------------
/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const IS_DEV = import.meta.env.DEV
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | *.log
5 | .eslintcache
6 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["antfu.unocss"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.github/renovate.json5:
--------------------------------------------------------------------------------
1 | {
2 |   extends: ['github>sxzz/renovate-config'],
3 | }
4 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import { sxzz } from '@sxzz/eslint-config'
2 | export default sxzz()
3 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.formatOnSave": true,
3 |   "iconify.includes": ["ep"]
4 | }
5 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | onlyBuiltDependencies:
2 |   - '@parcel/watcher'
3 |   - esbuild
4 |   - vue-demi
5 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | /// <reference types="element-plus/global" />
3 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | indent_size = 2
5 | end_of_line = lf
6 | insert_final_newline = true
7 | 


--------------------------------------------------------------------------------
/src/template/main.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import App from './App.vue'
 3 | import { setupElementPlus } from './element-plus.js'
 4 | setupElementPlus()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <App />
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "compilerOptions": {
 4 |     "baseUrl": ".",
 5 |     "paths": {
 6 |       "@/*": ["src/*"]
 7 |     },
 8 |     "types": [],
 9 |     "skipLibCheck": true
10 |   },
11 |   "include": ["src"],
12 |   "exclude": ["src/template"]
13 | }
14 | 


--------------------------------------------------------------------------------
/src/utils/encode.ts:
--------------------------------------------------------------------------------
 1 | // prefer old unicode hacks for backward compatibility
 2 | // https://base64.guru/developers/javascript/examples/unicode-strings
 3 | export function utoa(data: string): string {
 4 |   return btoa(unescape(encodeURIComponent(data)))
 5 | }
 6 | 
 7 | export function atou(base64: string): string {
 8 |   return decodeURIComponent(escape(atob(base64)))
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from '@/App.vue'
 3 | import '@unocss/reset/tailwind.css'
 4 | import '@vue/repl/style.css'
 5 | import 'element-plus/theme-chalk/dark/css-vars.css'
 6 | import 'uno.css'
 7 | 
 8 | // @ts-expect-error Custom window property
 9 | window.VUE_DEVTOOLS_CONFIG = {
10 |   defaultSelectedAppId: 'repl',
11 | }
12 | 
13 | createApp(App).mount('#app')
14 | 


--------------------------------------------------------------------------------
/src/template/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "jsx": "preserve",
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "Bundler",
 7 |     "types": ["element-plus/global.d.ts"],
 8 |     "allowImportingTsExtensions": true,
 9 |     "allowJs": true,
10 |     "checkJs": true
11 |   },
12 |   "vueCompilerOptions": {
13 |     "target": 3.3
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/unocss.config.ts:
--------------------------------------------------------------------------------
 1 | import transformerDirective from '@unocss/transformer-directives'
 2 | import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
 3 | 
 4 | export default defineConfig({
 5 |   presets: [presetUno(), presetAttributify(), presetIcons()],
 6 |   transformers: [transformerDirective()],
 7 |   shortcuts: {
 8 |     'color-primary': 'color-[var(--el-color-primary)]',
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/src/components/Settings.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cdn } from '@/utils/dependency'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <el-form>
 7 |     <el-form-item label="CDN">
 8 |       <el-select v-model="cdn" w-full>
 9 |         <el-option value="jsdelivr" label="jsDelivr" />
10 |         <el-option value="jsdelivr-fastly" label="jsDelivr Fastly" />
11 |         <el-option value="unpkg" label="unpkg" />
12 |       </el-select>
13 |     </el-form-item>
14 |   </el-form>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/template/welcome.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ElementPlus } from '@element-plus/icons-vue'
 3 | import { version as epVersion } from 'element-plus'
 4 | import { ref, version as vueVersion } from 'vue'
 5 | 
 6 | const msg = ref('Hello World!')
 7 | </script>
 8 | 
 9 | <template>
10 |   <h1>{{ msg }}</h1>
11 |   <el-input v-model="msg" />
12 | 
13 |   <p>
14 |     <el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>
15 |     Element Plus {{ epVersion }} + Vue {{ vueVersion }}
16 |   </p>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/index.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 |     <link rel="icon" type="image/svg" href="./src/assets/logo.svg" />
 8 |     <title>Element Plus Playground</title>
 9 |     <script>
10 |       // process shim for old versions of @vue/compiler-sfc dependency
11 |       window.process = { env: {} }
12 |     </script>
13 |     <script type="module" src="./src/main.ts"></script>
14 |   </head>
15 |   <body>
16 |     <div id="app"></div>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img width="300px" src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png">
 3 | </p>
 4 | 
 5 | # Element Plus Playground
 6 | 
 7 | [![GitHub Pages](https://github.com/element-plus/element-plus-playground/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/element-plus/element-plus-playground/actions/workflows/gh-pages.yml)
 8 | 
 9 | You can go to [element-plus.run](https://element-plus.run/) to have a try! 😆
10 | 
11 | ## Credits
12 | 
13 | - [vuejs/repl](https://github.com/vuejs/repl)
14 | 
15 | ## License
16 | 
17 | [MIT](./LICENSE) License © 2021-PRESENT [三咲智子](https://github.com/sxzz)
18 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 44 44" viewBox="0 0 44 44"><path d="M37.4 32.4c0 1.6-.8 1.9-.8 1.9L21.5 43c-.5.2-1 .2-1.5 0 0 0-14.8-8.6-15.3-9-.3-.2-.5-.6-.6-1V15.2c0-.8 1-1.3 1-1.3l14.8-8.5c.6-.3 1.2-.3 1.8 0l14.5 8.4c.8.3 1.3 1.2 1.2 2.1v16.5zm-5.9-17L21.4 9.5c-.4-.2-1-.2-1.4 0L8.3 16.1s-.8.5-.8 1.1v13.9c0 .3.2.6.4.8.4.3 12 7 12 7 .4.2.8.2 1.2 0 .7-.4 11.8-6.8 11.8-6.8s.7-.3.7-1.5v-3.5l-13 7.9v-3c.1-.8.4-1.5 1-2.1L33.2 23c.3-.4.5-.9.5-1.5v-3.1l-13.1 7.9v-3.2c0-.7.3-1.4.8-1.8l10.1-5.9zm9.6-11.2c0-.2-.1-.4-.4-.4H38V1.1c0-.2-.3-.3-.5-.2l-1.5.2c-.2 0-.3.1-.3.2v2.5H33c-.2 0-.3.2-.4.4v2h3V9c0 .2.3.3.5.2l1.6-.2c.2 0 .3-.1.3-.2V6.1h3.1V4.2z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#409eff"/></svg>


--------------------------------------------------------------------------------
/src/template/element-plus.js:
--------------------------------------------------------------------------------
 1 | import ElementPlus from 'element-plus'
 2 | import { getCurrentInstance } from 'vue'
 3 | 
 4 | let installed = false
 5 | await loadStyle()
 6 | 
 7 | export function setupElementPlus() {
 8 |   if (installed) return
 9 |   const instance = getCurrentInstance()
10 |   instance.appContext.app.use(ElementPlus)
11 |   installed = true
12 | }
13 | 
14 | export function loadStyle() {
15 |   const styles = ['#STYLE#', '#DARKSTYLE#'].map((style) => {
16 |     return new Promise((resolve, reject) => {
17 |       const link = document.createElement('link')
18 |       link.rel = 'stylesheet'
19 |       link.href = style
20 |       link.addEventListener('load', resolve)
21 |       link.addEventListener('error', reject)
22 |       document.body.append(link)
23 |     })
24 |   })
25 |   return Promise.allSettled(styles)
26 | }
27 | 


--------------------------------------------------------------------------------
/.github/workflows/gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: GitHub Pages
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - main
 6 |   workflow_dispatch: {}
 7 | jobs:
 8 |   deploy:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v4
12 | 
13 |       - name: Setup pnpm
14 |         uses: pnpm/action-setup@v4.1.0
15 | 
16 |       - name: Setup Node
17 |         uses: actions/setup-node@v4
18 |         with:
19 |           node-version-file: .node-version
20 |           cache: pnpm
21 | 
22 |       - name: Install deps
23 |         run: pnpm i --frozen-lockfile
24 | 
25 |       - name: Build
26 |         run: pnpm run build
27 | 
28 |       - name: Deploy
29 |         uses: peaceiris/actions-gh-pages@v4
30 |         with:
31 |           github_token: ${{ secrets.GITHUB_TOKEN }}
32 |           publish_dir: ./dist
33 |           force_orphan: true
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2021-PRESENT Element Plus (https://github.com/element-plus)
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | // @ts-nocheck
 3 | // Generated by unplugin-vue-components
 4 | // Read more: https://github.com/vuejs/core/pull/3399
 5 | // biome-ignore lint: disable
 6 | export {}
 7 | 
 8 | /* prettier-ignore */
 9 | declare module 'vue' {
10 |   export interface GlobalComponents {
11 |     ElButton: typeof import('element-plus/es')['ElButton']
12 |     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
13 |     ElForm: typeof import('element-plus/es')['ElForm']
14 |     ElFormItem: typeof import('element-plus/es')['ElFormItem']
15 |     ElLink: typeof import('element-plus/es')['ElLink']
16 |     ElOption: typeof import('element-plus/es')['ElOption']
17 |     ElPopover: typeof import('element-plus/es')['ElPopover']
18 |     ElSelect: typeof import('element-plus/es')['ElSelect']
19 |     ElTag: typeof import('element-plus/es')['ElTag']
20 |     ElTooltip: typeof import('element-plus/es')['ElTooltip']
21 |     Header: typeof import('./components/Header.vue')['default']
22 |     Settings: typeof import('./components/Settings.vue')['default']
23 |   }
24 |   export interface GlobalDirectives {
25 |     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "element-plus-playground",
 3 |   "version": "2.5.1",
 4 |   "packageManager": "pnpm@10.13.1",
 5 |   "description": "Element Plus Playground",
 6 |   "type": "module",
 7 |   "keywords": [
 8 |     "element",
 9 |     "element-plus",
10 |     "playground",
11 |     "repl"
12 |   ],
13 |   "license": "MIT",
14 |   "scripts": {
15 |     "dev": "vite",
16 |     "build": "vite build",
17 |     "preview": "vite preview",
18 |     "lint": "eslint --cache --max-warnings 0 .",
19 |     "lint:fix": "pnpm run lint --fix",
20 |     "typecheck": "vue-tsc --noEmit",
21 |     "release": "bumpp",
22 |     "format": "prettier --write --cache . --experimental-cli"
23 |   },
24 |   "dependencies": {
25 |     "@unocss/reset": "^66.5.9",
26 |     "@vue/repl": "^4.6.2",
27 |     "@vueuse/core": "^12.8.2",
28 |     "element-plus": "^2.10.4",
29 |     "semver": "^7.7.2",
30 |     "vue": "^3.5.18"
31 |   },
32 |   "devDependencies": {
33 |     "@iconify-json/ri": "^1.2.5",
34 |     "@sxzz/eslint-config": "^5.3.0",
35 |     "@sxzz/prettier-config": "^2.2.3",
36 |     "@types/node": "^22.16.5",
37 |     "@types/semver": "^7.7.0",
38 |     "@unocss/eslint-plugin": "^66.5.9",
39 |     "@unocss/transformer-directives": "^66.5.9",
40 |     "@vitejs/plugin-vue": "^5.2.4",
41 |     "@vue/tsconfig": "^0.7.0",
42 |     "bumpp": "^10.2.0",
43 |     "eslint": "^9.32.0",
44 |     "prettier": "^3.6.2",
45 |     "sass": "^1.89.2",
46 |     "typescript": "^5.8.3",
47 |     "unocss": "^66.5.9",
48 |     "unplugin-auto-import": "^19.3.0",
49 |     "unplugin-vue-components": "^28.8.0",
50 |     "vite": "^6.3.5",
51 |     "vite-plugin-inspect": "^10.3.0",
52 |     "vite-plugin-mkcert": "^1.17.8",
53 |     "vue-tsc": "^2.2.12"
54 |   },
55 |   "engines": {
56 |     "node": ">=20.10"
57 |   },
58 |   "prettier": "@sxzz/prettier-config"
59 | }
60 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <!-- eslint-disable no-useless-escape -->
  2 | <script setup lang="ts">
  3 | import { Repl } from '@vue/repl'
  4 | import Monaco from '@vue/repl/monaco-editor'
  5 | import { useStore } from './composables/store'
  6 | 
  7 | const loading = ref(true)
  8 | const replRef = ref<InstanceType<typeof Repl>>()
  9 | 
 10 | const AUTO_SAVE_KEY = 'auto-save-state'
 11 | function getAutoSaveState() {
 12 |   return JSON.parse(localStorage.getItem(AUTO_SAVE_KEY) || 'true')
 13 | }
 14 | function setAutoSaveState(value: boolean) {
 15 |   localStorage.setItem(AUTO_SAVE_KEY, JSON.stringify(value))
 16 | }
 17 | 
 18 | const autoSave = ref(getAutoSaveState())
 19 | 
 20 | const previewOptions = {
 21 |   headHTML: `
 22 |     <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"><\/script>
 23 |     <script>
 24 |       window.__unocss = {
 25 |         rules: [],
 26 |         presets: [],
 27 |       }
 28 |     <\/script>
 29 |   `,
 30 | }
 31 | 
 32 | const dark = useDark()
 33 | 
 34 | const theme = new URLSearchParams(location.search).get('theme')
 35 | if (theme === 'dark') {
 36 |   dark.value = true
 37 | }
 38 | 
 39 | const store = useStore({
 40 |   serializedState: location.hash.slice(1),
 41 |   initialized: () => {
 42 |     loading.value = false
 43 |   },
 44 | })
 45 | 
 46 | // eslint-disable-next-line no-console
 47 | console.log('Store:', store)
 48 | 
 49 | const handleKeydown = (evt: KeyboardEvent) => {
 50 |   if ((evt.ctrlKey || evt.metaKey) && evt.code === 'KeyS') {
 51 |     evt.preventDefault()
 52 |     return
 53 |   }
 54 | }
 55 | 
 56 | // persist state
 57 | watchEffect(() =>
 58 |   history.replaceState(
 59 |     {},
 60 |     '',
 61 |     `${location.origin}${location.pathname}#${store.serialize()}`,
 62 |   ),
 63 | )
 64 | 
 65 | const refreshPreview = () => {
 66 |   replRef.value?.reload()
 67 | }
 68 | 
 69 | watch(autoSave, setAutoSaveState)
 70 | </script>
 71 | 
 72 | <template>
 73 |   <div v-if="!loading" antialiased>
 74 |     <Header :store="store" @refresh="refreshPreview" />
 75 |     <Repl
 76 |       ref="replRef"
 77 |       v-model="autoSave"
 78 |       :theme="dark ? 'dark' : 'light'"
 79 |       :preview-theme="true"
 80 |       :store="store"
 81 |       :editor="Monaco"
 82 |       :preview-options="previewOptions"
 83 |       :clear-console="false"
 84 |       @keydown="handleKeydown"
 85 |     />
 86 |   </div>
 87 |   <template v-else>
 88 |     <div v-loading="{ text: 'Loading...' }" h-100vh />
 89 |   </template>
 90 | </template>
 91 | 
 92 | <style>
 93 | body {
 94 |   --at-apply: m-none text-13px;
 95 |   font-family:
 96 |     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 97 |     Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 98 |   --base: #444;
 99 |   --nav-height: 50px;
100 | }
101 | 
102 | .vue-repl {
103 |   height: calc(100vh - var(--nav-height)) !important;
104 | }
105 | 
106 | .dark .vue-repl,
107 | .vue-repl {
108 |   --color-branding: var(--el-color-primary) !important;
109 | }
110 | 
111 | .dark body {
112 |   background-color: #1a1a1a;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import fs from 'node:fs'
 2 | import path from 'node:path'
 3 | import vue from '@vitejs/plugin-vue'
 4 | import replPkg from '@vue/repl/package.json' with { type: 'json' }
 5 | import Unocss from 'unocss/vite'
 6 | import AutoImport from 'unplugin-auto-import/vite'
 7 | import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 8 | import Components from 'unplugin-vue-components/vite'
 9 | import { defineConfig } from 'vite'
10 | import Inspect from 'vite-plugin-inspect'
11 | import Mkcert from 'vite-plugin-mkcert'
12 | import pkg from './package.json' with { type: 'json' }
13 | 
14 | const pathSrc = path.resolve(__dirname, 'src')
15 | 
16 | export default defineConfig({
17 |   resolve: {
18 |     alias: {
19 |       '@': pathSrc,
20 |     },
21 |   },
22 |   define: {
23 |     'import.meta.env.APP_VERSION': JSON.stringify(pkg.version),
24 |     'import.meta.env.REPL_VERSION': JSON.stringify(replPkg.version),
25 |   },
26 |   build: {
27 |     rollupOptions: {
28 |       external: ['typescript'],
29 |     },
30 |   },
31 |   server: {
32 |     host: true,
33 |   },
34 |   plugins: [
35 |     {
36 |       name: 'vue.worker',
37 |       transform(code, id) {
38 |         if (id.includes('vue.worker')) {
39 |           return {
40 |             code: patchVueWorker(code),
41 |             map: null,
42 |           }
43 |         }
44 |       },
45 |       generateBundle(_, bundle) {
46 |         for (const [fileName, file] of Object.entries(bundle)) {
47 |           if (fileName.includes('vue.worker')) {
48 |             // @ts-ignore
49 |             file.source = patchVueWorker(file.source.toString())
50 |             break
51 |           }
52 |         }
53 |       },
54 |     },
55 |     vue({
56 |       script: {
57 |         defineModel: true,
58 |         propsDestructure: true,
59 |         fs: {
60 |           fileExists: fs.existsSync,
61 |           readFile: (file) => fs.readFileSync(file, 'utf-8'),
62 |         },
63 |       },
64 |     }),
65 |     AutoImport({
66 |       dirs: [path.resolve(pathSrc, 'composables')],
67 |       imports: ['vue', '@vueuse/core'],
68 |       resolvers: [ElementPlusResolver()],
69 |       dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
70 |     }),
71 |     Components({
72 |       dirs: [path.resolve(pathSrc, 'components')],
73 |       resolvers: [ElementPlusResolver()],
74 |       dts: path.resolve(pathSrc, 'components.d.ts'),
75 |     }),
76 |     Unocss(),
77 |     Mkcert(),
78 |     Inspect(),
79 |   ],
80 |   optimizeDeps: {
81 |     exclude: ['@vue/repl'],
82 |   },
83 | })
84 | 
85 | function patchVueWorker(code: string) {
86 |   return `${code}
87 |     const pr = new URL(location.href).searchParams.get('pr')
88 |     if(pr) {
89 |       const _fetch = self.fetch
90 |       self.fetch = (...args) => {
91 |         const shouldReplace = args[0].startsWith("https://cdn.jsdelivr.net/npm/element-plus/es/")
92 |         if(shouldReplace) { args[0] = args[0].replace("https://cdn.jsdelivr.net/npm/element-plus", \`https://preview-\${pr}-element-plus.surge.sh/bundle\`) }
93 |         return _fetch(...args)
94 |       }
95 |     }`
96 | }
97 | 


--------------------------------------------------------------------------------
/src/utils/dependency.ts:
--------------------------------------------------------------------------------
  1 | import { gte } from 'semver'
  2 | import type { Versions } from '@/composables/store'
  3 | import type { ImportMap } from '@vue/repl'
  4 | import type { MaybeRef } from '@vueuse/core'
  5 | import type { Ref } from 'vue'
  6 | 
  7 | export interface Dependency {
  8 |   pkg?: string
  9 |   version?: string
 10 |   path: string
 11 | }
 12 | 
 13 | export type Cdn = 'unpkg' | 'jsdelivr' | 'jsdelivr-fastly'
 14 | export const cdn = useLocalStorage<Cdn>('setting-cdn', 'jsdelivr')
 15 | 
 16 | export const genCdnLink = (
 17 |   pkg: string,
 18 |   version: string | undefined,
 19 |   path: string,
 20 | ) => {
 21 |   version = version ? `@${version}` : ''
 22 |   switch (cdn.value) {
 23 |     case 'jsdelivr':
 24 |       return `https://cdn.jsdelivr.net/npm/${pkg}${version}${path}`
 25 |     case 'jsdelivr-fastly':
 26 |       return `https://fastly.jsdelivr.net/npm/${pkg}${version}${path}`
 27 |     case 'unpkg':
 28 |       return `https://unpkg.com/${pkg}${version}${path}`
 29 |   }
 30 | }
 31 | 
 32 | export const genCompilerSfcLink = (version: string) => {
 33 |   return genCdnLink(
 34 |     '@vue/compiler-sfc',
 35 |     version,
 36 |     '/dist/compiler-sfc.esm-browser.js',
 37 |   )
 38 | }
 39 | 
 40 | export const getExtraPackages = () => {
 41 |   return new URLSearchParams(location.search).get('extra_packages')
 42 | }
 43 | 
 44 | export const genImportMap = (
 45 |   { vue, elementPlus }: Partial<Versions> = {},
 46 |   nightly: boolean,
 47 | ): ImportMap => {
 48 |   const deps: Record<string, Dependency> = {
 49 |     vue: {
 50 |       pkg: '@vue/runtime-dom',
 51 |       version: vue,
 52 |       path: '/dist/runtime-dom.esm-browser.js',
 53 |     },
 54 |     '@vue/shared': {
 55 |       version: vue,
 56 |       path: '/dist/shared.esm-bundler.js',
 57 |     },
 58 |     'element-plus': {
 59 |       pkg: nightly ? '@element-plus/nightly' : 'element-plus',
 60 |       version: elementPlus,
 61 |       path: '/dist/index.full.min.mjs',
 62 |     },
 63 |     'element-plus/': {
 64 |       pkg: 'element-plus',
 65 |       version: elementPlus,
 66 |       path: '/',
 67 |     },
 68 |     '@element-plus/icons-vue': {
 69 |       version: '2',
 70 |       path: '/dist/index.min.js',
 71 |     },
 72 |   }
 73 | 
 74 |   const extraPackages = getExtraPackages()
 75 |   if (extraPackages === '@vueuse/core') {
 76 |     Object.assign(deps, {
 77 |       '@vueuse/core': {
 78 |         version: 'latest',
 79 |         path: '/dist/index.js',
 80 |       },
 81 |       '@vueuse/shared': {
 82 |         version: 'latest',
 83 |         path: '/dist/index.js',
 84 |       },
 85 |     })
 86 |   }
 87 | 
 88 |   return {
 89 |     imports: Object.fromEntries(
 90 |       Object.entries(deps).map(([key, dep]) => [
 91 |         key,
 92 |         genCdnLink(dep.pkg ?? key, dep.version, dep.path),
 93 |       ]),
 94 |     ),
 95 |   }
 96 | }
 97 | 
 98 | export const getVersions = (pkg: MaybeRef<string>) => {
 99 |   const url = computed(
100 |     () => `https://data.jsdelivr.com/v1/package/npm/${unref(pkg)}`,
101 |   )
102 |   return useFetch(url, {
103 |     initialData: [],
104 |     afterFetch: (ctx) => ((ctx.data = ctx.data.versions), ctx),
105 |     refetch: true,
106 |   }).json<string[]>().data as Ref<string[]>
107 | }
108 | 
109 | export const getSupportedVueVersions = () => {
110 |   const versions = getVersions('vue')
111 |   return computed(() =>
112 |     versions.value.filter((version) => gte(version, '3.2.0')),
113 |   )
114 | }
115 | 
116 | export const getSupportedTSVersions = () => {
117 |   const versions = getVersions('typescript')
118 |   return computed(() =>
119 |     versions.value.filter(
120 |       (version) => !version.includes('dev') && !version.includes('insiders'),
121 |     ),
122 |   )
123 | }
124 | 
125 | export const getSupportedEpVersions = (nightly: MaybeRef<boolean>) => {
126 |   const pkg = computed(() =>
127 |     unref(nightly) ? '@element-plus/nightly' : 'element-plus',
128 |   )
129 |   const versions = getVersions(pkg)
130 |   return computed(() => {
131 |     if (unref(nightly)) return versions.value
132 |     return versions.value.filter((version) => gte(version, '1.1.0-beta.18'))
133 |   })
134 | }
135 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { languageToolsVersion } from '@vue/repl'
  3 | import {
  4 |   getSupportedEpVersions,
  5 |   getSupportedTSVersions,
  6 |   getSupportedVueVersions,
  7 | } from '@/utils/dependency'
  8 | import type { Store, VersionKey } from '@/composables/store'
  9 | import type { Ref } from 'vue'
 10 | 
 11 | const appVersion = import.meta.env.APP_VERSION
 12 | const replVersion = import.meta.env.REPL_VERSION
 13 | 
 14 | const emit = defineEmits<{
 15 |   (e: 'refresh'): void
 16 |   (e: 'reset'): void
 17 | }>()
 18 | const nightly = ref(false)
 19 | const showReset = ref(false)
 20 | const dark = useDark()
 21 | const toggleDark = useToggle(dark)
 22 | 
 23 | const { store } = defineProps<{
 24 |   store: Store
 25 | }>()
 26 | 
 27 | interface Version {
 28 |   text: string
 29 |   published: Ref<string[]>
 30 |   active: string
 31 | }
 32 | 
 33 | const versions = reactive<Record<VersionKey, Version>>({
 34 |   elementPlus: {
 35 |     text: 'Element Plus',
 36 |     published: getSupportedEpVersions(nightly),
 37 |     active: store.versions.elementPlus,
 38 |   },
 39 |   vue: {
 40 |     text: 'Vue',
 41 |     published: getSupportedVueVersions(),
 42 |     active: store.versions.vue,
 43 |   },
 44 |   typescript: {
 45 |     text: 'TypeScript',
 46 |     published: getSupportedTSVersions(),
 47 |     active: store.versions.typescript,
 48 |   },
 49 | })
 50 | 
 51 | async function setVersion(key: VersionKey, v: string) {
 52 |   versions[key].active = `loading...`
 53 |   await store.setVersion(key, v)
 54 |   versions[key].active = v
 55 | }
 56 | 
 57 | const toggleNightly = () => {
 58 |   store.toggleNightly(nightly.value)
 59 |   setVersion('elementPlus', 'latest')
 60 | }
 61 | 
 62 | async function copyLink() {
 63 |   await navigator.clipboard.writeText(location.href)
 64 |   ElMessage.success('Sharable URL has been copied to clipboard.')
 65 | }
 66 | 
 67 | function refreshView() {
 68 |   emit('refresh')
 69 | }
 70 | function resetFiles() {
 71 |   showReset.value = false
 72 |   store.resetFiles()
 73 | }
 74 | </script>
 75 | 
 76 | <template>
 77 |   <nav>
 78 |     <div leading="[var(--nav-height)]" m-0 flex items-center font-medium>
 79 |       <img
 80 |         relative
 81 |         mr-2
 82 |         h-24px
 83 |         v="mid"
 84 |         top="-2px"
 85 |         alt="logo"
 86 |         src="../assets/logo.svg"
 87 |       />
 88 |       <div flex="~ gap-1" items-center lt-sm-hidden>
 89 |         <div text-xl>Element Plus Playground</div>
 90 |         <el-tag size="small"
 91 |           >v{{ appVersion }}, repl v{{ replVersion }}, language tools v{{
 92 |             languageToolsVersion
 93 |           }}</el-tag
 94 |         >
 95 |         <div flex="~ col gap-1">
 96 |           <el-tag v-if="store.pr" size="small">
 97 |             <el-link
 98 |               type="primary"
 99 |               :href="`https://github.com/element-plus/element-plus/pull/${store.pr}`"
100 |               >PR {{ store.pr }}</el-link
101 |             >
102 |           </el-tag>
103 |           <el-tag v-if="store.vuePr" size="small">
104 |             <el-link
105 |               type="primary"
106 |               :href="`https://github.com/vuejs/core/pull/${store.vuePr}`"
107 |               >Vue PR {{ store.vuePr }}</el-link
108 |             >
109 |           </el-tag>
110 |         </div>
111 |       </div>
112 |     </div>
113 | 
114 |     <div flex="~ gap-2" items-center>
115 |       <div
116 |         v-for="(v, key) of versions"
117 |         :key="key"
118 |         flex="~ gap-2"
119 |         items-center
120 |         lt-lg-hidden
121 |       >
122 |         <span>{{ v.text }}:</span>
123 |         <el-select
124 |           :model-value="v.active"
125 |           filterable
126 |           size="small"
127 |           fit-input-width
128 |           w-36
129 |           @update:model-value="setVersion(key, $event)"
130 |         >
131 |           <template v-if="key === 'elementPlus'" #header>
132 |             <div flex="~ items-center">
133 |               <el-checkbox v-model="nightly" @change="toggleNightly">
134 |                 nightly
135 |               </el-checkbox>
136 |               <el-tooltip
137 |                 placement="top"
138 |                 content="A release of the development branch that is published every night."
139 |               >
140 |                 <div
141 |                   i-ri-question-line
142 |                   ml-1
143 |                   h-4
144 |                   w-4
145 |                   cursor-pointer
146 |                   hover:color-primary
147 |                 />
148 |               </el-tooltip>
149 |             </div>
150 |           </template>
151 |           <el-option v-for="ver of v.published" :key="ver" :value="ver">
152 |             {{ ver }}
153 |           </el-option>
154 |         </el-select>
155 |       </div>
156 | 
157 |       <div flex="~ gap-4" text-lg>
158 |         <el-popover
159 |           v-model:visible="showReset"
160 |           popper-class="flex flex-col gap-1"
161 |           trigger="click"
162 |           width="200px"
163 |         >
164 |           <div flex justify-center>Want to reset the editor ?</div>
165 |           <el-button flex self-end size="small" plain @click="resetFiles">
166 |             Yes
167 |           </el-button>
168 |           <template #reference>
169 |             <button i-ri-delete-bin-line hover:color-primary />
170 |           </template>
171 |         </el-popover>
172 |         <button
173 |           i-ri-refresh-line
174 |           title="Refresh sandbox"
175 |           hover:color-primary
176 |           @click="refreshView"
177 |         />
178 |         <button
179 |           i-ri-share-line
180 |           title="Copy link"
181 |           hover:color-primary
182 |           @click="copyLink"
183 |         />
184 |         <button
185 |           i-ri-sun-line
186 |           title="Toggle theme"
187 |           dark:i-ri-moon-line
188 |           hover:color-primary
189 |           @click="toggleDark()"
190 |         />
191 |         <a
192 |           href="https://github.com/element-plus/element-plus-playground"
193 |           target="_blank"
194 |           flex
195 |           hover:color-primary
196 |         >
197 |           <button title="View on GitHub" i-ri-github-fill />
198 |         </a>
199 | 
200 |         <el-popover trigger="click" width="300px">
201 |           <Settings />
202 |           <template #reference>
203 |             <button i-ri:settings-line title="cdn" hover:color-primary />
204 |           </template>
205 |         </el-popover>
206 |       </div>
207 |     </div>
208 |   </nav>
209 | </template>
210 | 
211 | <style lang="scss">
212 | nav {
213 |   --bg: #fff;
214 |   --bg-light: #fff;
215 |   --border: #ddd;
216 | 
217 |   --at-apply: 'box-border flex justify-between px-4 z-999 relative';
218 | 
219 |   height: var(--nav-height);
220 |   background-color: var(--bg);
221 |   box-shadow: 0 0 6px var(--el-color-primary);
222 | 
223 |   .el-select {
224 |     width: 140px;
225 |   }
226 | }
227 | 
228 | .dark nav {
229 |   --bg: #1a1a1a;
230 |   --bg-light: #242424;
231 |   --border: #383838;
232 | 
233 |   --at-apply: 'shadow-none';
234 |   border-bottom: 1px solid var(--border);
235 | }
236 | </style>
237 | 


--------------------------------------------------------------------------------
/src/composables/store.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   compileFile as originalCompileFile,
  3 |   File,
  4 |   mergeImportMap,
  5 |   useStore as useReplStore,
  6 |   type ImportMap,
  7 |   type StoreState,
  8 |   type ReplStore,
  9 | } from '@vue/repl'
 10 | import { objectOmit } from '@vueuse/core'
 11 | import { IS_DEV } from '@/constants'
 12 | import {
 13 |   genCdnLink,
 14 |   genCompilerSfcLink,
 15 |   genImportMap,
 16 | } from '@/utils/dependency'
 17 | import { atou, utoa } from '@/utils/encode'
 18 | import elementPlusCode from '../template/element-plus.js?raw'
 19 | import mainCode from '../template/main.vue?raw'
 20 | import tsconfigCode from '../template/tsconfig.json?raw'
 21 | import welcomeCode from '../template/welcome.vue?raw'
 22 | 
 23 | export interface Initial {
 24 |   serializedState?: string
 25 |   initialized?: () => void
 26 | }
 27 | export type VersionKey = 'vue' | 'elementPlus' | 'typescript'
 28 | export type Versions = Record<VersionKey, string>
 29 | export interface UserOptions {
 30 |   styleSource?: string
 31 |   showHidden?: boolean
 32 |   vueVersion?: string
 33 |   tsVersion?: string
 34 |   epVersion?: string
 35 |   vuePr?: string
 36 | }
 37 | export type SerializeState = Record<string, string> & {
 38 |   _o?: UserOptions
 39 | }
 40 | 
 41 | const MAIN_FILE = 'src/PlaygroundMain.vue'
 42 | const APP_FILE = 'src/App.vue'
 43 | const ELEMENT_PLUS_FILE = 'src/element-plus.js'
 44 | const LEGACY_IMPORT_MAP = 'src/import_map.json'
 45 | export const IMPORT_MAP = 'import-map.json'
 46 | export const TSCONFIG = 'tsconfig.json'
 47 | 
 48 | export const useStore = (initial: Initial) => {
 49 |   const saved: SerializeState | undefined = initial.serializedState
 50 |     ? deserialize(initial.serializedState)
 51 |     : undefined
 52 |   const pr =
 53 |     new URLSearchParams(location.search).get('pr') ||
 54 |     saved?._o?.styleSource?.split('-', 2)[1]
 55 |   const prUrl = `https://preview-${pr}-element-plus.surge.sh/bundle/dist`
 56 |   const vuePr =
 57 |     new URLSearchParams(location.search).get('vue') || saved?._o?.vuePr
 58 |   const vuePrUrl = `https://esm.sh/pr`
 59 | 
 60 |   const versions = reactive<Versions>({
 61 |     vue: saved?._o?.vueVersion ?? 'latest',
 62 |     elementPlus: pr ? 'preview' : (saved?._o?.epVersion ?? 'latest'),
 63 |     typescript: saved?._o?.tsVersion ?? 'latest',
 64 |   })
 65 |   const userOptions: UserOptions = {}
 66 |   if (pr) {
 67 |     Object.assign(userOptions, {
 68 |       showHidden: true,
 69 |       styleSource: `${prUrl}/index.css`,
 70 |     })
 71 |   }
 72 |   if (vuePr) {
 73 |     Object.assign(userOptions, {
 74 |       vuePr,
 75 |     })
 76 |   }
 77 |   Object.assign(userOptions, {
 78 |     vueVersion: saved?._o?.vueVersion,
 79 |     tsVersion: saved?._o?.tsVersion,
 80 |     epVersion: saved?._o?.epVersion,
 81 |   })
 82 |   const hideFile = !IS_DEV && !userOptions.showHidden
 83 | 
 84 |   if (pr) useWorker(pr)
 85 |   const [nightly, toggleNightly] = useToggle(false)
 86 |   const builtinImportMap = computed<ImportMap>(() => {
 87 |     let importMap = genImportMap(versions, nightly.value)
 88 |     if (pr)
 89 |       importMap = mergeImportMap(importMap, {
 90 |         imports: {
 91 |           'element-plus': `${prUrl}/index.full.min.mjs`,
 92 |           'element-plus/': 'unsupported',
 93 |         },
 94 |       })
 95 | 
 96 |     if (vuePr)
 97 |       importMap = mergeImportMap(importMap, {
 98 |         imports: {
 99 |           vue: `${vuePrUrl}/vue@${vuePr}`,
100 |           '@vue/shared': `${vuePrUrl}/@vue/shared@${vuePr}`,
101 |         },
102 |       })
103 |     return importMap
104 |   })
105 | 
106 |   const storeState: Partial<StoreState> = toRefs(
107 |     reactive({
108 |       files: initFiles(),
109 |       mainFile: MAIN_FILE,
110 |       activeFilename: APP_FILE,
111 |       vueVersion: computed(() => versions.vue),
112 |       typescriptVersion: versions.typescript,
113 |       builtinImportMap,
114 |       template: {
115 |         welcomeSFC: mainCode,
116 |       },
117 |       sfcOptions: {
118 |         script: {
119 |           propsDestructure: true,
120 |         },
121 |       },
122 |     }),
123 |   )
124 |   const store = useReplStore(storeState)
125 |   store.files[ELEMENT_PLUS_FILE].hidden = hideFile
126 |   store.files[MAIN_FILE].hidden = hideFile
127 |   setVueVersion(versions.vue).then(() => {
128 |     initial.initialized?.()
129 |   })
130 | 
131 |   watch(
132 |     () => versions.elementPlus,
133 |     (version) => {
134 |       store.files[ELEMENT_PLUS_FILE].code = generateElementPlusCode(
135 |         version,
136 |         userOptions.styleSource,
137 |       ).trim()
138 |       compileFile(store, store.files[ELEMENT_PLUS_FILE]).then(
139 |         (errs) => (store.errors = errs),
140 |       )
141 |     },
142 |   )
143 |   watch(
144 |     builtinImportMap,
145 |     (newBuiltinImportMap) => {
146 |       const importMap = JSON.parse(store.files[IMPORT_MAP].code)
147 |       store.files[IMPORT_MAP].code = JSON.stringify(
148 |         mergeImportMap(importMap, newBuiltinImportMap),
149 |         undefined,
150 |         2,
151 |       )
152 |     },
153 |     { deep: true },
154 |   )
155 | 
156 |   function generateElementPlusCode(version: string, styleSource?: string) {
157 |     const style = styleSource
158 |       ? styleSource.replace('#VERSION#', version)
159 |       : genCdnLink(
160 |           nightly.value ? '@element-plus/nightly' : 'element-plus',
161 |           version,
162 |           '/dist/index.css',
163 |         )
164 |     const darkStyle = style.replace(
165 |       '/dist/index.css',
166 |       '/theme-chalk/dark/css-vars.css',
167 |     )
168 |     return elementPlusCode
169 |       .replace('#STYLE#', style)
170 |       .replace('#DARKSTYLE#', darkStyle)
171 |   }
172 |   function init() {
173 |     watchEffect(() => {
174 |       compileFile(store, store.activeFile).then((errs) => (store.errors = errs))
175 |     })
176 |     for (const [filename, file] of Object.entries(store.files)) {
177 |       if (filename === store.activeFilename) continue
178 |       compileFile(store, file).then((errs) => store.errors.push(...errs))
179 |     }
180 | 
181 |     watch(
182 |       () => [
183 |         store.files[TSCONFIG]?.code,
184 |         store.typescriptVersion,
185 |         store.locale,
186 |         store.dependencyVersion,
187 |         store.vueVersion,
188 |       ],
189 |       useDebounceFn(() => store.reloadLanguageTools?.(), 300),
190 |       { deep: true },
191 |     )
192 |   }
193 |   function serialize() {
194 |     const state: SerializeState = { ...store.getFiles() }
195 |     state._o = userOptions
196 |     return utoa(JSON.stringify(state))
197 |   }
198 |   function deserialize(text: string): SerializeState {
199 |     const state = JSON.parse(atou(text))
200 |     return state
201 |   }
202 |   function initFiles() {
203 |     const files: Record<string, File> = Object.create(null)
204 |     if (saved) {
205 |       for (let [filename, file] of Object.entries(objectOmit(saved, ['_o']))) {
206 |         if (
207 |           ![IMPORT_MAP, TSCONFIG].includes(filename) &&
208 |           !filename.startsWith('src/')
209 |         ) {
210 |           filename = `src/${filename}`
211 |         }
212 |         if (filename === LEGACY_IMPORT_MAP) {
213 |           filename = IMPORT_MAP
214 |         }
215 |         files[filename] = new File(filename, file as string)
216 |       }
217 |     } else {
218 |       files[APP_FILE] = new File(APP_FILE, welcomeCode)
219 |     }
220 |     if (!files[ELEMENT_PLUS_FILE]) {
221 |       files[ELEMENT_PLUS_FILE] = new File(
222 |         ELEMENT_PLUS_FILE,
223 |         generateElementPlusCode(versions.elementPlus, userOptions.styleSource),
224 |       )
225 |     }
226 |     if (!files[TSCONFIG]) {
227 |       files[TSCONFIG] = new File(TSCONFIG, tsconfigCode)
228 |     }
229 |     return files
230 |   }
231 |   async function setVueVersion(version: string) {
232 |     store.compiler = await import(
233 |       /* @vite-ignore */ genCompilerSfcLink(version)
234 |     )
235 |     versions.vue = version
236 |   }
237 |   async function setVersion(key: VersionKey, version: string) {
238 |     switch (key) {
239 |       case 'vue':
240 |         userOptions.vueVersion = version
241 |         await setVueVersion(version)
242 |         break
243 |       case 'elementPlus':
244 |         versions.elementPlus = version
245 |         userOptions.epVersion = version
246 |         break
247 |       case 'typescript':
248 |         store.typescriptVersion = version
249 |         userOptions.tsVersion = version
250 |         break
251 |     }
252 |   }
253 |   async function compileFile(store: ReplStore, file: File) {
254 |     const errs = await originalCompileFile(store, file)
255 |     if (userOptions.vueVersion?.startsWith('3.2')) {
256 |       file.compiled.js = file.compiled.js.replace(
257 |         /export default (?!__sfc__)/,
258 |         'const __sfc__ = ',
259 |       )
260 |     }
261 | 
262 |     return errs
263 |   }
264 | 
265 |   const resetFiles = () => {
266 |     const { files, addFile } = store
267 | 
268 |     const isRandomFile = (filename: string) =>
269 |       ![MAIN_FILE, TSCONFIG, IMPORT_MAP, ELEMENT_PLUS_FILE].includes(filename)
270 |     for (const filename in files)
271 |       if (isRandomFile(filename)) delete files[filename]
272 | 
273 |     const appFile = new File(APP_FILE, welcomeCode, false)
274 |     addFile(appFile)
275 |   }
276 | 
277 |   const utils = {
278 |     versions,
279 |     pr,
280 |     setVersion,
281 |     toggleNightly,
282 |     serialize,
283 |     init,
284 |     vuePr,
285 |     resetFiles,
286 |   }
287 |   Object.assign(store, utils)
288 | 
289 |   return store as typeof store & typeof utils
290 | }
291 | 
292 | function useWorker(pr: string) {
293 |   const _worker = window.Worker
294 |   window.Worker = class extends _worker {
295 |     constructor(url: URL | string, options?: WorkerOptions) {
296 |       if (typeof url === 'string' && url.includes('vue.worker')) {
297 |         url = `${url}?pr=${pr}`
298 |       }
299 |       super(url, options)
300 |     }
301 |   }
302 | }
303 | 
304 | export type Store = ReturnType<typeof useStore>
305 | 


--------------------------------------------------------------------------------
/src/auto-imports.d.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /* prettier-ignore */
  3 | // @ts-nocheck
  4 | // noinspection JSUnusedGlobalSymbols
  5 | // Generated by unplugin-auto-import
  6 | // biome-ignore lint: disable
  7 | export {}
  8 | declare global {
  9 |   const EffectScope: typeof import('vue')['EffectScope']
 10 |   const ElMessage: typeof import('element-plus/es')['ElMessage']
 11 |   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
 12 |   const IMPORT_MAP: typeof import('./composables/store')['IMPORT_MAP']
 13 |   const LEGACY_IMPORT_MAP: typeof import('./composables/store')['LEGACY_IMPORT_MAP']
 14 |   const TSCONFIG: typeof import('./composables/store')['TSCONFIG']
 15 |   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
 16 |   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
 17 |   const computed: typeof import('vue')['computed']
 18 |   const computedAsync: typeof import('@vueuse/core')['computedAsync']
 19 |   const computedEager: typeof import('@vueuse/core')['computedEager']
 20 |   const computedInject: typeof import('@vueuse/core')['computedInject']
 21 |   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
 22 |   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
 23 |   const controlledRef: typeof import('@vueuse/core')['controlledRef']
 24 |   const createApp: typeof import('vue')['createApp']
 25 |   const createEventHook: typeof import('@vueuse/core')['createEventHook']
 26 |   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
 27 |   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
 28 |   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
 29 |   const createRef: typeof import('@vueuse/core')['createRef']
 30 |   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
 31 |   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
 32 |   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
 33 |   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
 34 |   const customRef: typeof import('vue')['customRef']
 35 |   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
 36 |   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
 37 |   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
 38 |   const defineComponent: typeof import('vue')['defineComponent']
 39 |   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
 40 |   const effectScope: typeof import('vue')['effectScope']
 41 |   const extendRef: typeof import('@vueuse/core')['extendRef']
 42 |   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
 43 |   const getCurrentScope: typeof import('vue')['getCurrentScope']
 44 |   const h: typeof import('vue')['h']
 45 |   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
 46 |   const inject: typeof import('vue')['inject']
 47 |   const injectLocal: typeof import('@vueuse/core')['injectLocal']
 48 |   const isDefined: typeof import('@vueuse/core')['isDefined']
 49 |   const isProxy: typeof import('vue')['isProxy']
 50 |   const isReactive: typeof import('vue')['isReactive']
 51 |   const isReadonly: typeof import('vue')['isReadonly']
 52 |   const isRef: typeof import('vue')['isRef']
 53 |   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
 54 |   const markRaw: typeof import('vue')['markRaw']
 55 |   const nextTick: typeof import('vue')['nextTick']
 56 |   const onActivated: typeof import('vue')['onActivated']
 57 |   const onBeforeMount: typeof import('vue')['onBeforeMount']
 58 |   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
 59 |   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
 60 |   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
 61 |   const onDeactivated: typeof import('vue')['onDeactivated']
 62 |   const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
 63 |   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
 64 |   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
 65 |   const onLongPress: typeof import('@vueuse/core')['onLongPress']
 66 |   const onMounted: typeof import('vue')['onMounted']
 67 |   const onRenderTracked: typeof import('vue')['onRenderTracked']
 68 |   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
 69 |   const onScopeDispose: typeof import('vue')['onScopeDispose']
 70 |   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
 71 |   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
 72 |   const onUnmounted: typeof import('vue')['onUnmounted']
 73 |   const onUpdated: typeof import('vue')['onUpdated']
 74 |   const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
 75 |   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
 76 |   const provide: typeof import('vue')['provide']
 77 |   const provideLocal: typeof import('@vueuse/core')['provideLocal']
 78 |   const reactify: typeof import('@vueuse/core')['reactify']
 79 |   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
 80 |   const reactive: typeof import('vue')['reactive']
 81 |   const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
 82 |   const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
 83 |   const reactivePick: typeof import('@vueuse/core')['reactivePick']
 84 |   const readonly: typeof import('vue')['readonly']
 85 |   const ref: typeof import('vue')['ref']
 86 |   const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
 87 |   const refDebounced: typeof import('@vueuse/core')['refDebounced']
 88 |   const refDefault: typeof import('@vueuse/core')['refDefault']
 89 |   const refThrottled: typeof import('@vueuse/core')['refThrottled']
 90 |   const refWithControl: typeof import('@vueuse/core')['refWithControl']
 91 |   const resolveComponent: typeof import('vue')['resolveComponent']
 92 |   const resolveRef: typeof import('@vueuse/core')['resolveRef']
 93 |   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
 94 |   const shallowReactive: typeof import('vue')['shallowReactive']
 95 |   const shallowReadonly: typeof import('vue')['shallowReadonly']
 96 |   const shallowRef: typeof import('vue')['shallowRef']
 97 |   const syncRef: typeof import('@vueuse/core')['syncRef']
 98 |   const syncRefs: typeof import('@vueuse/core')['syncRefs']
 99 |   const templateRef: typeof import('@vueuse/core')['templateRef']
100 |   const throttledRef: typeof import('@vueuse/core')['throttledRef']
101 |   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
102 |   const toRaw: typeof import('vue')['toRaw']
103 |   const toReactive: typeof import('@vueuse/core')['toReactive']
104 |   const toRef: typeof import('vue')['toRef']
105 |   const toRefs: typeof import('vue')['toRefs']
106 |   const toValue: typeof import('vue')['toValue']
107 |   const triggerRef: typeof import('vue')['triggerRef']
108 |   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
109 |   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
110 |   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
111 |   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
112 |   const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
113 |   const unref: typeof import('vue')['unref']
114 |   const unrefElement: typeof import('@vueuse/core')['unrefElement']
115 |   const until: typeof import('@vueuse/core')['until']
116 |   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
117 |   const useAnimate: typeof import('@vueuse/core')['useAnimate']
118 |   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
119 |   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
120 |   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
121 |   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
122 |   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
123 |   const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
124 |   const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
125 |   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
126 |   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
127 |   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
128 |   const useArraySome: typeof import('@vueuse/core')['useArraySome']
129 |   const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
130 |   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
131 |   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
132 |   const useAttrs: typeof import('vue')['useAttrs']
133 |   const useBase64: typeof import('@vueuse/core')['useBase64']
134 |   const useBattery: typeof import('@vueuse/core')['useBattery']
135 |   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
136 |   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
137 |   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
138 |   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
139 |   const useCached: typeof import('@vueuse/core')['useCached']
140 |   const useClipboard: typeof import('@vueuse/core')['useClipboard']
141 |   const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
142 |   const useCloned: typeof import('@vueuse/core')['useCloned']
143 |   const useColorMode: typeof import('@vueuse/core')['useColorMode']
144 |   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
145 |   const useCountdown: typeof import('@vueuse/core')['useCountdown']
146 |   const useCounter: typeof import('@vueuse/core')['useCounter']
147 |   const useCssModule: typeof import('vue')['useCssModule']
148 |   const useCssVar: typeof import('@vueuse/core')['useCssVar']
149 |   const useCssVars: typeof import('vue')['useCssVars']
150 |   const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
151 |   const useCycleList: typeof import('@vueuse/core')['useCycleList']
152 |   const useDark: typeof import('@vueuse/core')['useDark']
153 |   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
154 |   const useDebounce: typeof import('@vueuse/core')['useDebounce']
155 |   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
156 |   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
157 |   const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
158 |   const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
159 |   const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
160 |   const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
161 |   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
162 |   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
163 |   const useDraggable: typeof import('@vueuse/core')['useDraggable']
164 |   const useDropZone: typeof import('@vueuse/core')['useDropZone']
165 |   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
166 |   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
167 |   const useElementHover: typeof import('@vueuse/core')['useElementHover']
168 |   const useElementSize: typeof import('@vueuse/core')['useElementSize']
169 |   const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
170 |   const useEventBus: typeof import('@vueuse/core')['useEventBus']
171 |   const useEventListener: typeof import('@vueuse/core')['useEventListener']
172 |   const useEventSource: typeof import('@vueuse/core')['useEventSource']
173 |   const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
174 |   const useFavicon: typeof import('@vueuse/core')['useFavicon']
175 |   const useFetch: typeof import('@vueuse/core')['useFetch']
176 |   const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
177 |   const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
178 |   const useFocus: typeof import('@vueuse/core')['useFocus']
179 |   const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
180 |   const useFps: typeof import('@vueuse/core')['useFps']
181 |   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
182 |   const useGamepad: typeof import('@vueuse/core')['useGamepad']
183 |   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
184 |   const useId: typeof import('vue')['useId']
185 |   const useIdle: typeof import('@vueuse/core')['useIdle']
186 |   const useImage: typeof import('@vueuse/core')['useImage']
187 |   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
188 |   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
189 |   const useInterval: typeof import('@vueuse/core')['useInterval']
190 |   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
191 |   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
192 |   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
193 |   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
194 |   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
195 |   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
196 |   const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
197 |   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
198 |   const useMemoize: typeof import('@vueuse/core')['useMemoize']
199 |   const useMemory: typeof import('@vueuse/core')['useMemory']
200 |   const useModel: typeof import('vue')['useModel']
201 |   const useMounted: typeof import('@vueuse/core')['useMounted']
202 |   const useMouse: typeof import('@vueuse/core')['useMouse']
203 |   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
204 |   const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
205 |   const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
206 |   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
207 |   const useNetwork: typeof import('@vueuse/core')['useNetwork']
208 |   const useNow: typeof import('@vueuse/core')['useNow']
209 |   const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
210 |   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
211 |   const useOnline: typeof import('@vueuse/core')['useOnline']
212 |   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
213 |   const useParallax: typeof import('@vueuse/core')['useParallax']
214 |   const useParentElement: typeof import('@vueuse/core')['useParentElement']
215 |   const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
216 |   const usePermission: typeof import('@vueuse/core')['usePermission']
217 |   const usePointer: typeof import('@vueuse/core')['usePointer']
218 |   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
219 |   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
220 |   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
221 |   const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
222 |   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
223 |   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
224 |   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
225 |   const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
226 |   const usePrevious: typeof import('@vueuse/core')['usePrevious']
227 |   const useRafFn: typeof import('@vueuse/core')['useRafFn']
228 |   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
229 |   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
230 |   const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
231 |   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
232 |   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
233 |   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
234 |   const useScroll: typeof import('@vueuse/core')['useScroll']
235 |   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
236 |   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
237 |   const useShare: typeof import('@vueuse/core')['useShare']
238 |   const useSlots: typeof import('vue')['useSlots']
239 |   const useSorted: typeof import('@vueuse/core')['useSorted']
240 |   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
241 |   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
242 |   const useStepper: typeof import('@vueuse/core')['useStepper']
243 |   const useStorage: typeof import('@vueuse/core')['useStorage']
244 |   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
245 |   const useStore: typeof import('./composables/store')['useStore']
246 |   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
247 |   const useSupported: typeof import('@vueuse/core')['useSupported']
248 |   const useSwipe: typeof import('@vueuse/core')['useSwipe']
249 |   const useTemplateRef: typeof import('vue')['useTemplateRef']
250 |   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
251 |   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
252 |   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
253 |   const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
254 |   const useThrottle: typeof import('@vueuse/core')['useThrottle']
255 |   const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
256 |   const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
257 |   const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
258 |   const useTimeout: typeof import('@vueuse/core')['useTimeout']
259 |   const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
260 |   const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
261 |   const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
262 |   const useTitle: typeof import('@vueuse/core')['useTitle']
263 |   const useToNumber: typeof import('@vueuse/core')['useToNumber']
264 |   const useToString: typeof import('@vueuse/core')['useToString']
265 |   const useToggle: typeof import('@vueuse/core')['useToggle']
266 |   const useTransition: typeof import('@vueuse/core')['useTransition']
267 |   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
268 |   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
269 |   const useVModel: typeof import('@vueuse/core')['useVModel']
270 |   const useVModels: typeof import('@vueuse/core')['useVModels']
271 |   const useVibrate: typeof import('@vueuse/core')['useVibrate']
272 |   const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
273 |   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
274 |   const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
275 |   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
276 |   const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
277 |   const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
278 |   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
279 |   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
280 |   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
281 |   const watch: typeof import('vue')['watch']
282 |   const watchArray: typeof import('@vueuse/core')['watchArray']
283 |   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
284 |   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
285 |   const watchDeep: typeof import('@vueuse/core')['watchDeep']
286 |   const watchEffect: typeof import('vue')['watchEffect']
287 |   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
288 |   const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
289 |   const watchOnce: typeof import('@vueuse/core')['watchOnce']
290 |   const watchPausable: typeof import('@vueuse/core')['watchPausable']
291 |   const watchPostEffect: typeof import('vue')['watchPostEffect']
292 |   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
293 |   const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
294 |   const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
295 |   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
296 |   const whenever: typeof import('@vueuse/core')['whenever']
297 | }
298 | // for type re-export
299 | declare global {
300 |   // @ts-ignore
301 |   export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
302 |   import('vue')
303 |   // @ts-ignore
304 |   export type { Initial, VersionKey, Versions, UserOptions, SerializeState, Store } from './composables/store'
305 |   import('./composables/store')
306 | }
307 | 


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