Skip to content

Commit c4f7fd8

Browse files
OrJDevOrJDev
authored
New solid (#17)
* latest * get auth & trpc working
1 parent 03b1da7 commit c4f7fd8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+3456
-1349
lines changed

‎docs/src/content/docs/auth/createSession.mdx

+15-9
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,21 @@ const AuthShowcase: VoidComponent = () => {
4040
</button>
4141
}
4242
>
43-
<span class='text-xl text-black'>
44-
Hello there {session()?.user?.name}
45-
</span>
46-
<button
47-
onClick={() => signOut({ redirectTo: '/' })}
48-
class='rounded-full bg-black/50 px-10 py-3 font-semibold text-white no-underline transition hover:bg-black/70'
49-
>
50-
Sign out
51-
</button>
43+
{(session) => {
44+
return (
45+
<>
46+
<span class='text-xl text-black'>
47+
Hello there {session()?.user?.name}
48+
</span>
49+
<button
50+
onClick={() => signOut({ redirectTo: '/' })}
51+
class='rounded-full bg-black/50 px-10 py-3 font-semibold text-white no-underline transition hover:bg-black/70'
52+
>
53+
Sign out
54+
</button>
55+
</>
56+
)
57+
}}
5258
</Show>
5359
</div>
5460
)

‎docs/src/content/docs/auth/getSession.mdx

