wildpig 1.3.19 → 1.4.0

package/scripts/devServer.ts

@@ -0,0 +1,132 @@
+import { getApiRouteModules } from "./apiRoutes";
+import { createServer as createViteServer } from "vite";
+import { createStaticHandler, createStaticRouter, matchRoutes } from "react-router";
+import fs from "node:fs";
+
+const __dirname = import.meta.dirname;
+
+// 用户代码
+import pageRoutes from "@/router/routes";
+import path from "node:path";
+import chalk from "chalk";
+
+const env = process.env;
+const port = env.PORT || 3000;
+const hostname = env.HOST || env.HOSTNAME || "localhost";
+
+
+// 启动vite server
+const viteServer = await createViteServer({
+    configFile: path.resolve(__dirname, "../../../vite.config.ts"),
+});
+await viteServer.listen(viteServer.config.server.port);
+
+
+const viteHandler = (apiModules: any) => async (request: Request) => {
+    // 判断pathname是否匹配pageRoutes
+    const url = new URL(request.url);
+
+    // 判断是否是vite请求
+    if(url.pathname.includes(".") || url.pathname.startsWith("/@")){
+        // 没有匹配的route，说明是一些资源什么的
+        const viteURL = new URL(request.url);
+        viteURL.port = viteServer.config.server.port.toString();
+        console.log("转发请求：" + viteURL.toString());
+        const response = await fetch(viteURL.toString(), {
+            headers: request.headers,
+            method: request.method,
+        });
+        return response;
+    }
+
+    const matches = matchRoutes(pageRoutes, url.pathname);
+    if(!matches)return new Response("404 Not Found", { status: 404 });
+
+    // 请求服务端数据
+    const matchRoute = matches.at(-1)!;
+    let serverDataApi = matchRoute.route.serverDataApi;
+    const getServerData = async () => {
+        if(!serverDataApi)return undefined;
+        const prefixUrl = request.url.split("/")[0] + "//" + request.url.split("/")[2];
+        // 需要请求服务端数据， 替换动态参数
+        for(const [key, value] of Object.entries(matchRoute.params)){
+            if(value)serverDataApi = serverDataApi.replace(":" + key, value);
+        }
+        // 加上当前request的query参数
+        for(const [key, value] of new URLSearchParams(request.url.split("?")[1]).entries()){
+            if(serverDataApi.includes(key + "="))continue; // 已经有这个参数了
+            serverDataApi += (serverDataApi.includes("?") ? "&" : "?") + key + "=" + value;
+        }
+        const serverRequest = new Request({
+            ...request.clone(),
+            url: prefixUrl + serverDataApi, // 替换url
+        });
+        serverRequest.headers.set("wildpig-server-data-api", serverDataApi);
+        const pathname = serverDataApi.split("?")[0]; // 获取路径
+        const serverData = await apiModules[pathname].GET(serverRequest).then((r: Response) => r.json());
+        return serverData;
+    };
+    let serverData = await getServerData();
+
+    // 1. 读取 index.html
+    const template = await viteServer.transformIndexHtml(request.url, fs.readFileSync('./index.html', 'utf-8'));
+    // 2. 获取渲染函数
+    const { render } = await viteServer.ssrLoadModule('/node_modules/wildpig/entry/server.tsx')
+    // 3. 获取应用程序 HTML
+    const appHtml = await render(request)
+
+    // 4. 注入渲染后的应用程序 HTML 到模板中。
+    const html = template
+        .replace(`<!--ssr-outlet-->`, () => appHtml)
+        .replace(`<!--title-->`, () => serverData?.title || "title")
+        .replace(`<!--server-data-->`, () => `<script>window.__SERVER_DATA__ = ${JSON.stringify(serverData)};</script>`);
+
+    return new Response(html, {
+        headers: {
+            "content-type": "text/html; charset=utf-8",
+            "Access-Control-Allow-Origin": "*",
+        }
+    });
+}
+
+
+const getPackageInfo = async () => {
+    const packageJson = await Bun.file(path.resolve(__dirname, "../package.json")).json();
+    return packageJson;
+}
+const packageInfo = await getPackageInfo();
+
+/** 启动后的描述性文字 */
+const afterStart = () => {
+// 启动后的文字
+console.log(` __        __ _  _      _   ____   _        
+ \\ \\      / /(_)| |  __| | |  _ \\ (_)  __ _ 
+  \\ \\ /\\ / / | || | / _\` | | |_) || | / _\` |
+   \\ V  V /  | || || (_| | |  __/ | || (_| |
+    \\_/\\_/   |_||_| \\__,_| |_|    |_| \\__, |
+                                      |___/ `)
+console.log(chalk.blue.bgGreen(`         🐗 WildPig version ${packageInfo?.version} by ${packageInfo?.author}       `));
+console.log(chalk.green("          Strong & Fast Fullstack Framework\n"));
+console.log(chalk.green("✨ WildPig is running on port " + env.PORT || 3000));
+console.log(chalk.yellow("💻 Wildpig is Running in development mode."));
+console.log(chalk.green("⚡ Vite server is running on port " + viteServer.config.server?.port));
+console.log(chalk.green(`🔗 Click to debug in Browser: http://${hostname}:${port}`));
+}
+
+export const startServer = async () => {
+    // 确保重启后可以重新拿到路由
+    const apiModules = await getApiRouteModules("dev") as any;
+    console.log(apiModules)
+    const server = Bun.serve({
+        port,
+        hostname,
+        routes:{
+            ...apiModules,
+            "/*": viteHandler(apiModules),
+        },
+        development: true,
+    })
+    afterStart();
+    return server;
+}
+startServer();

