jsxpression 0.1.28 → 0.1.31

package/src/render.test.ts

@@ -1,25 +1,25 @@
-import { describe, it, expect } from "vitest";
-import { render } from "./render.js";
-import { ParseError } from "./parse/index.js";
+import { describe, expect, it } from "vitest";
 import { AnalysisError } from "./analyze/index.js";
 import { EvaluationError } from "./evaluate/index.js";
+import { ParseError } from "./parse/index.js";
+import { render } from "./render.js";
 
 type TestNode = {
   type: string;
-  props?: Record<string, unknown>;
+  props: Record<string, unknown>;
   children: unknown[];
 };
 
 describe("render", () => {
   it("should render complete JSX pipeline successfully", () => {
-    const TestComponent = (props: { x: number; y: number }, ...children: any[]): TestNode => ({
+    const TestComponent = ({ children, ...props }: { x: number; y: number; children?: any[] }): TestNode => ({
       type: "TestComponent",
       props,
-      children,
+      children: children ?? [],
     });
 
     const result = render(
-      "<Test x={data.x} y={Math.floor(data.y)}>Hello</Test>",
+      "<Test x={x} y={Math.floor(y)}>Hello</Test>",
       {
         data: {
           x: { type: "number" },
@@ -53,7 +53,7 @@ describe("render", () => {
     });
 
     const result = render(
-      "<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: { type: "array", shape: { type: "number" } },
@@ -76,16 +76,16 @@ describe("render", () => {
   });
 
   it("should render nested JSX elements", () => {
-    const OuterComponent = (props: { x: number }, ...children: any[]): TestNode => ({
+    const OuterComponent = ({ children, ...props }: { x: number; children?: any[] }): TestNode => ({
       type: "OuterComponent",
       props,
-      children,
+      children: children ?? [],
     });
 
-    const InnerComponent = (props: { y: number }): TestNode => ({
+    const InnerComponent = ({ children, ...props }: { y: number; children?: any[] }): TestNode => ({
       type: "InnerComponent",
       props,
-      children: [],
+      children: children ?? [],
     });
 
     const result = render(
@@ -146,7 +146,7 @@ describe("render", () => {
 
   it("should render bare expression containers", () => {
     const result = render(
-      "{data.user.name}",
+      "{user.name}",
       {
         data: {
           user: {
@@ -169,7 +169,7 @@ describe("render", () => {
 
   it("should render bare mathematical expressions", () => {
     const result = render(
-      "{data.count * 2}",
+      "{count * 2}",
       {
         data: {
           count: { type: "number" },
@@ -187,7 +187,7 @@ describe("render", () => {
 
   it("should render bare method calls", () => {
     const result = render(
-      "{data.text.toUpperCase()}",
+      "{text.toUpperCase()}",
       {
         data: {
           text: { type: "string" },
@@ -205,7 +205,7 @@ describe("render", () => {
 
   it("should render bare complex expressions", () => {
     const result = render(
-      "{data.numbers.map(x => x * 2).join(', ')}",
+      "{numbers.map(x => x * 2).join(', ')}",
       {
         data: {
           numbers: {
@@ -225,7 +225,11 @@ describe("render", () => {
   });
 
   it("should propagate ParseError for syntax errors", () => {
-    const TestComponent = (): TestNode => ({ type: "Test", props: {}, children: [] });
+    const TestComponent = (): TestNode => ({
+      type: "Test",
+      props: {},
+      children: [],
+    });
 
     expect(() =>
       render(
@@ -245,7 +249,11 @@ describe("render", () => {
   });
 
   it("should propagate AnalysisError for disallowed identifiers", () => {
-    const TestComponent = (): TestNode => ({ type: "Test", props: {}, children: [] });
+    const TestComponent = (): TestNode => ({
+      type: "Test",
+      props: {},
+      children: [],
+    });
 
     expect(() =>
       render(
@@ -265,7 +273,11 @@ describe("render", () => {
   });
 
   it("should propagate AnalysisError for unknown JSX elements", () => {
-    const TestComponent = (): TestNode => ({ type: "Test", props: {}, children: [] });
+    const TestComponent = (): TestNode => ({
+      type: "Test",
+      props: {},
+      children: [],
+    });
 
     expect(() =>
       render(
@@ -285,11 +297,15 @@ describe("render", () => {
   });
 
   it("should propagate AnalysisError for disallowed methods", () => {
-    const TestComponent = (): TestNode => ({ type: "Test", props: {}, children: [] });
+    const TestComponent = (): TestNode => ({
+      type: "Test",
+      props: {},
+      children: [],
+    });
 
     expect(() =>
       render(
-        "<Test>{data.items.push(1)}</Test>",
+        "<Test>{items.push(1)}</Test>",
         {
           data: {
             items: {
@@ -312,7 +328,11 @@ describe("render", () => {
   });
 
   it("should propagate AnalysisError for unknown components", () => {
-    const TestComponent = (): TestNode => ({ type: "Test", props: {}, children: [] });
+    const TestComponent = (): TestNode => ({
+      type: "Test",
+      props: {},
+      children: [],
+    });
 
     expect(() =>
       render(
@@ -339,11 +359,15 @@ describe("render", () => {
   });
 
   it("should propagate EvaluationError for runtime errors", () => {
-    const TestComponent = (): TestNode => ({ type: "Test", props: {}, children: [] });
+    const TestComponent = (): TestNode => ({
+      type: "Test",
+      props: {},
+      children: [],
+    });
 
     expect(() =>
       render(
-        "<Test value={data.missing.nested}>Hello</Test>",
+        "<Test value={missing.nested}>Hello</Test>",
         {
           data: {
             missing: {
@@ -374,7 +398,11 @@ describe("render", () => {
   });
 
   it("should handle empty props", () => {
-    const TestComponent = (): TestNode => ({ type: "TestComponent", props: {}, children: [] });
+    const TestComponent = (): TestNode => ({
+      type: "TestComponent",
+      props: {},
+      children: [],
+    });
 
     const result = render(
       "<Test>Hello</Test>",
@@ -401,7 +429,7 @@ describe("render", () => {
     });
 
     const result = render(
-      "<Test msg={data.show ? 'visible' : 'hidden'}>Text</Test>",
+      "<Test msg={show ? 'visible' : 'hidden'}>Text</Test>",
       {
         data: {
           show: { type: "boolean" },
@@ -420,6 +448,427 @@ describe("render", () => {
       }
     );
 
-    expect(result.props!.msg).toBe("hidden");
+    expect(result.props.msg).toBe("hidden");
+  });
+
+  it("should tolerate TypeScript syntax in templates", () => {
+    const TestComponent = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+      type: "Test",
+      props,
+      children: children ? [children].flat() : [],
+    });
+
+    const result = render(
+      "interface Nice {\n  semi: true\n}\n\nreturn <Test x={10}>Hello</Test>",
+      {
+        data: {},
+        elements: {
+          Test: {
+            props: {
+              x: { type: "number" },
+            },
+          },
+        },
+      },
+      {
+        data: {},
+        components: { Test: TestComponent },
+      }
+    );
+
+    expect(result.type).toBe("Test");
+    expect(result.props.x).toBe(10);
+  });
+
+  describe("const declarations end-to-end", () => {
+    it("should render with const used in prop", () => {
+      const TestComponent = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Test",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "const doubled = count * 2;\nreturn <Test value={doubled}>Text</Test>",
+        {
+          data: {
+            count: { type: "number" },
+          },
+          elements: {
+            Test: {
+              props: {
+                value: { type: "number" },
+              },
+            },
+          },
+        },
+        {
+          data: { count: 7 },
+          components: { Test: TestComponent },
+        }
+      );
+
+      expect(result.props.value).toBe(14);
+    });
+
+    it("should render with const used in children", () => {
+      const TestComponent = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Test",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "const upper = name.toUpperCase();\nreturn <Test>{upper}</Test>",
+        {
+          data: {
+            name: { type: "string" },
+          },
+          elements: {
+            Test: { props: {} },
+          },
+        },
+        {
+          data: { name: "alice" },
+          components: { Test: TestComponent },
+        }
+      );
+
+      expect(result.children).toEqual(["ALICE"]);
+    });
+
+    it("should render with multiple consts chained", () => {
+      const TestComponent = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Test",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "const filtered = items.filter(x => x > 2);\nconst total = filtered.length;\nreturn <Test count={total}>Text</Test>",
+        {
+          data: {
+            items: { type: "array", shape: { type: "number" } },
+          },
+          elements: {
+            Test: {
+              props: {
+                count: { type: "number" },
+              },
+            },
+          },
+        },
+        {
+          data: { items: [1, 2, 3, 4, 5] },
+          components: { Test: TestComponent },
+        }
+      );
+
+      expect(result.props.count).toBe(3);
+    });
+  });
+
+  describe("function declarations end-to-end", () => {
+    it("should render with user-defined component", () => {
+      const Span = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Span",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        'function Badge({ label }) {\n  return <Span>{label}</Span>\n}\nreturn <Badge label="hello" />',
+        {
+          data: {},
+          elements: {
+            Span: { props: {} },
+          },
+        },
+        {
+          data: {},
+          components: { Span },
+        }
+      );
+
+      expect(result.type).toBe("Span");
+      expect(result.children).toEqual(["hello"]);
+    });
+
+    it("should render with nested user-defined components", () => {
+      const Span = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Span",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const Div = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Div",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        'function Label({ text }) {\n  return <Span>{text}</Span>\n}\nfunction Card({ title }) {\n  return <Div><Label text={title} /></Div>\n}\nreturn <Card title="world" />',
+        {
+          data: {},
+          elements: {
+            Span: { props: {} },
+            Div: { props: {} },
+          },
+        },
+        {
+          data: {},
+          components: { Span, Div },
+        }
+      );
+
+      expect(result.type).toBe("Div");
+      expect(result.children).toHaveLength(1);
+      expect((result.children[0] as TestNode).type).toBe("Span");
+      expect((result.children[0] as TestNode).children).toEqual(["world"]);
+    });
+
+    it("should render function component with default props", () => {
+      const Span = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Span",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "function Tag({ label = 'default' }) {\n  return <Span>{label}</Span>\n}\nreturn <Tag />",
+        {
+          data: {},
+          elements: {
+            Span: { props: {} },
+          },
+        },
+        {
+          data: {},
+          components: { Span },
+        }
+      );
+
+      expect(result.children).toEqual(["default"]);
+    });
+
+    it("should render function component accessing data", () => {
+      const Span = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Span",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "function Greeting() {\n  return <Span>Hello {name}</Span>\n}\nreturn <Greeting />",
+        {
+          data: {
+            name: { type: "string" },
+          },
+          elements: {
+            Span: { props: {} },
+          },
+        },
+        {
+          data: { name: "World" },
+          components: { Span },
+        }
+      );
+
+      expect(result.children).toEqual(["Hello", "World"]);
+    });
+
+    it("should render function component with children", () => {
+      const Div = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Div",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const Span = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Span",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "function Wrapper({ children }) {\n  return <Div>{children}</Div>\n}\nreturn <Wrapper><Span>inside</Span></Wrapper>",
+        {
+          data: {},
+          elements: {
+            Div: { props: {} },
+            Span: { props: {} },
+          },
+        },
+        {
+          data: {},
+          components: { Div, Span },
+        }
+      );
+
+      expect(result.type).toBe("Div");
+      expect(result.children).toHaveLength(1);
+      expect((result.children[0] as TestNode).type).toBe("Span");
+    });
+  });
+
+  describe("const + function combined end-to-end", () => {
+    it("should render template with const and function together", () => {
+      const Span = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Span",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const Div = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Div",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "const title = name.toUpperCase();\nfunction Header({ text }) {\n  return <Span>{text}</Span>\n}\nreturn <Div><Header text={title} /></Div>",
+        {
+          data: {
+            name: { type: "string" },
+          },
+          elements: {
+            Span: { props: {} },
+            Div: { props: {} },
+          },
+        },
+        {
+          data: { name: "hello" },
+          components: { Span, Div },
+        }
+      );
+
+      expect(result.type).toBe("Div");
+      expect(result.children).toHaveLength(1);
+      expect((result.children[0] as TestNode).children).toEqual(["HELLO"]);
+    });
+
+    it("should render with map over data using function component", () => {
+      const Span = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Span",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const Div = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Div",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "function Item({ label }) {\n  return <Span>{label}</Span>\n}\nreturn <Div>{items.map(i => <Item label={i} />)}</Div>",
+        {
+          data: {
+            items: { type: "array", shape: { type: "string" } },
+          },
+          elements: {
+            Span: { props: {} },
+            Div: { props: {} },
+          },
+        },
+        {
+          data: { items: ["a", "b", "c"] },
+          components: { Span, Div },
+        }
+      );
+
+      expect(result.type).toBe("Div");
+      expect(result.children).toHaveLength(3);
+      expect((result.children[0] as TestNode).children).toEqual(["a"]);
+      expect((result.children[1] as TestNode).children).toEqual(["b"]);
+      expect((result.children[2] as TestNode).children).toEqual(["c"]);
+    });
+  });
+
+  describe("String builtin end-to-end", () => {
+    it("should render with String() conversion", () => {
+      const TestComponent = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Test",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "<Test value={String(count)}>Text</Test>",
+        {
+          data: {
+            count: { type: "number" },
+          },
+          elements: {
+            Test: {
+              props: {
+                value: { type: "string" },
+              },
+            },
+          },
+        },
+        {
+          data: { count: 42 },
+          components: { Test: TestComponent },
+        }
+      );
+
+      expect(result.props.value).toBe("42");
+    });
+  });
+
+  describe("return requirement end-to-end", () => {
+    it("should throw AnalysisError for template with const but no return", () => {
+      const TestComponent = (): TestNode => ({
+        type: "Test",
+        props: {},
+        children: [],
+      });
+
+      expect(() =>
+        render(
+          "const x = 1;\n<Test>hello</Test>",
+          {
+            data: {},
+            elements: {
+              Test: { props: {} },
+            },
+          },
+          {
+            data: {},
+            components: { Test: TestComponent },
+          }
+        )
+      ).toThrow(AnalysisError);
+    });
+
+    it("should work with const + explicit return", () => {
+      const TestComponent = ({ children, ...props }: Record<string, unknown>): TestNode => ({
+        type: "Test",
+        props,
+        children: children ? [children].flat() : [],
+      });
+
+      const result = render(
+        "const x = 1;\nreturn <Test value={x}>hello</Test>",
+        {
+          data: {},
+          elements: {
+            Test: {
+              props: {
+                value: { type: "number" },
+              },
+            },
+          },
+        },
+        {
+          data: {},
+          components: { Test: TestComponent },
+        }
+      );
+
+      expect(result.props.value).toBe(1);
+    });
   });
 });

package/src/render.ts

@@ -26,10 +26,10 @@ export interface RenderOptions<T = any> extends EvaluateOptions<T> {
  * compiles it to executable code, and evaluates it with the provided data and components.
  *
  * @template T - The return type of the rendered JSX (e.g., ReactElement, VNode, string)
- * @param source - JSX expression source code to render (e.g., `"<Text x={data.user.name}>Hello</Text>"`)
+ * @param source - JSX expression source code to render (e.g., `"<Text x={user.name}>Hello</Text>"`)
  * @param schema - Schema defining allowed data properties, JSX elements, and hierarchy rules
  * @param options - Rendering configuration
- * @param options.data - Data object available as `data.*` in expressions
+ * @param options.data - Data object whose keys become top-level variables in expressions
  * @param options.components - Map of component names to component functions
  * @param options.createElement - Function to create elements (e.g., React.createElement)
  * @param options.minSeverity - Minimum severity (1=info, 2=warning, 3=error) required to abort rendering; defaults to `3`
@@ -49,7 +49,7 @@ export interface RenderOptions<T = any> extends EvaluateOptions<T> {
  * };
  *
  * const result = render(
- *   "<Text>Hello {data.user.name}!</Text>",
+ *   "<Text>Hello {user.name}!</Text>",
  *   schema,
  *   {
  *     data: { user: { name: "World" } },
@@ -74,18 +74,11 @@ export function render<T = any>(
   return evaluate(compileInternal(ast), schema, options) as T;
 }
 
-export function compile<T = any>(
-  source: string,
-  schema: Schema,
-  { minSeverity = 3 }: RenderOptions<T> = {},
-  tempSkipValidation?: boolean | undefined
-): string {
+export function compile<T = any>(source: string, schema: Schema, { minSeverity = 3 }: RenderOptions<T> = {}): string {
   const ast = parse(source);
-  if (!tempSkipValidation) {
-    const report = analyze(ast, schema);
-    if (report.hasIssues(minSeverity)) {
-      throw AnalysisError.fromReport(report);
-    }
+  const report = analyze(ast, schema);
+  if (report.hasIssues(minSeverity)) {
+    throw AnalysisError.fromReport(report);
   }
   return compileInternal(ast);
 }