tessl/npm-swc--types

Comprehensive TypeScript type definitions for the SWC JavaScript/TypeScript transformation and minification APIs.

—

Pending

Overview

Eval results

Files

JSX Support

Name: tessl/npm-swc--types
Author: tessl

Complete JSX (JavaScript XML) AST node definitions for React and other JSX-based frameworks. These types represent the parsed structure of JSX syntax and enable comprehensive JSX transformation and analysis.

Capabilities

Core JSX Elements

Primary JSX element types for representing JSX syntax trees.

/**
 * JSX element with opening tag, children, and optional closing tag
 */
interface JSXElement extends Node, HasSpan {
  type: "JSXElement";
  opening: JSXOpeningElement;
  children: JSXElementChild[];
  closing?: JSXClosingElement;
}

/**
 * JSX fragment (<>...</>) for grouping elements without wrapper
 */
interface JSXFragment extends Node, HasSpan {
  type: "JSXFragment";
  opening: JSXOpeningFragment;
  children: JSXElementChild[];
  closing: JSXClosingFragment;
}

/**
 * Opening JSX element tag with name, attributes, and self-closing flag
 */
interface JSXOpeningElement extends Node, HasSpan {
  type: "JSXOpeningElement";
  name: JSXElementName;
  attributes: JSXAttributeOrSpread[];
  selfClosing: boolean;
  typeArguments?: TsTypeParameterInstantiation;
}

/**
 * Closing JSX element tag
 */
interface JSXClosingElement extends Node, HasSpan {
  type: "JSXClosingElement";
  name: JSXElementName;
}

Usage Examples:

import type { JSXElement, JSXFragment } from "@swc/types";

// Representing: <div className="container">Hello</div>
const elementNode: JSXElement = {
  type: "JSXElement",
  span: { start: 0, end: 42, ctxt: 0 },
  opening: {
    type: "JSXOpeningElement",
    span: { start: 0, end: 26, ctxt: 0 },
    name: { type: "Identifier", span: { start: 1, end: 4, ctxt: 0 }, value: "div" },
    attributes: [/* JSXAttribute for className */],
    selfClosing: false
  },
  children: [/* JSXText for "Hello" */],
  closing: {
    type: "JSXClosingElement", 
    span: { start: 31, end: 37, ctxt: 0 },
    name: { type: "Identifier", span: { start: 33, end: 36, ctxt: 0 }, value: "div" }
  }
};

// Representing: <>Content</>
const fragmentNode: JSXFragment = {
  type: "JSXFragment",
  span: { start: 0, end: 12, ctxt: 0 },
  opening: { type: "JSXOpeningFragment", span: { start: 0, end: 2, ctxt: 0 } },
  children: [/* JSXText for "Content" */],
  closing: { type: "JSXClosingFragment", span: { start: 9, end: 12, ctxt: 0 } }
};

JSX Attributes and Values

Types for JSX attributes, values, and spread operations.

/**
 * JSX attribute with name and optional value
 */
interface JSXAttribute extends Node, HasSpan {
  type: "JSXAttribute";
  name: JSXAttributeName;
  value?: JSXAttrValue;
}

/**
 * JSX expression container for embedded JavaScript expressions
 */
interface JSXExpressionContainer extends Node, HasSpan {
  type: "JSXExpressionContainer";
  expression: JSXExpression;
}

/**
 * Empty JSX expression placeholder
 */
interface JSXEmptyExpression extends Node, HasSpan {
  type: "JSXEmptyExpression";
}

/**
 * Text content within JSX elements
 */
interface JSXText extends Node, HasSpan {
  type: "JSXText";
  value: string;
  raw: string;
}

JSX Naming and Namespaces

Element and attribute naming types, including namespace support.

/**
 * JSX member expression for nested component access (e.g., Component.Child)
 */
interface JSXMemberExpression extends Node {
  type: "JSXMemberExpression";
  object: JSXObject;
  property: Identifier;
}

/**
 * XML-style namespaced name (e.g., svg:circle)
 */
interface JSXNamespacedName extends Node {
  type: "JSXNamespacedName";
  namespace: Identifier;
  name: Identifier;
}

/**
 * JSX spread child for array spreading in JSX
 */
interface JSXSpreadChild extends Node, HasSpan {
  type: "JSXSpreadChild";
  expression: Expression;
}

JSX Fragment Types

Fragment-specific opening and closing tag types.

