Creating Plugins

Plugins give you the ability to modify Docz processes, default configurations and create hooks for build and render. This is a perfect place to integrate Docz with other tools.

To create a plugin you just need to use the createPlugin method from docz-core

import { createPlugin } from 'docz-core'

const myPlugin = () => createPlugin({
  setConfig: (config) => /* ... */,
  onCreateBabelConfig: (args) => /* ... */,
  onCreateDevServer: (args) => /* ... */,
  onCreateWebpackConfig: (args) => /* ... */,
  modifyFiles: (files, args) => /* ... */,
  modifyEntry: (args) => /* ... */,
  onPreBuild: () => /* ... */,
  onPostBuild: () => /* ... */,
})

setConfig

Use to modify or create custom project configurations.

Params

• config: Default configuration object

Return

• Config

onCreateWebpackConfig

Let plugins extend/mutate the site’s webpack configuration.

See also the documentation for setWebpackConfig.

Params

stage {string} The current build stage. One of ‘develop’, ‘develop-html’, ‘build-javascript’, or ‘build-html’

getConfig {function} Returns the current webpack config

rules {object} A set of preconfigured webpack config rules

loaders {object} A set of preconfigured webpack config loaders

plugins {object} A set of preconfigured webpack config plugins

actions {object}

Example

exports.onCreateWebpackConfig = ({
  stage, getConfig, rules, loaders, actions
}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: 'my-css',
          use: [loaders.style(), loaders.css()]
        },
      ],
    },
  });
}

onCreateBabelConfig

Use to modify babelrc configuration

Params

stage {string} The current build stage. One of ‘develop’, ‘develop-html’, ‘build-javascript’, or ‘build-html’

getConfig {function} Returns the current webpack config

rules {object} A set of preconfigured webpack config rules

loaders {object} A set of preconfigured webpack config loaders

plugins {object} A set of preconfigured webpack config plugins

actions {object}

Example

exports.onCreateBabelConfig = ({
  stage, getConfig, rules, loaders, actions
}) => {
  actions.setBabelPlugin({
    name:  `@emotion/babel-plugin`,
    options: {
      sourceMap: true,
    },
  })
}

modifyFiles

Use to modify mdx files before parsing

Params

• files: Files parsed by Docz
• args: The Docz config object merged with argv

Return

• string[]

Types definitions

export type ModifyFiles = (files: string[], args: Config) => string[]

modifyEntry

Use to modify files entry after created

Params

• entry: files entry by Docz
• args: The Docz config object merged with argv

Return

• Entry

Types definitions

export type ModifyEntry = (entry: Entry, args: Config) => Entry

onCreateDevServer

Run when gatsby develop server is started, its useful to add proxy and middleware to the dev server app

Params

• app {Express} The Express app used to run the dev server

Example

exports.onCreateDevServer = ({ app }) => {
  app.get('/hello', function (req, res) {
    res.send('hello world')
  })
}

onPreBuild

Method triggered before the build process

Params

• config: Default bundler configuration object

Return

• void

Type definitions

type OnPreBuild<C = any> = (config: C) => void

onPostBuild

Method triggered after the build process

Params

• config: Default bundler configuration object

Return

• void

Type definitions

type onPostBuild<C = any> = (config: C) => void