/nut

🌰 A framework born for micro frontends

Primary LanguageHTMLMIT LicenseMIT

nut logo

NUT Project

npm version dependencies node version build status npm downloads license

Features

  • Flexible layout mechanism
  • File-based router system
  • Customizable layouts and themes
  • Builtin markdown support
  • System events
  • Configuration management
  • Convenient hot reload during development
  • Plugin system

layout / theme HMR

hmr.gif

markdown theme HMR

markdown-theme-hmr.gif

System events

system-events.jpg

Route matching

route-match.jpg

Builtin layouts

default

ocean sakura
ocean sakura

saber

ocean sakura
ocean sakura

now

now

How to write a layout

...

How to write a plugin

A standard plugin looks like

export default {
  name: 'your-superb-plugin',
  // some special plugin need specify type,but you can ignore this in most cases
  type: 'login',
  apply( ctx = {}, options = {} ) {
    const { api, events } = ctx

    api.expose( 'method_name', () => {} )
    api.expose( 'prop', 'value' )

    events.on( 'system:before-startup', async ctx => {
      await api.axios() // do some request
      await events.pluginEmit( 'some-event', data ) // emit plugin event out
    } )
  }
}

You can expose some methods or props to application, or listen for system events, emit out some event in plugin

Using plugin

nut.config.js

module.exports = {
  plugins: {
    superb: {
      package: 'your-superb-plugin',
      enable: true,
    }
  }
}

superb is the name in current application

Use above plugin for example

// plugin exposed
ctx.use( 'superb', 'method_name' )
ctx.use( 'superb', 'prop' )

// plugin events
ctx.events.on( 'plugin:superb:some-event', async data => {} )

Get started

yarn global add @nut-project/cli
nut # develop locally
nut --prod # build for production