paltform-browser's render function could handle entire document
#44
Comments
|
I just wrote in the next issue why document is not supported. Because besides our application, there are other sources that can influence the DOM and we do not control these sources. |
|
I mean something like that. |
This is a very good point. I think a possible solution to this problem, besides the workaround shown in the dark docs, would probably be to mark server-rendered elements with adjacent comments (inspired by qwik), or with element attributes, and make the hydration process ignore non-marked elements. |
|
It seems to me that a good solution is one that does not require writing any code and still works flawlessly. I came to this solution: splitting the code into Page (root HTML) and App. In this case, the App is inserted into a Page of type <Page>
<App />
</Page>As a result, we get full SSR generation, but at the same time we hydrate only the App. An example is here |
Yes indeed this technique works perfectly. But if hydrateRoot can accept the whole document, without adding comments/attributes and adding more complexity to the hydration process, it would be nice. |
|
For me, this problem can only lie in the plane of beauty, but not functionality. Yes, it would be nice to be able to work with |
|
I added this import { h, component, useState } from '@dark-engine/core';
import { hydrateRoot } from '@dark-engine/platform-browser';
const App = component(() => {
const [count, setCount] = useState(0);
return (
<html lang='en'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta http-equiv='X-UA-Compatible' content='ie=edge' />
<title>Test: {count}</title>
</head>
<body>
<div id='root'>
<div>{count}</div>
<button onClick={() => setCount(x => x + 1)}>click</button>
</div>
<script src='./build.js' defer></script>
</body>
</html>
);
});
hydrateRoot(document, <App />);Looks very strange 🙃 |
paltform-browser'srenderfunction rejectsdocumentas parameter becausedocument instanceof Elementevaluates tofalse.A few small changes should allow the
renderfunction to correctly handle the entire document as root.The text was updated successfully, but these errors were encountered: