Rendering

/**
 * Create a virtual DOM node (h function)
 * @param type - Element tag, component, or Fragment
 * @param props - Props/attributes object
 * @param children - Child nodes
 * @returns Virtual DOM node
 */
function h(type: string, children?: VNodeChildren): VNode;
function h(type: string, props?: RawProps | null, children?: VNodeChildren): VNode;
function h(type: Component, children?: VNodeChildren): VNode;
function h(type: Component, props?: RawProps | null, children?: VNodeChildren): VNode;

/**
 * Create a VNode with full options
 * @param type - Element type
 * @param props - Props object
 * @param children - Child nodes
 * @param patchFlag - Optimization hint
 * @param dynamicProps - Dynamic prop names
 * @returns VNode instance
 */
function createVNode(
  type: VNodeTypes,
  props?: RawProps | null,
  children?: VNodeChildren,
  patchFlag?: number,
  dynamicProps?: string[] | null
): VNode;

/**
 * Clone an existing VNode
 * @param vnode - VNode to clone
 * @param extraProps - Additional props to merge
 * @param mergeRef - Whether to merge refs
 * @returns Cloned VNode
 */
function cloneVNode<T, U>(
  vnode: VNode<T, U>,
  extraProps?: RawProps & { ref?: VNodeRef },
  mergeRef?: boolean
): VNode<T, U>;

/**
 * Check if a value is a VNode
 * @param value - Value to check
 * @returns True if value is VNode
 */
function isVNode(value: any): value is VNode;

import { h, createVNode, Fragment } from "vue";

// Simple element
const div = h('div', 'Hello World');

// Element with props and children
const button = h('button', 
  { onClick: () => console.log('clicked') }, 
  'Click me'
);

// Component
const MyComponent = h(Counter, { initialCount: 5 });

// Fragment with multiple children
const fragment = h(Fragment, [
  h('h1', 'Title'),
  h('p', 'Content')
]);

// Advanced VNode creation
const advancedVNode = createVNode(
  'div',
  { class: 'container', id: 'app' },
  'Content',
  1, // PatchFlag for class
  ['class'] // Dynamic props
);

/**
 * Merge multiple props objects with proper handling of class, style, and event listeners
 * @param props - Array of props objects to merge
 * @returns Merged props object
 */
function mergeProps(...props: (RawProps | null)[]): RawProps;

import { mergeProps, h } from "vue";

const baseProps = { class: 'btn', disabled: false };
const extraProps = { class: 'btn-primary', onClick: () => {} };

const merged = mergeProps(baseProps, extraProps);
// Result: { class: 'btn btn-primary', disabled: false, onClick: [Function] }

const button = h('button', merged, 'Click me');

/**
 * Fragment VNode type for multiple root elements
 */
const Fragment: unique symbol;

/**
 * Text VNode type for text nodes
 */
const Text: unique symbol;

/**
 * Comment VNode type for comment nodes
 */
const Comment: unique symbol;

/**
 * Static VNode type for static content
 */
const Static: unique symbol;

/**
 * Render a VNode to a DOM container
 * @param vnode - VNode to render (null to unmount)
 * @param container - DOM container element
 */
function render(vnode: VNode | null, container: Element | ShadowRoot): void;

/**
 * Hydrate server-rendered DOM with client-side VNode
 * @param vnode - VNode to hydrate with
 * @param container - DOM container with server-rendered content
 */
function hydrate(vnode: VNode, container: Element): void;

import { render, h } from "vue";

const app = h('div', [
  h('h1', 'My App'),
  h('p', 'Hello World')
]);

// Render to DOM
const container = document.getElementById('app');
render(app, container);

// Unmount
render(null, container);

/**
 * Teleport component for rendering content elsewhere in DOM
 */
const Teleport: Component<{
  to: string | Element;
  disabled?: boolean;
}>;

import { Teleport, h } from "vue";

const modal = h(Teleport, { to: 'body' }, [
  h('div', { class: 'modal' }, 'Modal content')
]);

/**
 * Suspense component for async component boundaries
 */
const Suspense: Component<{
  timeout?: string | number;
  suspensible?: boolean;
}>;

import { Suspense, h } from "vue";

const app = h(Suspense, {
  default: h(AsyncComponent),
  fallback: h('div', 'Loading...')
});

/**
 * KeepAlive component for caching component instances
 */
const KeepAlive: Component<{
  include?: string | RegExp | (string | RegExp)[];
  exclude?: string | RegExp | (string | RegExp)[];
  max?: number | string;
}>;

/**
 * Transition component for CSS transitions
 */
