feat(runtime-vapor): component emits

README.md

@@ -71,7 +71,9 @@ The code provided here is a duplicate from `runtime-core` as Vapor cannot import
 
 - packages/runtime-vapor/src/apiWatch.ts
 - packages/runtime-vapor/src/component.ts
+- packages/runtime-vapor/src/componentEmits.ts
 - packages/runtime-vapor/src/componentProps.ts
+- packages/runtime-vapor/src/componentPublicInstance.ts
 - packages/runtime-vapor/src/enums.ts
 - packages/runtime-vapor/src/errorHandling.ts
 - packages/runtime-vapor/src/scheduler.ts

packages/reactivity/src/ref.ts

@@ -501,12 +501,11 @@ export type ShallowUnwrapRef<T> = {
 
 type DistrubuteRef<T> = T extends Ref<infer V> ? V : T
 
-export type UnwrapRef<T> =
-  T extends ShallowRef<infer V>
-    ? V
-    : T extends Ref<infer V>
-      ? UnwrapRefSimple<V>
-      : UnwrapRefSimple<T>
+export type UnwrapRef<T> = T extends ShallowRef<infer V>
+  ? V
+  : T extends Ref<infer V>
+    ? UnwrapRefSimple<V>
+    : UnwrapRefSimple<T>
 
 export type UnwrapRefSimple<T> = T extends
   | Function

packages/runtime-core/src/componentEmits.ts

@@ -54,30 +54,28 @@ export type EmitsToProps<T extends EmitsOptions> = T extends string[]
       }
     : {}
 
-export type ShortEmitsToObject<E> =
-  E extends Record<string, any[]>
-    ? {
-        [K in keyof E]: (...args: E[K]) => any
-      }
-    : E
+export type ShortEmitsToObject<E> = E extends Record<string, any[]>
+  ? {
+      [K in keyof E]: (...args: E[K]) => any
+    }
+  : E
 
 export type EmitFn<
   Options = ObjectEmitsOptions,
   Event extends keyof Options = keyof Options,
-> =
-  Options extends Array<infer V>
-    ? (event: V, ...args: any[]) => void
-    : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function
-      ? (event: string, ...args: any[]) => void
-      : UnionToIntersection<
-          {
-            [key in Event]: Options[key] extends (...args: infer Args) => any
-              ? (event: key, ...args: Args) => void
-              : Options[key] extends any[]
-                ? (event: key, ...args: Options[key]) => void
-                : (event: key, ...args: any[]) => void
-          }[Event]
-        >
+> = Options extends Array<infer V>
+  ? (event: V, ...args: any[]) => void
+  : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function
+    ? (event: string, ...args: any[]) => void
+    : UnionToIntersection<
+        {
+          [key in Event]: Options[key] extends (...args: infer Args) => any
+            ? (event: key, ...args: Args) => void
+            : Options[key] extends any[]
+              ? (event: key, ...args: Options[key]) => void
+              : (event: key, ...args: any[]) => void
+        }[Event]
+      >
 
 export function emit(
   instance: ComponentInternalInstance,

packages/runtime-core/src/componentPublicInstance.ts

@@ -84,36 +84,34 @@ type IsDefaultMixinComponent<T> = T extends ComponentOptionsMixin
     : false
   : false
 
-type MixinToOptionTypes<T> =
-  T extends ComponentOptionsBase<
-    infer P,
-    infer B,
-    infer D,
-    infer C,
-    infer M,
-    infer Mixin,
-    infer Extends,
-    any,
-    any,
-    infer Defaults,
-    any,
-    any,
-    any
-  >
-    ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}, Defaults & {}> &
-        IntersectionMixin<Mixin> &
-        IntersectionMixin<Extends>
-    : never
+type MixinToOptionTypes<T> = T extends ComponentOptionsBase<
+  infer P,
+  infer B,
+  infer D,
+  infer C,
+  infer M,
+  infer Mixin,
+  infer Extends,
+  any,
+  any,
+  infer Defaults,
+  any,
+  any,
+  any
+>
+  ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}, Defaults & {}> &
+      IntersectionMixin<Mixin> &
+      IntersectionMixin<Extends>
+  : never
 
 // ExtractMixin(map type) is used to resolve circularly references
 type ExtractMixin<T> = {
   Mixin: MixinToOptionTypes<T>
 }[T extends ComponentOptionsMixin ? 'Mixin' : never]
 
