├── .changeset
    ├── README.md
    └── config.json
├── .eslintrc
├── .gitattributes
├── .github
    └── workflows
    │   ├── npm-publish-github-packages.yml
    │   └── static.yml
├── .gitignore
├── .husky
    ├── commit-msg
    └── pre-commit
├── .npmrc
├── .vscode
    └── extensions.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── api-extractor.json
├── index.html
├── package.json
├── pnpm-lock.yaml
├── public
    └── vue.svg
├── src
    ├── App.vue
    ├── Header.vue
    ├── Message.vue
    ├── Repl.vue
    ├── SplitPane.vue
    ├── codemirror
    │   ├── CodeMirror.vue
    │   ├── codemirror.css
    │   └── codemirror.ts
    ├── editor
    │   ├── Editor.vue
    │   └── FileSelector.vue
    ├── env.d.ts
    ├── icons
    │   ├── Moon.vue
    │   ├── Share.vue
    │   └── Sun.vue
    ├── index.ts
    ├── main.ts
    ├── output
    │   ├── Output.vue
    │   ├── Preview.vue
    │   ├── PreviewProxy.ts
    │   ├── moduleCompiler.ts
    │   ├── srcdoc.html
    │   └── types.ts
    ├── store.ts
    ├── transform.ts
    └── utils.ts
├── ssr-stub.js
├── tsconfig.build.json
├── tsconfig.json
├── vite.config.docs.ts
└── vite.config.ts


/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 | 
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 | 
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 | 


--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://unpkg.com/@changesets/config@2.1.1/schema.json",
 3 |   "changelog": "@changesets/cli/changelog",
 4 |   "commit": false,
 5 |   "fixed": [],
 6 |   "linked": [],
 7 |   "access": "public",
 8 |   "baseBranch": "master",
 9 |   "updateInternalDependencies": "patch",
10 |   "ignore": []
11 | }


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "parser": "@typescript-eslint/parser",
 3 |     "plugins": [
 4 |         "@typescript-eslint"
 5 |     ],
 6 |     "rules": {
 7 |         "no-var": "error", // 不能使用var声明变量
 8 |         "no-extra-semi": "error",
 9 |         "@typescript-eslint/indent": [
10 |             "error",
11 |             2
12 |         ],
13 |         "import/extensions": "off",
14 |         "linebreak-style": [
15 |             0,
16 |             "error",
17 |             "windows"
18 |         ],
19 |         "indent": [
20 |             "error",
21 |             2,
22 |             {
23 |                 "SwitchCase": 1
24 |             }
25 |         ], // error类型，缩进2个空格
26 |         "space-before-function-paren": 0, // 在函数左括号的前面是否有空格
27 |         "eol-last": 0, // 不检测新文件末尾是否有空行
28 |         "semi": [
29 |             "error",
30 |             "always"
31 |         ], // 在语句后面加分号
32 |         "quotes": [
33 |             "error",
34 |             "single"
35 |         ], // 字符串使用单双引号,double,single
36 |         "no-console": [
37 |             "error",
38 |             {
39 |                 "allow": [
40 |                     "log",
41 |                     "warn"
42 |                 ]
43 |             }
44 |         ], // 允许使用console.log()
45 |         "arrow-parens": 0,
46 |         "no-new": 0, //允许使用 new 关键字
47 |         "comma-dangle": [
48 |             2,
49 |             "never"
50 |         ], // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，always-multiline多行模式必须带逗号，单行模式不能带逗号
51 |         "no-undef": 0
52 |     },
53 |     "parserOptions": {
54 |         "ecmaVersion": 6,
55 |         "sourceType": "module",
56 |         "ecmaFeatures": {
57 |             "modules": true
58 |         }
59 |     }
60 | }


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish-github-packages.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 2 | # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 3 | 
 4 | name: Node.js Package
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version: 16
18 | 
19 |   publish-gpr:
20 |     needs: build
21 |     runs-on: ubuntu-latest
22 |     permissions:
23 |       contents: read
24 |       packages: write
25 |     steps:
26 |       - uses: actions/checkout@v3
27 |       - uses: actions/setup-node@v3
28 |         with:
29 |           node-version: 16
30 |           registry-url: https://npm.pkg.github.com/
31 |       - run: npm ci
32 |       - run: npm publish
33 |         env:
34 |           NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
35 | 


