jsxpression 0.1.0

package/src/jsx.ts

@@ -0,0 +1,161 @@
+import type {
+  ArrayExpression,
+  ArrowFunctionExpression,
+  BinaryExpression,
+  CallExpression,
+  ConditionalExpression,
+  Identifier,
+  Literal,
+  LogicalExpression,
+  MemberExpression,
+  ObjectExpression,
+  UnaryExpression,
+} from "acorn";
+
+export type JSXStringLiteral = {
+  type: "Literal";
+  value: string;
+};
+
+export type JSXNumberLiteral = {
+  type: "Literal";
+  value: number;
+};
+
+export type JSXBooleanLiteral = {
+  type: "Literal";
+  value: boolean;
+};
+
+export type JSXNullLiteral = {
+  type: "Literal";
+  value: null;
+};
+
+export type JSXLiteral = JSXStringLiteral | JSXNumberLiteral | JSXBooleanLiteral | JSXNullLiteral;
+
+export type JSXAttributeValue = JSXLiteral | JSXExpressionContainer;
+
+export type JSXNameNode =
+  | { type: "JSXIdentifier"; name: string }
+  | { type: "JSXMemberExpression"; object: JSXNameNode; property: JSXNameNode };
+
+export type JSXAttribute = {
+  type: "JSXAttribute";
+  name: {
+    name: string;
+  };
+  value?: JSXAttributeValue;
+};
+
+export type JSXSpreadAttribute = {
+  type: "JSXSpreadAttribute";
+  argument: JSXNode;
+};
+
+export type JSXOpeningElement = {
+  type: "JSXOpeningElement";
+  name: {
+    name: string;
+  };
+  attributes: (JSXAttribute | JSXSpreadAttribute)[];
+};
+
+export type JSXClosingElement = {
+  type: "JSXClosingElement";
+  name: { name: string };
+};
+
+export type JSXElement = {
+  type: "JSXElement";
+  openingElement: JSXOpeningElement;
+  closingElement?: JSXClosingElement;
+  children: JSXNode[];
+};
+
+export type JSXFragment = {
+  type: "JSXFragment";
+  children: JSXNode[];
+};
+
+export type JSXText = {
+  type: "JSXText";
+  value: string;
+};
+
+export type JSXEmptyExpression = {
+  type: "JSXEmptyExpression";
+  start: number;
+  end: number;
+};
+
+export type JSXExpression =
+  | ArrayExpression
+  | ArrowFunctionExpression
+  | BinaryExpression
+  | CallExpression
+  | ConditionalExpression
+  | Identifier
+  | JSXElement
+  | JSXFragment
+  | Literal
+  | LogicalExpression
+  | MemberExpression
+  | ObjectExpression
+  | UnaryExpression;
+
+export type JSXExpressionContainer = {
+  type: "JSXExpressionContainer";
+  expression: JSXExpression | JSXEmptyExpression;
+};
+
+export type JSXNode = JSXElement | JSXFragment | JSXText | JSXEmptyExpression | JSXExpressionContainer;
+
+export type JSXRoot = JSXElement | JSXFragment | JSXExpressionContainer;
+
+export type JSXNodeWithChildren = JSXElement | JSXFragment;
+export type JSXLeafNode = JSXText | JSXEmptyExpression;
+
+export type JSXExpressionHost = JSXExpressionContainer;
+
+export type GetAttributeValue<T extends JSXAttribute> = T["value"];
+
+export function isJsxElement(value: unknown): value is JSXElement {
+  return (value as JSXElement)?.type === "JSXElement";
+}
+
+export function isJsxFragment(value: unknown): value is JSXFragment {
+  return (value as JSXFragment)?.type === "JSXFragment";
+}
+
+export function isJsxRoot(value: unknown): value is JSXRoot {
+  return isJsxElement(value) || isJsxFragment(value) || isJsxExpressionContainer(value);
+}
+
+export function isJsxAttribute(value: unknown): value is JSXAttribute {
+  return (value as JSXAttribute)?.type === "JSXAttribute";
+}
+
+export function isJsxLiteral(value: unknown): value is JSXLiteral {
+  return (value as JSXLiteral)?.type === "Literal";
+}
+
+export function isJsxExpressionContainer(value: unknown): value is JSXExpressionContainer {
+  return (value as JSXExpressionContainer)?.type === "JSXExpressionContainer";
+}
+
+export function isJsxEmptyExpression(value: unknown): value is JSXEmptyExpression {
+  return (value as JSXEmptyExpression)?.type === "JSXEmptyExpression";
+}
+
+export function isJsxText(value: unknown): value is JSXText {
+  return (value as JSXText)?.type === "JSXText";
+}
+
+export function isJsxNodeWithChildren(value: JSXNode): value is JSXNodeWithChildren {
+  return isJsxElement(value) || isJsxFragment(value);
+}
+
+export function isJsxLeafNode(value: JSXNode): value is JSXLeafNode {
+  return (value as JSXText)?.type === "JSXText" || isJsxEmptyExpression(value);
+}

package/src/parse/index.ts

@@ -0,0 +1,2 @@
+export { parse } from "./parse";
+export { ParseError } from "./parse-error";

package/src/parse/parse-error.ts

