CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dmg-builder

Utilities to build DMG files for macOS applications, used by electron-builder.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

dmg-customization.mddocs/

DMG Customization

Comprehensive DMG appearance and content customization including backgrounds, icons, window positioning, file layouts, and visual styling. Provides the core functionality for creating professional-looking macOS application installers.

Capabilities

DMG Customization Engine

The main function for applying customization settings to DMG files using the Python dmgbuild library.

/**
 * Apply comprehensive customization to DMG file
 * Handles backgrounds, icons, window layout, compression, and content positioning
 * @param config - Complete DMG builder configuration
 * @returns Promise resolving to boolean indicating success
 */
function customizeDmg(config: DmgBuilderConfig): Promise<boolean>;

interface DmgBuilderConfig {
  /** Path to the .app bundle being packaged */
  appPath: string;
  /** Output path for the generated DMG file */
  artifactPath: string;
  /** Volume name for the mounted DMG */
  volumeName: string;
  /** DMG appearance and behavior specification */
  specification: DmgOptions;
  /** MacPackager instance for resource access */
  packager: MacPackager;
}

Usage Examples:

import { customizeDmg } from "dmg-builder";

const config = {
  appPath: "/path/to/MyApp.app",
  artifactPath: "/output/MyApp-1.0.0.dmg", 
  volumeName: "MyApp 1.0.0",
  specification: {
    background: "/path/to/background.tiff",
    iconSize: 80,
    window: { 
      position: { x: 100, y: 400 },
      size: { width: 600, height: 400 }
    },
    contents: [
      { path: "/path/to/MyApp.app", x: 150, y: 200, type: "file" },
      { path: "/Applications", x: 450, y: 200, type: "link" }
    ]
  },
  packager: macPackager
};

const success = await customizeDmg(config);

Background Processing

Intelligent background image processing with support for automatic background detection and format conversion.

/**
 * Compute appropriate background image path for DMG
 * Auto-detects background.tiff or background.png in build resources
 * @param packager - Platform packager with access to build resources
 * @returns Promise resolving to background image path
 */
function computeBackground(packager: PlatformPackager<any>): Promise<string>;

Background Detection Priority:

  1. background.tiff in build resources directory
  2. background.png in build resources directory
  3. Default template background (templates/background.tiff)

Usage Examples:

import { computeBackground } from "dmg-builder";

// Automatic background detection
const backgroundPath = await computeBackground(packager);

// Manual background processing with retina support
const processedBackground = await transformBackgroundFileIfNeed(
  "/path/to/background.png",
  tmpDir
);

Image Dimension Analysis

Precise image dimension detection using macOS sips tool for accurate window sizing.

/**
 * Extract image dimensions using macOS sips command
 * Provides accurate pixel dimensions for background images
 * @param background - Path to image file (TIFF, PNG, JPG, etc.)
 * @returns Promise resolving to width and height in pixels
 * @throws Error if sips fails or cannot parse dimensions
 */
function getImageSizeUsingSips(background: string): Promise<{width: number, height: number}>;

Usage Examples:

import { getImageSizeUsingSips } from "dmg-builder";

// Get dimensions for window auto-sizing
const { width, height } = await getImageSizeUsingSips("/path/to/background.tiff");

// Auto-size window to background image
const windowConfig = {
  position: { x: 400, y: Math.round((1440 - height) / 2) }, // Center vertically
  size: { width, height }
};

DMG Build Configuration

Complete Build Configuration Interface

/**
 * Complete DMG build configuration for dmgbuild Python library
 * Includes all visual and structural customization options
 */
