search

baruchvlz / resq

React Element Selector Query (RESQ) - Query React components and children by component name or HTML selector
MIT License
174 stars 28 forks source link

Add sourcemap support #17

Open christian-bromann opened 5 years ago

christian-bromann commented 5 years ago

This might be a bit tricky but definitely solve able. It would be cool if resq could fetch the sourcemaps of the bundled react files and allow to fetch the original component names even though the code is minified.

mvasin commented 4 years ago

At least it would be nice to add to readme the uglify-js and/or terser settings that would keep full component names but minify the rest of the code. I'm still figuring them out.

abhinaba-ghosh commented 4 years ago

any update on this ticket?

christian-bromann commented 4 years ago

@abhinaba-ghosh please see the "help wanted" label. If this is something you like to have please get involved and propose a PR for this. Thanks!

gabriel-kohen-by commented 3 years ago

@christian-bromann can you give a bit guidance on how to go about this? This issue is preventing us from using Webdriver.IO with libraries built on popular npm packages such as Material UI.

christian-bromann commented 3 years ago

@gabriel-kohen-by while there are no contributing docs I am sure you will be fine by aligning to the given code style of this project. Then you need to enable resq to pull the sourcemaps file and use it to parse original component names from the actual source. How to go about this in detail: I don't know. I would look into other sourcemap parsers.

gabriel-kohen-by commented 3 years ago

Cheers @christian-bromann. Let me know if it's the best place to collaborate on this. Just a bit of a background, we are creating UIs on abstraction library on top of Material UI(React) and running test using Webdriver.IO and utilizing SauceLabs accounts to run these. All apps and libraries are built with Typescript. I was looking at React Standalone tool(our apps run inside of iFrame so I cannot use the Chrome extension) and I see the columns in no names I could recognize: image I also tried running on iFrame, resq 1.10 and running commands in the console to see what it finds as names: allElements=resq.resq$$('*',root) Almost all the components have a composite name object which I'm not sure what to make of: image Finally on the Source Map approach, I understand we could potentially use a source map parser which will give us mapping between the transpiled code and the original (Typescript) code, but I'm not sure how would you start parsing the original code to map to what component tree resq find. I'm sure I'm missing something obvious here and it would be great if you can confirm the approach and suggest a way forward. Thank you so much for your guidance!

TheBit commented 6 months ago

Hi, any updates on this?