babel-plugin-syntax-class-properties

babel-plugin-syntax-class-properties is a minimal Babel syntax plugin that enables parsing of class properties in JavaScript code. It extends Babel's parser capabilities by adding support for the classProperties syntax plugin, allowing developers to use class property declarations before they are transformed by other Babel plugins.

Package Information

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

Core Imports

This plugin is imported through Babel configuration, not directly as a module:

Via .babelrc:

{
  "plugins": ["syntax-class-properties"]
}

Via CLI:

babel --plugins syntax-class-properties script.js

Via Node API:

require("babel-core").transform("code", {
  plugins: ["syntax-class-properties"]
});

Basic Usage

// Input JavaScript with class properties
class MyClass {
  // Instance property
  instanceProperty = "default value";
  
  // Static property
  static staticProperty = "static value";
  
  // Private property (parsed but not transformed)
  #privateProperty = "private value";
}

The plugin tells Babel's parser to recognize this syntax without transforming it. The actual transformation would be handled by separate transformation plugins.

Architecture

This is a syntax-only plugin that works during Babel's parsing phase:

• Plugin Type: Syntax enablement (no transformation)
• Execution Phase: Parser configuration (before AST generation)
• Dependencies: None (self-contained)
• Compatibility: Babel 6.x architecture

The plugin modifies Babel's parser options to include class property syntax recognition, enabling other plugins to work with class property AST nodes.

Capabilities

Plugin Factory Function

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

/**
 * Default export function that creates a Babel plugin configuration
 * @returns {BabelPlugin} Babel plugin configuration object
 */
export default function(): BabelPlugin;

interface BabelPlugin {
  manipulateOptions(opts: any, parserOpts: ParserOptions): void;
}

interface ParserOptions {
  plugins: string[];
}

Parser Options Manipulation

The plugin implements the manipulateOptions hook to modify Babel's parser configuration.

/**
 * Babel plugin hook that modifies parser options to include class property syntax
 * @param {any} opts - Babel transformation options (unused by this plugin)
 * @param {ParserOptions} parserOpts - Babel parser options containing plugins array
 * @returns {void}
 */
manipulateOptions(opts: any, parserOpts: ParserOptions): void;

Implementation Details:

• Adds "classProperties" string to the parserOpts.plugins array
• Enables Babel parser to recognize class property syntax including:
  • Instance properties: class A { prop = value; }
  • Static properties: class A { static prop = value; }
  • Private properties: class A { #private = value; }
  • Computed property names in class bodies

Configuration Examples:

Babel configuration file (.babelrc):

{
  "plugins": ["syntax-class-properties"]
}

Programmatic usage with babel-core:

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

const result = babel.transform(sourceCode, {
  plugins: ["syntax-class-properties"]
});

Important Notes:

• This plugin only enables parsing - it does not transform the code
• It must be included before any transformation plugins that work with class properties
• No runtime dependencies or configuration options
• Works as a foundational plugin for the Babel ecosystem