wildpig 1.2.0 → 1.3.1

package/bin/cli.ts

@@ -0,0 +1,40 @@
+import chalk from "chalk";
+import { build } from "../scripts/build";
+import { spawn } from "bun";
+const command = process.argv[2];
+
+if(command === "start"){
+    // 设置一些环境变量
+    process.env.NODE_ENV = "production";
+    console.log(chalk.green("✨ [Wildpig] Start production server..."));
+    const st = performance.now();
+    // 启动二进制文件
+    spawn(["server"], {
+        cwd: "./dist",
+        stdout: "inherit",
+        env: {
+            ...process.env
+        }
+    });
+    const ed = performance.now();
+    setTimeout(() => {
+        console.log(chalk.green("✨ [Wildpig] Production server started in " + Math.floor(ed - st) + "ms"));
+    }, 300);
+}
+
+
+if(command === "dev"){
+    // 设置一些环境变量
+    process.env.NODE_ENV = "development";
+    await import("../scripts/server");
+}
+
+
+if(command === "build"){
+    // 设置一些环境变量
+    process.env.NODE_ENV = "production";
+    const st = performance.now();
+    await build();
+    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`));
+}

package/build/built-api-routes.ts

@@ -1,13 +1,16 @@
-import { middleware } from "@/middleware" 
+import { middleware } from "@/api/middleware" 
 import {
 	GET as GET1,
 	POST as POST1,
 } from "#/src/api/hello/index";
 import {
 	GET as GET2,
-} from "#/src/api/server-data/hello/index";
+} from "#/src/api/hello/[id]/index";
 import {
 	GET as GET3,
+} from "#/src/api/server-data/hello/[id]/index";
+import {
+	GET as GET4,
 } from "#/src/api/server-data/home/index";
 
 export default {
@@ -15,10 +18,13 @@ export default {
 		GET: (req: any) => middleware(req, GET1),
 		POST: (req: any) => middleware(req, POST1),
 	},
-	"/api/server-data/hello": {
+	"/api/hello/:id": {
 		GET: (req: any) => middleware(req, GET2),
 	},
-	"/api/server-data/home": {
+	"/api/server-data/hello/:id": {
 		GET: (req: any) => middleware(req, GET3),
 	},
+	"/api/server-data/home": {
+		GET: (req: any) => middleware(req, GET4),
+	},
 }

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "wildpig",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "author": "eriktse",
   "main": "index.ts",
+  "bin":{
+    "wildpig": "./bin/cli.ts"
+  },
   "dependencies": {
     "@nanostores/react": "^1.0.0",
     "@types/bun": "^1.3.4",
@@ -23,10 +26,8 @@
   ],
   "license": "ISC",
   "scripts": {
-    "dev": "export NODE_ENV=development && bun run --no-cache --hot test.ts",
-    "prebuild": "bun run scripts/run-prebuild.ts",
-    "build": "bun run prebuild && bun build --production --compile ./test.ts --outfile dist/wildpig",
-    "build-linux-musl": "export NODE_ENV=production && bun build --compile --target=bun-linux-x64-musl ./test.ts --outfile dist/wildpig",
-    "start": "cd dist && ./wildpig"
+    "dev": "wildpig dev",
+    "build": "wildpig build",
+    "start": "wildpig start"
   }
 }

package/public/render.js

@@ -28016,6 +28016,9 @@ function listenKeys($store, keys, listener) {
 // store/serverDataStore.tsx
 var serverDataStore = atom(undefined);
 
+// router/ServerDataGuard.tsx
+var import_react4 = __toESM(require_react(), 1);
+
 // node_modules/@nanostores/react/index.js
 var import_react = __toESM(require_react(), 1);
 var emit = (snapshotRef, onChange) => (value) => {
@@ -28044,8 +28047,6 @@ function Index() {
   import_react3.useEffect(() => {
     console.log("index serverData", serverData);
   }, [serverData]);
-  if (serverData === undefined)
-    return "啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊";
   return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
     children: [
       /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
@@ -28088,9 +28089,9 @@ var routes_default = [
     Component: MainLayout,
     children: [
       {
-        index: true,
+        path: "/hello/:id",
         Component: Index,
-        serverDataApi: "/api/server-data/hello"
+        serverDataApi: "/api/server-data/hello/:id"
       }
     ]
   },
@@ -28102,7 +28103,6 @@ var routes_default = [
 ];
 
 // router/ServerDataGuard.tsx
-var import_react4 = __toESM(require_react(), 1);
 var jsx_dev_runtime4 = __toESM(require_jsx_dev_runtime(), 1);
 var ServerDataGuard = () => {
   const location = useLocation();
@@ -28116,9 +28116,13 @@ var ServerDataGuard = () => {
       navigate("/404");
       return;
     }
-    const serverDataApi = lastMatch.route.serverDataApi;
+    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((data2) => {
       serverDataStore.set(data2);
       if (data2.title) {

package/router/ServerDataGuard.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react"
 import { matchRoutes, Outlet, useLocation, useNavigate } from "react-router"
 import pageRoutes from "@/router/routes";
-import { serverDataStore } from "#/store/serverDataStore";
+import { serverDataStore } from "../store/serverDataStore";
 
 export const ServerDataGuard = () => {
     const location = useLocation();
@@ -19,9 +19,13 @@ export const ServerDataGuard = () => {
             return;
         }
         // 成功匹配
-        const serverDataApi = lastMatch.route.serverDataApi;
+        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){

package/router/index.ts

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

package/scripts/WildPig.tsx

@@ -8,39 +8,46 @@ 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: ["./public/render.tsx"],
-        outdir: "./public",
+        entrypoints: [path.resolve(__dirname, "../public/render.tsx")],
+        outdir: path.resolve(__dirname, "../public"),
         format: "esm",
         minify: false,
     });
 }
 
-
-export const startServer = () => {
+export const startServer = async () => {
     Bun.serve({
-        port: env.PORT || 3000,
-        hostname: env.HOST || "0.0.0.0",
+        port,
+        hostname,
         routes:{
             ...apiModules,
+            // 这个来自用户文件
             "/favicon.ico": () => new Response(Bun.file("./public/favicon.ico"), {
                 headers: {
                     "content-type": "image/x-icon",
                 }
             }),
-            "/render.js": () => new Response((readFileSync("./public/render.js")), {
+            "/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"
@@ -67,7 +74,6 @@ export const startServer = () => {
 
                 // 请求服务端数据
                 const matchRoute = matches.at(-1)!;
-                console.log(matchRoute);
                 let serverDataApi = matchRoute.route.serverDataApi;
                 const getServerData = async () => {
                     if(!serverDataApi)return undefined;
@@ -76,17 +82,11 @@ export const startServer = () => {
                         if(value)serverDataApi = serverDataApi.replace(":" + key, value);
                     }
                     const pathname = serverDataApi.split("?")[0]; // 获取路径
-
-                    const handler = apiModules[pathname];
-                    if(handler){
-                        const serverDataResponse = await handler.GET(request) as Response;
-                        return await serverDataResponse.json();
-                    }else{
-                        console.debug("No handler for pathname: ", pathname);
-                    }
-                }
+                    const handleUrl = "http://" + hostname + ":" + port + pathname;
+                    const serverData = await fetch(handleUrl).then(r => r.json());
+                    return serverData;
+                };
                 let serverData = await getServerData();
-                console.debug("serverData: ", serverData);
 
 
                 const stream = await renderToReadableStream(<App router={router} serverData={serverData} />);
@@ -98,22 +98,7 @@ export const startServer = () => {
                 })
             },
         },
-        development: isDev
+        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/apiRoutes.ts

@@ -1,5 +1,5 @@
 import { readdirSync, statSync, writeFileSync } from "fs";
-import { middleware } from "@/middleware";
+import { middleware } from "@/api/middleware";
 
 const getFilePaths = (dir: string) => {
     const res: string[] = [];
@@ -16,8 +16,11 @@ const getFilePaths = (dir: string) => {
     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> = {};
@@ -37,7 +40,7 @@ export const makeApiRoutePathObj = () => {
 export const packageApiRoutes = async () => {
     const apiRoutes = makeApiRoutePathObj();
     let identId = 0;
-    let importsText = `import { middleware } from "@/middleware" \n`;
+    let importsText = `import { middleware } from "@/api/middleware" \n`;
     let routesText = "export default {\n";
     for(const route of Object.keys(apiRoutes)) {
         const importPath = apiRoutes[route];
@@ -48,7 +51,7 @@ export const packageApiRoutes = async () => {
         // 标识id
         identId ++;
         importsText += `import {\n`;
-        routesText += `\t"${route}": {\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`;
@@ -80,9 +83,11 @@ export const getApiRouteModules = async (mode: "dev" | "prod") => {
             if(!module.GET && !module.POST) continue;
 
             // 新建一个路由
-            result[route] = {};
-            if(module.GET) result[route].GET = (req: any) => middleware(req, module.GET);
-            if(module.POST) result[route].POST = (req: any) => middleware(req, module.POST);
+            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 {

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/index.ts

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

package/scripts/prebuild.ts

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

package/scripts/run-prebuild.ts

@@ -1,2 +0,0 @@
-import { prebuild } from "./prebuild";
-prebuild();