or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-babel--plugin-syntax-class-properties

Babel syntax plugin that enables parsing of class properties, private properties, and private methods

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@babel/plugin-syntax-class-properties@7.12.x

To install, run

npx @tessl/cli install tessl/npm-babel--plugin-syntax-class-properties@7.12.0

index.mddocs/

@babel/plugin-syntax-class-properties

@babel/plugin-syntax-class-properties is a Babel syntax plugin that enables parsing of modern JavaScript class property syntax. It adds parser support for class properties, private class properties, and private class methods without performing any code transformations.

Package Information

  • Package Name: @babel/plugin-syntax-class-properties
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev @babel/plugin-syntax-class-properties

Core Imports

The plugin is imported indirectly through Babel configuration. It does not export any runtime API for direct consumption.

// Babel configuration (babel.config.js)
export default {
  plugins: ["@babel/plugin-syntax-class-properties"]
};

Using @babel/core API:

import { transform } from "@babel/core";

const result = transform(code, {
  plugins: ["@babel/plugin-syntax-class-properties"]
});

Basic Usage

Add the plugin to your Babel configuration to enable parsing of class property syntax:

// babel.config.js
export default {
  plugins: ["@babel/plugin-syntax-class-properties"]
};

With this plugin enabled, Babel can parse the following syntax:

class MyClass {
  // Public class property
  publicProperty = "value";
  
  // Private class property  
  #privateProperty = "secret";
  
  // Private class method
  #privateMethod() {
    return this.#privateProperty;
  }
  
  getPrivate() {
    return this.#privateMethod();
  }
}

Architecture

The plugin follows Babel's standard plugin architecture:

  • Plugin Declaration: Uses @babel/helper-plugin-utils declare function for proper API integration
  • Parser Enhancement: Modifies parser options to enable specific syntax features
  • No Transformation: Only enables parsing; does not transform or modify code
  • Foundational Role: Serves as a prerequisite for transformation plugins that work with class properties

Capabilities

Plugin Function

The main exported plugin function that integrates with Babel's plugin system.

/**
 * Babel plugin that enables parsing of class property syntax
 * Created using @babel/helper-plugin-utils declare function
 * @param {Object} api - Babel API object
 * @returns {Object} Plugin configuration object
 */
function syntaxClassPropertiesPlugin(api): BabelPlugin;

interface BabelPlugin {
  /** Plugin identifier */
  name: "syntax-class-properties";
  /** Parser options manipulation function */
  manipulateOptions(opts: PluginOptions, parserOpts: ParserOptions): void;
}

Parser Options Manipulation

Modifies Babel's parser configuration to enable class property syntax parsing.

/**
 * Manipulates parser options to enable class property syntax
 * @param {Object} opts - Plugin options (unused in this plugin)
 * @param {Object} parserOpts - Babel parser options object
 */
function manipulateOptions(opts: PluginOptions, parserOpts: ParserOptions): void;

interface ParserOptions {
  /** Array of parser plugins to enable specific syntax features */
  plugins: string[];
}

interface PluginOptions {
  /** Standard Babel plugin options (not used by this plugin) */
  [key: string]: any;
}

The function adds the following parser plugins:

  • "classProperties" - Enables parsing of public class property declarations
  • "classPrivateProperties" - Enables parsing of private class property declarations (# syntax)
  • "classPrivateMethods" - Enables parsing of private class method declarations (# syntax)

Types

/**
 * Babel API object provided to plugin functions
 */
interface BabelAPI {
  /** Assert that Babel version meets requirements */
  assertVersion(version: number): void;
  /** Additional Babel core API methods */
  [key: string]: any;
}

/**
 * Configuration object returned by the plugin
 */
interface BabelPlugin {
  /** Unique plugin identifier */
  name: string;
  /** Optional function to modify parser options */
  manipulateOptions?(opts: PluginOptions, parserOpts: ParserOptions): void;
  /** Optional visitor pattern for AST transformation */
  visitor?: object;
}

Integration Patterns

With Transformation Plugins

Commonly used alongside transformation plugins:

// babel.config.js
export default {
  plugins: [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties"  // Transforms the syntax
  ]
};

With Preset Configurations

Often included automatically in presets:

// babel.config.js  
export default {
  presets: [
    ["@babel/preset-env", {
      // preset may include syntax plugin automatically
    }]
  ]
};

Programmatic Usage

Using with Babel's transform API:

import { transform } from "@babel/core";

const code = `
class Example {
  property = "value";
  #private = "secret";
}`;

const result = transform(code, {
  plugins: ["@babel/plugin-syntax-class-properties"]
});
// result.ast contains parsed AST with class property nodes

Error Handling

The plugin performs minimal error handling:

  • Version Assertion: Throws if Babel version is incompatible (requires Babel 7+)
  • Parser Errors: Parser will throw syntax errors for malformed class property syntax
  • No Runtime Errors: Plugin only affects parsing phase, no runtime error handling needed

Dependencies

/**
 * Required peer dependency
 */
interface PeerDependency {
  "@babel/core": "^7.0.0-0";
}

/**
 * Internal dependency used by the plugin
 */
interface InternalDependency {
  "@babel/helper-plugin-utils": "workspace:^7.12.13";
}