Skip to content

Conversation

beicause
Copy link

🤔 What is the nature of this change?

  • New feature
  • Fix bug
  • Style optimization
  • Code style optimization
  • Performance optimization
  • Build optimization
  • Refactor code or style
  • Test related
  • Other

🔗 Related Issue

vitejs/vite#5064

由于vue模板编译已经导入_Fragment,jsx插件对插槽的判断会出现错误,导致fragment的内容转换为插槽,从而无法显示
例如编译代码:

<script lang='tsx' setup> import { Fragment } from 'vue' const Root1 = <>root1</> const Root2 = <Fragment>root2</Fragment> </script> <template> <Root1/> <Root2/> </template> 

结果:

import { createVNode as _createVNode2, createTextVNode as _createTextVNode, Fragment as _Fragment2 } from "vue"; import { defineComponent as _defineComponent } from 'vue'; import { unref as _unref, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"; import { Fragment } from 'vue'; export default /*#__PURE__*/_defineComponent({ setup(__props) { // 出错,root1将不会显示 const Root1 = _createVNode2(_Fragment2, null, { default: () => [_createTextVNode("root1")] }); // root2转换正确 const Root2 = _createVNode2(_Fragment2, null, [_createTextVNode("root2")]); return (_ctx, _cache) => { return _openBlock(), _createElementBlock(_Fragment, null, [_createVNode(_unref(Root1)), _createVNode(_unref(Root2))], 64); }; } }); 

💡 Background or solution

用正则优化对fragment的判定

📝 Changelog

Language Changelog
🇺🇸 English optimize shouldTransformedToSlots judgement
🇨🇳 Chinese 优化对片段(Fragment)插槽转换判定

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed
@Amour1688
Copy link
Member

单测补一下

expect(wrapper.html()).toBe('<div>123</div><div>456</div>');
});

test('_Fragment already imported', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

packages/babel-plugin-jsx/test/snapshot.test.ts 整到这个文件里面吧

Copy link
Author

@beicause beicause Oct 13, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

原来可以这样。

const fragmentTests = [{
name: '_Fragment already imported',
from: `
import _Fragment from 'example'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import _Fragment from 'example'
import { Fragment } from 'vue'
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这样没改前也能通过测试,因为_Fragment是编译SFC多根节点模板时生成的

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

import { Fragment as _Fragment } from 'vue' 这样吧

@Amour1688 Amour1688 merged commit 35780fd into vuejs:dev Oct 15, 2021
@beicause beicause deleted the fix-fragment-judge branch October 15, 2021 04:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants