locatorjs
locatorjs copied to clipboard
infi-pc
feat: NextJS app folder / React Server Components
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
- 🤷 don't use server components
Additional information
No response
@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?
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.
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.
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 !
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>
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
