Fresh project & Radix UI

Test integration of Radix UI in a fresh project 1.6.1

Examples come from https://www.radix-ui.com/primitives/docs/overview/introduction

Primitive compatibility

Use of esm v135 enhances compatibility

• Accordion
• AlertDialog
• AspectRatio
• Avatar
• Checkbox
• Collapsible
• DropdownMenu
• Form
• Menubar
• Progress
• Radiogroup
• HoverCard
• Form
• Dialog
• Label
• Popover
• Separator
• Tabs
• Toolbar
• Toggle
• Toggle Group
• Switch
• NavigationMenu
• Slider => work with v135 but selector doesn't appear
• Toast
• Context Menu

** Not working **

• Select => when clicked, open menu but page freezes
• See radix-ui/primitives#2557

ESM import

For most import, you need to add an external to esm.sh

"@radix-ui/react-form" : "https://esm.sh/@radix-ui/react-form@latest?external=react,react-dom&target=es2022",

Production

In production, you need to set up https://fresh.deno.dev/docs/concepts/ahead-of-time-builds instead an "automatic" deploy Otherwise, RadixUI components won't work.