package/scripts/prodServer.ts

@@ -0,0 +1,114 @@
+import { getApiRouteModules } from "./apiRoutes";
+import fs from "node:fs";
+import { matchRoutes } from "react-router";
+import path from "node:path";
+
+// 用户代码
+import pageRoutes from "#/src/router/routes";
+import chalk from "chalk";
+
+const env = process.env;
+const port = env.PORT || 3000;
+const hostname = env.HOST || env.HOSTNAME || "localhost";
+
+const getPackageInfo = async () => {
+    const packageJson = await Bun.file(path.resolve(__dirname, "../package.json")).json();
+    return packageJson;
+}
+const packageInfo = await getPackageInfo();
+
+/** 启动后的描述性文字 */
+const afterStart = () => {
+// 启动后的文字
+console.log(` __        __ _  _      _   ____   _        
+ \\ \\      / /(_)| |  __| | |  _ \\ (_)  __ _ 
+  \\ \\ /\\ / / | || | / _\` | | |_) || | / _\` |
+   \\ V  V /  | || || (_| | |  __/ | || (_| |
+    \\_/\\_/   |_||_| \\__,_| |_|    |_| \\__, |
+                                      |___/ `)
+console.log(chalk.blue.bgGreen(`         🐗 WildPig version ${packageInfo?.version} by ${packageInfo?.author}       `));
+console.log(chalk.green("          Strong & Fast Fullstack Framework\n"));
+console.log(chalk.green("✨ WildPig is running on port " + env.PORT || 3000));
+console.log(chalk.green("💻 Wildpig is Running in production mode."));
+console.log(chalk.green(`🔗 Click to debug in Browser: http://${hostname}:${port}`));
+}
+
+
+
+export const startServer = async () => {
+    // 确保重启后可以重新拿到路由
+    const apiModules = await getApiRouteModules("prod") as any;
+    return Bun.serve({
+        port,
+        hostname,
+        routes:{
+            ...apiModules,
+            "/*": async (request: Request) => {
+                // 判断pathname是否匹配pageRoutes
+                const url = new URL(request.url);
+                const matches = matchRoutes(pageRoutes, url.pathname);
+                if(!matches){
+                    const filepath = "./client" + url.pathname;
+                    // 检查文件是否存在
+                    if(fs.existsSync(filepath) && fs.statSync(filepath).isFile()){
+                        return new Response(Bun.file(filepath));
+                    }
+                    // 文件不存在
+                    return new Response("Not Found", {status: 404});
+                }
+
+                // 请求服务端数据
+                const matchRoute = matches.at(-1)!;
+                let serverDataApi = matchRoute.route.serverDataApi;
+                const getServerData = async () => {
+                    if(!serverDataApi)return undefined;
+                    const prefixUrl = request.url.split("/")[0] + "//" + request.url.split("/")[2];
+                    // 需要请求服务端数据， 替换动态参数
+                    for(const [key, value] of Object.entries(matchRoute.params)){
+                        if(value)serverDataApi = serverDataApi.replace(":" + key, value);
+                    }
+                    // 加上当前request的query参数
+                    for(const [key, value] of new URLSearchParams(request.url.split("?")[1]).entries()){
+                        if(serverDataApi.includes(key + "="))continue; // 已经有这个参数了
+                        serverDataApi += (serverDataApi.includes("?") ? "&" : "?") + key + "=" + value;
+                    }
+                    const serverRequest = new Request({
+                        ...request.clone(),
+                        url: prefixUrl + serverDataApi, // 替换url
+                    });
+                    serverRequest.headers.set("wildpig-server-data-api", serverDataApi);
+                    const pathname = serverDataApi.split("?")[0]; // 获取路径
+                    const serverData = await apiModules[pathname].GET(serverRequest).then((r: Response) => r.json());
+                    return serverData;
+                };
+                let serverData = await getServerData();
+
+                // 1. 读取 index.html
+                const template = fs.readFileSync('./client/index.html', 'utf-8');
+                // 2. 获取渲染函数
+                const { render } = await import("../entry/server"!);
+                // 3. 获取应用程序 HTML
+                const appHtml = await render(request)
+
+                // 4. 注入渲染后的应用程序 HTML 到模板中。
+                const html = template
+                    .replace(`<!--ssr-outlet-->`, () => appHtml)
+                    .replace(`<!--title-->`, () => serverData?.title || "title")
+                    .replace(`<!--server-data-->`, () => `<script>window.__SERVER_DATA__ = ${JSON.stringify(serverData)};</script>`);
+
+                return new Response(html, {
+                    headers: {
+                        "content-type": "text/html; charset=utf-8",
+                        "Access-Control-Allow-Origin": "*",
+                    }
+                });
+            },
+        },
+        development: false,
+        
+    })
+}
+
+
+startServer();
+afterStart();