const Transition: Component<{
  name?: string;
  appear?: boolean;
  persisted?: boolean;
  css?: boolean;
  type?: 'transition' | 'animation';
  mode?: 'in-out' | 'out-in' | 'default';
  enterFromClass?: string;
  enterActiveClass?: string;
  enterToClass?: string;
  leaveFromClass?: string;
  leaveActiveClass?: string;
  leaveToClass?: string;
  duration?: number | { enter: number; leave: number };
  onBeforeEnter?: (el: Element) => void;
  onEnter?: (el: Element, done: () => void) => void;
  onAfterEnter?: (el: Element) => void;
  onEnterCancelled?: (el: Element) => void;
  onBeforeLeave?: (el: Element) => void;
  onLeave?: (el: Element, done: () => void) => void;
  onAfterLeave?: (el: Element) => void;
  onLeaveCancelled?: (el: Element) => void;
}>;

/**
 * TransitionGroup component for list transitions
 */
const TransitionGroup: Component<{
  tag?: string;
  moveClass?: string;
  [key: string]: any; // Inherits Transition props
}>;

/**
 * BaseTransition component (low-level transition component)
 */
const BaseTransition: Component<BaseTransitionProps>;

interface BaseTransitionProps {
  mode?: 'in-out' | 'out-in' | 'default';
  appear?: boolean;
  persisted?: boolean;
  onBeforeEnter?: (el: Element) => void;
  onEnter?: (el: Element, done: () => void) => void;
  onAfterEnter?: (el: Element) => void;
  onEnterCancelled?: (el: Element) => void;
  onBeforeLeave?: (el: Element) => void;
  onLeave?: (el: Element, done: () => void) => void;
  onAfterLeave?: (el: Element) => void;
  onLeaveCancelled?: (el: Element) => void;
  onBeforeAppear?: (el: Element) => void;
  onAppear?: (el: Element, done: () => void) => void;
  onAfterAppear?: (el: Element) => void;
  onAppearCancelled?: (el: Element) => void;
}

/**
 * Define a custom element using Vue component
 * @param options - Component options or setup function
 * @param hydrate - Custom hydration function
 * @returns Custom element constructor
 */
function defineCustomElement<T>(
  options: T,
  hydrate?: RootHydrateFunction
): VueElementConstructor;

/**
 * Define SSR-compatible custom element
 * @param options - Component options
 * @param hydrate - Custom hydration function
 * @returns Custom element constructor
 */
function defineSSRCustomElement<T>(
  options: T,
  hydrate?: RootHydrateFunction
): VueElementConstructor;

/**
 * Access shadow root in custom element component
 * @returns Shadow root element
 */
function useShadowRoot(): ShadowRoot | null;

/**
 * Access custom element host
 * @returns Host element
 */
function useHost(): Element | null;

/**
 * Base class for Vue custom elements
 */
class VueElement extends HTMLElement {
  constructor(initialProps?: Record<string, any>);
  connectedCallback(): void;
  disconnectedCallback(): void;
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
}

type VueElementConstructor = {
  new (initialProps?: Record<string, any>): VueElement;
};

import { defineCustomElement, ref } from "vue";

const MyCounter = defineCustomElement({
  props: {
    count: Number
  },
  setup(props) {
    const count = ref(props.count || 0);
    return { count };
  },
  template: `
    <button @click="count++">
      Count: {{ count }}
    </button>
  `
});

// Register custom element
customElements.define('my-counter', MyCounter);

// Use in HTML
// <my-counter count="5"></my-counter>

/**
 * Apply directives to a VNode
 * @param vnode - VNode to apply directives to
 * @param directives - Array of directive bindings
 * @returns VNode with directives applied
 */
function withDirectives<T extends VNode>(
  vnode: T,
  directives: DirectiveArguments
): T;

type DirectiveArguments = Array<
  | [Directive]
  | [Directive, any]
  | [Directive, any, string]
  | [Directive, any, string, DirectiveModifiers]
>;

interface DirectiveModifiers {
  [key: string]: boolean;
}

/**
 * v-show directive for conditional display
 */
const vShow: Directive<Element, boolean>;

/**
 * Helper for text input v-model
 * @param value - Current value
 * @param modifiers - v-model modifiers
 * @returns Props for text input
 */
function vModelText(
  value: any,
  modifiers?: { lazy?: boolean; number?: boolean; trim?: boolean }
): any;

/**
 * Helper for checkbox v-model
 * @param checked - Checked state
 * @param modifiers - v-model modifiers
 * @returns Props for checkbox input
 */
function vModelCheckbox(checked: any, modifiers?: any): any;

/**
 * Helper for radio v-model
 * @param checked - Checked state
 * @param modifiers - v-model modifiers
 * @returns Props for radio input
 */
