or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

asset-resolution.mdbuiltin-components.mdcomponents.mdcomposition-helpers.mddependency-injection.mderror-handling.mdhydration.mdindex.mdinternal-render-helpers.mdlifecycle.mdreactivity.mdscheduler-timing.mdssr-context.mdvdom-rendering.mdwatch-effects.md
tile.json

tessl/npm-vue--runtime-core

Vue.js 3 runtime core library providing foundational APIs for building custom renderers and managing reactive component systems

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/runtime-core@3.5.x

To install, run

npx @tessl/cli install tessl/npm-vue--runtime-core@3.5.0

index.mddocs/

Vue Runtime Core

Vue Runtime Core is the foundational runtime library of Vue.js 3, providing the core APIs for building custom renderers and managing reactive component systems. This package is published only for typing and building custom renderers. It is NOT meant to be used in applications. This package is designed for library authors and advanced users who need to create custom renderers or integrate Vue's reactivity system into other frameworks.

Package Information

  • Package Name: @vue/runtime-core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @vue/runtime-core

Core Imports

For custom renderer development:

import { createRenderer, createHydrationRenderer } from "@vue/runtime-core";

For accessing Vue's reactivity system:

import { 
  reactive, ref, computed, watch, 
  onMounted, onBeforeUnmount,
  defineComponent, h
} from "@vue/runtime-core";

For CommonJS:

const { createRenderer, createHydrationRenderer } = require("@vue/runtime-core");
const { 
  reactive, ref, computed, watch,
  onMounted, onBeforeUnmount,
  defineComponent, h 
} = require("@vue/runtime-core");

Basic Usage

Creating a custom renderer (primary use case):

import { createRenderer } from "@vue/runtime-core";

// Create a custom renderer for your platform
const { render, createApp } = createRenderer({
  createElement(tag, namespace) {
    // Create your platform-specific element
    return document.createElement(tag);
  },
  insert(child, parent, anchor = null) {
    // Insert element into your platform
    parent.insertBefore(child, anchor);
  },
  remove(child) {
    // Remove element from your platform
    const parent = child.parentNode;
    if (parent) parent.removeChild(child);
  },
  patchProp(el, key, prevValue, nextValue, namespace, parentComponent) {
    // Handle property updates for your platform
    if (key.startsWith('on')) {
      el.addEventListener(key.slice(2).toLowerCase(), nextValue);
    } else {
      el.setAttribute(key, nextValue);
    }
  },
  createText(text) {
    return document.createTextNode(text);
  },
  createComment(text) {
    return document.createComment(text);
  },
  setText(node, text) {
    node.nodeValue = text;
  },
  setElementText(el, text) {
    el.textContent = text;
  },
  parentNode(node) {
    return node.parentNode;
  },
  nextSibling(node) {
    return node.nextSibling;
  }
});

// Use your custom renderer
const app = createApp({
  render() {
    return h("div", "Hello Custom Renderer!");
  }
});

Using reactivity system independently:

import { reactive, ref, computed, watch } from "@vue/runtime-core";

// Create reactive state
const state = reactive({ count: 0 });
const count = ref(0);
const doubled = computed(() => count.value * 2);

// Watch for changes
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

Architecture

Vue Runtime Core is built around several key systems:

  • Reactivity System: Core reactive primitives (reactive, ref, computed) providing fine-grained reactivity
  • Component System: Component definition, lifecycle management, and instance handling
  • Virtual DOM: VNode creation, diffing, and patching for efficient DOM updates
  • Render Pipeline: Flexible renderer architecture supporting custom rendering targets
  • Composition API: Modern component logic composition with lifecycle hooks and utilities
  • Effect System: Dependency tracking and effect scheduling for reactive updates
  • Hydration System: Server-side rendering support with client-side hydration

Capabilities

Reactivity System

