wip: work with v-show appear

Author: edison1105

packages-private/vapor-e2e-test/__tests__/transition.spec.ts

@@ -1061,23 +1061,103 @@ describe('vapor transition', () => {
       E2E_TIMEOUT,
     )
 
-    test.todo(
+    test(
       'transition on appear with v-show',
       async () => {
         const btnSelector = '.show-appear > button'
         const containerSelector = '.show-appear > div'
         const childSelector = `${containerSelector} > div`
+
+        let calls = await page().evaluate(() => {
+          return (window as any).getCalls('showAppear')
+        })
+        expect(calls).toStrictEqual(['beforeEnter', 'onEnter'])
+
+        // appear
+        expect(await classList(childSelector)).contains('test-appear-active')
+
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          '<div class="test">content</div>',
+        )
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('showAppear')
+        })
+        expect(calls).toStrictEqual(['beforeEnter', 'onEnter', 'afterEnter'])
+
+        // leave
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-leave-from', 'test-leave-active'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-leave-active',
+          'test-leave-to',
+        ])
+        await transitionFinish()
+        expect(await isVisible(childSelector)).toBe(false)
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          '<div class="test" style="">content</div>',
+        )
       },
       E2E_TIMEOUT,
     )
 
-    test.todo(
+    test(
       'transition events should not call onEnter with v-show false',
-      async () => {},
+      async () => {
+        const btnSelector = '.show-appear-not-enter > button'
+        const containerSelector = '.show-appear-not-enter > div'
+        const childSelector = `${containerSelector} > div`
+
+        expect(await isVisible(childSelector)).toBe(false)
+        let calls = await page().evaluate(() => {
+          return (window as any).getCalls('notEnter')
+        })
+        expect(calls).toStrictEqual([])
+
+        // enter
+        expect(
+          (await transitionStart(btnSelector, childSelector)).classNames,
+        ).toStrictEqual(['test', 'test-enter-from', 'test-enter-active'])
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('notEnter')
+        })
+        expect(calls).toStrictEqual(['beforeEnter', 'onEnter'])
+        await nextFrame()
+        expect(await classList(childSelector)).toStrictEqual([
+          'test',
+          'test-enter-active',
+          'test-enter-to',
+        ])
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('notEnter')
+        })
+        expect(calls).not.contain('afterEnter')
+        await transitionFinish()
+        expect(await html(containerSelector)).toBe(
+          '<div class="test" style="">content</div>',
+        )
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls('notEnter')
+        })
+        expect(calls).toStrictEqual(['beforeEnter', 'onEnter', 'afterEnter'])
+      },
       E2E_TIMEOUT,
     )
