wildpig 1.1.6 → 1.3.0

package/public/render.tsx

@@ -1,13 +1,29 @@
-import ReactDOM from 'react-dom/client';
-import { App } from '@/App';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router';
 import "./tailwindcss4.js";
+import { serverDataStore } from '../store/serverDataStore';
+import { browserRouter } from '../router/index.js';
 
+const isDev = process.env.NODE_ENV === 'development';
 
-document.addEventListener("DOMContentLoaded", () => {
+
+// 确保在 DOM 加载完成后才进行水合
+document?.addEventListener("DOMContentLoaded", () => {
     // 获取根元素
     const rootElement = document.getElementById('root')!;
 
-    // 创建根并渲染组件
-    const root = ReactDOM.createRoot(rootElement);
-    root.render(<App />);
+    // 从 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} />));
+    }
 });

package/router/ServerDataGuard.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from "react"
+import { matchRoutes, Outlet, useLocation, useNavigate } from "react-router"
+import pageRoutes from "@/router/routes";
+import { serverDataStore } from "#/store/serverDataStore";
+
+export const ServerDataGuard = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    useEffect(() => {
+        // serverData清空
+        serverDataStore.set(undefined);
+
+        const url = location.pathname;
+        const matches = matchRoutes(pageRoutes, url);
+        const lastMatch = matches?.at(-1);
+        if(!lastMatch) {
+            // 404
+            navigate("/404");
+            return;
+        }
+        // 成功匹配
+        let serverDataApi = lastMatch.route.serverDataApi;
+        if(!serverDataApi)return;
+
+        // 替换参数
+        for(const [key, value] of Object.entries(lastMatch.params)){
+            if(value)serverDataApi = serverDataApi.replace(":" + key, value);
+        }
+        fetch(serverDataApi).then(res => res.json()).then(data => {
+            serverDataStore.set(data);
+            if(data.title){
+                document.title = data.title;
+            }
+        });
+    }, [location]);
+
+    return <Outlet />;
+}

package/router/index.ts

@@ -0,0 +1,15 @@
+import { createBrowserRouter } from "react-router";
+import { ServerDataGuard } from "./ServerDataGuard";
+
+// 用户代码
+import pageRoutes from "@/router/routes";
+
+
+/** 生成路由器，可用于监听路由变化 */
+export const browserRouter = createBrowserRouter([
+    {
+        path: "/",
+        Component: ServerDataGuard,
+        children: pageRoutes,
+    },
+]);

package/router/types.ts

@@ -0,0 +1,7 @@
+import { RouteObject } from "react-router";
+
+export type WildPigRouteObject = RouteObject & {
+    // 是否需要登录
+    serverDataApi?: string;
+    children?: WildPigRouteObject[];
+}

package/scripts/WildPig.tsx