--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["master"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow one concurrent deployment
19 | concurrency:
20 |   group: "pages"
21 |   cancel-in-progress: true
22 | 
23 | jobs:
24 |   # Single deploy job since we're just deploying
25 |   deploy:
26 |     environment:
27 |       name: github-pages
28 |       url: ${{ steps.deployment.outputs.page_url }}
29 |     runs-on: ubuntu-latest
30 |     steps:
31 |       - name: Checkout
32 |         uses: actions/checkout@v3
33 |       - name: Setup Node
34 |         uses: actions/setup-node@v3.6.0
35 |         with:
36 |           node-version: '18.x'
37 |       - name: Setup pnpm
38 |         uses: pnpm/action-setup@v2.2.4
39 |         with:
40 |           run_install: true
41 |       - name: Install Dependencies
42 |         run: |
43 |           pnpm install
44 |           pnpm docs:build
45 |       - name: Setup Pages
46 |         uses: actions/configure-pages@v3
47 |       - name: Upload artifact
48 |         uses: actions/upload-pages-artifact@v1
49 |         with:
50 |           # Upload entire repository
51 |           path: './docs'
52 |       - name: Deploy to GitHub Pages
53 |         id: deployment
54 |         uses: actions/deploy-pages@v1
55 | 


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


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx --no-install commitlint --edit $1
5 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx --no-install lint-staged
5 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | @Thy3634:registry=https://npm.pkg.github.com


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


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # vue2-repl
 2 | 
 3 | ## 0.2.1
 4 | 
 5 | ### Patch Changes
 6 | 
 7 | - 4b296e8: feat: import as text; import as url
 8 | 
 9 | ## 0.2.0
10 | 
11 | ### Minor Changes
12 | 
13 | - 18482a1: feat: 支持 import css 和 json
14 | 
15 | ## 0.1.2
16 | 
17 | ### Patch Changes
18 | 
19 | - 81203ff: feat: add '<script setup> not supported' error
20 | - f879466: chore: fix package.json types
21 | 
22 | ## 0.1.1
23 | 
24 | ### Patch Changes
25 | 
26 | - 6188f54: chore: eslint lint-staged
27 | - 877c10f: docs: change package description
28 | - 6188f54: add husky commitizen commitlint eslint
29 | - 6188f54: sfc
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Thy3634
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue2-repl
 2 | ![npm](https://img.shields.io/npm/v/vue2-repl)
 3 | 
 4 | 
 5 | ## features
 6 | 
 7 | - comile vue2 sfc and js
 8 | - you could import css, and it would be converted into a `<link/>`
 9 | 
10 | ```js
11 | import 'package/style.css'
12 | import 'http://127.0.0.1/style.css'
13 | ```
14 | 
15 | - yoou could import json, and it would be fetch
16 | 
17 | ```js
18 | import data from 'package/mock.json'
19 | import data2 from 'https://vuetify.cn/manifest.json'
20 | ```
21 | 
22 | Vue2 SFC REPL as a Vue 3 component. 
23 | 
24 | highly inspired by @vue/repl
25 | 
26 | partically compiled by vue/compiler-sfc@3, but use `template` instead
27 | 
28 | ## Simple Usage
29 | 
30 | ```vue
31 | <script setup>
32 | import { Repl } from 'vue2-repl'
33 | import 'vue2-repl/style.css'
34 | </script>
35 | 
36 | <template>
37 |   <Repl />
38 | </template>
39 | ```
40 | 
41 | ## Advanced Usage
42 | 
43 | ```vue
44 | <script setup>
45 | import { watchEffect } from 'vue'
46 | import { Repl, ReplStore } from 'vue2-repl'
47 | 
48 | // retrieve some configuration options from the URL
49 | const query = new URLSearchParams(location.search)
50 | 
51 | const store = new ReplStore({
52 |   // initialize repl with previously serialized state
53 |   serializedState: location.hash.slice(1),
54 | 
55 |   // starts on the output pane (mobile only) if the URL has a showOutput query
56 |   showOutput: query.has('showOutput'),
57 |   // starts on a different tab on the output pane if the URL has a outputMode query
58 |   // and default to the "preview" tab
59 |   outputMode: (query.get('outputMode') || 'preview'),
60 | 
61 |   // specify the default URL to import Vue runtime from in the sandbox
62 |   // default is the CDN link from unpkg.com with version matching Vue's version
63 |   // from peerDependency
64 |   defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js'
65 | })
66 | 
67 | // persist state to URL hash
68 | watchEffect(() => history.replaceState({}, '', store.serialize()))
69 | 
70 | // pre-set import map
71 | store.setImportMap({
72 |   imports: {
73 |     myLib: 'cdn link to esm build of myLib'
74 |   }
75 | })
76 | 
77 | // use a specific version of Vue
78 | store.setVueVersion('2.7.10')
79 | </script>
80 | 
81 | <template>
82 |   <Repl :store="store" :showCompileOutput="true" />
83 | </template>
84 | ```
85 | 


--------------------------------------------------------------------------------
/api-extractor.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
 3 | 
 4 |   "projectFolder": ".",
 5 | 
 6 |   "mainEntryPointFilePath": "./dist/src/index.d.ts",
 7 | 
 8 |   "dtsRollup": {
 9 |     "enabled": true
10 |   },
11 | 
12 |   "apiReport": {
13 |     "enabled": false
14 |   },
15 | 
16 |   "docModel": {
17 |     "enabled": false
18 |   },
19 | 
20 |   "tsdocMetadata": {
21 |     "enabled": false
22 |   },
23 | 
24 |   "messages": {
25 |     "compilerMessageReporting": {
26 |       "default": {
27 |         "logLevel": "warning"
28 |       }
29 |     },
30 | 
31 |     "extractorMessageReporting": {
32 |       "default": {
33 |         "logLevel": "warning",
34 |         "addToApiReportFile": true
35 |       },
36 | 
37 |       "ae-forgotten-export": {
38 |         "logLevel": "none"
39 |       },
40 | 
41 |       "ae-missing-release-tag": {
42 |         "logLevel": "none"
43 |       }
44 |     },
45 | 
46 |     "tsdocMessageReporting": {
47 |       "default": {
48 |         "logLevel": "warning"
49 |       },
50 | 
51 |       "tsdoc-undefined-tag": {
52 |         "logLevel": "none"
53 |       }
54 |     }
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="dark">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |   <title>Vue2 SFC Playground</title>
 9 |   <style>
10 |     body {
11 |       margin: 0;
12 |     }
13 | 
14 |     .vue-repl {
15 |       height: 100vh;
16 |     }
17 | 
18 |   </style>
19 |   <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
20 |   <script async src="https://unpkg.com/es-module-shims@1.5.5/dist/es-module-shims.wasm.js"></script>
21 |   <script type="importmap">
22 |     {
23 |       "imports": {
24 |         "vue/compiler-sfc": "https://unpkg.com/@vue/compiler-sfc@3.2.47/dist/compiler-sfc.esm-browser.js",
25 |         "vue": "https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.js"
26 |       }
27 |     }
28 | </script>
29 |   <script type="module" src="./src/main.ts"></script>
30 | </head>
31 | 
32 | <body>
33 |   <div id="app"></div>
34 | </body>
35 | 
36 | </html>
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue2-repl",
 3 |   "version": "0.2.1",
 4 |   "description": "Vue3 component for editing Vue2 components",
 5 |   "main": "dist/vue2-repl.umd.js",
 6 |   "module": "dist/vue2-repl.mjs",
 7 |   "packageManager": "pnpm@7.1.0",
 8 |   "files": [
 9 |     "dist"
10 |   ],
11 |   "types": "dist/vue2-repl.d.ts",
12 |   "exports": {
13 |     ".": {
14 |       "import": "./dist/vue2-repl.mjs",
15 |       "types": "./dist/vue2-repl.d.ts",
16 |       "require": "./dist/vue2-repl.umd.js"
17 |     },
18 |     "./style.css": "./dist/style.css"
19 |   },
20 |   "scripts": {
21 |     "dev": "vite",
22 |     "build": "vite build && pnpm build:types",
23 |     "build:types": "vue-tsc -p tsconfig.build.json && api-extractor run -c api-extractor.json && rimraf dist/src",
24 |     "docs:build": "vite build -c vite.config.docs.ts",
25 |     "docs:preview": "vite preview -c vite.config.docs.ts",
26 |     "commit": "pnpm changeset && cz",
27 |     "prepublish": "pnpm build && pnpm changeset version",
28 |     "publish": "pnpm changeset publish"
29 |   },
30 |   "repository": "https://github.com/Thy3634/vue2-repl.git",
31 |   "author": "Thy3634",
32 |   "license": "MIT",
33 |   "bugs": {
34 |     "url": "https://github.com/Thy3634/vue2-repl/issues"
35 |   },
36 |   "homepage": "https://github.com/Thy3634/vue2-repl#readme",
37 |   "dependencies": {
38 |     "codemirror": "^5.62.3",
39 |     "fflate": "^0.7.3",
40 |     "hash-sum": "^2.0.0",
41 |     "rimraf": "^3.0.2",
42 |     "sucrase": "^3.20.1"
43 |   },
44 |   "devDependencies": {
45 |     "@babel/types": "^7.15.6",
46 |     "@changesets/cli": "^2.24.4",
47 |     "@commitlint/cli": "^17.1.2",
48 |     "@commitlint/config-conventional": "^17.1.0",
49 |     "@microsoft/api-extractor": "^7.19.2",
50 |     "@types/codemirror": "^5.60.2",
51 |     "@types/node": "^16.11.12",
52 |     "@typescript-eslint/eslint-plugin": "^5.38.0",
53 |     "@typescript-eslint/parser": "^5.38.0",
54 |     "@vitejs/plugin-vue": "^3.0.0-beta.0",
55 |     "commitizen": "^4.2.5",
56 |     "cz-conventional-changelog": "^3.3.0",
57 |     "eslint": "^8.24.0",
58 |     "husky": "^8.0.1",
59 |     "lint-staged": "^13.0.3",
60 |     "typescript": "^4.5.4",
61 |     "vite": "^3.0.0-beta.3",
62 |     "vue": "^3.2.37",
63 |     "vue-tsc": "^0.34.15",
64 |     "vue2": "npm:vue@^2.7.10"
65 |   },
66 |   "peerDependencies": {
67 |     "vue": "^3.2.13",
68 |     "vue2": "npm:vue@^2.7.10"
69 |   },
70 |   "lint-staged": {
71 |     "*.ts": [
72 |       "eslint --fix"
73 |     ]
74 |   }
75 | }


--------------------------------------------------------------------------------
/public/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.32 170.02">
2 |   <path fill="#42b883" d="M120.83 0L98.16 39.26 75.49 0H0l98.16 170.02L196.32 0h-75.49z"/>
3 |   <path fill="#35495e" d="M120.83 0L98.16 39.26 75.49 0H39.26l58.9 102.01L157.06 0h-36.23z"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Header from './Header.vue'
 3 | import { Repl, ReplStore } from '.'
 4 | import { ref, watchEffect } from 'vue'
 5 | 
 6 | const setVH = () => {
 7 |   document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
 8 | }
 9 | window.addEventListener('resize', setVH)
10 | setVH()
11 | 
12 | const useDevMode = ref(false)
13 | const useSSRMode = ref(false)
14 | 
15 | let hash = location.hash.slice(1)
16 | if (hash.startsWith('__DEV__')) {
17 |   hash = hash.slice(7)
18 |   useDevMode.value = true
19 | }
20 | if (hash.startsWith('__SSR__')) {
21 |   hash = hash.slice(7)
22 |   useSSRMode.value = true
23 | }
24 | 
25 | const store = new ReplStore({
26 |   serializedState: hash,
27 | })
28 | 
29 | store.setVueVersion('2.7.12')
30 | 
31 | // enable experimental features
32 | const sfcOptions = {
33 |   script: {
34 |     inlineTemplate: !useDevMode.value,
35 |     reactivityTransform: true
36 |   }
37 | }
38 | 
39 | // persist state
40 | watchEffect(() => {
41 |   const newHash = store
42 |     .serialize()
43 |     .replace(/^#/, useSSRMode.value ? `#__SSR__` : `#`)
44 |     .replace(/^#/, useDevMode.value ? `#__DEV__` : `#`)
45 |   history.replaceState({}, '', newHash)
46 | })
47 | 
48 | function toggleDevMode() {
49 |   const dev = (useDevMode.value = !useDevMode.value)
50 |   sfcOptions.script.inlineTemplate = !dev
51 |   store.setFiles(store.getFiles())
52 | }
53 | 
54 | function toggleSSR() {
55 |   useSSRMode.value = !useSSRMode.value
56 |   store.setFiles(store.getFiles())
57 | }
58 | </script>
59 | 
60 | <template>
61 |   <article>
62 |     <Header :store="store" :dev="useDevMode" :ssr="useSSRMode" @toggle-dev="toggleDevMode" @toggle-ssr="toggleSSR" />
63 |     <Repl @keydown.ctrl.s.prevent @keydown.meta.s.prevent :ssr="useSSRMode" :store="store" :showCompileOutput="true"
64 |       :autoResize="true" :sfcOptions="sfcOptions" :clearConsole="false" />
65 |   </article>
66 | </template>
67 | 
68 | <style>
69 | .dark {
70 |   color-scheme: dark;
71 | }
72 | 
73 | body {
74 |   font-size: 13px;
75 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
76 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
77 |   margin: 0;
78 |   --base: #444;
79 |   --nav-height: 50px;
80 | }
81 | 
82 | .vue-repl {
83 |   height: calc(var(--vh) - var(--nav-height));
84 | }
85 | 
86 | button {
87 |   border: none;
88 |   outline: none;
89 |   cursor: pointer;
90 |   margin: 0;
91 |   background-color: transparent;
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/src/Header.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ref, onMounted } from 'vue'
  3 | import Sun from './icons/Sun.vue'
  4 | import Moon from './icons/Moon.vue'
  5 | import Share from './icons/Share.vue'
  6 | 
  7 | // const version = '2.7.12'
  8 | 
  9 | // @ts-ignore
 10 | // const props = defineProps(['store', 'dev', 'ssr'])
 11 | // const { store } = props
 12 | 
 13 | // const activeVersion = ref(`@${version}`)
 14 | const expanded = ref(false)
 15 | 
 16 | // async function setVueVersion(v: string) {
 17 | //     activeVersion.value = `loading...`
 18 | //     await store.setVueVersion(v)
 19 | //     activeVersion.value = `v${v}`
 20 | //     expanded.value = false
 21 | // }
 22 | 
 23 | // function resetVueVersion() {
 24 | //     store.resetVueVersion()
 25 | //     activeVersion.value = `@${version}`
 26 | //     expanded.value = false
 27 | // }
 28 | 
 29 | async function copyLink() {
 30 |     await navigator.clipboard.writeText(location.href)
 31 |     alert('Sharable URL has been copied to clipboard.')
 32 | }
 33 | 
 34 | function toggleDark() {
 35 |     const cls = document.documentElement.classList
 36 |     cls.toggle('dark')
 37 |     localStorage.setItem(
 38 |         'vue-sfc-playground-prefer-dark',
 39 |         String(cls.contains('dark'))
 40 |     )
 41 | }
 42 | 
 43 | onMounted(async () => {
 44 |     window.addEventListener('click', () => {
 45 |         expanded.value = false
 46 |     })
 47 |     window.addEventListener('blur', () => {
 48 |         if (document.activeElement?.tagName === 'IFRAME') {
 49 |             expanded.value = false
 50 |         }
 51 |     });
 52 | })
 53 | 
 54 | </script>
 55 | 
 56 | <template>
 57 |     <nav>
 58 |         <h1>
 59 |             <img alt="logo" src="/vue.svg" />
 60 |             <span>Vue2 SFC Playground</span>
 61 |         </h1>
 62 |         <div class="links">
 63 |             <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
 64 |                 <Sun class="light" />
 65 |                 <Moon class="dark" />
 66 |             </button>
 67 |             <button title="Copy sharable URL" class="share" @click="copyLink">
 68 |                 <Share />
 69 |             </button>
 70 |         </div>
 71 |     </nav>
 72 | </template>
 73 | 
 74 | <style>
 75 | nav {
 76 |     --bg: #fff;
 77 |     --bg-light: #fff;
 78 |     --border: #ddd;
 79 |     --btn: #666;
 80 |     --highlight: #333;
 81 |     --green: #3ca877;
 82 |     --purple: #904cbc;
 83 |     --btn-bg: #eee;
 84 | 
 85 |     color: var(--base);
 86 |     height: var(--nav-height);
 87 |     box-sizing: border-box;
 88 |     padding: 0 1em;
 89 |     background-color: var(--bg);
 90 |     box-shadow: 0 0 4px rgba(0, 0, 0, 0.33);
 91 |     position: relative;
 92 |     z-index: 999;
 93 |     display: flex;
 94 |     justify-content: space-between;
 95 | }
 96 | 
 97 | .dark nav {
 98 |     --base: #ddd;
 99 |     --bg: #1a1a1a;
100 |     --bg-light: #242424;
101 |     --border: #383838;
102 |     --highlight: #fff;
103 |     --btn-bg: #333;
104 | 
105 |     box-shadow: none;
106 |     border-bottom: 1px solid var(--border);
107 | }
108 | 
109 | h1 {
110 |     font-weight: 500;
111 |     display: inline-flex;
112 |     place-items: center;
113 | }
114 | 
115 | h1 img {
116 |     height: 24px;
117 |     margin-right: 10px;
118 | }
119 | 
120 | @media (max-width: 560px) {
121 |     h1 span {
122 |         font-size: 0.9em;
123 |     }
124 | }
125 | 
126 | @media (max-width: 520px) {
127 |     h1 span {
128 |         display: none;
129 |     }
130 | }
131 | 
132 | .links {
133 |     display: flex;
134 | }
135 | 
136 | .version {
137 |     margin-right: 12px;
138 |     position: relative;
139 | }
140 | 
141 | .active-version {
142 |     cursor: pointer;
143 |     position: relative;
144 |     display: inline-flex;
145 |     place-items: center;
146 | }
147 | 
148 | .active-version .number {
149 |     color: var(--green);
150 |     margin-left: 4px;
151 | }
152 | 
153 | .active-version::after {
154 |     content: '';
155 |     width: 0;
156 |     height: 0;
157 |     border-left: 4px solid transparent;
158 |     border-right: 4px solid transparent;
159 |     border-top: 6px solid #aaa;
160 |     margin-left: 8px;
161 | }
162 | 
163 | .toggle-dev span,
164 | .toggle-ssr span {
165 |     font-size: 12px;
166 |     border-radius: 4px;
167 |     padding: 4px 6px;
168 | }
169 | 
170 | .toggle-dev span {
171 |     background: var(--purple);
172 |     color: #fff;
173 | }
174 | 
175 | .toggle-dev.dev span {
176 |     background: var(--green);
177 | }
178 | 
179 | .toggle-ssr span {
180 |     background-color: var(--btn-bg);
181 | }
182 | 
183 | .toggle-ssr.enabled span {
184 |     color: #fff;
185 |     background-color: var(--green);
186 | }
187 | 
188 | .toggle-dark svg {
189 |     width: 18px;
190 |     height: 18px;
191 | }
192 | 
193 | .toggle-dark .dark,
194 | .dark .toggle-dark .light {
195 |     display: none;
196 | }
197 | 
198 | .dark .toggle-dark .dark {
199 |     display: inline-block;
200 | }
201 | 
202 | .links button,
203 | .links button a {
204 |     color: var(--btn);
205 | }
206 | 
207 | .links button:hover,
208 | .links button:hover a {
209 |     color: var(--highlight);
210 | }
211 | 
212 | .version:hover .active-version::after {
213 |     border-top-color: var(--btn);
214 | }
215 | 
216 | .dark .version:hover .active-version::after {
217 |     border-top-color: var(--highlight);
218 | }
219 | 
220 | .versions {
221 |     display: none;
222 |     position: absolute;
223 |     left: 0;
224 |     top: 40px;
225 |     background-color: var(--bg-light);
226 |     border: 1px solid var(--border);
227 |     border-radius: 4px;
228 |     list-style-type: none;
229 |     padding: 8px;
230 |     margin: 0;
231 |     width: 200px;
232 |     max-height: calc(100vh - 70px);
233 |     overflow: scroll;
234 | }
235 | 
236 | .versions a {
237 |     display: block;
238 |     padding: 6px 12px;
239 |     text-decoration: none;
240 |     cursor: pointer;
241 |     color: var(--base);
242 | }
243 | 
244 | .versions a:hover {
245 |     color: var(--green);
246 | }
247 | 
248 | .versions.expanded {
249 |     display: block;
250 | }
251 | 
252 | .links>* {
253 |     display: flex;
254 |     align-items: center;
255 | }
256 | 
257 | .links>*+* {
258 |     margin-left: 4px;
259 | }
260 | </style>
261 | 


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


--------------------------------------------------------------------------------
/src/Repl.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import SplitPane from './SplitPane.vue'
 3 | import Editor from './editor/Editor.vue'
 4 | import Output from './output/Output.vue'
 5 | import { Store, ReplStore, SFCOptions } from './store'
 6 | import { provide, toRef } from 'vue'
 7 | 
 8 | export interface Props {
 9 |   store?: Store
10 |   autoResize?: boolean
11 |   showCompileOutput?: boolean
12 |   showImportMap?: boolean
13 |   clearConsole?: boolean
14 |   sfcOptions?: SFCOptions
15 |   layout?: string
16 | }
17 | 
18 | const props = withDefaults(defineProps<Props>(), {
19 |   store: () => new ReplStore(),
20 |   autoResize: true,
21 |   showCompileOutput: true,
22 |   showImportMap: true,
23 |   clearConsole: true,
24 | })
25 | 
26 | props.store.options = props.sfcOptions
27 | props.store.init()
28 | 
29 | provide('store', props.store)
30 | provide('autoresize', props.autoResize)
31 | provide('import-map', toRef(props, 'showImportMap'))
32 | provide('clear-console', toRef(props, 'clearConsole'))
33 | </script>
34 | 
35 | <template>
36 |   <div class="vue-repl">
37 |     <SplitPane :layout="layout">
38 |       <template #left>
39 |         <Editor />
40 |       </template>
41 |       <template #right>
42 |         <Output :showCompileOutput="props.showCompileOutput" />
43 |       </template>
44 |     </SplitPane>
45 |   </div>
46 | </template>
47 | 
48 | <style scoped>
49 | .vue-repl {
50 |   --bg: #fff;
51 |   --bg-soft: #f8f8f8;
52 |   --border: #ddd;
53 |   --text-light: #888;
54 |   --font-code: Menlo, Monaco, Consolas, 'Courier New', monospace;
55 |   --color-branding: #42b883;
56 |   --color-branding-dark: #416f9c;
57 |   --header-height: 38px;
58 | 
59 |   font-size: 13px;
60 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
61 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
62 |   margin: 0;
63 |   overflow: hidden;
64 |   background-color: var(--bg-soft);
65 | }
66 | 
67 | .dark .vue-repl {
68 |   --bg: #1a1a1a;
69 |   --bg-soft: #242424;
70 |   --border: #383838;
71 |   --text-light: #aaa;
72 |   --color-branding: #42d392;
73 |   --color-branding-dark: #89ddff;
74 | }
75 | 
76 | :deep(button) {
77 |   border: none;
78 |   outline: none;
79 |   cursor: pointer;
80 |   margin: 0;
81 |   background-color: transparent;
82 | }
83 | </style>
84 | 


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


--------------------------------------------------------------------------------
/src/codemirror/CodeMirror.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="editor" ref="el"></div>
 3 | </template>
 4 | 
 5 | <script setup lang="ts">
 6 | import { ref, onMounted, watchEffect, inject } from 'vue'
 7 | import { debounce } from '../utils'
 8 | import CodeMirror from './codemirror'
 9 | 
10 | export interface Props {
11 |   mode?: string
12 |   value?: string
13 |   readonly?: boolean
14 | }
15 | 
16 | const props = withDefaults(defineProps<Props>(), {
17 |   mode: 'htmlmixed',
18 |   value: '',
19 |   readonly: false
20 | })
21 | 
22 | const emit = defineEmits<(e: 'change', value: string) => void>()
23 | 
24 | const el = ref()
25 | const needAutoResize = inject('autoresize')
26 | 
27 | onMounted(() => {
28 |   const addonOptions = {
29 |     autoCloseBrackets: true,
30 |     autoCloseTags: true,
31 |     foldGutter: true,
32 |     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
33 |   }
34 | 
35 |   const editor = CodeMirror(el.value!, {
36 |     value: '',
37 |     mode: props.mode,
38 |     readOnly: props.readonly,
39 |     tabSize: 2,
40 |     lineWrapping: true,
41 |     lineNumbers: true,
42 |     ...addonOptions
43 |   })
44 | 
45 |   editor.on('change', () => {
46 |     emit('change', editor.getValue())
47 |   })
48 | 
49 |   watchEffect(() => {
50 |     const cur = editor.getValue()
51 |     if (props.value !== cur) {
52 |       editor.setValue(props.value)
53 |     }
54 |   })
55 | 
56 |   watchEffect(() => {
57 |     editor.setOption('mode', props.mode)
58 |   })
59 | 
60 |   setTimeout(() => {
61 |     editor.refresh()
62 |   }, 50)
63 | 
64 |   if (needAutoResize) {
65 |     window.addEventListener(
66 |       'resize',
67 |       debounce(() => {
68 |         editor.refresh()
69 |       })
70 |     )
71 |   }
72 | })
73 | </script>
74 | 
75 | <style>
76 | .editor {
77 |   position: relative;
78 |   height: 100%;
79 |   width: 100%;
80 |   overflow: hidden;
81 | }
82 | 
83 | .CodeMirror {
84 |   font-family: var(--font-code);
85 |   line-height: 1.5;
86 |   height: 100%;
87 | }
88 | </style>
89 | 


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


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


--------------------------------------------------------------------------------
/src/editor/Editor.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import FileSelector from './FileSelector.vue'
 3 | import CodeMirror from '../codemirror/CodeMirror.vue'
 4 | import Message from '../Message.vue'
 5 | import { debounce } from '../utils'
 6 | import { computed, inject } from 'vue'
 7 | import { Store } from '../store'
 8 | 
 9 | const store = inject('store') as Store
10 | 
11 | const onChange = debounce((code: string) => {
12 |   store.state.activeFile.code = code
13 | }, 250)
14 | 
15 | const activeMode = computed(() => {
16 |   const { filename } = store.state.activeFile
17 |   return filename.endsWith('.vue') || filename.endsWith('.html')
18 |     ? 'htmlmixed'
19 |     : filename.endsWith('.css')
20 |     ? 'css'
21 |     : 'javascript'
22 | })
23 | </script>
24 | 
25 | <template>
26 |   <FileSelector />
27 |   <div class="editor-container">
28 |     <CodeMirror
29 |       @change="onChange"
30 |       :value="store.state.activeFile.code"
31 |       :mode="activeMode"
32 |     />
33 |     <Message :err="store.state.errors[0]" />
34 |   </div>
35 | </template>
36 | 
37 | <style scoped>
38 | .editor-container {
39 |   height: calc(100% - var(--header-height));
40 |   overflow: hidden;
41 |   position: relative;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/editor/FileSelector.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { Store } from '../store'
  3 | import { computed, inject, ref, VNode, Ref } from 'vue'
  4 | 
  5 | const store = inject('store') as Store
  6 | 
  7 | const pending = ref(false)
  8 | const pendingFilename = ref('Comp.vue')
  9 | const importMapFile = 'import-map.json'
 10 | const showImportMap = inject('import-map') as Ref<boolean>
 11 | const files = computed(() =>
 12 |   Object.entries(store.state.files)
 13 |     .filter(([name, file]) => name !== importMapFile && !file.hidden)
 14 |     .map(([name]) => name)
 15 | )
 16 | 
 17 | function startAddFile() {
 18 |   let i = 0
 19 |   let name = `Comp.vue`
 20 | 
 21 |   while (true) {
 22 |     let hasConflict = false
 23 |     for (const file in store.state.files) {
 24 |       if (file === name) {
 25 |         hasConflict = true
 26 |         name = `Comp${++i}.vue`
 27 |         break
 28 |       }
 29 |     }
 30 |     if (!hasConflict) {
 31 |       break
 32 |     }
 33 |   }
 34 | 
 35 |   pendingFilename.value = name
 36 |   pending.value = true
 37 | }
 38 | 
 39 | function cancelAddFile() {
 40 |   pending.value = false
 41 | }
 42 | 
 43 | function focus({ el }: VNode) {
 44 |   ;(el as HTMLInputElement).focus()
 45 | }
 46 | 
 47 | function doneAddFile() {
 48 |   if (!pending.value) return
 49 |   const filename = pendingFilename.value
 50 | 
 51 |   if (!/\.(vue|js|ts|css)$/.test(filename)) {
 52 |     store.state.errors = [
 53 |       `Playground only supports *.vue, *.js, *.ts, *.css files.`
 54 |     ]
 55 |     return
 56 |   }
 57 | 
 58 |   if (filename in store.state.files) {
 59 |     store.state.errors = [`File "${filename}" already exists.`]
 60 |     return
 61 |   }
 62 | 
 63 |   store.state.errors = []
 64 |   cancelAddFile()
 65 |   store.addFile(filename)
 66 | }
 67 | 
 68 | const fileSel = ref(null)
 69 | function horizontalScroll(e: WheelEvent) {
 70 |   e.preventDefault()
 71 |   const el = fileSel.value! as HTMLElement
 72 |   const direction =
 73 |     Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY
 74 |   const distance = 30 * (direction > 0 ? 1 : -1)
 75 |   el.scrollTo({
 76 |     left: el.scrollLeft + distance
 77 |   })
 78 | }
 79 | </script>
 80 | 
 81 | <template>
 82 |   <div
 83 |     class="file-selector"
 84 |     :class="{ 'has-import-map': showImportMap }"
 85 |     @wheel="horizontalScroll"
 86 |     ref="fileSel"
 87 |   >
 88 |     <div
 89 |       v-for="(file, i) in files"
 90 |       class="file"
 91 |       :class="{ active: store.state.activeFile.filename === file }"
 92 |       @click="store.setActive(file)"
 93 |     >
 94 |       <span class="label">{{
 95 |         file === importMapFile ? 'Import Map' : file
 96 |       }}</span>
 97 |       <span v-if="i > 0" class="remove" @click.stop="store.deleteFile(file)">
 98 |         <svg class="icon" width="12" height="12" viewBox="0 0 24 24">
 99 |           <line stroke="#999" x1="18" y1="6" x2="6" y2="18"></line>
100 |           <line stroke="#999" x1="6" y1="6" x2="18" y2="18"></line>
101 |         </svg>
102 |       </span>
103 |     </div>
104 |     <div v-if="pending" class="file pending">
105 |       <input
106 |         v-model="pendingFilename"
107 |         spellcheck="false"
108 |         @blur="doneAddFile"
109 |         @keyup.enter="doneAddFile"
110 |         @keyup.esc="cancelAddFile"
111 |         @vnodeMounted="focus"
112 |       />
113 |     </div>
114 |     <button class="add" @click="startAddFile">+</button>
115 | 
116 |     <div v-if="showImportMap" class="import-map-wrapper">
117 |       <div
118 |         class="file import-map"
119 |         :class="{ active: store.state.activeFile.filename === importMapFile }"
120 |         @click="store.setActive(importMapFile)"
121 |       >
122 |         <span class="label">Import Map</span>
123 |       </div>
124 |     </div>
125 |   </div>
126 | </template>
127 | 
128 | <style scoped>
129 | .file-selector {
130 |   display: flex;
131 |   box-sizing: border-box;
132 |   border-bottom: 1px solid var(--border);
133 |   background-color: var(--bg);
134 |   overflow-y: hidden;
135 |   overflow-x: auto;
136 |   white-space: nowrap;
137 |   position: relative;
138 |   height: var(--header-height);
139 | }
140 | 
141 | .file-selector::-webkit-scrollbar {
142 |   height: 1px;
143 | }
144 | 
145 | .file-selector::-webkit-scrollbar-track {
146 |   background-color: var(--border);
147 | }
148 | 
149 | .file-selector::-webkit-scrollbar-thumb {
150 |   background-color: var(--color-branding);
151 | }
152 | 
153 | .file-selector.has-import-map .add {
154 |   margin-right: 10px;
155 | }
156 | 
157 | .file {
158 |   display: inline-block;
159 |   font-size: 13px;
160 |   font-family: var(--font-code);
161 |   cursor: pointer;
162 |   color: var(--text-light);
163 |   box-sizing: border-box;
164 | }
165 | .file.active {
166 |   color: var(--color-branding);
167 |   border-bottom: 3px solid var(--color-branding);
168 |   cursor: text;
169 | }
170 | .file span {
171 |   display: inline-block;
172 |   padding: 8px 10px 6px;
173 |   line-height: 20px;
174 | }
175 | .file.pending input {
176 |   width: 90px;
177 |   height: 30px;
178 |   line-height: 30px;
179 |   outline: none;
180 |   border: 1px solid var(--border);
181 |   border-radius: 4px;
182 |   padding: 0 0 0 10px;
183 |   margin-top: 2px;
184 |   margin-left: 6px;
185 |   font-family: var(--font-code);
186 |   font-size: 12px;
187 | }
188 | .file .remove {
189 |   display: inline-block;
190 |   vertical-align: middle;
191 |   line-height: 12px;
192 |   cursor: pointer;
193 |   padding-left: 0;
194 | }
195 | .add {
196 |   font-size: 18px;
197 |   font-family: var(--font-code);
198 |   color: #999;
199 |   vertical-align: middle;
200 |   margin-left: 6px;
201 |   position: relative;
202 |   top: -1px;
203 | }
204 | .add:hover {
205 |   color: var(--color-branding);
206 | }
207 | .icon {
208 |   margin-top: -1px;
209 | }
210 | .import-map-wrapper {
211 |   position: sticky;
212 |   margin-left: auto;
213 |   top: 0;
214 |   right: 0;
215 |   padding-left: 30px;
216 |   background-color: var(--bg);
217 |   background: linear-gradient(
218 |     90deg,
219 |     rgba(255, 255, 255, 0) 0%,
220 |     rgba(255, 255, 255, 1) 25%
221 |   );
222 | }
223 | .dark .import-map-wrapper {
224 |   background: linear-gradient(
225 |     90deg,
226 |     rgba(26, 26, 26, 0) 0%,
227 |     rgba(26, 26, 26, 1) 25%
228 |   );
229 | }
230 | </style>
231 | 


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


--------------------------------------------------------------------------------
/src/icons/Moon.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
3 |         <path fill="currentColor"
4 |             d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
5 |     </svg>
6 | </template>


--------------------------------------------------------------------------------
/src/icons/Share.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
 3 |         <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 4 |             <circle cx="18" cy="5" r="3" />
 5 |             <circle cx="6" cy="12" r="3" />
 6 |             <circle cx="18" cy="19" r="3" />
 7 |             <path d="M8.59 13.51l6.83 3.98" />
 8 |             <path d="M15.41 6.51l-6.82 3.98" />
 9 |         </g>
10 |     </svg>
11 | </template>


--------------------------------------------------------------------------------
/src/icons/Sun.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 3 |         <path fill="currentColor"
 4 |             d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
 5 |         <path fill="currentColor" d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
 6 |         <path fill="currentColor" d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
 7 |         <path fill="currentColor"
 8 |             d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
 9 |         <path fill="currentColor"
10 |             d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
11 |         <path fill="currentColor" d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
12 |         <path fill="currentColor" d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
13 |         <path fill="currentColor"
14 |             d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
15 |         <path fill="currentColor"
16 |             d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
17 |     </svg>
18 | </template>


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Repl } from './Repl.vue'
2 | export { default as Preview } from './output/Preview.vue'
3 | export { ReplStore, File } from './store'
4 | export { compileFile } from './transform'
5 | export type { Props as ReplProps } from './Repl.vue'
6 | export type { Store, StoreOptions, SFCOptions, StoreState } from './store'
7 | export type { OutputModes } from './output/types'
8 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | // @ts-expect-error Custom window property
 5 | window.VUE_DEVTOOLS_CONFIG = {
 6 |     defaultSelectedAppId: 'repl'
 7 | }
 8 | 
 9 | createApp(App).mount('#app')
10 | 


--------------------------------------------------------------------------------
/src/output/Output.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Preview from './Preview.vue'
 3 | import CodeMirror from '../codemirror/CodeMirror.vue'
 4 | import { Store } from '../store'
 5 | import { inject, ref, computed } from 'vue'
 6 | import type { OutputModes } from './types'
 7 | 
 8 | const props = defineProps<{
 9 |   showCompileOutput?: boolean
10 | }>()
11 | 
12 | const store = inject('store') as Store
13 | const modes = computed(() =>
14 |   props.showCompileOutput
15 |     ? (['preview', 'js', 'css'] as const)
16 |     : (['preview'] as const)
17 | )
18 | 
19 | const mode = ref<OutputModes>(
20 |   (modes.value as readonly string[]).includes(store.initialOutputMode)
21 |     ? store.initialOutputMode as OutputModes
22 |     : 'preview'
23 | )
24 | </script>
25 | 
26 | <template>
27 |   <div class="tab-buttons">
28 |     <button v-for="m of modes" :class="{ active: mode === m }" @click="mode = m">
29 |       <span>{{ m }}</span>
30 |     </button>
31 |   </div>
32 | 
33 |   <div class="output-container">
34 |     <Preview :show="mode === 'preview'" />
35 |     <CodeMirror v-if="mode !== 'preview'" readonly :mode="mode === 'css' ? 'css' : 'javascript'"
36 |       :value="store.state.activeFile.compiled[mode]" />
37 |   </div>
38 | </template>
39 | 
40 | <style scoped>
41 | .output-container {
42 |   height: calc(100% - var(--header-height));
43 |   overflow: hidden;
44 |   position: relative;
45 | }
46 | 
47 | .tab-buttons {
48 |   box-sizing: border-box;
49 |   border-bottom: 1px solid var(--border);
50 |   background-color: var(--bg);
51 |   height: var(--header-height);
52 |   overflow: hidden;
53 | }
54 | 
55 | .tab-buttons button {
56 |   padding: 0;
57 |   box-sizing: border-box;
58 | }
59 | 
60 | .tab-buttons span {
61 |   font-size: 13px;
62 |   font-family: var(--font-code);
63 |   text-transform: uppercase;
64 |   color: var(--text-light);
65 |   display: inline-block;
66 |   padding: 8px 16px 6px;
67 |   line-height: 20px;
68 | }
69 | 
70 | button.active {
71 |   color: var(--color-branding-dark);
72 |   border-bottom: 3px solid var(--color-branding-dark);
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/output/Preview.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import Message from '../Message.vue'
  3 | import {
  4 |   ref,
  5 |   onMounted,
  6 |   onUnmounted,
  7 |   watchEffect,
  8 |   watch,
  9 |   WatchStopHandle,
 10 |   inject,
 11 |   Ref
 12 | } from 'vue'
 13 | import srcdoc from './srcdoc.html?raw'
 14 | import { PreviewProxy } from './PreviewProxy'
 15 | import { compileModulesForPreview } from './moduleCompiler'
 16 | import { Store } from '../store'
 17 | 
 18 | defineProps<{ show: boolean }>()
 19 | 
 20 | const store = inject('store') as Store
 21 | const clearConsole = inject('clear-console') as Ref<boolean>
 22 | const container = ref()
 23 | const runtimeError = ref()
 24 | const runtimeWarning = ref()
 25 | 
 26 | let sandbox: HTMLIFrameElement
 27 | let proxy: PreviewProxy
 28 | let stopUpdateWatcher: WatchStopHandle | undefined
 29 | 
 30 | // create sandbox on mount
 31 | onMounted(createSandbox)
 32 | 
 33 | // reset sandbox when import map changes
 34 | watch(
 35 |   () => store.state.files['import-map.json'].code,
 36 |   (raw) => {
 37 |     try {
 38 |       const map = JSON.parse(raw)
 39 |       if (!map.imports) {
 40 |         store.state.errors = [`import-map.json is missing "imports" field.`]
 41 |         return
 42 |       }
 43 |       createSandbox()
 44 |     } catch (e: any) {
 45 |       store.state.errors = [e as Error]
 46 |       return
 47 |     }
 48 |   }
 49 | )
 50 | 
 51 | // reset sandbox when version changes
 52 | watch(() => store.state.vueRuntimeURL, createSandbox)
 53 | 
 54 | onUnmounted(() => {
 55 |   proxy.destroy()
 56 |   stopUpdateWatcher && stopUpdateWatcher()
 57 | })
 58 | 
 59 | function createSandbox() {
 60 |   if (sandbox) {
 61 |     // clear prev sandbox
 62 |     proxy.destroy()
 63 |     stopUpdateWatcher && stopUpdateWatcher()
 64 |     container.value.removeChild(sandbox)
 65 |   }
 66 | 
 67 |   sandbox = document.createElement('iframe')
 68 |   sandbox.setAttribute(
 69 |     'sandbox',
 70 |     [
 71 |       'allow-forms',
 72 |       'allow-modals',
 73 |       'allow-pointer-lock',
 74 |       'allow-popups',
 75 |       'allow-same-origin',
 76 |       'allow-scripts',
 77 |       'allow-top-navigation-by-user-activation'
 78 |     ].join(' ')
 79 |   )
 80 | 
 81 |   const importMap = store.getImportMap()
 82 |   if (!importMap.imports) {
 83 |     importMap.imports = {}
 84 |   }
 85 |   if (!importMap.imports.vue) {
 86 |     importMap.imports.vue = store.state.vueRuntimeURL
 87 |   }
 88 |   const sandboxSrc = srcdoc.replace(
 89 |     /<!--IMPORT_MAP-->/,
 90 |     JSON.stringify(importMap)
 91 |   )
 92 |   sandbox.srcdoc = sandboxSrc
 93 |   container.value.appendChild(sandbox)
 94 | 
 95 |   proxy = new PreviewProxy(sandbox, {
 96 |     on_fetch_progress: (progress: any) => {
 97 |       // pending_imports = progress;
 98 |     },
 99 |     on_error: (event: any) => {
100 |       const msg =
101 |         event.value instanceof Error ? event.value.message : event.value
102 |       if (
103 |         msg.includes('Failed to resolve module specifier') ||
104 |         msg.includes('Error resolving module specifier')
105 |       ) {
106 |         runtimeError.value =
107 |           msg.replace(/\. Relative references must.*$/, '') +
108 |           `.\nTip: add an "import-map.json" file to specify import paths for dependencies.`
109 |       } else {
110 |         runtimeError.value = event.value
111 |       }
112 |     },
113 |     on_unhandled_rejection: (event: any) => {
114 |       let error = event.value
115 |       if (typeof error === 'string') {
116 |         error = { message: error }
117 |       }
118 |       runtimeError.value = 'Uncaught (in promise): ' + error.message
119 |     },
120 |     on_console: (log: any) => {
121 |       if (log.duplicate) {
122 |         return
123 |       }
124 |       if (log.level === 'error') {
125 |         if (log.args[0] instanceof Error) {
126 |           runtimeError.value = log.args[0].message
127 |         } else {
128 |           runtimeError.value = log.args[0]
129 |         }
130 |       } else if (log.level === 'warn') {
131 |         if (log.args[0].toString().includes('[Vue warn]')) {
132 |           runtimeWarning.value = log.args
133 |             .join('')
134 |             .replace(/\[Vue warn\]:/, '')
135 |             .trim()
136 |         }
137 |       }
138 |     },
139 |     on_console_group: (action: any) => {
140 |       // group_logs(action.label, false);
141 |     },
142 |     on_console_group_end: () => {
143 |       // ungroup_logs();
144 |     },
145 |     on_console_group_collapsed: (action: any) => {
146 |       // group_logs(action.label, true);
147 |     }
148 |   })
149 | 
150 |   sandbox.addEventListener('load', () => {
151 |     proxy.handle_links()
152 |     stopUpdateWatcher = watchEffect(updatePreview)
153 |   })
154 | }
155 | 
156 | async function updatePreview() {
157 |   if (import.meta.env.PROD && clearConsole.value) {
158 |     console.clear()
159 |   }
160 |   runtimeError.value = null
161 |   runtimeWarning.value = null
162 | 
163 |   try {
164 |     const mainFile = store.state.mainFile
165 | 
166 |     // compile code to simulated module system
167 |     const modules = compileModulesForPreview(store)
168 |     console.log(`[@vue/repl] successfully compiled ${modules.length} modules.`)
169 | 
170 |     const codeToEval = [
171 |       `window.__modules__ = {};window.__css__ = '';` +
172 |       `if (window.__app__) window.__app__.$destroy();` +
173 |       `document.body.innerHTML = '<div id="app"></div>'`,
174 |       ...modules,
175 |       `document.getElementById('__sfc-styles').innerHTML = window.__css__`
176 |     ]
177 | 
178 |     // if main file is a vue file, mount it.
179 |     if (mainFile.endsWith('.vue')) {
180 |       codeToEval.push(
181 |         `import Vue from "vue"
182 |         const _mount = () => {
183 |           const AppComponent = __modules__["${mainFile}"].default
184 |           AppComponent.name = 'Repl'
185 |           AppComponent.el = "#app"
186 |           const app = window.__app__ = new Vue(AppComponent)
187 |           Vue.config.errorHandler = console.error
188 |           // app.config.unwrapInjectedRef = true
189 |           // app.config.errorHandler = e => console.error(e)
190 |           // app.mount('#app')
191 |         }
192 |         if (window.__ssr_promise__) {
193 |           window.__ssr_promise__.then(_mount)
194 |         } else {
195 |           _mount()
196 |         }`
197 |       )
198 |     }
199 | 
200 |     // eval code in sandbox
201 |     await proxy.eval(codeToEval)
202 |   } catch (e: any) {
203 |     runtimeError.value = (e as Error).message
204 |   }
205 | }
206 | </script>
207 | 
208 | <template>
209 |   <div class="iframe-container" v-show="show" ref="container"></div>
210 |   <Message :err="runtimeError" />
211 |   <Message v-if="!runtimeError" :warn="runtimeWarning" />
212 | </template>
213 | 
214 | <style scoped>
215 | .iframe-container,
216 | .iframe-container :deep(iframe) {
217 |   width: 100%;
218 |   height: 100%;
219 |   border: none;
220 |   background-color: #fff;
221 | }
222 | </style>
223 | 


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


--------------------------------------------------------------------------------
/src/output/srcdoc.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 		<style>
  5 | 			body {
  6 | 				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  7 | 				Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  8 | 			}
  9 | 		</style>
 10 | 		<style id="__sfc-styles"></style>
 11 | 		<script>
 12 | 			(() => {
 13 | 				let scriptEls = []
 14 | 
 15 | 				window.process = { env: {} }
 16 | 				window.__modules__ = {}
 17 | 
 18 | 				window.__export__ = (mod, key, get) => {
 19 | 					Object.defineProperty(mod, key, {
 20 | 						enumerable: true,
 21 | 						configurable: true,
 22 | 						get
 23 | 					})
 24 | 				}
 25 | 
 26 | 				window.__dynamic_import__ = key => {
 27 | 					return Promise.resolve(window.__modules__[key])
 28 | 				}
 29 | 
 30 | 				async function handle_message(ev) {
 31 | 					let { action, cmd_id } = ev.data;
 32 | 					const send_message = (payload) => parent.postMessage( { ...payload }, ev.origin);
 33 | 					const send_reply = (payload) => send_message({ ...payload, cmd_id });
 34 | 					const send_ok = () => send_reply({ action: 'cmd_ok' });
 35 | 					const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });
 36 | 
 37 | 					if (action === 'eval') {
 38 | 						try {
 39 | 							if (scriptEls.length) {
 40 | 								scriptEls.forEach(el => {
 41 | 									document.head.removeChild(el)
 42 | 								})
 43 | 								scriptEls.length = 0
 44 | 							}
 45 | 
 46 | 							let { script: scripts } = ev.data.args
 47 | 							if (typeof scripts === 'string') scripts = [scripts]
 48 | 
 49 | 							for (const script of scripts) {
 50 | 								const scriptEl = document.createElement('script')
 51 | 								scriptEl.setAttribute('type', 'module')
 52 | 								// send ok in the module script to ensure sequential evaluation
 53 | 								// of multiple proxy.eval() calls
 54 | 								const done = new Promise((resolve) => {
 55 | 									window.__next__ = resolve
 56 | 								})
 57 | 								scriptEl.innerHTML = script + `\nwindow.__next__()`
 58 | 								document.head.appendChild(scriptEl)
 59 | 								scriptEl.onerror = err => send_error(err.message, err.stack)
 60 | 								scriptEls.push(scriptEl)
 61 | 								await done
 62 | 							}
 63 | 							send_ok()
 64 | 						} catch (e) {
 65 | 							send_error(e.message, e.stack);
 66 | 						}
 67 | 					}
 68 | 
 69 | 					if (action === 'catch_clicks') {
 70 | 						try {
 71 | 							const top_origin = ev.origin;
 72 | 							document.body.addEventListener('click', event => {
 73 | 								if (event.which !== 1) return;
 74 | 								if (event.metaKey || event.ctrlKey || event.shiftKey) return;
 75 | 								if (event.defaultPrevented) return;
 76 | 
 77 | 								// ensure target is a link
 78 | 								let el = event.target;
 79 | 								while (el && el.nodeName !== 'A') el = el.parentNode;
 80 | 								if (!el || el.nodeName !== 'A') return;
 81 | 
 82 | 								if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;
 83 | 
 84 | 								event.preventDefault();
 85 | 
 86 | 								if (el.href.startsWith(top_origin)) {
 87 | 									const url = new URL(el.href);
 88 | 									if (url.hash[0] === '#') {
 89 | 										window.location.hash = url.hash;
 90 | 										return;
 91 | 									}
 92 | 								}
 93 | 
 94 | 								window.open(el.href, '_blank');
 95 | 							});
 96 | 							send_ok();
 97 | 						} catch(e) {
 98 | 							send_error(e.message, e.stack);
 99 | 						}
100 | 					}
101 | 				}
102 | 
103 | 				window.addEventListener('message', handle_message, false);
104 | 
105 | 				window.onerror = function (msg, url, lineNo, columnNo, error) {
106 | 					if (msg.includes('module specifier “vue”')) {
107 | 						// firefox only error, ignore
108 | 						return false
109 | 					}
110 | 					try {
111 | 						parent.postMessage({ action: 'error', value: error }, '*');
112 | 					} catch (e) {
113 | 						parent.postMessage({ action: 'error', value: msg }, '*');
114 | 					}
115 | 				}
116 | 
117 | 				window.addEventListener("unhandledrejection", event => {
118 | 					if (event.reason.message.includes('Cross-origin')) {
119 | 						event.preventDefault()
120 | 						return
121 | 					}
122 | 					try {
123 | 						parent.postMessage({ action: 'unhandledrejection', value: event.reason }, '*');
124 | 					} catch (e) {
125 | 						parent.postMessage({ action: 'unhandledrejection', value: event.reason.message }, '*');
126 | 					}
127 | 				});
128 | 
129 | 				let previous = { level: null, args: null };
130 | 
131 | 				['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach((level) => {
132 | 					const original = console[level];
133 | 					console[level] = (...args) => {
134 | 						const msg = String(args[0])
135 | 						if (
136 | 							msg.includes('You are running a development build of Vue') ||
137 | 							msg.includes('You are running the esm-bundler build of Vue')
138 | 						) {
139 | 							return
140 | 						}
141 | 						const stringifiedArgs = stringify(args);
142 | 						if (
143 | 							previous.level === level &&
144 | 							previous.args &&
145 | 							previous.args === stringifiedArgs
146 | 						) {
147 | 							parent.postMessage({ action: 'console', level, duplicate: true }, '*');
148 | 						} else {
149 | 							previous = { level, args: stringifiedArgs };
150 | 
151 | 							try {
152 | 								parent.postMessage({ action: 'console', level, args }, '*');
153 | 							} catch (err) {
154 | 								parent.postMessage({ action: 'console', level, args: args.map(a => {
155 | 									return a instanceof Error ? a.message : String(a)
156 | 								}) }, '*');
157 | 							}
158 | 						}
159 | 
160 | 						original(...args);
161 | 					}
162 | 				});
163 | 
164 | 				[
165 | 					{ method: 'group', action: 'console_group' },
166 | 					{ method: 'groupEnd', action: 'console_group_end' },
167 | 					{ method: 'groupCollapsed', action: 'console_group_collapsed' },
168 | 				].forEach((group_action) => {
169 | 					const original = console[group_action.method];
170 | 					console[group_action.method] = (label) => {
171 | 						parent.postMessage({ action: group_action.action, label }, '*');
172 | 
173 | 						original(label);
174 | 					};
175 | 				});
176 | 
177 | 				const timers = new Map();
178 | 				const original_time = console.time;
179 | 				const original_timelog = console.timeLog;
180 | 				const original_timeend = console.timeEnd;
181 | 
182 | 				console.time = (label = 'default') => {
183 | 					original_time(label);
184 | 					timers.set(label, performance.now());
185 | 				}
186 | 				console.timeLog = (label = 'default') => {
187 | 					original_timelog(label);
188 | 					const now = performance.now();
189 | 					if (timers.has(label)) {
190 | 						parent.postMessage({ action: 'console', level: 'system-log', args: [`${label}: ${now - timers.get(label)}ms`] }, '*');
191 | 					} else {
192 | 						parent.postMessage({ action: 'console', level: 'system-warn', args: [`Timer '${label}' does not exist`] }, '*');
193 | 					}
194 | 				}
195 | 				console.timeEnd = (label = 'default') => {
196 | 					original_timeend(label);
197 | 					const now = performance.now();
198 | 					if (timers.has(label)) {
199 | 						parent.postMessage({ action: 'console', level: 'system-log', args: [`${label}: ${now - timers.get(label)}ms`] }, '*');
200 | 					} else {
201 | 						parent.postMessage({ action: 'console', level: 'system-warn', args: [`Timer '${label}' does not exist`] }, '*');
202 | 					}
203 | 					timers.delete(label);
204 | 				};
205 | 
206 | 				const original_assert = console.assert;
207 | 				console.assert = (condition, ...args) => {
208 | 					if (condition) {
209 | 						const stack = new Error().stack;
210 | 						parent.postMessage({ action: 'console', level: 'assert', args, stack }, '*');
211 | 					}
212 | 					original_assert(condition, ...args);
213 | 				};
214 | 
215 | 				const counter = new Map();
216 | 				const original_count = console.count;
217 | 				const original_countreset = console.countReset;
218 | 
219 | 				console.count = (label = 'default') => {
220 | 					counter.set(label, (counter.get(label) || 0) + 1);
221 | 					parent.postMessage({ action: 'console', level: 'system-log', args: `${label}: ${counter.get(label)}` }, '*');
222 | 					original_count(label);
223 | 				};
224 | 
225 | 				console.countReset = (label = 'default') => {
226 | 					if (counter.has(label)) {
227 | 						counter.set(label, 0);
228 | 					} else {
229 | 						parent.postMessage({ action: 'console', level: 'system-warn', args: `Count for '${label}' does not exist` }, '*');
230 | 					}
231 | 					original_countreset(label);
232 | 				};
233 | 
234 | 				const original_trace = console.trace;
235 | 
236 | 				console.trace = (...args) => {
237 | 					const stack = new Error().stack;
238 | 					parent.postMessage({ action: 'console', level: 'trace', args, stack }, '*');
239 | 					original_trace(...args);
240 | 				};
241 | 
242 | 				function stringify(args) {
243 | 					try {
244 | 						return JSON.stringify(args);
245 | 					} catch (error) {
246 | 						return null;
247 | 					}
248 | 				}
249 | 			})()
250 | 		</script>
251 | 
252 | 		<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
253 | 		<script async src="https://unpkg.com/es-module-shims@1.5.5/dist/es-module-shims.wasm.js"></script>
254 | 		<script type="importmap"><!--IMPORT_MAP--></script>
255 | 	</head>
256 | 	<body></body>
257 | </html>
258 | 


--------------------------------------------------------------------------------
/src/output/types.ts:
--------------------------------------------------------------------------------
1 | export type OutputModes = 'preview' | 'js' | 'css' | 'ssr'
2 | 


--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
  1 | import { reactive, watchEffect } from 'vue'
  2 | import { compileFile } from './transform'
  3 | import { utoa, atou } from './utils'
  4 | import {
  5 |   SFCScriptCompileOptions,
  6 |   SFCAsyncStyleCompileOptions,
  7 |   SFCTemplateCompileOptions
  8 | } from 'vue/compiler-sfc'
  9 | import { OutputModes } from './output/types'
 10 | 
 11 | const defaultMainFile = 'App.vue'
 12 | 
 13 | const welcomeCode = `
 14 | <script>
 15 | import { ref, defineComponent } from 'vue'
 16 | 
 17 | export default defineComponent({
 18 |   setup() {
 19 |     const msg = ref('Hello World!')
 20 |     return {
 21 |       msg
 22 |     }
 23 |   }
 24 | })
 25 | </script>
 26 | 
 27 | <template>
 28 |   <div>
 29 |     <h1>{{ msg }}</h1>
 30 |     <input v-model="msg">
 31 |   </div>
 32 | </template>
 33 | `.trim()
 34 | 
 35 | export class File {
 36 |   filename: string
 37 |   code: string
 38 |   hidden: boolean
 39 |   compiled = {
 40 |     js: '',
 41 |     css: '',
 42 |     ssr: ''
 43 |   }
 44 | 
 45 |   constructor(filename: string, code = '', hidden = false) {
 46 |     this.filename = filename
 47 |     this.code = code
 48 |     this.hidden = hidden
 49 |   }
 50 | }
 51 | 
 52 | export interface StoreState {
 53 |   mainFile: string
 54 |   files: Record<string, File>
 55 |   activeFile: File
 56 |   errors: (string | Error)[]
 57 |   vueRuntimeURL: string
 58 | }
 59 | 
 60 | export interface SFCOptions {
 61 |   script?: Omit<SFCScriptCompileOptions, 'id'>
 62 |   style?: SFCAsyncStyleCompileOptions
 63 |   template?: SFCTemplateCompileOptions
 64 | }
 65 | 
 66 | export interface Store {
 67 |   state: StoreState
 68 |   options?: SFCOptions
 69 |   vueVersion?: string
 70 |   init: () => void
 71 |   setActive: (filename: string) => void
 72 |   addFile: (filename: string | File) => void
 73 |   deleteFile: (filename: string) => void
 74 |   getImportMap: () => any
 75 |   initialShowOutput: boolean
 76 |   initialOutputMode: OutputModes
 77 | }
 78 | 
 79 | export interface StoreOptions {
 80 |   serializedState?: string
 81 |   showOutput?: boolean
 82 |   // loose type to allow getting from the URL without inducing a typing error
 83 |   outputMode?: OutputModes | string
 84 |   defaultVueRuntimeURL?: string
 85 |   defaultVueServerRendererURL?: string
 86 | }
 87 | 
 88 | export class ReplStore implements Store {
 89 |   state: StoreState
 90 |   vueVersion?: string
 91 |   options?: SFCOptions
 92 |   initialShowOutput: boolean
 93 |   initialOutputMode: OutputModes
 94 | 
 95 |   private defaultVueRuntimeURL: string
 96 | 
 97 |   constructor({
 98 |     serializedState = '',
 99 |     defaultVueRuntimeURL = `https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.esm.browser.js`,
100 |     showOutput = false,
101 |     outputMode = 'preview'
102 |   }: StoreOptions = {}) {
103 |     let files: StoreState['files'] = {}
104 | 
105 |     if (serializedState) {
106 |       const saved = JSON.parse(atou(serializedState))
107 |       for (const filename in saved) {
108 |         files[filename] = new File(filename, saved[filename])
109 |       }
110 |     } else {
111 |       files = {
112 |         [defaultMainFile]: new File(defaultMainFile, welcomeCode)
113 |       }
114 |     }
115 | 
116 |     this.defaultVueRuntimeURL = defaultVueRuntimeURL
117 |     this.initialShowOutput = showOutput
118 |     this.initialOutputMode = outputMode as OutputModes
119 | 
120 |     let mainFile = defaultMainFile
121 |     if (!files[mainFile]) {
122 |       mainFile = Object.keys(files)[0]
123 |     }
124 |     this.state = reactive({
125 |       mainFile,
126 |       files,
127 |       activeFile: files[mainFile],
128 |       errors: [],
129 |       vueRuntimeURL: this.defaultVueRuntimeURL
130 |     })
131 | 
132 |     this.initImportMap()
133 |   }
134 | 
135 |   // don't start compiling until the options are set
136 |   init() {
137 |     watchEffect(() => compileFile(this, this.state.activeFile))
138 |     for (const file in this.state.files) {
139 |       if (file !== defaultMainFile) {
140 |         compileFile(this, this.state.files[file])
141 |       }
142 |     }
143 |   }
144 | 
145 |   setActive(filename: string) {
146 |     this.state.activeFile = this.state.files[filename]
147 |   }
148 | 
149 |   addFile(fileOrFilename: string | File): void {
150 |     const file =
151 |       typeof fileOrFilename === 'string'
152 |         ? new File(fileOrFilename)
153 |         : fileOrFilename
154 |     this.state.files[file.filename] = file
155 |     if (!file.hidden) this.setActive(file.filename)
156 |   }
157 | 
158 |   deleteFile(filename: string) {
159 |     if (confirm(`Are you sure you want to delete ${filename}?`)) {
160 |       if (this.state.activeFile.filename === filename) {
161 |         this.state.activeFile = this.state.files[this.state.mainFile]
162 |       }
163 |       delete this.state.files[filename]
164 |     }
165 |   }
166 | 
167 |   serialize() {
168 |     return '#' + utoa(JSON.stringify(this.getFiles()))
169 |   }
170 | 
171 |   getFiles() {
172 |     const exported: Record<string, string> = {}
173 |     for (const filename in this.state.files) {
174 |       exported[filename] = this.state.files[filename].code
175 |     }
176 |     return exported
177 |   }
178 | 
179 |   async setFiles(newFiles: Record<string, string>, mainFile = defaultMainFile) {
180 |     const files: Record<string, File> = {}
181 |     if (mainFile === defaultMainFile && !newFiles[mainFile]) {
182 |       files[mainFile] = new File(mainFile, welcomeCode)
183 |     }
184 |     for (const filename in newFiles) {
185 |       files[filename] = new File(filename, newFiles[filename])
186 |     }
187 |     for (const file in files) {
188 |       await compileFile(this, files[file])
189 |     }
190 |     this.state.mainFile = mainFile
191 |     this.state.files = files
192 |     this.initImportMap()
193 |     this.setActive(mainFile)
194 |   }
195 | 
196 |   private initImportMap() {
197 |     const map = this.state.files['import-map.json']
198 |     if (!map) {
199 |       this.state.files['import-map.json'] = new File(
200 |         'import-map.json',
201 |         JSON.stringify(
202 |           {
203 |             imports: {
204 |               vue: this.defaultVueRuntimeURL
205 |             }
206 |           },
207 |           null,
208 |           2
209 |         )
210 |       )
211 |     } else {
212 |       try {
213 |         const json = JSON.parse(map.code)
214 |         if (!json.imports.vue) {
215 |           json.imports.vue = this.defaultVueRuntimeURL
216 |           map.code = JSON.stringify(json, null, 2)
217 |         }
218 |       } catch (e) {}
219 |     }
220 |   }
221 | 
222 |   getImportMap() {
223 |     try {
224 |       return JSON.parse(this.state.files['import-map.json'].code)
225 |     } catch (e) {
226 |       this.state.errors = [
227 |         `Syntax error in import-map.json: ${(e as Error).message}`
228 |       ]
229 |       return {}
230 |     }
231 |   }
232 | 
233 |   setImportMap(map: {
234 |     imports: Record<string, string>
235 |     scopes?: Record<string, Record<string, string>>
236 |   }) {
237 |     this.state.files['import-map.json']!.code = JSON.stringify(map, null, 2)
238 |   }
239 | 
240 |   async setVueVersion(version: string) {
241 |     this.vueVersion = version
242 |     const runtimeUrl = `https://cdn.jsdelivr.net/npm/vue@${version}/dist/vue.esm.browser.js`
243 |     this.state.vueRuntimeURL = runtimeUrl
244 |     const importMap = this.getImportMap()
245 |     const imports = importMap.imports || (importMap.imports = {})
246 |     imports.vue = runtimeUrl
247 |     this.setImportMap(importMap)
248 |     console.info(`[@vue/repl] Now using Vue version: ${version}`)
249 |   }
250 | 
251 |   resetVueVersion() {
252 |     this.vueVersion = undefined
253 |     this.state.vueRuntimeURL = this.defaultVueRuntimeURL
254 |     const importMap = this.getImportMap()
255 |     const imports = importMap.imports || (importMap.imports = {})
256 |     imports.vue = this.defaultVueRuntimeURL
257 |     this.setImportMap(importMap)
258 |     console.info(`[@vue/repl] Now using default Vue version`)
259 |   }
260 | }
261 | 


--------------------------------------------------------------------------------
/src/transform.ts:
--------------------------------------------------------------------------------
  1 | import { Store, File } from './store'
  2 | import {
  3 |   SFCDescriptor,
  4 |   BindingMetadata,
  5 |   shouldTransformRef,
  6 |   transformRef,
  7 |   // CompilerOptions,
  8 |   parse,
  9 | compileStyleAsync,
 10 | compileScript,
 11 | rewriteDefault
 12 | // compileTemplate
 13 | } from 'vue/compiler-sfc'
 14 | import { transform } from 'sucrase'
 15 | // @ts-ignore
 16 | import hashId from 'hash-sum'
 17 | 
 18 | export const COMP_IDENTIFIER = `__sfc__`
 19 | 
 20 | async function transformTS(src: string) {
 21 |   return transform(src, {
 22 |     transforms: ['typescript']
 23 |   }).code
 24 | }
 25 | 
 26 | export async function compileFile(
 27 |   store: Store,
 28 |   { filename, code, compiled }: File
 29 | ) {
 30 |   if (!code.trim()) {
 31 |     store.state.errors = []
 32 |     return
 33 |   }
 34 | 
 35 |   if (filename.endsWith('.css')) {
 36 |     compiled.css = code
 37 |     store.state.errors = []
 38 |     return
 39 |   }
 40 | 
 41 |   if (filename.endsWith('.js') || filename.endsWith('.ts')) {
 42 |     if (shouldTransformRef(code)) {
 43 |       code = transformRef(code, { filename }).code
 44 |     }
 45 |     if (filename.endsWith('.ts')) {
 46 |       code = await transformTS(code)
 47 |     }
 48 |     compiled.js = compiled.ssr = code
 49 |     store.state.errors = []
 50 |     return
 51 |   }
 52 | 
 53 |   if (!filename.endsWith('.vue')) {
 54 |     store.state.errors = []
 55 |     return
 56 |   }
 57 | 
 58 |   const id = hashId(filename)
 59 |   
 60 |   const { errors, descriptor } = parse(code, {
 61 |     filename,
 62 |     sourceMap: true
 63 |   })
 64 |   if (errors.length) {
 65 |     store.state.errors = errors
 66 |     return
 67 |   }
 68 | 
 69 |   if (
 70 |     descriptor.styles.some((s) => s.lang) ||
 71 |     (descriptor.template && descriptor.template.lang)
 72 |   ) {
 73 |     store.state.errors = [
 74 |       `lang="x" pre-processors for <template> or <style> are currently not ` +
 75 |         `supported.`
 76 |     ]
 77 |     return
 78 |   }
 79 | 
 80 |   const scriptLang =
 81 |     (descriptor.script && descriptor.script.lang)
 82 |   const isTS = scriptLang === 'ts'
 83 |   if (scriptLang && !isTS) {
 84 |     store.state.errors = [`Only lang="ts" is supported for <script> blocks.`]
 85 |     return
 86 |   }
 87 | 
 88 |   const hasScoped = descriptor.styles.some((s) => s.scoped)
 89 |   let clientCode = ''
 90 | 
 91 |   const clientScriptResult = await doCompileScript(
 92 |     store,
 93 |     descriptor,
 94 |     id,
 95 |     isTS
 96 |   )
 97 |   if (!clientScriptResult) {
 98 |     return
 99 |   }
100 |   const [clientScript, bindings] = clientScriptResult
101 |   clientCode += clientScript
102 | 
103 |   // template
104 |   // only need dedicated compilation if not using <script setup>
105 |   if (
106 |     descriptor.template &&
107 |     (!descriptor.scriptSetup || store.options?.script?.inlineTemplate === false)
108 |   ) {
109 |     const clientTemplateResult = await doCompileTemplate(
110 |       store,
111 |       descriptor,
112 |       id,
113 |       bindings,
114 |       isTS,
115 |       hasScoped
116 |     )
117 |     if (!clientTemplateResult) {
118 |       return
119 |     }
120 |     clientCode += clientTemplateResult
121 |   }
122 |   
123 |   if (hasScoped) {
124 |     clientCode += `\n${COMP_IDENTIFIER}.__scopeId = ${JSON.stringify(`data-v-${id}`)}`
125 |   }
126 | 
127 |   if (clientCode) {
128 |     clientCode += `\n${COMP_IDENTIFIER}.__file = ${JSON.stringify(filename)}` +
129 |         `\nexport default ${COMP_IDENTIFIER}`
130 |     compiled.js = clientCode.trimStart()
131 |   }
132 | 
133 |   // styles
134 |   let css = ''
135 |   for (const style of descriptor.styles) {
136 |     if (style.module) {
137 |       store.state.errors = [
138 |         `<style module> is not supported in the playground.`
139 |       ]
140 |       return
141 |     }
142 | 
143 |     const styleResult = await compileStyleAsync({
144 |       ...store.options?.style,
145 |       source: style.content,
146 |       filename,
147 |       id,
148 |       scoped: style.scoped,
149 |       modules: !!style.module
150 |     })
151 |     if (styleResult.errors.length) {
152 |       // postcss uses pathToFileURL which isn't polyfilled in the browser
153 |       // ignore these errors for now
154 |       if (!styleResult.errors[0].message.includes('pathToFileURL')) {
155 |         store.state.errors = styleResult.errors
156 |       }
157 |       // proceed even if css compile errors
158 |     } else {
159 |       css += styleResult.code + '\n'
160 |     }
161 |   }
162 |   if (css) {
163 |     compiled.css = css.trim()
164 |   } else {
165 |     compiled.css = '/* No <style> tags present */'
166 |   }
167 | 
168 |   // clear errors
169 |   store.state.errors = []
170 | }
171 | 
172 | async function doCompileScript(
173 |   store: Store,
174 |   descriptor: SFCDescriptor,
175 |   id: string,
176 |   isTS: boolean
177 | ): Promise<[string, BindingMetadata | undefined] | undefined> {
178 |   try {
179 |     if (descriptor.script) {
180 |         const compiledScript = compileScript(descriptor, {
181 |           inlineTemplate: true,
182 |           ...store.options?.script,
183 |           id,
184 |           templateOptions: {
185 |             ...store.options?.template,
186 |             ssrCssVars: descriptor.cssVars,
187 |             compilerOptions: {
188 |               ...store.options?.template?.compilerOptions,
189 |               expressionPlugins: isTS ? ['typescript'] : undefined
190 |             }
191 |           }
192 |         })
193 | 
194 |         let code = ''
195 |         if (compiledScript.bindings) {
196 |           code += `\n/* Analyzed bindings: ${JSON.stringify(
197 |             compiledScript.bindings,
198 |             null,
199 |             2
200 |           )} */`
201 |         }
202 |         code +=
203 |           `\n` +
204 |           rewriteDefault(
205 |             compiledScript.content,
206 |             COMP_IDENTIFIER,
207 |             isTS ? ['typescript'] : undefined
208 |           )
209 | 
210 |         if (descriptor.script.lang === 'ts') {
211 |           code = await transformTS(code)
212 |         }
213 | 
214 |         return [code, compiledScript.bindings]
215 |     } else if (descriptor.scriptSetup) {
216 |       store.state.errors = ['<script setup> is not supported']
217 |       return
218 |     } else {
219 |       return [`\nconst ${COMP_IDENTIFIER} = {}`, undefined]
220 |     }
221 |   } catch (e: any) {
222 |       store.state.errors = [e.stack.split('\n').slice(0, 12).join('\n')]
223 |       return
224 |   }
225 | }
226 | 
227 | async function doCompileTemplate(
228 |   store: Store,
229 |   descriptor: SFCDescriptor,
230 |   id: string,
231 |   bindingMetadata: BindingMetadata | undefined,
232 |   isTS: boolean,
233 |   hasScoped: boolean
234 | ) {
235 |   let code = descriptor.template?.content
236 | 
237 |   if (hasScoped) {
238 |     const node = document.createElement('div')
239 |     node.innerHTML = descriptor.template?.content || ''
240 |     if (node.childElementCount !== 1) {
241 |       store.state.errors = ['only one element on template toot allowed']
242 |     }
243 |     node.querySelectorAll('*').forEach(it => it.setAttribute(`data-v-${id}`, ''))
244 |     code = new XMLSerializer().serializeToString(node.firstElementChild!)
245 |   }
246 | 
247 |   code = `\n${COMP_IDENTIFIER}.template = \`${code}\``
248 | 
249 |   if (isTS) {
250 |     code = await transformTS(code)
251 |   }
252 | 
253 |   return code
254 | }
255 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | import { zlibSync, unzlibSync, strToU8, strFromU8 } 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 | 


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


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "outDir": "dist",
 5 |     "sourceMap": false,
 6 |     "target": "es2016",
 7 |     "useDefineForClassFields": false,
 8 |     "module": "esnext",
 9 |     "moduleResolution": "node",
10 |     "allowJs": false,
11 |     "strict": true,
12 |     "noUnusedLocals": true,
13 |     "experimentalDecorators": true,
14 |     "resolveJsonModule": true,
15 |     "esModuleInterop": true,
16 |     "removeComments": false,
17 |     "lib": ["esnext", "dom"],
18 |     "rootDir": ".",
19 |     "declaration": true,
20 |     "emitDeclarationOnly": true
21 |   },
22 |   "include": ["src"]
23 | }
24 | 


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


--------------------------------------------------------------------------------
/vite.config.docs.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | export default defineConfig({
 5 |   base: '/vue2-repl/',
 6 |   plugins: [vue()],
 7 |   build: {
 8 |     target: 'esnext',
 9 |     outDir: 'docs',
10 |     rollupOptions: {
11 |       external: ['vue', 'vue/compiler-sfc']
12 |     }
13 |   }
14 | })
15 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | export default defineConfig({
 5 |   plugins: [vue()],
 6 |   build: {
 7 |     target: 'esnext',
 8 |     lib: {
 9 |       entry: './src/index.ts',
10 |       formats: ['es'],
11 |       fileName: 'vue2-repl',
12 |       name: 'Vue2Repl'
13 |     },
14 |     rollupOptions: {
15 |       external: ['vue', 'vue/compiler-sfc']
16 |     }
17 |   }
18 | })
19 | 


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