diff --git a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts b/packages/babel-plugin-jsx/src/transform-vue-jsx.ts index a976ae4..1645027 100644 --- a/packages/babel-plugin-jsx/src/transform-vue-jsx.ts +++ b/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); diff --git a/packages/babel-plugin-jsx/src/utils.ts b/packages/babel-plugin-jsx/src/utils.ts index 75ed603..325ae23 100644 --- a/packages/babel-plugin-jsx/src/utils.ts +++ b/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) { - path.parentPath.setData('optimize', false); + if (t.isJSXElement(path.parentPath.node)) { + path.parentPath.setData('optimize', false); + } walksScope(path.parentPath, name); } } diff --git a/packages/babel-plugin-jsx/test/index.test.js b/packages/babel-plugin-jsx/test/index.test.js index 36cbd4e..3c7cb3a 100644 --- a/packages/babel-plugin-jsx/test/index.test.js +++ b/packages/babel-plugin-jsx/test/index.test.js @@ -353,16 +353,18 @@ describe('PatchFlags', () => { expect(wrapper.classes().sort()).toEqual(['b', 'static'].sort()); }); +}); - test('variables outside slot', async () => { - const A = { - render() { - return this.$slots.default(); - }, - }; +describe('variables outside slots', async () => { + const A = { + render() { + return this.$slots.default(); + }, + }; - A.inheritAttrs = false; + 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 =