@volar/source-map

What is @volar/source-map?

@volar/source-map is a package designed to handle source maps, which are used to map the transformed code back to the original source code. This is particularly useful in debugging and development environments where you need to trace errors or understand the flow of the code.

What are @volar/source-map's main functionalities?

Creating Source Maps

This feature allows you to create a new source map. The code sample demonstrates how to generate a source map and add a mapping to it.

const { SourceMapGenerator } = require('@volar/source-map');

const map = new SourceMapGenerator({ file: 'output.js' });
map.addMapping({
  generated: { line: 1, column: 5 },
  source: 'input.js',
  original: { line: 1, column: 5 },
  name: 'example'
});
console.log(map.toString());

Parsing Source Maps

This feature allows you to parse an existing source map. The code sample demonstrates how to use the SourceMapConsumer to read and interpret a raw source map.

const { SourceMapConsumer } = require('@volar/source-map');

const rawSourceMap = {
  version: 3,
  file: 'min.js',
  sources: ['one.js', 'two.js'],
  names: ['foo', 'bar'],
  mappings: 'AAgBC,SAAQ,CAAEA'
};

SourceMapConsumer.with(rawSourceMap, null, consumer => {
  console.log(consumer.sources);
  console.log(consumer.originalPositionFor({ line: 1, column: 5 }));
});

Combining Source Maps

This feature allows you to combine multiple source maps into one. The code sample demonstrates how to create two source maps and then combine them into a single source map.

const { SourceMapGenerator, SourceMapConsumer } = require('@volar/source-map');

const map1 = new SourceMapGenerator({ file: 'output1.js' });
map1.addMapping({
  generated: { line: 1, column: 5 },
  source: 'input1.js',
  original: { line: 1, column: 5 },
  name: 'example1'
});

const map2 = new SourceMapGenerator({ file: 'output2.js' });
map2.addMapping({
  generated: { line: 2, column: 10 },
  source: 'input2.js',
  original: { line: 2, column: 10 },
  name: 'example2'
});

const combinedMap = SourceMapGenerator.fromSourceMap(new SourceMapConsumer(map1.toString()));
combinedMap.applySourceMap(new SourceMapConsumer(map2.toString()));
console.log(combinedMap.toString());

Other packages similar to @volar/source-map

source-map

The 'source-map' package is a widely-used library for generating and consuming source maps. It provides similar functionalities to @volar/source-map, such as creating, parsing, and combining source maps. However, 'source-map' is more established and has a larger user base.

source-map-support

The 'source-map-support' package provides source map support for stack traces in node.js. While it also deals with source maps, its primary focus is on enhancing error stack traces with source map information, making it slightly different in scope compared to @volar/source-map.

webpack

Webpack is a module bundler that includes built-in support for source maps. While it is not solely focused on source maps, it provides extensive functionalities for generating and managing source maps as part of its bundling process. It is more comprehensive and complex compared to @volar/source-map.

README

@volar/source-map

Provides functionality related to source maps.

API

This package exports a SourceMap class with the following methods:

Params:

• fallbackToAnyMatch(default: false): allow the start and end offsets to come from different mappings.
• filter?: (data: Data) => boolean)(default: undefined): according to mapping: Mapping.data, filter out offsets that do not meet the custom conditions.

Methods:

• toSourceRange(generatedStart: number, generatedEnd: number, fallbackToAnyMatch: boolean, filter?: (data: Data) => boolean): Returns all source start and end offsets for the given generated start and end offsets.

• toGeneratedRange(sourceStart: number, sourceEnd: number, fallbackToAnyMatch: boolean, filter?: (data: Data) => boolean) : Returns all generated start and end offsets for the given source start and end offsets.

• toSourceLocation(generatedOffset: number, filter?: (data: Data) => boolean): Returns all source offsets for a given generated offset.

• toGeneratedLocation(sourceOffset: number, filter?: (data: Data) => boolean): Returns all generated offsets for a given source offset.

Data Structures

Mapping

The Mapping is a tuple that represents a mapping in the source map. It consists of the following elements:

• source: A string representing the source file. This can be undefined.
• sourceOffsets: Offsets in the source code.
• generatedOffsets: Offsets in the generated code.
• data: The data associated with this mapping. The type of this data is generic and can be specified when creating a SourceMap instance.

Here is an example of a Mapping:

let mapping: Mapping<MyDataType> = {
    source: '.../sourceFile.ts',
    sourceOffsets: [10],
    generatedOffsets: [30],
	lengths: [10],
    data: myData,
};

In this example, myData is of type MyDataType, which is the type specified for the SourceMap instance.

Remember to replace MyDataType and myData with actual types and data that are relevant to your project.

License

This project is licensed under the MIT License. See the LICENSE file for more details.