Gathering @developit's suspense hydration work - #2259
Conversation
JoviDeCroock
left a comment
JoviDeCroock
left a comment
There was a problem hiding this comment.
Let's try and get some tests for this, have we tested this in a real-world scenario? I can't really see any flaws in this at the moment, so really amazing job here 🎉
prateekbh
changed the title
prateekbh
changed the title
|
I added the test case for out scenerio. Use case 1<div id="test">
<Suspense>
<Component />
</Suspense>
<p>Hello foo</p>
</div>This is our current use case where <div id="test">
<p>Component</p>
<p>Hello foo</p>
</div>is the markup while Use Case 2<div id="test">
<Suspense fallback={<p>fallback</p>}>
<Component />
</Suspense>
<p>Hello foo</p>
</div>Now since the markup is not being deleted the html would be <div id="test">
<p>fallback</p>
<p>Component</p>
<p>Hello foo</p>
</div>This is where the problem is, both fallback and the actual markup are shown on the screen. Since most |
|
Either our solution should satisfy both cases or the behavior we're targeting with this PR should be achievable with some hook but should not be the default one. |
prateekbh
changed the title
|
|
prateekbh
changed the title
|
Ok this is now fixed I feel. If nothing is pre-rendered in place of |
…actjs/preact into prateekbh/suspense-hydration
|
Size Change: +207 B (0%) Total Size: 38.5 kB
ℹ️ View Unchanged
|
|
This looks promising and I can add another use case: I’m using Suspense without |
|
@squidfunk Avoiding the fetch call seems difficult - how would you get the data loaded otherwise? If you're just looking for a way to indefinitely hold off rendering part of your app, this should likely give you that option. All you have to do is throw a pending Promise: const data = fetch('/data.json')
.then(r => r.json())
.then(value => data.value = value);
function MyComponent() {
// don't render this subtree until we have data
if (!data.value) throw data;
return <pre>{JSON.stringify(data.value,0,2)}</pre>
}
// somewhere up the tree:
class MyApp extends Component {
componentDidCatch(err) {
if (err instanceof Promise) {
err.then(() => this.setState({})); // or forceUpdate
}
}
} |
|
@developit thanks for your response! Maybe I'm missing something but I may have found a way making things work. What I want to do is: separate article content in a Preact application (i.e. blog) from application logic. I'm using Sorry for hi-jacking this thread but I though it was somehow related. Happy to move the discussion somewhere else if necessary. |
|
@squidfunk technically you could create a Virtual DOM tree from the existing DOM tree. There's actually a module that does that exact thing over in preact-markup: import toVdom from 'preact-markup/src/to-vdom.js';
let cached;
function AbsorbDom() {
if (cached) return cached;
return cached = toVdom(
document.querySelector('article'), // your article's root element
vnode => {}, // optional modify the created Virtual DOM elements
h, // preact's h()
{ trim: false } // preserve whitespace
);
}You're right about this being slightly off-topic - maybe better to migrate to Slack? |
|
FYI, one of my recent completed PRs conflicted with this one so I fixed for ya |
|
rebasing when it's ready makes more sense to me than merging master into it all the time, but idk 🤷♀️ |
|
we discovered that there were false passing tests and that this approach doesn't work. @developit is working on an alternate approach in #2290 and #2291. |
10 participants
Uh oh!
There was an error while loading. Please reload this page.