How does VuReact compile Vue 3's defineSlots() to React?

VuReact is a compiler toolchain that facilitates migration from Vue to React by allowing developers to use Vue 3 syntax. The article explains that VuReact compiles Vue 3's `defineSlots()` macro into React prop types rather than a runtime Hook, mapping default slots to `children` and named slots to function-style props. This transformation preserves the natural relationship between Vue slots and React composition patterns.

VuReact https://github.com/vureact-js/core is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we will look at how Vue 3's defineSlots macro is mapped into React. Before We Start To keep the examples easy to read, this article follows two simple conventions: - All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted. - The discussion assumes you are already familiar with the API shape and core behavior of Vue 3 defineSlots . Compilation Mapping Vue defineSlots - React slot prop types defineSlots is the macro used inside Vue 3 <script setup to declare component slot types. VuReact does not compile it into a runtime Hook. Instead, it maps slot declarations into the corresponding React props types, where slots become children or function-style props depending on the slot shape. - Vue js <script setup lang="ts" const slots = defineSlots<{ default? : any; footer props: { count: number } : any; } ; </script - Compiled React type ICompProps = { children?: React.ReactNode; footer?: props: { count: number } = React.ReactNode; }; As the example shows, Vue defineSlots is transformed into React prop typing rather than a runtime API. VuReact maps the default slot to children , and named slots to the corresponding function-style props, preserving the natural relationship between Vue slots and React composition patterns.