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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants