@umijs/server 4.0.0-canary.20240321.1 → 4.0.0-canary.20240419.1

package/dist/ssr.d.ts

@@ -1,5 +1,7 @@
+/// <reference lib="webworker" />
+import type { RequestHandler } from '@umijs/bundler-utils/compiled/express';
 import React from 'react';
-import type { UmiRequest } from './types';
+import type { IhtmlPageOpts, UmiRequest } from './types';
 interface RouteLoaders {
     [key: string]: () => Promise<any>;
 }
@@ -12,22 +14,31 @@ interface CreateRequestServerlessOptions {
 }
 interface CreateRequestHandlerOptions extends CreateRequestServerlessOptions {
     routesWithServerLoader: RouteLoaders;
-    PluginManager: any;
+    pluginManager: any;
     manifest: ((sourceDir?: string) => {
         assets: Record<string, string>;
     }) | {
         assets: Record<string, string>;
     };
-    getPlugins: () => any;
-    getValidKeys: () => any;
     getRoutes: (PluginManager: any) => any;
     getClientRootComponent: (PluginManager: any) => any;
     createHistory: (opts: any) => any;
     helmetContext?: any;
     ServerInsertedHTMLContext: React.Context<ServerInsertedHTMLHook | null>;
+    htmlPageOpts: IhtmlPageOpts;
+    renderFromRoot: boolean;
+    mountElementId: string;
 }
 export declare function createMarkupGenerator(opts: CreateRequestHandlerOptions): (url: string) => Promise<unknown>;
-export default function createRequestHandler(opts: CreateRequestHandlerOptions): (req: any, res: any, next: any) => Promise<any>;
+declare type IExpressRequestHandlerArgs = Parameters<RequestHandler>;
+declare type IWorkerRequestHandlerArgs = [
+    ev: FetchEvent,
+    opts?: {
+        modifyResponse?: (res: Response) => Promise<Response> | Response;
+    }
+];
+export default function createRequestHandler(opts: CreateRequestHandlerOptions): (...args: IExpressRequestHandlerArgs | IWorkerRequestHandlerArgs) => Promise<void>;
 export declare function createUmiHandler(opts: CreateRequestHandlerOptions): (req: UmiRequest, params?: CreateRequestHandlerOptions) => Promise<NodeJS.ReadableStream>;
 export declare function createUmiServerLoader(opts: CreateRequestHandlerOptions): (req: UmiRequest) => Promise<any>;
+export declare function createAppRootElement(opts: CreateRequestHandlerOptions): (...args: IExpressRequestHandlerArgs | IWorkerRequestHandlerArgs) => Promise<() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined>;
 export {};

