feat: improve performance for defineComponent

packages/reactivue/src/component.ts

@@ -78,7 +78,7 @@ const unmount = (id: number) => {
     effect.stop()
 
   invokeLifeCycle(LifecycleHooks.UNMOUNTED, _vueState[id])
-  _vueState[id].scope!.stop()
+  _vueState[id].scope.stop()
   _vueState[id].isUnmounted = true
 
   // release the ref

packages/reactivue/src/defineComponent.ts

@@ -1,10 +1,10 @@
 import { useReducer } from 'react'
-import { UnwrapRef, computed } from '@vue/reactivity'
+import { UnwrapRef, computed, markRaw, ref, toValue } from '@vue/reactivity'
 import { USE_SETUP_NO_UPDATE, useSetup } from './useSetup'
 import { watch } from './watch'
 
 export function defineComponent<PropsType>(
-  setupAndRenderFunction: (props: PropsType) => () => JSX.Element,
+  setupAndRenderFunction: (props: PropsType) => ((() => JSX.Element) | JSX.Element),
 ): (props: PropsType) => JSX.Element
 export function defineComponent<PropsType, State>(
   setupFunction: (props: PropsType) => State,
@@ -17,12 +17,12 @@ export function defineComponent(
   return (props) => {
     const forceUpdate = useReducer(v => (v + 1) % 0xFFFFFFFF, 0)[1] as () => void
     const state = useSetup((props) => {
-      const setupReturns = setupFunction(props)
-      const realRenderFunction = renderFunction ? () => realRenderFunction(setupReturns) : setupReturns
-      if (!renderFunction && typeof realRenderFunction !== 'function')
-        throw new Error('setup must return a render function, or provide a render function separately')
+      const setupReturns = ref(setupFunction(props))
 
-      const jsxElement = computed(() => realRenderFunction())
+      const jsxElement
+        = typeof renderFunction === 'function'
+          ? computed(() => markRaw(renderFunction(setupReturns.value)))
+          : computed(() => markRaw(toValue(setupReturns.value)))
 
       watch(jsxElement, () => {
         if (jsxElement.effect.dirty) forceUpdate() // force update only when new jsxElement is not taken by React

packages/reactivue/src/mock.ts

@@ -57,7 +57,7 @@ export function createApp() {
   const installedPlugins = new Set()
 
   const app = (context.app = {
-    version: '3.0.0',
+    version: '3.4.0',
 
     get config() {
       return context.config

packages/reactivue/src/useSetup.ts

@@ -46,8 +46,16 @@ export function useSetup<State, Props = {}>(
       if (!instance)
         return
       const { props } = instance
-      for (const key of Object.keys(ReactProps))
+      const oldKeys = Object.keys(props)
+      for (const key of Object.keys(ReactProps)) {
         props[key] = (ReactProps as any)[key]
+
+        const oldIndex = oldKeys.indexOf(key)
+        if (oldIndex !== -1)
+          oldKeys.splice(oldIndex, 1)
+      }
+      for (const key of oldKeys)
+        delete props[key]
     })
   }
 

packages/reactivue/src/watch.ts

@@ -1,91 +1,6 @@
-// ported from https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/apiWatch.ts
+export { watch, watchEffect } from '@vue/runtime-core'
 
-/* eslint-disable array-callback-return */
-import { Ref, ComputedRef, ReactiveEffectOptions } from '@vue/reactivity'
-import { watch as _watch, watchEffect as _watchEffect } from '@vue/runtime-core'
-
-export type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void
-
-export type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T)
-
-export type WatchCallback<V = any, OV = any> = (
-  value: V,
-  oldValue: OV,
-  onInvalidate: InvalidateCbRegistrator
-) => any
-
-export type WatchStopHandle = () => void
-
-type MapSources<T> = {
-  [K in keyof T]: T[K] extends WatchSource<infer V>
-    ? V
-    : T[K] extends object ? T[K] : never
-}
-
-type MapOldSources<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 InvalidateCbRegistrator = (cb: () => void) => void
-
-export interface WatchOptionsBase {
-  flush?: 'pre' | 'post' | 'sync'
-  onTrack?: ReactiveEffectOptions['onTrack']
-  onTrigger?: ReactiveEffectOptions['onTrigger']
-}
-
-export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
-  immediate?: Immediate
-  deep?: boolean
-}
-
-// Simple effect.
-export function watchEffect(
-  effect: WatchEffect,
-  options?: WatchOptionsBase,
-): WatchStopHandle {
-  return _watchEffect(effect, options)
-}
-
-// overload #1: array of multiple sources + cb
-// Readonly constraint helps the callback to correctly infer value types based
-// on position in the source array. Otherwise the values will get a union type
-// of all possible value types.
-export function watch<
-  T extends Readonly<Array<WatchSource<unknown> | object>>,
-  Immediate extends Readonly<boolean> = false
->(
-  sources: T,
-  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
-  options?: WatchOptions<Immediate>
-): WatchStopHandle
-
-// overload #2: single source + cb
-export function watch<T, Immediate extends Readonly<boolean> = false>(
-  source: WatchSource<T>,
-  cb: WatchCallback<T, Immediate extends true ? (T | undefined) : T>,
-  options?: WatchOptions<Immediate>
-): WatchStopHandle
-
-// overload #3: watching reactive object w/ cb
-export function watch<
-  T extends object,
-  Immediate extends Readonly<boolean> = false
->(
-  source: T,
-  cb: WatchCallback<T, Immediate extends true ? (T | undefined) : T>,
-  options?: WatchOptions<Immediate>
-): WatchStopHandle
-
-// implementation
-export function watch<T = any>(
-  source: WatchSource<T> | WatchSource<T>[],
-  cb: WatchCallback<T>,
-  options?: WatchOptions,
-): WatchStopHandle {
-  return _watch(source, cb as any, options)
-}
+export type {
+  WatchEffect, WatchSource, WatchCallback, WatchStopHandle,
+  WatchOptions, WatchOptionsBase,
+} from '@vue/runtime-core'