Support for components that return arrays

We often have use cases where our components need to return arrays, e.g.

var SomePageComponent = function (props) {
    props = props || {};
    return [<Header />,
        <SideNav />,
        <div class="panel panel--main">...</div>
    ];
};

However, it isn’t easy for us to really do so in HyperApp. I’ve written a polyfill for exactly that (using jQuery, along with other polyfill code for backward compatibility):

function patch(parent, element, oldNode, node, isSVG, nextSibling) {
    if ($.isArray(node)) {
        return $.map(node, function (t, i) {
            return patch(parent, element, i === node.length - 1 ? oldNode : null, t, isSVG, nextSibling);
        });
    }

    if ($.isArray(element)) {
        var remaining = element.slice(1);
        element = element[0];
        $(remaining).remove();
    }

    // original code ...
}

I do not quite know whether there would still be issues with components returning arrays.

Will HyperApp officially support that?

[zaceno]

@infinnie Ok yeah I see … that could probably work. It would get weird with keys though, but that may not be problem if the use cases don’t overlap.

I’d suggest making a PR, but I also understand you want to get a feel for how it would be received before putting in the work.

(If/when you do make a PR: don’t use jQuery or polyfills – one of Hyperapp’s key benefits is “no dependencies”)

[leeoniya]

in my experience, robust, optimal and fast dom reconciliation of fragments is non-trivial. i’d be interested to see what you guys come up with and how much code it adds.

https://github.com/developit/preact/pull/703#issuecomment-322791946