From a4426959e1b755d47566ffc2901bc837f1534933 Mon Sep 17 00:00:00 2001 From: Vlady Veselinov Date: Tue, 21 Oct 2025 18:51:22 +0100 Subject: [PATCH 1/6] Add getting started docs Added sections for Node.js and WASM usage, including installation and parser creation examples. --- README.md | 56 +++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 50 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d7d2b342..78588f36 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,56 @@ TypeScript and TSX grammars for [tree-sitter][]. -Because TSX and TypeScript are actually two different dialects, this module defines two grammars. Require them as follows: +## Getting started +Install the package. +``` +npm i tree-sitter-typescript +``` + -```js -require("tree-sitter-typescript").typescript; // TypeScript grammar -require("tree-sitter-typescript").tsx; // TSX grammar +### Node +If you'd like to run [tree-sitter in Node.js](https://tree-sitter.github.io/node-tree-sitter/): +``` +npm i tree-sitter +``` +Create a parser using the Node runtime. +```ts +import Parser from 'tree-sitter' +import { typescript, tsx } from "tree-sitter-typescript" // choose your grammar + +const parser = new Parser() +parser.setLanguage(typescript) +``` + +### WASM +If you'd like to run [tree-sitter in the browser](https://github.com/tree-sitter/tree-sitter/blob/master/lib/binding_web/README.md): +``` +npm i web-tree-sitter +``` + +Create a parser using the WASM runtime. +```ts +import { Language, Parser } from "web-tree-sitter" + +await Parser.init() +const parser = new Parser() +// This runtime requires loading the language as wasm +// Change "typescript" to "tsx" if you'd like to use TSX +const typescript = await Language.load( + "node_modules/tree-sitter-typescript/tree-sitter-typescript.wasm", +) +parser.setLanguage(typescript) +``` + + +### Use your parser +```ts +const source = "let x = 1" +const tree = parser.parse(source) + +if (tree?.rootNode.toString() === "(program (lexical_declaration (variable_declarator name: (identifier) value: (number))))") { + console.log("Hello, tree-sitter!") +} ``` For Javascript files with [flow] type annotations you can use the `tsx` parser. @@ -21,8 +66,7 @@ For Javascript files with [flow] type annotations you can use the `tsx` parser. [tree-sitter]: https://github.com/tree-sitter/tree-sitter [flow]: https://flow.org/en/ -References - +References: - [TypeScript Language Spec](https://github.com/microsoft/TypeScript/blob/30cb20434a6b117e007a4959b2a7c16489f86069/doc/spec-ARCHIVED.md) [ci]: https://img.shields.io/github/actions/workflow/status/tree-sitter/tree-sitter-typescript/ci.yml?logo=github&label=CI From b8ffc6bc3a92de78f5faae38a30a497de6a4752a Mon Sep 17 00:00:00 2001 From: Vlady Veselinov Date: Wed, 22 Oct 2025 00:29:24 +0100 Subject: [PATCH 2/6] import wasm correctly Updated the README to include TSX support in the parser example. --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 78588f36..855c5d83 100644 --- a/README.md +++ b/README.md @@ -39,14 +39,17 @@ npm i web-tree-sitter Create a parser using the WASM runtime. ```ts import { Language, Parser } from "web-tree-sitter" +import treeSitterWasmUrl from "web-tree-sitter/tree-sitter.wasm?url" +import tsxWasmUrl from "tree-sitter-typescript/tree-sitter-tsx.wasm?url" // Choose typescript or tsx here + +await Parser.init({ + locateFile() { + return treeSitterWasmUrl + }, +}) -await Parser.init() const parser = new Parser() -// This runtime requires loading the language as wasm -// Change "typescript" to "tsx" if you'd like to use TSX -const typescript = await Language.load( - "node_modules/tree-sitter-typescript/tree-sitter-typescript.wasm", -) +const language = await Language.load(tsxWasmUrl) parser.setLanguage(typescript) ``` From 2316fbab0dacbd5565f29a9134cb37e6fdb39271 Mon Sep 17 00:00:00 2001 From: Vlady Veselinov Date: Wed, 22 Oct 2025 01:17:54 +0100 Subject: [PATCH 3/6] add vite note --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 855c5d83..d026ff13 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ parser.setLanguage(typescript) ``` ### WASM -If you'd like to run [tree-sitter in the browser](https://github.com/tree-sitter/tree-sitter/blob/master/lib/binding_web/README.md): +If you'd like to run [tree-sitter in the browser](https://github.com/tree-sitter/tree-sitter/blob/master/lib/binding_web/README.md) (using Vite): ``` npm i web-tree-sitter ``` From 53b9b1e0abd445fae165d777c3b288156c986736 Mon Sep 17 00:00:00 2001 From: Vlady Veselinov Date: Wed, 22 Oct 2025 03:13:16 +0100 Subject: [PATCH 4/6] Update WASM instructions --- README.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d026ff13..ffb8ab4a 100644 --- a/README.md +++ b/README.md @@ -31,28 +31,35 @@ parser.setLanguage(typescript) ``` ### WASM -If you'd like to run [tree-sitter in the browser](https://github.com/tree-sitter/tree-sitter/blob/master/lib/binding_web/README.md) (using Vite): +If you'd like to run [tree-sitter in the browser](https://github.com/tree-sitter/tree-sitter/blob/master/lib/binding_web/README.md): ``` npm i web-tree-sitter ``` +Add these script to `package.json` +```json +"copy-wasm": "cp node_modules/tree-sitter-typescript/tree-sitter-tsx.wasm public && cp node_modules/web-tree-sitter/tree-sitter.wasm public", +"postinstall": "copy-wasm", +``` + Create a parser using the WASM runtime. ```ts import { Language, Parser } from "web-tree-sitter" -import treeSitterWasmUrl from "web-tree-sitter/tree-sitter.wasm?url" -import tsxWasmUrl from "tree-sitter-typescript/tree-sitter-tsx.wasm?url" // Choose typescript or tsx here await Parser.init({ - locateFile() { - return treeSitterWasmUrl + locateFile(scriptName: string) { + return "/public/" + scriptName }, }) const parser = new Parser() -const language = await Language.load(tsxWasmUrl) -parser.setLanguage(typescript) + +const language = await Language.load("/public/tree-sitter-tsx.wasm") +parser.setLanguage(language) ``` +The above example uses the `tsx` grammar, change the `copy-wasm` script and `language.load` path if you'd like to use the `tree-sitter-typescript.wasm` grammar. +Getting the WASM bindings to wokr in the browser can be tricky. For more information, please read the tree-sitter web binding docs: https://github.com/tree-sitter/tree-sitter/blob/master/lib/binding_web/README.md ### Use your parser ```ts From 49f595e3661b7e1876d3a48eb9082aa87537cba5 Mon Sep 17 00:00:00 2001 From: Vlady Veselinov Date: Wed, 22 Oct 2025 03:21:52 +0100 Subject: [PATCH 5/6] fix wasm paths --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ffb8ab4a..c19c3b8b 100644 --- a/README.md +++ b/README.md @@ -48,13 +48,13 @@ import { Language, Parser } from "web-tree-sitter" await Parser.init({ locateFile(scriptName: string) { - return "/public/" + scriptName + return scriptName }, }) const parser = new Parser() -const language = await Language.load("/public/tree-sitter-tsx.wasm") +const language = await Language.load("/tree-sitter-tsx.wasm") parser.setLanguage(language) ``` From 7edd94f6b8c50dd33464d24bdfeaa9077435e052 Mon Sep 17 00:00:00 2001 From: Vlady Veselinov Date: Wed, 22 Oct 2025 03:39:32 +0100 Subject: [PATCH 6/6] Fix typo in README about WASM bindings --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c19c3b8b..9833c0cb 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ parser.setLanguage(language) ``` The above example uses the `tsx` grammar, change the `copy-wasm` script and `language.load` path if you'd like to use the `tree-sitter-typescript.wasm` grammar. -Getting the WASM bindings to wokr in the browser can be tricky. For more information, please read the tree-sitter web binding docs: https://github.com/tree-sitter/tree-sitter/blob/master/lib/binding_web/README.md +Getting the WASM bindings to work in the browser can be tricky. For more information, please read the tree-sitter web binding docs: https://github.com/tree-sitter/tree-sitter/blob/master/lib/binding_web/README.md ### Use your parser ```ts