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.

Sign up for GitHub

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

Jump to bottom

component including '<Provider>' (preact-redux) replaced while rendering with merge #296

Closed
csbun opened this issue Sep 8, 2016 · 7 comments
Closed

component including '<Provider>' (preact-redux) replaced while rendering with merge #296

csbun opened this issue Sep 8, 2016 · 7 comments
Labels
bug has fix
Milestone
6.1

Comments

@csbun
Copy link

csbun commented Sep 8, 2016 •
edited
Loading

This issue might related to #276 and #260 or might be an issue to preact-redux.

dependence:

  • redux@3.6.0
  • preact-render-to-string@3.0.7
  • preact@6.0.1
  • preact-redux@1.2.0

environment:

  • Chrome Version 52

Here is the example:

<body>
   <!-- render from server -->
   <div id="container">${ssrHtml}</div>
</body>
class ChildComponent extends Component {
  render() {
    return <div>child</div>;
  }
}
const Child = connect(reducer)(ChildComponent);

class App extends Component {
  render() {
    return (<div id="my-app">
      <Provider store={store}>
        <Child />
      </Provider>
    </div>);
  }
}
// delay 7s to see what happen while client-side rendering with merge
setTimeout(function() {
  render(
    <App />,
    document.getElementById('container'),
    document.getElementById('my-app')
  );
}, 7000);

While client-side rendering with merge, <App> compared with DOM #my-app:

<!-- <App> -->                  | <!-- #my-app -->
<div id="my-app">               | <div id="my-app">
  <Provider store={store}>      |   <div>child</div>   <!-- NOT match -->
    <div>child</div>            |
  </Provider>                   |
</div>                          | </div>

Here is what we see in Chrome DevTool 7s after server rendering:
image

Full example on CodePen. Much clear on the github-page (not found image request twice).
@developit
Copy link
Member

@csbun Yikes! This is due to how Preact tracks ownership of high order children. It looks like there might be a case here for switching to the innermost child owning the generated DOM.

@developit
Copy link
Member

I've got a fix! 💃

@csbun
Copy link
Author

csbun commented Sep 12, 2016

Should I update preact or preact-redux?

@developit
Copy link
Member

Not yet, still testing.

@developit developit mentioned this issue Sep 22, 2016
Closed
@developit developit added this to the 6.1 milestone Sep 27, 2016
@developit
Copy link
Member

The latest raft of updates (about to be released as 6.1) fix this!

@developit
Copy link
Member

Fix released in 6.1! https://codepen.io/developit/pen/ozZYPK

@csbun
Copy link
Author

csbun commented Sep 30, 2016 •
edited
Loading

Great! 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug has fix
Projects
None yet
Milestone
6.1
Development

No branches or pull requests
2 participants
@developit @csbun