Hyperapp: Lazy components cannot return arrays

[infinnie]

var h = hyperapp.h, app = hyperapp.app;
/*@jsx h*/
var SomeComponent = function () {
    return function () {
        return [<p>Hello</p>];
    };
};

app({}, {}, function () {
    return (<div oncreate={function (e) {
        setTimeout(function () { alert(e.innerHTML); }, 0); // <undefined></undefined> would be alerted.
    }}>
        <SomeComponent/>
    </div>);
}, document.getElementById("app"));

See JSFiddle: https://jsfiddle.net/vmvaywrr/2/

[infinnie]

Lazy components being an immensely helpful thing in Hyperapp 1.x, I wish that this could some day be fixed.

[jorgebucaran]

Correct. By the way, lazy components will be removed in 2.0.

[infinnie]

But I suggest that 1.x users be respected.

[jorgebucaran]

I won't publish a 1.x without lazy components, no worries. 🙏

[infinnie]

The problem that top-level components cannot be arrays could theoretically, in my opinion, be solved with the same fix as stated here.
See also #362 #687

[jorgebucaran]

@infinnie It would still not solve the problem of returning null from lazy components. Currently, we just turn null and undefined to "" for lazy components, but that's a poor hack and one of the reasons I want to remove lazy components. It's too troublesome to diff null nodes after the old and new node lists are computed.

EDIT: By the way, I am not saying there's no solution, certainly there is more than one way to do this, we can imagine, but it has never been my intention to add every possible feature (solve every single problem with) to Hyperapp as that would trade elegance, simplicity, a small code base, and other subjective points that I highly value about Hyperapp.

[infinnie]

Maybe we need something like https://gist.github.com/infinnie/2d0a5e93d325409cd7f56db45499de2b?

[jorgebucaran]

For arrays, yeah, sorry I mixed two different things: null returning subviews and array returning components or subviews.

After 2.0, and after I've sorted other priorities I'll experiment again with diffing arrays/fragments using the DocumentFragment API.

So, I am going to close in favor of https://github.com/hyperapp/hyperapp/issues/530

[infinnie]

684 now pretty solves this bug if merged.

[infinnie]

(and it actually only takes 3 lines to fix it.)

[jorgebucaran]

@infinnie Can you link me to the diff, please?

[infinnie]

Yes, https://github.com/hyperapp/hyperapp/pull/684/commits/981ed354681d1d07feec2273447962d6d53d7cb8 for the diff and https://github.com/hyperapp/hyperapp/pull/684/commits/f6c3322e0f6b3b61ee3d8ecf32abdbbe8dae17df for the test.

[atomiks]

Array.isArray() is ES5, supported by IE9

[infinnie]

@atomiks Yes: https://docs.microsoft.com/en-us/scripting/javascript/reference/array-isarray-function-javascript

[infinnie]

However my fix poses another constraint that the top-level view cannot return null but has to return an empty string in order to not render anything: https://github.com/infinnie/hyperapp/commit/d07f2e152b29b901575bbd53ce28cab4dfbc43f7

[infinnie]

https://github.com/hyperapp/hyperapp/issues/695#issuecomment-391595024 fixed in both #684 & #697