parser viz

This commit is contained in:
Felix Roos
2023-12-30 16:43:08 +01:00
parent 4d332cd544
commit a39b4c1637
5 changed files with 162 additions and 12 deletions
+2 -1
View File
@@ -24,4 +24,5 @@ dist-ssr
*.sw?
public/tree-sitter.wasm
public/tree-sitter-haskell.wasm
public/tree-sitter-haskell.wasm
public/tree-sitter-haskell_mine.wasm
+3 -2
View File
@@ -6,8 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tree sitter test</title>
</head>
<body>
<div id="app"></div>
<body style="padding: 0; margin: 0">
<textarea id="code" style="width: 100%"></textarea>
<div id="graph"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
+45 -5
View File
@@ -1,11 +1,51 @@
import Parser from 'web-tree-sitter';
import toDot from 'jgf-dot';
import { Graphviz } from '@hpcc-js/wasm';
console.log('Parser', Parser);
const graphvizLoaded = Graphviz.load();
const parserLoaded = loadParser();
const graphContainer = document.getElementById('graph');
Parser.init().then(async () => {
const textarea = document.getElementById('code');
textarea.value = 'd1 $ s "hh(3,8)"';
textarea.addEventListener('input', (e) => renderGraph(e.target.value, graphContainer));
renderGraph(textarea.value, graphContainer);
function walk(node, branch = [0], parent) {
let nodes = [];
let edges = [];
const current = { id: branch.join('-'), label: node.type };
nodes.push(current);
parent && edges.push({ source: parent.id, target: current.id });
if (node.children.length) {
node.children.forEach((child, j) => {
const { nodes: childNodes, edges: childEdges } = walk(child, branch.concat([j]), current);
nodes = nodes.concat(childNodes || []);
edges = edges.concat(childEdges || []);
});
}
return { nodes, edges };
}
async function renderGraph(code, container) {
const parser = await parserLoaded;
const tree = parser.parse(code);
const { nodes, edges } = walk(tree.rootNode);
const graphviz = await graphvizLoaded;
const dot = toDot({
graph: {
nodes,
edges,
},
});
const svg = await graphviz.layout(dot, 'svg', 'dot');
container.innerHTML = svg;
}
async function loadParser() {
await Parser.init();
const parser = new Parser();
const Lang = await Parser.Language.load('tree-sitter-haskell.wasm');
parser.setLanguage(Lang);
const tree = parser.parse('d1 $ s "hh*3"');
console.log(tree.rootNode.toString());
});
return parser;
}
+5 -1
View File
@@ -7,14 +7,18 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"postinstall": "cp node_modules/web-tree-sitter/tree-sitter.wasm public"
"postinstall": "cp node_modules/web-tree-sitter/tree-sitter.wasm public",
"parse": "tree-sitter parse -D ./test.hs"
},
"devDependencies": {
"tree-sitter": "^0.20.6",
"tree-sitter-cli": "^0.20.8",
"tree-sitter-javascript": "^0.20.1",
"vite": "^5.0.8"
},
"dependencies": {
"@hpcc-js/wasm": "^2.15.3",
"jgf-dot": "^1.1.1",
"web-tree-sitter": "^0.20.8"
}
}