babel-plugin-syntax-jsx

babel-plugin-syntax-jsx is a Babel plugin that enables JSX syntax parsing without transformation. It provides minimal configuration to allow Babel to recognize and parse JSX syntax, making it essential for JSX-aware tooling and as a prerequisite for JSX transformation plugins.

Package Information

• Package Name: babel-plugin-syntax-jsx
• Package Type: npm (Babel Plugin)
• Language: JavaScript (ES6 modules)
• Installation: npm install babel-plugin-syntax-jsx

Core Imports

The plugin is imported as a default export:

import syntaxJsx from "babel-plugin-syntax-jsx";

For CommonJS:

const syntaxJsx = require("babel-plugin-syntax-jsx");

Basic Usage

The plugin is typically configured in Babel rather than used directly:

Via .babelrc

{
  "plugins": ["syntax-jsx"]
}

Via CLI

babel --plugins syntax-jsx script.js

Via Node API

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

babel.transform("const element = <div>Hello</div>;", {
  plugins: ["syntax-jsx"]
});

Capabilities

Plugin Function

The main export is a Babel plugin factory function that returns a plugin configuration object.

/**
 * Creates a Babel plugin that enables JSX syntax parsing
 * @returns {object} Babel plugin configuration object
 */
export default function(): BabelPlugin;

interface BabelPlugin {
  /** 
   * Manipulates parser options to add JSX syntax support
   * @param opts - Babel transformation options (unused by this plugin)
   * @param parserOpts - Parser configuration object
   */
  manipulateOptions(opts: any, parserOpts: ParserOptions): void;
}

interface ParserOptions {
  /** Array of parser plugins to enable - this plugin adds "jsx" to this array */
  plugins: string[];
}

Plugin Behavior:

• The returned plugin object contains a manipulateOptions method
• This method adds "jsx" to the parser's plugins array
• Enables Babel to parse JSX syntax without performing any transformations
• Works as a foundation for other Babel plugins that need JSX parsing capability

Usage Example:

import syntaxJsx from "babel-plugin-syntax-jsx";

// Get the plugin configuration
const plugin = syntaxJsx();

// The plugin object has a manipulateOptions method
// that will be called by Babel during parsing

Architecture

babel-plugin-syntax-jsx follows the standard Babel plugin architecture:

• Plugin Factory: The default export function creates plugin instances
• Lifecycle Integration: Uses the manipulateOptions lifecycle hook to modify parser configuration
• Parser Extension: Extends Babel's parser capabilities without transformation logic
• Minimal Footprint: No dependencies, minimal code surface for maximum compatibility

The plugin serves as a foundational component that:

• Enables JSX syntax recognition in JavaScript code
• Provides the basis for JSX transformation plugins
• Supports tooling that needs to parse JSX (linters, formatters, analyzers)
• Maintains compatibility across Babel versions through standard plugin interfaces