chore: fix types error

Author: baiwusanyu-c

packages/client/src/components/AssetsBlock.svelte

@@ -18,14 +18,14 @@
         video: 'i-carbon-video',
         audio: 'i-carbon-document-audio',
         other: 'i-carbon-document-unknown'
-    }
+    } as any
 
-    let assetInner = null
+    let assetInner:any = {}
     $:if(asset){
         assetInner = asset
     }
 
-    let textContentInner = null
+    let textContentInner: string = ''
     $:if(textContent){
         textContentInner = textContent
     }

packages/client/src/components/AssetsDetail.svelte

@@ -3,6 +3,7 @@ import DividerTitle from "./DividerTitle.svelte";
 import { KMessage, KIcon, KButton } from "@ikun-ui/core";
 import AssetsPreview from "./AssetsPreview.svelte";
 import type { AssetInfo } from "@ikun-svelte-devtools/shared";
+// @ts-ignore
 import {useDevtoolsClient} from "../composables/client";
 import { rpc } from "../composables/rpc";
 import { formatDate, relativeTime } from '@baiwusanyu/utils-date'
@@ -20,38 +21,36 @@ export let asset:(AssetInfo & {fileName: string}) = {
 const client = useDevtoolsClient()
 const origin = window.parent.location.origin
 
-let imageMeta = null
+let imageMeta: {width: number, height: number} = { width: 0, height: 0 }
 let fileSize = normalizeSizeUnits(asset.size)
 const getImageMeta = () => {
     if (asset.type !== 'image')
         return undefined
-    return rpc.getImageMeta(asset.filePath).then(res => {
-      imageMeta = res
+    return rpc.getImageMeta(asset.filePath).then((res: unknown) => {
+      imageMeta = res as {width: number, height: number}
     })
 }
-let aspectRatio = null
 
-
-let textContent = null
+let textContent: string = ''
 const getTextContent = async () => {
     if (asset.type !== 'text')
         return undefined
-    rpc.getTextAssetContent(asset.filePath).then(res => {
-        textContent = res
+    rpc.getTextAssetContent(asset.filePath).then((res: unknown) => {
+        textContent = res as string
     })
 }
 
-let allowList = []
+let allowList: string[] = []
 const getAllowList = async () => {
   if (asset.type !== 'text')
     return undefined
-  rpc.getAllowList().then(res => {
-    allowList = res
+  rpc.getAllowList().then((res: unknown) => {
+    allowList = res as string[]
   })
 }
 getAllowList()
 
-const handleDownload = (url: string, filePath) => {
+const handleDownload = (url: string, filePath: string) => {
   if(allowList.length > 0 && !isPathInArrayOrSubPath(allowList, filePath)){
     KMessage.warning({
       content: 'Target cannot be downloaded or opened due to svelte-kit security policy'
@@ -67,7 +66,7 @@ const handleDownload = (url: string, filePath) => {
   })
 }
 
-const handleOpen= (url: string, filePath) => {
+const handleOpen= (url: string, filePath: string) => {
   if(allowList.length > 0 && !isPathInArrayOrSubPath(allowList, filePath)){
     KMessage.warning({
       content: 'Target cannot be downloaded or opened due to svelte-kit security policy'
@@ -83,7 +82,7 @@ const handleOpen= (url: string, filePath) => {
   })
 }
 
-function isPathInArrayOrSubPath(pathArray, targetPath) {
+function isPathInArrayOrSubPath(pathArray: string[], targetPath: string) {
   // 遍历路径数组
   for (let i = 0; i < pathArray.length; i++) {
     let currentPath = pathArray[i];
@@ -120,7 +119,6 @@ $: if (asset.filePath && asset.type){
                         </span>
                         <KIcon
                               btn
-                              aria-hidden="true"
                               on:click={() => client.inspector.openInEditor(location.origin, asset.filePath, 1, 1)}
                               cls="hover-icon"
                               width="20px"
@@ -149,7 +147,6 @@ $: if (asset.filePath && asset.type){
                                cls="hover-icon"
                               color="text-tx-light"
                               width="20px"
-                              aria-hidden="true"
                               on:click={()=>handleOpen(asset.publicPath, asset.filePath)}
                               height="20px"
                               attrs={{title: 'open in browser'}}
@@ -173,14 +170,6 @@ $: if (asset.filePath && asset.type){
                     </td>
                     <td class="p-1">{ imageMeta.width } x { imageMeta.height }</td>
                 </tr>
-                {#if aspectRatio}
-                    <tr>
-                        <td class="w-30 ws-nowrap p-1 pr5 text-right op50">
-                            Aspect Ratio
-                        </td>
-                        <td class="p-1">{aspectRatio}</td>
-                    </tr>
-                {/if}
             {/if}
             <tr>
                 <td class="w-30 ws-nowrap p-1 pr5 text-right op50">

packages/client/src/components/SideNav.svelte

@@ -14,7 +14,7 @@
     activeIndex = index
   }
 
-  const handleClick = (index: number, tab) => {
+  const handleClick = (index: number, tab:{path: string, evt: <T>(arg: T) => void}) => {
       setActiveIndex(index)
       if(!tab.path && tab.evt){
           tab.evt(hookApi.hook)

packages/client/src/components/TerminalView.svelte

@@ -6,7 +6,7 @@
   import { hookApi } from '../composables/hook'
   import { tick } from "svelte";
   export let modelValue = false
-  let container = null
+  let container: null | HTMLElement = null
   let term: Terminal
 
   $:if(modelValue){
@@ -22,7 +22,7 @@
     })
     const fitAddon = new FitAddon()
     term.loadAddon(fitAddon)
-    term.open(container)
+    term.open(container!)
     fitAddon.fit()
 
     hookApi.hook.on('__svelte-devtools:terminal:data__', (data: string) => {
@@ -37,6 +37,6 @@
   }
 </script>
 <KMask value={modelValue}>
-    <div bind:this = {container}>
+    <div bind:this= {container}>
     </div>
 </KMask>

packages/client/src/composables/tabs.ts

@@ -125,7 +125,7 @@ export function useCategorizedTabs() {
 	return setTabByConfig(builtinTabs);
 }
 
-function setTabByConfig(tabs) {
+function setTabByConfig(tabs: BuiltinTab[]) {
 	const config = getConfig();
 	return tabs.map((v, index) => {
 		v.hide = config.tabsHide[index];

packages/client/src/views/assets.svelte

@@ -23,9 +23,9 @@ async function getAssets() {
 }
 getAssets()
 
-function classifyAssets(value){
+function classifyAssets(value:(AssetInfo & {fileName: string})){
   const basePath = value.path.split('/');
-  (value as (AssetInfo & {fileName: string})).fileName = basePath.pop()
+  value.fileName = basePath.pop() || ''
   let key = basePath.join('/') || '/'
   if(!assetsGrid[key]){
     assetsGrid[key] = []
@@ -85,7 +85,7 @@ const iconDict = {
     video: 'i-carbon-video',
     audio: 'i-carbon-document-audio',
     other: 'i-carbon-document-unknown'
-}
+} as any
 </script>
 <div class="flex flex-col h-full">
     <div class="w-full pt-6 px-4 pb-2 shadow">

packages/client/src/views/graph.svelte

@@ -21,24 +21,25 @@ import {
 } from "@ikun-ui/core";
 import {rpc} from "../composables/rpc";
 import {darkLight} from "@ikun-svelte-devtools/utils-client";
+// @ts-ignore
 import { useDevtoolsClient } from "../composables/client";
-
+import type {ModuleInfo, SvelteDevtoolsHostClient} from '@ikun-svelte-devtools/shared';
 let rootPath = ''
 const modulesMap = new Map<string, { filePath: string }>()
-rpc.root().then(res => {
+rpc.root().then((res: any) => {
     rootPath = res
-}).catch(err => {
+}).catch((err: Error) => {
     console.error(err)
 })
 
 let keyPress = false
-const handleKeyPressDown = (event) => {
+const handleKeyPressDown = (event: KeyboardEvent) => {
   if(event.key === 'Alt' || event.key === 'Meta' || event.key === 'Cmd'){
     keyPress = true
   }
 }
 
-const handleKeyPressUp = (event) => {
+const handleKeyPressUp = (event: KeyboardEvent) => {
   if(event.key === 'Alt' || event.key === 'Meta' || event.key === 'Cmd'){
     keyPress = false
   }
@@ -48,14 +49,14 @@ onDestroy(() => {
   document.removeEventListener('keyup', handleKeyPressUp)
 })
 /********* render chart ***********/
-const handleDataToChartData = (initData) =>{
+const handleDataToChartData = (initData: {data: ModuleInfo[],  main: ModuleInfo[]}) =>{
 
     if (!initData)
         return { node: [], edges: [] }
 
     const { data,  main } = initData
     const { level } = getGraphConfig()
-    const nodes: Data['nodes'] = data.map((mod) => {
+    const nodes: Data['nodes'] = (data).map((mod) => {
         const path = mod.id.replace(/\?.*$/, '').replace(/#.*$/, '')
         const pathSegments = path.split('/')
         const id = mod.id
@@ -80,7 +81,7 @@ const handleDataToChartData = (initData) =>{
                      : darkLight() === 'dark' ? 'white' : 'black',
                  multi: 'html',
              },
-             shape: mod.id.includes('/node_modules/')
+             shape: mod.id!.includes('/node_modules/')
                  ? 'hexagon'
                  : mod.virtual
                      ? 'diamond'
@@ -106,20 +107,20 @@ const handleDataToChartData = (initData) =>{
 }
 
 let searchValue = ''
-let graphData = null
+let graphData: any = null
 const searchNode = debounce((e) => {
   updateChart(e.detail)
 }, 300)
 
-let lastSelectedNode = null
-let networkChart = null
+let lastSelectedNode: any = null
+let networkChart: InstanceType<typeof Network> | null = null
 const client = useDevtoolsClient()
 onMount(async () => {
     graphData = await getGraphData()
     let finalGraphData = initGraphData('', graphData)
 
     const container = document.getElementById('__svelte_devtools_graph')
-    networkChart = new Network(container, handleDataToChartData(finalGraphData) as Data, visNetworkOptions)
+    networkChart = new Network(container!, handleDataToChartData(finalGraphData) as Data, visNetworkOptions)
 
     const resetNodeStyle = () => {
         // @ts-expect-error network body typing error
@@ -143,7 +144,7 @@ onMount(async () => {
 
         const { highlight, openEditor } = getGraphConfig()
         if (openEditor.open && keyPress){
-          return client.inspector.openInEditor(location.origin, modulesMap.get(nodeId)!.filePath, 1, 1)
+          return (client as SvelteDevtoolsHostClient).inspector!.openInEditor(location.origin, modulesMap.get(nodeId)!.filePath, 1, 1)
         }
 
 
@@ -219,15 +220,15 @@ const handleSwitch = (value: boolean, type: 'h' | 'o') => {
 /******************  custom hover path level **********************/
 let hoverPathLevel = level.value
 let hoverPathLevelCustom = level.levelCustom
-const handleHoverPathLevel = (data) => {
+const handleHoverPathLevel = (data:CustomEvent) => {
   hoverPathLevel = data.detail
   const curConfig = getGraphConfig()
   curConfig.level.value = hoverPathLevel
   // update config
   setGraphConfigCache(curConfig)
   updateChart()
 }
-const handlePathLevelCustom = (data) => {
+const handlePathLevelCustom = (data: CustomEvent) => {
   hoverPathLevelCustom = data.detail
   const curConfig = getGraphConfig()
   curConfig.level.levelCustom = hoverPathLevelCustom

packages/client/src/views/inspect.svelte

@@ -2,8 +2,8 @@
     import { rpc } from '../composables/rpc'
     import IframeView from "../components/IframeView.svelte";
     let url = ''
-    rpc.inspectClientUrl().then(res=>{
-        url = res
+    rpc.inspectClientUrl().then((res: unknown )=>{
+        url = res as string
     }).catch(err =>{
         console.error(err)
     })

packages/client/src/views/overview.svelte

@@ -11,19 +11,19 @@
     } from "@ikun-ui/core";
     let routesNum = 0
     rpc.getRoutesInfo().then((res) => {
-        routesNum = res.length
+        routesNum = (res as Array<unknown>).length
     })
 
     let svelteVersion = '0.0.0'
     let svelteKitVersion = '0.0.0'
-    rpc.getPackages().then((res) => {
-        svelteVersion = res.packages['svelte'].version
-        svelteKitVersion = res.packages['@sveltejs/kit'].version
+    rpc.getPackages().then((res: unknown) => {
+        svelteVersion = (res as Record<string, any>).packages['svelte'].version
+        svelteKitVersion = (res as Record<string, any>).packages['@sveltejs/kit'].version
     })
 
     let sfcNum = 0
     rpc.getSvelteSFCList().then((res) => {
-        sfcNum = res.length
+        sfcNum = (res as Array<unknown>).length
     })
 
     const linkHover = {

packages/client/src/views/routes.svelte

@@ -4,10 +4,10 @@
     import {rpc} from "../composables/rpc.js";
     import JSONTree from 'svelte-json-tree'
     import Copy from "../components/Copy.svelte";
-    let routes: Array<routeInfo> | null = []
+    let routes: Array<routeInfo> = []
     let selectRoute = {}
-    rpc.getRoutesInfo().then((res) => {
-        routes = res.sort((a, b) => {
+    rpc.getRoutesInfo().then((res: unknown) => {
+        routes = (res as Array<routeInfo>).sort((a, b) => {
             if (a.filePath < b.filePath) {
                 return -1;
             }
@@ -19,10 +19,12 @@
         selectRoute = routes[0]
     })
 
-    const setActive = (index) => {
-        routes.forEach(value => value.active = false)
-        routes[index].active = true
-        selectRoute = routes[index]
+    const setActive = (index: number) => {
+        if(routes){
+            routes.forEach(value => value.active = false)
+            routes[index].active = true
+            selectRoute = routes[index]
+        }
     }
 </script>