Feat: Support import statements in examples (styleguidist#1109)

Closes styleguidist#1074

Author: sapegin

docs/Cookbook.md

@@ -69,12 +69,13 @@ module.exports = {
 
 Enable [skipComponentsWithoutExample](Configuration.md#skipcomponentswithoutexample) option and do not add example file (`Readme.md` by default) to components you want to ignore.
 
-Require these components in your examples:
+Import these components in your examples:
 
-```jsx
-const Button = require('../common/Button')
+````jsx
+// ```jsx inside Markdown
+import Button from '../common/Button'
 ;<Button>Push Me Tender</Button>
-```
+````
 
 Or, to make these components available for all examples:
 
@@ -89,16 +90,17 @@ import Button from './src/components/common/Button'
 global.Button = Button
 ```
 
-The `Button` component will be available in every example without a need to `require` it.
+The `Button` component will be available in every example without a need to `import` it.
 
 ## How to render React components that aren’t part of the style guide?
 
-Require these components in your examples:
+Import these components in your examples:
 
-    ```jsx noeditor
-    const ColorPalette = require('./components/ColorPalette').default
-    ;<ColorPalette />
-    ```
+````jsx
+// ```jsx or ```jsx noeditor inside Markdown
+import ColorPalette from './components/ColorPalette'
+;<ColorPalette />
+````
 
 ## How to dynamically load other components in an example?
 
@@ -117,11 +119,9 @@ const icons = iconsContext.keys().reduce((icons, file) => {
 export default icons
 ```
 
-````markdown
-// IconGallery.md
-
-```jsx noeditor
-const icons = require('./load-icons').default
+````jsx
+// ```jsx or ```jsx noeditor inside Markdown
+import icons from './load-icons'
 const iconElements = Object.keys(icons).map(iconName => {
   const Icon = icons[iconName]
   return (
@@ -131,7 +131,6 @@ const iconElements = Object.keys(icons).map(iconName => {
   )
 })
 <div>{iconElements}</div>
-```
 ````
 
 ## How to display the source code of any file?
@@ -277,13 +276,13 @@ For example you can replace the `Wrapper` component to wrap any example in the [
 const path = require('path')
 module.exports = {
   styleguideComponents: {
-    Wrapper: path.join(__dirname, 'lib/styleguide/Wrapper')
+    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
   }
 }
 ```
 
 ```jsx
-// lib/styleguide/Wrapper.js
+// src/styleguide/Wrapper.js
 import React, { Component } from 'react'
 import { IntlProvider } from 'react-intl'
 export default class Wrapper extends Component {
@@ -304,14 +303,14 @@ module.exports = {
   styleguideComponents: {
     StyleGuideRenderer: path.join(
       __dirname,
-      'lib/styleguide/StyleGuideRenderer'
+      'src/styleguide/StyleGuideRenderer'
     )
   }
 }
 ```
 
 ```jsx
-// lib/styleguide/StyleGuideRenderer.js
+// src/styleguide/StyleGuideRenderer.js
 import React from 'react'
 const StyleGuideRenderer = ({
   title,

docs/Documenting.md

@@ -234,14 +234,15 @@ Code examples in Markdown use ES6+JSX syntax. All components covered by the styl
 
 > **Note:** Styleguidist uses [Bublé](https://buble.surge.sh/guide/) to run ES6 code on the frontend, it supports [most of the ES6 features](https://buble.surge.sh/guide/#unsupported-features).
 
-You can also `require()` other modules (like mock data for unit tests):
+You can also `import` other modules (like mock data for unit tests):
 
-```jsx
-const mockData = require('./mocks')
+````jsx
+// ```jsx inside Markdown
+import mockData from './mocks'
 ;<Message content={mockData.hello} />
-```
+````
 
-> **Note:** You can only use `require()` in Markdown files. ES6 `import()` syntax isn’t supported.
+> **Note:** You can only use `import` by editing your Markdown files, not by editing the example code in the browser.
 
 Each example has its own state that you can access as `state` variable and change with `setState()` function. Default state is `{}` and can be set with `initialState`.
 
@@ -287,7 +288,7 @@ class ModalExample extends React.Component {
 ;<ModalExample />
 ```
 
-> **Note:** If you need a more complex demo it’s often a good idea to define it in a separate JavaScript file and `require` it in Markdown.
+> **Note:** If you need a more complex demo it’s often a good idea to define it in a separate JavaScript file and `import` it in Markdown.
 
 ## Limitations
 

docs/Thirdparties.md

@@ -58,11 +58,12 @@ Please see our [examples](https://github.com/styleguidist/react-styleguidist/tre
 
 ### Redux
 
-To use Redux store with one component, require it from your example:
+To use Redux store with one component, import it from your Markdown example:
 
-```jsx
-const { Provider } = require('react-redux')
-const configureStore = require('../utils/configureStore').default
+````jsx
+// ```jsx inside Markdown
+import { Provider } from 'react-redux'
+import configureStore from '../utils/configureStore'
 const initialState = {
   app: {
     name: 'Pizza Delivery'
@@ -72,25 +73,25 @@ const store = configureStore({ initialState })
 ;<Provider store={store}>
   <App greeting="Choose your pizza!" />
 </Provider>
-```
+````
 
-To use Redux store in every component redefine the `Wrapper` component:
+To use Redux store in every component, redefine the `Wrapper` component:
 
 ```javascript
 // styleguide.config.js
 const path = require('path')
 module.exports = {
   styleguideComponents: {
-    Wrapper: path.join(__dirname, 'lib/styleguide/Wrapper')
+    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
   }
 }
 ```
 
 ```jsx
-// lib/styleguide/Wrapper.js
+// src/styleguide/Wrapper.js
 import React, { Component } from 'react'
-const { Provider } = require('react-redux')
-const configureStore = require('../utils/configureStore').default
+import { Provider } from 'react-redux'
+import configureStore from '../utils/configureStore'
 const initialState = {
   app: {
     name: 'Pizza Delivery'
@@ -138,7 +139,6 @@ import Relay from 'real-react-relay'
 ```js
 // styleguide.config.js
 module.exports = {
-  // ...
   context: {
     sample: path.join(__dirname, 'src/styleguide/sample_data')
   }
@@ -154,10 +154,10 @@ module.exports = {
 }
 ```
 
-```jsx
-// src/MyComponent/Readme.md
+````jsx
+// ```jsx inside Markdown
 <MyComponent object={sample.object} />
-```
+````
 
 _Based on @mikberg’s [blog post](https://medium.com/@mikaelberg/writing-simple-unit-tests-with-relay-707f19e90129)._
 
@@ -198,7 +198,6 @@ First, create your `Wrapper` component. For this example we’ll put it in the `
 
 ```jsx
 // styleguide/ThemeWrapper.js
-
 import React, { Component } from 'react'
 import { ThemeProvider } from 'styled-components'
 import theme from 'where/your/theme/lives'
@@ -217,13 +216,12 @@ export default class ThemeWrapper extends Component {
 Next, add `ThemeWrapper` to your `styleguide.config.js`.
 
 ```javascript
-const path = require('path');
-
+// styleguide.config.js
+const path = require('path')
 module.exports = {
-  ...
   styleguideComponents: {
-    Wrapper: path.join(__dirname, 'styleguide/ThemeWrapper'),
-  },
+    Wrapper: path.join(__dirname, 'styleguide/ThemeWrapper')
+  }
 }
 ```
 
@@ -259,13 +257,14 @@ This approach will also work with [react-css-themr](https://github.com/javivelas
 
 To use Styletron store with one component, require it from your example:
 
-```jsx
-const Styletron = require('styletron-client')
-const { StyletronProvider } = require('styletron-react')
+````jsx
+// ```jsx inside Markdown
+import Styletron from 'styletron-client'
+import { StyletronProvider } from 'styletron-react'
 ;<StyletronProvider styletron={new Styletron()}>
   <App greeting="Choose your pizza!" />
 </StyletronProvider>
-```
+````
 
 To use Styletron in every component redefine the Wrapper component:
 
@@ -274,18 +273,16 @@ To use Styletron in every component redefine the Wrapper component:
 const path = require('path')
 module.exports = {
   styleguideComponents: {
-    Wrapper: path.join(__dirname, 'lib/styleguide/Wrapper')
+    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
   }
 }
 ```
 
 ```jsx
-// lib/styleguide/Wrapper.js
+// src/styleguide/Wrapper.js
 import React, { Component } from 'react'
-
 import Styletron from 'styletron-client'
 import { StyletronProvider } from 'styletron-react'
-
 export default class Wrapper extends Component {
   render() {
     return (

examples/basic/src/components/RandomButton/Readme.md

@@ -1,6 +1,6 @@
-You can `require` external files in your examples:
+You can `import` external files in your examples:
 
 ```jsx
-const names = require('dog-names').all
-;<RandomButton variants={names} />
+import { all } from 'dog-names'
+;<RandomButton variants={all} />
 ```

examples/cra/src/components/RandomButton.md

@@ -1,6 +1,6 @@
-You can `require` external files in your examples:
+You can `import` external files in your examples:
 
 ```jsx
-const names = require('dog-names').all
-;<RandomButton variants={names} />
+import { all } from 'dog-names'
+;<RandomButton variants={all} />
 ```

examples/customised/src/components/RandomButton/Readme.md

@@ -1,5 +1,6 @@
-You can `require` external files in your examples:
+You can `import` external files in your examples:
 
 ```jsx
-<RandomButton variants={require('dog-names').all} />
+import { all } from 'dog-names'
+;<RandomButton variants={all} />
 ```

examples/preact/src/components/RandomButton/Readme.md

@@ -1,5 +1,6 @@
-You can `require` external files in your examples:
+You can `import` external files in your examples:
 
 ```jsx
-<RandomButton variants={require('dog-names').all} />
+import { all } from 'dog-names'
+;<RandomButton variants={all} />
 ```

examples/webpack/src/components/RandomButton.md

@@ -1,5 +1,6 @@
-You can `require` external files in your examples:
+You can `import` external files in your examples:
 
 ```jsx
-<RandomButton variants={require('dog-names').all} />
+import { all } from 'dog-names'
+;<RandomButton variants={all} />
 ```

package-lock.json

@@ -62,6 +62,7 @@
     "lodash": "^4.17.10",
     "lowercase-keys": "^1.0.1",
     "markdown-to-jsx": "^6.6.8",
+    "match-require": "^2.1.0",
     "mini-html-webpack-plugin": "^0.2.3",
     "minimist": "^1.2.0",
     "ora": "^2.1.0",
@@ -78,6 +79,7 @@
     "react-simple-code-editor": "^0.4.2",
     "recast": "^0.13.0",
     "remark": "^9.0.0",
+    "rewrite-imports": "^1.3.1",
     "to-ast": "^1.0.0",
     "type-detect": "^4.0.8",
     "uglifyjs-webpack-plugin": "1.2.7",