feat(hmr): deduplicate paths and join them with commas (#10891)

Author: ArnaudBarre

packages/vite/src/node/server/hmr.ts

@@ -181,9 +181,8 @@ export function updateModules(
   }
 
   config.logger.info(
-    updates
-      .map(({ path }) => colors.green(`hmr update `) + colors.dim(path))
-      .join('\n'),
+    colors.green(`hmr update `) +
+      colors.dim([...new Set(updates.map((u) => u.path))].join(', ')),
     { clear: true, timestamp: true }
   )
   ws.send({

playground/tailwind/src/components/HelloWorld.vue

@@ -5,5 +5,6 @@
 </template>
 
 <script setup lang="ts">
-const count = 1
+import { INITIAL_COUNT } from '../utils.ts'
+const count = INITIAL_COUNT
 </script>

playground/tailwind/src/utils.ts

@@ -0,0 +1,2 @@
+export const NAME = 'Tailwind'
+export const INITIAL_COUNT = 1

playground/tailwind/src/views/Page.vue

@@ -5,7 +5,7 @@
     <div
       class="tailwind-style bg-red-100 inline-block h-24 px-8 mb-8 text-[#888888]"
     >
-      Tailwind style
+      {{ name }} style
     </div>
     <HelloWorld />
     <PugTemplate />
@@ -16,13 +16,16 @@
 import { defineComponent, ref } from 'vue'
 import HelloWorld from '../components/HelloWorld.vue'
 import PugTemplate from '../components/PugTemplate.vue'
+import { NAME } from '../utils.ts'
 
 export default defineComponent({
   components: { HelloWorld, PugTemplate },
   setup() {
+    const name = NAME
     const val = ref(0)
 
     return {
+      name,
       val
     }
   }