surplus
surplus copied to clipboard
adamhaile
Fragments?
Hello, really nice library. I was just playing around and realized that fragments are not supported. Is there any way to implement views without a parent node?
Unlike React, Surplus supports returning arrays just fine. So instead of:
return <>
<div/>
<div/>
<div>
</>;
... you can do ...
return [
<div/>,
<div/>,
<div>
];
I've got on my list to support the fragment syntax as syntactic sugar for the array version but haven't hit that yet. Hope that helps!
Thank you, that was fast! I was trying with arrays, but I can't make it work. I keep getting content must be Node, stringable, or array of same. I was also looking at surplus-realworld repo to take inspiration. Anyway, this is my index.html file
<html>
<head>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
and this is main.tsx
import S from 's-js';
import * as Surplus from 'surplus';
import data from 'surplus-mixin-data';
var Name = (name) => [<div>{name}</div>, <div>{name}</div>]
var Page = ( { children }) => <div>{children}</div>
document.getElementById("app").appendChild( Page( { children : Name("Jelly") } ) )
Strange, that code looks fine. I tried throwing it into a CodePen, and it appears to run there: https://codepen.io/adamhaile/pen/RYdZXO?editors=1000 .
Maybe something with your build environment? Is it possible to zip up your project (maybe minus node_modules) and attach?
Don't mean to pile on, but I added that code sample to an open project (webpack, typescript) and it worked for me, too. Outputs a div with two inner divs that have the text "Jelly".
Might be helpful to paste the content of main.js along with the project.
It works, strange... I had to remove the compiled file main.js and recompile it.
By the way, if you want an actual element instead of using arrays, you can simply make a stub element:
const Fragment = ({children}) => children;
const MyComponent = () => (
<Fragment>
<div>Hello</div>
<div>World</div>
</Fragment>
);
Deleted my comment about this being closeable - Surplus should definitely support the <>...</> syntax :)
I might take a whack at this.