@weifuwujs/messages 0.0.0-stage → 1.0.0

package/templates/react-router-messages/app/routes/notifications.tsx

@@ -0,0 +1,91 @@
+import { useEffect } from 'react'
+import { Form, redirect, useRevalidator } from 'react-router'
+import type { Route } from './+types/notifications'
+import { authUserContext } from '~/context.ts'
+import { messages } from '~/messages.ts'
+
+export function meta() {
+  return [{ title: '消息' }]
+}
+
+export async function loader({ context }: Route.LoaderArgs) {
+  const user = context.get(authUserContext)
+  if (!user) throw redirect('/login')
+  const page = await messages.list({ userId: user.id, limit: 20 })
+  return {
+    unread: await messages.unread(user.id),
+    nextCursor: page.nextCursor,
+    items: page.items.map((message) => ({
+      id: message.id,
+      kind: message.kind,
+      title: message.title,
+      body: message.body,
+      readAt: message.readAt === null ? null : message.readAt.toISOString(),
+      createdAt: message.createdAt.toISOString(),
+    })),
+  }
+}
+
+export async function action({ context }: Route.ActionArgs) {
+  const user = context.get(authUserContext)
+  if (!user) throw redirect('/login')
+  await messages.markAllRead(user.id)
+  return redirect('/notifications')
+}
+
+/** 实时：服务端经 /messages/ws 推送 message / unread，收到即重新验证 loader */
+function useRealtime(): void {
+  const revalidator = useRevalidator()
+  useEffect(() => {
+    const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
+    const socket = new WebSocket(`${protocol}://${location.host}/messages/ws`)
+    socket.addEventListener('message', (event) => {
+      const data = JSON.parse(String(event.data)) as { type?: string }
+      if (data.type === 'message' || data.type === 'unread') {
+        revalidator.revalidate()
+      }
+    })
+    return () => socket.close()
+  }, [revalidator])
+}
+
+export default function Notifications({ loaderData }: Route.ComponentProps) {
+  const { items, unread } = loaderData
+  useRealtime()
+
+  return (
+    <main className="mx-auto max-w-xl p-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">
+          消息{unread > 0 ? `（未读 ${unread}）` : ''}
+        </h1>
+        {unread > 0 ? (
+          <Form method="post">
+            <button className="border px-3 py-1.5 text-sm">全部已读</button>
+          </Form>
+        ) : null}
+      </div>
+
+      <ul className="mt-6 space-y-3">
+        {items.map((message) => (
+          <li
+            key={message.id}
+            data-read={message.readAt === null ? 'false' : 'true'}
+            className="border p-3"
+          >
+            <div className="font-semibold">{message.title}</div>
+            {message.body ? (
+              <p className="mt-1 text-sm text-gray-600">{message.body}</p>
+            ) : null}
+            <div className="mt-1 text-xs text-gray-400">
+              {message.kind} · {message.createdAt}
+            </div>
+          </li>
+        ))}
+        {items.length === 0 ? (
+          <li className="border p-3 text-sm text-gray-500">暂无消息</li>
+        ) : null}
+      </ul>
+    </main>
+  )
+}

package/templates/react-router-messages/app/routes.ts

@@ -0,0 +1,10 @@
+import { index, route, type RouteConfig } from '@react-router/dev/routes'
+
+export default [
+  index('routes/home.tsx'),
+  route('login', 'routes/login.tsx'),
+  route('register', 'routes/register.tsx'),
+  route('reset-password', 'routes/reset-password.tsx'),
+  route('account', 'routes/account.tsx'),
+  route('notifications', 'routes/notifications.tsx'),
+] satisfies RouteConfig

package/templates/react-router-messages/app/server.ts

@@ -0,0 +1,41 @@
+import { createApp, json } from '@weifuwujs/weifuwu'
+import { reactRouter } from '@weifuwujs/weifuwu/react-router'
+import type { Context, Middleware } from '@weifuwujs/weifuwu'
+import { RouterContextProvider } from 'react-router'
+import { authUserContext, greetingContext } from './context.ts'
+import { auth } from './auth.ts'
+import { messages } from './messages.ts'
+
+type AppContext = Context & {
+  greeting: string
+  auth?: import('@weifuwujs/weifuwu/auth').AuthContext
+}
+
+const withGreeting: Middleware<Context, AppContext> = async (
+  request,
+  context,
+  next,
+) => next(request, { ...context, greeting: 'hello-from-weifuwu' })
+
+const app = createApp().use(withGreeting)
+
+// HTTP + WS 双端中间件：WS 升级也要认会话 cookie（messages 端点鉴权依赖）
+auth.install(app)
+app.mount(auth)
+app.use('/account', auth.require())
+// 一条线：REST（/messages 只读端点）+ WS（/messages/ws，未认证 401）
+messages.install(app)
+app.get('/api/health', () => json({ ok: true }))
+
+app.notFound(
+  reactRouter<AppContext>({
+    getLoadContext(_request, context) {
+      const loadContext = new RouterContextProvider()
+      loadContext.set(greetingContext, context.greeting)
+      loadContext.set(authUserContext, context.auth?.user ?? null)
+      return loadContext
+    },
+  }),
+)
+
+export default app