@modern-js/server 1.1.3-beta.0 → 1.1.4

package/dist/types/type.d.ts

@@ -45,7 +45,12 @@ export declare type ModernServerOptions = {
   logger?: Logger;
   measure?: Measure;
   apiOnly?: boolean;
+  ssrOnly?: boolean;
   webOnly?: boolean;
+  proxyTarget?: {
+    ssr?: string;
+    api?: string;
+  };
 };
 export declare type RenderResult = {
   content: string | Buffer;

package/dist/types/utils.d.ts

@@ -3,4 +3,5 @@ export declare const mergeExtension: (users: any[]) => {
 };
 export declare const toMessage: (dig: string, e: Error | string) => string;
 export declare const noop: () => void;
-export declare const createErrorDocument: (status: number, text: string) => string;
+export declare const createErrorDocument: (status: number, text: string) => string;
+export declare function applyMixins(derivedCtor: any, constructors: any[]): void;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.1.3-beta.0",
+  "version": "1.1.4",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -26,14 +26,6 @@
       "default": "./dist/js/treeshaking/index.js"
     }
   },
-  "scripts": {
-    "prepare": "pnpm build",
-    "prepublishOnly": "pnpm build --platform",
-    "new": "modern new",
-    "build": "modern build",
-    "dev": "modern build --watch",
-    "test": "modern test --passWithNoTests"
-  },
   "dependencies": {
     "@babel/core": "^7.15.0",
     "@babel/compat-data": "^7.15.0",
@@ -41,12 +33,12 @@
     "@babel/preset-typescript": "^7.15.0",
     "@babel/register": "^7.15.3",
     "@babel/runtime": "^7",
-    "@modern-js/core": "workspace:^1.1.2",
-    "@modern-js/hmr-client": "workspace:^1.1.1",
-    "@modern-js/server-plugin": "workspace:^1.1.1",
-    "@modern-js/server-utils": "workspace:^1.1.1",
-    "@modern-js/bff-utils": "workspace:^1.1.1",
-    "@modern-js/utils": "workspace:^1.1.2",
+    "@modern-js/core": "^1.1.4",
+    "@modern-js/hmr-client": "^1.1.1",
+    "@modern-js/server-plugin": "^1.1.2",
+    "@modern-js/server-utils": "^1.1.2",
+    "@modern-js/bff-utils": "^1.1.1",
+    "@modern-js/utils": "^1.1.4",
     "axios": "^0.21.4",
     "babel-plugin-module-resolver": "^4.1.0",
     "chokidar": "^3.5.2",
@@ -71,7 +63,7 @@
   "devDependencies": {
     "@modern-js/module-tools": "^1.1.1",
     "@modern-js/plugin-testing": "^1.1.1",
-    "@modern-js/types": "workspace:^1.1.2",
+    "@modern-js/types": "^1.1.3",
     "@types/jest": "^26",
     "@types/lru-cache": "^5.1.1",
     "@types/mime-types": "^2.1.0",
@@ -100,5 +92,12 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
-  }
-}
+  },
+  "scripts": {
+    "new": "modern new",
+    "build": "modern build",
+    "dev": "modern build --watch",
+    "test": "modern test --passWithNoTests"
+  },
+  "readme": "\n<p align=\"center\">\n  <a href=\"https://modernjs.dev\" target=\"blank\"><img src=\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png\" width=\"300\" alt=\"Modern.js Logo\" /></a>\n</p>\n<p align=\"center\">\n现代 Web 工程体系\n  <br/>\n  <a href=\"https://modernjs.dev\" target=\"blank\">\n    modernjs.dev\n  </a>\n</p>\n<p align=\"center\">\n  The meta-framework suite designed from scratch for frontend-focused modern web development\n</p>\n\n# Introduction\n\n> The doc site ([modernjs.dev](https://modernjs.dev)) and articles are only available in Chinese for now, we are planning to add English versions soon.\n\n- [Modern.js: Hello, World!](https://zhuanlan.zhihu.com/p/426707646)\n\n## Getting Started\n\n- [Quick Start](https://modernjs.dev/docs/start)\n- [Guides](https://modernjs.dev/docs/guides)\n- [API References](https://modernjs.dev/docs/apis)\n\n## Contributing\n\n- [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md)\n"
+}

package/src/server/dev-server/dev-server-split.ts

@@ -4,7 +4,7 @@ import { mergeExtension } from '@/utils';
 import { ModernRouteInterface } from '@/libs/route';
 import { ApiServerMode } from '@/constants';
 
-export class WebModernDevServer extends ModernDevServer {
+export class ModernSSRDevServer extends ModernDevServer {
   protected prepareAPIHandler(
     _m: ApiServerMode,
     _: APIServerStartInput['config'],
@@ -23,14 +23,10 @@ export class WebModernDevServer extends ModernDevServer {
   }
 }
 
-export class APIModernDevServer extends ModernDevServer {
-  protected prepareWebHandler(_: ReturnType<typeof mergeExtension>) {
-    return null as any;
-  }
-
+export class ModernAPIDevServer extends ModernDevServer {
   protected async prepareAPIHandler(
     mode: ApiServerMode,
-    extension: ReturnType<typeof mergeExtension>,
+    extension: APIServerStartInput['config'],
   ) {
     return super.prepareAPIHandler(mode, extension);
   }

package/src/server/dev-server/dev-server.ts

@@ -13,9 +13,7 @@ import {
   SHARED_DIR,
 } from '@modern-js/utils';
 import type { MultiCompiler, Compiler } from 'webpack';
-import webpackDevMiddleware, {
-  WebpackDevMiddleware,
-} from 'webpack-dev-middleware';
+import webpackDevMiddleware from 'webpack-dev-middleware';
 import { ModernServer } from '../modern-server';
 import { createMockHandler } from '@/dev-tools/mock';
 import { createProxyHandler, ProxyOptions } from '@/libs/proxy';
@@ -61,12 +59,10 @@ export class ModernDevServer extends ModernServer {
 
   private watcher!: Watcher;
 
-  private devMiddleware!: WebpackDevMiddleware &
-    ((
-      req: http.IncomingMessage,
-      res: http.ServerResponse,
-      next: NextFunction,
-    ) => void);
+  private devMiddleware!: webpackDevMiddleware.API<
+    http.IncomingMessage,
+    http.ServerResponse
+  >;
 
   constructor(options: ModernServerOptions) {
     super(options);
@@ -239,7 +235,7 @@ export class ModernDevServer extends ModernServer {
     const bundles = this.router.getBundles();
 
     bundles.forEach(bundle => {
-      const filepath = path.join(distDir, bundle!);
+      const filepath = path.join(distDir, bundle as string);
       if (require.cache[filepath]) {
         delete require.cache[filepath];
       }
@@ -252,7 +248,7 @@ export class ModernDevServer extends ModernServer {
     const defaultWatched = [
       `${pwd}/${mock}/**/*`,
       `${pwd}/${SERVER_DIR}/**/*`,
-      `${pwd}/${API_DIR}/**/*`,
+      `${pwd}/${API_DIR}/!(typings)/**`,
       `${pwd}/${SHARED_DIR}/**/*`,
     ];
 

package/src/server/dev-server/index.ts

@@ -1,2 +1,2 @@
-export { APIModernDevServer, WebModernDevServer } from './dev-server-split';
+export { ModernAPIDevServer, ModernSSRDevServer } from './dev-server-split';
 export { ModernDevServer } from './dev-server';

package/src/server/index.ts

@@ -7,10 +7,16 @@ import {
   initAppContext,
   initAppDir,
   loadUserConfig,
+  ConfigContext,
+  UserConfig,
 } from '@modern-js/core';
 import { ModernServer } from './modern-server';
 import type { ModernDevServer } from './dev-server';
-import { APIModernServer, WebModernServer } from './modern-server-split';
+import {
+  ModernAPIServer,
+  ModernSSRServer,
+  ModernWebServer,
+} from './modern-server-split';
 import { ModernServerOptions, ServerHookRunner, ReadyOptions } from '@/type';
 import { measure as defaultMeasure } from '@/libs/measure';
 
@@ -88,9 +94,11 @@ export class Server {
     const { options } = this;
 
     if (options.apiOnly) {
-      return new APIModernServer(options);
+      return new ModernAPIServer(options);
+    } else if (options.ssrOnly) {
+      return new ModernSSRServer(options);
     } else if (options.webOnly) {
-      return new WebModernServer(options);
+      return new ModernWebServer(options);
     } else {
       return new ModernServer(options);
     }
@@ -99,15 +107,15 @@ export class Server {
   private createDevServer() {
     const { options } = this;
     const {
-      APIModernDevServer,
-      WebModernDevServer,
+      ModernAPIDevServer,
+      ModernSSRDevServer,
       ModernDevServer,
     } = require('./dev-server');
 
     if (options.apiOnly) {
-      return new APIModernDevServer(options);
-    } else if (options.webOnly) {
-      return new WebModernDevServer(options);
+      return new ModernAPIDevServer(options);
+    } else if (options.ssrOnly) {
+      return new ModernSSRDevServer(options);
     } else {
       return new ModernDevServer(options);
     }
@@ -115,8 +123,14 @@ export class Server {
 
   private async createHookRunner() {
     const { options } = this;
+
+    options.plugins?.forEach(p => {
+      serverManager.usePlugin(p);
+    });
+
     const appContext = await this.initAppContext();
     serverManager.run(() => {
+      ConfigContext.set(this.options.config as UserConfig);
       AppContext.set({
         ...appContext,
         distDirectory: path.join(
@@ -126,10 +140,6 @@ export class Server {
       });
     });
 
-    options.plugins?.forEach(p => {
-      serverManager.usePlugin(p);
-    });
-
     return serverManager.init({});
   }
 

package/src/server/modern-server-split.ts

@@ -1,13 +1,26 @@
 import { APIServerStartInput } from '@modern-js/server-plugin';
 import { ModernServer } from './modern-server';
 import { mergeExtension } from '@/utils';
-import { ModernRouteInterface } from '@/libs/route';
+import { ModernRoute, ModernRouteInterface, RouteMatcher } from '@/libs/route';
 import { ApiServerMode } from '@/constants';
+import { ModernServerContext } from '@/libs/context';
+
+export class ModernSSRServer extends ModernServer {
+  // Todo should not invoke any route hook in modernSSRServer
+
+  protected async warmupSSRBundle() {
+    // empty
+  }
+
+  protected verifyMatch(context: ModernServerContext, matched: RouteMatcher) {
+    if (matched.generate().isApi) {
+      this.render404(context);
+    }
+  }
 
-export class WebModernServer extends ModernServer {
   protected prepareAPIHandler(
     _m: ApiServerMode,
-    _: ReturnType<typeof mergeExtension>,
+    _: APIServerStartInput['config'],
   ) {
     return null as any;
   }
@@ -18,12 +31,24 @@ export class WebModernServer extends ModernServer {
     return super.prepareWebHandler(extension);
   }
 
-  protected filterRoutes(routes: ModernRouteInterface[]) {
-    return routes.filter(route => route.entryName);
+  // protected filterRoutes(routes: ModernRouteInterface[]) {
+  //   return routes.filter(route => route.entryName);
+  // }
+
+  protected async preServerInit() {
+    // empty
   }
 }
 
-export class APIModernServer extends ModernServer {
+export class ModernAPIServer extends ModernServer {
+  protected async emitRouteHook(_: string, _input: any) {
+    // empty
+  }
+
+  protected async warmupSSRBundle() {
+    // empty
+  }
+
   protected prepareWebHandler(_: ReturnType<typeof mergeExtension>) {
     return null as any;
   }
@@ -40,6 +65,33 @@ export class APIModernServer extends ModernServer {
   }
 
   protected async preServerInit() {
-    // noop
+    // empty
+  }
+}
+
+export class ModernWebServer extends ModernServer {
+  protected async warmupSSRBundle() {
+    // empty
+  }
+
+  protected async handleAPI(context: ModernServerContext) {
+    const { proxyTarget } = this;
+    if (!proxyTarget?.api) {
+      this.proxy();
+    } else {
+      this.render404(context);
+    }
+  }
+
+  protected async handleWeb(context: ModernServerContext, route: ModernRoute) {
+    const { proxyTarget } = this;
+
+    if (route.isSSR && proxyTarget?.ssr) {
+      return this.proxy();
+    } else {
+      // if no proxyTarget but access web server, degradation to csr
+      route.isSSR = false;
+      return super.handleWeb(context, route);
+    }
   }
 }

package/src/server/modern-server.ts

@@ -16,13 +16,18 @@ import {
   Logger,
   ReadyOptions,
   ConfWithBFF,
-} from '../type';
-import { RouteMatchManager, ModernRouteInterface } from '../libs/route';
-import { createRenderHandler } from '../libs/render';
-import { createStaticFileHandler } from '../libs/serve-file';
-import { createErrorDocument, mergeExtension, noop } from '../utils';
-import * as reader from '../libs/render/reader';
-import { createProxyHandler, ProxyOptions } from '../libs/proxy';
+} from '@/type';
+import {
+  RouteMatchManager,
+  ModernRouteInterface,
+  ModernRoute,
+  RouteMatcher,
+} from '@/libs/route';
+import { createRenderHandler } from '@/libs/render';
+import { createStaticFileHandler } from '@/libs/serve-file';
+import { createErrorDocument, mergeExtension, noop } from '@/utils';
+import * as reader from '@/libs/render/reader';
+import { createProxyHandler, ProxyOptions } from '@/libs/proxy';
 import { createContext, ModernServerContext } from '@/libs/context';
 import {
   AGGRED_DIR,
@@ -70,6 +75,8 @@ export class ModernServer {
 
   protected readonly measure: Measure;
 
+  protected readonly proxyTarget: ModernServerOptions['proxyTarget'];
+
   private readonly isDev: boolean = false;
 
   private staticFileHandler!: ReturnType<typeof createStaticFileHandler>;
@@ -94,18 +101,20 @@ export class ModernServer {
     staticGenerate,
     logger,
     measure,
+    proxyTarget,
   }: ModernServerOptions) {
     require('ignore-styles');
     this.isDev = Boolean(dev);
 
     this.pwd = pwd;
-    this.distDir = path.join(pwd, config.output.path || '');
+    this.distDir = path.join(pwd, config.output.path || 'dist');
     this.workDir = this.isDev ? pwd : this.distDir;
     this.conf = config;
     this.logger = logger!;
     this.measure = measure!;
     this.router = new RouteMatchManager();
     this.presetRoutes = routes;
+    this.proxyTarget = proxyTarget;
 
     if (staticGenerate) {
       this.staticGenerate = staticGenerate;
@@ -207,18 +216,6 @@ export class ModernServer {
     return createServer(handler);
   }
 
-  // warmup ssr function
-  protected warmupSSRBundle() {
-    const { distDir } = this;
-    const bundles = this.router.getBundles();
-
-    bundles.forEach(bundle => {
-      const filepath = path.join(distDir, bundle!);
-      // if error, just throw and let process die
-      require(filepath);
-    });
-  }
-
   // read route spec from route.json
   protected readRouteSpec() {
     const file = path.join(this.distDir, ROUTE_SPEC_FILE);
@@ -272,13 +269,15 @@ export class ModernServer {
 
       // if use lambda/, mean framework style of writing, then discard user extension
       const apiExtension = mergeExtension(pluginAPIExt);
-      this.frameAPIHandler = await this.prepareAPIHandler(mode, {
-        ...apiExtension,
-        modernJsConfig: this.conf,
-      });
+      this.frameAPIHandler = await this.prepareAPIHandler(mode, apiExtension);
     }
   }
 
+  // Todo
+  protected async proxy() {
+    return null as any;
+  }
+
   /* —————————————————————— function will be overwrite —————————————————————— */
   protected async prepareWebHandler(
     extension: ReturnType<typeof mergeExtension>,
@@ -317,75 +316,89 @@ export class ModernServer {
     return routes;
   }
 
+  protected async emitRouteHook(
+    eventName: 'beforeMatch' | 'afterMatch' | 'beforeRender' | 'afterRender',
+    input: any,
+  ) {
+    return this.runner[eventName](input, { onLast: noop as any });
+  }
+
+  // warmup ssr function
+  protected warmupSSRBundle() {
+    const { distDir } = this;
+    const bundles = this.router.getBundles();
+
+    bundles.forEach(bundle => {
+      const filepath = path.join(distDir, bundle as string);
+      // if error, just throw and let process die
+      require(filepath);
+    });
+  }
+
   protected async preServerInit() {
-    const { conf } = this;
+    const { conf, runner } = this;
     const preMiddleware: ModernServerAsyncHandler[] =
-      await this.runner.preServerInit(conf);
+      await runner.preServerInit(conf);
 
     preMiddleware.flat().forEach(mid => {
       this.addHandler(mid);
     });
   }
 
-  private prepareFavicons(
-    favicon: string | undefined,
-    faviconByEntries?: Record<string, string | undefined>,
-  ) {
-    const faviconNames = [];
-    if (favicon) {
-      faviconNames.push(favicon.substring(favicon.lastIndexOf('/') + 1));
-    }
-    if (faviconByEntries) {
-      Object.keys(faviconByEntries).forEach(f => {
-        const curFavicon = faviconByEntries[f];
-        if (curFavicon) {
-          faviconNames.push(
-            curFavicon.substring(curFavicon.lastIndexOf('/') + 1),
-          );
-        }
-      });
+  protected async handleAPI(context: ModernServerContext) {
+    const { req, res } = context;
+
+    if (!this.frameAPIHandler) {
+      throw new Error('can not found api hanlder');
     }
-    return faviconNames;
+
+    await this.frameAPIHandler(req, res);
   }
 
-  /* —————————————————————— private function —————————————————————— */
+  protected async handleWeb(context: ModernServerContext, route: ModernRoute) {
+    return this.routeRenderHandler(context, route);
+  }
+
+  protected verifyMatch(_c: ModernServerContext, _m: RouteMatcher) {
+    // empty
+  }
 
+  /* —————————————————————— private function —————————————————————— */
   // handler route.json, include api / csr / ssr
   // eslint-disable-next-line max-statements
   private async routeHandler(context: ModernServerContext) {
     const { req, res } = context;
 
-    await this.runner.beforeMatch({ context }, { onLast: noop as any });
+    await this.emitRouteHook('beforeMatch', { context });
 
     // match routes in the route spec
     const matched = this.router.match(context.url);
     if (!matched) {
       this.render404(context);
       return;
+    } else {
+      this.verifyMatch(context, matched);
+    }
+
+    if (res.headersSent) {
+      return;
     }
 
     const routeAPI = createRouteAPI(matched, this.router);
-    await this.runner.afterMatch(
-      { context, routeAPI },
-      { onLast: noop as any },
-    );
+    await this.emitRouteHook('afterMatch', { context, routeAPI });
 
     if (res.headersSent) {
       return;
     }
 
     const { current } = routeAPI as any;
-    const route = current.generate();
+    const route: ModernRoute = current.generate();
     const params = current.parseURLParams(context.url);
     context.setParams(params);
 
     // route is api service
     if (route.isApi) {
-      if (!this.frameAPIHandler) {
-        throw new Error('can not found api hanlder');
-      }
-
-      await this.frameAPIHandler(req, res);
+      this.handleAPI(context);
       return;
     }
 
@@ -398,8 +411,11 @@ export class ModernServer {
       return;
     }
 
-    await this.runner.beforeRender({ context }, { onLast: noop as any });
-    const file = await this.routeRenderHandler(context, route);
+    if (route.entryName) {
+      await this.emitRouteHook('beforeRender', { context });
+    }
+
+    const file = await this.handleWeb(context, route);
     if (!file) {
       this.render404(context);
       return;
@@ -415,10 +431,7 @@ export class ModernServer {
     let response = file.content;
     if (route.entryName) {
       const templateAPI = createTemplateAPI(file.content.toString());
-      await this.runner.afterRender(
-        { context, templateAPI },
-        { onLast: noop as any },
-      );
+      await this.emitRouteHook('afterRender', { context, templateAPI });
       await this.injectMicroFE(context, templateAPI);
       response = templateAPI.get();
     }
@@ -581,5 +594,26 @@ export class ModernServer {
     const text = ERROR_PAGE_TEXT[status] || ERROR_PAGE_TEXT[500];
     res.end(createErrorDocument(status, text));
   }
+
+  private prepareFavicons(
+    favicon: string | undefined,
+    faviconByEntries?: Record<string, string | undefined>,
+  ) {
+    const faviconNames = [];
+    if (favicon) {
+      faviconNames.push(favicon.substring(favicon.lastIndexOf('/') + 1));
+    }
+    if (faviconByEntries) {
+      Object.keys(faviconByEntries).forEach(f => {
+        const curFavicon = faviconByEntries[f];
+        if (curFavicon) {
+          faviconNames.push(
+            curFavicon.substring(curFavicon.lastIndexOf('/') + 1),
+          );
+        }
+      });
+    }
+    return faviconNames;
+  }
 }
 /* eslint-enable max-lines */

package/src/type.ts

@@ -49,7 +49,12 @@ export type ModernServerOptions = {
   logger?: Logger;
   measure?: Measure;
   apiOnly?: boolean;
+  ssrOnly?: boolean;
   webOnly?: boolean;
+  proxyTarget?: {
+    ssr?: string;
+    api?: string;
+  };
 };
 
 export type RenderResult = {

package/src/utils.ts

@@ -49,3 +49,17 @@ export const createErrorDocument = (status: number, text: string) => {
   </html>
   `;
 };
+
+// This can live anywhere in your codebase:
+export function applyMixins(derivedCtor: any, constructors: any[]) {
+  constructors.forEach(baseCtor => {
+    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+      Object.defineProperty(
+        derivedCtor.prototype,
+        name,
+        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
+          Object.create(null),
+      );
+    });
+  });
+}