feat: add matched label in playground code

fix #536

src/dump_tree.rs

@@ -10,6 +10,7 @@ use wasm_bindgen::prelude::JsError;
 #[derive(Deserialize, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct DumpNode {
+  id: usize,
   field: Option<String>,
   kind: String,
   start: Pos,
@@ -51,6 +52,7 @@ pub fn dump_one_node(cursor: &mut ts::TreeCursor, target: &mut Vec<DumpNode>) {
     cursor.goto_parent();
   }
   target.push(DumpNode {
+    id: node.id(),
     field,
     kind,
     start,

src/utils.rs

@@ -29,6 +29,7 @@ pub struct WasmNode {
 
 #[derive(Serialize, Deserialize)]
 pub struct WasmMatch {
+  pub id: usize,
   pub node: WasmNode,
   pub env: BTreeMap<String, WasmNode>,
   pub message: String,
@@ -37,11 +38,12 @@ pub struct WasmMatch {
 impl WasmMatch {
   pub fn from_match(nm: NodeMatch, rule: &RuleConfig<WasmLang>) -> Self {
     let node = nm.get_node().clone();
+    let id = node.node_id();
     let node = WasmNode::from(node);
     let env = nm.get_env().clone();
     let env = env_to_map(env);
     let message = rule.get_message(&nm);
-    Self { node, env, message }
+    Self { node, env, message, id }
   }
 }
 

website/src/Homepage.vue

@@ -21,7 +21,6 @@ provide('toggle-appearance', async () => {
   if (!enableTransitions()) {
     return toggle()
   }
-  // @ts-expect-error
   return document.startViewTransition(toggle).ready
 })
 </script>

website/src/components/QueryEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Monaco, EditorWithPanel } from './editors'
-import { shallowRef, watchEffect, provide, PropType, inject } from 'vue'
+import { shallowRef, watchEffect, provide, PropType, inject, computed } from 'vue'
 import TreeNode from './dump/TreeNode.vue'
 import { highlightKey, DumpNode, Pos } from './dump/dumpTree'
 import { dumpASTNodes } from 'ast-grep-wasm'
@@ -9,7 +9,7 @@ import type { Match, SupportedLang } from './astGrep'
 
 const modelValue = defineModel<string>()
 
-defineProps({
+const props = defineProps({
   language: {
     type: String as PropType<SupportedLang>,
     default: 'javascript'
@@ -27,6 +27,11 @@ watchEffect(() => {
   }
 })
 
+const matchedIds = computed(() => {
+  const matches = props.matches || []
+  return new Set(matches.map(m => m.id))
+})
+
 let cursorPosition = shallowRef<Pos>()
 provide(highlightKey, e => {
   highlights.value = [e]
@@ -71,6 +76,7 @@ let showFullTree = shallowRef(false)
         :showUnnamed="showFullTree"
         class="pre"
         :node="root"
+        :matchedIds="matchedIds"
         :cursorPosition="cursorPosition"/>
     </template>
   </EditorWithPanel>

website/src/components/astGrep/lang.ts

@@ -81,10 +81,12 @@ export type Match = {
   message: string,
   rule: string,
   env: any,
+  id: number,
   range: [number, number, number, number],
 } | {
   type: 'simple',
   env: any,
+  id: number,
   range: [number, number, number, number],
 }
 
@@ -116,6 +118,7 @@ export async function doFind(src: string, json: any[]): Promise<[Match[], string
             message: nm.message,
             range: nm.node.range,
             env: nm.env,
+            id: nm.id,
           })
         }
       } else {
@@ -124,6 +127,7 @@ export async function doFind(src: string, json: any[]): Promise<[Match[], string
             type: 'simple',
             range: nm.node.range,
             env: nm.env,
+            id: nm.id,
           })
         }
       }

website/src/components/dump/GeneralNode.vue

@@ -44,6 +44,7 @@ const {
   --green:     #008000;
   --black:     #002b36;
   --gray:      #5a6169;
+  --cyan:      #2aa198;
 }
 html.dark .tree-node {
   --yellow:    #ce9178;

website/src/components/dump/TreeNode.vue

@@ -5,6 +5,10 @@ import { showToast } from '../utils/Toast.vue'
 import GeneralNode from './GeneralNode.vue'
 
 const props = defineProps({
+  matchedIds: {
+    type: Set as PropType<Set<number>>,
+    required: true,
+  },
   node: {
     type: Object as PropType<DumpNode>,
     required: true
@@ -17,6 +21,7 @@ const props = defineProps({
 })
 
 let {
+  id,
   field,
   kind,
   start,
@@ -46,9 +51,11 @@ function copyField(name: string) {
       <span v-else class="node-text">{{ kind }}</span>
       <span class="node-field" @click.stop="copyField(field || '')">{{ field }}</span>
       <span class="node-range">({{ start.row }}, {{start.column}})-({{ end.row }},{{ end.column }})</span>
+      <span class="matched" v-if="matchedIds.has(id)">Matched</span>
     </template>
     <template #children="{cursorPosition}">
       <TreeNode
+        :matchedIds="matchedIds"
         :showUnnamed="showUnnamed"
         :node="child"
         :cursorPosition="cursorPosition"
@@ -85,4 +92,12 @@ function copyField(name: string) {
 .node-range {
   color: #999;
 }
+.matched {
+  border: 1px solid currentColor;
+  color: var(--cyan);
+  padding: 0.1em 0.35em;
+  border-radius: 5px;
+  margin: 0 4px 7px;
+  font-size: 0.9em;
+}
 </style>

website/src/components/dump/dumpTree.ts

@@ -16,6 +16,7 @@ export interface GeneralNode {
   start: Pos
   end: Pos
   children: this[]
+  id: number
 }
 
 /** stub wasm DumpNode */