Core reactive primitives for building reactive data structures and computed values. Provides fine-grained reactivity with automatic dependency tracking.

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>;
function ref<T>(value: T): Ref<UnwrapRef<T>>;
function ref<T = any>(): Ref<T | undefined>;
function shallowRef<T>(value: T): ShallowRef<T>;
function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>;
function computed<T>(options: WritableComputedOptions<T>): WritableComputedRef<T>;
function readonly<T>(target: T): DeepReadonly<UnwrapNestedRefs<T>>;
function shallowReactive<T extends object>(target: T): ShallowReactive<T>;
function shallowReadonly<T extends object>(target: T): Readonly<T>;
function isRef(r: any): r is Ref;
function isReactive(value: unknown): boolean;
function isReadonly(value: unknown): boolean;
function isProxy(value: unknown): boolean;
function unref<T>(ref: T | Ref<T>): T;
function toRef<T extends object, K extends keyof T>(object: T, key: K): ToRef<T[K]>;
function toRef<T extends object, K extends keyof T>(object: T, key: K, defaultValue: T[K]): ToRef<Exclude<T[K], undefined>>;
function toRefs<T extends object>(object: T): ToRefs<T>;
function toValue<T>(val: T | Ref<T> | (() => T)): T;
function customRef<T>(factory: CustomRefFactory<T>): Ref<T>;
function triggerRef(ref: Ref): void;
function markRaw<T extends object>(value: T): Raw<T>;
function toRaw<T>(observed: T): T;
function proxyRefs<T extends object>(objectWithRefs: T): ShallowUnwrapRef<T>;

Reactivity System

Component System

Component definition, lifecycle management, and composition API for building reactive components.

