wildpig 2.0.0 → 2.1.0

package/README.md

@@ -10,7 +10,7 @@
 
 * 前后端同构，一套代码，函数复用。
 
-* 【超级重要】SEO友好，支持服务端渲染meta信息。
+* 【超级重要】SEO友好，支持服务端渲染（首屏超快）。
 
 * 服务端路由根据文件路径自动生成。
 

package/index.ts

@@ -1,9 +1,7 @@
 
-import { build } from "./scripts/build";
-import { createServer } from "./scripts/server";
+import { onAfterStartServer } from "./src/hooks/afterStartServer";
 
 
-export { 
-    createServer,
-    build
+export {
+    onAfterStartServer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wildpig",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "eriktse",
   "type": "module",
   "peerDependencies": {

package/scripts/build.ts

@@ -1,70 +1,47 @@
 import path from "node:path";
-import { packageApiRoutes } from "./apiRoutes";
+import { packageApiRoutes } from "../src/ApiRoutes";
 import { build as viteBuild } from "vite";
-import { IBuildOptions } from "./types";
+import { IBuildOptions } from "../src/types";
 import chalk from "chalk";
 
 const __rootdir = path.resolve(__dirname, "../../../"); // 项目根目录
 
-const prebuild = async (options: IBuildOptions) => {
+const prebuild = async (options?: IBuildOptions) => {
     const promises = [];
     // 先编译客户端代码
     promises.push(viteBuild({
         configFile: path.resolve(__rootdir, "vite.config.ts"),
         build: {
-            outDir: path.resolve(__rootdir, options.outdir || "dist", "client"), // 输出目录
+            outDir: path.resolve(__rootdir, options?.outdir || "dist", "client"), // 输出目录
         },
     }));
-    // promises.push(viteBuild({
-    //     configFile: path.resolve(__rootdir, "vite.config.ts"),
-    //     build: {
-    //         rollupOptions:{
-    //             input: path.resolve(__dirname, "../entry/server.tsx"),
-    //         },
-    //         outDir: path.resolve(__rootdir, options.outdir || "dist", "server"), // 输出目录
-    //         ssr: true, // 开启ssr
-    //     },
-    // }));
     promises.push(packageApiRoutes());
     await Promise.all(promises);
 };
 
 
-export const build = async (options?: IBuildOptions) => {
-    options = Object.assign({
-        entry: "server.ts",
-        outdir: "dist",
-        minify: true,
-        target: "bun",
-        external: [],
-    }, options || {});
-
-
+export const build = async () => {
     console.log(chalk.green("开始构建..."));
-    console.log("构建参数：", options);
 
     // 准备阶段
     process.env.NODE_ENV = "production";
     const st = performance.now();
 
-
     // 前处理
-    await prebuild(options);
+    await prebuild();
     // 正式编译
     await Bun.build({
-        entrypoints: [path.resolve(__rootdir, options.entry || "server.ts")],
-        minify: options.minify || true, // 压缩
-        target: options.target || "bun",
-        outdir: options.outdir || "./dist",
+        entrypoints: [path.resolve(__dirname, "../scripts/prod.ts")],
+        minify: true, // 压缩
+        target: "bun",
+        outdir: "./dist",
         format: "esm",
-        external: ["vite", ...(options.external || [])],
-        define: {
-            "process.env.NODE_ENV": JSON.stringify("production"),
-        },
+        external: [],
     });
 
 
     console.log(chalk.green("🐗 [Wildpig] Build done, time:"), chalk.blue(performance.now() - st, "ms"));
     console.log(chalk.green(`✨ [Wildpig] Start by command:`), chalk.blue(`bun run start`));
-    return;
-}
+}
+
+build();

package/scripts/dev.ts

@@ -0,0 +1,25 @@
+import { createServer as createViteServer } from "vite";
+import path from "node:path";
+import { WildpigServer } from "../src/WildpigServer";
+import chalk from "chalk";
+
+
+const __dirname = import.meta.dirname;
+const __rootdir = path.resolve(__dirname, "../../../");
+
+// 启动vite server
+const viteServer = await createViteServer({
+    configFile: path.resolve(__rootdir, "./vite.config.ts"),
+});
+await viteServer.listen(viteServer.config.server.port);
+console.log(chalk.green(`Vite server running at port ${viteServer.config.server.port}`));
+
+
+try{
+    await import("../../../src/index.ts"!);
+}catch(e){
+    console.warn("未执行初始化代码，请检查文件是否存在：src/index.ts")
+}
+
+const wildpigServer = new WildpigServer(viteServer);
+await wildpigServer.createServer();

package/scripts/prod.ts

@@ -0,0 +1,10 @@
+import { WildpigServer } from "../src/WildpigServer";
+
+try{
+    await import("../../../src/index.ts"!);
+}catch(e){
+
+}
+
+const wildpigServer = new WildpigServer();
+await wildpigServer.createServer();

package/{scripts/apiRoutes.ts → src/ApiRoutes.ts}

@@ -2,8 +2,7 @@ import { readdirSync, statSync, writeFileSync } from "fs";
 import path from "node:path";
 const __dirname = import.meta.dirname;
 
-
-const middleware = (await import("@/endpoints/middleware"!)).middleware;
+const middleware = (await import("../../../src/endpoints/middleware"!)).middleware;
 
 const getFilePaths = (dir: string) => {
     const res: string[] = [];

package/src/WildpigServer.ts

@@ -0,0 +1,135 @@
+import { getApiRouteModules } from "./ApiRoutes";
+import { type ViteDevServer} from "vite";
+import { matchRoutes } from "react-router";
+import fs from "node:fs";
+import { WildPigRouteObject } from "../router/types";
+import packageInfo from "../package.json";
+import path from "node:path";
+import chalk from "chalk";
+
+const __dirname = import.meta.dirname;
+import { ICreateServerOptions } from "./types";
+import { handleAfterStartServer } from "./hooks/afterStartServer";
+
+const env = process.env;
+
+export class WildpigServer {
+    private viteServer: ViteDevServer | undefined;
+    constructor(viteServer?: ViteDevServer | undefined){
+        if(viteServer)this.viteServer = viteServer;
+    }
+
+    async frontHandler (apiModules: any){
+        return async (request: Request) => {
+            // 判断pathname是否匹配pageRoutes
+            const url = new URL(request.url);
+
+            // 判断是否是vite请求
+            if(url.pathname.includes(".") || url.pathname.startsWith("/@") || url.pathname.startsWith("/assets")){
+                if(this.viteServer){// 交给vite
+                    const viteURL = new URL(request.url);
+                    viteURL.port = this.viteServer.config.server.port.toString();
+                    const response = await fetch(viteURL.toString(), {
+                        method: request.method,
+                        headers: request.headers,
+                        body: request.body,
+                    });
+                    return response.clone();
+                }else{// production环境，直接返回文件
+                    const filepath = path.resolve(__dirname, "./client" + url.pathname);
+                    // 检查文件是否存在
+                    if(fs.existsSync(filepath) && fs.statSync(filepath).isFile()){
+                        return new Response(Bun.file(filepath), {
+                            headers: {
+                                "Cache-Control": "public, max-age=864000" // 10 天缓存
+                            }
+                        });
+                    }
+                    // 文件不存在
+                    return new Response("Not Found", {status: 404});
+                }
+            }
+            // 服务端请求，获取服务端数据
+            const routes = this.viteServer ? (await this.viteServer.ssrLoadModule("/node_modules/wildpig/router/index.ts"!)).routes as WildPigRouteObject[] : (await import("../router")).routes;
+            const matches = matchRoutes(routes, url.pathname);
+            if(!matches)return new Response("404 Not Found", { status: 404 });
+
+            // 请求服务端数据
+            const matchRoute = matches.at(-1)!;
+            let serverDataApi = matchRoute.route.serverDataApi;
+            let serverData = await (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 handler = apiModules?.[pathname]?.GET;
+                if(!handler)return undefined; // 没有对应的handler
+                const serverData = await handler(serverRequest).then((r: Response) => r.json());
+                return serverData;
+            })();
+
+            // 构造响应页面
+            // 1. 读取 index.html
+            const template = this.viteServer ? await this.viteServer.transformIndexHtml(request.url, fs.readFileSync('./index.html', 'utf-8')) : fs.readFileSync(path.resolve(__dirname, './client/index.html'), 'utf-8');
+            // 2. 获取渲染函数
+            const { render } = this.viteServer ? await this.viteServer.ssrLoadModule("/node_modules/wildpig/entry/server.tsx") : await import('../entry/server')
+            // 3. 获取应用程序 HTML
+            const appHtml = await render(request, serverData);
+
+            // 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": "*",
+                }
+            });
+        }
+    }
+    
+
+    /** 启动后的描述性文字 */
+    async afterStart (options?: ICreateServerOptions) {
+        // 启动后的文字
+        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 " + (options?.port || 3000)));
+        console.log(chalk.yellow(`💻 Wildpig is Running in ${chalk.yellow.bold(env.NODE_ENV)} mode.`));
+        if(this.viteServer)console.log(chalk.green("⚡ Vite server is running on port " + this.viteServer.config.server?.port));
+        console.log(chalk.green(`🔗 Click to debug in Browser: http://localhost:${options?.port || 3000}`));
+    }
+
+    async createServer (options?: ICreateServerOptions) {
+        const apiModules = await getApiRouteModules(env.NODE_ENV === "development" ? "dev" : "prod") as any;
+        const server = Bun.serve({
+            port: options?.port || 3000,
+            hostname: options?.host || "0.0.0.0",
+            routes:{
+                ...apiModules,
+                "/*": await this.frontHandler(apiModules),
+            },
+            development: env.NODE_ENV === "development",
+        })
+        await this.afterStart(options);
+        // 服务器创建好了， 触发afterStartServer回调
+        await handleAfterStartServer(server);
+        return server;
+    }
+}

package/src/hooks/afterStartServer.ts

@@ -0,0 +1,14 @@
+import { Server } from "bun";
+
+
+let afterStartServerCallbacks: ((server: Server<undefined>) => void)[] = [];
+
+export const onAfterStartServer = async (cb: (server: Server<undefined>) => void) => {
+    afterStartServerCallbacks.push(cb);
+}
+
+export const handleAfterStartServer = async (server: Server<undefined>) => {
+    for (const cb of afterStartServerCallbacks) {
+        cb(server);
+    }
+}

package/scripts/prodServer.ts

@@ -1,119 +0,0 @@
-import { getApiRouteModules } from "./apiRoutes";
-import fs from "node:fs";
-import { matchRoutes } from "react-router";
-import packageJson from "../package.json";
-import { ICreateServerOptions } from "./types";
-import { routes } from "../router";
-const env = process.env;
-// 用户代码（动态导入）
-import chalk from "chalk";
-
-const getPackageInfo = async () => {
-    return packageJson;
-}
-const packageInfo = await getPackageInfo();
-
-/** 启动后的描述性文字 */
-const afterStart = (options: ICreateServerOptions) => {
-// 启动后的文字
-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 play in Browser: http://localhost:${options.port}`));
-}
-
-export default async (options?: ICreateServerOptions) => {
-    options = Object.assign({
-        port: 3000,
-        host: "0.0.0.0",
-        showInfo: true,
-    }, options || {});
-
-    
-    const apiModules = await getApiRouteModules("prod") as any;
-    const server = Bun.serve({
-        port: options.port,
-        hostname: options.host,
-        routes:{
-            ...apiModules,
-            "/*": async (request: Request) => {
-                // 判断pathname是否匹配pageRoutes
-                const url = new URL(request.url);
-                if(url.pathname.includes(".") || url.pathname.startsWith("/@") || url.pathname.startsWith("/assets")){
-                    const filepath = "./client" + url.pathname;
-                    // 检查文件是否存在
-                    if(fs.existsSync(filepath) && fs.statSync(filepath).isFile()){
-                        return new Response(Bun.file(filepath), {
-                            headers: {
-                                "Cache-Control": "public, max-age=864000" // 10 天缓存
-                            }
-                        });
-                    }
-                    // 文件不存在
-                    return new Response("Not Found", {status: 404});
-                }
-
-                // 请求服务端数据
-                const matches = matchRoutes(routes, url.pathname);
-                if(!matches)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 handler = apiModules?.[pathname]?.GET;
-                    if(!handler)return undefined; // 没有对应的handler
-                    const serverData = await handler(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, serverData);
-
-                // 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,
-    });
-    if(options.showInfo)afterStart(options);
-    return server;
-}

package/scripts/server.ts

@@ -1,158 +0,0 @@
-import { getApiRouteModules } from "./apiRoutes";
-import { createServer as createViteServer, type ViteDevServer} from "vite";
-import { matchRoutes } from "react-router";
-import fs from "node:fs";
-import { WildPigRouteObject } from "../router/types";
-import packageInfo from "../package.json";
-
-
-const __dirname = import.meta.dirname;
-const __rootdir = path.resolve(__dirname, "../../../");
-import { ICreateServerOptions } from "./types";
-
-const env = process.env;
-
-
-
-// 用户代码
-import path from "node:path";
-import chalk from "chalk";
-
-
-// 启动vite server
-let viteServer: ViteDevServer;
-if(env.NODE_ENV === "development"){
-    viteServer = await createViteServer({
-        configFile: path.resolve(__rootdir, "./vite.config.ts"),
-    });
-    await viteServer.listen(viteServer.config.server.port);
-}
-
-
-const frontHandler = (apiModules: any) => async (request: Request) => {
-    // 判断pathname是否匹配pageRoutes
-    const url = new URL(request.url);
-
-    // 判断是否是vite请求
-    if(url.pathname.includes(".") || url.pathname.startsWith("/@") || url.pathname.startsWith("/assets")){
-        if(env.NODE_ENV === "development"){// 交给vite
-            const viteURL = new URL(request.url);
-            viteURL.port = viteServer.config.server.port.toString();
-            const response = await fetch(viteURL.toString(), {
-                method: request.method,
-                headers: request.headers,
-                body: request.body,
-            });
-            return response.clone();
-        }else{// production环境，直接返回文件
-            const filepath = "./client" + url.pathname;
-            // 检查文件是否存在
-            if(fs.existsSync(filepath) && fs.statSync(filepath).isFile()){
-                return new Response(Bun.file(filepath), {
-                    headers: {
-                        "Cache-Control": "public, max-age=864000" // 10 天缓存
-                    }
-                });
-            }
-            // 文件不存在
-            return new Response("Not Found", {status: 404});
-        }
-    }
-
-
-
-    // 服务端请求，获取服务端数据
-    const routes = viteServer ? (await viteServer.ssrLoadModule("/node_modules/wildpig/router/index.ts"!)).routes as WildPigRouteObject[] : (await import("../router")).routes;
-    const matches = matchRoutes(routes, url.pathname);
-    if(!matches)return new Response("404 Not Found", { status: 404 });
-
-    // 请求服务端数据
-    const matchRoute = matches.at(-1)!;
-    let serverDataApi = matchRoute.route.serverDataApi;
-    let serverData = await (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 handler = apiModules?.[pathname]?.GET;
-        if(!handler)return undefined; // 没有对应的handler
-        const serverData = await handler(serverRequest).then((r: Response) => r.json());
-        return serverData;
-    })();
-
-
-
-
-    // 构造响应页面
-    // 1. 读取 index.html
-    const template = viteServer ? await viteServer.transformIndexHtml(request.url, fs.readFileSync('./index.html', 'utf-8')) : fs.readFileSync(path.resolve(__dirname, './client/index.html'), 'utf-8');
-    // 2. 获取渲染函数
-    const render = (await import('../entry/server')).render
-    // 3. 获取应用程序 HTML
-    const appHtml = await render(request, serverData);
-
-    // 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 afterStart = async (options: ICreateServerOptions) => {
-// 启动后的文字
-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 " + options.port || 3000));
-console.log(chalk.yellow(`💻 Wildpig is Running in ${chalk.yellow.bold(env.NODE_ENV)} mode.`));
-if(viteServer)console.log(chalk.green("⚡ Vite server is running on port " + viteServer.config.server?.port));
-console.log(chalk.green(`🔗 Click to debug in Browser: http://localhost:${options.port}`));
-}
-
-export const createServer = async (options?: ICreateServerOptions) => {
-    options = Object.assign({
-        port: 3000,
-        host: "0.0.0.0",
-        showInfo: true,
-    }, options || {});
-
-    // 确保重启后可以重新拿到路由
-    const apiModules = await getApiRouteModules(env.NODE_ENV === "development" ? "dev" : "prod") as any;
-    const server = Bun.serve({
-        port: options.port,
-        hostname: options.host,
-        routes:{
-            ...apiModules,
-            "/*": frontHandler(apiModules),
-        },
-        development: env.NODE_ENV === "development",
-    })
-    if(options.showInfo)await afterStart(options);
-    return server;
-}