@umijs/server 4.0.0-rc.7 → 4.0.0

package/dist/index.d.ts

@@ -1 +1,2 @@
+export { createServerRoutes } from './routes';
 export * from './server';

package/dist/index.js

@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createServerRoutes = void 0;
+var routes_1 = require("./routes");
+Object.defineProperty(exports, "createServerRoutes", { enumerable: true, get: function () { return routes_1.createServerRoutes; } });
 __exportStar(require("./server"), exports);

package/dist/server.d.ts

@@ -10,7 +10,8 @@ export interface IOpts {
     links?: Record<string, string>[];
     metas?: Record<string, string>[];
     styles?: (Record<string, string> | string)[];
-    favicon?: string;
+    favicons?: string[];
+    title?: string;
     headScripts?: (Record<string, string> | string)[];
     scripts?: (Record<string, string> | string)[];
     mountElementId?: string;
@@ -18,6 +19,7 @@ export interface IOpts {
     modifyHTML?: (html: string, args: {
         path?: string;
     }) => Promise<string>;
+    historyType?: 'hash' | 'browser';
 }
 export declare function getMarkup(opts: Omit<IOpts, 'routes'> & {
     path?: string;

package/dist/server.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -15,54 +6,57 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRequestHandler = exports.getMarkup = void 0;
 const react_1 = __importDefault(require("react"));
 const server_1 = __importDefault(require("react-dom/server"));
-const react_router_dom_1 = require("react-router-dom");
-const routes_1 = require("./routes");
+// import { matchRoutes } from 'react-router-dom';
+// import { createServerRoutes } from './routes';
 const scripts_1 = require("./scripts");
 const styles_1 = require("./styles");
-function getMarkup(opts) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // TODO: use real component
-        let markup = server_1.default.renderToString(react_1.default.createElement('div', { id: opts.mountElementId || 'root' }));
-        function propsToString(opts) {
-            return Object.keys(opts.props)
-                .filter((key) => !(opts.filters || []).includes(key))
-                .map((key) => `${key}=${JSON.stringify(opts.props[key])}`)
-                .join(' ');
-        }
-        function getScriptContent(script) {
-            const attrs = propsToString({
-                props: script,
-                filters: ['src', 'content'],
-            });
-            return script.src
-                ? `<script${opts.esmScript ? ' type="module"' : ''} ${attrs} src="${script.src}"></script>`
-                : `<script${opts.esmScript ? ' type="module"' : ''} ${attrs}>${script.content}</script>`;
-        }
-        function getStyleContent(style) {
-            const attrs = propsToString({
-                props: style,
-                filters: ['src', 'content'],
-            });
-            return style.src
-                ? `<link rel="stylesheet" ${attrs} href="${style.src}" />`
-                : `<style ${attrs}>${style.content}</style>`;
-        }
-        function getTagContent(opts) {
-            const attrs = propsToString({
-                props: opts.attrs,
-            });
-            return `<${opts.tagName} ${attrs} />`;
-        }
-        const favicon = opts.favicon
-            ? `<link rel="shortcut icon" href="${opts.favicon}">`
-            : '';
-        const metas = (opts.metas || []).map((meta) => getTagContent({ attrs: meta, tagName: 'meta' }));
-        const links = (opts.links || []).map((link) => getTagContent({ attrs: link, tagName: 'link' }));
-        const styles = (0, styles_1.normalizeStyles)(opts.styles || []).map(getStyleContent);
-        const headScripts = (0, scripts_1.normalizeScripts)(opts.headScripts || []).map(getScriptContent);
-        const scripts = (0, scripts_1.normalizeScripts)(opts.scripts || []).map(getScriptContent);
-        markup = [
-            `<!DOCTYPE html>
+async function getMarkup(opts) {
+    // TODO: use real component
+    let markup = server_1.default.renderToString(react_1.default.createElement('div', { id: opts.mountElementId || 'root' }));
+    function propsToString(opts) {
+        return Object.keys(opts.props)
+            .filter((key) => !(opts.filters || []).includes(key))
+            .map((key) => `${key}=${JSON.stringify(opts.props[key])}`)
+            .join(' ');
+    }
+    function getScriptContent(script) {
+        const attrs = propsToString({
+            props: script,
+            filters: ['src', 'content'],
+        });
+        return script.src
+            ? `<script${opts.esmScript ? ' type="module"' : ''} ${attrs} src="${script.src}"></script>`
+            : `<script${opts.esmScript ? ' type="module"' : ''} ${attrs}>${script.content}</script>`;
+    }
+    function getStyleContent(style) {
+        const attrs = propsToString({
+            props: style,
+            filters: ['src', 'content'],
+        });
+        return style.src
+            ? `<link rel="stylesheet" ${attrs} href="${style.src}" />`
+            : `<style ${attrs}>${style.content}</style>`;
+    }
+    function getTagContent(opts) {
+        const attrs = propsToString({
+            props: opts.attrs,
+        });
+        return `<${opts.tagName} ${attrs} />`;
+    }
+    const favicons = [];
+    if (Array.isArray(opts.favicons)) {
+        opts.favicons.forEach((e) => {
+            favicons.push(`<link rel="shortcut icon" href="${e}">`);
+        });
+    }
+    const title = opts.title ? `<title>${opts.title}</title>` : '';
+    const metas = (opts.metas || []).map((meta) => getTagContent({ attrs: meta, tagName: 'meta' }));
+    const links = (opts.links || []).map((link) => getTagContent({ attrs: link, tagName: 'link' }));
+    const styles = (0, styles_1.normalizeStyles)(opts.styles || []).map(getStyleContent);
+    const headScripts = (0, scripts_1.normalizeScripts)(opts.headScripts || []).map(getScriptContent);
+    const scripts = (0, scripts_1.normalizeScripts)(opts.scripts || []).map(getScriptContent);
+    markup = [
+        `<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8" />
@@ -71,43 +65,50 @@ function getMarkup(opts) {
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
 />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />`,
-            metas.join('\n'),
-            favicon,
-            links.join('\n'),
-            styles.join('\n'),
-            headScripts.join('\n'),
-            `</head>
+        metas.join('\n'),
+        favicons.join('\n'),
+        title,
+        links.join('\n'),
+        styles.join('\n'),
+        headScripts.join('\n'),
+        `</head>
 <body>`,
-            markup,
-            scripts.join('\n'),
-            `</body>
+        markup,
+        scripts.join('\n'),
+        `</body>
 </html>`,
-        ]
-            .filter(Boolean)
-            .join('\n');
-        if (opts.modifyHTML) {
-            markup = yield opts.modifyHTML(markup, { path: opts.path });
-        }
-        return markup;
-    });
+    ]
+        .filter(Boolean)
+        .join('\n');
+    if (opts.modifyHTML) {
+        markup = await opts.modifyHTML(markup, { path: opts.path });
+    }
+    return markup;
 }
 exports.getMarkup = getMarkup;
 function createRequestHandler(opts) {
-    return (req, res, next) => __awaiter(this, void 0, void 0, function* () {
-        // 匹配路由，不匹配走 next()
-        // TODO: cache
-        const routes = (0, routes_1.createServerRoutes)({
-            routesById: opts.routes,
-        });
-        const matches = (0, react_router_dom_1.matchRoutes)(routes, req.path, opts.base);
-        if (matches) {
+    return async (req, res, next) => {
+        var _a;
+        if (opts.historyType === 'browser' &&
+            opts.base !== '/' &&
+            req.path === '/') {
+            // 如果是 browser，并且配置了非 / base，访问 / 时 redirect 到 base 路径
+            res.redirect(opts.base);
+        }
+        else if ((_a = req.headers.accept) === null || _a === void 0 ? void 0 : _a.includes('text/html')) {
+            // 匹配路由，不匹配走 next()
+            // const routes = createServerRoutes({
+            //   routesById: opts.routes,
+            // });
+            // const matches = matchRoutes(routes, req.path, opts.base);
+            // 其他接受 HTML 的请求都兜底返回 HTML
             res.set('Content-Type', 'text/html');
-            const markup = yield getMarkup(Object.assign(Object.assign({}, opts), { path: req.path }));
+            const markup = await getMarkup({ ...opts, path: req.path });
             res.end(markup);
         }
         else {
             next();
         }
-    });
+    };
 }
 exports.createRequestHandler = createRequestHandler;

package/dist/ssr.d.ts

@@ -0,0 +1,18 @@
+interface RouteLoaders {
+    [key: string]: () => Promise<any>;
+}
+interface CreateRequestHandlerOptions {
+    routesWithServerLoader: RouteLoaders;
+    PluginManager: any;
+    manifest: (() => {
+        assets: Record<string, string>;
+    }) | {
+        assets: Record<string, string>;
+    };
+    getPlugins: () => any;
+    getValidKeys: () => any;
+    getRoutes: (PluginManager: any) => any;
+    getClientRootComponent: (PluginManager: any) => any;
+}
+export default function createRequestHandler(opts: CreateRequestHandlerOptions): (req: any, res: any, next: any) => Promise<any>;
+export {};

package/dist/ssr.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const server_1 = require("react-dom/server");
+const react_router_dom_1 = require("react-router-dom");
+function createRequestHandler(opts) {
+    return async function (req, res, next) {
+        const { routesWithServerLoader, PluginManager, getPlugins, getValidKeys, getRoutes, } = opts;
+        // 切换路由场景下，会通过此 API 执行 server loader
+        if (req.url.startsWith('/__serverLoader') && req.query.route) {
+            const data = await executeLoader(req.query.route, routesWithServerLoader);
+            res.status(200).json(data);
+            return;
+        }
+        const pluginManager = PluginManager.create({
+            plugins: getPlugins(),
+            validKeys: getValidKeys(),
+        });
+        const { routes, routeComponents } = await getRoutes(pluginManager);
+        const matches = matchRoutesForSSR(req.url, routes);
+        if (matches.length === 0) {
+            return next();
+        }
+        const loaderData = {};
+        await Promise.all(matches
+            .filter((id) => routes[id].hasServerLoader)
+            .map((id) => new Promise(async (resolve) => {
+            loaderData[id] = await executeLoader(id, routesWithServerLoader);
+            resolve();
+        })));
+        const manifest = typeof opts.manifest === 'function' ? opts.manifest() : opts.manifest;
+        const context = {
+            routes,
+            routeComponents,
+            pluginManager,
+            location: req.url,
+            manifest,
+            loaderData,
+        };
+        const jsx = await opts.getClientRootComponent(context);
+        const stream = (0, server_1.renderToPipeableStream)(jsx, {
+            bootstrapScripts: [manifest.assets['umi.js'] || '/umi.js'],
+            onShellReady() {
+                res.setHeader('Content-type', 'text/html');
+                stream.pipe(res);
+            },
+            onError(x) {
+                console.error(x);
+            },
+        });
+    };
+}
+exports.default = createRequestHandler;
+function matchRoutesForSSR(reqUrl, routesById) {
+    var _a;
+    return (((_a = (0, react_router_dom_1.matchRoutes)(createClientRoutes({ routesById }), reqUrl)) === null || _a === void 0 ? void 0 : _a.map((route) => route.route.id)) || []);
+}
+function createClientRoutes(opts) {
+    const { routesById, parentId } = opts;
+    return Object.keys(routesById)
+        .filter((id) => routesById[id].parentId === parentId)
+        .map((id) => {
+        const route = createClientRoute(routesById[id]);
+        const children = createClientRoutes({
+            routesById,
+            parentId: route.id,
+        });
+        if (children.length > 0) {
+            // @ts-ignore
+            route.children = children;
+        }
+        return route;
+    });
+}
+function createClientRoute(route) {
+    const { id, path, index } = route;
+    return {
+        id,
+        path,
+        index,
+    };
+}
+async function executeLoader(routeKey, routesWithServerLoader) {
+    const mod = await routesWithServerLoader[routeKey]();
+    if (!mod.serverLoader || typeof mod.serverLoader !== 'function') {
+        return;
+    }
+    // TODO: 处理错误场景
+    return await mod.serverLoader();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/server",
-  "version": "4.0.0-rc.7",
+  "version": "4.0.0",
   "description": "@umijs/server",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/server#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -16,15 +16,15 @@
   ],
   "scripts": {
     "build": "pnpm tsc",
-    "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
+    "build:deps": "umi-scripts bundleDeps",
     "dev": "pnpm build -- --watch"
   },
   "dependencies": {
-    "@umijs/bundler-utils": "4.0.0-rc.6",
+    "@umijs/bundler-utils": "4.0.0",
     "history": "5.3.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-router-dom": "6.2.2"
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-router-dom": "6.3.0"
   },
   "publishConfig": {
     "access": "public"