package/dist/ssr.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/ssr.ts
 var ssr_exports = {};
 __export(ssr_exports, {
+  createAppRootElement: () => createAppRootElement,
   createMarkupGenerator: () => createMarkupGenerator,
   createUmiHandler: () => createUmiHandler,
   createUmiServerLoader: () => createUmiServerLoader,
@@ -39,7 +40,16 @@ var import_react = __toESM(require("react"));
 var ReactDomServer = __toESM(require("react-dom/server"));
 var import_react_router_dom = require("react-router-dom");
 var import_stream = require("stream");
-var createJSXProvider = (Provider, serverInsertedHTMLCallbacks) => {
+var MetaLoaderResultKeys = /* @__PURE__ */ ((MetaLoaderResultKeys2) => {
+  MetaLoaderResultKeys2["Title"] = "title";
+  MetaLoaderResultKeys2["Description"] = "description";
+  MetaLoaderResultKeys2["Keywords"] = "keywords";
+  MetaLoaderResultKeys2["Lang"] = "lang";
+  MetaLoaderResultKeys2["Metas"] = "metas";
+  return MetaLoaderResultKeys2;
+})(MetaLoaderResultKeys || {});
+var createJSXProvider = (Provider) => {
+  const serverInsertedHTMLCallbacks = /* @__PURE__ */ new Set();
   const JSXProvider = (props) => {
     const addInsertedHtml = import_react.default.useCallback(
       (handler) => {
@@ -52,26 +62,20 @@ var createJSXProvider = (Provider, serverInsertedHTMLCallbacks) => {
       value: addInsertedHtml
     });
   };
-  return JSXProvider;
+  return [JSXProvider, serverInsertedHTMLCallbacks];
 };
 function createJSXGenerator(opts) {
   return async (url, serverLoaderArgs) => {
     const {
       routesWithServerLoader,
-      PluginManager,
-      getPlugins,
-      getValidKeys,
+      pluginManager,
       getRoutes,
       createHistory,
       sourceDir
     } = opts;
     createHistory({ type: "memory", initialEntries: [url], initialIndex: 1 });
-    const pluginManager = PluginManager.create({
-      plugins: getPlugins(),
-      validKeys: getValidKeys()
-    });
     const { routes, routeComponents } = await getRoutes(pluginManager);
-    await pluginManager.applyPlugins({
+    pluginManager.applyPlugins({
       key: "patchRoutes",
       type: "event",
       args: {
@@ -84,7 +88,6 @@ function createJSXGenerator(opts) {
       return;
     }
     const loaderData = {};
-    const metadata = {};
     await Promise.all(
       matches.filter((id) => routes[id].hasServerLoader).map(
         (id) => new Promise(async (resolve) => {
@@ -94,15 +97,19 @@ function createJSXGenerator(opts) {
             serverLoaderArgs
           });
           if (routes[id].hasMetadataLoader) {
-            Object.assign(
-              metadata,
-              await executeMetadataLoader({
-                routesWithServerLoader,
-                routeKey: id,
-                serverLoaderArgs,
-                serverLoaderData: loaderData[id]
-              })
-            );
+            const metadataLoaderData = await executeMetadataLoader({
+              routesWithServerLoader,
+              routeKey: id,
+              serverLoaderArgs,
+              serverLoaderData: loaderData[id]
+            });
+            metadataLoaderData && Object.entries(metadataLoaderData).forEach(([k, v]) => {
+              if (Array.isArray(v)) {
+                opts.htmlPageOpts[k] = (opts.htmlPageOpts[k] || []).concat(v);
+              } else {
+                opts.htmlPageOpts[k] = v;
+              }
+            });
           }
           resolve();
         })
@@ -116,7 +123,9 @@ function createJSXGenerator(opts) {
       location: url,
       manifest,
       loaderData,
-      metadata
+      htmlPageOpts: opts.htmlPageOpts,
+      renderFromRoot: opts.renderFromRoot,
+      mountElementId: opts.mountElementId
     };
     const element = await opts.getClientRootComponent(
       context
@@ -127,13 +136,19 @@ function createJSXGenerator(opts) {
     };
   };
 }
-var getGenerateStaticHTML = (serverInsertedHTMLCallbacks) => {
+var SERVER_INSERTED_HTML = "umi-server-inserted-html";
+var getGenerateStaticHTML = (serverInsertedHTMLCallbacks, opts) => {
+  const children = import_react.default.createElement(import_react.default.Fragment, {
+    children: Array.from(serverInsertedHTMLCallbacks || []).map(
+      (callback) => callback()
+    )
+  });
   return ReactDomServer.renderToString(
-    import_react.default.createElement(import_react.default.Fragment, {
-      children: Array.from(serverInsertedHTMLCallbacks || []).map(
-        (callback) => callback()
-      )
-    })
+    (opts == null ? void 0 : opts.wrapper) ? import_react.default.createElement(
+      "div",
+      { id: SERVER_INSERTED_HTML, hidden: true },
+      children
+    ) : children
   ) || "";
 };
 function createMarkupGenerator(opts) {
@@ -142,10 +157,8 @@ function createMarkupGenerator(opts) {
     const jsx = await jsxGeneratorDeferrer(url);
     if (jsx) {
       return new Promise(async (resolve, reject) => {
-        const serverInsertedHTMLCallbacks = /* @__PURE__ */ new Set();
-        const JSXProvider = createJSXProvider(
-          opts.ServerInsertedHTMLContext.Provider,
-          serverInsertedHTMLCallbacks
+        const [JSXProvider, serverInsertedHTMLCallbacks] = createJSXProvider(
+          opts.ServerInsertedHTMLContext.Provider
         );
         let chunks = [];
         const writable = new import_stream.Writable();
@@ -155,7 +168,10 @@ function createMarkupGenerator(opts) {
         };
         writable.on("finish", async () => {
           let html = Buffer.concat(chunks).toString("utf8");
-          html += await getGenerateStaticHTML(serverInsertedHTMLCallbacks);
+          const serverHTML = getGenerateStaticHTML(serverInsertedHTMLCallbacks);
+          if (serverHTML) {
+            html = html.replace(/<\/head>/, `${serverHTML}</head>`);
+          }
           if (opts.helmetContext) {
             html = html.replace(
               /(<\/head>)/,
@@ -185,50 +201,198 @@ function createMarkupGenerator(opts) {
     return "";
   };
 }
+var normalizeRequest = (...args) => {
+  var _a, _b;
+  let request;
+  let serverLoaderRequest;
+  let serverLoaderArgs;
+  if (process.env.SSR_BUILD_TARGET === "worker") {
+    const [ev] = args;
+    const { pathname, searchParams } = new URL(ev.request.url);
+    request = {
+      url: ev.request.url,
+      pathname,
+      headers: ev.request.headers,
+      query: {
+        route: searchParams.get("route"),
+        url: searchParams.get("url")
+      }
+    };
+  } else {
+    const [req] = args;
+    request = {
+      url: `${req.protocol}://${req.get("host")}${req.originalUrl}`,
+      pathname: req.url,
+      headers: req.headers,
+      query: {
+        route: (_a = req.query.route) == null ? void 0 : _a.toString(),
+        url: (_b = req.query.url) == null ? void 0 : _b.toString()
+      }
+    };
+  }
+  if (request.pathname.startsWith("/__serverLoader") && request.query.route && request.query.url) {
+    serverLoaderRequest = new Request(request.query.url, {
+      headers: request.headers
+    });
+    serverLoaderArgs = {
+      request: serverLoaderRequest
+    };
+  }
+  return {
+    request,
+    serverLoaderArgs
+  };
+};
 function createRequestHandler(opts) {
   const jsxGeneratorDeferrer = createJSXGenerator(opts);
-  return async function(req, res, next) {
-    if (req.url.startsWith("/__serverLoader") && req.query.route) {
-      const serverLoaderRequest = new Request(req.query.url, {
-        headers: req.headers
-      });
+  const normalizeHandlerArgs = (...args) => {
+    let ret;
+    const { request } = normalizeRequest(...args);
+    const replaceServerHTMLScript = `<script>!function(){var e=document.getElementById("${SERVER_INSERTED_HTML}");e&&(Array.from(e.children).forEach(e=>{document.head.appendChild(e)}),e.remove())}();</script>`;
+    if (process.env.SSR_BUILD_TARGET === "worker") {
+      const [ev, workerOpts] = args;
+      let asyncRespondWith;
+      ev.respondWith(new Promise((r) => asyncRespondWith = r));
+      ret = {
+        req: request,
+        async sendServerLoader(data) {
+          let res = new Response(JSON.stringify(data), {
+            headers: {
+              "content-type": "application/json; charset=utf-8"
+            },
+            status: 200
+          });
+          if (workerOpts == null ? void 0 : workerOpts.modifyResponse) {
+            res = await workerOpts.modifyResponse(res);
+          }
+          asyncRespondWith(res);
+        },
+        async sendPage(jsx) {
+          const [JSXProvider, serverInsertedHTMLCallbacks] = createJSXProvider(
+            opts.ServerInsertedHTMLContext.Provider
+          );
+          const stream = await ReactDomServer.renderToReadableStream(
+            import_react.default.createElement(JSXProvider, void 0, jsx.element),
+            {
+              bootstrapScripts: [jsx.manifest.assets["umi.js"] || "/umi.js"],
+              onError(x) {
+                console.error(x);
+              }
+            }
+          );
+          const transformStream = new TransformStream({
+            flush(controller) {
+              if (serverInsertedHTMLCallbacks.size) {
+                const serverHTML = getGenerateStaticHTML(
+                  serverInsertedHTMLCallbacks,
+                  { wrapper: true }
+                );
+                controller.enqueue(serverHTML);
+                controller.enqueue(replaceServerHTMLScript);
+              }
+            }
+          });
+          let res = new Response(stream.pipeThrough(transformStream), {
+            headers: {
+              "content-type": "text/html; charset=utf-8"
+            },
+            status: 200
+          });
+          if (workerOpts == null ? void 0 : workerOpts.modifyResponse) {
+            res = await workerOpts.modifyResponse(res);
+          }
+          asyncRespondWith(res);
+        },
+        otherwise() {
+          throw new Error("no page resource");
+        }
+      };
+    } else {
+      const [_, res, next] = args;
+      ret = {
+        req: request,
+        sendServerLoader(data) {
+          res.status(200).json(data);
+        },
+        async sendPage(jsx) {
+          const [JSXProvider, serverInsertedHTMLCallbacks] = createJSXProvider(
+            opts.ServerInsertedHTMLContext.Provider
+          );
+          const writable = new import_stream.Writable();
+          res.type("html");
+          writable._write = (chunk, _encoding, cb) => {
+            res.write(chunk);
+            cb();
+          };
+          writable.on("finish", async () => {
+            if (serverInsertedHTMLCallbacks.size) {
+              res.write(
+                getGenerateStaticHTML(serverInsertedHTMLCallbacks, {
+                  wrapper: true
+                })
+              );
+              res.write(replaceServerHTMLScript);
+            }
+            res.end();
+          });
+          const stream = ReactDomServer.renderToPipeableStream(
+            import_react.default.createElement(JSXProvider, void 0, jsx.element),
+            {
+              bootstrapScripts: [jsx.manifest.assets["umi.js"] || "/umi.js"],
+              onShellReady() {
+                stream.pipe(writable);
+              },
+              onError(x) {
+                console.error(x);
+              }
+            }
+          );
+        },
+        otherwise: next
+      };
+    }
+    return ret;
+  };
+  return async function unifiedRequestHandler(...args) {
+    const { req, sendServerLoader, sendPage, otherwise } = normalizeHandlerArgs(
+      ...args
+    );
+    if (req.pathname.startsWith("/__serverLoader") && req.query.route && req.query.url) {
+      const { serverLoaderArgs } = normalizeRequest(...args);
       const data = await executeLoader({
         routeKey: req.query.route,
         routesWithServerLoader: opts.routesWithServerLoader,
-        serverLoaderArgs: { request: serverLoaderRequest }
+        serverLoaderArgs
       });
-      res.status(200).json(data);
-      return;
-    }
-    const fullUrl = `${req.protocol}://${req.get("host")}${req.originalUrl}`;
-    const request = new Request(fullUrl, {
-      headers: req.headers
-    });
-    const jsx = await jsxGeneratorDeferrer(req.url, { request });
-    if (!jsx)
-      return next();
-    const writable = new import_stream.Writable();
-    writable._write = (chunk, _encoding, next2) => {
-      res.write(chunk);
-      next2();
-    };
-    writable.on("finish", async () => {
-      res.write(await getGenerateStaticHTML());
-      res.end();
-    });
-    const stream = await ReactDomServer.renderToPipeableStream(jsx.element, {
-      bootstrapScripts: [jsx.manifest.assets["umi.js"] || "/umi.js"],
-      onShellReady() {
-        stream.pipe(writable);
-      },
-      onError(x) {
-        console.error(x);
+      await sendServerLoader(data);
+    } else {
+      const render = opts.pluginManager.applyPlugins({
+        key: "render",
+        type: "compose",
+        initialValue: () => jsxGeneratorDeferrer(req.pathname, {
+          request: new Request(req.url, {
+            headers: req.headers
+          })
+        })
+      });
+      const jsx = await render();
+      if (jsx) {
+        await sendPage(jsx);
+      } else {
+        await otherwise();
       }
-    });
+    }
   };
 }
 function createUmiHandler(opts) {
+  let isWarned = false;
   return async function(req, params) {
+    if (!isWarned) {
+      console.warn(
+        "[umi] `renderRoot` is deprecated, please use `requestHandler` instead"
+      );
+      isWarned = true;
+    }
     const jsxGeneratorDeferrer = createJSXGenerator({
       ...opts,
       ...params
@@ -247,7 +411,14 @@ function createUmiHandler(opts) {
   };
 }
 function createUmiServerLoader(opts) {
+  let isWarned = false;
   return async function(req) {
+    if (!isWarned) {
+      console.warn(
+        "[umi] `serverLoader` is deprecated, please use `requestHandler` instead"
+      );
+      isWarned = true;
+    }
     const query = Object.fromEntries(new URL(req.url).searchParams);
     const serverLoaderRequest = new Request(query.url, {
       headers: req.headers
@@ -259,6 +430,14 @@ function createUmiServerLoader(opts) {
     });
   };
 }
+function createAppRootElement(opts) {
+  return async (...args) => {
+    const jsxGeneratorDeferrer = createJSXGenerator(opts);
+    const { request, serverLoaderArgs } = normalizeRequest(...args);
+    const jsx = await jsxGeneratorDeferrer(request.pathname, serverLoaderArgs);
+    return () => jsx == null ? void 0 : jsx.element;
+  };
+}
 function matchRoutesForSSR(reqUrl, routesById) {
   var _a;
   return ((_a = (0, import_react_router_dom.matchRoutes)(createClientRoutes({ routesById }), reqUrl)) == null ? void 0 : _a.map(
@@ -296,23 +475,24 @@ async function executeLoader(params) {
   return mod.serverLoader(serverLoaderArgs);
 }
 async function executeMetadataLoader(params) {
-  const {
-    routesWithServerLoader,
-    routeKey,
-    serverLoaderArgs,
-    serverLoaderData
-  } = params;
+  const { routesWithServerLoader, routeKey, serverLoaderData } = params;
   const mod = await routesWithServerLoader[routeKey]();
   if (!mod.serverLoader || typeof mod.serverLoader !== "function") {
     return;
   }
-  return mod.metadataLoader(
-    serverLoaderData,
-    serverLoaderArgs
+  const loaderDatas = mod.metadataLoader(
+    serverLoaderData
   );
+  const result = {};
+  Object.values(MetaLoaderResultKeys).forEach((key) => {
+    if (loaderDatas == null ? void 0 : loaderDatas[key])
+      result[key] = loaderDatas[key];
+  });
+  return result;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  createAppRootElement,
   createMarkupGenerator,
   createUmiHandler,
   createUmiServerLoader

package/dist/types.d.ts

@@ -1,3 +1,29 @@
+export interface IOpts {
+    base: string;
+    routes: Record<string, {
+        path: string;
+        file: string;
+        id: string;
+        parentId?: string;
+    }>;
+    links?: Record<string, string>[];
+    metas?: Record<string, string>[];
+    styles?: (Record<string, string> | string)[];
+    favicons?: string[];
+    title?: string;
+    headScripts?: (Record<string, string> | string)[];
+    scripts?: (Record<string, string> | string)[];
+    mountElementId?: string;
+    esmScript?: boolean;
+    modifyHTML?: (html: string, args: {
+        path?: string;
+    }) => Promise<string>;
+    historyType?: 'hash' | 'browser';
+}
+export declare type IUserExtraRoute = string | {
+    path: string;
+    prerender: boolean;
+};
 export interface IRoute {
     id: string;
     path?: string;
@@ -30,5 +56,13 @@ export interface IMetadata {
     lang?: string;
     metas?: IMetaTag[];
 }
+export interface IhtmlPageOpts extends IMetadata {
+    headScripts?: (Record<string, string> | string)[];
+    links?: Record<string, string>[];
+    styles?: string[];
+    favicons?: string[];
+    scripts?: (Record<string, string> | string)[];
+    [key: string]: any;
+}
 export declare type MetadataLoader<T = any> = (serverLoaderData: T, req?: IServerLoaderArgs) => LoaderReturn<IMetadata>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/server",
-  "version": "4.0.0-canary.20240321.1",
+  "version": "4.0.0-canary.20240419.1",
   "description": "@umijs/server",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/server#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -19,7 +19,7 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-router-dom": "6.3.0",
-    "@umijs/bundler-utils": "4.0.0-canary.20240321.1"
+    "@umijs/bundler-utils": "4.0.0-canary.20240419.1"
   },
   "publishConfig": {
     "access": "public"