Merge remote-tracking branch 'origin/154-support-react-19'

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.22.cjs"

README.md

@@ -28,6 +28,7 @@
 - [Usage](#usage)
   - [Vue in React - Basic usage](#vue-in-react---basic-usage)
   - [React in Vue - Basic usage](#react-in-vue---basic-usage)
+    - [If `react-dom 19` and above is installed in your vue project, you should use `veaury@^2.6.0`.](#if-react-dom-19-and-above-is-installed-in-your-vue-project-you-should-use-veaury%5E260)
   - [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)
@@ -236,6 +237,26 @@ export default function () {
 ```  
 
 ### React in Vue - Basic usage
+#### If `react-dom 19` and above is installed in your vue project, you should use `veaury@^2.6.0`.  
+`react-dom 19` no longer supports dynamically determining whether to use `render` or `createRoot`. In order to be compatible with `react-dom 17` and previous versions, you need to manually configure `createRoot` in the veaury configuration.  
+
+```js
+// react-dom >= 19, You only need to configure it globally once
+import { createRoot } from 'react-dom/client'
+import { setVeauryOptions } from 'veaury'
+setVeauryOptions({
+  react: {
+    createRoot
+  }
+})
+```
+
+If `createRoot` is not configured in react-dom 19 and above, the following error will be reported
+![image](https://github.com/user-attachments/assets/1abeec7d-a78c-4a1b-b2df-e113f72fa3c4)
+
+
+
+
 `applyPureReactInVue` is recommended.
 [Learn about the difference between `applyPureReactInVue` and `applyReactInVue`.](https://github.com/devilwjp/veaury/blob/master/pure_mode.md)   
 ```vue
@@ -1169,7 +1190,8 @@ The directories `dev-project-react` and `dev-project-vue3` in the project are th
 > In the `config/webpack.config.js` of the React project and the `vue.config.js` of the Vue project, you can uncomment the `veaury` in `alias` to develop the source code of `veaury`
 
 > [!TIP]  
-> **Setup:** Run the command `npm run setup:yarn` or `npm run setup:npm` in the root directory of the main project to install the main project and two subprojects
+> This project can only be installed using `yarn`.
+> **Setup:** Run the command `npm run setup` in the root directory of the main project to install the main project and two subprojects
 
 > [!TIP]  
 > **Develop:** Run the commands `npm run dev:vue` and `npm run dev:react` in the root directory of the main project for development  

README_zhcn.md

@@ -27,6 +27,7 @@
 - [用法](#%E7%94%A8%E6%B3%95)
   - [在React组件中使用Vue组件 - 基本用法](#%E5%9C%A8react%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8vue%E7%BB%84%E4%BB%B6---%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95)
   - [在Vue组件中使用React组件 - 基本用法](#%E5%9C%A8vue%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8react%E7%BB%84%E4%BB%B6---%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95)
+    - [如果你的vue项目中安装了`react-dom 19`及以上版本，你应该使用`veaury@^2.6.0`](#%E5%A6%82%E6%9E%9C%E4%BD%A0%E7%9A%84vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%AE%89%E8%A3%85%E4%BA%86react-dom-19%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E4%BD%A0%E5%BA%94%E8%AF%A5%E4%BD%BF%E7%94%A8veaury%5E260)
   - [在React组件中使用Vue组件 - 事件的用法](#%E5%9C%A8react%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8vue%E7%BB%84%E4%BB%B6---%E4%BA%8B%E4%BB%B6%E7%9A%84%E7%94%A8%E6%B3%95)
   - [在Vue组件中使用React组件 - 事件的用法](#%E5%9C%A8vue%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8react%E7%BB%84%E4%BB%B6---%E4%BA%8B%E4%BB%B6%E7%9A%84%E7%94%A8%E6%B3%95)
   - [在React组件中使用Vue组件 - 插槽的用法](#%E5%9C%A8react%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8vue%E7%BB%84%E4%BB%B6---%E6%8F%92%E6%A7%BD%E7%9A%84%E7%94%A8%E6%B3%95)
@@ -205,6 +206,24 @@ export default function () {
 ```  
 
 ### 在Vue组件中使用React组件 - 基本用法
+#### 如果你的vue项目中安装了`react-dom 19`及以上版本，你应该使用`veaury@^2.6.0`  
+`react-dom 19` no longer supports dynamically determining whether to use `render` or `createRoot`. In order to be compatible with `react-dom 17` and previous versions, you need to manually configure `createRoot` in the veaury configuration.
+
+```js
+// react-dom >= 19, You only need to configure it globally once
+import { createRoot } from 'react-dom/client'
+import { setVeauryOptions } from 'veaury'
+setVeauryOptions({
+  react: {
+    createRoot
+  }
+})
+```
+
+If `createRoot` is not configured in react-dom 19 and above, the following error will be reported
+![image](https://github.com/user-attachments/assets/1abeec7d-a78c-4a1b-b2df-e113f72fa3c4)
+
+
 现在推荐使用`applyPureReactInVue`代替`applyReactInvue`.  
 [了解 `applyPureReactInVue` 和 `applyReactInVue` 的区别](https://github.com/devilwjp/veaury/blob/master/pure_mode.md)
 ```vue
@@ -1104,6 +1123,7 @@ index 3366f5a..b9eacc6 100644
 本项目中的`dev-project-react`和`dev-project-vue3`目录是`veaury`开发环境的基础项目，分别由`create-react-app`和`@vue/cli`创建的两个初始项目。
 > **Note:** 在react项目中的`config/webpack.config.js`以及vue项目中的`vue.config.js`里，可以找到webpack的alias别名配置，将`veaury`的别名注释解开，就可以对根项目中`src`目录里的`veaury`源代码进行开发调试了
 >
-> **Setup:** 在主项目的根目录下运行命令行`npm run setup:yarn` 或者 `npm run setup:npm`，可以整体安装主项目和两个调试用的子项目
+> 只能使用`yarn`进行安装
+> **Setup:** 在主项目的根目录下运行命令行`npm run setup` 可以整体安装主项目和两个调试用的子项目
 >
 > **Develop:** 在主项目的根目录下运行命令行`npm run dev:vue` 以及 `npm run setup:npm`就可以对子项目进行开发调试

dev-project-react/config/webpack.config.js

@@ -309,7 +309,9 @@ module.exports = function (webpackEnv) {
         .map(ext => `.${ext}`)
         .filter(ext => useTypeScript || !ext.includes('ts')),
       alias: {
-        ...(process.env.BUILD_TYPE === 'remote'? {}: {veaury: path.resolve(__dirname, '../../src')}),
+        ...(process.env.BUILD_TYPE === 'remote'? {}: {
+          veaury: path.resolve(__dirname, '../../src')
+        }),
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',

dev-project-react/package.json

@@ -7,7 +7,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^13.5.0",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "babel-jest": "^27.4.2",
@@ -40,10 +40,10 @@
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.0.1",
     "prompts": "^2.4.2",
-    "react": "^18.1.0",
+    "react": "^19.0.0",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^19.0.0",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.2.1",
     "resolve": "^1.20.0",
@@ -54,7 +54,7 @@
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.2",
     "terser-webpack-plugin": "^5.2.5",
-    "veaury": "^2.5.0-beta.1",
+    "veaury": "^2.6.0-beta.0",
     "vue": "^3.4.21",
     "vue-router": "^4.0.16",
     "vuex": "^4.0.2",

dev-project-vue3/package.json

@@ -8,25 +8,23 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.2.10",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-react-app": "^10.0.1",
     "core-js": "^3.6.5",
-    "framer-motion": "^11.0.28",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^3.4.3",
-    "veaury": "^2.5.0-beta.1",
+    "veaury": "^2.6.0-beta.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.18.10",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",

dev-project-vue3/src/main.js

@@ -3,6 +3,15 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+// react-dom >= 19
+import { createRoot } from 'react-dom/client'
+import { setVeauryOptions } from 'veaury'
+setVeauryOptions({
+  react: {
+    createRoot
+  }
+})
+
 const app = createApp(App)
 app.use(router)
 app.use(store)

dev-project-vue3/src/pages/pureReactInVue/index.vue

@@ -71,16 +71,16 @@
       <div></div>
     </BB>
   </AAWithPure>
-  <Box>
-    <Box v-for="e in [1]">
-      <ReactInput :value="value" @valueChange="onValueChange" />
-    </Box>
-  </Box>
+<!--  <Box>-->
+<!--    <Box v-for="e in [1]">-->
+<!--      <ReactInput :value="value" @valueChange="onValueChange" />-->
+<!--    </Box>-->
+<!--  </Box>-->
 
 </template>
 
 <script setup lang="jsx">
-import { Input } from "@nextui-org/react";
+// import { Input } from "@nextui-org/react";
 import { applyPureReactInVue, applyReactInVue, RenderReactNode, getReactNode, injectSyncUpdateForPureReactInVue } from 'veaury'
 import { ref, onMounted, getCurrentInstance, h, Comment } from 'vue'
 import { createElement } from 'react'
@@ -90,16 +90,16 @@ import CCReact from './react_app/CC'
 import BoxReact from './react_app/Box'
 
 // After the Input component is bidirectionally bound, inputting text will cause confusion in the timing of status updates, and synchronous update injection processing is required.
-injectSyncUpdateForPureReactInVue(Input, {
-  // The name of the hook function that determines the content update of the Input component
-  onValueChange(...args) {
-    // The state key that determines the content of the Input component
-    return {
-      value: args[0]
-    }
-  }
-})
-const ReactInput = applyPureReactInVue(Input);
+// injectSyncUpdateForPureReactInVue(Input, {
+//   // The name of the hook function that determines the content update of the Input component
+//   onValueChange(...args) {
+//     // The state key that determines the content of the Input component
+//     return {
+//       value: args[0]
+//     }
+//   }
+// })
+// const ReactInput = applyPureReactInVue(Input);
 const Box = applyPureReactInVue(BoxReact)
 
 const ReactNode = createElement('div', null, 'ReactNode')

dev-project-vue3/vue.config.js

@@ -13,7 +13,9 @@ module.exports = {
   configureWebpack: {
     resolve: {
       alias: {
-        ...(process.env.BUILD_TYPE === 'remote'? {}: {veaury: path.resolve(__dirname, '../src')}),
+        ...(process.env.BUILD_TYPE === 'remote'? {}: {
+          veaury: path.resolve(__dirname, '../src')
+        }),
         src: path.resolve(__dirname, './src'),
         react_app: path.resolve(__dirname, './src/react_app'),
       }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "veaury",
   "private": false,
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Use React in Vue3 and Vue3 in React, And as perfect as possible!",
   "main": "dist/veaury.umd.js",
   "module": "dist/veaury.esm.js",
@@ -20,9 +20,7 @@
     "dev-setup:yarn": "yarn --cwd dev-project-vue3 && yarn --cwd dev-project-react",
     "dev-setup:npm": "npm i --prefix dev-project-vue3 && npm i --prefix dev-project-react",
     "test-setup:yarn": "yarn --cwd tests",
-    "test-setup:npm": "npm i --prefix tests",
-    "setup:yarn": "yarn && npm run dev-setup:yarn && npm run test-setup:yarn",
-    "setup:npm": "npm i && npm run dev-setup:npm && npm run test-setup:npm",
+    "setup": "yarn && npm run dev-setup:yarn && npm run test-setup:yarn",
     "test": "jest",
     "test:remote": "cross-env TEST_REMOTE=true jest --coverage false",
     "test:temp": "cross-env TEST_TEMP=true jest --coverage false",
@@ -82,5 +80,8 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-uglify": "^6.0.3"
+  },
+  "dependencies": {
+    "veaury": "^2.6.0-beta.0"
   }
 }

src/applyReactInVue.js

@@ -1,13 +1,12 @@
 import * as React from "react"
-import { version } from "react"
 import applyVueInReact from "./applyVueInReact"
 import { setOptions } from "./options"
 import { h as createElement, getCurrentInstance, reactive, Fragment as VueFragment, Comment } from 'vue'
 import { overwriteDomMethods, recoverDomMethods } from './overrideDom'
-import { createPortal } from "react-dom"
+import { createPortal, version } from "react-dom"
 import ReactDOM from 'react-dom'
 
-const ReactMajorVersion = parseInt(version)
+const ReactDOMMajorVersion = parseInt(version)
 
 // let ReactDOM;
 // TODO: May be optimized in the future
@@ -560,12 +559,16 @@ export default function applyReactInVue(component, options = {}) {
             return
           }
 
-          if (ReactMajorVersion > 17) {
+          if (ReactDOMMajorVersion > 17) {
             // I'm not afraid of being fired
             if (ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED !== undefined) {
               ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = true
             }
-            this.__veauryReactApp__ = ReactDOM.createRoot(container)
+            const createRoot = options.react.createRoot || ReactDOM.createRoot
+            if (ReactDOMMajorVersion > 18 && !createRoot) {
+              console.warn(`'react-dom 19' no longer supports dynamically determining whether to use 'render' or 'createRoot'. In order to be compatible with 'react-dom 17' and previous versions, you need to manually configure 'createRoot' in the veaury configuration.`)
+            }
+            this.__veauryReactApp__ = createRoot(container)
             this.__veauryReactApp__.render(reactRootComponent)
             return
           }
@@ -658,7 +661,7 @@ export default function applyReactInVue(component, options = {}) {
       }
 
       // Destroy the React root node
-      if (ReactMajorVersion > 17) {
+      if (ReactDOMMajorVersion > 17) {
         this.__veauryReactApp__?.unmount()
       } else {
         ReactDOM.unmountComponentAtNode(this.$refs.react)

tests/cases/applyReactInVue/2-scopedSlot-vnode.vue

@@ -13,7 +13,7 @@
   </ReactComponent>
 </template>
 
-<script>
+<script lang="jsx">
 import React from "react"
 import {createVNode} from "vue"
 import { applyReactInVue, getReactNode } from 'veaury'
@@ -48,4 +48,4 @@ export default {
 
 <style>
 
-</style>
+</style>

tests/cases/applyReactInVue/3-getReactNode.vue

@@ -2,7 +2,7 @@
   <ReactComponentInVue :passingReactNode="getReactNode(VNode)"/>
 </template>
 
-<script setup>
+<script setup lang="jsx">
 import React from 'react'
 import {h} from 'vue'
 import {applyPureReactInVue, getReactNode} from 'veaury'

tests/package.json

@@ -11,7 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/vue": "^6.6.1",
     "@vitejs/plugin-react": "^2.1.0",
     "@vitejs/plugin-vue": "^3.1.0",
@@ -22,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
-    "veaury": "^2.5.0-beta.1",
+    "veaury": "^2.6.0-beta.0",
     "vite": "^3.1.0",
     "vue": "^3.2.38",
     "vue-router": "^4.1.5",

types/veaury.d.ts

@@ -44,11 +44,20 @@ type CrossingProviderVueInReactReturn = [useCrossingHooks, CrossingProviderCompo
 type useReactMissVueHooks = useCrossingHooks
 type ReactMissVueProvider = CrossingProviderComponent
 type createReactMissVueReturn = [useReactMissVueHooks, ReactMissVueProvider, ReactContext]
+interface VeauryOptions {
+    react?: {
+        [key: string]: any
+        createRoot?: Function
+    },
+    vue?: {
+        [key: string]: any
+    }
+}
 
 export const createCrossingProviderForReactInVue: (vueInjection: injectionFunction) => CrossingProviderReactInVueReturn;
 export const createCrossingProviderForVueInReact: (reactInjection: injectionFunction, providerName?: string) => CrossingProviderVueInReactReturn;
-// export const veauryOptions: options;
-// export const setVeauryOptions: (veauryOptions: options) => options;
+export const veauryOptions: VeauryOptions;
+export const setVeauryOptions: (veauryOptions: VeauryOptions) => VeauryOptions;
 export const applyReactInVue: (ReactComponent: ReactComponent, options?: options) => VueComponent;
 export const applyVueInReact: (VueComponent: VueComponent, options?: options) => ReactComponent;
 export const lazyVueInReact: (asyncImport: Promise<any>, options?: options) => any;