Skip to content

Instantly share code, notes, and snippets.

@verhovsky
Last active October 27, 2022 11:16
Show Gist options
  • Save verhovsky/a04c7256da13797e312acd0a8afd9023 to your computer and use it in GitHub Desktop.
Save verhovsky/a04c7256da13797e312acd0a8afd9023 to your computer and use it in GitHub Desktop.
tree-sitter WASM grammar in browser issue
npm install
npx tree-sitter build-wasm node_modules/tree-sitter-html
npx tree-sitter build-wasm node_modules/tree-sitter-toml
npx tree-sitter build-wasm node_modules/tree-sitter-swift
npx tree-sitter build-wasm node_modules/tree-sitter-agda
npx tree-sitter build-wasm node_modules/tree-sitter-jsdoc
npx tree-sitter build-wasm node_modules/tree-sitter-ruby
npx tree-sitter build-wasm node_modules/tree-sitter-python
npx tree-sitter build-wasm node_modules/tree-sitter-cpp
npx tree-sitter build-wasm node_modules/tree-sitter-bash
npx tree-sitter build-wasm node_modules/tree-sitter-go
# No grammar.js file
#npx tree-sitter build-wasm node_modules/tree-sitter-typescript
npx tree-sitter build-wasm node_modules/tree-sitter-julia
npx tree-sitter build-wasm node_modules/tree-sitter-java
npx tree-sitter build-wasm node_modules/tree-sitter-json
npx tree-sitter build-wasm node_modules/tree-sitter-regex
npx tree-sitter build-wasm node_modules/tree-sitter-php
npx tree-sitter build-wasm node_modules/tree-sitter-c-sharp
npx tree-sitter build-wasm node_modules/tree-sitter-javascript
npx tree-sitter build-wasm node_modules/tree-sitter-c
npx tree-sitter build-wasm node_modules/tree-sitter-verilog
npx tree-sitter build-wasm node_modules/tree-sitter-css
npx tree-sitter build-wasm node_modules/tree-sitter-rust
npx tree-sitter build-wasm node_modules/tree-sitter-ql
npx tree-sitter build-wasm node_modules/tree-sitter-tsq
npx tree-sitter build-wasm node_modules/tree-sitter-embedded-template
# No grammar.js file
#npx tree-sitter build-wasm node_modules/tree-sitter-ocaml
npx tree-sitter build-wasm node_modules/tree-sitter-scala
# These are missing because npm install'ing them failed
#npx tree-sitter build-wasm node_modules/tree-sitter-fluent
#npx tree-sitter build-wasm node_modules/tree-sitter-haskell
npm start
<!doctype html>
<html class="no-js" lang="">
<head>
</head>
<body>
<script src="/main.js"></script>
</body>
</html>
import Parser from 'web-tree-sitter'
// NOTE: Top-level await is not available in Safari until Safari 15
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#browser_compatibility
await Parser.init()
const Agda = await Parser.Language.load('tree-sitter-agda.wasm')
const Bash = await Parser.Language.load('tree-sitter-bash.wasm')
const C = await Parser.Language.load('tree-sitter-c.wasm')
const CSharp = await Parser.Language.load('tree-sitter-c_sharp.wasm')
const Cpp = await Parser.Language.load('tree-sitter-cpp.wasm')
const Css = await Parser.Language.load('tree-sitter-css.wasm')
const EmbeddedTemplate = await Parser.Language.load('tree-sitter-embedded_template.wasm')
const Go = await Parser.Language.load('tree-sitter-go.wasm')
// undefined symbol '__cxa_atexit'
// const Html = await Parser.Language.load('tree-sitter-html.wasm')
const Java = await Parser.Language.load('tree-sitter-java.wasm')
const Javascript = await Parser.Language.load('tree-sitter-javascript.wasm')
const Jsdoc = await Parser.Language.load('tree-sitter-jsdoc.wasm')
const Json = await Parser.Language.load('tree-sitter-json.wasm')
const Julia = await Parser.Language.load('tree-sitter-julia.wasm')
// No grammar.js file
// const Ocaml = await Parser.Language.load('tree-sitter-ocaml.wasm')
const Php = await Parser.Language.load('tree-sitter-php.wasm')
const Python = await Parser.Language.load('tree-sitter-python.wasm')
// Segfaults
// const Ql = await Parser.Language.load('tree-sitter-ql.wasm')
const Regex = await Parser.Language.load('tree-sitter-regex.wasm')
const Ruby = await Parser.Language.load('tree-sitter-ruby.wasm')
const Rust = await Parser.Language.load('tree-sitter-rust.wasm')
const Scala = await Parser.Language.load('tree-sitter-scala.wasm')
const Swift = await Parser.Language.load('tree-sitter-swift.wasm')
const Toml = await Parser.Language.load('tree-sitter-toml.wasm')
const Tsq = await Parser.Language.load('tree-sitter-tsq.wasm')
// No grammar.js file
// const Typescript = await Parser.Language.load('tree-sitter-typescript.wasm')
// Segfaults
// const Verilog = await Parser.Language.load('tree-sitter-verilog.wasm')
const parser = new Parser()
parser.setLanguage(Python)
console.log('it loaded')
console.log(parser.parse('print("hello world")'))
console.log(parser.parse('print("hello world")').rootNode.toString())
{
"name": "treesitterissue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve --open"
},
"type": "module",
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"copy-webpack-plugin": "^10.2.0",
"tree-sitter-agda": "^1.3.1",
"tree-sitter-bash": "^0.19.0",
"tree-sitter-c": "^0.20.2",
"tree-sitter-c-sharp": "^0.20.0",
"tree-sitter-cpp": "^0.20.0",
"tree-sitter-css": "^0.19.0",
"tree-sitter-embedded-template": "^0.19.0",
"tree-sitter-go": "^0.19.1",
"tree-sitter-html": "^0.19.0",
"tree-sitter-java": "^0.19.1",
"tree-sitter-javascript": "^0.19.0",
"tree-sitter-jsdoc": "^0.19.0",
"tree-sitter-json": "^0.20.0",
"tree-sitter-julia": "^0.19.0",
"tree-sitter-ocaml": "^0.19.0",
"tree-sitter-php": "^0.19.0",
"tree-sitter-python": "^0.19.0",
"tree-sitter-ql": "^1.0.0",
"tree-sitter-regex": "^0.19.0",
"tree-sitter-ruby": "^0.19.0",
"tree-sitter-rust": "^0.20.1",
"tree-sitter-scala": "^0.19.0",
"tree-sitter-swift": "^0.3.4",
"tree-sitter-toml": "^0.5.1",
"tree-sitter-tsq": "^0.19.0",
"tree-sitter-typescript": "^0.20.1",
"tree-sitter-verilog": "^0.20.2",
"url": "^0.11.0",
"web-tree-sitter": "^0.19.4",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.1",
"tree-sitter-cli": "^0.20.7"
}
}
import path from 'path'
import { fileURLToPath } from 'url'
import CopyPlugin from 'copy-webpack-plugin'
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
export default {
entry: './index.js',
// mode: 'production',
mode: 'development',
devtool: 'eval-source-map', // show source maps
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
fallback: {
// url: require.resolve('url/'),
path: false,
fs: false
}
},
experiments: {
topLevelAwait: true
},
plugins: [
new CopyPlugin({
patterns: [
'node_modules/web-tree-sitter/tree-sitter.wasm',
'tree-sitter-html.wasm',
'tree-sitter-toml.wasm',
'tree-sitter-swift.wasm',
'tree-sitter-agda.wasm',
'tree-sitter-jsdoc.wasm',
'tree-sitter-ruby.wasm',
'tree-sitter-python.wasm',
'tree-sitter-cpp.wasm',
'tree-sitter-bash.wasm',
'tree-sitter-go.wasm',
//'tree-sitter-typescript.wasm',
'tree-sitter-julia.wasm',
'tree-sitter-java.wasm',
'tree-sitter-json.wasm',
'tree-sitter-regex.wasm',
'tree-sitter-php.wasm',
'tree-sitter-c_sharp.wasm',
'tree-sitter-javascript.wasm',
'tree-sitter-c.wasm',
'tree-sitter-verilog.wasm',
'tree-sitter-css.wasm',
'tree-sitter-rust.wasm',
'tree-sitter-ql.wasm',
'tree-sitter-tsq.wasm',
'tree-sitter-embedded_template.wasm',
//'tree-sitter-ocaml.wasm',
'tree-sitter-scala.wasm',
'index.html',
]
})
],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment