shubhamverma1811 / vscode-react-outline

A VSCode extension support for symbols and outlines for a React file.

Hey there, I'm Shubham Verma! 👋

A passionate self-taught Frontend Developer from India.

• 💻 Currently I am Senior Software Engineer - I at GeekyAnts
• 💬 Ask me about JavaScript, React
• 😄 Pronouns: He / Him
• ⚡ Fun fact: I can solve Rubik's Cube in under 2 minutes 😎

Recent Blog posts

• I tried to build a rate-limiter using Go and Redis
• Build literally anything
• My Software Journey in 2024
• My Tech Progress
• Resizing Images in Markdown and using it in Next.JS with Image Component.

Connect with me

Twitter | LinkedIn | Cal.com

Languages and Tools:

Languages

Frontend

Backend

Databases

vscode-react-outline's Issues

Native JSX parsing with TS

Hey! Your extension has two downsides:

• it creates second tree, instead of integrating nodes into one united
• it does unnecessary parsing work, so when you type a character, outline gets evaluated twice: TypeScript builtin support & your extension

When sticky scroll came out (that uses outline), I started to investigate how to make TypeScript see these JSX nodes natively, and I came with an easy solution:

https://github.com/zardoy/typescript-vscode-plugins/blob/ec33dc3f71ac0e92815aa845d7f56eaeacf6b5dd/typescript/src/getPatchedNavTree.ts#L22

You can check it, it works natively like a charm! (I've been using it for a few weeks)

I even made a post about it

I'd say that I contribute, but I think it'd fun to you to play with it and you can copy it yourself!
However I didn't add support for JSXFragment, but that's three lines of code!

Feel free to ask any kind of questions, I'd be happy to help you!

Support for Nested Tags

Handle JSX in props

The following condition is not handled, and it needs to be parsed.

<Input 
renderRight={<Box>...</Box>}
{...props}
/>

or

<Input 
renderRight={() => <Box>...</Box>}
{...props}
/>

Nested Expression Support

Handle Call Expressions - map,filter

The following code wont be parsed as of now.

All the JSX should be detected i.e Hey and Box, in this case

{[].map(i => {
 
 if(someThing) {
  return <Hey/>
}

  <Box>...</Box>
}}

Better Regex Support to identify the tags