CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

code-optimization.mddocs/

Code Optimization

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

Capabilities

Constant Folding Plugin

Performs compile-time evaluation of expressions and dead code elimination to reduce bundle size.

/**
 * Creates a Babel plugin that performs constant folding and dead code elimination
 * @param context - Babel plugin context with types and traverse utilities
 * @returns Babel plugin object with visitor pattern
 */
function constantFoldingPlugin(context: {
  types: Types,
  traverse: Traverse
}): PluginObj<State>;

interface State {
  stripped: boolean; // Tracks whether any code was removed
}

Usage Examples:

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

// Basic constant folding
const code = `
const result = 2 + 3 * 4;
if (true) {
  console.log("always executed");
} else {
  console.log("never executed");
}
`;

const transformed = babel.transformSync(code, {
  plugins: [
    constantFoldingPlugin({ types: babel.types, traverse: babel.traverse })
  ]
});

// Result will have expressions evaluated and dead code removed:
// const result = 14;
// console.log("always executed");

Expression Evaluation

The plugin evaluates various types of expressions at compile time:

  • Binary expressions: 2 + 3 becomes 5
  • Unary expressions: !false becomes true
  • Logical expressions: true || anything becomes true
  • Conditional expressions: true ? 'yes' : 'no' becomes 'yes'
/**
 * Internal evaluation function (not directly exported)
 * Safely evaluates expressions with confidence checking
 */
interface EvaluationResult {
  confident: boolean; // Whether evaluation was successful
  value: any; // The evaluated value
}

Dead Code Elimination

Removes unreachable code and unused declarations:

// Before transformation
if (false) {
  expensiveOperation(); // This will be removed
}

function unusedFunction() { // This will be removed if never referenced
  return 42;
}

// After transformation - dead code is completely eliminated

Conditional Statement Optimization

Optimizes conditional statements based on constant test expressions:

// Handles these node types:
// - IfStatement: if/else conditional statements
// - ConditionalExpression: ternary operators (condition ? true : false)
// - LogicalExpression: logical operators (&&, ||, ??)

Logical Expression Optimization:

// Before
const value = condition || 'default';
const checked = flag && someValue;
const nullish = input ?? 'fallback';

// After (when condition/flag/input are constant)
const value = 'default'; // if condition was false
const checked = someValue; // if flag was true  
const nullish = 'fallback'; // if input was null/undefined

Function Declaration Removal

Removes unused function declarations that are never referenced:

/**
 * Removes function declarations that have no references
 * Checks binding.referenced to determine usage
 */
// FunctionDeclaration visitor handles:
// - Named function declarations
// - Function expressions assigned to variables
// - Arrow functions assigned to variables

Safety Checks

The plugin includes safety mechanisms to avoid breaking code:

  • Assignment expressions: Marked as unsafe to prevent side effect removal
  • Function calls: Marked as unsafe to preserve potential side effects
  • Optional call expressions: foo?.() marked as unsafe to prevent incorrect optimization
  • Void expressions: Only optimized when argument is a literal (e.g., void 0)
/**
 * Safety checking prevents optimization of expressions that may have side effects
 */
interface SafetyState {
  safe: boolean; // Tracks whether expression is safe to optimize
}

Iterative Processing

The plugin performs multiple passes until no more optimizations are possible:

// The plugin will re-traverse the AST if any changes were made
// This ensures cascading optimizations are applied:
// const a = 1 + 2;  // First pass: a = 3
// const b = a * 4;  // Second pass: b = 12

docs

code-generation.md

code-optimization.md

index.md

module-system.md

platform-inlining.md

require-optimization.md

tile.json