function vModelRadio(checked: any, modifiers?: any): any;

/**
 * Helper for select v-model
 * @param value - Selected value
 * @param modifiers - v-model modifiers
 * @returns Props for select element
 */
function vModelSelect(value: any, modifiers?: any): any;

/**
 * Helper for dynamic v-model
 * @param value - Current value
 * @param modifiers - v-model modifiers
 * @returns Props for dynamic input
 */
function vModelDynamic(value: any, modifiers?: any): any;

/**
 * Add event modifiers to event handler
 * @param fn - Event handler function
 * @param modifiers - Array of modifier names
 * @returns Modified event handler
 */
function withModifiers<T extends Function>(
  fn: T,
  modifiers: string[]
): T;

/**
 * Add key modifiers to event handler
 * @param fn - Event handler function
 * @param keys - Array of key names
 * @returns Modified event handler
 */
function withKeys<T extends Function>(
  fn: T,
  keys: string[]
): T;

import { withModifiers, withKeys, h } from "vue";

const button = h('button', {
  onClick: withModifiers(() => {
    console.log('Clicked with prevent default');
  }, ['prevent'])
}, 'Click me');

const input = h('input', {
  onKeyup: withKeys(() => {
    console.log('Enter pressed');
  }, ['enter'])
});

/**
 * Create a custom renderer
 * @param options - Renderer options defining platform operations
 * @returns Renderer with render and createApp functions
 */
function createRenderer<HostNode = any, HostElement = any>(
  options: RendererOptions<HostNode, HostElement>
): Renderer<HostElement>;

/**
 * Create a hydration-aware renderer
 * @param options - Renderer options with hydration support
 * @returns Renderer with hydration capabilities
 */
function createHydrationRenderer(
  options: HydrationRendererOptions
): HydrationRenderer;

interface RendererOptions<HostNode = any, HostElement = any> {
  patchProp: (
    el: HostElement,
    key: string,
    prevValue: any,
    nextValue: any,
    isSVG?: boolean,
    prevChildren?: VNode<HostNode, HostElement>[],
    parentComponent?: ComponentInternalInstance | null,
    parentSuspense?: SuspenseBoundary | null,
    unmountChildren?: UnmountChildrenFn
  ) => void;
  insert: (child: HostNode, parent: HostElement, anchor?: HostNode | null) => void;
  remove: (child: HostNode) => void;
  createElement: (
    type: string,
    isSVG?: boolean,
    isCustomizedBuiltIn?: string,
    vnodeProps?: (VNodeProps & { [key: string]: any }) | null
  ) => HostElement;
  createText: (text: string) => HostNode;
  createComment: (text: string) => HostNode;
  setText: (node: HostNode, text: string) => void;
  setElementText: (node: HostElement, text: string) => void;
  parentNode: (node: HostNode) => HostElement | null;
  nextSibling: (node: HostNode) => HostNode | null;
  querySelector?: (selector: string) => HostElement | null;
  setScopeId?: (el: HostElement, id: string) => void;
  cloneNode?: (el: HostNode) => HostNode;
  insertStaticContent?: (
    content: string,
    parent: HostElement,
    anchor: HostNode | null,
    isSVG: boolean,
    start?: HostNode | null,
    end?: HostNode | null
  ) => [HostNode, HostNode];
}

interface VNode<HostNode = any, HostElement = any> {
  __v_isVNode: true;
  type: VNodeTypes;
  props: VNodeProps | null;
  key: string | number | symbol | null;
  ref: VNodeNormalizedRef | null;
  children: VNodeNormalizedChildren;
  component: ComponentInternalInstance | null;
  dirs: DirectiveBinding[] | null;
  transition: TransitionHooks<HostElement> | null;
  el: HostNode | null;
  anchor: HostNode | null;
  target: HostElement | null;
  targetAnchor: HostNode | null;
  staticCount: number;
  shapeFlag: number;
  patchFlag: number;
  dynamicProps: string[] | null;
  dynamicChildren: VNode[] | null;
  appContext: AppContext | null;
}

type VNodeTypes = string | VNode | Component | typeof Text | typeof Static | typeof Comment | typeof Fragment | typeof Teleport | typeof Suspense;

type VNodeChildren = string | number | boolean | VNode | VNodeChildren[] | null;

interface VNodeProps {
  key?: string | number | symbol;
  ref?: VNodeRef;
  ref_for?: boolean;
  ref_key?: string;
  [key: string]: any;
}

type RawProps = VNodeProps & {
  __v_isProps?: never;
  [Symbol.iterator]?: never;
} & Record<string, any>;