Merge pull request #116 from tmr232/upgrade-web-tree-sitter-0.25.x

upgrade web tree sitter to 0.25.3

Author: tmr232

bun.lockb

@@ -3,7 +3,7 @@
   "module": "index.ts",
   "type": "module",
   "dependencies": {
-    "@hpcc-js/wasm-graphviz": "^1.6.1",
+    "@hpcc-js/wasm-graphviz": "^1.7.0",
     "@svgdotjs/svg.js": "^3.2.4",
     "@types/object-hash": "^3.0.6",
     "@types/vscode": "^1.94.0",
@@ -16,7 +16,7 @@
     "lru-cache": "^11.0.2",
     "object-hash": "^3.0.0",
     "svgdom": "^0.1.19",
-    "web-tree-sitter": "^0.23.2"
+    "web-tree-sitter": "^0.25.3"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -47,6 +47,7 @@
     "tree-sitter-typescript": "^0.23.2",
     "typedoc": "^0.27.1",
     "typescript-eslint": "^8.16.0",
+    "typescript": "^5.7.3",
     "vite": "^5.4.8"
   },
   "peerDependencies": {

package.json

@@ -1,9 +1,9 @@
-import type Parser from "web-tree-sitter";
+import type { Node as SyntaxNode } from "web-tree-sitter";
 import { type CFG, mergeNodeAttrs } from "../src/control-flow/cfg-defs.ts";
 import { type Language, newCFGBuilder } from "../src/control-flow/cfg.ts";
 import { simplifyCFG, trimFor } from "../src/control-flow/graph-ops.ts";
 
-export function buildCFG(func: Parser.SyntaxNode, language: Language): CFG {
+export function buildCFG(func: SyntaxNode, language: Language): CFG {
   const builder = newCFGBuilder(language, { flatSwitch: true });
 
   let cfg = builder.buildCFG(func);

parsers/tree-sitter.wasm

@@ -1,8 +1,7 @@
 import * as path from "node:path";
 import { parseArgs } from "node:util";
 import { Graphviz } from "@hpcc-js/wasm-graphviz";
-import type Parser from "web-tree-sitter";
-import type { SyntaxNode } from "web-tree-sitter";
+import type { Node as SyntaxNode } from "web-tree-sitter";
 import { type Language, supportedLanguages } from "../src/control-flow/cfg.ts";
 import {
   deserializeColorList,
@@ -95,7 +94,7 @@ async function main() {
 
   const language: Language = values.language ?? getLanguage(filepath);
 
-  const possibleMatches: { name: string; func: Parser.SyntaxNode }[] = [];
+  const possibleMatches: { name: string; func: SyntaxNode }[] = [];
   const sourceCode = await Bun.file(filepath).text();
   const startIndex = Number.parseInt(functionName);
   let startPosition: { row: number; column: number } | undefined;
@@ -134,7 +133,7 @@ async function main() {
   }
 
   // @ts-expect-error: possibleMatches will always have exactly one value.
-  const func: Parser.SyntaxNode = possibleMatches[0].func;
+  const func: SyntaxNode = possibleMatches[0].func;
   const graphviz = await Graphviz.load();
   const cfg = buildCFG(func, language);
 

scripts/cfg-helper.ts

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { Graphviz } from "@hpcc-js/wasm-graphviz";
-import Parser from "web-tree-sitter";
+import { Node as SyntaxNode } from "web-tree-sitter";
 import { type Language, newCFGBuilder } from "../control-flow/cfg";
 import {
   type CFG,
@@ -47,7 +47,7 @@ function createNodeColors(cfg: CFG): Map<string, string> {
 
 function renderRanges(
   cfg: CFG,
-  functionSyntax: Parser.SyntaxNode,
+  functionSyntax: SyntaxNode,
   sourceText: string,
   nodeColors: NodeColors,
 ): string {

scripts/render-function.ts

@@ -2,7 +2,7 @@
 import { Graphviz } from "@hpcc-js/wasm-graphviz";
 import objectHash from "object-hash";
 import { createEventDispatcher } from "svelte";
-import Parser from "web-tree-sitter";
+import { Tree } from "web-tree-sitter";
 import { type Language } from "../control-flow/cfg";
 import {
   type ColorList,
@@ -20,7 +20,7 @@ import {
 let parsers: Parsers;
 let graphviz: Graphviz;
 let dot: string;
-let tree: Parser.Tree;
+let tree: Tree;
 let savedSvg: string;
 let getNodeOffset: (nodeId: string) => number | undefined = () => undefined;
 export let colorList = getLightColorList();

src/components/CodeSegmentation.svelte

@@ -2,7 +2,7 @@
 import { Graphviz } from "@hpcc-js/wasm-graphviz";
 import objectHash from "object-hash";
 import { createEventDispatcher } from "svelte";
-import Parser, { type SyntaxNode } from "web-tree-sitter";
+import { type Node as SyntaxNode, type Tree } from "web-tree-sitter";
 import { type Language, functionNodeTypes } from "../control-flow/cfg";
 import { type ColorList, getLightColorList } from "../control-flow/colors";
 import { memoizeFunction } from "./caching.ts";
@@ -15,7 +15,7 @@ let parsers: Parsers;
 let graphviz: Graphviz;
 let dot: string;
 let getNodeOffset: (nodeId: string) => number | undefined = () => undefined;
-let tree: Parser.Tree;
+let tree: Tree;
 let svg: string;
 export let colorList = getLightColorList();
 export let codeAndOffset: CodeAndOffset | null = null;
@@ -43,10 +43,10 @@ async function initialize() {
 }
 
 function getFunctionAtOffset(
-  tree: Parser.Tree,
+  tree: Tree,
   offset: number,
   language: Language,
-): Parser.SyntaxNode | null {
+): SyntaxNode | null {
   let syntax: SyntaxNode | null = tree.rootNode.descendantForIndex(offset);
 
   while (syntax) {

src/components/Graph.svelte

@@ -1,7 +1,7 @@
 import type { Graphviz } from "@hpcc-js/wasm-graphviz";
 import type { G, Polygon } from "@svgdotjs/svg.js";
 import objectHash from "object-hash";
-import type Parser from "web-tree-sitter";
+import type { Node as SyntaxNode } from "web-tree-sitter";
 import { type Language, newCFGBuilder } from "../control-flow/cfg";
 import { mergeNodeAttrs, remapNodeTargets } from "../control-flow/cfg-defs";
 import { type ColorList, listToScheme } from "../control-flow/colors";
@@ -27,7 +27,7 @@ export interface RenderOptions {
 export class Renderer {
   private memoizedRenderStatic = memoizeFunction({
     func: this.renderStatic.bind(this),
-    hash: (functionSyntax: Parser.SyntaxNode, language: Language) =>
+    hash: (functionSyntax: SyntaxNode, language: Language) =>
       objectHash({ code: functionSyntax.text, language }),
     max: 100,
   });
@@ -38,7 +38,7 @@ export class Renderer {
   ) {}
 
   public render(
-    functionSyntax: Parser.SyntaxNode,
+    functionSyntax: SyntaxNode,
     language: Language,
     offsetToHighlight?: number,
   ): {
@@ -91,7 +91,7 @@ export class Renderer {
     }
   }
 
-  private renderStatic(functionSyntax: Parser.SyntaxNode, language: Language) {
+  private renderStatic(functionSyntax: SyntaxNode, language: Language) {
     const overlayBuilder = new OverlayBuilder(functionSyntax);
 
     const builder = newCFGBuilder(language, {

src/components/WebviewRenderer.svelte

@@ -1,5 +1,5 @@
 import { Graphviz } from "@hpcc-js/wasm-graphviz";
-import type Parser from "web-tree-sitter";
+import type { Parser, Node as SyntaxNode, Tree } from "web-tree-sitter";
 import {
   type Language,
   functionNodeTypes,
@@ -23,10 +23,10 @@ export async function initializeParsers(): Promise<Parsers> {
 }
 
 export function getFirstFunction(
-  tree: Parser.Tree,
+  tree: Tree,
   language: Language,
-): Parser.SyntaxNode | null {
-  let functionNode: Parser.SyntaxNode | null = null;
+): SyntaxNode | null {
+  let functionNode: SyntaxNode | null = null;
   const cursor = tree.walk();
   const visitNode = () => {
     if (functionNodeTypes[language].includes(cursor.nodeType)) {
@@ -61,8 +61,11 @@ export interface TestResults {
 
 export function runTest(record: TestFuncRecord): TestResults[] {
   const tree = parsers[record.language].parse(record.code);
+  if (!tree) {
+    throw new Error(`Failed to parse code from ${record}`);
+  }
   const testFunc: TestFunction = {
-    function: getFirstFunction(tree, record.language) as Parser.SyntaxNode,
+    function: getFirstFunction(tree, record.language) as SyntaxNode,
     language: record.language,
     name: record.name,
     reqs: record.reqs,
@@ -84,10 +87,10 @@ export function processRecord(
   options: RenderOptions,
 ): { dot?: string; ast: string; svg?: string; error?: Error } {
   const tree = parsers[record.language].parse(record.code);
-  const functionSyntax = getFirstFunction(
-    tree,
-    record.language,
-  ) as Parser.SyntaxNode;
+  if (!tree) {
+    throw new Error(`Failed to parse code from ${record}`);
+  }
+  const functionSyntax = getFirstFunction(tree, record.language) as SyntaxNode;
 
   const ast = functionSyntax.toString();