or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

dynamic-imports.mdindex.mdlazy-loading.mdmodule-metadata.mdmodule-names.mdmodule-transformation.md
tile.json

module-names.mddocs/

Module Names

Utilities for generating module names based on file paths and configuration options. This functionality is used to create consistent module identifiers for different module systems.

Capabilities

Module Name Generation

Generate module names based on root options and plugin configuration.

/**
 * Generate module names based on root options and plugin configuration.
 * Returns null if module IDs are disabled.
 */
function getModuleName(
  rootOpts: {
    /** Original filename */
    filename?: string;
    /** Relative filename for module name generation */
    filenameRelative?: string;
    /** Source root directory */
    sourceRoot?: string;
  },
  pluginOpts: PluginOptions
): string | null;

interface PluginOptions {
  /** Explicit module ID to use */
  moduleId?: string;
  /** Whether to generate module IDs */
  moduleIds?: boolean;
  /** Custom function to generate module IDs */
  getModuleId?: (moduleName: string) => string | null | undefined;
  /** Root directory for module names */
  moduleRoot?: string;
}

Usage Examples:

import { getModuleName } from "@babel/helper-module-transforms";

// Basic usage with file path
const moduleName = getModuleName(
  {
    filename: "/project/src/components/Button.js",
    filenameRelative: "src/components/Button.js"
  },
  {
    moduleIds: true,
    moduleRoot: "my-app"
  }
);
// Result: "my-app/src/components/Button"

// With explicit module ID
const explicitName = getModuleName(
  { filename: "/project/src/index.js" },
  {
    moduleId: "my-custom-module",
    moduleIds: true
  }
);
// Result: "my-custom-module"

// With custom module ID function
const customName = getModuleName(
  {
    filename: "/project/src/utils/helpers.js",
    filenameRelative: "src/utils/helpers.js"
  },
  {
    moduleIds: true,
    getModuleId: (name) => name.replace(/\//g, "-")
  }
);
// Result: "src-utils-helpers"

// Disabled module IDs
const noName = getModuleName(
  { filename: "/project/src/index.js" },
  { moduleIds: false }
);
// Result: null

Configuration Details

Module ID Priority

The function follows this priority order for determining module names:

  1. Explicit moduleId - If provided and no custom getModuleId function, uses this directly
  2. Custom getModuleId function - If provided, generates base name and passes it to this function
  3. Generated name - Based on file path, module root, and source root

Path Processing

The generated module name is created by:

  1. Starting with moduleRoot if provided
  2. Adding the relative filename with source root removed
  3. Removing file extension
  4. Normalizing path separators to forward slashes

Path Processing Example:

// Configuration
const rootOpts = {
  filename: "/full/path/project/src/components/Button.tsx",
  filenameRelative: "project/src/components/Button.tsx",
  sourceRoot: "project/"
};

const pluginOpts = {
  moduleIds: true,
  moduleRoot: "my-app"
};

// Processing steps:
// 1. Start with moduleRoot: "my-app"
// 2. Add filenameRelative: "my-app" + "/" + "project/src/components/Button.tsx"
// 3. Remove sourceRoot: "my-app/src/components/Button.tsx"  
// 4. Remove extension: "my-app/src/components/Button"
// 5. Normalize separators: "my-app/src/components/Button"

const result = getModuleName(rootOpts, pluginOpts);
// Result: "my-app/src/components/Button"

Custom Module ID Function

The getModuleId function receives the generated base name and can return:

  • String - Use this as the final module name
  • null/undefined - Fall back to the generated name
  • Falsy - Fall back to the generated name
const pluginOpts = {
  moduleIds: true,
  getModuleId: (moduleName: string) => {
    // Transform paths to use dashes instead of slashes
    if (moduleName.includes('/')) {
      return moduleName.replace(/\//g, '-');
    }
    // For simple names, add a prefix
    return `pkg-${moduleName}`;
  }
};

// "src/components/Button" → "src-components-Button"
// "utils" → "pkg-utils"

Backward Compatibility

For Babel 7 compatibility, the function also accepts a combined options format:

// Babel 7 style (deprecated but supported)
const legacyName = getModuleName(
  {
    filename: "/project/src/index.js",
    // Plugin options can be mixed into root options
    moduleId: "legacy-module",
    moduleIds: true
  },
  {} // Empty plugin options
);

Note: This legacy format is deprecated and will be removed in Babel 8.