Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
144 lines (105 sloc) 2.87 KB

Node.js API

Initialization

First, you need to initialize the API for your style guide config.

Using a JavaScript object:

const styleguidist = require('react-styleguidist')
const styleguide = styleguidist({
  logger: {
    warn: console.warn,
    info: console.log,
    debug: console.log
  },
  components: './lib/components/**/*.js',
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules'
        }
      ]
    }
  }
})

Note: any output is disabled by default, you may need to define your own logger.

Using a config file:

const styleguidist = require('react-styleguidist')
const styleguide = styleguidist(require('../styleguide.config.js'))

Or auto searching a config file:

const styleguidist = require('react-styleguidist')
const styleguide = styleguidist()

See all available config options.

Methods

build(callback)

Arguments

  1. callback(err, config, stats) (Function): A callback to be invoked when style guide is built:

    1. err (Object): error details.
    2. config (Object): normalized style guide config.
    3. stats (Object): webpack build stats.

Returns

(Compiler): webpack Compiler instance.

Example

const styleguidist = require('react-styleguidist')
styleguidist(require('../styleguide.config.js')).build(
  (err, config) => {
    if (err) {
      console.log(err)
    } else {
      console.log('Style guide published to', config.styleguideDir)
    }
  }
)

server(callback)

Arguments

  1. callback(err, config) (Function): A callback to be invoked when style guide is built:

    1. err (Object): error details.
    2. config (Object): normalized style guide config.

Returns

(Object): Object containing a webpack Compiler instance and the React Styleguidist server

Example

const styleguidist = require('react-styleguidist')
styleguidist(require('../styleguide.config.js')).server(
  (err, config) => {
    if (err) {
      console.log(err)
    } else {
      const url = `http://${config.serverHost}:${config.serverPort}`
      console.log(`Listening at ${url}`)
    }
  }
)

makeWebpackConfig([env])

Arguments

  1. [env='production'] (String): production or development.

Returns

(Object): webpack config.

Example

// webpack.config.js
module.exports = [
  {
    // User webpack config
  },
  require('react-styleguidist')().makeWebpackConfig()
]