dsherret / dsherret/ts-morph

FR: allow access to typeArguments in JsxOpeningElement and JsxSelfClosingElement nodes

Open
#1,339 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.2k
Forks
238
Avg merge
2m
Merged PRs (30d)
1

Description

First off, just want to say that I've been enjoying the ts-morph API quite a bit in my recent work to implement some React component API migration codemods for [Blueprint](https://github.com/palantir/blueprint). ts-morph is a nice library 👍🏽

**Is your feature request related to a problem? Please describe.**

One bit which tripped me up a for a little while was trying to access type arguments on JSX elements. Support for this syntax was added in TS 2.9 (according to [this `typescript.d.ts` diff](https://github.com/microsoft/TypeScript/commit/79e5e79ef7724066889fbce97e9e6d6db4e746b5#diff-09aca484cb59b23385986c9ddc32542cdb85cb3cee5b6348a8cba40d03440e71)):

```ts
import React from "react";

class Select extends React.Component<{ data: T }> {
// ...
}

const MySelect = () => (
/>
// ^^^^^^^^ this thing
);
```

Type arguments are accessible on ts-morph nodes if I get the underlying compiler node:

```ts
const el: JsxOpeningElement = ...

el.compilerNode.typeArguments // ts.NodeArray | undefined
```

It seems like the only option to manipulate these type arguments right now is to replace the text of the tag name node. For example, if I wanted to change `string` to `number` in the example above:

```ts
el.getTagNameNode().replaceWithText("Select");
```

This works, but is not super elegant.

**Describe the solution you'd like**

It would be nice to recognize `JsxOpeningElement`s and `JsxSelfClosingElement`s as `TypeArgumentedNode`s, so we could do something like:

```ts
el.getTypeArguments().forEach(a => el.removeTypeArgument(a));
el.addTypeArgument("number");

// or
el.replaceTypeArguments(["number"]);
```

**Describe alternatives you've considered**

See `replaceWithText()` example above

Contributor guide

Open the contributing guide

Research direction

Start by locating the JsxOpeningElement and JsxSelfClosingElement wrappers and the TypeArgumentedNode entry point, then inspect how compilerNode.typeArguments is represented. Done means both JSX node kinds expose the requested type-argument access and mutation operations described in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
compilers
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.