function defineComponent<Props = {}, RawBindings = {}, D = {}, C extends ComputedOptions = {}, M extends MethodOptions = {}>(options: ComponentOptionsWithoutProps<Props, RawBindings, D, C, M>): DefineComponent<Props, RawBindings, D, C, M>;
function defineComponent<Props extends Readonly<ComponentPropsOptions>, RawBindings = {}, D = {}, C extends ComputedOptions = {}, M extends MethodOptions = {}>(options: ComponentOptionsWithArrayProps<Props, RawBindings, D, C, M>): DefineComponent<Props, RawBindings, D, C, M>;
function defineComponent<PropsOrPropOptions, RawBindings, D, C extends ComputedOptions, M extends MethodOptions, E extends EmitsOptions = {}, EE extends string = string, Props = Readonly<ExtractPropTypes<PropsOrPropOptions>>>(options: ComponentOptionsWithObjectProps<PropsOrPropOptions, RawBindings, D, C, M, E, EE>): DefineComponent<Props, RawBindings, D, C, M, E>;
function defineAsyncComponent<T extends Component = { new (): ComponentPublicInstance }>(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T;
function getCurrentInstance(): ComponentInternalInstance | null;

Component System

Watch & Effects

Watch reactive data sources and create reactive effects with flexible scheduling options.

function watch<T = any, Immediate extends Readonly<boolean> = false>(source: T | WatchSource<T>, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle;
function watch<T extends MultiWatchSources, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle;
function watchEffect(effect: WatchEffect, options?: WatchEffectOptions): WatchStopHandle;
function watchPostEffect(effect: WatchEffect, options?: WatchEffectOptions): WatchStopHandle;
function watchSyncEffect(effect: WatchEffect, options?: WatchEffectOptions): WatchStopHandle;
function effect(fn: () => void, options?: ReactiveEffectOptions): ReactiveEffectRunner;
function stop(runner: ReactiveEffectRunner): void;
function getCurrentWatcher(): ReactiveEffect | undefined;
function onWatcherCleanup(cleanupFn: () => void): void;

Watch & Effects

Lifecycle Hooks

Component lifecycle hooks for managing component mounting, updates, and cleanup.

function onBeforeMount(hook: () => void): void;
function onMounted(hook: () => void): void;
function onBeforeUpdate(hook: () => void): void;
function onUpdated(hook: () => void): void;
function onBeforeUnmount(hook: () => void): void;
function onUnmounted(hook: () => void): void;
function onActivated(hook: () => void): void;
function onDeactivated(hook: () => void): void;
function onRenderTracked(hook: DebuggerHook): void;
function onRenderTriggered(hook: DebuggerHook): void;
function onErrorCaptured(hook: ErrorCapturedHook): void;
function onServerPrefetch(hook: () => Promise<any>): void;

Lifecycle Hooks

Dependency Injection

Provide and inject values across component hierarchies with type-safe injection keys.

function provide<T>(key: InjectionKey<T> | string, value: T): void;
function inject<T>(key: InjectionKey<T> | string): T | undefined;
function hasInjectionContext(): boolean;

Dependency Injection

Virtual DOM & Rendering

VNode creation, manipulation, and custom renderer creation for flexible rendering targets.

function h(type: string | Component | typeof Text | typeof Comment | typeof Fragment | typeof Static, props?: VNodeProps | null, children?: VNodeNormalizedChildren): VNode;
function h(type: string | Component, props: null, children: VNodeNormalizedChildren): VNode;
function h(type: string | Component, children: VNodeNormalizedChildren): VNode;
function createVNode(type: VNodeTypes, props?: VNodeProps | null, children?: VNodeNormalizedChildren, patchFlag?: number, dynamicProps?: string[] | null, isBlockNode?: boolean): VNode;
function cloneVNode<T, U>(vnode: VNode<T, U>, extraProps?: Data & VNodeProps, mergeRef?: boolean, cloneTransition?: boolean): VNode<T, U>;
function mergeProps(...args: (Data & VNodeProps)[]): Data;
function isVNode(value: any): value is VNode;
function createRenderer<HostNode = RendererNode, HostElement = RendererElement>(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement>;
function createHydrationRenderer(options: RendererOptions<Node, Element>): HydrationRenderer;

Virtual DOM & Rendering

Built-in Components

Core built-in components for advanced functionality like teleportation, suspense, and keep-alive caching.

const Teleport: Component<TeleportProps>;
const Suspense: Component<SuspenseProps>;
const KeepAlive: Component<KeepAliveProps>;
const BaseTransition: Component<BaseTransitionProps>;
const Fragment: unique symbol;
const Text: unique symbol;
const Comment: unique symbol;
const Static: unique symbol;

Built-in Components

Composition Helpers

Helper utilities for composition API usage including template refs, models, and setup context.

function useTemplateRef<T>(key: string): TemplateRef<T>;
function useModel<T>(props: T, name: string, options?: UseModelOptions): ModelRef<T>;
function useId(): string;
function useSlots(): Slots;
function useAttrs(): Data;

Composition Helpers

Hydration Strategies

Advanced hydration strategies for selective server-side rendering and client-side hydration.

function hydrateOnIdle(timeout?: number): HydrationStrategy;
function hydrateOnVisible(options?: IntersectionObserverInit): HydrationStrategy;
function hydrateOnMediaQuery(query: string): HydrationStrategy;
function hydrateOnInteraction(events: string | string[]): HydrationStrategy;

Hydration Strategies

Scheduler & Timing

Control timing of updates and DOM operations with precise scheduling utilities.

function nextTick(fn?: () => void): Promise<void>;
function queuePostFlushCb(cb: SchedulerJob): void;

Scheduler & Timing

Asset Resolution

Dynamically resolve components and directives at runtime for flexible component systems.

function resolveComponent(name: string): ConcreteComponent | string;
function resolveDirective(name: string): Directive | undefined;
function resolveDynamicComponent(component: unknown): VNodeTypes;

Asset Resolution

Error Handling

Robust error handling utilities for graceful error management and reporting.

function handleError(err: unknown, instance: ComponentInternalInstance | null, type: ErrorTypes, suspenseBoundary?: SuspenseBoundary | null): void;
function callWithErrorHandling<T extends any[], R>(fn: (...args: T) => R, instance: ComponentInternalInstance | null, type: ErrorTypes, args?: T): R | undefined;
function callWithAsyncErrorHandling<T extends any[], R>(fn: ((...args: T) => R) | ((...args: T) => R)[], instance: ComponentInternalInstance | null, type: ErrorTypes, args?: T): Promise<R[]>;
const ErrorCodes: {
  SETUP_FUNCTION: 0,
  RENDER_FUNCTION: 1,
  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,
  WATCH_CALLBACK: 15,
  WATCH_GETTER: 16,
  WATCH_CLEANUP: 17
};
const ErrorTypeStrings: Record<number | string, string>;

Error Handling

SSR Context

Server-side rendering context management for universal applications.

function useSSRContext<T>(): T | undefined;
const ssrContextKey: InjectionKey<Record<string, any>>;

SSR Context

Script Setup APIs

Compile-time macros for <script setup> syntax, used for typing and warnings during development.

function defineProps<T>(): T;
function defineEmits<T>(): T;
function defineExpose<T>(exposed: T): void;
function defineOptions(options: ComponentOptions): void;
function defineSlots<T>(): T;
function defineModel<T>(name?: string, options?: ModelOptions): ModelRef<T>;
function withDefaults<T>(props: T, defaults: Partial<T>): T;

Development & DevTools

Development utilities and devtools integration for debugging and development workflow.

const version: string;
const devtools: DevtoolsHook | undefined;
function setDevtoolsHook(hook: DevtoolsHook): void;
function warn(msg: string, ...args: any[]): void;
function assertNumber(val: unknown, type: string): void;

Utility Functions

Re-exported utility functions from @vue/shared for common transformations and normalizations.

function toDisplayString(val: unknown): string;
function camelize(str: string): string;
function capitalize(str: string): string;
function toHandlerKey(str: string): string;
function normalizeProps(props: Record<string, any> | null): Record<string, any> | null;
function normalizeClass(value: unknown): string;
function normalizeStyle(value: unknown): NormalizedStyle | null;

Advanced Composition Helpers

Advanced helper utilities for complex composition API scenarios and internal framework usage.

function mergeDefaults<T>(props: T, defaults: Partial<T>): T;
function mergeModels<T>(props: T, models: Record<string, any>): T;
function createPropsRestProxy<T>(props: T, keys: string[]): T;
function withAsyncContext<T>(getAwaitable: () => Promise<T>): Promise<T>;

Internal Render Helpers

Low-level rendering utilities for advanced scenarios and custom renderer implementations.

function renderList<T>(source: T[], renderItem: (value: T, key: string | number, index: number) => VNode): VNode[];
function renderSlot(slots: Slots, name: string, props?: Data, fallback?: () => VNodeArrayChildren): VNode;
function withMemo<T>(memo: any[], render: () => T, cache: any[], index: number): T;
function isMemoSame(cached: any[], memo: any[]): boolean;
function openBlock(disableTracking?: boolean): void;
function createBlock(type: VNodeTypes, props?: VNodeProps, children?: VNodeArrayChildren): VNode;
function setBlockTracking(value: number): void;
function createTextVNode(text?: string, flag?: number): VNode;
function createCommentVNode(text?: string, asBlock?: boolean): VNode;
function createStaticVNode(content: string, numberOfNodes: number): VNode;
function createElementVNode(type: string, props?: VNodeProps, children?: VNodeArrayChildren): VNode;
function createElementBlock(type: string, props?: VNodeProps, children?: VNodeArrayChildren): VNode;
function guardReactiveProps(props: VNodeProps | null): VNodeProps | null;
function createSlots(slots: Record<string, Slot>, dynamicSlots?: (ComputedRef<string> | string | ComputedRef<string[]> | string[])[]): Slots;
function toHandlers(obj: Record<string, any>): Record<string, any>;
function withCtx(fn: Function, ctx?: ComponentInternalInstance | null): Function;
function pushScopeId(id: string | null): void;
function popScopeId(): void;
function withScopeId<T>(id: string | null, fn: () => T): T;
function transformVNodeArgs(transformer?: (args: any[], instance?: ComponentInternalInstance | null) => any[]): void;

Internal Render Helpers

Core Types

interface Ref<T> {
  value: T;
}

interface ComputedRef<T> extends Ref<T> {
  readonly value: T;
}

interface WatchOptions {
  immediate?: boolean;
  deep?: boolean;
  flush?: 'pre' | 'post' | 'sync';
}

interface InjectionKey<T> extends Symbol {}

interface VNode {
  type: VNodeTypes;
  props: VNodeProps | null;
  children: VNodeNormalizedChildren;
  key: string | number | symbol | null;
}

interface ComponentInternalInstance {
  uid: number;
  vnode: VNode;
  parent: ComponentInternalInstance | null;
  setupState: Data;
  ctx: ComponentPublicInstance;
}

interface RendererOptions<HostNode = any, HostElement = any> {
  createElement(type: string, namespace?: ElementNamespace): HostElement;
  insert(child: HostNode, parent: HostElement, anchor?: HostNode | null): void;
  remove(child: HostNode): void;
  patchProp(el: HostElement, key: string, prevValue: any, nextValue: any, namespace?: ElementNamespace, parentComponent?: ComponentInternalInstance | null): void;
  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?(node: HostNode): HostNode;
  insertStaticContent?(content: string, parent: HostElement, anchor: HostNode | null, namespace: ElementNamespace): [HostNode, HostNode];
}

interface Renderer<HostElement = RendererElement> {
  render: RootRenderFunction<HostElement>;
  createApp: CreateAppFunction<HostElement>;
}

interface HydrationRenderer extends Renderer<Element | ShadowRoot> {
  hydrate: RootHydrateFunction;
}

interface ModelRef<T> extends Ref<T> {
  readonly value: T;
}

interface ModelOptions {
  get?: (v: any) => any;
  set?: (v: any) => any;
}

interface TemplateRef<T = any> extends Ref<T | null> {}

interface WatchHandle {
  (): void;
  pause(): void;
  resume(): void;
  stop(): void;
}

interface WatchStopHandle {
  (): void;
}

interface ErrorTypes {
  SETUP_FUNCTION: 'setup function';
  RENDER_FUNCTION: 'render 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';
  WATCH_CALLBACK: 'watcher callback';
  WATCH_GETTER: 'watcher getter';
  WATCH_CLEANUP: 'watcher cleanup';
}

interface DevtoolsHook {
  enabled?: boolean;
  emit: (event: string, ...args: any[]) => void;
  on: (event: string, handler: Function) => void;
  once: (event: string, handler: Function) => void;
  off: (event: string, handler: Function) => void;
  appRecord: any;
  apps: any[];
}

type ElementNamespace = 'svg' | 'mathml' | undefined;
type VNodeTypes = string | VNode | Component | typeof Text | typeof Static | typeof Comment | typeof Fragment | typeof Teleport | typeof TeleportImpl | typeof Suspense | typeof KeepAlive;
type VNodeArrayChildren = Array<VNodeArrayChildren | VNodeChildAtom>;
type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
type VNodeChild = VNodeChildAtom | VNodeArrayChildren;
type VNodeNormalizedChildren = string | VNodeArrayChildren | RawSlots | null;
type VNodeProps = Record<string, any> & {
  key?: string | number | symbol;
  ref?: VNodeRef;
  ref_for?: boolean;
  ref_key?: string;
};
type VNodeRef = string | Ref | ((ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void);
type RawSlots = {
  [name: string]: unknown;
  $stable?: boolean;
};
type NormalizedStyle = Record<string, string | number>;
type Data = Record<string, unknown>;
type Slots = Readonly<InternalSlots>;
type InternalSlots = {
  [name: string]: Slot | undefined;
};

interface Slot<T extends any[] = any[]> {
  (...args: T): VNode[];
  _c?: boolean;
  _ctx?: ComponentInternalInstance | null;
  _d?: boolean;
  _s?: boolean;
}

interface ComponentPublicInstance {
  $: ComponentInternalInstance;
  $data: Data;
  $props: Data;
  $attrs: Data;
  $refs: Data;
  $slots: Slots;
  $root: ComponentPublicInstance | null;
  $parent: ComponentPublicInstance | null;
  $emit: EmitFn;
  $el: any;
  $options: ComponentOptionsBase<any, any, any, any, any, any, any, any, any>;
  $forceUpdate: () => void;
  $nextTick: typeof nextTick;
  $watch<T = any>(source: string | WatchSource<T>, cb: WatchCallback<T>, options?: WatchOptions): WatchStopHandle;
}

type ComponentOptionsBase<
  V,
  D,
  C,
  M,
  E,
  EE = EmitsOptions,
  I = {},
  II = {},
  S = {}
> = {
  setup?: (this: void, props: Readonly<P>, ctx: SetupContext<EE>) => Promise<RawBindings> | RawBindings | RenderFunction | void;
  name?: string;
  template?: string | object;
  render?: Function;
  components?: Record<string, Component>;
  directives?: Record<string, Directive>;
  inheritAttrs?: boolean;
  emits?: EE;
  expose?: string[];
  serverPrefetch?(): void | Promise<any>;
} & ComponentCustomOptions &
  ComponentOptionsData<D> &
  ComponentOptionsProps<P> &
  ComponentOptionsComputed<C> &
  ComponentOptionsMethods<M> &
  ComponentOptionsWatch<V> &
  ComponentProvideOptions;

type SetupContext<E = EmitsOptions> = E extends any ? {
  attrs: Data;
  slots: Slots;
  emit: EmitFn<E>;
  expose: (exposed?: Record<string, any>) => void;
} : never;

type EmitFn<Options = ObjectEmitsOptions> = Options extends Array<infer V>
  ? (event: V, ...args: any[]) => void
  : Options extends ObjectEmitsOptions
  ? <T extends keyof Options>(event: T, ...args: Parameters<Options[T]>) => void
  : (event: string, ...args: any[]) => void;

type RawBindings = Record<string, any>;
type RenderFunction = () => VNode | VNode[];
type Component<Props = any, RawBindings = any, D = any, C extends ComputedOptions = ComputedOptions, M extends MethodOptions = MethodOptions> = ConcreteComponent<Props, RawBindings, D, C, M> | ComponentPublicInstanceConstructor<Props>;

interface ConcreteComponent<
  Props = {},
  RawBindings = any,
  D = any,
  C extends ComputedOptions = ComputedOptions,
  M extends MethodOptions = MethodOptions
> {
  __vccOpts?: ComponentOptions<any, any, any, Props, RawBindings, D, C, M>;
  new (...args: any[]): ComponentPublicInstance<Props, RawBindings, D, C, M>;
  __isFragment?: never;
  __isTeleport?: never;
  __isSuspense?: never;
}

type MethodOptions = Record<string, Function>;
type ComputedOptions = Record<string, ComputedGetter<any> | WritableComputedOptions<any>>;
type ComponentPublicInstanceConstructor<T = {}> = { new (...args: any[]): ComponentPublicInstance<T> };
type ComponentOptions<
  V = any,
  D = any,
  C extends ComputedOptions = any,
  M extends MethodOptions = any,
  E extends EmitsOptions = any,
  Props = any,
  RawBindings = any,
  Defaults = any,
  I extends ComponentInjectOptions = any,
  II extends string = string,
  S extends SlotsType = any
> = ComponentOptionsBase<V, D, C, M, E, Props, RawBindings, Defaults, I, II, S> & {
  call?: (this: unknown, ...args: unknown[]) => never;
} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M, E>>;

type EmitsOptions = ObjectEmitsOptions | string[];
type ObjectEmitsOptions = Record<string, ((...args: any[]) => any) | null>;
type SlotsType<T = Record<string, any>> = T | (new () => T);
type ComponentInjectOptions = string[] | ObjectInjectOptions;
type ObjectInjectOptions = Record<string | symbol, string | symbol | { from?: string | symbol; default?: unknown }>;
type ComponentProvideOptions = ObjectProvideOptions | Function;
type ObjectProvideOptions = Record<string | symbol, unknown>;
type ComponentCustomOptions = Record<string, any>;
type ComponentOptionsMixin = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>;

interface ComponentOptionsData<D> {
  data?: (this: ComponentPublicInstance, vm: ComponentPublicInstance) => D;
}

interface ComponentOptionsProps<P> {
  props?: ComponentPropsOptions<P>;
}

interface ComponentOptionsComputed<C> {
  computed?: C;
}

interface ComponentOptionsMethods<M> {
  methods?: M;
}

interface ComponentOptionsWatch<V> {
  watch?: ComponentWatchOptions<V>;
}

type ComponentPropsOptions<P = Data> = ComponentObjectPropsOptions<P> | string[];
type ComponentObjectPropsOptions<P = Data> = {
  [K in keyof P]: Prop<P[K]> | null;
};

interface Prop<T, D = T> {
  type?: PropType<T> | true | null;
  required?: boolean;
  default?: D | DefaultFactory<D> | null | undefined | object;
  validator?(value: unknown): boolean;
}

type PropType<T> = PropConstructor<T> | PropConstructor<T>[];
type PropConstructor<T = any> = { new (...args: any[]): T & {} } | { (): T } | PropMethod<T>;
type PropMethod<T, TConstructor = any> = [T] extends [
  ((...args: any) => any) | undefined
] ? { new (): TConstructor; (): T; readonly prototype: TConstructor } : never;
type DefaultFactory<T> = (props: Data) => T | null | undefined;
type ComponentWatchOptions<V = any> = Record<string, ComponentWatchOptionItem<V>>;
type ComponentWatchOptionItem<V = any> = string | WatchCallback<V> | ObjectWatchOptionItem<V>;
interface ObjectWatchOptionItem<V = any> extends WatchOptions {
  handler: WatchCallback<V> | string;
}

type HydrationStrategy = (hydrate: () => void, forEachElement?: (cb: (el: Element) => void) => void) => () => void;
type HydrationStrategyFactory = () => HydrationStrategy;

// Additional missing types
type RendererNode = any;
type RendererElement = any;
type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T);
type MultiWatchSources = (WatchSource<unknown> | object)[];
type MapSources<T, Immediate> = {
  [K in keyof T]: T[K] extends WatchSource<infer V>
    ? Immediate extends true
      ? V | undefined
      : V
    : T[K] extends object
    ? Immediate extends true
      ? T[K] | undefined
      : T[K]
    : never;
};
type WatchCallback<V = any, OV = any> = (value: V, oldValue: OV, onCleanup: OnCleanup) => any;
type WatchEffect = (onCleanup: OnCleanup) => void;
type OnCleanup = (cleanupFn: () => void) => void;
interface WatchEffectOptions extends DebuggerOptions {
  flush?: 'pre' | 'post' | 'sync';
}
interface ReactiveEffectOptions extends DebuggerOptions {
  lazy?: boolean;
  scheduler?: EffectScheduler;
  scope?: EffectScope;
  allowRecurse?: boolean;
  onStop?: () => void;
}
type ReactiveEffectRunner<T = any> = {
  (): T;
  effect: ReactiveEffect;
};
type EffectScheduler = (...args: any[]) => any;
type DebuggerHook = (e: DebuggerEvent) => void;
type ErrorCapturedHook<TError = unknown> = (err: TError, instance: ComponentPublicInstance | null, info: string) => boolean | void;
interface DebuggerEvent {
  effect: ReactiveEffect;
  target: object;
  type: TrackOpTypes | TriggerOpTypes;
  key: any;
  newValue?: any;
  oldValue?: any;
  oldTarget?: Map<any, any> | Set<any>;
}
enum TrackOpTypes {
  GET = 'get',
  HAS = 'has',
  ITERATE = 'iterate'
}
enum TriggerOpTypes {
  SET = 'set',
  ADD = 'add',
  DELETE = 'delete',
  CLEAR = 'clear'
}
type WritableComputedOptions<T> = {
  get: ComputedGetter<T>;
  set: ComputedSetter<T>;
};
type ComputedGetter<T> = (...args: any[]) => T;
type ComputedSetter<T> = (v: T) => void;
type CustomRefFactory<T> = (track: () => void, trigger: () => void) => {
  get: () => T;
  set: (value: T) => void;
};
type ExtractPropTypes<O> = {
  [K in keyof Pick<O, RequiredKeys<O>>]: InferPropType<O[K]>;
} & {
  [K in keyof Pick<O, OptionalKeys<O>>]?: InferPropType<O[K]>;
};
type RequiredKeys<T> = {
  [K in keyof T]: T[K] extends { required: true } | { default: any } | BooleanConstructor | { type: BooleanConstructor }
    ? T[K] extends { required: false }
      ? never
      : K
    : never;
}[keyof T];
type OptionalKeys<T> = Exclude<keyof T, RequiredKeys<T>>;
type InferPropType<T> = [T] extends [null]
  ? any // null & true would fail to infer
  : [T] extends [{ type: null | true }]
  ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
  : [T] extends [ObjectConstructor | { type: ObjectConstructor }]
  ? Record<string, any>
  : [T] extends [BooleanConstructor | { type: BooleanConstructor }]
  ? boolean
  : [T] extends [DateConstructor | { type: DateConstructor }]
  ? Date
  : [T] extends [(infer U)[] | { type: (infer U)[] }]
  ? U extends DateConstructor
    ? Date | InferPropType<U>
    : InferPropType<U>
  : [T] extends [Prop<infer V, infer D>]
  ? unknown extends V
    ? IfAny<V, V, D>
    : V
  : T;
type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
type ComponentOptionsWithoutProps<
  Props = {},
  RawBindings = {},
  D = {},
  C extends ComputedOptions = {},
  M extends MethodOptions = {}
> = ComponentOptions<any, D, C, M, any, Props, RawBindings> & {
  props?: undefined;
} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M>>;
type ComponentOptionsWithArrayProps<
  PropNames extends string = string,
  RawBindings = {},
  D = {},
  C extends ComputedOptions = {},
  M extends MethodOptions = {}
> = ComponentOptions<any, D, C, M, any, Readonly<{ [key in PropNames]?: any }>, RawBindings> & {
  props: PropNames[];
} & ThisType<ComponentPublicInstance<Readonly<{ [key in PropNames]?: any }>, RawBindings, D, C, M>>;
type ComponentOptionsWithObjectProps<
  PropsOptions = ComponentObjectPropsOptions,
  RawBindings = {},
  D = {},
  C extends ComputedOptions = {},
  M extends MethodOptions = {},
  E extends EmitsOptions = {},
  EE extends string = string
> = ComponentOptions<any, D, C, M, E, Readonly<ExtractPropTypes<PropsOptions>>, RawBindings, any, any, EE> & {
  props: PropsOptions;
} & ThisType<ComponentPublicInstance<Readonly<ExtractPropTypes<PropsOptions>>, RawBindings, D, C, M, E>>;