-
-    test.todo('transition on appear with v-show', async () => {}, E2E_TIMEOUT)
   })
 
   describe('explicit durations', () => {

packages-private/vapor-e2e-test/transition/App.vue

@@ -27,6 +27,7 @@ let calls = {
   show: [],
   showLeaveCancel: [],
   showAppear: [],
+  notEnter: [],
 }
 window.getCalls = key => calls[key]
 window.resetCalls = key => (calls[key] = [])
@@ -398,6 +399,20 @@ function changeViewInOut() {
       </div>
       <button @click="toggle = !toggle">button</button>
     </div>
+    <div class="show-appear-not-enter">
+      <div>
+        <transition
+          name="test"
+          appear
+          @beforeEnter="() => calls.notEnter.push('beforeEnter')"
+          @enter="() => calls.notEnter.push('onEnter')"
+          @afterEnter="() => calls.notEnter.push('afterEnter')"
+        >
+          <div v-show="!toggle" class="test">content</div>
+        </transition>
+      </div>
+      <button @click="toggle = !toggle">button</button>
+    </div>
     <!-- work with vshow end -->
 
     <!-- explicit durations -->

packages/compiler-vapor/__tests__/transforms/TransformTransition.spec.ts

@@ -28,6 +28,13 @@ const compileWithElementTransform = makeCompile({
 
 describe('compiler: transition', () => {
   test('basic', () => {
+    const { code } = compileWithElementTransform(
+      `<Transition><h1 v-show="show">foo</h1></Transition>`,
+    )
+    expect(code).toMatchSnapshot()
+  })
+
+  test('v-show + appear', () => {
     const { code } = compileWithElementTransform(
       `<Transition appear><h1 v-show="show">foo</h1></Transition>`,
     )

packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap

@@ -5,10 +5,7 @@ exports[`compiler: transition > basic 1`] = `
 const t0 = _template("<h1>foo</h1>")
 
 export function render(_ctx) {
-  const n1 = _createComponent(_VaporTransition, {
-    appear: () => (""), 
-    persisted: () => ("")
-  }, {
+  const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
     "default": () => {
       const n0 = t0()
       _applyVShow(n0, () => (_ctx.show))
@@ -72,6 +69,27 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: transition > v-show + appear 1`] = `
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
+const t0 = _template("<h1>foo</h1>")
+
+export function render(_ctx) {
+  const lazyApplyVShowFn = []
+  const n1 = _createComponent(_VaporTransition, {
+    appear: () => (""), 
+    persisted: () => ("")
+  }, {
+    "default": () => {
+      const n0 = t0()
+      lazyApplyVShowFn.push(() => _applyVShow(n0, () => (_ctx.show)))
+      return n0
+    }
+  }, true)
+  lazyApplyVShowFn.forEach(fn => fn())
+  return n1
+}"
+`;
+
 exports[`compiler: transition > work with dynamic keyed children 1`] = `
 "import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, createComponent as _createComponent, template as _template } from 'vue';
 const t0 = _template("<h1>foo</h1>")

packages/compiler-vapor/src/generators/block.ts

@@ -44,6 +44,10 @@ export function genBlockContent(
   const { dynamic, effect, operation, returns, key } = block
   const resetBlock = context.enterBlock(block)
 
+  if (block.hasLazyApplyVShow) {
+    push(NEWLINE, `const lazyApplyVShowFn = []`)
+  }
+
   if (root) {
     genResolveAssets('component', 'resolveComponent')
     genResolveAssets('directive', 'resolveDirective')
@@ -56,6 +60,10 @@ export function genBlockContent(
   push(...genOperations(operation, context))
   push(...genEffects(effect, context))
 
+  if (block.hasLazyApplyVShow) {
+    push(NEWLINE, `lazyApplyVShowFn.forEach(fn => fn())`)
+  }
+
   if (dynamic.needsKey) {
     for (const child of dynamic.children) {
       const keyValue = key

packages/compiler-vapor/src/generators/vShow.ts

@@ -7,12 +7,15 @@ export function genVShow(
   oper: DirectiveIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
+  const { lazy, element } = oper
   return [
     NEWLINE,
-    ...genCall(context.helper('applyVShow'), `n${oper.element}`, [
+    lazy ? `lazyApplyVShowFn.push(() => ` : undefined,
+    ...genCall(context.helper('applyVShow'), `n${element}`, [
       `() => (`,
       ...genExpression(oper.dir.exp!, context),
       `)`,
     ]),
+    lazy ? `)` : undefined,
   ]
 }

packages/compiler-vapor/src/ir/index.ts

@@ -56,6 +56,7 @@ export interface BlockIRNode extends BaseIRNode {
   operation: OperationNode[]
   expressions: SimpleExpressionNode[]
   returns: number[]
+  hasLazyApplyVShow: boolean
 }
 
 export interface RootIRNode {
@@ -187,6 +188,7 @@ export interface DirectiveIRNode extends BaseIRNode {
   builtin?: boolean
   asset?: boolean
   modelType?: 'text' | 'dynamic' | 'radio' | 'checkbox' | 'select'
+  lazy?: boolean
 }
 
 export interface CreateComponentIRNode extends BaseIRNode {

packages/compiler-vapor/src/transforms/utils.ts

@@ -31,6 +31,7 @@ export const newBlock = (node: BlockIRNode['node']): BlockIRNode => ({
   returns: [],
   expressions: [],
   tempId: 0,
+  hasLazyApplyVShow: false,
 })
 
 export function wrapTemplate(node: ElementNode, dirs: string[]): TemplateNode {

packages/compiler-vapor/src/transforms/vShow.ts

@@ -2,11 +2,13 @@ import {
   DOMErrorCodes,
   ElementTypes,
   ErrorCodes,
+  NodeTypes,
   createCompilerError,
   createDOMCompilerError,
 } from '@vue/compiler-dom'
 import type { DirectiveTransform } from '../transform'
 import { IRNodeTypes } from '../ir'
+import { findProp, isTransitionTag } from '../utils'
 
 export const transformVShow: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
@@ -27,11 +29,26 @@ export const transformVShow: DirectiveTransform = (dir, node, context) => {
     return
   }
 
+  // lazy apply vshow if the node is inside a transition with appear
+  let lazyApplyVShow = false
+  const parentNode = context.parent && context.parent.node
+  if (parentNode && parentNode.type === NodeTypes.ELEMENT) {
+    lazyApplyVShow = !!(
+      isTransitionTag(parentNode.tag) &&
+      findProp(parentNode, 'appear', false, true)
+    )
+
+    if (lazyApplyVShow) {
+      context.parent!.parent!.block.hasLazyApplyVShow = true
+    }
+  }
+
   context.registerOperation({
     type: IRNodeTypes.DIRECTIVE,
     element: context.reference(),
     dir,
     name: 'show',
     builtin: true,
+    lazy: lazyApplyVShow,
   })
 }

packages/runtime-vapor/src/directives/vShow.ts

@@ -52,9 +52,15 @@ function setDisplay(target: Block, value: unknown): void {
         el.style.display = el[vShowOriginalDisplay]!
         $transition.enter(target)
       } else {
-        $transition.leave(target, () => {
+        // during initial render, the element is not yet inserted into the
+        // DOM, and it is hidden, no need to trigger transition
+        if (target.isConnected) {
+          $transition.leave(target, () => {
+            el.style.display = 'none'
+          })
+        } else {
           el.style.display = 'none'
-        })
+        }
       }
     } else {
       el.style.display = value ? el[vShowOriginalDisplay]! : 'none'