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>