@modern-js/server 1.1.5-beta.1 → 1.2.1-beta.2

package/dist/types/libs/context/context.d.ts

@@ -1,8 +1,14 @@
+/// <reference path="../../type.d.ts" />
 /// <reference types="node" />
+/// <reference types="node/http" />
 import { IncomingMessage, ServerResponse } from 'http';
 import { URL } from 'url';
 import qs from 'querystring';
 import type { ModernServerContext as ModernServerContextInterface, Metrics, Logger } from '@modern-js/types/server';
+export declare type ContextOptions = {
+  logger?: Logger;
+  metrics?: Metrics;
+};
 export declare class ModernServerContext implements ModernServerContextInterface {
   /**
    * http request
@@ -20,13 +26,7 @@ export declare class ModernServerContext implements ModernServerContextInterface
   params: Record<string, string>;
   logger: Logger;
   metrics?: Metrics;
-  constructor(req: IncomingMessage, res: ServerResponse, {
-    logger,
-    metrics
-  }: {
-    logger: Logger;
-    metrics: Metrics;
-  });
+  constructor(req: IncomingMessage, res: ServerResponse);
   private bind;
   setParams(params: Record<string, string>): void;
   getReqHeader(key: string): string | string[];

package/dist/types/libs/context/index.d.ts

@@ -1,11 +1,4 @@
 import { IncomingMessage, ServerResponse } from 'http';
-import { Metrics, Logger } from '../../type';
 import { ModernServerContext } from './context';
-export declare const createContext: (req: IncomingMessage, res: ServerResponse, {
-  logger,
-  metrics
-}: {
-  logger: Logger;
-  metrics: Metrics;
-}) => ModernServerContext;
+export declare const createContext: (req: IncomingMessage, res: ServerResponse) => ModernServerContext;
 export { ModernServerContext };

package/dist/types/libs/hook-api/template.d.ts

@@ -3,10 +3,10 @@ declare class TemplateAPI {
   constructor(content: string);
   get(): string;
   set(content: string): void;
-  beforeHead(fragment: string): this;
-  afterHead(fragment: string): this;
-  beforeBody(fragment: string): this;
-  afterBody(fragment: string): this;
+  prependHead(fragment: string): this;
+  appendHead(fragment: string): this;
+  prependBody(fragment: string): this;
+  appendBody(fragment: string): this;
   replace(reg: RegExp | string, text: string): this;
 }
 

package/dist/types/libs/route/index.d.ts

@@ -11,4 +11,5 @@ export declare class RouteMatchManager {
   matchEntry(entryname: string): RouteMatcher | undefined;
   getBundles(): (string | undefined)[];
 }
-export type { ModernRouteInterface, RouteMatcher, ModernRoute };
+export type { ModernRouteInterface, ModernRoute };
+export { RouteMatcher };

package/dist/types/server/modern-server.d.ts

@@ -26,9 +26,9 @@ export declare class ModernServer {
   private routeRenderHandler;
   private frameWebHandler;
   private frameAPIHandler;
+  private proxyHandler;
   private _handler;
   private readonly staticGenerate;
-  private proxyHandler;
   constructor({
     pwd,
     config,

package/dist/types/type.d.ts

@@ -4,6 +4,12 @@ import { serverManager } from '@modern-js/server-plugin';
 import type { NormalizedConfig } from '@modern-js/core';
 import type { Metrics, Logger, NextFunction } from '@modern-js/types/server';
 import { ModernRouteInterface } from './libs/route';
+declare module 'http' {
+  interface IncomingMessage {
+    logger: Logger;
+    metrics: Metrics;
+  }
+}
 declare module '@modern-js/core' {
   interface UserConfig {
     bff: {

package/dist/types/utils.d.ts

@@ -3,5 +3,4 @@ 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 function applyMixins(derivedCtor: any, constructors: any[]): void;
+export declare const createErrorDocument: (status: number, text: string) => string;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.1.5-beta.1",
+  "version": "1.2.1-beta.2",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -33,12 +33,12 @@
     "@babel/preset-typescript": "^7.15.0",
     "@babel/register": "^7.15.3",
     "@babel/runtime": "^7",
-    "@modern-js/core": "^1.1.4",
+    "@modern-js/core": "^1.2.0",
     "@modern-js/hmr-client": "^1.1.1",
-    "@modern-js/server-plugin": "^1.1.2",
+    "@modern-js/server-plugin": "^1.1.3",
     "@modern-js/server-utils": "^1.1.2",
     "@modern-js/bff-utils": "^1.1.1",
-    "@modern-js/utils": "^1.1.4",
+    "@modern-js/utils": "^1.1.5",
     "axios": "^0.21.4",
     "babel-plugin-module-resolver": "^4.1.0",
     "chokidar": "^3.5.2",
@@ -61,9 +61,9 @@
     "ws": "^8.2.0"
   },
   "devDependencies": {
-    "@modern-js/module-tools": "^1.1.2",
-    "@modern-js/plugin-testing": "^1.1.1",
-    "@modern-js/types": "^1.1.3",
+    "@modern-js/module-tools": "^1.1.3",
+    "@modern-js/plugin-testing": "^1.2.0",
+    "@modern-js/types": "^1.1.4",
     "@types/jest": "^26",
     "@types/lru-cache": "^5.1.1",
     "@types/mime-types": "^2.1.0",
@@ -78,7 +78,9 @@
     "@types/webpack-dev-middleware": "^5.0.2",
     "@types/ws": "^7.4.7",
     "typescript": "^4",
-    "webpack": "^5.54.0"
+    "webpack": "^5.54.0",
+    "node-mocks-http": "^1.11.0",
+    "portfinder": "^1.0.28"
   },
   "peerDependencies": {
     "webpack": "^5.54.0"
@@ -97,6 +99,7 @@
     "new": "modern new",
     "build": "modern build",
     "dev": "modern build --watch",
-    "test": "modern test --passWithNoTests"
-  }
+    "test": "modern test"
+  },
+  "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/index.ts

@@ -1,19 +1,13 @@
 import { ModernServerOptions } from './type';
-
 import { Server } from './server';
 
-export * from './type';
-export * from './libs/context';
-export * from './libs/route';
 export type { SSRServerContext } from './libs/render/type';
 export { Server };
+export type { ModernServerOptions };
 
 export default (options: ModernServerOptions): Promise<Server> => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const allowEnvs = ['production', 'development', 'test'];
-
   if (options == null) {
-    throw new Error();
+    throw new Error('can not start mserver without options');
   }
 
   const server = new Server(options);

package/src/libs/context/context.ts

@@ -8,6 +8,11 @@ import type {
 } from '@modern-js/types/server';
 import { toMessage } from '../../utils';
 
+export type ContextOptions = {
+  logger?: Logger;
+  metrics?: Metrics;
+};
+
 export class ModernServerContext implements ModernServerContextInterface {
   /**
    * http request
@@ -28,15 +33,11 @@ export class ModernServerContext implements ModernServerContextInterface {
 
   public metrics?: Metrics;
 
-  constructor(
-    req: IncomingMessage,
-    res: ServerResponse,
-    { logger, metrics }: { logger: Logger; metrics: Metrics },
-  ) {
+  constructor(req: IncomingMessage, res: ServerResponse) {
     this.req = req;
     this.res = res;
-    this.logger = logger;
-    this.metrics = metrics;
+    this.logger = req.logger;
+    this.metrics = req.metrics;
 
     this.bind();
   }

package/src/libs/context/index.ts

@@ -1,11 +1,7 @@
 import { IncomingMessage, ServerResponse } from 'http';
-import { Metrics, Logger } from '../../type';
 import { ModernServerContext } from './context';
 
-export const createContext = (
-  req: IncomingMessage,
-  res: ServerResponse,
-  { logger, metrics }: { logger: Logger; metrics: Metrics },
-) => new ModernServerContext(req, res, { logger, metrics });
+export const createContext = (req: IncomingMessage, res: ServerResponse) =>
+  new ModernServerContext(req, res);
 
 export { ModernServerContext };

package/src/libs/hook-api/template.ts

@@ -24,22 +24,22 @@ class TemplateAPI {
     this.content = content;
   }
 
-  public beforeHead(fragment: string) {
+  public prependHead(fragment: string) {
     const { head } = RegList.before;
     return this.replace(head, `${head}${fragment}`);
   }
 
-  public afterHead(fragment: string) {
+  public appendHead(fragment: string) {
     const { head } = RegList.after;
     return this.replace(head, `${fragment}${head}`);
   }
 
-  public beforeBody(fragment: string) {
+  public prependBody(fragment: string) {
     const { body } = RegList.before;
     return this.replace(body, `${body}${fragment}`);
   }
 
-  public afterBody(fragment: string) {
+  public appendBody(fragment: string) {
     const { body } = RegList.after;
     return this.replace(body, `${fragment}${body}`);
   }

package/src/libs/proxy.ts

@@ -54,7 +54,7 @@ export const createProxyHandler = (proxyOptions: ProxyOptions) => {
       );
     }
   } else {
-    formatedProxy.concat(proxyOptions);
+    formatedProxy.push(...proxyOptions);
   }
 
   const middlewares = formatedProxy.map(option => {

package/src/libs/render/cache/__tests__/cache.test.ts

@@ -15,6 +15,8 @@ const createCacheConfig = (config: any = {}) => ({
   ...config,
 });
 
+jest.setTimeout(60000);
+
 describe('cache', () => {
   it('should cache correctly', async () => {
     destroyCache();
@@ -179,7 +181,6 @@ describe('cache', () => {
     }
   });
 
-  jest.setTimeout(1000 * 10);
   it('should stale cache correctly', async () => {
     destroyCache();
     const cache = createCache();
@@ -207,7 +208,6 @@ describe('cache', () => {
     expect(staleResult?.isStale).toBe(true);
   });
 
-  jest.setTimeout(1000 * 15);
   it('should garbage cache correctly', async () => {
     destroyCache();
     const cache = createCache();

package/src/libs/render/reader.ts

@@ -24,7 +24,7 @@ const createCacheItem = async (filepath: string, mtime: Date) => {
 class LruReader {
   private readonly cache: LRU<string, FileCache>;
 
-  private timer?: NodeJS.Timeout;
+  // private timer?: NodeJS.Timeout;
 
   constructor() {
     this.cache = new LRU({
@@ -35,13 +35,13 @@ class LruReader {
   }
 
   public init() {
-    this.timeTask();
+    // this.timeTask();
   }
 
   public close() {
-    if (this.timer) {
-      clearInterval(this.timer);
-    }
+    // if (this.timer) {
+    //   clearInterval(this.timer);
+    // }
   }
 
   public async read(filepath: string) {
@@ -94,9 +94,9 @@ class LruReader {
     }
   }
 
-  private timeTask() {
-    this.timer = setInterval(() => this.update, 5 * 60 * 1000).unref();
-  }
+  // private timeTask() {
+  // this.timer = setInterval(() => this.update, 5 * 60 * 1000).unref();
+  // }
 }
 
 const reader = new LruReader();

package/src/libs/render/type.ts

@@ -1,6 +1,4 @@
-import { IncomingHttpHeaders } from 'http';
 import { BaseSSRServerContext } from '@modern-js/types/server';
-import { Metrics, Logger } from '../../type';
 
 type MetaKeyMap = {
   header?: string[];

package/src/libs/route/index.ts

@@ -73,4 +73,5 @@ export class RouteMatchManager {
   }
 }
 
-export type { ModernRouteInterface, RouteMatcher, ModernRoute };
+export type { ModernRouteInterface, ModernRoute };
+export { RouteMatcher };

package/src/server/index.ts

@@ -68,7 +68,7 @@ export class Server {
   }
 
   public listen(port = 8080, listener: any) {
-    this.app.listen(port, () => {
+    this.app.listen(process.env.PORT || port, () => {
       if (listener) {
         listener();
       }
@@ -135,7 +135,7 @@ export class Server {
         ...appContext,
         distDirectory: path.join(
           options.pwd,
-          options.config.output.path || 'dist',
+          options.config.output?.path || 'dist',
         ),
       });
     });

package/src/server/modern-server.ts

@@ -87,12 +87,12 @@ export class ModernServer {
 
   private frameAPIHandler: Adapter | null = null;
 
+  private proxyHandler: ReturnType<typeof createProxyHandler> = null;
+
   private _handler!: (context: ModernServerContext, next: NextFunction) => void;
 
   private readonly staticGenerate: boolean = false;
 
-  private proxyHandler: ReturnType<typeof createProxyHandler> = null;
-
   constructor({
     pwd,
     config,
@@ -107,7 +107,7 @@ export class ModernServer {
     this.isDev = Boolean(dev);
 
     this.pwd = pwd;
-    this.distDir = path.join(pwd, config.output.path || 'dist');
+    this.distDir = path.join(pwd, config.output?.path || 'dist');
     this.workDir = this.isDev ? pwd : this.distDir;
     this.conf = config;
     this.logger = logger!;
@@ -162,7 +162,7 @@ export class ModernServer {
 
     await this.prepareFrameHandler();
 
-    const { favicon, faviconByEntries } = this.conf.output;
+    const { favicon, faviconByEntries } = this.conf.output || {};
     const favicons = this.prepareFavicons(favicon, faviconByEntries);
     // Only work when without setting `assetPrefix`.
     // Setting `assetPrefix` means these resources should be uploaded to CDN.
@@ -229,6 +229,7 @@ export class ModernServer {
   }
 
   // add promisify request handler to server
+  // handler should do not do more things after invoke next
   protected addHandler(handler: ModernServerHandler) {
     if ((handler as any)[Symbol.toStringTag] === 'AsyncFunction') {
       this.handlers.push(handler as ModernServerAsyncHandler);
@@ -376,7 +377,7 @@ export class ModernServer {
     await this.emitRouteHook('beforeMatch', { context });
 
     // match routes in the route spec
-    const matched = this.router.match(context.url);
+    const matched = this.router.match(context.path);
     if (!matched) {
       this.render404(context);
       return;
@@ -502,7 +503,7 @@ export class ModernServer {
     try {
       // Todo Safety xss
       const injection = JSON.stringify({ ...manifest, modules });
-      templateAPI.afterHead(
+      templateAPI.appendHead(
         `<script>window.modern_manifest=${injection}</script>`,
       );
     } catch (e) {
@@ -550,10 +551,9 @@ export class ModernServer {
     },
   ) {
     res.statusCode = 200;
-    const context: ModernServerContext = createContext(req, res, {
-      logger: this.logger,
-      metrics: this.metrics,
-    });
+    req.logger = req.logger || this.logger;
+    req.metrics = req.metrics || this.metrics;
+    const context: ModernServerContext = createContext(req, res);
 
     try {
       this._handler(context, next);

package/src/type.ts

@@ -5,6 +5,13 @@ import type { NormalizedConfig } from '@modern-js/core';
 import type { Metrics, Logger, NextFunction } from '@modern-js/types/server';
 import { ModernRouteInterface } from './libs/route';
 
+declare module 'http' {
+  interface IncomingMessage {
+    logger: Logger;
+    metrics: Metrics;
+  }
+}
+
 declare module '@modern-js/core' {
   interface UserConfig {
     bff: {

package/src/utils.ts

@@ -49,17 +49,3 @@ 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),
-      );
-    });
-  });
-}

package/tests/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@modern-js'],
+  parserOptions: {
+    project: require.resolve('./tsconfig.json'),
+  },
+};

package/tests/context.test.ts

@@ -0,0 +1,41 @@
+import EventEmitter from 'events';
+import { Readable } from 'stream';
+import httpMocks from 'node-mocks-http';
+import { createContext } from '../src/libs/context';
+
+describe('test server context', () => {
+  test('should route api work correctly', () => {
+    const req = httpMocks.createRequest({
+      url: '/pathname?foo=baz',
+      headers: {
+        host: 'modernjs.com',
+      },
+      eventEmitter: Readable,
+      method: 'GET',
+    });
+    const res = httpMocks.createResponse({ eventEmitter: EventEmitter });
+    const {
+      method,
+      url,
+      origin,
+      host,
+      path,
+      href,
+      query,
+      querystring,
+      protocol,
+      params,
+    } = createContext(req, res);
+
+    expect(method).toBe('GET');
+    expect(url).toBe('/pathname?foo=baz');
+    expect(origin).toBe('http://modernjs.com');
+    expect(host).toBe('modernjs.com');
+    expect(path).toBe('/pathname');
+    expect(href).toBe('http://modernjs.com/pathname?foo=baz');
+    expect(query).toEqual({ foo: 'baz' });
+    expect(querystring).toBe('foo=baz');
+    expect(protocol).toBe('http');
+    expect(params).toEqual({});
+  });
+});

package/tests/fixtures/hosting-files/static/index.js

@@ -0,0 +1 @@
+console.info('index.js');

package/tests/fixtures/pure/modern.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  server: {
+    ssr: true,
+  },
+};

package/tests/fixtures/pure/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "deploy",
+  "version": "0.1.0",
+  "scripts": {
+    "reset": "del-cli node_modules",
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "new": "modern new",
+    "lint": "modern lint",
+    "deploy": "modern deploy"
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "modernConfig": {
+    "runtime": {
+      "router": true,
+      "state": true
+    }
+  }
+}

package/tests/fixtures/pure/src/App.css

@@ -0,0 +1,119 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: nunito_for_arco, Helvetica Neue, Helvetica, PingFang SC,
+    Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.container {
+  min-height: 100vh;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+main {
+  padding: 5rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  width: 100%;
+  height: 80px;
+  border-top: 1px solid #eaeaea;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #470000;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  color: #f4f4f4;
+  text-decoration: none;
+  font-size: 1.1rem;
+}
+
+.logo {
+  margin-bottom: 2rem;
+}
+
+.logo svg {
+  width: 450px;
+  height: 132px;
+}
+
+.description {
+  text-align: center;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 800px;
+  margin-top: 3rem;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #470000;
+  color: #470000;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  width: 45%;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  transform: scale(1.05);
+  transition: 0.1s ease-in-out;
+}
+
+.card h2 {
+  font-size: 1.5rem;
+  margin: 0;
+  padding: 0;
+}