@jridgewell/source-map
Advanced tools
Package description
The @jridgewell/source-map package is designed for creating, parsing, and manipulating source maps, which are files that map from the transformed source to the original source, enabling the browser to reconstruct the original source and present it to the developer. This is particularly useful for debugging minified code or code compiled from languages like TypeScript.
Generating a source map
This feature allows you to generate a source map by specifying the version, the output file name, the sources involved, the names used in the mappings, and the mappings themselves. The mappings detail how segments of the source are transformed and correspond to the generated code.
{"version":3,"file":"out.js","sources":["foo.js","bar.js"],"names":["src","maps","are","fun"],"mappings":"AAgBC,SAAQ,CAAEA"}Parsing a source map
This feature enables the parsing of a source map from a string. It's useful for further manipulation or analysis of the source map, such as extracting information about the original sources or mappings.
const sourceMap = require('@jridgewell/source-map');
let parsedMap = sourceMap.parse('{"version":3,"sources":["foo.js"],"names":[],"mappings":"AAAA;AACA;AACA"}');Adding and removing mappings
This demonstrates how to add and remove mappings from a source map. This is useful for dynamic manipulation of the source map, such as when merging source maps or making adjustments to the mappings.
const generator = new sourceMap.SourceMapGenerator({file: "out.js"});
generator.addMapping({generated: {line: 1, column: 0}, original: {line: 1, column: 0}, source: "foo.js"});
generator.removeMapping({generated: {line: 1, column: 0}, source: "foo.js"});The 'source-map' package provides similar functionalities for generating, parsing, and manipulating source maps. It is one of the most popular and widely used source map libraries. Compared to @jridgewell/source-map, it might offer a broader API surface and has been around for a longer time, making it more mature in some aspects.
source-map-js is a fork of the original 'source-map' library, intended to provide improvements and optimizations over the original. It aims to be fully API-compatible with 'source-map', offering an alternative with potentially better performance or bug fixes. The choice between this and @jridgewell/source-map might come down to specific needs regarding performance and API compatibility.
Readme
Packages
@jridgewell/trace-mappingand@jridgewell/gen-mappinginto the familiar source-map API
This isn't the full API, but it's the core functionality. This wraps @jridgewell/trace-mapping and @jridgewell/gen-mapping implementations.
npm install @jridgewell/source-map
TODO
import { SourceMapConsumer } from '@jridgewell/source-map';
const smc = new SourceMapConsumer({
version: 3,
names: ['foo'],
sources: ['input.js'],
mappings: 'AAAAA',
});
Transforms a SourceMapGenerator into a SourceMapConsumer.
const smg = new SourceMapGenerator();
const smc = SourceMapConsumer.fromSourceMap(map);
smc.originalPositionFor({ line: 1, column: 0 });
const smc = new SourceMapConsumer(map);
smc.originalPositionFor({ line: 1, column: 0 });
const smc = new SourceMapConsumer(map);
smc.mappings; // AAAA
const smc = new SourceMapConsumer(map);
smc.allGeneratedpositionsfor({ line: 1, column: 5, source: "baz.ts" });
// [
// { line: 2, column: 8 }
// ]
This implementation currently does not support the "order" parameter. This function can only iterate in Generated order.
const smc = new SourceMapConsumer(map);
smc.eachMapping((mapping) => {
// { source: 'baz.ts',
// generatedLine: 4,
// generatedColumn: 5,
// originalLine: 4,
// originalColumn: 5,
// name: null }
});
const smc = new SourceMapConsumer(map);
smc.generatedPositionFor({ line: 1, column: 5, source: "baz.ts" });
// { line: 2, column: 8 }
const smc = new SourceMapConsumer(map);
smc.hasContentsOfAllSources();
// true
const smc = new SourceMapConsumer(map);
smc.generatedPositionFor("baz.ts");
// "export default ..."
Returns the source map's version
import { SourceMapGenerator } from '@jridgewell/source-map';
const smg = new SourceMapGenerator({
file: 'output.js',
sourceRoot: 'https://example.com/',
});
Transform a SourceMapConsumer into a SourceMapGenerator.
const smc = new SourceMapConsumer();
const smg = SourceMapGenerator.fromSourceMap(smc);
This method is not implemented yet
const smg = new SourceMapGenerator();
smg.addMapping({
generated: { line: 1, column: 0 },
source: 'input.js',
original: { line: 1, column: 0 },
name: 'foo',
});
const smg = new SourceMapGenerator();
smg.setSourceContent('input.js', 'foobar');
const smg = new SourceMapGenerator();
smg.toJSON(); // { version: 3, names: [], sources: [], mappings: '' }
const smg = new SourceMapGenerator();
smg.toJSON(); // "{version:3,names:[],sources:[],mappings:''}"
const smg = new SourceMapGenerator();
smg.toDecodedMap(); // { version: 3, names: [], sources: [], mappings: [] }
This implementation has some differences with source-map and source-map-js.
SourceMapConsumer.prototype.eachMapping()
order argumentSourceMapGenerator.prototype.applySourceMap()
FAQs
Packages @jridgewell/trace-mapping and @jridgewell/gen-mapping into the familiar source-map API
The npm package @jridgewell/source-map receives a total of 12,783,891 weekly downloads. As such, @jridgewell/source-map popularity was classified as popular.
We found that @jridgewell/source-map demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.