Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign upSupport (or document non-support) for Fragments #946
Comments
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
+ #929. I might be working on something. In the meantime, it's impossible to really fall back to anything other than inserting a You can "patch" fragments by setting Babel's "plugins": [
["transform-react-jsx", {
"pragma": "h",
"pragmaFrag": "\"span\""
}]
] |
This comment has been minimized.
This comment has been minimized.
|
They introduces < Fragment > component also. In some cases (e.g. old eslint rules) its more preferrable... |
This comment has been minimized.
This comment has been minimized.
|
If you want to use Fragment faked out for now, just do this: React.Fragment = 'x-fragment'; |
This comment has been minimized.
This comment has been minimized.
|
Where would one put that? |
This comment has been minimized.
This comment has been minimized.
|
@CaptainN I guess in index.js or something similar. |
preact is good, but * have not fixed yet? too late... preactjs/preact#915 * want to use JSX Fragments preactjs/preact#946 @developit It's on the ToDo list, but extremely difficult given Preact's current design.
This comment has been minimized.
This comment has been minimized.
|
Is lack of support for Would reassigning
|
This comment has been minimized.
This comment has been minimized.
|
@developit any estimate on this feature? |
This comment has been minimized.
This comment has been minimized.
|
What is the status of this @developit ? or can this be supported in preact-compat? |
This comment has been minimized.
This comment has been minimized.
|
Sorry for the radio silence! Right now we just have the hack I posted. Fragment support requires a complete re-architecture of Preact, which I've been working on. I will be making that work public soon. |
This comment has been minimized.
This comment has been minimized.
|
@developit Any chance to help out with that? I'd love to get involved |
This comment has been minimized.
This comment has been minimized.
|
@marvinhagemeister I just added you as a contributor here. Ping me on slack! |
This comment has been minimized.
This comment has been minimized.
|
Just got contributor access and went through a few minor PRs to get started. Implementing Before we can tackle it there are a few tasks, which will make adding them much easier:
I'm currently working on the first to and hopefully we can tackle point 3 soon |
This comment has been minimized.
This comment has been minimized.
|
@marvinhagemeister nice work! but I personally feel that we could skip 2. for this fix if possible. I really hope that this fix could be in place before babel@7 enters the playing field, since it's still in beta |
This comment has been minimized.
This comment has been minimized.
|
I concur with @phun-ky. In my projects we're not using React.Fragment often, but only sporadically where it aids in getting a simpler (flex) layout (ie. preventing extra wrapping). In those few instances, using |
This comment has been minimized.
This comment has been minimized.
|
Nice one @marvinhagemeister. +1 on bypassing point 2. It's not a showstopper after a bit of destructuring.
|
This comment has been minimized.
This comment has been minimized.
|
I guess I should have phrased the task list differently. Of course both 1. + 2. are not hard requirements to add support for |
This comment has been minimized.
This comment has been minimized.
|
@marvinhagemeister what’s the progress on this? Is there any way I can help out? |
This comment has been minimized.
This comment has been minimized.
|
@georgiemathews We do have Fragments working in a private branch, but we haven't had the time to make it work with hydration yet. |
This comment has been minimized.
This comment has been minimized.
|
@marvinhagemeister pretty excited for this - when do you think this will merge? |
This comment has been minimized.
This comment has been minimized.
|
@prakashsanker Progress can be tracked here: #1080 |
This comment has been minimized.
This comment has been minimized.
|
I'm able to achieve the desired effect by returning an array of elements. Here's a simple example of an HTML definition list: export default class Glossary extends Component {
state = {
glossary: [
{term: 'HTML', description: 'Hypertext Markup Language'},
{term: 'JS', description: 'JavaScript'},
{term: 'CSS', description: 'Cascading Style Sheet'}
]
};
render({ }, { glossary }) {
return (
<dl>
{ glossary.map( g => (
[ <dt>{g.term}</dt>, <dd>{g.description}</dd> ] // Here is the magic
)) }
</dl>
);
}
}HTML output: <dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl> |
This comment has been minimized.
This comment has been minimized.
|
@andrewkesper that works if you are inside a JSX.Element. What fragments explicitly allow is something else: returning "an array" directly from |
This comment has been minimized.
This comment has been minimized.
|
In React it seems we can make our own Fragment component like this: import React from 'react'
const Fragment = ({ children }) => React.Children.toArray(children)
export default FragmentCould the same thing be done with Preact? |
This comment has been minimized.
This comment has been minimized.
|
No, current preact expects a DOM node per vnode. This is not true for Fragments where the whole point of them is to not render anything into the DOM. So this is not easily doable (if at all) with the current architecture. That said we have merged the PR for Fragments into our development repo last week. Fragments will be part of the next major release It is not available to the public yet and we don't have a release estimate for now. It's progressing nicely and we are currently working through an ever shrinking number of failing test cases and ensuring that all known bugs in the next version are fixed. |
This comment has been minimized.
This comment has been minimized.
|
Hi, I know this is late, but I just wanted to share a possible temporary solution until Fragments are included. At least this has worked for me... function ListItems() {
return ([
<li></li>,
<li></li>
])
}
class List extends Component {
...
render() {
return (
...
<ListItems />
...
)
}
}The class List extends Component {
...
render() {
return (
...
{ ListItems() }
...
)
}
}It will work as expected. Hope that helps someone! |
This comment has been minimized.
This comment has been minimized.
|
@marvinhagemeister do you know when the new version of Preact with Fragments will be released? |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
This workaround is closer to React.Fragment and will keep your project compatible with React:
|
This comment has been minimized.
This comment has been minimized.
|
There's a bug in preact witch will prevent the rendering of the remaining parts of an children-arrays, if they contain a null value. |
This comment has been minimized.
This comment has been minimized.
|
@andidevi Do you have a simple test-case or snippet that we can use to reproduce the issue you are experiencing? |
This comment has been minimized.
This comment has been minimized.
|
So... What's the current status on this? I am currently looking at which library to choose - and I'd rather choose Preact, due to it's size. |
This comment has been minimized.
This comment has been minimized.
|
We're getting close to a release, but as with everything the last few percents are the hardest. We basically have 1 bug left and need to get |
This comment has been minimized.
This comment has been minimized.
|
Very excited about this :) |
This comment has been minimized.
This comment has been minimized.
|
I've created a small babel plugin to add support for React.Fragment. What it does is simply to remove the React.Fragment element. I've got it working with |
This comment has been minimized.
This comment has been minimized.
|
Fragments are implemented in #1302 (will be available in an alpha release pretty soon) |
This comment has been minimized.
This comment has been minimized.
|
Any idea when this will be out of alpha? |
This comment has been minimized.
This comment has been minimized.
|
@andyfurniss4 At this point we can't give a specific timeframe on when we'll be out of alpha. We'll likely move to beta when |
This comment has been minimized.
This comment has been minimized.
|
We have a project written in Preact that is referencing a component from another library (written with React 16) that does not render at all on first render (it will appear if I force a rerender). There is no error or stacktrace.
Is this a known issue with Preact X? (which we are now on! |
This comment has been minimized.
This comment has been minimized.
|
@jessicabyrne The issue you are describing may not be related at all to |
This comment has been minimized.
This comment has been minimized.
|
@marvinhagemeister I'm convinced it's to do with |

reactjs/reactjs.org#345
React is adding a top-level React.Fragment export that transpiles to JSX as:
Would Preact be able to support fragments or provide some type of fallback?