jridgewell / gen-mapping

@jridgewell/gen-mapping

Generate source maps

gen-mapping allows you to generate a source map during transpilation or minification. With a source map, you're able to trace the original location in the source file, either in Chrome's DevTools or using a library like @jridgewell/trace-mapping.

You may already be familiar with the source-map package's SourceMapGenerator. This provides the same addMapping and setSourceContent API.

Installation

npm install @jridgewell/gen-mapping

Usage

import { GenMapping, addMapping, setSourceContent, toEncodedMap, toDecodedMap } from '@jridgewell/gen-mapping';

const map = new GenMapping({
  file: 'output.js',
  sourceRoot: 'https://example.com/',
});

setSourceContent(map, 'input.js', `function foo() {}`);

addMapping(map, {
  // Lines start at line 1, columns at column 0.
  generated: { line: 1, column: 0 },
  source: 'input.js',
  original: { line: 1, column: 0 },
});

addMapping(map, {
  generated: { line: 1, column: 9 },
  source: 'input.js',
  original: { line: 1, column: 9 },
  name: 'foo',
});

assert.deepEqual(toDecodedMap(map), {
  version: 3,
  file: 'output.js',
  names: ['foo'],
  sourceRoot: 'https://example.com/',
  sources: ['input.js'],
  sourcesContent: ['function foo() {}'],
  mappings: [
    [ [0, 0, 0, 0], [9, 0, 0, 9, 0] ]
  ],
});

assert.deepEqual(toEncodedMap(map), {
  version: 3,
  file: 'output.js',
  names: ['foo'],
  sourceRoot: 'https://example.com/',
  sources: ['input.js'],
  sourcesContent: ['function foo() {}'],
  mappings: 'AAAA,SAASA',
});

Smaller Sourcemaps

Not everything needs to be added to a sourcemap, and needless markings can cause signficantly larger file sizes. gen-mapping exposes maybeAddSegment/maybeAddMapping APIs that will intelligently determine if this marking adds useful information. If not, the marking will be skipped.

import { maybeAddMapping } from '@jridgewell/gen-mapping';

const map = new GenMapping();

// Adding a sourceless marking at the beginning of a line isn't useful.
maybeAddMapping(map, {
  generated: { line: 1, column: 0 },
});

// Adding a new source marking is useful.
maybeAddMapping(map, {
  generated: { line: 1, column: 0 },
  source: 'input.js',
  original: { line: 1, column: 0 },
});

// But adding another marking pointing to the exact same original location isn't, even if the
// generated column changed.
maybeAddMapping(map, {
  generated: { line: 1, column: 9 },
  source: 'input.js',
  original: { line: 1, column: 0 },
});

assert.deepEqual(toEncodedMap(map), {
  version: 3,
  names: [],
  sources: ['input.js'],
  sourcesContent: [null],
  mappings: 'AAAA',
});

Benchmarks

node v18.0.0

amp.js.map
Memory Usage:
gen-mapping: addSegment      5852872 bytes
gen-mapping: addMapping      7716042 bytes
source-map-js                6143250 bytes
source-map-0.6.1             6124102 bytes
source-map-0.8.0             6121173 bytes
Smallest memory usage is gen-mapping: addSegment

Adding speed:
gen-mapping:      addSegment x 441 ops/sec ±2.07% (90 runs sampled)
gen-mapping:      addMapping x 350 ops/sec ±2.40% (86 runs sampled)
source-map-js:    addMapping x 169 ops/sec ±2.42% (80 runs sampled)
source-map-0.6.1: addMapping x 167 ops/sec ±2.56% (80 runs sampled)
source-map-0.8.0: addMapping x 168 ops/sec ±2.52% (80 runs sampled)
Fastest is gen-mapping:      addSegment

Generate speed:
gen-mapping:      decoded output x 150,824,370 ops/sec ±0.07% (102 runs sampled)
gen-mapping:      encoded output x 663 ops/sec ±0.22% (98 runs sampled)
source-map-js:    encoded output x 197 ops/sec ±0.45% (84 runs sampled)
source-map-0.6.1: encoded output x 198 ops/sec ±0.33% (85 runs sampled)
source-map-0.8.0: encoded output x 197 ops/sec ±0.06% (93 runs sampled)
Fastest is gen-mapping:      decoded output


***


babel.min.js.map
Memory Usage:
gen-mapping: addSegment     37578063 bytes
gen-mapping: addMapping     37212897 bytes
source-map-js               47638527 bytes
source-map-0.6.1            47690503 bytes
source-map-0.8.0            47470188 bytes
Smallest memory usage is gen-mapping: addMapping