interface DmgBuildConfig {
  /** DMG volume title */
  title: string;
  /** Path to DMG icon file */
  icon?: string | null;
  /** Path to badge icon overlay */
  "badge-icon"?: string | null;
  /** Path to background image */
  background?: string | null;
  /** Background color (hex) when no background image */
  "background-color"?: string | null;
  /** Icon size in pixels */
  "icon-size"?: number | null;
  /** Text size for icon labels (points) */
  "text-size"?: number | null;
  /** DMG window configuration */
  window?: {
    position?: { x?: number; y?: number };
    size?: { width?: number; height?: number };
  };
  /** DMG format (UDZO, UDRO, UDBZ, etc.) */
  format?: string;
  /** Filesystem type (HFS+, APFS) */
  filesystem?: string;
  /** Compression level (0-9) */
  "compression-level"?: number | null;
  /** Path to license file */
  license?: string | null;
  /** File and folder layout configuration */
  contents?: Array<{
    /** Path to file/directory to include */
    path: string;
    /** X position in DMG window */
    x: number;
    /** Y position in DMG window */
    y: number;
    /** Display name (optional) */
    name?: string;
    /** Item type */
    type?: "file" | "link" | "position";
    /** Hide file extension */
    hide_extension?: boolean;
    /** Hide item from view */
    hidden?: boolean;
  }>;
}

Content Layout Configuration

Detailed configuration for positioning files and folders within the DMG window.

Content Types:

  • file: Regular files and applications
  • link: Symbolic links (commonly /Applications)
  • position: Invisible position markers

Usage Examples:

const contents = [
  // Application positioned on left
  {
    path: "/path/to/MyApp.app",
    x: 130,
    y: 220,
    name: "MyApp.app",
    type: "file"
  },
  // Applications folder link on right
  {
    path: "/Applications", 
    x: 410,
    y: 220,
    type: "link"
  },
  // Additional files
  {
    path: "/path/to/ReadMe.txt",
    x: 270,
    y: 320,
    name: "Read Me",
    type: "file"
  },
  // Hidden positioning element
  {
    path: "/path/to/invisible", 
    x: 500,
    y: 100,
    type: "position",
    hidden: true
  }
];

Customization Features

Visual Styling Options

  • Icon Size: Configurable icon size (typically 64-128 pixels)
  • Text Size: Icon label text size (10-16 points, default 12)
  • Background: Custom background images with retina support
  • Background Color: Solid color backgrounds (hex format)
  • Window Position: Custom DMG window position on screen
  • Window Size: Custom DMG window dimensions

Advanced Layout Features

  • Precise Positioning: Pixel-perfect positioning of all DMG contents
  • Custom Names: Override display names for files and folders
  • Visibility Control: Hide extensions, hide items completely
  • Link Creation: Automatic symbolic link creation (e.g., to /Applications)
  • Multi-file Support: Support for multiple files, folders, and links

Compression and Format Options

  • Format Options:
    • UDZO: Compressed (default)
    • UDRO: Read-only uncompressed
    • UDBZ: Highly compressed (bzip2)
    • ULFO: Compressed (LZFSE)
  • Compression Levels: 0-9 compression intensity
  • Filesystem: HFS+ (default) or APFS support

Python Integration

DMG Builder uses the Python dmgbuild library for advanced DMG creation:

Python Execution

// Internal implementation uses Python subprocess
const pythonPath = process.env.PYTHON_PATH || "python3";
await exec(pythonPath, [
  path.join(getDmgVendorPath(), "run_dmgbuild.py"),
  "-s", settingsFile,
  volumeName,
  artifactPath
]);

Environment Variables

  • PYTHON_PATH: Override Python executable path
  • ELECTRON_BUILDER_COMPRESSION_LEVEL: Set default compression level
  • PYTHONIOENCODING: Forced to "utf8" for proper character handling

Error Handling and Validation

Configuration Validation

  • Icon Text Size: Must be between 10-16 points (defaults to 12)
  • Background Conflicts: Cannot specify both background image and backgroundColor
  • Required Fields: Validates presence of essential configuration fields
  • Path Validation: Ensures referenced files exist and are accessible

Runtime Error Handling

  • Python Execution: Falls back from python3 to python if needed
  • File Access: Graceful handling of missing or inaccessible files
  • Format Validation: Validates DMG format and compression settings
  • Memory Management: Proper cleanup of temporary files and resources

The customization system provides comprehensive control over DMG appearance while maintaining robust error handling and intelligent defaults for simplified usage.

Install with Tessl CLI

npx tessl i tessl/npm-dmg-builder

docs

dmg-building.md

dmg-customization.md

error-handling.md

index.md

license-management.md

volume-operations.md

tile.json