From 62a01b012ffb0088d3640bfbf1e94c0291efef69 Mon Sep 17 00:00:00 2001
From: Hiroki Osame <hiroki.osame@gmail.com>
Date: Wed, 25 Nov 2020 04:19:53 -0500
Subject: [PATCH] fix(to-vue-3): reactive prop w/ event listener

---
 src/to-vue-3.js                          | 31 ++++++++++++------------
 test/__snapshots__/to-vue-3.spec.js.snap |  2 ++
 test/to-vue-3.spec.js                    |  8 +++++-
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/to-vue-3.js b/src/to-vue-3.js
index 5ea3903..fcfa5ae 100644
--- a/src/to-vue-3.js
+++ b/src/to-vue-3.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import {createApp, shallowReactive, h} from 'vue3';
-import {vue3ProxyNode, privateState} from './utils';
+import {vue3ProxyNode} from './utils';
 
 const hyphenateRE = /\B([A-Z])/g;
 const hyphenate = string => string.replace(hyphenateRE, '-$1').toLowerCase();
@@ -20,6 +20,7 @@ function getAttrsAndListeners($attrs) {
 		class: undefined,
 		on: {},
 		attrs: {},
+		props: {},
 	};
 	const {on, attrs} = data;
 
@@ -107,10 +108,7 @@ const isConfigurableProperty = {configurable: true};
 
 const vue3WrapperBase = {
 	created() {
-		this._[privateState] = Vue.observable({
-			data: null,
-			slots: null,
-		});
+		this.v2 = undefined;
 	},
 
 	mounted() {
@@ -126,13 +124,15 @@ const vue3WrapperBase = {
 				},
 			}),
 
-			render: h => h(
-				this.$options.component,
-				{
-					...this._[privateState].data,
-					scopedSlots: transformSlots(h, this),
-				},
-			),
+			render(h) {
+				return h(
+					vm.$options.component,
+					{
+						...getAttrsAndListeners(vm.$attrs),
+						scopedSlots: transformSlots(h, vm),
+					},
+				);
+			},
 
 			mounted() {
 				// Rewrite Vue3 vnodes to reference Vue 2 element
@@ -167,9 +167,10 @@ const vue3WrapperBase = {
 	},
 
 	render() {
-		const data = getAttrsAndListeners(this.$attrs);
-		this._[privateState].data = data;
-		this._[privateState].slots = this.$slots;
+		if (this.v2) {
+			this.v2.$forceUpdate();
+		}
+
 		return h('div');
 	},
 };
diff --git a/test/__snapshots__/to-vue-3.spec.js.snap b/test/__snapshots__/to-vue-3.spec.js.snap
index c00a396..e7b257a 100644
--- a/test/__snapshots__/to-vue-3.spec.js.snap
+++ b/test/__snapshots__/to-vue-3.spec.js.snap
@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Vue 2 component in a Vue 3 app event-listeners 1`] = `"<button>I'm Vue 2 123</button>"`;
+
 exports[`Vue 2 component in a Vue 3 app reactivity 1`] = `
 "<div> I'm Vue 3 0 <article title=\\"Attribute 0\\">
 					I'm Vue 2
diff --git a/test/to-vue-3.spec.js b/test/to-vue-3.spec.js
index b84c7dc..3bcd914 100644
--- a/test/to-vue-3.spec.js
+++ b/test/to-vue-3.spec.js
@@ -187,12 +187,14 @@ describe('Vue 2 component in a Vue 3 app', () => {
 		const customEventHandler = jest.fn();
 
 		const Vue2Component = {
-			template: '<button v-on="$listeners" @click="$emit(\'custom-event\')">I\'m Vue 2</button>',
+			props: ['someProp'],
+			template: '<button v-on="$listeners" @click="$emit(\'custom-event\')">I\'m Vue 2 {{ someProp }}</button>',
 		};
 
 		const app = mount({
 			template: outdent`
 				<vue-2-component
+					some-prop="123"
 					@click.capture.once="clickHandler"
 					@custom-event="customEventHandler"
 				>
@@ -210,6 +212,10 @@ describe('Vue 2 component in a Vue 3 app', () => {
 			},
 		});
 
+		await nextTick();
+
+		expect(app.html()).toMatchSnapshot();
+
 		const button = app.vm.$el;
 
 		button.click();