jsxpression 0.1.0

package/src/codegen/schema/component-types.ts

@@ -0,0 +1,140 @@
+import type { Schema } from "../../schema.js";
+import { mapSchemaTypeToTypeScript } from "./utils.js";
+
+export function declareComponentTypes(schema: Schema): string {
+  let output = `declare global {\n`;
+
+  if (schema.elements) {
+    Object.entries(schema.elements).forEach(([elementName, element]) => {
+      const interfaceName = `${elementName}Props`;
+      output += generatePropsInterface(interfaceName, element, "  ");
+      output += "\n";
+    });
+  }
+
+  if (schema.elements) {
+    Object.entries(schema.elements).forEach(([elementName, element]) => {
+      const interfaceName = `${elementName}Props`;
+      const componentComment = generateComponentComment(elementName, element, "  ");
+      if (componentComment) {
+        output += componentComment;
+      }
+      output += `  const ${elementName}: (props: ${interfaceName}) => JSX.Element;\n\n`;
+    });
+  }
+
+  output += `}\n\n`;
+  output += `export {};\n`;
+
+  return output;
+}
+
+function generatePropsInterface(interfaceName: string, element: any, indent: string = ""): string {
+  let output = `${indent}interface ${interfaceName} {\n`;
+
+  Object.entries(element.props || {}).forEach(([propName, prop]: [string, any]) => {
+    const optional = prop.required ? "" : "?";
+    const type = mapSchemaTypeToTypeScript(prop);
+    const comment = generatePropComment(prop, `${indent}  `);
+
+    if (comment) {
+      output += comment;
+    }
+    output += `${indent}  ${propName}${optional}: ${type};\n`;
+  });
+
+  if (element.content !== false) {
+    output += `${indent}  children?: JSX.Node;\n`;
+  }
+
+  output += `${indent}}\n`;
+  return output;
+}
+
+function generateComponentComment(elementName: string, element: any, indent: string = ""): string {
+  const comments: string[] = [];
+
+  if (element.description) {
+    comments.push(element.description);
+  } else if (element.doc) {
+    comments.push(element.doc);
+  } else {
+    comments.push(`${elementName} component`);
+  }
+
+  if (element.props && Object.keys(element.props).length > 0) {
+    comments.push("");
+    comments.push(`@param props Component props`);
+
+    Object.entries(element.props).forEach(([propName, prop]: [string, any]) => {
+      if (prop.description) {
+        comments.push(`@param props.${propName} ${prop.description}`);
+      }
+    });
+  }
+
+  comments.push("");
+  comments.push(`@returns JSX.Element`);
+
+  if (element.examples && element.examples.length > 0) {
+    comments.push("");
+    comments.push("@example");
+    element.examples.forEach((example: string) => {
+      comments.push(example);
+    });
+  }
+
+  if (comments.length === 0) {
+    return "";
+  }
+
+  if (comments.length === 1 && comments[0] && !comments[0].includes("\n")) {
+    return `${indent}/** ${comments[0]} */\n`;
+  }
+
+  let output = `${indent}/**\n`;
+  comments.forEach((comment) => {
+    if (comment === "") {
+      output += `${indent} *\n`;
+    } else {
+      comment.split("\n").forEach((line) => {
+        output += `${indent} * ${line}\n`;
+      });
+    }
+  });
+  output += `${indent} */\n`;
+
+  return output;
+}
+
+function generatePropComment(prop: any, indent: string): string {
+  const comments: string[] = [];
+
+  if (prop.description) {
+    comments.push(prop.description);
+  }
+
+  if (prop.default !== undefined) {
+    comments.push(`@default ${JSON.stringify(prop.default)}`);
+  }
+
+  if (prop.type === "enum" && prop.values) {
+    comments.push(`@values ${prop.values.map((v: any) => `"${v}"`).join(", ")}`);
+  }
+
+  if (comments.length === 0) {
+    return "";
+  }
+
+  if (comments.length === 1) {
+    return `${indent}/** ${comments[0]} */\n`;
+  }
+
+  let output = `${indent}/**\n`;
+  comments.forEach((comment) => {
+    output += `${indent} * ${comment}\n`;
+  });
+  output += `${indent} */\n`;
+
+  return output;
+}

