veaury

Veaury provides two primary methods for integrating React components into Vue applications, which differ in how they handle children (slots) passed from Vue to React:

1. applyReactInVue (Normal Mode): This method does not perform conversion processing on VNodes. Instead, it creates a container to render VNodes uniformly. This is the standard way to wrap a React component for use in Vue.

2. applyPureReactInVue (Pure Mode): This method directly converts VNodes into ReactNodes. When Vue components are encountered as children, a new container is created for them. This mode ensures that children and slots are rendered completely as pure ReactNodes within the React component tree.

<script setup>
import { applyPureReactInVue, applyReactInVue } from 'veaury'
import AAReact from './react_app/AA'

// Children and slots in the component will be rendered completely as pure ReactNode
const AAWithPure = applyPureReactInVue(AAReact)

// Normal mode: creates a container to render VNodes uniformly
const AAWithNormal = applyReactInVue(AAReact)
</script>

<template>
  <AAWithPure>
    <div class="flex-sub">A</div>
  </AAWithPure>

  <AAWithNormal>
    <div class="flex-sub">A</div>
  </AAWithNormal>
</template>

Veaury allows passing context (like react-router or vuex) across the framework boundary using two methods:

1. useInjectPropsFromWrapper: An option for applyReactInVue or applyPureReactInVue. It allows you to run hooks from the host framework and pass the results as props to the guest component.
2. Crossing Providers: Use createCrossingProviderForVueInReact or createCrossingProviderForPureReactInVue to create a provider/hook pair. This allows components deep in the tree to access context from the other framework without manual prop drilling.

// Example: Injecting React Router into a Vue component
import { applyVueInReact } from 'veaury'
import { useLocation, useNavigate } from 'react-router-dom'

export default applyVueInReact(AboveVueComponent, {
  useInjectPropsFromWrapper(reactProps) {
    const location = useLocation()
    const navigate = useNavigate()
    return {
      reactRouter: { navigate, location }
    }
  }
})

Veaury enables context sharing between frameworks. If a component is wrapped and nested within a component of the same framework, Veaury uses Portal (React) or Teleport (Vue) to preserve the context tree.

• React Context in Vue: Use createCrossingProviderForVueInReact to create a React Provider and a corresponding Vue hook. The React Provider wraps the Vue component, and the Vue component uses the hook to access the context.
• Vue Provide/Inject in React: Use createCrossingProviderForPureReactInVue to create a Vue Provider and a corresponding React hook. The Vue Provider wraps the React component, and the React component uses the hook to access the context.

// Creating a React-to-Vue crossing provider
import { createCrossingProviderForVueInReact } from 'veaury'
import { useLocation, useNavigate } from 'react-router-dom'

const [useReactRouterForVue, ReactRouterProviderForVue] = createCrossingProviderForVueInReact(
  () => ({
    location: useLocation(),
    navigate: useNavigate()
  })
)
// Use ReactRouterProviderForVue in React, and useReactRouterForVue in Vue setup()

If your project uses Vite and contains both .vue and .jsx/.tsx files, you must configure the veauryVitePlugins to handle the different JSX parsing requirements.

First, ensure you have installed the following dependencies:

• @vitejs/plugin-react
• @vitejs/plugin-vue
• @vitejs/plugin-vue-jsx

Main project is Vue

When the primary project is Vue, set type: 'vue'. In this mode, JSX in files within a directory named react_app will be parsed as React JSX; all other JSX will be parsed as Vue JSX.

Main project is React

When the primary project is React, set type: 'react'. In this mode, JSX in .vue files and files within a directory named vue_app will be parsed as Vue JSX; all other JSX will be parsed as React JSX.

Custom compilation scope

Set type: 'custom' to use vueJsxInclude and vueJsxExclude (regex arrays) to define exactly which files should be parsed as Vue JSX.

import { defineConfig } from 'vite'
import veauryVitePlugins from 'veaury/vite/index.js'

export default defineConfig({
  plugins: [
    veauryVitePlugins({
      type: 'vue',
      // vueOptions: {...}, 
      // reactOptions: {...}, 
      // vueJsxOptions: {...}
    })
  ]
})

If your project uses Vite, you must configure vite.config.js using veauryVitePlugins. You should first install @vitejs/plugin-react, @vitejs/plugin-vue, and @vitejs/plugin-vue-jsx.

Depending on your module system, import the plugin as follows:

• CommonJS (vite.config.cjs): import veauryVitePlugins from 'veaury/vite/cjs/index.cjs'
• ESM (vite.config.mjs): import veauryVitePlugins from 'veaury/vite/esm/index.mjs'
• Standard JS (vite.config.js): import veauryVitePlugins from 'veaury/vite/index.js'

Case 1: Main project is Vue

Disable the standard vue() and vueJsx() plugins and use veauryVitePlugins({ type: 'vue' }). When type is set to 'vue', JSX in files named react_app will be compiled as React JSX; all other JSX files will be compiled as Vue JSX.

import { defineConfig } from 'vite'
import veauryVitePlugins from 'veaury/vite/index.js'

export default defineConfig({
  plugins: [
    // vue(),
    // vueJsx(),
    veauryVitePlugins({
      type: 'vue'
    })
  ]
})