refactor: tweaks

packages/runtime-core/src/component.ts

@@ -28,6 +28,7 @@ import {
 } from '@vue/shared'
 import { SuspenseBoundary } from './components/Suspense'
 import { CompilerError, CompilerOptions } from '@vue/compiler-core'
+import { currentRenderingInstance } from './componentRenderUtils'
 
 export type Data = { [key: string]: unknown }
 
@@ -112,6 +113,7 @@ export interface ComponentInternalInstance {
   sink: { [key: string]: any }
 
   // lifecycle
+  isMounted: boolean
   isUnmounted: boolean
   isDeactivated: boolean
   [LifecycleHooks.BEFORE_CREATE]: LifecycleHook
@@ -179,6 +181,7 @@ export function createComponentInstance(
 
     // lifecycle hooks
     // not using enums here because it results in computed properties
+    isMounted: false,
     isUnmounted: false,
     isDeactivated: false,
     bc: null,
@@ -217,7 +220,7 @@ export let currentInstance: ComponentInternalInstance | null = null
 export let currentSuspense: SuspenseBoundary | null = null
 
 export const getCurrentInstance: () => ComponentInternalInstance | null = () =>
-  currentInstance
+  currentInstance || currentRenderingInstance
 
 export const setCurrentInstance = (
   instance: ComponentInternalInstance | null

packages/runtime-core/src/components/Suspense.ts

@@ -219,7 +219,6 @@ export interface SuspenseBoundary<
     instance: ComponentInternalInstance,
     setupRenderEffect: (
       instance: ComponentInternalInstance,
-      parentComponent: ComponentInternalInstance | null,
       parentSuspense: SuspenseBoundary<HostNode, HostElement> | null,
       initialVNode: VNode<HostNode, HostElement>,
       container: HostElement,
@@ -419,7 +418,6 @@ function createSuspenseBoundary<HostNode, HostElement>(
           handleSetupResult(instance, asyncSetupResult, suspense)
           setupRenderEffect(
             instance,
-            parentComponent,
             suspense,
             vnode,
             // component may have been moved before resolve

packages/runtime-core/src/components/Transition.ts

@@ -7,22 +7,23 @@ import { cloneVNode, Comment, isSameVNodeType, VNode } from '../vnode'
 import { warn } from '../warning'
 import { isKeepAlive } from './KeepAlive'
 import { toRaw } from '@vue/reactivity'
-import { onMounted } from '../apiLifecycle'
 import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling'
 import { ShapeFlags } from '../shapeFlags'
 
-// Using camel case here makes it easier to use in render functions & JSX.
-// In templates these will be written as @before-enter="xxx"
-// The compiler has special handling to convert them into the proper cases.
 export interface TransitionProps {
   mode?: 'in-out' | 'out-in' | 'default'
   appear?: boolean
+
   // If true, indicates this is a transition that doesn't actually insert/remove
   // the element, but toggles the show / hidden status instead.
   // The transition hooks are injected, but will be skipped by the renderer.
   // Instead, a custom directive can control the transition by calling the
   // injected hooks (e.g. v-show).
   persisted?: boolean
+
+  // Hooks. Using camel casef for easier usage in render functions & JSX.
+  // In templates these will be written as @before-enter="xxx"
+  // The compiler has special handling to convert them into the proper cases.
   // enter
   onBeforeEnter?: (el: any) => void
   onEnter?: (el: any, done: () => void) => void
@@ -49,13 +50,8 @@ const TransitionImpl = {
   name: `BaseTransition`,
   setup(props: TransitionProps, { slots }: SetupContext) {
     const instance = getCurrentInstance()!
-    let isLeaving = false
-    let isMounted = false
     const pendingCallbacks: PendingCallbacks = {}
-
+    let isLeaving = false
-    onMounted(() => {
-      isMounted = true
-    })
 
     const callTransitionHook: TransitionHookCaller = (hook, args) => {
       hook &&
@@ -101,7 +97,7 @@ const TransitionImpl = {
       const transitionHooks = (child.transition = resolveTransitionHooks(
         rawProps,
         callTransitionHook,
-        isMounted,
+        instance.isMounted,
         pendingCallbacks,
         performDelayedLeave
       ))

packages/runtime-core/src/renderer.ts

@@ -885,7 +885,6 @@ export function createRenderer<
 
     setupRenderEffect(
       instance,
-      parentComponent,
       parentSuspense,
       initialVNode,
       container,
@@ -900,7 +899,6 @@ export function createRenderer<
 
   function setupRenderEffect(
     instance: ComponentInternalInstance,
-    parentComponent: ComponentInternalInstance | null,
     parentSuspense: HostSuspenseBoundary | null,
     initialVNode: HostVNode,
     container: HostElement,
@@ -908,9 +906,8 @@ export function createRenderer<
     isSVG: boolean
   ) {
     // create reactive effect for rendering
-    let mounted = false
     instance.update = effect(function componentEffect() {
-      if (!mounted) {
+      if (!instance.isMounted) {
         const subTree = (instance.subTree = renderComponentRoot(instance))
         // beforeMount hook
         if (instance.bm !== null) {
@@ -929,7 +926,7 @@ export function createRenderer<
         ) {
           queuePostRenderEffect(instance.a, parentSuspense)
         }
-        mounted = true
+        instance.isMounted = true
       } else {
         // updateComponent
         // This is triggered by mutation of component's own state (next: null)

packages/runtime-dom/src/components/CSSTransition.ts

@@ -3,10 +3,10 @@ import {
   TransitionProps,
   h,
   warn,
-  FunctionalComponent
+  FunctionalComponent,
+  getCurrentInstance
 } from '@vue/runtime-core'
 import { isObject } from '@vue/shared'
-import { currentRenderingInstance } from 'packages/runtime-core/src/componentRenderUtils'
 
 const TRANSITION = 'transition'
 const ANIMATION = 'animation'
@@ -71,7 +71,7 @@ function resolveCSSTransitionProps({
   const { appear, onBeforeEnter, onEnter, onLeave } = baseProps
 
   // is appearing
-  if (appear && !currentRenderingInstance!.subTree) {
+  if (appear && !getCurrentInstance()!.isMounted) {
     enterFromClass = appearFromClass
     enterActiveClass = appearActiveClass
     enterToClass = appearToClass