Adding speed:
gen-mapping:      addSegment x 31.05 ops/sec ±8.31% (43 runs sampled)
gen-mapping:      addMapping x 29.83 ops/sec ±7.36% (51 runs sampled)
source-map-js:    addMapping x 20.73 ops/sec ±6.22% (38 runs sampled)
source-map-0.6.1: addMapping x 20.03 ops/sec ±10.51% (38 runs sampled)
source-map-0.8.0: addMapping x 19.30 ops/sec ±8.27% (37 runs sampled)
Fastest is gen-mapping:      addSegment

Generate speed:
gen-mapping:      decoded output x 381,379,234 ops/sec ±0.29% (96 runs sampled)
gen-mapping:      encoded output x 95.15 ops/sec ±2.98% (72 runs sampled)
source-map-js:    encoded output x 15.20 ops/sec ±7.41% (33 runs sampled)
source-map-0.6.1: encoded output x 16.36 ops/sec ±10.46% (31 runs sampled)
source-map-0.8.0: encoded output x 16.06 ops/sec ±6.45% (31 runs sampled)
Fastest is gen-mapping:      decoded output


***


preact.js.map
Memory Usage:
gen-mapping: addSegment       416247 bytes
gen-mapping: addMapping       419824 bytes
source-map-js                1024619 bytes
source-map-0.6.1             1146004 bytes
source-map-0.8.0             1113250 bytes
Smallest memory usage is gen-mapping: addSegment

Adding speed:
gen-mapping:      addSegment x 13,755 ops/sec ±0.15% (98 runs sampled)
gen-mapping:      addMapping x 13,013 ops/sec ±0.11% (101 runs sampled)
source-map-js:    addMapping x 4,564 ops/sec ±0.21% (98 runs sampled)
source-map-0.6.1: addMapping x 4,562 ops/sec ±0.11% (99 runs sampled)
source-map-0.8.0: addMapping x 4,593 ops/sec ±0.11% (100 runs sampled)
Fastest is gen-mapping:      addSegment

Generate speed:
gen-mapping:      decoded output x 379,864,020 ops/sec ±0.23% (93 runs sampled)
gen-mapping:      encoded output x 14,368 ops/sec ±4.07% (82 runs sampled)
source-map-js:    encoded output x 5,261 ops/sec ±0.21% (99 runs sampled)
source-map-0.6.1: encoded output x 5,124 ops/sec ±0.58% (99 runs sampled)
source-map-0.8.0: encoded output x 5,434 ops/sec ±0.33% (96 runs sampled)
Fastest is gen-mapping:      decoded output


***


react.js.map
Memory Usage:
gen-mapping: addSegment       975096 bytes
gen-mapping: addMapping      1102981 bytes
source-map-js                2918836 bytes
source-map-0.6.1             2885435 bytes
source-map-0.8.0             2874336 bytes
Smallest memory usage is gen-mapping: addSegment

Adding speed:
gen-mapping:      addSegment x 4,772 ops/sec ±0.15% (100 runs sampled)
gen-mapping:      addMapping x 4,456 ops/sec ±0.13% (97 runs sampled)
source-map-js:    addMapping x 1,618 ops/sec ±0.24% (97 runs sampled)
source-map-0.6.1: addMapping x 1,622 ops/sec ±0.12% (99 runs sampled)
source-map-0.8.0: addMapping x 1,631 ops/sec ±0.12% (100 runs sampled)
Fastest is gen-mapping:      addSegment

Generate speed:
gen-mapping:      decoded output x 379,107,695 ops/sec ±0.07% (99 runs sampled)
gen-mapping:      encoded output x 5,421 ops/sec ±1.60% (89 runs sampled)
source-map-js:    encoded output x 2,113 ops/sec ±1.81% (98 runs sampled)
source-map-0.6.1: encoded output x 2,126 ops/sec ±0.10% (100 runs sampled)
source-map-0.8.0: encoded output x 2,176 ops/sec ±0.39% (98 runs sampled)
Fastest is gen-mapping:      decoded output

gen-mapping's Issues

WEBPACK Generating SSR bundle failed Can't import the named export 'put' from non EcmaScript module (only default export is available)

Hi all,

I've started receiving the following error in my gatsby build, it points to these files:

node_modules/@jridgewell/gen-mapping/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.mjs
node_modules/@jridgewell/gen-mapping/gen-mapping.mjs
node_modules/@jridgewell/trace-mapping/dist/trace-mapping.mjs

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't import the named export 'put' from non EcmaScript module (only default export is available)

File: ../../node_modules/@jridgewell/gen-mapping/dist/gen-mapping.mjs

If I delete these files, my build completes successfully. Can you help me understand whether this package has been incorrectly bundled and deployed, or whether i'm missing something in my gatsby configuration to process this?

My gatsby-node.js has the following:

exports.onCreateWebpackConfig = ({ stage, loaders, actions, getConfig }) => {
  if (stage === 'build-javascript' || stage === 'develop') {
    const config = getConfig();
    config.node = {
      fs: 'empty'
    };
    config.resolve.extensions = ['.mjs', '.tsx', '.ts', '.js', '.jsx', '.json'];
    config.module.rules = [
      ...config.module.rules,
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ];
  }
};

