Source code handling classes for webpack and other build tools with optional source map support
—
Different types of source representations for various use cases, from simple raw text to complex source-mapped content.
Represents source code without source map information. The simplest source implementation.
/**
* Source code without source map
* @param value - The source code as string or Buffer
* @param convertToString - If true, forces Buffer to be converted to string
*/
class RawSource extends Source {
constructor(value: string | Buffer, convertToString?: boolean);
/** Returns true if the source represents binary data */
isBuffer(): boolean;
/** Streams source chunks for processing */
streamChunks(
options: StreamChunksOptions,
onChunk: OnChunk,
onSource: OnSource,
onName: OnName
): GeneratedSourceInfo;
}Usage Examples:
const { RawSource } = require("webpack-sources");
// Text source
const textSource = new RawSource("console.log('Hello World');");
console.log(textSource.source()); // "console.log('Hello World');"
console.log(textSource.size()); // 27
console.log(textSource.isBuffer()); // false
// Buffer source
const bufferSource = new RawSource(Buffer.from("binary data", "utf8"));
console.log(bufferSource.isBuffer()); // true
console.log(bufferSource.buffer()); // <Buffer 62 69 6e 61 72 79 20 64 61 74 61>
// Force buffer to string conversion
const convertedSource = new RawSource(Buffer.from("test"), true);
console.log(convertedSource.isBuffer()); // falseRepresents source code that is a copy of the original file. Automatically creates column mappings when requested.
/**
* Source code copy of original file with automatic column mapping
* @param value - The source code as string or Buffer
* @param name - The filename of the original source code
*/
class OriginalSource extends Source {
constructor(value: string | Buffer, name: string);
/** Returns the filename of the original source */
getName(): string;
/** Streams source chunks with column mappings */
streamChunks(
options: StreamChunksOptions,
onChunk: OnChunk,
onSource: OnSource,
onName: OnName
): GeneratedSourceInfo;
}Usage Examples:
const { OriginalSource } = require("webpack-sources");
const source = new OriginalSource(
"function hello() {\n console.log('Hello');\n}",
"hello.js"
);
console.log(source.getName()); // "hello.js"
console.log(source.source()); // "function hello() {\n console.log('Hello');\n}"
// Generate source map with column mappings
const map = source.map({ columns: true });
console.log(map.sources); // ["hello.js"]
console.log(map.file); // "hello.js"Represents source code with an existing source map, optionally with additional source map for the original source.
/**
* Source code with existing source map support
* @param value - The source code as string or Buffer
* @param name - The filename of the original source code
* @param sourceMap - The source map for the source code
* @param originalSource - Optional original source code
* @param innerSourceMap - Optional source map for the original source
* @param removeOriginalSource - Remove original source from final map
*/
class SourceMapSource extends Source {
constructor(
value: string | Buffer,
name: string,
sourceMap?: string | RawSourceMap | Buffer,
originalSource?: string | Buffer,
innerSourceMap?: string | RawSourceMap | Buffer,
removeOriginalSource?: boolean
);
/** Returns constructor arguments as buffers for serialization */
getArgsAsBuffers(): [
Buffer,
string,
Buffer,
Buffer | undefined,
Buffer | undefined,
boolean | undefined
];
/** Streams source chunks with source map support */
streamChunks(
options: StreamChunksOptions,
onChunk: OnChunk,
onSource: OnSource,
onName: OnName
): GeneratedSourceInfo;
}Usage Examples:
const { SourceMapSource } = require("webpack-sources");
// Simple source with source map
const sourceMapSource = new SourceMapSource(
"console.log('compiled');",
"output.js",
{
version: 3,
sources: ["input.js"],
names: [],
mappings: "AAAA",
file: "output.js"
}
);
console.log(sourceMapSource.source()); // "console.log('compiled');"
const map = sourceMapSource.map();
console.log(map.sources); // ["input.js"]
// Complex source with inner source map
const complexSource = new SourceMapSource(
"var a=1;console.log(a);", // minified code
"bundle.js",
bundleSourceMap, // source map from bundler
"const a = 1;\nconsole.log(a);", // original unminified code
originalSourceMap // source map from TypeScript compiler
);
// Get serializable arguments
const args = complexSource.getArgsAsBuffers();
// Can be used to recreate: new SourceMapSource(...args)Type alias for source value that can be either string or Buffer.
/** Source content can be either string or Buffer */
type SourceValue = string | Buffer;All source implementations support streaming for efficient processing of large sources.
interface StreamChunksOptions {
/** Include source content in chunks */
source?: boolean;
/** Mark as final source */
finalSource?: boolean;
/** Include column information */
columns?: boolean;
}
interface GeneratedSourceInfo {
/** Final generated line number */
generatedLine?: number;
/** Final generated column number */
generatedColumn?: number;
/** Source file name */
source?: string;
}
type OnChunk = (
chunk: string | undefined,
generatedLine: number,
generatedColumn: number,
sourceIndex: number,
originalLine: number,
originalColumn: number,
nameIndex: number
) => void;
type OnSource = (
sourceIndex: number,
source: string | null,
sourceContent?: string
) => void;
type OnName = (nameIndex: number, name: string) => void;Usage Example:
const { OriginalSource } = require("webpack-sources");
const source = new OriginalSource("line1\nline2\nline3", "test.js");
source.streamChunks(
{ columns: true },
(chunk, genLine, genCol, srcIdx, origLine, origCol, nameIdx) => {
console.log(`Chunk: "${chunk}" at ${genLine}:${genCol}`);
},
(srcIdx, src, content) => {
console.log(`Source ${srcIdx}: ${src}`);
},
(nameIdx, name) => {
console.log(`Name ${nameIdx}: ${name}`);
}
);Install with Tessl CLI
npx tessl i tessl/npm-webpack-sources