@umijs/server 4.0.0-canary.20240321.1 → 4.0.0-canary.20240402.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 { ITplOpts, UmiRequest } from './types';
 interface RouteLoaders {
     [key: string]: () => Promise<any>;
 }
@@ -25,9 +27,19 @@ interface CreateRequestHandlerOptions extends CreateRequestServerlessOptions {
     createHistory: (opts: any) => any;
     helmetContext?: any;
     ServerInsertedHTMLContext: React.Context<ServerInsertedHTMLHook | null>;
+    tplOpts: ITplOpts;
+    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 {};

package/dist/ssr.js

@@ -39,7 +39,8 @@ 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 createJSXProvider = (Provider) => {
+  const serverInsertedHTMLCallbacks = /* @__PURE__ */ new Set();
   const JSXProvider = (props) => {
     const addInsertedHtml = import_react.default.useCallback(
       (handler) => {
@@ -52,7 +53,7 @@ var createJSXProvider = (Provider, serverInsertedHTMLCallbacks) => {
       value: addInsertedHtml
     });
   };
-  return JSXProvider;
+  return [JSXProvider, serverInsertedHTMLCallbacks];
 };
 function createJSXGenerator(opts) {
   return async (url, serverLoaderArgs) => {
@@ -84,7 +85,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 +94,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]
+            });
+            Object.entries(metadataLoaderData).forEach(([k, v]) => {
+              if (Array.isArray(v)) {
+                opts.tplOpts[k] = (opts.tplOpts[k] || []).concat(v);
+              } else {
+                opts.tplOpts[k] = v;
+              }
+            });
           }
           resolve();
         })
@@ -116,7 +120,9 @@ function createJSXGenerator(opts) {
       location: url,
       manifest,
       loaderData,
-      metadata
+      tplOpts: opts.tplOpts,
+      renderFromRoot: opts.renderFromRoot,
+      mountElementId: opts.mountElementId
     };
     const element = await opts.getClientRootComponent(
       context
@@ -127,13 +133,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 +154,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 +165,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>)/,
@@ -187,8 +200,136 @@ function createMarkupGenerator(opts) {
 }
 function createRequestHandler(opts) {
   const jsxGeneratorDeferrer = createJSXGenerator(opts);
-  return async function(req, res, next) {
-    if (req.url.startsWith("/__serverLoader") && req.query.route) {
+  const normalizeHandlerArgs = (...args) => {
+    var _a, _b;
+    let ret;
+    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 (typeof FetchEvent !== "undefined" && args[0] instanceof FetchEvent) {
+      const [ev, workerOpts] = args;
+      const { pathname, searchParams } = new URL(ev.request.url);
+      ret = {
+        req: {
+          url: ev.request.url,
+          pathname,
+          headers: ev.request.headers,
+          query: {
+            route: searchParams.get("route"),
+            url: searchParams.get("url")
+          }
+        },
+        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);
+          }
+          ev.respondWith(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);
+              }
+            }
+          });
+          stream.pipeThrough(transformStream);
+          let res = new Response(stream, {
+            headers: {
+              "content-type": "text/html; charset=utf-8"
+            },
+            status: 200
+          });
+          if (workerOpts == null ? void 0 : workerOpts.modifyResponse) {
+            res = await workerOpts.modifyResponse(res);
+          }
+          ev.respondWith(res);
+        },
+        otherwise() {
+          throw new Error("no page resource");
+        }
+      };
+    } else {
+      const [req, res, next] = args;
+      ret = {
+        req: {
+          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()
+          }
+        },
+        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) {
+    let jsx;
+    const { req, sendServerLoader, sendPage, otherwise } = normalizeHandlerArgs(
+      ...args
+    );
+    if (req.pathname.startsWith("/__serverLoader") && req.query.route && req.query.url) {
       const serverLoaderRequest = new Request(req.query.url, {
         headers: req.headers
       });
@@ -197,38 +338,27 @@ function createRequestHandler(opts) {
         routesWithServerLoader: opts.routesWithServerLoader,
         serverLoaderArgs: { request: serverLoaderRequest }
       });
-      res.status(200).json(data);
-      return;
+      await sendServerLoader(data);
+    } else if (jsx = await jsxGeneratorDeferrer(req.pathname, {
+      request: new Request(req.url, {
+        headers: req.headers
+      })
+    })) {
+      await sendPage(jsx);
+    } else {
+      await otherwise();
     }
-    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);
-      }
-    });
   };
 }
 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 +377,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
@@ -296,19 +433,21 @@ 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 result = mod.metadataLoader(
+    serverLoaderData
+  );
+  return ["title", "description", "keywords", "lang", "metas"].reduce(
+    (acc, key) => {
+      if (Object.prototype.hasOwnProperty.call(result, key))
+        acc[key] = result[key];
+      return acc;
+    },
+    {}
   );
 }
 // Annotate the CommonJS export names for ESM import in node:

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;
@@ -29,6 +55,24 @@ export interface IMetadata {
      */
     lang?: string;
     metas?: IMetaTag[];
+    headScripts?: (Record<string, string> | string)[];
+    links?: Record<string, string>[];
+    styles?: string[];
+    favicons?: string[];
+    scripts?: (Record<string, string> | string)[];
+    [key: string]: any;
+}
+export interface ITplOpts {
+    title?: string;
+    description?: string;
+    keywords?: string[];
+    metas?: IMetaTag[];
+    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.20240402.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.20240402.1"
   },
   "publishConfig": {
     "access": "public"