Skip to content
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.

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

Fragments? #76

Open
xluk9 opened this issue Sep 19, 2018 · 7 comments
Open

Fragments? #76

xluk9 opened this issue Sep 19, 2018 · 7 comments

Comments

@xluk9
Copy link

xluk9 commented Sep 19, 2018

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?

@adamhaile
Copy link
Owner

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!

@xluk9
Copy link
Author

xluk9 commented Sep 21, 2018

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") } ) )

@adamhaile
Copy link
Owner

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?

@derekhawker
Copy link

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.

@xluk9
Copy link
Author

xluk9 commented Sep 22, 2018

It works, strange... I had to remove the compiled file main.js and recompile it.

@Qix-
Copy link
Contributor

Qix- commented May 9, 2020

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>
);

@Qix-
Copy link
Contributor

Qix- commented May 10, 2021

Deleted my comment about this being closeable - Surplus should definitely support the <>...</> syntax :)

I might take a whack at this.

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

No branches or pull requests

4 participants