chore: fix types, a11y

vuejs · Apr 26, 2024 · 0aabda9 · 0aabda9
1 parent 5e4e9ec
commit 0aabda9
Show file tree

Hide file tree

Showing 12 changed files with 21 additions and 64 deletions.
diff --git 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
@@ -1,4 +1,8 @@
-<html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <title></title>
+  </head>
   <body>
     <script src="../dist/devtools-background.js"></script>
   </body>

diff --git a/packages/browser-extension/pages/devtools-panel.html b/packages/browser-extension/pages/devtools-panel.html
@@ -1,4 +1,5 @@
-<html>
+<!doctype html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title></title>

diff --git 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
diff --git 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<T = Promise<unknown>>(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
@@ -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<void>
   [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<void>
+  [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => Promise<void>
   [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
@@ -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<void>
   [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<void>
+  [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void | Promise<void>
   [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
@@ -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<HTMLDivElement>()
@@ -147,7 +147,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
     </div>
 
     <!-- iframe -->
-    <Frame
+    <FrameBox
       :style="iframeStyle" :is-dragging="isDragging" :client="{
         close: closePanel,
         getIFrame: getIframe,

diff --git a/packages/playground/basic/src/pages/Hey.vue b/packages/playground/basic/src/pages/Hey.vue
@@ -7,7 +7,7 @@ const counterStore = useCounterStore()
 
 <template>
   <div class="container">
-    <img src="/vite.svg">
+    <img src="/vite.svg" alt="Vite Logo">
     Hey: {{ route.params.id }}
     Counter: {{ counterStore.count }}
   </div>

diff --git a/packages/playground/basic/src/pages/Home.vue b/packages/playground/basic/src/pages/Home.vue
@@ -8,7 +8,7 @@ const visible = ref(false)
   <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" />
-    <img src="/vite.svg">
+    <img src="/vite.svg" alt="Vite Logo">
     <button class="w-30 cursor-pointer" @click="visible = !visible">
       Toggle Foo
     </button>

diff --git 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`)
     }