Skip to content

Instantly share code, notes, and snippets.

@thlorenz
Last active December 14, 2015 14:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thlorenz/5102756 to your computer and use it in GitHub Desktop.
Save thlorenz/5102756 to your computer and use it in GitHub Desktop.
Trying to nail down browser pack input format to support source mapping urls

We'll have an array of files to be included in the bundle as shown in this example.

Except we'll add source map info, so browser-pack can inline this into the bundle.

Current file format

{
    "id": "a1b5af78",
    "source": "console.log(require('./foo')(5))",
    "deps": { "./foo": "b8f69fa5" }
}

File that wants to be source mapped but has no sourcemap field

{
    "id": "a1b5af78",
    "source": "console.log(require('./foo')(5))",
    "deps": { "./foo": "b8f69fa5" },
    "sourceFile": "bar.js"
}

The presence of the sourceFile property tells us that we should include source maps for this file The absence of a sourceMap indicates that no line/column translation is necessary. Therefore the mapping will be one to one (i.e. only an offset is added to each line of the file to indicate where it is inside the bundle)

If the sourceMap is empty "sourceMap": [ ], it should be handled the same way (i.e. no mapping needed)

File that wants to be source mapped and has a sourcemap field

This should only be used if the code that is passed to browser-pack has been transpiled (i.e. from CoffeeScript).

{
    "id": "a1b5af78",
    "source": "console.log(require('./foo')(5))",
    "deps": { "./foo": "b8f69fa5" },
    "sourceFile": "bar.js",
    "sourceMap": [ 
        { "original": { "line":  1, "column": 0 }, "generated": { "line": 4, "column": 0 } },
        { "original": { "line":  2, "column": 3 }, "generated": { "line": 5, "column": 0 } }
        // many more
    ]
}

In this case browser-pack will iterate through the sourceMaps and offset lines and columns according to where the file was included in the bundle.

External source map generator

IMO this logic should not be part of browser-pack directly. We should use an external module that consumes an array of source maps (or none) and a line/column offset for all files and returns the base64 encoded string to be appended to the bundle.

The consumed array of this module would look similar to this:

  [ { sourceFile: 'foo.js', sourceMap: [ .. ], lineOffset: 2, columnOffset: 0 },
    { sourceFile: 'bar.js', /* no sourcemap */, lineOffset: 20, columnOffset: 10 }
    // many more
  ]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment