midway-view

Base view component for midway.

Install

@midwayjs/view don't have build-in view engine, So you should choose a template engine like ejs, and install @midwayjs/view-ejs. View component will be auto install and enable by import view-ejs.

1$ npm i @midwayjs/view-ejs --save

Usage

First, import component in src/configuration.ts.

1import { Configuration } from '@midwayjs/core';
2import * as view from '@midwayjs/view-ejs';
3import { join } from 'path'
4
5@Configuration({
6  imports: [
7    // ...
8    view
9  ],
10  importConfigs: [
11    join(__dirname, 'config')
12  ]
13})
14export class ContainerLifeCycle {
15}

Configure the mapping, the file with .ejs extension will be rendered by ejs.

1// src/config/config.default.ts
2export const view = {
3  defaultViewEngine: 'ejs',
4  mapping: {
5    '.ejs': 'ejs',
6  },
7};
8
9// ejs config
10export const ejs = {};

In controller, you can call ctx.render.

1import { Inject, Provide } from '@midwayjs/core';
2import { Context } from '@midwayjs/koa';
3
4@Controller('/')
5export class HomeController {
6
7  @Inject()
8  ctx: Context;
9
10  @Get('/')
11  async render(){
12    await this.ctx.render('hello.ejs', {
13      data: 'world',
14    });
15  }
16}

Use multiple view engine

@midwayjs/view support multiple view engine, so you can use more than one template engine in one application.

If you want add another template engine like nunjucks, then you can add @midwayjs/view-nunjucks component.

Configure the plugin and mapping

1// src/config/config.default.ts
2export const view = {
3  mapping: {
4    '.ejs': 'ejs',
5    '.nj': 'nunjucks',
6  },
7};

You can simply render the file with .nj extension.

1await this.ctx.render('user.nj');

Write a view engine

Create a view engine class first, and implement render and renderString, if the template engine don't support, just throw an error.

1// lib/view.ts
2import { Provide } from '@midwayjs/core';
3
4@Provide()
5export class MyView {
6
7  @Config('xxxx')
8  viewConfig;
9
10  async render(fullpath, locals) {
11    return myengine.render(fullpath, locals);
12  }
13
14  async renderString() { throw new Error('not implement'); }
15};

These methods receive three arguments, renderString will pass tpl as the first argument instead of name in render.

render(name, locals, viewOptions)

• name: the file path that can resolve from root (/view by default)
• locals: data used by template
• viewOptions: the view options for each render, it can override the view default config in config/config.default.js. Plugin should implement it if it has config. When you implement view engine, you will receive this options from render, the options contain:
  • root: it will resolve the name to full path, but seperating root and name in viewOptions.
  • name: the original name when call render
  • locals: the original locals when call render

renderString(tpl, locals, viewOptions)

• tpl: the template string instead of the file, using in renderString
• locals: same as render
• viewOptions: same as render

Register

After define a view engine, you can register it.

1// src/configuration.ts
2import { Configuration, Inject, Provide } from '@midwayjs/core';
3import * as koa from '@midwayjs/koa';
4import * as view from '@midwayjs/view';
5import { MyView } from './lib/my';
6
7@Configuration({
8  imports: [koa, view],
9  importConfigs: [join(__dirname, 'config')]
10})
11export class AutoConfiguration {
12
13  @Inject()
14  viewManager: view.ViewManager;
15
16  async onReady(){
17    this.viewManager.use('ejs', MyView);
18  }
19}
20

You can define a view engine name, normally it's a template name.

Configuration

Root

Root is ${appDir}/view by default, but you can define multiple directory.

1export default appInfo => {
2  const appDir = appInfo.appDir;
3  return {
4    view: {
5      rootDir: {
6        default: `${appDir}/view`,
7        anotherDir: `${appDir}/view2`
8      }
9    }
10  }
11}

defaultExtension

When render a file, you should specify a extension that let @midway/view know which engine you want to use. However you can define defaultExtension without write the extension.

1// src/config/config.default.ts
2export const view = {
3  defaultExtension: '.html',
4};
5
6// controller
7import { Inject, Provide } from '@midwayjs/core';
8import { Context } from '@midwayjs/koa';
9
10@Controller('/')
11export class HomeController {
12
13  @Inject()
14  ctx: Context;
15
16  @Get('/')
17  async render(){
18    // render user.html
19    await this.ctx.render('user');
20  }
21}

viewEngine and defaultViewEngine

If you are using renderString, you should specify viewEngine in view config, see example above.

However, you can define defaultViewEngine without set each time.

1// config/config.default.js
2export const view = {
3  defaultViewEngine: 'ejs',
4};

License

MIT