-export type IntersectionMixin<T> =
-  IsDefaultMixinComponent<T> extends true
-    ? OptionTypesType
-    : UnionToIntersection<ExtractMixin<T>>
+export type IntersectionMixin<T> = IsDefaultMixinComponent<T> extends true
+  ? OptionTypesType
+  : UnionToIntersection<ExtractMixin<T>>
 
 export type UnwrapMixinsType<
   T,

packages/runtime-vapor/src/component.ts

@@ -1,26 +1,30 @@
+import type { Data } from '@vue/shared'
+import { EMPTY_OBJ } from '@vue/shared'
 import { EffectScope } from '@vue/reactivity'
 
-import { EMPTY_OBJ } from '@vue/shared'
 import type { Block } from './render'
 import type { DirectiveBinding } from './directive'
-import {
-  type ComponentPropsOptions,
-  type NormalizedPropsOptions,
-  normalizePropsOptions,
+import type {
+  ComponentPropsOptions,
+  NormalizedPropsOptions,
 } from './componentProps'
+import { normalizePropsOptions } from './componentProps'
 
-import type { Data } from '@vue/shared'
+import type { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
+import { emit, normalizeEmitsOptions } from './componentEmits'
 import { VaporLifecycleHooks } from './enums'
 
 export type Component = FunctionalComponent | ObjectComponent
 
 export type SetupFn = (props: any, ctx: any) => Block | Data
 export type FunctionalComponent = SetupFn & {
   props: ComponentPropsOptions
+  emits: EmitsOptions
   render(ctx: any): Block
 }
 export interface ObjectComponent {
   props: ComponentPropsOptions
+  emits: EmitsOptions
   setup?: SetupFn
   render(ctx: any): Block
 }
@@ -36,14 +40,25 @@ export interface ComponentInternalInstance {
   container: ParentNode
   block: Block | null
   scope: EffectScope
+
+  // conventional vnode.type
   component: FunctionalComponent | ObjectComponent
+  rawProps: Data
+
+  // normalized options
   propsOptions: NormalizedPropsOptions
+  emitsOptions: ObjectEmitsOptions | null
 
   parent: ComponentInternalInstance | null
 
+  // TODO: type
+  proxy: Data | null
+
   // state
   props: Data
   setupState: Data
+  emit: EmitFn
+  emitted: Record<string, boolean> | null
   refs: Data
   metadata: WeakMap<Node, ElementMetadata>
 
@@ -52,11 +67,13 @@ export interface ComponentInternalInstance {
   /** directives */
   dirs: Map<Node, DirectiveBinding[]>
 
+  // TODO: registory of provides, appContext, ...
+
   // lifecycle
   isMounted: boolean
   isUnmounted: boolean
   isUpdating: boolean
-  // TODO: registory of provides, lifecycles, ...
+
   /**
    * @internal
    */
@@ -139,19 +156,30 @@ export const unsetCurrentInstance = () => {
 let uid = 0
 export const createComponentInstance = (
   component: ObjectComponent | FunctionalComponent,
+  rawProps: Data,
 ): ComponentInternalInstance => {
   const instance: ComponentInternalInstance = {
     uid: uid++,
     block: null,
     container: null!, // set on mountComponent
     scope: new EffectScope(true /* detached */)!,
     component,
+    rawProps,
 
     // TODO: registory of parent
     parent: null,
 
     // resolved props and emits options
     propsOptions: normalizePropsOptions(component),
+
+    emitsOptions: normalizeEmitsOptions(component),
+
+    // emit
+    emit: null!, // to be set immediately
+    emitted: null,
+
+    proxy: null,
+
     // emitsOptions: normalizeEmitsOptions(type, appContext), // TODO:
 
     // state
@@ -163,11 +191,14 @@ export const createComponentInstance = (
 
     dirs: new Map(),
 
+    // TODO: registory of provides, appContext, ...
+
     // lifecycle
+
     isMounted: false,
     isUnmounted: false,
     isUpdating: false,
-    // TODO: registory of provides, appContext, lifecycles, ...
+
     /**
      * @internal
      */
@@ -225,5 +256,8 @@ export const createComponentInstance = (
      */
     // [VaporLifecycleHooks.SERVER_PREFETCH]: null,
   }
+
+  instance.emit = emit.bind(null, instance)
+
   return instance
 }

packages/runtime-vapor/src/componentEmits.ts

@@ -0,0 +1,95 @@
+// NOTE: runtime-core/src/componentEmits.ts
+
+import {
+  type UnionToIntersection,
+  camelize,
+  extend,
+  hyphenate,
+  isArray,
+  isFunction,
+  toHandlerKey,
+} from '@vue/shared'
+import type { Component, ComponentInternalInstance } from './component'
+
+export type ObjectEmitsOptions = Record<
+  string,
+  ((...args: any[]) => any) | null // TODO: call validation?
+>
+
+export type EmitsOptions = ObjectEmitsOptions | string[]
+
+export type EmitFn<
+  Options = ObjectEmitsOptions,
+  Event extends keyof Options = keyof Options,
+> = Options extends Array<infer V>
+  ? (event: V, ...args: any[]) => void
+  : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function
+    ? (event: string, ...args: any[]) => void
+    : UnionToIntersection<
+        {
+          [key in Event]: Options[key] extends (...args: infer Args) => any
+            ? (event: key, ...args: Args) => void
+            : (event: key, ...args: any[]) => void
+        }[Event]
+      >
+
+export function emit(
+  instance: ComponentInternalInstance,
+  event: string,
+  ...rawArgs: any[]
+) {
+  if (instance.isUnmounted) return
+  const props = instance.rawProps // TODO: raw props
+
+  let args = rawArgs
+
+  // TODO: modelListener
+
+  let handlerName
+  let handler =
+    props[(handlerName = toHandlerKey(event))] ||
+    // also try camelCase event handler (#2249)
+    props[(handlerName = toHandlerKey(camelize(event)))]
+  // for v-model update:xxx events, also trigger kebab-case equivalent
+  // for props passed via kebab-case
+  if (!handler) {
+    handler = props[(handlerName = toHandlerKey(hyphenate(event)))]
+  }
+
+  if (handler && isFunction(handler)) {
+    // TODO: callWithAsyncErrorHandling
+    handler(...args)
+  }
+
+  const onceHandler = props[handlerName + `Once`]
+  if (onceHandler) {
+    if (!instance.emitted) {
+      instance.emitted = {}
+    } else if (instance.emitted[handlerName]) {
+      return
+    }
+
+    if (isFunction(onceHandler)) {
+      instance.emitted[handlerName] = true
+      // TODO: callWithAsyncErrorHandling
+      onceHandler(...args)
+    }
+  }
+}
+
+export function normalizeEmitsOptions(
+  comp: Component,
+): ObjectEmitsOptions | null {
+  // TODO: caching?
+
+  const raw = comp.emits
+  let normalized: ObjectEmitsOptions = {}
+
+  if (isArray(raw)) {
+    raw.forEach((key) => (normalized[key] = null))
+  } else {
+    extend(normalized, raw)
+  }
+
+  return normalized
+}

packages/runtime-vapor/src/componentProps.ts

@@ -77,6 +77,7 @@ export function initProps(
   if (rawProps) {
     for (let key in rawProps) {
       // key, ref are reserved and never passed down
+      // TODO: remove vnode
       if (isReservedProp(key)) {
         continue
       }

packages/runtime-vapor/src/componentPublicInstance.ts

@@ -0,0 +1,24 @@
+import { hasOwn } from '@vue/shared'
+import type { ComponentInternalInstance } from './component'
+
+export interface ComponentRenderContext {
+  [key: string]: any
+  _: ComponentInternalInstance
+}
+
+export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
+  get({ _: instance }: ComponentRenderContext, key: string) {
+    let normalizedProps
+    const { setupState, props } = instance
+    if (hasOwn(setupState, key)) {
+      return setupState[key]
+    } else if (
+      (normalizedProps = instance.propsOptions[0]) &&
+      hasOwn(normalizedProps, key)
+    ) {
+      return props![key]
+    }
+  },
+}
+
+// TODO: publicPropertiesMap