Wednesday 7 June 2017

How to generate a sourcemap for an extracted code snippet

I have these template files I'm extracting code from. They're a lot like a vue template file someView.html:

<title>Editor View</title>

<config>
  <window width=512 height=512 target="main" />
  <load pre="default" modCode=true modCss=true />
</config>

<body>
  <h1>Editor</h1>
  ...
</body>

<style>
  h1 {
     background: black;
     color: white;
     /*...*/
  }
</style>

<script>
  let test = 'confirmed';
  console.log(test);
</script>

Obviously this isn't passing any html linter tests but all I am doing is extracting the contents of each tag and using them to construct a page on the fly in Electron. The only issue is, I'd like that console.log() or any errors produced by the script, to show this file in the inspector via sourcemapping, as well as point to this file when inspecting css rules.

I assume I need to use source-map's SourceNode, and construct a map that way, but I can't figure it out from the docs given that this whole system is centered around transpiling, not just copying segments, and I'm not too experienced with this. I'm unclear where each node should begin and end if I need to provide line and column number...

Is there a simple way to do this without building an ast or whatever? Or a library that'll do it? I have yet to find any, but I'm not sure what to even search for.



via Danie Clawson

No comments:

Post a Comment