chore: improve playground (#234)

vuejs · Feb 6, 2024 · f527fb9 · f527fb9
1 parent ddc9e32
commit f527fb9
Show file tree

Hide file tree

Showing 65 changed files with 562 additions and 1,138 deletions.
diff --git a/package.json b/package.json
@@ -42,7 +42,6 @@
  "build:devtools-api": "nr -C packages/devtools-api build",
  "dev:browser-extension": "nr -C packages/browser-extension dev",
  "dev:ui-story": "nr -C packages/ui story:dev",
- "dev:ui-play": "nr -C packages/ui-playground dev",
  "prepare:type": "pnpm -r --filter='./packages/**' run prepare:type",
  "dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" nr prepare:type && nr build:ui && pnpm -r --parallel --filter='./packages/**' run stub",
  "build": "pnpm -r --filter='./packages/{shared,core,ui,devtools-kit,vite}' run build && pnpm build:client && pnpm build:overlay && pnpm build:browser-extension && pnpm build:electron && pnpm build:devtools && pnpm build:devtools-api",
@@ -56,8 +55,11 @@
  "dep:up": "taze -I major -r",
  "prepare": "simple-git-hooks",
  "test": "vitest --environment jsdom",
- "play": "nr -C packages/playground dev",
- "play:webpack": "nr -C packages/webpack-playground dev",
+ "play": "nr -C packages/playground/basic dev",
+ "play:ui": "nr -C packages/playground/ui dev",
+ "play:multi-app": "nr -C packages/playground/multi-app dev",
+ "play:webpack": "nr -C packages/playground/webpack dev",
+ "play:termui": "nr -C packages/playground/termui dev",
  "docs": "pnpm -C docs run docs:dev",
  "docs:build": "pnpm -C docs run docs:build",
  "zip": "tsx ./scripts/extension-zip.ts",

diff --git a/packages/playground/basic/index.html b/packages/playground/basic/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vue DevTools Basic Playground</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
+</html>
diff --git a/packages/playground/package.json → packages/playground/basic/package.json b/packages/playground/package.json → packages/playground/basic/package.json
@@ -1,26 +1,19 @@
 {
- "name": "@vue/devtools-playground",
+ "name": "playground-basic",
  "type": "module",
- "version": "7.0.14",
  "private": true,
  "scripts": {
- "app": "vue-devtools",
- "build:playground": "vite build",
- "dev": "vite",
- "preview": "vite preview"
+ "dev": "vite"
  },
  "dependencies": {
  "@vueuse/core": "^10.7.2",
  "pinia": "^2.1.7",
+ "unplugin-auto-import": "^0.17.5",
  "vue": "^3.4.15",
- "vue-i18n": "^9.9.1",
  "vue-router": "^4.2.5"
  },
  "devDependencies": {
- "@intlify/unplugin-vue-i18n": "^2.0.0",
  "@vitejs/plugin-vue": "^5.0.3",
- "@vue/devtools": "workspace:*",
- "@vue/devtools-api": "workspace:*",
  "sass": "^1.70.0",
  "serve": "^14.2.1",
  "typescript": "^5.3.3",

diff --git a/packages/playground/public/vite.svg → packages/playground/basic/public/vite.svg b/packages/playground/public/vite.svg → packages/playground/basic/public/vite.svg
diff --git a/packages/playground/basic/src/App.vue b/packages/playground/basic/src/App.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+ <div class="flex flex-col justify-center">
+ <div class="text-center">
+ <RouterView />
+ </div>
+ <div class="text-center">
+ Router Navgation:
+ <RouterLink to="/">
+ <span>
+ /
+ </span>
+ </RouterLink>
+ |
+ <RouterLink to="/hello">
+ <span>
+ /hello
+ </span>
+ </RouterLink>
+ </div>
+ </div>
+</template>
diff --git a/packages/playground/src/components/Foo.vue → ...s/playground/basic/src/components/Foo.vue b/packages/playground/src/components/Foo.vue → ...s/playground/basic/src/components/Foo.vue
@@ -4,6 +4,6 @@
 
 <template>
  <div>
- Foo
+ Foo Component
  </div>
 </template>
diff --git a/packages/playground/basic/src/main.ts b/packages/playground/basic/src/main.ts
@@ -0,0 +1,44 @@
+import { createPinia } from 'pinia'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
+
+import App from './App.vue'
+
+import Home from './pages/Home.vue'
+import Hey from './pages/Hey.vue'
+import './style.css'
+import 'uno.css'
+
+const pinia = createPinia()
+
+const app = createApp(App)
+
+const routes: RouteRecordRaw[] = [
+ {
+ path: '/',
+ component: Home,
+ name: 'home',
+ alias: '/index',
+ },
+ {
+ path: '/hello',
+ // component: Hello,
+ component: () => import('./pages/Hello.vue'),
+ name: 'hello',
+ },
+ {
+ path: '/hey/:id',
+ component: Hey,
+ name: 'hey',
+ },
+]
+
+const router = createRouter({
+ history: createWebHistory(),
+ routes,
+})
+
+app.use(router)
+app.use(pinia)
+
+app.mount('#app')
diff --git a/packages/playground/basic/src/pages/Hello.vue b/packages/playground/basic/src/pages/Hello.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useAppStore } from '../stores'
+
+const app = useAppStore()
+</script>
+
+<template>
+ <div class="m-auto mt-3 h-80 w-120 flex flex-col items-center justify-center rounded bg-[#363636]">
+ Hello {{ app.count }}
+ <button class="w-30 cursor-pointer" @click="app.increment()">
+ Increment count
+ </button>
+ </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+ width: 250px;
+ height: 150px;
+ background: #363636;
+ border-radius: 4px;
+}
+</style>
diff --git a/packages/playground/src/pages/Hey.vue → packages/playground/basic/src/pages/Hey.vue b/packages/playground/src/pages/Hey.vue → packages/playground/basic/src/pages/Hey.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
-
 const route = useRoute()
 </script>
 

diff --git a/packages/playground/basic/src/pages/Home.vue b/packages/playground/basic/src/pages/Home.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import Foo from '../components/Foo.vue'
+
+const visible = ref(false)
+</script>
+
+<template>
+ <div class="m-auto mt-3 h-80 w-120 flex flex-col items-center justify-center rounded bg-[#363636]">
+ Home
+ <Foo v-if="visible" />
+ <button class="w-30 cursor-pointer" @click="visible = !visible">
+ Toggle Foo
+ </button>
+ </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/playground/src/stores/index.ts → ...ages/playground/basic/src/stores/index.ts b/packages/playground/src/stores/index.ts → ...ages/playground/basic/src/stores/index.ts
diff --git a/packages/playground/src/style.css → packages/playground/basic/src/style.css b/packages/playground/src/style.css → packages/playground/basic/src/style.css
diff --git a/packages/playground/basic/uno.config.ts b/packages/playground/basic/uno.config.ts
@@ -0,0 +1,20 @@
+import {
+ defineConfig,
+ presetAttributify,
+ presetTypography,
+ presetUno,
+ transformerDirectives,
+ transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+ presets: [
+ presetUno(),
+ presetAttributify(),
+ presetTypography(),
+ ],
+ transformers: [
+ transformerDirectives(),
+ transformerVariantGroup(),
+ ],
+})
diff --git a/packages/playground/basic/vite.config.ts b/packages/playground/basic/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+import VueDevtools from 'vite-plugin-vue-devtools'
+import Unocss from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ vue(),
+ VueDevtools(),
+ Unocss(),
+ AutoImport({
+ imports: [
+ 'vue',
+ 'vue-router',
+ '@vueuse/core',
+ ],
+ }),
+ ],
+ server: {
+ port: 3000,
+ },
+})
diff --git a/packages/playground/locales/en.yml b/packages/playground/locales/en.yml
diff --git a/packages/playground/locales/es.yml b/packages/playground/locales/es.yml
diff --git a/packages/playground/locales/fr.yml b/packages/playground/locales/fr.yml
diff --git a/packages/playground/locales/ja.yml b/packages/playground/locales/ja.yml
diff --git a/packages/playground/locales/zh-CN.yml b/packages/playground/locales/zh-CN.yml
diff --git a/packages/playground/index.html → packages/playground/multi-app/index.html b/packages/playground/index.html → packages/playground/multi-app/index.html
@@ -4,15 +4,11 @@
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Vue DevTools Playground</title>
- <!-- <script>
- window.__VUE_DEVTOOLS_PORT__ = 8080
- </script>
- <script src="http://localhost:8080"></script> -->
+ <title>Vue DevTools Basic Playground</title>
  </head>
  <body>
