Mapping Vue 3's defineEmits() to React with VuReact

VuReact is a powerful tool designed to convert Vue 3 code into standard React code, ensuring maintainability and consistency with React conventions. This article delves into how VuReact handles the transformation of Vue 3's defineEmits() macro into React's callback props.

Understanding defineEmits() in Vue 3

In Vue 3, defineEmits() is a macro used within the <script setup> block to declare custom component events. This feature allows developers to define specific events that a component can emit, enabling parent-child communication.

Vue Example

<script setup lang="ts">
defineProps<{ name?: string }>();

const emit = defineEmits<{
  (e: 'save-item', payload: { id: string }): void;
  (e: 'update:name', value: string): void;
}>();

const submit = () => {
  emit('save-item', { id: '1' });
  emit('update:name', 'next');
};
</script>

Compiling to React with VuReact

VuReact translates defineEmits() into React-style callback props, adapting the event names to fit React's naming conventions.

React Compilation

type ICompProps = {
  name?: string;
  onSaveItem?: (payload: { id: string }) => void;
  onUpdateName?: (value: string) => void;
};

const submit = useCallback(() => {
  props.onSaveItem?.({ id: '1' });
  props.onUpdateName?.('next');
}, [props.onSaveItem, props.onUpdateName]);

As shown, Vue's event declarations are compiled into callback props. Event names like save-item and update:name are transformed into onSaveItem and onUpdateName, respectively, while preserving the parameter types.

Mapping Vue's v-model to React Controlled Props

In Vue, events such as update:xxx facilitate two-way binding via v-model:xxx. VuReact maps this pattern into React's controlled props.

Vue Parent Usage

<template>
  <Child v-model:name="current" />
</template>

<script setup>
const current = ref('');
</script>

React Equivalent

const Parent = memo(() => {
  const current = useVRef('');
  return <Child name={current.value} onUpdateName={(value) => (current.value = value)} />;
});

React Callback Invocation

In Vue, emitting an event is done via emit('event-name', payload). VuReact converts this into a React callback invocation using props.

Vue Example

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', value: string): void;
}>();

const handleSubmit = () => {
  emit('submit', 'ok');
};
</script>

Compiled React

type ICompProps = {
  onSubmit?: (value: string) => void;
};

const handleSubmit = useCallback(() => {
  props.onSubmit?.('ok');
}, [props.onSubmit]);

VuReact ensures that event names and payload types are accurately mapped at compile time, and it generates a dependency array for useCallback() to maintain stability.

Event Name Mapping Rules

VuReact aligns Vue event naming conventions with React's callback prop style:

• save-item -> onSaveItem
• update:name -> onUpdateName
• close -> onClose

This mapping keeps the generated API consistent with React standards while preserving the original Vue event model intent.

Conclusion

VuReact offers a seamless way to compile Vue 3's event macros into React's callback props, ensuring maintainability and adherence to React's conventions. For more detailed information, visit the VuReact Repository and the VuReact Documentation.