or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

index.mddocs/

babel-plugin-transform-strict-mode

A Babel plugin that automatically adds "use strict"; directives to JavaScript files to enable strict mode. This plugin integrates seamlessly with the Babel compilation pipeline, analyzing the Abstract Syntax Tree (AST) to determine if strict mode is already enabled before adding the directive.

Package Information

  • Package Name: babel-plugin-transform-strict-mode
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev babel-plugin-transform-strict-mode

Core Imports

// Direct plugin import
const strictModePlugin = require("babel-plugin-transform-strict-mode");

// Internal dependencies (used by plugin implementation)
import * as t from "babel-types";

For use with Babel configuration:

{
  "plugins": ["transform-strict-mode"]
}

Basic Usage

Via .babelrc (Recommended)

Without options:

{
  "plugins": ["transform-strict-mode"]
}

With options:

{
  "plugins": [
    ["transform-strict-mode", {
      "strict": true
    }]
  ]
}

Via CLI

babel --plugins transform-strict-mode script.js

Via Node API

const babel = require("babel-core");

const result = babel.transform("code", {
  plugins: ["transform-strict-mode"]
});

Capabilities

Plugin Factory Function

Creates a Babel plugin that adds "use strict" directives to JavaScript files.

/**
 * Factory function that returns a Babel plugin object
 * @returns {BabelPlugin} Plugin object with visitor methods
 */
function default(): BabelPlugin;

interface BabelPlugin {
  visitor: {
    Program(path: NodePath, state: PluginState): void;
  };
}

interface PluginState {
  opts: PluginOptions;
}

interface PluginOptions {
  /** When false, disables strict mode insertion */
  strict?: boolean;
  /** When false, disables strict mode insertion (alternative option name) */
  strictMode?: boolean;
}

Babel Types Functions

The plugin uses specific babel-types functions for AST manipulation.

/**
 * Creates a directive AST node
 * @param directiveLiteral - The directive literal node
 * @returns {DirectiveNode} Directive AST node
 */
t.directive(directiveLiteral: DirectiveLiteralNode): DirectiveNode;

/**
 * Creates a directive literal AST node
 * @param value - The string value of the directive
 * @returns {DirectiveLiteralNode} Directive literal AST node
 */
t.directiveLiteral(value: string): DirectiveLiteralNode;

Usage Example:

// Input JavaScript
foo();

// Output JavaScript (with plugin applied)
"use strict";

foo();

Plugin Behavior

The plugin operates by:

  1. AST Traversal: Visits all Program nodes in the Abstract Syntax Tree
  2. Option Check: Early return if state.opts.strict === false or state.opts.strictMode === false
  3. Directive Detection: Iterates through existing node.directives array checking if any directive has value.value === "use strict"
  4. Conditional Insertion: Adds "use strict"; directive only if no existing "use strict" directive is found
  5. AST Manipulation: Uses path.unshiftContainer("directives", t.directive(t.directiveLiteral("use strict"))) to add the directive

Implementation Details:

The core logic from source code:

// Check for disable options
if (state.opts.strict === false || state.opts.strictMode === false) return;

// Check existing directives
for (const directive of (node.directives: Array<Object>)) {
  if (directive.value.value === "use strict") return;
}

// Add directive using babel-types
path.unshiftContainer("directives", t.directive(t.directiveLiteral("use strict")));

Configuration Options

interface PluginOptions {
  /**
   * Controls whether strict mode directive is added
   * When false, the plugin does nothing
   * @default true
   */
  strict?: boolean;
  
  /**
   * Alternative option name for strict mode control
   * When false, the plugin does nothing
   * @default true
   */
  strictMode?: boolean;
}

Configuration Examples:

// Disable strict mode insertion
{
  "plugins": [
    ["transform-strict-mode", { "strict": false }]
  ]
}
// Alternative disable syntax
{
  "plugins": [
    ["transform-strict-mode", { "strictMode": false }]
  ]
}

Integration

With CommonJS Transform

This plugin is automatically enabled when using babel-plugin-transform-es2015-modules-commonjs. To disable it in that context:

{
  "plugins": [
    ["transform-es2015-modules-commonjs", { "strictMode": false }]
  ]
}

Dependencies

The plugin requires these Babel ecosystem packages:

  • babel-types: ^6.24.1 - AST node type definitions and utilities
  • babel-runtime: ^6.22.0 - Babel runtime helpers

Types

/**
 * NodePath interface from Babel traverse
 */
interface NodePath {
  node: ProgramNode;
  unshiftContainer(key: string, nodes: DirectiveNode | DirectiveNode[]): void;
}

/**
 * Program AST node containing directives
 */
interface ProgramNode {
  directives: DirectiveNode[];
}

/**
 * Directive AST node representing "use strict" and similar directives
 */
interface DirectiveNode {
  value: DirectiveLiteralNode;
}

/**
 * Directive literal AST node containing the actual directive string
 */
interface DirectiveLiteralNode {
  value: string;
}