Hyperapp: What if a certain element gets changed when the component that generates it changes, but the oncreate callback does not get called?

[infinnie]

Say:

var Component = function () {
    return <div oncreate={
            function () { /* do something that never gets called? */ }
        }>Some text</div>;
};
app({
    root: document.body,
    view: function (state, actions) {
        return state.condition ? <div class="clickable" onclick={actions.change} /> : <Component />;
    },
    state: {
        condition: true
    },
    actions: {
        change: function () {
            return {
                condition: false
            };
        }
    }
});

Would the oncreate callback ever get called?

[andyrj]

I would say use onupdate here... But that seems like a contrived example, if some one is going to do this, and not have a different tag or add a key, to cause oncreate to fire, I think it's on them really. Just my 2 cents. I suppose we could special case oldNode not having oncreate, and node having it in patch though.

[jorgebucaran]

@infi See the keys gotchas from the docs and let me know if that helps.

Also, from the keys docs:

Top-Level Nodes
Keys are not registered on the top-level node of your view. If you are toggling the top-level view, and you must use keys, wrap them in an unchanging node.

[infinnie]

@JorgeBucaran What if a solution to #362 just supports keys?!

[jorgebucaran]

@infinnie Do you want to give it a shot?

[infinnie]

Maybe it would then be required that you reopen #366.

[jorgebucaran]

@infinnie My rationale for closing that issue hasn't changed.

With regards to your view, why don't you just rewrite it like this?

function view(state, actions) {
  return (
    <main>
      {state.condition ? (
        <div class="clickable" onclick={actions.change} />
      ) : (
        <Component />
      )}
    </main>
  )
}

[infinnie]

BTW: The example code in https://github.com/hyperapp/hyperapp/blob/master/docs/keys.md mutates the argument passed in.

[jorgebucaran]

@infinnie Which one? There are two.

[jorgebucaran]

@infinnie Ah, sort? Whoops.

[infinnie]

However, it is not always possible or desirable to wrap them in (yet) another DOM layer. What if the root were a list, a table, or a flex?

[jorgebucaran]

@infinnie What if the root were a list, a table, or a flex?

I am not sure if this is exact answer you were looking for, but whatever your application's root element may be, you can always do this:

<main>
  <!-- Put whatever you want here. -->
</main>

And you can always return arrays from components.