How does VuReact implement Vue v-on in React

#webdev #javascript #vue #react

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's common v-on/@ directive is compiled into React code by VuReact.

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 Vue 3's v-on directive usage.

Compilation Mapping

v-on / @: Basic event binding

v-on (shorthand @) is Vue's directive for binding event listeners to respond to user interactions.

<button @click="increment">+1</button>

Compiled React

<button onClick={increment}>+1</button>

As the example shows, Vue's @click directive is compiled into React's onClick attribute. VuReact adopts an event attribute compilation strategy, converting template directives into React's standard event attributes. This fully preserves Vue's event binding semantics — when the button is clicked, the increment function is called.

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue v-on behavior by implementing event listening functionality
Naming conversion: Vue's @click is converted to React's onClick (camelCase naming)
Function passing: Directly passes function references, preserving event handling logic
React-native support: Uses React's standard event system with no additional adaptation required

With event modifiers: Advanced event handling

Vue's event system supports a rich set of modifiers for controlling event behavior. VuReact handles these modifiers through runtime helper functions.

<button @click.stop.prevent="submit">Submit</button>

Compiled React

import { dir } from '@vureact/runtime-core';

<button onClick={dir.on('click.stop.prevent', submit)}>Submit</button>

As the example shows, Vue events with modifiers are compiled using the dir.on() helper function. VuReact adopts a modifier runtime processing strategy, converting complex modifier combinations into runtime function calls. This fully preserves Vue's event modifier semantics.

Compilation strategy details:

// Vue: @click.stop.prevent="handler"
// React: onClick={dir.on('click.stop.prevent', handler)}

// Vue: @keyup.enter="search"
// React: onKeyUp={dir.on('keyup.enter', search)}

// Vue: @click.capture="captureHandler"
// React: onClickCapture={dir.on('click.capture', captureHandler)}

How the runtime helper dir.on() works:

Parse modifiers: Parses the event name and modifier string
Create wrapper function: Creates an event handling wrapper function based on the modifiers
Apply modifier logic: Implements the behavior corresponding to each modifier in the wrapper function
Call original handler: Finally calls the developer-provided event handling function

Inline event handling and parameter passing

Vue supports writing inline event handling logic directly in templates, and VuReact handles this correctly as well.

<button @click="count++">Increment</button>
<button @click="sayHello('world')">Say Hello</button>
<button @click="handleEvent($event, 'custom')">With Event Object</button>

Compiled React

<button onClick={() => count.value++}>Increment</button>
<button onClick={() => sayHello('world')}>Say Hello</button>
<button onClick={(event) => handleEvent(event, 'custom')}>With Event Object</button>

Compilation strategy:

Expression conversion: Converts Vue template expressions into JSX arrow functions
Event object handling: Vue's $event is converted to React's event parameter
Parameter passing: Preserves the argument order and values of function calls
Reactive updates: Automatically handles .value access (for ref/computed variables, etc.)

defineEmits events and component communication

For component custom events, VuReact also has a corresponding compilation strategy.

<!-- Parent component -->
<Child @custom-event="handleCustom" />

<!-- Child component Child.vue -->
<template>
  <button @click="emits('custom-event', data)">Trigger Event</button>
</template>

<script setup>
const emits = defineEmits(['custom-event']);
</script>

Compiled React

// Parent component usage
<Child onCustomEvent={handleCustom} />;

// Child component Child.jsx
function Child(props) {
  return <button onClick={() => props.onCustomEvent?.(data)}>Trigger Event</button>;
}

Compilation rules:

Event name conversion: kebab-case is converted to camelCase (custom-event → onCustomEvent)
emit call conversion: emits() is converted to props callback invocations
Optional chaining guard: Adds ?. optional chaining operator to prevent undefined errors
Type safety: Preserves TypeScript type definition consistency

Compilation strategy summary

VuReact's event compilation strategy demonstrates a complete event system conversion capability:

Basic event mapping: Precisely maps Vue event directives to React event attributes
Modifier support: Fully supports Vue event modifiers through runtime helper functions
Inline handling: Correctly handles inline event expressions in templates
Custom events: Supports custom event communication between components
Type safety: Preserves TypeScript type definition integrity

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite event handling logic. The compiled code preserves Vue's semantics and functionality while following React's event handling best practices, keeping the migrated application fully interactive.