From cbc1a57ebfdde4e67d16c567e10bdf3230881c9b Mon Sep 17 00:00:00 2001
From: betavs <betavs@qq.com>
Date: Fri, 17 May 2024 10:10:28 +0800
Subject: [PATCH 1/4] refactor(popup): sfc to tsx

---
 src/popup/__test__/index.test.jsx  |  2 +-
 src/popup/index.ts                 |  2 +-
 src/popup/{popup.vue => popup.tsx} | 77 +++++++++++++++++-------------
 3 files changed, 47 insertions(+), 34 deletions(-)
 rename src/popup/{popup.vue => popup.tsx} (71%)

diff --git a/src/popup/__test__/index.test.jsx b/src/popup/__test__/index.test.jsx
index d3ebe1962..e2f6c6699 100644
--- a/src/popup/__test__/index.test.jsx
+++ b/src/popup/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { config, mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import Popup from '../popup.vue';
+import Popup from '../popup';
 import { ref } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 
diff --git a/src/popup/index.ts b/src/popup/index.ts
index 586170010..bfd654de2 100644
--- a/src/popup/index.ts
+++ b/src/popup/index.ts
@@ -1,4 +1,4 @@
-import Popup from './popup.vue';
+import Popup from './popup';
 import { withInstall, WithInstallType } from '../shared';
 import { TdPopupProps } from './type';
 
diff --git a/src/popup/popup.vue b/src/popup/popup.tsx
similarity index 71%
rename from src/popup/popup.vue
rename to src/popup/popup.tsx
index 8433a3bcb..f5ce31470 100644
--- a/src/popup/popup.vue
+++ b/src/popup/popup.tsx
@@ -1,19 +1,4 @@
-<template>
-  <teleport v-if="!destroyOnClose || wrapperVisible" :to="to" :disabled="!to">
-    <t-overlay v-bind="overlayProps" :visible="innerVisible && showOverlay" @click="handleOverlayClick" />
-    <transition :name="contentTransitionName" @after-enter="afterEnter" @after-leave="afterLeave">
-      <div v-show="innerVisible" :class="[name, $attrs.class, contentClasses]" :style="rootStyles" v-bind="$attrs">
-        <div v-if="closeBtnNode" :class="`${name}__close`" @click="handleCloseClick">
-          <t-node :content="closeBtnNode" />
-        </div>
-        <slot />
-      </div>
-    </transition>
-  </teleport>
-</template>
-
-<script lang="ts">
-import { computed, watch, defineComponent, h, getCurrentInstance, ref, nextTick } from 'vue';
+import { computed, watch, defineComponent, h, getCurrentInstance, ref, nextTick, Teleport, Transition } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 
 import popupProps from './props';
@@ -22,6 +7,7 @@ import config from '../config';
 import { TdPopupProps } from './type';
 import { useDefault, TNode, renderTNode, isBrowser } from '../shared';
 import { getAttach } from '../shared/dom';
+import { useContent } from '@/hooks/tnode';
 
 const { prefix } = config;
 
@@ -37,15 +23,20 @@ export default defineComponent({
   emits: ['open', 'close', 'opened', 'closed', 'visible-change', 'update:visible', 'update:modelValue'],
   setup(props, context) {
     const currentInstance = getCurrentInstance();
+
     const [currentVisible, setVisible] = useDefault<TdPopupProps['visible'], TdPopupProps>(
       props,
       context.emit,
       'visible',
       'visible-change',
     );
+
     const wrapperVisible = ref(currentVisible.value);
+
     const innerVisible = ref(currentVisible.value);
 
+    const renderTNodeContent = useContent();
+
     // 因为开启 destroyOnClose，会影响 transition 的动画，因此需要前后设置 visible
     watch(currentVisible, (v) => {
       wrapperVisible.value = v;
@@ -69,7 +60,7 @@ export default defineComponent({
       if (props.zIndex) {
         styles.zIndex = `${props.zIndex}`;
       }
-      return { ...(context.attrs.style as Object), ...styles };
+      return { ...(context.attrs.style as Object), ...styles, display: innerVisible.value ? 'block' : 'none' };
     });
 
     const contentClasses = computed(() => ({
@@ -151,21 +142,43 @@ export default defineComponent({
       },
     );
 
-    return {
-      name,
-      to,
-      wrapperVisible,
-      innerVisible,
-      currentVisible,
-      rootStyles,
-      contentClasses,
-      contentTransitionName,
-      closeBtnNode,
-      afterEnter,
-      afterLeave,
-      handleOverlayClick,
-      handleCloseClick,
+    return () => {
+      const renderOverlayContent = computed(() => (
+        <TOverlay
+          {...props.overlayProps}
+          visible={innerVisible.value && props.showOverlay}
+          onClick={handleOverlayClick}
+        />
+      ));
+
+      const renderCloseBtn = computed(() =>
+        closeBtnNode.value ? (
+          <div class={`${name}__close`} onClick={handleCloseClick}>
+            {closeBtnNode.value}
+          </div>
+        ) : null,
+      );
+
+      const renderContent = computed(() => (
+        <Transition name={contentTransitionName.value} onAfterEnter={afterEnter} onAfterLeave={afterLeave}>
+          <div {...context.attrs} class={[name, context.attrs.class, contentClasses.value]} style={rootStyles.value}>
+            {renderCloseBtn.value}
+
+            {renderTNodeContent('default', 'content')}
+          </div>
+        </Transition>
+      ));
+
+      const renderPopupContent = computed(() =>
+        !props.destroyOnClose || wrapperVisible.value ? (
+          <Teleport to={to.value} disabled={!to.value}>
+            {renderOverlayContent.value}
+            {renderContent.value}
+          </Teleport>
+        ) : null,
+      );
+
+      return <>{renderPopupContent.value}</>;
     };
   },
 });
-</script>

From 11980ed431148bfa319170fde74f0f4ea84ae2d4 Mon Sep 17 00:00:00 2001
From: betavs <betavs@qq.com>
Date: Sat, 18 May 2024 15:12:00 +0800
Subject: [PATCH 2/4] perf(popup): sfc to tsx

---
 src/popup/popup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index f5ce31470..e93d2d194 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -161,7 +161,7 @@ export default defineComponent({
 
       const renderContent = computed(() => (
         <Transition name={contentTransitionName.value} onAfterEnter={afterEnter} onAfterLeave={afterLeave}>
-          <div {...context.attrs} class={[name, context.attrs.class, contentClasses.value]} style={rootStyles.value}>
+          <div {...context.attrs} class={[name, contentClasses.value]} style={rootStyles.value}>
             {renderCloseBtn.value}
 
             {renderTNodeContent('default', 'content')}

From 3af43c5a056af7723740a4d34b2da1e3d7dc15b0 Mon Sep 17 00:00:00 2001
From: betavs <betavs@qq.com>
Date: Mon, 20 May 2024 17:00:00 +0800
Subject: [PATCH 3/4] perf(popup): sfc to tsx

---
 src/popup/popup.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index e93d2d194..a8a5c12e3 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -1,13 +1,13 @@
-import { computed, watch, defineComponent, h, getCurrentInstance, ref, nextTick, Teleport, Transition } from 'vue';
+import { computed, watch, defineComponent, h, ref, nextTick, Teleport, Transition } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 
 import popupProps from './props';
 import TOverlay from '../overlay';
 import config from '../config';
 import { TdPopupProps } from './type';
-import { useDefault, TNode, renderTNode, isBrowser } from '../shared';
+import { useContent, useTNodeJSX } from '@/hooks/tnode';
+import { useDefault, isBrowser } from '../shared';
 import { getAttach } from '../shared/dom';
-import { useContent } from '@/hooks/tnode';
 
 const { prefix } = config;
 
@@ -17,13 +17,10 @@ let lockTimes = 0;
 
 export default defineComponent({
   name,
-  components: { TNode, TOverlay },
   inheritAttrs: false,
   props: popupProps,
   emits: ['open', 'close', 'opened', 'closed', 'visible-change', 'update:visible', 'update:modelValue'],
   setup(props, context) {
-    const currentInstance = getCurrentInstance();
-
     const [currentVisible, setVisible] = useDefault<TdPopupProps['visible'], TdPopupProps>(
       props,
       context.emit,
@@ -37,6 +34,8 @@ export default defineComponent({
 
     const renderTNodeContent = useContent();
 
+    const renderTNodeJSX = useTNodeJSX();
+
     // 因为开启 destroyOnClose，会影响 transition 的动画，因此需要前后设置 visible
     watch(currentVisible, (v) => {
       wrapperVisible.value = v;
@@ -75,11 +74,7 @@ export default defineComponent({
       return `slide-${placement}`;
     });
 
-    const closeBtnNode = computed(() =>
-      renderTNode(currentInstance, 'closeBtn', {
-        defaultNode: h(CloseIcon, { size: '24px' }),
-      }),
-    );
+    const closeBtnNode = computed(() => renderTNodeJSX('closeBtn', h(CloseIcon, { size: '24px' })));
 
     const handleCloseClick = (e: MouseEvent) => {
       props.onClose?.({ e });

From 2b0a7771dabb399aeb3f1359d7658a0cbfec3e50 Mon Sep 17 00:00:00 2001
From: betavs <betavs@qq.com>
Date: Fri, 24 May 2024 18:12:28 +0800
Subject: [PATCH 4/4] perf(popup): sfc to tsx

---
 src/popup/popup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index a8a5c12e3..6867ce4fc 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -5,7 +5,7 @@ import popupProps from './props';
 import TOverlay from '../overlay';
 import config from '../config';
 import { TdPopupProps } from './type';
-import { useContent, useTNodeJSX } from '@/hooks/tnode';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
 import { useDefault, isBrowser } from '../shared';
 import { getAttach } from '../shared/dom';