jsxpression 0.1.0

package/src/compile/compile.ts

@@ -0,0 +1,282 @@
+import type { Expression, PrivateIdentifier, Program, Super, Identifier, Literal } from "acorn";
+
+import {
+  isJsxElement,
+  isJsxFragment,
+  isJsxRoot,
+  isJsxText,
+  isJsxExpressionContainer,
+  isJsxEmptyExpression,
+  type JSXRoot,
+  type JSXElement,
+  type JSXFragment,
+  type JSXEmptyExpression,
+  type JSXNode,
+  type JSXAttribute,
+  type JSXSpreadAttribute,
+  type JSXNameNode,
+} from "../jsx";
+import { CompilationError } from "./compilation-error";
+
+type CompilableExpression = Expression | PrivateIdentifier | Super | JSXElement | JSXFragment | JSXEmptyExpression;
+
+export function compile(ast: Program): string {
+  const root = getRoot(ast);
+  const code = emitJsxRoot(root);
+
+  return `"use strict";return ${code};`;
+}
+
+function getRoot(ast: Program): JSXRoot {
+  for (const declaration of ast.body) {
+    if (declaration.type === "ExpressionStatement" && isJsxRoot(declaration.expression)) {
+      return declaration.expression;
+    }
+    if (declaration.type === "ReturnStatement" && declaration.argument && isJsxRoot(declaration.argument)) {
+      return declaration.argument;
+    }
+    // Handle bare expressions like {data.user.name} which parse as BlockStatement
+    if (declaration.type === "BlockStatement" && declaration.body.length === 1) {
+      const innerStatement = declaration.body[0];
+      if (innerStatement.type === "ExpressionStatement") {
+        // Create a synthetic JSXExpressionContainer for the bare expression
+        const syntheticContainer = {
+          type: "JSXExpressionContainer" as const,
+          expression: innerStatement.expression as CompilableExpression,
+        };
+        return syntheticContainer as JSXRoot;
+      }
+    }
+  }
+
+  throw CompilationError.fromNode("No root JSX element/fragment/expression found", ast);
+}
+
+function emitJsxRoot(node: JSXRoot): string {
+  if (isJsxElement(node)) {
+    return emitJsxElement(node);
+  }
+  if (isJsxFragment(node)) {
+    return emitJsxFragment(node);
+  }
+  // Handle bare expression containers like {data.user.name}
+  return emitExpression(node.expression);
+}
+
+function emitJsxElement(node: JSXElement): string {
+  const name = emitJsxName(node.openingElement.name as JSXNameNode);
+  const attributes = emitAttributes(node.openingElement.attributes);
+  const children = emitJsxChildren(node.children);
+
+  if (children.length > 0) {
+    return `h(${name}, ${attributes}, ${children.join(", ")})`;
+  }
+
+  return `h(${name}, ${attributes})`;
+}
+
+function emitJsxFragment(node: JSXFragment): string {
+  const children = emitJsxChildren(node.children);
+  return `[${children.join(", ")}]`;
+}
+
+function emitJsxName(nameNode: JSXNameNode): string {
+  switch (nameNode.type) {
+    case "JSXIdentifier":
+      return JSON.stringify(nameNode.name);
+    case "JSXMemberExpression": {
+      const left = emitJsxName(nameNode.object);
+      const right = emitJsxName(nameNode.property);
+      return JSON.stringify(JSON.parse(left) + "." + JSON.parse(right));
+    }
+    default:
+      throw CompilationError.fromNode(`Unsupported JSX name: ${(nameNode as any).type}`, nameNode);
+  }
+}
+
+function emitAttributes(attributes: (JSXAttribute | JSXSpreadAttribute)[]): string {
+  const parts: string[] = [];
+  let currentObj: string[] = [];
+
+  const flushCurrent = (): void => {
+    if (currentObj.length) {
+      parts.push(`{ ${currentObj.join(", ")} }`);
+      currentObj = [];
+    }
+  };
+
+  for (const attribute of attributes) {
+    if (attribute.type === "JSXSpreadAttribute") {
+      flushCurrent();
+      parts.push(`(${emitExpression(attribute.argument as CompilableExpression)})`);
+      continue;
+    }
+
+    if (attribute.type !== "JSXAttribute") {
+      throw CompilationError.fromNode("Only simple JSX attributes allowed", attribute);
+    }
+
+    const key = attribute.name?.name as string;
+
+    let value: string;
+    if (!attribute.value) {
+      value = "true";
+    } else if (attribute.value.type === "Literal") {
+      value = JSON.stringify(attribute.value.value);
+    } else if (attribute.value.type === "JSXExpressionContainer") {
+      value = emitExpression(attribute.value.expression as CompilableExpression);
+    } else {
+      throw CompilationError.fromNode("Unsupported attribute value", attribute.value);
+    }
+
+    currentObj.push(`${key}: ${value}`);
+  }
+
+  flushCurrent();
+
+  if (parts.length === 0) {
+    return "null";
+  }
+
+  if (parts.length === 1) {
+    return parts[0];
+  }
+
+  return `Object.assign({}, ${parts.join(", ")})`;
+}
+
+function emitJsxChildren(children: JSXNode[]): string[] {
+  const result: string[] = [];
+
+  for (const child of children) {
+    if (isJsxText(child)) {
+      const text = normalizeJsxText(child.value);
+      if (text) {
+        result.push(JSON.stringify(text));
+      }
+    } else if (isJsxExpressionContainer(child)) {
+      // Skip empty expressions {} - they don't contribute any content
+      if (!isJsxEmptyExpression(child.expression)) {
+        result.push(emitExpression(child.expression as CompilableExpression));
+      }
+    } else if (isJsxElement(child)) {
+      result.push(emitJsxElement(child));
+    } else if (isJsxFragment(child)) {
+      result.push(emitJsxFragment(child));
+    }
+  }
+
+  return result;
+}
+
+const TRAILING_PLUS_RX = /\+\s*\+\s*$/;
+
+function emitExpression(node: CompilableExpression): string {
+  switch (node.type) {
+    case "Literal":
+      return JSON.stringify(node.value);
+    case "Identifier":
+      return node.name;
+    case "TemplateLiteral": {
+      const bits: string[] = [];
+      node.quasis.forEach((quasi, index) => {
+        bits.push(JSON.stringify(quasi.value.cooked ?? ""));
+
+        if (node.expressions.length > index) {
+          bits.push(`+(${emitExpression(node.expressions[index])})+`);
+        }
+      });
+
+      return bits.join("").replace(TRAILING_PLUS_RX, "") || '""';
+    }
+    case "ParenthesizedExpression":
+      return `(${emitExpression(node.expression)})`;
+    case "UnaryExpression":
+      return `${node.operator}${emitExpression(node.argument)}`;
+    case "BinaryExpression":
+    case "LogicalExpression":
+      return `(${emitExpression(node.left)} ${node.operator} ${emitExpression(node.right)})`;
+    case "ConditionalExpression":
+      return `(${emitExpression(node.test)}?${emitExpression(node.consequent)}:${emitExpression(node.alternate)})`;
+    case "ArrayExpression":
+      return `[${node.elements
+        .map((element) => {
+          if (!element) {
+            return "undefined";
+          }
+          if (element.type === "SpreadElement") {
+            return `...${emitExpression(element.argument as CompilableExpression)}`;
+          }
+          return emitExpression(element as CompilableExpression);
+        })
+        .join(", ")}]`;
+    case "ObjectExpression": {
+      const keyValuePairs = node.properties
+        .map((property) => {
+          if (property.type === "SpreadElement") {
+            return `...${emitExpression(property.argument as CompilableExpression)}`;
+          }
+          // analyze() ensures these are simple properties
+          const prop = property as any; // analyze() guarantees Property type
+          const key = getAstKeyString(prop.key as Identifier | Literal);
+          return `${key}: ${emitExpression(prop.value)}`;
+        })
+        .join(", ");
+      return `{ ${keyValuePairs} }`;
+    }
+    case "MemberExpression": {
+      const obj = emitExpression(node.object);
+      let prop: string;
+      if (node.computed) {
+        prop = `[${emitExpression(node.property)}]`;
+      } else {
+        prop = `.${getAstKeyString(node.property as Identifier | Literal)}`;
+      }
+      return `${obj}${prop}`;
+    }
+    case "CallExpression": {
+      const callee = emitExpression(node.callee);
+      const args = node.arguments
+        .map((argument) => {
+          if (argument.type === "SpreadElement") {
+            return `...${emitExpression(argument.argument as CompilableExpression)}`;
+          }
+          return emitExpression(argument as CompilableExpression);
+        })
+        .join(", ");
+      return `${callee}(${args})`;
+    }
+    case "ArrowFunctionExpression": {
+      const params = node.params.map((param) => emitExpression(param as CompilableExpression)).join(", ");
+      // analyze() ensures this is not a BlockStatement
+      const body = emitExpression(node.body as CompilableExpression);
+      return `(${params}) => ${body}`;
+    }
+    case "JSXElement":
+      return emitJsxElement(node);
+    case "JSXFragment":
+      return emitJsxFragment(node);
+    case "JSXEmptyExpression":
+      return "null";
+    default:
+      throw CompilationError.fromNode(`Unsupported expression: ${node?.type}`, node);
+  }
+}
+
+function getAstKeyString(node: Identifier | Literal): string {
+  if (node.type === "Identifier") {
+    return node.name;
+  } else if (node.type === "Literal") {
+    return JSON.stringify(node.value);
+  } else {
+    // This should never happen due to type constraints but
+    // if JSX ever changes this could be possible!
+    throw CompilationError.fromNode("Unsupported key type", node);
+  }
+}
+
+const WHITESPACE_COLLAPSER_RX = /\s+/g;
+
+function normalizeJsxText(value: string): string {
+  return value.replace(WHITESPACE_COLLAPSER_RX, " ").trim();
+}

