Merge pull request #3 from weizwz/dev

Dev

Author: weizwz

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.wrangler
 /node_modules/
 
 # React Router

README.md

@@ -26,6 +26,8 @@
 
 部署 `npx run deploy`
 
+*使用 pnpm start 启动时，ant 按钮样式会丢失，但构建无问题。本地启动，使用 pnpm dev 即可*
+
 ## 其他
 
 带壳截图工具： https://mockuphone.com/

app/components/AntdRegistry.tsx

@@ -0,0 +1,7 @@
+import { createCache, StyleProvider } from "@ant-design/cssinjs";
+import { useState } from "react";
+
+export default function AntdRegistry({ children }: { children: React.ReactNode }) {
+  const [cache] = useState(() => createCache());
+  return <StyleProvider cache={cache}>{children}</StyleProvider>;
+}

app/entry.client.tsx

@@ -0,0 +1,23 @@
+import { HydratedRouter } from "react-router/dom";
+import { startTransition, StrictMode, useState } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { StyleProvider, createCache } from "@ant-design/cssinjs";
+import "@ant-design/v5-patch-for-react-19";
+
+function Client() {
+  const [cache] = useState(() => createCache());
+  return (
+    <StyleProvider cache={cache}>
+      <HydratedRouter />
+    </StyleProvider>
+  );
+}
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <Client />
+    </StrictMode>
+  );
+});

app/entry.server.tsx

@@ -1,7 +1,8 @@
 import type { AppLoadContext, EntryContext } from "react-router";
 import { ServerRouter } from "react-router";
 import { isbot } from "isbot";
-import { renderToReadableStream } from "react-dom/server";
+import { renderToReadableStream } from "react-dom/server.edge";
+import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
 
 export default async function handleRequest(
   request: Request,
@@ -11,8 +12,13 @@ export default async function handleRequest(
   loadContext: AppLoadContext
 ) {
   let userAgent = request.headers.get("user-agent");
+  
+  const cache = createCache();
+
   let stream = await renderToReadableStream(
-    <ServerRouter context={routerContext} url={request.url} />,
+    <StyleProvider cache={cache}>
+      <ServerRouter context={routerContext} url={request.url} />
+    </StyleProvider>,
     {
       signal: request.signal,
       onError(error: unknown) {

package.json

@@ -11,6 +11,7 @@
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.24.0",
     "@ant-design/icons": "^6.0.0",
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "antd": "^5.26.2",