CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-webpack-sources

Source code handling classes for webpack and other build tools with optional source map support

Pending
Overview
Eval results
Files

source-implementations.mddocs/

Source Implementations

Different types of source representations for various use cases, from simple raw text to complex source-mapped content.

Capabilities

RawSource

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()); // false

OriginalSource

Represents 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"

SourceMapSource

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)

Source Type Definition

Type alias for source value that can be either string or Buffer.

/** Source content can be either string or Buffer */
type SourceValue = string | Buffer;

Streaming Support

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

docs

base-source.md

caching-performance.md

index.md

source-implementations.md

source-manipulation.md

utility-classes.md

tile.json