From ec196e834a108b48d09f885ba6893641f8d53ed5 Mon Sep 17 00:00:00 2001 From: devilwjp <9700616@qq.com> Date: Thu, 1 Sep 2022 11:27:14 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=98=88=F0=9F=91=BF=F0=9F=91=B9?= =?UTF-8?q?=F0=9F=91=BA=F0=9F=92=80=E2=98=A0=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/applyReactInVue.js | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/applyReactInVue.js b/src/applyReactInVue.js index a5f8f02..025435e 100644 --- a/src/applyReactInVue.js +++ b/src/applyReactInVue.js @@ -1,12 +1,18 @@ import * as React from "react" -import * as ReactDOM from "react-dom" -// TODO: react 18 -// import { createRoot } from "react-dom/client" +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' +const ReactMajorVersion = parseInt(version) +let ReactDOM; +try { + ReactDOM = require('react-dom/client') +} catch(e) { + ReactDOM = require('react-dom') +} + function toRaws(obj) { return obj; // TODO: Use toRaw to transform property values passed to react components @@ -562,13 +568,16 @@ export default function applyReactInVue(component, options = {}) { return } + if (ReactMajorVersion > 17) { + this.__veauryReactApp__ = ReactDOM.createRoot(container) + this.__veauryReactApp__.render(reactRootComponent) + return + } ReactDOM.render( reactRootComponent, container, ) - // TODO: react 18 - // this.__veauryReactApp__ = createRoot(container) - // this.__veauryReactApp__.render(reactRootComponent) + } else { const setReactState = () => { @@ -655,9 +664,12 @@ export default function applyReactInVue(component, options = {}) { // Override some methods of native lookup 'dom' overwriteDomMethods(this.$refs.react) // Destroy the React root node - ReactDOM.unmountComponentAtNode(this.$refs.react) - // TODO: react 18 - // this.__veauryReactApp__.unmount() + if (ReactMajorVersion > 17) { + this.__veauryReactApp__.unmount() + } else { + ReactDOM.unmountComponentAtNode(this.$refs.react) + } + // restore native method recoverDomMethods() }, From cc711ba30c7d95a2c11b98ade5461f20989aeea9 Mon Sep 17 00:00:00 2001 From: devilwjp <9700616@qq.com> Date: Thu, 1 Sep 2022 14:08:57 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=99=88=F0=9F=99=89=F0=9F=99=8A?= =?UTF-8?q?=F0=9F=90=B5=F0=9F=90=AF=F0=9F=A6=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/applyReactInVue.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/applyReactInVue.js b/src/applyReactInVue.js index 025435e..0598dea 100644 --- a/src/applyReactInVue.js +++ b/src/applyReactInVue.js @@ -7,6 +7,8 @@ import { overwriteDomMethods, recoverDomMethods } from './overrideDom' const ReactMajorVersion = parseInt(version) let ReactDOM; +// TODO: May be optimized in the future +// Not a good way to judge, because this will result in the exported esm format with `require`. try { ReactDOM = require('react-dom/client') } catch(e) { From 7071dc052c63d696b9b1cff685261820710dba86 Mon Sep 17 00:00:00 2001 From: devilwjp <9700616@qq.com> Date: Thu, 1 Sep 2022 14:17:08 +0800 Subject: [PATCH 3/6] 2.3.2-beta.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0676962..c07ae42 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "veaury", "private": false, - "version": "2.3.1", + "version": "2.3.2-beta.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", From 98ab75165433fdf432f95d4e88dd508608b62cf4 Mon Sep 17 00:00:00 2001 From: devilwjp <9700616@qq.com> Date: Thu, 1 Sep 2022 16:08:20 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=99=88=F0=9F=99=89=F0=9F=99=89?= =?UTF-8?q?=F0=9F=99=8A=F0=9F=90=B5=F0=9F=90=B6=F0=9F=A6=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dev-project-react/package.json | 2 +- dev-project-vue3/package.json | 6 +++--- vite/index.js | 10 ++++++++++ 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/dev-project-react/package.json b/dev-project-react/package.json index 0eb14b9..cef8afc 100644 --- a/dev-project-react/package.json +++ b/dev-project-react/package.json @@ -54,7 +54,7 @@ "style-loader": "^3.3.1", "tailwindcss": "^3.0.2", "terser-webpack-plugin": "^5.2.5", - "veaury": "^2.3.1-beta.0", + "veaury": "^2.3.2-beta.0", "vue": "^3.2.31", "vue-router": "^4.0.16", "vuex": "^4.0.2", diff --git a/dev-project-vue3/package.json b/dev-project-vue3/package.json index 87994e9..a4cfd9e 100644 --- a/dev-project-vue3/package.json +++ b/dev-project-vue3/package.json @@ -11,9 +11,9 @@ "babel-plugin-transform-react-jsx": "^6.24.1", "babel-preset-react-app": "^10.0.1", "core-js": "^3.6.5", - "react": "^18.1.0", - "react-dom": "^18.1.0", - "veaury": "^2.3.0-beta.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "veaury": "^2.3.2-beta.0", "vue": "^3.0.0", "vue-router": "^4.0.12", "vuex": "^4.0.2" diff --git a/vite/index.js b/vite/index.js index b963112..b387af7 100644 --- a/vite/index.js +++ b/vite/index.js @@ -27,6 +27,16 @@ function veauryVitePlugins({type, vueJsxInclude, vueJsxExclude}) { ...vueJsx(vueJsxOptions), enforce: 'pre' }, + // recover esbuild include + { + config(){ + return { + esbuild: { + include: /\.tsx*$/ + } + } + } + }, react() ] } From 4b75ea937e359ddf5adc6b5277c925f1d691525b Mon Sep 17 00:00:00 2001 From: devilwjp <9700616@qq.com> Date: Thu, 1 Sep 2022 16:08:37 +0800 Subject: [PATCH 5/6] 2.3.2-beta.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c07ae42..f2f9707 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "veaury", "private": false, - "version": "2.3.2-beta.0", + "version": "2.3.2-beta.1", "description": "Use React in Vue3 and Vue3 in React, And as perfect as possible!", "main": "dist/veaury.umd.js", "module": "dist/veaury.esm.js", From da8dfd4dda3593f15ae20d16b28f50b07298f44d Mon Sep 17 00:00:00 2001 From: devilwjp <9700616@qq.com> Date: Thu, 1 Sep 2022 16:12:12 +0800 Subject: [PATCH 6/6] 2.3.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f2f9707..de7e687 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "veaury", "private": false, - "version": "2.3.2-beta.1", + "version": "2.3.2", "description": "Use React in Vue3 and Vue3 in React, And as perfect as possible!", "main": "dist/veaury.umd.js", "module": "dist/veaury.esm.js",