+
diff --git a/packages/client/components/StateGraph.vue b/packages/client/components/StateGraph.vue
new file mode 100644
index 00000000..476d9465
--- /dev/null
+++ b/packages/client/components/StateGraph.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
diff --git a/packages/client/composables/highlight.ts b/packages/client/composables/highlight.ts
new file mode 100644
index 00000000..19c00661
--- /dev/null
+++ b/packages/client/composables/highlight.ts
@@ -0,0 +1,37 @@
+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() {
+ if (highlighter)
+ return highlighter
+ 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
new file mode 100644
index 00000000..0d120d66
--- /dev/null
+++ b/packages/client/logic/state-graph.ts
@@ -0,0 +1,101 @@
+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 codeData = ref<{
+ code: string
+ filename: string
+}[]>([])
+const rawAnalyzeData = ref<{
+ code: string
+ lang: AcceptableLang
+ path: string
+ offsetContent: string
+}[]>([])
+const project = shallowRef
(new Project('state-analyze'))
+export const stateGraphState = ref(StateGraphStateEnum.NOT_READY)
+
+export async function initRawData() {
+ if (stateGraphState.value !== StateGraphStateEnum.NOT_READY)
+ return
+ 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
+}
+
+export const currentSelectedFile = ref()
+watch(currentSelectedFile, () => {
+ stateGraphState.value = getState()
+})
+
+export function useStateGraph() {
+ const [drawerVisible, toggleDrawerVisible] = useToggle(false)
+
+ return {
+ drawerVisible,
+ toggleDrawerVisible,
+ enable: async () => {
+ toggleDrawerVisible()
+ await initRawData()
+ stateGraphState.value = getState()
+ },
+ currentSelectedFile,
+ }
+}
+
+function getState() {
+ // if not ready
+ if (stateGraphState.value === StateGraphStateEnum.NOT_READY)
+ return StateGraphStateEnum.NOT_READY
+ const selectFile = currentSelectedFile.value
+ // if not selected file
+ if (!selectFile)
+ return StateGraphStateEnum.NOT_SELECT_FILE
+ // if not collected
+ if (!project.value.getFilePaths().includes(selectFile))
+ return StateGraphStateEnum.NOT_COLLECTED
+ // if no state
+ const data = project.value.getAnalyzeResults(selectFile)
+ if (!data || !data.size)
+ 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(() => {
+ 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 8b6aaca1..c021932a 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -34,12 +34,15 @@
"@vueuse/integrations": "^10.3.0",
"@webfansplz/vuedoc-parser": "^0.0.3",
"algoliasearch": "^4.19.1",
+ "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",
+ "vue-resizables": "^0.3.4",
"vue-router": "^4.2.4",
"vuedraggable": "^4.1.0",
"xterm": "^5.2.1",
diff --git a/packages/client/pages/graph.vue b/packages/client/pages/graph.vue
index 6c4d2a05..f6125aa8 100644
--- a/packages/client/pages/graph.vue
+++ b/packages/client/pages/graph.vue
@@ -2,6 +2,7 @@
import type { Data, Options } from 'vis-network'
import { Network } from 'vis-network'
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'
@@ -86,6 +87,8 @@ const data = computed(() => {
}
})
+const { drawerVisible, enable: enableStateGraph, toggleDrawerVisible, currentSelectedFile } = useStateGraph()
+
onMounted(() => {
const options: Options = {
nodes: {
@@ -158,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)
@@ -191,12 +195,21 @@ onMounted(() => {
})
})
const { showGraphSetting } = useGraphSettings()
+
+const navbar = ref()
-
+
+
@@ -204,5 +217,8 @@ const { showGraphSetting } = useGraphSettings()
+
+
+