package/src/codegen/schema/data-types.ts

@@ -0,0 +1,109 @@
+import type { Schema } from "../../schema.js";
+import { mapSchemaTypeToTypeScript } from "./utils.js";
+
+export function declareDataTypes(schema: Schema): string {
+  let output = `declare global {\n`;
+
+  if (schema.data) {
+    output += generateDataObjectComment(schema.data, "  ");
+    output += `  const data: {\n`;
+    Object.entries(schema.data).forEach(([dataKey, dataSchema]) => {
+      output += generateNestedPropertyJSDoc(dataKey, dataSchema, "    ");
+
+      const type = mapSchemaTypeToTypeScript(dataSchema);
+
+      const indentedType = type.includes("\n") ? type.replace(/\n/g, "\n    ").replace(/\n {4}$/, "\n  ") : type;
+      output += `    ${dataKey}: ${indentedType};\n`;
+    });
+    output += `  };\n`;
+  }
+
+  output += `}\n\n`;
+  output += `export {};\n`;
+
+  return output;
+}
+
+function generateNestedPropertyJSDoc(propertyName: string, propertySchema: any, indent: string = ""): string {
+  const comments: string[] = [];
+
+  if (propertySchema.description) {
+    comments.push(propertySchema.description);
+  } else {
+    const desc =
+      propertyName.charAt(0).toUpperCase() +
+      propertyName
+        .slice(1)
+        .replace(/([A-Z])/g, " $1")
+        .toLowerCase();
+    comments.push(desc);
+  }
+
+  let hasNestedProperties = false;
+  if (propertySchema.type === "object" && propertySchema.shape) {
+    comments.push("");
+    Object.entries(propertySchema.shape).forEach(([key, value]: [string, any]) => {
+      if (value.description) {
+        comments.push(`@property ${key} ${value.description}`);
+        hasNestedProperties = true;
+      }
+    });
+  } else if (propertySchema.type === "array" && propertySchema.shape?.type === "object" && propertySchema.shape.shape) {
+    comments.push("");
+    Object.entries(propertySchema.shape.shape).forEach(([key, value]: [string, any]) => {
+      if (value.description) {
+        comments.push(`@property ${key} ${value.description}`);
+        hasNestedProperties = true;
+      }
+    });
+  }
+
+  if (comments.length === 1 && !hasNestedProperties) {
+    return `${indent}/** ${comments[0]} */\n`;
+  }
+
+  let output = `${indent}/**\n`;
+  comments.forEach((comment) => {
+    if (comment === "") {
+      output += `${indent} *\n`;
+    } else {
+      output += `${indent} * ${comment}\n`;
+    }
+  });
+  output += `${indent} */\n`;
+
+  return output;
+}
+
+function generateDataObjectComment(dataSchema: any, indent: string = ""): string {
+  const comments: string[] = [];
+
+  comments.push("Data object for JSX expressions");
+  comments.push("");
+
+  Object.entries(dataSchema).forEach(([dataKey, schema]: [string, any]) => {
+    if (schema.description) {
+      comments.push(`@property ${dataKey} ${schema.description}`);
+    } else {
+      const desc =
+        dataKey.charAt(0).toUpperCase() +
+        dataKey
+          .slice(1)
+          .replace(/([A-Z])/g, " $1")
+          .toLowerCase();
+      comments.push(`@property ${dataKey} ${desc}`);
+    }
+  });
+
+  let output = `${indent}/**\n`;
+  comments.forEach((comment) => {
+    if (comment === "") {
+      output += `${indent} *\n`;
+    } else {
+      output += `${indent} * ${comment}\n`;
+    }
+  });
+  output += `${indent} */\n`;
+
+  return output;
+}

