anthonyshort / deku

Render interfaces using pure functions and virtual DOM
https://github.com/anthonyshort/deku/tree/master/docs
3.41k stars 130 forks source link

Render is broken in a seemingly massive way.. perhaps I am missing something. #401

Open bbarr opened 8 years ago

bbarr commented 8 years ago

I have a component:

export default {

  render({ context }) {

    console.log(context.imports.pending)

    return (
      <div id="dashboard-page-component">
        <button onClick={context.actions.logOut}>Log out</button> 
        <ImportList imports={context.imports} />

        { context.imports.pending ?
          <PendingImport pending={context.imports.pending} /> : null }

      </div>
    )
  }
}

Now, the problem is, I can get into a state in which context.imports.pending is false, and the vnode #empty is correctly returned, instead of <PendingImport .../>.. but the UI is still showing the <PendingImport />

After a morning of frustration at the fact that onChange is not the same as React's, and this fact is undocumented, I am nearing the end of my patience with Deku.. Please don't make me go back to React! This is so promising! Is there something I am missing? Some obvious thing that can go wrong in the render cycle to cause the virtual-dom to not be represented in HTML? There are no errors.

anthonyshort commented 8 years ago

Can you provide a broken test case in a PR? It will be much quicker to fix this if we can get it replicated in the tests.

Just add it to this file and run npm test.

bbarr commented 8 years ago

Sure! I can still do this, but in the meantime, I discovered that I had a bit of code in an onCreate call that synchronously triggered a rerender cycle. When I make it async, the issue goes away. If this is not recognized and expected behavior, I will open a PR as you requested.

--EDIT: Regardless of whether this is understood or expected behavior, it should definitely throw or warn, and be otherwise documented, because that was a pretty confusing effect!

LoganBarnett commented 8 years ago

I had a similar issue where nothing seemed to happen. I stumbled across #156, which suggests putting the head tag below body in the html. This fixed the issue for me.

Is there an error being swallowed in the render process somewhere? An error message and/or documentation about timing/order would be super awesome :)