jsxpression 0.1.28 → 0.1.31

package/src/evaluate/evaluate.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import { evaluate, type EvaluateOptions } from "./evaluate.js";
 import { compile } from "../compile/index.js";
 import { parse } from "../parse/index.js";
-import { Schema } from "../schema.js";
+import type { Schema } from "../schema.js";
 
 import { EvaluationError } from "./evaluation-error.js";
 
@@ -32,7 +32,7 @@ describe("evaluate", () => {
       children: props.children,
     });
 
-    const result = compileAndEvaluate("<Test x={data.x} y={data.y}>Hello</Test>", {
+    const result = compileAndEvaluate("<Test x={x} y={y}>Hello</Test>", {
       data: { x: 10, y: 20 },
       components: {
         Test: TestComponent,
@@ -53,7 +53,7 @@ describe("evaluate", () => {
       children: [],
     });
 
-    const result = compileAndEvaluate("<Test value={Math.floor(data.x * Math.PI)}>Text</Test>", {
+    const result = compileAndEvaluate("<Test value={Math.floor(x * Math.PI)}>Text</Test>", {
       data: { x: 5 },
       components: {
         Test: TestComponent,
@@ -105,7 +105,7 @@ describe("evaluate", () => {
       children: props.children,
     });
 
-    const result = compileAndEvaluate("<Outer x={data.x}><Inner y={data.y}>Text</Inner></Outer>", {
+    const result = compileAndEvaluate("<Outer x={x}><Inner y={y}>Text</Inner></Outer>", {
       data: { x: 10, y: 20 },
       components: {
         Outer: OuterComponent,
@@ -152,7 +152,7 @@ describe("evaluate", () => {
       children: [],
     });
 
-    const result = compileAndEvaluate("<Test msg={data.show ? 'visible' : 'hidden'}>Text</Test>", {
+    const result = compileAndEvaluate("<Test msg={show ? 'visible' : 'hidden'}>Text</Test>", {
       data: { show: true },
       components: {
         Test: TestComponent,
@@ -169,7 +169,7 @@ describe("evaluate", () => {
       children: [],
     });
 
-    const result = compileAndEvaluate("<Test values={data.items.filter(x => x > 2).map(x => x * 2)}>Text</Test>", {
+    const result = compileAndEvaluate("<Test values={items.filter(x => x > 2).map(x => x * 2)}>Text</Test>", {
       data: { items: [1, 2, 3, 4, 5] },
       components: {
         Test: TestComponent,
@@ -180,7 +180,7 @@ describe("evaluate", () => {
   });
 
   it("should handle runtime errors gracefully", () => {
-    const compiled = compile(parse("<Test value={data.missing.nested}>Text</Test>"));
+    const compiled = compile(parse("<Test value={missing.nested}>Text</Test>"));
     const TestComponent = (): Node => ({ type: "Test", props: {}, children: [] });
     const schema = createPermissiveSchema(["Test"]);
 
@@ -201,7 +201,7 @@ describe("evaluate", () => {
       children: [],
     });
 
-    const result = compileAndEvaluate("<Test msg={data.name || 'Anonymous'}>Text</Test>", {
+    const result = compileAndEvaluate("<Test msg={name || 'Anonymous'}>Text</Test>", {
       data: { name: "" },
       components: {
         Test: TestComponent,
@@ -218,7 +218,7 @@ describe("evaluate", () => {
       children: props.children,
     });
 
-    const result = compileAndEvaluate("<Test>{data.show && 'Visible'}{false}{'Always'}</Test>", {
+    const result = compileAndEvaluate("<Test>{show && 'Visible'}{false}{'Always'}</Test>", {
       data: { show: true },
       components: {
         Test: TestComponent,
@@ -246,7 +246,7 @@ describe("evaluate", () => {
       children: props.children,
     });
 
-    const result = compileAndEvaluate("<Test>{}{data.value}{}</Test>", {
+    const result = compileAndEvaluate("<Test>{}{value}{}</Test>", {
       data: { value: "hello" },
       components: { Test: TestComponent },
     });
@@ -262,7 +262,7 @@ describe("evaluate", () => {
     });
 
     const result = compileAndEvaluate(
-      "<Test values={data.items.filter(x => x > 2).map(x => x * 2).join(', ')}>Text</Test>",
+      "<Test values={items.filter(x => x > 2).map(x => x * 2).join(', ')}>Text</Test>",
       {
         data: { items: [1, 2, 3, 4, 5] },
         components: { Test: TestComponent },
@@ -290,7 +290,7 @@ describe("evaluate", () => {
       children: [],
     });
 
-    const result = compileAndEvaluate('<Test msg={"Hello " + data.name}>Text</Test>', {
+    const result = compileAndEvaluate('<Test msg={"Hello " + name}>Text</Test>', {
       data: { name: "World" },
       components: { Test: TestComponent },
     });
@@ -305,7 +305,7 @@ describe("evaluate", () => {
       children: [],
     });
 
-    const result = compileAndEvaluate("<Test value={data.x + data.y * 2}>Text</Test>", {
+    const result = compileAndEvaluate("<Test value={x + y * 2}>Text</Test>", {
       data: { x: 5, y: 3 },
       components: { Test: TestComponent },
     });
@@ -320,11 +320,273 @@ describe("evaluate", () => {
       children: props.children,
     });
 
-    const result = compileAndEvaluate("<Test>Hello {data.name}!</Test>", {
+    const result = compileAndEvaluate("<Test>Hello {name}!</Test>", {
       data: { name: "World" },
       components: { Test: TestComponent },
     });
 
     expect(result.children).toEqual(["Hello", "World", "!"]);
   });
+
+  describe("const declarations", () => {
+    it("should evaluate const with literal value", () => {
+      const TestComponent = (props: any): Node => ({
+        type: "Test",
+        props,
+        children: [],
+      });
+
+      const result = compileAndEvaluate("const x = 42;\nreturn <Test value={x}>Text</Test>", {
+        components: { Test: TestComponent },
+      });
+
+      expect(result.props!.value).toBe(42);
+    });
+
+    it("should evaluate const with computed expression", () => {
+      const TestComponent = (props: any): Node => ({
+        type: "Test",
+        props,
+        children: [],
+      });
+
+      const result = compileAndEvaluate("const a = x + 1;\nconst b = a * 2;\nreturn <Test value={b}>Text</Test>", {
+        data: { x: 3 },
+        components: { Test: TestComponent },
+      });
+
+      expect(result.props!.value).toBe(8); // (3+1)*2
+    });
+
+    it("should evaluate const referencing data", () => {
+      const TestComponent = (props: any): Node => ({
+        type: "Test",
+        props,
+        children: [],
+      });
+
+      const result = compileAndEvaluate("const greeting = 'Hello ' + name;\nreturn <Test msg={greeting}>Text</Test>", {
+        data: { name: "World" },
+        components: { Test: TestComponent },
+      });
+
+      expect(result.props!.msg).toBe("Hello World");
+    });
+
+    it("should evaluate const with computed array", () => {
+      const TestComponent = (props: any): Node => ({
+        type: "Test",
+        props,
+        children: [],
+      });
+
+      const result = compileAndEvaluate(
+        "const filtered = items.filter(x => x > 2);\nreturn <Test count={filtered.length}>Text</Test>",
+        {
+          data: { items: [1, 2, 3, 4, 5] },
+          components: { Test: TestComponent },
+        }
+      );
+
+      expect(result.props!.count).toBe(3);
+    });
+  });
+
+  describe("function declarations", () => {
+    it("should evaluate user-defined component", () => {
+      const Span = (props: any): Node => ({
+        type: "Span",
+        props: {},
+        children: props.children,
+      });
+
+      const result = compileAndEvaluate(
+        'function Badge({ label }) {\n  return <Span>{label}</Span>\n}\nreturn <Badge label="hello" />',
+        {
+          components: { Span },
+        }
+      );
+
+      expect(result.type).toBe("Span");
+      expect(result.children).toEqual(["hello"]);
+    });
+
+    it("should evaluate function with const inside", () => {
+      const Span = (props: any): Node => ({
+        type: "Span",
+        props,
+        children: [],
+      });
+
+      const result = compileAndEvaluate(
+        "function Doubled({ value }) {\n  const d = value * 2;\n  return <Span result={d} />\n}\nreturn <Doubled value={5} />",
+        {
+          components: { Span },
+        }
+      );
+
+      expect(result.props!.result).toBe(10);
+    });
+
+    it("should evaluate nested user-defined components", () => {
+      const Span = (props: any): Node => ({
+        type: "Span",
+        props: {},
+        children: props.children,
+      });
+
+      const Div = (props: any): Node => ({
+        type: "Div",
+        props: {},
+        children: props.children,
+      });
+
+      const result = compileAndEvaluate(
+        'function Label({ text }) {\n  return <Span>{text}</Span>\n}\nfunction Card({ title }) {\n  return <Div><Label text={title} /></Div>\n}\nreturn <Card title="hi" />',
+        {
+          components: { Span, Div },
+        }
+      );
+
+      expect(result.type).toBe("Div");
+      expect(result.children).toHaveLength(1);
+      expect((result.children[0] as Node).type).toBe("Span");
+      expect((result.children[0] as Node).children).toEqual(["hi"]);
+    });
+
+    it("should evaluate function with children", () => {
+      const Div = (props: any): Node => ({
+        type: "Div",
+        props: {},
+        children: props.children,
+      });
+
+      const Span = (props: any): Node => ({
+        type: "Span",
+        props: {},
+        children: props.children,
+      });
+
+      const result = compileAndEvaluate(
+        "function Wrapper({ children }) {\n  return <Div>{children}</Div>\n}\nreturn <Wrapper><Span>inside</Span></Wrapper>",
+        {
+          components: { Div, Span },
+        }
+      );
+
+      expect(result.type).toBe("Div");
+      expect(result.children).toHaveLength(1);
+      expect((result.children[0] as Node).type).toBe("Span");
+    });
+
+    it("should evaluate function with default parameter values", () => {
+      const Span = (props: any): Node => ({
+        type: "Span",
+        props: {},
+        children: props.children,
+      });
+
+      const result = compileAndEvaluate(
+        "function Badge({ label = 'default' }) {\n  return <Span>{label}</Span>\n}\nreturn <Badge />",
+        {
+          components: { Span },
+        }
+      );
+
+      expect(result.children).toEqual(["default"]);
+    });
+
+    it("should evaluate function with data access", () => {
+      const Span = (props: any): Node => ({
+        type: "Span",
+        props: {},
+        children: props.children,
+      });
+
+      const result = compileAndEvaluate(
+        "function Greeting() {\n  return <Span>Hello {name}</Span>\n}\nreturn <Greeting />",
+        {
+          data: { name: "World" },
+          components: { Span },
+        }
+      );
+
+      expect(result.children).toEqual(["Hello", "World"]);
+    });
+  });
+
+  describe("const and function combined", () => {
+    it("should evaluate const used in function body", () => {
+      const Span = (props: any): Node => ({
+        type: "Span",
+        props,
+        children: [],
+      });
+
+      const result = compileAndEvaluate(
+        "const multiplier = 3;\nfunction Calc({ value }) {\n  return <Span result={value * multiplier} />\n}\nreturn <Calc value={4} />",
+        {
+          components: { Span },
+        }
+      );
+
+      expect(result.props!.result).toBe(12);
+    });
+
+    it("should evaluate function used in map with const", () => {
+      const Div = (props: any): Node => ({
+        type: "Div",
+        props: {},
+        children: props.children,
+      });
+
+      const Span = (props: any): Node => ({
+        type: "Span",
+        props: {},
+        children: props.children,
+      });
+
+      const result = compileAndEvaluate(
+        "function Item({ text }) {\n  return <Span>{text}</Span>\n}\nconst labels = items.map(i => i.name);\nreturn <Div>{labels.map(l => <Item text={l} />)}</Div>",
+        {
+          data: { items: [{ name: "a" }, { name: "b" }] },
+          components: { Div, Span },
+        }
+      );
+
+      expect(result.type).toBe("Div");
+      expect(result.children).toHaveLength(2);
+    });
+  });
+
+  describe("String builtin", () => {
+    it("should evaluate String() conversion", () => {
+      const TestComponent = (props: any): Node => ({
+        type: "Test",
+        props,
+        children: [],
+      });
+
+      const result = compileAndEvaluate("<Test value={String(42)}>Text</Test>", {
+        components: { Test: TestComponent },
+      });
+
+      expect(result.props!.value).toBe("42");
+    });
+
+    it("should evaluate String() with boolean", () => {
+      const TestComponent = (props: any): Node => ({
+        type: "Test",
+        props,
+        children: [],
+      });
+
+      const result = compileAndEvaluate("<Test value={String(flag)}>Text</Test>", {
+        data: { flag: true },
+        components: { Test: TestComponent },
+      });
+
+      expect(result.props!.value).toBe("true");
+    });
+  });
 });

package/src/evaluate/evaluate.ts

@@ -1,5 +1,5 @@
+import { canHaveChildren, isElementAllowed, type Schema } from "../schema.js";
 import { EvaluationError } from "./evaluation-error.js";
-import { Schema, isElementAllowed, canHaveChildren } from "../schema.js";
 
 export type ComponentDict = Record<string, Component>;
 
@@ -15,7 +15,7 @@ export type Node = {
   children: Node[];
 };
 
-export type H = (type: string, props?: PropsDict, ...children: Node[]) => Node;
+export type H = (type: string | Function, props?: PropsDict, ...children: Node[]) => Node;
 
 export type Component = (...args: any[]) => any;
 
@@ -25,7 +25,7 @@ export type Component = (...args: any[]) => any;
  * @template T - The return type of createElement function
  */
 export interface EvaluateOptions<T = any> {
-  /** Data object available as `data.*` in JSX expressions */
+  /** Data object whose keys become top-level variables in JSX expressions */
   data?: DataDict;
   /** Map of component names to component functions used in JSX */
   components?: ComponentDict;
@@ -35,14 +35,21 @@ export interface EvaluateOptions<T = any> {
   createElement?: CreateElement<T>;
 }
 
+const RESERVED_PARAMS = new Set(["h", "Math"]);
+const VALID_IDENTIFIER = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+
 export function evaluate<T = any>(source: string, schema: Schema, options: EvaluateOptions<T>): T {
   const { data = {}, components = {}, functions = {}, createElement } = options;
 
+  const dataKeys = Object.keys(data);
+  const functionKeys = Object.keys(functions);
+  validateParamKeys(dataKeys, functionKeys);
+
   const h = createH(components, createElement || defaultCreateElement, schema);
-  const frozen = deepFreezeData(data);
+  const frozen = deepFreezeData(structuredClone(data));
   try {
     // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
-    return new Function("h", "Math", ...Object.keys(frozen), ...Object.keys(functions), source)(
+    return new Function("h", "Math", ...dataKeys, ...functionKeys, source)(
       h,
       Math,
       ...Object.values(frozen),
@@ -58,8 +65,25 @@ export function evaluate<T = any>(source: string, schema: Schema, options: Evalu
   }
 }
 
+function validateParamKeys(dataKeys: string[], functionKeys: string[]): void {
+  const seen = new Set<string>(RESERVED_PARAMS);
+  for (const key of [...dataKeys, ...functionKeys]) {
+    if (!VALID_IDENTIFIER.test(key)) {
+      throw new EvaluationError(`Invalid key "${key}": must be a valid JavaScript identifier`);
+    }
+    if (seen.has(key)) {
+      throw new EvaluationError(`Duplicate or reserved parameter name "${key}"`);
+    }
+    seen.add(key);
+  }
+}
+
 function createH(components: ComponentDict, createElement: CreateElement, schema: Schema): H {
   return function h(type, props, ...children) {
+    if (typeof type === "function") {
+      return createElement(type as Component, props, ...children.flat().filter(Boolean));
+    }
+
     const Component = components[type];
 
     if (!Component) {
@@ -78,14 +102,14 @@ function createH(components: ComponentDict, createElement: CreateElement, schema
 
 function deepFreezeData(obj: Record<string, unknown>): Record<string, unknown> {
   Object.freeze(obj);
-  Object.values(obj).filter(isDataDict).forEach(deepFreezeData);
+  for (const value of Object.values(obj)) {
+    if (typeof value === "object" && value !== null) {
+      deepFreezeData(value as Record<string, unknown>);
+    }
+  }
   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 Component({ ...props, children });
 }

package/src/jsx.ts

@@ -12,28 +12,11 @@ import type {
   UnaryExpression,
 } from "acorn";
 
-export type JSXStringLiteral = {
+export type JSXLiteral = {
   type: "Literal";
-  value: string;
+  value: string | number | boolean | null;
 };
 
-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 =
@@ -116,10 +99,6 @@ 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";
 }
@@ -136,10 +115,6 @@ 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";
 }
@@ -152,10 +127,6 @@ 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/parse.test.ts

@@ -43,28 +43,28 @@ describe("parse", () => {
   });
 
   it("should parse JSX with complex expressions", () => {
-    const result = parse("<Text>{data.items.map(x => x * 2).join(', ')}</Text>");
+    const result = parse("<Text>{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>');
+    const result = parse('<Text x={10} y="hello" z={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} />");
+    const result = parse("<Input value={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>");
+    const result = parse("<Text>{show ? 'visible' : 'hidden'}</Text>");
 
     expect(result.type).toBe("Program");
     expect(result.body[0].type).toBe("ExpressionStatement");

package/src/parse/parse.ts

@@ -1,12 +1,13 @@
 import { Parser, type Program } from "acorn";
-import jsx from "acorn-jsx";
+import { tsPlugin } from "acorn-typescript";
 import { ParseError } from "./parse-error.js";
 
-const JSXParser = Parser.extend(jsx());
+// @ts-expect-error acorn-typescript jsx option types mismatch
+const TSXParser = Parser.extend(tsPlugin({ jsx: true }));
 
 export function parse(source: string): Program {
   try {
-    return JSXParser.parse(source, {
+    return TSXParser.parse(source, {
       ecmaVersion: "latest",
       sourceType: "module",
       locations: true,