# @nut-project/dev-utils

> A framework born for micro frontends

Latest version **1.0.0-alpha.4** (published 2020-02-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nut-project/dev-utils
pnpm add @nut-project/dev-utils
yarn add @nut-project/dev-utils
bun add @nut-project/dev-utils
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.4 |
| Published | 2020-02-29 |
| First published | 2019-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.9.0 |
| Dependencies | 11 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fengzilong |
| Maintainers | fengzilong |
| Keywords | microfrontends, micro, frontend, architecture, spa, cli, static site generator, hmr |

## Links

- npm: https://www.npmjs.com/package/@nut-project/dev-utils
- Repository: https://github.com/nut-project/nut/tree/master/packages/gatherer
- Homepage: http://nut.js.org
- Issues: https://github.com/nut-project/nut/issues/new/choose
- npm.io page: https://npm.io/package/@nut-project/dev-utils

## Dependencies (11)

- [open](https://npm.io/package/open.md) ^7.0.0
- [chalk](https://npm.io/package/chalk.md) ^2.4.2
- [globby](https://npm.io/package/globby.md) ^10.0.1
- [signale](https://npm.io/package/signale.md) ^1.4.0
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.0.0
- [cosmiconfig](https://npm.io/package/cosmiconfig.md) ^5.2.1
- [cross-spawn](https://npm.io/package/cross-spawn.md) ^7.0.1
- [detect-port](https://npm.io/package/detect-port.md) ^1.3.0
- [import-from](https://npm.io/package/import-from.md) ^3.0.0
- [gradient-string](https://npm.io/package/gradient-string.md) ^1.2.0
- [install-packages](https://npm.io/package/install-packages.md) ^0.2.5

## Alternatives

- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads

## Recent versions

- 1.0.0-alpha.4 (latest) — 2020-02-29
- 1.0.0-alpha.3 — 2019-12-06

## README

<p align="center">
  <img width="100px" src="media/logo.png" alt="nut logo">
</p>

<h1 align="center">NUT Project</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@nut-project/cli">
    <img src="https://flat.badgen.net/npm/v/@nut-project/cli" alt="npm version">
  </a>
  <a href="https://github.com/nut-project/nut">
    <img src="https://flat.badgen.net/david/dep/nut-project/nut/packages/cli" alt="dependencies">
  </a>
  <a href="https://github.com/nut-project/nut">
    <img src="https://flat.badgen.net/npm/node/@nut-project/cli" alt="node version">
  </a>
  <a href="https://circleci.com/gh/nut-project/nut">
    <img src="https://flat.badgen.net/circleci/github/nut-project/nut/master" alt="build status">
  </a>
  <a href="https://www.npmjs.com/package/@nut-project/cli">
    <img src="https://flat.badgen.net/npm/dm/@nut-project/cli" alt="npm downloads">
  </a>
  <a href="https://github.com/nut-project/nut/blob/master/LICENSE">
    <img src="https://flat.badgen.net/npm/license/@nut-project/cli" alt="license">
  </a>
</p>

## 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

<img src="media/hmr.gif" alt="hmr.gif" width="600px">

## markdown theme HMR

<img src="media/markdown-theme-hmr.gif" alt="markdown-theme-hmr.gif" width="600px">


## System events

<img src="media/system-events.jpg" alt="system-events.jpg" width="300px">

## Route matching

<img src="media/route-match.jpg" alt="route-match.jpg" width="300px">

## Builtin layouts

#### default

| ocean | sakura |
| :---: | :---: |
| ![ocean](media/default-ocean.jpg) | ![sakura](media/default-sakura.jpg) |

#### saber

| ocean | sakura |
| :---: | :---: |
| ![ocean](media/saber-ocean.jpg) | ![sakura](media/saber-sakura.jpg) |

#### now

<img src="media/now.jpg" alt="now" width="400px">

### How to write a layout

...

### How to write a plugin

A standard plugin looks like

```js
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

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

superb is the name in current application

Use above plugin for example

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

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

## Get started

```bash
yarn global add @nut-project/cli
```

```bash
nut # develop locally
nut --prod # build for production
```

---
_Source: https://npm.io/package/@nut-project/dev-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._