tessl/npm-metro-transform-plugins

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Metro Transform Plugins

Name: tessl/npm-metro-transform-plugins
Author: tessl

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