fix: treeshaking of some components

[94726]

In the current release, Components like Menu and Popper will always be included in the final bundle.
#449 probably ran into this aswell.
By bumping Vue we can benefit from the more treeshaking-friendly changes introduced in vuejs/core#9507.

This PR also marks radix-vue as SideEffect-free

[zernonia]

Thanks for the PR @94726 ! We would need to run some check to verify the effect 😁
Is it ok if you can share some metric related to bundling size "before/after"?

[94726]

Sure thing!

TLDR

Component(s)	Radix-Vue 1.2.6	This PR
Avatar	24.1KB	2.28KB
Dialog	35.53KB	24.52KB

---

Explaination

I used preserveModules for building radix-vue, to better visualize the tree-shaking going on.
Following images are made with nuxt analyze.

app.vue (Avatar)

<script setup lang="ts">
import { AvatarImage, AvatarRoot } from 'radix-vue'
</script>

<template>
  <div class="w-full flex flex-col items-center">
    <div class="max-w-6xl w-full flex flex-col lg:grid lg:grid-cols-3 gap-4 pt-40 pb-40">
      <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
        <AvatarImage
          class="h-full w-full rounded-[inherit] object-cover"
          src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
          alt="Colm Tuite"
        />
      </AvatarRoot>
    </div>
  </div>
</template>

<style>
body {
  @apply bg-black text-white;
}
</style>

Radix-Vue 1.2.6

This PR

You can see how previously, a lot more components were included (read explaination here). Because PopperContent and MenuContentImpl have a lot of extra dependencies themselves, bundle size quickly piles up. With this change, people should be more comfortable using Radix-Vue even if it's just one component they wanna use :)

I also checked Dialog to compare to #449

app.vue (Dialog)

<script setup lang="ts">
import {
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogOverlay,
  DialogPortal,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from 'radix-vue'

import { Icon } from '@iconify/vue'
</script>

<template>
  <div class="w-full flex flex-col items-center">
    <div class="max-w-6xl w-full flex flex-col lg:grid lg:grid-cols-3 gap-4 pt-40 pb-40">
      <DialogRoot>
        <DialogTrigger
          class="text-grass11 font-semibold shadow-blackA7 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none"
        >
          Edit profile
        </DialogTrigger>
        <DialogPortal>
          <DialogOverlay class="bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0 z-30" />
          <DialogContent
            class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
          >
            <DialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
              Edit profile
            </DialogTitle>
            <DialogDescription class="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
              Make changes to your profile here. Click save when you're done.
            </DialogDescription>
            <fieldset class="mb-[15px] flex items-center gap-5">
              <label class="text-grass11 w-[90px] text-right text-[15px]" for="name"> Name </label>
              <input
                id="name"
                class="text-grass11 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
                defaultValue="Pedro Duarte"
              >
            </fieldset>
            <fieldset class="mb-[15px] flex items-center gap-5">
              <label class="text-grass11 w-[90px] text-right text-[15px]" for="username"> Username </label>
              <input
                id="username"
                class="text-grass11 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
                defaultValue="@peduarte"
              >
            </fieldset>
            <div class="mt-[25px] flex justify-end">
              <DialogClose as-child>
                <button
                  class="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
                >
                  Save changes
                </button>
              </DialogClose>
            </div>
            <DialogClose
              class="text-grass11 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
              aria-label="Close"
            >
              <Icon icon="lucide:x" />
            </DialogClose>
          </DialogContent>
        </DialogPortal>
      </DialogRoot>
    </div>
  </div>
</template>

<style>
body {
  @apply bg-black text-white;
}
</style>

Radix-Vue 1.2.6

This PR

[zernonia]

that is amazing @94726 !!! Thanks for the initiative on investigating the issue, and made aware of tree-shakable component in vue core!!!