@prantlf/convert-source-map

Converts a source-map from/to different formats and allows adding/changing properties.

Changes made in this fork:

• Remove all Node.js and NPM dependencies to allow usage in a web browser.
• Support uri encoded source maps to fully comply with RFC 2397.
• Let a synchronous or asynchronous function for reading the source map be specified by the caller.

Methods fromMapFileComment and fromMapFileSource have an additional required parameter, otherwise the API and minium requirements are the same as for the original package.

Synopsis

1var convert = require('@prantlf/convert-source-map');
2
3var json = convert
4  .fromComment('//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnVpbGQvZm9vLm1pbi5qcyIsInNvdXJjZXMiOlsic3JjL2Zvby5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIvIn0=')
5  .toJSON();
6
7var modified = convert
8  .fromComment('//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnVpbGQvZm9vLm1pbi5qcyIsInNvdXJjZXMiOlsic3JjL2Zvby5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIvIn0=')
9  .setProperty('sources', [ 'SRC/FOO.JS' ])
10  .toJSON();
11
12console.log(json);
13console.log(modified);

1{"version":3,"file":"build/foo.min.js","sources":["src/foo.js"],"names":[],"mappings":"AAAA","sourceRoot":"/"}
2{"version":3,"file":"build/foo.min.js","sources":["SRC/FOO.JS"],"names":[],"mappings":"AAAA","sourceRoot":"/"}

Installation

This module can be installed in your project using NPM, PNPM or Yarn. Make sure, that you use Node.js version 0.10 or newer.

1npm i @prantlf/convert-source-map
2pnpm i @prantlf/convert-source-map
3yarn add @prantlf/convert-source-map

API

fromObject(obj)

Returns source map converter from given object.

fromJSON(json)

Returns source map converter from given json string.

fromURI(uri)

Returns source map converter from given uri encoded json string.

fromBase64(base64)

Returns source map converter from given base64 encoded json string.

fromComment(comment)

Returns source map converter from given base64 or uri encoded json string prefixed with //# sourceMappingURL=....

fromMapFileComment(comment, mapFileDir, readMap)

Returns source map converter from given filename by parsing //# sourceMappingURL=filename.

filename must point to a file that is found inside the mapFileDir. Most tools store this file right next to the generated file, i.e. the one containing the source map.

readMap must be a function (filepath), which returns either a string with the source map read from the file synchronously, or a Promise if the source map will be read asynchronously. If readMap returns string, fromMapFileComment will return a source map converter and other methods from its interface will be chainable. If readMap returns a Promise, fromMapFileComment will return a Promise too and the next access to the source map converter will need to be handled asynchronously. The Promise will be either resolved with the source map converter or rejected with an error. The only method required from a Promise instance returned by readMap is then(success, error); not the full standard.

For example, a synchronous way in Node.js:

1var convert = require('@prantlf/convert-source-map');
2var fs = require('fs');
3
4function readMap(filepath) {
5  return fs.readFileSync(filepath, 'utf8');
6}
7
8var json = convert
9  .fromMapFileComment('//# sourceMappingURL=map-file-comment.css.map', '.', readMap)
10  .toJSON();
11console.log(json);

For example, an asynchronous way in Node.js:

1var convert = require('@prantlf/convert-source-map');
2var fs = require('fs');
3
4function readMap(filepath) {
5  return fs.readFile(filepath, 'utf8');
6}
7
8var converter = await convert.fromMapFileComment('//# sourceMappingURL=map-file-comment.css.map', '.', readMap)
9var json = converter.toJSON();
10console.log(json);

For example, an asynchronous way in the browser:

1var convert = require('@prantlf/convert-source-map');
2
3function readMap(url) {
4  return new Promise(function (resolve, reject) {
5    var xhr = new XMLHttpRequest();
6    xhr.open('GET', url, true);
7    xhr.onreadystatechange = onreadystatechange;
8    xhr.send(null)
9
10    function onreadystatechange() {
11      if (xhr.readyState !== 4 return;
12      if (xhr.status === 200) resolve(xhr.responseText);
13      else reject(new Error(xhr.statusText));
14    }
15  });
16}
17
18convert
19  .fromMapFileComment('//# sourceMappingURL=map-file-comment.css.map', '/assets', readMap)
20  .then(function (converter) {
21    var json = converter.toJSON();
22    console.log(json);
23  }, function (error) {
24    console.error(error);
25  });

fromSource(source)

Finds last sourcemap comment in file and returns source map converter or returns null if no source map comment was found.

fromMapFileSource(source, mapFileDir, readMap)

Finds last sourcemap comment in file and returns source map converter or returns null if no source map comment was found.

The sourcemap will be read from the map file found by parsing # sourceMappingURL=file comment. For more info see fromMapFileComment.

toObject()

Returns a copy of the underlying source map.

toJSON([space])

Converts source map to json string. If space is given (optional), this will be passed to JSON.stringify when the JSON string is generated.

toURI()

Converts source map to uri encoded json string.

toBase64()

Converts source map to base64 encoded json string.

toComment([options])

Converts source map to an inline comment that can be appended to the source-file.

By default, the comment is formatted like: //# sourceMappingURL=..., which you would normally see in a JS source file.

When options.encoding == 'uri', the data will be uri encoded, otherwise they will be base64 encoded.

When options.multiline == true, the comment is formatted like: /*# sourceMappingURL=... */, which you would find in a CSS source file.

addProperty(key, value)

Adds given property to the source map. Throws an error if property already exists.

setProperty(key, value)

Sets given property to the source map. If property doesn't exist it is added, otherwise its value is updated.

getProperty(key)

Gets given property of the source map.

removeComments(src)

Returns src with all source map comments removed

removeMapFileComments(src)

Returns src with all source map comments pointing to map files removed.

commentRegex

Provides a fresh RegExp each time it is accessed. Can be used to find source map comments. Deprecated, left for compatibility. Does not comply with RFC 2397.

commentRegex2

Provides a fresh RegExp each time it is accessed. Can be used to find source map comments.

commentRegex3

Breaks down a source map comment into groups: Groups: 1: media type, 2: MIME type, 3: charset, 4: encoding, 5: data.

mapFileCommentRegex

Provides a fresh RegExp each time it is accessed. Can be used to find source map comments pointing to map files.

generateMapFileComment(file, [options])

Returns a comment that links to an external source map via file.

By default, the comment is formatted like: //# sourceMappingURL=..., which you would normally see in a JS source file.

When options.multiline == true, the comment is formatted like: /*# sourceMappingURL=... */, which you would find in a CSS source file.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Lint and test your code.

License

Copyright (c) 2013-2021 Thorsten Lorenz
Copyright (c) 2022 Ferdinand Prantl

Licensed under the MIT license.