January 22nd, 2013
Peter van der Zee recently wrote about source maps; in particular, he detailed the ways that he has found them lacking and proposes changes to the source map spec that he believes would improve them to support his use cases.
What Peter wants is to generate and consume source maps at runtime in the browser, and develop without an extra compilation and refresh step. When you are editing and compiling sources inside of the browser, rather than sources on a file server, you can't point to a remote URL where the original source (the source before the compilation step) is located. This is problematic because source URLs are exactly what source maps require, as defined by the spec.
Peter then outlines proposed changes to the source map spec to support his need
for "dynamic" source maps. First, adding a new comment pragma
sourceMapping=<source map JSON blob>. Second, to include the full original
source(s) inside the source map rather than including URLs pointing to the
location of the original source(s).
Peter is a very intelligent person, and I have been following his blog for more than two years (you should follow, too), but I believe that he jumped the gun by leaping from his use cases to proposing changes to the source map spec. The one doesn't lead to the other because his use case is already supported by the current specification as-is.
How? Data URLs. Encode the original source(s) as data URLs in the
sources list, and encode the whole source map as a data URL in
//@ sourceMappingURL comment pragma appended to the generated source. By
doing this, both the whole source map and complete original source(s) are
attached directly to the generated source. This accomplishes the same goals that
Peter's solution does: you can dynamically generate source maps inside your
browser environment (presumably with the
mozilla/source-map library) and all of the resources can
exist inside your development environment instead of on a remote server.
The benefits to using data URLs are:
No changes to the source map spec. No waiting on debates, or for the spec authors to come to an agreement. Furthermore, existing tooling around source maps will continue to work, including integration with browsers' built in debuggers.
No need for yet another comment pragma. We already have
//@ sourceURL, and
//@line. Some are only supported by
some tools, and some browsers; only one is part of a standard; two either are
or should be deprecated. This is confusing enough already, and once we add
another comment pragma it will be there forever.
It is optional to include the full text of the original source(s) in the source map. Developers who are using a more "traditional" development cycle will not be negatively affected by having a larger source map to download.
Encoding and decoding data URLs is simple. Browser environments already have
window.atob to encode and decode base 64
respectively, which makes integration with whatever tooling you are using
that much easier.
If I have overlooked any facet of Peter's use cases that isn't supported by using data URLs, I would love to know in the comments.
Come work with me on Firefox Developer Tools on July 8th, 2014
Debugging Web Performance with Firefox DevTools - Velocity 2014 on June 26th, 2014
Beyond Source Maps on March 12th, 2014
Memory Tooling in Firefox Developer Tools in 2014 on March 4th, 2014
Hiding Implementation Details with ECMAScript 6 WeakMaps on January 13th, 2014
Re-evaluate Individual Functions in Firefox Developer Tools' Scratchpad on November 22nd, 2013
Testing Source Maps on October 2nd, 2013
Destructuring Assignment in ECMAScript 6 on August 15th, 2013
My Talk from Front Trends 2013 on June 21st, 2013