refactor(animation-factory): fix Vue3 breaking changes

empathyco · Jul 30, 2024 · be40f3b · be40f3b
1 parent 71c08db
commit be40f3b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 53 deletions.
diff --git a/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue b/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
@@ -1,35 +1,5 @@
 <template>
   <div class="animate-modal">
-    <p>
-      BREAKING Vue3: `h()` hyperscript doesn't support rendering `'transition'` using strings.
-      Instead, replace it by `Transition` component of Vue 3 itself `import { Transition } from
-      'vue'`.
-      <br />
-      <a href="https://github.com/vuejs/core/issues/826#issuecomment-598207464">
-        https://github.com/vuejs/core/issues/826#issuecomment-598207464
-      </a>
-      <br />
-      <a href="https://github.com/vuejs/test-utils/issues/471#issuecomment-804477181">
-        https://github.com/vuejs/test-utils/issues/471#issuecomment-804477181
-      </a>
-    </p>
-    <p>
-      BREAKING Vue3: Review Transition Class Change. Replace instances of `.v-enter` to
-      `.v-enter-from` Replace instances of `.v-leave` to `.v-leave-from`.
-      <br />
-      <a href="https://v3-migration.vuejs.org/breaking-changes/transition.html">
-        https://v3-migration.vuejs.org/breaking-changes/transition.html
-      </a>
-    </p>
-    <p>
-      BREAKING Vue3: VNodes now have a flat props structure.
-      <br />
-      <a
-        href="https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format"
-      >
-        https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format
-      </a>
-    </p>
     <button @click="openWithClipPath">Open modal with CLIP PATH animation</button>
     <button @click="openWithScale">Open modal with SCALE animation</button>
     <button @click="openWithTranslate">Open modal with TRANSLATE animation</button>
@@ -55,9 +25,9 @@
   import { animateScale } from '../../../../x-components/src/components/animations/animate-scale/animate-scale.factory';
   import { animateTranslate } from '../../../../x-components/src/components/animations/animate-translate/animate-translate.factory';
 
-  const clipPathAnimation = animateClipPath('bottom');
+  const clipPathAnimation = animateClipPath('left');
   const scaleAnimation = animateScale('bottom');
-  const translateAnimation = animateTranslate('bottom');
+  const translateAnimation = animateTranslate('right');
 
   const currentAnimation = shallowRef(clipPathAnimation);
   const open = ref(false);

diff --git a/...ges/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss b/...ges/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss
@@ -8,21 +8,21 @@
   }
 
   &--top {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--bottom {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--top-to-bottom {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -31,7 +31,7 @@
   }
 
   &--bottom-to-top {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -40,21 +40,21 @@
   }
 
   &--left {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--right {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--left-to-right {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -63,7 +63,7 @@
   }
 
   &--right-to-left {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {

diff --git a/packages/x-components/src/components/animations/create-directional-animation-factory.ts b/packages/x-components/src/components/animations/create-directional-animation-factory.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, Transition } from 'vue';
 
 export type AnimationOrigin =
   | 'top'
@@ -19,23 +19,23 @@ export type AnimationOrigin =
  *
  * @internal
  */
-export function createDirectionalAnimationFactory(animationName: string) {
+export function createDirectionalAnimationFactory(
+  animationName: string
+): ReturnType<typeof defineComponent> {
   return (animationOrigin: AnimationOrigin = 'top') =>
     defineComponent({
       name: `transition-${animationName}-${animationOrigin}`,
       inheritAttrs: false,
-      setup(_, { attrs, listeners, slots }) {
+      setup(_, { attrs, slots }) {
         return () =>
           h(
-            'transition',
+            Transition,
             {
-              props: {
-                name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
-                ...attrs
-              },
-              on: listeners
+              name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
+              ...attrs
             },
-            slots.default?.() ?? []
+            // Vue recommends using function for better performance.
+            () => slots.default?.() ?? ''
           );
       }
     });

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
@@ -458,7 +458,7 @@
 <script lang="ts">
   /* eslint-disable max-len */
   import { computed, ComputedRef, defineComponent, provide } from 'vue';
-  // import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
+  import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
   // import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
   import AutoProgressBar from '../../components/auto-progress-bar.vue';
   import BaseDropdown from '../../components/base-dropdown.vue';
@@ -601,7 +601,7 @@
       ];
       const columnPickerValues = [0, 2, 4];
       // const resultsAnimation = StaggeredFadeAndSlide;
-      // const modalAnimation = animateClipPath();
+      const modalAnimation = animateClipPath();
       const selectedColumns = 4;
       const sortValues = ['', 'price asc', 'price desc'];
       const isAnyQueryLoadedInPreview = useQueriesPreview().isAnyQueryLoadedInPreview;
@@ -663,7 +663,7 @@
       };
       return {
         resultsAnimation: undefined,
-        modalAnimation: undefined,
+        modalAnimation,
         queriesPreviewInfo,
         stores,
         initialExtraParams,