fix: fix reavue rerendering diff ReactInVue (#10)

ChibiBlasphem · Sep 3, 2022 · 0aaf686 · 0aaf686
1 parent 3df020e
commit 0aaf686
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git a/src/wrappers/React.test.tsx b/src/wrappers/React.test.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
-import { render } from '@testing-library/vue';
+import { fireEvent, render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { ReactWrapper } from './React';
 import { defineComponent } from '@vue/composition-api';
@@ -68,6 +68,20 @@ describe('Vue Wrapper', () => {
     await findByText('Count is: 0');
   });
 
+  it('Should not replace the entire element', async () => {
+    const { findByText, getByRole, debug } = render(VueCountComponentTester, {
+      props: {
+        component: ReactCountComponent,
+      },
+    });
+
+    const reactRoot = await findByText('Count is: 0');
+    await fireEvent.click(getByRole('button'));
+    const reactRootRerender = await findByText('Count is: 1');
+
+    expect(reactRootRerender).toBe(reactRoot);
+  });
+
   it('should render the ReactComponent with props', async () => {
     const { findByText } = render(ReactWrapper, {
       props: {

diff --git a/src/wrappers/React.tsx b/src/wrappers/React.tsx
@@ -6,16 +6,16 @@ import { VueWrapper } from './Vue';
 
 const wrapVueChildren = (children: any) => {
   return defineComponent({
-    render: (createElement) => createElement('div', children),
+    render: (createElement) => children,
   });
 };
 
 const makeReactComponent = (Component: ComponentType<{ children?: ReactNode }>) => {
   const ReactComponent = function ({ children, ...props }: any) {
-    const wrappedChildren = wrapVueChildren(children);
-
     return (
-      <Component {...props}>{children && <VueWrapper component={wrappedChildren} />}</Component>
+      <Component {...props}>
+        {children && <VueWrapper component={wrapVueChildren(children)} />}
+      </Component>
     );
   };
 
@@ -36,16 +36,17 @@ export const ReactWrapper = defineComponent({
   data() {
     return {
       reactRoot: null,
-    } as { reactRoot: any };
+      Component: null,
+    } as { reactRoot: any; Component: any };
   },
   mounted() {
     this.reactRoot = createRoot(this.$refs.react as HTMLDivElement);
+    this.Component = makeReactComponent(this.$props.component);
     this.mountReactComponent(this.reactRoot);
   },
   methods: {
     mountReactComponent(reactRoot: Root) {
-      const { component, passedProps } = this.$props;
-      const Component = makeReactComponent(component);
+      const { passedProps } = this.$props;
       const children = this.$slots.default !== undefined ? { children: this.$slots.default } : {};
 
       // Bind `@click` to `onClick`, `@submit` to `onSubmit`, ...
@@ -56,15 +57,20 @@ export const ReactWrapper = defineComponent({
         ])
       );
 
-      reactRoot.render(<Component {...passedProps} {...children} {...this.$attrs} {...onEvents} />);
+      reactRoot.render(
+        <this.Component {...passedProps} {...children} {...this.$attrs} {...onEvents} />
+      );
     },
   },
   updated() {
     this.mountReactComponent(this.reactRoot);
   },
   watch: {
     $props: {
-      handler() {
+      handler(newProps, oldProps) {
+        if (oldProps.component !== newProps.component) {
+          this.Component = makeReactComponent(newProps.component);
+        }
         this.mountReactComponent(this.reactRoot);
       },
       deep: true,

diff --git a/src/wrappers/Vue.tsx b/src/wrappers/Vue.tsx
@@ -56,10 +56,12 @@ export const VueWrapper = function VueWrapper<P>({
   const vueInstance = useRef<Vue | null>(null);
   const childrenRef = useRef<ReactNode | undefined>();
   const listenersRef = useRef<Record<string, any> | undefined>(on);
+  const componentRef = useRef<any>(component);
 
   useEffect(() => {
     childrenRef.current = children;
     listenersRef.current = on;
+    componentRef.current = component;
 
     if (vueInstance.current) {
       Object.assign(vueInstance.current.$data, props);
@@ -69,6 +71,7 @@ export const VueWrapper = function VueWrapper<P>({
 
   useEffect(() => {
     const el = rootEl.current;
+    componentRef.current = component;
 
     if (el) {
       const instance = (vueInstance.current = new Vue({
@@ -78,7 +81,7 @@ export const VueWrapper = function VueWrapper<P>({
         render(createElement) {
           return createElement('div', { directives: [{ name: 'vue-element' }] }, [
             createElement(
-              VUE_COMPONENT_NAME,
+              componentRef.current,
               {
                 props: this.$data,
                 on: listenersRef.current,
@@ -87,8 +90,12 @@ export const VueWrapper = function VueWrapper<P>({
             ),
           ]);
         },
+        computed: {
+          Component() {
+            return componentRef.current;
+          },
+        },
         components: {
-          [VUE_COMPONENT_NAME]: component,
           'revue-internal-react-wrapper': ReactWrapper,
         },
         ...$rootVariables,