egg-view-react-loadable

    0.1.3 • Public • Published

    egg-view-react-loadable

    NPM version build status Test coverage David deps Known Vulnerabilities npm download

    React loadable SSR view plugin for egg

    Features

    • Code splitting
    • Server Side Rendering
    • Full dynamic import

    see https://loadable-components.com/ for more detail.

    Install

    $ npm i egg-view-react-loadable --save
    $ npm i egg-view-nunjucks --save

    Usage

    // {app_root}/config/plugin.js
    exports.nunjucks = {
      enable: true,
      package: 'egg-view-nunjucks',
    };
    
    exports.reactLoadable = {
      enable: true,
      package: 'egg-view-react-loadable',
    };

    Configuration

    // {app_root}/config/config.default.js
    exports.view = {
      root: [
        path.join(app.baseDir, 'app/view'),
        path.join(app.baseDir, 'app/public/ssr'),
      ].join(','),
      mapping: {
        '.html': 'nunjucks',
        '.js': 'reactLoadable',
      },
    };
    
    exports.reactLoadable = {
      nodeStatsFile: path.join(app.baseDir, 'app/public/ssr/loadable-stats.json'),
      webStatsFile: path.join(app.baseDir, 'app/public/csr/loadable-stats.json'),
      template: {
        // template config for `ctx.renderSSR`
        renderSSR: {
          renderSSRTemplate: path.join(app.baseDir, 'app/view/renderSSRLayout.html'),
          viewEngine: 'nunjucks',
        },
        
        // template config for `ctx.renderToStream`
        renderToStream: {
          renderToStreamStartTemplate: path.join(app.baseDir, 'app/view/renderToStreamStartTemplate.html'),
          renderToStreamEndTemplate: path.join(app.baseDir, 'app/view/renderToStreamEndTemplate.html'),
          viewEngine: 'nunjucks',
        },
      },
    };

    see config/config.default.js for more detail.

    Template

    template for ctx.renderSSR

    <!--  {app_root}/app/view/renderSSRLayout.html -->
    <!doctype html>
    <head>
        <meta charSet="utf-8"/>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
        <title>{{title}}</title>
        ${styleTags}
    </head>
    <body>
        <div id="app">${content}</div>
        ${initStateContent}
        ${scriptTags}
    </body>
    </html>

    template for ctx.renderToStream

    <!--  {app_root}/app/view/renderToStreamStartTemplate.html -->
    <!doctype html>
    <head>
      <meta charSet="utf-8"/>
      <meta name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
      <title>{{title}}</title>
    </head>
    <body>
    <div id="app">
    <!--  {app_root}/app/view/renderToStreamEndTemplate.html -->
      </div>
      ${initStateContent}
      ${scriptTags}
    </body>
    </html>

    Render

    ctx.renderSSR

    // controller/home.js
    module.exports = app => {
      return class HomeController extends app.Controller {
        async index() {
          const { ctx } = this;
          const { url, path } = ctx;
    
          await ctx.renderSSR({
            url,
            path,
          });
        }
      };
    };

    ctx.renderToStream

    // controller/home.js
    module.exports = app => {
      return class HomeController extends app.Controller {
        async index() {
          const { ctx } = this;
          const { url, path } = ctx;
    
          await ctx.renderToStream({
            url,
            path,
          });
        }
      };
    };

    Questions & Suggestions

    Please open an issue here.

    License

    MIT

    Install

    npm i egg-view-react-loadable

    DownloadsWeekly Downloads

    2

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • bingdian