+14-15
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,21 @@ async function getMySession(request: Request) {
2626

2727
```ts
2828
import { getSession } from '@solid-mediakit/auth'
29-
import { createServerData$ } from 'solid-start/server'
3029
import { authOpts } from '~/routes/api/auth/[...solidauth]'
31-
32-
export const useSession = () => {
33-
return createServerData$(
34-
async (_, { request }) => {
35-
return await getSession(request, authOpts)
36-
},
37-
{ key: () => ['auth_user'] }
38-
)
39-
}
40-
41-
// useSession returns a resource:
42-
const session = useSession()
43-
const loading = session.loading
44-
const user = () => session()?.user
30+
import { cache, createAsync, redirect } from '@solidjs/router'
31+
import { getWebRequest } from 'vinxi/server'
32+
33+
const getUser = cache(async () => {
34+
'use server'
35+
const request = getWebRequest()
36+
const session = await getSession(request, authOpts)
37+
if (!session) {
38+
throw redirect('/')
39+
}
40+
return session
41+
}, 'user')
42+
43+
const user = createAsync(getUser)
4544
```
4645

4746
This is being used to fetch the session from the server side, if you want to fetch it client-side, check out the [`createSession`](/auth/createsession) function.

‎docs/src/content/docs/auth/install.mdx

+16-30
Original file line numberDiff line numberDiff line change
@@ -16,43 +16,29 @@ pnpm add @solid-mediakit/auth@latest @auth/core@latest
1616
In order to update the session context accordingly, the entire app needs to be wrapped with a SessionProvider, this is a SolidJS context that will hold the current session.
1717

1818
```tsx
19-
// root.tsx
19+
// app.tsx
2020
// @refresh reload
21+
import { MetaProvider, Title } from '@solidjs/meta'
22+
import { Router } from '@solidjs/router'
23+
import { FileRoutes } from '@solidjs/start'
2124
import { Suspense } from 'solid-js'
22-
import {
23-
Body,
24-
ErrorBoundary,
25-
FileRoutes,
26-
Head,
27-
Html,
28-
Meta,
29-
Routes,
30-
Scripts,
31-
Title,
32-
} from 'solid-start'
25+
import './app.css'
3326
import { SessionProvider } from '@solid-mediakit/auth/client'
3427

35-
export default function Root() {
28+
export default function App() {
3629
return (
37-
<Html lang='en'>
38-
<Head>
39-
<Title>Create JD App</Title>
40-
<Meta charset='utf-8' />
41-
<Meta name='viewport' content='width=device-width, initial-scale=1' />
42-
</Head>
43-
<Body>
44-
<SessionProvider>
30+
<Router
31+
root={(props) => (
32+
<MetaProvider>
33+
<Title>SolidStart - Basic</Title>
4534
<Suspense>
46-
<ErrorBoundary>
47-
<Routes>
48-
<FileRoutes />
49-
</Routes>
50-
</ErrorBoundary>
35+
<SessionProvider>{props.children} </SessionProvider>
5136
</Suspense>
52-
</SessionProvider>
53-
<Scripts />
54-
</Body>
55-
</Html>
37+
</MetaProvider>
38+
)}
39+
>
40+
<FileRoutes />
41+
</Router>
5642
)
5743
}
5844
```

‎docs/src/content/docs/trpc/handler.mdx

+2-9
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,12 @@ description: 'Creating a tRPC API handler'
55

66
**Creating a tRPC API handler**
77

8-
## Install
9-
10-
```sh
11-
pnpm install solid-start-trpc@latest
12-
```
13-
148
## Usage
159

1610
Go to `routes/api/trpc/[trpc].ts` and add the following:
1711

1812
```ts
19-
import { createSolidAPIHandler } from 'solid-start-trpc'
13+
import { createSolidAPIHandler } from '@solid-mediakit/trpc/handler'
2014
import { createContext } from '~/server/trpc/context'
2115
import { appRouter } from '~/server/trpc/router/_app'
2216

@@ -25,8 +19,7 @@ const handler = createSolidAPIHandler({
2519
createContext,
2620
})
2721

28-
export const GET = handler
29-
export const POST = handler
22+
export const { GET, POST } = handler
3023
```
3124

3225
You now have a working tRPC API handler at `/api/trpc/[trpc]`.

‎docs/src/content/docs/trpc/install.mdx

+18-35
Original file line numberDiff line numberDiff line change
@@ -53,53 +53,36 @@ export const queryClient = new QueryClient()
5353

5454
### TRPCProvider
5555

56-
Make sure to wrap your `root.tsx` with the `TRPCProvider` and `QueryClientProvider` from `solid-query`.
56+
Make sure to wrap your `app.tsx` with the `TRPCProvider` and `QueryClientProvider` from `solid-query`.
5757

5858
```tsx
5959
// @refresh reload
60-
import './root.css'
60+
import { MetaProvider, Title } from '@solidjs/meta'
61+
import { Router } from '@solidjs/router'
62+
import { FileRoutes } from '@solidjs/start'
6163
import { Suspense } from 'solid-js'
62-
import {
63-
Body,
64-
ErrorBoundary,
65-
FileRoutes,
66-
Head,
67-
Html,
68-
Meta,
69-
Routes,
70-
Scripts,
71-
Title,
72-
Link,
73-
} from 'solid-start'
64+
import './app.css'
7465
import { queryClient, trpc } from './utils/trpc'
7566
import { QueryClientProvider } from '@tanstack/solid-query'
7667

77-
export default function Root() {
68+
export default function App() {
7869
return (
79-
<Html lang='en'>
80-
<Head>
81-
<Title>Create JD App</Title>
82-
<Meta charset='utf-8' />
83-
<Meta name='viewport' content='width=device-width, initial-scale=1' />
84-
<Meta name='theme-color' content='#026d56' />
85-
<Meta name='description' content='Generated by create-jd-app' />
86-
<Link rel='icon' href='/favicon.ico' />
87-
</Head>
88-
<Body>
89-
<Suspense>
90-
<ErrorBoundary>
70+
<Router
71+
root={(props) => (
72+
<MetaProvider>
73+
<Title>SolidStart - Basic</Title>
74+
<Suspense>
9175
<QueryClientProvider client={queryClient}>
9276
<trpc.Provider queryClient={queryClient}>
93-
<Routes>
94-
<FileRoutes />
95-
</Routes>
77+
{props.children}
9678
</trpc.Provider>
9779
</QueryClientProvider>
98-
</ErrorBoundary>
99-
</Suspense>
100-
<Scripts />
101-
</Body>
102-
</Html>
80+
</Suspense>
81+
</MetaProvider>
82+
)}
83+
>
84+
<FileRoutes />
85+
</Router>
10386
)
10487
}
10588
```

‎docs/src/content/docs/trpc/router.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Create a `server/trpc/context.ts` file with the following content:
2525

2626
```ts
2727
import type { inferAsyncReturnType } from '@trpc/server'
28-
import type { createSolidAPIHandlerContext } from 'solid-start-trpc'
28+
import { createSolidAPIHandlerContext } from '@solid-mediakit/trpc/handler'
2929

3030
export const createContextInner = async (
3131
opts: createSolidAPIHandlerContext

‎examples/auth/package.json

+14-14
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,34 @@
22
"name": "dev-auth",
33
"private": true,
44
"scripts": {
5-
"dev": "solid-start dev --port 3000",
6-
"start": "solid-start start --port 3000",
7-
"build": "solid-start build",
5+
"dev": "vinxi dev",
6+
"build": "vinxi build",
7+
"start": "vinxi start",
88
"lint": "eslint --fix \"**/*.{ts,tsx,js,jsx}\""
99
},
1010
"type": "module",
1111
"devDependencies": {
12-
"@types/node": "^18.14.0",
1312
"@typescript-eslint/eslint-plugin": "^5.52.0",
1413
"@typescript-eslint/parser": "^5.52.0",
1514
"autoprefixer": "^10.4.13",
1615
"eslint": "^8.34.0",
1716
"eslint-plugin-solid": "^0.9.4",
18-
"postcss": "^8.4.21",
19-
"solid-start-node": "^0.3.7",
2017
"tailwindcss": "^3.2.7",
18+
"@types/node": "^18.17.5",
19+
"esbuild": "^0.14.54",
20+
"postcss": "^8.4.28",
2121
"typescript": "^4.9.5",
22-
"vite": "^4.1.2"
22+
"vite": "^4.4.9"
2323
},
2424
"dependencies": {
25-
"@solidjs/meta": "^0.28.6",
26-
"@solidjs/router": "^0.8.3",
27-
"solid-js": "^1.8.3",
28-
"solid-start": "^0.3.7",
29-
"undici": "5.20.0",
3025
"zod": "^3.20.6",
31-
"@solid-mediakit/auth": "^1.0.3",
32-
"@auth/core": "^0.10.0"
26+
"@solid-mediakit/auth": "workspace:*",
27+
"@auth/core": "0.15.0",
28+
"@solidjs/router": "^0.11.2",
29+
"@solidjs/start": "^0.5.2",
30+
"solid-js": "^1.8.14",
31+
"vinxi": "^0.2.1",
32+
"@solidjs/meta": "^0.29.3"
3333
},
3434
"engines": {
3535
"node": ">=16"

‎examples/auth/src/root.css ‎examples/auth/src/app.css

File renamed without changes.

‎examples/auth/src/app.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// @refresh reload
2+
import { MetaProvider, Title } from '@solidjs/meta'
3+
import { Router } from '@solidjs/router'
4+
import { FileRoutes } from '@solidjs/start'
5+
import { Suspense } from 'solid-js'
6+
import './app.css'
7+
import { SessionProvider } from '@solid-mediakit/auth/client'
8+
9+
export default function App() {
10+
return (
11+
<Router
12+
root={(props) => (
13+
<MetaProvider>
14+
<Title>SolidStart - Basic</Title>
15+
<Suspense>
16+
<SessionProvider>{props.children} </SessionProvider>
17+
</Suspense>
18+
</MetaProvider>
19+
)}
20+
>
21+
<FileRoutes />
22+
</Router>
23+
)
24+
}

‎examples/auth/src/entry-client.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import { mount, StartClient } from "solid-start/entry-client";
1+
import { mount, StartClient } from '@solidjs/start/client'
22

3-
mount(() => <StartClient />, document);
3+
mount(() => <StartClient />, document.getElementById('app'))

‎examples/auth/src/entry-server.tsx

+19-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
import {
2-
StartServer,
3-
createHandler,
4-
renderAsync,
5-
} from "solid-start/entry-server";
1+
import { createHandler, StartServer } from '@solidjs/start/server'
62

7-
export default createHandler(
8-
renderAsync((event) => <StartServer event={event} />)
9-
);
3+
export default createHandler(() => (
4+
<StartServer
5+
document={({ assets, children, scripts }) => (
6+
<html lang='en'>
7+
<head>
8+
<meta charset='utf-8' />
9+
<meta name='viewport' content='width=device-width, initial-scale=1' />
10+
<link rel='icon' href='/favicon.ico' />
11+
{assets}
12+
</head>
13+
<body>
14+
<div id='app'>{children}</div>
15+
{scripts}
16+
</body>
17+
</html>
18+
)}
19+
/>
20+
))

‎examples/auth/src/root.tsx

-43
This file was deleted.

‎examples/auth/src/routes/api/auth/[...solidauth].ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { SolidAuth } from '@solid-mediakit/auth'
2-
import { authOptions } from '~/server/auth'
2+
import { authOptions } from '../../server/auth'
33

44
export const { GET, POST } = SolidAuth(authOptions)

0 commit comments

Comments
 (0)