package/src/compile/index.ts

@@ -0,0 +1,2 @@
+export { compile } from "./compile";
+export { CompilationError } from "./compilation-error";

package/src/evaluate/evaluate.test.ts

@@ -0,0 +1,316 @@
+import { describe, it, expect, vi } from "vitest";
+import { evaluate, type EvaluateOptions } from "./evaluate";
+import { compile } from "../compile";
+import { parse } from "../parse";
+
+import { EvaluationError } from "./evaluation-error";
+
+type Node = {
+  type: string;
+  props: Record<string, unknown>;
+  children: Node[];
+};
+
+describe("evaluate", () => {
+  const compileAndEvaluate = (source: string, options: EvaluateOptions = {}): Node => {
+    return evaluate(compile(parse(source)), options);
+  };
+
+  it("should evaluate JSX with props", () => {
+    const TestComponent = (props: any, ...children: any[]): Node => ({
+      type: "TestComponent",
+      props,
+      children,
+    });
+
+    const result = compileAndEvaluate("<Test x={data.x} y={data.y}>Hello</Test>", {
+      data: { x: 10, y: 20 },
+      components: {
+        Test: TestComponent,
+      },
+    });
+
+    expect(result).toEqual({
+      type: "TestComponent",
+      props: { x: 10, y: 20 },
+      children: ["Hello"],
+    });
+  });
+
+  it("should evaluate JSX with Math operations", () => {
+    const TestComponent = (props: any): Node => ({
+      type: "TestComponent",
+      props,
+      children: [],
+    });
+
+    const result = compileAndEvaluate("<Test value={Math.floor(data.x * Math.PI)}>Text</Test>", {
+      data: { x: 5 },
+      components: {
+        Test: TestComponent,
+      },
+    });
+
+    expect(result.props!.value).toBe(15); // floor(5 * 3.14159...) = 15
+  });
+
+  it("should throw EvaluationError for unknown component", () => {
+    const compiled = compile(parse("<UnknownComponent>Hello</UnknownComponent>"));
+
+    expect(() => evaluate(compiled, { components: {} })).toThrow(EvaluationError);
+    expect(() => evaluate(compiled, { components: {} })).toThrow('component "UnknownComponent" is not allowed');
+  });
+
+  it("should deep-freeze props to prevent mutations", () => {
+    const TestComponent = (props: any): Node => {
+      expect(() => {
+        props.nested.value = 999;
+      }).toThrow();
+      return { type: "Test", props, children: [] };
+    };
+
+    const compiled = compile(parse("<Test>Hello</Test>"));
+
+    evaluate(compiled, {
+      data: { nested: { value: 42 } },
+      components: {
+        Test: TestComponent,
+      },
+    });
+  });
+
+  it("should evaluate nested elements", () => {
+    const OuterComponent = (props: any, ...children: any[]): Node => ({
+      type: "Outer",
+      props,
+      children,
+    });
+
+    const InnerComponent = (props: any, ...children: any[]): Node => ({
+      type: "Inner",
+      props,
+      children,
+    });
+
+    const result = compileAndEvaluate("<Outer x={data.x}><Inner y={data.y}>Text</Inner></Outer>", {
+      data: { x: 10, y: 20 },
+      components: {
+        Outer: OuterComponent,
+        Inner: InnerComponent,
+      },
+    });
+
+    expect(result.type).toBe("OuterComponent");
+    expect(result.props).toEqual({ x: 10 });
+    expect(result.children).toHaveLength(1);
+    const innerNode = result.children[0] as Node;
+    expect(innerNode.type).toBe("InnerComponent");
+    expect(innerNode.props).toEqual({ y: 20 });
+    expect(innerNode.children).toEqual(["Text"]);
+  });
+
+  it("should use custom createElement when provided", () => {
+    const customCreateElement = (type: any, props: any, ...children: any[]): Node => ({
+      type: type.name || "Unknown",
+      props: { ...props, custom: true },
+      children,
+    });
+
+    const TestComponent = (): Node => ({ type: "Test", props: {}, children: [] });
+
+    const result = compileAndEvaluate("<Test x={10}>Hello</Test>", {
+      components: {
+        Test: TestComponent,
+      },
+      createElement: customCreateElement,
+    });
+
+    expect(result).toEqual({
+      type: "TestComponent",
+      props: { x: 10, custom: true },
+      children: ["Hello"],
+    });
+  });
+
+  it("should evaluate conditional expressions with props", () => {
+    const TestComponent = (props: any): Node => ({
+      type: "TestComponent",
+      props,
+      children: [],
+    });
+
+    const result = compileAndEvaluate("<Test msg={data.show ? 'visible' : 'hidden'}>Text</Test>", {
+      data: { show: true },
+      components: {
+        Test: TestComponent,
+      },
+    });
+
+    expect(result.props!.msg).toBe("visible");
+  });
+
+  it("should evaluate array methods on props", () => {
+    const TestComponent = (props: any): Node => ({
+      type: "TestComponent",
+      props,
+      children: [],
+    });
+
+    const result = compileAndEvaluate("<Test values={data.items.filter(x => x > 2).map(x => x * 2)}>Text</Test>", {
+      data: { items: [1, 2, 3, 4, 5] },
+      components: {
+        Test: TestComponent,
+      },
+    });
+
+    expect(result.props!.values).toEqual([6, 8, 10]);
+  });
+
+  it("should handle runtime errors gracefully", () => {
+    const compiled = compile(parse("<Test value={data.missing.nested}>Text</Test>"));
+    const TestComponent = (): Node => ({ type: "Test", props: {}, children: [] });
+
+    expect(() =>
+      evaluate(compiled, {
+        data: {},
+        components: {
+          Test: TestComponent,
+        },
+      })
+    ).toThrow(EvaluationError);
+  });
+
+  it("should evaluate logical operators with props", () => {
+    const TestComponent = (props: any): Node => ({
+      type: "TestComponent",
+      props,
+      children: [],
+    });
+
+    const result = compileAndEvaluate("<Test msg={data.name || 'Anonymous'}>Text</Test>", {
+      data: { name: "" },
+      components: {
+        Test: TestComponent,
+      },
+    });
+
+    expect(result.props!.msg).toBe("Anonymous");
+  });
+
+  it("should flatten and filter children correctly", () => {
+    const TestComponent = (props: any, ...children: any[]): Node => ({
+      type: "Test",
+      props,
+      children,
+    });
+
+    const result = compileAndEvaluate("<Test>{data.show && 'Visible'}{false}{'Always'}</Test>", {
+      data: { show: true },
+      components: {
+        Test: TestComponent,
+      },
+    });
+
+    expect(result.children).toEqual(["Visible", "Always"]);
+  });
+
+  it("should handle JSX fragments", () => {
+    const TestComponent = (): Node => ({ type: "Test", props: {}, children: [] });
+
+    const result = compileAndEvaluate("<><Test /><Test /></>", {
+      components: { Test: TestComponent },
+    });
+
+    expect(Array.isArray(result)).toBe(true);
+    expect(result).toHaveLength(2);
+  });
+
+  it("should handle empty JSX expressions", () => {
+    const TestComponent = (props: any, ...children: any[]): Node => ({
+      type: "Test",
+      props,
+      children,
+    });
+
+    const result = compileAndEvaluate("<Test>{}{data.value}{}</Test>", {
+      data: { value: "hello" },
+      components: { Test: TestComponent },
+    });
+
+    expect(result.children).toEqual(["hello"]);
+  });
+
+  it("should evaluate complex nested expressions", () => {
+    const TestComponent = (props: any): Node => ({
+      type: "Test",
+      props,
+      children: [],
+    });
+
+    const result = compileAndEvaluate(
+      "<Test values={data.items.filter(x => x > 2).map(x => x * 2).join(', ')}>Text</Test>",
+      {
+        data: { items: [1, 2, 3, 4, 5] },
+        components: { Test: TestComponent },
+      }
+    );
+
+    expect(result.props!.values).toBe("6, 8, 10");
+  });
+
+  it("should pass correct parameters to custom createElement", () => {
+    const mockCreateElement = vi.fn();
+
+    compileAndEvaluate("<Test x={10}>Hello</Test>", {
+      components: { Test: () => ({ type: "Test", props: {}, children: [] }) },
+      createElement: mockCreateElement,
+    });
+
+    expect(mockCreateElement).toHaveBeenCalledWith(expect.any(Function), { x: 10 }, "Hello");
+  });
+
+  it("should handle string literals in expressions", () => {
+    const TestComponent = (props: any): Node => ({
+      type: "Test",
+      props,
+      children: [],
+    });
+
+    const result = compileAndEvaluate('<Test msg={"Hello " + data.name}>Text</Test>', {
+      data: { name: "World" },
+      components: { Test: TestComponent },
+    });
+
+    expect(result.props!.msg).toBe("Hello World");
+  });
+
+  it("should handle numeric operations", () => {
+    const TestComponent = (props: any): Node => ({
+      type: "Test",
+      props,
+      children: [],
+    });
+
+    const result = compileAndEvaluate("<Test value={data.x + data.y * 2}>Text</Test>", {
+      data: { x: 5, y: 3 },
+      components: { Test: TestComponent },
+    });
+
+    expect(result.props!.value).toBe(11); // 5 + (3 * 2)
+  });
+
+  it("should handle data access in children", () => {
+    const TestComponent = (props: any, ...children: any[]): Node => ({
+      type: "Test",
+      props,
+      children,
+    });
+
+    const result = compileAndEvaluate("<Test>Hello {data.name}!</Test>", {
+      data: { name: "World" },
+      components: { Test: TestComponent },
+    });
+
+    expect(result.children).toEqual(["Hello", "World", "!"]);
+  });
+});

package/src/evaluate/evaluate.ts

@@ -0,0 +1,81 @@
+import { EvaluationError } from "./evaluation-error";
+
+export type ComponentDict = Record<string, Component>;
+
+export type CreateElement<T = any> = (type: Component, props?: PropsDict, ...children: any[]) => T;
+
+export type PropsDict = Record<string, unknown>;
+
+export type DataDict = Record<string, unknown>;
+
+export type Node = {
+  type: string;
+  props: PropsDict;
+  children: Node[];
+};
+
+export type H = (type: string, props?: PropsDict, ...children: Node[]) => Node;
+
+export type Component = (...args: any[]) => any;
+
+/**
+ * Configuration options for evaluating JSX expressions.
+ *
+ * @template T - The return type of createElement function
+ */
+export interface EvaluateOptions<T = any> {
+  /** Data object available as `data.*` in JSX expressions */
+  data?: DataDict;
+  /** Map of component names to component functions used in JSX */
+  components?: ComponentDict;
+  /** Function to create JSX elements (e.g., React.createElement, h) */
+  createElement?: CreateElement<T>;
+}
+
+export function evaluate<T = any>(source: string, options: EvaluateOptions<T>): T {
+  const { data = {}, components = {}, createElement } = options;
+
+  const h = createH(components, createElement || defaultCreateElement);
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
+    return new Function("h", "data", "Math", source)(h, deepFreezeData(data), Math) as T;
+  } catch (error: unknown) {
+    // We may have thrown an EvaluationError from createH()
+    if (error instanceof EvaluationError) {
+      throw error;
+    }
+
+    throw new EvaluationError(error instanceof Error ? error.message : "Evaluation failed");
+  }
+}
+
+function createH(components: ComponentDict, createElement: CreateElement): H {
+  return function h(type, props, ...children) {
+    const Component = components[type];
+
+    if (!Component) {
+      throw new EvaluationError(`component "${type}" is not allowed`);
+    }
+
+    return createElement(Component, props, ...children.flat().filter(Boolean));
+  };
+}
+
+function deepFreezeData(obj: DataDict): DataDict {
+  Object.freeze(obj);
+  Object.values(obj).filter(isDataDict).forEach(deepFreezeData);
+  return obj;
+}
+
+function isDataDict(value: any): value is DataDict {
+  return typeof value === "object" && value !== null;
+}
+
+function defaultCreateElement(Component: Component, props: PropsDict = {}, ...children: any[]): Node {
+  return {
+    type: Component.name,
+    props,
+    children,
+  };
+}

package/src/evaluate/evaluation-error.ts

@@ -0,0 +1,6 @@
+export class EvaluationError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "EvaluationError";
+  }
+}

package/src/evaluate/index.ts

@@ -0,0 +1,2 @@
+export { evaluate, type EvaluateOptions } from "./evaluate";
+export { EvaluationError } from "./evaluation-error";

package/src/index.ts

@@ -0,0 +1,10 @@
+export type { Schema, PropertySchema } from "./schema";
+
+export { ParseError } from "./parse";
+export { CompilationError } from "./compile";
+export { AnalysisError } from "./analyze";
+
+export { render, type RenderOptions } from "./render";
+export { validate, type ValidateOptions, type ValidateResult } from "./validate";
+
+export { generateTypeScriptDefinitions } from "./codegen";