CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-babel--runtime

Babel's modular runtime helpers that provide transpilation support for modern JavaScript features

94

1.18x
Overview
Eval results
Files

module-interop.mddocs/

Module Interoperability Helpers

Module interoperability helpers provide seamless compatibility between CommonJS and ES Modules, handling import/export transformations and ensuring consistent behavior across different module systems.

Capabilities

Import Compatibility

interopRequireDefault

Handles default imports from CommonJS modules, ensuring proper default export access.

/**
 * Handles default imports from CommonJS
 * @param obj - Module object to check for default export
 * @returns Object with default property or original object
 */
function interopRequireDefault(obj: any): { default: any } | any;

Usage Example:

import _interopRequireDefault from '@babel/runtime/helpers/esm/interopRequireDefault';

// Used by Babel for: import defaultExport from 'commonjs-module';
const _commonjsModule = _interopRequireDefault(require('commonjs-module'));
const defaultExport = _commonjsModule.default;

// Handles both cases:
// - CommonJS: module.exports = function() {}
// - ES Module: export default function() {}

Behavior:

// CommonJS module without __esModule flag
const cjsModule = { foo: 'bar' };
interopRequireDefault(cjsModule);
// Returns: { default: { foo: 'bar' } }

// ES Module (has __esModule: true)
const esModule = { __esModule: true, default: 'value', named: 'export' };
interopRequireDefault(esModule);
// Returns: { __esModule: true, default: 'value', named: 'export' }

// CommonJS module that's a function
const fnModule = function() { return 'hello'; };
interopRequireDefault(fnModule);
// Returns: { default: function() { return 'hello'; } }

interopRequireWildcard

Handles namespace imports from CommonJS modules, providing access to all exports.

/**
 * Handles namespace imports from CommonJS
 * @param obj - Module object to create namespace from
 * @returns Namespace object with all exports
 */
function interopRequireWildcard(obj: any): any;

Usage Example:

import _interopRequireWildcard from '@babel/runtime/helpers/esm/interopRequireWildcard';

// Used by Babel for: import * as namespace from 'commonjs-module';
const namespace = _interopRequireWildcard(require('commonjs-module'));

// Access exports
const { namedExport } = namespace;
const defaultExport = namespace.default;

Behavior:

// CommonJS module
const cjsModule = { 
  foo: 'bar', 
  baz: function() { return 'qux'; }
};
interopRequireWildcard(cjsModule);
// Returns: { 
//   default: { foo: 'bar', baz: [Function] },
//   foo: 'bar', 
//   baz: [Function]
// }

// ES Module
const esModule = { 
  __esModule: true, 
  default: 'defaultValue',
  named: 'namedValue'
};
interopRequireWildcard(esModule);
// Returns: { 
//   __esModule: true, 
//   default: 'defaultValue',
//   named: 'namedValue'
// }

Dynamic Import Support

importDeferProxy

Creates deferred import proxies for dynamic import optimization.

/**
 * Deferred import proxy creation
 * @param init - Initialization function that returns the module
 * @returns Proxy object that defers module loading
 */
function importDeferProxy(init: () => any): any;

Usage Example:

import _importDeferProxy from '@babel/runtime/helpers/esm/importDeferProxy';

// Used by Babel for deferred dynamic imports
const deferredModule = _importDeferProxy(() => import('./heavy-module'));

// Module is only loaded when first accessed
const { heavyFunction } = deferredModule; // Triggers actual import

Module System Detection

The helpers use several strategies to detect module types:

ES Module Detection

// ES Modules are marked with __esModule property
const isESModule = obj && obj.__esModule === true;

CommonJS Detection

// CommonJS modules lack __esModule property
const isCommonJS = !obj || !obj.__esModule;

Null/Undefined Handling

// Safe handling of null/undefined modules
if (obj == null) {
  // Create appropriate wrapper
  return { default: obj };
}

Common Usage Patterns

Default Import Patterns

// Source: import React from 'react';
import _interopRequireDefault from '@babel/runtime/helpers/esm/interopRequireDefault';
const _react = _interopRequireDefault(require('react'));
const React = _react.default;

Namespace Import Patterns

// Source: import * as fs from 'fs';
import _interopRequireWildcard from '@babel/runtime/helpers/esm/interopRequireWildcard';
const fs = _interopRequireWildcard(require('fs'));

Mixed Import Patterns

// Source: import React, { Component } from 'react';
import _interopRequireDefault from '@babel/runtime/helpers/esm/interopRequireDefault';
import _interopRequireWildcard from '@babel/runtime/helpers/esm/interopRequireWildcard';

const _react = _interopRequireWildcard(require('react'));
const React = _interopRequireDefault(_react).default;
const Component = _react.Component;

Dynamic Import Patterns

// Source: const module = await import('./module');
import _interopRequireDefault from '@babel/runtime/helpers/esm/interopRequireDefault';

const module = await Promise.resolve().then(() => _interopRequireDefault(require('./module')));

Edge Cases Handled

Function Modules

// CommonJS: module.exports = function() {}
const fnExport = function() { return 'hello'; };
interopRequireDefault(fnExport);
// Returns: { default: function() { return 'hello'; } }

Primitive Modules

// CommonJS: module.exports = 'string';
const stringExport = 'hello world';
interopRequireDefault(stringExport);
// Returns: { default: 'hello world' }

Complex Objects

// CommonJS: module.exports = new Date();
const dateExport = new Date('2023-01-01');
interopRequireDefault(dateExport);
// Returns: { default: Date('2023-01-01') }

Circular Dependencies

The helpers handle circular dependency scenarios gracefully by avoiding infinite recursion and maintaining reference integrity.

Types

// Module object interface
interface Module {
  __esModule?: boolean;
  default?: any;
  [key: string]: any;
}

// CommonJS module interface
interface CommonJSModule {
  exports: any;
  require: (id: string) => any;
  id: string;
  filename: string;
  loaded: boolean;
  parent: CommonJSModule | null;
  children: CommonJSModule[];
}

// ES Module interface
interface ESModule {
  __esModule: true;
  default?: any;
  [exportName: string]: any;
}

// Namespace import result
interface NamespaceImport {
  default?: any;
  [exportName: string]: any;
}

// Deferred import proxy
interface DeferredImportProxy {
  [key: string]: any;
}

// Import initialization function
type ImportInitializer = () => Promise<any> | any;

Install with Tessl CLI

npx tessl i tessl/npm-babel--runtime

docs

array-helpers.md

async-generators.md

class-helpers.md

decorators.md

index.md

module-interop.md

object-helpers.md

private-members.md

resource-management.md

type-utilities.md

tile.json