From 0aabda9aa1e94e3adeac27bea464aa617b7311c5 Mon Sep 17 00:00:00 2001 From: arlo Date: Fri, 26 Apr 2024 21:59:39 +0800 Subject: [PATCH] chore: fix types, a11y --- packages/applet/src/styles/base.css | 3 +- .../pages/devtools-background.html | 6 ++- .../pages/devtools-panel.html | 3 +- packages/client/src/assets/styles/main.css | 3 +- .../components/ComponentTreeNode.vue | 46 ------------------- packages/core/src/vite-bridge/server.ts | 2 +- packages/devtools-kit/src/api/hook.ts | 6 +-- packages/devtools-kit/src/types/hook.ts | 6 +-- packages/overlay/src/App.vue | 4 +- packages/playground/basic/src/pages/Hey.vue | 2 +- packages/playground/basic/src/pages/Home.vue | 2 +- packages/vite/src/vite.ts | 2 +- 12 files changed, 21 insertions(+), 64 deletions(-) delete mode 100644 packages/client/src/components/components/ComponentTreeNode.vue diff --git a/packages/applet/src/styles/base.css b/packages/applet/src/styles/base.css index fb098060..52f76382 100644 --- a/packages/applet/src/styles/base.css +++ b/packages/applet/src/styles/base.css @@ -8,9 +8,8 @@ position: absolute; left: 0; top: 0; - transition: 0.2s ease; content: ''; - transition: opacity 0.4s; + transition: opacity 0.4s ease; z-index: 1; } .splitpanes__splitter:hover:before { diff --git a/packages/browser-extension/pages/devtools-background.html b/packages/browser-extension/pages/devtools-background.html index 3d578566..7596585a 100644 --- a/packages/browser-extension/pages/devtools-background.html +++ b/packages/browser-extension/pages/devtools-background.html @@ -1,4 +1,8 @@ - + + + + + diff --git a/packages/browser-extension/pages/devtools-panel.html b/packages/browser-extension/pages/devtools-panel.html index f7ba9e04..caeafa0d 100644 --- a/packages/browser-extension/pages/devtools-panel.html +++ b/packages/browser-extension/pages/devtools-panel.html @@ -1,4 +1,5 @@ - + + diff --git a/packages/client/src/assets/styles/main.css b/packages/client/src/assets/styles/main.css index 72a5e5ec..3f023ee0 100644 --- a/packages/client/src/assets/styles/main.css +++ b/packages/client/src/assets/styles/main.css @@ -29,9 +29,8 @@ body::-webkit-scrollbar { position: absolute; left: 0; top: 0; - transition: 0.2s ease; content: ''; - transition: opacity 0.4s; + transition: opacity 0.4s ease; z-index: 1; } .splitpanes__splitter:hover:before { diff --git a/packages/client/src/components/components/ComponentTreeNode.vue b/packages/client/src/components/components/ComponentTreeNode.vue deleted file mode 100644 index ecff752f..00000000 --- a/packages/client/src/components/components/ComponentTreeNode.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - diff --git a/packages/core/src/vite-bridge/server.ts b/packages/core/src/vite-bridge/server.ts index 35d2eda1..08eee451 100644 --- a/packages/core/src/vite-bridge/server.ts +++ b/packages/core/src/vite-bridge/server.ts @@ -5,7 +5,7 @@ export function initViteServerContext(context: ViteDevServer) { setViteServerContext(context) } -export function defineViteServerAction(name: string, action: (...args: any[]) => void) { +export function defineViteServerAction>(name: string, action: (...args: any[]) => void | T) { const viteServer = getViteServerContext() // `server.hot` (Vite 5.1+) > `server.ws` const ws = viteServer.hot ?? viteServer.ws diff --git a/packages/devtools-kit/src/api/hook.ts b/packages/devtools-kit/src/api/hook.ts index cd40a90b..a38b4874 100644 --- a/packages/devtools-kit/src/api/hook.ts +++ b/packages/devtools-kit/src/api/hook.ts @@ -48,10 +48,10 @@ export interface DevToolsEvent { app: VueAppInstance | undefined instanceData: InspectorStateApiPayload['state'] }) => void - [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => void + [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => Promise [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: { inspectorId: string, data: InspectorTreeApiPayload['rootNodes'] }) => void - [DevToolsEvents.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload) => void - [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => void + [DevToolsEvents.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload) => Promise + [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => Promise [DevToolsEvents.SEND_INSPECTOR_STATE]: (payload: string) => void [DevToolsEvents.VISIT_COMPONENT_TREE]: (payload: { componentInstance: VueAppInstance | undefined diff --git a/packages/devtools-kit/src/types/hook.ts b/packages/devtools-kit/src/types/hook.ts index e7a6872b..fee5878e 100644 --- a/packages/devtools-kit/src/types/hook.ts +++ b/packages/devtools-kit/src/types/hook.ts @@ -21,10 +21,10 @@ export enum DevToolsHooks { } export interface DevToolsEvent { - [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void + [DevToolsHooks.APP_INIT]: (app: VueAppInstance['appContext']['app'], version: string) => void | Promise [DevToolsHooks.APP_CONNECTED]: () => void - [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void - [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void + [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void | Promise + [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void | Promise [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added'] [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added'] [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: { target?: string }) => void diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue index d6c83fdd..433b7efc 100644 --- a/packages/overlay/src/App.vue +++ b/packages/overlay/src/App.vue @@ -6,7 +6,7 @@ import { useDevToolsColorMode } from '@vue/devtools-ui' import { devtools, onDevToolsConnected } from '@vue/devtools-kit' import { registerBridge, useFrameState, useIframe, usePanelVisible, usePosition } from '~/composables' import { checkIsSafari } from '~/utils' -import Frame from '~/components/FrameBox.vue' +import FrameBox from '~/components/FrameBox.vue' type ViewMode = 'xs' | 'default' | 'fullscreen' const anchorEle = ref() @@ -147,7 +147,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => { - - + Vite Logo Hey: {{ route.params.id }} Counter: {{ counterStore.count }} diff --git a/packages/playground/basic/src/pages/Home.vue b/packages/playground/basic/src/pages/Home.vue index 6f4b354d..5cb82109 100644 --- a/packages/playground/basic/src/pages/Home.vue +++ b/packages/playground/basic/src/pages/Home.vue @@ -8,7 +8,7 @@ const visible = ref(false)
Home - + Vite Logo diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts index e5506131..def4923e 100644 --- a/packages/vite/src/vite.ts +++ b/packages/vite/src/vite.ts @@ -111,7 +111,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt const urls = server.resolvedUrls! const keys = normalizeComboKeyPrint('option-shift-d') _printUrls() - for (const url of urls?.local) + for (const url of urls.local) console.log(` ${green('➜')} ${bold('Vue DevTools')}: ${green(`Open ${colorUrl(`${url}__devtools__/`)} as a separate window`)}`) console.log(` ${green('➜')} ${bold('Vue DevTools')}: ${green(`Press ${yellow(keys)} in App to toggle the Vue DevTools`)}\n`) }