vim-jsx-pretty VS ficusjs-renderers

Consider using dedicated jsx indent plugin like MaxMEllon/vim-jsx-pretty. Vim indent of jsx is by default broken. And ensure additional_vim_regex_highlighting = true in nvim-treesitter config.

If its not working I'd prolly try jsx-pretty, disabling the syntax highlights from it.

I’ve always had issues with treesitter indent, not just with JSX, but for almost every language, so I just straight turn it off. What I do is enable regex highlighting in the treesitter options and use something like https://github.com/MaxMEllon/vim-jsx-pretty for JSX files, I doesn’t override treesitter highlighting but it does provides indentation.

Yep, Treesitter indentation is really real experimental. I had the same problem in JSX when I used it. What I did is use this plugin for JSX files only: https://github.com/MaxMEllon/vim-jsx-pretty

maxmellon/vim-jsx-pretty

Syntax highlighting and language support via the lit-html VSCode extension and vim-jsx-pretty plugin

https://github.com/MaxMEllon/vim-jsx-pretty/blob/6989f1663cc03d7da72b5ef1c03f87e6ddb70b41/after/ftplugin/jsx.vim#L11-L15

I'm particularly fond of the new native JS Web Components which require no build process and are extremely fast and purely client-side. When developed well it can also reduce the bundle size because it can use dynamic imports. I played around with making a SPA out of it and only got frustrated with its lack of React-like JSX. This could be overcome with tagged literals.

This example uses the @ficusjs/renderers package which provides a browser-ready ES module using the htm library.

The hello world example creates a new custom element using the createComponent function and registers it to the hello-world tag. It uses the lit-html renderer (multiple renderers are available) for creating HTML from tagged template literals.