feat: update twind example
#178
Conversation
|
Hello, @MichaelDeBoey! i I checked the adjustments and update it! However, in the current twind example, the actual example does not work due to a bug caused by hydration mismatch. This seems to have been resolved in the next react version(18.3.0), and when tested with the actual react@next, react-dom@next version, i found that it actually worked. Therefore, I think it would be good to freeze this PR and merge it when the react version is updated. |
|
@Palbahngmiyine Did it work with current React version without my suggestions (so original PR)? |
|
It was my mistake, the original PR(without suggestions) was also found to be not working, I can change it to work with a slight fix (entry.client.tsx, entry.server.tsx needed) though. Apart from that, existing examples(current main branch) do not work properly, so I suggest a direction to open and modify a new PR with a working example implementation that adds entry.client.tsx, entry.server.tsx instead of the current PR. If you agree with the suggestion, I'll be able to work immediately, and below is the error stacktrace of the existing example(current main branch).
|
|
@Palbahngmiyine You can (force) push your changes in this PR as well if you want |
|
Thank you for your kind comment, and as I mentioned before, I fixed an issue where the existing example didn't work correctly. When the react version is updated, I'll create a new PR reflecting what is mentioned in #159 . Thank you! |
|
Hi @Palbahngmiyine! Are you still interested in getting this one merged? If so, please rebase onto latest |
MichaelDeBoey
added
the
needs-response
|
Hello, @MichaelDeBoey ! I hope this PR will be merged and I fixed the conflict with the main branch 😊. |
github-actions
bot
removed
the
needs-response
twind/app/entry.client.tsx
Outdated
| const hydrate = () => | ||
| startTransition(() => { | ||
| hydrateRoot( | ||
| document, | ||
| <StrictMode> | ||
| <RemixBrowser /> | ||
| </StrictMode> | ||
| ); | ||
| }); | ||
|
|
||
| if (typeof requestIdleCallback == "function") { | ||
| requestIdleCallback(hydrate); | ||
| } else { | ||
| // Safari doesn't support requestIdleCallback | ||
| // https://caniuse.com/requestidlecallback | ||
| setTimeout(hydrate, 1); | ||
| } |
There was a problem hiding this comment.
| const hydrate = () => | |
| startTransition(() => { | |
| hydrateRoot( | |
| document, | |
| <StrictMode> | |
| <RemixBrowser /> | |
| </StrictMode> | |
| ); | |
| }); | |
| if (typeof requestIdleCallback == "function") { | |
| requestIdleCallback(hydrate); | |
| } else { | |
| // Safari doesn't support requestIdleCallback | |
| // https://caniuse.com/requestidlecallback | |
| setTimeout(hydrate, 1); | |
| } | |
| startTransition(() => { | |
| hydrateRoot( | |
| document, | |
| <StrictMode> | |
| <RemixBrowser /> | |
| </StrictMode> | |
| ); | |
| }); |
twind/app/entry.client.tsx
Outdated
| import config from "../twind.config"; | ||
|
|
||
| install(config); |
There was a problem hiding this comment.
Please put this in root.tsx again
twind/app/entry.server.tsx
Outdated
| const handleRequest = ( | ||
| request: Request, | ||
| responseStatusCode: number, | ||
| responseHeaders: Headers, | ||
| remixContext: EntryContext | ||
| ) => | ||
| isbot(request.headers.get("user-agent")) | ||
| ? handleBotRequest( | ||
| request, | ||
| responseStatusCode, | ||
| responseHeaders, | ||
| remixContext | ||
| ) | ||
| : handleBrowserRequest( | ||
| request, | ||
| responseStatusCode, | ||
| responseHeaders, | ||
| remixContext | ||
| ); | ||
| export default handleRequest; |
There was a problem hiding this comment.
Please keep this as it was and only update the actual needed changes
MichaelDeBoey
added
the
needs-response
Palbahngmiyine
force-pushed
the
update-twind
branch
2 times, most recently
from
73b6d67 to
901acf0
Compare
|
I'm Sorry, I closed PR due to IDE settings while resolving the latest main branch conflict. I will revise it again to reflect your review! |
Existing twind examples use the deprecated twind library.
So this pr is update example to @twind/core instead of the no longer maintained twind build.
The updated example was modified by referring to the example page in twind repository.