Better Source Map Support

[capaj]

stack trace we get in the browser points to transpiled code, what we need is to get a stack for the real source code. This will be super useful for creating an editor plugin which would be able to navigate to the exact spot, where the error occurred.
Any idea how we could do that @guybedford ?

[capaj]

I will try source-map package from mozilla, but I don't know where I can find the source map of the failed modules

[guybedford]

@capaj you could add a custom post-translate hook to the loader that reads load.metadata.sourceMap and store it in a cache somewhere?

[capaj]

@guybedford how would I do that? I could have my own loading plugin, but it wouldn't be convenient to force everyone to write ! at the end of their imports/requires just for me to be able to register a post-translate hook.

Is there a way to add a translate hook for all js files without actually writing a regular js plugin?

[guybedford]

@capaj, yes you can always hook the loader directly -

var systemTranslate = System.translate;
System.translate = function(load) {
  return systemTranslate.call(this, load)
  .then(function(translated) {
    sourceMapCache[load.name] = load.metadata.sourceMap;
    return translated;
  });
};

[capaj]

@guybedford that looks trivial, I didn't think it would be this easy. Will try that ASAP.

edit: it isn't as trivial-load.metadata.sourceMap; is undefined for each module loaded-unfortunately. Source map is actually inlined, so it is present only in the source string. I tried adding an option

"sourceMap": "both",

to my babelOptions, but that didn't help.

[capaj]

@guybedford I've tried inspecting load.metadata.sourceMap on on few places in the SystemJS and every time I tried value was undefined. I even tried to comment out https://github.com/systemjs/systemjs/blob/9ed38dd94f52eefa1b623d8c2b8623a92b480b2a/lib/esm.js#L39 in the desperation. Always undefined.
Currently the only way to get source maps for me is to rewrite babelTranspile function like this https://gist.github.com/capaj/a95aa599a963972cd9de
That way I get all sourceMaps I need. Unfortunately this won't do. Do you have some better idea?

[guybedford]

@capaj load.metadata.sourceMap is only set when using plugins or when using a transpiler to load the file. Normal module loads (AMD / CommonJS / global) do not have this value set. Also make sure you check the sourceMap value after running the original SystemJS translate as it will only be set by that function itself.

[capaj]

@guybedford thats not what I have been seeing. I have been trying it with https://github.com/capaj/jspm-react and in there, I have at least six files which transpile with babel and their load.metadata.sourceMap is undefined.

Let me show you on a special branch. Just a moment....

[guybedford]

@capaj yes you are correct. This will only happen in the 0.17 version when we use https://github.com/systemjs/plugin-babel. Apologies for sending you down a wrong path here for now.

[capaj]

@guybedford so you're working on a babel plugin for systemjs? That would be allright. I can try it with that plugin.

Never the less it is a shame we can't get the sourcemaps even for built in transpilers. I hope you don't mind me opening a bug in systemjs for this.

Back to babel plugin:
There is just one small concern I have- does this mean we would have to write our requires as app.js! as opposed to app or app.js'?

Thanks for clarification.

[guybedford]

The built in transpilers are being deprecated for 0.17. Loaders are set via config - see https://github.com/systemjs/systemjs/blob/master/docs/overview.md#plugin-loaders.

[capaj]

no need for that systemjs bug then. Awesome. I will try the babel-plugin, don't let me distract you from building that 0.17 version. Thanks a lot