docs(playground): support ast tree viewer

Author: ntnyq

.vscode/settings.json

@@ -25,6 +25,7 @@
     "changelogithub",
     "codecov",
     "hkern",
+    "iconify",
     "lcov",
     "lezer",
     "mpath",

docs/.vitepress/components/DropZone.vue

@@ -45,7 +45,7 @@ async function onImportFile(files?: FileList | null) {
   const fileContent = await file.text()
 
   if (fileExt !== 'svg') {
-    return console.log('Expected SVG file, but got ' + fileExt)
+    return console.log(`Expected SVG file, but got ${fileExt}`)
   }
 
   if (!fileContent.trim().length) {

docs/.vitepress/components/Editor/index.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { useData } from 'vitepress/client'
 import { computed } from 'vue'
 import { Codemirror } from 'vue-codemirror'
-import { useData } from 'vitepress/client'
-import { githubDark, githubLight } from './theme'
 import { languages, type SupportLanguage } from './language'
+import { githubDark, githubLight } from './theme'
 import type { Extension } from '@codemirror/state'
 
 const props = withDefaults(

docs/.vitepress/components/Playground/ActionContainer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { useFileDialog } from '@vueuse/core'
 import { VPButton } from 'vitepress/theme'
 import { useSharedPlaygroundState } from '../../composables/playground'
-import { useFileDialog } from '@vueuse/core'
 
 const {
   open: openFileDialog,

docs/.vitepress/components/Playground/InputContainer.vue

@@ -2,7 +2,7 @@
 import { shallowRef } from 'vue'
 import { useSharedPlaygroundState } from '../../composables/playground'
 import { InputTab } from '../../constants'
-import { ITabItem } from '../ui/tabs'
+import type { ITabItem } from '../ui/tabs'
 
 const { activeInputTab, setActiveInputTab } = useSharedPlaygroundState()
 
@@ -26,8 +26,9 @@ function handleTabsChanage(tabName: string) {
   <div class="w-full h-full flex gap-2 flex-col relative">
     <Tabs
       @change="handleTabsChanage"
-      class="flex-none"
+      v-model="activeInputTab"
       :options="inputTabOptions"
+      class="flex-none"
     />
     <div class="h-[calc(100%-60px)]">
       <CodeContainer v-if="activeInputTab === InputTab.Code" />

docs/.vitepress/components/Playground/OutputContainer.vue

@@ -2,8 +2,8 @@
 import { shallowRef } from 'vue'
 import { useSharedPlaygroundState } from '../../composables/playground'
 import { OutputTab } from '../../constants'
-import { ITabItem } from '../ui/tabs'
 import JsonContainer from './JsonContainer.vue'
+import type { ITabItem } from '../ui/tabs'
 
 const { activeOutputTab, setActiveOutputTab } = useSharedPlaygroundState()
 
@@ -27,8 +27,9 @@ function handleTabsChanage(tabName: string) {
   <div class="w-full h-full flex gap-2 flex-col relative">
     <Tabs
       @change="handleTabsChanage"
-      class="flex-none"
+      v-model="activeOutputTab"
       :options="outputTabOptions"
+      class="flex-none"
     />
     <div class="h-[calc(100%-60px)]">
       <JsonContainer v-if="activeOutputTab === OutputTab.Json" />

docs/.vitepress/components/Playground/PreviewContainer.vue

@@ -7,8 +7,8 @@ const { code } = useSharedPlaygroundState()
 <template>
   <div class="relative w-full h-full">
     <div
-      class="max-w-full max-h-full absolute left-1/2 top-1/2 -translate-1/2"
       v-html="code"
+      class="max-w-full max-h-full absolute left-1/2 top-1/2 -translate-1/2"
     />
   </div>
 </template>

docs/.vitepress/components/Playground/TreeContainer.vue

@@ -5,8 +5,7 @@ const { astTree } = useSharedPlaygroundState()
 </script>
 
 <template>
-  <div class="relative w-full h-full flex-center">
-    <h1 class="text-3xl op-70 font-semibold">Todo</h1>
-    <p v-if="astTree">{{ astTree }}</p>
+  <div class="relative w-full h-full of-auto">
+    <AstViewer :value="astTree" />
   </div>
 </template>

docs/.vitepress/components/Playground/index.vue

@@ -11,25 +11,25 @@ import { Panel, PanelGroup, PanelResizeHandle } from 'vue-resizable-panels'
         class="panel-group"
       >
         <Panel
-          collapsible
           class="panel-column"
+          collapsible
         >
           <InputContainer />
         </Panel>
         <PanelResizeHandle class="panel-resize-handle" />
         <Panel
-          collapsible
           class="panel-column"
+          collapsible
         >
           <OutputContainer />
         </Panel>
         <PanelResizeHandle class="panel-resize-handle" />
         <Panel
-          collapsible
           :min-size="12"
           :max-size="24"
           :default-size="18"
           class="panel-column"
+          collapsible
         >
           <ActionContainer />
         </Panel>

docs/.vitepress/components/ast/AstViewer.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import './style.css'
+import { isNil, isObject } from '@ntnyq/utils'
+import { computed } from 'vue'
+import type { OnHoverNodeFn } from './types'
+
+const props = defineProps<{
+  cursorPosition?: number
+  enableScrolling?: boolean
+  hideCopyButton?: boolean
+  onHoverNode?: OnHoverNodeFn
+  showTokens?: boolean
+  value: unknown
+}>()
+
+const model = computed(() => props.value)
+
+const selectedPath = computed(() => {
+  if (isNil(props.cursorPosition) || !model.value || !isObject(model.value)) {
+    return 'ast'
+  }
+  return 'ast'
+})
+</script>
+
+<template>
+  <div class="ast-list">
+    <DataRender
+      :value="model"
+      :selected-path="selectedPath"
+      level="ast"
+      last-element
+    />
+
+    <CopyButton
+      v-if="!hideCopyButton"
+      :value="model"
+    />
+  </div>
+</template>