package/src/codegen/schema/index.ts

@@ -0,0 +1,2 @@
+export { declareComponentTypes } from "./component-types.js";
+export { declareDataTypes } from "./data-types.js";

package/src/codegen/schema/utils.ts

@@ -0,0 +1,111 @@
+export function mapSchemaTypeToTypeScript(prop: any, depth: number = 0): string {
+  switch (prop.type) {
+    case "string":
+      if (prop.enum && Array.isArray(prop.enum)) {
+        return prop.enum.map((value: any) => `"${value}"`).join(" | ");
+      }
+      return "string";
+    case "number":
+      if (prop.enum && Array.isArray(prop.enum)) {
+        return prop.enum.map((value: any) => String(value)).join(" | ");
+      }
+      return "number";
+    case "boolean":
+      if (prop.enum && Array.isArray(prop.enum)) {
+        return prop.enum.map((value: any) => String(value)).join(" | ");
+      }
+      return "boolean";
+    case "array":
+      const itemType = prop.shape ? mapSchemaTypeToTypeScript(prop.shape, depth) : "any";
+      return `${itemType}[]`;
+    case "object":
+      if (prop.shape && typeof prop.shape === "object") {
+        return generateObjectTypeWithJSDoc(prop.shape, depth);
+      }
+      if (prop.properties && typeof prop.properties === "object") {
+        return generateObjectTypeWithJSDoc(prop.properties, depth);
+      }
+      return "object";
+    case "function":
+      return "(...args: any[]) => any";
+    default:
+      console.warn(`Unknown schema type: ${prop.type}`);
+      return "any";
+  }
+}
+
+export function generateObjectTypeWithJSDoc(properties: any, depth: number = 0): string {
+  let result = "{\n";
+
+  // Generate each property with inline JSDoc
+  Object.entries(properties).forEach(([key, value]: [string, any]) => {
+    // Generate comprehensive JSDoc for this property
+    const propertyJSDoc = generatePropertyJSDoc(key, value, "    ", depth);
+    result += propertyJSDoc;
+
+    const nestedType = mapSchemaTypeToTypeScript(value, depth + 1);
+    const required = value.required !== false ? "" : "?";
+    result += `    ${key}${required}: ${nestedType};\n`;
+  });
+
+  result += "  }";
+  return result;
+}
+
+export function generatePropertyJSDoc(
+  propertyName: string,
+  propertySchema: any,
+  indent: string = "",
+  depth: number = 0
+): string {
+  const comments: string[] = [];
+
+  // Main description
+  if (propertySchema.description) {
+    comments.push(propertySchema.description);
+  }
+
+  // Add @property tags for nested object properties (recursive!)
+  let hasNestedProperties = false;
+  if (propertySchema.type === "object" && propertySchema.shape) {
+    comments.push("");
+    Object.entries(propertySchema.shape).forEach(([key, value]: [string, any]) => {
+      if (value.description) {
+        comments.push(`@property ${key} ${value.description}`);
+        hasNestedProperties = true;
+      }
+    });
+  } else if (propertySchema.type === "array" && propertySchema.shape?.type === "object" && propertySchema.shape.shape) {
+    // For arrays of objects, document the object structure
+    comments.push("");
+    Object.entries(propertySchema.shape.shape).forEach(([key, value]: [string, any]) => {
+      if (value.description) {
+        comments.push(`@property ${key} ${value.description}`);
+        hasNestedProperties = true;
+      }
+    });
+  }
+
+  // No comments needed
+  if (comments.length === 0) {
+    return "";
+  }
+
+  // Single-line JSDoc
+  if (comments.length === 1 && !hasNestedProperties) {
+    return `${indent}/** ${comments[0]} */\n`;
+  }
+
+  // Multi-line JSDoc with @property tags
+  let output = `${indent}/**\n`;
+  comments.forEach((comment) => {
+    if (comment === "") {
+      output += `${indent} *\n`;
+    } else {
+      output += `${indent} * ${comment}\n`;
+    }
+  });
+  output += `${indent} */\n`;
+
+  return output;
+}

