Components & Rendering

/**
 * Create a component with automatic QRL wrapping
 * @param onMount - Component render function
 * @returns Component that can be used in JSX
 */
function component$<T>(onMount: OnRenderFn<T>): Component<T>;

/**
 * Create a component from an existing QRL
 * @param onMount - QRL-wrapped render function
 * @returns Component that can be used in JSX
 */
function componentQrl<T>(onMount: QRL<OnRenderFn<T>>): Component<T>;

// Component interface
interface Component<T> {
  readonly [Symbol.toStringTag]: string;
}

// Component render function type
type OnRenderFn<T> = (props: T) => JSXOutput;

// Props extraction utility
type PropsOf<T> = T extends Component<infer P> ? P : never;

// Public props type
type PublicProps<T> = T extends Record<string, any> ? T : {};

// Function properties in props
type PropFunctionProps<T> = {
  [K in keyof T]: T[K] extends Function ? T[K] : never;
};

import { component$, useSignal } from "@builder.io/qwik";

// Basic component
export const Hello = component$<{ name: string }>((props) => {
  return <h1>Hello {props.name}!</h1>;
});

// Component with state
export const Counter = component$(() => {
  const count = useSignal(0);
  
  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick$={() => count.value++}>
        Increment
      </button>
    </div>
  );
});

// Component with props interface
interface TodoProps {
  text: string;
  completed: boolean;
  onToggle$: PropFunction<() => void>;
}

export const TodoItem = component$<TodoProps>((props) => {
  return (
    <div class={props.completed ? "completed" : ""}>
      <span>{props.text}</span>
      <button onClick$={props.onToggle$}>
        {props.completed ? "Undo" : "Complete"}
      </button>
    </div>
  );
});

/**
 * Create JSX element (runtime)
 * @param type - Element type or component
 * @param props - Element properties
 * @param key - Optional key for reconciliation
 * @returns JSX node
 */
function jsx(type: string | Function, props: any, key?: string): JSXNode;

/**
 * Create JSX element with static children
 * @param type - Element type or component
 * @param props - Element properties including children
 * @param key - Optional key
 * @returns JSX node
 */
function jsxs(type: string | Function, props: any, key?: string): JSXNode;

/**
 * Development JSX element creation
 * @param type - Element type or component
 * @param props - Element properties
 * @param key - Optional key
 * @returns JSX node with dev info
 */
function jsxDEV(type: string | Function, props: any, key?: string): JSXNode;

/**
 * JSX Fragment component
 */
const Fragment: FunctionComponent<{ children?: any }>;

/**
 * HTML Fragment component for raw HTML
 */
const HTMLFragment: FunctionComponent<{ children?: any }>;

/**
 * Render once component (performance optimization)
 */
const RenderOnce: FunctionComponent<{ children?: any }>;

/**
 * Hyperscript function for creating elements
 * @param type - Element type
 * @param props - Element properties
 * @param children - Child elements
 * @returns JSX node
 */
function h(type: string, props?: any, ...children: any[]): JSXNode;

/**
 * Create element (React compatibility alias)
 * @param type - Element type
 * @param props - Element properties  
 * @param children - Child elements
 * @returns JSX node
 */
function createElement(type: string, props?: any, ...children: any[]): JSXNode;

/**
 * Content projection slot
 * @param props - Slot properties
 * @returns Slot JSX node
 */
const Slot: FunctionComponent<{
  name?: string;
  children?: any;
}>;

/**
 * Prefetch service worker component
 */
const PrefetchServiceWorker: FunctionComponent<{
  path?: string;
  scope?: string;
}>;

/**
 * Prefetch bundle graph component
 */
const PrefetchGraph: FunctionComponent<{
  manifest?: any;
}>;

/**
 * Render Qwik application to DOM element
 * @param parent - Parent DOM element
 * @param jsxNode - JSX node to render
 * @param opts - Render options
 * @returns Promise resolving to render result
 */
function render(
  parent: Element,
  jsxNode: JSXNode,
  opts?: RenderOptions
): Promise<RenderResult>;

// Render configuration options
interface RenderOptions {
  locale?: string;
  allowRerendering?: boolean;
}

// Render operation result
interface RenderResult {
  timing: {
    createTime: number;
    renderTime: number;
  };
}

// JSX element node
interface JSXNode {
  readonly type: string | Function;
  readonly props: any;
  readonly key: string | null;
  readonly children?: any;
}

// JSX output union type
type JSXOutput = JSXNode | string | number | boolean | null | undefined | JSXNode[];

// Function component type
interface FunctionComponent<T = {}> {
  (props: T): JSXNode | null;
}

// Development JSX interface
interface DevJSX {
  fileName: string;
  lineNumber: number;
  columnNumber: number;
}

// JSX children type
type JSXChildren = JSXNode | string | number | boolean | null | undefined | (JSXNode | string | number | boolean | null | undefined)[];

// JSX tag name union
type JSXTagName = keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap | string;

// Component base props
interface ComponentBaseProps {
  key?: string | number;
  children?: JSXChildren;
}

import { render } from "@builder.io/qwik";

// Mount application to DOM
const root = document.getElementById("app")!;
await render(root, <App />);

// Render with options
await render(root, <App />, {
  locale: "en-US",
  allowRerendering: true,
});