基于可逆计算原理从零开始构建的新一代低代码平台，致力于克服低代码平台无法摆脱穷举法困境，从理论层面有效解决粗粒度软件复用的问题

<div align=center> <img src="https://raw.githubusercontent.com/devilwjp/VueReact/master/vuereact-combined.png"/> </div> <h1 align=center>Veaury</h1> <h2 align=center>Use React in Vue3 and Vue3 in React, And as perfect as possible!</h2> <p align="center"> <a href="https://coveralls.io/github/devilwjp/veaury?branch=master"><img src="https://coveralls.io/repos/github/devilwjp/veaury/badge.svg?branch=master" alt="Coverage Status"></a> <a href="https://www.npmjs.com/package/veaury"><img src="https://img.shields.io/npm/v/veaury" alt="Version"></a> <a href="https://npmcharts.com/compare/veaury?minimal=true"><img src="https://img.shields.io/npm/dm/veaury" alt="Downloads"></a> <a href="https://www.npmjs.com/package/veaury"><img src="https://img.shields.io/bundlephobia/minzip/veaury" alt="Size"></a> </p> <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> - [What is Veaury?](#what-is-veaury) - [The greatest feature](#the-greatest-feature) - [Legacy](#legacy) - [Latest documentation](#latest-documentation) - [Use cases](#use-cases) - [Installation](#installation) - [Do you want to preconfigure your project in advance?](#do-you-want-to-preconfigure-your-project-in-advance) - [Webpack](#webpack) - [Vite](#vite) - [Usage](#usage) - [Vue in React - Basic usage](#vue-in-react---basic-usage) - [React in Vue - Basic usage](#react-in-vue---basic-usage) - [Vue in React - Usage of events](#vue-in-react---usage-of-events) - [React in Vue - Usage of events](#react-in-vue---usage-of-events) - [Vue in React - Usage of slots](#vue-in-react---usage-of-slots) - [React in Vue - Usage of render props and React node](#react-in-vue---usage-of-render-props-and-react-node) - [Context](#context) - [Vue in React - Usage of Provider / useContext](#vue-in-react---usage-of-provider--usecontext) - [React in Vue - Usage of Provide / Inject](#react-in-vue---usage-of-provide--inject) - [Usage of VueContainer in React Component](#usage-of-vuecontainer-in-react-component) - [Usage of getVNode](#usage-of-getvnode) - [Usage of getReactNode](#usage-of-getreactnode) - [Usage of RenderReactNode](#usage-of-renderreactnode) - [Vue in React, Usage of v-model / v-models](#vue-in-react-usage-of-v-model--v-models) - [Option useInjectPropsFromWrapper](#option-useinjectpropsfromwrapper) - [Usage of injecting React hooks in Vue component](#usage-of-injecting-react-hooks-in-vue-component) - [Usage of injecting Vue hooks in React component](#usage-of-injecting-vue-hooks-in-react-component) - [Crossing provider](#crossing-provider) - [Usage of createCrossingProviderForVueInReact](#usage-of-createcrossingproviderforvueinreact) - [Usage of createCrossingProviderForReactInVue](#usage-of-createcrossingproviderforreactinvue) - [ReactMissVue](#reactmissvue) - [Usage of createReactMissVue](#usage-of-createreactmissvue) - [Usage of lazyReactInVue](#usage-of-lazyreactinvue) - [Usage of lazyVueInReact](#usage-of-lazyvueinreact) - [Usage of getting ref](#usage-of-getting-ref) - [Typescript JSX types conflict caused by Vue and React at the same time.](#typescript-jsx-types-conflict-caused-by-vue-and-react-at-the-same-time) - [Development Setup](#development-setup) - [Project Structure](#project-structure) <!-- END doctoc generated TOC please keep comment here to allow auto update --> ## What is Veaury? Veaury (pronounced /ˈvjuːri/, inspired by 'beauty') is a tool library. It is built on the Vue and React framework. It's use cases include using both Vue and React in one app, migrating from React to Vue or from Vue to React, and using third-party Vue and React Components, such as `antd`, `element-ui`, `vuetify`. ## The greatest feature - 🌞 Support Vue3 - 🌈 Support Context - Share the context of all vue and react components. - 💗 Support for using hooks across frameworks - You can use React's hooks in a Vue component, or you can use Vue's 'setup' function in a React component and use Vue's hooks in this function. - 🪂 Pure mode - The children of the converted component no longer have an extra element container. [>>learn more about how the pure mode works](https://github.com/devilwjp/veaury/blob/master/pure_mode.md) ## Legacy The perfect [tool library](https://github.com/devilwjp/vuereact-combined) which can use React in Vue2 and Vue2 in React. ## Latest documentation View the latest [documentation](https://github.com/devilwjp/veaury#readme) [中文文档](https://github.com/devilwjp/veaury/blob/master/README_zhcn.md) ## Use cases - 👨‍👩‍👧 Using both Vue and React in one app - 🏃 Migrating from React to Vue or from Vue to React - 📲 Using third-party Vue and React Components, such as `antd`, `element-ui`, `vuetify` ## Installation ```sh # Install with yarn: $ yarn add veaury # or with npm: $ npm i veaury -S ``` ## Do you want to preconfigure your project in advance? In theory, you don't need to do additional configuration in a React project to support Vue, nor do you need to do additional configuration in a Vue project to support React. If the React or Vue component you want to convert comes from a npm package, or has already been built (Not a direct vue file and does not contain jsx), you can use `applyPureReactInVue` or `applyVueInReact` directly. If you need to develop both Vue and React in a project, instead of just using an existing npm component (There are both .vue files and react jsx files in a project source code), then you should do some configuration. ### Webpack [How to configure React in the Vue project from '@vue/cli' ](https://github.com/devilwjp/veaury/tree/master/dev-project-vue3) [How to configure Vue in the React project from 'create-react-app' ](https://github.com/devilwjp/veaury/tree/master/dev-project-react) ### Vite If it is a project built by `vite`, the relevant configuration is as follows. First install `@vitejs/plugin-react`, `@vitejs/plugin-vue` and `@vitejs/plugin-vue-jsx`. + The main project is Vue: ```js import { defineConfig } from 'vite' // >= veaury@2.1.1 import veauryVitePlugins from 'veaury/vite/index.js' export default defineConfig({ plugins: [ // Turn off vue and vuejsx plugins // vue(), // vueJsx(), // When the type of veauryVitePlugins is set to vue, // only jsx in files in the directory named 'react_app' will be parsed with react jsx, // and jsx in other files will be parsed with vue jsx veauryVitePlugins({ type: 'vue', // Configuration of @vitejs/plugin-vue // vueOptions: {...}, // Configuration of @vitejs/plugin-react // reactOptions: {...}, // Configuration of @vitejs/plugin-vue-jsx // vueJsxOptions: {...} }) ] }) ``` + The main project is React: ```js import { defineConfig } from 'vite' // >= veaury@2.1.1 import veauryVitePlugins from 'veaury/vite/index.js' export default defineConfig({ plugins: [ // Turn off react plugin // react(), // When the type of veauryVitePlugins is set to react, // only jsx in .vue file will be parsed with vue jsx, // jsx in other files will be parsed with react jsx veauryVitePlugins({ type: 'react', // Configuration of @vitejs/plugin-vue // vueOptions: {...}, // Configuration of @vitejs/plugin-react // reactOptions: {...}, // Configuration of @vitejs/plugin-vue-jsx // vueJsxOptions: {...} }) ] }) ``` If you want to customize the compilation scope of vueJsx, you can configure overrides by setting type to `custom`. ```js import { defineConfig } from 'vite' // >= veaury@2.1.1 import veauryVitePlugins from 'veaury/vite/index.js' export default defineConfig({ plugins: [ veauryVitePlugins({ type: 'custom', // The jsx in .vue files and in the directory named 'vue_app' will be parsed with vue jsx. vueJsxInclude: [/