This is the Vue default slot
-
+
current time: {{currentTime}}
@@ -28,16 +29,17 @@ import ReactBasic from "./react_app/Basic"
import ReactAA from "./react_app/AA"
import ReactBB from "./react_app/BB"
import ReactCC from "./react_app/CC"
+import ReactUnMount from "./react_app/UnMount"
export default {
components: {
Basic: applyReactInVue(ReactBasic),
AA: applyReactInVue(ReactAA),
BB: applyReactInVue(ReactBB),
- CC: applyReactInVue(ReactCC)
+ CC: applyReactInVue(ReactCC),
+ ReactUnMount: applyReactInVue(ReactUnMount),
},
setup() {
- return
let timer, timer1
const currentTime = ref(new Date().toLocaleString())
const foo = ref(Math.random())
diff --git a/dev-project-vue3/src/pages/basic/react_app/UnMount.js b/dev-project-vue3/src/pages/basic/react_app/UnMount.js
new file mode 100644
index 0000000..5ae14ca
--- /dev/null
+++ b/dev-project-vue3/src/pages/basic/react_app/UnMount.js
@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react'
+
+
+const myReactComponent = class A extends React.Component {
+ componentWillUnmount() {
+ console.log(1111, document.querySelector(".aaa"))
+ console.log(2222, document.querySelector(".bbb"))
+ }
+ render() {
+ return (
)
+ }
+}
+
+export default myReactComponent
\ No newline at end of file
diff --git a/package.json b/package.json
index 61be619..5bb8ccf 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "veaury",
"private": false,
- "version": "2.3.12",
+ "version": "2.3.15",
"description": "Use React in Vue3 and Vue3 in React, And as perfect as possible!",
"main": "dist/veaury.umd.js",
"module": "dist/veaury.esm.js",
@@ -16,7 +16,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": "yarn --prefix 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",
"test": "jest",
diff --git a/src/applyReactInVue.js b/src/applyReactInVue.js
index 0714a44..b119f23 100644
--- a/src/applyReactInVue.js
+++ b/src/applyReactInVue.js
@@ -617,20 +617,18 @@ export default function applyReactInVue(component, options = {}) {
},
beforeUnmount() {
clearTimeout(this.updateTimer)
+ // Magical Code!
+ // Override some methods of native lookup 'dom',
+ // so that React can still look up the dom object before the Vue component is destroyed
+ overwriteDomMethods(this.$refs.react)
// destroy 'Portal'
if (this.reactPortal) {
- // Magical Code!
- // Override some methods of native lookup 'dom',
- // so that React can still look up the dom object before the Vue component is destroyed
- overwriteDomMethods(this.$refs.react)
this.parentReactWrapperRef?.removeReactPortal(this.reactPortal)
// restore native method
recoverDomMethods()
return
}
- // Override some methods of native lookup 'dom'
- overwriteDomMethods(this.$refs.react)
// Destroy the React root node
if (ReactMajorVersion > 17) {
this.__veauryReactApp__.unmount()
diff --git a/src/overrideDom.js b/src/overrideDom.js
index 849dd78..4e45a8f 100644
--- a/src/overrideDom.js
+++ b/src/overrideDom.js
@@ -13,7 +13,9 @@ export function overwriteDomMethods(refDom) {
window[key].prototype[method] = function (...args) {
const oldResult = old.apply(this, args)
if (oldResult && (oldResult.constructor !== NodeList || (oldResult.constructor === NodeList && oldResult.length > 0))) return oldResult
- return Element.prototype[method].apply(refDom, args)
+ // If each function of Document is called using apply, an error will occur. Here you need to use the native function of Element.
+ const nativeElementFn = domTopObject.Element[method] || Element.prototype[mehtod]
+ return nativeElementFn.apply(refDom, args)
}
})
})
diff --git a/tests/cases/applyReactInVue/4-reactUnMount-test.js b/tests/cases/applyReactInVue/4-reactUnMount-test.js
new file mode 100644
index 0000000..be4ef97
--- /dev/null
+++ b/tests/cases/applyReactInVue/4-reactUnMount-test.js
@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/vue';
+import Component from "./4-reactUnMount.vue"
+
+test('test reactUnMount', async () => {
+ render(Component);
+ await new Promise(resolve => {
+ setTimeout(resolve, 300);
+ })
+ const linkElement = await screen.findByText(/reactUnMountSuccess/);
+ expect(linkElement).toBeInTheDocument()
+});
diff --git a/tests/cases/applyReactInVue/4-reactUnMount.vue b/tests/cases/applyReactInVue/4-reactUnMount.vue
new file mode 100644
index 0000000..0477c00
--- /dev/null
+++ b/tests/cases/applyReactInVue/4-reactUnMount.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/tests/cases/applyReactInVue/react_app/ReactUnMount.js b/tests/cases/applyReactInVue/react_app/ReactUnMount.js
new file mode 100644
index 0000000..305d163
--- /dev/null
+++ b/tests/cases/applyReactInVue/react_app/ReactUnMount.js
@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react'
+export default class A extends React.Component {
+ componentWillUnmount() {
+ const foundDom = document.querySelector(".aaa")
+ const notFoundDom = document.querySelector(".bbb")
+ if (foundDom && !notFoundDom) {
+ document.body.appendChild(document.createTextNode("reactUnMountSuccess"))
+ }
+ }
+ render() {
+ return (
)
+ }
+}
diff --git a/tests/package.json b/tests/package.json
index 68e1ca3..be5ce47 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -22,7 +22,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
- "veaury": "^2.3.11-beta.0",
+ "veaury": "^2.3.15-beta.1",
"vite": "^3.1.0",
"vue": "^3.2.38",
"vue-router": "^4.1.5",
diff --git a/vite/index.js b/vite/index.js
index 4b1a04d..910c764 100644
--- a/vite/index.js
+++ b/vite/index.js
@@ -24,7 +24,7 @@ function veauryVitePlugins({type, vueJsxInclude, vueJsxExclude, vueOptions = {},
let vueJsxOptions = {...initVueJsxOptions}
if (type === 'react') {
- vueJsxOptions.include = [/vue&type=script&lang\.[tj]sx?$/, /vue&type=script&setup=true&lang\.[tj]sx?$/, /[/\\]vue_app[\\/$]+/]
+ vueJsxOptions.include = [/vue&type=script&lang\.[tj]sx$/i, /vue&type=script&setup=true&lang\.[tj]sx$/i, /[/\\]vue_app[\\/][\w\W]+\.[tj]sx$/]
}
if (type === 'vue') {
vueJsxOptions.exclude = [/[/\\]react_app[\\/$]+/]
@@ -41,6 +41,7 @@ function veauryVitePlugins({type, vueJsxInclude, vueJsxExclude, vueOptions = {},
return [
// ReactDOMTransformPlugin(),
// requireTransform({
+
// fileRegex: /veaury/
// }),
vue(vueOptions),
@@ -54,7 +55,7 @@ function veauryVitePlugins({type, vueJsxInclude, vueJsxExclude, vueOptions = {},
config(){
return {
esbuild: {
- include: /\.[jt]sx*$/
+ include: /\.[jt]sx?$/
}
}
}
diff --git a/webpack/VeauryVuePlugin.js b/webpack/VeauryVuePlugin.js
index 3d1a95c..2bc0863 100644
--- a/webpack/VeauryVuePlugin.js
+++ b/webpack/VeauryVuePlugin.js
@@ -34,7 +34,7 @@ class VeauryVuePlugin {
if (fileLoaderRule) {
// ignore vue type file
- fileLoaderRule.exclude.push(/\.vue$/)
+ fileLoaderRule.exclude?.push(/\.vue$/)
}
const newRules = [