Merge remote-tracking branch 'origin/2024_fisrt_version'

README.md

@@ -165,7 +165,7 @@ export default defineConfig({
     veauryVitePlugins({
       type: 'custom',
       // The jsx in .vue files and in the directory named 'vue_app' will be parsed with vue jsx.
-      vueJsxInclude: [/vue&type=script&lang\.[tj]sx?$/, /vue&type=script&setup=true&lang\.[tj]sx?$/, /[/\\]vue_app[\\/$]+/],
+      vueJsxInclude: [/vue&type=script&lang\.[tj]sx$/i, /vue&type=script&setup=true&lang\.[tj]sx$/i, /[/\\]vue_app[\\/][\w\W]+\.[tj]sx$/],
       // vueJsxExclude: [],
       // Configuration of @vitejs/plugin-vue
       // vueOptions: {...},

README_zhcn.md

@@ -136,8 +136,8 @@ export default defineConfig({
   plugins: [
     veauryVitePlugins({
       type: 'custom',
-      // 所有.vue文件以及在名为vue_app目录里的文件都将以vue jsx编译
-      vueJsxInclude: [/vue&type=script&lang\.[tj]sx?$/, /vue&type=script&setup=true&lang\.[tj]sx?$/, /[/\\]vue_app[\\/$]+/],
+      // 所有.vue文件中的jsx以及在名为vue_app目录里的jsx文件都将以vue jsx编译
+      vueJsxInclude: [/vue&type=script&lang\.[tj]sx$/i, /vue&type=script&setup=true&lang\.[tj]sx$/i, /[/\\]vue_app[\\/][\w\W]+\.[tj]sx$/],
       // vueJsxExclude: []
     })
   ]

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

@@ -5,10 +5,11 @@
   <h4>
     Using React components in Vue components.
   </h4>
+  <ReactUnMount v-if="showFlag" />
   <Basic :foo="foo" ref="BasicRef" :null="null">
     <div class="slot">
       This is the Vue default slot
-      <AA v-if="showFlag" :disappearTime="5" ref="AARef"/>
+      <AA v-if="showFlag" :disappearTime="6" ref="AARef"/>
       <div>
         current time: {{currentTime}}
       </div>
@@ -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())

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 (<div>
+            <div className="aaa">unMountTest</div>
+        </div>)
+    }
+}
+
+export default myReactComponent

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",

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()

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)
             }
         })
     })

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()  
+});

tests/cases/applyReactInVue/4-reactUnMount.vue

@@ -0,0 +1,31 @@
+<template>
+  <ReactComponentInVue v-if="showFlag"/>
+</template>
+
+<script>
+import {h, ref, onMounted} from 'vue'
+import {applyReactInVue} from 'veaury'
+import ReactComponent from "./react_app/ReactUnMount"
+
+export default {
+    components: {
+        ReactComponentInVue: applyReactInVue(ReactComponent)
+    },
+    setup() {
+        const showFlag = ref(true)
+        onMounted(() => {
+            setTimeout(() => {
+                showFlag.value = false
+            }, 200);
+        })
+
+        return {
+            showFlag
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

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 (<div>
+            <div className="aaa">unMountTest</div>
+        </div>)
+    }
+}

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",

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?$/
           }
         }
       }

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 = [