and I'm using @jridgewell/[email protected], and @jridgewell/[email protected]

Any help would be greatly appreciated.

import issue with babel

Failed to compile.

./node_modules/@jridgewell/gen-mapping/dist/gen-mapping.mjs
Can't import the named export 'SetArray' from non EcmaScript module (only default export is available)

Facing this issue while trying to run my react project. Tried with v8, v10, v12, v14 and v20 of node, still this issue persist.

Error: No valid exports main found

Started getting this weird error when I run react-native run-ios in my project. It just started happening all of a sudden and I haven't been able to find the root cause.

I tried removing my node_modules and re-installing multiple times. Also cleaned my yarn cache yarn cache clean and removed temp react and metro files rm -rf $TMPDIR/react-* and rm -rf $TMPDIR/metro-*. I also tried to clear my xcode build directory for the project but that didn't help. Also cleared watch man watchman watch-del-all.

So far none of these have helped I see the @jridgewell/gen-mapping directory in my node_modules file so I am not sure what the issue is here.

The error:

internal/modules/cjs/loader.js:621
  throw e;
  ^

Error: No valid exports main found for '/Users/user/project/node_modules/@jridgewell/gen-mapping'
    at resolveExportsTarget (internal/modules/cjs/loader.js:618:9)
    at applyExports (internal/modules/cjs/loader.js:499:14)
    at resolveExports (internal/modules/cjs/loader.js:548:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:650:22)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:948:27)
    at Function.Module._load (internal/modules/cjs/loader.js:854:27)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/user/project/node_modules/@babel/generator/lib/source-map.js:8:19)
    at Module._compile (internal/modules/cjs/loader.js:1128:30) {
  code: 'MODULE_NOT_FOUND'
}

Versions:

• Node 18.15.0
• Yarn 1.17.3
• react-native 0.68.2
• @babel/core 7.12.9
• @babel/runtime 7.12.5

package.json

{
  "name": "project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start --reset-cache",
    "start:local": "dotenv -e .env.local react-native start --reset-cache",
    "start:development": "react-native start",
    "start:production": "react-native start",
    "test": "jest",
    "lint": "eslint",
    "init-data": "sh -ac 'REACT_APP_ENV=local; . ./.env.${REACT_APP_ENV}; node ./scripts/initData.js'",
  },
  "dependencies": {
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@miblanchard/react-native-slider": "^2.2.0",
    "@react-native-firebase/app": "^14.11.0",
    "@react-native-firebase/auth": "^14.11.0",
    "@react-native-firebase/firestore": "^14.11.0",
    "@react-native-firebase/storage": "^14.11.0",
    "@react-native-google-signin/google-signin": "^9.0.2",
    "@react-navigation/core": "^6.2.1",
    "@react-navigation/material-top-tabs": "^6.5.2",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "algoliasearch": "^4.14.1",
    "babel-plugin-inline-import": "^3.0.0",
    "deepmerge": "^4.2.2",
    "dotenv-cli": "^6.0.0",
    "faker": "^4.1.0",
    "firebase-admin": "^11.4.1",
    "getstream": "^8.1.0",
    "lodash": "^4.17.21",
    "metro-config": "^0.74.0",
    "react": "17.0.2",
    "react-instantsearch-hooks": "^6.30.2",
    "react-native": "0.68.2",
    "react-native-activity-feed": "1.1.0",
    "react-native-activity-feed-core": "^1.1.1",
    "react-native-dotenv": "^3.3.1",
    "react-native-geolocation-service": "^5.3.1",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-google-places-autocomplete": "^2.4.1",
    "react-native-image-crop-picker": "^0.35.2",
    "react-native-image-picker": "^4.8.4",
    "react-native-pager-view": "^6.1.2",
    "react-native-paper": "5.0.0-rc.2",
    "react-native-reanimated": "^2.13.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.18.2",
    "react-native-segmented-control-tab": "^4.0.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^13.7.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-native-tab-view": "^3.3.4",
    "react-native-text-input-interactive": "^0.1.3",
    "react-native-vector-icons": "^9.1.0",
    "react-navigation": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "prettier": "^2.7.1",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

gen-mapping is not using latest version of feross/Buffer

I'm using Babel/parser and Babel/generator. And i found out Babel is dependent of gen-mapping.
And it seems somewhere gen-mapping or sourcemap-code is not using the latest feross/Buffer , where feross/Buffer is trying to use global which is fixed in the latest version.
I'm not able to figure out how gen-mapping or sourcemap-codec is using Buffer and what version it using.

A deprecated dependency still exists in package.json

in package.json:

 "dependencies": {
    "@jridgewell/set-array": "^1.0.0",
    "@jridgewell/sourcemap-codec": "^1.4.10",
    "@jridgewell/trace-mapping": "^0.3.9"
  }

but the first one is deprecated