@@ -0,0 +1,104 @@
+import chalk from "chalk";
+// import { routes, metaRoutes } from "./prepareRoutes";
+import { readFileSync } from "node:fs";
+import { getApiRouteModules } from "./apiRoutes";
+import { renderToReadableStream } from "react-dom/server";
+import devHtml from "../public/devHtml.html"
+
+import { createStaticHandler, createStaticRouter, matchRoutes } from "react-router";
+
+
+const __dirname = import.meta.dirname;
+
+
+// 用户代码
+import pageRoutes from "#/src/router/routes";
+import { App } from "@/App"
+import path from "node:path";
+
+const env = process.env;
+const port = env.PORT || 3000;
+const hostname = env.HOSTNAME || "localhost";
+const isDev = env.NODE_ENV === "development";
+
+const apiModules = await getApiRouteModules(isDev ? "dev" : "prod") as any;
+
+
+if(isDev){
+    setTimeout(() => {import("../public/render")}, 0);
+    /** 打包js */
+    await Bun.build({
+        entrypoints: [path.resolve(__dirname, "../public/render.tsx")],
+        outdir: path.resolve(__dirname, "../public"),
+        format: "esm",
+        minify: false,
+    });
+}
+
+export const startServer = async () => {
+    Bun.serve({
+        port,
+        hostname,
+        routes:{
+            ...apiModules,
+            // 这个来自用户文件
+            "/favicon.ico": () => new Response(Bun.file("./public/favicon.ico"), {
+                headers: {
+                    "content-type": "image/x-icon",
+                }
+            }),
+            "/render.js": () => new Response((readFileSync(path.resolve(__dirname, "../public/render.js"))), {
+                headers: {
+                    "Content-Type": "text/javascript; charset=utf-8",
+                    "Cache-Control": isDev ? "no-cache" : "public, max-age=31536000, immutable"
+                }
+            }),
+            "/*": isDev ? devHtml : async (request: Request) => {
+                // 判断pathname是否匹配pageRoutes
+                const url = new URL(request.url);
+                const matches = matchRoutes(pageRoutes, url.pathname);
+                if(!matches){
+                    return new Response("404 Not Found", {
+                        status: 404,
+                        headers: {
+                            "content-type": "text/plain; charset=utf-8",
+                            "Access-Control-Allow-Origin": "*",
+                        }
+                    })
+                }
+
+                let { query, dataRoutes } = createStaticHandler(pageRoutes);
+                let context = await query(request);
+                if (context instanceof Response) return context;
+                let router = createStaticRouter(dataRoutes, context);
+
+                // 请求服务端数据
+                const matchRoute = matches.at(-1)!;
+                let serverDataApi = matchRoute.route.serverDataApi;
+                const getServerData = async () => {
+                    if(!serverDataApi)return undefined;
+                    // 需要请求服务端数据， 替换动态参数
+                    for(const [key, value] of Object.entries(matchRoute.params)){
+                        if(value)serverDataApi = serverDataApi.replace(":" + key, value);
+                    }
+                    const pathname = serverDataApi.split("?")[0]; // 获取路径
+                    const handleUrl = "http://" + hostname + ":" + port + pathname;
+                    const serverData = await fetch(handleUrl).then(r => r.json());
+                    return serverData;
+                };
+                let serverData = await getServerData();
+
+
+                const stream = await renderToReadableStream(<App router={router} serverData={serverData} />);
+                return new Response(stream, {
+                    headers: {
+                        "content-type": "text/html; charset=utf-8",
+                        "Access-Control-Allow-Origin": "*",
+                    }
+                })
+            },
+        },
+        development: isDev,
+        
+    })
+}

package/scripts/apiRoutes.ts

@@ -0,0 +1,98 @@
+import { readdirSync, statSync, writeFileSync } from "fs";
+import { middleware } from "@/api/middleware";
+
+const getFilePaths = (dir: string) => {
+    const res: string[] = [];
+    const files = readdirSync(dir);
+    files.forEach(file => {
+        const filePath = `${dir}/${file}`;
+        const stat = statSync(filePath);
+        if (stat.isDirectory()) {
+            res.push(...getFilePaths(filePath));
+        } else {
+            res.push(filePath);
+        }
+    });
+    return res;
+}
+
+
+const makeDynamicRoute = (route: string) => route.replaceAll(/\[([^\]]*)\]/g, ':$1');
+
+export const makeApiRoutePathObj = () => {
+    // 扫描用户代码路径
+    const apiDir = "./src/api";
+    const apiPaths = getFilePaths(apiDir);
+    const result: Record<string, string> = {};
+
+    for(const apiPath of apiPaths) {
+        const importPath = apiPath.replace("./src/api", "#/src/api");
+        if(!apiPath.includes("index.ts")) continue;
+        const route = apiPath.replace("./src/api", "/api").replace("/index.ts", "");
+        result[route] = importPath.replace(".ts", "");
+    }
+    return result;
+}
+
+/**
+ * 生成api路由的配置文件
+ */
+export const packageApiRoutes = async () => {
+    const apiRoutes = makeApiRoutePathObj();
+    let identId = 0;
+    let importsText = `import { middleware } from "@/api/middleware" \n`;
+    let routesText = "export default {\n";
+    for(const route of Object.keys(apiRoutes)) {
+        const importPath = apiRoutes[route];
+        // 尝试从文件中获取路由
+        const module = await import(importPath);
+        // 没有接口，就跳过
+        if(!module.GET && !module.POST) continue;
+        // 标识id
+        identId ++;
+        importsText += `import {\n`;
+        routesText += `\t"${makeDynamicRoute(route)}": {\n`;
+        if(module.GET) {
+            importsText += `\tGET as GET${identId},\n`;
+            routesText += `\t\tGET: (req: any) => middleware(req, GET${identId}),\n`;
+        }
+        if(module.POST) {
+            importsText += `\tPOST as POST${identId},\n`;
+            routesText += `\t\tPOST: (req: any) => middleware(req, POST${identId}),\n`;
+        }
+        importsText += `} from "${importPath}";\n`;
+        routesText += `\t},\n`;
+    }
+    routesText += "}";
+    writeFileSync("./build/built-api-routes.ts", importsText + "\n" + routesText);
+};
+
+/**
+ * 获取api路由，dev模式，直接导入
+ */
+export const getApiRouteModules = async (mode: "dev" | "prod") => {
+    if(mode === "dev"){
+        const apiRoutes = makeApiRoutePathObj();
+        const result: Record<string, {
+            GET?: (req: any) => Promise<Response>,
+            POST?: (req: any) => Promise<Response>
+        } > = {};
+        for(const route of Object.keys(apiRoutes)) {
+            const importPath = apiRoutes[route];
+            const module = await import(importPath.replace(".ts", ""));
+            if(!module.GET && !module.POST) continue;
+
+            // 新建一个路由
+            const dynamicRoute = makeDynamicRoute(route);
+            console.log(`[apiRoutes] ${dynamicRoute}`)
+            result[dynamicRoute] = {};
+            if(module.GET) result[dynamicRoute].GET = (req: any) => middleware(req, module.GET);
+            if(module.POST) result[dynamicRoute].POST = (req: any) => middleware(req, module.POST);
+        }
+        return result;
+    } else {
+        // prod模式，直接从文件中导入
+        const module = await import("../build/built-api-routes"!);
+        return module.default;
+    }
+}

