CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rollup-plugin-visualizer

Visualize and analyze your Rollup bundle to see which modules are taking up space

Pending
Overview
Eval results
Files

data-types.mddocs/

Data Types and Structures

Core type definitions for module trees, bundle data, and visualization information used throughout the plugin.

import { 
  isModuleTree,
  VisualizerData,
  ModuleTree,
  ModuleTreeLeaf,
  ModuleLengths,
  ModulePart,
  ModuleImport,
  ModuleMeta,
  ModuleUID,
  BundleId,
  SizeKey,
  TemplateType
} from "rollup-plugin-visualizer";

// Internal compression utilities (advanced usage)
import { SizeGetter, createGzipSizeGetter, createBrotliSizeGetter } from "rollup-plugin-visualizer/dist/plugin/compress";
import * as zlib from "zlib";

Capabilities

Visualizer Data Structure

Complete dataset structure containing all information needed for visualization.

/**
 * Complete visualization dataset containing module hierarchy and metadata
 */
interface VisualizerData {
  /** Data format version number */
  version: number;
  /** Module hierarchy tree structure */
  tree: ModuleTree;
  /** Module parts lookup by UID */
  nodeParts: Record<ModuleUID, ModulePart>;
  /** Module metadata lookup by UID */
  nodeMetas: Record<ModuleUID, ModuleMeta>;
  /** Environment information (rollup version, etc.) */
  env: { [key: string]: unknown };
  /** Generation options used */
  options: {
    gzip: boolean;
    brotli: boolean;
    sourcemap: boolean;
  };
}

This is the root data structure that contains all information needed to generate visualizations. It's used internally by the plugin and output by the raw-data template.

Module Tree Structures

Hierarchical tree structures representing the module organization.

/**
 * Tree node containing child modules
 */
interface ModuleTree {
  /** Node name (directory or bundle name) */
  name: string;
  /** Child nodes (can be trees or leaves) */
  children: Array<ModuleTree | ModuleTreeLeaf>;
}

/**
 * Leaf node representing an individual module
 */
interface ModuleTreeLeaf {
  /** Module name (file name) */
  name: string;
  /** Unique identifier for this module */
  uid: ModuleUID;
}

/**
 * Type guard to distinguish between tree nodes and leaf nodes
 * @param mod - Module node to test
 * @returns true if the node is a ModuleTree (has children), false if it's a leaf
 */
function isModuleTree(mod: ModuleTree | ModuleTreeLeaf): mod is ModuleTree;

The tree structure represents the hierarchical organization of modules, where ModuleTree nodes represent directories or logical groupings, and ModuleTreeLeaf nodes represent individual files.

Usage Example:

import { isModuleTree } from "rollup-plugin-visualizer";

function processNode(node: ModuleTree | ModuleTreeLeaf) {
  if (isModuleTree(node)) {
    // Process directory/tree node
    console.log(`Directory: ${node.name} with ${node.children.length} children`);
    node.children.forEach(processNode);
  } else {
    // Process file/leaf node
    console.log(`File: ${node.name} (${node.uid})`);
  }
}

Module Metadata Types

Detailed metadata about individual modules including sizes and relationships.

/**
 * Size measurements for modules in different formats
 */
interface ModuleLengths {
  /** Rendered size in bytes */
  renderedLength: number;
  /** Gzipped size in bytes */
  gzipLength: number;
  /** Brotli compressed size in bytes */
  brotliLength: number;
}

/**
 * Module part with size information and metadata reference
 */
type ModulePart = {
  /** Reference to module metadata */
  metaUid: ModuleUID;
} & ModuleLengths;

/**
 * Import/export relationship between modules
 */
type ModuleImport = {
  /** Target module unique identifier */
  uid: ModuleUID;
  /** Whether this is a dynamic import */
  dynamic?: boolean;
};

/**
 * Complete metadata for a module including relationships
 */
type ModuleMeta = {
  /** Module parts by bundle ID */
  moduleParts: Record<BundleId, ModuleUID>;
  /** Modules that import this module */
  importedBy: ModuleImport[];
  /** Modules imported by this module */
  imported: ModuleImport[];
  /** Whether this is an entry point module */
  isEntry?: boolean;
  /** Whether this is an external module */
  isExternal?: boolean;
  /** Module identifier (file path) */
  id: string;
};

These types capture detailed information about each module, including its size in various formats and its relationships with other modules.

Identifier Types

Type aliases for unique identifiers used throughout the system.

/** Unique identifier for modules */
type ModuleUID = string;

/** Bundle identifier */
type BundleId = string;

/** Size measurement keys */
type SizeKey = "renderedLength" | "gzipLength" | "brotliLength";

Template Types

Available visualization template identifiers.

/** Available visualization template types */
type TemplateType = "sunburst" | "treemap" | "network" | "raw-data" | "list" | "flamegraph";

/** Array of all available template types */
const templates: ReadonlyArray<TemplateType>;

The templates array contains all available template type strings and can be used for validation or UI generation.

Usage Example:

import templates from "rollup-plugin-visualizer/dist/plugin/template-types";

// Validate template choice
function isValidTemplate(template: string): template is TemplateType {
  return templates.includes(template as TemplateType);
}

// Generate UI options
const templateOptions = templates.map(template => ({
  value: template,
  label: template.charAt(0).toUpperCase() + template.slice(1)
}));

Compression Utilities (Advanced)

Internal utilities for calculating compressed sizes of code strings.

/**
 * Function type for calculating size of code strings
 */
type SizeGetter = (code: string) => Promise<number>;

/**
 * Creates a gzip size calculator with custom compression options
 * @param options - zlib compression options
 * @returns Function that calculates gzipped size of code strings
 */
function createGzipSizeGetter(options: zlib.ZlibOptions): SizeGetter;

/**
 * Creates a brotli size calculator with custom compression options
 * @param options - brotli compression options
 * @returns Function that calculates brotli compressed size of code strings
 */
function createBrotliSizeGetter(options: zlib.BrotliOptions): SizeGetter;

These utilities are used internally by the plugin when gzipSize or brotliSize options are enabled. They're exposed for advanced use cases where custom compression analysis is needed.

Usage Example:

import { createGzipSizeGetter, createBrotliSizeGetter } from "rollup-plugin-visualizer/dist/plugin/compress";

// Create custom size getters with specific compression settings
const customGzipSizer = createGzipSizeGetter({ 
  level: 6, // Custom compression level
  windowBits: 15 
});

const customBrotliSizer = createBrotliSizeGetter({
  params: {
    [require('zlib').constants.BROTLI_PARAM_QUALITY]: 4
  }
});

// Use with code strings
const code = "function example() { return 'hello world'; }";
const gzipSize = await customGzipSizer(code);
const brotliSize = await customBrotliSizer(code);

console.log(`Original: ${code.length}, Gzip: ${gzipSize}, Brotli: ${brotliSize}`);

Install with Tessl CLI

npx tessl i tessl/npm-rollup-plugin-visualizer

docs

cli-utility.md

data-types.md

filter-system.md

index.md

plugin-configuration.md

tile.json