-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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
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. |
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
'srender
function rejectsdocument
as parameter becausedocument instanceof Element
evaluates tofalse
.A few small changes should allow the
render
function to correctly handle the entire document as root.The text was updated successfully, but these errors were encountered: