HACKER Q&A
📣 jztan

How do you relate rendered HTML to the TypeScript file it came from?


Let's say we have a any web app (React, Next, whatevr framework. It has a App.tsx file and Button.tsx file. We start the local development server and use puppeteer to extract the content. You can use whatever frameworks, source maps, tools, etc. How would you take that string input and figure out the line number where the typescript actually occurred?


  👤 jtchang Accepted Answer ✓
If you have source mapping you can do basically what C compilers perform which is symbol mapping. If you are trying to map the HTML content to source you have to "tag" each of the steps in the process so you can figure out where the content came from.

👤 austin-cheney
You don’t.

This is where framework nonsense gets you in trouble. If you are troubleshooting in that way you are basically stuck doing a shift+ctrl+f through the entirety of a project string searching for something the resembles the HTML output of the code hoping the result you find is actually the result you need. Nonsense.

The reason why it works that way is because you are trying to find where certain content is generated from code, but that isn’t how the framework works. The framework is a generic solution for how to write code, an architecture in a box, so it solves basic functional concerns with content as an input. It then compiles your content input from something friendly to you, something that pretends to look like HTML into DOM instructions with events attached.

If instead the code is just a collection of functions that generate the DOM artifacts directly, without compiling from something unrelated, then it’s just a matter of organizing your functions into files by content type. Then you simply go to the correct file and look through the functions associated with DOM output. In a large project you can find what you need the first time without guessing and without string searches through the code about 80% of the time and another 10-15% of the time that place you first looked suggests the next place you should look.