package/scripts/server.ts

@@ -1,7 +1,8 @@
 import chalk from "chalk";
 import path from "node:path";
 import { watch } from "node:fs";
-import { startServer } from "./WildPig";
+import { startServer } from "./devServer";
+import viteConfig from "#/vite.config";
 const env = process.env;
 
 
@@ -27,29 +28,10 @@ const startHotServer = async () => {
             setTimeout(async () => {
                 server = await startServer();
                 console.log(chalk.green("服务已重启"));
-            }, 500);
+            }, 1000);
         })
     }
 }
 await startHotServer();
 
 
-const afterStart = () => {
-// 启动后的文字
-console.log(` __        __ _  _      _   ____   _        
- \\ \\      / /(_)| |  __| | |  _ \\ (_)  __ _ 
-  \\ \\ /\\ / / | || | / _\` | | |_) || | / _\` |
-   \\ V  V /  | || || (_| | |  __/ | || (_| |
-    \\_/\\_/   |_||_| \\__,_| |_|    |_| \\__, |
-                                      |___/ `)
-console.log(chalk.blue.bgGreen(`         🐗 WildPig version ${packageInfo?.version} by ${packageInfo?.author}       `));
-console.log(chalk.green("          Strong & Fast Fullstack Framework\n"));
-console.log(chalk.green("✨ WildPig is running on port " + env.PORT || 3000));
-if(isDev){
-    console.log(chalk.yellow("💻 Wildpig is Running in development mode."));
-}else{
-    console.log(chalk.green("💻 Wildpig is Running in production mode."));
-}
-console.log(chalk.green(`🔗 Click to debug in Browser: http://${hostname}:${port}`));
-}
-afterStart();

package/public/devHtml.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WildPig 开发环境</title>
-    <script src="./render.tsx"></script>
-</head>
-<body>
-    <div id="root"></div>
-</body>
-</html>

package/public/render.tsx

@@ -1,29 +0,0 @@
-import { createRoot, hydrateRoot } from 'react-dom/client';
-import { RouterProvider } from 'react-router';
-import { serverDataStore } from '../store/serverDataStore';
-import { browserRouter } from '../router/index.js';
-import "./tailwindcss4.js"
-
-const isDev = process.env.NODE_ENV === 'development';
-
-
-// 确保在 DOM 加载完成后才进行水合
-document?.addEventListener("DOMContentLoaded", () => {
-    // 获取根元素
-    const rootElement = document.getElementById('root')!;
-
-    // 从 window 对象获取服务端数据
-    const serverData = (window as any).__SERVER_DATA__;
-
-    // 设置服务端数据到 store
-    serverDataStore.set(serverData);
-    
-    if(isDev){
-        // 开发时，使用 createRoot 进行渲染
-        const root = createRoot(rootElement);
-        root.render(<RouterProvider router={browserRouter} />);
-    }else{
-        // 生产环境，使用 hydrateRoot 进行水合
-        hydrateRoot(rootElement, (<RouterProvider router={browserRouter} />));
-    }
-});