Socket
Socket
Sign inDemoInstall

source-map-js

Package Overview
Dependencies
0
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    source-map-js

Generates and consumes source maps


Version published
Maintainers
1
Install size
114 kB
Created

Package description

What is source-map-js?

The source-map-js npm package is a library for generating and consuming source maps, which are files that map from the transformed source to the original source, enabling the user to see the original source before it was transformed. This is particularly useful for debugging minified code or transpiled code, such as TypeScript or Babel output.

What are source-map-js's main functionalities?

Generating a source map

This feature allows you to generate a source map that describes how the code has been transformed. The code sample is a JSON representation of a source map.

{"version":3,"file":"min.js","names":["bar","baz","n"],"sources":["one.js","two.js"],"sourceRoot":"http://example.com/www/js/","mappings":"CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,MAAM,KACb,IAAI,IAAM,SAAUE,GAClB,OAAOA"}

Consuming a source map

This feature allows you to consume a source map to retrieve the original position of a piece of code. The code sample shows how to use the SourceMapConsumer to get the original position of a code snippet.

const sourceMap = require('source-map-js');
const consumer = new sourceMap.SourceMapConsumer('{"version":3,"sources":["foo.js"],"names":["bar"],"mappings":"AAAA","file":"foo.js"}');
consumer.then(function(consumer) {
  console.log(consumer.originalPositionFor({line: 1, column: 1}));
});

Creating a source map generator

This feature allows you to create a source map generator which can be used to add mappings. The code sample demonstrates how to instantiate a SourceMapGenerator and add a mapping to it.

const sourceMap = require('source-map-js');
const generator = new sourceMap.SourceMapGenerator({
  file: 'min.js',
  sourceRoot: 'http://example.com/www/js/'
});
generator.addMapping({
  generated: { line: 1, column: 0 },
  original: { line: 1, column: 0 },
  source: 'one.js'
});
console.log(generator.toString());

Other packages similar to source-map-js

Changelog

Source

1.0.1

  • Remove cleanComments optimization (#10) @ai

Readme

Source

Source Map JS

NPM

Difference between original source-map:

TL,DR: it's fork of original source-map@0.6, but with perfomance optimizations.

This journey starts from source-map@0.7.0. Some part of it was rewritten to Rust and WASM and API became async.

It's still a major block for many libraries like PostCSS or Webpack for example because they need to migrate the whole API to the async way. This is the reason why 0.6.1 has 2x more downloads than 0.7.3 while it's faster several times.

Downloads count

More important that WASM version has some optimizations in JS code too. This is why community asked to create branch for 0.6 version and port these optimizations but, sadly, the answer was «no». A bit later I discovered the issue created by Ben Rothman (@benthemonkey) with no response at all.

Roman Dvornov (@lahmatiy) wrote a serveral posts (russian, only, sorry) about source-map library in his own Telegram channel. He mentioned the article «Maybe you don't need Rust and WASM to speed up your JS» written by Vyacheslav Egorov (@mraleph). This article contains optimizations and hacks that lead to almost the same performance compare to WASM implementation.

I decided to fork the original source-map and port these optimizations from the article and several others PR from the original source-map.


This is a library to generate and consume the source map format described here.

Docs

Read full docs on GitHub.

FAQs

Last updated on 08 Nov 2021

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc