or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

@babel/plugin-syntax-optional-chaining

@babel/plugin-syntax-optional-chaining is a Babel syntax plugin that enables the parser to understand optional chaining syntax (?.) in JavaScript code. As a syntax-only plugin, it does not transform the code but allows Babel to parse optional chaining expressions without throwing syntax errors.

Package Information

Package Name: @babel/plugin-syntax-optional-chaining
Package Type: npm
Language: JavaScript
Installation: npm install --save-dev @babel/plugin-syntax-optional-chaining

Core Imports

// Default export - the plugin function
const plugin = require("@babel/plugin-syntax-optional-chaining");

For ES modules (when available):

import plugin from "@babel/plugin-syntax-optional-chaining";

Basic Usage

Babel Configuration

// babel.config.js
module.exports = {
  plugins: ["@babel/plugin-syntax-optional-chaining"]
};

// .babelrc
{
  "plugins": ["@babel/plugin-syntax-optional-chaining"]
}

Programmatic Usage

const babel = require("@babel/core");
const plugin = require("@babel/plugin-syntax-optional-chaining");

const result = babel.transformSync(code, {
  plugins: [plugin]
});

Capabilities

Plugin Function

The main export is a Babel plugin function that enables optional chaining syntax parsing.

/**
 * Babel syntax plugin for optional chaining
 * Created using @babel/helper-plugin-utils.declare()
 * @param {Object} api - Babel API object with version assertion
 * @param {Object} options - Plugin options (unused for syntax plugins)
 * @returns {Object} Plugin object with name and manipulateOptions method
 */
function plugin(api, options): BabelPlugin;

interface BabelPlugin {
  /** Plugin identifier name */
  name: string;
  /** Method to manipulate parser options */
  manipulateOptions(opts: BabelOptions, parserOpts: ParserOptions): void;
}

interface BabelOptions {
  // Babel transformation options
  [key: string]: any;
}

interface ParserOptions {
  /** Array of parser plugins to enable */
  plugins: string[];
  [key: string]: any;
}

Plugin Object Properties:

name: "syntax-optional-chaining" - Plugin identifier
manipulateOptions: Function that adds "optionalChaining" to the parser plugins array, enabling the Babel parser to understand optional chaining syntax without throwing errors

Usage Example:

// When this plugin is applied, it enables parsing of:
const value = obj?.property?.method?.();
const arrayItem = arr?.[index];
const result = func?.();

// Without syntax errors, even though the code is not transformed

Plugin Behavior

Relationship with Transform Plugin

This syntax plugin is designed to work with @babel/plugin-proposal-optional-chaining. The transform plugin automatically inherits this syntax plugin, so in most cases you don't need to add this plugin manually:

// The proposal plugin inherits from the syntax plugin
import syntaxOptionalChaining from "@babel/plugin-syntax-optional-chaining";

export default declare((api, options) => {
  return {
    name: "proposal-optional-chaining",
    inherits: syntaxOptionalChaining,  // Automatically includes syntax parsing
    visitor: {
      // Transform logic here
    }
  };
});

Syntax Recognition

The plugin enables Babel's parser to recognize these optional chaining patterns:

Property access: obj?.property
Bracket notation: obj?.[expression]
Function calls: func?.(args)
Chained access: obj?.prop?.method?.()

Parser Integration

/**
 * Manipulates parser options to enable optional chaining syntax
 * @param {BabelOptions} opts - Babel transformation options object (unused by syntax plugins)
 * @param {ParserOptions} parserOpts - Parser options to modify
 */
manipulateOptions(opts: BabelOptions, parserOpts: ParserOptions): void;

The manipulateOptions method:

Receives Babel transformation options (unused) and parser options
Pushes "optionalChaining" string to the parserOpts.plugins array
Enables Babel's parser to recognize optional chaining operators (?.) without throwing syntax errors
Does not transform code - only enables parsing of the syntax

API Version Requirements

Babel API Version: 7 (enforced via api.assertVersion(7))
Babel Core: Requires @babel/core ^7.0.0-0 as peer dependency

Dependencies

Runtime Dependencies

/**
 * @babel/helper-plugin-utils dependency
 * Used for plugin declaration and utilities
 */
const { declare } = require("@babel/helper-plugin-utils");

@babel/helper-plugin-utils: ^7.8.0 - Plugin utilities and declaration helper

Peer Dependencies

@babel/core: ^7.0.0-0 - Babel transformation core (required for plugin system)

Common Use Cases

With Transform Plugins

This syntax plugin is typically used alongside transform plugins, often automatically:

// babel.config.js - Transform plugin automatically includes syntax plugin
module.exports = {
  plugins: [
    "@babel/plugin-proposal-optional-chaining"     // Automatically inherits syntax plugin
  ]
};

// Manual setup (rarely needed)
module.exports = {
  plugins: [
    "@babel/plugin-syntax-optional-chaining",      // Enable syntax parsing
    "@babel/plugin-proposal-optional-chaining"     // Transform to compatible code
  ]
};

TypeScript Integration

// For TypeScript projects
module.exports = {
  presets: [
    "@babel/preset-typescript"
  ],
  plugins: [
    "@babel/plugin-syntax-optional-chaining"
  ]
};

Development Workflow

// Development: Parse modern syntax
{
  "plugins": ["@babel/plugin-syntax-optional-chaining"]
}

// Production: Parse and transform
{
  "plugins": [
    "@babel/plugin-syntax-optional-chaining",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

Error Handling

The plugin enables syntax parsing but does not handle runtime errors. Optional chaining runtime behavior depends on:

Native support: Modern environments with built-in optional chaining
Transform plugins: Plugins like @babel/plugin-proposal-optional-chaining for compatibility
Polyfills: Runtime polyfills for older environments

Without proper transformation or native support, parsed optional chaining syntax may cause runtime errors in older JavaScript environments.