ts-morph
ts-morph copied to clipboard
dsherret
Can i generate some TSX/JSX code somehow?
Let's say I want to generate a function which returns some TSX, like:
export default function Layout({ children }) {
return (
<html>
<head>
<title>my website</title>
</head>
<body>
<div id='root'>{children}</div>
<script src='/assets/bundle.js'></script>
</body>
</html>
);
}
how would I define the function body? The only method I have found for now is using a multiline string and call setBodyText() with it. Also, modifying eg: stuff within the <head></head> in a clean way would be really awesome! Is there any support for TSX planned?
Hey @Anonyfox, JSX/TSX support is definitely planned along with the features you mentioned. The lack of JSX support really stands out in this report.
At the current moment, you can still navigate JSX nodes, but there won't be any nice helper methods. For manipulation you can insert or replace text by using what's outlined on this page, but it won't be that nice to use.
I'll up the priority on getting JSX support because a lot of those other nodes that aren't wrapped could probably wait a little bit.
Unfortunately this is now blocked by #249 because there's a new supported language feature called jsx fragments that's only in 2.7.1. I'll try to get #249 done sometime this week.
The manipulation part has not been implemented yet though. That could be implemented in parallel with #249.
Ok, #249 is implemented and these nodes are wrapped and available now. I'll implement manipulating them soon.
Hey @Anonyfox, I'll have at least a setBodyText method up late tomorrow. Today I did some internal refactoring for this (basically, I'm trying to use code-block-writer more internally and it's leading to a lot of cleanup. I also added some features to it.).
I'm going to be pretty busy over the next two weeks, but after that I'll be able to work on this full steam ahead :)
@Anonyfox there's now a .setBodyText(...) and .setBodyTextInline(...) method on JsxElement (in v8.2.0). I'll slowly add other methods (like adding/inserting/deleting jsx attributes and converting elements to self closing elements and vice versa), but it might take a few weeks because I'll be busy the next two weeks.
This project is amazing! Great work! I'm wondering when this feature will be complete / if there is anything I can do to help. TSX files are all the rage these days. My project needs to load and manipulate them almost exclusively. LMK!
@ryanhaney thanks for the compliments!
Yeah, I had stopped working on this because I wasn't sure about how to deal with these whitespace JSXText elements: https://ts-ast-viewer.com/#code/MYewdgzgLgBFCm0YF4YB4CiAbeBbeYUAfALABQMl62eBsA9KWWvTfoUQNxA
I think I know now, but it's a bit of work. I'm going to up the priority on this one and start work on it right away.
Hey @dsherret,
Any update on this one? Could we help in any way?
P.S. Our whole team loves this project too!
I've been able to write this using https://ts-morph.com/manipulation/transforms - while it's not ideal it works.
@dsherret is there any updates on this? if there is away to do it even if it is not ideal or missing some fature, could you please point me out to the docs or at least an example?