- <div id="app2"></div>
  <div id="app"></div>
+ <div id="app2"></div>
  <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
diff --git a/packages/playground/multi-app/package.json b/packages/playground/multi-app/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "playground-basic",
+ "type": "module",
+ "private": true,
+ "scripts": {
+ "dev": "vite"
+ },
+ "dependencies": {
+ "@vueuse/core": "^10.7.2",
+ "pinia": "^2.1.7",
+ "unplugin-auto-import": "^0.17.5",
+ "vue": "^3.4.15",
+ "vue-router": "^4.2.5"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^5.0.3",
+ "sass": "^1.70.0",
+ "serve": "^14.2.1",
+ "typescript": "^5.3.3",
+ "vite": "^5.0.12",
+ "vite-plugin-inspect": "^0.8.3",
+ "vite-plugin-vue-devtools": "workspace:*"
+ }
+}
diff --git a/packages/playground/multi-app/public/vite.svg b/packages/playground/multi-app/public/vite.svg
diff --git a/packages/playground/multi-app/src/App.vue b/packages/playground/multi-app/src/App.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const count = ref(0)
+</script>
+
+<template>
+ <div class="m-auto mt-3 h-30 w-60 flex flex-col items-center justify-center rounded bg-[#363636]">
+ App
+ <div>Count: {{ count }}</div>
+ <button @click="count++">
+ ++
+ </button>
+ </div>
+</template>
diff --git a/packages/playground/multi-app/src/App2.vue b/packages/playground/multi-app/src/App2.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const count = ref(0)
+</script>
+
+<template>
+ <div class="m-auto mt-3 h-30 w-60 flex flex-col items-center justify-center rounded bg-[#363636]">
+ App2
+ <div>Count: {{ count }}</div>
+ <button @click="count++">
+ ++
+ </button>
+ </div>
+</template>