@jridgewell/sourcemap-codec

What is @jridgewell/sourcemap-codec?

The @jridgewell/sourcemap-codec npm package is a library designed to encode and decode the mappings of a source map, which is a data format that provides a way to associate the original source code with the generated code. This is particularly useful for debugging minified code or transpiled code in a browser's developer tools.

What are @jridgewell/sourcemap-codec's main functionalities?

Encoding source map mappings

This feature allows you to encode an array of source map mappings into a compact string representation, which can be used in a source map file.

const { encode } = require('@jridgewell/sourcemap-codec');
const mappings = [
  [1, 2, 3, 4, 5],
  [0, 0, 0, 0, 0],
  [1, 2, 3, 4, 5, 6]
];
const encodedMappings = encode(mappings);

Decoding source map mappings

This feature allows you to decode a string representation of source map mappings back into an array format, which can be manipulated or inspected in JavaScript.

const { decode } = require('@jridgewell/sourcemap-codec');
const encodedMappings = 'AAAA,CAAC,CAAC,EAAE,CAAC;';
const decodedMappings = decode(encodedMappings);

Other packages similar to @jridgewell/sourcemap-codec

source-map

The 'source-map' package provides functionality to generate and consume source maps. It offers a more comprehensive set of features for working with source maps, including the ability to create new source maps, and it can be considered more feature-rich compared to @jridgewell/sourcemap-codec, which focuses specifically on encoding and decoding.

sourcemap-codec

The 'sourcemap-codec' package is similar to @jridgewell/sourcemap-codec and is actually the original package that @jridgewell/sourcemap-codec is based on. It provides the same core functionality of encoding and decoding source map mappings. The @jridgewell/sourcemap-codec package may include optimizations or additional features not present in the original.

README

sourcemap-codec

Encode/decode the mappings property of a sourcemap.

Why?

Sourcemaps are difficult to generate and manipulate, because the mappings property – the part that actually links the generated code back to the original source – is encoded using an obscure method called Variable-length quantity. On top of that, each segment in the mapping contains offsets rather than absolute indices, which means that you can't look at a segment in isolation – you have to understand the whole sourcemap.

This package makes the process slightly easier.

Installation

npm install sourcemap-codec

Usage

import { encode, decode } from 'sourcemap-codec';

var decoded = decode( ';EAEEA,EAAE,EAAC,CAAE;ECQY,UACC' );

assert.deepEqual( decoded, [
	// the first line (of the generated code) has no mappings,
	// as shown by the starting semi-colon (which separates lines)
	[],

	// the second line contains four (comma-separated) segments
	[
		// segments are encoded as you'd expect:
		// [ generatedCodeColumn, sourceIndex, sourceCodeLine, sourceCodeColumn, nameIndex ]

		// i.e. the first segment begins at column 2, and maps back to the second column
		// of the second line (both zero-based) of the 0th source, and uses the 0th
		// name in the `map.names` array
		[ 2, 0, 2, 2, 0 ],

		// the remaining segments are 4-length rather than 5-length,
		// because they don't map a name
		[ 4, 0, 2, 4 ],
		[ 6, 0, 2, 5 ],
		[ 7, 0, 2, 7 ]
	],

	// the final line contains two segments
	[
		[ 2, 1, 10, 19 ],
		[ 12, 1, 11, 20 ]
	]
]);

var encoded = encode( decoded );
assert.equal( encoded, ';EAEEA,EAAE,EAAC,CAAE;ECQY,UACC' );

License

MIT

Changelog

1.4.9

• Performance boost (#86)
• Add native ESM entry point (#85)