package/src/compile/compilation-error.ts

@@ -0,0 +1,37 @@
+type Loc = {
+  start: {
+    line: number;
+    column: number;
+  };
+  end: {
+    line: number;
+    column: number;
+  };
+};
+
+export class CompilationError extends Error {
+  static fromNode(message: string, node: any): CompilationError {
+    const loc = node.loc
+      ? {
+          start: {
+            line: node.loc.start.line,
+            column: node.loc.start.column,
+          },
+          end: {
+            line: node.loc.end.line,
+            column: node.loc.end.column,
+          },
+        }
+      : undefined;
+
+    return new CompilationError(message, loc);
+  }
+
+  readonly loc?: Loc;
+
+  constructor(message: string, loc?: Loc) {
+    super(message);
+    this.name = "CompilationError";
+    this.loc = loc;
+  }
+}

package/src/compile/compile.test.ts

@@ -0,0 +1,180 @@
+import { describe, it, expect } from "vitest";
+import { compile } from "../compile";
+import { parse } from "../parse";
+
+describe("compile", () => {
+  it("should compile ternary expression", () => {
+    const ast = parse("<div>{props.show ? 'Yes' : 'No'}</div>");
+    const result = compile(ast);
+    expect(result).toBe('"use strict";return h("div", null, (props.show?"Yes":"No"));');
+  });
+
+  it("should compile logical OR expression", () => {
+    const ast = parse("<div>{props.value || 'default'}</div>");
+    const result = compile(ast);
+    expect(result).toBe('"use strict";return h("div", null, (props.value || "default"));');
+  });
+
+  it("should compile array operations", () => {
+    const ast = parse("<div>{props.items.filter(x => x.length > 2).join(', ')}</div>");
+    const result = compile(ast);
+    expect(result).toBe('"use strict";return h("div", null, props.items.filter((x) => (x.length > 2)).join(", "));');
+  });
+
+  it("should compile object literals in props", () => {
+    const ast = parse("<div style={{ color: 'red' }}>Text</div>");
+    const result = compile(ast);
+    expect(result).toBe('"use strict";return h("div", { style: { color: "red" } }, "Text");');
+  });
+
+  it("should compile nested ternary expressions", () => {
+    const ast = parse("<div>{props.level > 2 ? 'high' : props.level > 1 ? 'medium' : 'low'}</div>");
+    const result = compile(ast);
+    expect(result).toBe(
+      '"use strict";return h("div", null, ((props.level > 2)?"high":((props.level > 1)?"medium":"low")));'
+    );
+  });
+
+  it("should compile nested JSX elements", () => {
+    const ast = parse("<div><span><strong>Nested</strong></span></div>");
+    const result = compile(ast);
+    expect(result).toBe('"use strict";return h("div", null, h("span", null, h("strong", null, "Nested")));');
+  });
+
+  it("should compile nested array operations", () => {
+    const ast = parse("<div>{props.items.map(x => x.split(',').map(y => y.trim()).join(' ')).join(' | ')}</div>");
+    const result = compile(ast);
+    expect(result).toBe(
+      '"use strict";return h("div", null, props.items.map((x) => x.split(",").map((y) => y.trim()).join(" ")).join(" | "));'
+    );
+  });
+
+  it("should compile bare expression containers", () => {
+    const ast = parse("{data.user.name}");
+    const result = compile(ast);
+    expect(result).toBe('"use strict";return data.user.name;');
+  });
+
+  it("should compile bare mathematical expressions", () => {
+    const ast = parse("{data.count * 2}");
+    const result = compile(ast);
+    expect(result).toBe('"use strict";return (data.count * 2);');
+  });
+
+  it("should compile bare method calls", () => {
+    const ast = parse("{data.text.toUpperCase()}");
+    const result = compile(ast);
+    expect(result).toBe('"use strict";return data.text.toUpperCase();');
+  });
+
+  it("should compile bare complex expressions", () => {
+    const ast = parse("{data.items.filter(x => x.length > 2).length}");
+    const result = compile(ast);
+    expect(result).toBe('"use strict";return data.items.filter((x) => (x.length > 2)).length;');
+  });
+
+  describe("JSX empty expressions", () => {
+    it("should handle empty expressions in children", () => {
+      const ast = parse("<Text>{}</Text>");
+      const compiled = compile(ast);
+
+      expect(compiled).toContain("return");
+      expect(compiled).toContain("Text");
+      // Empty expressions should be skipped, so no children array should be empty or minimal
+      expect(compiled).toBeDefined();
+    });
+
+    it("should handle multiple empty expressions", () => {
+      const ast = parse("<Text>{}{}{}</Text>");
+      const compiled = compile(ast);
+
+      expect(compiled).toContain("return");
+      expect(compiled).toContain("Text");
+      expect(compiled).toBeDefined();
+    });
+
+    it("should handle mixed empty and real expressions", () => {
+      const ast = parse("<Text>Hello {}{data.x}{} World</Text>");
+      const compiled = compile(ast);
+
+      expect(compiled).toContain("return");
+      expect(compiled).toContain("Text");
+      expect(compiled).toContain("Hello");
+      expect(compiled).toContain("World");
+      expect(compiled).toContain("data.x");
+    });
+
+    it("should generate valid JavaScript code structure", () => {
+      const ast = parse("<Text>{}</Text>");
+      const compiled = compile(ast);
+
+      // The compiled code should have expected structure
+      expect(compiled).toMatch(/^"use strict";return .+;$/);
+    });
+  });
+
+  describe("spread elements", () => {
+    it("should compile spread in arrays", () => {
+      const ast = parse("<div>{[...data.items]}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", null, [...data.items]);');
+    });
+
+    it("should compile spread in objects", () => {
+      const ast = parse("<div style={{ ...data.styles }}>Text</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", { style: { ...data.styles } }, "Text");');
+    });
+
+    it("should compile mixed spread and regular elements in arrays", () => {
+      const ast = parse("<div>{[1, ...data.items, 2]}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", null, [1, ...data.items, 2]);');
+    });
+
+    it("should compile mixed spread and regular properties in objects", () => {
+      const ast = parse("<div style={{ color: 'red', ...data.styles, width: 100 }}>Text</div>");
+      const result = compile(ast);
+      expect(result).toBe(
+        '"use strict";return h("div", { style: { color: "red", ...data.styles, width: 100 } }, "Text");'
+      );
+    });
+
+    it("should compile multiple spreads in arrays", () => {
+      const ast = parse("<div>{[...data.first, ...data.second]}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", null, [...data.first, ...data.second]);');
+    });
+
+    it("should compile multiple spreads in objects", () => {
+      const ast = parse("<div style={{ ...data.base, ...data.override }}>Text</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", { style: { ...data.base, ...data.override } }, "Text");');
+    });
+
+    it("should compile spread in function call arguments", () => {
+      const ast = parse("<div>{Math.max(...data.numbers)}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", null, Math.max(...data.numbers));');
+    });
+
+    it("should compile spread with map in function call", () => {
+      const ast = parse("<div>{Math.min(...data.items.map(x => x.price))}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", null, Math.min(...data.items.map((x) => x.price)));');
+    });
+
+    it("should compile mixed spread and regular arguments", () => {
+      const ast = parse("<div>{Math.max(0, ...data.numbers, 100)}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", null, Math.max(0, ...data.numbers, 100));');
+    });
+  });
+
+  // TODO: Add ChainExpression support for optional chaining (?.)
+  // it("should compile nested object access with conditionals", () => {
+  //   const ast = parse("<div>{props.user?.profile?.name || 'Anonymous'}</div>");
+  //   const result = compile(ast);
+  //   expect(result).toBe('"use strict";return h("div", null, ((props.user?.profile?.name) || "Anonymous"));');
+  // });
+});