Utilities

/**
 * Defer execution until after the next DOM update cycle
 * @param callback - Optional callback function
 * @returns Promise that resolves after next tick
 */
function nextTick(callback?: () => void): Promise<void>;

import { nextTick, ref } from "vue";

const count = ref(0);

async function updateAndLog() {
  count.value++;
  
  // DOM hasn't updated yet
  console.log(document.getElementById('count')?.textContent); // Still old value
  
  await nextTick();
  
  // DOM has been updated
  console.log(document.getElementById('count')?.textContent); // New value
}

// Alternative with callback
count.value++;
nextTick(() => {
  // DOM updated
  console.log('DOM updated');
});

/**
 * Queue callback to run after component updates are flushed
 * @param cb - Callback function
 */
function queuePostFlushCb(cb: Function): void;

/**
 * Get current component instance (only available in setup or lifecycle hooks)
 * @returns Component instance or null
 */
function getCurrentInstance(): ComponentInternalInstance | null;

import { defineComponent, getCurrentInstance, onMounted } from "vue";

export default defineComponent({
  setup() {
    const instance = getCurrentInstance();
    
    onMounted(() => {
      console.log('Component UID:', instance?.uid);
      console.log('Component type:', instance?.type);
    });
    
    return {};
  }
});

/**
 * Access CSS modules in component
 * @param name - CSS module name (default: '$style')
 * @returns CSS module object
 */
function useCssModule(name?: string): Record<string, string>;

/**
 * Inject CSS custom properties (CSS variables) reactively
 * @param vars - Reactive object with CSS variable values
 */
function useCssVars(vars: Record<string, string | Ref<string>>): void;

import { defineComponent, useCssModule, useCssVars, ref } from "vue";

export default defineComponent({
  setup() {
    // Access CSS modules
    const styles = useCssModule();
    const themeStyles = useCssModule('theme');
    
    // Reactive CSS variables
    const color = ref('blue');
    const size = ref('16px');
    
    useCssVars({
      'primary-color': color,
      'font-size': size
    });
    
    return {
      styles,
      themeStyles,
      color,
      size
    };
  }
});

// In template: <div :class="styles.container">
// CSS: .container { color: v-bind('primary-color'); }

/**
 * Resolve component by name from current instance context
 * @param name - Component name
 * @returns Resolved component or string
 */
function resolveComponent(name: string): Component | string;

/**
 * Resolve directive by name from current instance context
 * @param name - Directive name
 * @returns Resolved directive
 */
function resolveDirective(name: string): Directive | undefined;

/**
 * Resolve dynamic component (can be string, component, or component name)
 * @param component - Component identifier
 * @returns Resolved component
 */
function resolveDynamicComponent(component: unknown): Component;

import { defineComponent, resolveComponent, h } from "vue";

export default defineComponent({
  components: {
    CustomButton: { /* component definition */ }
  },
  setup() {
    return () => {
      // Resolve registered component
      const ButtonComponent = resolveComponent('CustomButton');
      
      return h(ButtonComponent, { onClick: () => {} }, 'Click me');
    };
  }
});

/**
 * Handle errors in Vue context with proper error reporting
 * @param err - Error object
 * @param instance - Component instance
 * @param info - Error info string
 */
function handleError(
  err: unknown,
  instance: ComponentInternalInstance | null,
  info: string
): void;

/**
 * Call function with error handling
 * @param fn - Function to call
 * @param instance - Component instance
 * @param type - Error type
 * @param args - Function arguments
 * @returns Function result
 */
function callWithErrorHandling(
  fn: Function,
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  args?: unknown[]
): any;

/**
 * Call async function with error handling
 * @param fn - Async function to call
 * @param instance - Component instance
 * @param type - Error type
 * @param args - Function arguments
 * @returns Promise of function result
 */
function callWithAsyncErrorHandling(
  fn: Function | Function[],
  instance: ComponentInternalInstance | null,
  type: ErrorTypes,
  args?: unknown[]
): any[];

/**
 * Error code constants
 */
