fix: force update on forwarded slots (#33)

packages/babel-plugin-jsx/src/transform-vue-jsx.ts

@@ -354,7 +354,17 @@ const getChildren = (
         return transformedText;
       }
       if (path.isJSXExpressionContainer()) {
-        return transformJSXExpressionContainer(path);
+        const expression = transformJSXExpressionContainer(path);
+
+        if (t.isIdentifier(expression)) {
+          const { name } = expression as t.Identifier;
+          const { referencePaths } = path.scope.getBinding(name) || {};
+          referencePaths?.forEach(referencePath => {
+            walksScope(referencePath, name);
+          })
+        }
+        
+        return expression;
       }
       if (t.isJSXSpreadChild(path)) {
         return transformJSXSpreadChild(path as NodePath<t.JSXSpreadChild>);

packages/babel-plugin-jsx/src/utils.ts

@@ -171,7 +171,9 @@ const transformJSXSpreadChild = (
 
 const walksScope = (path: NodePath, name: string) => {
   if (path.scope.hasBinding(name) && path.parentPath) {
+    if (t.isJSXElement(path.parentPath.node)) {
       path.parentPath.setData('optimize', false);
+    }
     walksScope(path.parentPath, name);
   }
 }

packages/babel-plugin-jsx/test/index.test.js

@@ -353,8 +353,9 @@ describe('PatchFlags', () => {
 
     expect(wrapper.classes().sort()).toEqual(['b', 'static'].sort());
   });
+});
 
-  test('variables outside slot', async () => {
+describe('variables outside slots', async () => {
   const A = {
     render() {
       return this.$slots.default();
@@ -363,6 +364,7 @@ describe('PatchFlags', () => {
 
   A.inheritAttrs = false;
 
+  test('internal', async () => {
     const wrapper = mount({
       data() {
         return {
@@ -390,7 +392,39 @@ describe('PatchFlags', () => {
     });
 
     expect(wrapper.get('#textarea').element.innerHTML).toBe('0');
+    await wrapper.get('#button').trigger('click');
+    expect(wrapper.get('#textarea').element.innerHTML).toBe('1');
+  });
 
+  test('forwarded', async () => {
+    const wrapper = mount({
+      data() {
+        return {
+          val: 0,
+        };
+      },
+      methods: {
+        inc() {
+          this.val += 1;
+        },
+      },
+      render() {
+        const attrs = {
+          innerHTML: this.val,
+        };
+        const textarea = <textarea id="textarea" {...attrs} />;
+        return (
+          <A inc={this.inc}>
+            <div>
+              {textarea}
+            </div>
+            <button id="button" onClick={this.inc}>+1</button>
+          </A>
+        );
+      },
+    });
+
+    expect(wrapper.get('#textarea').element.innerHTML).toBe('0');
     await wrapper.get('#button').trigger('click');
     expect(wrapper.get('#textarea').element.innerHTML).toBe('1');
   });