evanw/source-map-visualization

Hard to notice relocated breaklines

pushkine opened this issue · 0 comments

Generated code breaklines are only visible when their character is mapped + breakline characters are very slim
This hides potential issues where the origin maps that position differently

Example:

///<reference types="svelte" />
<></>;
import foo from 'bar';
function render() {

	
;
() => (<></>);
return { props: {}, slots: {}, getters: {}, events: {} }}

export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwZWN0ZWQudHN4Iiwic291cmNlcyI6WyJpbnB1dC5zdmVsdGUiXSwic291cmNlc0NvbnRlbnQiOlsiPHNjcmlwdD5cblx0aW1wb3J0IGZvbyBmcm9tICdiYXInO1xuPC9zY3JpcHQ+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7RUFBQTtBQUNDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0FBRHJCO0FBQU87QUFDUixDQUF1QjtBQUN2QjsifQ==

Generated import•Component•from•"foo";↲ ends with a breakline that is hidden in the tool
Origin ╚import•Component•from•"foo";↲ maps that breakline to a different line

That position mismatch is only visible when hovering over the original code, making it easy to glance over had that breakline ended up in a less obvious spot

I'd suggest rendering breaklines at the same width as other characters
Optimally it'd also be great to only hide breaklines when they don't map back where you'd assume they should