Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can i generate some TSX/JSX code somehow? #240

Open
Anonyfox opened this issue Feb 5, 2018 · 14 comments
Open

Can i generate some TSX/JSX code somehow? #240

Anonyfox opened this issue Feb 5, 2018 · 14 comments
Labels
domain: manipulation domain: navigation
Milestone
Version Next

Comments

@Anonyfox
Copy link

Anonyfox commented Feb 5, 2018

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?
@dsherret
Copy link
Owner

dsherret commented Feb 5, 2018

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.

@Anonyfox Anonyfox mentioned this issue Feb 8, 2018
Closed
dsherret added a commit that referenced this issue Feb 12, 2018
@dsherret
feat: #240 - Wrap JSX nodes.
aa4d70a
@dsherret dsherret added blocked and removed blocked labels Feb 12, 2018
@dsherret
Copy link
Owner

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.

@dsherret
Copy link
Owner

Ok, #249 is implemented and these nodes are wrapped and available now. I'll implement manipulating them soon.

@Anonyfox
Copy link
Author

we can't wait to use it! keep up the good work! :)

@dsherret
Copy link
Owner

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 :)

@dsherret
Copy link
Owner

dsherret commented Feb 28, 2018 •
edited

@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.

dsherret added a commit that referenced this issue Mar 16, 2018
@dsherret
feat: #240 - Ability to add/insert JSX attributes.
e2b4a99
dsherret added a commit that referenced this issue Mar 17, 2018
@dsherret
feat: #240 - Ability to remove JSX attributes.
1bf7642
dsherret added a commit that referenced this issue Apr 3, 2018
@dsherret
chore: #240 - Starting to work on inserting JSX elements.
3edf5f9 
Seems like there's more foundational work I need to do before finishing this.
dsherret added a commit that referenced this issue May 14, 2019
@dsherret
feat: #240 - Wrap JSX nodes.
a2b6fc1
dsherret added a commit that referenced this issue May 14, 2019
@dsherret
feat: #240 - Ability to add/insert JSX attributes.
7466b4c
dsherret added a commit that referenced this issue May 14, 2019
@dsherret
feat: #240 - Ability to remove JSX attributes.
61a711f
dsherret added a commit that referenced this issue May 14, 2019
@dsherret
chore: #240 - Starting to work on inserting JSX elements.
6fda58e 
Seems like there's more foundational work I need to do before finishing this.
@prodrammer
Copy link

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!

@dsherret dsherret added this to the Version Next milestone Sep 28, 2019
@dsherret
Copy link
Owner

@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.

@virus2016
Copy link

Hey @dsherret,

Any update on this one? Could we help in any way?

P.S. Our whole team loves this project too!

@Seanmclem
Copy link

@dsherret Any update on this one?

@dsherret dsherret mentioned this issue Dec 17, 2021
Closed
@IvanCardi
Copy link

@dsherret Hi, any update?

@stefan--
Copy link

stefan-- commented Oct 1, 2022

@dsherret how might we help you?

@itsdouges
Copy link

I've been able to write this using https://ts-morph.com/manipulation/transforms - while it's not ideal it works.

@favna favna mentioned this issue Nov 25, 2022
Closed
3 tasks
@Nilegfx
Copy link

Nilegfx commented Feb 28, 2023

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
domain: manipulation domain: navigation
Projects
None yet
Milestone
Version Next
Development

No branches or pull requests
9 participants
@Anonyfox @Nilegfx @prodrammer @dsherret @stefan-- @itsdouges @Seanmclem @virus2016 @IvanCardi