/**
 * Opening fragment tag (<>)
 */
interface JSXOpeningFragment extends Node, HasSpan {
  type: "JSXOpeningFragment";
}

/**
 * Closing fragment tag (</>)
 */
interface JSXClosingFragment extends Node, HasSpan {
  type: "JSXClosingFragment";
}

Type Unions

JSX Element Names

Union types for different JSX element naming patterns.

/**
 * All possible JSX element name types
 */
type JSXElementName = 
  | Identifier              // Simple component: <Button>
  | JSXMemberExpression     // Nested component: <UI.Button>
  | JSXNamespacedName;      // Namespaced: <svg:circle>

/**
 * JSX attribute name types
 */
type JSXAttributeName = 
  | Identifier              // Simple attribute: disabled
  | JSXNamespacedName;      // Namespaced: xml:lang

/**
 * JSX object reference types for member expressions
 */
type JSXObject = 
  | JSXMemberExpression     // Nested: UI.Components.Button
  | Identifier;             // Simple: UI

JSX Values and Children

Union types for JSX attribute values and element children.

/**
 * Possible JSX attribute values
 */
type JSXAttrValue = 
  | Literal                 // String literal: "value"
  | JSXExpressionContainer  // Expression: {variable}
  | JSXElement             // Nested element: <span>nested</span>
  | JSXFragment;           // Fragment: <>content</>

/**
 * Possible JSX element children
 */
type JSXElementChild = 
  | JSXText                // Text content
  | JSXExpressionContainer // Embedded expression
  | JSXSpreadChild         // Spread operation
  | JSXElement            // Nested element
  | JSXFragment;          // Nested fragment

/**
 * JSX expression types
 */
type JSXExpression = 
  | JSXEmptyExpression     // Empty: {}
  | Expression;            // Any JavaScript expression

/**
 * JSX attribute or spread element
 */
type JSXAttributeOrSpread = 
  | JSXAttribute          // Regular attribute
  | SpreadElement;        // Spread: {...props}

Integration with AST

Expression Integration

JSX elements integrate seamlessly with the main Expression union type:

// JSXElement and JSXFragment are part of the main Expression union
type Expression = 
  | ThisExpression | ArrayExpression | ObjectExpression
  // ... other expression types
  | JSXElement | JSXFragment
  // ... remaining expression types
  ;

Literal Integration

JSXText is included in the Literal union type:

type Literal = 
  | StringLiteral | BooleanLiteral | NullLiteral
  | NumericLiteral | BigIntLiteral | RegExpLiteral
  | JSXText;

TypeScript Integration

JSX elements support TypeScript generics through type arguments:

interface JSXOpeningElement extends Node, HasSpan {
  type: "JSXOpeningElement";
  name: JSXElementName;
  attributes: JSXAttributeOrSpread[];
  selfClosing: boolean;
  /** TypeScript generic type arguments: <Component<T>> */
  typeArguments?: TsTypeParameterInstantiation;
}

React-Specific Patterns

Component Patterns

Common JSX patterns for React components:

// Functional Component: <Button onClick={handler}>
// - name: Identifier("Button")
// - attributes: [JSXAttribute with name="onClick", value=JSXExpressionContainer]

// Component with children: <Card><Title>Header</Title></Card>
// - opening: JSXOpeningElement with name="Card"
// - children: [JSXElement for Title]
// - closing: JSXClosingElement with name="Card"

// Self-closing: <Input placeholder="text" />
// - opening: JSXOpeningElement with selfClosing=true
// - children: []
// - closing: undefined

Prop Patterns

JSX attribute patterns for React props:

// String prop: disabled="true"
// JSXAttribute { name: "disabled", value: StringLiteral }

// Expression prop: onClick={handleClick}
// JSXAttribute { name: "onClick", value: JSXExpressionContainer }

// Boolean prop: disabled
// JSXAttribute { name: "disabled", value: undefined }

// Spread props: {...restProps}
// SpreadElement in attributes array

Parser Configuration

Enable JSX parsing in SWC configuration:

import type { EsParserConfig, TsParserConfig } from "@swc/types";

// JavaScript JSX
const jsxParser: EsParserConfig = {
  syntax: "ecmascript",
  jsx: true
};

// TypeScript JSX (TSX)
const tsxParser: TsParserConfig = {
  syntax: "typescript", 
  tsx: true
};

Install with Tessl CLI