JSX Runtime

/**
 * Creates a VNode for JSX elements with single child or no children
 * @param type - Element type (string or component)
 * @param props - Element properties including children
 * @param key - Optional element key
 * @returns Virtual DOM node
 */
function jsx<P>(
  type: ComponentType<P> | string,
  props: P & { children?: ComponentChild },
  key?: Key
): VNode<P>;

/**
 * Creates a VNode for JSX elements with multiple static children
 * @param type - Element type (string or component)
 * @param props - Element properties including children array
 * @param key - Optional element key
 * @returns Virtual DOM node
 */
function jsxs<P>(
  type: ComponentType<P> | string,
  props: P & { children?: ComponentChildren },
  key?: Key
): VNode<P>;

/**
 * Development version of jsx with additional debug information
 * @param type - Element type (string or component)
 * @param props - Element properties including children
 * @param key - Optional element key
 * @returns Virtual DOM node with debug info
 */
function jsxDEV<P>(
  type: ComponentType<P> | string,
  props: P & { children?: ComponentChild },
  key?: Key
): VNode<P>;

// These functions are typically called by build tools, not directly:

// Babel/TypeScript transforms this JSX:
// const element = <div className="hello">World</div>;

// Into this runtime call:
// const element = jsx("div", { className: "hello", children: "World" });

// Multiple children:
// const list = <ul><li>A</li><li>B</li></ul>;

// Becomes:
// const list = jsxs("ul", { 
//   children: [jsx("li", { children: "A" }), jsx("li", { children: "B" })] 
// });

/**
 * Creates VNode from a template string with expressions
 * @param template - Array of template strings
 * @param expressions - Dynamic expressions to interpolate
 * @returns Virtual DOM node or fragment
 */
function jsxTemplate(
  template: TemplateStringsArray,
  ...expressions: any[]
): VNode | ComponentChildren;

/**
 * Serializes HTML attributes for template-based JSX
 * @param name - Attribute name
 * @param value - Attribute value
 * @returns Serialized attribute string or null
 */
function jsxAttr(name: string, value: any): string | null;

/**
 * Escapes dynamic content in JSX templates
 * @param value - Value to escape
 * @returns Escaped value safe for HTML
 */
function jsxEscape<T>(value: T): string | null | VNode | Array<string | VNode>;

import { jsxTemplate, jsxAttr, jsxEscape } from "preact/jsx-runtime";

// Template-based JSX (advanced usage)
const templateElement = jsxTemplate`
  <div class=${jsxAttr("class", "container")}>
    ${jsxEscape("Hello World")}
  </div>
`;

// Custom attribute serialization
const className = jsxAttr("class", ["btn", "primary"]);
// Returns: "btn primary"

// Safe content escaping
const userContent = jsxEscape("<script>alert('xss')</script>");
// Returns escaped string safe for HTML

/**
 * Fragment component for grouping elements without wrapper
 */
const Fragment: FunctionComponent<{ children?: ComponentChildren }>;

namespace JSX {
  interface Element extends VNode<any> {}
  interface ElementClass extends Component<any, any> {}
  interface ElementAttributesProperty { props: {}; }
  interface ElementChildrenAttribute { children: {}; }
  interface IntrinsicElements extends JSXInternal.IntrinsicElements {}
  interface IntrinsicAttributes extends Attributes {}
  interface IntrinsicClassAttributes<T> extends ClassAttributes<T> {}
}

interface TemplateStringsArray extends ReadonlyArray<string> {
  readonly raw: ReadonlyArray<string>;
}

type Key = string | number | any;

type ComponentChild =
  | VNode<any>
  | object
  | string
  | number
  | bigint
  | boolean
  | null
  | undefined;

type ComponentChildren = ComponentChild[] | ComponentChild;