🌜
🌞
beidou-view

beidou-view

v2.3.0

beidou base view plugin

npm install beidou-view

README

Beidou base view

React view

Used by internal react and rax plugins.

Config

If config.view.useHashAsset is set true, beidou will use hashed assets on the page if not local env with the help of webpack build. You can set CDN path in publicPath, which will be included. Remember that, you should run beidou build first before use this feature.

You can define the assets mapping file with config.view.hashAssetPath, the default value of which is path.join(appInfo.baseDir, '.manifest.json').

Middlewares

We introduced View Middlewares mechanism since v1.0.0. The rendering process is fully defined by a combination of middlewares, which means you can redefined them or add custom ones if needed.

How is works

The ${viewType} below means a specific view implemented from beidou-view, such as react rax and so on.

Firstly, a rendering process accepts a context object, we call it View Context. And the context will be passed in many middlewares in sequence which defined in config.${viewType}.middlewares. For example, in beidou-view-react:

// config/config.default.js
module.exports = {
  react: {
    middlewares: ['cache', 'redux', 'partial', 'render', 'doctype', 'beautify'],
  },
};

The array in field react.middlewares contains names of view middlewares which correspond to the file located in all app/view-middlewares, both project and plugin directories.

Files in app/view-middlewares are automaticly loaded from all available pathes, so custom middlewares could be placed at your project directory of a custom plugin you write.

So, how is a view middleware like? Take doctype middleware for example:

module.exports = async function(viewCtx, next) {
  await next();

  const defaultDoctype = viewCtx.options.doctype;
  const { html, Component } = viewCtx;
  const doctype = Component.doctype || defaultDoctype;
  if (doctype && typeof doctype === 'string') {
    viewCtx.html = doctype + html;
  }
};

doctype interplolates html doctype after view component rendering finished when viewCtx.html produced.

The viewCtx.html is final context sended to browser.

List of Middlewares

cache

cache cleans require cache everytime a rendering begin when config.${viewType}.cache is true.

Configuration

File Field Type Default Description
config.${env}.js config.${viewType}.cache Boolean true Don't clean cache if true

initialprops

Inject props into Component before render.

File Field Type Default Description
View Component View.getInitialProps Function/Async undefined Inject props into Component

redux

Provide store constructing and serialization of redux.

File Field Type Default Description
View Component View.getStore Function/Async undefined function(viewCtx.props): StoreMap

See Redux Example for usage.

Why need serialization

Usually, we use JSON object wrapped in <script> tag to pass data from server to client. JSON.stringify is not safe because of XSS.

For example:

{
  foo: `</script>`;
}

String </script> close script tag in accident, data broken and page messed up.

We use serialize-javascript to serialize JavaScript to a superset of JSON that includes regular expressions and functions.

partial

Render react component into string Dymaticlly.

File Field Type Default Description
View Component View.getPartial Function/Async undefined function(viewCtx.props): ReactComponentMap

doctype

Define html doctype.

File Field Type Default Description
config.${env}.js config.${viewType}.doctype String '<!DOCTYPE html>' Global doctype config
View Component View.doctype String undefined View doctype config

beautify

Beautify html ouput.

File Field Type Default Description
config.${env}.js config.${viewType}.beautify String false enable/disable beautify

This may cause a React warning tells DOM element unmatch between server side and client side result. We recommend to use this in development, to get a friendly html format.

License

MIT

Release Notes

1.0.0
By Qing • Published on March 23, 2018

BREAKING CHANGE

  • Node version must >= 8
  • React/react-dom versions must >= 16
  • Replace koa-webpack-dev-middleware with webpack-dev-server
  • Remove app.helper.resolveResource, use app.helper.asset instead

Features

  • Upgrade to [email protected], support async/await style middlewares
  • All in one manage tool - beidou-cli, including init boilerplate, development, debug, test, build assets, start/stop production app, and so on.
  • Custom view rendering process by view middlewares
  • Support rax isomorphic rendering, see beidou-view-rax
  • Webpack support many frontend resource loaders, see code
  • Webpack support CSS Modules with .module.{css|scss|less} files
  • Dump webpack config to [root]/run directory
  • Custom babel client targets by configuration
  • Handle many reasonable default configs, you may not need a lot of options in your config files, see examples

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
2,732
Community Interest
3,112
Number of Forks
280

Maintenance

Commits
10/219/2202
Last Commit
Mar 1, 2022
Open Issues
15
Closed Issues
127
Open Pull Requests
36
Closed Pull Requests
56

Versions

Versions Released
10/219/2201
Latest Version Released
Current Tags
latest2.3.0
next2.0.0-beta.0

Contributors

njugray
njugray
Commits: 221
weichunpeng
weichunpeng
Commits: 162
devrsi0n
devrsi0n
Commits: 86
justquanyin
justquanyin
Commits: 26
ahungrynoob
ahungrynoob
Commits: 9
JacksonTian
JacksonTian
Commits: 2
xdlrt
xdlrt
Commits: 2
olivewind
olivewind
Commits: 1
fantasyroot
fantasyroot
Commits: 1
chenmingjia
chenmingjia
Commits: 1
davidnotes
davidnotes
Commits: 1
xiangxingchen
xiangxingchen
Commits: 1
weihomechen
weihomechen
Commits: 1
lanqy
lanqy
Commits: 1
kittBoy
kittBoy
Commits: 1