JSX Element Type Toolkit

A small utility for normalizing JSX element names and summarizing their usage across AST nodes.

Capabilities

Normalize element name

• Resolves the type for standard identifiers (<Button /> → "Button"), member expressions (<UI.Controls.Button /> → "UI.Controls.Button"), namespaced elements (<svg:path /> → "svg:path"), and fragments (<>...</> → "<>"). @test
• Throws a TypeError when given a node that is not a JSX element opening or fragment opening. @test

Categorize element shape

• Classifies elements as identifier, member, namespaced, or fragment while including the normalized type; e.g. <Button /> yields { type: "Button", category: "identifier" }, <UI.Controls.Button /> yields { type: "UI.Controls.Button", category: "member" }, <svg:path /> yields { type: "svg:path", category: "namespaced" }, and fragments yield { type: "<>", category: "fragment" }. @test

Summarize usage

• Given an array of JSX nodes, produces an object mapping normalized element types to their occurrence counts, counting fragments under "<>" and preserving namespaced/member text. Example: [<div />, <UI.Controls.Button />, <svg:path />, <>...</>] results in { div: 1, "UI.Controls.Button": 1, "svg:path": 1, "<>": 1 }. @test

Implementation

@generates

API

/**
 * Returns the normalized name for a JSX element or fragment.
 * Throws a TypeError when given a non-JSX opening node.
 */
export function resolveElementType(
  node: JSXElement | JSXOpeningElement | JSXOpeningFragment
): string;

/**
 * Returns both the normalized type and its category: 'identifier', 'member', 'namespaced', or 'fragment'.
 */
export function categorizeElement(
  node: JSXElement | JSXOpeningElement | JSXOpeningFragment
): { type: string; category: 'identifier' | 'member' | 'namespaced' | 'fragment' };

/**
 * Summarizes element usage by normalized type, counting each occurrence in the provided list.
 */
export function summarizeElementTypes(
  nodes: Array<JSXElement | JSXOpeningElement | JSXOpeningFragment>
): Record<string, number>;

Dependencies { .dependencies }

jsx-ast-utils { .dependency }

Utilities for inspecting JSX AST nodes, including element name resolution and fragment awareness.