https://github.com/unplugin/unplugin-unified

unified pipeline integration with unplugin
https://github.com/unplugin/unplugin-unified

unified unplugin

Last synced: 3 months ago
JSON representation

unified pipeline integration with unplugin

• Host: GitHub
• URL: https://github.com/unplugin/unplugin-unified
• Owner: unplugin
• License: mit
• Created: 2023-08-22T13:08:39.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-30T14:24:34.000Z (about 1 year ago)
• Last Synced: 2024-07-07T22:19:28.522Z (4 months ago)
• Topics: unified, unplugin
• Language: TypeScript
• Homepage:
• Size: 78.1 KB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# unplugin-unified

[![NPM version](https://img.shields.io/npm/v/unplugin-unified?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-unified)

[unified](https://github.com/unifiedjs/unified) pipeline integration with [unplugin](https://github.com/unjs/unplugin), for Vite, Rollup, Webpack, Nuxt, esbuild, and more.

## Install

```bash

npm i unplugin-unified

```

Vite


```ts

// vite.config.ts

import Unified from 'unplugin-unified/vite'

export default defineConfig({

  plugins: [

    Unified({ /* options */ }),

  ],

})

```

Example: [`playground/`](./playground/)




Rollup


```ts

// rollup.config.js

import Unified from 'unplugin-unified/rollup'

export default {

  plugins: [

    Unified({ /* options */ }),

  ],

}

```




Webpack


```ts

// webpack.config.js

module.exports = {

  /* ... */

  plugins: [

    require('unplugin-unified/webpack')({ /* options */ })

  ]

}

```




Nuxt


```ts

// nuxt.config.js

export default {

  buildModules: [

    ['unplugin-unified/nuxt', { /* options */ }],

  ],

}

```

> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)




Vue CLI


```ts

// vue.config.js

module.exports = {

  configureWebpack: {

    plugins: [

      require('unplugin-unified/webpack')({ /* options */ }),

    ],

  },

}

```




esbuild


```ts

// esbuild.config.js

import { build } from 'esbuild'

import Unified from 'unplugin-unified/esbuild'

build({

  plugins: [

    Unified({ /* options */ })

  ],

})

```




## Configurations

This plugin allows you to configure multiple `unified` processors based on the file id. You can pass an array of rules to the plugin with different configurations.

```ts

import remarkParse from 'remark-parse'

import remarkRehype from 'remark-rehype'

import remarkGfm from 'remark-gfm'

import rehypeRaw from 'rehype-raw'

import rehypeStringify from 'rehype-stringify'

import rehypeShikiji from 'rehype-shikiji'

// configure the plugin

Unified({

  rules: [

    {

      // match for `*.md` files

      include: /\.md$/,

      // setup the unified processor

      setup: unified => unified

        .use(remarkParse)

        .use(remarkGfm)

        .use(remarkRehype, { allowDangerousHtml: true })

        .use(rehypeRaw)

        .use(rehypeShikiji, { themes: { dark: 'vitesse-dark', light: 'vitesse-light' } })

        .use(rehypeStringify),

      // custom transformers

      transform: {

        post(html) {

          // wrap the generated HTML with `export default`

          return `export default (${JSON.stringify(html)})`

        },

      },

    },

    {

      include: /\.vue$/,

      exclude: /node_modules/,

      enforce: 'pre', // run before vue plugins

      // ...

    },

    // ... more rules

  ],

})

```