or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

code-generation.mdcode-optimization.mdindex.mdmodule-system.mdplatform-inlining.mdrequire-optimization.md
tile.json

tessl/npm-metro-transform-plugins

Transform plugins for Metro bundler that provide code optimization and platform-specific transformations for React Native applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/metro-transform-plugins@0.83.x

To install, run

npx @tessl/cli install tessl/npm-metro-transform-plugins@0.83.0

index.mddocs/

Metro Transform Plugins

Metro Transform Plugins is a collection of Babel transform plugins specifically designed for Metro, the JavaScript bundler for React Native. It provides essential code transformation utilities including constant folding, import/export handling, require inlining, and platform-specific optimizations that improve bundle performance and enable React Native features.

Package Information

  • Package Name: metro-transform-plugins
  • Package Type: npm
  • Language: JavaScript (with Flow types)
  • Installation: npm install metro-transform-plugins
  • Node Version: >= 20.19.4

Core Imports

const {
  addParamsToDefineCall,
  constantFoldingPlugin,
  importExportPlugin,
  inlinePlugin,
  inlineRequiresPlugin,
  normalizePseudoglobals,
  getTransformPluginCacheKeyFiles
} = require("metro-transform-plugins");

For ES modules (when available):

import {
  addParamsToDefineCall,
  constantFoldingPlugin,
  importExportPlugin,
  inlinePlugin,
  inlineRequiresPlugin,
  normalizePseudoglobals,
  getTransformPluginCacheKeyFiles
} from "metro-transform-plugins";

Basic Usage

const babel = require("@babel/core");
const { constantFoldingPlugin, inlineRequiresPlugin } = require("metro-transform-plugins");

// Apply constant folding to optimize code
const result = babel.transformSync(sourceCode, {
  plugins: [
    constantFoldingPlugin({ types: babel.types, traverse: babel.traverse }),
    inlineRequiresPlugin
  ]
});

// Add parameters to a Metro define call
const { addParamsToDefineCall } = require("metro-transform-plugins");
const enhancedCode = addParamsToDefineCall(
  "define(['dep1', 'dep2'], function(a, b) { return a + b; })",
  { meta: true },
  ["extra", "data"]
);

Architecture

Metro Transform Plugins is built around several key components:

  • Babel Plugin Architecture: All main transformations are implemented as Babel plugins that integrate into Metro's bundling pipeline
  • Lazy Loading: Exports use getter functions to load plugins on-demand for better startup performance
  • Platform Optimizations: Platform-specific transformations for React Native's multi-platform support
  • Performance Focus: Code optimizations including constant folding, dead code elimination, and require inlining
  • Metro Integration: Designed specifically for Metro bundler with cache key generation and bundle optimization features

Capabilities

Code Optimization

Core code optimization functionality including constant folding, dead code elimination, and expression evaluation at compile time.

function constantFoldingPlugin(context: {
  types: Types,
  traverse: Traverse
}): PluginObj<State>;

Code Optimization

Module System Transformation

Transforms ES6 import/export statements into CommonJS require/exports for Metro's module system.

function importExportPlugin(context: {
  types: Types
}): PluginObj<State>;

interface ImportExportPluginOptions {
  importDefault: string;
  importAll: string;  
  resolve: boolean;
  out?: { isESModule: boolean };
}

Module System

Platform-Specific Inlining

Inlines platform-specific checks, development flags, and environment variables for React Native optimization.

function inlinePlugin(
  context: { types: Types },
  options: InlinePluginOptions
): PluginObj<State>;

interface InlinePluginOptions {
  dev: boolean;
  inlinePlatform: boolean;
  isWrapped: boolean;
  requireName?: string;
  platform: string;
}

Platform Inlining

Require Optimization

Inlines top-level require() calls to enable lazy loading and reduce bundle overhead.

function inlineRequiresPlugin(): PluginObj<State>;

interface InlineRequiresPluginOptions {
  ignoredRequires?: ReadonlyArray<string>;
  inlineableCalls?: ReadonlyArray<string>;
  nonMemoizedModules?: ReadonlyArray<string>;
  memoizeCalls?: boolean;
}

Require Optimization

Code Generation Utilities

Utility functions for Metro code generation and pseudoglobal variable management.

function addParamsToDefineCall(
  code: string,
  ...paramsToAdd: Array<mixed>
): string;

function normalizePseudoglobals(
  ast: BabelNode,
  options?: NormalizePseudoGlobalsOptions
): ReadonlyArray<string>;

interface NormalizePseudoGlobalsOptions {
  reservedNames: ReadonlyArray<string>;
}

function getTransformPluginCacheKeyFiles(): ReadonlyArray<string>;

Code Generation

Private API Access

Metro Transform Plugins also exposes individual modules through private exports for advanced usage:

// Access individual plugin files
const inlineRequires = require("metro-transform-plugins/private/inline-requires-plugin");
const constantFolding = require("metro-transform-plugins/private/constant-folding-plugin");

Note: Private APIs may change between versions and should be used with caution.

Common Types

// Babel plugin object interface
interface PluginObj<State = {}> {
  name?: string;
  visitor: Visitor<State>;
}

// Common state interface used by plugins
interface State {
  opts?: PluginOptions;
  // Plugin-specific state properties
}

// Babel AST node types
type BabelNode = any; // Represents any Babel AST node
type BabelNodeExpression = any; // Babel expression node
type BabelNodeStatement = any; // Babel statement node
type BabelNodeProgram = any; // Babel program node