vafast 0.3.1 → 0.3.4

package/dist/server/component-server.js

@@ -1,146 +1,488 @@
-import { flattenComponentRoutes } from "../middleware/component-router";
-import { BaseServer } from "./base-server";
-import { PathMatcher } from "../utils/path-matcher";
-import { HtmlRenderer } from "../utils/html-renderer";
-import { DependencyManager } from "../utils/dependency-manager";
-/**
- * 组件路由服务器
- * 专门处理声明式组件路由
- */
-export class ComponentServer extends BaseServer {
-    routes;
-    dependencyManager;
-    constructor(routes) {
-        super();
-        this.routes = flattenComponentRoutes(routes);
-        this.dependencyManager = new DependencyManager();
-        // 检测路由冲突
-        this.detectRouteConflicts(this.routes);
-        this.logFlattenedRoutes(this.routes, "组件路由");
-        console.log("🚀 依赖按需加载，服务器启动完成");
-    }
-    /**
-     * 处理请求
-     */
-    async fetch(req) {
-        const url = new URL(req.url);
-        const pathname = url.pathname;
-        const method = req.method;
-        // 只支持 GET 请求
-        if (method !== "GET") {
-            return new Response("Method Not Allowed", { status: 405 });
-        }
-        // 查找匹配的路由
-        let matchedRoute = null;
-        for (const route of this.routes) {
-            if (PathMatcher.matchPath(route.fullPath, pathname)) {
-                matchedRoute = route;
-                break;
-            }
+// src/middleware/component-router.ts
+function flattenComponentRoutes(routes) {
+  const flattened = [];
+  function processRoute(route, parentPath = "", parentMiddleware = []) {
+    const currentPath = parentPath + route.path;
+    const currentMiddleware = [
+      ...parentMiddleware,
+      ...route.middleware || []
+    ];
+    if ("component" in route) {
+      flattened.push({
+        ...route,
+        fullPath: currentPath,
+        middlewareChain: currentMiddleware
+      });
+    } else if ("children" in route && route.children) {
+      for (const child of route.children) {
+        processRoute(child, currentPath, currentMiddleware);
+      }
+    }
+  }
+  for (const route of routes) {
+    processRoute(route);
+  }
+  return flattened;
+}
+
+// src/server/base-server.ts
+var BaseServer = class {
+  globalMiddleware = [];
+  use(mw) {
+    this.globalMiddleware.push(mw);
+  }
+  /**
+   * 打印扁平化后的路由信息，用于调试
+   */
+  logFlattenedRoutes(routes, type = "\u8DEF\u7531") {
+    console.log(`\u{1F680} \u6241\u5E73\u5316\u540E\u7684${type}:`);
+    for (const route of routes) {
+      const method = route.method || "GET";
+      const path = route.fullPath || route.path;
+      console.log(`  ${method} ${path}`);
+      if (route.middlewareChain && route.middlewareChain.length > 0) {
+        console.log(`    \u4E2D\u95F4\u4EF6\u94FE: ${route.middlewareChain.length} \u4E2A`);
+      }
+    }
+    console.log("");
+  }
+  /**
+   * 检测路由冲突
+   * 检查是否有路径相同但方法不同的路由，以及潜在的路径冲突
+   */
+  detectRouteConflicts(routes) {
+    const pathGroups = /* @__PURE__ */ new Map();
+    for (const route of routes) {
+      const path = route.fullPath || route.path;
+      const method = route.method || "GET";
+      if (!pathGroups.has(path)) {
+        pathGroups.set(path, []);
+      }
+      pathGroups.get(path).push({ ...route, method });
+    }
+    for (const [path, routeList] of pathGroups) {
+      if (routeList.length > 1) {
+        const methods = routeList.map((r) => r.method);
+        const uniqueMethods = [...new Set(methods)];
+        if (uniqueMethods.length === 1) {
+          console.warn(
+            `\u26A0\uFE0F  \u8DEF\u7531\u51B2\u7A81: ${uniqueMethods[0]} ${path} \u5B9A\u4E49\u4E86 ${routeList.length} \u6B21`
+          );
+          routeList.forEach((route, index) => {
+            console.warn(`   ${index + 1}. ${route.method} ${path}`);
+          });
+        } else {
+          console.log(`\u2139\uFE0F  \u8DEF\u5F84 ${path} \u652F\u6301\u65B9\u6CD5: ${uniqueMethods.join(", ")}`);
         }
-        if (!matchedRoute) {
-            return new Response("Not Found", { status: 404 });
+      }
+    }
+    this.detectDynamicRouteConflicts(routes);
+  }
+  /**
+   * 检测动态路由的潜在冲突
+   */
+  detectDynamicRouteConflicts(routes) {
+    const dynamicRoutes = routes.filter((r) => {
+      const path = r.fullPath || r.path;
+      return path.includes(":") || path.includes("*");
+    });
+    for (let i = 0; i < dynamicRoutes.length; i++) {
+      for (let j = i + 1; j < dynamicRoutes.length; j++) {
+        const route1 = dynamicRoutes[i];
+        const route2 = dynamicRoutes[j];
+        const method1 = route1.method || "GET";
+        const method2 = route2.method || "GET";
+        if (method1 === method2) {
+          const path1 = route1.fullPath || route1.path;
+          const path2 = route2.fullPath || route2.path;
+          if (this.pathsMayConflict(path1, path2)) {
+            console.warn(
+              `\u26A0\uFE0F  \u6F5C\u5728\u8DEF\u7531\u51B2\u7A81: ${method1} ${path1} \u53EF\u80FD\u4E0E ${path2} \u51B2\u7A81`
+            );
+          }
         }
-        try {
-            // 创建中间件上下文
-            const context = {
-                req,
-                params: PathMatcher.extractParams(matchedRoute.fullPath, pathname),
-                query: Object.fromEntries(url.searchParams),
-                pathname,
+      }
+    }
+  }
+  /**
+   * 判断两个路径是否可能冲突
+   */
+  pathsMayConflict(path1, path2) {
+    const parts1 = path1.split("/").filter(Boolean);
+    const parts2 = path2.split("/").filter(Boolean);
+    if (parts1.length !== parts2.length) return false;
+    for (let i = 0; i < parts1.length; i++) {
+      const p1 = parts1[i];
+      const p2 = parts2[i];
+      if (!p1.startsWith(":") && !p1.startsWith("*") && !p2.startsWith(":") && !p2.startsWith("*") && p1 !== p2) {
+        return false;
+      }
+      if (p1 === "*" && p2.startsWith(":") || p2 === "*" && p1.startsWith(":")) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * 路径匹配
+   */
+  matchPath(pattern, path) {
+    const patternParts = pattern.split("/").filter(Boolean);
+    const pathParts = path.split("/").filter(Boolean);
+    if (patternParts.length !== pathParts.length) {
+      return false;
+    }
+    for (let i = 0; i < patternParts.length; i++) {
+      if (patternParts[i] !== pathParts[i] && !patternParts[i].startsWith(":")) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * 提取路径参数
+   */
+  extractParams(pattern, path) {
+    const params = {};
+    const patternParts = pattern.split("/").filter(Boolean);
+    const pathParts = path.split("/").filter(Boolean);
+    for (let i = 0; i < patternParts.length; i++) {
+      if (patternParts[i].startsWith(":")) {
+        const paramName = patternParts[i].slice(1);
+        params[paramName] = pathParts[i];
+      }
+    }
+    return params;
+  }
+};
+
+// src/utils/path-matcher.ts
+var PathMatcher = class {
+  /**
+   * 路径匹配
+   */
+  static matchPath(pattern, path) {
+    const patternParts = pattern.split("/").filter(Boolean);
+    const pathParts = path.split("/").filter(Boolean);
+    if (patternParts.length !== pathParts.length) {
+      return false;
+    }
+    for (let i = 0; i < patternParts.length; i++) {
+      if (patternParts[i] !== pathParts[i] && !patternParts[i].startsWith(":")) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * 提取路径参数
+   */
+  static extractParams(pattern, path) {
+    const params = {};
+    const patternParts = pattern.split("/").filter(Boolean);
+    const pathParts = path.split("/").filter(Boolean);
+    for (let i = 0; i < patternParts.length; i++) {
+      if (patternParts[i].startsWith(":")) {
+        const paramName = patternParts[i].slice(1);
+        params[paramName] = pathParts[i];
+      }
+    }
+    return params;
+  }
+  /**
+   * 计算路径特异性分数
+   * 用于路由排序：静态 > 动态(:param) > 通配符(*)
+   */
+  static calculatePathScore(path) {
+    const parts = path.split("/").filter(Boolean);
+    let score = 0;
+    for (const p of parts) {
+      if (p === "*")
+        score += 1;
+      else if (p.startsWith(":"))
+        score += 2;
+      else score += 3;
+    }
+    return score * 10 + parts.length;
+  }
+  /**
+   * 判断两个路径是否可能冲突
+   */
+  static pathsMayConflict(path1, path2) {
+    const parts1 = path1.split("/").filter(Boolean);
+    const parts2 = path2.split("/").filter(Boolean);
+    if (parts1.length !== parts2.length) return false;
+    for (let i = 0; i < parts1.length; i++) {
+      const p1 = parts1[i];
+      const p2 = parts2[i];
+      if (!p1.startsWith(":") && !p1.startsWith("*") && !p2.startsWith(":") && !p2.startsWith("*") && p1 !== p2) {
+        return false;
+      }
+      if (p1 === "*" && p2.startsWith(":") || p2 === "*" && p1.startsWith(":")) {
+        return true;
+      }
+    }
+    return false;
+  }
+};
+
+// src/utils/html-renderer.ts
+var HtmlRenderer = class {
+  /**
+   * 生成基础HTML模板
+   */
+  static generateBaseHtml(content, context, clientScriptPath = "/client.js") {
+    return `
+      <!doctype html>
+      <html>
+        <head>
+          <meta charset="utf-8">
+          <title>Vafast SSR App</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+        </head>
+        <body>
+          <div id="app">${content}</div>
+          <script>
+            window.__ROUTE_INFO__ = {
+              params: ${JSON.stringify(context.params || {})},
+              query: ${JSON.stringify(context.query || {})},
+              pathname: '${context.pathname}'
             };
-            // 执行中间件链，中间件会处理组件渲染
-            return await this.executeMiddlewareChain(matchedRoute.middlewareChain, context, matchedRoute.component);
-        }
-        catch (error) {
-            console.error("组件渲染失败:", error);
-            return new Response("Internal Server Error", { status: 500 });
-        }
+          </script>
+          <script type="module" src="${clientScriptPath}"></script>
+        </body>
+      </html>
+    `;
+  }
+  /**
+   * 生成Vue组件HTML
+   */
+  static generateVueHtml(content, context, clientScriptPath = "/client.js") {
+    return this.generateBaseHtml(content, context, clientScriptPath);
+  }
+  /**
+   * 生成React组件HTML
+   */
+  static generateReactHtml(content, context, clientScriptPath = "/client.js") {
+    return `
+      <!doctype html>
+      <html>
+        <head>
+          <meta charset="utf-8">
+          <title>Vafast SSR App</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+        </head>
+        <body>
+          <div id="root">${content}</div>
+          <script>
+            window.__ROUTE_INFO__ = {
+              params: ${JSON.stringify(context.params || {})},
+              query: ${JSON.stringify(context.query || {})},
+              pathname: '${context.pathname}'
+            };
+          </script>
+          <script type="module" src="${clientScriptPath}"></script>
+        </body>
+      </html>
+    `;
+  }
+};
+
+// src/utils/dependency-manager.ts
+var DependencyManager = class {
+  dependencyCache = /* @__PURE__ */ new Map();
+  /**
+   * 按需获取框架依赖
+   */
+  async getFrameworkDeps(framework) {
+    if (this.dependencyCache.has(framework)) {
+      return this.dependencyCache.get(framework);
     }
-    /**
-     * 执行中间件链
-     */
-    async executeMiddlewareChain(middlewareChain, context, componentImport) {
-        // 创建最终的渲染函数
-        const renderComponent = async () => {
-            const componentModule = await componentImport();
-            const component = componentModule.default || componentModule;
-            // 自动检测组件类型
-            const componentType = this.dependencyManager.detectComponentType(component);
-            // 按需加载依赖
-            const deps = await this.dependencyManager.getFrameworkDeps(componentType);
-            // 根据组件类型渲染
-            if (componentType === "vue") {
-                return await this.renderVueComponent(component, context, deps);
-            }
-            else if (componentType === "react") {
-                return await this.renderReactComponent(component, context, deps);
-            }
-            else {
-                throw new Error(`不支持的组件类型: ${componentType}`);
-            }
-        };
-        // 执行中间件链
-        let index = 0;
-        const next = async () => {
-            if (index >= middlewareChain.length) {
-                return await renderComponent();
-            }
-            const middleware = middlewareChain[index++];
-            return await middleware(context.req, next);
-        };
-        return await next();
-    }
-    /**
-     * 渲染 Vue 组件
-     */
-    async renderVueComponent(component, context, deps) {
-        try {
-            const [vue, renderer] = deps;
-            const app = vue.createSSRApp(component);
-            // 提供路由信息
-            app.provide("routeInfo", {
-                params: context.params || {},
-                query: context.query || {},
-                pathname: context.pathname,
-            });
-            const html = await renderer.renderToString(app);
-            const fullHtml = HtmlRenderer.generateVueHtml(html, context);
-            return new Response(fullHtml, {
-                headers: { "Content-Type": "text/html; charset=utf-8" },
-            });
-        }
-        catch (error) {
-            console.error("Vue 组件渲染失败:", error);
-            return new Response("Vue Component Render Error", { status: 500 });
-        }
+    console.log(`\u{1F4E6} \u6309\u9700\u52A0\u8F7D ${framework} \u4F9D\u8D56...`);
+    try {
+      let deps;
+      switch (framework) {
+        case "vue":
+          deps = await Promise.all([
+            import("vue"),
+            import("@vue/server-renderer")
+          ]);
+          break;
+        case "react":
+          deps = await Promise.all([
+            import("react"),
+            import("react-dom/server")
+          ]);
+          break;
+        default:
+          throw new Error(`\u4E0D\u652F\u6301\u7684\u6846\u67B6: ${framework}`);
+      }
+      this.dependencyCache.set(framework, deps);
+      console.log(`\u2705 ${framework} \u4F9D\u8D56\u52A0\u8F7D\u5B8C\u6210`);
+      return deps;
+    } catch (error) {
+      console.error(`\u274C ${framework} \u4F9D\u8D56\u52A0\u8F7D\u5931\u8D25:`, error);
+      throw error;
     }
-    /**
-     * 渲染 React 组件
-     */
-    async renderReactComponent(component, context, deps) {
-        try {
-            const [react, renderer] = deps;
-            const content = react.createElement(component, {
-                req: context.req,
-                params: context.params || {},
-                query: context.query || {},
-            });
-            const html = renderer.renderToString(content);
-            const fullHtml = HtmlRenderer.generateReactHtml(html, context);
-            return new Response(fullHtml, {
-                headers: { "Content-Type": "text/html; charset=utf-8" },
-            });
-        }
-        catch (error) {
-            console.error("React 组件渲染失败:", error);
-            return new Response("React Component Render Error", { status: 500 });
-        }
+  }
+  /**
+   * 检测组件类型
+   */
+  detectComponentType(component) {
+    if (component.render && typeof component.render === "function") {
+      return "vue";
     }
-    /**
-     * 获取依赖管理器（用于外部访问）
-     */
-    getDependencyManager() {
-        return this.dependencyManager;
+    if (component.$$typeof) {
+      return "react";
     }
-}
+    return "vue";
+  }
+  /**
+   * 清除缓存
+   */
+  clearCache() {
+    this.dependencyCache.clear();
+    console.log("\u{1F9F9} \u4F9D\u8D56\u7F13\u5B58\u5DF2\u6E05\u9664");
+  }
+  /**
+   * 获取缓存状态
+   */
+  getCacheStatus() {
+    const status = {};
+    for (const [framework] of this.dependencyCache) {
+      status[framework] = true;
+    }
+    return status;
+  }
+};
+
+// src/server/component-server.ts
+var ComponentServer = class extends BaseServer {
+  routes;
+  dependencyManager;
+  constructor(routes) {
+    super();
+    this.routes = flattenComponentRoutes(routes);
+    this.dependencyManager = new DependencyManager();
+    this.detectRouteConflicts(this.routes);
+    this.logFlattenedRoutes(this.routes, "\u7EC4\u4EF6\u8DEF\u7531");
+    console.log("\u{1F680} \u4F9D\u8D56\u6309\u9700\u52A0\u8F7D\uFF0C\u670D\u52A1\u5668\u542F\u52A8\u5B8C\u6210");
+  }
+  /**
+   * 处理请求
+   */
+  async fetch(req) {
+    const url = new URL(req.url);
+    const pathname = url.pathname;
+    const method = req.method;
+    if (method !== "GET") {
+      return new Response("Method Not Allowed", { status: 405 });
+    }
+    let matchedRoute = null;
+    for (const route of this.routes) {
+      if (PathMatcher.matchPath(route.fullPath, pathname)) {
+        matchedRoute = route;
+        break;
+      }
+    }
+    if (!matchedRoute) {
+      return new Response("Not Found", { status: 404 });
+    }
+    try {
+      const context = {
+        req,
+        params: PathMatcher.extractParams(matchedRoute.fullPath, pathname),
+        query: Object.fromEntries(url.searchParams),
+        pathname
+      };
+      return await this.executeMiddlewareChain(
+        matchedRoute.middlewareChain,
+        context,
+        matchedRoute.component
+      );
+    } catch (error) {
+      console.error("\u7EC4\u4EF6\u6E32\u67D3\u5931\u8D25:", error);
+      return new Response("Internal Server Error", { status: 500 });
+    }
+  }
+  /**
+   * 执行中间件链
+   */
+  async executeMiddlewareChain(middlewareChain, context, componentImport) {
+    const renderComponent = async () => {
+      const componentModule = await componentImport();
+      const component = componentModule.default || componentModule;
+      const componentType = this.dependencyManager.detectComponentType(component);
+      const deps = await this.dependencyManager.getFrameworkDeps(componentType);
+      if (componentType === "vue") {
+        return await this.renderVueComponent(component, context, deps);
+      } else if (componentType === "react") {
+        return await this.renderReactComponent(component, context, deps);
+      } else {
+        throw new Error(`\u4E0D\u652F\u6301\u7684\u7EC4\u4EF6\u7C7B\u578B: ${componentType}`);
+      }
+    };
+    let index = 0;
+    const next = async () => {
+      if (index >= middlewareChain.length) {
+        return await renderComponent();
+      }
+      const middleware = middlewareChain[index++];
+      return await middleware(context.req, next);
+    };
+    return await next();
+  }
+  /**
+   * 渲染 Vue 组件
+   */
+  async renderVueComponent(component, context, deps) {
+    try {
+      const [vue, renderer] = deps;
+      const app = vue.createSSRApp(component);
+      app.provide("routeInfo", {
+        params: context.params || {},
+        query: context.query || {},
+        pathname: context.pathname
+      });
+      const html = await renderer.renderToString(app);
+      const fullHtml = HtmlRenderer.generateVueHtml(html, context);
+      return new Response(fullHtml, {
+        headers: { "Content-Type": "text/html; charset=utf-8" }
+      });
+    } catch (error) {
+      console.error("Vue \u7EC4\u4EF6\u6E32\u67D3\u5931\u8D25:", error);
+      return new Response("Vue Component Render Error", { status: 500 });
+    }
+  }
+  /**
+   * 渲染 React 组件
+   */
+  async renderReactComponent(component, context, deps) {
+    try {
+      const [react, renderer] = deps;
+      const content = react.createElement(component, {
+        req: context.req,
+        params: context.params || {},
+        query: context.query || {}
+      });
+      const html = renderer.renderToString(content);
+      const fullHtml = HtmlRenderer.generateReactHtml(html, context);
+      return new Response(fullHtml, {
+        headers: { "Content-Type": "text/html; charset=utf-8" }
+      });
+    } catch (error) {
+      console.error("React \u7EC4\u4EF6\u6E32\u67D3\u5931\u8D25:", error);
+      return new Response("React Component Render Error", { status: 500 });
+    }
+  }
+  /**
+   * 获取依赖管理器（用于外部访问）
+   */
+  getDependencyManager() {
+    return this.dependencyManager;
+  }
+};
+export {
+  ComponentServer
+};
+//# sourceMappingURL=component-server.js.map