or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

array-iteration-helpers.mdasync-generator-helpers.mdclass-object-helpers.mdcore-helper-management.mdindex.mdmodule-import-helpers.mdutility-runtime-helpers.md
tile.json

module-import-helpers.mddocs/

Module and Import Helpers

Utilities for handling module interoperability, import/export patterns, and CommonJS/ES Module compatibility.

Capabilities

Interoperability Helpers

Core helpers for CommonJS and ES Module interoperability.

/**
 * Handle default import interoperability with CommonJS modules
 * Helper name: "interopRequireDefault"
 */
function _interopRequireDefault<T>(obj: T): T & { default: T };

/**
 * Handle wildcard import interoperability with CommonJS modules  
 * Helper name: "interopRequireWildcard"
 */
function _interopRequireWildcard<T extends object>(obj: T): T & { default?: T };

Import Deferral

Helper for deferred import proxy creation.

/**
 * Create proxy for deferred imports
 * Helper name: "importDeferProxy"
 */
function _importDeferProxy<T>(loader: () => Promise<T>): T;

TypeScript Import Extensions

Helper for TypeScript import extension rewriting.

/**
 * Rewrite relative import extensions for TypeScript
 * Helper name: "tsRewriteRelativeImportExtensions"
 */
function _tsRewriteRelativeImportExtensions(
  source: string,
  extensions: string[]
): string;

Usage Examples

Default Import Interoperability

// When importing default from CommonJS module:
// import foo from 'commonjs-module';

import { get } from "@babel/helpers";
const interopHelper = get("interopRequireDefault");

// Babel generates:
// const _commonjsModule = require('commonjs-module');
// const _commonjsModule2 = _interopRequireDefault(_commonjsModule);
// const foo = _commonjsModule2.default;

// The helper ensures that:
// - If module has __esModule: true, use module.default
// - Otherwise, wrap CommonJS export as { default: module }

Wildcard Import Interoperability

// When using namespace import from CommonJS:
// import * as utils from 'commonjs-utils';

const wildcardHelper = get("interopRequireWildcard");

// Babel generates:
// const _commonjsUtils = require('commonjs-utils');
// const utils = _interopRequireWildcard(_commonjsUtils);

// The helper handles:
// - ES modules: returns module as-is
// - CommonJS without __esModule: wraps as namespace with default
// - Mixed modules: preserves both named exports and default

Deferred Import Proxy

// For dynamic import deferral:
// const lazyModule = defer(() => import('./expensive-module'));

const deferHelper = get("importDeferProxy");

// Babel might generate:
// const lazyModule = _importDeferProxy(() => import('./expensive-module'));

// The proxy delays loading until first property access:
// lazyModule.someExport; // Triggers import and returns actual export

TypeScript Import Extension Rewriting

// When TypeScript needs import extension rewriting:
// import './module.js' -> import './module'

const tsRewriteHelper = get("tsRewriteRelativeImportExtensions");

// Usage in build tools:
// const rewritten = _tsRewriteRelativeImportExtensions(
//   "./module.js", 
//   [".js", ".ts"]
// );
// // Returns: "./module"

Helper Implementation Details

interopRequireDefault

This helper handles the common pattern where ES modules import from CommonJS:

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

// Usage scenarios:
// 1. ES Module -> obj.__esModule === true -> return obj (has real default)
// 2. CommonJS -> obj.__esModule === undefined -> return { default: obj }
// 3. Mixed -> depends on __esModule flag

interopRequireWildcard

More complex helper for namespace imports:

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj; // Real ES module
  }
  
  if (obj === null || (typeof obj !== "object" && typeof obj !== "function")) {
    return { default: obj }; // Primitive value
  }
  
  // CommonJS module - create namespace object
  const newObj = {};
  if (obj != null) {
    for (const key in obj) {
      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
        newObj[key] = obj[key];
      }
    }
  }
  newObj.default = obj;
  return newObj;
}

Common Usage Patterns

import { get, list } from "@babel/helpers";

// Get all module-related helpers
const moduleHelpers = list.filter(name => 
  name.includes('interop') || 
  name.includes('import') || 
  name.includes('require')
);

console.log(moduleHelpers); 
// ["interopRequireDefault", "interopRequireWildcard", "importDeferProxy", ...]

// For bundler/transpiler use:
function handleImport(importType: string) {
  switch (importType) {
    case 'default':
      return get("interopRequireDefault");
    case 'namespace':  
      return get("interopRequireWildcard");
    case 'deferred':
      return get("importDeferProxy");
    default:
      return null;
  }
}

// Check if module interop is needed
function needsInterop(moduleFormat: string, importStyle: string) {
  return moduleFormat === 'commonjs' && 
         (importStyle === 'default' || importStyle === 'namespace');
}

Build Tool Integration

These helpers are commonly used by build tools and bundlers:

// Webpack/Rollup/etc. might use these patterns:

// For default imports from CommonJS
const defaultInterop = get("interopRequireDefault");
// Generated in bundle: const _interopRequireDefault = /* helper code */;

// For namespace imports  
const namespaceInterop = get("interopRequireWildcard");
// Generated: const _interopRequireWildcard = /* helper code */;

// Bundle output example:
// function _interopRequireDefault(obj) { /* ... */ }
// const _myModule = _interopRequireDefault(require('my-module'));
// const myDefault = _myModule.default;

Error Handling

The interop helpers are designed to be robust:

  • Handle null and undefined modules gracefully
  • Work with both objects and functions
  • Preserve existing __esModule semantics
  • Don't break when prototype pollution occurs
  • Safe property enumeration with hasOwnProperty checks