enum ErrorCodes {
  SETUP_FUNCTION = 0,
  RENDER_FUNCTION = 1,
  WATCH_GETTER = 2,
  WATCH_CALLBACK = 3,
  WATCH_CLEANUP = 4,
  NATIVE_EVENT_HANDLER = 5,
  COMPONENT_EVENT_HANDLER = 6,
  VNODE_HOOK = 7,
  DIRECTIVE_HOOK = 8,
  TRANSITION_HOOK = 9,
  APP_ERROR_HANDLER = 10,
  APP_WARN_HANDLER = 11,
  FUNCTION_REF = 12,
  ASYNC_COMPONENT_LOADER = 13,
  SCHEDULER = 14
}

/**
 * Issue development warning (only in dev builds)
 * @param msg - Warning message
 * @param args - Additional arguments
 */
function warn(msg: string, ...args: any[]): void;

import { warn } from "vue";

function validateProps(props: any) {
  if (!props.required) {
    warn('Missing required prop', props);
  }
}

/**
 * Check if value is a string
 * @param val - Value to check
 * @returns True if value is string
 */
function isString(val: unknown): val is string;

/**
 * Check if value is an object (not null, not array)
 * @param val - Value to check
 * @returns True if value is object
 */
function isObject(val: unknown): val is Record<any, any>;

/**
 * Check if value is an array
 * @param val - Value to check
 * @returns True if value is array
 */
function isArray(val: unknown): val is any[];

/**
 * Check if value is a function
 * @param val - Value to check
 * @returns True if value is function
 */
function isFunction(val: unknown): val is Function;

/**
 * Check if value is a Date object
 * @param val - Value to check
 * @returns True if value is Date
 */
function isDate(val: unknown): val is Date;

/**
 * Check if value is a RegExp object
 * @param val - Value to check
 * @returns True if value is RegExp
 */
function isRegExp(val: unknown): val is RegExp;

/**
 * Check if value is a Promise
 * @param val - Value to check
 * @returns True if value is Promise
 */
function isPromise<T = any>(val: unknown): val is Promise<T>;

/**
 * Convert kebab-case to camelCase
 * @param str - String to convert
 * @returns Camelized string
 */
function camelize(str: string): string;

/**
 * Capitalize first letter of string
 * @param str - String to capitalize
 * @returns Capitalized string
 */
function capitalize(str: string): string;

/**
 * Convert camelCase to kebab-case
 * @param str - String to convert
 * @returns Hyphenated string
 */
function hyphenate(str: string): string;

/**
 * Convert to event handler key (onXxx format)
 * @param str - String to convert
 * @returns Event handler key
 */
function toHandlerKey(str: string): string;

import { camelize, capitalize, hyphenate, toHandlerKey } from "vue";

console.log(camelize('my-component')); // 'myComponent'
console.log(capitalize('hello')); // 'Hello'
console.log(hyphenate('myComponent')); // 'my-component'
console.log(toHandlerKey('click')); // 'onClick'

/**
 * Object.assign alias
 * @param target - Target object
 * @param sources - Source objects
 * @returns Extended target object
 */
function extend<T, U>(target: T, source: U): T & U;
function extend<T, U, V>(target: T, source1: U, source2: V): T & U & V;

/**
 * Check if object has own property
 * @param obj - Object to check
 * @param key - Property key
 * @returns True if object has own property
 */
function hasOwn(obj: object, key: string | symbol): boolean;

/**
 * Check if value has changed (using Object.is)
 * @param value - New value
 * @param oldValue - Old value
 * @returns True if value changed
 */
function hasChanged(value: any, oldValue: any): boolean;

/**
 * Convert value to string for display
 * @param val - Value to convert
 * @returns Display string
 */
function toDisplayString(val: unknown): string;

/**
 * Normalize class binding to string
 * @param value - Class value (string, array, object)
 * @returns Normalized class string
 */
function normalizeClass(value: unknown): string;

/**
 * Normalize style binding to string
 * @param value - Style value (string, array, object)
 * @returns Normalized style string
 */
function normalizeStyle(value: unknown): string | undefined;

/**
 * Normalize props object
 * @param value - Props value
 * @returns Normalized props object
 */
function normalizeProps(props: Record<string, any> | null): Record<string, any> | null;

import { normalizeClass, normalizeStyle } from "vue";

// Class normalization
console.log(normalizeClass('foo bar')); // 'foo bar'
console.log(normalizeClass(['foo', 'bar'])); // 'foo bar'
console.log(normalizeClass({ foo: true, bar: false })); // 'foo'

