CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-babel-helper-builder-react-jsx

Helper function to build react jsx

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Babel Helper Builder React JSX

Babel Helper Builder React JSX is a Babel helper function that creates a visitor for transforming JSX elements into JavaScript function calls. It provides a customizable JSX transformation pipeline with support for attribute processing, spread operators, and pre/post processing hooks.

Package Information

  • Package Name: babel-helper-builder-react-jsx
  • Package Type: npm
  • Language: JavaScript (with Flow type annotations)
  • Installation: npm install babel-helper-builder-react-jsx

Core Imports

import buildReactJSX from "babel-helper-builder-react-jsx";

For CommonJS:

const buildReactJSX = require("babel-helper-builder-react-jsx");

Basic Usage

import buildReactJSX from "babel-helper-builder-react-jsx";

// Create a Babel visitor for JSX transformation
const visitor = buildReactJSX({
  pre: function (state) {
    // Called before building element attributes
    console.log("Processing element:", state.tagName);
  },
  post: function (state) {
    // Called after building element attributes
    console.log("Finished processing:", state.tagName);
  }
});

// Use in a Babel plugin
export default function myPlugin() {
  return {
    visitor: buildReactJSX()
  };
}

Capabilities

JSX Visitor Creation

Creates a Babel visitor object that transforms JSX elements into JavaScript function calls.

/**
 * Creates a Babel visitor for transforming JSX elements
 * @param opts - Configuration options with optional pre/post hooks (can be undefined)
 * @returns Babel visitor object with JSX transformation logic
 */
function buildReactJSX(opts?: Options): Visitor;

interface Options {
  /** Function called before building element attributes */
  pre?: (state: ElementState, file: any) => void;
  /** Function called after building element attributes */
  post?: (state: ElementState, file: any) => void;
}

interface ElementState {
  /** The tag node from the AST */
  tagExpr: Object;
  /** Raw string tag name */
  tagName: string;
  /** Array of call arguments for the transformed element */
  args: Array<Object>;
  /** Optional call property to override the returned call expression */
  call?: Object;
  /** The callee for the function call (set by pre/post hooks) */
  callee?: Object;
}

interface Visitor {
  /** Handles JSX namespaced names (throws error as not supported) */
  JSXNamespacedName: (path: any) => never;
  /** Main visitor method for transforming JSX elements */
  JSXElement: {
    exit: (path: any, file: any) => void;
  };
}

Element State Management

The ElementState object tracks the transformation state of each JSX element during processing.

interface ElementState {
  /** The tag node from the AST */
  tagExpr: Object;
  /** Raw string tag name extracted from the tag expression */
  tagName: string;
  /** Array of call arguments being built for the transformed element */
  args: Array<Object>;
  /** Optional call property that can be set to override the call expression returned */
  call?: Object;
  /** The callee for the function call (set by pre/post hooks) */
  callee?: Object;
}

JSX Transformation Features

The helper supports comprehensive JSX-to-JavaScript transformation:

  • Element Conversion: Transforms JSX elements to function calls
  • Attribute Processing: Converts JSX attributes to object properties
  • Spread Operator Support: Handles JSX spread attributes with proper object merging
  • Namespace Rejection: Explicitly rejects unsupported JSX namespaced names
  • Child Element Processing: Processes nested JSX children automatically
  • Identifier Validation: Uses esutils for proper JavaScript identifier validation
  • Hook System: Provides pre and post processing hooks for customization

Error Handling

The helper provides clear error handling:

// Throws for unsupported JSX namespaced names
JSXNamespacedName(path) {
  throw path.buildCodeFrameError("Namespace tags are not supported. ReactJSX is not XML.");
}

// Validates useBuiltIns option type
if (typeof useBuiltIns !== "boolean") {
  throw new Error("transform-react-jsx currently only accepts a boolean option for useBuiltIns (defaults to false)");
}

Usage Examples

Basic JSX Transformation

import buildReactJSX from "babel-helper-builder-react-jsx";

// Simple visitor without options (opts can be undefined)
const visitor = buildReactJSX();

// The visitor will transform:
// <div className="container">Hello World</div>
// Into function calls (exact output depends on configuration)

Custom Processing with Hooks

import buildReactJSX from "babel-helper-builder-react-jsx";

const visitor = buildReactJSX({
  pre: function (state, file) {
    // Modify element processing before attributes are built
    if (state.tagName === "CustomComponent") {
      // Custom logic for specific components
      console.log("Processing custom component");
    }
  },
  
  post: function (state, file) {
    // Set the callee to customize the function call
    state.callee = t.memberExpression(
      t.identifier("React"),
      t.identifier("createElement")
    );
  }
});

Integration with Babel Plugin

import buildReactJSX from "babel-helper-builder-react-jsx";

export default function myReactPlugin() {
  return {
    name: "my-react-transform",
    visitor: buildReactJSX({
      pre: function (state, file) {
        // Set up the callee for React.createElement
        state.callee = t.memberExpression(
          t.identifier("React"),
          t.identifier("createElement")
        );
      }
    })
  };
}

Dependencies

  • babel-runtime: ^6.26.0 - Babel runtime helpers
  • babel-types: ^6.26.0 - AST node types and utilities
  • esutils: ^2.0.2 - ECMAScript utilities for identifier validation

docs

index.md

tile.json