Improve support for Next.js / SSR in @ldo/solid-react - #156
Conversation
9f67b5e to
eb4ad42
Compare
| return ( | ||
| <html lang="en"> | ||
| <body> | ||
| {/* @ts-expect-error React types dependency mismatch (TODO fix) */} |
There was a problem hiding this comment.
Is this a complicated type fix?
There was a problem hiding this comment.
Fixed with explicit type resolution in the nextjs app's tsconfig.json to local node_modules.
Also added react to peer dependencies of @ldo/solid-react.
in 6af27ce
| @@ -0,0 +1,49 @@ | |||
| :root { | |||
There was a problem hiding this comment.
I like that you created a "examples" folder to test the example app.
There's something similar to this at /packages/solid-react/dev. Could you also move that app here? It's just a simple vite (non nextjs) app.
There was a problem hiding this comment.
Moved the /packages/solid-react/dev to dev/solid-react-vite-app in 27032b8
and added the missing files (like tsconfig.json, package.json, eslint config etc) generated by npm create vite@latest https://vite.dev/guide/#scaffolding-your-first-vite-project
| @@ -0,0 +1,49 @@ | |||
| :root { | |||
| --background: #ffffff; | |||
There was a problem hiding this comment.
For these example apps, let's include as little styling as possible that could distract from the actual code. Notice in /packages/solid-react/dev there's almost no styling and there's just default HTML formatting.
|
|
||
| const onFetch: SubmitEventHandler<HTMLFormElement> = async (event) => { | ||
| event.preventDefault(); | ||
| const response = await fetch(url); |
There was a problem hiding this comment.
Hmm. On second thought. This "example" app is just to test the fetch functionality. It doesn't make sense to put it in an "example" folder because we want to encourage users to use the resource methods rather than the fetch function. So, this probably belongs next to the current /packages/solid-react/dev library. Maybe both can be renamed.
There was a problem hiding this comment.
Called the directory "dev" instead of "examples" as discussed during our weekly meeting. Added README explaining its purpose. d2e9a9b
aef750d to
56d3cc5
Compare
jaxoncreed
left a comment
jaxoncreed
left a comment
There was a problem hiding this comment.
LGTM Squash commits before meging
npx create-next-app@latest solid-react-nextjs-app
Make sure client-only API (SharedWorker) doesn't run on server. Add "use client" directive. Test this with the new example nextjs app.. Fixes o-development#153
+ Add a README explaining dev directory's purpose. + Remove distracting styles + Update favicon
Also, add other files from the default Vite + React + TS app generated with `npm create vite@latest`
Explicitly resolve @types/react to local node_modules. List react as peerDependency of @ldo/solid-react.
56d3cc5 to
85b9376
Compare
2 participants
Make sure browser API (
SharedWorker) doesn't run on server.Add
"use client"directive to @ldo/solid-react index.ts.Test this with a new example nextjs app.
The example app has been added to a new "examples" directory.
The example app's functionality has been copied from https://github.com/o-development/ldo/tree/f68a842d7c40076ce270f70142e0444a7fdd1b92/packages/solid-react/dev.
Fixes #153