mirror of
https://codeberg.org/uzu/strudel
synced 2026-07-29 08:01:50 -04:00
parser viz
This commit is contained in:
@@ -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
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user