Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/react18_render_fix'
Browse files Browse the repository at this point in the history
devilwjp committed Sep 1, 2022

Verified

This commit was signed with the committer’s verified signature.
ImgBotApp Imgbot
2 parents 14858f2 + da8dfd4 commit 5a3455d
Showing 5 changed files with 38 additions and 14 deletions.
2 changes: 1 addition & 1 deletion dev-project-react/package.json
Original file line number Diff line number Diff line change
@@ -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",
6 changes: 3 additions & 3 deletions dev-project-vue3/package.json
Original file line number Diff line number Diff line change
@@ -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"
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "veaury",
"private": false,
"version": "2.3.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",
32 changes: 23 additions & 9 deletions src/applyReactInVue.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
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;
// 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) {
ReactDOM = require('react-dom')
}

function toRaws(obj) {
return obj;
// TODO: Use toRaw to transform property values passed to react components
@@ -562,13 +570,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 +666,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()
},
10 changes: 10 additions & 0 deletions vite/index.js
Original file line number Diff line number Diff line change
@@ -27,6 +27,16 @@ function veauryVitePlugins({type, vueJsxInclude, vueJsxExclude}) {
...vueJsx(vueJsxOptions),
enforce: 'pre'
},
// recover esbuild include
{
config(){
return {
esbuild: {
include: /\.tsx*$/
}
}
}
},
react()
]
}

0 comments on commit 5a3455d

Please sign in to comment.