package/scripts/build.ts

@@ -0,0 +1,23 @@
+import path from "node:path";
+import { packageApiRoutes } from "./apiRoutes";
+import { packageStatic } from "./packageStatic";
+
+const prebuild = async () => {
+    await packageStatic();
+    await packageApiRoutes();
+};
+
+
+export const build = async () => {
+    // 前处理
+    await prebuild();
+    // 正式编译
+    await Bun.build({
+        entrypoints: [path.resolve(__dirname, "./server.ts")],
+        compile: true,
+        outdir: "./dist",
+        define: {
+            "process.env.NODE_ENV": JSON.stringify("production"),
+        },
+    });
+}

package/scripts/packageStatic.ts

@@ -1,12 +1,14 @@
 import Bun from "bun";
 import fs from "node:fs";
+import path from "node:path";
 
+const __dirname = import.meta.dirname;
 
 export const packageStatic = async () => {
     /** 打包js */
     await Bun.build({
-        entrypoints: ["./public/render.tsx"],
-        outdir: "./dist/public",
+        entrypoints: [path.resolve(__dirname, "../public/render.tsx")],
+        outdir: path.resolve(__dirname, "../dist/public"),
         format: "esm",
         minify: true,
     });

package/scripts/server.ts

@@ -0,0 +1,38 @@
+import chalk from "chalk";
+import path from "node:path";
+import { startServer } from "./WildPig";
+const env = process.env;
+
+
+const port = env.PORT || 3000;
+const hostname = env.HOSTNAME || "localhost";
+const isDev = env.NODE_ENV === "development";
+
+const getPackageInfo = async () => {
+    const packageJson = await Bun.file(path.resolve(__dirname, "../package.json")).json();
+    return packageJson;
+}
+const packageInfo = await getPackageInfo();
+
+
+startServer();
+
+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/store/serverDataStore.tsx

@@ -0,0 +1,4 @@
+import { atom } from "nanostores";
+
+
+export const serverDataStore = atom<any>(undefined);

package/build/built-meta-routes.ts

@@ -1,4 +0,0 @@
-export default {
-    "/_WILDPIG_META_API/home": require("#/src/page/home/meta.ts").getMeta, 
-    "/_WILDPIG_META_API/": require("#/src/page/meta.ts").getMeta, 
-}

package/build/built-routes.ts

@@ -1,9 +0,0 @@
-import { middleware } from "@/middleware";
-
-export default {
-"/api/hello": {GET: (req: any) => middleware(req, require("#/src/api/hello/index.ts").GET), 
-POST: (req: any) => middleware(req, require("#/src/api/hello/index.ts").POST), 
-PUT: (req: any) => middleware(req, require("#/src/api/hello/index.ts").PUT), 
-DELETE: (req: any) => middleware(req, require("#/src/api/hello/index.ts").DELETE), 
-},
-}

package/index.ts

@@ -1,3 +0,0 @@
-import { startServer } from "./scripts/WildPig";
-
-export { startServer };

package/public/devIndex.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="wildpig-environment" content="development">
-    <script src="./render.tsx" type="module"></script>
-    <title>WildPig - 开发环境（生产环境下会被替换为meta信息）</title>
-</head>
-<body>
-    <div id="root"></div>
-</body>
-</html>

package/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="wildpig-environment" content="production">
-
-    <title>{{TITLE}}</title>
-    <meta name="description" content="{{DESCRIPTION}}">
-    <meta name="keywords" content="{{KEYWORDS}}">
-
-    <script src="/render.js" type="module"></script>
-</head>
-<body>
-    <div id="root"></div>
-</body>
-</html>

package/router/MetaGuard.tsx

@@ -1,38 +0,0 @@
-import { getBrowserEnvironment } from "../utils/client/environment";
-import { createBrowserRouter } from "react-router";
-// 为了获取type而创建的router
-const browserRouterForType = createBrowserRouter([
-    {
-        path: "/just-for-type",
-        Component: null,
-    }
-]);
-export type BrowserRouter = typeof browserRouterForType;
-
-
-/**
- * 获取meta信息
- * @param url like "/home?a=1"
- */
-const refreshMeta = (url: string) =>{
-    console.log("get url:", url);
-    fetch("/_WILDPIG_META_API" + url).then(res => res.json()).then(({title}) => {
-        document.title = title;
-    });
-}
-
-export const RouterMetaGuard = (browserRouter: BrowserRouter): BrowserRouter => {
-    
-    // 检查meta，判断是否是dev环境
-    const isDev = getBrowserEnvironment() === "development";
-    if(isDev){
-        // 开发环境首次执行，生产阶段为了seo，无需首次执行
-        refreshMeta(window.location.pathname + window.location.search);
-    }
-    
-    // 每次跳转都会触发，包括 <Link>/navigate/前进后退
-    browserRouter.subscribe(({ location }) => {
-        refreshMeta(location.pathname + location.search);
-    });
-    return browserRouter;
-}

package/scripts/WildPig.ts

@@ -1,74 +0,0 @@
-import chalk from "chalk";
-import { htmlString } from "./htmlString";
-import { routes, metaRoutes } from "./prepareRoutes";
-import { readFileSync } from "node:fs";
-import devIndexHtml from "#/public/devIndex.html"
-
-const env = process.env;
-const isDev = env.NODE_ENV === "development";
-
-// console.log(metaRoutes);
-
-export const startServer = () => {
-    Bun.serve({
-        port: env.PORT || 3000,
-        hostname: env.HOST || "0.0.0.0",
-        routes:{
-            ...routes,
-            ...metaRoutes,
-            "/favicon.ico": () => new Response(Bun.file("./public/favicon.ico"), {
-                headers: {
-                    "content-type": "image/x-icon",
-                }
-            }),
-            "/render.js": () => new Response((readFileSync("./public/render.js")), {
-                headers: {
-                    "Content-Type": "text/javascript; charset=utf-8",
-                    "Cache-Control": isDev ? "no-cache" : "public, max-age=31536000, immutable"
-                }
-            }),
-            "/*":
-            isDev ? devIndexHtml : 
-            async (request: Request) => {
-                const pathname = "/_WILDPIG_META_API/" + (request.url.split("/")[3].split("?")[0] || "");
-                let resHtml = htmlString;
-
-                if(pathname in metaRoutes){
-                    try{
-                        const metaResponse = await metaRoutes[pathname](request);
-                        const meta = await metaResponse.json();
-                        if(meta.title)resHtml = resHtml.replace("{{TITLE}}", meta.title);
-                        if(meta.description)resHtml = resHtml.replace("{{DESCRIPTION}}", meta.description);
-                        if(meta.keywords)resHtml = resHtml.replace("{{KEYWORDS}}", meta.keywords.join(", "));
-                    }catch(e){
-                        console.error("获取meta信息失败，请检查是否设置了meta信息", e);
-                    }
-                }
-
-                return new Response(resHtml, {
-                    headers: {
-                        "content-type": "text/html; charset=utf-8",
-                        "Access-Control-Allow-Origin": "*",
-                    }
-                })
-            },
-        },
-        development: isDev
-    })
-    console.clear();
-console.log(` __        __ _  _      _   ____   _        
- \\ \\      / /(_)| |  __| | |  _ \\ (_)  __ _ 
-  \\ \\ /\\ / / | || | / _\` | | |_) || | / _\` |
-   \\ V  V /  | || || (_| | |  __/ | || (_| |
-    \\_/\\_/   |_||_| \\__,_| |_|    |_| \\__, |
-                                      |___/ `)
-    console.log(chalk.blue.bgGreen("         🐗 WildPig version 1.1.6 by eriktse       "));
-    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://localhost" + ":" + (env.PORT || 3000)));
-}

package/scripts/genRoutes.ts

@@ -1,99 +0,0 @@
-// scripts/scan-routes.js
-import { middleware } from '@/middleware';
-import { statSync, readdirSync, writeFileSync } from 'fs';
-
-/** 获取文件的相对路径 */
-const getFilePaths = (dir: string) => {
-    const res: string[] = [];
-    const files = readdirSync(dir);
-    files.forEach(file => {
-        const filePath = `${dir}/${file}`;
-        const stat = statSync(filePath);
-        if (stat.isDirectory()) {
-            res.push(...getFilePaths(filePath));
-        } else {
-            res.push(filePath);
-        }
-    });
-    return res;
-}
-
-export const scanRoutes = () => {
-    // 扫描src文件夹
-    const files = getFilePaths("./src/api");
-    const routes: {[key: string]: {
-        GET?: (req: any) => any;
-        POST?: (req: any) => any;
-        PUT?: (req: any) => any;
-        DELETE?: (req: any) => any;
-    }} = {};
-
-
-    const routeScripts: {[key: string]: string} = {}; // 存储路由对应的脚本文件路径
-    for(const file of files) {
-        const filepath = file.replace("./", "#/");
-        if(!filepath.includes("index.ts")) continue;
-
-        // 尝试从文件中获取GET函数
-        const handler = require(filepath);
-        if(handler) {
-            const route = filepath.replace("#/src/api", "/api").replace("/index.ts", "");
-            routes[route] = {
-                GET: (req: any) => middleware(req, handler.GET),
-                POST: (req: any) => middleware(req, handler.POST),
-                PUT: (req: any) => middleware(req, handler.PUT),
-                DELETE: (req: any) => middleware(req, handler.DELETE),
-            };
-            routeScripts[route] = filepath;
-        }
-    }
-    return {routes, routeScripts};
-}
-
-export const genRoutes = async () => {
-    const {routeScripts} = scanRoutes();
-    let text = "import { middleware } from \"@/middleware\";\n\nexport default {\n";
-    for(const route in routeScripts) {
-        text += `"${route}": {`;
-        text += `GET: (req: any) => middleware(req, require("${routeScripts[route]}").GET), \n`;
-        text += `POST: (req: any) => middleware(req, require("${routeScripts[route]}").POST), \n`;
-        text += `PUT: (req: any) => middleware(req, require("${routeScripts[route]}").PUT), \n`;
-        text += `DELETE: (req: any) => middleware(req, require("${routeScripts[route]}").DELETE), \n`;
-        text += `},\n`;
-    }
-    text += "}";
-    writeFileSync("./build/built-routes.ts", text);
-}
-
-
-
-export const scanMetaRoutes = () => {
-    // 扫描src文件夹
-    const files = getFilePaths("./src/page");
-    const routes: {[key: string]: () => Promise<Response>} = {};
-    const routeScripts: {[key: string]: string} = {}; // 存储路由对应的脚本文件路径
-    for(const file of files) {
-        const filepath = file.replace("./", "#/");
-        if(!filepath.includes("meta.ts")) continue;
-        
-        // 尝试从文件中获取GET函数
-        const { getMeta } = require(filepath);
-        if( getMeta ) {
-            let route = filepath.replace("#/src/page", "").replace("/meta.ts", "");
-            route = "/_WILDPIG_META_API" + (route || "/");
-            routes[route] = getMeta;
-            routeScripts[route] = filepath;
-        }
-    }
-    return {routes, routeScripts};
-}
-
-export const genMetaRoutes = async () => {
-    const {routeScripts} = scanMetaRoutes();
-    let text = "export default {\n";
-    for(const route in routeScripts) {
-        text += `    "${route}": require("${routeScripts[route]}").getMeta, \n`;
-    }
-    text += "}";
-    writeFileSync("./build/built-meta-routes.ts", text);
-}

package/scripts/htmlString.ts

@@ -1,2 +0,0 @@
-import IndexHtml from "#/public/index.html" with { type: "text" };
-export const htmlString = (IndexHtml as unknown as string);

package/scripts/prebuild.ts

@@ -1,8 +0,0 @@
-import { genMetaRoutes, genRoutes } from "./genRoutes";
-import { packageStatic } from "./packageStatic";
-
-export const prebuild = async () => {
-    await packageStatic();
-    await genRoutes();
-    await genMetaRoutes();
-}