From b2841a27ae9df34a8d3da2946dc20a1991696780 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 25 Jan 2023 11:28:53 +0800
Subject: [PATCH] refactor: cssinjs

---
 .../_util/cssinjs/hooks/useGlobalCache.tsx    | 14 ++++--
 components/_util/cssinjs/hooks/useHMR.ts      | 18 +++----
 components/vc-util/Dom/dynamicCSS.ts          |  4 +-
 site/debugger/demo/demo.vue                   | 47 +------------------
 4 files changed, 19 insertions(+), 64 deletions(-)

diff --git a/components/_util/cssinjs/hooks/useGlobalCache.tsx b/components/_util/cssinjs/hooks/useGlobalCache.tsx
index 53659f50c..2532d48d2 100644
--- a/components/_util/cssinjs/hooks/useGlobalCache.tsx
+++ b/components/_util/cssinjs/hooks/useGlobalCache.tsx
@@ -15,8 +15,8 @@ export default function useClientCache<CacheType>(
   const fullPath = computed(() => [prefix, ...keyPath.value]);
   const fullPathStr = eagerComputed(() => fullPath.value.join('_'));
   const HMRUpdate = useHMR();
-  const clearCache = () => {
-    styleContext.cache.update(fullPath.value, prevCache => {
+  const clearCache = (paths: typeof fullPath.value) => {
+    styleContext.cache.update(paths, prevCache => {
       const [times = 0, cache] = prevCache || [];
       const nextCount = times - 1;
 
@@ -28,11 +28,16 @@ export default function useClientCache<CacheType>(
       return [times - 1, cache];
     });
   };
+  watch(
+    () => fullPath.value.slice(),
+    (_, oldValue) => {
+      clearCache(oldValue);
+    },
+  );
   // Create cache
   watch(
     fullPathStr,
     () => {
-      clearCache();
       styleContext.cache.update(fullPath.value, prevCache => {
         const [times = 0, cache] = prevCache || [];
 
@@ -50,9 +55,8 @@ export default function useClientCache<CacheType>(
     },
     { immediate: true },
   );
-
   onBeforeUnmount(() => {
-    clearCache();
+    clearCache(fullPath.value);
   });
   const val = computed(() => styleContext.cache.get(fullPath.value)![1]);
   return val;
diff --git a/components/_util/cssinjs/hooks/useHMR.ts b/components/_util/cssinjs/hooks/useHMR.ts
index cd18cd360..481d63038 100644
--- a/components/_util/cssinjs/hooks/useHMR.ts
+++ b/components/_util/cssinjs/hooks/useHMR.ts
@@ -15,10 +15,12 @@ export default process.env.NODE_ENV === 'production' ? useProdHMR : useDevHMR;
 // We have to hack handler to force mark as HRM
 if (
   process.env.NODE_ENV !== 'production' &&
-  typeof module !== 'undefined' &&
-  module &&
-  // @ts-ignore
-  module.hot
+  ((typeof module !== 'undefined' &&
+    module &&
+    // @ts-ignore
+    module.hot) ||
+    // @ts-ignore
+    import.meta.hot)
 ) {
   const win = window as any;
 
@@ -34,12 +36,6 @@ if (
     };
     // @ts-ignore
   } else if (import.meta.hot) {
-    // @ts-ignore
-    import.meta.hot.accept(() => {
-      viteHMR = true;
-      setTimeout(() => {
-        viteHMR = false;
-      }, 0);
-    });
+    viteHMR = true;
   }
 }
diff --git a/components/vc-util/Dom/dynamicCSS.ts b/components/vc-util/Dom/dynamicCSS.ts
index 61e73afe5..1b429c4c9 100644
--- a/components/vc-util/Dom/dynamicCSS.ts
+++ b/components/vc-util/Dom/dynamicCSS.ts
@@ -1,8 +1,8 @@
 import canUseDom from '../../_util/canUseDom';
 import contains from './contains';
 
-const APPEND_ORDER = 'data-rc-order';
-const MARK_KEY = `rc-util-key`;
+const APPEND_ORDER = 'data-vc-order';
+const MARK_KEY = `vc-util-key`;
 
 const containerCache = new Map<ContainerType, Node & ParentNode>();
 
diff --git a/site/debugger/demo/demo.vue b/site/debugger/demo/demo.vue
index fd3b703cb..58ad65ad7 100644
--- a/site/debugger/demo/demo.vue
+++ b/site/debugger/demo/demo.vue
@@ -1,48 +1,3 @@
 <template>
-  <div>
-    <a-menu
-      v-model:selected-keys="selectedKeys"
-      :open-keys="openKeys"
-      style="width: 256px"
-      mode="inline"
-    >
-      <a-sub-menu key="sub1">
-        <template #icon>
-          <MailOutlined />
-        </template>
-        <template #title>Navigation One</template>
-        <a-menu-item key="3">Option 3</a-menu-item>
-        <a-menu-item key="4">Option 4</a-menu-item>
-      </a-sub-menu>
-    </a-menu>
-    <a-button @click="open">展开</a-button>
-  </div>
+  <a-alert message="Success Text" prefix-cls="tes" type="success" />
 </template>
-<script>
-import { defineComponent, ref, watchEffect } from 'vue';
-import { MailOutlined } from '@ant-design/icons-vue';
-export default defineComponent({
-  components: {
-    MailOutlined,
-  },
-  setup() {
-    const selectedKeys = ref(['1']);
-    const openKeys = ref([]);
-    const open = () => {
-      openKeys.value.push('sub1');
-      // openKeys.value = [...openKeys.value, 'sub1'];
-    };
-    const test = ref([1]);
-    watchEffect(() => {
-      console.log(111, test.value);
-    });
-    window.openKeys = openKeys;
-    window.test = test;
-    return {
-      selectedKeys,
-      openKeys,
-      open,
-    };
-  },
-});
-</script>