Skip to content

Commit 61ccd48

Browse files
antfuantfu
committed
chore: update
1 parent eb437e0 commit 61ccd48

11 files changed

Lines changed: 244 additions & 57 deletions

File tree

‎packages/core/playground/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,9 @@
77
"dev": "VITE_DEVTOOLS_LOCAL_DEV=true vite",
88
"dev:standalone": "DEBUG='vite:devtools:*' VITE_DEVTOOLS_LOCAL_DEV=true tsx ../src/node/cli.ts",
99
"build": "vite build && vite-devtools"
10+
},
11+
"devDependencies": {
12+
"unplugin-vue-router": "catalog:playground",
13+
"vue-router": "catalog:playground"
1014
}
1115
}

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

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,8 @@
1-
<script setup lang="ts">
2-
import HelloWorld from './components/HelloWorld.vue'
3-
</script>
4-
51
<template>
6-
<div>
7-
<a href="https://vite.dev" target="_blank">
8-
<img src="/vite.svg" class="logo" alt="Vite logo">
9-
</a>
10-
<a href="https://vuejs.org/" target="_blank">
11-
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
12-
</a>
13-
</div>
14-
<HelloWorld msg="Vite + Vue" />
2+
<Suspense>
3+
<RouterView />
4+
<template #fallback>
5+
<div>Loading...</div>
6+
</template>
7+
</Suspense>
158
</template>
16-
17-
<style scoped>
18-
.logo {
19-
height: 6em;
20-
padding: 1.5em;
21-
will-change: filter;
22-
transition: filter 300ms;
23-
}
24-
.logo:hover {
25-
filter: drop-shadow(0 0 2em #646cffaa);
26-
}
27-
.logo.vue:hover {
28-
filter: drop-shadow(0 0 2em #42b883aa);
29-
}
30-
</style>

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
import { createApp } from 'vue'
2+
import { createRouter, createWebHistory } from 'vue-router'
3+
import { routes } from 'vue-router/auto-routes'
4+
25
import App from './App.vue'
36
import './style.css'
47

5-
createApp(App).mount('#app')
8+
const router = createRouter({
9+
history: createWebHistory(),
10+
routes,
11+
})
12+
13+
createApp(App)
14+
.use(router)
15+
.mount('#app')

‎packages/core/playground/src/pages/devtools.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
3+
import { onMounted, shallowRef } from 'vue'
4+
5+
const stateRef = shallowRef<any>(undefined)
6+
7+
onMounted(async () => {
8+
const client = await getDevToolsRpcClient()
9+
const state = await client.sharedState.get('counter')
10+
11+
stateRef.value = state.get()
12+
state.on('updated', () => {
13+
stateRef.value = state.get()
14+
})
15+
})
16+
</script>
17+
18+
<template>
19+
<div>
20+
<h1>DevTools {{ stateRef }}</h1>
21+
</div>
22+
</template>

‎packages/core/playground/src/pages/index.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
import HelloWorld from '../components/HelloWorld.vue'
3+
</script>
4+
5+
<template>
6+
<div>
7+
<a href="https://vite.dev" target="_blank">
8+
<img src="/vite.svg" class="logo" alt="Vite logo">
9+
</a>
10+
<a href="https://vuejs.org/" target="_blank">
11+
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
12+
</a>
13+
</div>
14+
<HelloWorld msg="Vite + Vue" />
15+
</template>
16+
17+
<style scoped>
18+
.logo {
19+
height: 6em;
20+
padding: 1.5em;
21+
will-change: filter;
22+
transition: filter 300ms;
23+
}
24+
.logo:hover {
25+
filter: drop-shadow(0 0 2em #646cffaa);
26+
}
27+
.logo.vue:hover {
28+
filter: drop-shadow(0 0 2em #42b883aa);
29+
}
30+
</style>

‎packages/core/playground/typed-router.d.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* eslint-disable */
2+
/* prettier-ignore */
3+
// @ts-nocheck
4+
// noinspection ES6UnusedImports
5+
// Generated by unplugin-vue-router. !! DO NOT MODIFY THIS FILE !!
6+
// It's recommended to commit this file.
7+
// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
8+
9+
declare module 'vue-router/auto-resolver' {
10+
export type ParamParserCustom = never
11+
}
12+
13+
declare module 'vue-router/auto-routes' {
14+
import type {
15+
RouteRecordInfo,
16+
ParamValue,
17+
ParamValueOneOrMore,
18+
ParamValueZeroOrMore,
19+
ParamValueZeroOrOne,
20+
} from 'vue-router'
21+
22+
/**
23+
* Route name map generated by unplugin-vue-router
24+
*/
25+
export interface RouteNamedMap {
26+
'/': RouteRecordInfo<
27+
'/',
28+
'/',
29+
Record<never, never>,
30+
Record<never, never>,
31+
| never
32+
>,
33+
'/devtools': RouteRecordInfo<
34+
'/devtools',
35+
'/devtools',
36+
Record<never, never>,
37+
Record<never, never>,
38+
| never
39+
>,
40+
}
41+
42+
/**
43+
* Route file to route info map by unplugin-vue-router.
44+
* Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
45+
*
46+
* Each key is a file path relative to the project root with 2 properties:
47+
* - routes: union of route names of the possible routes when in this page (passed to useRoute<...>())
48+
* - views: names of nested views (can be passed to <RouterView name="...">)
49+
*
50+
* @internal
51+
*/
52+
export interface _RouteFileInfoMap {
53+
'src/pages/index.vue': {
54+
routes:
55+
| '/'
56+
views:
57+
| never
58+
}
59+
'src/pages/devtools.vue': {
60+
routes:
61+
| '/devtools'
62+
views:
63+
| never
64+
}
65+
}
66+
67+
/**
68+
* Get a union of possible route names in a certain route component file.
69+
* Used by the \`sfc-typed-router\` Volar plugin to automatically type \`useRoute()\`.
70+
*
71+
* @internal
72+
*/
73+
export type _RouteNamesForFilePath<FilePath extends string> =
74+
_RouteFileInfoMap extends Record<FilePath, infer Info>
75+
? Info['routes']
76+
: keyof RouteNamedMap
77+
}

‎packages/core/playground/vite.config.ts‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import process from 'node:process'
22
import Vue from '@vitejs/plugin-vue'
33
import UnoCSS from 'unocss/vite'
4+
import VueRouter from 'unplugin-vue-router/vite'
45
import { defineConfig } from 'vite'
56
import Tracer from 'vite-plugin-vue-tracer'
67
// eslint-disable-next-line ts/ban-ts-comment
@@ -16,6 +17,7 @@ export default defineConfig({
1617
},
1718
base: './',
1819
plugins: [
20+
VueRouter(),
1921
Vue(),
2022
{
2123
name: 'build-css',
@@ -38,7 +40,7 @@ export default defineConfig({
3840
{
3941
name: 'local',
4042
devtools: {
41-
setup(ctx) {
43+
async setup(ctx) {
4244
ctx.docks.register({
4345
title: 'Local',
4446
icon: 'logos:vue',
@@ -94,6 +96,14 @@ export default defineConfig({
9496
action: ctx.utils.createSimpleClientScript(() => {}),
9597
})
9698

99+
ctx.docks.register({
100+
id: 'devtools-tab',
101+
type: 'iframe',
102+
url: '/devtools/',
103+
title: 'DevTools',
104+
icon: 'ph:gear-duotone',
105+
})
106+
97107
ctx.docks.register({
98108
id: 'launcher',
99109
type: 'launcher',
@@ -123,10 +133,16 @@ export default defineConfig({
123133
},
124134
})
125135

126-
let count = 1
136+
const counterState = await ctx.rpc.sharedState.get('counter', {
137+
initialValue: { count: 1 },
138+
})
139+
127140
// eslint-disable-next-line unimport/auto-insert
128141
setInterval(() => {
129-
count = (count + 1) % 5
142+
counterState.mutate((current) => {
143+
current.count = (current.count + 1) % 5
144+
})
145+
const count = counterState.get().count
130146
ctx.docks.update({
131147
id: 'counter',
132148
type: 'action',

‎packages/core/src/node/host-functions.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,12 @@ export class RpcFunctionsHost extends RpcFunctionsCollectorBase<DevToolsRpcServe
2929
if (!this._rpcGroup)
3030
throw new Error('RpcFunctionsHost] RpcGroup is not set, it likely to be an internal bug of Vite DevTools')
3131
// @ts-expect-error - BirpcGroup.broadcast.$callOptional is not typed correctly
32-
return this._rpcGroup.broadcast.$callOptional<T>(name, ...args)
32+
return this._rpcGroup.broadcast.$callRaw<T>({
33+
name,
34+
args,
35+
optional: true,
36+
event: true,
37+
})
3338
}
3439

3540
getCurrentRpcSession(): DevToolsNodeRpcSession | undefined {

‎packages/kit/src/utils/shared-state.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export function createSharedState<T extends Objectish>(
7373
const events = createEventEmitter<SharedStateEvents<T>>()
7474
let state = options.initialState
7575
const syncIds = new Set<string>()
76+
7677
return {
7778
on: events.on,
7879
get: () => state as Immutable<T>,

0 commit comments

Comments
 (0)