open-index/open-npm huggingface dataset:
npm package: @poi/plugin-riot
Description: Use [Riot](http://riotjs.com/) with Poi.
Latest version: 10.0.1

# plugin-riot

Use [Riot](http://riotjs.com/) with Poi.

## Install

```bash
yarn add @poi/plugin-riot --dev
```

## Usage

Activate it in config file:

```js
// poi.config.js
module.exports = {
  plugins: [
    require('@poi/plugin-riot')()
  ]
}
```

## License

[MIT](https://oss.ninja/mit/egoist) &copy; [EGOIST](https://github.com/egoist)
npm package: @poi/plugin-storybook
Description: ## Install
Latest version: 11.0.1

# plugin-storybook

## Install

```bash
yarn add @poi/plugin-storybook --dev

# Use React?
yarn add @storybook/react --dev
# Use Vue? 
yarn add @storybook/vue --dev
```

## Usage

The first entry will be used as storybook config file, and the second one (optional) will be used as storybook addons file.

```js
// poi.config.js
module.exports = {
  // Use your storybook config as entry
  entry: '.storybook/config.js',
  // If you want storybook addons:
  // entry: ['.storybook/config.js', '.storybook/addons.js']
  plugins: [
    require('@poi/plugin-storybook')()
  ],

  // To use with React:
  // The order matters!
  plugins: [
    require('@poi/plugin-react')(),
    require('@poi/plugin-storybook')()
  ]
}
```

Then create storybook config file and components:

Just like how the [official storybook guide](https://storybook.js.org/basics/guide-vue/) told you, but without installing storybook cli.

```js
// .storybook/config.js
import { configure } from '@storybook/vue'

function loadStories() {
  // You can require as many stories as you need.
  require('../src/stories')
}

configure(loadStories, module)
```

And your actual story `src/stories/index.js`:

```js
import { storiesOf } from '@storybook/vue'

import Mybutton from './path/to/your/lovely/Button.vue'

storiesOf('MyButton', module)
  .add('round component', () => ({
    components: { MyButton },
    template: '<my-button :rounded="true">rounded</my-button>'
  }))
  .add('jsx', () => ({
    render() {
      return <MyButton>JSX</MyButton>
    }
  }))
```


And you're all set, run `poi` to see your storybook in action:

```bash
poi
poi build
```

Here's the source code of [a complete example](https://github.com/poi-examples/storybook-vue-example).


### Using markdown file

You can import `.md` files and they will be parsed by `markdown-loader` using `marked`, however you might want to use your own loader to parse markdown files:

```js
// poi.config.js
module.exports = {
  chainWebpack(config) {
    const markdownRule = config.rules.get('markdown')
    // Use markdown-it instead
    markdownRule.replace('markdown-loader', 'markdown-it-loader', {
      /* maybe some options */
    })
  }
}
```

## Options

### managerTemplate

Type: `string`<br>
Default: [`./lib/manager.ejs`](./lib/manager.ejs)

Path to the HTML template for generated `index.html`.

### iframeTemplate

Type: `string`<br>
Default: [`./lib/iframe.ejs`](./lib/iframe.ejs)

Path to the HTML template for generated `iframe.html`.

### markdown

Type: `boolean`<br>
Default: `undefined`

Whether to support `.md` files or not.

## Gotchas

[Vue-devtools does not work for now](https://github.com/storybooks/storybook/issues/1708).

## License

[MIT](https://oss.ninja/mit/egoist) &copy; [EGOIST](https://github.com/egoist)
npm package: @poi/plugin-sw-precache
Description: Integrated [sw-precache-webpack-plugin](https://github.com/goldhand/sw-precache-webpack-plugin) into production configuration to add Progressive Web App support.
Author: EGOIST
Latest version: 10.0.1

# plugin-sw-precache

Integrated [sw-precache-webpack-plugin](https://github.com/goldhand/sw-precache-webpack-plugin) into production configuration to add Progressive Web App support.

This is basically extracted from [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) but as a Poi plugin.

A live example can be found at: https://poi-sw-precache.surge.sh, you can enable `offline` mode in chrome devtools to check if it works for you.

## Install

```bash
yarn add @poi/plugin-sw-precache
```

## Usage

Add the plugin to your config file:

```js
module.exports = {
  plugins: [
    require('@poi/plugin-sw-precache')()
  ]
}
```

Then register service worker in your entry file:

```js
import register from '@poi/plugin-sw-precache/register-service-worker'

register()
```

To have a full progressive web app support, you need to put your PWA metadata file at `./static/manifest.json`, here's an example:

```json

{
  "short_name": "Poi App",
  "name": "My Sample App",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
```

And of course `favicon.ico` is also required in this example.

### Service worker events

You can use your own version of [./register-service-worker.js](./register-service-worker.js) to handle service worker events, like what to perform when new updates of your app are available, by default it simply logs a message and users to to refresh browser to see updated version.

## License

[MIT](https://oss.ninja/mit/egoist) &copy; [EGOIST](https://github.com/egoist)