// Style normalization
console.log(normalizeStyle('color: red')); // 'color: red'
console.log(normalizeStyle({ color: 'red', fontSize: '14px' })); // 'color:red;font-size:14px'

/**
 * JSX factory function (alias for h)
 * @param type - Element type
 * @param props - Props object
 * @param children - Child elements
 * @returns VNode
 */
function jsx(
  type: any,
  props: any,
  children?: any
): VNode;

/**
 * JSX development factory (with key validation)
 * @param type - Element type
 * @param props - Props object
 * @param key - Element key
 * @param isStaticChildren - Static children flag
 * @param source - Source location
 * @param self - Self reference
 * @returns VNode
 */
function jsxDEV(
  type: any,
  props: any,
  key?: any,
  isStaticChildren?: boolean,
  source?: any,
  self?: any
): VNode;

/**
 * JSX static factory for static elements
 * @param type - Element type
 * @param props - Props object
 * @param children - Child elements
 * @returns VNode
 */
function jsxs(
  type: any,
  props: any,
  children?: any
): VNode;

/**
 * Compile template string to render function (full build only)
 * @param template - Template string
 * @param options - Compilation options
 * @returns Render function
 */
function compile(
  template: string,
  options?: CompilerOptions
): RenderFunction;

import { compile } from "vue";

const template = '<div>{{ message }}</div>';
const renderFn = compile(template);

// Use with createApp
const app = createApp({
  data() {
    return { message: 'Hello' };
  },
  render: renderFn
});

interface ComponentInternalInstance {
  uid: number;
  type: Component;
  parent: ComponentInternalInstance | null;
  root: ComponentInternalInstance;
  appContext: AppContext;
  vnode: VNode;
  next: VNode | null;
  subTree: VNode;
  effect: ReactiveEffect;
  update: SchedulerJob;
  render: InternalRenderFunction | null;
  components: Record<string, Component> | null;
  directives: Record<string, Directive> | null;
  provides: Data;
  scope: EffectScope;
  accessCache: Data | null;
  renderCache: (Function | VNode)[];
  data: Data;
  props: Data;
  attrs: Data;
  slots: InternalSlots;
  refs: Data;
  emit: EmitFn;
  emitted: Record<string, boolean> | null;
  propsOptions: NormalizedPropsOptions;
  emitsOptions: ObjectEmitsOptions | null;
  setupState: Data;
  setupContext: SetupContext | null;
  ctx: ComponentPublicInstance;
  suspenseId: number;
  asyncDep: Promise<any> | null;
  asyncResolved: boolean;
  isMounted: boolean;
  isUnmounted: boolean;
  isDeactivated: boolean;
  bc: LifecycleHook | null;
  c: LifecycleHook | null;
  bm: LifecycleHook | null;
  m: LifecycleHook | null;
  bu: LifecycleHook | null;
  u: LifecycleHook | null;
  um: LifecycleHook | null;
  bum: LifecycleHook | null;
  da: LifecycleHook | null;
  a: LifecycleHook | null;
  rtg: LifecycleHook | null;
  rtc: LifecycleHook | null;
  ec: LifecycleHook | null;
  sp: LifecycleHook | null;
}

enum ErrorTypes {
  SETUP_FUNCTION = 'setup function',
  RENDER_FUNCTION = 'render function',
  WATCH_GETTER = 'watcher getter',
  WATCH_CALLBACK = 'watcher callback',
  WATCH_CLEANUP = 'watcher cleanup function',
  NATIVE_EVENT_HANDLER = 'native event handler',
  COMPONENT_EVENT_HANDLER = 'component event handler',
  VNODE_HOOK = 'vnode hook',
  DIRECTIVE_HOOK = 'directive hook',
  TRANSITION_HOOK = 'transition hook',
  APP_ERROR_HANDLER = 'app errorHandler',
  APP_WARN_HANDLER = 'app warnHandler',
  FUNCTION_REF = 'ref function',
  ASYNC_COMPONENT_LOADER = 'async component loader',
  SCHEDULER = 'scheduler flush'
}

type SchedulerJob = (() => void) & {
  id?: number;
  pre?: boolean;
  active?: boolean;
  computed?: boolean;
  allowRecurse?: boolean;
  ownerInstance?: ComponentInternalInstance;
};