@@ -0,0 +1,14 @@
+type Loc = {
+  line: number;
+  column: number;
+};
+
+export class ParseError extends Error {
+  readonly loc?: Loc;
+
+  constructor(message: string, loc?: Loc) {
+    super(message);
+    this.name = "ParseError";
+    this.loc = loc;
+  }
+}

package/src/parse/parse.test.ts

@@ -0,0 +1,99 @@
+import { describe, it, expect } from "vitest";
+import { parse } from "./parse";
+import { ParseError } from "./parse-error";
+
+describe("parse", () => {
+  it("should parse valid JSX element", () => {
+    const result = parse("<Text x={10}>Hello</Text>");
+
+    expect(result.type).toBe("Program");
+    expect(result.body).toHaveLength(1);
+    expect(result.body[0].type).toBe("ExpressionStatement");
+  });
+
+  it("should parse JSX fragment", () => {
+    const result = parse("<><Text>A</Text><Text>B</Text></>");
+
+    expect(result.type).toBe("Program");
+    expect(result.body[0].type).toBe("ExpressionStatement");
+  });
+
+  it("should throw ParseError with position for syntax error", () => {
+    expect(() => parse("<Text>Unclosed")).toThrow(ParseError);
+
+    try {
+      parse("<Text>Unclosed");
+    } catch (error) {
+      expect(error).toBeInstanceOf(ParseError);
+    }
+  });
+
+  it("should parse nested JSX", () => {
+    const result = parse("<Outer><Inner><Deep>Text</Deep></Inner></Outer>");
+
+    expect(result.type).toBe("Program");
+    expect(result.body[0].type).toBe("ExpressionStatement");
+  });
+
+  it("should parse JSX with expressions", () => {
+    const result = parse("<Text>{props.value}</Text>");
+
+    expect(result.type).toBe("Program");
+    expect(result.body[0].type).toBe("ExpressionStatement");
+  });
+
+  it("should parse JSX with complex expressions", () => {
+    const result = parse("<Text>{data.items.map(x => x * 2).join(', ')}</Text>");
+
+    expect(result.type).toBe("Program");
+    expect(result.body[0].type).toBe("ExpressionStatement");
+  });
+
+  it("should parse JSX with attributes", () => {
+    const result = parse('<Text x={10} y="hello" z={data.value}>Content</Text>');
+
+    expect(result.type).toBe("Program");
+    expect(result.body[0].type).toBe("ExpressionStatement");
+  });
+
+  it("should parse self-closing JSX elements", () => {
+    const result = parse("<Input value={data.name} />");
+
+    expect(result.type).toBe("Program");
+    expect(result.body[0].type).toBe("ExpressionStatement");
+  });
+
+  it("should parse JSX with conditional expressions", () => {
+    const result = parse("<Text>{data.show ? 'visible' : 'hidden'}</Text>");
+
+    expect(result.type).toBe("Program");
+    expect(result.body[0].type).toBe("ExpressionStatement");
+  });
+
+  it("should parse empty JSX expressions", () => {
+    const result = parse("<Text>{}</Text>");
+
+    expect(result.type).toBe("Program");
+    expect(result.body[0].type).toBe("ExpressionStatement");
+  });
+
+  it("should preserve location information in errors", () => {
+    try {
+      parse("<Text>Unclosed");
+      throw new Error("Should have thrown ParseError");
+    } catch (error) {
+      expect(error).toBeInstanceOf(ParseError);
+      if (error instanceof ParseError && error.loc) {
+        expect(error.loc).toBeDefined();
+        expect(error.loc.line).toBe(1);
+        expect(error.loc.column).toBe(6);
+      }
+    }
+  });
+
+  it("should handle invalid JSX syntax", () => {
+    expect(() => parse("<>")).toThrow(ParseError);
+    expect(() => parse("<Text><")).toThrow(ParseError);
+    expect(() => parse("<Text attr>")).toThrow(ParseError);
+  });
+});

package/src/parse/parse.ts

@@ -0,0 +1,40 @@
+import { Parser, type Program } from "acorn";
+import jsx from "acorn-jsx";
+import { ParseError } from "./parse-error";
+
+const JSXParser = Parser.extend(jsx());
+
+export function parse(source: string): Program {
+  try {
+    return JSXParser.parse(source, {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      locations: true,
+      allowReturnOutsideFunction: true,
+    });
+  } catch (error: unknown) {
+    // Acorn throws syntax errors with location info when parsing fails.
+    // We steal this info and pass it to our own ParseError.
+    if (isAcornError(error)) {
+      // Remove location (the line:column part) from message if present
+      const message = error.message.replace(ACORN_LOCATION_SUFFIX_RX, "");
+
+      throw new ParseError(message, error.loc);
+    }
+
+    throw new ParseError(error instanceof Error ? error.message : "Parsing failed");
+  }
+}
+
+const ACORN_LOCATION_SUFFIX_RX = /\s+\(\d+:\d+\)$/;
+
+function isAcornError(error: unknown): error is AcornError {
+  return error instanceof Error && (error as AcornError).loc !== undefined;
+}
+
+type AcornError = Error & {
+  loc: {
+    line: number;
+    column: number;
+  };
+};