Skip to content

fix(jsx-directive): use <Fragment> instead of <> to support key #954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(jsx-directive): use <Fragment> instead of <> to support key #954

wants to merge 2 commits into from
+48 −2

Conversation

zhiyuanzmj
Copy link
Member

@zhiyuanzmj zhiyuanzmj commented May 22, 2025 •
edited
Loading

Description

Before

<template v-for={i in 4} key={i}>{i}</template> 
// compile to
{__MACROS_renderList(4, (i) => < key={i}> // error
  {i}
</>)}

Before

<template v-for={i in 4} key={i}>{i}</template> 
// compile to
{__MACROS_renderList(4, (i) => <_Fragment key={i}>
  {i}
</_Fragment>)}

Linked Issues

Additional context

@bolt-new-by-stackblitz Bolt.new (by StackBlitz)
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@vercel Vercel
Copy link

vercel bot commented May 22, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
vue-macros ✅ Ready (Inspect) Visit Preview May 22, 2025 7:16pm

@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label May 22, 2025
zhiyuanzmj
zhiyuanzmj commented May 22, 2025
View reviewed changes
packages/jsx-directive/src/core/v-for.ts
/**
* https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/src/utils.ts#L37
*
* Because the __MACROS_Fragment tag is a component in vue-jsx, the children will be treated as a slot,
Copy link
Member Author

@zhiyuanzmj zhiyuanzmj May 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I'm not sure whether we should add a importFragmentHelperFn for v-for.
REPL

Copy link
Member Author

Choose a reason for hiding this comment

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

It should be resolved in vue-jsx, waiting the vuejs/babel-plugin-jsx#762 to merge.

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented May 22, 2025

Open in StackBlitz

@vue-macros/api

npm i https://pkg.pr.new/@vue-macros/api@954

@vue-macros/astro

npm i https://pkg.pr.new/@vue-macros/astro@954

@vue-macros/boolean-prop

npm i https://pkg.pr.new/@vue-macros/boolean-prop@954

@vue-macros/better-define

npm i https://pkg.pr.new/@vue-macros/better-define@954

@vue-macros/chain-call

npm i https://pkg.pr.new/@vue-macros/chain-call@954

@vue-macros/common

npm i https://pkg.pr.new/@vue-macros/common@954

@vue-macros/config

npm i https://pkg.pr.new/@vue-macros/config@954

@vue-macros/define-emit

npm i https://pkg.pr.new/@vue-macros/define-emit@954

@vue-macros/define-models

npm i https://pkg.pr.new/@vue-macros/define-models@954

unplugin-vue-define-options

npm i https://pkg.pr.new/unplugin-vue-define-options@954

@vue-macros/define-prop

npm i https://pkg.pr.new/@vue-macros/define-prop@954

@vue-macros/define-props

npm i https://pkg.pr.new/@vue-macros/define-props@954

@vue-macros/define-props-refs

npm i https://pkg.pr.new/@vue-macros/define-props-refs@954

@vue-macros/define-render

npm i https://pkg.pr.new/@vue-macros/define-render@954

@vue-macros/define-slots

npm i https://pkg.pr.new/@vue-macros/define-slots@954

@vue-macros/define-stylex

npm i https://pkg.pr.new/@vue-macros/define-stylex@954

@vue-macros/devtools

npm i https://pkg.pr.new/@vue-macros/devtools@954

@vue-macros/eslint-config

npm i https://pkg.pr.new/@vue-macros/eslint-config@954

@vue-macros/export-expose

npm i https://pkg.pr.new/@vue-macros/export-expose@954

@vue-macros/export-props

npm i https://pkg.pr.new/@vue-macros/export-props@954

@vue-macros/export-render

npm i https://pkg.pr.new/@vue-macros/export-render@954

@vue-macros/hoist-static

npm i https://pkg.pr.new/@vue-macros/hoist-static@954

@vue-macros/jsx-directive

npm i https://pkg.pr.new/@vue-macros/jsx-directive@954

vue-macros

npm i https://pkg.pr.new/vue-macros@954

@vue-macros/named-template

npm i https://pkg.pr.new/@vue-macros/named-template@954

@vue-macros/nuxt

npm i https://pkg.pr.new/@vue-macros/nuxt@954

@vue-macros/reactivity-transform

npm i https://pkg.pr.new/@vue-macros/reactivity-transform@954

@vue-macros/script-lang

npm i https://pkg.pr.new/@vue-macros/script-lang@954

@vue-macros/setup-block

npm i https://pkg.pr.new/@vue-macros/setup-block@954

@vue-macros/setup-component

npm i https://pkg.pr.new/@vue-macros/setup-component@954

@vue-macros/setup-sfc

npm i https://pkg.pr.new/@vue-macros/setup-sfc@954

@vue-macros/short-bind

npm i https://pkg.pr.new/@vue-macros/short-bind@954

@vue-macros/short-emits

npm i https://pkg.pr.new/@vue-macros/short-emits@954

@vue-macros/short-vmodel

npm i https://pkg.pr.new/@vue-macros/short-vmodel@954

@vue-macros/test-utils

npm i https://pkg.pr.new/@vue-macros/test-utils@954

@vue-macros/volar

npm i https://pkg.pr.new/@vue-macros/volar@954

commit: e3e81ff

@zhiyuanzmj zhiyuanzmj requested a review from sxzz May 23, 2025 11:53
@zhiyuanzmj zhiyuanzmj mentioned this pull request May 23, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sxzz sxzz Awaiting requested review from sxzz

Assignees
No one assigned
Labels
size:M This PR changes 30-99 lines, ignoring generated files.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@zhiyuanzmj