@modern-js/server 1.2.0 → 1.2.1-rc.0

package/src/server/index.ts

@@ -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);
@@ -356,7 +357,11 @@ export class ModernServer {
   }
 
   protected async handleWeb(context: ModernServerContext, route: ModernRoute) {
-    return this.routeRenderHandler(context, route);
+    return this.routeRenderHandler({
+      ctx: context,
+      route,
+      runner: this.runner,
+    });
   }
 
   protected verifyMatch(_c: ModernServerContext, _m: RouteMatcher) {
@@ -372,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;
@@ -498,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) {
@@ -546,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);
@@ -580,7 +584,11 @@ export class ModernServer {
       // check entryName, aviod matched '/' route
       if (entryName === status.toString() || entryName === '_error') {
         try {
-          const file = await this.routeRenderHandler(context, route);
+          const file = await this.routeRenderHandler({
+            route,
+            ctx: context,
+            runner: this.runner,
+          });
           if (file) {
             context.res.end(file.content);
             return;

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;
+}

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

@@ -0,0 +1,43 @@
+import './App.css';
+
+const App = () => (
+  <div className="container">
+    <main>
+      <div className="logo">
+        <img
+          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png"
+          width="300"
+          alt="Modern.js Logo"
+        />
+      </div>
+      <p className="description">
+        Get started by editing <code className="code">src/home/App.tsx</code>
+      </p>
+      <div className="grid">
+        <a href="https://modernjs.dev/docs/start" className="card">
+          <h2>Quick Start Tencent</h2>
+        </a>
+        <a href="https://modernjs.dev/docs/guides" className="card">
+          <h2>Handbook</h2>
+        </a>
+        <a href="https://modernjs.dev/docs/apis" className="card">
+          <h2>API Reference </h2>
+        </a>
+        <a
+          href="https://modernjs.dev/coming-soon"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="card">
+          <h2>Community </h2>
+        </a>
+      </div>
+    </main>
+    <footer className="footer">
+      <a href="https://modernjs.dev" target="_blank" rel="noopener noreferrer">
+        Powered by Modern.js
+      </a>
+    </footer>
+  </div>
+);
+
+export default App;

package/tests/fixtures/pure/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@shared/*": ["./shared/*"]
+    }
+  },
+  "include": ["src", "shared", "config"]
+}

package/tests/fixtures/route-spec/index.json

@@ -0,0 +1,29 @@
+{
+  "routes": [
+    {
+      "urlPath": "/entry",
+      "entryName": "entry",
+      "entryPath": "html/entry/index.html",
+      "isSPA": true,
+      "isSSR": true,
+      "enableModernMode": false,
+      "bundle": "bundles/entry.js"
+    },
+    {
+      "urlPath": "/home",
+      "entryName": "home",
+      "entryPath": "html/home/index.html",
+      "isSPA": true,
+      "isSSR": true,
+      "enableModernMode": false,
+      "bundle": "bundles/home.js"
+    },
+    {
+      "urlPath": "/api",
+      "isApi": true,
+      "entryPath": "",
+      "isSPA": false,
+      "isSSR": false
+    }
+  ]
+}

package/tests/helper.ts

@@ -0,0 +1,8 @@
+export const createDoc = () => `<html>
+  <head>
+    <title>mock</title>
+  </head>
+  <body>
+    <div>hello</div>
+  </body>
+  </html>`;

package/tests/hook.test.ts

@@ -0,0 +1,44 @@
+import { createRouteAPI } from '../src/libs/hook-api/route';
+import { createTemplateAPI } from '../src/libs/hook-api/template';
+import { RouteMatchManager } from '../src/libs/route';
+import { createDoc } from './helper';
+import spec from './fixtures/route-spec/index.json';
+
+describe('test hook api', () => {
+  test('should route api work correctly', () => {
+    const manager = new RouteMatchManager();
+    manager.reset(spec.routes);
+    const matcher = manager.match('/home');
+
+    const routeAPI = createRouteAPI(matcher!, manager);
+    expect(routeAPI.cur().entryName).toBe('home');
+    expect(routeAPI.get('entry')?.entryPath).toBe('html/entry/index.html');
+
+    expect(routeAPI.use('home')).toBeTruthy();
+    expect(routeAPI.cur().entryName).toBe('home');
+  });
+
+  test('should template api work correctly', () => {
+    const content = createDoc();
+    const templateAPI = createTemplateAPI(content);
+
+    expect(templateAPI.get()).toMatch(content);
+
+    templateAPI.replace('mock', 'replace');
+    expect(templateAPI.get()).toMatch('replace');
+
+    templateAPI.appendBody('after body');
+    templateAPI.prependBody('before body');
+    templateAPI.appendHead('after head');
+    templateAPI.prependHead('before head');
+
+    const newContent = templateAPI.get();
+    expect(newContent).toMatch('<head>before head');
+    expect(newContent).toMatch('<body>before body');
+    expect(newContent).toMatch('after head</head>');
+    expect(newContent).toMatch('after body</body>');
+
+    templateAPI.set('<div>empty</div>');
+    expect(templateAPI.get()).toBe('<div>empty</div>');
+  });
+});

package/tests/middleware.test.ts

@@ -0,0 +1,178 @@
+/* eslint-disable max-nested-callbacks */
+import path from 'path';
+import EventEmitter from 'events';
+import { Readable } from 'stream';
+import { createServer, Server } from 'http';
+import httpMocks from 'node-mocks-http';
+import portfinder from 'portfinder';
+import axios from 'axios';
+import { createContext } from '../src/libs/context';
+import { createStaticFileHandler } from '../src/libs/serve-file';
+import { createProxyHandler } from '../src/libs/proxy';
+
+describe('test middleware create factory', () => {
+  describe('should create static-file handler correctly', () => {
+    const middleware = createStaticFileHandler([
+      {
+        path: /static\/|upload\//,
+        target: path.join(__dirname, './fixtures/hosting-files'),
+      },
+    ]);
+
+    test('should get static file correctly', resolve => {
+      const req = httpMocks.createRequest({
+        path: '/static/index.js',
+        eventEmitter: Readable,
+      });
+      const res = httpMocks.createResponse({ eventEmitter: EventEmitter });
+      const mockContext = createContext(req, res);
+      res.on('finish', () => {
+        expect(res._getBuffer().toString().trim()).toBe(
+          "console.info('index.js');",
+        );
+        resolve();
+      });
+
+      middleware(mockContext, () => {
+        throw new Error('should not happened');
+      });
+    });
+
+    test('should miss static file correctly', resolve => {
+      const req = httpMocks.createRequest({
+        path: '/static/index.css',
+        eventEmitter: Readable,
+      });
+      const res = httpMocks.createResponse({ eventEmitter: EventEmitter });
+      const mockContext = createContext(req, res);
+      res.on('finish', () => {
+        throw new Error('should not happened');
+      });
+
+      middleware(mockContext, () => {
+        req.destroy();
+        expect(true).toBeTruthy();
+        resolve();
+      });
+    });
+  });
+
+  jest.setTimeout(1000 * 10);
+  describe('should create proxy handler correctly', () => {
+    test('should return null if no options', () => {
+      expect(createProxyHandler(null as any)).toBeNull();
+    });
+
+    let sourceServerPort = 8080;
+    let sourceServer: Server | null = null;
+    beforeAll(async () => {
+      sourceServerPort = await portfinder.getPortPromise();
+      sourceServer = createServer((req, res) => {
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        res.write(req.url?.slice(1));
+        res.end();
+      }).listen(sourceServerPort);
+    });
+
+    afterAll(() => {
+      if (sourceServer) {
+        sourceServer.close();
+      }
+    });
+
+    test('should proxy correctly use simply options', async () => {
+      const port = await portfinder.getPortPromise();
+      const middlewares = createProxyHandler({
+        '/simple': `http://127.0.0.1:${sourceServerPort}`,
+      });
+      const proxyHandler = middlewares![0];
+
+      const server = createServer((req, res) => {
+        const context = createContext(req, res);
+        proxyHandler(context, () => {
+          throw new Error('should not happened');
+        });
+      }).listen(port);
+
+      try {
+        const { data } = await axios.get(`http://127.0.0.1:${port}/simple`);
+        expect(data).toBe('simple');
+      } finally {
+        server.close();
+      }
+    });
+
+    test('should proxy correctly use simply obj options', async () => {
+      const port = await portfinder.getPortPromise();
+      const middlewares = createProxyHandler({
+        '/simple-obj': {
+          target: `http://127.0.0.1:${sourceServerPort}`,
+        },
+      });
+      const proxyHandler = middlewares![0];
+
+      const server = createServer((req, res) => {
+        const context = createContext(req, res);
+        proxyHandler(context, () => {
+          throw new Error('should not happened');
+        });
+      }).listen(port);
+
+      try {
+        const { data } = await axios.get(`http://127.0.0.1:${port}/simple-obj`);
+        expect(data).toBe('simple-obj');
+      } finally {
+        server.close();
+      }
+    });
+
+    test('should proxy correctly use context options', async () => {
+      const port = await portfinder.getPortPromise();
+      const middlewares = createProxyHandler({
+        context: '/context',
+        target: `http://127.0.0.1:${sourceServerPort}`,
+      });
+      const proxyHandler = middlewares![0];
+
+      const server = createServer((req, res) => {
+        const context = createContext(req, res);
+        proxyHandler(context, () => {
+          throw new Error('should not happened');
+        });
+      }).listen(port);
+
+      try {
+        const { data } = await axios.get(`http://127.0.0.1:${port}/context`);
+        expect(data).toBe('context');
+      } finally {
+        server.close();
+      }
+    });
+
+    test('should proxy correctly use array options', async () => {
+      const port = await portfinder.getPortPromise();
+      const middlewares = createProxyHandler([
+        {
+          context: '/array',
+          target: `http://127.0.0.1:${sourceServerPort}`,
+        },
+      ]);
+      const proxyHandler = middlewares![0];
+
+      const server = createServer((req, res) => {
+        const context = createContext(req, res);
+        proxyHandler(context, () => {
+          throw new Error('should not happened');
+        });
+      }).listen(port);
+
+      try {
+        const { data } = await axios.get(`http://127.0.0.1:${port}/array`);
+        expect(data).toBe('array');
+      } finally {
+        server.close();
+      }
+    });
+  });
+});
+/* eslint-enable max-nested-callbacks */