fix(Primitive): fix merge props (#1936)

kricsleo · web-flow · commit d8cb8906c35b · 2025-05-27T08:49:54.000+08:00
diff --git a/packages/core/src/Primitive/Primitive.test.ts b/packages/core/src/Primitive/Primitive.test.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import { defineComponent, h, markRaw } from 'vue'
+import { defineComponent, h, markRaw, nextTick, ref } from 'vue'
 import { Primitive } from '.'
 
 describe('test Primitive functionalities', () => {
@@ -115,6 +115,47 @@ describe('test Primitive functionalities', () => {
       )
     })
 
+    it('should merge child\'s class after update', async () => {
+      const Container = defineComponent({
+        components: { Primitive },
+        template: `
+          <Primitive as="template" class="parent-class">
+            <slot />
+          </Primitive>
+        `,
+      })
+      const TestComponent = defineComponent({
+        components: { Container },
+        setup() {
+          const isActive = ref(true)
+          const toggleActive = () => isActive.value = !isActive.value
+          return { isActive, toggleActive }
+        },
+        template: `
+          <section :data-active="isActive" @click="toggleActive">
+            <Container>
+              <div class="child-class more-child-class">
+                <slot>Slot Fallback</slot>
+              </div>
+            </Container>
+          </section>
+        `,
+      })
+
+      const wrapper = mount(TestComponent)
+      const element = wrapper.find('div')
+
+      expect(element.attributes('class')).toBe('parent-class child-class more-child-class')
+
+      await element.trigger('click')
+      await nextTick()
+      expect(element.attributes('class')).toBe('parent-class child-class more-child-class')
+
+      await element.trigger('click')
+      await nextTick()
+      expect(element.attributes('class')).toBe('parent-class child-class more-child-class')
+    })
+
     it('should render the Component that passed in as', () => {
       const Button = markRaw(defineComponent({
         setup(props, { slots }) {
diff --git a/packages/core/src/Primitive/Slot.ts b/packages/core/src/Primitive/Slot.ts
@@ -19,23 +19,14 @@ export const Slot = defineComponent({
       // Remove props ref from being inferred
       delete firstNonCommentChildren.props?.ref
 
+      // Manually merge props to ensure `firstNonCommentChildren.props`
+      // has higher priority than `attrs` and can override `attrs`.
+      // Otherwise `cloneVNode(firstNonCommentChildren, attrs)` will
+      // prioritize `attrs` and override `firstNonCommentChildren.props`.
       const mergedProps = firstNonCommentChildren.props
         ? mergeProps(attrs, firstNonCommentChildren.props)
         : attrs
-      // Remove class to prevent duplicated
-      if (attrs.class && firstNonCommentChildren.props?.class)
-        delete firstNonCommentChildren.props.class
-      const cloned = cloneVNode(firstNonCommentChildren, mergedProps)
-
-      // Explicitly override props starting with `on`.
-      // It seems cloneVNode from Vue doesn't like overriding `onXXX` props.
-      // So we have to do it manually.
-      for (const prop in mergedProps) {
-        if (prop.startsWith('on')) {
-          cloned.props ||= {}
-          cloned.props[prop] = mergedProps[prop]
-        }
-      }
+      const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps)
 
       if (childrens.length === 1)
         return cloned
diff --git a/packages/core/src/Tree/__snapshots__/Tree.test.ts.snap b/packages/core/src/Tree/__snapshots__/Tree.test.ts.snap
@@ -1,15 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`given default Tree > should render snapshot 1`] = `
-"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline: none;" class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium">
-  <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="1" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-reka-collection-item="">
+"<ul class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium" tabindex="0" data-orientation="vertical" dir="ltr" style="outline: none;" role="tree">
+  <li data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="1" role="treeitem" aria-selected="false" aria-level="1" data-indent="1">
     <!--v-if-->
     <div class="pl-2">index.vue</div>
   </li>
-  <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="2" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-reka-collection-item=""><svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <li data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="2" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1"><svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
     <div class="pl-2">lib</div>
   </li>
-  <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="3" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-reka-collection-item=""><svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <li data-reka-collection-item="" tabindex="-1" data-orientation="vertical" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="3" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1"><svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
     <div class="pl-2">routes</div>
   </li>
 </ul>"
