Skip to content

Commit f527fb9

Browse files
webfansplzwebfansplz
authored
chore: improve playground (#234)
1 parent ddc9e32 commit f527fb9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+562
-1138
lines changed

‎package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@
4242
"build:devtools-api": "nr -C packages/devtools-api build",
4343
"dev:browser-extension": "nr -C packages/browser-extension dev",
4444
"dev:ui-story": "nr -C packages/ui story:dev",
45-
"dev:ui-play": "nr -C packages/ui-playground dev",
4645
"prepare:type": "pnpm -r --filter='./packages/**' run prepare:type",
4746
"dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" nr prepare:type && nr build:ui && pnpm -r --parallel --filter='./packages/**' run stub",
4847
"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 @@
5655
"dep:up": "taze -I major -r",
5756
"prepare": "simple-git-hooks",
5857
"test": "vitest --environment jsdom",
59-
"play": "nr -C packages/playground dev",
60-
"play:webpack": "nr -C packages/webpack-playground dev",
58+
"play": "nr -C packages/playground/basic dev",
59+
"play:ui": "nr -C packages/playground/ui dev",
60+
"play:multi-app": "nr -C packages/playground/multi-app dev",
61+
"play:webpack": "nr -C packages/playground/webpack dev",
62+
"play:termui": "nr -C packages/playground/termui dev",
6163
"docs": "pnpm -C docs run docs:dev",
6264
"docs:build": "pnpm -C docs run docs:build",
6365
"zip": "tsx ./scripts/extension-zip.ts",

‎packages/playground/basic/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vue DevTools Basic Playground</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎packages/playground/package.json‎ renamed to ‎packages/playground/basic/package.json‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,19 @@
11
{
2-
"name": "@vue/devtools-playground",
2+
"name": "playground-basic",
33
"type": "module",
4-
"version": "7.0.14",
54
"private": true,
65
"scripts": {
7-
"app": "vue-devtools",
8-
"build:playground": "vite build",
9-
"dev": "vite",
10-
"preview": "vite preview"
6+
"dev": "vite"
117
},
128
"dependencies": {
139
"@vueuse/core": "^10.7.2",
1410
"pinia": "^2.1.7",
11+
"unplugin-auto-import": "^0.17.5",
1512
"vue": "^3.4.15",
16-
"vue-i18n": "^9.9.1",
1713
"vue-router": "^4.2.5"
1814
},
1915
"devDependencies": {
20-
"@intlify/unplugin-vue-i18n": "^2.0.0",
2116
"@vitejs/plugin-vue": "^5.0.3",
22-
"@vue/devtools": "workspace:*",
23-
"@vue/devtools-api": "workspace:*",
2417
"sass": "^1.70.0",
2518
"serve": "^14.2.1",
2619
"typescript": "^5.3.3",

‎packages/playground/public/vite.svg‎ renamed to ‎packages/playground/basic/public/vite.svg‎

File renamed without changes.

‎packages/playground/basic/src/App.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<div class="flex flex-col justify-center">
7+
<div class="text-center">
8+
<RouterView />
9+
</div>
10+
<div class="text-center">
11+
Router Navgation:
12+
<RouterLink to="/">
13+
<span>
14+
/
15+
</span>
16+
</RouterLink>
17+
|
18+
<RouterLink to="/hello">
19+
<span>
20+
/hello
21+
</span>
22+
</RouterLink>
23+
</div>
24+
</div>
25+
</template>

‎packages/playground/src/components/Foo.vue‎ renamed to ‎packages/playground/basic/src/components/Foo.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44

55
<template>
66
<div>
7-
Foo
7+
Foo Component
88
</div>
99
</template>

‎packages/playground/basic/src/main.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { createPinia } from 'pinia'
2+
import type { RouteRecordRaw } from 'vue-router'
3+
import { createRouter, createWebHistory } from 'vue-router'
4+
5+
import App from './App.vue'
6+
7+
import Home from './pages/Home.vue'
8+
import Hey from './pages/Hey.vue'
9+
import './style.css'
10+
import 'uno.css'
11+
12+
const pinia = createPinia()
13+
14+
const app = createApp(App)
15+
16+
const routes: RouteRecordRaw[] = [
17+
{
18+
path: '/',
19+
component: Home,
20+
name: 'home',
21+
alias: '/index',
22+
},
23+
{
24+
path: '/hello',
25+
// component: Hello,
26+
component: () => import('./pages/Hello.vue'),
27+
name: 'hello',
28+
},
29+
{
30+
path: '/hey/:id',
31+
component: Hey,
32+
name: 'hey',
33+
},
34+
]
35+
36+
const router = createRouter({
37+
history: createWebHistory(),
38+
routes,
39+
})
40+
41+
app.use(router)
42+
app.use(pinia)
43+
44+
app.mount('#app')

‎packages/playground/basic/src/pages/Hello.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
import { useAppStore } from '../stores'
3+
4+
const app = useAppStore()
5+
</script>
6+
7+
<template>
8+
<div class="m-auto mt-3 h-80 w-120 flex flex-col items-center justify-center rounded bg-[#363636]">
9+
Hello {{ app.count }}
10+
<button class="w-30 cursor-pointer" @click="app.increment()">
11+
Increment count
12+
</button>
13+
</div>
14+
</template>
15+
16+
<style lang="scss" scoped>
17+
.container {
18+
width: 250px;
19+
height: 150px;
20+
background: #363636;
21+
border-radius: 4px;
22+
}
23+
</style>

‎packages/playground/src/pages/Hey.vue‎ renamed to ‎packages/playground/basic/src/pages/Hey.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script setup lang="ts">
2-
import { useRoute } from 'vue-router'
3-
42
const route = useRoute()
53
</script>
64

‎packages/playground/basic/src/pages/Home.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup lang="ts">
2+
import Foo from '../components/Foo.vue'
3+
4+
const visible = ref(false)
5+
</script>
6+
7+
<template>
8+
<div class="m-auto mt-3 h-80 w-120 flex flex-col items-center justify-center rounded bg-[#363636]">
9+
Home
10+
<Foo v-if="visible" />
11+
<button class="w-30 cursor-pointer" @click="visible = !visible">
12+
Toggle Foo
13+
</button>
14+
</div>
15+
</template>
16+
17+
<style lang="scss" scoped>
18+
19+
</style>

0 commit comments

Comments
 (0)