search

infi-pc / locatorjs

https://www.locatorjs.com
1.43k stars 68 forks source link

feat: NextJS app folder / React Server Components #102

Open infi-pc opened 1 year ago

infi-pc commented 1 year ago

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

Locator does not work in React Server Components (both extension and Babel plugin need JS).

Describe the solution you'd like to see

Create SWC plugin to add support to server components.

Desribe alternate solutions

Additional information

No response

Puliczek commented 1 year ago

+1 :)

senecamanu commented 1 year ago

+1 please

ryota-murakami commented 1 year ago

@infi-pc Hi what's going on about this? I really like LocatorJS while React development, thank you for create the Extension! XHR payload of move route at RSC is not enough to detect component source file?

infi-pc commented 1 year ago

Hi @ryota-murakami

XHR payload of move route at RSC is not enough to detect component source file?

Can I ask what you exactly mean? I haven't seen the source information anywhere I tried. So I believe the only option is to manually add the data-source attributes.

infi-pc commented 1 year ago

Sorry for taking so long with this thing, I started working on a plugin for SWC, but as I don't know Rust very much and I have very little time for it in my free time, it didn't end up well.

If anybody is interested in helping, the only thing that is needed is a plugin to SWC that puts the source info into all JSX tags. Ideally, in a format like this: <path>:<line>:<column> so the resulting JSX would be like <div data-source="/path/to/the/file.jsx:30:4" ... > As the rendered tags are not rehydrated, I assume that the only way to get the source data is to include it in the rendered HTML.

I would then add simple adjustments to the JS parts that recognize this format.

It should be relatively easy for anybody who knows Rust and knows how to work with AST (like Babel plugins) or even created SWC plugins.

Here https://github.com/infi-pc/locatorjs/pull/115/files#diff-46ac577edcc48aa73f95086b8e40ce400845de5c66c6724bad1e525ac3c0b0b2 are some of my drafts and experiments. There should be some hints on how to get the source info in the AST. None of those worked, just because I don't know Rust enough.

leonard-henriquez commented 7 months ago

Hi @infi-pc !

Here #115 (files) are some of my drafts and experiments. There should be some hints on how to get the source info in the AST. None of those worked, just because I don't know Rust enough.

I don't know Rust either but I feel I can achieve this with ChatGPT if I have a bit more context. I'd be happy to try ! Could you comment slightly more what you already have ? Thank you !

infi-pc commented 7 months ago

hey @leonard-henriquez, basically the only thing I need is a working SWC plugin that adds "data-source" attribute to every jsx element. Like <div data-source="/thisfile.tsx:10.10" > where content of the data source is <fullPathToSourceFile>:<lineOfTheJSXElement>:<columeOfTheJSXElement>

stobias123 commented 7 months ago

I've been giving this a try for a couple weeks on and off... also had some trouble. Created a discussion here on nextjs repo to see if maybe they can help