0.0.0 • Published 9 months ago

unplugin-unified v0.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

unplugin-unified

NPM version

unified pipeline integration with unplugin, for Vite, Rollup, Webpack, Nuxt, esbuild, and more.

Install

npm i unplugin-unified
// vite.config.ts
import Unified from 'unplugin-unified/vite'

export default defineConfig({
  plugins: [
    Unified({ /* options */ }),
  ],
})

Example: playground/

// rollup.config.js
import Unified from 'unplugin-unified/rollup'

export default {
  plugins: [
    Unified({ /* options */ }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-unified/webpack')({ /* options */ })
  ]
}

// nuxt.config.js
export default {
  buildModules: [
    ['unplugin-unified/nuxt', { /* options */ }],
  ],
}

This module works for both Nuxt 2 and Nuxt Vite

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-unified/webpack')({ /* options */ }),
    ],
  },
}

// 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.

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
  ],
})