styleguidist/react-styleguidist v6.0.0

on GitHub

Breaking changes

Changed fenced code blocks handling in Markdown

Any code block with a language tag of js, jsx or javascript will be rendered as a React component with a interactive playground.

React component example:

```js
<Button size="large">Push Me</Button>
```

You can disable an editor by passing a 'noeditor' modifier:

```jsx noeditor
<Button>Push Me</Button>
```

You can disable a playground by passing a 'static' modifier:

```jsx static
import React from 'react';
```

Examples with all other languages are rendered only as highlighted source code, not an actual component:

```html
<Button size="large">Push Me</Button>
```

Fenced code blocks without a language or indented code blocks are rendered as before: with an interactive playground.

A custom example language for fenced code blocks was removed.

You can customize this behavior with the new updateExample config option. For example you can use it to load examples from files:

module.exports = {
  updateExample: function(props) {
    const { settings, lang } = props;
    if (typeof settings.file === 'string') {
      const filepath = settings.file;
      delete settings.file;
      return {
        content: fs.readFileSync(filepath),
        settings,
        lang,
      }
    }
    return props;
  }
};

Use it like this in you Markdown files:

```js { "file": "./some/file.js" }
```

Removed webpack 1 support

Webpack 2+ is required now.

How to migrate

1. Add a static modifier to all fenced code block with a language tag of js, jsx or javascript:

   ```js →  ```js static

2. (Recommended) Replace any fenced code blocks that have example language with fenced code blocks with a language tag of js, jsx or javascript:

   ```example →  ```js

3. (Recommended) Replace indented code blocks with fenced code blocks with a language tag of js, jsx or javascript:

    5.x:
   
        <Button size="large">Push Me</Button>
   
    6.x:
   
    ```js
    <Button size="large">Push Me</Button>
    ```