From 7a22ca24bbac57913cd1e65a8fb245c4a01d7272 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Wed, 2 Aug 2023 16:51:10 +0800
Subject: [PATCH 01/11] feat: add state analyze init

---
 packages/core/build.config.ts                 |  1 +
 packages/core/package.json                    |  1 +
 .../src/compiler/__test__/analyze.test.ts     |  9 +++---
 .../core/src/compiler/__test__/common.test.ts | 15 ----------
 packages/core/src/compiler/common/analyze.ts  | 14 ++++++----
 packages/core/src/compiler/common/parse.ts    | 11 ++++----
 packages/core/src/compiler/index.ts           | 28 +++++++++++++++----
 packages/core/src/compiler/state-analyze.ts   | 16 +++++++++++
 packages/node/src/vite.ts                     | 24 +++++++++++-----
 pnpm-lock.yaml                                | 23 +++++++++++++--
 tsconfig.json                                 |  2 +-
 11 files changed, 97 insertions(+), 47 deletions(-)
 create mode 100644 packages/core/src/compiler/state-analyze.ts

diff --git a/packages/core/build.config.ts b/packages/core/build.config.ts
index 268b6001..40d41421 100644
--- a/packages/core/build.config.ts
+++ b/packages/core/build.config.ts
@@ -11,6 +11,7 @@ export default defineBuildConfig({
     '@babel/parser',
     'estree-walker',
     'magic-string',
+    'esm-analyzer',
   ],
   declaration: true,
   rollup: {
diff --git a/packages/core/package.json b/packages/core/package.json
index 903c04b0..844cf7af 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "@babel/parser": "^7.22.7",
     "birpc": "^0.2.12",
+    "esm-analyzer": "^0.2.6",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.30.2",
     "vite-hot-client": "^0.2.1"
diff --git a/packages/core/src/compiler/__test__/analyze.test.ts b/packages/core/src/compiler/__test__/analyze.test.ts
index e2a0031e..f00bac96 100644
--- a/packages/core/src/compiler/__test__/analyze.test.ts
+++ b/packages/core/src/compiler/__test__/analyze.test.ts
@@ -3,17 +3,18 @@ import { analyzeCode } from '..'
 
 const baseConfig: AnalyzeOptions = {
   rerenderTrace: true,
+  stateAnalyze: true,
 }
 
 describe('analyzeCode - exclude', () => {
   test('not acceptable lang', () => {
-    expect(analyzeCode('', 'test.txt', baseConfig)).toBe('')
+    expect(analyzeCode('', 'test.txt', baseConfig)).toBeNull()
   })
   test('excluded path', () => {
-    expect(analyzeCode('', 'node_modules/test.js', baseConfig)).toBe('')
+    expect(analyzeCode('', 'node_modules/test.js', baseConfig)).toBeNull()
   })
   test('not enabled', () => {
-    expect(analyzeCode('', 'test.js', { rerenderTrace: false })).toBe('')
+    expect(analyzeCode('', 'test.js', { rerenderTrace: false, stateAnalyze: false })).toBeNull()
   })
   test('should execute', () => {
     expect(analyzeCode(`
@@ -39,7 +40,7 @@ describe('analyzeCode - rerender - sfc', () => {
         <div></div>
       </template>
     `
-    const result = analyzeCode(code, 'test.vue', baseConfig)
+    const result = analyzeCode(code, 'test.vue', baseConfig) as { code: string } | undefined
     expect(result?.code).toMatchSnapshot()
   })
   test('script setup with script', () => {
diff --git a/packages/core/src/compiler/__test__/common.test.ts b/packages/core/src/compiler/__test__/common.test.ts
index 5e7d7480..c787f952 100644
--- a/packages/core/src/compiler/__test__/common.test.ts
+++ b/packages/core/src/compiler/__test__/common.test.ts
@@ -25,19 +25,4 @@ describe('compiler:common:parseSFC', () => {
       parseSFC(code, 'test.vue')
     }).not.toThrow()
   })
-  test('should throw if <script> and <script setup> use different languages', () => {
-    const code = `
-      <script lang="ts">
-        const a = 1
-      </script>
-      <script setup>
-        const a = 1
-      </script>
-      <template>
-      </template>
-    `
-    expect(() => {
-      parseSFC(code, 'test.vue')
-    }).toThrow()
-  })
 })
diff --git a/packages/core/src/compiler/common/analyze.ts b/packages/core/src/compiler/common/analyze.ts
index 998849c5..0b148f45 100644
--- a/packages/core/src/compiler/common/analyze.ts
+++ b/packages/core/src/compiler/common/analyze.ts
@@ -8,9 +8,6 @@ function isSetupFn(node: Node): node is ObjectMethod | ObjectProperty {
   return isObjectFn(node) && (node.key as Identifier).name === SETUP_FN
 }
 
-/**
- * @returns insert code location
- */
 export function analyzeVueSFC(code: string, filename: string) {
   const {
     scriptSetup,
@@ -18,6 +15,7 @@ export function analyzeVueSFC(code: string, filename: string) {
     script,
     scriptLocation,
     getScriptAST,
+    lang,
   } = parseSFC(code, filename)
 
   if (!scriptSetup && !script)
@@ -27,10 +25,11 @@ export function analyzeVueSFC(code: string, filename: string) {
   // script only: start: after <script>, end: before `setup` function
   // script setup and script: just use scriptSetup
 
+  let location: InsertLocation | null = null
+
   if (!scriptSetup && script) {
     const offset = scriptLocation.start
     const ast = getScriptAST()!
-    let location: InsertLocation | null = null
     walkAST(ast, {
       enter(node) {
         if (isSetupFn(node)) {
@@ -45,10 +44,13 @@ export function analyzeVueSFC(code: string, filename: string) {
         }
       },
     })
-    return location
   }
 
-  return scriptSetup ? scriptSetupLocation : scriptLocation
+  return {
+    location: location ?? (scriptSetup ? scriptSetupLocation : scriptLocation),
+    lang,
+    pureScriptCode: scriptSetup ? scriptSetup.content : script!.content,
+  }
 }
 
 // e.g. js, jsx, ts, tsx
diff --git a/packages/core/src/compiler/common/parse.ts b/packages/core/src/compiler/common/parse.ts
index e6da19b8..33845253 100644
--- a/packages/core/src/compiler/common/parse.ts
+++ b/packages/core/src/compiler/common/parse.ts
@@ -34,6 +34,7 @@ export function parseSFC(code: string, filename: string): {
   scriptSetupLocation: InsertLocation
   getScriptAST(): ReturnType<typeof babelParse> | undefined
   getScriptSetupAST(): ReturnType<typeof babelParse> | undefined
+  lang: string
 } {
   const sfc = sfcParse(code, {
     filename,
@@ -41,13 +42,10 @@ export function parseSFC(code: string, filename: string): {
 
   const { descriptor } = sfc
 
-  const scriptLang = descriptor.script?.lang ?? 'js'
-  const scriptSetupLang = descriptor.scriptSetup?.lang ?? 'js'
+  const scriptLang = descriptor.script?.lang
+  const scriptSetupLang = descriptor.scriptSetup?.lang
 
-  if (descriptor.script && descriptor.scriptSetup && (scriptLang !== scriptSetupLang))
-    throw new Error(`[vue-devtools] ${filename} <script> and <script setup> must use the same language`)
-
-  const lang = scriptLang || scriptSetupLang
+  const lang = (scriptSetupLang ?? scriptLang) ?? 'js'
 
   return {
     sfc,
@@ -71,5 +69,6 @@ export function parseSFC(code: string, filename: string): {
         return
       return babelParse(descriptor.scriptSetup.content, lang)
     },
+    lang,
   }
 }
diff --git a/packages/core/src/compiler/index.ts b/packages/core/src/compiler/index.ts
index 020fae91..7fb276bb 100644
--- a/packages/core/src/compiler/index.ts
+++ b/packages/core/src/compiler/index.ts
@@ -3,12 +3,17 @@ import type { InsertLocation } from './common'
 import { analyzeScriptFile, analyzeVueSFC, isAcceptableLang, isVUE } from './common'
 import { analyzeByTraceRerender } from './trace-rerender'
 import { entries } from './common/utils'
+import { collect } from './state-analyze'
 
 export interface AnalyzeOptions {
   /**
    * @default true
    */
   rerenderTrace: boolean
+  /**
+   * @default true
+   */
+  stateAnalyze: boolean
 }
 
 const excludePaths = ['node_modules']
@@ -23,7 +28,8 @@ function hitPaths(filename: string, paths: string[]) {
 
 export const analyzeOptionsDefault = {
   rerenderTrace: true,
-}
+  stateAnalyze: true,
+} satisfies AnalyzeOptions
 
 export type DeepRequired<T> = {
   [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Required<T[P]>;
@@ -37,30 +43,40 @@ export function analyzeCode(code: string, filename: string, options: AnalyzeOpti
    * one of the above is false, return null
    */
   if (!isAcceptableLang(filename) || !enableAnalyze(options) || hitPaths(filename, excludePaths))
-    return code
+    return null
 
   let locations: InsertLocation[] | null = null
+  let codeLang = ''
+  let pureScriptCode = code
 
   if (isVUE(filename)) {
-    const location = analyzeVueSFC(code, filename)
-    if (location)
-      locations = [location]
+    const result = analyzeVueSFC(code, filename)
+    if (result) {
+      result.location && (locations = [result.location])
+      codeLang = result.lang
+      pureScriptCode = result.pureScriptCode
+    }
   }
   else {
     const lang = filename.split('.').pop()!
+    codeLang = lang
     locations = analyzeScriptFile(code, lang)
   }
 
   if (!locations || !locations.length)
-    return code
+    return null
 
   let ms = new MagicString(code)
 
   if (options.rerenderTrace)
     ms = analyzeByTraceRerender(ms, locations as InsertLocation[])
+  if (options.stateAnalyze)
+    collect(pureScriptCode, filename, codeLang)
 
   return {
     code: ms.toString(),
     map: ms.generateMap(),
   }
 }
+
+export { getAnalyzeResultByPath, prepareStateAnalyze } from './state-analyze'
diff --git a/packages/core/src/compiler/state-analyze.ts b/packages/core/src/compiler/state-analyze.ts
new file mode 100644
index 00000000..c9026053
--- /dev/null
+++ b/packages/core/src/compiler/state-analyze.ts
@@ -0,0 +1,16 @@
+import type { AcceptableLang } from 'esm-analyzer'
+import { Project } from 'esm-analyzer'
+
+const project = new Project('state-analyze')
+
+export function collect(code: string, filename: string, lang: string) {
+  project.addFile(filename, code, lang as AcceptableLang)
+}
+
+export async function prepareStateAnalyze() {
+  await project.prepare()
+}
+
+export function getAnalyzeResultByPath(absolutePath: string) {
+  return project.getAnalyzeResults(absolutePath)
+}
diff --git a/packages/node/src/vite.ts b/packages/node/src/vite.ts
index 71eca95d..2f911a3f 100644
--- a/packages/node/src/vite.ts
+++ b/packages/node/src/vite.ts
@@ -60,6 +60,16 @@ function mergeOptions(options: VitePluginVueDevToolsOptions): DeepRequired<ViteP
   return Object.assign({}, defaultOptions, options)
 }
 
+function processAppendTo(id: string, code: string, appendTo: string | RegExp) {
+  const [filename] = id.split('?', 2)
+  if (appendTo
+    && (
+      (typeof appendTo === 'string' && filename.endsWith(appendTo))
+      || (appendTo instanceof RegExp && appendTo.test(filename))))
+    code = `${code}\nimport 'virtual:vue-devtools-path:app.js'`
+  return code
+}
+
 export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOptions): PluginOption {
   const vueDevtoolsPath = getVueDevtoolsPath()
   const inspect = Inspect({
@@ -146,14 +156,14 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
 
       const { analyze, appendTo } = pluginOptions
 
-      const [filename] = id.split('?', 2)
-      if (appendTo
-        && (
-          (typeof appendTo === 'string' && filename.endsWith(appendTo))
-          || (appendTo instanceof RegExp && appendTo.test(filename))))
-        code = `${code}\nimport 'virtual:vue-devtools-path:app.js'`
+      const analyzed = analyzeCode(code, id, analyze)
+
+      if (!analyzed)
+        return processAppendTo(id, code, appendTo)
 
-      return analyzeCode(code, id, analyze)
+      return {
+        code: processAppendTo(id, analyzed.code, appendTo),
+      }
     },
     transformIndexHtml(html) {
       if (pluginOptions.appendTo)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3853d68d..acb0d918 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -198,6 +198,9 @@ importers:
       birpc:
         specifier: ^0.2.12
         version: 0.2.12
+      esm-analyzer:
+        specifier: ^0.2.6
+        version: 0.2.6
       estree-walker:
         specifier: ^2.0.2
         version: 2.0.2
@@ -3868,6 +3871,16 @@ packages:
       - supports-color
     dev: true
 
+  /esm-analyzer@0.2.6:
+    resolution: {integrity: sha512-rOc7+O4Z2WxjDK2MEuPtMtUyZCa+QeZt0m+apVInuqf26EHHhEZVH4BZiwlLactfLMk1PBccDb2soTmiCrm4jg==}
+    dependencies:
+      '@babel/parser': 7.22.7
+      estree-walker: 2.0.2
+      mitt: 3.0.1
+      p-limit: 4.0.0
+      to-path-tree: 0.2.0
+    dev: false
+
   /esno@0.16.3:
     resolution: {integrity: sha512-6slSBEV1lMKcX13DBifvnDFpNno5WXhw4j/ff7RI0y51BZiDqEe5dNhhjhIQ3iCOQuzsm2MbVzmwqbN78BBhPg==}
     hasBin: true
@@ -5337,6 +5350,10 @@ packages:
     resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
     dev: true
 
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+    dev: false
+
   /mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -5714,7 +5731,6 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       yocto-queue: 1.0.0
-    dev: true
 
   /p-locate@4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
@@ -6885,6 +6901,10 @@ packages:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
 
+  /to-path-tree@0.2.0:
+    resolution: {integrity: sha512-TGf6IdITeelc0zNz4XCPbHb0lYagTc2Gvdm3I41vjFPsUXXFBg+c0i8oaMgftJhHLITPDTfi9KwcGDoMZ9OTIg==}
+    dev: false
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -7918,4 +7938,3 @@ packages:
   /yocto-queue@1.0.0:
     resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
     engines: {node: '>=12.20'}
-    dev: true
diff --git a/tsconfig.json b/tsconfig.json
index 10d0000d..b7fcce65 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,5 @@
       "vitest/globals"
     ]
   },
-  "exclude": ["node_modules", "dist", "src/node/app.js"]
+  "exclude": ["node_modules", "dist", "src/node/app.js", "**/*/dist"]
 }

From 525d06ed7b1b1f7536ba6323b40964fdb8e59c1f Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Wed, 2 Aug 2023 18:36:35 +0800
Subject: [PATCH 02/11] feat: init

---
 packages/client/logic/graph.ts  |  9 +++++++++
 packages/client/logic/rpc.ts    |  1 +
 packages/client/pages/graph.vue | 11 ++++++++++-
 packages/client/types.ts        |  5 +++++
 packages/core/package.json      |  2 +-
 packages/node/client.d.ts       |  4 ++++
 packages/node/src/vite.ts       |  9 ++++++++-
 pnpm-lock.yaml                  |  8 ++++----
 8 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/packages/client/logic/graph.ts b/packages/client/logic/graph.ts
index b1c725e4..5658c30a 100644
--- a/packages/client/logic/graph.ts
+++ b/packages/client/logic/graph.ts
@@ -1,6 +1,7 @@
 import { useStorage } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Minimatch } from 'minimatch'
+import type { ModuleInfo } from 'vite-plugin-vue-devtools/client'
 import { rpc } from './rpc'
 
 const list = ref<ModuleInfo[]>(await rpc.componentGraph())
@@ -146,3 +147,11 @@ async function filterData(isInit = false, givenData?: ModuleInfo[]) {
 }
 
 await filterData(true)
+
+export async function prepareStateAnalyze() {
+  await rpc.stateAnalyzePrepare()
+}
+
+export async function getAnalyzeStateResultByPath(path: string) {
+  return await rpc.stateAnalyzeGetResultByPath(path)
+}
diff --git a/packages/client/logic/rpc.ts b/packages/client/logic/rpc.ts
index edb64942..d4d85912 100644
--- a/packages/client/logic/rpc.ts
+++ b/packages/client/logic/rpc.ts
@@ -1,6 +1,7 @@
 import { createRPCClient } from '@vite-plugin-vue-devtools/core'
 import { createHotContext } from 'vite-hot-client'
 
+import type { RPCFunctions } from 'vite-plugin-vue-devtools/client'
 import { hookApi } from './hook'
 
 const viteHotCtx = (await createHotContext('/___', `${location.pathname.split('/__devtools__')[0] || ''}/`.replace(/\/\//g, '/')))!
diff --git a/packages/client/pages/graph.vue b/packages/client/pages/graph.vue
index 6c4d2a05..f1f757df 100644
--- a/packages/client/pages/graph.vue
+++ b/packages/client/pages/graph.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Data, Options } from 'vis-network'
 import { Network } from 'vis-network'
-import { matchedKeys } from '../logic/graph'
+import { getAnalyzeStateResultByPath, matchedKeys, prepareStateAnalyze } from '../logic/graph'
 import { searchResults as modules } from '~/logic/graph'
 import { useDevToolsClient } from '~/logic/client'
 import { rootPath } from '~/logic/global'
@@ -191,6 +191,12 @@ onMounted(() => {
   })
 })
 const { showGraphSetting } = useGraphSettings()
+
+async function clickMe() {
+  await prepareStateAnalyze()
+  const result = await getAnalyzeStateResultByPath('/Users/alex/code/contribution/vite-plugin-vue-devtools/packages/playground/src/App.vue')
+  console.log({ result })
+}
 </script>
 
 <template>
@@ -200,6 +206,9 @@ const { showGraphSetting } = useGraphSettings()
         <button aria-label="Open graph settings" @click="showGraphSetting = true">
           <div i-carbon-settings />
         </button>
+        <button @click="clickMe">
+          click me
+        </button>
       </template>
     </SearchBox>
     <div ref="container" flex="1" :class="[isHoveringNode ? 'cursor-pointer' : '']" />
diff --git a/packages/client/types.ts b/packages/client/types.ts
index b12f0914..d14e0a22 100644
--- a/packages/client/types.ts
+++ b/packages/client/types.ts
@@ -1,4 +1,5 @@
 import type { Router } from 'vue-router'
+import type { getAnalyzeResultByPath, prepareStateAnalyze } from '@vite-plugin-vue-devtools/core/compiler'
 
 type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
 
@@ -32,6 +33,10 @@ export interface VueDevtoolsHostClient {
   rerenderHighlight: {
     updateInfo: (uid: string, name: string, _bounds: ComponentInspectorBounds) => void
   }
+  stateAnalyze?: {
+    prepareState: typeof prepareStateAnalyze
+    getAnalyzeResultByPath: typeof getAnalyzeResultByPath
+  }
 }
 
 export type BuiltinTabGroup = 'app' | 'modules' | 'advanced'
diff --git a/packages/core/package.json b/packages/core/package.json
index 844cf7af..6c97ce78 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -38,7 +38,7 @@
   "dependencies": {
     "@babel/parser": "^7.22.7",
     "birpc": "^0.2.12",
-    "esm-analyzer": "^0.2.6",
+    "esm-analyzer": "^0.3.2",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.30.2",
     "vite-hot-client": "^0.2.1"
diff --git a/packages/node/client.d.ts b/packages/node/client.d.ts
index 1a00b9d1..f6025cb7 100644
--- a/packages/node/client.d.ts
+++ b/packages/node/client.d.ts
@@ -1,3 +1,5 @@
+import { getAnalyzeResultByPath } from "@vite-plugin-vue-devtools/core/compiler"
+
 declare type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'json' | 'other'
 
 declare interface AssetInfo {
@@ -45,6 +47,8 @@ declare interface RPCFunctions {
   installPackage(packages: string[], options?: ExecNpmScriptOptions): Promise<void>
   uninstallPackage(packages: string[], options?: ExecNpmScriptOptions): Promise<void>
   root(): string
+  stateAnalyzePrepare: (callback: () => void) => Promise<void>
+  stateAnalyzeGetResultByPath(path: string): Promise<ReturnType<typeof getAnalyzeResultByPath>>
 }
 
 
diff --git a/packages/node/src/vite.ts b/packages/node/src/vite.ts
index 2f911a3f..f3819382 100644
--- a/packages/node/src/vite.ts
+++ b/packages/node/src/vite.ts
@@ -7,7 +7,8 @@ import Inspect from 'vite-plugin-inspect'
 import VueInspector from 'vite-plugin-vue-inspector'
 import { PLUGIN_NAME, createRPCServer } from '@vite-plugin-vue-devtools/core'
 import type { AnalyzeOptions, DeepRequired } from '@vite-plugin-vue-devtools/core/compiler'
-import { analyzeCode, analyzeOptionsDefault } from '@vite-plugin-vue-devtools/core/compiler'
+import { analyzeCode, analyzeOptionsDefault, getAnalyzeResultByPath, prepareStateAnalyze } from '@vite-plugin-vue-devtools/core/compiler'
+import type { ExecNpmScriptOptions, RPCFunctions } from '../client'
 import { DIR_CLIENT } from './dir'
 import {
   execNpmScript,
@@ -121,6 +122,12 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
             rpc.onTerminalExit({ data })
         },
       }),
+      stateAnalyzePrepare: async () => {
+        await prepareStateAnalyze()
+      },
+      stateAnalyzeGetResultByPath: (path: string) => {
+        return getAnalyzeResultByPath(path)
+      },
     })
   }
   const plugin = <PluginOption>{
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index acb0d918..b569f1f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -199,8 +199,8 @@ importers:
         specifier: ^0.2.12
         version: 0.2.12
       esm-analyzer:
-        specifier: ^0.2.6
-        version: 0.2.6
+        specifier: ^0.3.2
+        version: 0.3.2
       estree-walker:
         specifier: ^2.0.2
         version: 2.0.2
@@ -3871,8 +3871,8 @@ packages:
       - supports-color
     dev: true
 
-  /esm-analyzer@0.2.6:
-    resolution: {integrity: sha512-rOc7+O4Z2WxjDK2MEuPtMtUyZCa+QeZt0m+apVInuqf26EHHhEZVH4BZiwlLactfLMk1PBccDb2soTmiCrm4jg==}
+  /esm-analyzer@0.3.2:
+    resolution: {integrity: sha512-FbuRZZTkdtYfnf1FDw/CM7dyONFp0OkczDYDCKwhOEFD+FNUpqigUE+NQkM2zLus0tfK4at1Pb88jiLuKR09BQ==}
     dependencies:
       '@babel/parser': 7.22.7
       estree-walker: 2.0.2

From 04ab57a252f9bae8f7066326489a0354c55067e3 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Thu, 3 Aug 2023 11:52:03 +0800
Subject: [PATCH 03/11] feat: ui init

---
 packages/client/components/SearchBox.vue    |  4 +--
 packages/client/logic/graph.ts              |  9 -----
 packages/client/logic/rpc.ts                |  1 -
 packages/client/logic/state-graph.ts        | 38 +++++++++++++++++++++
 packages/client/package.json                |  1 +
 packages/client/pages/graph.vue             | 24 +++++++------
 packages/core/package.json                  |  1 -
 packages/core/src/compiler/index.ts         |  2 +-
 packages/core/src/compiler/state-analyze.ts | 23 +++++++------
 packages/node/client.d.ts                   |  5 +--
 packages/node/src/vite.ts                   | 10 ++----
 packages/ui-kit/src/components/Loading.vue  | 21 ++++++++++++
 pnpm-lock.yaml                              | 10 +++---
 13 files changed, 98 insertions(+), 51 deletions(-)
 create mode 100644 packages/client/logic/state-graph.ts
 create mode 100644 packages/ui-kit/src/components/Loading.vue

diff --git a/packages/client/components/SearchBox.vue b/packages/client/components/SearchBox.vue
index a3941126..8083e74f 100644
--- a/packages/client/components/SearchBox.vue
+++ b/packages/client/components/SearchBox.vue
@@ -5,7 +5,7 @@ const { graphSettings } = useGraphSettings()
 </script>
 
 <template>
-  <nav flex="~ justify-between items-center" border="b base" pl-4 pr-6 font-light children:my-auto>
+  <nav flex="~ justify-between items-center" border="b base" z-200 pl-4 pr-6 font-light children:my-auto bg-base>
     <div flex="~ gap-4 items-center" h-54px>
       <div i-carbon-ibm-watson-discovery title="Vite Inspect" text-xl />
       <input
@@ -35,7 +35,7 @@ const { graphSettings } = useGraphSettings()
       </template>
     </div>
 
-    <div>
+    <div class="flex items-center justify-center gap-2">
       <slot name="right" />
     </div>
   </nav>
diff --git a/packages/client/logic/graph.ts b/packages/client/logic/graph.ts
index 5658c30a..b1c725e4 100644
--- a/packages/client/logic/graph.ts
+++ b/packages/client/logic/graph.ts
@@ -1,7 +1,6 @@
 import { useStorage } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Minimatch } from 'minimatch'
-import type { ModuleInfo } from 'vite-plugin-vue-devtools/client'
 import { rpc } from './rpc'
 
 const list = ref<ModuleInfo[]>(await rpc.componentGraph())
@@ -147,11 +146,3 @@ async function filterData(isInit = false, givenData?: ModuleInfo[]) {
 }
 
 await filterData(true)
-
-export async function prepareStateAnalyze() {
-  await rpc.stateAnalyzePrepare()
-}
-
-export async function getAnalyzeStateResultByPath(path: string) {
-  return await rpc.stateAnalyzeGetResultByPath(path)
-}
diff --git a/packages/client/logic/rpc.ts b/packages/client/logic/rpc.ts
index d4d85912..edb64942 100644
--- a/packages/client/logic/rpc.ts
+++ b/packages/client/logic/rpc.ts
@@ -1,7 +1,6 @@
 import { createRPCClient } from '@vite-plugin-vue-devtools/core'
 import { createHotContext } from 'vite-hot-client'
 
-import type { RPCFunctions } from 'vite-plugin-vue-devtools/client'
 import { hookApi } from './hook'
 
 const viteHotCtx = (await createHotContext('/___', `${location.pathname.split('/__devtools__')[0] || ''}/`.replace(/\/\//g, '/')))!
diff --git a/packages/client/logic/state-graph.ts b/packages/client/logic/state-graph.ts
new file mode 100644
index 00000000..ce641b36
--- /dev/null
+++ b/packages/client/logic/state-graph.ts
@@ -0,0 +1,38 @@
+import type { AcceptableLang } from 'esm-analyzer'
+import { Project } from 'esm-analyzer'
+import { rpc } from './rpc'
+
+const rawData = ref<{
+  code: string
+  lang: AcceptableLang
+  path: string
+}[]>([])
+const project = shallowRef<Project>(new Project('state-analyze'))
+const isReady = ref(false)
+
+export async function initRawData() {
+  if (isReady.value)
+    return
+  rawData.value = (await rpc.getStateAnalyzeCollectedData()).map(item => ({
+    code: item.code,
+    lang: item.lang as AcceptableLang,
+    path: item.filename,
+  }))
+  project.value.addFiles(rawData.value)
+  await project.value.prepare()
+  isReady.value = true
+}
+
+export function useStateGraph() {
+  const [drawerVisible, toggleDrawerVisible] = useToggle(false)
+
+  return {
+    drawerVisible,
+    toggleDrawerVisible,
+    enable: async () => {
+      toggleDrawerVisible()
+      const data = await initRawData()
+      console.log({ data })
+    },
+  }
+}
diff --git a/packages/client/package.json b/packages/client/package.json
index 8b6aaca1..d5df5c50 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -34,6 +34,7 @@
     "@vueuse/integrations": "^10.3.0",
     "@webfansplz/vuedoc-parser": "^0.0.3",
     "algoliasearch": "^4.19.1",
+    "esm-analyzer": "^0.3.3",
     "json-editor-vue": "^0.10.6",
     "minimatch": "^9.0.3",
     "nanoid": "^4.0.2",
diff --git a/packages/client/pages/graph.vue b/packages/client/pages/graph.vue
index f1f757df..b84428b6 100644
--- a/packages/client/pages/graph.vue
+++ b/packages/client/pages/graph.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { Data, Options } from 'vis-network'
 import { Network } from 'vis-network'
-import { getAnalyzeStateResultByPath, matchedKeys, prepareStateAnalyze } from '../logic/graph'
+import { matchedKeys } from '../logic/graph'
+import { useStateGraph } from '../logic/state-graph'
 import { searchResults as modules } from '~/logic/graph'
 import { useDevToolsClient } from '~/logic/client'
 import { rootPath } from '~/logic/global'
@@ -192,26 +193,29 @@ onMounted(() => {
 })
 const { showGraphSetting } = useGraphSettings()
 
-async function clickMe() {
-  await prepareStateAnalyze()
-  const result = await getAnalyzeStateResultByPath('/Users/alex/code/contribution/vite-plugin-vue-devtools/packages/playground/src/App.vue')
-  console.log({ result })
-}
+const navbar = ref<HTMLDivElement>()
+
+const { drawerVisible, enable: enableStateGraph, toggleDrawerVisible } = useStateGraph()
 </script>
 
 <template>
   <div relative h-screen w-full flex flex-col n-panel-grids>
-    <SearchBox>
+    <SearchBox ref="navbar">
       <template #right>
+        <button @click="enableStateGraph">
+          <div
+            i-carbon-data-vis-1 :class="{
+              'text-primary': drawerVisible,
+            }"
+          />
+        </button>
         <button aria-label="Open graph settings" @click="showGraphSetting = true">
           <div i-carbon-settings />
         </button>
-        <button @click="clickMe">
-          click me
-        </button>
       </template>
     </SearchBox>
     <div ref="container" flex="1" :class="[isHoveringNode ? 'cursor-pointer' : '']" />
     <GraphSettings />
+    <DrawerRight v-model="drawerVisible" w-120 :navbar="navbar" @close="toggleDrawerVisible" />
   </div>
 </template>
diff --git a/packages/core/package.json b/packages/core/package.json
index 6c97ce78..903c04b0 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -38,7 +38,6 @@
   "dependencies": {
     "@babel/parser": "^7.22.7",
     "birpc": "^0.2.12",
-    "esm-analyzer": "^0.3.2",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.30.2",
     "vite-hot-client": "^0.2.1"
diff --git a/packages/core/src/compiler/index.ts b/packages/core/src/compiler/index.ts
index 7fb276bb..d018658b 100644
--- a/packages/core/src/compiler/index.ts
+++ b/packages/core/src/compiler/index.ts
@@ -79,4 +79,4 @@ export function analyzeCode(code: string, filename: string, options: AnalyzeOpti
   }
 }
 
-export { getAnalyzeResultByPath, prepareStateAnalyze } from './state-analyze'
+export { getStateAnalyzeCollectedData } from './state-analyze'
diff --git a/packages/core/src/compiler/state-analyze.ts b/packages/core/src/compiler/state-analyze.ts
index c9026053..41e4fa85 100644
--- a/packages/core/src/compiler/state-analyze.ts
+++ b/packages/core/src/compiler/state-analyze.ts
@@ -1,16 +1,19 @@
-import type { AcceptableLang } from 'esm-analyzer'
-import { Project } from 'esm-analyzer'
+type StateAnalyzeCollected = {
+  code: string
+  filename: string
+  lang: string
+}[]
 
-const project = new Project('state-analyze')
+const stateAnalyzeCollectedData: StateAnalyzeCollected = []
 
 export function collect(code: string, filename: string, lang: string) {
-  project.addFile(filename, code, lang as AcceptableLang)
+  stateAnalyzeCollectedData.push({
+    code,
+    filename,
+    lang,
+  })
 }
 
-export async function prepareStateAnalyze() {
-  await project.prepare()
-}
-
-export function getAnalyzeResultByPath(absolutePath: string) {
-  return project.getAnalyzeResults(absolutePath)
+export function getStateAnalyzeCollectedData() {
+  return stateAnalyzeCollectedData
 }
diff --git a/packages/node/client.d.ts b/packages/node/client.d.ts
index f6025cb7..35183f23 100644
--- a/packages/node/client.d.ts
+++ b/packages/node/client.d.ts
@@ -1,5 +1,3 @@
-import { getAnalyzeResultByPath } from "@vite-plugin-vue-devtools/core/compiler"
-
 declare type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'json' | 'other'
 
 declare interface AssetInfo {
@@ -47,8 +45,7 @@ declare interface RPCFunctions {
   installPackage(packages: string[], options?: ExecNpmScriptOptions): Promise<void>
   uninstallPackage(packages: string[], options?: ExecNpmScriptOptions): Promise<void>
   root(): string
-  stateAnalyzePrepare: (callback: () => void) => Promise<void>
-  stateAnalyzeGetResultByPath(path: string): Promise<ReturnType<typeof getAnalyzeResultByPath>>
+  getStateAnalyzeCollectedData(): Promise<{ code: string, lang: string, filename: string }[]>
 }
 
 
diff --git a/packages/node/src/vite.ts b/packages/node/src/vite.ts
index f3819382..5355af97 100644
--- a/packages/node/src/vite.ts
+++ b/packages/node/src/vite.ts
@@ -7,8 +7,7 @@ import Inspect from 'vite-plugin-inspect'
 import VueInspector from 'vite-plugin-vue-inspector'
 import { PLUGIN_NAME, createRPCServer } from '@vite-plugin-vue-devtools/core'
 import type { AnalyzeOptions, DeepRequired } from '@vite-plugin-vue-devtools/core/compiler'
-import { analyzeCode, analyzeOptionsDefault, getAnalyzeResultByPath, prepareStateAnalyze } from '@vite-plugin-vue-devtools/core/compiler'
-import type { ExecNpmScriptOptions, RPCFunctions } from '../client'
+import { analyzeCode, analyzeOptionsDefault, getStateAnalyzeCollectedData } from '@vite-plugin-vue-devtools/core/compiler'
 import { DIR_CLIENT } from './dir'
 import {
   execNpmScript,
@@ -122,12 +121,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
             rpc.onTerminalExit({ data })
         },
       }),
-      stateAnalyzePrepare: async () => {
-        await prepareStateAnalyze()
-      },
-      stateAnalyzeGetResultByPath: (path: string) => {
-        return getAnalyzeResultByPath(path)
-      },
+      getStateAnalyzeCollectedData: () => getStateAnalyzeCollectedData(),
     })
   }
   const plugin = <PluginOption>{
diff --git a/packages/ui-kit/src/components/Loading.vue b/packages/ui-kit/src/components/Loading.vue
new file mode 100644
index 00000000..b4cc54d2
--- /dev/null
+++ b/packages/ui-kit/src/components/Loading.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  type: 'normal' | 'logo'
+}>(), {
+  type: 'normal',
+})
+</script>
+
+<template>
+  <div>
+    <template v-if="type === 'normal'">
+      <svg class="h-full w-full animate-spin text-green-500/50" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+      </svg>
+    </template>
+    <template v-else>
+      <div i-logos-vue h-full w-full animate-pulse />
+    </template>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b569f1f9..1cd281e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       algoliasearch:
         specifier: ^4.19.1
         version: 4.19.1
+      esm-analyzer:
+        specifier: ^0.3.3
+        version: 0.3.3
       json-editor-vue:
         specifier: ^0.10.6
         version: 0.10.6(vanilla-jsoneditor@0.17.8)(vue@3.3.4)
@@ -198,9 +201,6 @@ importers:
       birpc:
         specifier: ^0.2.12
         version: 0.2.12
-      esm-analyzer:
-        specifier: ^0.3.2
-        version: 0.3.2
       estree-walker:
         specifier: ^2.0.2
         version: 2.0.2
@@ -3871,8 +3871,8 @@ packages:
       - supports-color
     dev: true
 
-  /esm-analyzer@0.3.2:
-    resolution: {integrity: sha512-FbuRZZTkdtYfnf1FDw/CM7dyONFp0OkczDYDCKwhOEFD+FNUpqigUE+NQkM2zLus0tfK4at1Pb88jiLuKR09BQ==}
+  /esm-analyzer@0.3.3:
+    resolution: {integrity: sha512-IlNE3ykNhMOiOdBsyJE9KP9+jeSQpk+LVf715yNYIdgM2u7UE8fbymMCrUiU7H/azuzyI/adv+fHbbG9AXu6Kw==}
     dependencies:
       '@babel/parser': 7.22.7
       estree-walker: 2.0.2

From e88a3842d9488fe94a1b1e3e727f008de8524638 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Thu, 3 Aug 2023 15:16:42 +0800
Subject: [PATCH 04/11] feat: add error boundary

---
 packages/client/components/StateGraph.vue | 25 ++++++++++++++
 packages/client/logic/state-graph.ts      | 42 +++++++++++++++++++++--
 packages/client/pages/graph.vue           |  9 +++--
 packages/client/types.ts                  |  5 ---
 4 files changed, 70 insertions(+), 11 deletions(-)
 create mode 100644 packages/client/components/StateGraph.vue

diff --git a/packages/client/components/StateGraph.vue b/packages/client/components/StateGraph.vue
new file mode 100644
index 00000000..40ca9a22
--- /dev/null
+++ b/packages/client/components/StateGraph.vue
@@ -0,0 +1,25 @@
+<script setup lang="tsx">
+import type { FunctionalComponent } from 'vue'
+import { StateGraphStateEnum, stateGraphRawData, stateGraphState } from '../logic/state-graph'
+
+const errorBoundaryMessages: Partial<Record<StateGraphStateEnum, string>> = {
+  [StateGraphStateEnum.NOT_READY]: 'Is not ready yet.',
+  [StateGraphStateEnum.NOT_SELECT_FILE]: 'You have not selected a file yet.',
+  [StateGraphStateEnum.NOT_COLLECTED]: 'This file has not been collected.',
+  [StateGraphStateEnum.NO_STATE]: 'This file does not have any state.',
+}
+
+const ErrorBoundary: FunctionalComponent<{
+  state: StateGraphStateEnum
+}> = ({ state }) =>
+  <div class="h-full w-full flex items-center justify-center">
+    <div class="rounded-lg bg-red-4 p2 text-white">
+        {errorBoundaryMessages[state]}
+    </div>
+  </div>
+</script>
+
+<template>
+  <ErrorBoundary v-if="stateGraphState !== StateGraphStateEnum.HAS_STATE" :state="stateGraphState" />
+  {{ stateGraphRawData }}
+</template>
diff --git a/packages/client/logic/state-graph.ts b/packages/client/logic/state-graph.ts
index ce641b36..c6979bf3 100644
--- a/packages/client/logic/state-graph.ts
+++ b/packages/client/logic/state-graph.ts
@@ -2,16 +2,25 @@ import type { AcceptableLang } from 'esm-analyzer'
 import { Project } from 'esm-analyzer'
 import { rpc } from './rpc'
 
+export enum StateGraphStateEnum {
+  NOT_READY, // graph is not ready yet
+  READY, // graph is ready
+  NOT_SELECT_FILE, // graph is ready, but no file is selected
+  NOT_COLLECTED, // graph is ready, but the selected file is not collected
+  NO_STATE, // graph is ready, but the selected file has no state
+  HAS_STATE, // everything is ready
+}
+
 const rawData = ref<{
   code: string
   lang: AcceptableLang
   path: string
 }[]>([])
 const project = shallowRef<Project>(new Project('state-analyze'))
-const isReady = ref(false)
+export const stateGraphState = ref(StateGraphStateEnum.NOT_READY)
 
 export async function initRawData() {
-  if (isReady.value)
+  if (stateGraphState.value !== StateGraphStateEnum.NOT_READY)
     return
   rawData.value = (await rpc.getStateAnalyzeCollectedData()).map(item => ({
     code: item.code,
@@ -20,9 +29,11 @@ export async function initRawData() {
   }))
   project.value.addFiles(rawData.value)
   await project.value.prepare()
-  isReady.value = true
+  stateGraphState.value = StateGraphStateEnum.READY
 }
 
+const currentSelectedFile = ref</* file name */string>()
+
 export function useStateGraph() {
   const [drawerVisible, toggleDrawerVisible] = useToggle(false)
 
@@ -34,5 +45,30 @@ export function useStateGraph() {
       const data = await initRawData()
       console.log({ data })
     },
+    currentSelectedFile,
   }
 }
+
+function startAnalyze() {
+  // if not ready
+  if (stateGraphState.value === StateGraphStateEnum.NOT_READY)
+    return { state: StateGraphStateEnum.NOT_READY, data: null }
+  const selectFile = currentSelectedFile.value
+  // if not selected file
+  if (!selectFile)
+    return { state: StateGraphStateEnum.NOT_SELECT_FILE, data: null }
+  // if not collected
+  if (!project.value.getFilePaths().includes(selectFile))
+    return { state: StateGraphStateEnum.NOT_COLLECTED, data: null }
+  // if no state
+  const data = project.value.getAnalyzeResults(selectFile)
+  if (!data || !data.size)
+    return { state: StateGraphStateEnum.NO_STATE, data: null }
+  return { state: StateGraphStateEnum.HAS_STATE, data }
+}
+
+export const stateGraphRawData = computed(() => {
+  const { data, state } = startAnalyze()
+  stateGraphState.value = state
+  return data
+})
diff --git a/packages/client/pages/graph.vue b/packages/client/pages/graph.vue
index b84428b6..06fb89f7 100644
--- a/packages/client/pages/graph.vue
+++ b/packages/client/pages/graph.vue
@@ -87,6 +87,8 @@ const data = computed<Data>(() => {
   }
 })
 
+const { drawerVisible, enable: enableStateGraph, toggleDrawerVisible, currentSelectedFile } = useStateGraph()
+
 onMounted(() => {
   const options: Options = {
     nodes: {
@@ -159,6 +161,7 @@ onMounted(() => {
 
   network.on('click', (params) => {
     const nodeId = params.nodes?.[0]
+    currentSelectedFile.value = nodeId
     if (!nodeId)
       return resetNodeStyle()
     if (settings.graphSettings.value.clickOpenInEditor && metaKeyPressed.value)
@@ -194,8 +197,6 @@ onMounted(() => {
 const { showGraphSetting } = useGraphSettings()
 
 const navbar = ref<HTMLDivElement>()
-
-const { drawerVisible, enable: enableStateGraph, toggleDrawerVisible } = useStateGraph()
 </script>
 
 <template>
@@ -216,6 +217,8 @@ const { drawerVisible, enable: enableStateGraph, toggleDrawerVisible } = useStat
     </SearchBox>
     <div ref="container" flex="1" :class="[isHoveringNode ? 'cursor-pointer' : '']" />
     <GraphSettings />
-    <DrawerRight v-model="drawerVisible" w-120 :navbar="navbar" @close="toggleDrawerVisible" />
+    <DrawerRight v-model="drawerVisible" w-120 :navbar="navbar" @close="toggleDrawerVisible">
+      <StateGraph />
+    </DrawerRight>
   </div>
 </template>
diff --git a/packages/client/types.ts b/packages/client/types.ts
index d14e0a22..b12f0914 100644
--- a/packages/client/types.ts
+++ b/packages/client/types.ts
@@ -1,5 +1,4 @@
 import type { Router } from 'vue-router'
-import type { getAnalyzeResultByPath, prepareStateAnalyze } from '@vite-plugin-vue-devtools/core/compiler'
 
 type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
 
@@ -33,10 +32,6 @@ export interface VueDevtoolsHostClient {
   rerenderHighlight: {
     updateInfo: (uid: string, name: string, _bounds: ComponentInspectorBounds) => void
   }
-  stateAnalyze?: {
-    prepareState: typeof prepareStateAnalyze
-    getAnalyzeResultByPath: typeof getAnalyzeResultByPath
-  }
 }
 
 export type BuiltinTabGroup = 'app' | 'modules' | 'advanced'

From 8ab1965c555f1b2b54b16059d6d9fc522e7bfa5d Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Thu, 3 Aug 2023 15:17:39 +0800
Subject: [PATCH 05/11] fix: correctly set config

---
 tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index b7fcce65..60d2a63c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,5 @@
       "vitest/globals"
     ]
   },
-  "exclude": ["node_modules", "dist", "src/node/app.js", "**/*/dist"]
+  "exclude": ["node_modules", "dist", "*/node/src/app.js", "**/*/dist"]
 }

From 87805fb2c1460cba0aec198a3df919383faa83b9 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 4 Aug 2023 13:44:06 +0800
Subject: [PATCH 06/11] feat: show code

---
 packages/client/components/GraphDock.vue      | 53 ++++++++++++++++
 packages/client/components/HighlightCode.vue  | 16 +++++
 packages/client/components/StateGraph.vue     | 20 +-----
 packages/client/composables/highlight.ts      | 35 +++++++++++
 packages/client/logic/state-graph.ts          | 63 +++++++++++++------
 packages/client/package.json                  |  3 +-
 packages/client/pages/graph.vue               |  5 +-
 packages/core/src/compiler/common/analyze.ts  | 11 ++++
 packages/core/src/compiler/index.ts           |  9 ++-
 packages/core/src/compiler/state-analyze.ts   |  6 +-
 packages/node/client.d.ts                     |  4 +-
 .../playground/src/components/ReadCounter.vue |  7 +++
 pnpm-lock.yaml                                | 33 ++++++++--
 13 files changed, 216 insertions(+), 49 deletions(-)
 create mode 100644 packages/client/components/GraphDock.vue
 create mode 100644 packages/client/components/HighlightCode.vue
 create mode 100644 packages/client/composables/highlight.ts

diff --git a/packages/client/components/GraphDock.vue b/packages/client/components/GraphDock.vue
new file mode 100644
index 00000000..d24bcfe5
--- /dev/null
+++ b/packages/client/components/GraphDock.vue
@@ -0,0 +1,53 @@
+<script setup lang="tsx">
+import type { FunctionalComponent } from 'vue'
+import { StateGraphStateEnum, currentFullCodeAndFilename, stateGraphState } from '../logic/state-graph'
+
+const errorBoundaryMessages: Partial<Record<StateGraphStateEnum, string>> = {
+  [StateGraphStateEnum.NOT_READY]: 'Is not ready yet.',
+  [StateGraphStateEnum.NOT_SELECT_FILE]: 'You have not selected a file yet.',
+  [StateGraphStateEnum.NOT_COLLECTED]: 'This file has not been collected or does\'t support.',
+  [StateGraphStateEnum.NO_STATE]: 'This file does not have any state that supported to analyze.',
+}
+
+const ErrorBoundary: FunctionalComponent<{
+  state: StateGraphStateEnum
+}> = ({ state }) =>
+  <div class="h-full w-full flex items-center justify-center">
+    <div class="rounded-lg bg-red-4 p2 text-white">
+        {errorBoundaryMessages[state]}
+    </div>
+  </div>
+
+const tabs = [
+  {
+    name: 'StateGraph',
+    icon: 'i-carbon-data-vis-1',
+  },
+  {
+    name: 'Code',
+    icon: 'i-carbon-code',
+  },
+] as const
+
+const activeTab = ref<(typeof tabs)[number]['name']>(tabs[0].name)
+</script>
+
+<template>
+  <ErrorBoundary v-if="stateGraphState !== StateGraphStateEnum.HAS_STATE" :state="stateGraphState" />
+  <div v-else class="grid grid-rows-[30px_1fr] h-full w-full p2">
+    <nav class="h30px w-full flex items-center gap1">
+      <div v-for="item of tabs" :key="item.name" class="cursor-pointer p1" :class="[activeTab === item.name ? 'text-primary' : '']" @click="activeTab = item.name">
+        <div :class="[item.icon]" />
+      </div>
+    </nav>
+    <StateGraph v-if="activeTab === 'StateGraph'" />
+    <Suspense v-else-if="activeTab === 'Code'">
+      <HighlightCode class="h-full overflow-hidden" v-bind="currentFullCodeAndFilename" />
+      <template #fallback>
+        <div class="h-full w-full flex items-center justify-center">
+          <VDLoading class="h-30px w-30px" />
+        </div>
+      </template>
+    </Suspense>
+  </div>
+</template>
diff --git a/packages/client/components/HighlightCode.vue b/packages/client/components/HighlightCode.vue
new file mode 100644
index 00000000..d433bbfa
--- /dev/null
+++ b/packages/client/components/HighlightCode.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  code: string
+  filename: string
+}>()
+
+const { highlightedCode } = await useHighlight()
+</script>
+
+<template>
+  <div class="overflow-y-auto p3">
+    <div v-html="highlightedCode(code, filename.split('.').at(-1)!)" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/packages/client/components/StateGraph.vue b/packages/client/components/StateGraph.vue
index 40ca9a22..9e0b98d3 100644
--- a/packages/client/components/StateGraph.vue
+++ b/packages/client/components/StateGraph.vue
@@ -1,25 +1,7 @@
 <script setup lang="tsx">
-import type { FunctionalComponent } from 'vue'
-import { StateGraphStateEnum, stateGraphRawData, stateGraphState } from '../logic/state-graph'
-
-const errorBoundaryMessages: Partial<Record<StateGraphStateEnum, string>> = {
-  [StateGraphStateEnum.NOT_READY]: 'Is not ready yet.',
-  [StateGraphStateEnum.NOT_SELECT_FILE]: 'You have not selected a file yet.',
-  [StateGraphStateEnum.NOT_COLLECTED]: 'This file has not been collected.',
-  [StateGraphStateEnum.NO_STATE]: 'This file does not have any state.',
-}
-
-const ErrorBoundary: FunctionalComponent<{
-  state: StateGraphStateEnum
-}> = ({ state }) =>
-  <div class="h-full w-full flex items-center justify-center">
-    <div class="rounded-lg bg-red-4 p2 text-white">
-        {errorBoundaryMessages[state]}
-    </div>
-  </div>
+import { stateGraphRawData } from '~/logic/state-graph'
 </script>
 
 <template>
-  <ErrorBoundary v-if="stateGraphState !== StateGraphStateEnum.HAS_STATE" :state="stateGraphState" />
   {{ stateGraphRawData }}
 </template>
diff --git a/packages/client/composables/highlight.ts b/packages/client/composables/highlight.ts
new file mode 100644
index 00000000..c2794b20
--- /dev/null
+++ b/packages/client/composables/highlight.ts
@@ -0,0 +1,35 @@
+import type { Highlighter } from 'shiki'
+import { getHighlighter, setCDN } from 'shiki'
+
+const extToLang = {
+  vue: 'vue',
+  js: 'javascript',
+  ts: 'typescript',
+  jsx: 'jsx',
+  tsx: 'tsx',
+}
+
+setCDN('https://unpkg.com/shiki/')
+
+let highlighter: Highlighter
+
+async function initHighlighter() {
+  return await getHighlighter({
+    themes: ['vitesse-dark', 'vitesse-light'],
+    langs: ['vue', 'javascript', 'typescript', 'jsx', 'tsx'],
+  }).then(h => highlighter = h)
+}
+
+export async function useHighlight() {
+  const isDark = useDark()
+  if (!highlighter)
+    await initHighlighter()
+  return {
+    highlightedCode: (code: string, ext: string) => highlighter.codeToHtml(code,
+      {
+        lang: extToLang[ext],
+        theme: isDark.value ? 'vitesse-dark' : 'vitesse-light',
+      },
+    ),
+  }
+}
diff --git a/packages/client/logic/state-graph.ts b/packages/client/logic/state-graph.ts
index c6979bf3..121f1d03 100644
--- a/packages/client/logic/state-graph.ts
+++ b/packages/client/logic/state-graph.ts
@@ -11,10 +11,15 @@ export enum StateGraphStateEnum {
   HAS_STATE, // everything is ready
 }
 
-const rawData = ref<{
+const codeData = ref<{
+  code: string
+  filename: string
+}[]>([])
+const rawAnalyzeData = ref<{
   code: string
   lang: AcceptableLang
   path: string
+  offsetContent: string
 }[]>([])
 const project = shallowRef<Project>(new Project('state-analyze'))
 export const stateGraphState = ref(StateGraphStateEnum.NOT_READY)
@@ -22,17 +27,28 @@ export const stateGraphState = ref(StateGraphStateEnum.NOT_READY)
 export async function initRawData() {
   if (stateGraphState.value !== StateGraphStateEnum.NOT_READY)
     return
-  rawData.value = (await rpc.getStateAnalyzeCollectedData()).map(item => ({
-    code: item.code,
-    lang: item.lang as AcceptableLang,
-    path: item.filename,
-  }))
-  project.value.addFiles(rawData.value)
+  const rawData = await rpc.getStateAnalyzeCollectedData() ?? []
+  rawData.forEach((item) => {
+    rawAnalyzeData.value.push({
+      code: item.code,
+      lang: item.lang as AcceptableLang,
+      path: item.filename,
+      offsetContent: item.offsetContent,
+    })
+    codeData.value.push({
+      code: item.fullCode,
+      filename: item.filename,
+    })
+  })
+  project.value.addFiles(rawAnalyzeData.value)
   await project.value.prepare()
   stateGraphState.value = StateGraphStateEnum.READY
 }
 
 const currentSelectedFile = ref</* file name */string>()
+watch(currentSelectedFile, () => {
+  stateGraphState.value = getState()
+})
 
 export function useStateGraph() {
   const [drawerVisible, toggleDrawerVisible] = useToggle(false)
@@ -42,33 +58,44 @@ export function useStateGraph() {
     toggleDrawerVisible,
     enable: async () => {
       toggleDrawerVisible()
-      const data = await initRawData()
-      console.log({ data })
+      await initRawData()
+      stateGraphState.value = getState()
     },
     currentSelectedFile,
   }
 }
 
-function startAnalyze() {
+function getState() {
   // if not ready
   if (stateGraphState.value === StateGraphStateEnum.NOT_READY)
-    return { state: StateGraphStateEnum.NOT_READY, data: null }
+    return StateGraphStateEnum.NOT_READY
   const selectFile = currentSelectedFile.value
   // if not selected file
   if (!selectFile)
-    return { state: StateGraphStateEnum.NOT_SELECT_FILE, data: null }
+    return StateGraphStateEnum.NOT_SELECT_FILE
   // if not collected
   if (!project.value.getFilePaths().includes(selectFile))
-    return { state: StateGraphStateEnum.NOT_COLLECTED, data: null }
+    return StateGraphStateEnum.NOT_COLLECTED
   // if no state
   const data = project.value.getAnalyzeResults(selectFile)
   if (!data || !data.size)
-    return { state: StateGraphStateEnum.NO_STATE, data: null }
-  return { state: StateGraphStateEnum.HAS_STATE, data }
+    return StateGraphStateEnum.NO_STATE
+  return StateGraphStateEnum.HAS_STATE
+}
+
+function getData() {
+  return stateGraphState.value === StateGraphStateEnum.HAS_STATE
+    ? project.value.getAnalyzeResults(currentSelectedFile.value!)!
+    : null
 }
 
 export const stateGraphRawData = computed(() => {
-  const { data, state } = startAnalyze()
-  stateGraphState.value = state
-  return data
+  return getData()
+})
+
+export const currentFullCodeAndFilename = computed(() => {
+  return codeData.value.find(item => item.filename === currentSelectedFile.value) ?? {
+    code: '',
+    filename: '',
+  }
 })
diff --git a/packages/client/package.json b/packages/client/package.json
index d5df5c50..fd965543 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -34,10 +34,11 @@
     "@vueuse/integrations": "^10.3.0",
     "@webfansplz/vuedoc-parser": "^0.0.3",
     "algoliasearch": "^4.19.1",
-    "esm-analyzer": "^0.3.3",
+    "esm-analyzer": "^0.3.5",
     "json-editor-vue": "^0.10.6",
     "minimatch": "^9.0.3",
     "nanoid": "^4.0.2",
+    "shiki": "^0.14.3",
     "splitpanes": "^3.1.5",
     "vanilla-jsoneditor": "^0.17.8",
     "vite-hot-client": "^0.2.1",
diff --git a/packages/client/pages/graph.vue b/packages/client/pages/graph.vue
index 06fb89f7..6c12fb1b 100644
--- a/packages/client/pages/graph.vue
+++ b/packages/client/pages/graph.vue
@@ -200,12 +200,13 @@ const navbar = ref<HTMLDivElement>()
 </script>
 
 <template>
+  <!-- i-carbon-data-vis-1 -->
   <div relative h-screen w-full flex flex-col n-panel-grids>
     <SearchBox ref="navbar">
       <template #right>
         <button @click="enableStateGraph">
           <div
-            i-carbon-data-vis-1 :class="{
+            i-material-symbols:dock-to-left :class="{
               'text-primary': drawerVisible,
             }"
           />
@@ -218,7 +219,7 @@ const navbar = ref<HTMLDivElement>()
     <div ref="container" flex="1" :class="[isHoveringNode ? 'cursor-pointer' : '']" />
     <GraphSettings />
     <DrawerRight v-model="drawerVisible" w-120 :navbar="navbar" @close="toggleDrawerVisible">
-      <StateGraph />
+      <GraphDock />
     </DrawerRight>
   </div>
 </template>
diff --git a/packages/core/src/compiler/common/analyze.ts b/packages/core/src/compiler/common/analyze.ts
index 0b148f45..bb01dd29 100644
--- a/packages/core/src/compiler/common/analyze.ts
+++ b/packages/core/src/compiler/common/analyze.ts
@@ -8,6 +8,8 @@ function isSetupFn(node: Node): node is ObjectMethod | ObjectProperty {
   return isObjectFn(node) && (node.key as Identifier).name === SETUP_FN
 }
 
+const VUE_SFC_SCRIPT_BLOCK_START_RE = /<script\b[^>]*?>/gm
+
 export function analyzeVueSFC(code: string, filename: string) {
   const {
     scriptSetup,
@@ -46,10 +48,19 @@ export function analyzeVueSFC(code: string, filename: string) {
     })
   }
 
+  // <script>
+  let offsetScriptHeader = ''
+
+  for (const item of code.matchAll(VUE_SFC_SCRIPT_BLOCK_START_RE)) {
+    if (item[0].includes('setup'))
+      offsetScriptHeader = item[0]
+  }
+
   return {
     location: location ?? (scriptSetup ? scriptSetupLocation : scriptLocation),
     lang,
     pureScriptCode: scriptSetup ? scriptSetup.content : script!.content,
+    offsetScriptHeader,
   }
 }
 
diff --git a/packages/core/src/compiler/index.ts b/packages/core/src/compiler/index.ts
index d018658b..1d19763a 100644
--- a/packages/core/src/compiler/index.ts
+++ b/packages/core/src/compiler/index.ts
@@ -48,6 +48,7 @@ export function analyzeCode(code: string, filename: string, options: AnalyzeOpti
   let locations: InsertLocation[] | null = null
   let codeLang = ''
   let pureScriptCode = code
+  let offsetContent = ''
 
   if (isVUE(filename)) {
     const result = analyzeVueSFC(code, filename)
@@ -55,6 +56,7 @@ export function analyzeCode(code: string, filename: string, options: AnalyzeOpti
       result.location && (locations = [result.location])
       codeLang = result.lang
       pureScriptCode = result.pureScriptCode
+      offsetContent = result.offsetScriptHeader
     }
   }
   else {
@@ -63,6 +65,11 @@ export function analyzeCode(code: string, filename: string, options: AnalyzeOpti
     locations = analyzeScriptFile(code, lang)
   }
 
+  // locations means that this file has one or more vue components
+  // but whether it is a component or not, we still need to collect it.
+  if (options.stateAnalyze)
+    collect(pureScriptCode, filename, codeLang, offsetContent, code)
+
   if (!locations || !locations.length)
     return null
 
@@ -70,8 +77,6 @@ export function analyzeCode(code: string, filename: string, options: AnalyzeOpti
 
   if (options.rerenderTrace)
     ms = analyzeByTraceRerender(ms, locations as InsertLocation[])
-  if (options.stateAnalyze)
-    collect(pureScriptCode, filename, codeLang)
 
   return {
     code: ms.toString(),
diff --git a/packages/core/src/compiler/state-analyze.ts b/packages/core/src/compiler/state-analyze.ts
index 41e4fa85..261c0df9 100644
--- a/packages/core/src/compiler/state-analyze.ts
+++ b/packages/core/src/compiler/state-analyze.ts
@@ -2,15 +2,19 @@ type StateAnalyzeCollected = {
   code: string
   filename: string
   lang: string
+  offsetContent: string
+  fullCode: string
 }[]
 
 const stateAnalyzeCollectedData: StateAnalyzeCollected = []
 
-export function collect(code: string, filename: string, lang: string) {
+export function collect(code: string, filename: string, lang: string, offsetContent: string, fullCode: string) {
   stateAnalyzeCollectedData.push({
     code,
     filename,
     lang,
+    offsetContent,
+    fullCode,
   })
 }
 
diff --git a/packages/node/client.d.ts b/packages/node/client.d.ts
index 35183f23..12fd6ccb 100644
--- a/packages/node/client.d.ts
+++ b/packages/node/client.d.ts
@@ -45,7 +45,9 @@ declare interface RPCFunctions {
   installPackage(packages: string[], options?: ExecNpmScriptOptions): Promise<void>
   uninstallPackage(packages: string[], options?: ExecNpmScriptOptions): Promise<void>
   root(): string
-  getStateAnalyzeCollectedData(): Promise<{ code: string, lang: string, filename: string }[]>
+  getStateAnalyzeCollectedData(): Promise<
+    { code: string, lang: string, filename: string, offsetContent: string, fullCode: string }[]
+  >
 }
 
 
diff --git a/packages/playground/src/components/ReadCounter.vue b/packages/playground/src/components/ReadCounter.vue
index a1b05c14..f4f7d40f 100644
--- a/packages/playground/src/components/ReadCounter.vue
+++ b/packages/playground/src/components/ReadCounter.vue
@@ -1,8 +1,15 @@
+<script>
+</script>
+
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
 import { useAppStore } from '../stores'
 
 const { count } = storeToRefs(useAppStore())
+
+const a = 1
+const refValue = ref(2)
 </script>
 
 <template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1cd281e8..30e6dd43 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,8 +78,8 @@ importers:
         specifier: ^4.19.1
         version: 4.19.1
       esm-analyzer:
-        specifier: ^0.3.3
-        version: 0.3.3
+        specifier: ^0.3.5
+        version: 0.3.5
       json-editor-vue:
         specifier: ^0.10.6
         version: 0.10.6(vanilla-jsoneditor@0.17.8)(vue@3.3.4)
@@ -89,6 +89,9 @@ importers:
       nanoid:
         specifier: ^4.0.2
         version: 4.0.2
+      shiki:
+        specifier: ^0.14.3
+        version: 0.14.3
       splitpanes:
         specifier: ^3.1.5
         version: 3.1.5
@@ -2524,6 +2527,10 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /ansi-sequence-parser@1.1.1:
+    resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==}
+    dev: false
+
   /ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -3871,8 +3878,8 @@ packages:
       - supports-color
     dev: true
 
-  /esm-analyzer@0.3.3:
-    resolution: {integrity: sha512-IlNE3ykNhMOiOdBsyJE9KP9+jeSQpk+LVf715yNYIdgM2u7UE8fbymMCrUiU7H/azuzyI/adv+fHbbG9AXu6Kw==}
+  /esm-analyzer@0.3.5:
+    resolution: {integrity: sha512-WyXk3t3ppT5mY2/ub/Rrqb6jVIOf7K0+jVYECB+0Bvcqi+foRdK/e0iCRMAztFudG3lr4VETKLNdWucAxaeYBg==}
     dependencies:
       '@babel/parser': 7.22.7
       estree-walker: 2.0.2
@@ -4914,7 +4921,6 @@ packages:
 
   /jsonc-parser@3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
-    dev: true
 
   /jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
@@ -6502,6 +6508,15 @@ packages:
   /shell-quote@1.8.1:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
 
+  /shiki@0.14.3:
+    resolution: {integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==}
+    dependencies:
+      ansi-sequence-parser: 1.1.1
+      jsonc-parser: 3.2.0
+      vscode-oniguruma: 1.7.0
+      vscode-textmate: 8.0.0
+    dev: false
+
   /side-channel@1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
     dependencies:
@@ -7611,6 +7626,14 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /vscode-oniguruma@1.7.0:
+    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
+    dev: false
+
+  /vscode-textmate@8.0.0:
+    resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
+    dev: false
+
   /vue-demi@0.13.11(vue@3.3.4):
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}

From 9660e80b8bfe5fefb153af158f921f5d158d0e61 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 4 Aug 2023 13:47:13 +0800
Subject: [PATCH 07/11] chore: prettify

---
 packages/client/components/HighlightCode.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/components/HighlightCode.vue b/packages/client/components/HighlightCode.vue
index d433bbfa..fc861a5a 100644
--- a/packages/client/components/HighlightCode.vue
+++ b/packages/client/components/HighlightCode.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   code: string
   filename: string
 }>()
@@ -8,7 +8,7 @@ const { highlightedCode } = await useHighlight()
 </script>
 
 <template>
-  <div class="overflow-y-auto p3">
+  <div class="overflow-x-auto overflow-y-auto">
     <div v-html="highlightedCode(code, filename.split('.').at(-1)!)" />
   </div>
 </template>

From 6f2e7af0ca60a63cc46dcc014946d02b2191d5a0 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 4 Aug 2023 15:08:57 +0800
Subject: [PATCH 08/11] feat: dockbar support drag

---
 packages/client/components/DrawerRight.vue | 20 ++++++++++++++++++--
 packages/client/components/GraphDock.vue   |  3 +--
 packages/client/package.json               |  1 +
 pnpm-lock.yaml                             | 11 +++++++++++
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/client/components/DrawerRight.vue b/packages/client/components/DrawerRight.vue
index 4eed1bdb..f1836f60 100644
--- a/packages/client/components/DrawerRight.vue
+++ b/packages/client/components/DrawerRight.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { vResizable } from 'vue-resizables'
+import 'vue-resizables/style'
+
 const props = defineProps<{
   modelValue?: boolean
   navbar?: HTMLElement
@@ -39,9 +42,22 @@ export default {
     <div
       v-if="modelValue"
       ref="el"
+      v-resizable="{
+        edge: {
+          left: true,
+        },
+        border: {
+          render: true,
+          style: {
+            headless: true,
+            color: '#41B883',
+            size: 1,
+          },
+        },
+      }"
       border="l base"
-      flex="~ col gap-1"
-      absolute bottom-0 right-0 z-10 z-20 of-auto text-sm glass-effect
+      flex="~ col gap-1" absolute bottom-0 right-0 z-10 z-20 of-auto text-sm
+      glass-effect
       :style="{ top: `${top}px` }"
       v-bind="$attrs"
     >
diff --git a/packages/client/components/GraphDock.vue b/packages/client/components/GraphDock.vue
index d24bcfe5..019ad0a6 100644
--- a/packages/client/components/GraphDock.vue
+++ b/packages/client/components/GraphDock.vue
@@ -6,7 +6,6 @@ const errorBoundaryMessages: Partial<Record<StateGraphStateEnum, string>> = {
   [StateGraphStateEnum.NOT_READY]: 'Is not ready yet.',
   [StateGraphStateEnum.NOT_SELECT_FILE]: 'You have not selected a file yet.',
   [StateGraphStateEnum.NOT_COLLECTED]: 'This file has not been collected or does\'t support.',
-  [StateGraphStateEnum.NO_STATE]: 'This file does not have any state that supported to analyze.',
 }
 
 const ErrorBoundary: FunctionalComponent<{
@@ -33,7 +32,7 @@ const activeTab = ref<(typeof tabs)[number]['name']>(tabs[0].name)
 </script>
 
 <template>
-  <ErrorBoundary v-if="stateGraphState !== StateGraphStateEnum.HAS_STATE" :state="stateGraphState" />
+  <ErrorBoundary v-if="errorBoundaryMessages[stateGraphState]" :state="stateGraphState" />
   <div v-else class="grid grid-rows-[30px_1fr] h-full w-full p2">
     <nav class="h30px w-full flex items-center gap1">
       <div v-for="item of tabs" :key="item.name" class="cursor-pointer p1" :class="[activeTab === item.name ? 'text-primary' : '']" @click="activeTab = item.name">
diff --git a/packages/client/package.json b/packages/client/package.json
index fd965543..c021932a 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -42,6 +42,7 @@
     "splitpanes": "^3.1.5",
     "vanilla-jsoneditor": "^0.17.8",
     "vite-hot-client": "^0.2.1",
+    "vue-resizables": "^0.3.4",
     "vue-router": "^4.2.4",
     "vuedraggable": "^4.1.0",
     "xterm": "^5.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30e6dd43..a21d3875 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -101,6 +101,9 @@ importers:
       vite-hot-client:
         specifier: ^0.2.1
         version: 0.2.1(vite@4.4.7)
+      vue-resizables:
+        specifier: ^0.3.4
+        version: 0.3.4(vue@3.3.4)
       vue-router:
         specifier: ^4.2.4
         version: 4.2.4(vue@3.3.4)
@@ -7704,6 +7707,14 @@ packages:
       vue: 3.3.4
     dev: true
 
+  /vue-resizables@0.3.4(vue@3.3.4):
+    resolution: {integrity: sha512-eLnVRngj0EMo4MKgAXppzdmtCiTEyQghQ5j4kgu1EjY80LYsqkEZp8mHPII2vdG3aFKnWZeMWuw5JysG8v5hUQ==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
   /vue-resize@2.0.0-alpha.1(vue@3.3.4):
     resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
     peerDependencies:

From 67e81c25ebff12e790c9e37cd7ef419f0dd9b026 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 5 Aug 2023 11:57:47 +0800
Subject: [PATCH 09/11] chore: add linenumber

---
 packages/client/components/HighlightCode.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/client/components/HighlightCode.vue b/packages/client/components/HighlightCode.vue
index fc861a5a..5f141efc 100644
--- a/packages/client/components/HighlightCode.vue
+++ b/packages/client/components/HighlightCode.vue
@@ -13,4 +13,20 @@ const { highlightedCode } = await useHighlight()
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* copied from https://github.com/shikijs/shiki/issues/3 */
+:deep(code) {
+  counter-reset: step;
+  counter-increment: step 0;
+}
+
+:deep(code) .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 1rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  text-align: right;
+  @apply text-gray-400;
+}
+</style>

From 07ca5e93b18f7bedf538c8ad551e75445f8a0e3c Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Sat, 5 Aug 2023 12:09:41 +0800
Subject: [PATCH 10/11] fix: only load shiki once

---
 packages/client/composables/highlight.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/composables/highlight.ts b/packages/client/composables/highlight.ts
index c2794b20..19c00661 100644
--- a/packages/client/composables/highlight.ts
+++ b/packages/client/composables/highlight.ts
@@ -14,6 +14,8 @@ setCDN('https://unpkg.com/shiki/')
 let highlighter: Highlighter
 
 async function initHighlighter() {
+  if (highlighter)
+    return highlighter
   return await getHighlighter({
     themes: ['vitesse-dark', 'vitesse-light'],
     langs: ['vue', 'javascript', 'typescript', 'jsx', 'tsx'],

From ef41e84b3f4582ca025c2ff8686b4966c26706d0 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Tue, 8 Aug 2023 18:28:37 +0800
Subject: [PATCH 11/11] feat(wip): support show state graph

---
 packages/client/components/StateGraph.vue | 105 +++++++++++++++++++++-
 packages/client/logic/state-graph.ts      |   2 +-
 packages/client/pages/graph.vue           |   1 -
 3 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/packages/client/components/StateGraph.vue b/packages/client/components/StateGraph.vue
index 9e0b98d3..476d9465 100644
--- a/packages/client/components/StateGraph.vue
+++ b/packages/client/components/StateGraph.vue
@@ -1,7 +1,108 @@
-<script setup lang="tsx">
+<script setup lang="ts">
+import type { ScanVariableDeclarationResult } from 'esm-analyzer'
+import { Network } from 'vis-network'
+import type { Node, Options } from 'vis-network'
+import { currentSelectedFile } from '../logic/state-graph'
+import { useDevToolsClient } from '~/logic/client'
 import { stateGraphRawData } from '~/logic/state-graph'
+
+const isHoveringNode = ref(false)
+const container = ref<HTMLDivElement>()
+
+const map = ref<Map</* variable name */string, ScanVariableDeclarationResult>>(new Map())
+const nodes = ref<Node[]>([])
+
+const { meta: metaKeyPressed } = useMagicKeys({
+  passive: true,
+})
+
+watchEffect(() => {
+  nodes.value = []
+  if (!stateGraphRawData.value) {
+    nodes.value = []
+    return map.value.clear()
+  }
+  nodes.value = []
+  map.value.clear()
+  for (const [variable] of stateGraphRawData.value) {
+    map.value.set(variable.name, variable)
+    nodes.value.push({
+      id: variable.name,
+      title: variable.name,
+      label: variable.name,
+      size: 15,
+    })
+  }
+})
+
+onMounted(() => {
+  const options: Options = {
+    nodes: {
+      shape: 'dot',
+      size: 16,
+    },
+    interaction: {
+      hover: true,
+    },
+    physics: {
+      maxVelocity: 146,
+      solver: 'forceAtlas2Based',
+      timestep: 0.35,
+      stabilization: {
+        enabled: true,
+        iterations: 200,
+      },
+    },
+    groups: {
+      vue: {
+        color: '#42b883',
+      },
+      ts: {
+        color: '#41b1e0',
+      },
+      js: {
+        color: '#d6cb2d',
+      },
+      json: {
+        color: '#cf8f30',
+      },
+      css: {
+        color: '#e6659a',
+      },
+      html: {
+        color: '#e34c26',
+      },
+      svelte: {
+        color: '#ff3e00',
+      },
+      jsx: {
+        color: '#7d6fe8',
+      },
+      tsx: {
+        color: '#7d6fe8',
+      },
+    },
+  }
+
+  const network = new Network(container.value!, {
+    nodes: nodes.value,
+  }, options)
+
+  const client = useDevToolsClient()
+
+  network.on('click', (params) => {
+    const nodeId = params.nodes?.[0]
+    if (metaKeyPressed.value) {
+      const { loc: { start: { line, column } } } = map.value.get(nodeId!)!
+      return client.value.openInEditor(currentSelectedFile.value!, line, column)
+    }
+  })
+  watch(nodes, (nodes) => {
+    network.setData({ nodes })
+  })
+})
 </script>
 
 <template>
-  {{ stateGraphRawData }}
+  <div ref="container" flex="1" :class="[isHoveringNode ? 'cursor-pointer' : '']" />
 </template>
diff --git a/packages/client/logic/state-graph.ts b/packages/client/logic/state-graph.ts
index 121f1d03..0d120d66 100644
--- a/packages/client/logic/state-graph.ts
+++ b/packages/client/logic/state-graph.ts
@@ -45,7 +45,7 @@ export async function initRawData() {
   stateGraphState.value = StateGraphStateEnum.READY
 }
 
-const currentSelectedFile = ref</* file name */string>()
+export const currentSelectedFile = ref</* file name */string>()
 watch(currentSelectedFile, () => {
   stateGraphState.value = getState()
 })
diff --git a/packages/client/pages/graph.vue b/packages/client/pages/graph.vue
index 6c12fb1b..f6125aa8 100644
--- a/packages/client/pages/graph.vue
+++ b/packages/client/pages/graph.vue
@@ -200,7 +200,6 @@ const navbar = ref<HTMLDivElement>()
 </script>
 
 <template>
-  <!-- i-carbon-data-vis-1 -->
   <div relative h-screen w-full flex flex-col n-panel-grids>
     <SearchBox ref="navbar">
       <template #right>