vuejs · zenHeart · May 14, 2025 · May 15, 2025 · May 15, 2025 · May 15, 2025
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,84 @@
+# 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
+│   ├── html/                 # html as entry example
+│   ├── pinia/                # Pinia state management example
+│   └── vueRouter/            # Vue Router example
+│   └── vueUse/               # Vue Use 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 dev: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,18 @@
+<!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>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+    <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,6 @@
+export default {
+  mainFile: 'App.vue',
+  ReplOptions: {
+    theme: 'dark',
+  },
+}
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/html/_meta.js b/playground/scenarios/html/_meta.js
@@ -0,0 +1,6 @@
+export default {
+  mainFile: 'index.html',
+  ReplOptions: {
+    theme: 'dark',
+  },
+}
diff --git a/playground/scenarios/html/import-map.json b/playground/scenarios/html/import-map.json
@@ -0,0 +1,5 @@
+{
+  "imports": {
+    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+  }
+}
diff --git a/playground/scenarios/html/index.html b/playground/scenarios/html/index.html
@@ -0,0 +1,41 @@
+<script type="module">
+  import { createApp } from 'vue'
+
+  // give each todo a unique id
+  let id = 0
+
+  createApp({
+    data() {
+      return {
+        newTodo: '',
+        todos: [
+          { id: id++, text: 'Learn HTML' },
+          { id: id++, text: 'Learn JavaScript' },
+          { id: id++, text: 'Learn Vue' },
+        ],
+      }
+    },
+    methods: {
+      addTodo() {
+        this.todos.push({ id: id++, text: this.newTodo })
+        this.newTodo = ''
+      },
+      removeTodo(todo) {
+        this.todos = this.todos.filter((t) => t !== todo)
+      },
+    },
+  }).mount('#app')
+</script>
+
+<div id="app">
+  <form @submit.prevent="addTodo">
+    <input v-model="newTodo" required placeholder="new todo" />
+    <button>Add Todo</button>
+  </form>
+  <ul>
+    <li v-for="todo in todos" :key="todo.id">
+      {{ todo.text }}
+      <button @click="removeTodo(todo)">X</button>
+    </li>
+  </ul>
+</div>
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
+  }
+}