wip: add TransformTransition

packages/compiler-dom/src/index.ts

@@ -76,4 +76,5 @@ export {
 } from './errors'
 export { resolveModifiers } from './transforms/vOn'
 export { isValidHTMLNesting } from './htmlNesting'
+export { postTransformTransition } from './transforms/Transition'
 export * from '@vue/compiler-core'

packages/compiler-dom/src/transforms/Transition.ts

@@ -1,4 +1,5 @@
 import {
+  type CompilerError,
   type ComponentNode,
   ElementTypes,
   type IfBranchNode,
@@ -15,22 +16,27 @@ export const transformTransition: NodeTransform = (node, context) => {
   ) {
     const component = context.isBuiltInComponent(node.tag)
     if (component === TRANSITION) {
+      return postTransformTransition(node, context.onError)
+    }
+  }
+}
+
+export function postTransformTransition(
+  node: ComponentNode,
+  onError: (error: CompilerError) => void,
+): () => void {
   return () => {
     if (!node.children.length) {
       return
     }
 
-        // warn multiple transition children
     if (hasMultipleChildren(node)) {
-          context.onError(
+      onError(
-            createDOMCompilerError(
+        createDOMCompilerError(DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN, {
-              DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN,
-              {
           start: node.children[0].loc.start,
           end: node.children[node.children.length - 1].loc.end,
           source: '',
-              },
+        }),
-            ),
       )
     }
 
@@ -51,8 +57,6 @@ export const transformTransition: NodeTransform = (node, context) => {
       }
     }
   }
-    }
-  }
 }
 
 function hasMultipleChildren(node: ComponentNode | IfBranchNode): boolean {

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

@@ -5,9 +5,11 @@ import {
   transformText,
   transformVBind,
   transformVIf,
+  transformVShow,
   transformVSlot,
 } from '@vue/compiler-vapor'
-import { expect } from 'vitest'
+import { transformTransition } from '../../src/transforms/transformTransition'
+import { DOMErrorCodes } from '@vue/compiler-dom'
 
 const compileWithElementTransform = makeCompile({
   nodeTransforms: [
@@ -16,9 +18,11 @@ const compileWithElementTransform = makeCompile({
     transformElement,
     transformVSlot,
     transformChildren,
+    transformTransition,
   ],
   directiveTransforms: {
     bind: transformVBind,
+    show: transformVShow,
   },
 })
 
@@ -52,4 +56,33 @@ describe('compiler: transition', () => {
     // should preserve key
     expect(code).contains('n0.$key = _ctx.key')
   })
+
+  test('warns if multiple children', () => {
+    const onError = vi.fn()
+    compileWithElementTransform(
+      `<Transition>
+        <h1>foo</h1>
+        <h2>bar</h2>
+      </Transition>`,
+      {
+        onError,
+      },
+    )
+    expect(onError).toHaveBeenCalled()
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN }],
+    ])
+  })
+
+  test('inject persisted when child has v-show', () => {
+    expect(
+      compileWithElementTransform(`
+        <Transition>
+          <div v-show="ok" />
+        </Transition>
+    `).code,
+    ).toMatchSnapshot()
+  })
+
+  // TODO more tests
 })

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

@@ -1,13 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: transition > basic 1`] = `
-"import { VaporTransition as _VaporTransition, createComponent as _createComponent, template as _template } from 'vue';
+"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 n1 = _createComponent(_VaporTransition, { appear: () => ("") }, {
+  const n1 = _createComponent(_VaporTransition, {
+    appear: () => (""), 
+    persisted: () => ("")
+  }, {
     "default": () => {
       const n0 = t0()
+      _applyVShow(n0, () => (_ctx.show))
+      return n0
+    }
+  }, true)
+  return n1
+}"
+`;
+
+exports[`compiler: transition > inject persisted when child has v-show 1`] = `
+"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
+    "default": () => {
+      const n0 = t0()
+      _applyVShow(n0, () => (_ctx.ok))
       return n0
     }
   }, true)

packages/compiler-vapor/src/compile.ts

@@ -26,6 +26,7 @@ import { transformVFor } from './transforms/vFor'
 import { transformComment } from './transforms/transformComment'
 import { transformSlotOutlet } from './transforms/transformSlotOutlet'
 import { transformVSlot } from './transforms/vSlot'
+import { transformTransition } from './transforms/transformTransition'
 import type { HackOptions } from './ir'
 
 export { wrapTemplate } from './transforms/utils'
@@ -54,6 +55,7 @@ export function compile(
     extend({}, resolvedOptions, {
       nodeTransforms: [
         ...nodeTransforms,
+        ...(__DEV__ ? [transformTransition] : []),
         ...(options.nodeTransforms || []), // user transforms
       ],
       directiveTransforms: extend(

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

@@ -0,0 +1,15 @@
+import type { NodeTransform } from '@vue/compiler-vapor'
+import { ElementTypes, NodeTypes } from '@vue/compiler-core'
+import { isTransitionTag } from '../utils'
+import { postTransformTransition } from '@vue/compiler-dom'
+
+export const transformTransition: NodeTransform = (node, context) => {
+  if (
+    node.type === NodeTypes.ELEMENT &&
+    node.tagType === ElementTypes.COMPONENT
+  ) {
+    if (isTransitionTag(node.tag)) {
+      return postTransformTransition(node, context.options.onError)
+    }
+  }
+}