refactor: create useRender helper instead of expose() (#13214)

vuetifyjs · Mar 6, 2021 · e7bf13a · e7bf13a
1 parent 178948d
commit e7bf13a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 22 deletions.
diff --git a/packages/vuetify/src/components/VImg/VImg.tsx b/packages/vuetify/src/components/VImg/VImg.tsx
@@ -4,11 +4,9 @@ import './VImg.sass'
 import {
   computed,
   defineComponent,
-  getCurrentInstance,
   h,
   nextTick,
   onBeforeMount,
-  reactive,
   ref,
   vShow,
   watch,
@@ -25,6 +23,7 @@ import type { ObserveDirectiveBinding } from '@/directives/intersect'
 
 // Utils
 import makeProps from '@/util/makeProps'
+import { useRender } from '@/util/useRender'
 import { useDirective } from '@/util/useDirective'
 import { maybeTransition } from '@/util'
 
@@ -83,16 +82,6 @@ export default defineComponent({
     const naturalWidth = ref<number>()
     const naturalHeight = ref<number>()
 
-    // TODO: use expose() https://github.com/vuejs/vue-test-utils-next/issues/435
-    const vm = getCurrentInstance() as any
-    vm.setupState = reactive({
-      currentSrc,
-      image,
-      state,
-      naturalWidth,
-      naturalHeight,
-    })
-
     const normalisedSrc = computed<srcObject>(() => {
       return props.src && typeof props.src === 'object'
         ? {
@@ -242,7 +231,7 @@ export default defineComponent({
       return maybeTransition(props, { appear: true }, error)
     })
 
-    return () => withDirectives(
+    useRender(() => withDirectives(
       <VResponsive
         class="v-img"
         aspectRatio={ aspectRatio.value }
@@ -260,6 +249,14 @@ export default defineComponent({
         },
         modifiers: { once: true },
       })]
-    )
+    ))
+
+    return {
+      currentSrc,
+      image,
+      state,
+      naturalWidth,
+      naturalHeight,
+    }
   },
 })
diff --git a/packages/vuetify/src/components/VLayout/VLayout.tsx b/packages/vuetify/src/components/VLayout/VLayout.tsx
@@ -3,6 +3,7 @@ import './VLayout.sass'
 
 // Utilities
 import { defineComponent } from 'vue'
+import { useRender } from '@/util/useRender'
 import makeProps from '@/util/makeProps'
 
 // Composables
@@ -13,21 +14,21 @@ export default defineComponent({
 
   props: makeProps(makeLayoutProps()),
 
-  setup (props, { slots, expose }) {
+  setup (props, { slots }) {
     const { layoutClasses, getLayoutItem, items } = createLayout(props)
 
-    expose({
-      getLayoutItem,
-      items,
-    })
-
-    return () => (
+    useRender(() => (
       <div
         class={layoutClasses.value}
         style={{
           height: props.fullHeight ? '100vh' : undefined,
         }}
       >{ slots.default?.() }</div>
-    )
+    ))
+
+    return {
+      getLayoutItem,
+      items,
+    }
   },
 })
diff --git a/packages/vuetify/src/util/useRender.ts b/packages/vuetify/src/util/useRender.ts
@@ -0,0 +1,7 @@
+import { getCurrentInstance } from 'vue'
+import type { VNode } from 'vue'
+
+export function useRender (render: () => VNode): void {
+  const vm = getCurrentInstance() as any
+  vm.render = render
+}