feat: add a playground to easy test repl different scenarios

zenHeart · zenHeart · commit 60ee4d7c9345 · 2025-08-05T21:40:37.000+08:00
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
   },
   "scripts": {
     "dev": "vite",
+    "dev:playground": "vite -c playground/vite.config.ts",
     "build": "vite build",
     "build-preview": "vite build -c vite.preview.config.ts",
     "format": "prettier --write .",
diff --git a/playground/README.md b/playground/README.md
@@ -0,0 +1,82 @@
+# Vue REPL Playground
+
+Optimize `test/main` to support dynamically adding scenario validations for the REPL. Use `npm run dev:playground` to try it out.
+
+## Playground Architecture
+
+### Directory Structure
+
+```
+playground/
+├── index.html                # HTML entry file with scenario switcher
+├── vite.config.ts            # Standalone Vite config
+├── vite-plugin-scenario.js   # Parse scenarios directory and generate REPL configuration
+├── scenarios/                # Scenario directory, add dynamically
+│   ├── basic/                # Basic example
+│   ├── customMain/           # Custom main entry
+│   ├── pinia/                # Pinia state management example
+│   └── vueRouter/            # Vue Router example
+└── src/
+  └── App.vue               # Main application component
+```
+
+### How It Works
+
+The playground uses a directory-based scenario system, where each scenario is an independent folder under `scenarios/`. Core features include:
+
+- **Virtual Module System**: A Vite plugin scans the scenario directory and generates a virtual module `virtual:playground-files`
+- **Dynamic Scenario Loading**: Users can switch scenarios via the UI, which automatically loads the corresponding configuration
+
+### Scenario Structure
+
+Each scenario directory typically contains the following files:
+
+```
+scenarios/example-scenario/
+├── App.vue          # Main component
+├── main.ts          # Entry file
+├── import-map.json  # Dependency mapping
+├── tsconfig.json    # TypeScript config
+└── _meta.js         # Metadata config for REPL settings
+```
+
+The `_meta.js` file exports the scenario configuration:
+
+```javascript
+export default {
+  mainFile: 'main.ts', // Specify the main entry file
+}
+```
+
+## Usage Example
+
+### Start the Playground
+
+```bash
+# Enter the project directory
+cd vue-repl
+
+# Install dependencies
+npm install
+
+# Start the development server
+npm run playground
+```
+
+Visit the displayed local address (usually http://localhost:5174/) to use the playground.
+
+### Add a New Scenario
+
+1. Create a new folder under the `scenarios/` directory, e.g. `myScenario`
+2. Add the required files:
+
+   ```
+   myScenario/
+   ├── App.vue          # Main component
+   ├── main.ts          # Entry file (default entry)
+   ├── import-map.json  # Dependency config
+   ├── tsconfig.json    # TypeScript config
+   └── _meta.js         # Config with mainFile: 'main.ts'
+   ```
+
+3. Refresh the browser, and the new scenario will automatically appear in the dropdown menu.
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Playground</title>
+    <script type="module" src="./main.ts"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/playground/main.ts b/playground/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+// @ts-ignore
+import App from './src/App.vue'
+
+createApp(App).mount('#app')
diff --git a/playground/scenarios/basic/App.vue b/playground/scenarios/basic/App.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <button @click="increment">Increment</button>
+    <p>Counter: {{ counter }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// a simple demo check Repl default config
+import { ref } from 'vue'
+const counter = ref(0)
+const increment = () => {
+  counter.value++
+}
+</script>
diff --git a/playground/scenarios/basic/_meta.js b/playground/scenarios/basic/_meta.js
@@ -0,0 +1,3 @@
+export default {
+  mainFile: 'App.vue',
+}
diff --git a/playground/scenarios/customMain/App.vue b/playground/scenarios/customMain/App.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>custom main</h1>
+    <button @click="$hi">test globalProperties</button>
+  </div>
+</template>
diff --git a/playground/scenarios/customMain/_meta.js b/playground/scenarios/customMain/_meta.js
@@ -0,0 +1,3 @@
+export default {
+  mainFile: 'main.ts',
+}
diff --git a/playground/scenarios/customMain/import-map.json b/playground/scenarios/customMain/import-map.json
@@ -0,0 +1,5 @@
+{
+  "imports": {
+    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+  }
+}
diff --git a/playground/scenarios/customMain/main.ts b/playground/scenarios/customMain/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App)
+app.config.globalProperties.$hi = () => alert('hi Vue')
+app.mount('#app')
diff --git a/playground/scenarios/customMain/tsconfig.json b/playground/scenarios/customMain/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  }
+}
diff --git a/playground/scenarios/pinia/App.vue b/playground/scenarios/pinia/App.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>Welcome to Pinia Demo</h1>
+    <p>Store message: {{ store.message }}</p>
+    <button @click="updateMessage">Update Message</button>
+  </div>
+</template>
+
+<script setup>
+import { useMainStore } from './store'
+
+const store = useMainStore()
+
+function updateMessage() {
+  store.updateMessage('Message updated at ' + new Date().toLocaleTimeString())
+}
+</script>
diff --git a/playground/scenarios/pinia/_meta.js b/playground/scenarios/pinia/_meta.js
@@ -0,0 +1,3 @@
+export default {
+  mainFile: 'main.ts',
+}
diff --git a/playground/scenarios/pinia/import-map.json b/playground/scenarios/pinia/import-map.json
@@ -0,0 +1,8 @@
+{
+  "imports": {
+    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
+    "pinia": "https://unpkg.com/pinia@2/dist/pinia.esm-browser.js",
+    "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi@0.14.7/lib/v3/index.mjs",
+    "@vue/devtools-api": "https://cdn.jsdelivr.net/npm/@vue/devtools-api@6.6.1/lib/esm/index.js"
+  }
+}
diff --git a/playground/scenarios/pinia/main.ts b/playground/scenarios/pinia/main.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+const pinia = createPinia()
+const app = createApp(App)
+app.use(pinia)
+app.mount('#app')
diff --git a/playground/scenarios/pinia/store.ts b/playground/scenarios/pinia/store.ts
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+
+export const useMainStore = defineStore('main', {
+  state: () => ({
+    message: 'Hello from Pinia!',
+  }),
+  actions: {
+    updateMessage(newMessage: string) {
+      this.message = newMessage
+    },
+  },
+})
diff --git a/playground/scenarios/pinia/tsconfig.json b/playground/scenarios/pinia/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  }
+}
diff --git a/playground/scenarios/vueRouter/About.vue b/playground/scenarios/vueRouter/About.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3>About Page</h3>
+    <p>This is a demo of Vue Router in a sandbox environment</p>
+    <button @click="goHome">Go Home</button>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function goHome() {
+  router.push('/')
+}
+</script>
diff --git a/playground/scenarios/vueRouter/App.vue b/playground/scenarios/vueRouter/App.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h2>Vue Router Demo</h2>
+    <nav>
+      <RouterLink to="/">Home</RouterLink> |
+      <RouterLink to="/about">About</RouterLink>
+    </nav>
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+import { RouterLink } from 'vue-router'
+// Add your setup code here
+</script>
diff --git a/playground/scenarios/vueRouter/Home.vue b/playground/scenarios/vueRouter/Home.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Welcome to Vue Router Demo</h1>
+  </div>
+</template>
diff --git a/playground/scenarios/vueRouter/_meta.js b/playground/scenarios/vueRouter/_meta.js
@@ -0,0 +1,3 @@
+export default {
+  mainFile: 'main.ts',
+}
diff --git a/playground/scenarios/vueRouter/import-map.json b/playground/scenarios/vueRouter/import-map.json
@@ -0,0 +1,9 @@
+{
+  "imports": {
+    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
+    "vue/server-renderer": "http://localhost:5173/src/vue-server-renderer-dev-proxy",
+    "vue-router": "https://unpkg.com/vue-router@4/dist/vue-router.esm-browser.js",
+    "@vue/devtools-api": "https://cdn.jsdelivr.net/npm/@vue/devtools-api@6.6.1/lib/esm/index.js"
+  },
+  "scopes": {}
+}
diff --git a/playground/scenarios/vueRouter/main.ts b/playground/scenarios/vueRouter/main.ts
@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import App from './App.vue'
+import Home from './Home.vue'
+import About from './About.vue'
+
+const routes = [
+  { path: '/', component: Home },
+  { path: '/about', component: About },
+]
+
+// Use createMemoryHistory instead of createWebHistory in the sandbox environment
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes,
+})
+
+// Add router error handling
+router.onError((error) => {
+  console.error('Vue Router error:', error)
+})
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
diff --git a/playground/scenarios/vueRouter/tsconfig.json b/playground/scenarios/vueRouter/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  }
+}
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="container">
+    <ScenarioSelector
+      :options="configs"
+      :defaltValue="configs[0].value"
+      v-model="selectedScenario"
+    ></ScenarioSelector>
+    <Repl v-if="currentScenario" v-bind="replConfigs" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type OutputModes, Repl, useStore, useVueImportMap } from '../../src'
+import ScenarioSelector from './ScenarioSelector.vue'
+import MonacoEditor from '../../src/editor/MonacoEditor.vue'
+// @ts-ignore
+import playgroundFiles from 'virtual:playground-files'
+import { ref, computed, watchEffect } from 'vue'
+
+const selectedScenario = ref('')
+
+const configs = Object.keys(playgroundFiles).map((key) => {
+  return {
+    value: key,
+    label: key,
+  }
+})
+const currentScenario = computed(() => {
+  return playgroundFiles[selectedScenario.value]
+})
+
+watchEffect(() => {
+  if (currentScenario.value) {
+    const scenario = currentScenario.value
+    store.setFiles(scenario.files, scenario.mainFile)
+  }
+})
+
+const store = useStore()
+
+const replConfigs = computed(() => ({
+  store,
+  editor: MonacoEditor,
+  editorOptions: {
+    autoSaveText: '💾',
+  },
+}))
+</script>
+
+<style scoped>
+.container {
+  height: 100vh;
+}
+</style>
diff --git a/playground/src/ScenarioSelector.vue b/playground/src/ScenarioSelector.vue
diff --git a/playground/vite-plugin-scenario.js b/playground/vite-plugin-scenario.js
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
diff --git a/vite.config.ts b/vite.config.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ mainFile: 'App.vue',`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ mainFile: 'main.ts',`
	`3`	`+}`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "imports": {
 +    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
 +  }
 +}