Switch code node to use treesitter about motion-canvas HOT 3 CLOSED

Nevermind, we arent getting a nix lezer parser.

from motion-canvas.

https://github.com/tree-sitter/node-tree-sitter
Seems to almost match the api you use already.

from motion-canvas.

Here's a really simple example of using the shell parser from @codemirror/legacy-modes (There's a few more parsers there than the 15 you've mentioned):

import {StreamLanguage} from '@codemirror/language';
import {shell} from '@codemirror/legacy-modes/mode/shell';
import {Code, LezerHighlighter, makeScene2D} from '@motion-canvas/2d';
import {createRef, waitFor} from '@motion-canvas/core';

const Bash = new LezerHighlighter(StreamLanguage.define(shell).parser);

export default makeScene2D(function* (view) {
  const code = createRef<Code>();

  view.add(
    <Code
      ref={code}
      fontSize={28}
      highlighter={Bash}
      fontFamily={'JetBrains Mono, monospace'}
      offsetX={-1}
      x={-600}
      code={`\
#!/bin/bash

# start the server in HTTPS mode
cd web
sudo node ../server.js 443 'yes' >> ../node.log &

# here is how to stop the server
for pid in \`ps aux | grep 'node ../server.js' | awk '{print $2}'\` ; do
  sudo kill -9 $pid 2> /dev/null
done

exit 0
`}
    />,
  );

  yield* waitFor(0.6);
});

https://github.com/tree-sitter/node-tree-sitter
Seems to almost match the api you use already.

The rendering part of Motion Canvas doesn't run on Node.js. You'd need the WASM bindings.
The API is similar because Lezer is based on Treesitter.

I'm closing this issue because I'm not interested in working on this in the context of this repository.

The CodeHighlighter interface is independent of Lezer and can be used to integrate any parser/highlighter solution into Motion Canvas without changing our code. When designing the interface, I made sure to account for Treesitter as that's what I used for prototyping.

Sadly, their documentation (both the wasm and node.js one) does not describe how to highlight the parsed tree so I gave up on the implementation and went for Lezer.

If anyone wants to give Treesitter a try, they can easily do that in their own npm package because, again, it's just a matter of implementing an interface - no changes to this repo necessary. Once a package like this exists I'll gladly talk about upstreaming it here.

from motion-canvas.